/* SourceEzy Admin — production stylesheet.
   Adapted from docs/design-source/admin.css (Claude Design export).

   Delta from source:
   - :root token block extracted into _brand.css (loaded first).
   - Class-rename aliases added so Bootstrap-native markup (.card, .table, .form-select)
     inherits the SourceEzy look without per-page changes. CD's own class names are
     kept as first alias for anywhere the CD markup was copied verbatim.
   - Surface switcher review chrome (.review-bar, .surface { display:none } state)
     removed; each production page renders one surface directly.
   - RFX blocks kept — pages not wired this PR. See marker below. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--se-ink);
  background: var(--se-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Density ---------- */
html[data-density="compact"]    { --se-density-y: 8px;  --se-density-x: 12px; font-size: 13px; }
html[data-density="comfortable"]{ --se-density-y: 12px; --se-density-x: 14px; font-size: 14px; }
html[data-density="spacious"]   { --se-density-y: 16px; --se-density-x: 18px; font-size: 15px; }

/* ---------- App shell ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--se-sidebar-w) 1fr;
  grid-template-rows: var(--se-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  transition: grid-template-columns .2s ease;
}
html[data-sidebar="collapsed"] .app-shell {
  grid-template-columns: var(--se-sidebar-w-collapsed) 1fr;
}

/* ---------- Sidebar ---------- */
.sidebar {
  grid-area: sidebar;
  background: #0D1B3D;
  color: #C9D2E8;
  border-right: 1px solid #16244A;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.sidebar-brand {
  height: var(--se-topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  border-bottom: 1px solid #16244A;
  flex-shrink: 0;
}
.sidebar-brand img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0;
}
.sidebar-brand .brand-mark {
  height: 28px;
  width: 34px;
  background-image: url("assets/sourceezy-logo.png");
  background-size: 110px auto;
  background-position: left center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.sidebar-brand .brand-wordmark {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: #FFF;
  white-space: nowrap;
}
.sidebar-brand .brand-wordmark .em {
  color: var(--se-red);
}
.sidebar-brand .brand-role {
  display: block;
  font-size: 11px;
  color: var(--se-ink-4);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
html[data-sidebar="collapsed"] .brand-wordmark,
html[data-sidebar="collapsed"] .brand-role { display: none; }

.sidebar-nav {
  padding: 12px 8px;
  overflow-y: auto;
  flex: 1;
}
.sidebar-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6E7CA0;
  padding: 12px 12px 6px;
}
html[data-sidebar="collapsed"] .sidebar-section { visibility: hidden; height: 8px; padding: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--se-radius);
  color: #C9D2E8;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item i { font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; }
.nav-item:hover { background: #16244A; color: #FFF; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(227,6,19,.15), rgba(227,6,19,0));
  color: #FFF;
  box-shadow: inset 3px 0 0 var(--se-red);
}
.nav-item .nav-badge {
  margin-left: auto;
  background: var(--se-red);
  color: #FFF;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
html[data-sidebar="collapsed"] .nav-item span,
html[data-sidebar="collapsed"] .nav-item .nav-badge { display: none; }
html[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 10px 0; }

/* Collapsible nav groups: URL-less parent rows rendered with children under a
   click-to-toggle header (MenuControl.ascx.cs -> RenderNavGroup). Open state
   persisted in localStorage by admin.js so postbacks don't slam it closed. */
.nav-group { display: block; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--se-radius);
  color: #C9D2E8;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-group-toggle i { font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; }
.nav-group-toggle:hover { background: #16244A; color: #FFF; }
.nav-group-chevron { margin-left: auto; transition: transform .15s ease; }
.nav-group.open > .nav-group-toggle .nav-group-chevron { transform: rotate(180deg); }
.nav-group-items { display: none; padding-left: 12px; }
.nav-group.open > .nav-group-items { display: block; }
html[data-sidebar="collapsed"] .nav-group-toggle span,
html[data-sidebar="collapsed"] .nav-group-chevron { display: none; }
html[data-sidebar="collapsed"] .nav-group-toggle { justify-content: center; padding: 10px 0; }
html[data-sidebar="collapsed"] .nav-group-items { display: none !important; padding-left: 0; }

.sidebar-footer {
  border-top: 1px solid #16244A;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sidebar-footer .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--se-red); color: #FFF; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.sidebar-footer .who { color: #FFF; font-weight: 600; font-size: 13px; line-height: 1.2; }
.sidebar-footer .who small { color: #8FA0C7; font-weight: 400; display: block; font-size: 11px; }
html[data-sidebar="collapsed"] .sidebar-footer .who,
html[data-sidebar="collapsed"] .sidebar-footer .footer-caret { display: none; }
html[data-sidebar="collapsed"] .sidebar-footer { justify-content: center; }
.footer-caret { margin-left: auto; color: #6E7CA0; }

/* ---------- Topbar ---------- */
.topbar {
  grid-area: topbar;
  background: var(--se-surface);
  border-bottom: 1px solid var(--se-line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-toggle {
  background: transparent;
  border: 1px solid var(--se-line);
  color: var(--se-ink-2);
  width: 34px;
  height: 34px;
  border-radius: var(--se-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.topbar-toggle:hover { background: var(--se-bg); }
.topbar-search {
  flex: 1;
  max-width: 460px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  padding: 0 12px 0 36px;
  font-size: 13px;
  background: var(--se-bg);
  color: var(--se-ink);
}
.topbar-search input:focus { outline: 2px solid var(--se-blue-50); border-color: var(--se-blue); background: #FFF; }
.topbar-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--se-ink-4); }
.topbar-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--se-ink-3); border: 1px solid var(--se-line); padding: 1px 6px; border-radius: 4px; background: #FFF;
}
.topbar-spacer { flex: 1; }
.env-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.env-badge.env-prod { color: var(--se-danger); background: var(--se-danger-50); }
.env-badge.env-test { color: var(--se-warn); background: var(--se-warn-50); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--se-radius);
  border: 1px solid var(--se-line); background: #FFF; color: var(--se-ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.icon-btn:hover { background: var(--se-bg); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--se-red); border: 2px solid #FFF;
}
.topbar-user {
  display: flex; align-items: center; gap: 10px; padding: 3px 8px 3px 3px;
  border-radius: 30px; border: 1px solid var(--se-line); background: #FFF; cursor: pointer;
}
.topbar-user .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--se-blue); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.topbar-user .who { font-size: 13px; font-weight: 600; color: var(--se-ink); line-height: 1.1; }
.topbar-user .who small { color: var(--se-ink-3); font-weight: 400; display: block; font-size: 11px; }

/* ---------- Main ---------- */
.main {
  grid-area: main;
  padding: 24px 28px 40px;
  min-width: 0;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.page-head h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.page-head .crumbs { font-size: 12px; color: var(--se-ink-3); margin-bottom: 6px; }
.page-head .crumbs a { color: var(--se-ink-3); text-decoration: none; }
.page-head .crumbs a:hover { color: var(--se-blue); }
.page-head .crumbs .sep { margin: 0 6px; color: var(--se-ink-4); }
.page-head .lede { color: var(--se-ink-3); font-size: 13px; margin: 0; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--se-radius); font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.btn i { font-size: 15px; }
.btn-primary { background: var(--se-blue); color: #FFF; border-color: var(--se-blue); }
.btn-primary:hover { background: var(--se-blue-600); border-color: var(--se-blue-600); color: #FFF; }
.btn-danger { background: var(--se-red); color: #FFF; border-color: var(--se-red); }
.btn-danger:hover { background: var(--se-red-600); border-color: var(--se-red-600); color: #FFF; }
.btn-outline, .btn-outline-secondary { background: #FFF; color: var(--se-ink-2); border-color: var(--se-line); }
.btn-outline:hover, .btn-outline-secondary:hover { background: var(--se-bg); color: var(--se-ink-2); }
.btn-ghost { background: transparent; color: var(--se-ink-2); }
.btn-ghost:hover { background: var(--se-bg); }
.btn-sm { padding: 6px 10px; font-size: 12px; }

/* ---------- Subnav pill row ----------
   Used under a page-head when a page has multiple sibling sub-pages
   (Purchasing units / Manage suppliers / Contracts / Config on
   CompanyDetail). Wraps cleanly on narrow screens; each pill is the
   same shape regardless of label length. */
.subnav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--se-line);
  border-bottom: 1px solid var(--se-line);
}
.subnav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--se-surface);
  border: 1px solid var(--se-line);
  border-radius: 999px;
  color: var(--se-ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.subnav-pill:hover {
  background: var(--se-bg);
  border-color: var(--se-blue);
  color: var(--se-ink);
}
.subnav-pill i { font-size: 15px; color: var(--se-ink-3); }
.subnav-pill:hover i { color: var(--se-blue); }

/* ---------- Supplier categories (multi-select redesign) ----------
   Applied to Admin/SupplierCategories.aspx. Designed to hold up when
   MAS_CATEGORY grows past ~30 rows and/or gains PARENT_CATEGORY_ID.
   Layout: summary strip → chips → filter row → grid → sticky footer. */

.cat-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 4px 2px 12px;
}
.cat-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; padding: 0 8px;
  background: var(--se-blue); color: #FFF;
  border-radius: 12px; font-size: 12px; font-weight: 700;
}
.cat-count-label { font-size: 13px; color: var(--se-ink-2); margin-left: 8px; }

.cat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 2px 12px;
  border-bottom: 1px dashed var(--se-line);
  margin-bottom: 12px;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--se-bg); color: var(--se-ink-2);
  border: 1px solid var(--se-line);
  border-radius: 12px;
  font-size: 12px; font-weight: 500;
}
.cat-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--se-ink-3); background: transparent;
  font-size: 14px; line-height: 1;
  text-decoration: none;
}
.cat-chip-x:hover { background: var(--se-red); color: #FFF; }

.cat-filter-row {
  display: flex; gap: 8px; align-items: end; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--se-line);
  margin-bottom: 12px;
}
.cat-only-selected { padding-bottom: 8px; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
  max-height: 60vh;
  overflow: auto;
  padding: 2px;
}
.cat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  background: var(--se-surface);
  cursor: pointer;
  font-size: 13px; color: var(--se-ink-2);
  transition: background .12s, border-color .12s, color .12s;
}
.cat-item:hover { border-color: var(--se-blue-300, #93c5fd); background: var(--se-bg); }
.cat-item-selected {
  border-color: var(--se-blue);
  background: color-mix(in srgb, var(--se-blue) 6%, var(--se-surface));
  color: var(--se-ink);
  font-weight: 500;
}
.cat-item-check { margin: 0; }
.cat-item-name { flex: 1; }

.cat-footer {
  display: flex; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--se-line);
  margin-top: 12px;
  position: sticky; bottom: 0;
  background: var(--se-surface);
}

/* Forward-compat hook for parent-child groupings when MAS_CATEGORY gains
   PARENT_CATEGORY_ID. Codebehind renders .cat-group headers between rows. */
.cat-group {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--se-ink-3);
  padding: 12px 2px 4px;
  border-bottom: 1px solid var(--se-line);
}

/* ---------- Card (dual selector: CD's .card-plain and Bootstrap .card) ---------- */
.card-plain, .card {
  background: var(--se-surface);
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--se-line);
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
}
.card-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-header .muted { color: var(--se-ink-3); font-size: 12px; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--se-surface);
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.kpi .kpi-label { color: var(--se-ink-3); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.kpi .kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 8px 0 6px; color: var(--se-ink); }
.kpi .kpi-delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--se-success); }
.kpi-delta.down { color: var(--se-danger); }
.kpi .kpi-icon {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: var(--se-radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.kpi-icon.a { background: var(--se-blue-50); color: var(--se-blue); }
.kpi-icon.b { background: var(--se-red-50); color: var(--se-red); }
.kpi-icon.c { background: var(--se-success-50); color: var(--se-success); }
.kpi-icon.d { background: var(--se-warn-50); color: var(--se-warn); }

/* ---------- Dashboard grid ---------- */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* Chart placeholder */
.chart-frame { padding: 18px; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--se-ink-3); margin-bottom: 10px; }
.chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.chart-svg { width: 100%; height: 240px; display: block; }

/* Activity list */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--se-line-2); }
.activity li:last-child { border-bottom: none; }
.activity .a-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--se-blue-50); color: var(--se-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.activity .a-icon.red { background: var(--se-red-50); color: var(--se-red); }
.activity .a-icon.green { background: var(--se-success-50); color: var(--se-success); }
.activity .a-body { flex: 1; }
.activity .a-body strong { font-weight: 600; }
.activity .a-body p { margin: 2px 0 0; font-size: 12px; color: var(--se-ink-3); }
.activity .a-time { color: var(--se-ink-4); font-size: 11px; white-space: nowrap; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--se-line);
}
.filter-bar .search { position: relative; flex: 1; min-width: 220px; max-width: 320px; }
.filter-bar .search input { width: 100%; height: 34px; border: 1px solid var(--se-line); border-radius: var(--se-radius); padding: 0 10px 0 34px; font-size: 13px; }
.filter-bar .search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--se-ink-4); }
.filter-select, .form-select {
  height: 34px; border: 1px solid var(--se-line); border-radius: var(--se-radius); background: #FFF;
  padding: 0 28px 0 12px; font-size: 13px; color: var(--se-ink-2);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.filter-bar .spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px 0 10px;
  border-radius: 13px; background: var(--se-blue-50); color: var(--se-blue);
  font-size: 12px; font-weight: 500;
}
.chip button { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; line-height: 0; }
.chip button i { font-size: 14px; }

