/* Neurosteer Portal 2.0 — Modern Clinical SaaS */
:root {
  /* ── Brand ─────────────────────────────────── */
  --primary:      #155666;          /* navbar + structural chrome (brand logo teal) */

  /* ── Interactive ─────────────────────────────*/
  --accent:        #23768B;          /* links, active indicators */
  --accent-dark:   #114755;          /* hover / pressed / primary btn */
  --accent-soft:   #EDF6F8;          /* tint backgrounds, hover fills */
  --cta:           #ca3716;          /* header CTA (e.g. Start Session) */
  --cta-hover:     #ae3013;
  --cta-active:    #932810;

  /* ── Surfaces ────────────────────────────────*/
  --bg:          #F0F4F8;          /* page background */
  --surface:     #FFFFFF;          /* cards, tables, modals */

  /* ── Borders ─────────────────────────────────*/
  --border:      #DDE5ED;          /* standard borders */

  /* ── Text ────────────────────────────────────*/
  --text:        #0D1F30;          /* primary — near-black with cool tint */
  --muted:       #5B7285;          /* secondary — 5.3:1 on --bg ✓ WCAG AA */

  /* ── Status ──────────────────────────────────*/
  --danger:      #C8372A;
  --green:       #1A7A50;

  /* ── Shape ───────────────────────────────────*/
  --radius:      6px;

  /* ── Elevation ───────────────────────────────*/
  --shadow:      0 1px 3px rgba(13,31,48,0.07), 0 1px 2px rgba(13,31,48,0.04);
  --shadow-md:   0 4px 12px rgba(13,31,48,0.09), 0 2px 4px rgba(13,31,48,0.05);
  --shadow-lg:   0 16px 40px rgba(13,31,48,0.13), 0 6px 14px rgba(13,31,48,0.06);
  --scrim:       rgba(13,31,48,0.52);

  --nav-h:       60px;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;
  --font-sans:   Calibri, Candara, 'Segoe UI', Optima, system-ui, -apple-system, Arial, sans-serif;
  font-family:   var(--font-sans);
}

* { box-sizing: border-box; }

/* ── Sleek Custom Scrollbars Globally ─────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(91, 114, 133, 0.35);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 114, 133, 0.65);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Firefox compatibility */
* {
  scrollbar-width: thin;
  scrollbar-color: #B4C2CD transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); }
.muted { color: var(--muted); }
.sr-head { position: absolute; left: -9999px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ns-icon { pointer-events: none; }


/* ── Navbar ───────────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary);
  color: #fff;
  padding: 0 1rem; /* Consistent reduced padding on far left and far right */
  height: var(--nav-h);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(13,31,48,0.15);
}
.nav-left { display: flex; align-items: center; gap: 1rem; height: 100%; } /* Reduced gap right of logo */
.brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  line-height: 1.1;
  color: #fff;
  padding: 0.3rem 0;
  background: transparent;
  border: none;
  transition: opacity 0.2s;
}
.brand:hover { opacity: 0.85; }
.brand-title { font-weight: 700; font-size: 0.88rem; }
.brand-sub { font-size: 0.6rem; color: rgba(255,255,255,0.5); }
.nav-links { display: flex; gap: 16px; height: 100%; align-items: center; margin-left: 0; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: all 0.15s ease-out;
  letter-spacing: 0.01em;
}
.nav-links a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--accent);
  display: block;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.nav-links a.active {
  color: #fff;
  background: var(--accent);
  font-weight: 600;
  box-shadow: none;
}
/* Hide the vertical separator on the active item, and the item immediately preceding the active item */
.nav-links a.active::after,
.nav-links a:has(+ a.active)::after {
  display: none !important;
}

.nav-right { display: flex; align-items: center; gap: 0.65rem; }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(163, 196, 243, 0.35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  display: grid; place-items: center;
  transition: all 0.15s ease;
}
.icon-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(163, 196, 243, 0.6);
  transform: scale(1.05);
}
.link-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.55);
  cursor: pointer; font-size: 0.82rem;
  font-family: inherit;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  transition: color 0.12s;
}
.link-btn:hover { color: #fff; }

/* Hints toggle pill */
.hints {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  transition: all 0.2s ease;
}
.hints:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.hints input { display: none; }
.hints .switch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy easing for the dot */
}
.hints:has(input:checked) {
  background: rgba(32, 201, 151, 0.15);
  border-color: rgba(32, 201, 151, 0.5);
  color: #fff;
}
.hints:has(input:checked):hover {
  background: rgba(32, 201, 151, 0.25);
  border-color: rgba(32, 201, 151, 0.7);
}
.hints:has(input:checked) .switch {
  background: #20c997;
  box-shadow: 0 0 10px rgba(32, 201, 151, 0.6);
  transform: scale(1.4); /* Grows the dot without shifting layout */
}

/* User menu */
.user-menu { position: relative; }
.user-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none;
  color: rgba(255,255,255,0.85); cursor: pointer;
  padding: 0 0.25rem; border-radius: 6px;
  transition: opacity 0.15s;
  font-family: inherit;
}
.user-btn:hover { opacity: 0.8; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent);
  border: none;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 600; flex: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(13,31,48,0.3);
}
.user-name { font-size: 0.65rem; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.02em; }
.caret { display: none; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 12px);
  min-width: 250px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(221, 229, 237, 0.8);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(13,31,48,0.15), 0 4px 12px rgba(13,31,48,0.08);
  overflow: hidden;
  z-index: 100;
  animation: dropdown-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

