/* ======================================================
   TELENITY LOCATION TRACKER — OPERATIONS CONSOLE
   Design language: telecom NOC / GPS telemetry
====================================================== */

:root{
    --bg:            #070b14;
    --bg-deep:       rgba(9, 14, 25, .88);
    --panel:         rgba(17, 25, 42, .82);
    --panel-alt:     rgba(13, 20, 34, .85);
    --hairline:      rgba(148,163,184, .16);
    --text:          #e8edf5;
    --text-mute:     #94a3b8;
    --text-dim:      #5b6b85;
    --amber:         #6366f1;   /* primary accent (indigo) — token name kept for compatibility */
    --signal:        #38bdf8;   /* secondary accent (sky) */
    --danger:        #f43f5e;   /* error (rose) */
    --success:       #22c55e;   /* semantic success (green) */
    --warning:       #f59e0b;   /* semantic warning (amber) */
    --mono: 'IBM Plex Mono', 'SFMono-Regular', 'Menlo', 'Courier New', monospace;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
}

/* Frosted-glass panels floating over the photographic backdrop */
.topstrip, .sidebar, .panel, .kpi, .field, .input-prefix,
.scope, pre#result, .road-strip, .auth-card, .logout-btn,
.rail__mark{
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/* ==========================================
   AMBIENT BACKGROUND — night highway photo
   + CRT scanlines + flicker
========================================== */

.grid-overlay{
    position:fixed;
    inset:0;
    z-index:-3;
    background:
        radial-gradient(1200px 700px at 78% -8%, rgba(99,102,241,.10), transparent 60%),
        radial-gradient(1000px 600px at 8% 108%, rgba(56,189,248,.06), transparent 55%),
        linear-gradient(180deg, #0b1120 0%, #070b14 55%, #05080f 100%);
    background-attachment:fixed;
    background-color:#070b14;
}

.grid-overlay::before{
    content:"";
    position:absolute;
    inset:0;
    /* very faint structural grid — subtle, not a "terminal" look */
    background:
        linear-gradient(rgba(148,163,184,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.025) 1px, transparent 1px);
    background-size:48px 48px, 48px 48px;
    mask-image:radial-gradient(ellipse at 50% 30%, #000 40%, transparent 85%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 40%, transparent 85%);
}

/* CRT scanline + flicker removed for a clean, professional surface. */
.grid-overlay::after{
    content:"";
    position:fixed;
    bottom:0; right:0;
    width:640px;
    height:660px;
    z-index:-2;
    pointer-events:none;
    background-image:
        linear-gradient(300deg, rgba(7,11,20,.1) 0%, rgba(7,11,20,.35) 45%, var(--bg) 88%),
        url("/static/images/telenity-brand-bg.png");
    background-repeat:no-repeat;
    background-position:bottom right, bottom right;
    background-size:cover, 640px auto;
    opacity:.85;
}

@media (max-width:900px){
    .grid-overlay::after{ width:380px; height:400px; }
}

@keyframes flicker{
    0%, 100%{ opacity:1; }
}

/* ==========================================
   TICKER
========================================== */

.ticker{
    height:30px;
    background:var(--bg-deep);
    border-bottom:1px solid var(--hairline);
    overflow:hidden;
    display:flex;
    align-items:center;
}

.ticker__track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    color:var(--text-mute);
    animation:scrollTicker 32s linear infinite;
    padding-left:100%;
}

.ticker__track .dot{
    width:3px; height:3px;
    background:var(--text-dim);
    border-radius:50%;
    margin:0 18px;
    display:inline-block;
}

@keyframes scrollTicker{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

/* ==========================================
   SHELL LAYOUT
========================================== */

.app-shell{
    display:grid;
    grid-template-columns:258px 1fr;
    min-height:100vh;
}

.main-col{
    display:flex;
    flex-direction:column;
    min-width:0;
}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar{
    background:var(--bg-deep);
    border-right:1px solid var(--hairline);
    display:flex;
    flex-direction:column;
    padding:20px 16px;
    gap:22px;
}

.sidebar__logo{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 6px 14px;
    border-bottom:1px solid var(--hairline);
}

.sidebar__logo h2{
    font-size:14.5px;
    font-weight:700;
    color:var(--text);
    letter-spacing:.01em;
}

.sidebar__logo span{
    font-size:10.5px;
    color:var(--text-mute);
    letter-spacing:.03em;
}

.rail__mark{
    font-family:var(--mono);
    font-weight:700;
    font-size:13px;
    letter-spacing:.08em;
    color:#0a1120;
    background:var(--amber);
    width:36px; height:36px;
    flex:none;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 14px rgba(99,102,241,.35);
}

/* Image logo variant — the Telenity mark, no background tint so the
   SVG's own rounded badge shows cleanly. */
.rail__mark--img{
    background:transparent;
    box-shadow:0 0 14px rgba(99,102,241,.22);
    width:38px; height:38px;
    border-radius:10px;
    object-fit:contain;
}

.sidebar__nav{
    flex:1;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.sidebar__group-label{
    display:block;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-dim);
    padding:0 10px 8px;
}

.sidebar__group ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sidebar__group li{
    position:relative;
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px 10px;
    border-radius:8px;
    color:var(--text-mute);
    font-size:13px;
    cursor:pointer;
}

/* Sidebar items are now real links (<a href="#tab">) so they can be
   opened in a new tab / bookmarked. The <li> keeps its box styling; the
   anchor fills it and carries the flex row, inheriting colour so hover
   and .active states on the <li> still apply. */
.sidebar__group li{
    padding:0;                 /* padding moves onto the anchor */
}
.sidebar__group li .nav-a{
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;
    padding:9px 10px;
    border-radius:8px;
    color:inherit;
    text-decoration:none;
}

.sidebar__group li i{
    width:16px;
    text-align:center;
    font-size:13px;
}

.sidebar__group li:hover{
    color:var(--text);
    background:rgba(255,255,255,.04);
}

.sidebar__group li.active{
    color:var(--amber);
    background:linear-gradient(90deg, rgba(99,102,241,.16), rgba(99,102,241,.04));
    box-shadow:inset 2px 0 0 var(--amber);
    font-weight:600;
}

.mini-badge{
    margin-left:auto;
    background:var(--danger);
    color:#fff;
    font-size:10px;
    font-style:normal;
    font-weight:700;
    padding:1px 6px;
    border-radius:10px;
}

.sidebar__status{
    border-top:1px solid var(--hairline);
    padding-top:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar__status-head{
    font-size:12px;
    font-weight:600;
    color:var(--text);
}

.sidebar__status-line{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11.5px;
    color:var(--signal);
}

.sidebar__status-uptime{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--text-mute);
}

.sidebar__status-uptime .value{ color:var(--text); font-weight:600; }

.sidebar__status-since{
    font-size:10.5px;
    color:var(--text-dim);
}

.ghost-btn{
    margin-top:6px;
    width:100%;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    color:var(--text);
    font-family:var(--mono);
    font-size:11.5px;
    padding:9px;
    border-radius:8px;
    cursor:pointer;
    letter-spacing:.02em;
}

.ghost-btn:hover{ border-color:var(--amber); color:var(--amber); }

.ghost-btn--icon{
    width:auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
}

/* Check Now buttons: spinning icon + dimmed while a fetch is in flight. */
.ghost-btn.is-loading{
    opacity:.65;
    cursor:progress;
    pointer-events:none;
}
.ghost-btn.is-loading i{
    animation:tn-spin .8s linear infinite;
}
.ghost-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}
@keyframes tn-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* ==========================================
   TOP STRIP
========================================== */

.topstrip{
    height:44px;
    flex:none;
    background:var(--bg-deep);
    border-bottom:1px solid var(--hairline);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    gap:20px;
    box-shadow:0 4px 16px -8px rgba(2,6,16,.6);
    position:relative;
    z-index:10;
}

.topstrip__ticker{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    position:relative;
}

/* Fade the edges so the scrolling text doesn't hard-cut against the
   topstrip background — a small but very "polished dashboard" touch. */
.topstrip__ticker::before,
.topstrip__ticker::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:28px;
    z-index:2;
    pointer-events:none;
}
.topstrip__ticker::before{ left:0; background:linear-gradient(90deg, var(--bg-deep), transparent); }
.topstrip__ticker::after{ right:0; background:linear-gradient(270deg, var(--bg-deep), transparent); }

.brand-ticker{
    overflow:hidden;
    white-space:nowrap;
}

.brand-ticker__track{
    display:inline-flex;
    align-items:center;
    animation:brandTickerScroll 24s linear infinite;
}

.brand-ticker__seg{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding-right:28px;
}

.brand-ticker__seg i{
    font-size:11px;
    color:var(--signal);
    animation:brandTickerPulse 2.4s ease-in-out infinite;
}

.brand-ticker__text{
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    background:linear-gradient(90deg, var(--text) 0%, var(--signal) 45%, var(--amber) 75%, var(--text) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:brandTickerShine 6s linear infinite;
}

.brand-ticker__sep{
    color:var(--amber);
    opacity:.5;
    margin-left:28px;
    font-size:10px;
}

@keyframes brandTickerScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

@keyframes brandTickerShine{
    from{ background-position:0% center; }
    to{ background-position:200% center; }
}

@keyframes brandTickerPulse{
    0%, 100%{ opacity:.55; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.15); }
}

.topstrip__right{
    display:flex;
    align-items:center;
    gap:14px;
    flex:none;
}

.icon-btn{
    position:relative;
    width:32px; height:32px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-mute);
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    font-size:12.5px;
}

