/* ============================================================
   NemoLog · Water-lab theme
   Shared design tokens + reusable components.
   Loaded on every page; per-template <style> blocks may override.
   ============================================================ */

:root{
  --bg-0:#04101a;
  --bg-1:#081822;
  --surface:#0f2230;
  --surface-2:#13283a;
  --border:#1d3a52;
  --border-soft:#16314a;
  --text:#e6eef6;
  --text-dim:#9fb3c3;
  --text-faint:#62798c;
  --accent:#5fd3e0;
  --accent-deep:#1f9ba8;
  --coral:#ff8a6b;
  --coral-dim:#b85a44;
  --ok:#5fb87a;
  --watch:#e6c14a;
  --act:#e89046;
  --urgent:#e36161;
  --safe:#5fb87a;
  --warning:#e6c14a;
  --danger:#e36161;
  --deadly:#b03030;
  --radius:14px;
  --radius-sm:9px;
  --radius-lg:18px;
  --shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --serif:"SF Pro Display","Inter","Segoe UI Variable",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:"SF Pro Text","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Legacy aliases — pages that still reference old token names get themed automatically */
  --bg:var(--bg-0);
  --card:var(--surface);
  --card-hover:var(--surface-2);
  --text-muted:var(--text-dim);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

html,body{
  background:var(--bg-0);color:var(--text);
  font-family:var(--sans);min-height:100vh;
}
body{
  background:
    radial-gradient(1200px 800px at 50% -200px, #0d2a3b 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-attachment:fixed;
  padding-bottom:3rem;
  font-feature-settings:"ss01","ss02","cv01";
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);}
a:hover{color:#7be0eb}

/* ---------- Nav header ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem 1.4rem;
  border-bottom:1px solid var(--border-soft);
  background:rgba(6,20,29,0.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  position:sticky;top:0;z-index:100;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);}
.brand-mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#0d2738,#13344a);
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(95,211,224,0.25), 0 6px 14px -8px rgba(95,211,224,0.55);
  overflow:hidden;
}
.brand-mark img{width:24px;height:24px;display:block}
.brand-name{font-family:var(--sans);font-weight:800;font-size:1.15rem;letter-spacing:-.025em}
.brand-name em{font-style:normal;color:var(--accent);font-weight:700}
.brand-tag{font-size:.7rem;color:var(--text-faint);margin-left:.55rem;letter-spacing:.04em;text-transform:uppercase;border-left:1px solid var(--border);padding-left:.55rem;}
.nav-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:nowrap}
@media(max-width:640px){
  .nav{padding:.7rem .9rem;gap:.5rem}
  .brand-tag{display:none}
  .brand-name{font-size:1.05rem}
  .nav-btn{padding:.36rem .65rem;font-size:.72rem}
}
@media(max-width:380px){
  .nav-btn{padding:.32rem .55rem;font-size:.68rem}
}
.nav-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .8rem;border-radius:999px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-dim);font-size:.78rem;font-family:inherit;
  text-decoration:none;transition:all .15s;cursor:pointer;
}
.nav-btn:hover{background:var(--surface);color:var(--text);border-color:var(--accent-deep)}
.nav-btn.primary{background:var(--accent);color:#03131c;border-color:transparent;font-weight:600}
.nav-btn.primary:hover{background:#7be0eb;color:#03131c}
.nav-btn.danger{color:#f5a3a3;border-color:rgba(227,97,97,0.35)}
.nav-btn.danger:hover{background:rgba(227,97,97,0.10);color:#f5a3a3;border-color:rgba(227,97,97,0.55)}

/* ---------- Context strip (tank/org switcher) ---------- */
.context{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;padding:1.1rem 1.4rem .4rem;
}
.context-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.context-meta{margin-left:auto;font-size:.78rem;color:var(--text-faint)}
.context-meta strong{color:var(--text-dim);font-weight:500}

.org-switcher{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-faint);
  padding:.6rem 1.4rem;max-width:1180px;margin:0 auto;
  border-bottom:1px solid var(--border-soft);
}
.org-switcher select{
  background:var(--bg-1);color:var(--text);
  border:1px solid var(--border-soft);border-radius:8px;
  padding:.35rem .6rem;font-family:inherit;font-size:.82rem;
}
.org-switcher select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(95,211,224,0.15)}
.org-switcher .manage{margin-left:auto;color:var(--accent);text-decoration:none;font-weight:600}
.org-switcher .manage:hover{text-decoration:underline}

