/* =========================================================
   Carbooking — Modern UI (v2026.07)
   Design tokens + Light/Dark theme
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
    /* Brand */
    --brand-50:  #eef4ff;
    --brand-100: #dbe6ff;
    --brand-200: #bfd0ff;
    --brand-300: #93b0ff;
    --brand-400: #6a8bff;
    --brand-500: #4361ee;
    --brand-600: #3a4fd8;
    --brand-700: #2f3fb0;
    --brand-800: #263389;
    --brand-900: #1e2a6e;

    /* Semantic */
    --success:  #16a34a;
    --success-bg: #dcfce7;
    --warning:  #d97706;
    --warning-bg: #fef3c7;
    --danger:   #dc2626;
    --danger-bg: #fee2e2;
    --info:     #0284c7;
    --info-bg:  #e0f2fe;
    --purple:   #7c3aed;
    --purple-bg:#ede9fe;

    /* Neutrals (Light) */
    --bg:        #f6f7fb;
    --bg-elev:   #ffffff;
    --bg-muted:  #f1f3f9;
    --bg-subtle: #f8f9fc;
    --border:    #e5e7eb;
    --border-strong:#d1d5db;
    --text:      #0f172a;
    --text-muted:#475569;
    --text-soft: #64748b;
    --text-inv:  #ffffff;

    /* Shape */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl:24px;

    /* Shadow */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
    --shadow:    0 6px 20px rgba(15,23,42,0.08);
    --shadow-lg: 0 20px 40px rgba(15,23,42,0.12);
    --shadow-xl: 0 30px 80px rgba(15,23,42,0.18);
    --ring:      0 0 0 4px rgba(67,97,238,0.18);

    /* Font */
    --font-sans: 'Inter','IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif;

    /* Motion */
    --ease: cubic-bezier(.2,.8,.2,1);
    --dur: .22s;
}

/* ---- Dark theme ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        #0b1220;
        --bg-elev:   #131b2e;
        --bg-muted:  #1a2338;
        --bg-subtle: #172037;
        --border:    #263149;
        --border-strong:#334268;
        --text:      #e6ecff;
        --text-muted:#a3b0d1;
        --text-soft: #7d8bb0;

        --success-bg:#052e17;
        --warning-bg:#3a2a06;
        --danger-bg: #3b0d0d;
        --info-bg:   #062435;
        --purple-bg: #201347;

        --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
        --shadow:    0 8px 22px rgba(0,0,0,0.45);
        --shadow-lg: 0 25px 60px rgba(0,0,0,0.55);
    }
}
[data-theme="dark"] {
    --bg:        #0b1220;
    --bg-elev:   #131b2e;
    --bg-muted:  #1a2338;
    --bg-subtle: #172037;
    --border:    #263149;
    --border-strong:#334268;
    --text:      #e6ecff;
    --text-muted:#a3b0d1;
    --text-soft: #7d8bb0;
    --success-bg:#052e17;
    --warning-bg:#3a2a06;
    --danger-bg: #3b0d0d;
    --info-bg:   #062435;
    --purple-bg: #201347;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow:    0 8px 22px rgba(0,0,0,0.45);
    --shadow-lg: 0 25px 60px rgba(0,0,0,0.55);
}

/* =========================================================
   Base
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:var(--font-sans);
    color:var(--text);
    background:
        radial-gradient(1200px 600px at -10% -20%, rgba(67,97,238,0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(124,58,237,0.08), transparent 60%),
        var(--bg);
    min-height:100vh;
    padding:24px;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    font-size:14.5px;
}

a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}

::selection{background:var(--brand-200);color:var(--brand-900)}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-soft)}

/* =========================================================
   Layout: container / header
   ========================================================= */
.container{
    max-width:1200px;margin:0 auto;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius-2xl);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.header{
    position:relative;
    padding:28px 32px 26px;
    color:#fff;
    background:
        radial-gradient(600px 200px at 90% -20%, rgba(255,255,255,0.18), transparent 60%),
        linear-gradient(135deg,var(--brand-700),var(--brand-500) 60%,#7c3aed);
    text-align:center;
    overflow:hidden;
}
.header::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,#fbbf24,#f472b6,#60a5fa,#34d399);
    opacity:.9;
}
.header h1{
    font-size:1.65em;font-weight:800;letter-spacing:-.01em;
    display:inline-flex;gap:10px;align-items:center;
}
.header .org-name{font-size:1em;opacity:.95;font-weight:600;margin-top:4px}
.header p{opacity:.8;font-size:.86em;margin-top:6px}

/* =========================================================
   Login
   ========================================================= */