.badge-dot{
    position:absolute;
    top:-5px; right:-5px;
    background:var(--danger);
    color:#fff;
    font-size:9px;
    font-weight:700;
    padding:1px 4px;
    border-radius:8px;
}

/* ---- Notification panel ---- */
.notif{ position:relative; }
.notif > .icon-btn{ cursor:pointer; }
.notif > .icon-btn:hover{ color:var(--text); border-color:var(--amber); }

.notif-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:340px;
    max-height:440px;
    display:none;
    flex-direction:column;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:12px;
    box-shadow:0 18px 40px rgba(2,6,16,.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    z-index:120;
    overflow:hidden;
}
.notif-panel.open{ display:flex; }

.notif-panel__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid var(--hairline);
    font-size:12.5px; font-weight:600; color:var(--text);
    letter-spacing:.02em;
}
.notif-link{
    background:none; border:none; cursor:pointer;
    color:var(--amber); font-size:11px; font-weight:600;
    font-family:var(--sans);
}
.notif-link:hover{ text-decoration:underline; }

.notif-panel__list{
    overflow-y:auto;
    flex:1 1 auto;
}
.notif-empty{
    padding:26px 14px;
    text-align:center;
    color:var(--text-mute);
    font-size:12px;
}

.notif-item{
    display:flex; gap:10px;
    padding:11px 14px;
    border-bottom:1px solid var(--hairline);
    cursor:pointer;
    transition:background .12s;
}
.notif-item:hover{ background:var(--panel-alt); }
.notif-item.unread{ background:rgba(99,102,241,.07); }
.notif-item__icon{
    flex:0 0 auto;
    width:26px; height:26px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(99,102,241,.14); color:#a5b4fc;
    font-size:12px;
}
.notif-item__body{ min-width:0; flex:1; }
.notif-item__title{
    font-size:12px; font-weight:600; color:var(--text);
    display:flex; align-items:center; gap:6px;
}
.notif-item__key{ color:var(--amber); font-family:var(--mono); font-size:11px; }
.notif-item__summary{
    font-size:11.5px; color:var(--text-mute);
    margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.notif-item__time{ font-size:10px; color:var(--text-dim); margin-top:3px; }

.notif-panel__foot{
    padding:9px 14px;
    border-top:1px solid var(--hairline);
    text-align:center;
}

.user-block{
    display:flex;
    align-items:center;
    gap:10px;
    padding-left:14px;
    border-left:1px solid var(--hairline);
}

.user-block__avatar{
    width:30px; height:30px;
    border-radius:50%;
    background:var(--amber);
    color:#0a1120;
    font-weight:700;
    font-size:12px;
    display:flex; align-items:center; justify-content:center;
}

.user-block__meta{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.user-block__meta .name{ font-size:12px; font-weight:600; color:var(--text); }
.user-block__meta .role{ font-size:10px; color:var(--text-mute); }

/* ---- User menu (top-right) ---- */
.user-menu{ position:relative; }
.user-block{
    background:none;
    cursor:pointer;
    font-family:var(--sans);
    text-align:left;
}
.user-block:hover .user-block__caret{ color:var(--text); }
.user-block__avatar{ overflow:hidden; flex:0 0 auto; }
.user-block__avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.user-block__caret{
    font-size:10px; color:var(--text-mute); margin-left:2px;
    transition:transform .15s;
}
.user-menu.open .user-block__caret{ transform:rotate(180deg); color:var(--text); }

.user-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:210px;
    display:none;
    flex-direction:column;
    padding:6px;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:12px;
    box-shadow:0 18px 40px rgba(2,6,16,.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    z-index:120;
}
.user-menu.open .user-dropdown{ display:flex; }

.user-dropdown__item{
    display:flex; align-items:center; gap:10px;
    padding:9px 11px;
    background:none; border:none; cursor:pointer;
    color:var(--text); font-size:12.5px; font-weight:500;
    font-family:var(--sans); text-align:left; text-decoration:none;
    border-radius:8px;
}
.user-dropdown__item i{ width:15px; text-align:center; color:var(--text-mute); font-size:12px; }
.user-dropdown__item:hover{ background:var(--panel-alt); }
.user-dropdown__item:hover i{ color:var(--amber); }
.user-dropdown__item--danger{ color:#fb7185; }
.user-dropdown__item--danger i{ color:#fb7185; }
.user-dropdown__item--danger:hover{ background:rgba(244,63,94,.10); }
.user-dropdown__item--danger:hover i{ color:#fb7185; }
.user-dropdown__sep{ height:1px; background:var(--hairline); margin:5px 6px; }

.pulse-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--signal);
    display:inline-block;
    box-shadow:0 0 0 0 rgba(56,189,248,.55);
    animation:pulseDot 1.8s infinite;
    flex:none;
}

@keyframes pulseDot{
    0%{ box-shadow:0 0 0 0 rgba(56,189,248,.55); }
    100%{ box-shadow:0 0 0 10px rgba(56,189,248,0); }
}

/* ==========================================
   CONTENT
========================================== */

.content{
    padding:28px 40px 20px;
    max-width:1360px;
}

/* ==========================================
   TOPBAR
========================================== */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:26px;
}

.eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.16em;
    color:var(--amber);
}

.topbar__title h1{
    font-size:30px;
    font-weight:800;
    letter-spacing:-.01em;
    margin-top:4px;
    color:var(--amber);
    text-shadow:0 0 12px rgba(99,102,241,.45), 0 0 2px rgba(99,102,241,.6);
    position:relative;
    animation:titleGlitch 7s infinite;
}

@keyframes titleGlitch{
    0%, 92%, 100%{ transform:translate(0,0); text-shadow:0 0 12px rgba(99,102,241,.45), 0 0 2px rgba(99,102,241,.6); }
    92.5%{ transform:translate(-2px,0); text-shadow:2px 0 rgba(255,45,85,.7), -2px 0 rgba(56,189,248,.5); }
    93%{ transform:translate(2px,0); text-shadow:-2px 0 rgba(255,45,85,.7), 2px 0 rgba(56,189,248,.5); }
    93.5%{ transform:translate(0,0); text-shadow:0 0 12px rgba(99,102,241,.45), 0 0 2px rgba(99,102,241,.6); }
}

.topbar__title p{
    font-size:12.5px;
    color:var(--text-mute);
    margin-top:4px;
}

.topbar__right{
    display:flex;
    align-items:center;
    gap:16px;
}

.clock-block{
    text-align:right;
    font-family:var(--mono);
}

.clock-block #clock{
    display:block;
    font-size:20px;
    font-weight:600;
    color:var(--text);
}

.clock-block #clock::after{
    content:"_";
    color:var(--amber);
    animation:cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink{
    0%, 50%{ opacity:1; }
    51%, 100%{ opacity:0; }
}

.clock-block #dateline{
    display:block;
    font-size:11px;
    color:var(--text-mute);
    letter-spacing:.04em;
}

.status-chip{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    color:var(--signal);
    background:rgba(56,189,248,.08);
    border:1px solid rgba(56,189,248,.25);
    padding:8px 14px;
    border-radius:20px;
}

.user-chip{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:var(--text);
}

.user-chip i{
    font-size:18px;
    color:var(--amber);
}

.logout-btn{
    width:36px;
    height:36px;
    border-radius:9px;
    background:var(--panel);
    border:1px solid var(--hairline);
    color:var(--text-mute);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:13px;
}

.logout-btn:hover{
    color:var(--danger);
    border-color:rgba(255,45,85,.4);
}

/* ==========================================
   KPI STRIP
========================================== */

.kpi-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--hairline);
    border:1px solid var(--hairline);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:24px;
}

.kpi{
    background:var(--panel);
    padding:18px 22px;
    display:flex;
    flex-direction:column;
    gap:6px;
    position:relative;
    transition:background .15s ease;
}

.kpi::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, var(--amber), var(--signal));
    opacity:0;
    transition:opacity .15s ease;
}

.kpi:hover{ background:var(--panel-alt); }
.kpi:hover::before{ opacity:1; }

.kpi__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.kpi__icon{
    width:26px; height:26px;
    border-radius:7px;
    background:rgba(99,102,241,.1);
    color:var(--amber);
    display:flex; align-items:center; justify-content:center;
    font-size:11px;
}

.kpi__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-mute);
}

.kpi__value{
    font-family:var(--mono);
    font-size:26px;
    font-weight:600;
    color:var(--text);
}

.kpi__value--sm{
    font-size:16px;
    color:var(--amber);
}

.kpi__sub{
    font-size:11px;
    color:var(--text-dim);
}

/* ==========================================
   MAIN GRID
========================================== */

.main-grid{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:20px;
    align-items:stretch;
}

.panel{
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:16px;
    padding:24px;
    box-shadow:0 1px 2px rgba(2,6,16,.4), 0 12px 28px -16px rgba(2,6,16,.55);
    position:relative;
}

/* ---------- System Overview ---------- */

.overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

.overview-grid--stats{ margin-bottom:20px; }

.overview-card{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:10px 12px;
}

.overview-card__icon{
    width:24px; height:24px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px;
    flex:none;
}

.overview-card__icon.ok{ background:rgba(56,189,248,.15); color:var(--signal); }

