/* dashboard.css -- Shared base styles (Tether-matched dark theme, with light mode via [data-theme="light"]) */

/* ===== Self-hosted fonts ===== */
@font-face{
  font-family:'Inter';
  src:url('../fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ===== Theme tokens ===== */
:root{
  /* structural (not theme-dependent) */
  --radius:8px;
  --radius-lg:12px;

  /* surfaces */
  --bg:#0d1117;
  --bg-panel:#161b22;
  --bg-inset:#21262d;
  --border:#30363d;

  /* text */
  --fg:#c9d1d9;
  --fg-muted:#8b949e;
  --fg-subtle:#484f58;
  --fg-on-accent:#fff;
  --fg-emphasis:#e6edf3;

  /* accent / semantic */
  --accent:#58a6ff;
  --accent-emphasis:#1f6feb;
  --ok:#3fb950;
  --ok-emphasis:#238636;
  --ok-emphasis-hover:#2ea043;
  --warn:#d29922;
  --warn-strong:#db6d28;
  --warn-bright:#e3b341;
  --danger:#f85149;
  --purple:#bc8cff;
  --purple-alt:#d2a8ff;
  --purple-strong:#a371f7;
  --purple-emphasis:#6e40c9;
  --cyan:#39c5cf;
  --orange:#ffa348;
  --orange-alt:#f0883e;
  --info:#388bfd;

  /* badge / role-pill tints */
  --badge-muted-bg:rgba(139,148,158,.15);
  --badge-muted-bg-weak:rgba(139,148,158,.1);
  --badge-cyan-bg:rgba(56,166,213,.15);
  --badge-accent-bg:rgba(88,166,255,.15);
  --badge-accent-bg-weak:rgba(88,166,255,.1);
  --badge-danger-bg:rgba(248,81,73,.15);
  --badge-purple-bg:rgba(188,140,255,.15);
  --badge-purple-alt-bg:rgba(210,168,255,.15);
  --badge-warn-bg:rgba(210,153,34,.15);
  --badge-ok-bg:rgba(63,185,80,.15);
  --badge-orange-bg:rgba(255,163,72,.15);

  /* product badge tints (13% alpha, matches former hex+"22" suffix trick) */
  --product-badge-ok-bg:rgba(63,185,80,.13);
  --product-badge-accent-bg:rgba(88,166,255,.13);
  --product-badge-purple-bg:rgba(210,168,255,.13);
  --product-badge-orange-bg:rgba(240,136,62,.13);
  --product-badge-muted-bg:rgba(139,148,158,.13);

  /* weak tints (banners, warnings, focus rings) */
  --tint-danger:rgba(248,81,73,.1);
  --tint-ok:rgba(63,185,80,.1);
  --tint-warn:rgba(210,153,34,.1);
  --tint-accent:rgba(88,166,255,.2);
  --tint-accent-weak:rgba(88,166,255,.08);
  --tint-info:rgba(56,139,253,.1);

  /* surfaces (opaque, tinted panels) */
  --danger-surface-bg:#3d1820;
  --danger-surface-border:#da3633;
  --accent-surface-bg:#1c2333;

  /* misc */
  --btn-primary-border:rgba(240,246,252,.1);
  --overlay-bg:rgba(0,0,0,.6);
  --overlay-bg-strong:rgba(0,0,0,0.7);
  --shadow-color:rgba(0,0,0,.4);
}

[data-theme="light"]{
  /* surfaces */
  --bg:#f7f7fb;
  --bg-panel:#ffffff;
  --bg-inset:#eaeef2;
  --border:#e4e2ef;

  /* text */
  --fg:#1f2328;
  --fg-muted:#656d76;
  --fg-subtle:#8c959f;
  --fg-on-accent:#fff;
  --fg-emphasis:#2f2a5b;

  /* accent / semantic */
  --accent:#5a54a4;
  --accent-emphasis:#443d8f;
  --ok:#1a7f37;
  --ok-emphasis:#1a7f37;
  --ok-emphasis-hover:#2da44e;
  --warn:#9a6700;
  --warn-strong:#bc4c00;
  --warn-bright:#9a6700;
  --danger:#cf222e;
  --purple:#8250df;
  --purple-alt:#6639ba;
  --purple-strong:#8250df;
  --purple-emphasis:#8250df;
  --cyan:#1b7c83;
  --orange:#953800;
  --orange-alt:#953800;
  --info:#0969da;

  /* badge / role-pill tints */
  --badge-muted-bg:rgba(101,109,118,.15);
  --badge-muted-bg-weak:rgba(101,109,118,.1);
  --badge-cyan-bg:rgba(27,124,131,.15);
  --badge-accent-bg:rgba(90,84,164,.15);
  --badge-accent-bg-weak:rgba(90,84,164,.1);
  --badge-danger-bg:rgba(207,34,46,.15);
  --badge-purple-bg:rgba(130,80,223,.15);
  --badge-purple-alt-bg:rgba(102,57,186,.15);
  --badge-warn-bg:rgba(154,103,0,.15);
  --badge-ok-bg:rgba(26,127,55,.15);
  --badge-orange-bg:rgba(149,56,0,.15);

  /* product badge tints (13% alpha, matches former hex+"22" suffix trick) */
  --product-badge-ok-bg:rgba(26,127,55,.13);
  --product-badge-accent-bg:rgba(90,84,164,.13);
  --product-badge-purple-bg:rgba(102,57,186,.13);
  --product-badge-orange-bg:rgba(149,56,0,.13);
  --product-badge-muted-bg:rgba(101,109,118,.13);

  /* weak tints (banners, warnings, focus rings) */
  --tint-danger:rgba(207,34,46,.1);
  --tint-ok:rgba(26,127,55,.1);
  --tint-warn:rgba(154,103,0,.1);
  --tint-accent:rgba(90,84,164,.2);
  --tint-accent-weak:rgba(90,84,164,.08);
  --tint-info:rgba(9,105,218,.1);

  /* surfaces (opaque, tinted panels) */
  --danger-surface-bg:#fff0ef;
  --danger-surface-border:#cf222e;
  --accent-surface-bg:#eeeef6;

  /* misc */
  --btn-primary-border:rgba(31,35,40,.15);
  --overlay-bg:rgba(0,0,0,.4);
  --overlay-bg-strong:rgba(0,0,0,0.5);
  --shadow-color:rgba(140,149,159,.3);
}

/* ===== Reset & Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  min-height:100vh;
  transition:background .15s,color .15s;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Theme toggle ===== */
.theme-toggle-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--fg);
  padding:4px 8px;
  border-radius:var(--radius);
  font-size:13px;
  cursor:pointer;
  line-height:1;
  font-family:inherit;
}
.theme-toggle-btn:hover{border-color:var(--fg-muted)}

