@import url('../css pages/global.css');

*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; transition: background .3s, color .3s; }

body.dark {
    --bg: #080e1a; --surface: #111827; --border: #1f2d40; --border2: #162032;
    --text: #eef2ff; --t2: #7c94b3; --t3: #3d5470;
    --nav: rgba(8,14,26,.9); --shadow: 0 1px 3px rgba(0,0,0,.4);
}
body        { background: var(--bg); color: var(--text); }
.surf       { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.t2         { color: var(--t2); }
.t3         { color: var(--t3); }

/* gradient */
.g-text { background: linear-gradient(135deg,#4f46e5,#9333ea); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* logo */
.logo-wrap { width:38px; height:38px; flex-shrink:0; }
.logo-wrap svg { width:100%; height:100%; filter:drop-shadow(0 2px 8px rgba(99,102,241,.4)); }

/* link hover */
.lh { position:relative; }
.lh::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#4f46e5; transition:width .25s; }
.lh:hover::after { width:100%; }

/* fade */
.fi { opacity:0; transform:translateY(14px); transition:opacity .45s,transform .45s; }
.fi.v { opacity:1; transform:none; }

/* animations */
.spin   { animation: spin  1s linear infinite; }
.pulse  { animation: pulse 2s ease-in-out infinite; }
@keyframes spin  { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* skeleton */
.sk {
    background:linear-gradient(90deg,var(--border2) 25%,var(--border) 50%,var(--border2) 75%);
    background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px;
}

/* dots */
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.d-op  { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.d-dg  { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
.d-out { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.2); }
.d-mnt { background:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.2); }
.d-ld  { background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.2); }

/* ms bar */
.ms-track { height:3px; border-radius:2px; background:var(--border2); overflow:hidden; }
.ms-fill  { height:100%; border-radius:2px; transition:width .7s; }
.ms-g  { background:#22c55e; }
.ms-m  { background:#f59e0b; }
.ms-s  { background:#ef4444; }

/* uptime segs */
.ubar { display:flex; gap:2px; }
.useg { height:28px; border-radius:3px; flex:1; cursor:pointer; transition:opacity .15s,transform .15s; }
.useg:hover { opacity:.6; transform:scaleY(1.1); }
.useg.nd { background:var(--border) !important; }

/* tooltip */
.tip {
    position:fixed; z-index:999; pointer-events:none;
    background:#0f172a; color:#eef2ff;
    padding:5px 11px; border-radius:8px; font-size:11px; font-weight:700;
    white-space:nowrap; opacity:0; transition:opacity .1s;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.tip.show { opacity:1; }
body.dark .tip { background:#eef2ff; color:#0f172a; }

/* countdown ring */
.r-bg   { stroke:var(--border2); }
.r-fill { stroke:#6366f1; transition:stroke-dashoffset 1s linear; transform-origin:center; transform:rotate(-90deg); }

/* tabs */
.tab { padding:.5rem .875rem; font-weight:700; font-size:.7rem; text-transform:uppercase;
       letter-spacing:.08em; border-radius:.5rem; cursor:pointer; transition:all .15s; color:var(--t3); }
.tab.on { background:#6366f1; color:#fff; }
body.dark .tab.on { background:#4f46e5; }

/* since badge */
.since { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px;
         background:var(--border2); color:var(--t3); white-space:nowrap; }

/* pill */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; border:1px solid; font-size:11px; font-weight:700; }
.pill-op  { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.pill-dg  { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.pill-out { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.pill-mnt { background:#eef2ff; border-color:#c7d2fe; color:#4338ca; }
body.dark .pill-op  { background:#052e16; border-color:#166534; color:#4ade80; }
body.dark .pill-dg  { background:#451a03; border-color:#92400e; color:#fbbf24; }
body.dark .pill-out { background:#450a0a; border-color:#991b1b; color:#f87171; }
body.dark .pill-mnt { background:#1e1b4b; border-color:#3730a3; color:#a5b4fc; }

/* svc row */
.srow { transition:background .12s; }
.srow:hover { background:var(--border2); }

/* mobile menu */
#mmenu { transform:translateX(100%); transition:transform .3s; background:var(--surface); border-color:var(--border); }
#mmenu.open { transform:none; }

/* incident severity */
.sev-minor    { background:#fef9c3; color:#854d0e; }
.sev-major    { background:#fde8d8; color:#9a3412; }
.sev-critical { background:#fee2e2; color:#991b1b; }

/* tabs content */
#tContent > div { display:none; }
#tContent > div.on { display:block; }

/* SLA bar */
.sla-bar { height:6px; border-radius:3px; background:var(--border2); overflow:hidden; }
.sla-fill { height:100%; border-radius:3px; transition:width .8s; }

/* chart */
.ch-wrap { position:relative; height:130px; }

/* maintenance banner */
.maint-banner {
    background:linear-gradient(135deg,#4338ca,#6d28d9);
    border-radius:1.25rem; padding:1.25rem 1.5rem;
    color:#eef2ff;
}

/* timeline */
.tl-dot  { width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:3px; border:2px solid var(--surface); }
.tl-line { width:2px; background:var(--border); flex-shrink:0; margin:0 auto; }