.login-overlay{
    position:fixed;inset:0;z-index:2000;
    display:flex;justify-content:center;align-items:center;padding:24px;
    background:
        radial-gradient(700px 400px at 20% 20%, rgba(67,97,238,0.35), transparent 60%),
        radial-gradient(700px 400px at 80% 80%, rgba(124,58,237,0.35), transparent 60%),
        linear-gradient(135deg,#0b1220,#131b2e 60%,#1a2338);
}
.login-overlay.hidden{display:none}
.login-box{
    background:rgba(255,255,255,0.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.6);
    border-radius:var(--radius-2xl);
    padding:44px 36px;max-width:440px;width:100%;
    box-shadow:var(--shadow-xl);
    text-align:center;
    color:#0f172a;
}
[data-theme="dark"] .login-box{background:rgba(19,27,46,0.95);color:var(--text);border-color:rgba(255,255,255,0.06)}
.logo-area{
    width:76px;height:76px;margin:0 auto 18px;
    background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
    color:#fff;border-radius:20px;
    display:flex;align-items:center;justify-content:center;font-size:2.2em;
    box-shadow:0 12px 30px rgba(67,97,238,0.35);
}
.login-box h2{font-size:1.5em;font-weight:800;color:var(--brand-800);letter-spacing:-.01em}
[data-theme="dark"] .login-box h2{color:#fff}
.login-box .subtitle{color:var(--text-soft);font-size:.9em;margin-top:2px}
.login-box .org-badge{
    display:inline-block;margin:12px 0 22px;
    background:var(--brand-50);color:var(--brand-800);
    padding:6px 14px;border-radius:999px;
    font-size:.78em;font-weight:600;
    border:1px solid var(--brand-100);
}
[data-theme="dark"] .login-box .org-badge{background:var(--bg-muted);color:var(--brand-300);border-color:var(--border)}
.input-group{text-align:left;margin-bottom:16px;position:relative}
.input-group label{display:block;font-weight:600;color:var(--text-muted);font-size:.82em;margin-bottom:6px}
.input-group input{
    width:100%;padding:13px 16px 13px 44px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius);
    font-size:.95em;background:var(--bg-subtle);color:var(--text);
    font-family:inherit;transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);
}
.input-group input:focus{outline:none;border-color:var(--brand-500);background:var(--bg-elev);box-shadow:var(--ring)}
.input-icon{position:absolute;left:14px;bottom:11px;font-size:1.05em;color:var(--text-soft);pointer-events:none}
.btn-login{
    width:100%;padding:14px 18px;margin-top:6px;
    background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
    color:#fff;border:none;border-radius:var(--radius);
    font-size:1em;font-weight:700;cursor:pointer;
    box-shadow:0 8px 20px rgba(67,97,238,0.35);
    transition:transform var(--dur),box-shadow var(--dur),filter var(--dur);
}
.btn-login:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 28px rgba(67,97,238,0.45)}
.btn-login:active{transform:translateY(0)}
.login-error{display:none;margin-top:12px;padding:10px 14px;background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-sm);font-size:.85em;border:1px solid rgba(220,38,38,.3)}
.login-error.show{display:block}
.login-footer{margin-top:18px;font-size:.78em;color:var(--text-soft);line-height:1.6}

/* =========================================================
   User bar / Nav
   ========================================================= */