/* ===== Header ===== */
.header{
  padding:12px 24px 0 24px;
  border-bottom:1px solid var(--bg-inset);
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
}
.header-left{
  display:flex;
  align-items:center;
  gap:16px;
}
.header h1{
  color:var(--accent);
  font-size:1.4em;
  font-weight:600;
  white-space:nowrap;
}
.counts{display:flex;align-items:center;gap:12px}
.meta{color:var(--fg-muted);font-size:13px;white-space:nowrap}

/* ===== Nav ===== */
.nav{
  display:flex;
  gap:6px;
  padding:8px 0 0 0;
}
.nav a{
  display:inline-block;
  padding:5px 14px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:500;
  color:var(--fg);
  background:var(--bg-inset);
  border:1px solid var(--border);
  text-decoration:none;
  transition:background .15s,border-color .15s;
}
.nav a:hover{
  background:var(--border);
  text-decoration:none;
}
.nav a.active{
  background:var(--accent-emphasis);
  border-color:var(--accent-emphasis);
  color:var(--fg-on-accent);
}

/* ===== User Menu (Tether-style dropdown) ===== */
.user-menu{position:relative;display:inline-block}
.user-menu-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--fg);
  padding:4px 10px;
  border-radius:var(--radius);
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  font-family:inherit;
}
.user-menu-btn:hover{border-color:var(--fg-muted)}
.user-menu-caret{font-size:10px}
.user-menu-dropdown{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 4px);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  min-width:200px;
  z-index:100;
  box-shadow:0 8px 24px var(--shadow-color);
  padding:6px 0;
}
.user-menu-dropdown.active{display:block}
.user-menu-dropdown .menu-row{
  padding:6px 14px;
  font-size:13px;
  color:var(--fg-muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.user-menu-dropdown .menu-row select{
  background:var(--bg-inset);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2px 6px;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
}
.user-menu-dropdown .menu-link{
  display:block;
  padding:6px 14px;
  font-size:13px;
  color:var(--fg);
  text-decoration:none;
  cursor:pointer;
}
.user-menu-dropdown .menu-link:hover{
  background:var(--bg-inset);
  text-decoration:none;
}
.user-menu-dropdown .menu-divider{
  height:1px;
  background:var(--bg-inset);
  margin:4px 0;
}

/* ===== Refresh Controls ===== */
.refresh-controls{display:flex;align-items:center;gap:6px}
.refresh-controls select{
  background:var(--bg-inset);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3px 6px;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
}
.refresh-controls button{
  background:var(--bg-inset);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3px 8px;
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
}
.refresh-controls button:hover{border-color:var(--fg-muted)}

/* ===== Buttons ===== */
.btn{
  padding:6px 14px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,border-color .15s;
  line-height:1.4;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{
  background:var(--ok-emphasis);
  border-color:var(--btn-primary-border);
  color:var(--fg-on-accent);
}
.btn-primary:hover:not(:disabled){background:var(--ok-emphasis-hover)}
.btn-secondary{
  background:var(--bg-inset);
  border-color:var(--border);
  color:var(--fg);
}
.btn-secondary:hover:not(:disabled){background:var(--border);border-color:var(--fg-muted)}
.btn-danger{
  background:transparent;
  border-color:var(--border);
  color:var(--danger);
}
.btn-danger:hover:not(:disabled){background:var(--tint-danger);border-color:var(--danger)}
.btn-sm{padding:3px 10px;font-size:12px}

/* ===== Content ===== */
.content{width:100%;max-width:100%;margin:0 auto;padding:0 24px 32px}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse}
th,td{
  padding:8px 12px;
  text-align:left;
  border-bottom:1px solid var(--bg-inset);
  font-size:13px;
}
th{
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:11px;
  font-weight:600;
  color:var(--fg-muted);
  background:var(--bg-panel);
  position:sticky;
  top:0;
  white-space:nowrap;
  user-select:none;
}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--fg)}
th .sort-arrow{font-size:10px;margin-left:3px;color:var(--fg-subtle)}
th.sorted .sort-arrow{color:var(--accent)}

