/* ── Plus Jakarta Sans (self-hosted, variable) — browser lazy-loads only the
   unicode-range subset a page actually needs. ── */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-00.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1117;
  --bg2: #1a1d27;
  --bg3: #22263a;
  --border: #2e3347;
  --text: #e2e8f0;
  --muted: #8892a4;
  --accent: #f97316;        /* Helios orange (brand accent) */
  --accent-text: #fdba74;   /* readable accent-coloured label on an accent tint */
  --on-accent: #1a1d27;     /* text on an --accent background (dark on the bright orange) */
  --offline-seg: #374151;   /* timeline offline segment fill */
  --shadow-card: 0 8px 24px rgba(0,0,0,.4);   /* hover lift on clickable cards */
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9edf2;     /* grey page so white cards/rows stand out (more depth) */
  --bg2: #ffffff;
  --bg3: #e3e8ef;    /* subtle surface: inputs, hovers, track — reads on white */
  --border: #d3d9e2;
  --text: #1a1d27;
  --muted: #5b6573;
  --accent: #c2410c;        /* deeper Helios orange for contrast on light + white button text */
  --accent-text: #9a3412;
  --on-accent: #ffffff;
  --offline-seg: #94a3b8;
  --shadow-card: 0 8px 22px rgba(15,23,42,.12);
  --green: #15803d;   /* darkened from #16a34a for 4.5:1 text contrast on light */
  --red: #dc2626;
  --yellow: #b45309;  /* darkened from #d97706 for 4.5:1 text contrast on light */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.navbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

.container { max-width: 1600px; margin: 0 auto; padding: 28px 24px 44px; }

h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 12px; }
.muted { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }

/* Cards */
.cards { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; min-width: 140px; }
.card-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.card-value { font-size: 20px; font-weight: 700; }

/* Table */
.table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.table th { background: var(--bg2); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--bg2); }
.td-bold { font-weight: 600; }
.td-mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }
.td-date { color: var(--muted); white-space: nowrap; font-size: 12px; }
.td-right, .th-right { text-align: right; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: rgba(34,197,94,.15); color: var(--green); }
.badge-red { background: rgba(239,68,68,.15); color: var(--red); }
.badge-gray { background: var(--bg3); color: var(--muted); }

/* Buttons */
.btn { background: var(--accent); color: var(--on-accent); border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { opacity: .88; }
.btn-sm { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn-sm:hover { background: var(--border); }
.btn-primary { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }

/* Pagination */
.tbl-footer { display: flex; align-items: center; gap: 6px; padding: 12px 0; }
.tbl-pg-btns { display: flex; gap: 4px; }
.tbl-pg-info { color: var(--muted); font-size: 12px; margin-left: 8px; }

/* Form */
.form-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 20px; display: flex; gap: 16px; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; }
.form-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.form-card select { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 7px 10px; font-size: 13px; min-width: 220px; }

/* ── Hamburger menu ── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 4px;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.nav-mobile-menu {
  position: fixed; inset: 52px 0 0 0; background: var(--bg2);
  z-index: 200; flex-direction: column; padding: 16px 20px; gap: 4px;
  border-top: 1px solid var(--border);
  display: none;
}
.nav-mobile-menu.open { display: flex !important; }
.nav-mobile-menu a, .nav-mobile-menu button {
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer; width: 100%;
}
.nav-mobile-menu a:last-child, .nav-mobile-menu button:last-child { border-bottom: none; }

/* ── Scrollable tables on mobile ── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Responsive breakpoints ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .container { padding: 16px 14px; }
  h1 { font-size: 18px; }
  .page-header { flex-direction: column; gap: 12px; }
  .page-header > div:last-child { width: 100%; }

  /* Dashboard KPI */
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 20px; }
  .kpi-icon  { width: 36px; height: 36px; font-size: 15px; }

  /* Dashboard charts */
  .dash-grid-2     { grid-template-columns: 1fr; }
  .dash-grid-inner { grid-template-columns: 1fr; }

  /* Settings grid */
  .settings-grid { grid-template-columns: 1fr; }
  .s-add-row { flex-direction: column; }

  /* Timeline */
  .tl-loc-col, .tl-data-col,
  .tl-lte-col { display: none; }
  .tl-name-col { width: 160px; }

  /* Tables */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
  .table td, .table th { padding: 8px 10px; font-size: 12px; }

  /* Uptime grid */
  .uptime-grid { grid-template-columns: 1fr 1fr; }

  /* Login */
  .login-card { margin: 16px; padding: 28px 20px; }
}

