/* EX分析　共通CSS */

/* ======================================================================
 * Sakura.cssの上書き
 * ====================================================================== */

/* Sakura.css が設定しているデザインを上書きする */

body, header, main, footer, nav.left-nav, .main-content, .content-wrapper {
    /* これらをグローバルに設定することで、各要素のデフォルトスタイルを上書きし、
       Flexboxレイアウトでコントロールしやすくします。 */
    width: 100%;
    max-width: none !important; /* Sakura.css の max-width を強制解除 */
    margin: 0 !important;       /* 中央寄せのためのmargin: auto; を強制リセット */
    padding: 0;                 /* Sakura.cssのデフォルトpaddingをリセット */
    box-sizing: border-box;     /* paddingを含めて要素の幅を計算する */
}

body{
    font-size: 1.6rem;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.8rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }

ul, ol, li {
    font-size: 1.4rem;
    list-style-type: none;
}

p, a {
    padding: 0.5rem;
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.6;
}

a:hover{
    border-bottom-color: #3d3d3d;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select.form-control,
textarea {
    display: block; /* ブロック要素にして縦に並ぶようにする */
    width: 100%; /* 親要素の全幅に広げる */
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1.4rem; /* フォントサイズを統一 */
    border-radius: 4px;
    box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"]{
    height: 3rem;
}

label{
    margin-bottom: 0;
}

select{
    margin-bottom: 0;
}

input,
textarea,
select{
    background-color: #fdfdfd;
    border: solid 1px #b7d7d5;
    border-radius: 0;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block; /* 余分なスペースをなくす */
}


/* ======================================================================
 * gridjs.cssの上書き
 * ====================================================================== */
th.gridjs-th{
    padding: 6px 12px;
}
td.gridjs-td {
    padding: 6px 12px;
}
.gridjs-currentPage{
    color: #3d4044;
}
.gridjs-pagination .gridjs-pages button{
    color: #3d4044;
}

/* ======================================================================
 * 共通スタイル
 * ====================================================================== */

body {
    display: flex;           /* Flexboxコンテナにする */
    flex-direction: column;  /* 子要素 (header, hidden-checkbox, content-wrapper, footer) を縦に並べる */
    min-height: 100vh;       /* 画面全体の高さをビューポートに合わせる */
}

/* nav と main を囲むコンテナ。デスクトップで横並びにするメインの領域。 */
.content-wrapper {
    display: flex;           /* Flexboxコンテナにする (navとmainを横並びにするため) */
    flex: 1;                 /* 残りの垂直方向のスペースを全て占める (フッターを下に押し下げる) */
}

/* メインコンテンツ領域 */
main {
    flex: 1;                 /* content-wrapper内で残りの水平方向のスペースを全て占める */
    padding: 0;              /* Sakura.cssのmainに対するpaddingをリセット */
}

main h2{
    margin: 0;
    margin-bottom: 1rem;
    color: #3e3e3e;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #3e3e3e;
}

.main-content {
    /* mainがflex:1を持つので、その中でpaddingを設定 */
    padding: 1rem;
    box-sizing: border-box;
}


/* メッセージボックスの共通スタイル */
.message-box {
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1.5rem;
    font-size: 1.4rem; /* 基本フォントサイズ */
}

.message-box .message-heading {
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 1.6rem; /* 見出しを少し大きく */
}

.message-box ul {
    list-style: disc inside; /* リストのスタイル */
    padding-left: 1.5rem; /* 左側にインデント */
    margin: 0;
}

.message-box li {
    margin-bottom: 0.3rem;
    word-wrap: break-word; /* 長いメッセージを折り返す */
}


/* 成功メッセージ */
.success-message {
    color: #388e3c; /* 緑 */
}
.success-summary {
    background-color: #e8f5e9; /* 薄い緑 */
    border: 1px solid #a5d6a7;
}

/* エラーメッセージ */
.error-message {
    color: #d32f2f; /* 赤 */
}
.error-summary {
    background-color: #ffebee; /* 薄い赤 */
    border: 1px solid #ef9a9a;
}

/* 警告メッセージ */
.warning-message {
    color: #f57f17; /* オレンジ */
}
.warning-summary {
    background-color: #fffde7; /* 薄い黄 */
    border: 1px solid #ffe082;
}


/* 検索エリア */
.search_area{
    background-color: #d5f0e3;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0.5rem;
}

/* テキスト右寄せ */
.text-right {
    text-align: right !important;
}

/* マイナス値の表示 */
.negative-value {
    color: #ff6347 !important;
}

/* 登録ボタン */
#register_button{
    width: 15rem;
    height: 4rem;
    font-size: 1.8rem;
}

/* レスポンシブデザイン（ウィンドウ幅が768px以下の場合に適用） */
@media (max-width: 768px) {
    /* content-wrapper のレイアウトを縦並びにする */
    .content-wrapper {
        flex-direction: column; /* ナビとメインを縦に並べる */
    }

    /* メインコンテンツは全幅を占める */
    main {
        flex: 1 0 auto; /* 伸長・縮小を許容し、ベースサイズはauto（コンテンツに合わせる） */
        width: 100%; /* 明示的に幅100% */
        padding-top: 1rem; /* ヘッダーとの間にパディング */
    }
}


/* ======================================================================
 * ヘッダー
 * ====================================================================== */
header {
    padding: 1rem;
    background-color: #3d3d3d; /* ユーザー提供CSSの色 */
    color: white;
    display: flex; /* h1とハンバーガーボタンの配置用 */
    align-items: center; /* 垂直中央揃え */
    justify-content: center; /* 初期はh1を中央寄せ */
    position: relative; /* ハンバーガーボタンの配置用 */
}