.overview-card__label{ display:block; font-size:10.5px; color:var(--text-mute); }
.overview-card__value{ display:block; font-size:12.5px; font-weight:700; color:var(--text); }

.overview-stat{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.overview-stat__label{ font-size:10.5px; color:var(--text-mute); }
.overview-stat__value{ font-family:var(--mono); font-size:19px; font-weight:700; color:var(--amber); }
.overview-stat__sub{ font-size:10px; color:var(--text-dim); }

.alerts-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12.5px;
    font-weight:600;
    color:var(--text);
    margin-bottom:10px;
}

.alerts-head a{ color:var(--amber); font-size:11px; text-decoration:none; }

.alerts-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.alerts-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.alerts-list__icon{
    width:22px; height:22px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:10px;
    flex:none;
    margin-top:1px;
}

.alerts-list__icon.warn{ background:rgba(255,193,7,.15); color:#ffc107; }
.alerts-list__icon.ok{ background:rgba(56,189,248,.15); color:var(--signal); }
.alerts-list__icon.info{ background:rgba(0,183,255,.15); color:#4fc3f7; }

.alerts-list__title{ display:block; font-size:12px; font-weight:600; color:var(--text); }
.alerts-list__sub{ display:block; font-size:10.5px; color:var(--text-mute); }
.alerts-list__time{ margin-left:auto; font-size:10px; color:var(--text-dim); white-space:nowrap; }

/* ---------- Analytics row ---------- */

.analytics-grid{
    display:grid;
    grid-template-columns:1fr 1fr 320px;
    gap:20px;
    margin-top:20px;
}

.panel__head--chart{
    justify-content:space-between;
}

.panel__head--chart em{
    font-style:normal;
    color:var(--text-dim);
    font-weight:400;
    font-size:11.5px;
}

.chip-select{
    font-size:10.5px;
    color:var(--text-mute);
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    padding:5px 10px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:6px;
}

.chart-panel canvas{ margin-top:10px; }

.donut-panel{ display:flex; flex-direction:column; }

.donut-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    margin:10px 0;
}

.donut-center{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    display:flex;
    flex-direction:column;
}

.donut-center span:first-child{
    font-family:var(--mono);
    font-size:20px;
    font-weight:700;
    color:var(--text);
}

.donut-center span:last-child{
    font-size:9.5px;
    color:var(--text-mute);
    letter-spacing:.03em;
}

.legend-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:6px;
}

.legend-list li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11.5px;
    color:var(--text-mute);
}

.legend-list .dot{
    width:8px; height:8px;
    border-radius:50%;
    flex:none;
}

.legend-list .name{ flex:1; color:var(--text); }
.legend-list .pct{ color:var(--text-dim); font-family:var(--mono); font-size:10.5px; }

.footer__status{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--signal);
}

.panel__head{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    font-size:15px;
    margin-bottom:20px;
    padding-bottom:16px;
    color:var(--text);
    border-bottom:1px solid var(--hairline);
}

.panel__head i{
    width:26px; height:26px;
    border-radius:7px;
    background:rgba(99,102,241,.12);
    color:var(--amber);
    font-size:12px;
    display:flex; align-items:center; justify-content:center;
    flex:none;
}

/* ==========================================
   FORM FIELDS
========================================== */

.field-label{
    display:block;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-mute);
    margin:16px 0 8px;
}

.field-label:first-of-type{ margin-top:0; }

.field{
    width:100%;
    padding:13px 14px;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:10px;
    color:var(--text);
    font-family:var(--sans);
    font-size:14px;
    outline:none;
}

.field:focus{
    border-color:var(--amber);
    box-shadow:0 0 0 3px rgba(99,102,241,.16);
}

select.field{
    appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                      linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
}

.input-prefix{
    display:flex;
    align-items:stretch;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:10px;
    overflow:hidden;
}

.input-prefix span{
    display:flex;
    align-items:center;
    padding:0 12px;
    font-family:var(--mono);
    font-size:13px;
    color:var(--text-mute);
    border-right:1px solid var(--hairline);
}

.input-prefix .field{
    border:none;
    border-radius:0;
}

.field--phone{
    font-family:var(--mono);
    letter-spacing:.04em;
}

/* ==========================================
   BUTTON
========================================== */

button#trackBtn{
    width:100%;
    margin-top:22px;
    padding:15px;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg, var(--amber), #4f46e5);
    color:#fff;
    font-weight:700;
    font-size:13px;
    letter-spacing:.06em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    box-shadow:0 8px 20px -8px rgba(99,102,241,.55);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

button#trackBtn:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
    box-shadow:0 12px 24px -8px rgba(99,102,241,.65);
}

button#trackBtn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

/* ==========================================
   LOADER
========================================== */

.loader{
    display:none;
    margin-top:16px;
    font-size:12px;
    color:var(--text-mute);
    font-family:var(--mono);
}

.loader__bar{
    display:block;
    height:2px;
    width:100%;
    margin-bottom:10px;
    background:linear-gradient(90deg, transparent, var(--amber), transparent);
    background-size:200% 100%;
    animation:loaderSweep 1.1s linear infinite;
}

@keyframes loaderSweep{
    from{ background-position:200% 0; }
    to{ background-position:-200% 0; }
}

.console-footer{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--hairline);
    font-size:11.5px;
    color:var(--text-dim);
    display:flex;
    gap:8px;
    line-height:1.5;
}

.console-footer i{ margin-top:2px; color:var(--text-dim); }

/* ==========================================
   TELEMETRY / SCOPE
========================================== */

.badge{
    margin-left:auto;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.08em;
    padding:5px 11px;
    border-radius:20px;
    background:rgba(255,255,255,.06);
    color:var(--text-mute);
}

.badge.processing{ background:rgba(99,102,241,.14); color:#a5b4fc; }
.badge.success{ background:rgba(34,197,94,.14); color:#4ade80; }
.badge.error{ background:rgba(244,63,94,.14); color:#fb7185; }

.scope{
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    gap:22px;
    padding:18px;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:12px;
    margin-bottom:16px;
}

.scope > *{ align-self:center; }

.map-block{
    flex:1 1 260px;
    min-width:240px;
    align-self:stretch !important;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
}

.map-block__frame{
    flex:1;
    position:relative;
    min-height:140px;
    border-radius:10px;
    border:1px solid var(--hairline);
    overflow:hidden;
}

.map-block__canvas{
    width:100%;
    height:100%;
    min-height:140px;
    border:0;
    display:block;
    filter:saturate(.4) brightness(.8) invert(1) hue-rotate(90deg) contrast(1.05);
}

.map-expand-btn{
    position:absolute;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(4,20,10,.85);
    border:1px solid var(--hairline);
    border-radius:8px;
    color:var(--text);
    cursor:pointer;
    z-index:5;
    font-size:12px;
    transition:background .15s ease, color .15s ease;
}

.map-expand-btn:hover{
    background:var(--amber);
    color:#0f1a2e;
    border-color:var(--amber);
}

.map-block--expanded{
    position:fixed !important;
    top:5vh;
    left:5vw;
    width:90vw;
    height:90vh;
    z-index:9000;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:16px;
    padding:16px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.map-block--expanded .map-block__frame{
    min-height:0;
}

.map-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:8990;
}

.map-backdrop.show{ display:block; }

.map-open-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    color:var(--amber);
    text-decoration:none;
    width:fit-content;
}

/* ---- Ticket search bar ---- */
.ticket-search-bar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.ticket-search-input{
    flex:1 1 320px;
    min-width:220px;
    padding:11px 14px;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:9px;
    color:var(--text);
    font-family:var(--sans);
    font-size:13px;
}
.ticket-search-input:focus{
    outline:none;
    border-color:var(--amber);
}
.ticket-search-input::placeholder{ color:var(--text-dim); }
.ticket-search-btn{ flex:none; }

.map-open-link:hover{ text-decoration:underline; }

.map-block__address{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:12px;
    color:var(--text-mute);
    line-height:1.5;
}

.map-block__address i{
    color:var(--amber);
    margin-top:2px;
}

.map-block__address.filled{
    color:var(--text);
}

.scope__radar{
    position:relative;
    width:100px;
    height:100px;
    flex:none;
    border-radius:50%;
    background:radial-gradient(circle, rgba(99,102,241,.06), transparent 70%);
}

.scope__ring{
    position:absolute;
    border:1px solid var(--hairline);
    border-radius:50%;
}
.r1{ inset:0; }
.r2{ inset:18px; }
.r3{ inset:36px; }

.scope__crosshair::before,
.scope__crosshair::after{
    content:"";
    position:absolute;
    background:var(--hairline);
}
.scope__crosshair::before{ left:0; right:0; top:50%; height:1px; }
.scope__crosshair::after{ top:0; bottom:0; left:50%; width:1px; }

.scope__sweep{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(from 0deg, rgba(99,102,241,.6), transparent 28%);
    opacity:0;
    animation:none;
}

.scope.active .scope__sweep,
#radar.active .scope__sweep{
    opacity:1;
    animation:sweep 1.4s linear infinite;
}

@keyframes sweep{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.scope__coords{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.coord__label{
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.1em;
    color:var(--text-mute);
    margin-bottom:2px;
}

.coord__value{
    display:block;
    font-family:var(--mono);
    font-size:19px;
    font-weight:600;
    color:var(--text);
}

.coord__value.filled{ color:var(--signal); }

/* ==========================================
   RESULT PANE
========================================== */

pre#result{
    background:var(--bg-deep);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:20px;
    font-family:var(--mono);
    font-size:12.5px;
    line-height:1.7;
    color:#9fb3c8;
    min-height:250px;
    max-height:400px;
    overflow:auto;
    white-space:pre-wrap;
    word-break:break-word;
}

pre#result .json-success{ color:var(--success); }
pre#result .json-error{ color:var(--danger); }

/* ==========================================
   FOOTER
========================================== */

.footer{
    display:flex;
    justify-content:space-between;
    padding:20px 0 8px;
    font-size:11.5px;
    color:var(--text-dim);
    font-family:var(--mono);
}

.footer__mid{ color:var(--text-mute); }

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ==========================================
   ROAD STRIP (ambient truck animation)
========================================== */

.road-strip{
    position:fixed;
    left:258px;
    right:0;
    bottom:0;
    height:30px;
    background:var(--bg-deep);
    border-top:1px solid var(--hairline);
    overflow:hidden;
    z-index:6;
    pointer-events:none;
}

.road-strip__lane{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:2px dashed var(--hairline);
    opacity:.6;
}

.road-strip__truck{
    position:absolute;
    bottom:3px;
    left:-40px;
    font-size:16px;
    color:var(--amber);
    animation:driveTruck 16s linear infinite;
    text-shadow:0 0 10px rgba(99,102,241,.5);
}

@keyframes driveTruck{
    from{ left:-40px; }
    to{ left:calc(100% + 20px); }
}

.content{ padding-bottom:52px; }

/* ==========================================
   AUTH / LOGIN PAGE
========================================== */

.auth-body .road-strip{ left:0; }

.auth-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
}

.auth-card{
    width:100%;
    max-width:380px;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:16px;
    padding:34px 32px;
    text-align:left;
}

.auth-card__mark{
    width:42px; height:42px;
    border-radius:10px;
    background:var(--amber);
    color:#0a1120;
    font-family:var(--mono);
    font-weight:700;
    font-size:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
}

/* Telenity wordmark on the login card. Light text colour is inherited
   by the SVG's currentColor fill; the triangle keeps its own accent. */
.auth-card__logo{
    display:block;
    height:38px;
    width:auto;
    margin-bottom:20px;
    color:var(--text);
}

.auth-card h1{
    font-size:21px;
    font-weight:800;
    margin:6px 0 8px;
    letter-spacing:-.01em;
}

.auth-sub{
    font-size:13px;
    color:var(--text-mute);
    margin-bottom:22px;
    line-height:1.5;
}

.auth-error{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,45,85,.1);
    border:1px solid rgba(255,45,85,.3);
    color:var(--danger);
    font-size:12.5px;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:16px;
}

