/* --- Admin layout ------------------------------------------------------- */

/* Container for the admin outlet */
#app { margin-top: 14px; }

/* Headings */
.admin-content { padding-top: 6px; }
.admin-content h2{
  font-size: 22px; margin: 8px 0 12px; font-weight: 700; color: var(--text);
}

/* Sub-tabs (“Users / Tenants / Keys”) */
.admin-tabbar{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px; }
.admin-tabbar :is(a,button).tab{ padding:6px 12px; }
.admin-tabbar :is(a,button).tab.active{
  background: var(--panel); border-color: var(--brand); color: var(--text);
}

/* --- Table (shared look for admin lists) -------------------------------- */

.admin-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow: var(--shadow-1);
}
.admin-table thead th{
  font-weight:600; color:var(--text-soft); background:var(--ui-2);
  padding:10px; text-align:left; border-bottom:1px solid var(--ui-3);
}
/* Ensure consistency across all drawer accordions */
.drawer-body .admin-table thead th{ font-weight:600; color:var(--text-soft); }
.admin-table tbody td{ padding:10px; border-top:1px solid var(--ui-3); color: var(--text); }
.admin-table td.pnl30, .admin-table td.tenant-pnl30{ background: inherit !important; }
.admin-table tbody tr:nth-child(odd){ background:var(--ui-1); }
/* Match main app hover tone */
.admin-table tbody tr:hover{ background: var(--ui-2h); }

/* Ensure PnL colors match main app even with admin table color defaults */
.admin-table .text-pos{ color: var(--ok) !important; }
.admin-table .text-neg{ color: var(--bad) !important; }

/* Make "Set limits" button stand out a bit more in dark theme */
:root:not([data-theme="light"]) .admin-table .row-actions [data-act="limits"],
:root:not([data-theme="light"]) .admin-table .row-actions [data-revoke],
:root:not([data-theme="light"]) .admin-table [data-revoke]{
  background: color-mix(in srgb, var(--brand) 22%, var(--elev-2));
  border-color: color-mix(in srgb, var(--brand) 70%, #000 30%);
  color: #dde6ff;
}
:root:not([data-theme="light"]) .admin-table .row-actions [data-act="limits"]:hover,
:root:not([data-theme="light"]) .admin-table .row-actions [data-revoke]:hover,
:root:not([data-theme="light"]) .admin-table [data-revoke]:hover{
  filter: brightness(1.08);
}

/* Light theme: make Revoke + Set limits blue */
[data-theme="light"] .admin-table .row-actions [data-act="limits"],
[data-theme="light"] .admin-table .row-actions [data-revoke],
[data-theme="light"] .admin-table [data-revoke]{
  background: color-mix(in srgb, var(--brand) 22%, #ffffff);
  border-color: var(--brand);
  color: #0B1220; /* readable on light */
}
[data-theme="light"] .admin-table .row-actions [data-act="limits"]:hover,
[data-theme="light"] .admin-table .row-actions [data-revoke]:hover,
[data-theme="light"] .admin-table [data-revoke]:hover{
  filter: brightness(0.98);
}

/* Sticky table headers for long lists */
.admin-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ui-2);
}

/* --- Drawer ------------------------------------------------------------- */

.drawer { position:fixed; inset:0; z-index:60; }
.drawer[hidden] { display:none; }

.drawer-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  backdrop-filter: blur(2px) saturate(0.95);
  -webkit-backdrop-filter: blur(2px) saturate(0.95);
  cursor:pointer; z-index:60;
}
@supports not (backdrop-filter: blur(2px)){ .drawer-scrim{ background:rgba(0,0,0,.55); } }

.drawer-panel{
  position:fixed; right:0; top:0; width:540px; max-width:100vw; height:100vh;
  background:var(--panel); box-shadow:-12px 0 24px rgba(0,0,0,.35);
  display:grid; grid-template-rows:auto 1fr; z-index:61;
}

/* Slightly wider drawer on larger screens */
@media (min-width:1100px){ .drawer-panel{ width:660px; } }  /* was 540/640 */
@media (min-width:1400px){ .drawer-panel{ width:720px; } }

.drawer-header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:12px 14px; border-bottom:1px solid var(--hairline);
}
.drawer-body{ padding:12px 14px; overflow:auto; }

/* KV grid */
.kv .kv-row{ display:grid; grid-template-columns:160px 1fr; gap:10px; padding:6px 0; }
.kv .k{ color:var(--text-soft); }
.kv .v ul.flat{ margin:0; padding-left:18px; }
.kv .k,.kv .v{ font-size:.95rem; line-height:1.4; }