.user-bar{
    background:var(--bg-muted);
    padding:12px 24px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:.86em;border-bottom:1px solid var(--border);
    flex-wrap:wrap;gap:8px;color:var(--text-muted);
}
.user-bar .user-info{font-weight:600;color:var(--text)}
.logout-btn{
    background:var(--danger-bg);color:var(--danger);
    border:1px solid rgba(220,38,38,.25);
    padding:7px 16px;border-radius:var(--radius-sm);cursor:pointer;
    font-size:.85em;font-weight:600;transition:all var(--dur);
}
.logout-btn:hover{background:var(--danger);color:#fff}

/* =========================================================
   Super admin tools — เห็นเฉพาะกลุ่มระบบคอมพิวเตอร์
   ========================================================= */
/* nowrap ทั้งคู่ — เครื่องมือระบบต้องอยู่แถวเดียวกับปุ่มออกจากระบบเสมอ */
.user-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.super-tools{
    display:flex;align-items:center;gap:9px;flex-wrap:nowrap;
    padding:5px 12px;border-radius:999px;
    background:var(--bg-elev);border:1px dashed var(--border);
}
.user-bar-actions .logout-btn{flex-shrink:0}
.super-tools-badge{
    font-size:.78em;font-weight:700;color:var(--brand-700);white-space:nowrap;
}
[data-theme="dark"] .super-tools-badge{color:var(--brand-300)}

.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
    position:absolute;cursor:pointer;inset:0;
    background:var(--border);border-radius:999px;transition:background var(--dur);
}
.switch .slider::before{
    content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;
    background:#fff;border-radius:50%;transition:transform var(--dur);
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider{background:var(--warning)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:disabled + .slider{opacity:.5;cursor:wait}

.test-mode-label{font-size:.78em;font-weight:600;white-space:nowrap}
.test-mode-label.live{color:var(--success)}
.test-mode-label.test{color:var(--warning)}
.test-mode-label.err {color:var(--danger)}

.btn-logtool{
    background:var(--bg-muted);color:var(--text-muted);
    border:1px solid var(--border);
    padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;
    font-size:.8em;font-weight:600;transition:all var(--dur);white-space:nowrap;
}
.btn-logtool:hover{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-500)}
[data-theme="dark"] .btn-logtool:hover{background:var(--bg-elev);color:var(--brand-300)}

/* สวิตช์มุมมองรายการจอง (super admin) — อยู่ในแถบหัวข้อ ชิดขวาสุด
   .section-title เป็น flex อยู่แล้ว → margin-left:auto ดันไปขวาได้เลย */
.bk-scope-switch{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.bk-scope-label{font-size:.8em;font-weight:600;color:var(--text-muted);white-space:nowrap}
/* ใช้ .switch/.slider ร่วมกับสวิตช์ TEST MODE แต่เปลี่ยนสีตอนเปิดเป็นสีหลัก
   (ส้ม = โหมดทดสอบ ซึ่งคนละความหมายกับมุมมองนี้) */
.bk-scope-switch .switch input:checked + .slider{background:var(--brand-500)}

/* Log viewer */
.log-modal{max-width:1100px}
.log-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.log-meta{font-size:.78em;color:var(--text-muted);margin-left:auto}
.log-body{
    background:#0f172a;color:#e2e8f0;
    font-family:ui-monospace,Consolas,"Courier New",monospace;
    font-size:.78em;line-height:1.5;
    padding:8px;border-radius:var(--radius-sm);
    max-height:58vh;overflow:auto;
    word-break:break-word;
    border:1px solid var(--border);
}

/* หนึ่งเหตุการณ์ = หนึ่งแถว: เวลา | ป้ายประเภท | รายละเอียด
   (ปรับ 11 ส.ค. 69 — เดิมเทข้อความดิบทั้งไฟล์ อ่านไม่ออก) */
.log-row{
    display:grid;grid-template-columns:118px 132px 1fr;gap:10px;
    align-items:start;padding:5px 6px;border-bottom:1px solid #1e293b;
}
.log-row:hover{background:#16233c}
.log-when{color:#64748b;white-space:nowrap}
.log-badge{
    display:inline-block;text-align:center;color:#fff;
    padding:1px 6px;border-radius:20px;font-size:.92em;
    font-family:'Bai Jamjuree',sans-serif;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.log-msg{white-space:pre-wrap;color:#e2e8f0}

@media(max-width:700px){
    .log-row{grid-template-columns:1fr;gap:2px}
    .log-badge{justify-self:start}
}

.nav{
    display:flex;background:var(--bg-elev);
    border-bottom:1px solid var(--border);
    padding:6px 8px;gap:4px;flex-wrap:wrap;
    position:sticky;top:0;z-index:50;
}
.nav a{
    flex:1;min-width:120px;text-align:center;
    padding:11px 12px;border-radius:var(--radius-sm);
    color:var(--text-muted);font-weight:600;font-size:.88em;
    transition:all var(--dur);border-bottom:none;
}
.nav a:hover{background:var(--bg-muted);color:var(--brand-600)}
.nav a.active{
    background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
    color:#fff;box-shadow:0 6px 16px rgba(67,97,238,0.25);
}

/* =========================================================
   Form body / sections
   ========================================================= */
.form-body{padding:28px 30px 36px}

.section-title{
    font-size:1em;font-weight:700;letter-spacing:-.005em;
    color:var(--text);margin:24px 0 14px;
    padding:12px 16px;
    background:var(--bg-muted);
    border:1px solid var(--border);
    border-left:4px solid var(--brand-500);
    border-radius:var(--radius);
    display:flex;align-items:center;gap:8px;
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.single{grid-template-columns:1fr}
.form-row.triple{grid-template-columns:1fr 1fr 1fr}

.form-group{display:flex;flex-direction:column}
.form-group label{font-weight:600;color:var(--text-muted);margin-bottom:6px;font-size:.83em}
.form-group .required{color:var(--danger)}
.form-group input,.form-group select,.form-group textarea{
    padding:11px 14px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:.92em;font-family:inherit;
    background:var(--bg-elev);color:var(--text);
    transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    outline:none;border-color:var(--brand-500);box-shadow:var(--ring);
}
.form-group input[readonly]{background:var(--bg-muted);color:var(--text-muted);cursor:default}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select{cursor:pointer}

.approver-info{
    background:var(--info-bg);
    border:1px solid rgba(2,132,199,.25);
    border-radius:var(--radius);
    padding:14px 18px;margin:12px 0 16px;
    display:flex;align-items:center;gap:14px;
}
.approver-info .icon{font-size:1.9em}
.approver-info .info .name{font-weight:700;color:var(--info);font-size:1.02em}

/* =========================================================
   Vehicle select cards
   ========================================================= */
.vehicle-select-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px;margin:10px 0 22px;
}
.vehicle-select-card{
    background:var(--bg-elev);
    border:2px solid var(--border);
    border-radius:var(--radius-lg);
    padding:16px;text-align:center;cursor:pointer;
    transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);
    position:relative;
}
.vehicle-select-card:hover:not(.disabled){
    border-color:var(--brand-400);
    box-shadow:var(--shadow);transform:translateY(-2px);
}
.vehicle-select-card.selected{
    border-color:var(--brand-500);
    background:linear-gradient(180deg,var(--brand-50),var(--bg-elev));
    box-shadow:0 10px 26px rgba(67,97,238,0.18);
}
[data-theme="dark"] .vehicle-select-card.selected{background:linear-gradient(180deg,rgba(67,97,238,0.16),var(--bg-elev))}
.vehicle-select-card.disabled{opacity:.55;cursor:not-allowed;background:var(--bg-muted)}

.v-status-badge{
    position:absolute;top:10px;right:10px;
    padding:3px 10px;border-radius:999px;
    font-size:.7em;font-weight:700;letter-spacing:.02em;
}
.v-status-available{background:var(--success-bg);color:var(--success);border:1px solid rgba(22,163,74,.3)}
.v-status-booked{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(220,38,38,.3)}

/* =========================================================
   Buttons
   ========================================================= */
.btn-group{
    display:flex;gap:12px;margin-top:28px;padding-top:20px;
    border-top:1px solid var(--border);
}
.btn{
    padding:11px 22px;border:none;
    border-radius:var(--radius-sm);
    font-size:.92em;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;justify-content:center;
    text-decoration:none;font-family:inherit;
    transition:transform var(--dur),box-shadow var(--dur),filter var(--dur),background var(--dur),color var(--dur);
    line-height:1.2;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}

.btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;flex:1;box-shadow:0 6px 16px rgba(67,97,238,0.3)}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 6px 16px rgba(22,163,74,0.28)}
.btn-danger {background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,0.28)}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 6px 16px rgba(217,119,6,0.28)}
.btn-info   {background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;box-shadow:0 6px 16px rgba(2,132,199,0.28)}
.btn-secondary{background:var(--bg-muted);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-reset{background:var(--bg-muted);color:var(--text-muted);border:1px solid var(--border)}
.btn-reset:hover{background:var(--border)}
.btn-sm{padding:6px 12px;font-size:.8em}
.btn-xs{padding:4px 10px;font-size:.75em}

/* =========================================================
   Tables
   ========================================================= */
.table-wrapper{
    overflow-x:auto;margin-top:14px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--bg-elev);
}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85em}
thead{
    background:var(--bg-muted);
    color:var(--text);
}
thead th{
    padding:12px 10px;text-align:center;font-weight:700;
    white-space:nowrap;font-size:.82em;
    text-transform:uppercase;letter-spacing:.03em;
    color:var(--text-muted);
    border-bottom:1px solid var(--border);
}
tbody td{padding:11px 10px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle;color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--dur)}
tbody tr:hover{background:var(--bg-subtle)}