/* ===== Clickable summary cards (component filter) ===== */
.summary-cards{display:flex;gap:14px;padding:12px 0;flex-wrap:wrap}
.summary-card{background:var(--bg-panel);border:1px solid var(--bg-inset);border-radius:var(--radius-lg);padding:16px 22px;min-width:140px;flex:1}
.summary-card-label{font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.summary-card-value{font-size:28px;font-weight:700;line-height:1.2}
.summary-card-value.normal{color:var(--accent)}
.summary-card-value.good{color:var(--ok)}
.summary-card-value.bad{color:var(--danger)}
.summary-card-value.muted{color:var(--fg-muted)}
.summary-card.clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.summary-card.clickable:hover{border-color:var(--accent)}
.summary-card.clickable.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
tr:hover{background:var(--bg-panel)}

/* ===== Toolbar / Filter bar ===== */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 0;
  flex-wrap:wrap;
}
.toolbar select,.toolbar input[type="text"],.toolbar input[type="search"]{
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:5px 10px;
  font-size:13px;
  font-family:inherit;
}
.toolbar input[type="search"]{min-width:220px}
.toolbar .spacer{flex:1}

/* ===== Page Sections ===== */
.page-section{
  background:var(--bg-panel);
  border:1px solid var(--bg-inset);
  border-radius:var(--radius-lg);
  margin:20px 0;
  overflow:hidden;
}
.page-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--bg-inset);
}
.page-section-header h2{font-size:15px;font-weight:600;color:var(--fg)}
.page-section-body{padding:0}
.page-section-body.padded{padding:18px}

