/*
 * AOLC Platform Design System
 * ────────────────────────────
 * Single source of truth for all AOLC services.
 * Extracted from StaffWatch — the reference implementation.
 *
 * Used by: Auth, HRPay, StaffWatch (via inline copy), ServiceDesk (via Tailwind + inline overrides)
 */

:root {
  --bg:#0e0f11;--bg2:#161a1e;--bg3:#1a1b1f;--border:#32333a;
  --amber:#f59e0b;--amber-dim:#92600a;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;
  --text:#e2e4e9;--text-dim:#6b7280;--text-mid:#9ca3af;
  --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;--radius:4px;
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.hidden{display:none !important}

/* ── Utilities ─────────────────────────────────────── */
.mono{font-family:var(--mono)}.amber{color:var(--amber)}.green{color:var(--green)}.red{color:var(--red)}.dim{color:var(--text-dim)}.mid{color:var(--text-mid)}
.flex{display:flex}.gap4{gap:4px}.gap8{gap:8px}.gap16{gap:16px}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}
.text-sm{font-size:12px}.text-xs{font-size:11px}.font-500{font-weight:500}.font-600{font-weight:600}

/* ── Login ─────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden}
.login-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 39px,color-mix(in srgb,var(--amber) 10%,transparent) 39px,color-mix(in srgb,var(--amber) 10%,transparent) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,color-mix(in srgb,var(--amber) 10%,transparent) 39px,color-mix(in srgb,var(--amber) 10%,transparent) 40px);pointer-events:none}
.login-card{position:relative;width:400px;background:var(--bg2);border:1px solid var(--border);padding:40px;animation:fadeUp .4s ease}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.login-logo-icon{width:auto;height:40px;display:flex;align-items:center;justify-content:center}
.login-logo-icon img{height:40px;width:auto}
.login-logo-text{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:.05em}
.login-logo-sub{font-size:11px;color:var(--text-dim);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.login-title{font-size:13px;color:var(--text-dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}

/* ── Forms ─────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.form-input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:10px 12px;font-family:var(--mono);font-size:13px;outline:none;transition:border-color .15s;border-radius:var(--radius)}
.form-input:focus{border-color:var(--amber)}.form-input::placeholder{color:var(--text-dim)}
select.form-input option{background:var(--bg3)}

/* ── Buttons ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;transition:all .15s;border-radius:var(--radius)}
.btn-primary{background:var(--amber);color:var(--bg);width:100%}.btn-primary:hover{filter:brightness(0.85)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-mid)}.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red)}.btn-danger:hover{background:rgba(239,68,68,.1)}
.btn-sm{padding:6px 12px;font-size:11px}
.btn-xs{padding:4px 10px;font-size:10px}

/* ── Errors & Warnings ─────────────────────────────── */
.error-msg{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:10px 12px;font-size:12px;font-family:var(--mono);margin-bottom:16px;border-radius:var(--radius)}
.warn-msg{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:#fde68a;padding:10px 12px;font-size:12px;font-family:var(--mono);margin-bottom:16px;border-radius:var(--radius)}

/* ── App Shell ─────────────────────────────────────── */
.app-shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:48px 1fr;height:100vh;grid-template-areas:"topbar topbar" "sidebar main"}
.topbar{grid-area:topbar;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:10}
.topbar-logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.05em}
.topbar-logo-badge{display:flex;align-items:center;justify-content:center;height:36px}
.topbar-logo-badge img{height:36px;width:auto}
.topbar-logo-badge-fallback{background:var(--amber);color:var(--bg);font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 6px;letter-spacing:.1em;text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:16px}
.topbar-user{font-size:12px;color:var(--text-mid);font-family:var(--mono)}
.topbar-user span{color:var(--amber)}

/* ── Sidebar ───────────────────────────────────────── */
.sidebar{grid-area:sidebar;background:var(--bg2);border-right:1px solid var(--border);padding:16px 0;overflow-y:auto;display:flex;flex-direction:column}
.nav-section{padding:0 16px;margin-bottom:24px}
.nav-section-label{font-size:10px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em;padding:0 4px;margin-bottom:6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px;color:var(--text-mid);font-size:13px;cursor:pointer;border-radius:var(--radius);transition:all .12s;user-select:none}
.nav-item:hover{background:var(--bg3);color:var(--text)}.nav-item.active{background:rgba(245,158,11,.1);color:var(--amber)}
.nav-item svg{flex-shrink:0;opacity:.7}.nav-item.active svg{opacity:1}

/* ── Main Area ─────────────────────────────────────── */
.main-area{grid-area:main;overflow-y:auto;padding:24px;background:var(--bg)}

/* ── Page Headers ──────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.page-title{font-size:20px;font-weight:600;font-family:var(--mono);letter-spacing:-.02em}
.page-subtitle{font-size:12px;color:var(--text-dim);margin-top:4px;font-family:var(--mono)}

/* ── Stat Cards ────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:24px}
.stat-card{background:var(--bg2);border:1px solid var(--border);padding:16px 20px;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--amber),transparent);opacity:.4}
.stat-label{font-size:10px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.stat-value{font-size:28px;font-family:var(--mono);font-weight:600;line-height:1}
.stat-sub{font-size:11px;color:var(--text-dim);margin-top:4px;font-family:var(--mono)}

/* ── Tables ────────────────────────────────────────── */
.table-wrap{background:var(--bg2);border:1px solid var(--border);overflow:auto;max-height:calc(100vh - 280px);position:relative}
.table-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}
.table-title{font-size:12px;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mid)}
table{width:100%;border-collapse:collapse}
thead{position:sticky;top:0;z-index:2}
thead th{text-align:left;font-size:10px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;padding:10px 16px;border-bottom:1px solid var(--border);font-weight:500;background:var(--bg3)}
tbody tr{border-bottom:1px solid rgba(42,43,48,.6);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}
tbody td{padding:12px 16px;font-size:13px;vertical-align:middle}
.td-mono{font-family:var(--mono);font-size:12px}

