/* Buttons */
.btn{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: #e85f00; }
.btn-ghost{ background: transparent; color: #f5f3ee; border-color: #4a4b52; }
.btn-ghost:hover{ background: #33343a; }
.btn-outline{ background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-outline:hover{ border-color: var(--ink-faint); }
.btn-danger{ background: var(--bad); color: #fff; }
.btn-danger:hover{ background: #a62f21; }
.btn-sm{ padding: 6px 12px; font-size: 12.5px; border-radius: 5px; }

/* Table (dense grid) */
.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table{ width: 100%; border-collapse: separate; border-spacing: 0; }
thead th{
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); font-weight: 600; padding: 1px 0;
  background: var(--surface-sunk);
  height: 35px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap;
}
thead th:hover{ color: var(--ink); }
thead div{ display: flex; justify-content: start; padding: 0 5px; }
thead th.checkbox-col{ cursor: default; width: 34px; min-width: 34px; }
thead th.checkbox-col input[type="checkbox"]{ cursor: pointer; }
thead th.sn-col{ cursor: default; width: 34px; min-width: 34px; }
thead th.owner-col{ cursor: default; width: 110px; }
thead th.created-col,
thead th.updated-col{ cursor: default; width: 150px; }
thead th[data-sort]{ cursor: pointer; }
thead th .arrow{ opacity: 0.4; font-size: 10px; margin-left: 3px; }
thead th.sorted .arrow{ opacity: 1; color: var(--accent); }
tbody td{ padding: 7px 0px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: middle; }
tbody div{ display: flex; justify-content: start; padding: 0 5px; }
tbody tr:last-child td{ border-bottom: none; }
tbody tr:hover{ background: var(--surface-sunk); }
tbody tr.row-selected{ background: var(--accent-soft); }
td.checkbox-col{ width: 34px; }
td.checkbox-col input[type="checkbox"]{ cursor: pointer; }
td.sn-col{
  width: 34px; min-width: 34px;
  cursor: default;
}
td.owner-col{ width: 110px; min-width: 110px; }
td.created-col,
td.updated-col{ width: 150px; min-width: 150px; }

/* Frozen leftmost columns (row number + row-select checkbox): the same
   sticky trick as the header above, just pinned to the left edge of
   .grid-scroll instead of the top. Both columns are a fixed 34px (see
   the width rules above), so the checkbox column's offset is exactly
   the sn column's width — if either width ever changes, this offset
   must change with it.
   Stacking order (highest wins): frozen header corner (4) > plain
   sticky header (2) > frozen body cells (1) > everything else (auto).
   The header corner has to beat the plain header too, since both are
   sticky on the same top edge and the corner also needs to stay above
   body cells scrolling both underneath and to the left of it. */
thead th.sn-col, tbody td.sn-col{ position: sticky; left: 0; }
thead th.checkbox-col, tbody td.checkbox-col{ position: sticky; left: 34px; }
thead th.sn-col, thead th.checkbox-col{ z-index: 4; }
tbody td.sn-col, tbody td.checkbox-col{
  z-index: 1;
  background: var(--surface);
  box-shadow: 2px 0 4px -2px rgba(28, 29, 33, 0.15);
}
thead th.checkbox-col{ box-shadow: 2px 0 4px -2px rgba(28, 29, 33, 0.15); }
tbody tr:hover td.sn-col, tbody tr:hover td.checkbox-col{ background: var(--surface-sunk); }
tbody tr.row-selected td.sn-col, tbody tr.row-selected td.checkbox-col{ background: var(--accent-soft); }

/* "Fixed" (pinned) columns from the column-configuration panel — see
   utils/columnLayout.js, which sets position/left inline per column
   since the offset is dynamic (depends on which columns are pinned and
   how wide). This only supplies what can't be inline: the background
   (so scrolling content underneath doesn't show through) and z-index
   (above regular scrolling cells, below the always-pinned sn-col/
   checkbox-col — see those rules just above). The boundary shadow
   marks where pinned columns end and normal scrolling ones begin —
   applied only to the rightmost pinned column, same reasoning as the
   checkbox-col boundary shadow above it. */
thead th.col-fixed{ z-index: 3; background: var(--surface-sunk); }
tbody td.col-fixed{ z-index: 1; background: var(--surface); }
tbody tr:hover td.col-fixed{ background: var(--surface-sunk); }
tbody tr.row-selected td.col-fixed{ background: var(--accent-soft); }
th.col-fixed-boundary, td.col-fixed-boundary{ box-shadow: 2px 0 4px -2px rgba(28, 29, 33, 0.15); }

.item-name,
.um-username-cell{ font-weight: 600; color: var(--steel); }

/* Username cell in User management → User doubles as an edit trigger
   (same action as the row's pencil button) — same lightweight
   cursor+hover affordance as .report-stat--clickable, not a blue link
   style, since this table otherwise has no inline text links. */
.um-username-clickable{ cursor: pointer; border-radius: 4px; margin: -2px -4px; padding: 2px 4px; width: fit-content; }
/* .um-username-clickable:hover{ text-decoration: underline; text-underline-offset: 2px; } */
/* .um-username-clickable:focus-visible{ outline: 2px solid var(--steel); outline-offset: 1px; } */

/* Generic "this field is blank" placeholder — same intent as the ad hoc
   inline `style="color:var(--ink-faint);"` spans in Manage/Inventory
   Assets, factored into a real class for the User management table. */
.muted{ color: var(--ink-faint); }

.pill{ display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-cat{ background: var(--steel-soft); color: var(--steel); }
.pill-warehouse{ background: var(--accent-soft); color: var(--accent-ink); }
/* .pill-tempbin{ background: var(--warn-soft); color: var(--warn); } */
/* Manage's Merchant cell: a transfer requested but not yet confirmed by
   the destination's assigned receiver (see models/Gadget.js's
   pendingTransfer / ManageController's receiving workflow). Warm amber
   rather than the accent orange already used by .pill-warehouse, so a
   pending transfer reads as "waiting", not as just another warehouse tag. */
.pill-pending{ display: block; margin-top: 3px; background: var(--warn-soft); color: var(--warn); }
/* Marks a User-management row as a real Supabase Auth account (see
   UserAccountView.js / supabase/schema.sql's auth.users linkage) rather
   than a directory-only entry added by hand via "+ Add user". */
.pill-linked{ background: var(--good-soft); color: var(--good); }
.pill-bad{ background: var(--bad-soft); color: var(--bad); }

.code-tag{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  background: var(--surface-sunk); border: 1px solid var(--border);
  padding: 3px 8px 3px 6px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.code-tag .bars{
  width: 20px; height: 13px; flex-shrink: 0;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 3px,
    var(--ink) 3px 4px, transparent 4px 6px,
    var(--ink) 6px 7px, transparent 7px 9px,
    var(--ink) 9px 10px, transparent 10px 12px,
    var(--ink) 12px 13px, transparent 13px 15px,
    var(--ink) 15px 16px, transparent 16px 18px);
}

td.cell-duplicate-serial{
  background: var(--bad-soft);
}
td.cell-duplicate-serial .code-tag{
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
}
td.cell-duplicate-serial .code-tag .bars{
  background: repeating-linear-gradient(90deg,
    var(--bad) 0 2px, transparent 2px 3px,
    var(--bad) 3px 4px, transparent 4px 6px,
    var(--bad) 6px 7px, transparent 7px 9px,
    var(--bad) 9px 10px, transparent 10px 12px,
    var(--bad) 12px 13px, transparent 13px 15px,
    var(--bad) 15px 16px, transparent 16px 18px);
}

/* A field that doesn't match (or can't be verified against) the
   Inventory Assets catalog — distinct amber from the red used for
   in-Manage duplicate serials, since this is a "reconcile with the
   catalog" issue rather than a same-table data conflict. */
td.cell-catalog-invalid{
  background: var(--warn-soft);
}
.catalog-flag{
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--warn); font-size: 12px; cursor: help; margin-left: 2px;
}

.clamp-text{
  max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink-soft); font-size: 12.5px;
}

.password-cell{ display: flex; align-items: center; gap: 6px; }
.password-value{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.05em; }
.password-reveal-btn{ width: 22px; height: 22px; }

.row-actions{ display: flex; gap: 5px; justify-content: flex-end; }
.icon-btn{
  width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.icon-btn:hover{ background: var(--surface-sunk); color: var(--ink); }
.icon-btn.danger:hover{ background: var(--bad-soft); color: var(--bad); border-color: #efc1ba; }
.icon-btn.success:hover{ background: var(--good-soft); color: var(--good); border-color: #a9dab9; }

/* Pagination controls */
.page-nav, .page-btn{
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center;
}
.page-nav:hover, .page-btn:hover{ border-color: var(--ink-faint); color: var(--ink); }
.page-nav:disabled{ opacity: 0.4; cursor: not-allowed; }
.page-btn.active{ background: var(--accent); border-color: var(--accent); color: #fff; }
.page-numbers{ display: flex; align-items: center; gap: 4px; }
.page-ellipsis{ color: var(--ink-faint); padding: 0 2px; font-size: 12.5px; }

/* Dropdown / popover menu (DropdownMenu.js) */
.dropdown-menu{
  position: absolute; z-index: 120; min-width: 170px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.dropdown-menu.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-menu-search{
  width: 100%; padding: 7px 9px; margin-bottom: 4px; border-radius: 4px;
  border: 1px solid var(--border); font-size: 13px; font-family: inherit; color: var(--ink);
  flex-shrink: 0;
}
.dropdown-menu-search:focus{ outline: none; border-color: var(--steel); }
.dropdown-menu-list{ overflow-y: auto; max-height: 280px; display: flex; flex-direction: column; gap: 2px; }
.dropdown-menu-item{
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
  background: none; border: none; border-radius: 4px; cursor: pointer; flex-shrink: 0;
  padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--ink);
}
.dropdown-menu-item:hover{ background: var(--surface-sunk); }
.dropdown-menu-item.is-active{ background: var(--surface-sunk); }
.dropdown-menu-item.is-selected{ color: var(--accent); font-weight: 600; }
.dropdown-menu-item.is-danger{ color: var(--bad); }
.dropdown-menu-item.is-danger:hover, .dropdown-menu-item.is-danger.is-active{ background: var(--bad-soft); }

/* Two-column suggestion popover (SuggestList.js) — fixed "Category /
   Available" header row over an independently scrolling body, unlike
   .dropdown-menu's single flat scrolling list above. Used by the
   Requisition Form's Gadget Type field. */
.suggest-list{
  position: absolute; z-index: 120; min-width: 260px; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.suggest-list.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.suggest-list-head{
  display: flex; align-items: center; flex-shrink: 0;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft);
}
.suggest-list-head span:first-child{ flex: 1; }
.suggest-list-head span:last-child{ flex-shrink: 0; width: 70px; text-align: right; }
.suggest-list-body{ overflow-y: auto; max-height: 240px; }
.suggest-list-row{
  display: flex; align-items: center; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--ink);
}
.suggest-list-row span:first-child{ flex: 1; }
.suggest-list-row span:last-child{ flex-shrink: 0; width: 70px; text-align: right; }
.suggest-list-row:hover, .suggest-list-row.is-active{ background: var(--surface-sunk); }
.suggest-list-row.is-zero span:last-child{ color: var(--ink-faint); }

/* Column configuration panel — see components/ColumnConfigPanel.js.
   Same anchored-popover shell as .dropdown-menu above, wider and with a
   fixed-height scrolling body since a table can have a dozen-plus
   configurable columns (spec calls for "no header" — no title bar, just
   straight into the body — and a scrolling body with a footer pinned
   below it, not scrolling away with the rows). */
.column-config-panel{
  position: absolute; z-index: 120; width: 440px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.column-config-panel.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.column-config-body{ max-height: 340px; overflow-y: auto; overflow-x: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.column-config-row{
  display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 4px;
}
.column-config-row:hover{ background: var(--surface-sunk); }
.column-config-row-locked{ color: var(--ink-faint); }
.column-config-row-locked .checkbox-inline{ margin: 0; }
.column-config-name{ flex: 1 1 auto; min-width: 130px; margin: 0; font-size: 13px; }
.column-config-name span, .column-config-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.column-config-width-label{ font-size: 11px; color: var(--ink-faint); flex-shrink: 0; }
.column-config-width{
  width: 52px; flex-shrink: 0; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--border);
  font-size: 12px; text-align: center; font-family: inherit;
}
.column-config-fixed-toggle{ display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-soft); flex-shrink: 0; }
.column-config-move{ display: flex; gap: 2px; flex-shrink: 0; }
.column-config-move .icon-btn{ width: 22px; height: 22px; }
.column-config-move .icon-btn:disabled{ opacity: 0.3; cursor: default; }
.column-config-footer{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.column-config-footer-right{ display: flex; gap: 8px; }

/* Date range picker — see components/DateRangePicker.js. Same anchored-
   popover shell as .dropdown-menu/.column-config-panel above, laid out as
   a presets sidebar next to a two-month calendar, modeled on the
   reference platform's Shipping Management date filter. */
.date-range-picker{
  position: absolute; z-index: 120; width: 620px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.date-range-picker.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.drp-body{ display: flex; }
.drp-presets{
  flex-shrink: 0; width: 128px; padding: 10px 6px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.drp-preset{
  text-align: left; background: none; border: none; border-radius: 4px; cursor: pointer;
  padding: 8px 10px; font-size: 12.5px; font-weight: 500; color: var(--ink); font-family: inherit;
}
.drp-preset:hover{ background: var(--surface-sunk); }
.drp-main{ flex: 1; min-width: 0; padding: 12px 14px; }
.drp-fields{ display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.drp-fields-sep{ color: var(--ink-faint); padding-bottom: 8px; }
.drp-field{ flex: 1; display: flex; flex-direction: column; gap: 4px; }
.drp-field label{ font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.drp-field input{
  padding: 6px 9px; border-radius: 4px; border: 1px solid var(--border);
  font-size: 12.5px; font-family: inherit; color: var(--ink); background: var(--surface-sunk);
}
.drp-months{ display: flex; gap: 20px; }
.drp-month{ flex: 1; min-width: 0; }
.drp-month-head{ display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.drp-month-title{ flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.drp-nav{
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 4px; cursor: pointer; color: var(--ink-soft); font-size: 12px;
}
.drp-nav:hover{ background: var(--surface-sunk); color: var(--ink); }
.drp-weekdays{ display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.drp-weekdays span{ text-align: center; font-size: 10.5px; color: var(--ink-faint); font-weight: 700; }
.drp-week{ display: grid; grid-template-columns: repeat(7, 1fr); }
.drp-day, .drp-day-empty{
  width: 100%; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; border: none; background: none; cursor: pointer; color: var(--ink); font-family: inherit;
  border-radius: 50%;
}
.drp-day:hover{ background: var(--surface-sunk); }
.drp-day.is-today{ font-weight: 700; color: var(--accent); }
.drp-day.is-in-range{ border-radius: 0; background: var(--accent-soft); }
.drp-day.is-range-start, .drp-day.is-range-end{ background: var(--accent); color: #fff; font-weight: 700; }
.drp-footer{
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}

/* Small on/off switch, used here for the "Fixed" (pin column) toggle —
   the app has plenty of checkboxes already but no switch yet, and
   "fixed or not" reads more like a mode toggle than a checklist item. */
.switch{ position: relative; display: inline-block; width: 30px; height: 17px; flex-shrink: 0; }
.switch input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track{
  position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.15s ease;
}
.switch-track::before{
  content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(28,29,33,0.25);
}
.switch input:checked + .switch-track{ background: var(--accent); }
.switch input:checked + .switch-track::before{ transform: translateX(13px); }
.switch input:focus-visible + .switch-track{ outline: 2px solid var(--steel); outline-offset: 2px; }
.dropdown-menu-item.is-selected::after{ content: '✓'; font-weight: 700; margin-left: 10px; }

/* Import modal body (ManageController import-via-CSV flow) */
.import-dropzone{
  display: flex; align-items: center; gap: 10px;
  padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-sunk);
}
.import-file-name{ font-size: 12.5px; color: var(--ink-soft); }

.import-progress{ margin-top: 14px; }
.import-progress-track{
  height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-sunk);
}
.import-progress-fill{
  height: 100%; background: var(--accent); border-radius: 999px;
  transition: width 0.2s ease;
}
.import-progress-label{ font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }

.empty-state{ padding: 60px 20px; text-align: center; color: var(--ink-soft); }
.empty-state .glyph{
  width: 46px; height: 30px; margin: 0 auto 14px; opacity: 0.55;
  background: repeating-linear-gradient(90deg,
    var(--ink-faint) 0 3px, transparent 3px 5px,
    var(--ink-faint) 5px 6px, transparent 6px 10px,
    var(--ink-faint) 10px 12px, transparent 12px 16px,
    var(--ink-faint) 16px 17px, transparent 17px 21px,
    var(--ink-faint) 21px 23px, transparent 23px 27px,
    var(--ink-faint) 27px 29px, transparent 29px 33px,
    var(--ink-faint) 33px 35px, transparent 35px 39px,
    var(--ink-faint) 39px 41px, transparent 41px 46px);
}