/* ===== Status dots (lifecycle) ===== */
.status-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  vertical-align:middle;
  margin-right:6px;
}
.status-dot.DISCOVERED{background:var(--fg-subtle)}
.status-dot.CONNECTED{background:var(--accent)}
.status-dot.PREPARED{background:var(--warn)}
.status-dot.ACTIVATION_QUEUE{background:var(--warn-strong)}
.status-dot.ACTIVE{background:var(--ok)}
.status-dot.PAUSED{background:var(--danger)}
.status-dot.DECOMMISSIONED{background:var(--bg-inset);border:1px solid var(--fg-subtle)}

/* status text color variants (for labels next to dots) */
.status-text.DISCOVERED{color:var(--fg-subtle)}
.status-text.CONNECTED{color:var(--accent)}
.status-text.PREPARED{color:var(--warn)}
.status-text.ACTIVATION_QUEUE{color:var(--warn-strong)}
.status-text.ACTIVE{color:var(--ok)}
.status-text.PAUSED{color:var(--danger)}
.status-text.DECOMMISSIONED{color:var(--fg-subtle)}

/* ===== Tether status dot ===== */
.tether-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:4px}
.tether-dot.connected{background:var(--ok)}
.tether-dot.disconnected{background:var(--danger)}
.tether-dot.unknown{background:var(--fg-subtle)}

/* ===== Role pills ===== */
.role-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}
.role-viewer{background:var(--badge-muted-bg);color:var(--fg-muted)}
.role-operator{background:var(--badge-cyan-bg);color:var(--cyan)}
.role-implementer{background:var(--badge-accent-bg);color:var(--accent)}
.role-platform_admin{background:var(--badge-danger-bg);color:var(--danger)}
.role-dbops_approver{background:var(--badge-purple-bg);color:var(--purple)}