/* ── Badges ────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-size:10px;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.08em;border-radius:2px}
.badge-green{background:rgba(34,197,94,.15);color:var(--green)}.badge-red{background:rgba(239,68,68,.15);color:var(--red)}
.badge-amber{background:rgba(245,158,11,.15);color:var(--amber)}.badge-blue{background:rgba(59,130,246,.15);color:var(--blue)}.badge-gray{background:rgba(107,114,128,.15);color:var(--text-dim)}

/* ── Modals ────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease}
.modal{background:var(--bg2);border:1px solid var(--border);width:480px;max-height:85vh;overflow-y:auto;position:relative;animation:fadeUp .2s ease}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber)}
.modal-head{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:var(--mono);font-weight:600;font-size:14px}
.modal-body{padding:24px}.modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.close-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:4px;line-height:1;font-size:18px;transition:color .1s}.close-btn:hover{color:var(--text)}

/* ── Key/Secret boxes ──────────────────────────────── */
.key-box{background:var(--bg3);border:1px solid var(--amber);padding:12px 16px;font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--amber);margin:8px 0;border-radius:var(--radius)}

/* ── Loading/Empty states ──────────────────────────── */
.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.loading-center{display:flex;align-items:center;justify-content:center;padding:60px;gap:12px;color:var(--text-dim);font-family:var(--mono);font-size:12px}
.empty-state{padding:48px;text-align:center;color:var(--text-dim);font-family:var(--mono);font-size:12px}

/* ── Profile Dropdown ──────────────────────────────── */
.profile-dropdown{position:absolute;top:100%;right:0;width:260px;background:var(--bg2);border:1px solid var(--border);z-index:60;margin-top:4px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:fadeUp .15s ease}
.profile-dropdown::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber)}
.profile-dd-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.profile-dd-avatar{width:36px;height:36px;border-radius:50%;background:var(--amber);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:14px;flex-shrink:0}
.profile-dd-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:12px;font-family:var(--mono);color:var(--text-mid);cursor:pointer;transition:background .1s}
.profile-dd-item:hover{background:var(--bg3);color:var(--text)}
.profile-dd-item svg{opacity:.6;flex-shrink:0}
.profile-dd-sep{height:1px;background:var(--border);margin:4px 0}

/* ── Impersonation Pill ────────────────────────────── */
.imp-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);padding:4px 12px;border-radius:16px;font-family:var(--mono);font-size:11px;animation:fadeIn .3s}
.imp-pill-label{color:var(--amber);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.imp-pill-name{color:var(--text-mid)}
.imp-pill-stop{background:none;border:1px solid var(--amber);color:var(--amber);padding:2px 8px;border-radius:12px;font-size:10px;font-family:var(--mono);font-weight:600;cursor:pointer;transition:all .15s}
.imp-pill-stop:hover{background:var(--amber);color:var(--bg)}

/* ── Charts ────────────────────────────────────────── */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;margin-bottom:24px}
.chart-card{background:var(--bg2);border:1px solid var(--border);padding:16px;border-radius:var(--radius)}
.chart-card-title{font-size:11px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-weight:600}

/* ── Tooltips ──────────────────────────────────────── */
[data-tooltip]{position:relative}
[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#e2e4e9;padding:6px 10px;border-radius:4px;font-size:11px;font-family:var(--mono);white-space:nowrap;z-index:300;pointer-events:none;animation:fadeIn .15s ease;max-width:300px;white-space:normal;line-height:1.4}

/* ── Toast ─────────────────────────────────────────── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg2);border:1px solid var(--border);padding:12px 20px;font-family:var(--mono);font-size:12px;color:var(--text);z-index:500;animation:fadeUp .2s ease;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.toast::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber)}

/* ── Animations ────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Responsive: Tablet ≤1024px ────────────────────── */
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 180px 1fr; }
  .sidebar { padding: 12px 0; }
  .nav-item { font-size: 12px; padding: 8px 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .chart-grid { grid-template-columns: 1fr !important; }
  .login-card { width: 90vw !important; max-width: 480px; }
  .topbar-user { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Responsive: Mobile ≤768px ─────────────────────── */
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar { display: none; }
  .topbar { padding: 6px 10px; }
  .topbar-logo { font-size: 12px; gap: 6px; }
  .topbar-logo-badge img { height: 28px; }
  .topbar-right { gap: 8px; }
  .topbar-user { display: none; }
  .profile-dd-avatar { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-card { padding: 12px !important; }
  .stat-card .stat-value { font-size: 22px !important; }
  .page-title { font-size: 18px !important; }
  .page-header { flex-direction: column; gap: 8px; align-items: stretch !important; }
  .page-header .btn { width: 100%; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 600px; }
  .mobile-menu-btn { display: block !important; }
}