/* Badges */
.badge{
    padding:4px 12px;border-radius:999px;
    font-size:.74em;font-weight:700;letter-spacing:.02em;
    display:inline-block;white-space:nowrap;
    border:1px solid transparent;
}
.badge-pending  {background:var(--warning-bg);color:var(--warning);border-color:rgba(217,119,6,.25)}
.badge-approved {background:var(--success-bg);color:var(--success);border-color:rgba(22,163,74,.25)}
.badge-rejected {background:var(--danger-bg);color:var(--danger);border-color:rgba(220,38,38,.25)}
.badge-completed{background:var(--info-bg);color:var(--info);border-color:rgba(2,132,199,.25)}
.badge-assigned {background:var(--purple-bg);color:var(--purple);border-color:rgba(124,58,237,.25)}

/* =========================================================
   Stats cards
   ========================================================= */
.stats-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;margin-bottom:24px;
}
.stat-card{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:18px 16px;text-align:center;
    box-shadow:var(--shadow-xs);
    position:relative;overflow:hidden;
    transition:transform var(--dur),box-shadow var(--dur);
}
.stat-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--brand-500);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card .number{font-size:2em;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.stat-card .label{font-size:.8em;margin-top:4px;font-weight:600;color:var(--text-muted)}

.stat-card.pending::before  {background:var(--warning)}
.stat-card.pending .number  {color:var(--warning)}
.stat-card.approved::before {background:var(--success)}
.stat-card.approved .number {color:var(--success)}
.stat-card.rejected::before {background:var(--danger)}
.stat-card.rejected .number {color:var(--danger)}
.stat-card.completed::before{background:var(--info)}
.stat-card.completed .number{color:var(--info)}
.stat-card.total::before    {background:var(--purple)}
.stat-card.total .number    {color:var(--purple)}
.stat-card.assigned::before {background:var(--purple)}
.stat-card.assigned .number {color:var(--purple)}

/* Clickable stat cards — ใช้เป็นตัวกรองรายการ */
.stat-card.clickable{cursor:pointer;user-select:none}
.stat-card.clickable:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-card.active{
    outline:2px solid var(--brand-500);
    outline-offset:2px;
    box-shadow:0 10px 26px rgba(67,97,238,.22);
}
.stat-card.active::after{
    content:'●';position:absolute;top:8px;right:10px;
    color:var(--brand-500);font-size:.7em;
}

/* =========================================================
   Admin vehicle detail cards
   ========================================================= */
.vehicle-detail-card{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur);
    box-shadow:var(--shadow-xs);
}
.vehicle-detail-card:hover{
    border-color:var(--brand-400);
    box-shadow:var(--shadow);transform:translateY(-2px);
}
.vehicle-detail-card .v-header{padding:16px;text-align:center;background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.vehicle-detail-card .v-body{padding:14px 16px}
.vehicle-detail-card .v-plate-tag{
    background:linear-gradient(135deg,var(--brand-700),var(--brand-500));
    color:#fff;padding:6px 16px;border-radius:999px;
    font-weight:700;font-size:.9em;display:inline-block;margin:6px 0;
    letter-spacing:1px;box-shadow:0 4px 12px rgba(67,97,238,0.25);
}
.vehicle-detail-card .v-info-row{
    display:flex;justify-content:space-between;
    padding:6px 0;border-bottom:1px solid var(--border);
    font-size:.85em;color:var(--text-muted);
}
.vehicle-detail-card .v-info-row:last-child{border-bottom:none}
.vehicle-detail-card .v-info-row b{color:var(--text)}

.vehicle-status-available,
.vehicle-status-booked{
    padding:5px 14px;border-radius:999px;
    font-size:.8em;font-weight:600;display:inline-block;margin-top:8px;
    border:1px solid transparent;
}
.vehicle-status-available{background:var(--success-bg);color:var(--success);border-color:rgba(22,163,74,.25)}
.vehicle-status-booked   {background:var(--danger-bg);color:var(--danger);border-color:rgba(220,38,38,.25)}

.fuel-gauge-container{margin:12px 0 6px;text-align:left}
.fuel-gauge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.fuel-gauge-header .fuel-icon{font-size:.85em;color:var(--text-muted)}
.fuel-gauge-header .fuel-pct{font-size:.85em;font-weight:700;color:var(--text)}
.fuel-gauge-track{height:10px;background:var(--bg-muted);border-radius:999px;overflow:hidden;position:relative}
.fuel-gauge-bar{height:100%;border-radius:999px;transition:width .6s var(--ease);background:linear-gradient(90deg,#22c55e,#16a34a)}
.fuel-gauge-detail{font-size:.72em;color:var(--text-soft);margin-top:3px;text-align:right}
.color-dot{width:22px;height:22px;border-radius:50%;display:inline-block;vertical-align:middle;border:2px solid var(--border-strong);margin-right:6px}

/* =========================================================
   Alerts
   ========================================================= */
.alert{
    padding:13px 18px;border-radius:var(--radius);
    margin-bottom:18px;display:none;align-items:center;gap:10px;
    font-size:.9em;border:1px solid transparent;
}
.alert.show{display:flex}
.alert-success{background:var(--success-bg);color:var(--success);border-color:rgba(22,163,74,.25)}
.alert-error  {background:var(--danger-bg);color:var(--danger);border-color:rgba(220,38,38,.25)}
.alert-info   {background:var(--info-bg);color:var(--info);border-color:rgba(2,132,199,.25)}

/* =========================================================
   Filter bar
   ========================================================= */
.filter-bar{
    display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;align-items:center;
    padding:14px 16px;
    background:var(--bg-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius);
}
.filter-bar label{color:var(--text-muted);font-weight:600;font-size:.86em}
.filter-bar select,.filter-bar input{
    padding:8px 14px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:.86em;background:var(--bg-elev);color:var(--text);
    font-family:inherit;transition:border-color var(--dur),box-shadow var(--dur);
}
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)}

/* =========================================================
   Modal
   ========================================================= */
.modal-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(15,23,42,0.55);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    z-index:1000;justify-content:center;align-items:center;padding:20px;
}
.modal-overlay.active{display:flex;animation:fadeIn .2s var(--ease)}
.modal{
    background:var(--bg-elev);color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;max-width:720px;width:100%;
    max-height:85vh;overflow-y:auto;
    box-shadow:var(--shadow-xl);
    animation:slideUp .25s var(--ease);
}
.modal h3{color:var(--text);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border);font-weight:700}
.detail-section{margin:15px 0}
.detail-section h4{
    color:var(--brand-700);font-size:.92em;margin-bottom:8px;
    padding:8px 12px;background:var(--brand-50);border-radius:var(--radius-sm);
    border-left:3px solid var(--brand-500);
}
[data-theme="dark"] .detail-section h4{background:var(--bg-muted);color:var(--brand-300)}
.detail-row{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);font-size:.9em;color:var(--text-muted)}
.detail-row b{color:var(--text)}

