/* HR Performance Dashboard — Executive dark theme
   อิง design spec (teal-navy drenched). เลี่ยง glassmorphism/side-stripe เป็น default */

:root {
    --canvas-1: #0c2b36;
    --canvas-2: #0a1f2a;
    --surface: #13323f;
    --surface-2: #0f2731;
    --surface-3: #17404f;
    --brand: #2bb6c4;
    --brand-soft: #2bc4d4;
    --positive: #3fbf6f;
    --accent-2: #b5531f;
    --danger: #e23b3b;
    --text: #eef5f7;
    --text-muted: #9fb8c0;
    --bar-billable: #3a7fbf;
    --bar-standby: #2bb6a0;
    --bar-nonbill: #e07b39;
    --radius: 14px;
    --gap: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Prompt', 'Sarabun', system-ui, sans-serif;
    color: var(--text);
    background: var(--canvas-2);
}

/* ---------- Shell ---------- */
/* topbar + sidebar เป็น position:fixed อยู่แล้ว → ไม่ต้องใช้ flex (เคยทำให้ .content ซ้อนใต้ sidebar) */
.app-shell { min-height: 100vh; }

.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 30;
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
    background: linear-gradient(90deg, #0a2330 0%, #14586a 100%);
    color: #fff;
}
.topbar .brand { font-size: 22px; font-weight: 600; letter-spacing: .3px; }
.topbar .brand small { font-weight: 400; opacity: .6; margin-left: 8px; font-size: 15px; }
.topbar .spacer { flex: 1; }
.topbar .icon-btn { color: #cfe6ec; font-size: 19px; background: none; border: 0; cursor: pointer; position: relative; }
.topbar .icon-btn .dot { position: absolute; top: -4px; right: -6px; background: var(--danger); color: #fff;
    font-size: 10px; border-radius: 10px; padding: 0 5px; }

.sidebar {
    position: fixed; top: 64px; bottom: 0; left: 0; width: 224px; z-index: 20;
    background: var(--canvas-1); border-right: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; padding: 14px 10px; overflow-y: auto;
    transition: width .22s ease;
    overflow-x: hidden;
}
.sidebar a {
    display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; margin-bottom: 4px;
    color: var(--text-muted); text-decoration: none; border-radius: 10px; line-height: 1.25; font-size: 14px;
    white-space: nowrap;
}
.sidebar a i { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.sidebar a span { transition: opacity .15s ease; }
.sidebar a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.sidebar a.active { background: var(--surface-3); color: #fff; }
.sidebar a.alert-item { color: #f4b7b7; }
.sidebar a.alert-item .badge-dot { margin-left: auto; background: var(--danger); color: #fff;
    border-radius: 10px; font-size: 11px; padding: 1px 7px; }
.sidebar .sep { flex: 1; }

/* Collapsed sidebar (desktop) */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed a { justify-content: center; padding: 11px 0; }
.sidebar.collapsed a span { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed a .badge-dot { display: none; }
.sidebar.collapsed a i { margin-top: 0; }

.content {
    margin-left: 224px; padding: 90px 30px 30px; box-sizing: border-box;
    background: linear-gradient(160deg, var(--canvas-1), var(--canvas-2));
    min-height: 100vh;
    transition: margin-left .22s ease;
}
.sidebar.collapsed ~ .content,
body.sidebar-collapsed .content { margin-left: 60px; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-head h1 { font-size: 24px; font-weight: 600; margin: 0; }
.page-head .month-select { margin-left: auto; }
.month-select select {
    background: var(--surface); color: var(--text); border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px; padding: 9px 14px; font-size: 14px; min-width: 210px;
}

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }

.card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: 0 6px 22px rgba(0,0,0,.28); overflow: hidden;
}
.card .card-head { padding: 14px 18px; font-size: 16px; font-weight: 600; }
.card .card-head.dark { background: var(--surface-2); }
.card .card-head.warn { background: var(--accent-2); color: #fff; }
.card .card-body { padding: 18px; }

.kpi-num { font-size: 44px; font-weight: 700; line-height: 1.05; }
.kpi-num.accent { color: var(--bar-nonbill); }
.kpi-unit { font-size: 17px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.kpi-desc { color: var(--text-muted); font-size: 13px; margin-top: 8px; line-height: 1.5; }

/* ---------- Department table ---------- */
.dept-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dept-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08); }
.dept-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dept-table tr:last-child td { border-bottom: 0; }
.dept-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.util-bar { background: rgba(255,255,255,.08); border-radius: 6px; height: 20px; position: relative; min-width: 90px; }
.util-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--brand-soft); }
.util-bar .lbl { position: absolute; right: 8px; top: 0; line-height: 20px; font-size: 12px; color: #06222b; font-weight: 600; }

.row-critical { background: rgba(226,59,59,.16); }
.badge-risk { background: var(--danger); color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }

.eff { font-size: 13px; white-space: nowrap; }
.eff::before { content: '●'; margin-right: 5px; }
.eff.excellent::before, .eff.normal::before { color: var(--positive); }
.eff.underutilized::before { color: #e8b53b; }
.eff.critical::before, .eff.critical-low::before { color: var(--danger); }

/* ---------- Misc ---------- */
.alert-banner { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
.alert-banner.ok { background: rgba(63,191,111,.16); color: #b7f0cd; }
.alert-banner.err { background: rgba(226,59,59,.18); color: #f6c2c2; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 46px; color: var(--brand); display: block; margin-bottom: 14px; }

/* ---------- Forms (import) ---------- */
.form-card label { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--text-muted); }
.form-card input, .form-card select {
    width: 100%; background: var(--surface-2); color: var(--text);
    border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 11px 13px; font-size: 14px;
}
.btn-primary {
    background: var(--brand); color: #06222b; border: 0; border-radius: 10px;
    padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 18px;
}
.btn-primary:hover { background: var(--brand-soft); }

.history-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.history-table th, .history-table td { padding: 10px 12px; text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.06); }
.status-pill { font-size: 12px; padding: 2px 9px; border-radius: 20px; }
.status-pill.done { background: rgba(63,191,111,.2); color: #b7f0cd; }
.status-pill.failed { background: rgba(226,59,59,.2); color: #f6c2c2; }
.status-pill.processing, .status-pill.pending { background: rgba(43,182,196,.2); color: #bfeef4; }

/* ---------- Topbar user dropdown ---------- */
.topbar-user { position: relative; }
.user-dropdown {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--surface); border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px; min-width: 230px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 100;
    overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; background: var(--surface-2);
}
.user-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand); color: #06222b;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.user-name { font-weight: 600; font-size: 14px; color: var(--text); }
.user-email { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.user-dropdown-sep { height: 1px; background: rgba(255,255,255,.07); }
.user-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; font-size: 14px; color: var(--text-muted);
    text-decoration: none; background: none; border: none;
    width: 100%; cursor: pointer; font-family: 'Prompt', sans-serif;
    transition: background .15s, color .15s;
}
.user-dropdown-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.user-dropdown-item i { font-size: 16px; }
.user-dropdown-logout { color: #f6a0a0; }
.user-dropdown-logout:hover { background: rgba(226,59,59,.12); color: var(--danger); }

/* ---------- Mobile overlay ---------- */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 35;
}
.sidebar-overlay.open { display: block; }

@media (max-width: 900px) {
    /* ป้องกัน horizontal overflow ทั้งหน้า */
    body, .app-shell { overflow-x: hidden; }

    /* Topbar — ป้องกัน brand wrap */
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar .brand { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 130px); }
    .topbar .brand small { display: none; }

    /* Sidebar — slide in จาก left */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        z-index: 40;
    }
    .sidebar.open { transform: translateX(0); }

    /* Content */
    .content { margin-left: 0; padding: 80px 12px 20px; }

    /* Page head — stack แนวตั้ง */
    .page-head { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .page-head h1 { font-size: 18px; width: 100%; }
    .page-head h1 span { display: none; } /* ซ่อน subtitle "— Workforce Efficiency Dashboard" */
    .page-head .month-select { margin-left: 0; width: 100%; }
    .month-select select { width: 100%; min-width: unset; box-sizing: border-box; }

    /* KPI cards */
    .kpi-num { font-size: 32px; }
    .card-body { padding: 14px; }
    .card .card-head { padding: 12px 14px; font-size: 14px; }

    /* Grids */
    .grid-3, .grid-2-1 { grid-template-columns: 1fr; }
    .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* Tables — horizontal scroll */
    .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dept-table { font-size: 12px; min-width: 480px; }
    .dept-table th, .dept-table td { padding: 8px 6px; white-space: nowrap; }

    /* User dropdown — ชิดซ้ายบนมือถือ */
    .user-dropdown { right: 0; min-width: 200px; }
}