/* layout.css — shell, header, stat cards, panel, tabs */

.shell {
  width: min(1280px, calc(100% - 32px));
  padding: 18px 0 40px;
  margin: 0 auto;
  animation: fadeIn var(--tr-slow) both;
}

/* ── Header ────────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 10px 16px;
  border-radius: var(--rad2);
  background: var(--bg-glass);
  border: 1px solid var(--bg3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 10px;
  z-index: 60;
  animation: fadeUp var(--tr-slow) both;
}

.brand { display: flex; align-items: center; gap: 10px; }

/* Animated logo mark: rotating ring + steady core */
.brand-mark {
  width: 30px; height: 30px;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
}
.brand-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: conic-gradient(from 0deg, var(--acc), var(--cyan), var(--acc2), var(--acc));
  animation: spin 7s linear infinite;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  background: var(--bg2);
}
.brand-mark span {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--acc3);
}

header h1 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.4px;
  white-space: nowrap;
}
header h1 b { color: var(--fg); font-weight: 700; }
header h1 span {
  background: linear-gradient(92deg, var(--acc2), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
header h1 i {
  font-style: normal;
  font-size: .62rem;
  font-family: var(--mono);
  color: var(--fg3);
  border: 1px solid var(--bg4);
  padding: 1px 5px;
  border-radius: 5px;
  margin-left: 6px;
  vertical-align: 2px;
}

.hdr-r { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ── HME scheduler status control ─────────────────────────── */
.sched-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(39, 48, 74, .9), rgba(24, 30, 49, .96));
  border: 1px solid rgba(108, 126, 167, .38);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-size: .71rem;
  font-weight: 600;
  color: var(--fg2);
  cursor: pointer;
  user-select: none;
  transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr);
  white-space: nowrap;
}
.sched-pill::before {
  content: none;
}
.sched-pill:hover {
  background: linear-gradient(180deg, rgba(54, 65, 96, .98), rgba(35, 43, 68, .98));
  border-color: rgba(129, 140, 248, .62);
  color: var(--fg);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .26), 0 0 0 2px rgba(99, 102, 241, .1);
  transform: translateY(-1px);
}
.sched-pill:active { transform: translateY(0) scale(.98); }
.sched-pill.on {
  color: #d1fae5;
  background: linear-gradient(180deg, rgba(6, 95, 70, .72), rgba(5, 70, 52, .8));
  border-color: rgba(52, 211, 153, .62);
  box-shadow: 0 3px 12px rgba(16, 185, 129, .18), inset 0 1px 0 rgba(167, 243, 208, .1);
}
.sched-pill.on::before {
  color: #a7f3d0;
  background: rgba(52, 211, 153, .16);
}
.sched-pill.on:hover {
  background: linear-gradient(180deg, rgba(6, 120, 88, .82), rgba(5, 85, 62, .9));
  border-color: rgba(110, 231, 183, .82);
  box-shadow: 0 5px 16px rgba(16, 185, 129, .25), 0 0 0 2px rgba(52, 211, 153, .1);
}

/* ── Stat cards ────────────────────────────────────────────── */

/* ── Success-rate report modal ─────────────────────────────── */

.stats-summary {
  font-size: .78rem;
  color: var(--fg2);
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--rad);
  background: var(--bg3);
  border: 1px solid var(--bg4);
}
.stats-summary b.ok   { color: var(--g); }
.stats-summary b.run  { color: var(--y); }
.stats-summary b.fail { color: var(--r); }
.stats-summary .ok   { color: var(--g); }
.stats-summary .fail { color: var(--r); }

.stats-tbl { width: 100%; border-collapse: collapse; font-size: .74rem; }
.stats-tbl th {
  text-align: left;
  padding: 7px 9px;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg3);
  border-bottom: 1px solid var(--bg4);
  white-space: nowrap;
}
.stats-tbl td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--bg3);
  white-space: nowrap;
}
.stats-tbl td.z { color: var(--fg3); }
.stats-tbl tr:hover td { background: rgba(99, 102, 241, .05); }