/* Pills inside the drawer */
.pill{ display:inline-block; padding:2px 8px; border-radius:10px; border:1px solid var(--hairline); font-size:12px; }
.pill.good{ border-color: var(--buy); background: rgba(34,197,94,.12); }
.pill.danger{ border-color: var(--sell); background: rgba(239,68,68,.12); }
.pill.warn{ border-color:#8a6d00; background:rgba(255,193,7,.12); }
.pill.clickable{ cursor:pointer; }
.pill.clickable:hover{ filter:brightness(1.05); }

/* Clickable name in table */
.name-link{ cursor:pointer; }
.name-link:hover{ text-decoration:underline; }

/* Inline edit */
.editable-ready{ cursor:pointer; text-decoration:none; }
.editable-ready:hover{ text-decoration:underline; text-underline-offset:2px; filter:brightness(1.05); }
.pill.clickable{ cursor:pointer; }
.pill.clickable:hover{ text-decoration:underline; text-underline-offset:2px; }
.editable-ready[title]{ position:relative; }
.edit-input{
  width:100%; padding:4px 6px; border:1px solid var(--hairline);
  background:var(--panel); color:var(--text); border-radius:6px;
}

/* Small helpers */
.row-gap{ display:inline-flex; align-items:center; gap:.5rem; }
.tenant-link{ color:var(--text); text-decoration:none; }
.tenant-link:hover{ text-decoration:underline; }
.kv .roles-inline{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.kv .roles-inline .role-opt:first-child{ margin-left:0; }
.role-opt{ display:inline-flex; align-items:center; gap:.35rem; padding:2px 6px; border:1px solid var(--hairline); border-radius:8px; }
.role-opt input{ transform:translateY(1px); }
.pager{ display:flex; align-items:center; gap:.5rem; justify-content:flex-end; padding-top:.4rem; font-size:12.5px }

/* Drawer inline modal */
.drawer-modal-scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:4000}
.drawer-modal{
  position:fixed; z-index:4001; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(460px,calc(100vw - 24px)); background:var(--panel); border:1px solid var(--hairline);
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.45); display:grid; grid-template-rows:auto 1fr auto;
}
.drawer-modal-h{ padding:12px 14px; border-bottom:1px solid var(--hairline); font-weight:700 }
.drawer-modal-b{ padding:12px 14px; overflow:hidden }
.drawer-modal-l{ display:block; color:var(--text-soft); margin-bottom:6px }
.drawer-modal-i{ display:block; width:100%; max-width:100%; box-sizing:border-box; padding:8px; border:1px solid var(--hairline); background:var(--panel); color:var(--text); border-radius:8px }
.drawer-modal-f{ padding:10px 14px; border-top:1px solid var(--hairline); display:flex; justify-content:flex-end; gap:.5rem }

/* --- Accordion inside drawer ------------------------------------------- */

.drawer-body .accordion{ margin-top:6px; display:grid; gap:.5rem; }
.drawer-body .accordion .acc-item{ border:0; background:transparent; overflow:visible; }

.drawer-body .accordion .acc-h{
  all:unset; display:grid; grid-template-columns:160px 1fr; column-gap:10px;
  width:100%; padding:6px 0; cursor:pointer; align-items:center; font-size:.95rem; color:var(--text);
}
.drawer-body .accordion .acc-h .title{ grid-column:1; color:var(--text-soft); }
.drawer-body .accordion .acc-h .right{ grid-column:2; display:flex; align-items:center; gap:.5rem; width:100%; }
.drawer-body .accordion .acc-h .count{ font-variant-numeric:tabular-nums; color:var(--text); }
.drawer-body .accordion .acc-h .chev{ margin-left:auto; opacity:.7; transition:transform .15s ease; font-size:0; width:16px; display:inline-flex; align-items:center; justify-content:center; }
.drawer-body .accordion .acc-h .chev::before{ content:'\25B8'; /* ▸ */ font-size:14px; line-height:1; opacity:.8; }
.drawer-body .accordion .acc-h[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.drawer-body .accordion .acc-h[aria-expanded="true"] .chev::before{ content:'\25BE'; /* ▾ */ }

.drawer-body .accordion .acc-b{
  display:grid; grid-template-columns:160px 1fr; column-gap:10px; padding-top:4px; font-size:.95rem;
}
.drawer-body .accordion .acc-b[hidden]{ display:none; }
.drawer-body .accordion .acc-b .acc-spacer{ grid-column:1; }
.drawer-body .accordion .acc-b .acc-content{ grid-column:2; width:100%; }
.drawer-body .accordion .acc-b .table-wrap{ margin-top:8px; width:100%; }

/* --- Drawer accordion tables: layout & text behavior -------------------- */

.drawer-body .acc-content{ min-width:0; }                 /* grid child can shrink */
.drawer-body .table-wrap{ overflow-y:auto; overflow-x:hidden; max-height:50vh; }/* scrolling region */

.drawer-body .admin-table{ table-layout:auto; width:100%; }

/* STOP per-letter wrapping */
.drawer-body .admin-table thead th{
  white-space:nowrap;           /* keep headers on one line */
  word-break:keep-all;
  overflow-wrap:normal;
}
.drawer-body .admin-table tbody td{
  white-space:normal;           /* body cells may wrap */
  word-break:normal;
  overflow-wrap:break-word;     /* break long tokens only when needed */
  vertical-align:top;
}

/* --- Admin Logs ------------------------------------------------------------ */
.log-toolbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:6px 0 10px; }
.log-toolbar .btn.small{ padding:6px 10px; }
.log-view{
  white-space:pre-wrap; background:var(--panel); color:var(--text);
  padding:12px; height:60vh; overflow:auto; border:1px solid var(--border);
  border-radius:10px; box-shadow: var(--shadow-1);
}