/* =========================================================
   Mileage / summary boxes
   ========================================================= */
.mileage-calc{
    background:var(--success-bg);border:1px solid rgba(22,163,74,.25);
    border-radius:var(--radius);padding:16px 20px;text-align:center;margin-top:10px;
}
.mileage-calc .label{font-size:.85em;color:var(--success);font-weight:600}
.mileage-calc .value{font-size:1.8em;color:var(--success);font-weight:800;letter-spacing:-.02em}

.mileage-info-box{
    background:var(--warning-bg);border:1px solid rgba(217,119,6,.25);
    border-radius:var(--radius);padding:12px 18px;margin-top:10px;font-size:.88em;color:var(--warning);
}
.fuel-summary{
    background:var(--warning-bg);border:1px solid rgba(217,119,6,.25);
    border-radius:var(--radius);padding:15px 20px;margin-top:10px;text-align:center;color:var(--warning);
}

/* =========================================================
   Calendar
   ========================================================= */
.calendar-container{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:18px;margin-bottom:24px;overflow-x:auto;
    box-shadow:var(--shadow-xs);
}
.calendar-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.calendar-header h3{color:var(--text);font-size:1.1em;font-weight:700;margin:0;text-align:center;flex:1}
.calendar-btn{
    background:var(--bg-muted);color:var(--brand-700);
    border:1px solid var(--border);
    padding:7px 14px;border-radius:var(--radius-sm);
    font-weight:600;cursor:pointer;transition:all var(--dur);white-space:nowrap;font-size:.85em;
}
.calendar-btn:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}