/* ── Panel + tabs ──────────────────────────────────────────── */

.main-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }

.panel {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--rad3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  overflow: hidden;
  animation: fadeUp var(--tr-slow) .1s both;
}

.tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 12px 0;
  background: #0f1320;
  border-bottom: 1px solid var(--bg3);
}

/* Queue & Running live in a fixed zone that never scrolls; every other tab
   lives in .tabs-scroll so the rest of the bar scrolls horizontally on
   narrow screens without ever hiding these two. */
.tabs-fixed {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.tabs-scroll {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }

/* The Seller Area is a workspace, not one more account grid: while it is open the
   account strip goes away (`store-mode` is toggled by `switchTab`) so the shop's
   own section strip is the only navigation on screen. It has no strip tab of its
   own, so the profile dropdown is the door in and out — and it swaps which of its
   two entries it draws (`#nav-seller` / `#nav-console`), which is why hiding the
   strip is safe rather than a dead end.

   The `>` matters: the shop's section strip is the same `.tabs` class, nested one
   level deeper inside its body, and only the console's own strip — a direct child
   of `.panel` — is the one that goes away. Written as a descendant selector this
   rule would hide the shop's navigation along with it.

   The two entries are `display: none` by rule rather than by inline style so that
   `applyRole()` — which writes `style.display` for every `[data-admin-only]` — can
   still hide both from a non-admin without fighting the area switch: it clears the
   inline style for an admin, and these rules decide from there. */
.shell.store-mode .panel > .tabs { display: none; }
#nav-console { display: none; }
.shell.store-mode #nav-console { display: flex; }
.shell.store-mode #nav-seller { display: none; }

/* The header's own buttons swap with the area, and for the same reason the area
   switch does: the shop's Monitoring and Configuration are *different modals* from
   the console's — the run log and the account settings say nothing about orders —
   and *Usage* is a credit meter for the automation the console runs, which is not a
   fact about the shop at all. Two elements per slot with one hidden by rule, never
   by inline style, so `applyRole()` stays the only thing that writes `display` on
   `[data-admin-only]` and the two rules cannot fight over a non-admin. */
#area-badge-seller { display: none; }
.shell.store-mode #area-badge-seller { display: inline-flex; }
#hdr-seller-monitoring,
#hdr-seller-config { display: none; }
.shell.store-mode #hdr-usage,
.shell.store-mode #hdr-monitoring,
.shell.store-mode #hdr-config { display: none; }
.shell.store-mode #hdr-seller-monitoring,
.shell.store-mode #hdr-seller-config { display: inline-flex; }

/* The Automation Playground is the third area (`plans/automation-playground.md`) and
   repeats the Seller Area's shape on purpose: while it is open the console's account
   strip goes away and the profile dropdown is the only door, in and out. It has its
   own badge, and it keeps the console's header buttons — the run log and
   Configuration → engine are exactly what a session's launch reads, unlike the shop's
   own Activity and settings modals. */
#area-badge-playground { display: none; }
/* The entry in is the console's (it is drawn by the menu's own rule there), and the
   two workspaces each hide the other's entries and land on *Account Console*. */
.shell.store-mode #nav-playground,
.shell.playground-mode #nav-playground { display: none; }
.shell.playground-mode .panel > .tabs { display: none; }
.shell.playground-mode #nav-console { display: flex; }
.shell.playground-mode #nav-seller { display: none; }
.shell.playground-mode #area-badge-playground { display: inline-flex; }

/* Where you are, beside the app's own name. The area hides the console's tab strip,
   so without this the header reads identically in both areas and the only cue left
   is which tabs are missing. */
.area-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--bg4);
  background: var(--bg3);
  color: var(--fg2);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.area-badge svg { width: 13px; height: 13px; color: var(--acc); }

/* Queue & Running are functional tabs — no platform logo chip. Icon stays
   small (same visual weight as icons inside chips) and renders in the tab's
   own text color; label uses the standard tab size so the whole row aligns. */
.tab svg.ic {
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: 1px;
}