/* ---------- Data table (dual selector: CD's .data-table and Bootstrap .table) ---------- */
.data-table, .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin-bottom: 0; }
.data-table thead th, .table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--se-ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px var(--se-density-x);
  background: var(--se-bg);
  border-bottom: 1px solid var(--se-line);
  white-space: nowrap;
  user-select: none;
}
.data-table thead th.sortable, .table thead th.sortable { cursor: pointer; }
.data-table thead th.sortable:hover, .table thead th.sortable:hover { color: var(--se-ink); }
.data-table thead th .sort-caret, .table thead th .sort-caret { display: inline-block; margin-left: 4px; opacity: .5; }
.data-table thead th.sort-asc .sort-caret,
.data-table thead th.sort-desc .sort-caret,
.table thead th.sort-asc .sort-caret,
.table thead th.sort-desc .sort-caret { opacity: 1; color: var(--se-blue); }
.data-table tbody td, .table tbody td {
  padding: var(--se-density-y) var(--se-density-x);
  border-bottom: 1px solid var(--se-line-2);
  color: var(--se-ink);
  vertical-align: middle;
}
.data-table tbody tr:hover, .table tbody tr:hover { background: #FAFBFC; }
.data-table tbody tr.selected, .table tbody tr.selected { background: var(--se-blue-50); }
.data-table .check-col, .table .check-col { width: 36px; padding-right: 0; }
.data-table .actions-col, .table .actions-col { width: 44px; text-align: right; }
.data-table .co-cell, .table .co-cell { display: flex; align-items: center; gap: 10px; }
.data-table .co-logo, .table .co-logo {
  width: 28px; height: 28px; border-radius: 6px; background: var(--se-blue-50); color: var(--se-blue);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.data-table .co-logo.r, .table .co-logo.r { background: var(--se-red-50); color: var(--se-red); }
.data-table .co-logo.g, .table .co-logo.g { background: var(--se-success-50); color: var(--se-success); }
.data-table .co-logo.w, .table .co-logo.w { background: var(--se-warn-50); color: var(--se-warn); }
.data-table .co-name, .table .co-name { font-weight: 600; }
.data-table .co-sub, .table .co-sub { color: var(--se-ink-3); font-size: 12px; }
.data-table .muted, .table .muted { color: var(--se-ink-3); }
.data-table .mono, .table .mono { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 12px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;
  line-height: 1.6;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-active   { background: var(--se-success-50); color: var(--se-success); }
.pill-pending  { background: var(--se-warn-50);    color: var(--se-warn); }
.pill-suspend  { background: var(--se-danger-50);  color: var(--se-danger); }
.pill-draft    { background: #EEF0F4;              color: var(--se-ink-3); }
/* Distinct from pill-draft (which reads as "unstarted"). Used on user rows so
   a deactivated user is visually loud — same red palette as pill-suspend but
   named for the semantic that fits the User Management flow. */
.pill-inactive { background: var(--se-danger-50);  color: var(--se-danger); }

/* Computed-status pills for RfqList stage packs (§3.2 / §3.3 / §3.5 handoff).
   Distinct from pill-active / pill-cancelled which name generic on/off states;
   these signal a doc's *time-sensitive* posture (deadline still open, deadline
   passed, deadline scheduled). Named by state, not by domain, so they can
   later cover other transaction pages (PO acknowledgement windows etc.). */
.status-live    { background: var(--se-success-50); color: var(--se-success); }
.status-closed  { background: #EEF0F4;              color: var(--se-ink-3); }
.status-waiting { background: var(--se-warn-50);    color: var(--se-warn); }

.row-menu-btn { background: transparent; border: 0; width: 28px; height: 28px; border-radius: 4px; color: var(--se-ink-3); cursor: pointer; }
.row-menu-btn:hover { background: var(--se-bg); color: var(--se-ink); }

.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--se-line); color: var(--se-ink-3); font-size: 12px;
}
.pager { display: inline-flex; gap: 4px; }
.pager button {
  min-width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--se-line);
  background: #FFF; color: var(--se-ink-2); font-size: 12px; cursor: pointer;
}
.pager button:hover { background: var(--se-bg); }
.pager button.active { background: var(--se-blue); color: #FFF; border-color: var(--se-blue); }
.pager button:disabled { color: var(--se-ink-4); cursor: not-allowed; }

/* Bulk action bar */
.bulk-bar {
  display: none;
  align-items: center; gap: 12px;
  padding: 10px 18px; background: var(--se-blue); color: #FFF;
  border-bottom: 1px solid var(--se-blue-600);
  font-size: 13px; font-weight: 500;
  /* Bulk bar can sit either as a card-top strip or inside a card body.
     Rounding the corners covers the second case; the .card overflow:hidden
     handles the first. */
  border-radius: 6px;
}
.bulk-bar.visible { display: flex; }
.bulk-bar .bulk-actions { margin-left: auto; display: flex; gap: 8px; }
.bulk-bar .btn-bulk { background: rgba(255,255,255,.15); color: #FFF; border: 1px solid rgba(255,255,255,.25); padding: 5px 10px; font-size: 12px; border-radius: 5px; cursor: pointer; font: inherit; font-weight: 600; }
.bulk-bar .btn-bulk:hover { background: rgba(255,255,255,.25); }
.bulk-bar .js-bulk-clear { background: transparent; }

/* Per-row select checkbox column — narrow, centred. Header uses the same class. */
.table th.col-check, .table td.col-check { width: 32px; text-align: center; padding-left: 8px; padding-right: 4px; }

/* Device tag pill on the sessions card (mig 061). Muted monospace so it
   reads as an identifier, not competing with the human-readable UA text. */
.device-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--se-font-mono, monospace);
  font-size: 11px;
  color: var(--se-ink-3);
  background: #EEF0F4;
  border-radius: 3px;
}

/* ---------- Form (detail page) ---------- */
.form-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.form-nav { position: sticky; top: calc(var(--se-topbar-h) + 20px); align-self: start; }
.form-nav a {
  display: block; padding: 8px 12px; color: var(--se-ink-2); text-decoration: none;
  border-radius: var(--se-radius); font-size: 13px; font-weight: 500;
}
.form-nav a:hover { background: var(--se-bg); }
.form-nav a.current { background: var(--se-blue-50); color: var(--se-blue); }

.form-section { padding: 20px 22px; }
.form-section + .form-section { border-top: 1px solid var(--se-line); }
.form-section h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.form-section .hint { color: var(--se-ink-3); font-size: 12px; margin: 0 0 16px; }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
.field-grid .full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--se-ink-2); margin-bottom: 6px; }
.form-field label .req { color: var(--se-red); }
.form-input, .form-select, .form-textarea, .form-control {
  width: 100%; height: 36px; border: 1px solid var(--se-line); border-radius: var(--se-radius);
  padding: 0 12px; font-size: 13px; color: var(--se-ink); background: #FFF;
  font-family: inherit;
}
.form-textarea, textarea.form-control { height: 88px; padding: 8px 12px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus, .form-control:focus { outline: 2px solid var(--se-blue-50); border-color: var(--se-blue); }
.form-help { font-size: 11px; color: var(--se-ink-3); margin-top: 4px; }
.form-help.form-error, .form-error { color: var(--se-danger); font-size: 11px; margin-top: 4px; display: block; }

.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--se-line-2); }
.switch-row:last-child { border-bottom: none; }
.switch-row .sw-title { font-weight: 600; font-size: 13px; }
.switch-row .sw-desc { color: var(--se-ink-3); font-size: 12px; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 11px; background: #D0D5DD; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #FFF; transition: transform .15s; }
.switch.on { background: var(--se-blue); }
.switch.on::after { transform: translateX(16px); }

.form-footer {
  padding: 14px 22px; background: var(--se-bg);
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--se-line);
  border-radius: 0 0 var(--se-radius-lg) var(--se-radius-lg);
}
.form-footer .autosave { margin-right: auto; color: var(--se-ink-3); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Login ---------- */
.login-shell {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--se-bg);
}
@media (max-width: 900px) { .login-shell { grid-template-columns: 1fr; } }
.login-hero {
  background: linear-gradient(155deg, #0D1B3D 0%, #1B3E8C 60%, #C60411 130%);
  color: #FFF; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-hero::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle, rgba(227,6,19,.35), transparent 65%);
}
.login-hero .brand-mark {
  height: 40px; width: 160px;
  background-image: url("assets/sourceezy-logo.png");
  background-size: contain; background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}
.login-hero h2 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; max-width: 440px; line-height: 1.15; }
.login-hero p { color: rgba(255,255,255,.75); max-width: 440px; font-size: 14px; line-height: 1.6; }
.login-hero .quote { border-left: 3px solid var(--se-red); padding-left: 14px; font-size: 13px; color: rgba(255,255,255,.85); max-width: 440px; }
.login-hero .quote small { display: block; color: rgba(255,255,255,.55); margin-top: 6px; }