.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:6px;min-width:770px}
.calendar-day-header{
    text-align:center;font-weight:700;
    background:var(--brand-600);color:#fff;
    padding:8px 0;border-radius:var(--radius-sm);font-size:.8em;letter-spacing:.02em;
}
.calendar-day{
    border:1px solid var(--border);
    min-height:120px;max-height:180px;
    overflow-y:auto;overflow-x:hidden;
    border-radius:var(--radius-sm);padding:8px;
    background:var(--bg-subtle);display:flex;flex-direction:column;
    transition:background var(--dur);
}
.calendar-day:hover{background:var(--bg-muted)}
.calendar-day.empty{background:transparent;border:none}
.calendar-day.today{background:var(--warning-bg);border:1.5px solid var(--warning)}
.calendar-date{
    font-weight:700;text-align:right;color:var(--text-soft);font-size:.82em;
    margin-bottom:5px;position:sticky;top:0;background:inherit;z-index:1;
}
.calendar-day.today .calendar-date{color:var(--warning)}

.calendar-event{
    padding:6px 8px;margin-bottom:5px;font-size:.72em;
    border-radius:var(--radius-xs);cursor:pointer;
    transition:transform var(--dur),box-shadow var(--dur);
    border:1px solid rgba(0,0,0,0.08);color:#111827;
    line-height:1.35;white-space:normal;word-break:break-word;overflow:hidden;
    background:#fff;
}
[data-theme="dark"] .calendar-event{background:var(--bg-elev);color:var(--text);border-color:var(--border)}
.calendar-event:hover{transform:scale(1.02);box-shadow:var(--shadow-sm);z-index:10;position:relative}
.calendar-event .ev-time{font-weight:700;display:block;margin-bottom:2px}
.calendar-event .ev-user{font-size:.85em;opacity:.75;margin-top:2px}
.calendar-event.status-completed{opacity:.6;border-style:dashed}