/* keep tiny UI bits on a single line */
.drawer-body .admin-table .pill,
.drawer-body .admin-table .btn.small{ white-space:nowrap; }
.drawer-body .admin-table .btn.small.active{ outline:2px solid var(--accent); filter:brightness(1.05); }

/* right-aligned utility cell */
.drawer-body .admin-table td.right{ text-align:right; }

/* sticky headers & hover */
.drawer-body .admin-table thead th{ position:sticky; top:0; z-index:1; }
.drawer-body .admin-table tbody tr:hover{ background:var(--ui-2); }

/* --- Column widths (final, conflict-free) --------------------------------
   NOTE: Removed the earlier “proportional %” block to avoid clashes.     */

/* API Keys (Label | Prefix | Last used | Status | Actions) */
#acc-keys .admin-table{ table-layout:auto; width:100%; }

/* Label — allow wrapping but take less room */
#acc-keys .admin-table th:nth-child(1),
#acc-keys .admin-table td:nth-child(1){
  min-width:140px;               /* allow tighter label */
  white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:auto;
}

/* Prefix — fixed, compact, centered */
#acc-keys .admin-table th:nth-child(2),
#acc-keys .admin-table td:nth-child(2){
  width:110px; min-width:110px;
  white-space:nowrap; text-align:center; font-family:var(--mono);
}

/* Last used — slightly narrower */
#acc-keys .admin-table th:nth-child(3),
#acc-keys .admin-table td:nth-child(3){
  width:210px; min-width:210px;  /* was 240px */
  white-space:nowrap;
}

/* Status — smaller */
#acc-keys .admin-table th:nth-child(4),
#acc-keys .admin-table td:nth-child(4){
  width:76px; min-width:76px;    /* was 90px */
  white-space:nowrap;
}

/* Actions — a touch tighter, still right-aligned */
#acc-keys .admin-table th:nth-child(5),
#acc-keys .admin-table td:nth-child(5){
  width:110px; min-width:110px;  /* was 120px */
  white-space:nowrap; text-align:right;
}

/* Devices (Label | Device ID | Last seen) */
#acc-devices .admin-table{ table-layout:auto; width:100%; }
#acc-devices .admin-table th:nth-child(1),
#acc-devices .admin-table td:nth-child(1){
  min-width:220px; white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:auto;
}
#acc-devices .admin-table th:nth-child(2),
#acc-devices .admin-table td:nth-child(2){
  width:260px; min-width:220px; white-space:nowrap; font-family:var(--mono);
}
#acc-devices .admin-table th:nth-child(3),
#acc-devices .admin-table td:nth-child(3){
  width:220px; min-width:180px; white-space:nowrap;
}

/* --- Interop with main app routing ------------------------------------- */
#spa-main[hidden]{ display:none !important; }
#app.admin{ display:block; }
#app[hidden]{ display:none !important; }

/* Accordion body spans full width (no left spacer) */
.drawer-body .accordion .acc-b{ grid-template-columns:1fr; }
.drawer-body .accordion .acc-b .acc-content{ grid-column:1 / -1; width:100%; }
.drawer-body .accordion .acc-b .acc-spacer{ display:none; }

/* Keep layout stable when a vertical scrollbar shows up */
.drawer-body .table-wrap{
  /* Vertical scrolling only to avoid horizontal bars in drawers */
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-height: 50vh;
  padding-right: 6px;
}