.auth-card button#loginBtn{
    width:100%;
    margin-top:24px;
    padding:14px;
    border:none;
    border-radius:10px;
    background:var(--amber);
    color:#111c30;
    font-weight:700;
    font-size:13px;
    letter-spacing:.06em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.auth-card button#loginBtn:hover{ background:#818cf8; }

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1400px){
    .analytics-grid{ grid-template-columns:1fr 1fr; }
    .donut-panel{ grid-column:span 2; }
}

@media(max-width:1100px){
    .main-grid{ grid-template-columns:1fr; }
    .kpi-strip{ grid-template-columns:repeat(2,1fr); }
    .analytics-grid{ grid-template-columns:1fr; }
    .donut-panel{ grid-column:auto; }
}

@media(max-width:640px){
    .app-shell{ grid-template-columns:1fr; }
    .sidebar{ display:none; }
    .content{ padding:20px; padding-bottom:52px; }
    .kpi-strip{ grid-template-columns:1fr; }
    .scope{ flex-direction:column; align-items:flex-start; }
    .road-strip{ left:0; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}

/* ==========================================
   LIVE THREAT MAP — right rail
========================================== */

.threat-rail{
    display:none;
    position:fixed;
    top:0;
    right:0;
    width:300px;
    height:100vh;
    background:var(--bg-deep);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-left:1px solid var(--hairline);
    z-index:8;
    padding:18px 16px;
    flex-direction:column;
    gap:14px;
    overflow:hidden;
}

@media(min-width:1420px){
    .threat-rail{ display:flex; }
    .road-strip{ right:300px; }
    .app-shell{ margin-right:300px; }
}

.threat-rail__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.06em;
}

.threat-rail__title{
    color:var(--text);
    font-weight:700;
    display:flex;
    align-items:center;
    gap:6px;
}

.threat-rail__title i{ color:var(--amber); }

.threat-rail__live{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--danger);
}

.pulse-dot--red{
    background:var(--danger);
    box-shadow:0 0 0 0 rgba(255,45,85,.55);
    animation:pulseDotRed 1.6s infinite;
}

@keyframes pulseDotRed{
    0%{ box-shadow:0 0 0 0 rgba(255,45,85,.55); }
    100%{ box-shadow:0 0 0 8px rgba(255,45,85,0); }
}

.threat-map{
    position:relative;
    aspect-ratio:2/1;
    border:1px solid var(--hairline);
    border-radius:10px;
    overflow:hidden;
    background:var(--panel-alt);
}

.threat-map__bg{
    position:absolute;
    inset:0;
    background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/BlankMap-World-Subdivisions.PNG/960px-BlankMap-World-Subdivisions.PNG") center/cover no-repeat;
    filter:invert(1) sepia(1) hue-rotate(88deg) saturate(6) brightness(.55) contrast(1.1);
    opacity:.5;
}

.threat-map__svg{
    position:relative;
    width:100%;
    height:100%;
}

.flow-arc{
    fill:none;
    stroke:var(--amber);
    stroke-width:.6;
    stroke-linecap:round;
    stroke-dasharray:3 5;
    opacity:.55;
    animation:threatFlow 1.4s linear infinite;
}

@keyframes threatFlow{
    to{ stroke-dashoffset:-16; }
}

.flow-dot{
    fill:#f1f5f9;
    filter:drop-shadow(0 0 3px rgba(99,102,241,.9));
}

.node-dot{
    fill:var(--amber);
    filter:drop-shadow(0 0 4px rgba(99,102,241,.8));
    animation:nodePulse 2.2s ease-in-out infinite;
}

@keyframes nodePulse{
    0%, 100%{ r:2.4; opacity:1; }
    50%{ r:3.6; opacity:.55; }
}

.threat-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.threat-stats div{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:8px;
    padding:9px 10px;
    display:flex;
    flex-direction:column;
}

.threat-stats span{
    font-family:var(--mono);
    font-size:18px;
    font-weight:700;
    color:var(--amber);
}

.threat-stats small{
    font-size:9.5px;
    color:var(--text-mute);
    letter-spacing:.03em;
}

.threat-feed__head{
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-mute);
}

.threat-feed{
    list-style:none;
    flex:1;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:7px;
    font-family:var(--mono);
}

.threat-feed li{
    display:flex;
    align-items:baseline;
    gap:6px;
    font-size:10.5px;
    color:var(--text-mute);
    border-bottom:1px dashed var(--hairline);
    padding-bottom:6px;
    animation:feedIn .35s ease;
}

@keyframes feedIn{
    from{ opacity:0; transform:translateY(-4px); }
    to{ opacity:1; transform:translateY(0); }
}

.threat-feed .sev{
    flex:none;
    width:6px; height:6px;
    border-radius:50%;
    margin-top:3px;
}

.threat-feed .sev.low{ background:var(--signal); }
.threat-feed .sev.med{ background:var(--amber); }
.threat-feed .sev.high{ background:var(--danger); }

.threat-feed .txt{ color:var(--text); flex:1; }
.threat-feed .txt b{ color:var(--amber); font-weight:600; }

.threat-rail__note{
    font-size:9.5px;
    color:var(--text-dim);
    text-align:center;
    border-top:1px solid var(--hairline);
    padding-top:10px;
}

/* ==========================================
   TOAST + FLASH HIGHLIGHT
========================================== */

.toast{
    position:fixed;
    bottom:44px;
    left:50%;
    transform:translate(-50%, 16px);
    background:var(--panel);
    border:1px solid var(--hairline);
    color:var(--text);
    font-family:var(--mono);
    font-size:12px;
    padding:11px 18px;
    border-radius:10px;
    opacity:0;
    pointer-events:none;
    z-index:50;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
}

.toast.show{
    opacity:1;
    transform:translate(-50%, 0);
}

.overview-panel.flash{
    border-color:var(--amber);
    box-shadow:0 0 0 3px rgba(99,102,241,.18);
}

/* ==========================================
   MESSAGE QUEUES (ActiveMQ)
========================================== */

.main-grid--amq{
    grid-template-columns:1fr;
}

.amq-panel{ min-height:420px; }

.amq-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:-8px 0 18px;
}

.amq-toolbar__meta{
    font-size:11.5px;
    color:var(--text-mute);
}

.amq-toolbar__meta b{
    color:var(--text);
    font-weight:600;
}

.amq-toolbar__actions{
    display:flex;
    gap:10px;
}

.amq-toolbar__actions .ghost-btn{
    width:auto;
    margin-top:0;
}

.amq-error{
    background:rgba(255,45,85,.1);
    border:1px solid rgba(255,45,85,.35);
    color:var(--danger);
    font-size:12.5px;
    padding:12px 14px;
    border-radius:10px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:10px;
}

