/* ==========================================================================
   NewDayTransfer — "Style Kit" skin
   ------------------------------------------------------------------------
   Applies the NewDay Transfer design language (dark mission-control /
   aerospace aesthetic) on top of the Modernize theme + site.css.
   Loaded AFTER site.css so it wins on equal specificity.

   The whole system is retinted by overriding the theme's Bootstrap
   (--bs-*) variables, then a handful of app classes get the signature
   details: uppercase monospace labels, squared corners, hairline borders
   and corner-bracket "HUD" framing.

   To revert: remove the <link> to this file from the two layouts.
   ========================================================================== */

/* ----- Design tokens ---------------------------------------------------- */
:root{
  --ndt-accent:      #5CC8F0;   /* electric cyan */
  --ndt-accent-hover:#7ad6f5;
  --ndt-accent-soft: rgba(92,200,240,.14);
  --ndt-accent-ink:  #051318;   /* text on filled accent */
  --ndt-warn:        #F5A64B;   /* expiring / urgent */
  --ndt-ok:          #57E39A;   /* nominal / healthy */
  --ndt-line:        rgba(255,255,255,.09);
  --ndt-line-strong: rgba(255,255,255,.18);
  --ndt-radius:      2px;
  --ndt-font-display:'Inter', system-ui, -apple-system, sans-serif;
  --ndt-font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ndt-track:       .2em;
}

/* ----- Palette override (retints the entire Modernize theme) ------------ */
html[data-bs-theme="dark"]{
  --bs-body-bg:                 #0A0A0B;   /* page & sidebar (near-black) */
  --bs-body-bg-rgb:             10, 10, 11;
  --ndp-surface:                #0E0E11;   /* cards / panels */
  --ndp-surface-2:              #131317;   /* inputs / recessed */
  --bs-secondary-bg:            #16161B;
  --bs-secondary-bg-rgb:        22, 22, 27;
  --bs-border-color:            var(--ndt-line);
  --bs-border-color-translucent:rgba(255,255,255,.07);

  --bs-emphasis-color:          #F4F4F5;
  --bs-emphasis-color-rgb:      244, 244, 245;
  --bs-body-color:              #A6A6AD;
  --bs-body-color-rgb:          166, 166, 173;
  --bs-secondary-color:         #86868C;
  --bs-secondary-color-rgb:     134, 134, 140;

  /* Accent = cyan (was green). Retints links, active nav, focus, charts. */
  --bs-primary:                 #5CC8F0;
  --bs-primary-rgb:             92, 200, 240;
  --bs-link-color:              #5CC8F0;
  --bs-link-hover-color:        #7ad6f5;
  --bs-info:                    #5CC8F0;
  --bs-info-rgb:                92, 200, 240;
  --bs-secondary:               #86868C;
  --bs-secondary-rgb:           134, 134, 140;
  --bs-success:                 #57E39A;
  --bs-success-rgb:             87, 227, 154;
  --bs-danger:                  #FF6B7E;
  --bs-danger-rgb:              255, 107, 126;
  --bs-warning:                 #F5A64B;
  --bs-warning-rgb:             245, 166, 75;

  --bs-primary-bg-subtle:       #06222E;
  --bs-primary-text-emphasis:   #9BE0F7;
  --bs-success-bg-subtle:       #08241A;
  --bs-success-text-emphasis:   #7EEDB6;
  --bs-info-bg-subtle:          #06222E;
  --bs-info-text-emphasis:      #9BE0F7;
  --bs-danger-bg-subtle:        #2E1116;
  --bs-danger-text-emphasis:    #FFA9B4;
  --bs-warning-bg-subtle:       #2A1B08;
  --bs-warning-text-emphasis:   #F8C88C;

  --bs-border-radius:           var(--ndt-radius);
  --bs-border-radius-sm:        var(--ndt-radius);
  --bs-border-radius-lg:        var(--ndt-radius);
  --bs-border-radius-xl:        4px;
}