/* ===== Modals ===== */
.modal-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--overlay-bg);
  z-index:200;
}
.modal-overlay.active{display:flex;align-items:center;justify-content:center}
.modal{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  max-width:500px;
  width:90%;
  max-height:80vh;
  overflow-y:auto;
}
.modal h2{font-size:17px;color:var(--fg);margin-bottom:14px}
.modal label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--fg-muted);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.modal input,.modal select,.modal textarea{
  width:100%;
  padding:7px 10px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--fg);
  font-size:14px;
  font-family:inherit;
  margin-bottom:12px;
}
.modal input:focus,.modal select:focus,.modal textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--tint-accent);
}
.modal textarea{resize:vertical;min-height:60px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* ===== Token display ===== */
.token-display{
  background:var(--bg);
  border:1px solid var(--ok-emphasis);
  padding:12px;
  border-radius:var(--radius);
  font-family:monospace;
  font-size:13px;
  color:var(--ok);
  word-break:break-all;
  margin:12px 0;
  user-select:all;
}
.copy-btn{
  background:var(--bg-inset);
  border:1px solid var(--border);
  color:var(--fg);
  padding:4px 12px;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:12px;
  font-family:inherit;
}
.copy-btn:hover{background:var(--border);border-color:var(--fg-muted)}
.token-warning{
  background:var(--tint-warn);
  border:1px solid var(--warn);
  border-radius:var(--radius);
  padding:8px 12px;
  font-size:12px;
  color:var(--warn);
  margin-top:8px;
}

/* ===== Error / Success banners ===== */
.error-banner{
  background:var(--tint-danger);
  border:1px solid var(--danger);
  color:var(--danger);
  padding:10px 24px;
  font-size:13px;
  display:none;
}
.error-banner.active{display:block}
.success-banner{
  background:var(--tint-ok);
  border:1px solid var(--ok);
  color:var(--ok);
  padding:10px 24px;
  font-size:13px;
  display:none;
}
.success-banner.active{display:block}

/* ===== Empty state ===== */
.empty-state{text-align:center;padding:48px 24px;color:var(--fg-muted)}
.empty-state p{font-size:14px}

/* ===== Loading indicator ===== */
.loading{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
  color:var(--fg-muted);
}
.loading::after{
  content:'';
  display:inline-block;
  width:18px;height:18px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  margin-left:8px;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Status bar (fixed bottom) ===== */
.status-bar{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--bg-panel);
  border-top:1px solid var(--bg-inset);
  padding:4px 24px;
  font-size:11px;
  color:var(--fg-subtle);
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:50;
}
.status-bar a{color:var(--accent);font-size:11px}

/* ===== Responsive ===== */
@media(max-width:768px){
  .header{padding:10px 14px 0 14px}
  .content{padding:0 14px}
  .header-top{flex-direction:column;gap:8px;align-items:flex-start}
  .toolbar{flex-direction:column;align-items:stretch}
  .page-section{margin:12px 0}
}

/* ===== Client Status - Health dots ===== */
.health-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.health-dot.healthy{background:var(--ok)}
.health-dot.warning{background:var(--warn)}
.health-dot.critical{background:var(--danger)}
.health-dot.unknown{background:var(--fg-subtle)}
.health-dot.not_configured{background:var(--bg-inset);border:1px solid var(--border)}

/* ===== Client Status - Component cells ===== */
.component-cell{font-size:0.85em;white-space:nowrap}
.component-cell .component-summary{color:var(--fg-muted);margin-left:2px}

/* ===== Client Status - Detail panel ===== */
.detail-panel{background:var(--bg-panel);border:1px solid var(--bg-inset);border-top:none}
.detail-panel td{padding:0}
.detail-tabs{display:flex;gap:0;border-bottom:1px solid var(--bg-inset);padding:0 16px}
.detail-tab{padding:8px 16px;color:var(--fg-muted);cursor:pointer;border-bottom:2px solid transparent;font-size:0.85em;user-select:none}
.detail-tab:hover{color:var(--fg)}
.detail-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.detail-content{padding:16px}
.detail-section{display:none}
.detail-section.active{display:block}

/* ===== Detail panel - Summary cards ===== */
.detail-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.detail-card{background:var(--bg);border:1px solid var(--bg-inset);border-radius:var(--radius);padding:12px}
.detail-card-label{color:var(--fg-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.detail-card-value{color:var(--fg);font-size:1.4em;font-weight:600;margin-top:4px}
.detail-card-value.healthy{color:var(--ok)}
.detail-card-value.warning{color:var(--warn)}
.detail-card-value.critical{color:var(--danger)}

/* ===== Detail panel - Inner tables ===== */
.detail-table{width:100%;border-collapse:collapse;font-size:0.85em}
.detail-table th{padding:8px;border-bottom:1px solid var(--bg-inset);text-align:left}
.detail-table td{padding:8px;border-bottom:1px solid var(--bg-panel);color:var(--fg)}
.detail-table tr:last-child td{border-bottom:none}

/* ===== Expandable row ===== */
.client-row{cursor:pointer}
.client-row:hover{background:var(--bg-panel)}
.client-row.expanded{background:var(--bg-panel)}