.amq-table-wrap{
    overflow-x:auto;
    border:1px solid var(--hairline);
    border-radius:12px;
}

.amq-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--mono);
    font-size:12.5px;
}

.amq-table thead th{
    text-align:left;
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-mute);
    background:var(--panel-alt);
    padding:12px 16px;
    border-bottom:1px solid var(--hairline);
}

.amq-table tbody td{
    padding:12px 16px;
    border-bottom:1px solid var(--hairline);
    color:var(--text);
}

.amq-table tbody tr:last-child td{ border-bottom:none; }

.amq-table tbody tr:hover td{ background:rgba(99,102,241,.04); }

.amq-table__empty td{
    text-align:center;
    color:var(--text-dim);
    padding:28px 16px;
}

.amq-table .queue-name{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.amq-table .queue-name i{ color:var(--amber); font-size:11px; }

.amq-table .amq-pending{ color:var(--amber); font-weight:700; }

/* ==========================================
   INFRA MONITOR (df -h + live tail)
========================================== */

.infra-panel{ min-height:auto; }

/* ---- Servers tab: host cards + inline terminal ---- */
.server-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px;
}

.server-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:12px;
    transition:border-color .15s ease, transform .15s ease;
}

.server-card:hover{
    border-color:rgba(99,102,241,.4);
    transform:translateY(-1px);
}

.server-card__icon{
    width:44px; height:44px; flex:none;
    border-radius:10px;
    background:rgba(99,102,241,.14);
    color:var(--amber);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
}

.server-card__body{ flex:1; min-width:0; }
.server-card__title{ font-size:14px; font-weight:600; color:var(--text); }
.server-card__host{ font-family:var(--mono); font-size:12px; color:var(--signal); margin-top:2px; }
.server-card__sub{ font-size:11.5px; color:var(--text-mute); margin-top:2px; }
.server-card__btn{ flex:none; }

.terminal-mount{
    background:#000;
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:10px;
    height:520px;
    overflow:hidden;
}

/* xterm.js renders its own canvas/rows inside — just make sure it
   fills the mount point we give it. */
.terminal-mount .xterm{ height:100%; }
.terminal-mount .xterm-viewport{ border-radius:6px; }

/* ---- Servers tab: multiple terminals + maximize ---- */
.terminal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(480px, 1fr));
    gap:18px;
    margin-top:18px;
}

.terminal-panel .panel__head{
    margin-bottom:12px;
    padding-bottom:12px;
}

.terminal-panel__head i.fa-terminal{ color:#39ff88; background:rgba(57,255,136,.12); }

/* Maximized state: the panel escapes the grid and covers the viewport.
   A dedicated backdrop sits just behind it so the rest of the app is
   visually put aside without actually being removed from the DOM. */
.terminal-maximize-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,6,16,.75);
    z-index:190;
}
.terminal-maximize-backdrop.show{ display:block; }

.terminal-panel.maximized{
    position:fixed;
    inset:28px;
    z-index:200;
    display:flex !important;
    flex-direction:column;
    margin:0;
    min-height:0;
    background:#050505;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}

/* Height is set explicitly in JS (termFitNow), in real measured
   pixels, rather than via flex auto-sizing or CSS percentages — see
   the comment on termFitNow() in app.js for why. */
.terminal-panel.maximized .terminal-mount{
    flex:0 0 auto;
}

.disk-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:16px;
}

.disk-card{
    border:1px solid var(--hairline);
    border-radius:12px;
    overflow:hidden;
    background:var(--panel-alt);
}

.disk-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    font-size:12.5px;
    font-weight:600;
    border-bottom:1px solid var(--hairline);
}

.disk-card__error{
    padding:16px;
    font-size:12px;
    color:var(--danger);
    font-family:var(--mono);
}

.disk-card__empty{
    grid-column:1 / -1;
    text-align:center;
    color:var(--text-dim);
    padding:28px;
    font-size:12.5px;
}

.tail-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
    gap:16px;
}

.tail-card{
    border:1px solid var(--hairline);
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:#0f1a2e;
}

.tail-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    background:var(--panel-alt);
    border-bottom:1px solid var(--hairline);
    font-size:11.5px;
}

.tail-card__label{
    font-weight:600;
    color:var(--text);
}

.tail-card__head-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.tail-card__status{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:2px 8px;
    border-radius:6px;
    background:rgba(255,255,255,.06);
    color:var(--text-mute);
}

.tail-status--running{ color:var(--signal); background:rgba(56,189,248,.12); }
.tail-status--connecting,
.tail-status--starting{ color:var(--amber); background:rgba(99,102,241,.12); }
.tail-status--error,
.tail-status--disconnected{ color:var(--danger); background:rgba(255,45,85,.12); }

.tail-card__body{
    height:260px;
    overflow-y:auto;
    padding:10px 14px;
    font-family:var(--mono);
    font-size:11.5px;
    line-height:1.6;
    color:#a5b4fc;
}

.tail-line{
    white-space:pre-wrap;
    word-break:break-all;
    border-bottom:1px dashed rgba(255,255,255,.04);
    padding:2px 0;
}

.tail-line:last-child{ border-bottom:none; }

/* ==========================================
   INFRA MONITOR — DASHBOARD CHARTS
========================================== */

.disk-donut-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:16px;
    margin-bottom:18px;
}

.disk-donut-card{
    border:1px solid var(--hairline);
    border-radius:12px;
    background:var(--panel-alt);
    padding:14px;
}

.disk-donut-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12.5px;
    font-weight:600;
    margin-bottom:12px;
}

.disk-donut-card__body{
    display:flex;
    align-items:center;
    gap:16px;
}

.disk-donut-card__ring{
    position:relative;
    width:90px;
    height:90px;
    flex:0 0 auto;
}

.disk-donut-card__center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.disk-donut-card__pct{
    font-size:20px;
    font-weight:700;
    font-family:var(--mono);
}

.disk-donut-card__pct-label{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-mute);
}

.disk-donut-card__stats{
    flex:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 14px;
    font-size:11px;
}

.disk-donut-card__stats div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.disk-donut-card__stats span{
    color:var(--text-mute);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.disk-donut-card__stats b{
    color:var(--text);
    font-size:12px;
}

.disk-donut-card__stats--legend{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.log-legend-row{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10.5px;
}

.log-legend-row .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    flex:0 0 auto;
}

.log-legend-row__name{
    flex:1;
    color:var(--text-mute);
    letter-spacing:.03em;
}

.log-legend-row__pct{
    color:var(--text);
    font-weight:600;
}

.disk-chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:16px;
}

.chart-box{
    border:1px solid var(--hairline);
    border-radius:12px;
    background:var(--panel-alt);
    padding:14px;
}

.chart-box__title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-mute);
    margin-bottom:10px;
}

.chart-box__title--with-expand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.chart-box__canvas-wrap{
    position:relative;
    height:180px;
}

.chart-box__canvas-wrap canvas,
.disk-donut-card__ring canvas{
    width:100% !important;
    height:100% !important;
}

.chart-box__canvas-wrap--tall{ height:220px; }
.chart-box__canvas-wrap--wide{ height:220px; }

.log-bottom-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:16px;
    margin-top:16px;
}

@media (max-width: 900px){
    .log-bottom-grid{ grid-template-columns:1fr; }
}

.status-overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    height:180px;
    align-content:center;
}

.status-overview-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--hairline);
    border-radius:10px;
}

.status-overview-item i{ font-size:18px; }

.status-overview-item__count{
    font-size:18px;
    font-weight:700;
    font-family:var(--mono);
}

.status-overview-item__label{
    font-size:9.5px;
    color:var(--text-mute);
    text-transform:uppercase;
    letter-spacing:.04em;
}

.log-message-cell{
    font-family:var(--mono);
    font-size:11px;
    max-width:360px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ==========================================
   SLA REPORT
========================================== */

.sla-date-input{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:6px;
    color:var(--text);
    font-family:var(--mono);
    font-size:11.5px;
    padding:4px 8px;
    margin-left:6px;
}

.sla-stats-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:16px;
    margin-bottom:18px;
}

.sla-stat-box{
    border:1px solid var(--hairline);
    border-radius:12px;
    background:var(--panel-alt);
    padding:16px;
    text-align:left;
}

.sla-stat-box__pct{
    font-size:26px;
    font-weight:700;
    font-family:var(--mono);
}

.sla-stat-box__label{
    font-size:11px;
    color:var(--text);
    margin-top:4px;
}

.sla-stat-box__sub{
    font-size:10px;
    color:var(--text-mute);
    margin-top:4px;
}

.sla-stat-box--muted .sla-stat-box__pct{ color:var(--text-mute); }

/* ==========================================
   JIO LICENSE CHECK
========================================== */

.jio-raw-box{
    grid-column:1 / -1;
    margin-top:0;
}

.jio-raw{
    max-height:280px;
    overflow:auto;
    font-family:var(--mono);
    font-size:11px;
    color:#a5b4fc;
    background:#0f1a2e;
    border:1px solid var(--hairline);
    border-radius:8px;
    padding:12px;
    white-space:pre-wrap;
    word-break:break-all;
    margin:0;
}

/* /space usage row inside each disk donut card */
.disk-donut-card__space{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--hairline);
    font-size:11px;
    flex-wrap:wrap;
}

