/* ==========================================================================
   EARobot FX — License Manager
   Trading-terminal dark theme: charcoal base, indigo/teal/gold accents.
   ========================================================================== */

:root{
    --bg:        #0f0f16;
    --surf:      #171721;
    --surf2:     #1c1c28;
    --card:      #20202e;
    --hdr:       #272736;
    --border:    #33334a;
    --border-lt: #3d3d56;

    --acc:       #6366f1;   /* indigo */
    --acc-lt:    #818cf8;
    --acc2:      #8b5cf6;   /* violet */
    --gold:      #e0ac3a;
    --teal:      #2dd4bf;

    --ok:        #34d399;
    --ok-bg:     rgba(52,211,153,.13);
    --warn:      #fbbf24;
    --warn-bg:   rgba(251,191,36,.13);
    --err:       #f87171;
    --err-bg:    rgba(248,113,113,.13);
    --info:      #60a5fa;
    --info-bg:   rgba(96,165,250,.13);

    --txt:       #eaeaf4;
    --txt-dim:   #9797b0;
    --txt-faint: #6d6d85;

    --radius:    10px;
    --radius-lg: 14px;
    --shadow:    0 8px 24px rgba(0,0,0,.35);
    --mono: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', Menlo, monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;

    --sidebar-w: 232px;
    --topbar-h: 58px;
    --bottomnav-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body{
    margin:0; background:var(--bg); color:var(--txt); font-family:var(--sans);
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{ color:var(--acc-lt); text-decoration:none; }
code{ font-family:var(--mono); }

::selection{ background:var(--acc2); color:#fff; }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-lt); border-radius:8px; }

/* ── App shell ─────────────────────────────────────────────── */
.app-shell{ display:flex; min-height:100vh; }

/* Sidebar (desktop) */
.sidebar{
    width:var(--sidebar-w); flex-shrink:0; background:var(--surf);
    border-right:1px solid var(--border); position:fixed; top:0; left:0; bottom:0;
    display:flex; flex-direction:column; z-index:40;
    transition:transform .25s ease;
}
.brand{
    display:flex; align-items:center; gap:10px; padding:20px 18px;
    border-bottom:1px solid var(--border);
}
.brand-mark{
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:linear-gradient(135deg, var(--acc), var(--acc2));
    display:flex; align-items:center; justify-content:center; font-size:17px;
    box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.brand-text{ line-height:1.25; overflow:hidden; }
.brand-text strong{ display:block; font-size:14.5px; color:var(--txt); white-space:nowrap; }
.brand-text span{ display:block; font-size:11px; color:var(--txt-dim); white-space:nowrap; }

.nav{ flex:1; padding:14px 10px; overflow-y:auto; }
.nav a{
    display:flex; align-items:center; gap:11px; padding:10px 12px; margin-bottom:2px;
    border-radius:8px; color:var(--txt-dim); font-size:13.5px; font-weight:500;
    transition:background .15s, color .15s;
}
.nav a .ic{ font-size:16px; width:20px; text-align:center; }
.nav a:hover{ background:var(--surf2); color:var(--txt); }
.nav a.active{ background:rgba(99,102,241,.14); color:var(--acc-lt); }
.nav a.active .ic{ filter:drop-shadow(0 0 6px rgba(99,102,241,.5)); }

.nav-foot{ padding:14px 18px; border-top:1px solid var(--border); font-size:11px; color:var(--txt-faint); }

/* ── Toggle bahasa (BM/EN) ─────────────────────────────────── */
.lang-toggle{ display:flex; gap:0; background:var(--surf2); border:1px solid var(--border-lt); border-radius:8px; padding:2px; margin-bottom:12px; }
.lang-toggle a{ flex:1; text-align:center; padding:5px 0; border-radius:6px; font-size:11px; font-weight:700; color:var(--txt-dim); letter-spacing:.3px; }
.lang-toggle a.active{ background:var(--acc); color:#fff; }

/* Main column */
.main{ margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }

/* Topbar (mobile) */
.topbar{
    display:none; position:sticky; top:0; z-index:30; background:rgba(15,15,22,.92);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
    align-items:center; gap:12px; padding:0 14px; height:var(--topbar-h);
}
.hamburger{
    width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
    background:var(--surf2); color:var(--txt); display:flex; align-items:center;
    justify-content:center; font-size:17px; flex-shrink:0;
}
.topbar-title{ font-size:15px; font-weight:600; }

/* Bottom nav (mobile) */
.bottomnav{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:rgba(23,23,33,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0);
}
.bottomnav-inner{ display:flex; }
.bottomnav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 4px 8px; color:var(--txt-dim); font-size:10.5px; font-weight:600;
}
.bottomnav a .ic{ font-size:19px; }
.bottomnav a.active{ color:var(--acc-lt); }

.sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:39;
}
.sidebar-overlay.show{ display:block; }

.content{ padding:26px 30px 40px; width:100%; }

/* ── Page header ───────────────────────────────────────────── */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1{ font-size:21px; margin:0 0 3px; }
.page-head .sub{ color:var(--txt-dim); font-size:13px; }
.page-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
    display:inline-flex; align-items:center; gap:7px; background:var(--acc); color:#fff;
    border:none; padding:9px 15px; border-radius:8px; font-size:13px; font-weight:600;
    cursor:pointer; transition:filter .15s, transform .05s; white-space:nowrap;
    font-family:var(--sans);
}
.btn:hover{ filter:brightness(1.1); }
.btn:active{ transform:scale(.97); }
.btn.secondary{ background:var(--surf2); border:1px solid var(--border-lt); color:var(--txt); }
.btn.danger{ background:var(--err); color:#2a0d0d; }
.btn.ghost{ background:transparent; border:1px solid var(--border-lt); color:var(--txt-dim); }
.btn.gold{ background:var(--gold); color:#2a1d05; }
.btn.small{ padding:6px 10px; font-size:12px; border-radius:6px; }
.btn.icon-only{ padding:8px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-block{ width:100%; justify-content:center; }

/* ── Cards ─────────────────────────────────────────────────── */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.card-pad{ padding:20px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.card-head h2{ font-size:14px; margin:0; color:var(--gold); letter-spacing:.2px; display:flex; align-items:center; gap:8px; }

/* ── Stat grid ─────────────────────────────────────────────── */
.stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.stat-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:16px 18px; position:relative; overflow:hidden;
}
.stat-card .stat-ic{
    width:36px; height:36px; border-radius:9px; display:flex; align-items:center;
    justify-content:center; font-size:17px; margin-bottom:10px;
}
.stat-card .stat-val{ font-size:24px; font-weight:700; font-family:var(--mono); line-height:1.1; }
.stat-card .stat-label{ font-size:12px; color:var(--txt-dim); margin-top:3px; }
.stat-card .stat-sub{ font-size:11px; color:var(--txt-faint); margin-top:6px; }
.stat-card.a .stat-ic{ background:var(--ok-bg); color:var(--ok); }
.stat-card.b .stat-ic{ background:var(--info-bg); color:var(--info); }
.stat-card.c .stat-ic{ background:var(--warn-bg); color:var(--warn); }
.stat-card.d .stat-ic{ background:var(--err-bg); color:var(--err); }

/* ── Chart (SVG bars) ──────────────────────────────────────── */
.chart-wrap{ padding:18px 20px 8px; }
.chart-legend{ display:flex; gap:16px; font-size:11.5px; color:var(--txt-dim); margin-bottom:6px; }
.chart-legend span{ display:inline-flex; align-items:center; gap:5px; }
.dot{ width:8px; height:8px; border-radius:2px; display:inline-block; }

/* ── Two-col dashboard layout ──────────────────────────────── */
.dash-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
.mini-list{ padding:8px 0; }
.mini-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 20px; border-bottom:1px solid var(--hdr); font-size:12.5px; }
.mini-row:last-child{ border-bottom:none; }
.mini-row .k{ font-family:var(--mono); color:var(--teal); font-size:12px; }
.mini-row .meta{ color:var(--txt-dim); font-size:11.5px; }

/* ── Filter / search bar ───────────────────────────────────── */
.filterbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.filterbar .grow{ flex:1; min-width:180px; }
select, input[type=text], input[type=number], input[type=date], input[type=search],
input[type=email], input[type=password], textarea{
    width:100%; background:var(--surf2); border:1px solid var(--border-lt); color:var(--txt);
    padding:9px 11px; border-radius:8px; font-size:13px; font-family:var(--sans);
}
textarea{ font-family:var(--sans); resize:vertical; }

/* ── Tab Email Settings ───────────────────────────────────── */
.card.card-form{ padding:20px; margin-bottom:18px; }
.form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 16px; }
@media (max-width: 780px){ .form-grid{ grid-template-columns:1fr; } }

.searchbox{ position:relative; }
.searchbox .ic{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--txt-faint); font-size:13px; pointer-events:none; }
.searchbox input[type=text], .searchbox input[type=search]{ padding-left:32px; }
select:focus, input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(99,102,241,.18); }
label{ display:block; font-size:11.5px; color:var(--txt-dim); margin-bottom:5px; margin-top:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
label:first-child{ margin-top:0; }
.field-hint{ font-size:11px; color:var(--txt-faint); margin-top:4px; }

.chip-filter{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-filter a{
    padding:7px 13px; border-radius:20px; font-size:12px; font-weight:600;
    background:var(--surf2); border:1px solid var(--border-lt); color:var(--txt-dim);
}
.chip-filter a.active{ background:var(--acc); border-color:var(--acc); color:#fff; }

/* ── Filter julat tarikh (dashboard) ───────────────────────── */
.daterange-fields{ display:none; align-items:center; gap:8px; }
.daterange-fields.active{ display:flex; }
.daterange-fields input[type=date]{ width:auto; min-width:140px; }
.daterange-fields .dr-sep{ color:var(--txt-faint); }

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{
    text-align:left; color:var(--txt-dim); font-weight:700; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.5px; padding:11px 14px;
    border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{ padding:12px 14px; border-bottom:1px solid var(--hdr); vertical-align:middle; }
tbody tr:hover td{ background:rgba(255,255,255,.02); }
.key-mono{ font-family:var(--mono); color:var(--teal); font-weight:600; font-size:12.5px; letter-spacing:.2px; }
.url-cell{ display:inline-block; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.copy-btn{ background:none; border:none; color:var(--txt-faint); cursor:pointer; padding:2px 4px; font-size:12px; vertical-align:middle; }
.copy-btn:hover{ color:var(--acc-lt); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.text-dim{ color:var(--txt-dim); }
.text-faint{ color:var(--txt-faint); font-size:12px; }
.slot-bar{ width:70px; height:5px; background:var(--hdr); border-radius:4px; overflow:hidden; margin-top:5px; }
.slot-bar > i{ display:block; height:100%; background:var(--teal); }
.slot-bar.full > i{ background:var(--warn); }

/* ── Badges ────────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.2px; }
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-err{ background:var(--err-bg); color:var(--err); }
.badge-info{ background:var(--info-bg); color:var(--info); }

/* ── Pagination ────────────────────────────────────────────── */
.pagination{ display:flex; gap:6px; justify-content:center; padding:18px 0 4px; flex-wrap:wrap; }
.pagination a, .pagination span{
    min-width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:7px; font-size:12.5px; color:var(--txt-dim); border:1px solid var(--border-lt);
}
.pagination a:hover{ background:var(--surf2); }
.pagination .cur{ background:var(--acc); color:#fff; border-color:var(--acc); }
.pagination .dots{ border:none; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(6,6,12,.7); z-index:100;
    align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px);
}
.modal-overlay.show{ display:flex; }
.modal{
    background:var(--card); border:1px solid var(--border-lt); border-radius:var(--radius-lg);
    width:100%; max-width:440px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow);
    animation:modalIn .18s ease;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-head h3{ margin:0; font-size:15px; }
.modal-close{ background:none; border:none; color:var(--txt-dim); font-size:18px; cursor:pointer; padding:2px 6px; }
.modal-body{ padding:20px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--border); }

/* ── Toasts ────────────────────────────────────────────────── */
.toast-stack{ position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.toast{
    background:var(--card); border:1px solid var(--border-lt); border-left:4px solid var(--acc);
    border-radius:9px; padding:12px 16px; font-size:13px; box-shadow:var(--shadow);
    animation:toastIn .2s ease;
}
.toast.success{ border-left-color:var(--ok); }
.toast.error{ border-left-color:var(--err); }
@keyframes toastIn{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:none;} }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state{ text-align:center; padding:50px 20px; color:var(--txt-dim); }
.empty-state .ic{ font-size:34px; margin-bottom:10px; opacity:.6; }
.empty-state p{ margin:4px 0 0; font-size:13px; }

/* ── Checkbox ──────────────────────────────────────────────── */
input[type=checkbox]{ width:16px; height:16px; accent-color:var(--acc); cursor:pointer; }
.bulkbar{
    display:none; align-items:center; gap:10px; background:var(--surf2); border:1px solid var(--border-lt);
    border-radius:9px; padding:9px 14px; margin-bottom:12px; font-size:12.5px; flex-wrap:wrap;
}
.bulkbar.show{ display:flex; }

/* ── Details expand for activations under a key row ───────── */
.pc-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surf2); border:1px solid var(--hdr); border-radius:8px; padding:9px 12px; margin-bottom:6px; font-size:12px; }
.pc-row.revoked{ opacity:.55; }
details > summary{ cursor:pointer; color:var(--acc-lt); font-size:12px; list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
details > summary:before{ content:'▸ '; }
details[open] > summary:before{ content:'▾ '; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 980px){
    .stat-grid{ grid-template-columns:repeat(2, 1fr); }
    .dash-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
    .sidebar{ transform:translateX(-100%); }
    .sidebar.open{ transform:translateX(0); }
    .main{ margin-left:0; }
    .topbar{ display:flex; }
    .bottomnav{ display:block; }
    .content{ padding:16px 14px calc(var(--bottomnav-h) + 24px); }
    .page-head{ margin-bottom:16px; }
    .page-head h1{ font-size:18px; }
    .stat-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .stat-card{ padding:12px 14px; }
    .stat-card .stat-val{ font-size:19px; }

    /* Table -> stacked cards */
    .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr{ display:block; }
    .table-wrap thead{ display:none; }
    .table-wrap tr{ background:var(--surf2); border:1px solid var(--hdr); border-radius:10px; margin-bottom:10px; padding:6px 0; }
    .table-wrap td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border:none; text-align:right; }
    .table-wrap td::before{ content:attr(data-label); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--txt-faint); font-weight:700; text-align:left; }
    .table-wrap td.no-label::before{ display:none; }
    .row-actions{ justify-content:flex-end; width:100%; }

    .card-head{ padding:14px 16px; }
    .card-pad{ padding:16px; }
    .filterbar{ flex-direction:column; align-items:stretch; }
}

@media (max-width: 420px){
    .stat-grid{ grid-template-columns:1fr 1fr; }
}