/* ============================================================================
ATLAS GROUP · PORTAL SHARED DESIGN SYSTEM
----------------------------------------------------------------------------
ONE source of truth for the AG "dark tactical" look, linked by both
team.html (Operator Portal) and admin.html (Admin Console) so the two
surfaces stop drifting and read as the same product.
USAGE (add to each page's , AFTER the Google Fonts ):
Fonts are loaded by the host page (Google Fonts ), not here:
Orbitron → titles, callsigns, big numbers
Rajdhani → body / UI text
Share Tech Mono → labels, data, mono readouts
SAFETY: every shared component class is prefixed `ag-` so it cannot
collide with existing unprefixed classes in either file. Adopt
incrementally — new markup uses ag-* classes; legacy styles keep working
until migrated. Nothing here overrides existing rules.
ONE breakpoint for the whole system: 760px (phone ≤ 760 < desktop).
========================================================================= */
:root{
/* ── Palette (canonical AG · dark tactical) ───────────────────────────── */
--ag-navy: #050d1c; /* app background */
--ag-navy-mid: #0a1628; /* raised surface / inputs */
--ag-navy-light: #0f2040; /* hover / elevated */
--ag-navy-card: #0d1e38; /* cards */
--ag-blue: #1a7fff;
--ag-blue-bright: #3db8ff; /* primary accent */
--ag-blue-dim: #0d3a7a;
--ag-blue-glow: rgba(61,184,255,0.08);
--ag-white: #e8f4ff; /* primary text */
--ag-gray: #8fabc7; /* secondary text (legible) */
--ag-muted: #5c769a; /* tertiary / captions */
--ag-border: rgba(26,127,255,0.16);
--ag-border-bright: rgba(61,184,255,0.32);
/* Semantic (state) — distinct from the blue accent */
--ag-green: #2fd06e;
--ag-gold: #f5a623;
--ag-red: #ff5a5a;
--ag-purple:#a78bfa;
/* ── Type families ───────────────────────────────────────────────────── */
--ag-f-title: 'Orbitron', sans-serif;
--ag-f-body: 'Rajdhani', sans-serif;
--ag-f-mono: 'Share Tech Mono', monospace;
/* ── Mobile-first type scale ─────────────────────────────────────────────
The #1 fix: hundreds of 5–9px tactical labels were unreadable on a
phone. Floor for interactive/mono labels is now 11px. Desktop can
tighten via the media query at the bottom. Use these, don't hardcode. */
--ag-fs-hero: 38px; /* T-minus, balance, headline numerals */
--ag-fs-h1: 20px; /* screen title */
--ag-fs-h2: 16px; /* card title */
--ag-fs-body: 15px; /* running UI text */
--ag-fs-label: 11px; /* mono labels (was 6–8px) */
--ag-fs-chip: 12px; /* chips / small data */
--ag-fs-micro: 10px; /* smallest allowed (dock labels) */
/* ── Spacing / radius / motion ───────────────────────────────────────── */
--ag-r-sm: 6px;
--ag-r: 10px;
--ag-r-lg: 12px;
--ag-tap: 44px; /* min touch target (WCAG) */
--ag-ease: cubic-bezier(.2,.8,.2,1);
}
/* ── Utility: mono label (legible everywhere) ───────────────────────────── */
.ag-label{
font-family:var(--ag-f-mono);
font-size:var(--ag-fs-label);
letter-spacing:2px;
color:var(--ag-muted);
text-transform:uppercase;
}
/* ── Section header ─────────────────────────────────────────────────────── */
.ag-sec{
display:flex;align-items:center;gap:10px;
font-family:var(--ag-f-mono);font-size:var(--ag-fs-label);
letter-spacing:3px;color:var(--ag-muted);text-transform:uppercase;
margin:20px 2px 12px;
}
.ag-sec::after{content:'';flex:1;height:1px;background:var(--ag-border);}
/* ── Buttons ────────────────────────────────────────────────────────────── */
.ag-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--ag-tap);padding:0 16px;
font-family:var(--ag-f-mono);font-size:var(--ag-fs-label);letter-spacing:2px;
color:var(--ag-gray);background:transparent;
border:1px solid var(--ag-border);border-radius:var(--ag-r-sm);
cursor:pointer;transition:all .18s var(--ag-ease);text-transform:uppercase;
}
.ag-btn:hover{color:var(--ag-white);border-color:var(--ag-border-bright);}
.ag-btn:focus-visible{outline:2px solid var(--ag-blue-bright);outline-offset:2px;}
.ag-btn--primary{
color:var(--ag-blue-bright);
background:rgba(26,127,255,0.14);border-color:var(--ag-border-bright);
}
.ag-btn--primary:hover{background:rgba(26,127,255,0.22);}
.ag-btn--go{color:var(--ag-navy);background:var(--ag-gold);border-color:var(--ag-gold);font-weight:700;}
.ag-btn--danger:hover{color:var(--ag-red);border-color:rgba(255,90,90,0.4);}
/* ── Cards ──────────────────────────────────────────────────────────────── */
.ag-card{
background:var(--ag-navy-card);
border:1px solid var(--ag-border);border-radius:var(--ag-r-lg);
padding:14px;
}
.ag-card--rail{border-left:2px solid var(--ag-blue-dim);}
.ag-card--rail:hover,.ag-card--rail:active{border-left-color:var(--ag-blue-bright);background:var(--ag-blue-glow);}
/* ── Inputs ─────────────────────────────────────────────────────────────── */
.ag-input,.ag-textarea{
width:100%;min-height:var(--ag-tap);padding:11px 13px;
background:var(--ag-navy-mid);color:var(--ag-white);
border:1px solid var(--ag-border);border-radius:var(--ag-r-sm);
font-family:var(--ag-f-body);font-size:var(--ag-fs-body);
}
.ag-input:focus,.ag-textarea:focus{outline:none;border-color:var(--ag-blue-bright);}
.ag-textarea{min-height:80px;resize:vertical;line-height:1.5;}
/* ── Badges (semantic state) ────────────────────────────────────────────── */
.ag-badge{
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
font-family:var(--ag-f-mono);font-size:var(--ag-fs-micro);letter-spacing:1.5px;
padding:4px 9px;border-radius:5px;border:1px solid;
}
.ag-badge--ok {color:var(--ag-green); border-color:rgba(47,208,110,0.4); background:rgba(47,208,110,0.08);}
.ag-badge--warn {color:var(--ag-gold); border-color:rgba(245,166,35,0.4); background:rgba(245,166,35,0.08);}
.ag-badge--crit {color:var(--ag-red); border-color:rgba(255,90,90,0.4); background:rgba(255,90,90,0.08);}
.ag-badge--mute {color:var(--ag-gray); border-color:var(--ag-border); background:rgba(143,171,199,0.06);}
/* ── Chips (tappable tokens: operators, tags) ───────────────────────────── */
.ag-chip{
display:inline-flex;align-items:center;gap:7px;
min-height:38px;padding:0 12px;
background:var(--ag-navy-mid);border:1px solid var(--ag-border);
border-radius:8px;cursor:pointer;transition:all .15s var(--ag-ease);
font-family:var(--ag-f-mono);font-size:var(--ag-fs-chip);letter-spacing:1px;color:var(--ag-white);
}
.ag-chip:active,.ag-chip.is-sel{border-color:var(--ag-border-bright);background:var(--ag-blue-glow);}
.ag-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ag-dot--ok {background:var(--ag-green);box-shadow:0 0 7px rgba(47,208,110,0.6);}
.ag-dot--crit{background:var(--ag-red); box-shadow:0 0 7px rgba(255,90,90,0.5);}
.ag-dot--mute{background:var(--ag-muted);}
/* ── Mobile tab dock (thumb navigation) ─────────────────────────────────── */
.ag-dock{
position:fixed;left:50%;transform:translateX(-50%);bottom:0;top:auto;z-index:40;
width:100%;max-width:480px;height:auto;display:grid;
background:rgba(6,14,30,0.96);backdrop-filter:blur(20px);
border-top:1px solid var(--ag-border-bright);
padding-bottom:env(safe-area-inset-bottom,0px);
}
.ag-dock::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--ag-blue-bright),transparent);opacity:0.5;}
.ag-dock button{
background:none;border:none;cursor:pointer;position:relative;
min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
color:var(--ag-muted);transition:color .15s;
}
.ag-dock .ag-dock-i{font-size:21px;line-height:1;}
.ag-dock .ag-dock-l{font-family:var(--ag-f-mono);font-size:var(--ag-fs-micro);letter-spacing:1.5px;}
.ag-dock button.is-active{color:var(--ag-blue-bright);}
.ag-dock button.is-active::before{content:'';position:absolute;top:0;width:32px;height:3px;
border-radius:0 0 3px 3px;background:var(--ag-blue-bright);box-shadow:0 0 10px var(--ag-blue-bright);}
/* ── Bottom sheet (overflow / MORE) ─────────────────────────────────────── */
.ag-scrim{position:fixed;inset:0;z-index:45;background:rgba(3,8,18,0.7);backdrop-filter:blur(3px);
opacity:0;pointer-events:none;transition:opacity .2s;}
.ag-scrim.is-open{opacity:1;pointer-events:auto;}
.ag-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);z-index:46;
width:100%;max-width:480px;background:var(--ag-navy-mid);
border:1px solid var(--ag-border-bright);border-bottom:none;border-radius:16px 16px 0 0;
padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));
transition:transform .26s var(--ag-ease);}
.ag-sheet.is-open{transform:translate(-50%,0);}
.ag-sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--ag-muted);margin:6px auto 14px;}
/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
*{animation:none!important;}
.ag-sheet,.ag-scrim{transition:none;}
}
/* ── Desktop refinements (> 760px) ──────────────────────────────────────────
Single shared breakpoint. Phone styles above are the baseline; desktop
can tighten labels and hide the mobile dock in favour of the top tabs. */
@media(min-width:761px){
.ag-dock,.ag-sheet,.ag-scrim{display:none;}
}