.disk-donut-card__space-label{
    font-family:var(--mono);
    color:var(--text-mute);
    font-weight:600;
    min-width:48px;
}

.disk-donut-card__space-pct{
    font-family:var(--mono);
    font-weight:700;
    font-size:13px;
}

.disk-donut-card__space-detail{
    color:var(--text-mute);
    font-size:10.5px;
}

/* ==========================================
   ALL OPEN TICKETS + REPLY BOX
========================================== */

.ticket-row td{ vertical-align:middle; }

.ticket-key-link{
    color:var(--amber);
    font-family:var(--mono);
    text-decoration:none;
    font-weight:600;
}

.ticket-key-link:hover{ text-decoration:underline; }

.ticket-summary-cell{
    max-width:280px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ticket-reply-row td{
    background:var(--panel-alt);
    padding:0;
}

.ticket-reply-box{
    padding:16px;
    border-top:1px dashed var(--hairline);
    border-bottom:1px dashed var(--hairline);
}

.ticket-reply-textarea{
    width:100%;
    min-height:90px;
    background:#0f1a2e;
    border:1px solid var(--hairline);
    border-radius:8px;
    color:var(--text);
    font-family:var(--mono);
    font-size:12.5px;
    padding:10px;
    resize:vertical;
}

.ticket-reply-textarea:focus{
    outline:none;
    border-color:var(--amber);
}

.ticket-reply-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:10px;
    gap:12px;
}

.ticket-reply-note{
    font-size:10.5px;
    color:var(--text-mute);
}

.ticket-reply-actions .ghost-btn{
    width:auto;
    margin-top:0;
}

.ticket-reply-status{
    margin-top:8px;
    font-size:11px;
    color:var(--text-mute);
}

.ticket-reply-status--success{ color:var(--success); }
.ticket-reply-status--error{ color:var(--danger); }

.ticket-actions-cell{
    display:flex;
    gap:6px;
    white-space:nowrap;
}

.ticket-action-btn{
    width:auto;
    margin-top:0;
    padding:6px 10px;
    font-size:10.5px;
    text-decoration:none;
    display:inline-flex;
}

.ticket-reply-status--partial{ color:var(--warning); }

/* ==========================================
   TICKET DETAIL MODAL
========================================== */

.ticket-modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:290;
}

.ticket-modal-backdrop.show{ display:block; }

.ticket-modal{
    display:none;
    position:fixed;
    top:4vh;
    left:8vw;
    width:84vw;
    height:92vh;
    z-index:300;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:16px;
    box-shadow:0 30px 90px rgba(0,0,0,.7);
    flex-direction:column;
    overflow:hidden;
}

.ticket-modal.show{ display:flex; }

.ticket-modal__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 24px;
    border-bottom:1px solid var(--hairline);
    background:var(--panel-alt);
    flex:0 0 auto;
}

.ticket-modal__key{
    font-family:var(--mono);
    font-size:18px;
    font-weight:700;
    color:var(--amber);
}

.ticket-modal__close{
    width:34px;
    height:34px;
    border-radius:8px;
    border:1px solid var(--hairline);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font-size:14px;
}

.ticket-modal__close:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }

.ticket-modal__body{
    flex:1;
    overflow-y:auto;
    padding:24px;
}

.ticket-detail-header{
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--hairline);
}

.ticket-detail-summary{
    font-size:18px;
    margin:0 0 12px;
    color:var(--text);
}

.ticket-detail-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:11.5px;
    color:var(--text-mute);
    margin-bottom:12px;
}

.ticket-detail-meta b{ color:var(--text); font-weight:600; }

.ticket-open-jira-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    color:var(--amber);
    text-decoration:none;
}

.ticket-open-jira-link:hover{ text-decoration:underline; }

.ticket-detail-description{ margin-bottom:24px; }

.ticket-detail-description__text{
    font-size:13px;
    line-height:1.7;
    color:var(--text);
    white-space:pre-wrap;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:14px;
}

.ticket-detail-comments{ margin-bottom:24px; }

.ticket-comment{
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:12px 14px;
    margin-top:10px;
    background:var(--panel-alt);
}

.ticket-comment--public{ border-left:3px solid #6366f1; }
.ticket-comment--internal{ border-left:3px solid #ffb020; }

.ticket-comment__head{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10.5px;
    margin-bottom:6px;
}

.ticket-comment__author{ font-weight:700; color:var(--text); }

.ticket-comment__badge{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-mute);
    background:rgba(255,255,255,.06);
    padding:2px 6px;
    border-radius:6px;
}

.ticket-comment__time{ color:var(--text-mute); margin-left:auto; }

.ticket-comment__body{
    font-size:12.5px;
    line-height:1.6;
    color:var(--text);
    white-space:pre-wrap;
}

.ticket-detail-reply{
    border-top:1px solid var(--hairline);
    padding-top:16px;
}

/* ==========================================
   IVR CONSENT CHECK
========================================== */

.ivr-single-row,
.ivr-bulk-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.ivr-input{
    flex:1;
    min-width:220px;
}

.ivr-file-input{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:6px;
    color:var(--text);
    font-family:var(--mono);
    font-size:11.5px;
    padding:6px 10px;
}

.ivr-single-row .ghost-btn,
.ivr-bulk-row .ghost-btn{
    width:auto;
    margin-top:0;
}

.ivr-single-result{ margin-top:6px; }

/* ==========================================
   AIRTEL CLOUD SUBSCRIPTION
========================================== */

.airtel-warning{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,45,85,.08);
    border:1px solid rgba(255,45,85,.3);
    color:#ff9aac;
    font-size:11.5px;
    padding:10px 14px;
    border-radius:8px;
    margin-bottom:16px;
}

.airtel-warning i{ color:var(--danger); flex:0 0 auto; }
.airtel-warning b{ color:#fff; }

.airtel-controls-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.airtel-select{
    min-width:170px;
}

.airtel-controls-row .ghost-btn{
    width:auto;
    margin-top:0;
}

/* Live Top Command body — reuse tail-card look, but wider/no wrap
   since `top` output relies on fixed-width column alignment. */
.top-card__body{
    white-space:pre;
    overflow-x:auto;
    font-size:10.5px;
    line-height:1.5;
}

/* ==========================================
   GENERIC CARD EXPAND
========================================== */

.card-expand-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:290;
}

.card-expand-backdrop.show{ display:block; }

.card-expand-modal{
    display:none;
    position:fixed;
    top:5vh;
    left:6vw;
    width:88vw;
    height:90vh;
    z-index:300;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:16px;
    box-shadow:0 30px 90px rgba(0,0,0,.7);
    padding:20px;
}

.card-expand-modal.show{ display:block; }

.card-expand-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border-radius:8px;
    border:1px solid var(--hairline);
    background:var(--panel-alt);
    color:var(--text);
    cursor:pointer;
    font-size:14px;
    z-index:2;
}

.card-expand-modal__close:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }

.card-expand-modal__body{
    width:100%;
    height:100%;
    overflow:auto;
}

/* The reparented card itself, once inside the modal */
.card-expand-modal__content{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    display:flex;
    flex-direction:column;
}

.card-expand-modal__content .chart-box__canvas-wrap{
    flex:1;
    height:auto !important;
    min-height:400px;
}

.card-expand-modal__content .disk-donut-card__ring{
    width:200px;
    height:200px;
}

.card-expand-modal__content .tail-card__body,
.card-expand-modal__content .top-card__body{
    flex:1;
    height:auto !important;
    max-height:none;
    font-size:13px;
}

.card-expand-btn{
    background:transparent;
    border:1px solid var(--hairline);
    color:var(--text-mute);
    width:24px;
    height:24px;
    border-radius:6px;
    cursor:pointer;
    font-size:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.card-expand-btn:hover{ background:var(--amber); border-color:var(--amber); color:#0f1a2e; }

/* ============================================================
 * EDR Check panel — per-server result cards + record lines
 * ============================================================ */

.edr-result{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.edr-server{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:10px;
    overflow:hidden;
}

.edr-server__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--hairline);
    background:rgba(99,102,241, .03);
    flex-wrap:wrap;
}

.edr-server__ident{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}
.edr-server__ident i{ color:var(--amber); }

.edr-server__label{
    font-weight:700;
    color:var(--text);
    letter-spacing:.3px;
}

.edr-server__host{
    color:var(--text-mute);
    font-family:var(--mono);
    font-size:12px;
}

.edr-server__status{
    display:flex;
    align-items:center;
    gap:10px;
}

.edr-server__badge{
    display:inline-block;
    padding:3px 10px;
    border:1px solid;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    line-height:1.6;
}

.edr-server__count{
    color:var(--text-mute);
    font-size:12px;
    font-family:var(--mono);
}

.edr-server__body{
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.edr-record{
    background:rgba(99,102,241, .04);
    border:1px solid rgba(99,102,241, .12);
    border-radius:8px;
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.edr-record__meta{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    color:var(--text-mute);
}

.edr-record__idx{
    display:inline-block;
    min-width:26px;
    padding:1px 6px;
    border-radius:4px;
    background:rgba(99,102,241, .12);
    color:var(--amber);
    font-weight:700;
    text-align:center;
}

.edr-record__file{
    font-family:var(--mono);
    color:var(--text-mute);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}

.edr-record__line{
    margin:0;
    padding:8px 10px;
    background:rgba(0, 0, 0, .35);
    border:1px solid var(--hairline);
    border-radius:6px;
    color:var(--text);
    font-family:var(--mono);
    font-size:12px;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-all;
    overflow-x:auto;
}

.edr-empty{
    color:var(--text-mute);
    font-size:13px;
    padding:8px 4px;
}

.edr-empty--error{
    color:var(--danger);
}

.edr-empty code{
    background:rgba(0, 0, 0, .35);
    padding:2px 6px;
    border-radius:4px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--text);
}

/* ============================================================
 * SmartTrail Device Lookup panel
 * ============================================================ */

.smtrail-result{
    margin-top:16px;
}

/* Multiple-company results: a stacked column of cards with a small
   header explaining why there's more than one. */
.smtrail-cards{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.smtrail-multi-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    margin-bottom:12px;
    background:rgba(255, 176, 32, 0.08);
    border:1px solid rgba(255, 176, 32, 0.35);
    border-radius:10px;
    color:var(--text);
    font-size:13px;
}
.smtrail-multi-header i{
    color:var(--amber);
    font-size:14px;
}
.smtrail-multi-header b{
    color:var(--amber);
    font-weight:700;
}

.smtrail-card{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:20px 22px;
}

.smtrail-card--empty{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-mute);
    font-size:14px;
}
.smtrail-card--empty i{ color:var(--signal); }

.smtrail-card__company{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:22px;
    font-weight:700;
    color:var(--text);
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid var(--hairline);
    letter-spacing:.3px;
}
.smtrail-card__company i{
    color:var(--amber);
    font-size:20px;
}

.smtrail-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px 24px;
}
@media (max-width:900px){
    .smtrail-grid{ grid-template-columns:repeat(2, 1fr); }
}