/* ----- Typography ------------------------------------------------------- */
body{
  font-family: var(--ndt-font-display);
  letter-spacing: -.01em;
}
h1, h2, h3, .h1, .h2, .h3, .fw-bold, .brand-name{
  font-family: var(--ndt-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
::selection{ background: var(--ndt-accent); color: var(--ndt-accent-ink); }

/* Signature mono label used for eyebrows, meta, stat/section headers */
.stat-label,
.chart-subtitle,
.nav-small-cap .hide-menu,
.card-meta,
.monitor-sub,
.range-uptime,
.sidebar-version,
.ndt-live-label,
.who{
  font-family: var(--ndt-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ndt-track);
}
.card-meta, .monitor-sub{ letter-spacing: .1em; font-size: .68rem; }

/* Page header title becomes a bold display heading with a mono eyebrow */
.page-head h1{
  font-family: var(--ndt-font-display); font-weight: 800; font-size: 2rem; letter-spacing: -.02em;
}
.page-head h1::before{
  content: "// "; font-family: var(--ndt-font-mono); font-weight: 500;
  font-size: .95rem; color: var(--ndt-accent); letter-spacing: 0;
}

/* ----- Squared corners + hairlines on surfaces -------------------------- */
.panel, .stat, .uptime-card, .card, .card.link-card, .feature,
.auth-card, .input, select.input, .form-control, .form-select,
.file-item, .dropzone-box, .btn, .badge, .seg-toggle, .ndt-live-status,
.dropdown-menu, .flash, .outage-banner{
  border-radius: var(--ndt-radius) !important;
}
.panel, .stat, .uptime-card, .card.link-card, .feature, .auth-card{
  background: var(--ndp-surface);
  border: 1px solid var(--ndt-line);
  box-shadow: none;
}

/* ----- Corner-bracket "HUD" framing ------------------------------------- */
.panel, .stat, .auth-card, .feature{ position: relative; }
.panel::before, .panel::after,
.stat::before, .stat::after,
.auth-card::before, .auth-card::after,
.feature::before, .feature::after{
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.panel::before, .stat::before, .auth-card::before, .feature::before{
  top: -1px; left: -1px;
  border-top: 1px solid var(--ndt-line-strong);
  border-left: 1px solid var(--ndt-line-strong);
}
.panel::after, .stat::after, .auth-card::after, .feature::after{
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--ndt-line-strong);
  border-right: 1px solid var(--ndt-line-strong);
}
/* Accent brackets on the primary auth card */
.auth-card::before, .auth-card::after{ border-color: var(--ndt-accent); }

/* ----- Buttons: uppercase monospace, letter-spaced ---------------------- */
.btn{
  font-family: var(--ndt-font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 500;
  border-radius: var(--ndt-radius);
}
.btn-lg{ font-size: .85rem; padding: .85rem 1.6rem; }
.btn-primary{
  --bs-btn-color: var(--ndt-accent-ink);
  --bs-btn-bg: var(--ndt-accent);
  --bs-btn-border-color: var(--ndt-accent);
  --bs-btn-hover-color: var(--ndt-accent-ink);
  --bs-btn-hover-bg: var(--ndt-accent-hover);
  --bs-btn-hover-border-color: var(--ndt-accent-hover);
  --bs-btn-active-color: var(--ndt-accent-ink);
  --bs-btn-active-bg: var(--ndt-accent-hover);
  --bs-btn-active-border-color: var(--ndt-accent-hover);
}
.btn-primary:hover{ box-shadow: 0 0 24px var(--ndt-accent-soft); }
.btn-provider{
  font-family: var(--ndt-font-mono); text-transform: uppercase; letter-spacing: .12em;
  border-color: var(--ndt-line-strong);
}
.btn-provider:hover{ border-color: var(--ndt-accent); color: var(--ndt-accent); }

/* ----- Tags / badges: squared, mono, uppercase -------------------------- */
.badge{
  font-family: var(--ndt-font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  border-radius: var(--ndt-radius);
  border: 1px solid var(--ndt-line-strong);
  padding: .32rem .55rem;
}
.badge-up   { background: transparent; color: var(--ndt-accent); border-color: var(--ndt-accent); }
.badge-muted{ background: transparent; color: var(--bs-secondary-color); }
.badge-down { background: transparent; color: var(--ndt-warn); border-color: var(--ndt-warn); }

/* ----- Form fields ------------------------------------------------------ */
.input, select.input, .form-control, .form-select{
  background: var(--ndp-surface-2);
  border: 1px solid var(--ndt-line-strong);
  border-radius: var(--ndt-radius);
  color: var(--bs-emphasis-color);
}
.input:focus, .form-control:focus, .form-select:focus{
  border-color: var(--ndt-accent);
  box-shadow: 0 0 0 3px var(--ndt-accent-soft);
}
.field label{
  font-family: var(--ndt-font-mono); text-transform: uppercase;
  letter-spacing: .16em; font-size: .72rem; color: var(--bs-secondary-color); font-weight: 500;
}

/* ----- Dropzone --------------------------------------------------------- */
.dropzone-box{
  border: 1px dashed var(--ndt-line-strong);
  border-radius: var(--ndt-radius);
  font-family: var(--ndt-font-mono); text-transform: uppercase; letter-spacing: .12em;
}
.dropzone-box:hover, .dropzone-box.is-drag{
  border-color: var(--ndt-accent); background: var(--ndt-accent-soft);
}
.dropzone-box .ti{ color: var(--ndt-accent); }
.file-item{ background: var(--ndp-surface-2); border-color: var(--ndt-line); }

/* ----- Progress + status bars ------------------------------------------- */
.progress-bar-inner, .uptime-fill.bar-up, .uptime-fill.bar-ok, .tick-up{ background: var(--ndt-accent); }
.uptime-fill.bar-warn, .tick-down{ background: var(--ndt-warn); }
.uptime-fill.bar-down{ background: var(--bs-danger); }
.progress-bar-outer, .uptime-bar{ border-radius: 0; }

/* ----- Status dots ------------------------------------------------------ */
.dot-up   { background: var(--ndt-accent); box-shadow: 0 0 0 4px var(--ndt-accent-soft); }
.dot-down { background: var(--ndt-warn);   box-shadow: 0 0 0 4px rgba(245,166,75,.16); }

/* ----- Transfers list (manifest) ---------------------------------------- */
.monitor-row{ border-bottom: 1px solid var(--ndt-line); }
.monitor-name{ font-family: var(--ndt-font-display); font-weight: 600; }
.monitor-name:hover{ color: var(--ndt-accent); }
.range-uptime, .range-uptime span{ color: var(--ndt-accent); font-size: .78rem; }
.range-uptime .text-down{ color: var(--ndt-warn) !important; }

/* ----- Segmented toggle ------------------------------------------------- */
.seg-toggle{ border-color: var(--ndt-line-strong); }
.seg-toggle > a{ font-family: var(--ndt-font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.seg-toggle > a.active{ background: var(--ndt-accent); color: var(--ndt-accent-ink); }

/* ----- Stat tiles ------------------------------------------------------- */
.stat-value{ font-family: var(--ndt-font-mono); font-weight: 400; letter-spacing: -.02em; }
.stat-label{ font-size: .68rem; letter-spacing: var(--ndt-track); }

/* ----- Avatar (topbar) -------------------------------------------------- */
.avatar{
  background: var(--ndt-accent-soft);
  color: var(--ndt-accent);
  border: 1px solid var(--ndt-accent);
  font-family: var(--ndt-font-mono); font-weight: 500; border-radius: var(--ndt-radius);
}

/* ----- Sidebar / topbar chrome ------------------------------------------ */
.left-sidebar{ border-right: 1px solid var(--ndt-line); }
.sidebar-link{ border-radius: var(--ndt-radius); letter-spacing: .02em; }
.sidebar-link.active, .sidebar-nav ul .sidebar-item .sidebar-link.active{
  background: var(--ndt-accent-soft) !important; color: var(--ndt-accent) !important;
}
.topbar{ border-bottom: 1px solid var(--ndt-line); }
.brand-name{ font-family: var(--ndt-font-mono); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

/* ----- Live status indicator + footer ----------------------------------- */
.ndt-live-status{ font-family: var(--ndt-font-mono); text-transform: uppercase; letter-spacing: .1em; border-radius: var(--ndt-radius); }
.ndt-live-status.is-on{ color: var(--ndt-ok); border-color: var(--ndt-ok); }
.ndt-live-status.is-on .ndt-live-dot{ background: var(--ndt-ok); box-shadow: 0 0 8px var(--ndt-ok); }

/* ----- Hero (landing) --------------------------------------------------- */
.hero h1{
  font-family: var(--ndt-font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02;
}
.lead{ color: var(--bs-secondary-color); }
.feature h3{ font-family: var(--ndt-font-display); font-weight: 700; }
.feature h3 .ti{ color: var(--ndt-accent); }

/* ----- Flash / banners -------------------------------------------------- */
.flash{ border-radius: var(--ndt-radius); font-family: var(--ndt-font-mono); font-size: .8rem; letter-spacing: .04em; }

/* ----- Tables (manifest style) ------------------------------------------ */
.table{ --bs-table-bg: transparent; color: var(--bs-body-color); }
.table > thead th{
  font-family: var(--ndt-font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .64rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--ndt-line);
}
.table > tbody td{ border-color: var(--ndt-line); }
.table > tbody tr:hover > *{ background: rgba(255,255,255,.02); }

/* Live-update flash highlight follows the accent */
@keyframes ndtFlash { from { box-shadow: 0 0 0 2px var(--ndt-accent); } to { box-shadow: 0 0 0 2px transparent; } }