.tab-action-icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  stroke-width: 2.25;
}

/* Consistent Lucide sizing. */
.btn-icon,
.summary-icon svg,
.menu-card-icon svg,
.modal-close-icon,
.sched-icon {
  width: 15px;
  height: 15px;
  flex: none;
  stroke-width: 2.1;
  vertical-align: middle;
}
.summary-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #c4b5fd;
  background: linear-gradient(145deg, rgba(129, 140, 248, .27), rgba(67, 56, 202, .17));
  border: 1px solid rgba(165, 180, 252, .2);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .08), inset -1px -1px 2px rgba(0, 0, 0, .25);
}
.summary-icon svg { width: 13px; height: 13px; }
.sched-icon { width: 16px; height: 16px; color: #c4b5fd; stroke-width: 2.25; }

/* Uniform chip behind every tab icon — white rounded square, same across
   all tabs (dark logos like GitHub black / CodeBuddy purple stay visible
   on the dark tab bar). */
.tab-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  margin-right: 5px;
  vertical-align: 1px;
  flex: none;
}
.tab-ic > img,
.tab-ic > svg {
  display: block;
  width: 9px !important;
  height: 9px !important;
  max-width: 9px;
  max-height: 9px;
  object-fit: contain;
  flex: none;
}
/* Small Lucide icon tiles keep toolbar controls and menu cards consistent. */
.menu-card-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  color: #c7d2fe;
  background: linear-gradient(145deg, rgba(129, 140, 248, .3), rgba(49, 46, 129, .38));
  border: 1px solid rgba(165, 180, 252, .22);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .1), inset -2px -2px 3px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .18);
}
.menu-card-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.15;
}
/* Value riding along with a menu entry's label — the Queue's "Proxy Pool
   SG, ID", the summary the toolbar popover used to carry. */
.menu .menu-lab {
  margin-left: 6px;
  font-size: .66rem;
  font-weight: 600;
  color: var(--fg2);
}
.bulk-dd .menu button.danger .menu-card-icon {
  color: #fecdd3;
  background: linear-gradient(145deg, rgba(244, 63, 94, .28), rgba(127, 29, 59, .4));
  border-color: rgba(251, 113, 133, .25);
}
.tab-tools > button > .menu-card-icon,
.nm-toolbar button > .menu-card-icon,
.hdr-r button > .menu-card-icon {
  width: 19px;
  height: 19px;
  border-radius: 5px;
}
.bulk-dd > summary > .btn-icon,
.tab-tools > button > .btn-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  color: currentColor;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  vertical-align: middle;
}
.tab-tools > button > .btn-icon {
  margin-right: 6px;
}
.bulk-dd > summary > .chev {
  width: 13px;
  height: 13px;
  margin-left: 1px;
}


.tab {
  position: relative;
  padding: 10px 16px 12px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--fg3);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--rad) var(--rad) 0 0;
  transition: color var(--tr), background var(--tr);
}
.tab:hover,
.tab.active { color: var(--fg); background: rgba(255, 255, 255, .04); }
.tab.active { font-weight: 600; }

/* Queue/Running email cells use separate inline groups for the disclosure
   arrow and platform/email content. Give both a fixed line box so their
   visual centers align with the table row instead of relying on baselines. */
#tab-queue td.em,
#tab-running td.em {
  vertical-align: middle;
  line-height: 1;
}
#tab-queue td.em > span:not(.arrow),
#tab-running td.em > span:not(.arrow) {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  line-height: 20px;
  position: static;
  top: auto;
  vertical-align: middle;
}
#tab-running td.em > .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 20px;
  margin-right: 4px;
  line-height: 1;
  vertical-align: middle;
}
#tab-running td.em > .arrow svg {
  width: 10px;
  height: 10px;
}

/* Sliding underline */
.tab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--acc), var(--cyan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tr);
}
.tab.active::after { transform: scaleX(1); }

.tab .cnt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--bg3);
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--fg3);
  vertical-align: 1px;
}
.tab.active .cnt { background: rgba(99, 102, 241, .2); color: var(--acc3); }