.smtrail-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.smtrail-field__label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--text-mute);
    font-weight:600;
}
.smtrail-field__value{
    font-size:15px;
    color:var(--text);
    font-weight:600;
}
.smtrail-mono{
    font-family:var(--mono);
    font-size:14px;
    color:var(--signal);
}

.smtrail-pill{
    display:inline-block;
    padding:3px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    border:1px solid;
}
.smtrail-pill--yes{
    background:rgba(99,102,241, .12);
    color:var(--amber);
    border-color:rgba(99,102,241, .4);
}
.smtrail-pill--no{
    background:rgba(255, 45, 85, .1);
    color:var(--danger);
    border-color:rgba(255, 45, 85, .35);
}
.smtrail-pill--warn{
    background:rgba(255, 176, 32, .12);
    color:#ffb020;
    border-color:rgba(255, 176, 32, .4);
}

.smtrail-extra-flags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.smtrail-track-action{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--hairline);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.smtrail-track-action .ghost-btn{
    align-self:flex-start;
    margin-top:0;
}
.smtrail-track-hint{
    font-family:var(--mono);
    font-size:11px;
    color:var(--text-dim);
}

.smtrail-track-note{
    margin-top:20px;
    padding:12px 16px;
    border-radius:8px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(99,102,241, .06);
    border:1px solid rgba(99,102,241, .18);
    color:var(--text-mute);
}
.smtrail-track-note i{ color:var(--amber); }

.smtrail-track-note--ok{
    background:rgba(99,102,241, .1);
    border-color:rgba(99,102,241, .35);
    color:var(--text);
}
.smtrail-track-note--ok i{ color:var(--amber); }

.smtrail-track-note--err{
    background:rgba(255, 45, 85, .08);
    border-color:rgba(255, 45, 85, .3);
    color:#ff9db0;
}
.smtrail-track-note--err i{ color:var(--danger); }

/* ==========================================
   OPERATOR CHECK
   ========================================== */

/* .sla-stat has no rules anywhere in this stylesheet — the EDR panel
   uses it unstyled. Scoped to this section rather than defined
   globally, so adding the Operator panel does not silently restyle a
   panel nobody asked me to touch. */
#section-operator .sla-stat{
    border:1px solid var(--hairline);
    border-radius:10px;
    background:var(--panel-alt);
    padding:12px 14px;
}

#section-operator .sla-stat__label{
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-mute);
}

#section-operator .sla-stat__value{
    font-family:var(--mono);
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin-top:4px;
}

.op-badge{
    margin-left:auto;
    font-size:10px;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--text-mute);
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:2px 8px;
    white-space:nowrap;
}

.op-hint{
    color:var(--text-mute);
    font-size:11.5px;
    line-height:1.65;
    margin:0 0 14px;
    max-width:78ch;
}

.op-textarea{
    width:100%;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:6px;
    color:var(--text);
    font-family:var(--mono);
    font-size:12px;
    line-height:1.6;
    padding:10px 12px;
    resize:vertical;
    margin-bottom:12px;
}

.op-textarea:focus{
    outline:none;
    border-color:var(--amber);
}

.op-note{
    color:var(--text-mute);
    font-size:11.5px;
    line-height:1.6;
    margin-bottom:14px;
}

.op-note:empty{ margin-bottom:0; }

/* A failed lookup is the finding, not an error state of the panel —
   flagged, but without the full danger treatment. */
.op-note--warn{
    color:var(--text);
    border-left:2px solid #ffb020;
    padding-left:10px;
}

.op-latency{ font-family:var(--mono); }

/* Anything within ~3s of the 8s ceiling is the interesting case. */
.op-latency--slow{ color:#ffb020; font-weight:700; }

.op-err{
    display:block;
    color:#ff6b6b;
    font-size:11px;
    margin-top:3px;
}

.op-detail{
    color:var(--text-mute);
    font-size:11px;
    max-width:340px;
    overflow-wrap:anywhere;
}

.op-http,
.op-snippet{
    display:inline-block;
    font-size:10.5px;
    color:var(--text-mute);
    border:1px solid var(--hairline);
    border-radius:4px;
    padding:1px 6px;
    margin-left:8px;
}

/* The gateway's own words. A "409 = NonAirtel" is a real answer, so it
   is shown plainly rather than styled as a fault. */
.op-snippet{
    border-color:transparent;
    padding-left:0;
    overflow-wrap:anywhere;
}

/* ==========================================
   PORTAL ASSISTANT (floating chat)
   ========================================== */

.asst-launcher{
    position:fixed;
    right:22px;
    bottom:22px;
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid var(--hairline);
    background:var(--panel);
    color:var(--amber);
    font-size:19px;
    cursor:pointer;
    z-index:900;
    box-shadow:0 6px 22px rgba(0,0,0,.45);
    transition:transform .15s ease, border-color .15s ease;
}

.asst-launcher:hover{
    transform:translateY(-2px);
    border-color:var(--amber);
}

.asst-panel{
    position:fixed;
    right:22px;
    bottom:86px;
    width:400px;
    max-width:calc(100vw - 44px);
    height:540px;
    max-height:calc(100vh - 130px);
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:12px;
    box-shadow:0 18px 48px rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:901;

    /* Kept in the DOM rather than toggled to display:none so the
       conversation survives closing and reopening the panel. */
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.asst-panel--open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.asst-head{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 14px;
    border-bottom:1px solid var(--hairline);
    background:var(--panel-alt);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--text);
    flex:0 0 auto;
}

.asst-mode{
    margin-left:auto;
    font-size:9.5px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--text-mute);
    border:1px solid var(--hairline);
    border-radius:9px;
    padding:1px 7px;
    cursor:help;
}

.asst-mode--llm{
    color:var(--amber);
    border-color:var(--amber);
}

.asst-close{
    background:none;
    border:none;
    color:var(--text-mute);
    font-size:15px;
    cursor:pointer;
    padding:0 0 0 4px;
}

.asst-close:hover{ color:var(--text); }

.asst-messages{
    flex:1 1 auto;
    overflow-y:auto;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.asst-msg{
    font-size:12px;
    line-height:1.65;
    padding:9px 12px;
    border-radius:9px;
    max-width:92%;
    overflow-wrap:anywhere;
}

.asst-msg--user{
    align-self:flex-end;
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    color:var(--text);
}

.asst-msg--assistant{
    align-self:flex-start;
    background:transparent;
    border:1px solid var(--hairline);
    border-left:2px solid var(--amber);
    color:var(--text);
}

.asst-msg--pending{ opacity:.5; }

.asst-msg pre{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:6px;
    padding:8px 10px;
    margin:7px 0 0;
    font-size:10.5px;
    line-height:1.5;
    max-height:230px;
    overflow:auto;
    white-space:pre;
}

.asst-msg code{
    background:var(--panel-alt);
    border-radius:4px;
    padding:1px 5px;
    font-size:11px;
}

.asst-meta{
    margin-top:7px;
    font-size:9.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-mute);
}

.asst-chips{
    display:flex;
    gap:6px;
    padding:0 14px 9px;
    flex-wrap:wrap;
    flex:0 0 auto;
}

.asst-chip{
    background:var(--panel-alt);
    border:1px solid var(--hairline);
    border-radius:12px;
    color:var(--text-mute);
    font-size:10.5px;
    padding:3px 10px;
    cursor:pointer;
}

.asst-chip:hover{
    color:var(--text);
    border-color:var(--amber);
}

.asst-input-row{
    display:flex;
    gap:8px;
    padding:11px 14px;
    border-top:1px solid var(--hairline);
    background:var(--panel-alt);
    flex:0 0 auto;
}

