/* ===========================================================================
   The OTPNEST theme for the ZAT panel.

   Loaded only on the mirror (PANEL_THEME=nest), after the panel's own inline
   styles, so it wins on equal specificity without any template being
   rewritten. The panel is already token-driven — --bg, --card, --accent and
   the rest — so most of the work is redefining those; the blocks below the
   tokens are the handful of places where the chrome itself needs to change
   shape rather than colour.

   Nothing here changes behaviour. The live panel never loads this file.
   =========================================================================== */

/* ------------------------------------------------------------- the tokens */
:root {
  --bg:        #f6f7fb;
  --card:      #ffffff;
  --hover:     #f1f3fb;
  --border:    #e4e6f2;
  --txt:       #12142a;
  --muted:     #5c6186;

  --accent:    #5a5ce8;
  --accent2:   #6d70f7;
  --gold:      #6d70f7;   /* the panel calls its accent "gold" throughout */
  --gold-lt:   #a98cff;
  --gold-dk:   #4b4ee0;

  --danger:    #e11d48;
  --success:   #10b981;
  --warn:      #f59e0b;

  --sb-bg:     #0b0d1a;
  --sb-bg2:    #11142a;
  --sb-txt:    #c3c7e4;
  --sb-muted:  #6e7499;

  --shadow:    0 14px 40px rgba(18, 20, 42, .10);
  --font:      'Sora', 'Inter', 'Segoe UI', -apple-system, sans-serif;

  /* Ours, used only by the rules below. */
  --nest-wash: radial-gradient(60rem 38rem at 15% -6%, #6d70f714, transparent 62%),
               radial-gradient(48rem 34rem at 95% 4%, #35d0d60f, transparent 60%);
  --nest-line: #6d70f73d;
  --nest-soft: #6d70f714;
  --nest-radius: 16px;
}

[data-theme="dark"] {
  --bg:        #060713;
  --card:      #0f1225;
  --hover:     #171a32;
  --border:    #222640;
  --txt:       #e8e9f5;
  --muted:     #8186a6;

  --accent:    #8f91ff;
  --accent2:   #a98cff;
  --gold:      #8f91ff;
  --gold-lt:   #c3b5ff;
  --gold-dk:   #6d70f7;

  --sb-bg:     #07080f;
  --sb-bg2:    #0d0f1d;
  --sb-txt:    #c3c7e4;
  --sb-muted:  #6e7499;

  --shadow:    0 20px 56px rgba(0, 0, 0, .55);
  --nest-wash: radial-gradient(60rem 38rem at 15% -6%, #6d70f724, transparent 62%),
               radial-gradient(48rem 34rem at 95% 4%, #35d0d614, transparent 60%);
  --nest-soft: #6d70f71f;
}

/* ------------------------------------------------------------ the surface */
body {
  background-image: var(--nest-wash);
  background-attachment: fixed;
  letter-spacing: -.004em;
}

::selection { background: rgba(109, 112, 247, .38); }

/* Headings carry the display face; body text stays on Inter for reading. */
h1, h2, h3, h4, h5,
.pn-card-head h5, .widget-head h5 {
  font-family: 'Sora', 'Inter', sans-serif;
  letter-spacing: -.02em;
}
body, .form-control, table, input, select, textarea, button {
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------- sidebar */
.sidebar {
  background: linear-gradient(180deg, var(--sb-bg2), var(--sb-bg)) !important;
  border-right: 1px solid rgba(109, 112, 247, .16);
}
.sb-link {
  border-radius: 10px;
  margin: 2px 10px;
  transition: background .16s ease, color .16s ease;
}
.sb-link:hover { background: rgba(109, 112, 247, .12) !important; }
.sb-link.active,
.sb-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(109, 112, 247, .26),
                              rgba(109, 112, 247, .06)) !important;
  color: #ffffff !important;
  box-shadow: inset 2px 0 0 var(--gold);
}
.sb-user .av,
.user-menu .av {
  background: linear-gradient(135deg, #6d70f7, #a98cff) !important;
  color: #fff !important;
  border: 0 !important;
}
.sb-welcome { letter-spacing: .14em; }

/* ----------------------------------------------------------------- topbar */
.topbar {
  background: color-mix(in srgb, var(--card) 86%, transparent) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border) !important;
}

/* ------------------------------------------------------------------ cards */
.card, .pn-card, .widget-block {
  border-radius: var(--nest-radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.pn-card-head, .widget-head {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.pn-card-head h5, .widget-head h5 {
  letter-spacing: .02em;
}

/* A hairline of accent along the top of a card, the way the site does it. */
.pn-card, .widget-block { position: relative; overflow: hidden; }
.pn-card::before, .widget-block::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .45;
}

/* ---------------------------------------------------------------- buttons */
.btn, .pn-btn, .dt-button {
  border-radius: 10px !important;
  font-weight: 500;
  transition: transform .14s ease, filter .14s ease, background .14s ease;
}
.btn:hover, .pn-btn:hover, .dt-button:hover { transform: translateY(-1px); }

.btn-primary, .btn-info,
.pn-btn.gold {
  background: linear-gradient(135deg, #6d70f7, #8f91ff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(109, 112, 247, .9);
}
.btn-primary:hover, .pn-btn.gold:hover { filter: brightness(1.08); }

.btn-success, .pn-btn.green {
  background: linear-gradient(135deg, #0ea571, #10b981) !important;
  border-color: transparent !important; color: #fff !important;
}
.btn-danger, .pn-btn.red {
  background: linear-gradient(135deg, #d11440, #e11d48) !important;
  border-color: transparent !important; color: #fff !important;
}
.btn-warning, .pn-btn.orange {
  background: linear-gradient(135deg, #e08a08, #f59e0b) !important;
  border-color: transparent !important; color: #1a1300 !important;
}
.pn-btn.ghost, .btn-default {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
.pn-btn.ghost:hover, .btn-default:hover {
  border-color: var(--nest-line) !important;
  background: var(--nest-soft) !important;
}

/* ----------------------------------------------------------------- inputs */
.form-control, select.form-control, textarea.form-control {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
}
.form-control:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px var(--nest-soft) !important;
}

/* ------------------------------------------------------- labels and chips */
.label, .badge, .panel-chip {
  border-radius: 999px !important;
  font-weight: 500;
  letter-spacing: .04em;
}
.label-primary, .label-info {
  background: var(--nest-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--nest-line) !important;
}
.panel-chip.owner {
  background: linear-gradient(135deg, #6d70f7, #a98cff) !important;
  color: #fff !important; border: 0 !important;
}

/* ----------------------------------------------------------------- tables */
table.dataTable thead th,
.pn-card table thead th,
table thead th {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  color: var(--muted);
}
table.dataTable tbody tr:hover,
.pn-card table tbody tr:hover { background: var(--nest-soft) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------- alerts */
.alert-success, .alert-info, .alert-warning, .alert-danger, .flash-bar {
  border-radius: 12px !important;
  border-left-width: 3px !important;
}

/* ------------------------------------------------------- the mirror band  */
/* Said once, at the top of every page, so nobody mistakes this copy for the
   panel their customers are using. */
.nest-mirror-bar {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 14px;
  border: 1px solid var(--nest-line); border-radius: 12px;
  background: var(--nest-soft);
  font-size: 12.5px; color: var(--muted);
}
.nest-mirror-bar b {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.nest-mirror-bar .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px var(--nest-soft);
}
.nest-mirror-bar .right { margin-left: auto; }
.nest-mirror-bar a { color: var(--accent); }

/* --------------------------------------------------- the dashboard tiles */
/* The four KPI tiles carry their own gradients rather than reading the
   tokens, so they are the one place the swap cannot reach on its own. Each
   keeps its position in the row and takes a colour from this palette
   instead of the panel's gold. */
.kpi {
  border-radius: var(--nest-radius) !important;
  border: 1px solid var(--border) !important;
}
.kpi.k1 {
  background: linear-gradient(135deg, #1b1e3f 0%, #0b0d1a 100%) !important;
  border-color: rgba(109, 112, 247, .34) !important;
}
.kpi.k2 {
  background: linear-gradient(135deg, #6d70f7 0%, #8f91ff 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.kpi.k3 {
  background: linear-gradient(135deg, #16203a 0%, #0d1322 100%) !important;
  border-color: rgba(53, 208, 214, .28) !important;
}
.kpi.k4 {
  background: linear-gradient(135deg, #2a1c4a 0%, #130d26 100%) !important;
  border-color: rgba(169, 140, 255, .34) !important;
}
.kpi.k2 *, .kpi.k2 .kpi-go { color: #ffffff !important; }
.kpi.k1 *, .kpi.k3 *, .kpi.k4 * { color: var(--txt) !important; }
.kpi .kpi-go { opacity: .85; }

/* Anything still painting itself with the old gold. */
[style*="#b8955a"], [style*="#c9a86a"], [style*="#d2b172"] {
  background-image: none !important;
}
.top-emblem img, .sidebar .brand img { filter: hue-rotate(205deg) saturate(.75); }