.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-card { width: 100%; max-width: 400px; }
.login-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.login-card .sub { color: var(--se-ink-3); font-size: 13px; margin: 0 0 24px; }
.login-card .form-field { margin-bottom: 14px; }
.login-card .row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 12px; }
.login-card .row-between a { color: var(--se-blue); text-decoration: none; font-weight: 600; }
.login-card .checkbox { display: inline-flex; align-items: center; gap: 6px; color: var(--se-ink-2); cursor: pointer; }
.login-card .btn { width: 100%; justify-content: center; height: 40px; font-size: 14px; }
.login-card .divider { text-align: center; color: var(--se-ink-4); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 18px 0; position: relative; }
.login-card .divider::before, .login-card .divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 30px); height: 1px; background: var(--se-line); }
.login-card .divider::before { left: 0; }
.login-card .divider::after { right: 0; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border: 1px solid var(--se-line); background: #FFF; border-radius: var(--se-radius); font-weight: 600; font-size: 13px; color: var(--se-ink-2); cursor: pointer; }
.sso-btn:hover { background: var(--se-bg); }
.login-card .foot { text-align: center; color: var(--se-ink-3); font-size: 12px; margin-top: 20px; }

/* ---------- Empty / 404 ---------- */
.empty-hero {
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px;
}
.empty-code {
  font-size: 120px; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(135deg, var(--se-blue) 0%, var(--se-red) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.empty-hero h2 { font-size: 26px; font-weight: 700; margin: 20px 0 8px; }
.empty-hero p { color: var(--se-ink-3); max-width: 460px; margin: 0 0 24px; }
.empty-actions { display: flex; gap: 10px; }
.empty-links { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 640px; width: 100%; }
.empty-link {
  border: 1px solid var(--se-line); background: #FFF; border-radius: var(--se-radius-lg);
  padding: 14px 16px; text-align: left; text-decoration: none; color: var(--se-ink);
  display: flex; align-items: center; gap: 12px;
}
.empty-link:hover { border-color: var(--se-blue); }
.empty-link i { font-size: 22px; color: var(--se-blue); }
.empty-link strong { display: block; font-size: 13px; }
.empty-link small { color: var(--se-ink-3); font-size: 11px; }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; color: var(--se-ink-2); text-decoration: none;
  border-radius: var(--se-radius); font-size: 13px; font-weight: 500;
}
.settings-nav a i { font-size: 16px; color: var(--se-ink-3); }
.settings-nav a:hover { background: #FFF; }
.settings-nav a.current { background: #FFF; color: var(--se-blue); border: 1px solid var(--se-line); }
.settings-nav a.current i { color: var(--se-blue); }

/* Light-context sidenav for use inside .card panels (not the dark sidebar). */
.sidenav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--se-ink-2);
  text-align: left;
  border-radius: var(--se-radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.sidenav-link i { font-size: 16px; color: var(--se-ink-3); width: 20px; text-align: center; flex-shrink: 0; }
.sidenav-link:hover:not(:disabled) { background: var(--se-bg); color: var(--se-ink); }
.sidenav-link.current { background: var(--se-blue-50); color: var(--se-blue); }
.sidenav-link.current i { color: var(--se-blue); }
.sidenav-link:disabled { color: var(--se-ink-4); cursor: not-allowed; }
.sidenav-link:disabled i { color: var(--se-ink-4); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--se-line);
  padding: 0 4px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.tab {
  background: transparent;
  border: 0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--se-ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}
.tab:hover { color: var(--se-ink); }
.tab.active { color: var(--se-blue); border-bottom-color: var(--se-blue); }
.tab .tab-count {
  background: var(--se-line-2);
  color: var(--se-ink-3);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}
.tab.active .tab-count { background: var(--se-blue-50); color: var(--se-blue); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================================================
   RFX — partially wired.
   Wired now (Admin/RfqList.aspx migration + stage-packs follow-up):
     * surface-rfx-list (.filter-bar / .data-table / .active-filters / chips)
     * All pill variants (pill-rfi/rfq/rfp/live/closed/award/review/cancelled)
     * .type-tag family, .rfq-desc
     * Stage column packs (Basic / RFI / Prebid / Negotiation / Auctions /
       Closed) — 6 <table> shapes behind PlaceHolders, chosen per URL
       ?status= scope
     * .status-live / .status-closed / .status-waiting pills for the
       computed-status column (RFI + Pre-Bid time-driven; Auctions
       status-driven)
   Not wired yet: rfx-meta-grid, countdown, detail-two-col, timeline, qa-item,
   doc-list, score-bar, award-ribbon — these ride the RFQ detail migration
   (a follow-up PR). RFP list surface, RFI list drilldown pages, and pill-rfp
   remain dead until those specific pages migrate. Deferred statuses
   PR/AW/PO have no pack this list — they get their own future migrations.
   ========================================================================= */

/* ---------- RFX header meta ---------- */
.rfx-meta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--se-surface);
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .rfx-meta-grid { grid-template-columns: repeat(2, 1fr); } }
.rfx-meta-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--se-line);
}
.rfx-meta-cell:last-child { border-right: none; }

/* ---------- RFx Info tab: label/value read grid ----------
   Two columns of label + value pairs. Distinct from .rfx-meta-grid above,
   which is the boxed 5-cell ribbon: this one is a plain read-out inside a
   card, so it carries no border of its own. Collapses to one column on
   narrow viewports so the value never wraps under a truncated label. */
.rfx-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}
@media (max-width: 900px) { .rfx-info-grid { grid-template-columns: 1fr; } }
.rfx-info-grid > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--se-line);
}
.rfx-info-grid .lbl {
  flex: 0 0 140px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--se-ink-3);
  font-weight: 600;
}
.rfx-info-grid .val {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--se-ink);
  word-break: break-word;
}