.asst-input{
    flex:1;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:6px;
    color:var(--text);
    font-family:var(--mono);
    font-size:12px;
    padding:8px 11px;
}

.asst-input:focus{
    outline:none;
    border-color:var(--amber);
}

.asst-send{
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:6px;
    color:var(--amber);
    cursor:pointer;
    padding:0 13px;
    font-size:13px;
}

.asst-send:hover{ border-color:var(--amber); }

@media (max-width:520px){
    .asst-panel{
        right:10px;
        left:10px;
        width:auto;
        bottom:78px;
    }
}

/* ==========================================
   USERS / PERMISSIONS
   ========================================== */

.user-form { padding:4px 2px; }
.user-form__row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.user-form__row label { width:180px; color:var(--text-mute); font-size:12px; }
.user-form__row input, .user-form__row select { flex:1; max-width:360px; }

.user-form__perm-head { color:var(--text-mute); font-size:11.5px; margin:14px 0 10px; }

.user-perm-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:8px 20px;
    margin-bottom:16px;
}
.user-perm-row {
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid var(--hairline); border-radius:8px; padding:7px 11px;
    background:var(--panel-alt);
}
.user-perm-tab { font-size:12px; color:var(--text); display:flex; align-items:center; gap:7px; }
.user-perm-write { font-size:10.5px; color:var(--text-mute); display:flex; align-items:center; gap:5px; }
.user-perm-write--na { opacity:.5; font-style:italic; }

.user-form__actions { display:flex; align-items:center; gap:12px; margin-top:8px; }
.user-form__msg { font-size:11.5px; color:var(--text-mute); }

.user-actions { white-space:nowrap; }
.mini-link {
    background:none; border:none; color:var(--amber); cursor:pointer;
    font-size:11px; font-family:var(--mono); padding:0 6px;
}
.mini-link:hover { text-decoration:underline; }
.mini-link--danger { color:#ff6b6b; }

.user-flag {
    font-size:9px; letter-spacing:.04em; text-transform:uppercase;
    color:#ffb020; border:1px solid #ffb020; border-radius:8px; padding:0 6px; margin-left:6px;
}
.user-write-cell { color:var(--text-mute); font-size:11px; max-width:220px; overflow-wrap:anywhere; }

/* forced password overlay */
.pw-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.78);
    display:flex; align-items:center; justify-content:center; z-index:2000;
}
.pw-modal {
    background:var(--panel); border:1px solid var(--hairline); border-radius:14px;
    padding:26px 28px; width:380px; max-width:calc(100vw - 40px);
    box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.pw-modal h3 { color:var(--text); font-size:15px; margin-bottom:6px; }
.pw-modal__sub { color:var(--text-mute); font-size:11.5px; margin-bottom:16px; }
.pw-modal input { width:100%; margin-bottom:11px; }
.pw-modal__actions { display:flex; align-items:center; gap:12px; margin-top:4px; }

/* ==========================================
   AUDIT LOG
   ========================================== */

.audit-filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    margin:4px 0 16px;
}

.audit-ts{ font-family:var(--mono); font-size:11px; color:var(--text-mute); white-space:nowrap; }
.audit-ip{ font-family:var(--mono); font-size:11px; color:var(--text-mute); }

.audit-ok{ color:var(--amber); font-weight:700; }
.audit-bad{ color:#ff6b6b; font-weight:700; }

.audit-write{
    display:inline-block;
    font-size:9px;
    font-weight:700;
    letter-spacing:.06em;
    color:#ffb020;
    border:1px solid #ffb020;
    border-radius:4px;
    padding:0 4px;
    vertical-align:middle;
}

.audit-pager{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:14px;
}

.audit-pager button:disabled{ opacity:.4; cursor:default; }

#section-audit .sla-stat{
    border:1px solid var(--hairline);
    border-radius:10px;
    background:var(--panel-alt);
    padding:12px 14px;
}
#section-audit .sla-stat__label{
    font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute);
}
#section-audit .sla-stat__value{
    font-family:var(--mono); font-size:16px; font-weight:700; color:var(--text); margin-top:4px;
}

/* ==========================================================
   MOBILE / RESPONSIVE VIEW               (added 2026)
   One consolidated block for phones & small tablets.
   Desktop layout is untouched above; everything here only
   applies at <= 820px. Strategy:
     - sidebar becomes an off-canvas drawer (hamburger toggles it)
     - the 2-column app-shell collapses to a single column
     - padding / font-sizes / cards scale down
     - wide tables scroll horizontally instead of overflowing
========================================================== */

/* Hamburger button + drawer scrim live in the DOM always but are
   hidden on desktop; only shown in the mobile query below. */
.mobile-menu-btn{
    display:none;
    background:var(--panel);
    border:1px solid var(--hairline);
    color:var(--text);
    width:42px; height:42px;
    border-radius:10px;
    font-size:18px;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex:none;
}
.sidebar-scrim{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(4,8,16,.6);
    backdrop-filter:blur(2px);
    z-index:59;
}

@media (max-width: 820px){

    /* ---- layout: single column ---- */
    .app-shell{
        grid-template-columns:1fr;
    }

    /* ---- sidebar as slide-in drawer ---- */
    .sidebar{
        display:flex !important;
        position:fixed;
        top:0; left:0; bottom:0;
        width:82vw;
        max-width:300px;
        z-index:60;
        transform:translateX(-104%);
        transition:transform .26s ease;
        box-shadow:0 0 40px rgba(0,0,0,.5);
        overflow-y:auto;
    }
    .sidebar.is-open{
        transform:translateX(0);
    }
    body.sidebar-open .sidebar-scrim{
        display:block;
    }

    /* ---- show the hamburger, put it in the top strip ---- */
    .mobile-menu-btn{
        display:inline-flex;
    }

    /* ---- top strip: tighten, hide the scrolling brand ticker ---- */
    .topstrip{
        padding:8px 12px;
        gap:10px;
    }
    .topstrip__ticker{
        display:none;      /* the marquee is noise on a phone */
    }
    .topstrip__right{
        margin-left:auto;
        gap:8px;
    }

    /* ---- topbar (page title row) ---- */
    .topbar{
        flex-wrap:wrap;
        padding:14px 14px 10px;
        gap:8px;
    }
    .topbar__title h1,
    .topbar__title h2{
        font-size:18px;
    }
    .topbar__right{
        flex-wrap:wrap;
        gap:8px;
    }

    /* ---- main content padding ---- */
    .main-col{ width:100%; }
    .panel, .section, .card, .kpi{
        padding:14px !important;
    }
    section[id^="section-"]{
        padding:12px !important;
    }

    /* ---- headings scale down ---- */
    h1{ font-size:20px !important; }
    h2{ font-size:17px !important; }
    h3{ font-size:15px !important; }

    /* ---- forms & inputs: full width, comfortable tap size ---- */
    .field, .sla-date-input, input[type="text"],
    input[type="password"], input[type="date"], select, textarea{
        width:100% !important;
        box-sizing:border-box;
        font-size:16px !important;   /* >=16px stops iOS auto-zoom */
        min-height:44px;
    }
    button, .btn, .mini-link{
        min-height:40px;
    }

    /* ---- buttons that sat inline should wrap, not overflow ---- */
    .btn-row, .actions, .form-row, .toolbar{
        flex-wrap:wrap !important;
        gap:8px !important;
    }

    /* ---- KPI / stat grids: 1 column ---- */
    .kpi-grid, .status-overview-grid, .stats-grid,
    .cards-grid, .grid-2, .grid-3{
        grid-template-columns:1fr !important;
        height:auto !important;
    }

    /* ---- WIDE TABLES: wrap in a horizontal scroller ----
       Any table that's too wide gets a swipe-scroll instead of
       breaking the layout. Works for tickets, users, SLA, etc. */
    .table-wrap, .table-scroll, .amq-table-wrap,
    .tickets-table-wrap, .users-table-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    table{
        min-width:640px;          /* keeps columns readable; container scrolls */
    }

    /* ---- modals / overlays: near-full-screen on phone ---- */
    .modal, .overlay-card, .user-form, .pw-change-card,
    .modal__card, .dialog{
        width:94vw !important;
        max-width:94vw !important;
        max-height:88vh !important;
        overflow-y:auto;
    }

    /* ---- the two-column user permission grid -> one column ---- */
    #ufTabsGrid{
        grid-template-columns:1fr 1fr !important;   /* keep 2 so it's not huge */
    }

    /* ---- terminal cards: let them size to the screen & scroll ---- */
    .terminal-card, .xterm, .term-wrap{
        max-width:100% !important;
    }
    .terminal-grid, .servers-grid{
        grid-template-columns:1fr !important;
    }

    /* ---- notifications panel: fit the screen ---- */
    .notif-panel{
        width:88vw !important;
        max-width:88vw !important;
        right:-8px;
    }

    /* ---- login / auth cards ---- */
    .auth-card{
        width:92vw !important;
        max-width:92vw !important;
        padding:24px 20px !important;
    }
}

/* very small phones */
@media (max-width: 420px){
    #ufTabsGrid{ grid-template-columns:1fr !important; }
    .topbar__title h1{ font-size:16px; }
    .panel, .section{ padding:11px !important; }
}

/* --- 2-column dashboard: equal-height panels --- */
#section-console .main-grid > .panel{ height:100%; display:flex; flex-direction:column; }
#section-console .main-grid .telemetry-panel #result{ flex:1 1 auto; }