/* Tank pills */
.tank-pills{display:flex;gap:.35rem;flex-wrap:wrap}
.tank-pill{
  background:transparent;border:1px solid var(--border);
  color:var(--text-dim);border-radius:999px;
  padding:.32rem .85rem;font-size:.78rem;font-family:inherit;
  cursor:pointer;text-decoration:none;transition:all .15s;
}
.tank-pill:hover{background:var(--surface);color:var(--text)}
.tank-pill.active{
  background:var(--surface-2);color:var(--text);
  border-color:var(--accent-deep);
  box-shadow:0 0 0 1px var(--accent-deep) inset;
}
.tank-pill.manage,.tank-pill.manage-pill{color:var(--text-faint);border-style:dashed}

/* ---------- Generic page wrap ---------- */
.wrap,.container{max-width:1180px;margin:0 auto;padding:1.2rem 1.4rem}
.section-label{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin:1.5rem 0 .7rem;
}

/* ---------- Cards / sections ---------- */
.card{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.4rem;margin-bottom:1.5rem;
  box-shadow:var(--shadow);
}
.card h2{
  font-size:.78rem;color:var(--accent);margin-bottom:1rem;
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
}

.section{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%);
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:1.5rem;overflow:hidden;box-shadow:var(--shadow);
}
.section-header{
  padding:1rem 1.25rem;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;
}
.section-header h2{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.section-header .toggle-icon{font-size:1.2rem;transition:transform .3s;color:var(--text-faint)}
.section-body{padding:1.25rem}
.section.collapsed .section-body{display:none}
.section.collapsed .toggle-icon{transform:rotate(-90deg)}

/* ---------- Flash + verify banner ---------- */
.flash{
  padding:.7rem .9rem;border-radius:10px;margin-bottom:.8rem;font-size:.85rem;
  border:1px solid var(--border-soft);background:var(--surface);
}
.flash-success{background:rgba(95,184,122,0.10);color:#9be2af;border-color:rgba(95,184,122,0.30)}
.flash-warning{background:rgba(230,193,74,0.10);color:#f3d97f;border-color:rgba(230,193,74,0.30)}
.flash-error  {background:rgba(227,97,97,0.10);color:#f5a3a3;border-color:rgba(227,97,97,0.30)}
.flash-info   {background:rgba(95,211,224,0.10);color:#a8eef5;border-color:rgba(95,211,224,0.30)}

.verify-banner{
  background:rgba(230,193,74,0.08);border:1px solid rgba(230,193,74,0.30);
  color:#f3d97f;padding:.75rem 1rem;border-radius:12px;margin-bottom:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  flex-wrap:wrap;font-size:.85rem;
}
.verify-btn{
  background:rgba(230,193,74,0.18);color:#f3d97f;
  border:1px solid rgba(230,193,74,0.4);
  padding:.4rem .85rem;border-radius:8px;font-size:.8rem;
  cursor:pointer;font-family:inherit;font-weight:600;
}
.verify-btn:hover{background:rgba(230,193,74,0.30)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.1rem;border-radius:10px;
  font-size:.88rem;font-weight:600;border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  cursor:pointer;transition:all .15s;font-family:inherit;
  text-decoration:none;
}
.btn:hover{background:var(--surface-2);border-color:var(--accent-deep);color:var(--text)}
.btn-primary{
  background:var(--accent);color:#03131c;border-color:transparent;
  font-weight:700;letter-spacing:-.01em;
  box-shadow:0 8px 18px -8px rgba(95,211,224,0.55);
}
.btn-primary:hover{background:#7be0eb;color:#03131c;transform:translateY(-1px)}
.btn-coral{
  background:var(--coral);color:#3d1a0e;border-color:transparent;
  font-weight:700;letter-spacing:-.01em;
  box-shadow:0 8px 18px -8px rgba(255,138,107,0.6);
}
.btn-coral:hover{background:#ffa288;color:#3d1a0e;transform:translateY(-1px)}
.btn-danger{
  background:rgba(227,97,97,0.10);color:#f5a3a3;
  border-color:rgba(227,97,97,0.35);
}
.btn-danger:hover{background:rgba(227,97,97,0.20);color:#f5a3a3}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-ghost:hover{background:var(--surface);border-color:var(--accent-deep)}
.btn-delete{
  background:none;border:none;color:#e36161;cursor:pointer;
  font-size:.85rem;padding:.25rem .55rem;border-radius:6px;opacity:.65;
}
.btn-delete:hover{opacity:1;background:rgba(227,97,97,0.10)}

/* Legacy btn-primary used by old templates (gradient → flat coral/teal) */
.btn-primary{background:var(--accent);color:#03131c}

/* ---------- Form inputs ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],input[type=tel],
select,textarea{
  background:var(--bg-1);color:var(--text);
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:.6rem .75rem;font-family:inherit;font-size:.92rem;
  transition:all .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(95,211,224,0.15);
}
textarea{resize:vertical;min-height:60px}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) center, calc(100% - 11px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;
}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.form-group label{
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
}
.form-group.full-width,.form-group.full{grid-column:1 / -1}
.form-group input,.form-group select,.form-group textarea{width:100%}
.form-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;
}
@media(max-width:520px){.form-grid{grid-template-columns:1fr}}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:.65rem .75rem;text-align:left;vertical-align:middle}
th{
  color:var(--text-faint);text-transform:uppercase;
  font-size:.66rem;letter-spacing:.12em;font-weight:600;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
td{border-bottom:1px solid rgba(29,58,82,0.5)}
tr:hover td{background:rgba(95,211,224,0.04)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

code{
  background:var(--bg-1);padding:.2rem .5rem;border-radius:4px;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.85em;
  border:1px solid var(--border-soft);color:var(--text);
}

/* ---------- Pills / badges ---------- */
.pill{
  display:inline-block;padding:.18rem .6rem;border-radius:999px;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  background:rgba(255,255,255,0.04);color:var(--text-dim);
  border:1px solid var(--border-soft);
}
.pill-admin,.pill-active   {background:rgba(95,211,224,0.10);color:#a8eef5;border-color:rgba(95,211,224,0.30)}
.pill-revoked,.pill-danger {background:rgba(227,97,97,0.10);color:#f5a3a3;border-color:rgba(227,97,97,0.30)}
.pill-used,.pill-warning   {background:rgba(230,193,74,0.10);color:#f3d97f;border-color:rgba(230,193,74,0.30)}
.pill-safe                 {background:rgba(95,184,122,0.10);color:#9be2af;border-color:rgba(95,184,122,0.30)}

/* Status badges used in metric cards */
.status-badge,.badge-safe,.badge-warning,.badge-danger,.badge-deadly,.badge-unknown{
  display:inline-block;padding:.18rem .55rem;border-radius:999px;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.badge-safe   {background:rgba(95,184,122,0.10);color:#9be2af;border:1px solid rgba(95,184,122,0.25)}
.badge-warning{background:rgba(230,193,74,0.10);color:#f3d97f;border:1px solid rgba(230,193,74,0.25)}
.badge-danger {background:rgba(232,144,70,0.10);color:#f0b591;border:1px solid rgba(232,144,70,0.30)}
.badge-deadly {background:rgba(227,97,97,0.12);color:#f5a3a3;border:1px solid rgba(227,97,97,0.35)}
.badge-unknown{background:rgba(255,255,255,0.04);color:var(--text-faint);border:1px solid var(--border-soft)}

/* ---------- Empty state ---------- */
.empty,.no-data{
  background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius);padding:2.4rem 1.5rem;text-align:center;color:var(--text-dim);
}
.empty h2,.no-data h2{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-size:1.4rem;margin-bottom:.4rem;color:var(--text)}
.empty p,.no-data p{font-size:.9rem;max-width:42ch;margin:0 auto 1rem}
.no-data .fish{font-size:3rem;margin-bottom:1rem}

/* ---------- Auth/centered card layout ---------- */
.auth-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;
}
.auth-card{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:2.2rem 2rem;width:100%;max-width:400px;
  box-shadow:var(--shadow);text-align:center;
}
.auth-card .brand-mark{margin:0 auto .8rem}
.auth-card h1{
  font-family:var(--sans);font-weight:800;font-size:1.6rem;
  letter-spacing:-.025em;margin-bottom:.3rem;color:var(--text);
}
.auth-card h1 em{font-style:normal;color:var(--accent);font-weight:700}
.auth-card .lede{color:var(--text-dim);font-size:.88rem;margin-bottom:1.4rem}
.auth-card .form-group{text-align:left;margin-bottom:.85rem}
.auth-card .btn-primary{width:100%;padding:.75rem;font-size:.95rem}

/* ---------- Charts ---------- */
.chart-container{position:relative;height:300px}
.chart-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.chart-tab{
  padding:.42rem .85rem;border-radius:999px;
  font-size:.78rem;font-weight:600;font-family:inherit;
  border:1px solid var(--border);background:transparent;color:var(--text-dim);
  cursor:pointer;transition:all .15s;
}
.chart-tab:hover:not(.active){border-color:var(--accent-deep);color:var(--text)}
.chart-tab.active{background:var(--surface-2);color:var(--text);border-color:var(--accent-deep);box-shadow:0 0 0 1px var(--accent-deep) inset}

/* ---------- Legacy template overrides ----------
   Many older templates have their own .header / .login-card etc. inline.
   These rules retheme them without rewriting the markup.
*/
.header{
  background:rgba(6,20,29,0.72) !important;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border-soft) !important;
  padding:.95rem 1.4rem !important;
}
.header h1{
  font-family:var(--sans) !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
  font-size:1.3rem !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  color:var(--text) !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}
.header p{color:var(--text-faint) !important;font-size:.72rem !important;letter-spacing:.04em !important}
.header a{
  background:transparent !important;
  border:1px solid var(--border) !important;
  color:var(--text-dim) !important;
  border-radius:999px !important;
  font-size:.78rem !important;
  padding:.4rem .8rem !important;
  text-decoration:none;
}
.header a:hover{background:var(--surface) !important;color:var(--text) !important;border-color:var(--accent-deep) !important}

.tank-bar{
  background:transparent !important;
  border-bottom:1px solid var(--border-soft) !important;
  padding:.85rem 1.4rem !important;
  max-width:1180px;margin:0 auto;
}
.tank-bar-label{color:var(--text-faint) !important;font-size:.7rem !important;letter-spacing:.08em !important;text-transform:uppercase !important}

.ctx-bar{
  background:transparent !important;
  border-bottom:1px solid var(--border-soft) !important;
  color:var(--text-faint) !important;
  max-width:1180px;margin:0 auto;
  padding:.6rem 1.4rem !important;font-size:.78rem !important;
}
.ctx-bar select{
  background:var(--bg-1) !important;
  border:1px solid var(--border-soft) !important;
  color:var(--text) !important;
  border-radius:8px !important;
  padding:.35rem .6rem !important;
}
.ctx-bar a{color:var(--accent) !important;text-decoration:none !important;font-weight:600}

/* Old gradient btn-primary used by login/admin forms */
.btn-primary,.btn-login{
  background:var(--accent) !important;
  background-image:none !important;
  color:#03131c !important;
  border:none !important;
  font-weight:700;letter-spacing:-.01em;
  box-shadow:0 8px 18px -8px rgba(95,211,224,0.55);
  border-radius:10px !important;
}
.btn-primary:hover,.btn-login:hover{
  background:#7be0eb !important;
  color:#03131c !important;
  transform:translateY(-1px);
}

/* Old login-card */
.login-card{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow);
  padding:2.2rem 2rem !important;
}
.login-card h1{
  background:none !important;
  -webkit-text-fill-color:initial !important;
  background-clip:initial !important;
  -webkit-background-clip:initial !important;
  color:var(--text) !important;
  font-family:var(--sans) !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}

/* Old error / form styles */
.error{
  background:rgba(227,97,97,0.10) !important;
  color:#f5a3a3 !important;
  border:1px solid rgba(227,97,97,0.30);
  border-radius:8px;padding:.6rem .8rem;
}

/* Old "section" headers used cyan tint */
.section-header h2{color:var(--text-dim) !important}

/* Hide preview ribbon if any template still emits it */
.preview-ribbon{display:none !important}