@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .uptime-grid { grid-template-columns: 1fr; }
  .tl-name-col { width: 130px; }
}

/* ── Shared settings/links card + form primitives (used by settings.html and links.html) ── */
.s-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.s-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.s-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.s-card-sub   { font-size: 12px; color: var(--muted); }
.s-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.s-field  { display: flex; flex-direction: column; gap: 5px; }
.s-label  { font-size: 12px; font-weight: 600; color: var(--muted); }
.s-input  { background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 9px 13px; font-size: 13px; width: 100%; box-sizing: border-box; transition: border-color .15s; }
.s-input:focus { outline: none; border-color: var(--accent); }
.lnk-badge { display: inline-block; font-size: 10px; font-weight: 600; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-right: 4px;
  color: var(--muted); vertical-align: middle; }

/* ── App shell (top bar · theme toggle · sidebar · flyout selector · dashboard modal · footer) ──
   Lives here rather than inline in base.html so all site-wide CSS is in one place. */
body { margin:0; }
.topbar { height:46px; display:flex; align-items:center; padding:0 18px; background:var(--bg2);
          border-bottom:1px solid var(--border); position:sticky; top:0; z-index:70; }
.topbar-brand { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; letter-spacing:.3px; color:var(--text); text-decoration:none; }
.topbar-brand:hover { color:var(--text); }
.brand-mark { width:19px; height:19px; color:var(--accent); flex-shrink:0; }
.theme-toggle { margin-left:auto; position:relative; width:55px; height:30px; border:none; border-radius:16px;
                cursor:pointer; padding:0; flex-shrink:0; transition:background .25s; }