.rfx-meta-cell .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--se-ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.rfx-meta-cell .val {
  font-size: 15px;
  font-weight: 600;
  color: var(--se-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rfx-meta-cell .sub {
  font-size: 12px;
  color: var(--se-ink-3);
  margin-top: 2px;
}

/* Countdown */
.countdown {
  display: inline-flex;
  gap: 6px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-weight: 700;
}
.countdown .unit {
  background: var(--se-ink);
  color: #FFF;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
}
.countdown .unit small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: inherit;
  margin-top: 1px;
}

/* Pill type variants for RFX */
.pill-rfi { background: #EEF0F4;              color: var(--se-ink-2); }
.pill-rfq { background: var(--se-blue-50);    color: var(--se-blue); }
.pill-rfp { background: var(--se-red-50);     color: var(--se-red); }
.pill-live    { background: var(--se-success-50); color: var(--se-success); }
.pill-closed  { background: #EEF0F4;              color: var(--se-ink-3); }
.pill-award   { background: var(--se-blue-50);    color: var(--se-blue); }
/* Added by /Admin/RfqList.aspx migration — covers Negotiation/PostAuction (PN/PO)
   and Cancelled (CN) status codes surfacing from TRN_DOC_HEADER.AUCTION_STATUS_ID. */
.pill-review    { background: var(--se-warn-50);   color: var(--se-warn); }
.pill-cancelled { background: #FBE9EA;             color: #8B2E36; }

/* Type direction tag — inline icon+label rendered in the Type column of the RFQ
   listing. Reserves the pill family for Status which carries more operational
   weight (§2J handoff). */
.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 12px;
}
.type-tag i { font-size: 14px; }
.type-tag--reverse { color: var(--se-success); }
.type-tag--forward { color: var(--se-danger); }

/* Filter-bar controls — additions the RFQ listing needs. Sit alongside CD's
   .filter-select / .search. */
.filter-bar .filter-multi {
  height: 34px;
  overflow-y: auto;
  min-width: 130px;
}
.filter-bar .filter-date {
  height: 34px;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  padding: 0 10px;
  font-size: 13px;
  background: #FFF;
  color: var(--se-ink);
}

/* Chip strip above the table showing active filters. Each chip's × is a plain
   anchor (server-authored href) so the removal happens via full navigation,
   not the client-only DOM removal in admin.js. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 4px;
}
.active-filters .chip { cursor: default; }
.active-filters .chip .chip-remove {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0;
  line-height: 0;
  border-radius: 3px;
}
.active-filters .chip .chip-remove:hover { background: rgba(0,0,0,.06); }
.active-filters .chip .chip-remove i { font-size: 14px; }

/* Row description cell — ellipsis on one line; full text stays available on
   hover via title attr set by the ItemTemplate. */
.rfq-desc {
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty-state CTA row — hosts the "Clear filters" button in the filtered-empty
   variant. Unfiltered-empty variant has no CTA. */
.empty-hero .empty-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Two-col detail layout */
.detail-two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) { .detail-two-col { grid-template-columns: 1fr; } }

/* Timeline (RFX activity) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 22px 28px;
  border-left: 2px solid var(--se-line);
  margin-left: 8px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #FFF; border: 2px solid var(--se-blue);
}
.timeline li.done::before { background: var(--se-success); border-color: var(--se-success); }
.timeline li.warn::before { background: var(--se-red); border-color: var(--se-red); }
.timeline .t-title { font-weight: 600; font-size: 13px; }
.timeline .t-meta { color: var(--se-ink-3); font-size: 12px; margin-top: 2px; }

/* Q&A thread */
.qa-item {
  padding: 16px 18px;
  border-bottom: 1px solid var(--se-line-2);
}
.qa-item:last-child { border-bottom: none; }
.qa-q {
  display: flex; gap: 10px; align-items: flex-start;
}
.qa-q .badge-q {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--se-blue-50); color: var(--se-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.qa-q strong { font-weight: 600; }
.qa-q .qa-who { color: var(--se-ink-3); font-size: 12px; margin-top: 2px; }
.qa-a {
  margin-top: 10px; padding: 12px 14px;
  background: var(--se-bg);
  border-radius: var(--se-radius);
  display: flex; gap: 10px;
}
.qa-a .badge-a {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--se-success-50); color: var(--se-success);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.qa-a .qa-who { color: var(--se-ink-3); font-size: 12px; margin-top: 2px; }
.qa-visibility {
  margin-left: auto;
  font-size: 11px;
  color: var(--se-ink-3);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Documents grid */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--se-line-2);
}
.doc-list li:last-child { border-bottom: none; }
.doc-icon {
  width: 36px; height: 36px; border-radius: var(--se-radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--se-blue-50); color: var(--se-blue);
  flex-shrink: 0;
}
.doc-icon.pdf { background: var(--se-danger-50); color: var(--se-danger); }
.doc-icon.xls { background: var(--se-success-50); color: var(--se-success); }
.doc-icon.doc { background: var(--se-blue-50); color: var(--se-blue); }
.doc-name { font-weight: 600; font-size: 13px; }
.doc-meta { color: var(--se-ink-3); font-size: 12px; }
.doc-actions { margin-left: auto; display: flex; gap: 4px; }

/* Score bar (used in supplier response comparison) */
.score-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--se-line-2);
  border-radius: 3px;
  overflow: hidden;
}
.score-bar > span {
  display: block; height: 100%;
  background: var(--se-blue);
  border-radius: 3px;
}
.score-bar.best > span { background: var(--se-success); }
.score-bar.worst > span { background: var(--se-red); }
.score-cell { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.score-cell .score-num { font-weight: 700; font-size: 13px; width: 40px; text-align: right; }

/* Award ribbon on a row */
.award-ribbon {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(90deg, #FEF7CD, #FEE9A1);
  color: #7A5B00;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  margin-left: 6px;
}

/* Scrollbar tidy */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #16244A; border-radius: 3px; }

/* ---------- Roles + Users admin (Admin/RoleList, RoleDetail, UserList, UserDetail) ---------- */
/* Widths kept relative so the table still scrolls inside .card on narrow viewports. */
.col-role-name { width: 26%; }
.col-role-desc { width: 32%; }
.col-count     { width: 8%; text-align: right; }
.col-status    { width: 12%; text-align: center; }
.col-created   { width: 12%; }

.cell-center   { text-align: center; }

.pill-locked   { background: #E6E8EC; color: #52606D; }

.form-checkbox { margin-top: 6px; }

.empty-inline {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--se-bg);
  border: 1px dashed var(--se-line); border-radius: var(--se-radius);
  color: var(--se-ink-3); font-size: 13px;
}
.empty-inline i { font-size: 18px; }

.field-label-static {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--se-ink-3); text-transform: uppercase; letter-spacing: .04em;
}
.field-value-static {
  margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--se-ink);
  word-break: break-word;
}
.field-value-static.mono { font-family: ui-monospace, Consolas, monospace; font-weight: 500; }

.alert-strip {
  margin: 12px 22px 0;
  padding: 10px 14px;
  background: var(--se-blue-50); color: var(--se-blue);
  border: 1px solid var(--se-blue); border-radius: var(--se-radius);
  font-size: 13px;
}

.pager-page { cursor: default; }

/* Permission editor — categorized checkbox list under the Permissions section. */
.perm-group + .perm-group { margin-top: 16px; }
.perm-group-title {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  color: var(--se-ink-3); text-transform: uppercase; letter-spacing: .04em;
}
.perm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.perm-list li { padding: 0; }
.perm-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--se-line);
  border-radius: var(--se-radius); background: #FFF; cursor: pointer;
  font-size: 13px;
}
.perm-check input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.perm-label { flex: 1; color: var(--se-ink); font-weight: 500; }
.perm-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; color: var(--se-ink-3);
  background: var(--se-bg); padding: 2px 6px; border-radius: 4px;
}