header h1 {
    margin: 0;
    font-size: 2.8rem;
    flex-grow: 1; /* h1が残りのスペースを占めるように */
}


/* レスポンシブデザイン（ウィンドウ幅が768px以下の場合に適用） */
@media (max-width: 768px) {
    header {
        /* justify-contentをspace-betweenに変更し、ハンバーガーボタンとh1を両端に */
        justify-content: space-between;
        /* ハンバーガーボタンの分だけ左にパディングを確保 */
        padding-left: 4rem;
        /* H1はflex-grow:1なので中央に配置し、右側にもボタン分のパディングを確保 */
        padding-right: 1rem; /* 右側のパディングはデフォルト値でOK */
    }

    header h1 {
        text-align: center; /* H1のテキスト自体を中央寄せ */
        margin: 0; /* デフォルトマージンをリセット */
        flex-grow: 1; /* 残りのスペースを占めるように */
    }
}


/* ======================================================================
 * フッター
 * ====================================================================== */
footer {
    padding: 1rem;
    background-color: #3d3d3d; /* ユーザー提供CSSの色 */
    color: white;
    text-align: center;
}

/* レスポンシブデザイン（ウィンドウ幅が768px以下の場合に適用） */
@media (max-width: 768px) {}


/* ======================================================================
 * ナビゲーション (左サイドバー)
 * ====================================================================== */
nav.left-nav {
    flex: 0 0 200px; /* デスクトップ表示での固定幅 (flex-grow:0, flex-shrink:0, base-size:200px) */
    padding: 1rem;
    background-color: #535353; /* ユーザー提供CSSの色 */
    color: white;
    box-sizing: border-box;
    /* transition for smooth slide-in/out (モバイル時のみ使用) */
    transition: transform 0.3s ease-in-out;
}

nav.left-nav h3 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1.3rem;
    color: white;
    font-size: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

nav.left-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

nav.left-nav li {
    margin-bottom: 0.5rem;
}

nav.left-nav a {
    display: block;
    padding: 0.5rem 1rem;
    color: white;
    text-decoration: none; /* 下線を削除 */
    transition: background-color 0.3s ease;
}

nav.left-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* レスポンシブデザイン（ウィンドウ幅が768px以下の場合に適用） */
@media (max-width: 768px) {
    /* レフトナビを初期状態では非表示にする（画面外に隠す） */
    nav.left-nav {
        position: fixed; /* 画面固定 */
        top: 0;          /* 画面上端から */
        left: 0;
        width: 200px;    /* ナビの幅を固定 */
        height: 100vh;   /* 画面の高さ全体 */
        transform: translateX(-100%) !important; /* 初期非表示を強制 */
        z-index: 999;    /* 他のコンテンツより手前に */
        box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* 影をつけて区別 */
    }

    nav.left-nav h3{
        margin-top: 5rem;
    }
}

/* ======================================================================
 * ハンバーガーメニュー関連 (CSSのみでの切り替え)
 * ====================================================================== */

/* 隠れたチェックボックス */
.hidden-checkbox {
    display: none; /* チェックボックス自体は画面に表示しない */
}

/* ハンバーガーメニューボタン (label要素) */
.hamburger-menu-toggle {
    display: none; /* デフォルトでは非表示（PC表示） */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute; /* header内での配置 */
    left: 1rem; /* 左端に配置 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.hamburger-menu-toggle .line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* ハンバーガーメニューのアニメーション (チェックボックスの状態に応じて) */
/* HTMLのhidden-checkboxがheaderの兄弟なので、セレクタを修正 */
.hidden-checkbox:checked ~ header .hamburger-menu-toggle .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hidden-checkbox:checked ~ header .hamburger-menu-toggle .line:nth-child(2) {
    opacity: 0;
}
.hidden-checkbox:checked ~ header .hamburger-menu-toggle .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* レスポンシブデザイン（ウィンドウ幅が768px以下の場合に適用） */
@media (max-width: 768px) {
    /* チェックボックスがチェックされたらナビを表示 */
    .hidden-checkbox:checked ~ .content-wrapper .left-nav {
        transform: translateX(0) !important; /* 表示を強制 */
    }

    /* ハンバーガーメニューボタンを表示 */
    .hamburger-menu-toggle {
        display: block;
    }
}


/* ======================================================================
 * ローディングスピナー
 * ====================================================================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 他の要素より手前に表示 */
}

#loading-spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* スピナーのアニメーション */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ======================================================================
 * 検索フォーム関連
 * ====================================================================== */

/* 共通ボタンと表示ボックスのスタイル */
.search-input-group {
    display: flex;
    margin: 0.5rem;
    align-items: flex-start;
    gap: 10px; /* ボタンと表示ボックスの間隔 */
    overflow: hidden;
}

.search-input-group .btn-common {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 130px;
    min-width: 130px;
    padding: 7px 5px;
    cursor: pointer;
    font-size: 1.5rem; /* Sakura.cssのpタグに合わせる */
    transition: background-color 0.2s ease;
    gap: 5px; /* アイコンとテキストの間隔 */
}

.search-input-group .display-box-common {
    flex-grow: 1; /* 残りのスペースを占める */
    padding: 7px 12px;
    background-color: #f5fdff; /* Bootstrapのform-control-plaintextに近い色 */
    color: #495057;
    font-size: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 250px; /* 必要に応じて調整 */
    border: 1px solid #b9b9b9;
}

.search-input-group .clear-selection-button{
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    background-color: #ff6347;
    color: #ffffff;
    padding: 0;
    margin-top: 0.2rem;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
}