/* =========================================================
   My bookings cards (mobile)
   ========================================================= */
.my-bk-mobile{display:none}
.my-bk-desktop{display:block}
.bk-card{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-left:4px solid var(--brand-500);
    border-radius:var(--radius);
    padding:14px 16px;margin-bottom:12px;
    box-shadow:var(--shadow-xs);
}
.bk-card-head{
    display:flex;justify-content:space-between;align-items:center;
    border-bottom:1px dashed var(--border);padding-bottom:10px;margin-bottom:10px;
    font-size:1.02em;color:var(--text);font-weight:700;
}
.bk-card-row{
    display:flex;justify-content:space-between;gap:10px;
    padding:6px 0;font-size:.9em;border-bottom:1px solid var(--border);
}
.bk-card-row:last-of-type{border-bottom:0}
.bk-card-row>span{color:var(--text-muted);flex-shrink:0}
.bk-card-row>b{color:var(--text);text-align:right;word-break:break-word}
.bk-card-actions{
    display:flex;flex-wrap:wrap;gap:6px;
    margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);
}
.bk-card-actions .btn{flex:1;min-width:110px}

/* =========================================================
   Admin tabs / toolbar / tool grid / collapsibles
   ========================================================= */
.admin-tabs{
    position:sticky;top:0;z-index:100;
    display:flex;gap:6px;padding:10px;
    margin:-28px -30px 20px -30px;
    background:var(--bg-elev);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-xs);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.admin-tabs::-webkit-scrollbar{height:4px}
.admin-tabs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.admin-tab{
    flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:11px 16px;border:none;background:transparent;
    color:var(--text-muted);font-weight:600;font-size:.88em;cursor:pointer;
    border-radius:var(--radius-sm);
    transition:all var(--dur);white-space:nowrap;position:relative;font-family:inherit;
}
.admin-tab:hover{background:var(--bg-muted);color:var(--brand-600)}
.admin-tab.active{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;box-shadow:0 4px 12px rgba(67,97,238,0.25)}
.admin-tab .tab-badge{
    background:rgba(255,255,255,0.25);color:#fff;
    padding:1px 8px;border-radius:999px;
    font-size:.72em;font-weight:700;min-width:20px;text-align:center;
}
.admin-tab:not(.active) .tab-badge{background:var(--brand-50);color:var(--brand-700)}
[data-theme="dark"] .admin-tab:not(.active) .tab-badge{background:var(--bg-muted);color:var(--brand-300)}
.tab-panel{display:none;animation:fadeIn .3s var(--ease)}
.tab-panel.active{display:block}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.tool-card{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:14px 16px;display:flex;align-items:center;gap:12px;
    transition:all var(--dur);cursor:pointer;
}
.tool-card:hover{border-color:var(--brand-400);box-shadow:var(--shadow);transform:translateY(-2px)}
.tool-card .ico{
    width:44px;height:44px;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    background:var(--brand-50);color:var(--brand-700);font-size:1.4em;
}
[data-theme="dark"] .tool-card .ico{background:var(--bg-muted);color:var(--brand-300)}
.tool-card .txt{flex:1}
.tool-card .txt .t{font-weight:700;color:var(--text);font-size:.92em}
.tool-card .txt .s{font-size:.78em;color:var(--text-soft);margin-top:2px}

.modern-toolbar{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:12px 16px;margin:14px 0;
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.modern-toolbar>label{font-weight:600;color:var(--text-muted);font-size:.85em}
.modern-toolbar input,.modern-toolbar select{
    padding:8px 12px;border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);font-size:.88em;
    background:var(--bg-elev);color:var(--text);font-family:inherit;
}
.modern-toolbar input:focus,.modern-toolbar select:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)}
.modern-toolbar .btn,.modern-toolbar button{padding:7px 14px;border-radius:var(--radius-sm);font-size:.85em;font-weight:600}