/* Compact sizing in drawer tables */
.drawer-body .admin-table{ font-size:13px; }
.drawer-body .admin-table thead th,
.drawer-body .admin-table tbody td{ padding:6px 10px; }

/* --- Tighten visual gaps between specific columns --------------------- */
/* API Keys */
#acc-keys .admin-table th:nth-child(1),
#acc-keys .admin-table td:nth-child(1){
  padding-right: 6px;
  min-width: 120px; /* tighter label like /me */
  white-space: normal; word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
}

#acc-keys .admin-table th:nth-child(2){
  padding-left: 6px; padding-right: 6px; /* Prefix header */
  width: 84px; min-width: 80px;
  text-align: center;
}
#acc-keys .admin-table td:nth-child(2){
  padding-left: 6px; padding-right: 6px; /* Prefix cells */
  width: 84px; min-width: 80px; /* compact */
  text-align: center; font-family: var(--mono);
}

#acc-keys .admin-table th:nth-child(3),
#acc-keys .admin-table td:nth-child(3){
  padding-right: 6px; /* Last used */
  width: 170px; min-width: 160px;
  white-space: nowrap;
}

#acc-keys .admin-table th:nth-child(4),
#acc-keys .admin-table td:nth-child(4){
  padding-left: 6px; /* Status */
  width: 64px; min-width: 62px;
  white-space: nowrap;
}

#acc-keys .admin-table th:nth-child(5),
#acc-keys .admin-table td:nth-child(5){
  width: 170px; min-width: 160px; /* room for two buttons */
  white-space: nowrap; text-align: right;
}

/* Optional: slightly tighter buttons in the Actions column */
.drawer-body .admin-table .btn { padding: 4px 9px; }

/* Mirror the same spacing on the /me drawer's API Keys table */
#me-acc-keys .admin-table th:nth-child(1),
#me-acc-keys .admin-table td:nth-child(1){
  padding-right: 6px;
  min-width: 120px;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
}
#me-acc-keys .admin-table th:nth-child(2){
  padding-left: 6px; padding-right: 6px; text-align:center; width:84px; min-width:80px;
}
#me-acc-keys .admin-table td:nth-child(2){
  padding-left: 6px; padding-right: 6px; text-align:center; width:84px; min-width:80px; font-family: var(--mono);
}
#me-acc-keys .admin-table th:nth-child(3),
#me-acc-keys .admin-table td:nth-child(3){
  padding-right: 6px; white-space:nowrap; width:170px; min-width:160px;
}
#me-acc-keys .admin-table th:nth-child(4),
#me-acc-keys .admin-table td:nth-child(4){
  padding-left: 6px; white-space:nowrap; width:64px; min-width:62px;
}
#me-acc-keys .admin-table th:nth-child(5),
#me-acc-keys .admin-table td:nth-child(5){
  text-align:right; white-space:nowrap; width:170px; min-width:160px;
}

/* Devices (same idea: bring columns closer) */
#acc-devices .admin-table th:nth-child(1),
#acc-devices .admin-table td:nth-child(1){ padding-right: 8px; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }  /* Label wraps */

#acc-devices .admin-table th:nth-child(2){
  padding-left: 8px;  /* Device ID header */
  padding-right: 8px;
  width: 200px;       /* bring closer to Label */
  min-width: 180px;
  white-space: nowrap;
}
#acc-devices .admin-table td:nth-child(2){
  padding-left: 8px;  /* Device ID cells */
  padding-right: 8px;
  width: 200px;       /* bring closer to Label */
  min-width: 180px;
  white-space: nowrap;
  font-family: var(--mono);
}

#acc-devices .admin-table th:nth-child(3),
#acc-devices .admin-table td:nth-child(3){
  padding-left: 8px;  /* Last seen */
  width: 180px;       /* shift left a bit */
  min-width: 180px;
  white-space: nowrap;
}
/* Highlight active range button in PnL filters */
.btn.small.active{ outline:2px solid var(--accent); filter:brightness(1.05); }

/* --- Drawer close buttons: force consistent icon ------------------------ */
/* Some builds introduced bad encoding for the close glyph. Replace the
   inner text with a CSS-rendered × using a Unicode escape so encoding is
   irrelevant. */
.drawer-header .btn#drawer-close,
.drawer-header .btn#tenant-drawer-close,
.drawer-header .btn#me-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; font-size:0; line-height:0;
}
.drawer-header .btn#drawer-close::before,
.drawer-header .btn#tenant-drawer-close::before,
.drawer-header .btn#me-close::before{
  content: "\00D7"; /* × */
  font-size:16px; line-height:1; color:var(--text);
}
.drawer-body .admin-table .row-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }