/* ============================================================
   BioAttend Pro — Material Design 3 + Bootstrap 5
   Theme: Deep Orange
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ── MD3 Colour Tokens ──────────────────────────────────────── */
:root {
  /* Primary — Deep Orange */
  --md-primary:          #ea580c;
  --md-primary-dark:     #c2410c;
  --md-primary-container:#ffedd5;
  --md-on-primary:       #ffffff;
  --md-on-primary-cont:  #431407;

  /* Secondary — warm slate */
  --md-secondary:        #78716c;
  --md-secondary-cont:   #f5f5f4;
  --md-on-secondary:     #ffffff;

  /* Surfaces */
  --md-surface:          #fafaf9;
  --md-surface-1:        #f5f5f4;
  --md-surface-2:        #e7e5e4;
  --md-surface-variant:  #d6d3d1;
  --md-on-surface:       #1c1917;
  --md-on-surface-var:   #44403c;
  --md-outline:          #78716c;
  --md-outline-var:      #d6d3d1;

  /* Semantic */
  --md-error:            #ba1a1a;
  --md-error-cont:       #ffdad6;
  --md-on-error:         #ffffff;

  --md-warning:          #92400e;
  --md-warning-cont:     #fef3c7;

  --md-success:          #166534;
  --md-success-cont:     #dcfce7;

  --md-info:             #1e40af;
  --md-info-cont:        #dbeafe;

  /* Elevation */
  --el-0: #ffffff;
  --el-1: #faf9f8;
  --el-2: #f5f4f2;
  --el-3: #efede9;

  /* Layout */
  --sidebar-w: 256px;
  --topbar-h:  64px;

  /* Typography */
  --font:      'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Roboto Mono', 'Consolas', monospace;

  /* Shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 28px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  --shadow-2: 0 2px 6px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-3: 0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);

  --transition: .2s cubic-bezier(.2,0,0,1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family:    var(--font);
  background:     var(--md-surface);
  color:          var(--md-on-surface);
  font-size:      14px;
  line-height:    1.5;
  margin:         0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────── */
.app-layout  { display: flex; min-height: 100vh; }
.app-main    { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.app-content { padding: 24px; flex: 1; }

/* ══════════════════════════════════════════════════════════════
   Navigation Drawer — flat, no shadows, underline hover
   Deep Orange accent on dark surface
   ══════════════════════════════════════════════════════════════ */

.nav-drawer {
  /*
   * Surface: neutral charcoal #20252c — no colour cast, completely neutral.
   * This means the orange accent (#ea580c / #fb923c) pops on its own terms
   * instead of fighting a warm brown or cold teal background.
   * Header band is one step darker for visual layering without being black.
   */
  --nav-bg:          #20252c;
  --nav-bg-raised:   #191d23;
  --nav-bg-item-hover:  rgba(255,255,255,.05);
  --nav-bg-item-active: rgba(234,88,12,.14);
  --nav-border:      rgba(255,255,255,.08);
  --nav-text:        #c9d1d9;    /* GitHub-style: readable grey-white         */
  --nav-text-dim:    rgba(201,209,217,.40);
  --nav-accent:      #ea580c;    /* Deep Orange 600 — same as app primary     */
  --nav-accent-lt:   #fb923c;    /* Orange 400 — lighter for icons/underlines */

  width:           var(--sidebar-w);
  background:      var(--nav-bg);
  position:        fixed;
  top: 0; left: 0;
  height:          100vh;
  display:         flex;
  flex-direction:  column;
  border-right:    1px solid var(--nav-border);
  overflow-y:      auto;
  overflow-x:      hidden;
  z-index:         100;
}

/* ── Header ──────────────────────────────────────────────────── */
.nav-drawer-header {
  padding:       20px 18px 14px;
  background:    var(--nav-bg-raised);
  border-bottom: 1px solid var(--nav-border);
  flex-shrink:   0;
}
.nav-drawer-logo {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 10px;
}
.nav-drawer-logo-mark {
  width:         40px; height: 40px;
  background:    var(--nav-accent);
  border-radius: 10px;
  display:       flex; align-items: center; justify-content: center;
  flex-shrink:   0;
}
.nav-drawer-logo-mark .material-icons {
  color:     #fff;
  font-size: 22px;
}
.nav-drawer-title {
  font-size:      15px;
  font-weight:    700;
  color:          #f0f6fc;
  letter-spacing: .005em;
  line-height:    1.2;
}
.nav-drawer-sub {
  font-size:  11px;
  color:      var(--nav-text-dim);
  margin-top: 2px;
}

/* Live chip */
.nav-live-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  background:     rgba(234,88,12,.12);
  color:          var(--nav-accent-lt);
  border:         1px solid rgba(234,88,12,.30);
  font-size:      9.5px;
  font-weight:    700;
  letter-spacing: .09em;
  padding:        4px 11px;
  border-radius:  20px;
  text-transform: uppercase;
}
.live-dot {
  width:         7px; height: 7px;
  background:    var(--nav-accent-lt);
  border-radius: 50%;
  flex-shrink:   0;
  animation:     livepulse 2s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.3); }
}

/* ── Section labels ──────────────────────────────────────────── */
.nav-section-label {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      9.5px;
  font-weight:    700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          var(--nav-text-dim);
  padding:        20px 18px 7px;
}
.nav-section-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--nav-border);
}

/* ── Nav items ───────────────────────────────────────────────── */
.nav-item {
  display:         flex;
  align-items:     center;
  gap:             0;
  padding:         0 12px;
  height:          42px;
  color:           var(--nav-text);
  font-size:       13px;
  font-weight:     400;
  letter-spacing:  .01em;
  border-radius:   8px;
  margin:          1px 8px;
  position:        relative;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .15s ease, color .15s ease;
}

/* Hover: subtle background lift, text brightens */
.nav-item:hover {
  background:      var(--nav-bg-item-hover);
  color:           #f0f6fc;
  text-decoration: none;
}

/* Active: orange-tinted pill + left accent bar */
.nav-item.active {
  background:  var(--nav-bg-item-active);
  color:       #ffffff;
  font-weight: 600;
}
/* Left accent bar — clear visual anchor for current page */
.nav-item.active::before {
  content:       '';
  position:      absolute;
  left:          0; top: 6px; bottom: 6px;
  width:         3px;
  background:    var(--nav-accent);
  border-radius: 0 3px 3px 0;
}

/* Remove old underline pseudo on ::after — replaced by pill+bar */
.nav-item::after { display: none; }

/* ── Icon box ────────────────────────────────────────────────── */
.nav-item .nav-icon-box {
  width:         30px; height: 30px;
  border-radius: 7px;
  display:       flex; align-items: center; justify-content: center;
  flex-shrink:   0;
  margin-right:  10px;
  transition:    background .15s ease;
}
.nav-item .nav-icon-box .material-icons {
  font-size:  18px;
  color:      rgba(201,209,217,.55);
  transition: color .15s ease;
}

/* Hover — icon brightens */
.nav-item:hover .nav-icon-box .material-icons {
  color: #c9d1d9;
}

/* Active — icon gets accent colour + tinted bg box */
.nav-item.active .nav-icon-box {
  background: rgba(234,88,12,.20);
}
.nav-item.active .nav-icon-box .material-icons {
  color: var(--nav-accent-lt);
}

.nav-item .nav-label { position: relative; }

/* ── Badge ───────────────────────────────────────────────────── */
.nav-badge {
  margin-left:   auto;
  background:    var(--md-error);
  color:         #fff;
  font-size:     9px;
  font-weight:   700;
  padding:       2px 6px;
  border-radius: 20px;
  min-width:     18px;
  text-align:    center;
}

/* ── Footer ──────────────────────────────────────────────────── */
.nav-drawer-footer {
  margin-top:    auto;
  padding:       14px 18px;
  border-top:    1px solid var(--nav-border);
  font-size:     11px;
  color:         var(--nav-text-dim);
  background:    var(--nav-bg-raised);
  line-height:   1.7;
  flex-shrink:   0;
}
.nav-drawer-footer strong {
  color:         #c9d1d9;
  display:       block;
  font-weight:   600;
  margin-bottom: 2px;
}
.nav-drawer-footer code {
  color:       var(--nav-accent-lt);
  font-family: var(--font-mono);
  font-size:   10px;
  background:  transparent;
}

/* ── Top App Bar ────────────────────────────────────────────── */
.top-app-bar {
  height:        var(--topbar-h);
  background:    var(--el-0);
  border-bottom: 1px solid var(--md-outline-var);
  display:       flex;
  align-items:   center;
  padding:       0 24px;
  gap:           16px;
  position:      sticky;
  top:           0;
  z-index:       50;
}
.top-app-bar-title { flex: 1; }
.top-app-bar-title h1 {
  font-size:   18px;
  font-weight: 500;
  color:       var(--md-on-surface);
  margin:      0;
  line-height: 1.2;
}
.top-app-bar-title p {
  font-size: 12px;
  color:     var(--md-outline);
  margin:    2px 0 0;
}
.top-app-bar-actions { display: flex; align-items: center; gap: 8px; }

.chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  height:        32px;
  padding:       0 12px;
  border-radius: var(--r-sm);
  border:        1px solid var(--md-outline-var);
  background:    var(--el-0);
  font-size:     13px;
  font-weight:   500;
  color:         var(--md-on-surface-var);
}
.chip .material-icons { font-size: 16px; }

.icon-btn {
  width:         40px; height: 40px;
  border-radius: 50%;
  border:        none;
  background:    transparent;
  display:       flex; align-items: center; justify-content: center;
  cursor:        pointer;
  color:         var(--md-on-surface-var);
  transition:    background var(--transition);
}
.icon-btn:hover { background: rgba(234,88,12,.08); color: var(--md-primary); }
.icon-btn .material-icons { font-size: 20px; }

/* ── Cards ──────────────────────────────────────────────────── */
.md-card {
  background:    var(--el-0);
  border-radius: var(--r-lg);
  border:        1px solid var(--md-outline-var);
  overflow:      hidden;
}
.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--md-surface-variant);
}
.card-title {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   14px;
  font-weight: 500;
  color:       var(--md-on-surface);
}
.card-title .material-icons {
  font-size: 20px;
  color:     var(--md-primary);
}
.card-body     { padding: 20px; }
.card-body.no-pad { padding: 0; }

/* ── Stat Grid ──────────────────────────────────────────────── */
.stat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   16px;
  margin-bottom:         24px;
}

/* ── Stat Cards — coloured with ghost icon ──────────────────── */
.stat-card {
  border-radius: var(--r-lg);
  border:        none;
  padding:       22px 20px 18px;
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--transition);
  color:         #fff;
}
.stat-card:hover { transform: translateY(-3px); }

/* Ghost icon bottom-right via data-icon attribute */
.stat-card::after {
  content:        attr(data-icon);
  font-family:    'Material Icons';
  font-size:      96px;
  line-height:    1;
  position:       absolute;
  bottom:         -12px; right: -8px;
  color:          rgba(255,255,255,.12);
  pointer-events: none;
  user-select:    none;
  transition:     opacity var(--transition), transform var(--transition);
}
.stat-card:hover::after { opacity: .2; transform: scale(1.08) rotate(-5deg); }

.stat-card-indicator { display: none; }

/* Colour variants */
.stat-card.primary   { background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); }
.stat-card.success   { background: linear-gradient(135deg, #15803d 0%, #16a34a 100%); }
.stat-card.warning   { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.stat-card.danger    { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
.stat-card.info      { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); }
.stat-card.secondary { background: linear-gradient(135deg, #374151 0%, #4b5563 100%); }

/* Content */
.stat-card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   12px;
}
.stat-card-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.75);
}
.stat-icon-wrap {
  width:         34px; height: 34px;
  border-radius: var(--r-sm);
  background:    rgba(255,255,255,.18);
  display:       flex; align-items: center; justify-content: center;
  flex-shrink:   0;
}
.stat-icon-wrap .material-icons { font-size: 17px; color: rgba(255,255,255,.9); }

.stat-value {
  font-size:      36px;
  font-weight:    600;
  color:          #fff;
  line-height:    1;
  margin-bottom:  10px;
  letter-spacing: -.02em;
  position:       relative;
  z-index:        1;
}
.stat-footer {
  font-size:   12px;
  color:       rgba(255,255,255,.75);
  display:     flex;
  align-items: center;
  gap:         6px;
  position:    relative;
  z-index:     1;
}
.stat-delta {
  display:       inline-flex;
  align-items:   center;
  gap:           2px;
  font-size:     11px;
  font-weight:   700;
  padding:       2px 7px;
  border-radius: var(--r-xs);
  color:         #fff;
}
.stat-delta.up   { background: rgba(255,255,255,.25); }
.stat-delta.down { background: rgba(0,0,0,.18); }
.stat-delta .material-icons { font-size: 12px; }

/* ── Data Tables ────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
}
.data-table thead th {
  background:     var(--md-surface-1);
  color:          var(--md-outline);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding:        12px 16px;
  border-bottom:  2px solid var(--md-outline-var);
  text-align:     left;
  white-space:    nowrap;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--md-surface-variant);
  transition:    background var(--transition);
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover      { background: var(--md-surface-1); }
.data-table td {
  padding:        13px 16px;
  color:          var(--md-on-surface);
  vertical-align: middle;
}
.data-table td.mono  { font-family: var(--font-mono); font-size: 12px; }
.data-table td.right { text-align: right; }

/* ── Person Cell ────────────────────────────────────────────── */
.person-cell { display: flex; align-items: center; gap: 12px; }
.avatar {
  width:         36px; height: 36px;
  border-radius: 50%;
  display:       flex; align-items: center; justify-content: center;
  font-size:     13px; font-weight: 500;
  color:         #fff;
  flex-shrink:   0;
}
.av-0{background:#c2410c} .av-1{background:#15803d} .av-2{background:#1d4ed8}
.av-3{background:#6d28d9} .av-4{background:#b45309} .av-5{background:#b91c1c}
.av-6{background:#0369a1} .av-7{background:#065f46} .av-8{background:#1e40af}
.av-9{background:#374151}
.person-name { font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.person-meta { font-size: 11px; color: var(--md-outline); margin-top: 1px; font-family: var(--font-mono); }

/* ── Status Chips ───────────────────────────────────────────── */
.status-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: var(--r-xl);
  font-size:     11px;
  font-weight:   500;
  white-space:   nowrap;
}
.status-chip .material-icons { font-size: 12px; }
.chip-success  { background: var(--md-success-cont);        color: var(--md-success); }
.chip-warning  { background: var(--md-warning-cont);        color: var(--md-warning); }
.chip-error    { background: var(--md-error-cont);          color: var(--md-error); }
.chip-info     { background: var(--md-info-cont);           color: var(--md-info); }
.chip-primary  { background: var(--md-primary-container);   color: var(--md-on-primary-cont); }
.chip-neutral  { background: var(--md-surface-2);           color: var(--md-on-surface-var); }

/* ── Timestamp Block ────────────────────────────────────────── */
.ts-block { display: flex; flex-direction: column; gap: 2px; }
.ts-time  { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.ts-unix  { font-family: var(--font-mono); font-size: 10px; color: var(--md-outline); }
.ts-empty { font-size: 12px; color: var(--md-outline-var); }

/* ── Duration Chip ──────────────────────────────────────────── */
.duration-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  background:    var(--md-primary-container);
  color:         var(--md-on-primary-cont);
  padding:       3px 10px;
  border-radius: var(--r-xl);
  font-size:     12px;
  font-weight:   500;
  font-family:   var(--font-mono);
}
.duration-chip .material-icons { font-size: 13px; }

/* ── Filter Bar ─────────────────────────────────────────────── */
.filter-bar {
  display:       flex;
  flex-wrap:     wrap;
  gap:           12px;
  padding:       16px 20px;
  background:    var(--md-surface-1);
  border-bottom: 1px solid var(--md-outline-var);
  align-items:   flex-end;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-label {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--md-outline);
}
.filter-input, .filter-select {
  height:        36px;
  padding:       0 12px;
  border:        1px solid var(--md-outline-var);
  border-radius: var(--r-xs);
  font-size:     13px;
  font-family:   var(--font);
  color:         var(--md-on-surface);
  background:    var(--el-0);
  outline:       none;
  transition:    border-color var(--transition);
  min-width:     130px;
}
.filter-input:focus, .filter-select:focus {
  border-color: var(--md-primary);
  box-shadow:   0 0 0 2px rgba(234,88,12,.15);
}
.filter-input::placeholder { color: var(--md-outline-var); }
.filter-actions { display: flex; gap: 8px; margin-left: auto; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-md {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  height:          36px;
  padding:         0 16px;
  border-radius:   var(--r-xl);
  font-size:       13px;
  font-weight:     500;
  font-family:     var(--font);
  border:          none;
  cursor:          pointer;
  transition:      background var(--transition);
  white-space:     nowrap;
  text-decoration: none;
  letter-spacing:  .01em;
}
.btn-md .material-icons { font-size: 16px; }
.btn-filled          { background: var(--md-primary); color: #fff; }
.btn-filled:hover    { background: var(--md-primary-dark); color: #fff; text-decoration: none; }
.btn-tonal           { background: var(--md-primary-container); color: var(--md-on-primary-cont); }
.btn-tonal:hover     { background: #fed7aa; color: var(--md-on-primary-cont); text-decoration: none; }
.btn-outlined        { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline-var); }
.btn-outlined:hover  { background: var(--md-primary-container); border-color: var(--md-primary); text-decoration: none; }
.btn-text            { background: transparent; color: var(--md-primary); }
.btn-text:hover      { background: var(--md-primary-container); text-decoration: none; }
.btn-sm              { height: 28px; padding: 0 12px; font-size: 12px; }

/* ── Code Box ───────────────────────────────────────────────── */
.code-box {
  background:    #1c1611;
  border-radius: var(--r-md);
  padding:       16px;
  font-family:   var(--font-mono);
  font-size:     12px;
  line-height:   1.8;
  color:         #d6cfc8;
  overflow-x:    auto;
  position:      relative;
}
.code-box .k { color: #fbbf24; }   /* key    — yellow */
.code-box .s { color: #86efac; }   /* string — green  */
.code-box .n { color: #fcd34d; }   /* number — yellow */
.code-box .b { color: #f9a8d4; }   /* bool   — pink   */
.copy-btn {
  position:      absolute;
  top:           10px; right: 10px;
  background:    rgba(255,255,255,.07);
  border:        1px solid rgba(255,255,255,.12);
  color:         #fbbf24;
  font-size:     11px;
  font-family:   var(--font);
  padding:       3px 10px;
  border-radius: var(--r-xs);
  cursor:        pointer;
  transition:    background var(--transition);
}
.copy-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination-bar {
  display:     flex;
  align-items: center;
  gap:         4px;
  padding:     14px 20px;
  border-top:  1px solid var(--md-surface-variant);
}
.page-info { margin-right: auto; font-size: 12px; color: var(--md-outline); }
.page-btn {
  min-width:       32px; height: 32px;
  padding:         0 6px;
  border-radius:   var(--r-xl);
  border:          none;
  background:      transparent;
  font-size:       13px;
  font-family:     var(--font);
  font-weight:     500;
  color:           var(--md-on-surface-var);
  cursor:          pointer;
  display:         flex; align-items: center; justify-content: center;
  transition:      background var(--transition);
  text-decoration: none;
}
.page-btn:hover    { background: var(--md-primary-container); color: var(--md-on-primary-cont); text-decoration: none; }
.page-btn.active   { background: var(--md-primary); color: #fff; }
.page-btn.disabled { opacity: .35; pointer-events: none; }
.page-btn .material-icons { font-size: 16px; }

/* ── Feed List ──────────────────────────────────────────────── */
.feed-list { display: flex; flex-direction: column; }
.feed-item {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       14px 20px;
  border-bottom: 1px solid var(--md-surface-variant);
  transition:    background var(--transition);
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover      { background: var(--md-surface-1); }
.feed-item.is-new     { animation: fadeSlideIn .35s ease; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feed-indicator {
  width:         10px; height: 10px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    3px;
}
.ind-checkin  { background: var(--md-success); }
.ind-checkout { background: var(--md-info); }
.ind-complete { background: var(--md-primary); }
.ind-error    { background: var(--md-error); }

.feed-body { flex: 1; min-width: 0; }
.feed-name { font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.feed-sub  { font-size: 11px; color: var(--md-outline); margin-top: 2px; }
.feed-ts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.ts-pill {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  padding:        6px 10px;
  border-radius:  var(--r-sm);
  border:         1px solid;
}
.ts-pill.in  { background: var(--md-success-cont); border-color: #bbf7d0; }
.ts-pill.out { background: var(--md-info-cont);    border-color: #bfdbfe; }
.ts-pill.dur { background: var(--md-primary-container); border-color: #fed7aa; display: flex; flex-direction: row; align-items: center; }
.ts-pill-label { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ts-pill.in  .ts-pill-label { color: var(--md-success); }
.ts-pill.out .ts-pill-label { color: var(--md-info); }
.ts-pill.dur .ts-pill-label { color: var(--md-primary); }
.ts-pill-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--md-on-surface); }
.ts-pill-raw { font-family: var(--font-mono); font-size: 10px; color: var(--md-outline); }

.feed-meta { flex-shrink: 0; text-align: right; }
.feed-time { font-size: 11px; color: var(--md-outline); font-family: var(--font-mono); margin-top: 4px; }

/* ── Progress Bar ───────────────────────────────────────────── */
.md-progress {
  height:        6px;
  background:    var(--md-surface-2);
  border-radius: 3px;
  overflow:      hidden;
  margin-top:    6px;
}
.md-progress-bar {
  height:        100%;
  background:    var(--md-primary);
  border-radius: 3px;
  transition:    width .5s ease;
}

/* ── Banners ────────────────────────────────────────────────── */
.md-banner {
  display:       flex;
  gap:           12px;
  padding:       12px 16px;
  border-radius: var(--r-sm);
  font-size:     13px;
  line-height:   1.5;
  margin-bottom: 16px;
  border-left:   4px solid;
}
.md-banner .material-icons { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.banner-info    { background: var(--md-info-cont);    border-color: var(--md-info);    color: var(--md-info); }
.banner-warning { background: var(--md-warning-cont); border-color: var(--md-warning); color: var(--md-warning); }
.banner-success { background: var(--md-success-cont); border-color: var(--md-success); color: var(--md-success); }
.banner-error   { background: var(--md-error-cont);   border-color: var(--md-error);   color: var(--md-error); }
.md-banner-body { color: var(--md-on-surface); }
.md-banner-body strong { color: inherit; }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 56px 24px; color: var(--md-outline); }
.empty-state .material-icons { font-size: 48px; opacity: .3; display: block; margin-bottom: 12px; }
.empty-title { font-size: 15px; font-weight: 500; color: var(--md-on-surface-var); margin-bottom: 6px; }
.empty-sub   { font-size: 13px; }

/* ── Bar Chart ──────────────────────────────────────────────── */
.bar-chart-wrap {
  display:     flex;
  align-items: flex-end;
  gap:         4px;
  height:      72px;
}
.bar-col   { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-bar   {
  width:         100%;
  background:    var(--md-surface-2);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  min-height:    4px;
  transition:    height .5s ease;
}
.bar-bar.is-today { background: var(--md-primary); }
.bar-label { font-size: 9px; color: var(--md-outline); font-weight: 500; text-transform: uppercase; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline-var); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }

/* ── Responsive ─────────────────────────────────────────────── */

/* Toggle button — hidden on desktop, shown on mobile */
.nav-toggle-btn {
  display: none;
}

/* Backdrop */
.nav-backdrop {
  display:     none;
  position:    fixed;
  inset:       0;
  background:  rgba(0,0,0,.5);
  z-index:     99;
  opacity:     0;
  transition:  opacity .25s ease;
}
.nav-backdrop.visible {
  display:  block;
  opacity:  1;
}

/* Close button inside drawer header — hidden on desktop */
.nav-close-btn {
  display:       none;
  margin-left:   auto;
  width:         32px; height: 32px;
  border-radius: 50%;
  border:        none;
  background:    rgba(255,255,255,.08);
  color:         rgba(255,255,255,.7);
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    background .15s ease;
  flex-shrink:   0;
}
.nav-close-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.nav-close-btn .material-icons { font-size: 18px; }

@media (max-width: 960px) {
  /* Show toggle + close buttons */
  .nav-toggle-btn { display: flex; }
  .nav-close-btn  { display: flex; }

  /* Drawer slides off-screen by default */
  .nav-drawer {
    transform:  translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index:    100;
  }

  /* Open state */
  .nav-drawer.open {
    transform: translateX(0);
  }

  /* Main area takes full width */
  .app-main { margin-left: 0; }

  /* Body scroll lock when drawer open */
  body.nav-open { overflow: hidden; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stat-grid      { grid-template-columns: 1fr; }
  .app-content    { padding: 16px; }
  .top-app-bar    { padding: 0 16px; }
  .filter-bar     { flex-direction: column; }
  .filter-actions { margin-left: 0; }
}

/* ── User Menu ───────────────────────────────────────────────── */
.user-menu-wrap {
  position: relative;
}
.user-avatar-btn {
  background:    none;
  border:        none;
  padding:       0;
  cursor:        pointer;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.user-avatar {
  width:         36px; height: 36px;
  border-radius: 50%;
  background:    var(--md-primary);
  color:         #fff;
  font-size:     14px;
  font-weight:   700;
  font-family:   var(--font);
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        2px solid var(--md-primary-container);
  transition:    border-color .15s;
}
.user-avatar-btn:hover .user-avatar {
  border-color: var(--md-primary);
}

.user-dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  min-width:     220px;
  background:    #fff;
  border:        1px solid var(--md-outline-var);
  border-radius: var(--r-md);
  overflow:      hidden;
  z-index:       200;
}
.user-dropdown.open { display: block; }

.user-dropdown-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     14px 16px;
  background:  var(--md-surface-1);
}
.user-dropdown-avatar {
  width:         38px; height: 38px;
  border-radius: 50%;
  background:    var(--md-primary);
  color:         #fff;
  font-size:     15px;
  font-weight:   700;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}
.user-dropdown-name  { font-size: 13px; font-weight: 600; color: var(--md-on-surface); }
.user-dropdown-email { font-size: 11px; color: var(--md-outline); margin-top: 1px; word-break: break-all; }

.user-dropdown-divider {
  margin:     0;
  border:     none;
  border-top: 1px solid var(--md-outline-var);
}
.user-dropdown-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         11px 16px;
  font-size:       13px;
  font-weight:     500;
  color:           var(--md-on-surface-var);
  text-decoration: none;
  transition:      background .13s;
}
.user-dropdown-item .material-icons { font-size: 18px; color: var(--md-outline); }
.user-dropdown-item:hover { background: var(--md-surface-1); text-decoration: none; }
.user-dropdown-logout { color: var(--md-error); }
.user-dropdown-logout .material-icons { color: var(--md-error); }
.user-dropdown-logout:hover { background: var(--md-error-cont); }

/* ── Auth page shared styles (used by login/otp/forgot/reset) ── */
.auth-wrap  { width: 100%; max-width: 420px; padding: 16px; }
.auth-card  { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--md-outline-var); overflow: hidden; }
.auth-header { background: var(--md-primary); padding: 32px; text-align: center; }
.auth-header .auth-logo {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.2);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.auth-header .auth-logo .material-icons { font-size: 28px; color: #fff; }
.auth-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.auth-sub   { font-size: 13px; color: rgba(255,255,255,.8); margin: 0; }