.sub-section-title{
    font-size:.94em;color:var(--text);font-weight:700;
    margin:22px 0 10px;padding-left:12px;
    border-left:3px solid var(--brand-500);
}

.scroll-top-btn{
    position:fixed;bottom:26px;right:26px;z-index:90;
    width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
    color:#fff;font-size:1.25em;
    box-shadow:0 10px 26px rgba(67,97,238,0.4);
    display:none;align-items:center;justify-content:center;
    transition:transform var(--dur),box-shadow var(--dur);
}
.scroll-top-btn.show{display:flex}
.scroll-top-btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(67,97,238,0.5)}

/* Collapsible section titles */
.section-title.collapsible{cursor:pointer;position:relative;padding-right:44px;user-select:none;transition:filter var(--dur)}
.section-title.collapsible:hover{filter:brightness(.98)}
.section-title.collapsible::after{
    content:'\25BE';position:absolute;right:16px;top:50%;
    transform:translateY(-50%) rotate(0deg);
    font-size:1em;color:inherit;opacity:.6;transition:transform var(--dur);
}
.section-title.collapsible.collapsed::after{transform:translateY(-50%) rotate(-90deg)}
.section-title.collapsible.collapsed{opacity:.85}
.section-body{overflow:hidden;transition:max-height .3s var(--ease),opacity .2s var(--ease),margin .2s}
.section-body.collapsed{max-height:0;opacity:0;margin:0!important;pointer-events:none}

/* Admin toolbar (secondary) */
.admin-toolbar{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    padding:12px 16px;
    background:var(--bg-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin:10px 0 16px;
}
.admin-toolbar button{
    padding:7px 14px;border:1px solid var(--border-strong);
    background:var(--bg-elev);color:var(--brand-700);
    border-radius:var(--radius-sm);cursor:pointer;
    font-size:.85em;font-weight:600;transition:all var(--dur);font-family:inherit;
}
.admin-toolbar button:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}
.admin-toolbar .lab{font-size:.83em;color:var(--text-muted);font-weight:700}
.admin-toolbar .spacer{flex:1}
.section-anchor{position:relative;top:-70px;visibility:hidden}

/* =========================================================
   Animations
   ========================================================= */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
    .calendar-grid{grid-template-columns:repeat(7,minmax(95px,1fr));min-width:680px}
    .calendar-day{min-height:110px;max-height:170px}
}
@media (max-width:768px){
    body{padding:12px}
    .form-body{padding:20px 18px 28px}
    .header{padding:22px 20px}
    .form-row,.form-row.triple{grid-template-columns:1fr}
    .stats-row{grid-template-columns:1fr 1fr}
    .nav a{font-size:.78em;padding:9px 6px;min-width:100px}
    .btn-group{flex-direction:column}
    .user-bar{flex-direction:column;gap:6px;text-align:center}
    /* จอแคบ: ยอมให้ตกบรรทัดได้ ดีกว่าดันจนล้นขอบจอ */
    .user-bar-actions{flex-wrap:wrap;justify-content:center}
    .calendar-container{padding:12px}
    .calendar-grid{grid-template-columns:repeat(7,minmax(85px,1fr));min-width:620px}
    .calendar-day{min-height:95px;max-height:150px;padding:4px}
    .calendar-day-header{font-size:.72em;padding:6px 0}
    .calendar-event{font-size:.66em;padding:4px;line-height:1.25}
    .calendar-date{font-size:.75em}
    .my-bk-desktop{display:none}
    .my-bk-mobile{display:block}
    .admin-tabs{margin:-20px -18px 15px -18px;padding:6px}
    .admin-tab{min-width:90px;padding:9px 8px;font-size:.8em}
    .admin-tab span.tab-label{display:none}
    .admin-tab .tab-icon{font-size:1.3em}
}
@media (max-width:480px){
    .calendar-grid{min-width:560px}
    .calendar-day{min-height:85px;max-height:135px}
    .calendar-event{font-size:.62em}
    .stat-card .number{font-size:1.6em}
}

/* =========================================================
   Print
   ========================================================= */
@media print{
    body{background:#fff;padding:0;color:#000}
    .nav,.btn-group,.filter-bar,.btn,.login-overlay,.user-bar,.admin-tabs,.scroll-top-btn,.admin-toolbar{display:none!important}
    .tab-panel{display:block!important}
    .container{box-shadow:none;border-radius:0;border:none}
    .header{background:#fff!important;color:#000!important;border-bottom:2px solid #000}
    .header::after{display:none}
    .section-title{background:#f5f5f5!important;color:#000!important;border-color:#ccc!important}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}