.tab-body { display: none; }
.tab-body.active { display: block; animation: fadeIn var(--tr) both; }

/* ── Toolbars ──────────────────────────────────────────────── */

.tab-tools {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--bg3);
  font-size: .75rem;
}
.tab-tools .hint {
  color: var(--fg3);
  font-size: .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-tools .spacer { flex: 1; }

/* ── Bulk action dropdown button ──────────────────────────────
   Lives inside tab-tools. The <details> element gives us open/close
   state for free, including click-outside-to-close via main.js. */

.bulk-dd {
  position: relative;
  display: inline-flex;        /* always visible on every tab */
  animation: fadeIn var(--tr) both;
}
.bulk-dd.show { display: inline-flex; } /* legacy: kept for .show toggles */

.bulk-dd > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5, #3730a3);
  color: #fff;
  border: 1px solid rgba(129, 140, 248, .72);
  box-shadow: 0 3px 12px rgba(49, 46, 129, .34), inset 0 1px 0 rgba(255, 255, 255, .1);
  cursor: pointer;
  user-select: none;
  transition: background var(--tr), box-shadow var(--tr);
  white-space: nowrap;
}
.bulk-dd > summary::-webkit-details-marker { display: none; }
.bulk-dd > summary:hover {
  background: linear-gradient(135deg, #6366f1, #4338ca);
  border-color: rgba(165, 180, 252, .82);
  box-shadow: 0 5px 16px rgba(49, 46, 129, .42), 0 0 0 2px rgba(99, 102, 241, .1);
}
.bulk-dd > summary .chev {
  font-size: .58rem;
  transition: transform var(--tr);
}
.bulk-dd[open] > summary .chev { transform: rotate(180deg); }
.bulk-dd > summary .n {
  font-family: var(--mono);
  background: rgba(255, 255, 255, .16);
  border-radius: 99px;
  padding: 0 6px;
  font-size: .64rem;
}

/* ── Profile dropdown in header ───────────────────────────── */
.profile-dd > summary {
  background: rgba(255, 255, 255, .045);
  color: var(--fg2);
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.profile-dd > summary:hover {
  background: linear-gradient(180deg, rgba(54, 65, 96, .98), rgba(35, 43, 68, .98));
  color: var(--fg);
  border-color: rgba(129, 140, 248, .52);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24), 0 0 0 2px rgba(99, 102, 241, .08);
}
.profile-dd .menu {
  min-width: 140px;
  right: 0;
}
.profile-dd .menu::before {
  right: 14px;
}

/* ── Action command menu ─────────────────────────────────────
   One panel for every dropdown in the app — the header's profile menu and each
   tab's *Action* menu. It opens *over* the page, so it has to read as a surface
   lifted off it: the brightest solid surface the palette has (`--bg4`), an indigo
   border at 0.38, and a shadow heavy enough to separate it from whatever table it
   opens across.

   It used to be a gradient from `#1b2338` down to `#121827` — and `#121827` *is*
   the page's own surface, so the bottom half of every menu dissolved into the
   background — behind a 0.28-alpha indigo hairline.

   `--bg4` rather than `--bg3`: on a page whose background is `--bg` (#0a0d14),
   `--bg3` separates from it by 1.23:1, which is what the old panel's top edge
   already managed — no improvement worth making. `--bg4` is the brightest surface
   the palette has (1.53:1 against the page, 1.42:1 against the header), which is
   what the topmost layer should be, and the border is the app's indigo at 0.38
   rather than 0.28: an edge nobody can see is not an edge. */
.bulk-dd .menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 224px;
  padding: 6px;
  background: var(--bg4);
  border: 1px solid rgba(165, 180, 252, .38);
  border-radius: 11px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
}
.bulk-dd .menu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 18px;
  width: 9px;
  height: 9px;
  background: var(--bg4);
  border-left: 1px solid rgba(165, 180, 252, .38);
  border-top: 1px solid rgba(165, 180, 252, .38);
  transform: rotate(45deg);
}
/* Rows, not cards. An entry is the row it occupies, so it is flat until it is
   hovered; the old inset/outset bevels turned nine entries into nine controls
   and made the panel look busier than the table behind it. */