.theme-toggle[data-mode="light"] { background:linear-gradient(145deg,#e4e8ee,#f6f8fb);
                box-shadow: inset 2px 2px 5px #c5cad3, inset -2px -2px 5px #ffffff; }
.theme-toggle[data-mode="dark"]  { background:linear-gradient(145deg,#2b3140,#3b4252);
                box-shadow: inset 2px 2px 5px #1b1f29, inset -2px -2px 4px #474f60; }
.tt-knob { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
           display:flex; align-items:center; justify-content:center; transition:left .25s, background .25s; }
.theme-toggle[data-mode="dark"] .tt-knob { left:28px; }
.theme-toggle[data-mode="light"] .tt-knob { background:linear-gradient(145deg,#ffffff,#e9edf2);
           box-shadow:1px 1px 3px #c5cad3, -1px -1px 2px #ffffff; }
.theme-toggle[data-mode="dark"]  .tt-knob { background:linear-gradient(145deg,#535b6c,#3a414f);
           box-shadow:1px 1px 3px #1b1f29; }
.tt-knob svg { width:14px; height:14px; }
.theme-toggle[data-mode="light"] .tt-sun  { display:block; color:#8a93a1; }
.theme-toggle[data-mode="light"] .tt-moon { display:none; }
.theme-toggle[data-mode="dark"]  .tt-moon { display:block; color:#dbe2ec; }
.theme-toggle[data-mode="dark"]  .tt-sun  { display:none; }
.topbar-dash { margin-left:10px; display:flex; align-items:center; gap:7px; background:var(--bg3); border:1px solid var(--border);
               color:var(--text); font-size:13px; font-weight:500; padding:6px 12px; border-radius:8px; cursor:pointer; }
.topbar-dash:hover { border-color:var(--accent); }
.topbar-dash svg { width:15px; height:15px; }
/* Keep the top bar dark on the light theme too — a consistent brand header. */
:root[data-theme="light"] .topbar { background:#1a1d27; border-bottom-color:#2e3347; }
:root[data-theme="light"] .topbar-brand,
:root[data-theme="light"] .topbar-brand:hover { color:#e2e8f0; }
:root[data-theme="light"] .topbar-dash { background:#22263a; border-color:#2e3347; color:#e2e8f0; }
.dash-modal { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5); display:none;
              align-items:flex-start; justify-content:center; padding:46px 20px; overflow:auto; }
.dash-modal-panel { width:100%; max-width:1080px; background:var(--bg); border:1px solid var(--border);
                    border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.dash-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
                   border-bottom:1px solid var(--border); font-size:16px; font-weight:600; }
.dash-modal-close { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; }
.dash-modal-close:hover { color:var(--text); }
.dash-modal-body { padding:20px; }
.app { display:flex; min-height:calc(100vh - 46px); }
.sb { width:222px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border);
      display:flex; flex-direction:column; position:sticky; top:46px; height:calc(100vh - 71px); z-index:50; }
.app-main { flex:1; min-width:0; }
/* Site switcher card (opens the flyout) */
.sb-site { display:flex; align-items:center; gap:10px; margin:10px; padding:9px 10px; border-radius:11px;
           background:var(--bg3); border:1px solid var(--border); cursor:pointer; transition:border-color .15s; }
.sb-site:hover { border-color:var(--accent); }
.sb-ico { width:32px; height:32px; border-radius:9px; background:rgba(249,115,22,.15); color:var(--accent);
          display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-ico svg { width:17px; height:17px; }
.sb-site-name { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-site-meta { font-size:11px; color:var(--muted); margin-top:1px; }
.sb-grp { padding:14px 18px 6px; font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; opacity:.65; }
.sb-nav { padding:0 10px; display:flex; flex-direction:column; gap:1px; }
.sb-link { display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:8px;
           font-size:13.5px; color:var(--muted); text-decoration:none; transition:color .12s, background .12s; }
.sb-link:hover { background:var(--bg3); color:var(--text); }
.sb-link.active { background:rgba(249,115,22,.14); color:var(--accent-text); font-weight:600; }
.sb-link.active svg { stroke:var(--accent); opacity:1; }
.sb-link svg { width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; opacity:.8; }
.sb-spacer { flex:1; }
.sb-foot { display:block; padding:9px 14px 13px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); text-decoration:none; }
.sb-foot:hover { color:var(--text); }
/* Flyout site selector */
.fly-back { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:90; display:none; }
.fly { position:fixed; top:56px; left:10px; width:306px; background:var(--bg2); border:1px solid var(--border);
       border-radius:14px; z-index:100; padding:8px; display:none; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.fly-act { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12.5px; }
.fly-act a { color:var(--accent); cursor:pointer; text-decoration:none; }
.fly-search { display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:7px; padding:5px 9px; margin-bottom:8px; }
.fly-search input { border:none; background:transparent; color:var(--text); font-size:13px; flex:1; outline:none; }
.fly-cols { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); padding:0 10px 4px; text-transform:uppercase; letter-spacing:.04em; }
.fly-list { max-height:340px; overflow:auto; }
.fly-row { display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border-radius:9px; cursor:pointer; font-size:13px; }
.fly-row:hover { background:var(--bg3); }
.fly-row.active { background:rgba(249,115,22,.16); color:var(--accent-text); }
.fly-row.active .fly-cnt { color:var(--accent-text); }
.fly-cnt { color:var(--muted); }
.fly-crit { background:rgba(239,68,68,.16); color:var(--red); font-size:11px; font-weight:600; padding:1px 8px; border-radius:20px; }
@media (max-width:760px){ .sb { width:60px; } .sb-site-name,.sb-site-meta,.sb-link span,.sb-grp,.sb-foot { display:none; } }
.app-footer-fade { position:fixed; bottom:25px; left:222px; right:0; height:30px;
                   background:linear-gradient(to bottom,transparent,var(--bg)); pointer-events:none; z-index:55; }
@media (max-width:760px){ .app-footer-fade { left:60px; } }
.app-footer { position:fixed; bottom:0; left:0; right:0; display:flex; align-items:center;
              justify-content:space-between; padding:0 14px; height:25px; font-size:10px; color:var(--muted);
              background:var(--bg2); border-top:1px solid var(--border); z-index:60; }
.app-footer-ver { color:var(--muted); text-decoration:none; }
.app-footer-ver:hover { color:var(--text); }

/* Respect the user's OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}