/* ---------- Audit history (Gap 6) ---------- */
.audit-history { margin-top: 4px; }
.audit-history-head { margin-bottom: 12px; }
.audit-history-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--se-line); border-radius: var(--se-radius); }
.audit-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: #FFF;
}
.audit-table th {
  text-align: left; padding: 8px 10px;
  background: var(--se-bg); border-bottom: 1px solid var(--se-line);
  font-weight: 600; color: var(--se-ink-3);
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
  white-space: nowrap;
}
.audit-table td { padding: 8px 10px; border-top: 1px solid var(--se-line); vertical-align: top; }
.audit-table tr:first-child td { border-top: 0; }
.audit-table .col-when { white-space: nowrap; width: 160px; }
.audit-when-abs { display: block; color: var(--se-ink); font-weight: 500; }
.audit-when-rel { display: block; color: var(--se-ink-3); font-size: 11px; margin-top: 2px; }
.audit-table .col-actor { width: 180px; }
.audit-actor-name { display: block; color: var(--se-ink); font-weight: 500; }
.audit-actor-email { display: block; color: var(--se-ink-3); font-size: 11px; margin-top: 2px; }
.audit-table .col-action { width: 200px; }
.audit-action {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; color: var(--se-ink);
  background: var(--se-bg); padding: 2px 6px; border-radius: 4px;
}
.audit-table .col-result { width: 90px; }
.audit-result {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.audit-result-success { background: #E6F4EA; color: #1E7B37; }
.audit-result-failed  { background: #FCE8E6; color: #A50E0E; }
.audit-result-blocked { background: #FEF7E0; color: #8D6B00; }
.audit-result-unknown { background: var(--se-bg); color: var(--se-ink-3); }
.audit-table .col-details { color: var(--se-ink-2); word-break: break-word; }
.audit-table .col-source { width: 140px; }
.audit-ip {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; color: var(--se-ink-3);
}
.empty-inline {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--se-bg); border-radius: var(--se-radius);
  color: var(--se-ink-3); font-size: 13px;
}
.empty-inline i { font-size: 16px; }

/* ---------- Requisition Detail — label + value view grid ---------- */
.req-kv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 20px;
}
@media (max-width: 1100px) { .req-kv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .req-kv-grid { grid-template-columns: 1fr; } }
.req-kv-grid .req-kv-wide { grid-column: span 2; }
@media (max-width: 640px)  { .req-kv-grid .req-kv-wide { grid-column: auto; } }
.req-kv .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--se-ink-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.req-kv .val {
  font-size: 14px;
  color: var(--se-ink);
  min-height: 22px;
  word-break: break-word;
}
.req-kv .val a { color: var(--se-primary); }
.req-kv .sub {
  font-size: 12px;
  color: var(--se-ink-3);
  margin-top: 2px;
}

/* ---------- Bulk upload wizard (BuyerProductMaster mdlBulkUpload) ---------- */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important;
                   padding: 0 !important; margin: -1px !important; overflow: hidden !important;
                   clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

.bulk-stages .bulk-stage { color: var(--se-ink-4); display: inline-flex; align-items: center; }
.bulk-stages .bulk-stage.active { color: var(--se-ink); }
.bulk-stages .bulk-stage.done   { color: var(--se-success); }
.bulk-stages .bulk-stage .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
                                background: var(--se-ink-4); }
.bulk-stages .bulk-stage.active .dot { background: var(--se-primary); }
.bulk-stages .bulk-stage.done   .dot { background: var(--se-success); }

.bulk-dropzone { display: block; padding: 32px 20px; text-align: center; cursor: pointer;
                 border: 2px dashed var(--se-line); border-radius: 8px; background: var(--se-bg);
                 transition: background .15s, border-color .15s; }
.bulk-dropzone:hover, .bulk-dropzone.dragover { border-color: var(--se-primary); background: var(--se-primary-50, #eef2ff); }

/* ------------------------------------------------------------------
   Auth-page error panel (SignIn / SignInWithCode / ChangePassword)

   All three pages have carried CssClass="sz-error" since they shipped
   and the class was never defined anywhere. The panel rendered — with
   the right message in it — as an unstyled div: black body text, no
   colour, no border, indistinguishable from the surrounding copy. A
   vendor typing the wrong password saw the form come back looking
   untouched, which reads as "nothing happened" rather than "rejected".
   ------------------------------------------------------------------ */
.sz-error {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 14px; padding: 11px 14px;
    border: 1px solid var(--se-danger);
    border-left-width: 3px;
    border-radius: var(--se-radius, 6px);
    background: var(--se-danger-50, #FEEAE7);
    color: var(--se-danger);
    font-size: 13px; font-weight: 600; line-height: 1.45;
}
.sz-error::before {
    content: "\eca1";                 /* remixicon ri-error-warning-line */
    font-family: "remixicon";
    font-weight: 400; font-size: 16px; line-height: 1.2; flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Alerts, re-toned to the product palette.

   Bootstrap 5.3's subtle alert scheme resolves danger text to #58151C
   and success to #0A3622 — both so close to the body ink (#101828)
   that a failure message reads as ordinary paragraph text with a
   faint tint behind it. Next to the app's own #B42318 / #12805C it
   looks like an unstyled block, which is exactly how it was reported.

   Only the four colour variables are overridden; the .alert box model
   (padding, radius, border width) stays bootstrap's.
   ------------------------------------------------------------------ */
.alert { border-left-width: 3px; font-size: 13px; font-weight: 500; }
.alert-danger {
    --bs-alert-color: var(--se-danger);
    --bs-alert-bg: var(--se-danger-50, #FEEAE7);
    --bs-alert-border-color: var(--se-danger);
    --bs-alert-link-color: var(--se-danger);
}
.alert-success {
    --bs-alert-color: var(--se-success);
    --bs-alert-bg: var(--se-success-50, #E6F5EF);
    --bs-alert-border-color: var(--se-success);
    --bs-alert-link-color: var(--se-success);
}
.alert-warning {
    --bs-alert-color: var(--se-warn);
    --bs-alert-bg: var(--se-warn-50, #FEF3E6);
    --bs-alert-border-color: var(--se-warn);
    --bs-alert-link-color: var(--se-warn);
}
.alert-info {
    --bs-alert-color: var(--se-blue);
    --bs-alert-bg: var(--se-blue-50);
    --bs-alert-border-color: var(--se-blue);
    --bs-alert-link-color: var(--se-blue);
}

/* ------------------------------------------------------------------
   Vendor invitation banner (Controls/InvitationBannerControl.ascx)
   The class existed on every state from the day it shipped and was
   never defined; each state carried its own hardcoded hex inline, in
   a palette that belonged to no design system on this page.
   ------------------------------------------------------------------ */
.invite-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; margin-bottom: 16px;
    border: 1px solid var(--se-line);
    border-left-width: 3px;
    border-radius: var(--se-radius-lg, 10px);
    background: var(--se-surface);
    font-size: 13px;
}
.invite-banner > i { font-size: 18px; flex-shrink: 0; }
.invite-banner .lbl { font-weight: 700; color: var(--se-ink); }
.invite-banner .det { color: var(--se-ink-2); }
.invite-banner .when {
    margin-left: auto; font-size: 11.5px; color: var(--se-ink-3);
    font-variant-numeric: tabular-nums;
}
.invite-banner--accepted {
    border-color: var(--se-success);
    background: var(--se-success-50, #E6F5EF);
}
.invite-banner--accepted > i { color: var(--se-success); }