.bulk-dd .menu button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  text-align: left;
  padding: 6px;
  font-size: .74rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--fg2);
  border-radius: 7px;
  box-shadow: none;
  transform: none;
  transition: background 120ms, color 120ms;
}
.bulk-dd .menu button + button { margin-top: 1px; }
.bulk-dd .menu button:hover:not(:disabled) {
  background: rgba(129, 140, 248, .18);
  color: var(--fg);
}
.bulk-dd .menu button:active:not(:disabled) { background: rgba(129, 140, 248, .26); }
.bulk-dd .menu button.danger { color: #fda4af; }
.bulk-dd .menu button.danger:hover:not(:disabled) {
  background: rgba(244, 63, 94, .22);
  color: #fecdd3;
}
.bulk-dd .menu .sep { height: 1px; margin: 7px 6px; background: rgba(255, 255, 255, .1); }

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

@media (max-width: 900px) {
  .shell {
    width: min(100% - 20px, 760px);
    padding-top: 10px;
  }

  header {
    position: static;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .brand { flex: 1; }
  .hdr-r {
    order: 3;
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hdr-r button { min-width: 0; padding-inline: 7px; }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel { border-radius: var(--rad2); }

  /* Tables remain readable and scroll inside their own container rather than
     forcing the whole page wider than the viewport. */
  .tbl-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .tbl-wrap table { min-width: 780px; }

  /* Queue & Running tabs are pinned — their tables stay fluid so they fit
     the narrow viewport without their own horizontal scroll; the rest of
     the account tables keep the min-width and scroll inside .tbl-wrap. */
  #tab-queue .tbl-wrap table,
  #tab-running .tbl-wrap table {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .shell { width: calc(100% - 12px); padding-bottom: 24px; }

  header { gap: 8px; margin-bottom: 10px; }
  .brand-mark { width: 27px; height: 27px; }
  header h1 { font-size: 1rem; }
  /* Scheduler now lives in the HME toolbar, not the header. */
  .tab-tools .sched-pill { padding: 4px 9px; font-size: .66rem; }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
  }
  .stat { padding: 10px 11px; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat .v { font-size: 1.3rem; }

  .tabs { padding-inline: 5px; }
  .tab { padding: 9px 11px 10px; font-size: .76rem; }
  .tab .cnt { display: none; }

  .tab-tools {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 8px 9px;
  }
  .tab-tools .hint { flex: 1 1 100%; }
  .tab-tools .spacer { display: none; }
  .tab-tools > :not(.hint) { margin-left: auto; }
  .tab-tools > :not(.hint):not(:last-child) { margin-left: 0; margin-right: 8px; }

  .bulk-dd .menu {
    right: auto;
    left: 0;
    min-width: 180px;
  }
  .bulk-dd .menu::before {
    right: auto;
    left: 18px;
  }

  /* ── Mobile header buttons: icon-only ── */
  .hdr-r button .btn-icon + span,
  .hdr-r details summary .hdr-username-text {
    display: none;
  }
  .hdr-r button {
    padding: 6px 8px;
    min-width: 0;
  }
  .hdr-r button .btn-icon {
    margin: 0;
  }
  .hdr-r details summary {
    padding: 6px 8px;
    gap: 0;
  }
  .hdr-r details summary .chev {
    display: none;
  }
  /* Profile dropdown: fix z-index and position on mobile */
  #profile-dd .menu {
    right: 0;
    left: auto;
    min-width: 160px;
  }
  /* Ensure header has highest z-index so dropdowns appear above tables */
  header {
    z-index: 200;
  }
  /* Header right section: keep buttons in one row */
  .hdr-r {
    gap: 4px;
  }
  /* Brand: hide version text on very small screens */
  header h1 span {
    display: none;
  }
  header h1 i {
    display: none;
  }
}