/* ================================================================
   md3/components.css — P2 核心元件 MD3 化
   策略：保留舊 class 名（.btn/.card/.badge…）原地升級外觀，
   讓全站既有 HTML 不用改就換裝；新寫的元件請用 md- 前綴。
   State layer 原則：hover/active 用透明度疊層（color-mix），不改色相。
   ================================================================ */

/* =============== Buttons（一律 pill + active:scale-95） =============== */
.btn {
    border-radius: var(--md-radius-pill) !important;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    margin-right: 6px;
    transition: all var(--md-dur) var(--md-ease);
}
.btn:active { transform: scale(0.95); }

.btn-primary {
    background: var(--md-primary);
    color: var(--md-on-primary);
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--md-primary) 90%, transparent);
    box-shadow: var(--md-shadow-2);
}
.btn-success {
    background: var(--md-success);
    color: #FFFFFF;
}
.btn-success:hover {
    background: color-mix(in srgb, var(--md-success) 90%, transparent);
    box-shadow: var(--md-shadow-2);
}
.btn-danger {
    background: var(--md-error);
    color: var(--md-on-error);
}
.btn-danger:hover {
    background: color-mix(in srgb, var(--md-error) 90%, transparent);
    box-shadow: var(--md-shadow-2);
}
.btn-warning { background: var(--md-warning); color: #FFFFFF; }
.btn-sm { padding: 5px 14px; font-size: 12px; }

/* =============== Cards（tonal surface，shadow 階梯） =============== */
.card {
    background: var(--md-surface-container);
    border-radius: var(--md-radius-card);
    border: none;
    padding: 24px 26px;
    box-shadow: var(--md-shadow-1);
    transition: box-shadow var(--md-dur) var(--md-ease);
}
.card:hover { box-shadow: var(--md-shadow-2); }
.card h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--md-on-surface);
    letter-spacing: 0;
    border-bottom: 1px solid var(--md-outline-variant);
}

/* =============== Badges → tonal chips（pill） =============== */
.badge {
    border-radius: var(--md-radius-pill) !important;
    font-weight: 500;
    padding: 4px 12px;
}
.badge.open, .badge.applied, .badge.in_progress { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.badge.draft, .badge.pending, .badge.C { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.badge.closed, .badge.interview, .badge.S { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.badge.filled, .badge.hired, .badge.completed, .badge.active, .badge.B { background: var(--md-success-container); color: var(--md-on-success-container); }
.badge.rejected, .badge.D { background: var(--md-error-container); color: var(--md-on-error-container); }
.badge.A { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* =============== Tables（MD3 data table） =============== */
th {
    color: var(--md-on-surface-variant);
    font-weight: 500;
    letter-spacing: 0.01em;
}
th, td { border-bottom: 1px solid var(--md-outline-variant); }
tbody tr { transition: background var(--md-dur-fast) var(--md-ease); }
tbody tr:hover { background: rgba(var(--md-primary-rgb), 0.05); }

/* =============== Inputs（MD3 filled text field：上圓下方） =============== */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"],
input[type="url"], input[type="tel"], select, textarea {
    background: var(--md-surface-container-low);
    border: none;
    border-bottom: 2px solid var(--md-outline);
    border-radius: var(--md-radius-input);
    padding: 10px 14px;
    color: var(--md-on-surface);
    transition: border-color var(--md-dur-fast) var(--md-ease), background var(--md-dur-fast) var(--md-ease);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus,
input[type="datetime-local"]:focus, input[type="search"]:focus, input[type="url"]:focus,
input[type="tel"]:focus, select:focus, textarea:focus {
    outline: none;
    border-bottom-color: var(--md-primary);
}
::placeholder { color: rgba(var(--md-on-surface-rgb), 0.5); }
.form-group label { color: var(--md-on-surface); font-weight: 500; }

/* =============== Modal / Dialog（28px、深陰影） =============== */
.modal-content {
    background: var(--md-surface);
    border-radius: var(--md-radius-lg) !important;
    border: none !important;
    box-shadow: var(--md-shadow-3) !important;
}

/* =============== Tabs（settings sub-tab 等） =============== */
.onb-section-tab.active {
    color: var(--md-primary) !important;
    border-bottom-color: var(--md-primary) !important;
}

/* =============== 通用文字輔助 =============== */
.loading { color: var(--md-on-surface-variant); }
h1, h2, h3, h4 { letter-spacing: 0; }

/* =============== 頁面大標題統一（2026-10-04 純 UI）：色點對齊總覽 md-overview-title-dot；能力評估標題列對齊總覽 h1 =============== */
.md-page-title-dot { color: var(--md-primary); }
.assess-title-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--md-outline-variant);
}
#assessments .assess-page-title {
    margin: 0;
    font-family: 'Noto Serif TC', 'Songti TC', serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-shadow: none;
    color: var(--md-on-surface);
    text-align: left;
}
.assess-title-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 680px) {
    #assessments .assess-page-title { font-size: 36px; }
}

/* =============== P5 無障礙：focus ring（鍵盤可視焦點） =============== */
.btn:focus-visible,
.sidebar-item:focus-visible,
.onb-section-tab:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}