@keyframes dropdown-fade-in {
  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.dropdown-head { padding: 0.75rem 1.25rem; background: linear-gradient(to bottom right, #f8faff, #ffffff); border-bottom: 1px solid var(--border); }
.dropdown-name { font-weight: 700; font-size: 1.05rem; color: var(--primary); letter-spacing: -0.01em; }
.dropdown-role { color: var(--accent); font-size: 0.75rem; margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.dropdown-org { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.dropdown-note { padding: 0.4rem 1rem; font-size: 0.75rem; color: var(--muted); background: var(--accent-soft); }
.dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 0.75rem 1.25rem;
  background: none; border: none;
  cursor: pointer; font-size: 0.9rem; font-weight: 500;
  color: var(--text); font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-item:hover { background: #f4f7fb; color: var(--accent-dark); padding-left: 1.6rem; }
.dropdown-danger { color: var(--danger); border-top: 1px solid #f0f4f8; }
.dropdown-danger:hover { background: #fff0f0; color: #b82b1f; padding-left: 1.25rem; }


/* ── Scope banner ─────────────────────────────────────────────────── */
.scope-banner {
  display: flex; align-items: center; gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.45rem 1rem;
  background: #eaf0f6;
  border-bottom: 1px solid #c8d6e5;
  font-size: 0.9rem;
}
@media (max-width: 700px) {
  .scope-banner { justify-content: space-between; }
}
.scope-org { font-weight: 700; font-size: 0.95rem; color: var(--primary); letter-spacing: -0.01em; padding-right: 2rem; }
.scope-sep, .scope-page { display: none; }
.scope-refresh { 
  color: var(--muted); font-size: 0.75rem; 
  font-family: var(--font-mono); 
  font-weight: 500;
}


/* ── Content / bare (login) ───────────────────────────────────────── */
.content { padding: 1.5rem 1.75rem; width: 100%; margin: 0 auto; }
.app.bare .navbar,
.app.bare .scope-banner { display: none; }
.app.bare .content { padding: 0; }
/* Embedded mode (?isEmbedded=true): white page background so it blends into
   the host app, instead of the default very-light-blue --bg. */
body.embedded { background: #fff; }
/* Match the white page in embedded mode: the TFD canvas wrapper (behind the
   heatmap plot) goes white too, matching the canvas plot background. */
body.embedded .tfd-canvas-wrap { background: #fff; }
/* Hide scrollbars in embedded mode (scrolling stays available) so nothing
   shows against the host app. Firefox: scrollbar-width; legacy Edge/IE:
   -ms-overflow-style; WebKit/Blink: the ::-webkit-scrollbar pseudo-element. */
/* The main viewport scrollbar is painted by the root <html>, which is not a
   descendant of body, so we reach it with :has(). Cover html, body and all
   inner scroll containers. */
html:has(body.embedded),
body.embedded,
body.embedded * { scrollbar-width: none; -ms-overflow-style: none; }
html:has(body.embedded)::-webkit-scrollbar,
body.embedded::-webkit-scrollbar,
body.embedded *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }


/* ── Page header ──────────────────────────────────────────────────── */
/* Top-level page identity bar — stays on brand teal to anchor the page visually */
.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 1.25rem;
  background: var(--primary);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.page-head h2 { margin: 0; flex: 1 1 220px; min-width: 220px; font-size: 1.05rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; text-transform: uppercase; }
.page-actions { display: flex; flex-shrink: 0; gap: 0.5rem; }


/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 24px;
}


/* ── Table sections ───────────────────────────────────────────────── */
/* The entire section is a unified card: header → content → footer.
   Navy bars replaced with clean white headers — biggest visual upgrade. */
.dash-section, .table-section { margin-bottom: 28px; }

.dash-section,
.table-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}
.section-head h3 { margin: 0; flex: 1 1 200px; min-width: 200px; font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; }
.section-head > .btn, .section-head > a.btn, .section-head > .search-input { flex-shrink: 0; }

/* Content section heads: teal chrome to match the app's primary brand color */
.dash-section .section-head,
.table-section .section-head {
  background: var(--primary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--primary);
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}
.dash-section .section-head h3,
.table-section .section-head h3 { color: #fff; }

/* Table wrap inside a section: no redundant border/shadow */
.dash-section .table-wrap,
.table-section .table-wrap { border: none; border-radius: 0; box-shadow: none; }

/* Search input on teal section head */
.dash-section .section-head .search-input {
  background-color: #fff;
  border-color: #fff;
  color: var(--text);
}
.dash-section .section-head .search-input::placeholder { color: #94a3b8; }
.dash-section .section-head .search-input:hover { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
.dash-section .section-head .search-input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
  background-color: #fff;
}

/* "N more rows" footer link */
.dash-more {
  display: block;
  padding: 10px 16px;
  background: #FAFBFD;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
a.dash-more { text-decoration: none; color: var(--accent-dark); font-weight: 500; }
a.dash-more:hover { background: var(--accent-soft); color: var(--accent); }
/* When a dash-more follows the table the table needs no bottom-radius */
.dash-section .table-wrap:has(+ .dash-more) { border-radius: 0; }
/* Fade the last visible row before 'more rows' */
.dash-section .table-wrap:has(+ .dash-more) tbody tr:last-child {
  opacity: 0.35;
}


/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0 14px;
  height: 36px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:hover { background: #F5F7FA; border-color: #C5D2DC; }
.btn:active { background: #EBF0F4; }

.btn--back {
  background: rgba(255, 255, 255, 0.1); /* Visible pill background by default */
  border-color: transparent;
  color: #fff; /* Bright white text by default */
  padding: 0 12px 0 8px; /* Slightly wider padding for the pill look */
  box-shadow: none;
  border-radius: 6px; /* Smooth rounded corners */
}
.btn--back:hover {
  background: rgba(255, 255, 255, 0.2); /* Brighter translucent highlight */
  border-color: transparent;
  color: #fff;
}
.btn--back .ns-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn--back:hover .ns-icon {
  transform: translateX(-3px); /* Snappy left slide on hover */
}

.btn--primary {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: 0 1px 2px rgba(13,31,48,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--primary:hover {
  background: #0F3D48;
  border-color: #0F3D48;
  box-shadow: 0 2px 5px rgba(13,31,48,0.18);
}
.btn--primary:active { background: #0B2E37; }

/* A header's one primary call-to-action (e.g. "Start Session") — needs to
   read as the strongest action on the page, not blend into the --primary
   (teal) chrome it usually sits on. Marked with an explicit .btn--cta
   modifier class (added in markup) rather than matched by container
   selector, so it never accidentally catches an unrelated .btn--primary
   (e.g. "+ Add patient") that happens to share the same header. #ca3716 is
   the same hue as the brand orange #f0512c, just a touch darker, so it
   clears WCAG AA with real margin (5.16:1 vs. the 4.5:1 minimum) while
   still reading as vivid brand orange rather than a muted terracotta. */
.btn--cta {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
  font-weight: 600;
  padding: 0 16px;
  box-shadow: var(--shadow);
}
.btn--cta::before {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  opacity: 0.9;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5v11l9-5.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5v11l9-5.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn--cta:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--cta:active {
  background: var(--cta-active);
  border-color: var(--cta-active);
  box-shadow: var(--shadow);
}
@media (max-width: 400px) {
  .page-head .btn--cta,
  .section-head .btn--cta {
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media (max-width: 550px) {
  .section-head > .search-input { flex: 1 1 100%; }
}

.btn--danger { background: var(--surface); color: var(--danger); border-color: #EAB8B4; }
.btn--danger:hover { background: #FEF2F2; border-color: #F5A09A; }

.btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 5px; gap: 4px; }
.btn:disabled { opacity: 0.48; cursor: not-allowed; box-shadow: none; }
.icon-disabled { opacity: 0.3; cursor: not-allowed !important; display: inline-block; }

/* On/Off connection toggle in the active-sessions Network column */
.ns-conn-group { display: inline-flex; gap: 2px; }
.ns-conn.is-active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }


/* ── Inputs ───────────────────────────────────────────────────────── */
.search-input, input[type="text"], input:not([type]), input[type="password"], input[type="email"], input[type="number"], input[type="date"], select, textarea, .form input, .login-card input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 38px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.search-input { 
  min-width: 240px; 
  padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='20' y1='20' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}

/* Custom Search Clear (X) Button */
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.15s ease;
}

.search-input::-webkit-search-cancel-button:hover {
  opacity: 1;
  transform: scale(1.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323768B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Ensure the X is always visible when there is text, even if not focused */
.search-input:not(:placeholder-shown)::-webkit-search-cancel-button {
  display: block;
}

/* Global hover effect */
.search-input:hover, input[type="text"]:hover, input:not([type]):hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="date"]:hover, select:hover, textarea:hover, .form input:hover, .login-card input:hover {
  border-color: #a3b2c2;
}

/* Global focus effect */
.search-input:focus, input[type="text"]:focus, input:not([type]):focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus, .form input:focus, .login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(35,118,139,0.12);
  background-color: #fff;
}




/* ── Toolbar ──────────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.toolbar-dates { display: flex; align-items: center; gap: 0.5rem; }
.toolbar-dates label, .toolbar-rows { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); }
.toolbar-rows { margin-left: auto; }
.toolbar--sticky {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: #eaf0f6;
  margin-bottom: 12px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}


/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 11px 16px; font-size: 13px; white-space: nowrap; }
.data-table td { font-size: 14px; }
.data-table thead th {
  background: #eaf0f6;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  position: sticky; top: 0;
  border-bottom: 1px solid var(--border);
}

/* Sessions-specific table header styling */
#s-table .data-table thead th {
  background: var(--primary);
  color: #fff;
  border-bottom: 1px solid var(--primary);
}
.data-table tbody tr { border-top: 1px solid var(--border); }
.row--link { cursor: pointer; }
.row--link:hover { background: #F5F7FA !important; }
.cell-link { color: var(--accent-dark); font-weight: 500; }
.cell-link:hover { color: var(--accent); text-decoration: underline; }
.icon-cell { 
  font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); border: 1px solid #B3E3EF; background: #fff;
  border-radius: 4px; width: 34px; height: 24px; transition: all 0.2s;
}
.icon-cell:hover { background: #E9F8FC; border-color: var(--accent); color: var(--accent-dark); }
.icon-disabled { opacity: 0.45; cursor: default; border-color: #d1d5db; color: #9ca3af; background: #f8fafc; }
.icon-disabled:hover { background: #f8fafc; border-color: #d1d5db; color: #9ca3af; }

/* Report button with a count badge (Sessions list). */
.report-btn,
.session-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  transition: color 0.15s ease;
  position: relative;
  vertical-align: middle;
}
.report-btn svg,
.session-btn svg {
  width: 100%;
  height: 100%;
  transition: transform 0.15s ease;
}
.report-btn:hover,
.session-btn:hover { color: var(--accent-dark); }
.report-btn:hover:not(.icon-disabled) svg,
.session-btn:hover:not(.icon-disabled) svg { transform: scale(1.15); }
.report-btn.icon-disabled,
.session-btn.icon-disabled { color: var(--muted); cursor: default; opacity: 0.45; border: none; background: transparent; }

.icon-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.5rem;
  min-width: 0.95rem;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 4px;
  line-height: 1.45;
  pointer-events: none;
}
.report-btn:hover .icon-badge { background: var(--accent-dark); }

/* ── Reports popup (dropdown anchored to the Sessions list Report button) ── */
.report-popup {
  position: fixed; z-index: 1000;
  min-width: 340px; max-width: min(92vw, 460px);
  background: var(--surface);
  border: 1px solid rgba(221, 229, 237, 0.9);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(13,31,48,0.16), 0 6px 14px rgba(13,31,48,0.08);
  overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.report-popup.open { opacity: 1; transform: translateY(0) scale(1); }
.report-popup-status { padding: 1.25rem 1rem; }
.report-popup-empty { color: var(--muted); font-size: 0.9rem; text-align: center; }

.report-popup-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.report-popup-table thead th {
  text-align: left; padding: 0.7rem 0.9rem 0.55rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); background: #fafbfc;
}
.report-popup-table tbody td {
  padding: 0.65rem 0.9rem; border-bottom: 1px solid #f0f3f7; vertical-align: middle;
}
.report-popup-table tbody tr:last-child td { border-bottom: none; }
.rp-name {
  font-weight: 600; color: var(--primary); max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-date { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.rp-actions { display: flex; align-items: center; gap: 0.35rem; justify-content: flex-end; }
.rp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.rp-icon:hover { background: var(--accent-soft); color: var(--accent-dark); }

.report-popup-footer { padding: 0.7rem 0.9rem 0.85rem; border-top: 1px solid var(--border); background: #fafbfc; }
.report-popup-footer .rp-zip { width: 100%; justify-content: center; }
.report-popup-footer .rp-zip[disabled] { opacity: 0.7; cursor: default; }

/* SVG sprite icons */
.ns-icon { display: inline-block; vertical-align: middle; flex: none; pointer-events: none; }


/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 0 7px;
  height: 20px;
  border-radius: 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.015em;
}
.role--super     { background: #EDE8FA; color: #5338A8; }
.role--admin     { background: #DDE9F7; color: #1A4E7C; }
.role--physician { background: #DBECF4; color: #1A6278; }
.role--clinician { background: #FEF3E2; color: #9A5C00; }
.state-badge--active       { background: #DCFAE8; color: #166534; }
.state-badge--done         { background: #F1F5F9; color: #475569; }
.state-badge--other        { background: #FEF9EC; color: #92400E; }
.state-badge--disconnected { background: #FEE2E2; color: #991B1B; margin-left: 0.5rem; }

/* Live run-time ticker for ongoing-session: tabular figures so the ticking digits don't jitter,
   prefixed by a pulsing green dot that flags the session as currently running. */
.runtime-live { display: inline-flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.4);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(22,163,74,0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(22,163,74,0);    }
  100% { box-shadow: 0 0 0 0   rgba(22,163,74,0);    }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.battery-cell { display: inline-flex; align-items: center; }
.battery-svg { display: block; }


/* ── Notices / state indicators ───────────────────────────────────── */
.notice {
  background: var(--accent-soft);
  border: 1px solid #C7F0FA;
  color: #1A677A;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  margin-bottom: 0.85rem;
}
.state { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); padding: 1.5rem 0; font-size: 0.9rem; }
.state--loading { justify-content: center; }
.state--empty { justify-content: center; text-align: center; padding: 2.5rem 1.5rem; line-height: 1.5; }
.state--error { color: var(--danger); }

.spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(35,118,139,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
  
.app-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh; width: 100%;
  background: var(--bg); color: var(--primary); gap: 1.5rem;
}
.app-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(35,118,139,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.app-loader-text {
  font-size: 1.05rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted);
  animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* ── Pagination ───────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.2rem; flex-wrap: wrap; gap: 0.5rem; }
.pager-summary { color: var(--muted); font-size: 0.8rem; }
.pager-controls { display: flex; gap: 3px; }
.pager-btn {
  min-width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
}
.pager-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: #C7F0FA; color: var(--accent-dark); }
.pager-btn.active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; font-weight: 600; }
.pager-btn:disabled { opacity: 0.35; cursor: default; }


/* ── Detail view ──────────────────────────────────────────────────── */
.detail { display: flex; flex-direction: column; gap: 0; max-width: 680px; margin-bottom: 1.25rem; padding: 0; }
.detail-row {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.85rem 1.25rem; /* Better horizontal breathing room since it touches the card edge now */
  border-bottom: 1px solid var(--border);
}
@media (min-width: 600px) {
  .detail-row { flex-direction: row; align-items: baseline; gap: 1.5rem; }
  .detail-key { flex: 0 0 160px; }
}
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.detail-val { font-size: 0.95rem; color: var(--text); word-break: break-word; }

.eeg-placeholder h3 { margin-top: 0; }

/* S1: 2-column metadata layout (Signal) */
.detail--2col { display: grid; grid-template-columns: 1fr; max-width: none; }
@media (min-width: 900px) {
  .detail--2col { grid-template-columns: 1fr 1fr; }
  .detail--2col .detail-row:nth-child(odd) { border-right: 1px solid var(--border); }
  
  /* If even number of items, both items on the last row have no bottom border.
     If odd number of items, only the last item (which spans both cols) has no bottom border. */
  .detail--2col .detail-row:last-child { border-bottom: none; }
  .detail--2col .detail-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* If odd number of items, the last item spans both cols and has no right border */
  .detail--2col .detail-row:last-child:nth-child(odd) { 
    grid-column: 1 / -1; 
    border-right: none; 
  }
}


/* ── Modal ────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--scrim);
  display: grid; place-items: center;
  z-index: 100; padding: 1rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  opacity: 1;
  visibility: visible;
}
.modal-overlay[hidden] {
  display: grid; /* Override browser default [hidden] */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.modal-card {
  background: var(--surface);
  border-radius: 16px;
  max-width: 720px; width: 100%;
  max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(13,31,48,0.12), 0 8px 16px rgba(13,31,48,0.06);
  overflow: hidden;
  border: 1px solid rgba(221, 229, 237, 0.8);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.modal-overlay:not([hidden]) .modal-card {
  animation: modal-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay[hidden] .modal-card {
  transform: scale(0.95) translateY(10px);
  opacity: 0;
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; text-transform: uppercase; }
.modal-head .icon-btn {
  border: none; color: var(--muted); background: transparent;
  width: 32px; height: 32px; border-radius: 8px;
}
.modal-head .icon-btn:hover {
  background: var(--accent-soft); color: var(--danger);
  transform: none; /* Fix the weird hover jitter */
}
.modal-body { padding: 1.25rem 1.5rem 1.5rem; font-size: 0.95rem; line-height: 1.6; color: #3f5261; min-height: 0; overflow-y: auto; }
.modal-body p { margin: 0 0 0.75rem; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-note { color: var(--muted); font-size: 0.85rem; }
.modal-card--sm { max-width: 420px; }
.modal-head-right { display: flex; align-items: center; gap: 0.6rem; }
.modal-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  background: #f8f9fc;
}

/* ── Icon Utilities ───────────────────────────────────────────────── */
.icon-rotate-90  { transform: rotate(90deg); }
.icon-rotate-180 { transform: rotate(180deg); }
.icon-rotate-270 { transform: rotate(270deg); }


/* ── Login ────────────────────────────────────────────────────────── */
.login-split-wrap {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg);
}

.login-split-left {
  flex: 1.2;
  margin: 0 120px 0 0;
  align-self: center;
  height: calc(100vh - 240px);
  max-height: 55vw;
  position: relative;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  border-radius: 0 32px 32px 0;
  box-shadow: var(--shadow-lg);
}

.split-image-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

@property --wipe-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.split-curtain {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 70%) no-repeat,
    radial-gradient(circle at top left, #205F6F 0%, var(--primary) 80%);
  background-size: 100% 100%, 100% 100%;
  background-position: 60% 60%, center;
  z-index: 1;
  --wipe-pos: 100%;
  -webkit-mask-image: linear-gradient(var(--curtain-angle, 90deg), black var(--wipe-pos), transparent var(--wipe-pos));
  mask-image: linear-gradient(var(--curtain-angle, 90deg), black var(--wipe-pos), transparent var(--wipe-pos));
}

.login-split-left.reveal-right { --curtain-angle: 90deg; }
.login-split-left.reveal-left { --curtain-angle: -90deg; }
.login-split-left.reveal-bottom { --curtain-angle: 180deg; }
.login-split-left.reveal-top { --curtain-angle: 0deg; }
.login-split-left.reveal-bottom-right { --curtain-angle: 135deg; }
.login-split-left.reveal-bottom-left { --curtain-angle: -135deg; }
.login-split-left.reveal-top-right { --curtain-angle: 45deg; }
.login-split-left.reveal-top-left { --curtain-angle: -45deg; }

/* The transition is only active when is-revealed is applied */
.login-split-left.is-revealed .split-curtain {
  --wipe-pos: 0%;
  transition: --wipe-pos 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.split-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(13, 31, 48, 0.5);
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease 0.3s;
}

.login-split-left.is-revealed .split-overlay {
  opacity: 1;
}

.split-text {
  position: relative;
  z-index: 3;
  text-align: center;
  animation: fadeUp 0.8s ease-out;
}

.split-text .heading {
  font-size: 2.5rem;
  font-weight: 300;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.split-text p {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
}

.login-split-right {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--bg);
}

.login-form-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-brand {
  text-align: center;
  margin-bottom: 2rem;
  animation: fadeUp 0.8s ease-out;
}

.login-logo {
  height: 48px;
  width: auto;
}

.login-card {
  width: 100%;
  display: flex; flex-direction: column; gap: 1.2rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(13, 31, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  padding: 40px;
  animation: fadeUp 0.8s ease-out 0.1s backwards;
}

.form-title { margin: 0; color: var(--primary); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.login-sub { color: var(--muted); font-size: 0.9rem; margin: -0.8rem 0 0.5rem; }
.login-card .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.login-card label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; color: var(--text); font-weight: 600; }
.login-card input[type="text"], .login-card input[type="password"] {
  height: 44px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 12px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}
.login-card input[type="text"]:hover, .login-card input[type="password"]:hover {
  border-color: #a3b2c2;
}
.login-card input[type="text"]:focus, .login-card input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(35,118,139,0.1), inset 0 2px 4px rgba(0,0,0,0.02);
}

.checkbox-group {
  flex-direction: row !important;
  align-items: center;
  margin-top: -0.2rem;
}
.fancy-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  cursor: pointer;
  font-size: 0.85rem !important;
}
.fancy-checkbox input { margin: 0; width: auto; height: auto; box-shadow: none; }

.error-label {
  color: var(--danger); font-size: 0.85rem;
  background: #FEF2F2; padding: 0.6rem 0.8rem; border-radius: 6px;
  border: 1px solid #FCA5A5;
  margin-bottom: 0.75rem;
}
/* .login-card already spaces its children via flex `gap` — an added
   margin here would double up the gap below the error box. */
.login-card .error-label { margin-bottom: 0; }

.login-btn {
  height: 46px; font-size: 1.05rem; border-radius: 8px; margin-top: 0.5rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(35, 118, 139, 0.25);
  width: 100%;
}
.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(35, 118, 139, 0.3);
}

.bottom-links {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.bottom-links a { color: var(--accent); font-weight: 500; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  .login-split-left { display: none; }
  .login-split-right { padding: 20px; }
}



/* ── Forms ────────────────────────────────────────────────────────── */
.form { max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.83rem; color: var(--muted); font-weight: 500; }


/* ── Start-session panel (Devices page) ───────────────────────────── */
/* No max-width here — this section only ever renders inside #ss-modal's
   .modal-card, which already caps the available width; an extra cap here
   just left unused space on the right of the modal. */
.start-session { margin-bottom: 1.25rem; }
.start-session .ss-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
.ss-step { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.83rem; color: var(--muted); margin-bottom: 1rem; font-weight: 500; }
.ss-step[hidden] { display: none; }
.start-session select { width: 100%; }
.radio-group { display: flex; gap: 1.25rem; padding: 0.2rem 0; }
.radio-group .radio { flex-direction: row; align-items: center; gap: 0.4rem; color: var(--text); }
.radio-group input[type="radio"] { width: auto; }
.ss-create { border: 1px solid #C7F0FA; border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; background: var(--accent-soft); }
.ss-create[hidden] { display: none; }
.ss-create-head { font-weight: 600; color: var(--text); margin-bottom: 0.75rem; font-size: 0.88rem; }
.ss-create .form-grid { margin-bottom: 0.75rem; }
.ss-create-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.ss-start { width: 100%; }
.ss-success { color: var(--accent-dark); font-size: 0.88rem; margin-bottom: 0.75rem; font-weight: 500; }
.ss-success[hidden], .start-session .error-label[hidden] { display: none; }


/* ── Time-frequency diagrams (BAF + Spectrogram) ─────────────────── */
/* TFD diagram heads intentionally keep their dark teal treatment —
   they visually bridge the light portal to the dark canvas below. */
.tfd-mount { margin-top: 1.25rem; }
.tfd { display: flex; flex-direction: column; gap: 1.25rem; }

/* Global controls bar (Segmented Pods) */
.tfd-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.tfd-toolbar-pod { 
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow);
}
.tfd-toolbar-pod--right { justify-content: flex-end; }
.tfd-toolbar-pod--right:has(#tfd-buffer[hidden]):has(#tfd-live[hidden]) { display: none !important; }

.tfd-toolbar-divider { width: 1px; height: 22px; background: var(--border); margin: 0 -0.25rem; opacity: 0.6; }

.tfd-event-nav { display: inline-flex; align-items: center; }
.tfd-event-nav-label { font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-right: 0.4rem; letter-spacing: 0.01em; }

@media (max-width: 900px) {
  .tfd-toolbar-divider { display: none; }
  .tfd-event-nav-label { display: none; }
  .tfd-spacer { display: none; }
  .tfd-toolbar { gap: 0.75rem; justify-content: center; }
  .tfd-toolbar-pod { justify-content: center; flex: 1 1 100%; }
  .tfd-buffer { text-align: center; }
}
.tfd-event-nav-row { display: inline-flex; align-items: center; gap: 0.3rem; }
.tfd-event-nav .btn { min-width: 1.9rem; padding: 0.25rem 0.4rem; font-size: 1rem; line-height: 1; text-align: center; }
.tfd-event-count { font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: center; }
.tfd-ctrl { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted); }
.tfd-ctrl select { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
.tfd-ctrl--slider { gap: 0.55rem; }
.tfd-slider { width: 130px; accent-color: var(--accent); cursor: pointer; }
.tfd-window-val { font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: right; }
.tfd-range { font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; background: var(--accent-soft); padding: 0.25rem 0.55rem; border-radius: 5px; }
.tfd-spacer { flex: 1 1 auto; }
.tfd-live { font-size: 0.78rem; font-weight: 700; color: var(--green); letter-spacing: 0.02em; }
.tfd-live--paused { color: var(--muted); }
.tfd-live--lost { color: var(--danger); }
.tfd-live[hidden] { display: none; }
.tfd-buffer {
  font-size: 0.78rem; font-weight: 600; color: var(--danger);
  background: #FEE2E2; border: 1px solid #FECACA;
  padding: 0.25rem 0.55rem; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.tfd-buffer[hidden] { display: none; }
.tfd-latest.tfd-btn--armed { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.tfd-latest[hidden] { display: none; }

/* Scrub bar: a light track whose dark thumb shows the visible window's size and
   position within the full session. Drag the thumb (or click the track) to move. */
.tfd-scrub {
  position: relative; height: 7px; border-radius: 999px;
  background: #D5DFE8; cursor: pointer; touch-action: none;
  margin: 0.9rem 0.1rem;
}
.tfd-scrub-thumb {
  position: absolute; top: 0; height: 100%; min-width: 8px;
  border-radius: 999px; background: #4A6180; cursor: grab;
}
.tfd-scrub--active { cursor: grabbing; }
.tfd-scrub--active .tfd-scrub-thumb { background: var(--accent); cursor: grabbing; }

/* Neuromarker overlay picker — a checkbox dropdown + legend of selected traces. */
.tfd-markers { position: relative; }
.tfd-markers-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.tfd-markers-count {
  background: var(--accent-dark); color: #fff; border-radius: 999px;
  font-size: 0.7rem; line-height: 1.1; padding: 0.05rem 0.4rem;
  min-width: 1.1rem; text-align: center;
}
.tfd-markers-count[hidden] { display: none; }
.tfd-markers-menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-md);
  padding: 0.4rem; min-width: 12.5rem; max-height: 17rem; overflow-y: auto;
  display: grid; gap: 0.15rem;
}
.tfd-markers-menu[hidden] { display: none; }

@keyframes tfd-menu-show {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tfd-markers-menu:not([hidden]) {
  animation: tfd-menu-show 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.tfd-marker-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.5rem; border-radius: 5px;
  font-size: 0.82rem; color: var(--text); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tfd-marker-item:hover { background: var(--accent-soft); }

.tfd-marker-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #a3b5c6;
  border-radius: 3.5px;
  background-color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.18s ease;
  margin: 0;
  outline: none;
  flex-shrink: 0;
}
.tfd-marker-item input[type="checkbox"]:hover {
  border-color: var(--accent);
}
.tfd-marker-item input[type="checkbox"]:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.tfd-marker-item input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.tfd-marker-item input[type="checkbox"]::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  top: 42%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.12s;
}
.tfd-marker-item input[type="checkbox"]:checked::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  opacity: 1;
}

.tfd-marker-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3.5px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}

.tfd-markers-actions {
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}
.tfd-marker-clear {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.35rem 0.5rem;
  border-radius: 5px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.tfd-marker-clear:hover {
  background: var(--accent-soft);
  color: var(--text);
}
.tfd-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.1rem 0.25rem; }
.tfd-legend[hidden] { display: none; }
.tfd-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Diagram card: border tinted by the `color` query param (20% opacity), teal fallback */
.tfd-diagram {
  border: 1.5px solid var(--tfd-border, color-mix(in srgb, var(--primary) 20%, transparent));
  border-radius: 16px;
  padding: 12px;
}

/* Diagram head: dark teal — stays dark (bridges portal to canvas) */
.tfd-diagram .section-head {
  background: var(--tfd-title-bg, var(--primary));
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 0;
  border: none;
}
.tfd-diagram .section-head h3 { color: #fff; font-size: 14px; }
.tfd-sub { color: #b9c7da; font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* Per-diagram controls (Zoom Time Window + Y zoom) live in the teal title bar,
   so their text/labels are light. Time-window sliders are synced across diagrams;
   each Y zoom slider zooms only its own diagram. */
.tfd-diagram-ctrls { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; justify-content: flex-end; }
.tfd-diagram-ctrls .tfd-ctrl { color: #b9c7da; }
.tfd-diagram-ctrls .tfd-slider { width: 104px; accent-color: var(--tfd-slider-accent, color-mix(in srgb, var(--primary) 40%, transparent)); }
.tfd-diagram-ctrls .tfd-window-val { color: #fff; min-width: 3.2rem; }

/* Canvas wrap: no outer border — canvas contrast provides the frame */
.tfd-canvas-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #F0F4F8;
  line-height: 0;
}
.tfd-canvas-wrap canvas { display: block; width: 100%; height: 380px; touch-action: none; cursor: grab; }
.tfd-canvas-wrap canvas.tfd-dragging { cursor: grabbing; }

/* On a portrait phone screen width is scarce, so reclaim the horizontal padding
   that squeezes the heatmap: let the diagram cards bleed out to the content
   edge (negative margin cancels .content's side padding) and drop their own
   side padding, so each canvas spans nearly the full viewport width. The
   renderer reads clientWidth and repaints on resize/rotate, so this needs no
   JS. Vertical padding and the rounded frame are kept. */
@media (orientation: portrait) and (max-width: 700px) {
  .tfd-diagram {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Hover crosshair tooltip — absolutely positioned over the canvas by JS. */
.tfd-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  display: block; min-width: 7.5rem; line-height: 1.35;
  background: rgba(13,17,23,0.92); color: #e6edf3;
  border: 1px solid #2b3442; border-radius: 6px;
  padding: 0.4rem 0.55rem; font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.tfd-tooltip[hidden] { display: none; }
.tfd-tip-row { display: flex; justify-content: space-between; gap: 1rem; }
.tfd-tip-row span { color: #8b98a5; }
.tfd-tip-row b { color: #fff; font-weight: 600; }

/* Contextual hints (shown only when the Hints toggle is on). */
.hint-mark {
  color: var(--accent);
  cursor: help;
  display: none;
  position: relative;
  margin-left: 0.3rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  vertical-align: -2px;
  background: transparent;
  border: none;
  padding: 0;
}
body.hints-on .hint-mark { display: inline-flex; align-items: center; }

@keyframes tooltip-fade {
  from { opacity: 0; margin-bottom: -5px; }
  to { opacity: 1; margin-bottom: 0; }
}



/* ── Responsive ───────────────────────────────────────────────────── */
/* Navbar Elements Visibility */
.mobile-logo { display: none; }
.desktop-logo { display: inline-block; height: 36px; width: auto; }
.burger-btn { display: none; }
.mobile-only-link { display: none; }
.desktop-only-link { display: inline-block; }
.nav-menu-overlay { display: flex; align-items: center; }

@media (max-width: 960px) {
  /* Navbar */
  .navbar {
    padding: 0 1rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .nav-left {
    flex: none;
    gap: 0.6rem; /* Reduced gap to move burger menu leftwards */
    flex-wrap: nowrap;
    height: 100%;
    align-items: center;
  }
  .desktop-logo { display: none; }
  .mobile-logo { 
    display: block; 
    height: 56px; /* Scaled down slightly */
    width: auto; 
    clip-path: inset(10% 0 10% 0);
    margin: -10px 0; /* Offset the unclipped transparent space */
  }

  /* Burger Menu */
  .burger-btn {
    display: flex;
    order: -1;
    background: transparent;
    border: none;
    color: #fff; /* Changed from var(--accent) to white for high visibility */
    cursor: pointer;
    padding: 0.25rem;
    align-items: center;
    justify-content: center;
    z-index: 200;
    position: relative;
    width: 36px;
    height: 36px;
  }
  .burger-btn svg {
    width: 28px;
    height: 28px;
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .burger-btn .burger-icon {
    opacity: 1;
    transform: rotate(0deg);
  }
  .burger-btn .close-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    color: #fff;
    display: block;
  }
  body.mobile-menu-open .burger-btn .burger-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
  }
  body.mobile-menu-open .burger-btn .close-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  .mobile-only-link { display: inline-block; }
  .desktop-only-link { display: none; }

  /* Creative Mobile Overlay */
  .nav-menu-overlay {
    position: fixed;
    top: var(--nav-h); /* Start exactly below the navbar */
    left: 0; right: 0; bottom: 0;
    background: rgba(13, 31, 48, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 0 2rem 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  body.mobile-menu-open .nav-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-menu-open {
    overflow: hidden;
  }

  /* Overlay Links */
  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    transform: translateY(-15px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
  }
  body.mobile-menu-open .nav-links {
    transform: translateY(0);
  }
  .nav-links a {
    font-size: 1.35rem;
    padding: 0.5rem 1rem;
    background: transparent !important;
  }
  .nav-links a.active {
    color: var(--accent);
  }
  .nav-links a:active {
    transform: scale(0.96);
    background: rgba(255,255,255,0.08) !important;
    border-radius: 8px;
    transition: transform 0.1s, background 0.1s;
  }
  .nav-links a::after { display: none !important; }
  
  #btn-disclaimers-mobile {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: auto; /* Push to bottom */
    transition: color 0.2s ease, text-shadow 0.2s ease;
    flex-shrink: 0;
  }
  #btn-disclaimers-mobile:hover,
  #btn-disclaimers-mobile:active {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  }

  /* Right Side (Help, Hints, Avatar) */
  .nav-right {
    width: auto;
    justify-content: flex-end;
    padding-bottom: 0;
    gap: 0.8rem;
  }
  .hints > span:not(.switch) { display: none; }
  
  /* Login */
  .login-split-left { display: none; }
  .login-split-right { padding: 2rem 1.5rem; }
  
  /* General Content */
  .content { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }

  /* 2: Toolbar layout adjustments */
  .toolbar--sticky {
    position: static;
  }
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }
  .toolbar-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    width: 100%;
  }
  .toolbar-dates label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    width: 100%;
  }
  .toolbar-dates label input {
    width: 100%;
  }
  .toolbar-dates button {
    width: 100%;
    height: 38px;
  }
  .toolbar-rows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: 0;
  }

  /* 4: Modals as Bottom Sheets */
  .modal-overlay {
    align-items: flex-end; padding: 0;
  }
  .modal-card {
    border-radius: 20px 20px 0 0;
    max-height: calc(100% - 1.5rem); /* Ensures it never clips under the address bar */
    display: flex; flex-direction: column;
    animation: modal-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .modal-body { overflow-y: auto; }
  @keyframes modal-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* 5: Pagination stacked */
  .pager {
    flex-direction: column; gap: 0.8rem; align-items: center; justify-content: center;
  }
  .pager-summary { text-align: center; width: 100%; }
  .pager-controls { display: flex; justify-content: center; width: 100%; }
}

/* Special fix for very short screens (landscape mobile) */
@media (max-width: 960px) and (max-height: 500px) {
  .nav-menu-overlay {
    justify-content: flex-start;
    overflow-y: auto;
  }
  .nav-links {
    margin-bottom: 4rem; /* Guarantee plenty of space between links and Disclaimers */
  }
}
/* Battery Cell Adjustments */
.battery-cell { display: inline-flex; align-items: center; height: 100%; min-height: 24px; vertical-align: middle; }
.battery-svg { margin: auto 0; display: block; }

/* ── Custom Select Dropdown Styles ──────────────────────────────── */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

button.custom-select-trigger {
  width: 100%;
  display: block;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7285' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.9rem;
}

button.custom-select-trigger:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 118, 139, 0.15);
}

button.custom-select-trigger:hover:not(:disabled) {
  background-color: var(--surface);
  color: var(--text);
}

button.custom-select-trigger:hover:not(:disabled):not(:focus) {
  border-color: var(--muted);
}

button.custom-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-select-popup {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 999999;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  transform-origin: center;
  padding: 0.4rem;
}

.custom-select-popup.open {
  display: grid;
  gap: 0.15rem;
  animation: popup-fade-in 0.15s ease-out forwards;
}

.custom-select-popup.closing {
  display: grid;
  gap: 0.15rem;
  animation: popup-fade-out 0.1s ease-in forwards;
}

.custom-select-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-select-item:hover {
  background-color: var(--accent-soft);
  color: var(--accent-dark);
}

.custom-select-item.selected {
  background-color: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

/* ── Custom Date & Time Picker Styles ───────────────────────────── */
.custom-dp-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

button.custom-dp-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.custom-dp-trigger:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 118, 139, 0.15);
}

button.custom-dp-trigger:hover:not(:disabled) {
  background-color: var(--surface);
  color: var(--text);
}

button.custom-dp-trigger:hover:not(:disabled):not(:focus) {
  border-color: var(--muted);
}

button.custom-dp-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.custom-dp-trigger.placeholder-text {
  color: var(--muted);
}

button.custom-dp-trigger svg {
  color: var(--muted);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.custom-dp-popup {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 9999;
  padding: 14px 14px 10px;
  display: none;
  flex-direction: column;
  user-select: none;
  font-family: inherit;
}

.custom-dp-popup.open {
  display: flex;
  transform-origin: center;
  animation: popup-fade-in 0.15s ease-out forwards;
}

.custom-dp-popup.closing {
  display: flex;
  transform-origin: center;
  animation: popup-fade-out 0.1s ease-in forwards;
}

.dp-content {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

/* Calendar Section */
.dp-calendar {
  width: 250px;
  min-width: 0;
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dp-title {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dp-month-year {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dp-arrows {
  display: flex;
  gap: 2px;
}

.dp-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none;
  cursor: pointer;
  color: var(--accent) !important;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background 0.15s ease;
  padding: 0;
}

.dp-arrow-btn svg {
  fill: var(--accent);
  flex-shrink: 0;
}

.dp-arrow-btn:hover {
  background: var(--accent-soft) !important;
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.dp-weekdays span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 0;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.dp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  cursor: pointer;
}

.dp-cell--empty {
  pointer-events: none;
}

.dp-cell-inner {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  color: var(--text);
  transition: background 0.12s;
}

.dp-cell:hover:not(.dp-cell--empty) .dp-cell-inner:not(.dp-cell-inner--selected) {
  background: var(--accent-soft);
}

.dp-cell-inner--selected {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.dp-cell-inner--today:not(.dp-cell-inner--selected) {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Clock Section */
.dp-clock {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dp-clock-hidden {
  display: none !important;
}

.tp-date-feedback {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  background: var(--accent-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  display: none;
  align-self: center;
}

.tp-date-feedback:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.dp-mobile-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  z-index: 10;
}

.dp-mobile-close:hover {
  background: transparent;
  color: var(--text);
}

.tp-time-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
}

.tp-time-seg {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  min-width: 44px;
  text-align: center;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.tp-time-seg--active {
  background: var(--accent);
  color: #ffffff;
}

.tp-time-seg:not(.tp-time-seg--active):hover {
  background: var(--bg);
  color: var(--text);
}

.tp-time-colon {
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1;
  padding: 0 2px;
  margin-bottom: 2px;
  user-select: none;
}

.tp-clock-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.tp-clock-svg {
  width: 160px;
  height: 160px;
  display: block;
}

.tp-ampm {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 12px;
  gap: 0;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
}

.tp-ampm-btn {
  padding: 0 !important;
  background: transparent !important;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted) !important;
  width: 44px;
  height: 30px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}

.tp-ampm-btn--active {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(35, 118, 139, 0.25);
}

.tp-ampm-btn:not(.tp-ampm-btn--active):hover {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* Picker Footer */
.dp-footer {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  width: 100%;
}

.dp-footer-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.dp-footer-btn:hover {
  background: var(--accent-soft);
}

.dp-footer-btn--set {
  background: var(--accent);
  color: #ffffff;
  padding: 5px 14px;
}

.dp-footer-btn--set:hover {
  background: var(--accent-dark);
}

.dp-footer-btn-back {
  display: none;
}

@media (max-width: 768px), (max-height: 550px) {
  .tp-date-feedback {
    display: inline-block;
  }

  .custom-dp-popup {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0;
    padding: 16px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
    z-index: 100000;
    overflow-y: auto;
  }

  .dp-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    gap: 0;
  }

  .dp-mobile-close {
    display: block;
  }

  .dp-calendar {
    width: 100%;
    max-width: 380px;
    transform: none;
    margin: auto;
  }

  .dp-clock:not(.dp-clock-hidden) {
    width: 100%;
    max-width: 380px;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    transform: none;
  }

  .dp-footer {
    flex-wrap: wrap;
    border-top: none;
    padding-top: 16px;
    justify-content: space-between;
  }
  
  .dp-footer-btn {
    font-size: 13px;
    padding: 10px 16px;
  }

  .custom-dp-popup.dp-phase-time .dp-calendar {
    display: none !important;
  }
  
  .custom-dp-popup.dp-phase-calendar .dp-clock {
    display: none !important;
  }
  
  .custom-dp-popup.dp-phase-time .dp-footer-btn-cancel {
    display: none;
  }
  
  .custom-dp-popup.dp-phase-time .dp-footer-btn-back {
    display: block;
  }

  @media (orientation: landscape) {
    .dp-clock:not(.dp-clock-hidden) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto;
      gap: 0.5rem 1rem;
      align-items: center;
      justify-items: center;
      max-width: 480px;
      margin: auto;
    }
    
    .tp-date-feedback {
      grid-column: 1 / -1;
      margin-bottom: 0.25rem;
    }
    
    .tp-time-display {
      grid-column: 1;
      grid-row: 2;
    }
    
    .tp-ampm {
      grid-column: 1;
      grid-row: 3;
      margin-top: 0;
    }
    
    .tp-clock-wrapper {
      grid-column: 2;
      grid-row: 2 / span 2;
      margin-top: 0;
    }
  }
}

/* Month/Year Picker Button */
.dp-month-year-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.dp-month-year-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Month/Year Grid */
.dp-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 0;
}

.dp-month-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  border-radius: 8px;
  transition: background 0.12s;
}

.dp-month-cell:hover:not(.dp-month-cell--selected) {
  background: var(--accent-soft);
}

.dp-month-cell--selected {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.dp-month-cell--today:not(.dp-month-cell--selected) {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.dp-month-cell--outside {
  color: var(--muted);
}

@keyframes popup-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popup-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Password Input Wrapper */
.password-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.password-wrapper input {
  padding-right: 36px !important;
  width: 100%;
}
.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.password-toggle-btn:hover {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}

/* ── Truncated Cells & Popovers ────────────────────────────────────────── */
.truncate-cell {
  max-width: 200px;
  display: block;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 2px 8px 2px 6px;
  border-left: 3px solid transparent;
  transition: border-color 0.25s, color 0.2s;
  border-radius: 2px;
  -webkit-user-select: none;
  user-select: none;
}

/* Only show interactive hover on cells that are actually truncated */
.truncate-cell.is-truncated {
  cursor: pointer;
}

.truncate-cell.is-truncated:hover {
  border-left-color: var(--accent);
  color: var(--accent-dark);
}

/* Prevent mobile tap from breaking truncation */
.truncate-cell:active,
.truncate-cell:focus {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  outline: none;
}

.hover-popover {
  position: absolute;
  z-index: 1000;
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 320px;
  word-wrap: break-word;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
  user-select: text;
}

.hover-popover.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hover-popover.pinned {
  border-width: 2px;
  border-color: rgba(255,255,255,0.35);
}