:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-main: #e0e0e0;
    --text-sub: #aaaaaa;
    --accent-blue: #42a5f5;
    --accent-green: #66bb6a;
    --accent-orange: #ffa726;
    --accent-purple: #ab47bc;
    --accent-teal: #26a69a;
    --accent-red: #ef5350;
    --border-color: #333333;
    --header-height: 50px;
}

body {
    margin: 0; padding: 0; padding-top: var(--header-height);
    font-family: "Noto Sans JP", sans-serif;
    background-color: var(--bg-color); color: var(--text-main);
    -webkit-text-size-adjust: 100%; line-height: 1.6;
}

a { color: var(--accent-blue); text-decoration: none; }

/* 共通コンポーネント: トースト通知 */
#toast-container {
    position: fixed; top: 60px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
    background: #333; color: #fff; padding: 12px 20px; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); border-left: 5px solid #4fc3f7;
    font-size: 0.95rem; opacity: 0; transform: translateY(-20px);
    transition: all 0.3s ease; pointer-events: auto; display: flex; align-items: center; gap: 10px;
    min-width: 250px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-left-color: #66bb6a; }
.toast.error { border-left-color: #ef5350; }
.toast i { font-size: 20px; }

/* 共通コンポーネント: 全画面ローディング */
#global-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); z-index: 10000;
    /* ★変更: visibility/opacity ではなく display で制御 */
    display: none; 
    flex-direction: column; justify-content: center; align-items: center;
}
#global-loader.show {
    /* ★変更: クラスがついたら強制的に表示 */
    display: flex !important; 
    animation: fadeIn 0.2s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.spinner {
    width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.3);
    border-top-color: #4fc3f7; border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { margin-top: 15px; color: white; font-weight: bold; letter-spacing: 1px; }

/* スマホでのタップ領域拡大 */
button, select, input[type="checkbox"], input[type="radio"] {
    cursor: pointer;
}
@media (max-width: 600px) {
    .btn-save, .btn-add-row, .btn-back, .nav-item a {
        min-height: 44px; /* 指で押しやすいサイズ */
    }
    #toast-container {
        right: 0; left: 0; top: 50px; padding: 10px; align-items: center;
    }
    .toast { width: 90%; justify-content: center; }
}

/* Material Icons */
.material-icons {
    font-family: 'Material Icons'; font-weight: normal; font-style: normal;
    font-size: 24px; display: inline-block; line-height: 1;
    text-transform: none; letter-spacing: normal; word-wrap: normal;
    white-space: nowrap; direction: ltr;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    vertical-align: middle;
}

/* 1. テーブルヘッダーの強力固定 */
.ai-table thead th,
.payment-table thead th,
.tariff-table thead th,
.report-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #333; /* 背景色がないと透ける */
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

/* 2. スマホ体験の向上 */
@media (max-width: 600px) {
    /* 入力欄タップ時のズーム防止 (16px以上ならズームしない) */
    input, select, textarea {
        font-size: 16px !important; 
    }
    
    /* ボタンを指で押しやすく */
    button, .btn-save, .icon-btn {
        min-height: 48px;
        min-width: 48px;
    }

    /* ページ全体 */
    body {
        /* 横スクロールのバウンス防止 */
        overscroll-behavior-x: none;
    }
}