/* ── Design System ── */
:root {
    --c-primary:#2563EB; --c-accent:#0EA5E9; --c-success:#10B981;
    --c-warning:#F59E0B; --c-danger:#EF4444;
    --c-bg:#F1F5F9; --c-surface:#FFFFFF;
    --c-sidebar:#0F172A; --c-toolbar:#1E293B;
    --c-text:#0F172A; --c-text2:#475569; --c-text3:#94A3B8;
    --c-border:#E2E8F0;
    --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.04);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);
    --radius:8px; --radius-lg:12px;
}
html,body { margin:0; padding:0; height:100%; overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#94A3B8; }

/* ── Webix Overrides: Toolbar ── */
.webix_layout_toolbar.webix_dark {
    background:linear-gradient(135deg,#1E293B 0%,#0F172A 100%) !important;
}

/* ── Webix Overrides: Sidebar ── */
.webix_sidebar { background:var(--c-sidebar) !important; }
.webix_sidebar .webix_tree_item {
    color:#CBD5E1 !important; border-radius:6px !important;
    margin:2px 8px !important; transition:all .2s ease !important;
}
.webix_sidebar .webix_tree_item:hover {
    background:rgba(255,255,255,.08) !important; color:#F1F5F9 !important;
}
.webix_sidebar .webix_selected .webix_tree_item,
.webix_sidebar .webix_selected .webix_tree_item:hover {
    background:linear-gradient(135deg,#2563EB,#1D4ED8) !important;
    color:#FFFFFF !important; box-shadow:0 2px 8px rgba(37,99,235,.35) !important;
}
/* ── Sidebar Group Headers ── */
.sidebar-group { pointer-events:none !important; cursor:default !important; }
.sidebar-group .webix_tree_item {
    font-size:10px !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:1.2px !important;
    color:#64748B !important; cursor:default !important;
    background:transparent !important; box-shadow:none !important;
    padding:14px 16px 4px 16px !important; margin:2px 8px 0 !important;
}
.sidebar-group .webix_tree_item:hover {
    background:transparent !important; color:#64748B !important; box-shadow:none !important;
}
.sidebar-group .webix_tree_item .webix_icon,
.sidebar-group .webix_tree_item .webix_sidebar_icon { display:none !important; }
/* ── Loading & Empty States ── */
.loading-state { padding:40px; text-align:center; color:var(--c-text3); }
.loading-spinner { display:inline-block; width:24px; height:24px; border:3px solid #E2E8F0;
    border-top-color:#2563EB; border-radius:50%; animation:lm-spin .8s linear infinite; }
@keyframes lm-spin { to { transform:rotate(360deg); } }
.empty-state { padding:40px; text-align:center; color:var(--c-text3); }
.empty-state-icon { font-size:32px; margin-bottom:8px; opacity:.5; }
.empty-state-text { font-size:14px; font-weight:500; }
.empty-state-hint { font-size:12px; margin-top:4px; color:#CBD5E1; }

/* ── Webix Overrides: Datatable ── */
.webix_dtable .webix_hcell {
    background:#F8FAFC !important; color:var(--c-text2) !important;
    font-weight:600 !important; font-size:12px !important;
    text-transform:uppercase; letter-spacing:.3px;
}
.webix_dtable .webix_cell { border-bottom-color:#F1F5F9 !important; }
.webix_dtable .webix_row_select .webix_cell { background:#EFF6FF !important; }

/* ── Webix Overrides: Window / Dialog ── */
.webix_window { border-radius:var(--radius-lg) !important; overflow:hidden; box-shadow:var(--shadow-lg) !important; }
.webix_win_head { background:#F8FAFC !important; }
.webix_win_head .webix_template { font-weight:600 !important; color:var(--c-text) !important; }
.webix_primary button,.webix_primary input {
    border-radius:var(--radius) !important; font-weight:600 !important;
    background:var(--c-primary) !important; transition:all .2s !important;
}
.webix_primary button:hover,.webix_primary input:hover { background:#1D4ED8 !important; }
.webix_danger button { background:var(--c-danger) !important; border-radius:var(--radius) !important; }

/* ── Login Page ── */
.login-bg {
    background:linear-gradient(160deg,#0F172A 0%,#1E293B 40%,#162032 70%,#0F172A 100%);
    position:relative; overflow:hidden;
}
.login-bg::before {
    content:''; position:absolute; top:-30%; left:-20%; width:70%; height:70%; pointer-events:none;
    background:radial-gradient(ellipse, rgba(37,99,235,.12) 0%, transparent 70%);
}
.login-bg::after {
    content:''; position:absolute; bottom:-20%; right:-15%; width:60%; height:60%; pointer-events:none;
    background:radial-gradient(ellipse, rgba(14,165,233,.08) 0%, transparent 70%);
}
/* Parent layout must not clip the card shadow/radius */
.login-bg .webix_layout_line,
.login-bg .webix_layout_space,
.login-bg .webix_column,
.login-bg .webix_scroll_cont,
.login-bg > .webix_layout_line { overflow:visible !important; }
/* Card wrapper — sits on the webix_form */
.login-card {
    background:#FFFFFF !important; border:none !important;
    border-radius:20px !important;
    box-shadow:0 25px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05) !important;
    padding:32px 36px 24px !important;
    overflow:visible !important;
    margin:24px 0 !important;
}
.login-card .webix_el_box { padding:0 !important; }
/* Inputs */
.login-card .webix_el_text input,
.login-card .webix_inp_static {
    border:1.5px solid #E2E8F0 !important; border-radius:10px !important;
    height:44px !important; line-height:44px !important;
    font-size:14px !important; padding:0 14px !important;
    background:#F8FAFC !important; color:#0F172A !important;
    transition:border-color .2s, box-shadow .2s !important;
}
.login-card .webix_el_text input:focus {
    border-color:#2563EB !important; background:#fff !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.12) !important; outline:none !important;
}
.login-card .webix_el_text input::placeholder { color:#94A3B8 !important; }
/* Button */
.login-card .webix_primary button {
    height:46px !important; border-radius:10px !important; font-size:15px !important;
    font-weight:700 !important; letter-spacing:.3px;
    background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 100%) !important;
    box-shadow:0 4px 12px rgba(37,99,235,.3) !important;
    transition:all .2s !important;
}
.login-card .webix_primary button:hover {
    background:linear-gradient(135deg,#1D4ED8 0%,#1E40AF 100%) !important;
    box-shadow:0 6px 16px rgba(37,99,235,.4) !important;
    transform:translateY(-1px);
}
.login-card .webix_primary button:active { transform:translateY(0); }
/* Logo */
.login-logo { text-align:center; padding:0 0 12px; }
.login-logo-img {
    height:100px; width:auto; margin-bottom:6px;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
}
.login-logo-icon {
    width:60px; height:60px; border-radius:16px;
    background:linear-gradient(135deg,#2563EB 0%,#0EA5E9 100%);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; margin-bottom:16px;
    box-shadow:0 8px 24px rgba(37,99,235,.25);
}
.login-logo h1 { font-size:24px; font-weight:800; color:#0F172A; margin:0 0 4px; letter-spacing:-.5px; }
.login-logo p { font-size:13px; color:#94A3B8; margin:0; font-weight:500; }

/* ── Stat Cards ── */
.lm-card {
    text-align:center; padding:18px 10px; background:var(--c-surface);
    border-radius:var(--radius-lg); box-shadow:var(--shadow); margin:6px;
    cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1);
    border:1px solid var(--c-border);
}
.lm-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:transparent; }
.lm-card:active { transform:translateY(0); }
.lm-stat-num { font-size:30px; font-weight:700; line-height:1.2; }
@keyframes countUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.lm-stat-num { animation: countUp .5s ease-out both; }
.lm-stat-lbl { font-size:10px; color:var(--c-text3); margin-top:4px; text-transform:uppercase; letter-spacing:.8px; font-weight:600; }
.chart-legend { display:flex; gap:16px; padding:4px 16px; flex-wrap:wrap; align-items:center; }
.chart-legend-item { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--c-text2,#475569); cursor:default; }
.chart-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.lm-blue   { color:#2563EB }
.lm-green  { color:#10B981 }
.lm-red    { color:#EF4444 }
.lm-orange { color:#F59E0B }
.lm-purple { color:#8B5CF6 }

/* ── Status Badges (pill style) ── */
.st-active  { background:#D1FAE5; color:#065F46; padding:3px 10px; border-radius:20px; font-weight:600; font-size:11px }
.st-revoked { background:#FEE2E2; color:#991B1B; padding:3px 10px; border-radius:20px; font-weight:600; font-size:11px }
.st-expired { background:#FEF3C7; color:#92400E; padding:3px 10px; border-radius:20px; font-weight:600; font-size:11px }

/* ── Detail Pane ── */
.det-section { padding:16px; }
.detail-panel { border-left:1px solid var(--c-border,#E2E8F0); background:var(--c-surface,#fff); }
.det-title {
    font-size:11px; font-weight:700; margin:18px 0 10px; padding:8px 0 6px;
    border-bottom:2px solid var(--c-border); color:var(--c-text2);
    text-transform:uppercase; letter-spacing:.6px;
}
.det-section .det-title:first-child { margin-top:0; }
.det-row   { display:flex; padding:4px 0; font-size:13px; align-items:baseline; }
.det-lbl   { width:140px; color:var(--c-text3); flex-shrink:0; font-size:12px; font-weight:500; }
.det-val   { font-weight:500; word-break:break-all; color:var(--c-text); }

/* ── Progress Bar ── */
.quota-bar  { height:20px; background:#E2E8F0; border-radius:10px; overflow:hidden; position:relative;
    margin-top:auto; margin-bottom:auto; }
.quota-fill { height:100%; border-radius:10px; transition:width .4s cubic-bezier(.4,0,.2,1); }
.quota-text { position:absolute; top:0; left:0; right:0; text-align:center;
    font-size:11px; font-weight:600; line-height:20px; color:#334155; }
.webix_cell .quota-bar { top:50%; transform:translateY(-50%); position:relative; }

/* ── Mini Table ── */
.mtbl       { width:100%; font-size:12px; border-collapse:separate; border-spacing:0;
    margin-top:8px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.mtbl th    { background:#F8FAFC; font-weight:600; text-align:left; padding:6px 8px;
    color:var(--c-text2); border-bottom:2px solid var(--c-border); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.mtbl td    { padding:5px 8px; border-bottom:1px solid #F1F5F9; }
.mtbl tr:last-child td { border-bottom:none; }
.mtbl tr:hover td { background:#F8FAFC; }
.mtbl tr.inactive { background:#FEF2F2; }

/* ── Telemetry Styles ── */
.lm-cyan    { color:#06B6D4 }
.lm-pink    { color:#EC4899 }
.lm-teal    { color:#14B8A6 }
.lm-indigo  { color:#6366F1 }
.st-online  { background:#D1FAE5; color:#065F46; padding:3px 10px; border-radius:20px; font-weight:600; font-size:11px }
.st-offline { background:#F1F5F9; color:#64748B; padding:3px 10px; border-radius:20px; font-weight:600; font-size:11px }
.st-low      { background:#D1FAE5; color:#065F46; padding:2px 8px; border-radius:20px; font-weight:600; font-size:11px }
.st-medium   { background:#FEF3C7; color:#92400E; padding:2px 8px; border-radius:20px; font-weight:600; font-size:11px }
.st-high     { background:#FED7AA; color:#C2410C; padding:2px 8px; border-radius:20px; font-weight:600; font-size:11px }
.st-critical { background:#FEE2E2; color:#991B1B; padding:2px 8px; border-radius:20px; font-weight:700; font-size:11px }
.threat-img  { max-width:100%; border-radius:var(--radius); cursor:pointer; transition:transform .2s; box-shadow:var(--shadow); }
.threat-img:hover { transform:scale(1.03); box-shadow:var(--shadow-md); }
.tel-section { font-size:14px; font-weight:600; padding:8px 14px; color:var(--c-text); }

/* ── Telemetry sub-nav tabs ── */
.tel-nav { display:flex; gap:2px; padding:0 16px 6px; background:var(--c-bg,#F1F5F9); }
.tel-nav a {
    padding:6px 14px; font-size:12px; font-weight:600; color:var(--c-muted,#64748B);
    text-decoration:none; border-radius:6px; cursor:pointer; transition:all .15s;
    display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.tel-nav a:hover { background:var(--c-surface,#fff); color:var(--c-text); }
.tel-nav a.active { background:var(--c-accent,#3B82F6); color:#fff; pointer-events:none; }
.online-dot  { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.online-dot.on  { background:#10B981; box-shadow:0 0 6px rgba(16,185,129,.4); }
.online-dot.off { background:#CBD5E1; }

/* ── Action Buttons (used in detail panes via inline onclick) ── */
.det-section button {
    padding:8px 18px; cursor:pointer; border-radius:var(--radius);
    font-size:13px; font-weight:600; transition:all .2s;
    border:1px solid transparent;
}
.det-section button:not([disabled]):hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.det-section button:not([disabled]):active { transform:translateY(0); }
.det-section button[disabled] { cursor:not-allowed; opacity:.6; }

/* ── Page Header ── */
.page-hdr { font-size:20px; font-weight:700; color:var(--c-text); padding:16px 20px; }

/* ── User Avatar ── */
.user-avatar {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#2563EB,#0EA5E9);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#fff; letter-spacing:.5px;
}

/* ── Mobile Menu ── */
.mobile-menu-btn { display:none; cursor:pointer; padding:8px 12px; font-size:22px; color:#fff; background:transparent; border:none; }

/* ── Mobile Responsive ── */
@media screen and (max-width: 768px) {
    .mobile-menu-btn { display:inline-block !important; }
    .lm-card { padding:10px 4px; margin:3px; border-radius:var(--radius); }
    .lm-stat-num { font-size:20px; }
    .lm-stat-lbl { font-size:9px; letter-spacing:0; }
    .det-row { flex-direction:column; }
    .det-lbl { width:auto; margin-bottom:2px; font-size:11px; }
    .det-val { font-size:13px; }
    .det-title { font-size:10px; margin:10px 0 6px; }
    .mtbl { font-size:11px; display:block; overflow-x:auto; }
    .mtbl th, .mtbl td { padding:3px 4px; white-space:nowrap; }
    .quota-bar { height:16px; }
    .quota-text { font-size:10px; line-height:16px; }
    .page-hdr { font-size:16px; padding:10px 12px; }
}
@media screen and (max-width: 480px) {
    .lm-stat-num { font-size:16px; }
    .lm-stat-lbl { font-size:8px; }
    .lm-card { padding:8px 2px; margin:2px; }
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    --c-bg:#0F172A; --c-surface:#1E293B; --c-text:#E2E8F0; --c-text2:#94A3B8; --c-text3:#64748B;
    --c-border:#334155; --c-sidebar:#0B1120; --c-toolbar:#0F172A;
    --shadow:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 6px rgba(0,0,0,.3); --shadow-lg:0 10px 15px rgba(0,0,0,.4);
}
[data-theme="dark"] .webix_dtable .webix_hcell { background:#1E293B !important; color:#94A3B8 !important; }
[data-theme="dark"] .webix_dtable .webix_cell { background:#0F172A !important; color:#E2E8F0 !important; border-bottom-color:#1E293B !important; }
[data-theme="dark"] .webix_dtable .webix_row_select .webix_cell { background:#1E3A5F !important; }
[data-theme="dark"] .webix_window { background:#1E293B !important; }
[data-theme="dark"] .webix_win_head { background:#0F172A !important; }
[data-theme="dark"] .webix_win_head .webix_template { color:#E2E8F0 !important; }
[data-theme="dark"] .webix_el_text input,
[data-theme="dark"] .webix_inp_static { background:#0F172A !important; color:#E2E8F0 !important; border-color:#334155 !important; }
[data-theme="dark"] .webix_el_text input:focus { border-color:#2563EB !important; background:#1E293B !important; }
[data-theme="dark"] .webix_el_richselect .webix_inp_static { background:#0F172A !important; color:#E2E8F0 !important; }
[data-theme="dark"] .webix_popup { background:#1E293B !important; border-color:#334155 !important; }
[data-theme="dark"] .webix_list_item { background:#1E293B !important; color:#E2E8F0 !important; }
[data-theme="dark"] .webix_list_item:hover { background:#334155 !important; }
[data-theme="dark"] .webix_layout_toolbar.webix_dark { background:#0B1120 !important; }
[data-theme="dark"] .webix_sidebar { background:#0B1120 !important; }
[data-theme="dark"] .page-hdr { color:#E2E8F0; }
[data-theme="dark"] .lm-card { background:#1E293B; border-color:#334155; }
[data-theme="dark"] .det-section { color:#E2E8F0; }
[data-theme="dark"] .det-lbl { color:#94A3B8; }
[data-theme="dark"] .det-val { color:#E2E8F0; }
[data-theme="dark"] .det-title { color:#94A3B8; border-bottom-color:#334155; }
[data-theme="dark"] .mtbl th { background:#1E293B; color:#94A3B8; border-bottom-color:#334155; }
[data-theme="dark"] .mtbl td { border-bottom-color:#1E293B; color:#E2E8F0; }
[data-theme="dark"] .mtbl tr:hover td { background:#0F172A; }
[data-theme="dark"] .quota-bar { background:#334155; }
[data-theme="dark"] .quota-text { color:#E2E8F0; }
[data-theme="dark"] .webix_view { background:#0F172A !important; }
[data-theme="dark"] .webix_form { background:#1E293B !important; }
[data-theme="dark"] .webix_el_label .webix_el_box { color:#E2E8F0 !important; }
[data-theme="dark"] .webix_el_counter input { background:#0F172A !important; color:#E2E8F0 !important; }
[data-theme="dark"] .webix_el_datepicker .webix_inp_static { background:#0F172A !important; color:#E2E8F0 !important; }
[data-theme="dark"] .webix_cal_body .webix_cal_day { color:#E2E8F0 !important; }
[data-theme="dark"] .webix_tabbar .webix_item_tab { background:#0F172A !important; color:#94A3B8 !important; }
[data-theme="dark"] .webix_tabbar .webix_selected .webix_item_tab,
[data-theme="dark"] .webix_tabbar .webix_item_tab.webix_selected { background:#1E293B !important; color:#E2E8F0 !important; }
[data-theme="dark"] .tel-section { color:#E2E8F0; }

/* ── Global Search ── */
.search-results { position:absolute; top:48px; right:60px; width:380px; max-height:400px; overflow-y:auto;
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); z-index:10000; display:none; }
.search-results.active { display:block; }
.search-result-group { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
    color:var(--c-text3); padding:10px 14px 4px; }
.search-result-item { padding:8px 14px; cursor:pointer; font-size:13px; color:var(--c-text);
    display:flex; align-items:center; gap:8px; transition:background .15s; }
.search-result-item:hover { background:var(--c-bg); }
.search-result-item .sri-icon { font-size:16px; opacity:.6; }
.search-result-item .sri-text { font-weight:500; }
.search-result-item .sri-sub { font-size:11px; color:var(--c-text3); margin-left:auto; }

/* ── Back link ── */
.back-link { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500;
    color:var(--c-primary); cursor:pointer; margin-bottom:8px; text-decoration:none; }
.back-link:hover { text-decoration:underline; }