/* =====================================================================
   Alliance Portal — global theme reskin.
   Loaded after style.css so these rules win. Maps the Alliance Portal
   design system onto the existing dashboard markup (rail, topbar, panels,
   buttons, inputs, the Store Directory page, etc.). New markup can also
   use the `.alliance-*` utility classes verbatim below.
   ===================================================================== */

/* ==================== ALLIANCE TOKENS ==================== */
:root {
  /* Brand colors */
  --alliance-primary:    #1B4278;
  --alliance-accent:     #009FDB;
  --alliance-dark:       #0a0a0a;
  --alliance-light-bg:   #FAFAFA;
  --alliance-text:       #1B4278;
  --alliance-text-light: #ffffff;
  --alliance-text-muted: #5b6372;

  /* Status */
  --alliance-success:    #94C83D;
  --alliance-error:      #CC4B37;
  --alliance-warning:    #F26522;
  --alliance-info:       #6EC1E4;

  /* Gradients */
  --sidebar-gradient:    linear-gradient(195deg, #1B4278, #0a0a0a);
  --header-gradient:     linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);

  /* Typography */
  --font-family:         'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* Layout — matches the MyHub Manager portal: 280px fixed sidebar, 64px header. */
  --border-radius:       4px;
  --sidebar-width:       280px;
  --header-height:       64px;
  /* Alliance Mobile logo render size (square SVG). The collapsed desktop
     rail is set to this same value so the thin strip matches the logo width. */
  --ops-brand-size:      46px;
}

/* ==================== EXISTING-TOKEN OVERRIDES ====================
   Many components consume these original CSS variables; remap them to
   Alliance values so the reskin reaches the existing markup. */
:root {
  /* Layout */
  --rail-width:        var(--sidebar-width);
  --topbar-height:     var(--header-height);

  /* Surfaces */
  --bg:                #FFFFFF;
  --bg-primary:        #FFFFFF;
  --bg-surface:        #FFFFFF;
  --bg-elevated:       #FFFFFF;
  --bg-panel:          #FFFFFF;
  --bg-panel-hover:    #f9f9fb;
  --bg-hover:          #f4f4f8;
  --bg-soft:           #f6f7f8;

  /* Brand chrome */
  --chrome-rail:       #1B4278;
  --chrome-topbar:     #1B4278;

  /* Borders */
  --border:            #e5e5e5;
  --border-soft:       #dee1e7;
  --border-light:      #d5d5d5;
  --border-accent:     #009FDB;

  /* Text */
  --text-primary:      #000000;
  --text-secondary:    #6b7280;
  --text-muted:        #5b6372;

  /* Accent */
  --accent:            #009FDB;
  --accent-light:      #36a3d9;
  --accent-dim:        rgba(0, 159, 219, 0.12);

  /* Status (re-themed) */
  --success:           #94C83D;
  --success-dim:       rgba(148, 200, 61, 0.14);
  --green:             #94C83D;
  --green-dim:         rgba(148, 200, 61, 0.14);
  --warning:           #F26522;
  --warning-dim:       rgba(242, 101, 34, 0.14);
  --amber:             #F26522;
  --amber-dim:         rgba(242, 101, 34, 0.14);
  --critical:          #CC4B37;
  --critical-dim:      rgba(204, 75, 55, 0.14);
  --red:               #CC4B37;
  --red-dim:           rgba(204, 75, 55, 0.14);

  /* Body font alias used by existing CSS */
  --font-body:         var(--font-family);
}

/* ==================== GLOBAL ==================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  /* Use the shorthand so the original dark radial-gradient `background` is fully
     reset. #FAFAFA matches the MyHub Manager portal's page background. */
  background: var(--alliance-light-bg);
  color: #000000;
}

/* The original ambient overlay tints the page with subtle blue/purple radials.
   Kill it on the light theme so pages render on pure white. */
.ambient-bg { background: none; }

button, input, select, textarea {
  font-family: var(--font-family);
}

strong, b { font-weight: var(--font-weight-bold); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  color: var(--alliance-primary);
}

a {
  color: var(--alliance-accent);
  transition: color 0.2s ease-in-out;
}
a:hover { color: #0078a8; }

/* ==================== SIDE RAIL (existing `.command-rail`) ==================== */
/* Colors/gradient apply on every viewport. Width, label display, and the
   alignment of nav links are scoped to desktop so the existing mobile
   bottom-bar (≤767px) stays icon-only and full-width. */
.command-rail {
  background: var(--sidebar-gradient);
  color: var(--alliance-text-light);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
}

/* Desktop: the side rail and the top bar are two separate gradients that both
   start at the same Alliance navy (#1B4278) in the shared top-left corner, so
   they already colour-match there. The only thing breaking the blend was the
   base stylesheet's 1px grey `border-right` (var(--border-soft)) on the rail —
   a hard grey seam running between the blue rail and the blue topbar. Drop it
   on desktop so the two surfaces flow into one another as a smooth gradient;
   the rail's own right-side box-shadow still separates it from the white page
   content below the header. */
@media (min-width: 768px) {
  .command-rail {
    border-right: none;
  }

  /* Match the MyHub Manager portal sidebar items: 24px icons
     (MuiSvgIcon fontSizeMedium) and 1rem / 400 / 1.5 labels
     (MuiTypography body1), with a roomier icon→label gap and
     taller rows to fit the larger type. */
  .command-rail .rail-icon {
    width: 24px;
    height: 24px;
  }

  .command-rail .rail-link,
  .command-rail .rail-group-btn {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    gap: 0.75rem;
    min-height: 44px;
  }

  .command-rail .rail-label {
    font-size: 1rem;
  }
}

.rail-brand img { filter: brightness(0) invert(1); }

.rail-link,
.rail-group-btn { color: rgba(255, 255, 255, 0.86); }

.rail-link:hover,
.rail-group-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Nav rail icons inherit the white-ish link color. */

.rail-link.active {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  box-shadow: none;
}

.rail-link.active::before { background: var(--alliance-accent); }

.rail-submenu {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

/* Mobile bottom-rail submenu (the chat-bubble popout above the bottom
   nav). Styled to match the desktop collapsed-rail flyout: Alliance navy
   bubble, translucent white border, 14px radius, white items. */
@media (max-width: 767px) {
  .rail-submenu {
    /* Soft navy gradient, top→bottom so the bottom edge stays a uniform
       #122c52 — the solid tail hangs off that edge and must match it. */
    background: linear-gradient(180deg, #1B4278 0%, #122c52 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.45);
  }
  .rail-submenu::after {
    background: #122c52;
    border-right-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
  }
  .rail-submenu .rail-link,
  .rail-submenu .rail-link:visited {
    color: #FFFFFF;
    background: transparent;
  }
  .rail-submenu .rail-link:hover,
  .rail-submenu .rail-link:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
  }
  .rail-submenu .rail-link.active {
    background: var(--alliance-accent);
    color: #FFFFFF;
    box-shadow: none;
  }
  /* No indicator dots in the bubble (matches the desktop flyout), and drop
     the left padding that reserved space for them. */
  .rail-submenu .rail-link::after {
    display: none;
  }
  .rail-submenu .rail-link {
    padding-left: 0.75rem;
    /* The icon-only bottom bar zeroes the link gap — restore breathing room
       between the icon and the page name inside the bubble. */
    gap: 0.7rem;
  }
  .rail-submenu .rail-icon {
    color: inherit;
  }
}

/* ==================== TOP HEADER (existing `.topbar`) ==================== */
.topbar {
  background: var(--header-gradient);
  color: var(--alliance-text-light);
  border-bottom: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  height: var(--header-height);
}

/* The base stylesheet draws `.topbar::before` to extend the topbar's bottom
   border-rule across the side rail (the strip under the Alliance logo). This
   theme removes the topbar's own bottom border, so that orphaned 1px line read
   as a stray light-gray bar below the logo on desktop — drop it too. */
.topbar::before {
  display: none;
}

/* Mobile: paint the iOS safe-area at the top of the screen with the
   Alliance navy so the topbar appears to reach the very top, while
   the page body itself stays white (per the Alliance theme).
   - `html { background-color: navy }` fills the area behind the
     topbar (the safe-area-inset-top region) AND the safe-area-inset-
     bottom region below the bottom rail — this is what shows
     through under the iPhone status bar and home indicator.
   - `body` keeps the existing white Alliance background, but uses
     `background-clip: content-box` so its white only paints inside
     the content area (above body's padding-bottom for the rail).
     The padding region shows html's navy, which means the
     safe-area sliver below the rail is navy no matter how iOS
     positions a fixed `bottom: 0` element.
   - .topbar height/padding re-includes env(safe-area-inset-top) so
     its blue gradient covers the top sliver content-side. The
     desktop `.topbar { height: var(--header-height) }` rule above
     otherwise wins on cascade and strips the inset. */
@media (max-width: 767px) {
  /* iOS paints BOTH safe-area letterboxes (under the status bar and
     under the home indicator) with the ROOT element's background.
     This single declaration is what actually keeps the home-indicator
     strip navy instead of white — !important so no later rule or a
     stale cached stylesheet can drop it back to the default. */
  html {
    background-color: var(--alliance-primary) !important;
  }
  body {
    background: #FFFFFF;
    background-clip: content-box;
  }
  .topbar {
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
  }
}

.topbar,
.topbar .topbar-title,
.topbar .topbar-subtitle,
.topbar .topbar-brand,
.topbar .topbar-context-period,
.topbar a,
.topbar button {
  color: var(--alliance-text-light);
}

/* Hide the reporting-period/date row that sits under OPS-COMMAND. */
.topbar .topbar-context-period,
#pageContextPeriodLabel {
  display: none !important;
}

/* Vertically center every topbar child and its descendants. */
.topbar { align-items: center; }
.topbar-left,
.topbar-right,
.topbar-store-calendar-cluster,
.topbar-period-toolbar,
.topbar-period-toolbar .inventory-period-dropdown,
.topbar-user-cluster {
  display: flex;
  align-items: center;
}

/* Authenticated user + sign-out (far right of the topbar). */
.topbar-user-cluster {
  gap: 8px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.topbar-user-cluster[hidden] { display: none !important; }

.topbar-user-email {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  font-size: 0.82rem;
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-size: 0.82rem;
}

.topbar-signout-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 640px) {
  .topbar-user-email { display: none; }
  .topbar-signout-btn__label { display: none; }
  .topbar-signout-btn { padding: 6px 8px; }
}

/* Title block stacks OPS-COMMAND on top of the page subtitle, left-aligned. */
.topbar-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.topbar .topbar-subtitle {
  text-align: left;
  margin: 0;
}

/* =====================================================================
   ITEM LOOKUP tile — its own section above the In Transit / Delivered
   carousel. Uses the shared backoffice-tile look (white card + navy
   gradient header) inherited via .inventory-snapshot-head.
   ===================================================================== */
.inventory-item-lookup-tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1rem;
}

.inventory-item-lookup-tile:hover {
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px;
}

.inventory-item-lookup-tile__body {
  padding: 16px 20px;
  display: flex;
  align-items: center;
}

.inventory-item-lookup-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--alliance-text-muted);
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.inventory-item-lookup-trigger:hover,
.inventory-item-lookup-trigger:focus-visible {
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
  outline: none;
  background: #FFFFFF;
}

.inventory-item-lookup-trigger__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--alliance-accent);
}

.inventory-item-lookup-trigger__label {
  flex: 1;
}

/* =====================================================================
   OUTSTANDING SHRINK table — mirrors the In Transit / Delivered look.
   Navy gradient title band (inherited from the shared tile system),
   darker navy column header bar, alternating row backgrounds, and
   light row + column dividers.
   ===================================================================== */

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th {
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th.shrink-sortable:hover {
  color: #FFFFFF;
}

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th .inventory-dops-sort-trigger,
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th .inventory-dops-sort-label,
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th .inventory-filter-btn,
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th .inventory-column-title,
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th .dops-sort-arrow,
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table thead th .shrink-sort-arrow {
  color: #FFFFFF;
}

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table tbody tr {
  background: #FFFFFF;
  border-bottom: none;
}
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table tbody tr:hover {
  background: #eef2f8;
}

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table tbody td {
  color: #000000;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table tbody td:first-child {
  color: #000000;
}
#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-table tbody td:last-child {
  border-right: none;
}

/* =====================================================================
   NONSELLABLE INVENTORY, CARTONS NOT RECEIVED, STS TRANSFERS tables
   Same In Transit / Outstanding Shrink pattern: darker navy column bar,
   alternating row backgrounds, light dividers.
   ===================================================================== */

#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}

#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead th,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead th {
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th .inventory-dops-sort-trigger,
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th .inventory-dops-sort-label,
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th .inventory-filter-btn,
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th .inventory-column-title,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead th .inventory-dops-sort-trigger,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead th .inventory-dops-sort-label,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead th .inventory-filter-btn,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead th .inventory-column-title,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead th .inventory-dops-sort-trigger,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead th .inventory-dops-sort-label,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead th .inventory-filter-btn,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead th .inventory-column-title {
  color: #FFFFFF;
}

#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th .dops-sort-arrow,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table thead th .dops-sort-arrow,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table thead th .dops-sort-arrow {
  color: #FFFFFF;
}

#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody tr,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table tbody tr,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table tbody tr {
  background: #FFFFFF;
  border-bottom: none;
}
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody tr:nth-child(even),
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table tbody tr:nth-child(even),
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody tr:hover,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table tbody tr:hover,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table tbody tr:hover {
  background: #eef2f8;
}

#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody td,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table tbody td,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table tbody td {
  color: #000000;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody td:first-child,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table tbody td:first-child,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table tbody td:first-child {
  color: #000000;
}
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody td:last-child,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-table tbody td:last-child,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-table tbody td:last-child {
  border-right: none;
}

/* =====================================================================
   INLINE ITEM LOOKUP BUBBLE — the popout markup lives inside the Item
   Lookup tile body. Override its fixed positioning so the compact row
   renders inline like a normal tile body. The fullscreen expanded state
   (added by JS via .inventory-lookup-bubble-root--expanded) restores the
   fixed positioning so the results overlay still works.
   ===================================================================== */

.inventory-item-lookup-tile__body {
  padding: 16px 20px;
  display: block;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root,
.inventory-item-lookup-tile .inventory-lookup-bubble-root[hidden] {
  display: block !important;
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  pointer-events: auto;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root__backdrop {
  display: none !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-shell {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: auto;
}

.inventory-item-lookup-tile .inventory-lookup-bubble {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  animation: none !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__head-strip,
.inventory-item-lookup-tile .inventory-lookup-bubble__arrow {
  display: none !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__compact-row {
  display: flex !important;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__input {
  flex: 1 !important;
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  color: var(--alliance-primary) !important;
  padding: 10px 12px !important;
  font-size: 0.95rem !important;
  font-family: var(--font-family) !important;
  height: 40px;
  box-shadow: none !important;
  transition: border-color 0.2s;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__input::placeholder {
  color: var(--alliance-text-muted) !important;
  opacity: 1;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__input:focus {
  border-color: var(--alliance-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.15) !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__search-btn,
.inventory-item-lookup-tile .inventory-lookup-bubble__export-btn {
  background: var(--alliance-primary) !important;
  border: 1px solid var(--alliance-primary) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  width: 40px;
  height: 40px;
  flex: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  transition: background 0.2s, border-color 0.2s;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__search-btn:hover,
.inventory-item-lookup-tile .inventory-lookup-bubble__export-btn:hover {
  background: var(--alliance-accent) !important;
  border-color: var(--alliance-accent) !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble__search-btn svg,
.inventory-item-lookup-tile .inventory-lookup-bubble__export-btn svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Restore fullscreen layout when the bubble is in the expanded state */
.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded,
.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded[hidden] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9450 !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble-root__backdrop {
  display: block !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble-shell {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px !important;
  padding: 0 1rem 1rem !important;
  overflow: hidden;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__head-strip {
  display: block !important;
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  margin: 0 -1rem 0.65rem !important;
  padding: 0 !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__title-bar {
  background: transparent !important;
  border-bottom: none !important;
  color: #FFFFFF !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__title,
.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__title-icon {
  color: #FFFFFF !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__close-corner {
  color: #FFFFFF !important;
}

.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__compact-row {
  padding: 0.5rem 0 !important;
}

/* =====================================================================
   ITEM LOOKUP — tile head + expanded results chrome (meta line, results
   table, filter buttons, filter dropdowns, sort buttons, footer +
   pagination). The inline compact row already uses the Alliance theme
   above; this section themes everything users see after they hit Search
   and the bubble expands into the fullscreen results view.
   ===================================================================== */

/* The tile head reuses .inventory-snapshot-head; keep the navy gradient
   band + white Montserrat heading even when the bubble is collapsed. */
.inventory-item-lookup-tile .inventory-item-lookup-tile__head.inventory-snapshot-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0;
}

.inventory-item-lookup-tile .inventory-item-lookup-tile__head h2 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.inventory-item-lookup-tile .inventory-item-lookup-tile__head .inventory-table-kpi-icon {
  color: #009fdb !important;
}

.inventory-item-lookup-tile .inventory-item-lookup-tile__head .inventory-table-kpi-icon svg {
  stroke: #009fdb;
}

/* Meta line ("Search '...' in ..." search summary) inside the expanded
   results. Hidden entirely when empty so there's no stray gray slab. */
.inventory-item-lookup-tile .inventory-raw-search__meta,
.inventory-lookup-bubble__expanded .inventory-raw-search__meta {
  color: var(--alliance-text-muted) !important;
  background: #f4f6fa;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-weight: 500;
}

.inventory-item-lookup-tile .inventory-raw-search__meta:empty,
.inventory-lookup-bubble__expanded .inventory-raw-search__meta:empty {
  display: none !important;
}

/* Results table wrap — keep the surface white, allow horizontal +
   vertical scrolling so the wide column list (12 columns at ~10-15rem
   each) reaches the right edge instead of being clipped. */
.inventory-item-lookup-tile .inventory-raw-search__table,
.inventory-lookup-bubble__expanded .inventory-raw-search__table {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* The table itself needs to consume its content width so the wrap's
   overflow has something to scroll. */
.inventory-item-lookup-tile .inventory-raw-search__table .inventory-table,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-table {
  width: max-content !important;
  min-width: 100% !important;
}

/* Empty / loading "No search yet." cell inside the results body. */
.inventory-item-lookup-tile .inventory-raw-search__table tbody td[colspan] {
  color: var(--alliance-text-muted) !important;
  background: #FFFFFF !important;
}

/* Column header bar inside the lookup results — beat the legacy
   #tab-inventory .inventory-table thead rule (rgba(32,28,8,0.95))
   with the navy gradient, and use the slim padding from the
   Outstanding Shrink table so the bar height matches. */
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  backdrop-filter: none !important;
}

#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th {
  background: transparent !important;
  color: #FFFFFF !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 0.45rem 0.75rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

@media (min-width: 769px) {
  #tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th,
  #tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th {
    padding: 0.3rem 0.34rem !important;
    letter-spacing: 0.035em;
  }
}

#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th::after,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th::after {
  background: rgba(255, 255, 255, 0.22) !important;
}

#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-filter-btn,
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-column-title,
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-dops-sort-trigger,
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-dops-sort-label,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-filter-btn,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-column-title,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-dops-sort-trigger,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-dops-sort-label {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: inherit;
  text-transform: inherit;
}

.inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-filter-btn:hover,
.inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-filter-btn.active,
.inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-filter-btn:hover,
.inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-filter-btn.active {
  color: var(--alliance-accent) !important;
}

.inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-sort-btn,
.inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-sort-btn {
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-sort-btn:hover,
.inventory-item-lookup-tile .inventory-raw-search__table thead th .inventory-sort-btn.active,
.inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-sort-btn:hover,
.inventory-lookup-bubble__expanded .inventory-raw-search__table thead th .inventory-sort-btn.active {
  background: var(--alliance-accent) !important;
  border-color: var(--alliance-accent) !important;
  color: #FFFFFF !important;
}

/* Body rows — match the In Transit column theme: alternating white / soft
   lavender rows, black text, light column-divider borders (the base
   .inventory-table td ships var(--text-secondary) gray, which is unreadable
   on the white results body). */
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table tbody tr,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table tbody tr {
  background: #FFFFFF !important;
}
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table tbody tr:nth-child(even),
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table tbody tr:hover,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table tbody tr:hover {
  background: #eef2f8 !important;
}
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table tbody td,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table tbody td {
  color: #000000 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}
#tab-inventory .inventory-item-lookup-tile .inventory-raw-search__table tbody td:last-child,
#tab-inventory .inventory-lookup-bubble__expanded .inventory-raw-search__table tbody td:last-child {
  border-right: none !important;
}

/* Filter-menu dropdowns that pop out of each column header — switch from
   the dark glass to a white card with navy text. */
.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-menu,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-menu {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px !important;
  color: #000000 !important;
}

.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-search,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-search {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-search:focus,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-search:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.18);
}

.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-menu-actions button,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-menu-actions button {
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  padding: 4px 10px;
  font-weight: 600;
  cursor: pointer;
}

.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-menu-actions button:hover,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-menu-actions button:hover {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

/* Individual filter rows inside the menu. */
.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-menu label,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-menu label {
  color: var(--alliance-primary);
}

.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-menu label:hover,
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-menu label:hover {
  background: #eef2f8;
}

.inventory-item-lookup-tile .inventory-raw-search__table .inventory-filter-menu input[type="checkbox"],
.inventory-lookup-bubble__expanded .inventory-raw-search__table .inventory-filter-menu input[type="checkbox"] {
  accent-color: var(--alliance-primary);
}

/* Footer row (count + pagination) below the expanded results table. */
.inventory-item-lookup-tile .inventory-raw-search__footer,
.inventory-lookup-bubble__expanded .inventory-raw-search__footer {
  color: var(--alliance-text-muted) !important;
  background: #FFFFFF;
  border-top: 1px solid #e2e8f0;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 4px 4px;
}

.inventory-item-lookup-tile .inventory-raw-search__footer .inventory-pagination,
.inventory-lookup-bubble__expanded .inventory-raw-search__footer .inventory-pagination {
  background: transparent;
}

.inventory-item-lookup-tile .inventory-raw-search__footer .table-pg__arrow,
.inventory-item-lookup-tile .inventory-raw-search__footer .table-pg__num,
.inventory-lookup-bubble__expanded .inventory-raw-search__footer .table-pg__arrow,
.inventory-lookup-bubble__expanded .inventory-raw-search__footer .table-pg__num {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

.inventory-item-lookup-tile .inventory-raw-search__footer .table-pg__arrow:hover:not([disabled]),
.inventory-lookup-bubble__expanded .inventory-raw-search__footer .table-pg__arrow:hover:not([disabled]) {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

.inventory-item-lookup-tile .inventory-raw-search__footer .table-pg__num:hover:not(.is-active),
.inventory-lookup-bubble__expanded .inventory-raw-search__footer .table-pg__num:hover:not(.is-active) {
  background: #eef2f8 !important;
  border-color: var(--alliance-accent) !important;
}

.inventory-item-lookup-tile .inventory-raw-search__footer .table-pg__num.is-active,
.inventory-lookup-bubble__expanded .inventory-raw-search__footer .table-pg__num.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* =====================================================================
   TICKET TRACKER (ARIT) PAGE — #tab-arit. Apply the Alliance theme to
   every section: KPI strip, workspace, table panel, filters, search,
   freshness label, refresh button, table chrome, footer + pagination,
   and the ticket detail modal (hero, stats, detail tabs, timeline,
   email cards, notes, lifecycle panels).

   Treasury already has #treasury-root .arit-* overrides; the Ticket
   Tracker reuses the same .arit-* classes, so we re-scope them here
   under #tab-arit so they pick up the same theme without leaking
   across pages.
   ===================================================================== */

#tab-arit,
#tab-arit.arit-page {
  background: transparent;
  color: #000000;
  --aw-accent: var(--alliance-accent, #009FDB);
}

#tab-arit h1,
#tab-arit h2,
#tab-arit h3,
#tab-arit h4 {
  color: var(--alliance-primary);
}

#tab-arit a {
  color: var(--alliance-accent);
}

#tab-arit a:hover {
  color: var(--alliance-primary);
}

/* ---------- KPI strip ---------- */
#tab-arit .arit-kpi-card {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px !important;
  color: #000000;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Base style.css ships a tight 1.32rem icon column + 0.86rem
     number font + aspect-ratio 5/2; the Alliance theme blows the
     icon up to 40px and the number to 1.4rem, which then overlap
     and clip. Re-tune the grid so the icon has its own column,
     the headline number sits next to it without overlap, and the
     card can grow tall enough to fit the larger type. */
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 0.7rem !important;
  align-items: center !important;
  padding: 0.65rem 0.85rem 0.85rem !important;
  aspect-ratio: auto !important;
  min-height: 92px;
}

#tab-arit .arit-kpi-card > div {
  min-width: 0;
}

#tab-arit .arit-kpi-card:hover {
  border-color: var(--alliance-accent) !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px !important;
}

#tab-arit .arit-kpi-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 159, 219, 0.5), transparent) !important;
}

#tab-arit .arit-kpi-card * {
  color: var(--alliance-primary);
}

#tab-arit .arit-kpi-card span:not(.arit-kpi-icon) {
  color: var(--alliance-primary);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#tab-arit .arit-kpi-card small {
  color: var(--alliance-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-arit .arit-kpi-card strong {
  color: var(--alliance-primary);
  font-size: 1.4rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The "Latest Ticket" card shows a relative date string ("Yesterday",
   "2 days ago") instead of a count; let it sit at a smaller weight
   without truncating. */
#tab-arit .arit-kpi-card strong#sourceKpiLatest-arit {
  font-size: 1rem;
  font-weight: 700;
}

#tab-arit .arit-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--alliance-primary);
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* The icon SVGs draw with stroke="currentColor" on individual path /
   circle / rect elements. The earlier `#tab-arit .arit-kpi-card *`
   wildcard sets color: alliance-primary on every descendant — that
   wins on the inner elements and makes the stroke draw blue. Force
   white on the icon's entire subtree so currentColor resolves to
   white and the icon paints over the colored tile cleanly. */
#tab-arit .arit-kpi-icon,
#tab-arit .arit-kpi-icon * {
  color: #FFFFFF !important;
}

#tab-arit .arit-kpi-icon svg,
#tab-arit .arit-kpi-icon svg * {
  stroke: #FFFFFF !important;
  fill: none;
}

#tab-arit .arit-kpi-icon svg {
  width: 22px;
  height: 22px;
}

#tab-arit .arit-kpi-card--blue .arit-kpi-icon { background: var(--alliance-primary); }
#tab-arit .arit-kpi-card--green .arit-kpi-icon { background: #15803d; }
#tab-arit .arit-kpi-card--orange .arit-kpi-icon { background: #b45309; }
#tab-arit .arit-kpi-card--purple .arit-kpi-icon { background: #6d28d9; }
#tab-arit .arit-kpi-card--slate .arit-kpi-icon { background: #475569; }
#tab-arit .arit-kpi-card--red .arit-kpi-icon { background: #b91c1c; }

/* ---------- Workspace + table panel ---------- */
#tab-arit .arit-workspace,
#tab-arit .arit-table-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  color: #000000;
}

#tab-arit .arit-table-toolbar {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 14px;
}

/* ---------- Status tabs (All / Open / In Progress / Closed) ---------- */
#tab-arit .arit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tab-arit .arit-tab {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#tab-arit .arit-tab:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

#tab-arit .arit-tab.active,
#tab-arit .arit-tab.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* ---------- Filters (select + search + refresh + freshness) ---------- */
#tab-arit .arit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#tab-arit .arit-filters select,
#tab-arit .arit-search input {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  font-size: 0.9rem;
  height: 34px;
}

#tab-arit .arit-filters select:focus,
#tab-arit .arit-search input:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.18);
}

#tab-arit .arit-search input::placeholder {
  color: var(--alliance-text-muted);
  opacity: 1;
}

#tab-arit .arit-search span {
  color: var(--alliance-text-muted);
}

#tab-arit .arit-freshness {
  color: var(--alliance-text-muted);
  font-size: 0.78rem;
}

#tab-arit .arit-freshness[data-state="error"] {
  color: #b91c1c;
}

#tab-arit .arit-freshness[data-state="ok"] {
  color: #15803d;
}

#tab-arit .arit-tool-btn {
  background: var(--alliance-primary) !important;
  border: 1px solid var(--alliance-primary) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  height: 34px;
  transition: background 0.2s, border-color 0.2s;
}

/* Fullscreen-expand control on the Ticket Tracker toolbar — square icon button
   matching the navy Refresh pill. */
#tab-arit .arit-tool-btn--expand {
  width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#tab-arit .arit-tool-btn--expand svg {
  width: 16px;
  height: 16px;
}

#tab-arit .arit-tool-btn:hover {
  background: var(--alliance-accent) !important;
  border-color: var(--alliance-accent) !important;
}

/* ---------- Error banner ---------- */
#tab-arit .arit-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  color: #b91c1c;
  padding: 10px 14px;
}

#tab-arit .arit-error-icon {
  color: #b91c1c;
}

#tab-arit .arit-error-body {
  color: #b91c1c;
}

#tab-arit .arit-error-retry {
  background: #b91c1c;
  border: 1px solid #b91c1c;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 4px 12px;
  font-weight: 600;
  cursor: pointer;
}

#tab-arit .arit-error-retry:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* ---------- Table chrome (matches In Transit pattern) ---------- */
#tab-arit .arit-table-wrap {
  background: #FFFFFF !important;
  border: none;
  border-radius: 4px;
  overflow: hidden;
}

#tab-arit .arit-table {
  /* Paint the navy→black gradient on the TABLE element so it forms ONE
     continuous header bar. Applying it to each <th> (as before) made every
     column its own navy→black slice. The opaque body rows below cover the
     gradient, so it only shows through the transparent header cells. */
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  color: #000000;
}

#tab-arit .arit-table thead th,
#tab-arit .arit-table thead .arit-th-cell {
  /* Transparent so the single table gradient shows through as one bar;
     relative so the column-divider ::after anchors to each cell. */
  background: transparent !important;
  position: relative;
  color: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Match the Treasury tracker header bar height (its cells use this
     same padding) instead of the taller default --arit-spacing-md (1rem). */
  padding: 0.55rem 0.75rem !important;
}

/* White vertical column divider bars between header cells (In Transit look). */
#tab-arit .arit-table thead th:not(:last-child)::after,
#tab-arit .arit-table thead .arit-th-cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

#tab-arit .arit-table thead .arit-th-head,
#tab-arit .arit-table thead .arit-th-title-sort,
#tab-arit .arit-table thead .arit-th-sort-text,
#tab-arit .arit-table thead .arit-th-sort-indicator,
#tab-arit .arit-table thead .arit-th-filter-toggle,
#tab-arit .arit-table thead .arit-th-filter-toggle-icon {
  color: rgba(255, 255, 255, 0.88) !important;
  background: transparent !important;
}

#tab-arit .arit-table thead .arit-th-title-sort:hover .arit-th-sort-text,
#tab-arit .arit-table thead .arit-th-head--sort-active .arit-th-sort-text {
  color: #FFFFFF !important;
}

#tab-arit .arit-table thead .arit-th-head--sort-active .arit-th-sort-indicator,
#tab-arit .arit-table thead .arit-th-filter-toggle[aria-expanded="true"],
#tab-arit .arit-table thead .arit-th-filter-toggle--on {
  color: var(--alliance-accent) !important;
}

#tab-arit .arit-table thead .arit-th-filter-toggle:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

#tab-arit .arit-table thead .arit-th-head--filtered .arit-th-sort-text {
  text-decoration-color: var(--alliance-accent) !important;
}

#tab-arit .arit-table tbody tr {
  background: #FFFFFF !important;
}

#tab-arit .arit-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

#tab-arit .arit-table tbody tr:hover {
  background: #eef2f8 !important;
  cursor: pointer;
}

#tab-arit .arit-table tbody td {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#tab-arit .arit-table tbody td:last-child {
  border-right: none;
}

#tab-arit .arit-row-action {
  background: transparent;
  border: none;
  color: var(--alliance-accent);
  cursor: pointer;
  font-weight: 600;
}

#tab-arit .arit-row-action:hover {
  color: var(--alliance-primary);
}

#tab-arit .arit-creator {
  color: var(--alliance-text-muted);
}

#tab-arit .arit-creator--unknown {
  color: var(--alliance-text-muted);
  font-style: italic;
}

#tab-arit .arit-type-cell {
  color: var(--alliance-primary);
  font-weight: 600;
}

/* Column header dropdown panel (filter selects). */
#tab-arit .arit-th-dropdown {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px !important;
  color: #000000 !important;
}

#tab-arit .arit-th-filter-block {
  border-bottom: 1px solid #e2e8f0;
}

#tab-arit .arit-th-filter-label {
  color: var(--alliance-text-muted);
  font-weight: 600;
}

#tab-arit .arit-th-filter-select {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

#tab-arit .arit-th-filter-select:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.18);
}

/* ---------- Footer + pagination ---------- */
#tab-arit .arit-table-footer {
  background: #FFFFFF;
  border-top: 1px solid #e2e8f0;
  color: var(--alliance-text-muted);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#tab-arit .arit-pagination {
  display: flex;
  gap: 4px;
}

#tab-arit .arit-pagination button {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 600;
}

#tab-arit .arit-pagination button:hover:not([disabled]):not(.is-active) {
  background: #eef2f8;
  border-color: var(--alliance-accent);
}

#tab-arit .arit-pagination button.is-active,
#tab-arit .arit-pagination button[aria-current="page"] {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

#tab-arit .arit-pagination button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =====================================================================
   ARIT TICKET DETAIL MODAL — opens when a row is clicked. Override the
   dark glass chrome with the Alliance light theme.
   ===================================================================== */

.modal-overlay.active:has(.modal .arit-modal-hero),
.modal-overlay.active:has(.arit-modal-hero) {
  background: rgba(27, 66, 120, 0.45) !important;
}

.modal .arit-modal-hero {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  color: #FFFFFF;
  padding: 16px 20px;
  margin: -16px -16px 12px;
  border-radius: 4px 4px 0 0;
}

.modal .arit-modal-meta,
.modal .arit-modal-context {
  color: rgba(255, 255, 255, 0.78);
}

.modal .arit-modal-id {
  color: #FFFFFF;
  font-weight: 700;
}

.modal .arit-modal-title {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* In-Transit / Delivered raw-record popout — Alliance theme.
   The base modal-title uses --font-display (Instrument Serif) which
   reads as italic serif on Alliance. Force Montserrat + Alliance
   navy, drop the serif feel, retheme the status pill + meta lines
   so the popout matches the rest of the site. */
.modal .modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--alliance-primary);
}

.modal .modal-source-badge {
  background: rgba(0, 159, 219, 0.14);
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid rgba(0, 159, 219, 0.32);
  border-radius: 999px;
}

.modal .carton-detail-status {
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  color: var(--alliance-text-muted);
  border-radius: 6px;
}

.modal .carton-detail-status--empty {
  color: var(--alliance-text-muted);
}

.modal .carton-detail-status--error {
  background: rgba(204, 75, 55, 0.08);
  border-color: rgba(204, 75, 55, 0.3);
  color: var(--alliance-error);
}

.modal .carton-detail-spinner {
  border: 2px solid rgba(27, 66, 120, 0.18);
  border-top-color: var(--alliance-accent);
}

.modal .carton-detail-meta {
  color: var(--alliance-text-muted);
  font-family: 'Montserrat', sans-serif;
}

.modal .carton-detail-meta strong {
  color: var(--alliance-primary);
  font-weight: 700;
}

.modal .carton-detail-meta code,
.modal .carton-detail-status code {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 3px;
  color: var(--alliance-primary);
  font-size: 0.82em;
  padding: 0 4px;
}

.modal .carton-detail-table-wrap {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 6px;
  color: var(--alliance-primary);
}

/* Column header bar — navy→black gradient with white header text, matching
   the Daily Ops expand modal and the inventory/Daily Ops tables (the "new"
   themed table look) instead of the old flat light-gray header. */
.modal .carton-detail-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
}

.modal .carton-detail-table th {
  /* Transparent header cells over the thead gradient → one continuous navy band
     (a per-th gradient paints a segmented band, per the project gotcha). */
  background: transparent !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.modal .carton-detail-table--horizontal th:last-child {
  border-right: none !important;
}

/* Body rows — alternating white / soft lavender, black text on light borders. */
.modal .carton-detail-table tbody tr {
  background: #FFFFFF !important;
}

.modal .carton-detail-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

.modal .carton-detail-table tbody tr:hover {
  background: #eef2f8 !important;
}

.modal .carton-detail-table td {
  color: #000000 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}

.modal .carton-detail-table--horizontal td:last-child {
  border-right: none !important;
}

/* Inner cell content (store name + subtitle, JSON/null values) inherits dark
   text so it stays legible on the now-light rows. */
.modal .carton-detail-store {
  color: var(--alliance-primary) !important;
}

.modal .carton-detail-store-sub,
.modal .carton-detail-value--null,
.modal .carton-detail-value--json {
  color: var(--alliance-text-muted) !important;
}

/* The carton popout modal surface itself. The base `.modal` is dark glass, so
   without this the (themed) navy title + black body text + white table sit on a
   near-black panel. Give it a light Alliance surface like the Daily Ops expand
   modal so the whole popout matches the theme. */
.modal-overlay.active:has(.modal.modal--carton) {
  background: rgba(27, 66, 120, 0.45) !important;
}
.modal.modal--carton {
  /* Mockup card: 22px-radius white shell; the navy head bleeds to the edges. */
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(7, 16, 33, 0.45) !important;
  color: #000000;
}

.modal .arit-modal-extra {
  color: rgba(255, 255, 255, 0.78);
}

.modal .arit-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.modal .arit-stat-card {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--alliance-primary);
  flex: 1 1 140px;
  min-width: 0;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 4px;
}

.modal .arit-stat-card strong {
  color: var(--alliance-primary);
  font-size: 1.15rem;
}

.modal .arit-stat-card small {
  color: var(--alliance-text-muted);
}

.modal .arit-modal-raw {
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-primary);
  padding: 10px 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ---------- Detail tabs (Timeline / Emails / Manual / Notes) ---------- */
.modal .arit-detail-tabs {
  display: flex;
  gap: 4px;
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 8px 0;
  margin: 0 -16px 12px;
}

.modal .arit-detail-tab {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
}

.modal .arit-detail-tab:hover {
  background: #eef2f8;
}

.modal .arit-detail-tab.is-active {
  background: #FFFFFF !important;
  border-color: #d8e0ea !important;
  border-bottom-color: #FFFFFF !important;
  color: var(--alliance-primary) !important;
  font-weight: 700;
  box-shadow: 0 -2px 0 var(--alliance-accent) inset;
}

/* ---------- Lifecycle / Timeline ---------- */
.modal .arit-lifecycle,
.modal .arit-detail-panel {
  background: #FFFFFF;
  color: #000000;
}

.modal .arit-lifecycle-head {
  color: var(--alliance-primary);
  font-weight: 700;
  margin-bottom: 8px;
}

.modal .arit-lifecycle-head h4 {
  color: var(--alliance-primary);
  margin: 0;
}

.modal .arit-lifecycle-head small {
  color: var(--alliance-text-muted);
}

.modal .arit-timeline,
.modal .arit-timeline-skel {
  background: transparent;
  color: #000000;
}

/* Ticket Lifecycle timeline — Alliance theme.
   The base style.css renders a 36px marker column with a circle on top
   of a thin vertical line. The previous override accidentally
   backgrounded the *entire marker column* in alliance-accent (which is
   what painted the chunky blue bar in the screenshot). Re-style each
   piece individually so the dot is a real circle, the connector is a
   slim 2px rail, and per-event tone variants drive the color.

   Layout adjustments:
   - Wider gap between the marker column and the card so the dot
     doesn't kiss the card edge.
   - Cards get a soft shadow + accent on the left edge that matches the
     event tone (Alliance-primary by default).
*/
.modal .arit-lifecycle .arit-tl-item {
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  padding-bottom: 1rem;
}

.modal .arit-tl-marker {
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  align-items: center;
}

.modal .arit-tl-line {
  background: #d8e0ea;
  width: 2px;
  border-radius: 999px;
  margin-top: 6px;
}

.modal .arit-tl-dot {
  width: 28px;
  height: 28px;
  background: #FFFFFF;
  border: 2px solid var(--alliance-primary);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(0, 159, 219, 0.10),
              0 1px 2px rgba(15, 23, 42, 0.08);
  color: var(--alliance-primary);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

/* Per-event tone (set on .arit-tl-item--<tone>). The dot inherits the
   tone color for its border + glyph; the connector stays neutral. */
.modal .arit-tl-item--blue   .arit-tl-dot { border-color: var(--alliance-primary); color: var(--alliance-primary); box-shadow: 0 0 0 4px rgba(27, 66, 120, 0.10), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--green  .arit-tl-dot { border-color: #15803d;                 color: #15803d;                 box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--amber  .arit-tl-dot { border-color: #b45309;                 color: #b45309;                 box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--orange .arit-tl-dot { border-color: #c2410c;                 color: #c2410c;                 box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--red    .arit-tl-dot { border-color: #b91c1c;                 color: #b91c1c;                 box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--teal   .arit-tl-dot { border-color: #0f766e;                 color: #0f766e;                 box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--purple .arit-tl-dot { border-color: #6d28d9;                 color: #6d28d9;                 box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08); }
.modal .arit-tl-item--slate  .arit-tl-dot { border-color: #475569;                 color: #475569;                 box-shadow: 0 0 0 4px rgba(71, 85, 105, 0.10), 0 1px 2px rgba(15, 23, 42, 0.08); }

/* "Current" step gets a filled dot so it pops at a glance. */
.modal .arit-tl-item--current .arit-tl-dot {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(0, 159, 219, 0.22),
              0 1px 3px rgba(15, 23, 42, 0.18);
}

.modal .arit-tl-card {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-left: 3px solid var(--alliance-primary);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
              0 6px 16px rgba(27, 66, 120, 0.06);
  padding: 0.7rem 0.95rem 0.8rem;
  color: #000000;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.modal .arit-lifecycle .arit-tl-item:hover .arit-tl-card {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
              0 12px 24px rgba(27, 66, 120, 0.10);
  transform: translateY(-1px);
}

/* The left-edge accent picks up the tone color, matching the dot. */
.modal .arit-tl-item--blue   .arit-tl-card { border-left-color: var(--alliance-primary); }
.modal .arit-tl-item--green  .arit-tl-card { border-left-color: #15803d; }
.modal .arit-tl-item--amber  .arit-tl-card { border-left-color: #b45309; }
.modal .arit-tl-item--orange .arit-tl-card { border-left-color: #c2410c; }
.modal .arit-tl-item--red    .arit-tl-card { border-left-color: #b91c1c; }
.modal .arit-tl-item--teal   .arit-tl-card { border-left-color: #0f766e; }
.modal .arit-tl-item--purple .arit-tl-card { border-left-color: #6d28d9; }
.modal .arit-tl-item--slate  .arit-tl-card { border-left-color: #475569; }
.modal .arit-tl-item--current .arit-tl-card { border-left-color: var(--alliance-accent); }

.modal .arit-tl-card-head {
  color: var(--alliance-primary);
  font-weight: 700;
  gap: 0.45rem;
}

.modal .arit-tl-actor {
  color: var(--alliance-primary);
  font-weight: 600;
}

.modal .arit-tl-time {
  color: var(--alliance-text-muted);
  font-size: 0.72rem;
}

.modal .arit-tl-type {
  background: rgba(0, 159, 219, 0.14);
  color: var(--alliance-primary);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.modal .arit-tl-item--blue   .arit-tl-type { background: rgba(27, 66, 120, 0.10); color: var(--alliance-primary); }
.modal .arit-tl-item--green  .arit-tl-type { background: rgba(21, 128, 61, 0.12);  color: #15803d; }
.modal .arit-tl-item--amber  .arit-tl-type { background: rgba(180, 83, 9, 0.12);   color: #b45309; }
.modal .arit-tl-item--orange .arit-tl-type { background: rgba(194, 65, 12, 0.12);  color: #c2410c; }
.modal .arit-tl-item--red    .arit-tl-type { background: rgba(185, 28, 28, 0.12);  color: #b91c1c; }
.modal .arit-tl-item--teal   .arit-tl-type { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
.modal .arit-tl-item--purple .arit-tl-type { background: rgba(109, 40, 217, 0.12); color: #6d28d9; }
.modal .arit-tl-item--slate  .arit-tl-type { background: rgba(71, 85, 105, 0.10);  color: #475569; }
.modal .arit-tl-item--current .arit-tl-type { background: var(--alliance-accent); color: #FFFFFF; }

.modal .arit-tl-status {
  background: #f4f6fa;
  color: var(--alliance-primary);
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  padding: 1px 9px;
  font-weight: 600;
  font-size: 0.7rem;
}

.modal .arit-tl-desc {
  color: #1f2937;
  font-size: 0.88rem;
  line-height: 1.5;
}

.modal .arit-tl-meta {
  color: var(--alliance-text-muted);
  font-size: 0.72rem;
}

.modal .arit-tl-sample {
  background: #f4f6fa;
  border: 1px dashed #b7c4d6;
  border-radius: 4px;
  color: var(--alliance-text-muted);
  padding: 1px 6px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

/* ---------- Email card inside the modal ---------- */
.modal .arit-email-card {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 4px;
  color: #000000;
  padding: 10px 12px;
}

/* ---------- Notes ---------- */
.modal .arit-notes-compose {
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.modal .arit-notes-compose textarea,
.modal .arit-notes-compose input {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
}

.modal .arit-notes-compose textarea:focus,
.modal .arit-notes-compose input:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.18);
}

.modal .arit-notes-compose button {
  background: var(--alliance-primary);
  border: 1px solid var(--alliance-primary);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
}

.modal .arit-notes-compose button:hover {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

.modal .arit-note-card {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 4px;
  color: #000000;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.modal .arit-note-card .arit-tl-actor {
  color: var(--alliance-primary);
}

.modal .arit-note-card .arit-tl-time {
  color: var(--alliance-text-muted);
}

/* =====================================================================
   TOPBAR CONTROL BUTTONS (reset filters, date selector, store selector)
   White-on-navy translucent pills that match the new theme.
   ===================================================================== */
.topbar .topbar-reset-defaults-btn,
.topbar .topbar-period-toolbar .inventory-period-dropdown-trigger,
.topbar .topbar-store-select {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.topbar .topbar-reset-defaults-btn:hover,
.topbar .topbar-period-toolbar .inventory-period-dropdown-trigger:hover,
.topbar .topbar-store-select:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.topbar .topbar-period-toolbar .inventory-period-dropdown-trigger[aria-expanded='true'],
.topbar .topbar-store-select.is-open {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
}

.topbar .topbar-period-toolbar .inventory-period-dropdown-trigger:focus-visible,
.topbar .topbar-store-select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

/* The little chevron caret under the period trigger — white. */
.topbar .topbar-period-toolbar .inventory-period-dropdown-trigger::after {
  border-top-color: #FFFFFF;
}

/* Period / store popover panels — light theme. ID-level selector needed
   to beat the existing #topbarPeriodDropdownPanel rules in style.css. */
.inventory-period-dropdown-panel,
.topbar-store-popover,
#topbarPeriodDropdownPanel {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 6px 18px;
}

/* Quick pills (Today / Yesterday / Date) inside the date popout. */
#topbarPeriodDropdownPanel .inventory-period-quick-pill {
  background: #f4f4f8;
  border: 1px solid transparent;
  color: #000000;
}
#topbarPeriodDropdownPanel .inventory-period-quick-pill input {
  accent-color: var(--alliance-accent);
}
#topbarPeriodDropdownPanel .inventory-period-quick-pill:has(input:checked) {
  background: rgba(0, 159, 219, 0.12);
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}
#topbarPeriodDropdownPanel .inventory-period-preset-grid .inventory-period-quick-pill:hover {
  background: rgba(0, 159, 219, 0.12);
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}
#topbarPeriodDropdownPanel .inventory-period-range-sep {
  color: #5b6372;
}

/* Grain / quarter select + date input + number input — light wash + accent focus. */
#topbarPeriodDropdownPanel .inventory-period-grain-select,
#topbarPeriodDropdownPanel .inventory-period-quarter-select,
#topbarPeriodDropdownPanel .inventory-snapshot-date-input,
#topbarPeriodDropdownPanel .inventory-period-number-input {
  background: #f4f4f8;
  border: 1px solid transparent;
  color: #000000;
  border-radius: 4px;
}
#topbarPeriodDropdownPanel .inventory-period-grain-select:focus,
#topbarPeriodDropdownPanel .inventory-period-grain-select:focus-visible,
#topbarPeriodDropdownPanel .inventory-period-quarter-select:focus,
#topbarPeriodDropdownPanel .inventory-period-quarter-select:focus-visible,
#topbarPeriodDropdownPanel .inventory-snapshot-date-input:focus,
#topbarPeriodDropdownPanel .inventory-snapshot-date-input:focus-visible,
#topbarPeriodDropdownPanel .inventory-period-number-input:focus,
#topbarPeriodDropdownPanel .inventory-period-number-input:focus-visible {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}

/* Section labels — muted alliance text. */
#topbarPeriodDropdownPanel .inventory-snapshot-date-label,
#topbarPeriodDropdownPanel .inventory-period-dropdown-section-label {
  color: var(--alliance-text-muted);
}

/* Hint text + footer divider. */
#topbarPeriodDropdownPanel .inventory-period-days-hint {
  color: var(--alliance-text-muted);
}
#topbarPeriodDropdownPanel .inventory-period-dropdown-footer {
  border-top: 1px solid #e5e5e5;
}

/* Reset button (ghost) — Alliance secondary: white bg, navy text. */
#topbarPeriodDropdownPanel .inventory-period-footer-btn--ghost {
  background: #FFFFFF;
  border: 1px solid #d5d5d5;
  color: var(--alliance-primary);
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
}
#topbarPeriodDropdownPanel .inventory-period-footer-btn--ghost:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: #FFFFFF;
}

/* Apply button (primary) — Alliance primary fill. */
#topbarPeriodDropdownPanel .inventory-period-footer-btn--primary {
  background: var(--alliance-accent);
  border: none;
  color: #FFFFFF;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
}
#topbarPeriodDropdownPanel .inventory-period-footer-btn--primary:hover {
  background: #0087c0;
}

/* Native month input — light wash, accent focus ring. */
#topbarPeriodDropdownPanel input[type="month"] {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #000000;
  padding: 0.4rem 0.6rem;
}
#topbarPeriodDropdownPanel input[type="month"]:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}

/* Error text — alliance error red. */
#topbarPeriodDropdownPanel .inventory-period-apply-error {
  color: var(--alliance-error);
}

.inventory-period-dropdown-panel-inner {
  color: #000000;
}

.inventory-period-dropdown-section-label,
.topbar-store-popover-row label {
  color: var(--alliance-text-muted);
}

.inventory-period-quick-pill {
  color: #000000;
  background: #f4f4f8;
  border: 1px solid transparent;
}

.inventory-period-quick-pill:has(input:checked) {
  background: rgba(0, 159, 219, 0.12);
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}

.inventory-snapshot-date-input,
.inventory-period-number-input,
.inventory-period-quarter-select,
.topbar-store-popover-row select {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #000000;
}

.inventory-snapshot-date-input:focus,
.inventory-period-number-input:focus,
.inventory-period-quarter-select:focus,
.topbar-store-popover-row select:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}

.topbar-store-popover-arrow {
  background: #FFFFFF;
  border-top: 1px solid #d8e0ea;
  border-left: 1px solid #d8e0ea;
}

.topbar-store-popover-clear,
.topbar-store-popover-done {
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s;
}

.topbar-store-popover-clear {
  background: #FFFFFF;
  color: var(--alliance-primary);
  border: 1px solid #d5d5d5;
}
.topbar-store-popover-clear:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

.topbar-store-popover-done {
  background: var(--alliance-accent);
  color: #FFFFFF;
  border: none;
}
.topbar-store-popover-done:hover {
  background: #0087c0;
}

/* Search box + results (store / employee) — match the light store-popover
   theme (the base style.css styling is dark and unreadable on white). */
.topbar-store-search-input {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #000000;
}
.topbar-store-search-input::placeholder { color: var(--alliance-text-muted); }
.topbar-store-search-input:focus,
.topbar-store-search-input:focus-visible {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}
.topbar-store-search-results {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 6px 18px;
}
.topbar-store-search-empty { color: var(--alliance-text-muted); }
.topbar-store-search-item:hover,
.topbar-store-search-item.is-active {
  background: rgba(0, 159, 219, 0.12);
}
.topbar-store-search-item-primary { color: #000000; }
.topbar-store-search-item-secondary { color: var(--alliance-text-muted); }
.topbar-store-search-item-badge {
  background: #eef1f5;
  color: var(--alliance-text-muted);
}
.topbar-store-search-item-badge.is-emp {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

/* Mobile: bigger logo, and topbar control buttons sized to match. */
@media (max-width: 767px) {
  .topbar-mobile-logo {
    height: 44px;
    margin-top: 0;
  }
  .topbar .topbar-reset-defaults-btn,
  .topbar .topbar-period-toolbar .inventory-period-dropdown-trigger,
  .topbar .topbar-store-select {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  /* Scale the inner icons up so they fill the larger button. */
  .topbar .topbar-reset-defaults-btn-icon svg,
  .topbar .topbar-period-toolbar .inventory-period-dropdown-trigger-icon svg,
  .topbar .topbar-store-select .topbar-store-icon,
  .topbar .topbar-store-select .topbar-store-icon svg {
    width: 22px;
    height: 22px;
  }

  /* On mobile the whole cluster (incl. the selection summary) hides — the
     selection strip below the bar shows the current scope instead. */
  .topbar-store-calendar-cluster {
    display: none !important;
  }
}

/* --- Combined filter control (all screen sizes) --- */
/* The reset / date / store controls collapse into one funnel icon that opens
   the tabbed filter sheet (their live nodes are moved into it at open).
   Desktop keeps the selection-summary chip from the cluster. */
.topbar .topbar-reset-defaults-btn,
.topbar .topbar-period-toolbar,
.topbar .topbar-store-select {
  display: none !important;
}
.topbar-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
  }
  .topbar-mobile-filter-btn svg { width: 22px; height: 22px; }
  .topbar-mobile-filter-btn.is-active,
  .topbar-mobile-filter-btn:active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
  }
/* Desktop: a more compact funnel, sitting to the right of the selection
   summary chip (DOM order in the topbar). */
@media (min-width: 768px) {
  .topbar-mobile-filter-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
  }
  .topbar-mobile-filter-btn svg { width: 18px; height: 18px; }
  /* The 16px field text is an iOS focus-zoom guard — desktop can go smaller. */
  #tmfPanelStore select,
  #tmfPanelStore .topbar-store-search-input,
  #tmfPanelDate .inventory-snapshot-date-input {
    font-size: 0.85rem;
  }
}

  /* Sheet: fixed chat bubble under the topbar, right-aligned, tail pointing
     up at the filter icon. Hosted on <body> by JS (the topbar's
     backdrop-filter would otherwise contain it and let the selection strip
     paint over it). Scrolling lives on the panels, not the sheet, so the
     protruding tail isn't clipped. z-index above the strip (1290). */
  .topbar-mobile-filter-sheet {
    position: fixed;
    top: calc(var(--header-height, 64px) + env(safe-area-inset-top, 0px) + 10px);
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    left: auto;
    width: min(300px, calc(100vw - 1rem));
    z-index: 1320;
    padding: 0.55rem;
    background: linear-gradient(180deg, #122c52 0%, #1B4278 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.5);
    color: #fff;
  }
  .topbar-mobile-filter-sheet[hidden] { display: none; }
  /* Bubble tail — top edge uniform #122c52 (the gradient runs dark-to-light
     downward), so the solid tail blends seamlessly. JS sets --tmf-tail-right
     to the filter icon's center. */
  .topbar-mobile-filter-sheet::before {
    content: '';
    position: absolute;
    top: -7px;
    right: var(--tmf-tail-right, 30px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #122c52;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
  }

  /* Head: Store/Date tabs + reset icon + close. */
  .tmf-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }
  .tmf-tabs {
    display: flex;
    flex: 1 1 auto;
    gap: 0.25rem;
    padding: 0.2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  .tmf-tab {
    flex: 1 1 0;
    min-height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .tmf-tab.is-active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
  .tmf-reset-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
  }
  .tmf-reset-icon:active { background: rgba(255, 255, 255, 0.22); }
  .tmf-reset-icon:disabled { opacity: 0.5; }

  .tmf-panel { display: none; }
  .tmf-panel.is-active {
    display: block;
    /* Panels scroll (not the sheet) so the bubble tail isn't clipped. */
    max-height: calc(100dvh - var(--header-height, 64px) - env(safe-area-inset-top, 0px) - 8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Relocated controls -------------------------------------------------
     Moving the live nodes out of #topbarStorePopover / #topbarPeriodDropdownPanel
     drops every ID-scoped rule that styled them, so the sheet restyles them
     fully here. 16px inputs/selects also keep iOS from zooming on focus. */

  /* Shared field look */
  #tmfPanelStore select,
  #tmfPanelStore .topbar-store-search-input,
  #tmfPanelDate .inventory-snapshot-date-input {
    width: 100%;
    min-height: 38px;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: 10px;
    background: #FFFFFF;
    color: #0f172a;
    font-size: 16px;
    box-sizing: border-box;
  }

  /* Section labels (Search/Market/District/Store + Quick pick/Single day/Custom range) */
  #tmfPanelStore .topbar-store-popover-row label,
  #tmfPanelDate .inventory-period-dropdown-section-label {
    display: block;
    margin: 0 0 0.3rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Stacked rows */
  #tmfPanelStore .topbar-store-popover-row,
  #tmfPanelDate .inventory-period-dropdown-section {
    margin: 0 0 0.55rem;
  }

  /* Store search results float over the sheet */
  #tmfPanelStore .topbar-store-search { position: relative; }
  #tmfPanelStore .topbar-store-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    background: #FFFFFF;
    color: #0f172a;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.35);
    max-height: 40vh;
    overflow-y: auto;
  }

  /* Footer action rows */
  #tmfPanelStore .topbar-store-popover-actions,
  #tmfPanelDate .inventory-period-dropdown-footer-actions {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.35rem;
  }
  /* Ghost (Clear) + primary (Done / Apply range) buttons */
  #tmfPanelStore .topbar-store-popover-clear {
    flex: 1 1 0;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
  }
  #tmfPanelStore .topbar-store-popover-done,
  #tmfPanelDate .inventory-period-footer-btn--primary {
    flex: 1.6 1 0;
    min-height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--alliance-accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
  }
  /* The panel's own period-only Reset is redundant next to the header reset icon. */
  #tmfPanelDate .inventory-period-footer-btn--ghost { display: none; }

  /* Date quick-pick chips */
  #tmfPanelDate .inventory-period-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  #tmfPanelDate .inventory-period-quick-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
  }
  #tmfPanelDate .inventory-period-quick-pill:active {
    background: rgba(255, 255, 255, 0.24);
  }

  /* Custom range: two stacked date fields */
  /* Custom range: start + end side by side on one row */
  #tmfPanelDate .inventory-period-range-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  #tmfPanelDate .inventory-period-range-row .inventory-snapshot-date-input {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 0.3rem 0.45rem;
  }

  #tmfPanelDate .inventory-period-apply-error {
    margin: 0 0 0.4rem;
    color: #fca5a5;
    font-size: 0.8rem;
  }

/* ==================== DESKTOP LAYOUT (>=768px) ==================== */
/* The wide labeled sidebar and the matching content offset only apply on
   desktop; on mobile the rail collapses to a horizontal bottom bar. */
@media (min-width: 768px) {
  .command-rail {
    width: var(--sidebar-width);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .rail-link,
  .rail-group-btn {
    justify-content: flex-start;
    padding-left: 1rem;
    gap: 0.75rem;
  }
  .rail-label { display: inline; font-weight: var(--font-weight-medium); }
  body { padding-left: var(--sidebar-width); }
  /* Top bar spans the full screen width over the sidebar. Logo sits at the
     left in flow (see .topbar .rail-brand in style.css desktop block), so
     the OPS-COMMAND title + page name sit directly to its right with no
     sidebar-width gutter between them. Authoritative rule — this stylesheet
     loads last, so it overrides the base sheet's `.topbar { left: var(--rail-width) }`.
     Header shadow matches the MyHub portal. */
  .topbar {
    left: 0;
    padding-left: 0.55rem;
    gap: 0.5rem;
    justify-content: flex-start;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

/* ==================== TILES (shared dashboard tile system) ====================
   The supplied .backoffice-tile spec is the canonical look for every tile
   on the site. Existing tile/panel classes are aliased here so they all
   inherit the same bordered card, navy gradient header band, soft shadow,
   and hover lift. */
.backoffice-tile,
.panel,
.card,
.research-panel,
.inventory-metrics-panel,
.inventory-snapshot-panel,
.compliance-metrics-panel,
.cash-metrics-panel,
.daily-ops-shrink-panel,
.daily-ops-nonsellable-panel,
.daily-ops-cartons-panel,
.daily-ops-scans-panel,
.daily-ops-sts-panel,
.daily-ops-obs-acc-panel,
.daily-ops-eol-panel,
.daily-ops-da-panel,
.daily-ops-ipog-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.backoffice-tile:hover,
.panel:hover,
.card:hover,
.research-panel:hover,
.inventory-metrics-panel:hover,
.inventory-snapshot-panel:hover,
.compliance-metrics-panel:hover,
.cash-metrics-panel:hover,
.daily-ops-shrink-panel:hover,
.daily-ops-nonsellable-panel:hover,
.daily-ops-cartons-panel:hover,
.daily-ops-scans-panel:hover,
.daily-ops-sts-panel:hover,
.daily-ops-obs-acc-panel:hover,
.daily-ops-eol-panel:hover,
.daily-ops-da-panel:hover,
.daily-ops-ipog-panel:hover {
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px;
}

/* Dark navy gradient header band — shared by every tile's title strip. */
.backoffice-tile__header,
.panel-header,
#tab-inventory .inventory-metrics-panel > .inventory-metrics-panel__head.inventory-snapshot-head,
#tab-compliance .compliance-metrics-panel > .compliance-metrics-panel__head.inventory-snapshot-head,
#tab-cash .cash-metrics-panel > .cash-metrics-panel__head.inventory-snapshot-head,
.daily-ops-shrink-head,
.daily-ops-nonsellable-head,
.daily-ops-cartons-head,
.daily-ops-scans-head,
.daily-ops-sts-head,
.daily-ops-obs-acc-head,
.daily-ops-eol-head,
.daily-ops-da-head,
.daily-ops-ipog-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  color: #FFFFFF;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  border: none;
  border-radius: 0;
}

/* Title heading + icon inside any tile header are forced white. */
.backoffice-tile__header h2,
.backoffice-tile__header h3,
.panel-header h2,
.panel-header h3,
.daily-ops-shrink-head h3,
.daily-ops-nonsellable-head h3,
.daily-ops-cartons-head h3,
.daily-ops-scans-head h3,
.daily-ops-sts-head h3,
.daily-ops-obs-acc-head h3,
.daily-ops-eol-head h3,
.daily-ops-da-head h3,
.daily-ops-ipog-head h3,
.inventory-snapshot-title-row h2 {
  margin: 0;
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.backoffice-tile__header .tile-icon,
.panel-header .inventory-table-kpi-icon,
.daily-ops-shrink-head > .inventory-table-kpi-icon,
.daily-ops-nonsellable-head > .inventory-table-kpi-icon,
.daily-ops-cartons-head > .inventory-table-kpi-icon,
.daily-ops-scans-head > .inventory-table-kpi-icon,
.daily-ops-sts-head > .inventory-table-kpi-icon,
.daily-ops-obs-acc-head > .inventory-table-kpi-icon,
.daily-ops-eol-head > .inventory-table-kpi-icon,
.daily-ops-da-head > .inventory-table-kpi-icon,
.daily-ops-ipog-head > .inventory-table-kpi-icon,
.inventory-snapshot-title-row > .inventory-table-kpi-icon {
  color: #FFFFFF;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.backoffice-tile:hover .backoffice-tile__header,
.panel:hover .panel-header,
.inventory-metrics-panel:hover .inventory-snapshot-head,
.daily-ops-shrink-panel:hover .daily-ops-shrink-head,
.daily-ops-nonsellable-panel:hover .daily-ops-nonsellable-head,
.daily-ops-cartons-panel:hover .daily-ops-cartons-head,
.daily-ops-scans-panel:hover .daily-ops-scans-head,
.daily-ops-sts-panel:hover .daily-ops-sts-head,
.daily-ops-obs-acc-panel:hover .daily-ops-obs-acc-head,
.daily-ops-eol-panel:hover .daily-ops-eol-head,
.daily-ops-da-panel:hover .daily-ops-da-head,
.daily-ops-ipog-panel:hover .daily-ops-ipog-head {
  filter: brightness(1.05);
}

/* Tile content area baseline. */
.backoffice-tile__content {
  flex: 1;
  display: flex;
  background: #f8fafc;
  padding: 1px;
  overflow: hidden;
}

/* Operations-tile variant — two-column table + metrics layout. */
.operations-tile__content {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1px;
}

.operations-tile__left {
  background: #FFFFFF;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.operations-tile__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.operations-tile__table thead th {
  text-align: left;
  padding-bottom: 12px;
  font-weight: 500;
  color: #64748b;
  font-size: 0.875rem;
  border-bottom: 2px solid #e2e8f0;
}

.operations-tile__table thead th:nth-child(2),
.operations-tile__table thead th:nth-child(3) {
  text-align: center;
  width: 90px;
}

.operations-tile__table tbody tr {
  border-bottom: 1px solid #f1f5f9;
}

.operations-tile__table tbody td {
  padding: 11px 0;
  color: #334155;
  vertical-align: middle;
}

.operations-tile__table tbody td:first-child {
  font-weight: 500;
}

.operations-tile__table tbody td:nth-child(2),
.operations-tile__table tbody td:nth-child(3) {
  text-align: center;
  color: #64748b;
}

.operations-tile__right {
  background: #FFFFFF;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.operations-tile__metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.operations-tile__metric--highlighted {
  background-color: #dbeafe;
}

.operations-tile__metric-label {
  font-weight: 500;
  color: #334155;
}

.operations-tile__metric-value {
  font-weight: 600;
  color: #1e40af;
  font-size: 1rem;
  text-align: right;
}

.operations-tile__metric-value--percent { color: #16a34a; }
.operations-tile__metric-value--zero    { color: #64748b; }

/* Realtime-tile variant. */
.realtime-tile__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 0.95rem;
}

.realtime-tile__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.realtime-tile__metric-item {
  background: #FFFFFF;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  text-align: center;
}

.realtime-tile__metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e40af;
}

/* Summit-ranking-tile variant. */
.summit-ranking-tile__content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.summit-ranking-tile__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.summit-ranking-tile__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.summit-ranking-tile__rank {
  font-weight: 600;
  color: #1e40af;
  width: 28px;
}

.summit-ranking-tile__name {
  flex: 1;
  padding: 0 12px;
}

.summit-ranking-tile__score {
  font-weight: 600;
  color: #16a34a;
}

.backoffice-tile__content--chart,
.backoffice-tile__content--table,
.backoffice-tile__content--metrics {
  padding: 20px 24px;
}

/* ==================== BUTTONS ==================== */
button.primary,
.btn-primary,
button.upload-gate-submit,
button.upload-submit-qdrant {
  background: var(--alliance-accent);
  color: #FFFFFF;
  border: none;
  border-radius: var(--border-radius);
  padding: 10px 24px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s;
}

button.primary:hover,
.btn-primary:hover,
button.upload-gate-submit:hover,
button.upload-submit-qdrant:hover {
  background: #0087c0;
  transform: translateY(-1px);
}

.upload-btn-secondary,
button.btn-secondary {
  background: #FFFFFF;
  color: var(--alliance-primary);
  border: 1px solid #d5d5d5;
  border-radius: var(--border-radius);
  padding: 10px 24px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.upload-btn-secondary:hover,
button.btn-secondary:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

/* ==================== INPUTS ==================== */
input,
select,
textarea {
  background: #f4f4f8;
  color: #000000;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}

/* ==================== ALLIANCE UTILITY CLASSES ==================== */
/* Verbatim from the design system. Any new markup can apply these. */

.alliance-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-gradient);
  color: var(--alliance-text-light);
  z-index: 1200;
  overflow-y: auto;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
}

.alliance-sidebar-brand-row {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.alliance-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: var(--alliance-text-light);
  text-decoration: none;
  transition: background-color 0.2s;
}
.alliance-nav-item:hover,
.alliance-nav-item.active { background: rgba(255, 255, 255, 0.15); }

.alliance-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--header-gradient);
  color: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.alliance-main-content {
  margin-left: var(--sidebar-width);
  padding: 24px;
  min-height: calc(100vh - var(--header-height));
  background: var(--alliance-light-bg);
}

.alliance-card {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e5e5;
  padding: 24px;
  margin-bottom: 24px;
}

.alliance-btn {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius);
  padding: 10px 24px;
  transition: all 0.2s;
  cursor: pointer;
}
.alliance-btn-primary {
  background: var(--alliance-accent);
  color: white;
  border: none;
}
.alliance-btn-primary:hover {
  background: #0087c0;
  transform: translateY(-1px);
}

.alliance-input {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  padding: 10px 14px;
}
.alliance-input:focus {
  border-color: var(--alliance-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}

/* =====================================================================
   STORE DIRECTORY page — light-theme overrides for the v2 layout and
   the original `.store-directory-*` layout. The base style.css hardcodes
   dark `rgba(...)` values that aren't reached by the token reset above,
   so they're explicitly re-themed here.
   ===================================================================== */

#tab-stores .store-v2-title-wrap h2 { color: var(--alliance-primary); }
#tab-stores .store-v2-title-wrap p  { color: var(--alliance-text-muted); }

#tab-stores .store-v2-shell {
  background: #FFFFFF;
  border: 1px solid #e5e5e5;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#tab-stores .store-v2-export {
  background: var(--alliance-accent);
  border: none;
  color: #FFFFFF;
  border-radius: var(--border-radius);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s;
}
#tab-stores .store-v2-export:hover {
  background: #0087c0;
  transform: translateY(-1px);
}

#tab-stores .store-v2-search input,
#tab-stores .store-v2-market-select,
#tab-stores .store-v2-filter-btn {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  color: #000000;
}
#tab-stores .store-v2-search input::placeholder { color: var(--alliance-text-muted); }
#tab-stores .store-v2-search input:focus,
#tab-stores .store-v2-market-select:focus,
#tab-stores .store-v2-filter-btn:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}

#tab-stores .store-v2-tabs {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

#tab-stores .store-v2-tab {
  color: var(--alliance-text-muted);
}

#tab-stores .store-v2-tab:hover {
  color: var(--alliance-primary);
}

#tab-stores .store-v2-tab.is-active {
  background: var(--alliance-primary);
  color: #FFFFFF;
}

#tab-stores .store-v2-people-panel {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
}

#tab-stores .store-v2-people-head {
  background: #f4f6fa;
  border-bottom: 1px solid #d8e0ea;
  color: var(--alliance-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 700;
}

#tab-stores .store-v2-people-row {
  color: var(--alliance-primary);
}

#tab-stores .store-v2-people-row + .store-v2-people-row {
  border-top: 1px solid #eef2f8;
}

#tab-stores .store-v2-people-row:hover {
  background: #f0f4fa;
}

#tab-stores .store-v2-people-cell {
  color: var(--alliance-primary);
}

#tab-stores .store-v2-people-cell--name {
  color: var(--alliance-primary);
  font-weight: 700;
}

#tab-stores .store-v2-people-email {
  color: var(--alliance-accent);
}

#tab-stores .store-v2-people-empty {
  color: var(--alliance-text-muted);
}

#tab-stores .store-v2-kpi {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#tab-stores .store-v2-kpi:hover {
  border-color: var(--alliance-accent);
  box-shadow: 0 4px 14px rgba(27, 66, 120, 0.12);
  transform: translateY(-1px);
}

#tab-stores .store-v2-kpi-icon {
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-primary);
}

#tab-stores .store-v2-kpi-icon svg {
  stroke: currentColor;
}

/* Per-card tone — keeps each metric visually distinct. */
#tab-stores .store-v2-kpi--stores     .store-v2-kpi-icon { background: rgba(0, 159, 219, 0.14); color: var(--alliance-primary); }
#tab-stores .store-v2-kpi--districts  .store-v2-kpi-icon { background: rgba(148, 200, 61, 0.18); color: #4d7c0f; }
#tab-stores .store-v2-kpi--markets    .store-v2-kpi-icon { background: rgba(242, 101, 34, 0.16); color: #b45309; }
#tab-stores .store-v2-kpi--facilities .store-v2-kpi-icon { background: rgba(110, 193, 228, 0.20); color: #0369a1; }

#tab-stores .store-v2-kpi-label { color: var(--alliance-text-muted); }
#tab-stores .store-v2-kpi-value {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
}
#tab-stores .store-v2-kpi-sub   { color: var(--alliance-text-muted); }

#tab-stores .store-v2-hierarchy-panel {
  background: #FFFFFF;
  border: 1px solid #e5e5e5;
  border-radius: var(--border-radius);
}
#tab-stores .store-v2-view-nav {
  background: #f9f9fb;
  border-bottom: 1px solid #e5e5e5;
}
#tab-stores .store-v2-view-btn {
  background: #FFFFFF;
  border: 1px solid #d5d5d5;
  border-radius: var(--border-radius);
  color: var(--alliance-text-muted);
}
#tab-stores .store-v2-view-btn.is-active {
  background: rgba(0, 159, 219, 0.12);
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}
#tab-stores .store-v2-hierarchy-head {
  background: #f6f7f8;
  border-bottom: 1px solid #e5e5e5;
  color: var(--alliance-text-muted);
}

#tab-stores .store-v2-market-wrap + .store-v2-market-wrap,
#tab-stores .store-v2-district-wrap + .store-v2-district-wrap {
  border-top: 1px solid #e5e5e5;
}

#tab-stores .store-v2-row {
  color: var(--alliance-primary);
  border-bottom: 1px solid #e5e5e5;
}
#tab-stores .store-v2-row:hover { background: rgba(0, 159, 219, 0.08); }
#tab-stores .store-v2-cell      { color: var(--alliance-primary); }

#tab-stores .store-v2-status,
#tab-stores .store-v2-store-status { color: var(--alliance-success); }

#tab-stores .store-v2-district-icon,
#tab-stores .store-v2-store-icon { color: var(--alliance-primary); }
#tab-stores .store-v2-district-icon svg,
#tab-stores .store-v2-store-icon svg { stroke: currentColor; }

#tab-stores .store-v2-chevron    { color: var(--alliance-primary); }
#tab-stores .store-v2-chevron svg { stroke: currentColor; }
#tab-stores .store-v2-store-more { color: var(--alliance-accent); }

#tab-stores .store-v2-district-list {
  background: #f9f9fb;
  border-top: 1px solid #e5e5e5;
}
#tab-stores .store-v2-store-row {
  border-top: 1px solid #e5e5e5;
}
#tab-stores .store-v2-store-list::before {
  background: rgba(27, 66, 120, 0.25);
}
#tab-stores .store-v2-store-name { color: var(--alliance-primary); }
#tab-stores .store-v2-meta { color: #5b6472; }
#tab-stores .store-v2-meta:hover { color: var(--alliance-primary); }
#tab-stores .store-v2-meta-k { color: #99a2b2; }

#tab-stores .store-v2-pill--active {
  color: #5a7a14;
  background: rgba(148, 200, 61, 0.14);
  border-color: rgba(148, 200, 61, 0.34);
}
#tab-stores .store-v2-pill--inactive {
  color: #8a2920;
  background: rgba(204, 75, 55, 0.12);
  border-color: rgba(204, 75, 55, 0.32);
}

#tab-stores .store-v2-market-badge--blue   { color: var(--alliance-primary); }
#tab-stores .store-v2-market-badge--teal   { color: #0078a8; }
#tab-stores .store-v2-market-badge--purple { color: #6b3fa0; }
#tab-stores .store-v2-market-badge--pink   { color: #c2185b; }
#tab-stores .store-v2-market-badge--amber  { color: var(--alliance-warning); }
#tab-stores .store-v2-market-badge--green  { color: var(--alliance-success); }

#tab-stores .store-v2-footer { color: var(--alliance-text-muted); }
#tab-stores .store-v2-empty  { color: var(--alliance-text-muted); }

/* Legacy `.store-directory-*` */
.store-summary-card {
  background: #FFFFFF;
  border: 1px solid #e5e5e5;
  border-radius: var(--border-radius);
}
.store-summary-label  { color: var(--alliance-text-muted); }
.store-summary-card strong { color: var(--alliance-primary); }
.store-summary-subtext     { color: var(--alliance-text-muted); }

.store-directory-panel {
  background: #FFFFFF;
  border: 1px solid #e5e5e5;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.store-directory-toolbar { border-bottom: 1px solid #e5e5e5; }
.store-search-wrap {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  color: var(--alliance-text-muted);
}
.store-search-wrap input            { color: #000000; background: transparent; }
.store-search-wrap input::placeholder { color: var(--alliance-text-muted); }
.store-filter-field span { color: var(--alliance-text-muted); }
.store-filter-field select {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  color: #000000;
}
.store-toolbar-btn {
  background: #FFFFFF;
  border: 1px solid #d5d5d5;
  border-radius: var(--border-radius);
  color: var(--alliance-primary);
}
.store-toolbar-btn:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}
.store-directory-table thead { background: #f6f7f8; }
.store-directory-table th    { color: var(--alliance-text-muted); }
.store-directory-table td {
  border-top: 1px solid #e5e5e5;
  color: #000000;
}
.store-directory-table tbody tr:hover td {
  background: rgba(0, 159, 219, 0.06);
  color: #000000;
}
.store-directory-footer { border-top: 1px solid #e5e5e5; color: var(--alliance-text-muted); }
.store-name { color: var(--alliance-primary); }
.store-meta { color: var(--alliance-text-muted); }
.store-badge {
  background: #f6f7f8;
  border: 1px solid #e5e5e5;
  color: var(--alliance-text-muted);
}
.store-market-pill {
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-accent);
}

/* =====================================================================
   INVENTORY page — light-theme overrides for the hero KPI grid, the
   snapshot panel, the toolbar, and form controls.
   ===================================================================== */

#tab-inventory .inventory-page-head h2 { color: var(--alliance-primary); }
#tab-inventory .inventory-page-head p  { color: var(--alliance-text-muted); }

/* Toolbar buttons (workbook, tools) */
.inventory-workbook-btn,
.inventory-tool-btn {
  background: #FFFFFF;
  border: 1px solid #d5d5d5;
  border-radius: var(--border-radius);
  color: var(--alliance-primary);
  transition: all 0.2s;
}
.inventory-workbook-btn:hover,
.inventory-tool-btn:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: #FFFFFF;
}

/* SVG icon size inside any tile header. */
.inventory-snapshot-title-row .inventory-table-kpi-icon svg,
.daily-ops-shrink-head > .inventory-table-kpi-icon svg,
.daily-ops-nonsellable-head > .inventory-table-kpi-icon svg,
.daily-ops-cartons-head > .inventory-table-kpi-icon svg,
.daily-ops-scans-head > .inventory-table-kpi-icon svg,
.daily-ops-sts-head > .inventory-table-kpi-icon svg,
.daily-ops-obs-acc-head > .inventory-table-kpi-icon svg,
.daily-ops-eol-head > .inventory-table-kpi-icon svg,
.daily-ops-da-head > .inventory-table-kpi-icon svg,
.daily-ops-ipog-head > .inventory-table-kpi-icon svg {
  width: 20px;
  height: 20px;
}

/* Inventory snapshot body — render the KPI cards as label/value list rows
   inside the parent tile (Sales-tile pattern), with alternating row tints. */
.inventory-kpi-grid {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}

.inventory-kpi-card,
.inventory-kpi-card.inventory-kpi-card--metric-square {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 11px 24px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  grid-template-columns: none;
  gap: 0.75rem;
}

.inventory-kpi-card:nth-child(even) {
  background: #f0f4fa;
}

.inventory-kpi-card:hover {
  background: #eef2f8;
  box-shadow: none;
}

.inventory-kpi-card::after { display: none !important; }

/* Hide the colored icon — rows are clean label/value only. */
.inventory-kpi-card .inventory-kpi-icon { display: none; }

/* Label on the left, gray, regular weight. */
.inventory-kpi-card__head,
.inventory-kpi-card span:not(.inventory-kpi-icon) {
  flex: 1 1 auto;
  text-align: left;
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}

/* Value column on the right, bold black. */
.inventory-kpi-card__body,
.inventory-kpi-card__metric {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

.inventory-kpi-card__metric strong,
.inventory-kpi-card strong {
  color: #000000;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: right;
}

/* Label / value text on the card */
.inventory-kpi-card span:not(.inventory-kpi-icon) {
  color: var(--alliance-text-muted);
}
.inventory-kpi-card strong {
  color: var(--alliance-primary);
}
.inventory-kpi-card small {
  color: var(--alliance-text-muted);
}

/* Card heading text (some variants render an inner head/body) */
.inventory-kpi-card__head { color: var(--alliance-text-muted); }
.inventory-kpi-card__metric strong { color: var(--alliance-primary); }

/* Focus ring on click-to-scroll cards */
.inventory-kpi-card[data-inv-kpi-scroll]:focus-visible,
#invKpiItemLookupTrigger.inventory-kpi-card:focus-visible {
  outline: 2px solid rgba(0, 159, 219, 0.55);
}

/* Sub-paragraph text in snapshot heads (where present) stays muted on the
   dark gradient band. */
.inventory-snapshot-head p { color: rgba(255, 255, 255, 0.82); }

/* =====================================================================
   IN TRANSIT / DELIVERED carousel — same backoffice-tile look as every
   other tile, with the dark navy gradient header band, white titles +
   icons + arrows, and the inner panes flattened so the wrapper is the
   single bordered card.
   ===================================================================== */

#tab-inventory #inventory-transport-carousel.inventory-transport-carousel {
  background-color: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#tab-inventory #inventory-transport-carousel.inventory-transport-carousel:hover {
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px;
}

/* Header band — full-width navy gradient. */
#tab-inventory .inventory-transport-carousel__shared-head.inventory-snapshot-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  border: none;
  padding: 12px 16px;
  color: #FFFFFF;
}

/* Titles inside the header — white, bold, with the icon white. */
#tab-inventory .inventory-transport-carousel__title.inventory-snapshot-title-row h2 {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-inventory .inventory-transport-carousel__title .inventory-table-kpi-icon,
#tab-inventory .inventory-transport-carousel__title .inventory-table-kpi-icon svg {
  color: var(--alliance-accent);
}

/* Thicker SVG strokes on the title-row icons (truck etc.). */
#tab-inventory .inventory-transport-carousel__title .inventory-table-kpi-icon svg [stroke],
#tab-inventory .inventory-transport-carousel__title .inventory-table-kpi-icon svg {
  stroke-width: 2.5;
}

/* "Last updated" stamp text in the header */
#tab-inventory .inventory-transport-carousel-stamp-cell,
#tab-inventory .inventory-transport-carousel-stamp-cell .dops-table-updated-at {
  color: rgba(255, 255, 255, 0.82);
}

/* Prev/Next arrow buttons */
#tab-inventory .inventory-transport-carousel__arrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#tab-inventory .inventory-transport-carousel__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

#tab-inventory .inventory-transport-carousel__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Toolbar buttons inside the header (export, fullscreen). */
#tab-inventory .inventory-toolbar--transport-carousel .inventory-tool-btn,
#tab-inventory .inventory-toolbar--transport-carousel .inventory-tool-btn--icon.inventory-transport-title-export {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

#tab-inventory .inventory-toolbar--transport-carousel .inventory-tool-btn:hover,
#tab-inventory .inventory-toolbar--transport-carousel .inventory-tool-btn--icon.inventory-transport-title-export:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

/* Desktop split layout: each pane's own title bar gets the same navy band as
   the unified carousel header (the shared head is hidden ≥1024px). */
@media (min-width: 1024px) {
  /* Drop the wrapping carousel card so each pane is its own rounded card
     (otherwise the 4px wrapper clip fights the panes' 6px corners). */
  #tab-inventory #inventory-transport-carousel.inventory-transport-carousel {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  /* Match the flattening rule's two-ID specificity (`#tab-inventory
     .inventory-transport-carousel #inv-panel-…` sets border:none + radius:0
     further down) or these card styles lose the cascade and the corners
     stay square. */
  #tab-inventory .inventory-transport-carousel #inv-panel-in-transit:not(.inventory-snapshot-panel--fullscreen),
  #tab-inventory .inventory-transport-carousel #inv-panel-delivered:not(.inventory-snapshot-panel--fullscreen),
  #tab-inventory .inventory-transport-carousel #inv-panel-in-transit:not(.inventory-snapshot-panel--fullscreen):hover,
  #tab-inventory .inventory-transport-carousel #inv-panel-delivered:not(.inventory-snapshot-panel--fullscreen):hover {
    border: 1px solid #d8e0ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  }
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head {
    background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
    padding: 12px 16px;
    color: #FFFFFF;
  }
  /* Delivered bar: mirror the gradient (dark on the left, navy on the right)
     so the two bars read as a continuous band across the split. */
  #tab-inventory #inv-panel-delivered:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head {
    background: linear-gradient(90deg, #0a0a0a 0%, #1B4278 100%);
  }
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head .inventory-popout-title-cluster h3 {
    margin: 0;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head .inventory-table-kpi-icon,
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head .inventory-table-kpi-icon svg {
    color: var(--alliance-accent);
    stroke-width: 2.5;
  }
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head .dops-table-updated-at--fullscreen-transport {
    color: rgba(255, 255, 255, 0.82);
  }
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head .inventory-tool-btn--icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    border-radius: 4px;
  }
  #tab-inventory .inventory-transport-carousel__pane:not(.inventory-snapshot-panel--fullscreen) .inventory-fs-popout-head .inventory-tool-btn--icon:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
  }
}

/* Inner panes (the actual In Transit / Delivered tables) — flatten so the
   wrapper carousel is the single bordered card. */
#tab-inventory .inventory-transport-carousel #inv-panel-in-transit,
#tab-inventory .inventory-transport-carousel #inv-panel-delivered {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #FFFFFF;
}

#tab-inventory .inventory-transport-carousel #inv-panel-in-transit:hover,
#tab-inventory .inventory-transport-carousel #inv-panel-delivered:hover {
  box-shadow: none;
}

/* The shared table wrap carries a translucent dark backdrop (for the dark
   default theme) that reads as gray over these white panes — keep the empty
   space below the rows white instead. */
#tab-inventory .inventory-transport-carousel #inv-panel-in-transit .inventory-table-wrap,
#tab-inventory .inventory-transport-carousel #inv-panel-delivered .inventory-table-wrap {
  background: #FFFFFF;
}

/* Column header bar — one shade darker than the tile title bar so the two
   navy bands stack with visible separation. */
#tab-inventory .inventory-transport-carousel .inventory-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}

#tab-inventory .inventory-transport-carousel .inventory-table th {
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

#tab-inventory .inventory-transport-carousel .inventory-table th:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.22);
}

#tab-inventory .inventory-transport-carousel .inventory-table th .inventory-column-title,
#tab-inventory .inventory-transport-carousel .inventory-table th .inventory-dops-sort-trigger,
#tab-inventory .inventory-transport-carousel .inventory-table th .inventory-dops-sort-label,
#tab-inventory .inventory-transport-carousel .inventory-table th .inventory-filter-btn {
  color: #FFFFFF;
}

/* Table rows — alternating white / soft lavender, black text on light borders. */
#tab-inventory .inventory-transport-carousel .inventory-table tbody tr {
  background: #FFFFFF;
}
#tab-inventory .inventory-transport-carousel .inventory-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
#tab-inventory .inventory-transport-carousel .inventory-table tbody tr:hover {
  background: #eef2f8;
}

#tab-inventory .inventory-transport-carousel .inventory-table td {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#tab-inventory .inventory-transport-carousel .inventory-table td:last-child {
  border-right: none;
}

/* Center the Opus ID (col 1) and Carrier (col 6) data — header cells are
   already center-aligned. */
#tab-inventory .inventory-transport-carousel .inventory-table td:nth-child(1),
#tab-inventory .inventory-transport-carousel .inventory-table td:nth-child(6) {
  text-align: center;
}

/* Per-pane fullscreen popout head — the CSV export button gets the Alliance
   primary CTA fill so it reads on the white pane while matching the theme. */
#tab-inventory .inventory-transport-carousel .inventory-fs-export-csv-btn,
#inventoryFullscreenTransitExportCsv,
#inventoryFullscreenDeliveredExportCsv {
  background: var(--alliance-accent);
  border: none;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

#tab-inventory .inventory-transport-carousel .inventory-fs-export-csv-btn:hover,
#inventoryFullscreenTransitExportCsv:hover,
#inventoryFullscreenDeliveredExportCsv:hover {
  background: #0087c0;
  transform: translateY(-1px);
}

/* =====================================================================
   FULLSCREEN VIEW for In Transit / Delivered (cartons) — adopt the same
   tile theme as the non-fullscreen carousel: white card, navy gradient
   popout head, navy gradient column bar, alternating row backgrounds.
   ===================================================================== */

#tab-inventory .inventory-snapshot-panel--fullscreen,
#tab-inventory .inventory-transport-carousel__pane.inventory-snapshot-panel.inventory-snapshot-panel--fullscreen {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.32) 0 12px 32px !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Popout chrome at the top: navy gradient band with close + title + CSV.
   Layout: × on the left, title centered, export button on the right. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-popout-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  color: #FFFFFF;
  padding: 12px 16px;
  border-bottom: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
}

/* Promote close + export to direct grid children so they can sit on opposite
   sides of the centered title. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-popout-head > .daily-ops-head-actions {
  display: contents;
}

#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fullscreen-close {
  grid-column: 1;
  justify-self: start;
  order: 1;
}

#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster {
  grid-column: 2;
  justify-self: center;
  order: 2;
}

#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-export-csv-btn,
#tab-inventory .inventory-snapshot-panel--fullscreen #inventoryFullscreenTransitExportCsv,
#tab-inventory .inventory-snapshot-panel--fullscreen #inventoryFullscreenDeliveredExportCsv {
  grid-column: 3;
  justify-self: end;
  order: 3;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match the × button — translucent white pill on the navy gradient. */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-export-csv-btn:hover,
#tab-inventory .inventory-snapshot-panel--fullscreen #inventoryFullscreenTransitExportCsv:hover,
#tab-inventory .inventory-snapshot-panel--fullscreen #inventoryFullscreenDeliveredExportCsv:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  transform: none;
}

/* "Last updated" stamp doesn't fit the new layout — hide it inside the popout. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-popout-head > .dops-table-updated-at,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-popout-head > .dops-table-updated-at--fullscreen-transport {
  display: none;
}

/* Title — white !important needed to beat style.css yellow `!important` rules. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fs-popout-head h3,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster h3 {
  color: #FFFFFF !important;
}

/* Title icon — Alliance accent blue with a thicker stroke. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster .inventory-table-kpi-icon,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster .inventory-table-kpi-icon svg {
  color: var(--alliance-accent) !important;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster .inventory-table-kpi-icon svg [stroke],
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster .inventory-table-kpi-icon svg {
  stroke-width: 2.5;
}

#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster h3 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* "Last updated" stamp in fullscreen — readable on dark gradient. */
#tab-inventory .inventory-snapshot-panel--fullscreen .dops-table-updated-at,
#tab-inventory .inventory-snapshot-panel--fullscreen .dops-table-updated-at--fullscreen-transport {
  color: rgba(255, 255, 255, 0.82);
}

/* Close (×) button — translucent-white pill on the gradient. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fullscreen-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border-radius: 4px;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

/* CSV export button keeps the Alliance accent fill (already styled above). */

/* Data table inside fullscreen — same column bar + alternating rows as
   the non-fullscreen view. */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table th {
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  /* Match the canonical roomy fullscreen recipe (.dops-expand-table). */
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table th:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.22);
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table th .inventory-column-title,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table th .inventory-dops-sort-trigger,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table th .inventory-dops-sort-label,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table th .inventory-filter-btn {
  color: #FFFFFF;
}

#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table tbody tr {
  background: #FFFFFF;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table tbody tr:hover {
  background: #eef2f8;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table td {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  /* Match the canonical roomy fullscreen body cells. */
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table td:last-child {
  border-right: none;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table td:nth-child(1),
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-table td:nth-child(6) {
  text-align: center;
}

/* Footer area inside the fullscreen popout (count + pagination). */
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-footer,
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-summary-row {
  background: #FFFFFF;
  color: #000000;
  border-top: 1px solid #e5e5e5;
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-pagination button {
  background: #FFFFFF;
  border: 1px solid #d5d5d5;
  color: var(--alliance-primary);
}
#tab-inventory .inventory-snapshot-panel--fullscreen .inventory-pagination button:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

/* Mobile (≤640px): force the popout to sit inside the viewport with explicit
   top/right/bottom/left (with !important to beat the higher-specificity
   carousel-pane rule in style.css), and clean up the head layout. */
@media (max-width: 640px) {
  #tab-inventory .inventory-snapshot-panel--fullscreen,
  #tab-inventory .inventory-transport-carousel__pane.inventory-snapshot-panel.inventory-snapshot-panel--fullscreen {
    top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
    right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
    left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: calc(100vw - 1rem) !important;
    box-sizing: border-box;
  }
  /* Tighten padding only — base 3-col grid (X | title | export) stays. */
  #tab-inventory .inventory-snapshot-panel--fullscreen .inventory-snapshot-head,
  #tab-inventory .inventory-snapshot-panel.inventory-snapshot-panel--fullscreen .inventory-fs-popout-head {
    padding-left: 12px;
    padding-right: 12px;
    column-gap: 0.5rem;
  }
  #tab-inventory .inventory-snapshot-panel--fullscreen .inventory-popout-title-cluster {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* Toolbar selects and search field */
.inventory-toolbar select,
.inventory-search input {
  background: #f4f4f8;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  color: #000000;
}
.inventory-toolbar select:focus,
.inventory-search input:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.2);
}
.inventory-search span { color: var(--alliance-text-muted); }

/* Fullscreen-mode dim overlay */
body.inventory-fullscreen-active::before {
  background: rgba(27, 66, 120, 0.45);
}
.inventory-fullscreen-close {
  border: 1px solid #d5d5d5;
  background: #FFFFFF;
  color: var(--alliance-primary);
}
.inventory-fullscreen-close:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

/* =====================================================================
   SITE-WIDE LIGHT THEME — apply the In Transit tile pattern to every
   remaining tab: Events, Tasks, Cash, Compliance, Audits, Upload,
   Research, Requests, Hyla cancel/merch/cancellations, and the global
   modal overlay.

   Pattern reused everywhere:
     - White card (#FFFFFF) + 1px #d8e0ea border + 4px radius + light shadow
     - Navy gradient title bar (#1B4278 → #0a0a0a)
     - Darker navy column bar (#13315a → #000000)
     - Body rows alternate #FFFFFF / #f0f4fa, hover #eef2f8
     - Black text, light dividers #e2e8f0
   ===================================================================== */

/* ---------- Global tile primitive — any tab pane subsection ---------- */
.tab-pane .events-table-panel,
.tab-pane .events-summary-card,
.tab-pane .events-kpi-card,
.tab-pane .tasks-table-panel,
.tab-pane .tasks-kpi-card,
.tab-pane .tasks-side-card,
.tab-pane .upload-page-panel,
.tab-pane .hyla-cancel-panel,
.tab-pane .hyla-list-panel,
.tab-pane .requests-page-shell {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-pane .events-table-panel:hover,
.tab-pane .events-summary-card:hover,
.tab-pane .events-kpi-card:hover,
.tab-pane .tasks-table-panel:hover,
.tab-pane .tasks-kpi-card:hover,
.tab-pane .tasks-side-card:hover,
.tab-pane .upload-page-panel:hover,
.tab-pane .hyla-cancel-panel:hover,
.tab-pane .hyla-list-panel:hover {
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px;
}

/* ---------- Shared table chrome (events, tasks) ---------- */
#tab-events .events-table,
#tab-tasks .tasks-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
}

#tab-events .events-table thead,
#tab-tasks .tasks-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}

#tab-events .events-table thead th,
#tab-tasks .tasks-table thead th {
  color: #FFFFFF !important;
  font-weight: 700;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.55rem 0.75rem;
}

#tab-events .events-table tbody tr,
#tab-tasks .tasks-table tbody tr {
  background: #FFFFFF;
  border-bottom: none;
}

#tab-events .events-table tbody tr:nth-child(even),
#tab-tasks .tasks-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}

#tab-events .events-table tbody tr:hover,
#tab-tasks .tasks-table tbody tr:hover {
  background: #eef2f8;
}

#tab-events .events-table tbody td,
#tab-tasks .tasks-table tbody td {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  padding: 0.55rem 0.75rem;
}

#tab-events .events-table tbody td:last-child,
#tab-tasks .tasks-table tbody td:last-child {
  border-right: none;
}

/* ---------- KPI cards (events / tasks) — light card with navy text ---------- */
#tab-events .events-kpi-card,
#tab-tasks .tasks-kpi-card {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#tab-events .events-kpi-card *,
#tab-tasks .tasks-kpi-card * {
  color: var(--alliance-primary);
}

#tab-events .events-kpi-card small,
#tab-tasks .tasks-kpi-card small {
  color: var(--alliance-text-muted);
}

#tab-events .events-kpi-card strong,
#tab-tasks .tasks-kpi-card strong {
  color: var(--alliance-primary);
  font-size: 1.4rem;
}

#tab-events .events-kpi-icon,
#tab-tasks .tasks-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--alliance-primary);
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Toolbar tab pills (events / tasks) ---------- */
#tab-events .events-tabs,
#tab-tasks .tasks-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  flex-wrap: wrap;
}

#tab-events .events-tab,
#tab-tasks .tasks-tab {
  background: #f4f4f8;
  border: 1px solid #d8e0ea;
  color: var(--alliance-text-muted);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#tab-events .events-tab:hover,
#tab-tasks .tasks-tab:hover {
  background: #FFFFFF;
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}

#tab-events .events-tab.active,
#tab-tasks .tasks-tab.active {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

/* ---------- Filter selects, search inputs, action buttons ---------- */
#tab-events .events-filters,
#tab-tasks .tasks-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
}

#tab-events .events-filters select,
#tab-events .events-search input,
#tab-tasks .tasks-filters select,
#tab-tasks .tasks-search input {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.9rem;
  height: 34px;
}

#tab-events .events-filters select:focus,
#tab-events .events-search input:focus,
#tab-tasks .tasks-filters select:focus,
#tab-tasks .tasks-search input:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.15);
}

#tab-events .events-search,
#tab-tasks .tasks-search {
  position: relative;
}

#tab-events .events-search span,
#tab-tasks .tasks-search span {
  color: var(--alliance-text-muted);
}

#tab-tasks .tasks-tool-btn,
#tab-tasks .tasks-create-btn,
#tab-events .events-tool-btn {
  background: var(--alliance-primary);
  border: 1px solid var(--alliance-primary);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  height: 34px;
}

#tab-tasks .tasks-tool-btn:hover,
#tab-tasks .tasks-create-btn:hover,
#tab-events .events-tool-btn:hover {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

/* ---------- Table footer + pagination ---------- */
#tab-events .events-table-footer,
#tab-tasks .tasks-table-footer {
  padding: 10px 16px;
  background: #FFFFFF;
  color: var(--alliance-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e8f0;
}

#tab-events .events-pagination button,
#tab-tasks .tasks-pagination button {
  background: #f4f4f8;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  margin: 0 2px;
}

#tab-events .events-pagination button:hover,
#tab-tasks .tasks-pagination button:hover {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

/* ---------- Tasks side panel ---------- */
#tab-tasks .tasks-side-card {
  padding: 16px;
  margin-bottom: 16px;
}

#tab-tasks .tasks-side-head {
  color: var(--alliance-primary);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

#tab-tasks .tasks-quick-actions button,
#tab-tasks .tasks-side-card button {
  background: #f4f4f8;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}

#tab-tasks .tasks-quick-actions button:hover,
#tab-tasks .tasks-side-card button:hover {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

/* ---------- Events summary card ---------- */
#tab-events .events-summary-card {
  padding: 16px;
  color: var(--alliance-primary);
}

#tab-events .events-summary-card * {
  color: var(--alliance-primary);
}

/* =====================================================================
   CASH tab — match style.css's #tab-cash .cash-tables-mount specificity
   so the green panel chrome (border, head, h3, meta, sortable hover,
   pagination) is fully replaced by the Alliance light theme: navy
   gradient title bar, darker navy column bar, white card surface.
   ===================================================================== */

#tab-cash .cash-tables-mount .daily-ops-drawers-panel,
#tab-cash .cash-tables-mount .daily-ops-prodnote-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px !important;
  color: #000000;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-head,
#tab-cash .cash-tables-mount .daily-ops-prodnote-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-head h3,
#tab-cash .cash-tables-mount .daily-ops-prodnote-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-head > .inventory-table-kpi-icon,
#tab-cash .cash-tables-mount .daily-ops-prodnote-head > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-meta,
#tab-cash .cash-tables-mount .daily-ops-prodnote-meta,
#tab-cash .cash-tables-mount .daily-ops-drawers-loading,
#tab-cash .cash-tables-mount .daily-ops-prodnote-loading {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table-wrap,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table-wrap {
  scrollbar-color: rgba(27, 66, 120, 0.35) transparent !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table thead,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  backdrop-filter: none;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table thead th,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table thead th {
  background: transparent !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table thead th .dops-sort-arrow,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table thead th .dops-sort-arrow,
#tab-cash .cash-tables-mount table[data-dops-sort-table] thead th.dops-sortable:hover {
  color: #FFFFFF !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table tbody tr,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table tbody tr {
  background: #FFFFFF !important;
  border-bottom: none !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table tbody tr:nth-child(even),
#tab-cash .cash-tables-mount .daily-ops-prodnote-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table tbody tr:hover,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table tbody tr:hover {
  background: #eef2f8 !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table tbody td,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table tbody td {
  color: #000000 !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table tbody td:first-child,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table tbody td:first-child {
  color: #000000 !important;
  font-weight: 600;
}

#tab-cash .cash-tables-mount .daily-ops-drawers-table tbody td:last-child,
#tab-cash .cash-tables-mount .daily-ops-prodnote-table tbody td:last-child {
  border-right: none !important;
}

#tab-cash .cash-tables-mount .dops-sort-arrow {
  color: #FFFFFF !important;
}

#tab-cash .cash-tables-mount .dops-table-expand-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

#tab-cash .cash-tables-mount .dops-table-expand-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
}

#tab-cash .cash-tables-mount .table-pagination.dops-pagination {
  color: var(--alliance-text-muted) !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #FFFFFF;
}

#tab-cash .cash-tables-mount .table-pagination.dops-pagination .table-pagination__range {
  color: var(--alliance-text-muted) !important;
}

#tab-cash .cash-tables-mount .table-pg__arrow,
#tab-cash .cash-tables-mount .table-pg__num {
  background: #f4f6fa !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px;
}

#tab-cash .cash-tables-mount .table-pg__arrow:hover:not([disabled]),
#tab-cash .cash-tables-mount .table-pg__num:hover:not(.is-active) {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

#tab-cash .cash-tables-mount .table-pg__num.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* Compliance mirrors the same .compliance-tables-mount specificity. */
#tab-compliance .compliance-tables-mount .daily-ops-ipog-panel,
#tab-compliance .compliance-tables-mount .daily-ops-da-panel,
#tab-compliance .compliance-tables-mount .daily-ops-scans-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px !important;
  color: #000000;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-head,
#tab-compliance .compliance-tables-mount .daily-ops-da-head,
#tab-compliance .compliance-tables-mount .daily-ops-scans-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-head h3,
#tab-compliance .compliance-tables-mount .daily-ops-da-head h3,
#tab-compliance .compliance-tables-mount .daily-ops-scans-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-head > .inventory-table-kpi-icon,
#tab-compliance .compliance-tables-mount .daily-ops-da-head > .inventory-table-kpi-icon,
#tab-compliance .compliance-tables-mount .daily-ops-scans-head > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-meta,
#tab-compliance .compliance-tables-mount .daily-ops-da-meta,
#tab-compliance .compliance-tables-mount .daily-ops-scans-meta {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table-wrap,
#tab-compliance .compliance-tables-mount .daily-ops-da-table-wrap,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table-wrap {
  scrollbar-color: rgba(27, 66, 120, 0.35) transparent !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* IPOG renders every column from ipog_latest_location_summary, which
   blows well past the viewport width. Force the table to its natural
   content width so the wrap's overflow-x: auto kicks in instead of
   squishing each column. */
#tab-compliance .compliance-tables-mount .daily-ops-ipog-table-wrap .daily-ops-ipog-table,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table-wrap .daily-ops-ipog-table {
  width: max-content !important;
  min-width: 100% !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table thead,
#tab-compliance .compliance-tables-mount .daily-ops-da-table thead,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table thead th,
#tab-compliance .compliance-tables-mount .daily-ops-da-table thead th,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table thead th {
  background: transparent !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table thead th .dops-sort-arrow,
#tab-compliance .compliance-tables-mount .daily-ops-da-table thead th .dops-sort-arrow,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table thead th .dops-sort-arrow,
#tab-compliance .compliance-tables-mount table[data-dops-sort-table] thead th.dops-sortable:hover {
  color: #FFFFFF !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table tbody tr,
#tab-compliance .compliance-tables-mount .daily-ops-da-table tbody tr,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody tr {
  background: #FFFFFF !important;
  border-bottom: none !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table tbody tr:nth-child(even),
#tab-compliance .compliance-tables-mount .daily-ops-da-table tbody tr:nth-child(even),
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table tbody tr:hover,
#tab-compliance .compliance-tables-mount .daily-ops-da-table tbody tr:hover,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody tr:hover {
  background: #eef2f8 !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table tbody td,
#tab-compliance .compliance-tables-mount .daily-ops-da-table tbody td,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody td {
  color: #000000 !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}

#tab-compliance .compliance-tables-mount .daily-ops-ipog-table tbody td:last-child,
#tab-compliance .compliance-tables-mount .daily-ops-da-table tbody td:last-child,
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody td:last-child {
  border-right: none !important;
}

/* Conditional formatting for the scan status cells (Daily Count Status +
   Monthly Count Completion / Serialized / Non-Serialized / SIMS). Must be
   ID-scoped + !important to beat the `.daily-ops-scans-table tbody td {
   color:#000 !important }` theme rules above. Green = good (Counted / Yes),
   red = everything else; readable shades for the white table background. */
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody td.scans-status-complete,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody td.scans-status-complete {
  color: #16a34a !important;
}
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody td.scans-status-incomplete,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody td.scans-status-incomplete {
  color: #dc2626 !important;
}
/* Daily Device Scans "Scans This Month": short of the full fraction by 1–5
   open days -> amber/yellow (short by 6+ uses the red rule above). Needs the
   same ID-scope + !important to beat the black td rule. */
#tab-compliance .compliance-tables-mount .daily-ops-scans-table tbody td.scans-mtd-warn,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody td.scans-mtd-warn {
  color: #d97706 !important;
}

/* Monthly Scans: bold the cell data. */
#tab-compliance .compliance-tables-mount .daily-ops-scans-panel--monthly .daily-ops-scans-table tbody td,
#tab-compliance .daily-ops-scans-panel--monthly .daily-ops-scans-table tbody td {
  font-weight: 700 !important;
}

/* =====================================================================
   CASH + COMPLIANCE daily-ops tables (drawers, prodnote, ipog, da, scans,
   obs-acc, eol). Same pattern: darker navy column bar, alternating rows,
   light dividers. The panel container + title bar are already themed in
   the daily-ops-* alias section.
   ===================================================================== */

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table thead,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table thead,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table thead,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table thead,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table thead,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table thead,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table thead th,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table thead th,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table thead th,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table thead th,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table thead th,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table thead th,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table thead th {
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table thead th .dops-sort-arrow,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table thead th .dops-sort-arrow,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table thead th .dops-sort-arrow,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table thead th .dops-sort-arrow,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table thead th .dops-sort-arrow,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table thead th .dops-sort-arrow,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table thead th .dops-sort-arrow {
  color: #FFFFFF;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table tbody tr,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody tr,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table tbody tr,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table tbody tr,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody tr,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody tr,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table tbody tr {
  background: #FFFFFF;
  border-bottom: none;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table tbody tr:nth-child(even),
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody tr:nth-child(even),
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table tbody tr:nth-child(even),
#tab-compliance .daily-ops-da-panel .daily-ops-da-table tbody tr:nth-child(even),
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody tr:nth-child(even),
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody tr:nth-child(even),
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table tbody tr:hover,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody tr:hover,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table tbody tr:hover,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table tbody tr:hover,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody tr:hover,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody tr:hover,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table tbody tr:hover {
  background: #eef2f8;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table tbody td,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody td,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table tbody td,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table tbody td,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody td,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody td,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table tbody td {
  color: #000000;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#tab-cash .daily-ops-drawers-panel .daily-ops-drawers-table tbody td:last-child,
#tab-cash .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody td:last-child,
#tab-compliance .daily-ops-ipog-panel .daily-ops-ipog-table tbody td:last-child,
#tab-compliance .daily-ops-da-panel .daily-ops-da-table tbody td:last-child,
#tab-compliance .daily-ops-scans-panel .daily-ops-scans-table tbody td:last-child,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody td:last-child,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-table tbody td:last-child {
  border-right: none;
}

/* =====================================================================
   GENERIC inventory-table fallback (raw search, fullscreen popouts,
   research mount, etc.) — when an inventory-style table is rendered
   inside a tab pane, apply the same In Transit chrome.
   ===================================================================== */
.tab-pane .inventory-table thead,
.tab-pane table[data-dops-sort-table] thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}

.tab-pane .inventory-table thead th,
.tab-pane table[data-dops-sort-table] thead th {
  color: #FFFFFF;
  font-weight: 700;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.tab-pane .inventory-table thead th .dops-sort-arrow,
.tab-pane table[data-dops-sort-table] thead th .dops-sort-arrow,
.tab-pane .inventory-table thead th .inventory-dops-sort-trigger,
.tab-pane .inventory-table thead th .inventory-dops-sort-label,
.tab-pane .inventory-table thead th .inventory-filter-btn,
.tab-pane .inventory-table thead th .inventory-column-title {
  color: #FFFFFF;
}

.tab-pane .inventory-table tbody tr {
  background: #FFFFFF;
}
.tab-pane .inventory-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
.tab-pane .inventory-table tbody tr:hover {
  background: #eef2f8;
}
.tab-pane .inventory-table tbody td {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
.tab-pane .inventory-table tbody td:last-child {
  border-right: none;
}

/* =====================================================================
   AUDITS tab — the audits mount renders cards/panels via JS. Force the
   tab pane's root to a light background so child content reads on it.
   ===================================================================== */
#tab-audits,
#tab-audits .audits-tab-shell,
#tab-audits #auditsPageMount {
  background: transparent;
  color: #000000;
}

#tab-audits .audits-tab-shell > *,
#tab-audits #auditsPageMount > * {
  color: #000000;
}

/* =====================================================================
   MERCHANDISING WALKTHROUGH (.audit-mwalk / .audit-mw-*) — Alliance light
   theme. The component ships hardcoded dark colors in style.css, so every
   surface/text/accent is remapped here. Selectors are doubled with both
   the inline mount scope (#tab-audits) and the full-screen popout scope
   (#auditsMwWalkPopout), which is portaled to <body>.
   Palette: surfaces #fff / #f4f6fa · borders #d8e0ea · text navy
   var(--alliance-primary) · muted #5b6372 · accent var(--alliance-accent).
   ===================================================================== */

/* ---- Root shell ---- */
#tab-audits .audit-mwalk,
#auditsMwWalkPopout .audit-mwalk {
  background: linear-gradient(165deg, #ffffff 0%, #f4f6fa 100%);
  border-color: #d8e0ea;
  box-shadow: 0 18px 48px rgba(27, 66, 120, 0.12);
  color: var(--alliance-primary);
}

/* Blue titlebar — bleeds to the card edges, mirrors .do-page-header. */
#tab-audits .audit-mwalk-head,
#auditsMwWalkPopout .audit-mwalk-head {
  margin: -1.15rem -1.1rem 1rem;
  padding: 0.8rem 1.1rem;
  background: linear-gradient(90deg, #1b4278 0%, #0a0a0a 100%);
  border-radius: 12px 12px 0 0;
  align-items: center;
}

#auditsMwWalkPopout .audit-mwalk-head--popout {
  padding-right: 6rem;
}

#auditsMwWalkPopout .audit-mwalk-popout-head-actions {
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
}

#tab-audits .audit-mwalk-title,
#auditsMwWalkPopout .audit-mwalk-title {
  color: #ffffff;
}

#tab-audits .audit-mwalk-sub,
#auditsMwWalkPopout .audit-mwalk-sub {
  color: rgba(255, 255, 255, 0.78);
}

#tab-audits .audit-mwalk-sync,
#auditsMwWalkPopout .audit-mwalk-sync {
  border-color: #bfe0f2;
  background: #e8f4fb;
  color: var(--alliance-accent);
}

#tab-audits .audit-mwalk-sync:hover,
#auditsMwWalkPopout .audit-mwalk-sync:hover {
  background: #d6edf9;
  border-color: var(--alliance-accent);
}

/* ---- Setup search ---- */
#tab-audits .audit-mw-setup-search-input,
#auditsMwWalkPopout .audit-mw-setup-search-input {
  border-color: #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-setup-search-input::placeholder,
#auditsMwWalkPopout .audit-mw-setup-search-input::placeholder {
  color: #8a93a3;
}

#tab-audits .audit-mw-setup-search-input:focus,
#auditsMwWalkPopout .audit-mw-setup-search-input:focus {
  border-color: var(--alliance-accent);
}

#tab-audits .audit-mw-setup-search-status,
#auditsMwWalkPopout .audit-mw-setup-search-status {
  color: #5b6372;
}

#tab-audits .audit-mw-setup-search-dropdown,
#auditsMwWalkPopout .audit-mw-setup-search-dropdown {
  border-color: #d8e0ea;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(27, 66, 120, 0.18), 0 2px 8px rgba(27, 66, 120, 0.1);
}

#tab-audits .audit-mw-setup-search-hit,
#auditsMwWalkPopout .audit-mw-setup-search-hit {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-setup-search-hit:hover,
#tab-audits .audit-mw-setup-search-hit:focus-visible,
#auditsMwWalkPopout .audit-mw-setup-search-hit:hover,
#auditsMwWalkPopout .audit-mw-setup-search-hit:focus-visible {
  background: rgba(0, 159, 219, 0.1);
}

#tab-audits .audit-mw-setup-search-muted,
#auditsMwWalkPopout .audit-mw-setup-search-muted,
#tab-audits .audit-mw-setup-search-sub,
#auditsMwWalkPopout .audit-mw-setup-search-sub,
#tab-audits .audit-mw-setup-search-msg,
#auditsMwWalkPopout .audit-mw-setup-search-msg {
  color: #5b6372;
}

#tab-audits .audit-mw-setup-search-msg strong,
#auditsMwWalkPopout .audit-mw-setup-search-msg strong {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-setup-search-msg--warn,
#auditsMwWalkPopout .audit-mw-setup-search-msg--warn {
  color: #b45309;
}

#tab-audits .audit-mw-setup-search-msg--mute,
#auditsMwWalkPopout .audit-mw-setup-search-msg--mute {
  color: #8a93a3;
}

#tab-audits .audit-mw-setup-search-badge,
#auditsMwWalkPopout .audit-mw-setup-search-badge {
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-accent);
}

#tab-audits .audit-mw-setup-search-badge--store,
#auditsMwWalkPopout .audit-mw-setup-search-badge--store {
  background: rgba(27, 66, 120, 0.1);
  color: var(--alliance-primary);
}

/* ---- Selector copy + Start CTA ---- */
#tab-audits .audit-mw-selector-copy,
#auditsMwWalkPopout .audit-mw-selector-copy {
  border-color: #bfe0f2;
  background:
    radial-gradient(circle at top right, rgba(0, 159, 219, 0.12), transparent 42%),
    #f4f6fa;
}

#tab-audits .audit-mw-selector-kicker,
#auditsMwWalkPopout .audit-mw-selector-kicker {
  color: var(--alliance-accent);
}

#tab-audits .audit-mw-selector-title,
#auditsMwWalkPopout .audit-mw-selector-title {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-selector-text,
#auditsMwWalkPopout .audit-mw-selector-text {
  color: #5b6372;
}

#tab-audits .audit-mw-start,
#auditsMwWalkPopout .audit-mw-start {
  background: linear-gradient(135deg, var(--alliance-primary) 0%, #2a5694 100%);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(27, 66, 120, 0.28);
}

#tab-audits .audit-mw-start:hover,
#auditsMwWalkPopout .audit-mw-start:hover {
  box-shadow: 0 18px 32px rgba(27, 66, 120, 0.34);
}

/* ---- Context cards ---- */
#tab-audits .audit-mw-card,
#auditsMwWalkPopout .audit-mw-card {
  border-color: #d8e0ea;
  background: #ffffff;
}

#tab-audits .audit-mw-card-icon,
#auditsMwWalkPopout .audit-mw-card-icon {
  color: var(--alliance-accent);
}

#tab-audits .audit-mw-card-label,
#auditsMwWalkPopout .audit-mw-card-label {
  color: #5b6372;
}

#tab-audits .audit-mw-card-value,
#auditsMwWalkPopout .audit-mw-card-value {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-card-chev,
#auditsMwWalkPopout .audit-mw-card-chev {
  border-right-color: #8a93a3;
  border-bottom-color: #8a93a3;
}

#tab-audits .audit-mw-select,
#auditsMwWalkPopout .audit-mw-select {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-select:disabled,
#tab-audits .audit-mw-select.audit-mw-select--disabled,
#auditsMwWalkPopout .audit-mw-select:disabled,
#auditsMwWalkPopout .audit-mw-select.audit-mw-select--disabled {
  color: #8a93a3;
}

/* ---- Tabs ---- */
#tab-audits .audit-mw-tabs,
#auditsMwWalkPopout .audit-mw-tabs {
  border-bottom-color: #d8e0ea;
}

#tab-audits .audit-mw-tab,
#auditsMwWalkPopout .audit-mw-tab {
  color: #5b6372;
}

#tab-audits .audit-mw-tab.is-active,
#auditsMwWalkPopout .audit-mw-tab.is-active {
  color: var(--alliance-accent);
  border-bottom-color: var(--alliance-accent);
}

#tab-audits .audit-mw-badge,
#auditsMwWalkPopout .audit-mw-badge {
  background: rgba(0, 159, 219, 0.15);
  color: var(--alliance-accent);
}

/* ---- Dashboard ---- */
#tab-audits .audit-mw-dash,
#auditsMwWalkPopout .audit-mw-dash {
  border-color: #d8e0ea;
  background: #f4f6fa;
}

#tab-audits .audit-mw-dash-top,
#auditsMwWalkPopout .audit-mw-dash-top {
  border-bottom-color: #d8e0ea;
}

#tab-audits .audit-mw-progress-label,
#auditsMwWalkPopout .audit-mw-progress-label,
#tab-audits .audit-mw-progress-sub,
#auditsMwWalkPopout .audit-mw-progress-sub {
  color: #5b6372;
}

#tab-audits .audit-mw-progress-pct,
#auditsMwWalkPopout .audit-mw-progress-pct {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-progress-bar,
#auditsMwWalkPopout .audit-mw-progress-bar {
  background: #e1e7f0;
}

#tab-audits .audit-mw-progress-bar > span,
#auditsMwWalkPopout .audit-mw-progress-bar > span {
  background: linear-gradient(90deg, var(--alliance-primary), var(--alliance-accent));
}

#tab-audits .audit-mw-mini strong,
#auditsMwWalkPopout .audit-mw-mini strong {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-mini span:last-child,
#auditsMwWalkPopout .audit-mw-mini span:last-child {
  color: #5b6372;
}

#tab-audits .audit-mw-mini-ic--ok,
#auditsMwWalkPopout .audit-mw-mini-ic--ok {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}

#tab-audits .audit-mw-mini-ic--clock,
#auditsMwWalkPopout .audit-mw-mini-ic--clock {
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-accent);
}

#tab-audits .audit-mw-mini-ic--rem,
#auditsMwWalkPopout .audit-mw-mini-ic--rem {
  background: rgba(91, 99, 114, 0.12);
  color: #5b6372;
}

#tab-audits .audit-mw-status-pill,
#auditsMwWalkPopout .audit-mw-status-pill {
  background: rgba(21, 128, 61, 0.14);
  color: #15803d;
}

#tab-audits .audit-mw-session-meta,
#auditsMwWalkPopout .audit-mw-session-meta {
  color: #5b6372;
}

#tab-audits .audit-mw-session-context-item,
#auditsMwWalkPopout .audit-mw-session-context-item {
  border-color: #d8e0ea;
  background: #ffffff;
}

#tab-audits .audit-mw-session-context-item span,
#auditsMwWalkPopout .audit-mw-session-context-item span {
  color: #5b6372;
}

#tab-audits .audit-mw-session-context-item strong,
#auditsMwWalkPopout .audit-mw-session-context-item strong {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-timer-label,
#auditsMwWalkPopout .audit-mw-timer-label {
  color: #5b6372;
}

#tab-audits .audit-mw-timer,
#auditsMwWalkPopout .audit-mw-timer {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-ring-bg,
#auditsMwWalkPopout .audit-mw-ring-bg {
  stroke: #e1e7f0;
}

#tab-audits .audit-mw-ring-fg,
#auditsMwWalkPopout .audit-mw-ring-fg {
  stroke: var(--alliance-accent);
}

#tab-audits .audit-mw-ring-txt,
#auditsMwWalkPopout .audit-mw-ring-txt {
  fill: var(--alliance-primary);
}

/* ---- Evidence cards / fields ---- */
#tab-audits .audit-mw-evidence-card,
#auditsMwWalkPopout .audit-mw-evidence-card {
  border-color: #d8e0ea;
  background: #ffffff;
}

#tab-audits .audit-mw-walk-composer-hint,
#auditsMwWalkPopout .audit-mw-walk-composer-hint {
  color: #5b6372;
}

#tab-audits .audit-mw-evidence-field span,
#tab-audits .audit-mw-evidence-label,
#auditsMwWalkPopout .audit-mw-evidence-field span,
#auditsMwWalkPopout .audit-mw-evidence-label {
  color: #5b6372;
}

#tab-audits .audit-mw-evidence-input,
#auditsMwWalkPopout .audit-mw-evidence-input {
  border-color: #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-evidence-input::placeholder,
#auditsMwWalkPopout .audit-mw-evidence-input::placeholder {
  color: #8a93a3;
}

#tab-audits .audit-mw-qty-stepper-btn,
#auditsMwWalkPopout .audit-mw-qty-stepper-btn {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-qty-stepper-btn:hover:not(:disabled),
#auditsMwWalkPopout .audit-mw-qty-stepper-btn:hover:not(:disabled) {
  border-color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-evidence-action-label,
#auditsMwWalkPopout .audit-mw-evidence-action-label {
  color: #5b6372;
}

#tab-audits .audit-mw-evidence-btn,
#auditsMwWalkPopout .audit-mw-evidence-btn {
  border-color: rgba(0, 159, 219, 0.45);
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-accent);
}

#tab-audits .audit-mw-evidence-icon-btn,
#auditsMwWalkPopout .audit-mw-evidence-icon-btn {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: #5b6372;
}

#tab-audits .audit-mw-evidence-icon-btn--add,
#auditsMwWalkPopout .audit-mw-evidence-icon-btn--add {
  color: var(--alliance-accent);
  border-color: rgba(0, 159, 219, 0.45);
  background: rgba(0, 159, 219, 0.12);
}

#tab-audits .audit-mw-evidence-priority-btn.audit-mw-evidence-btn--icon,
#auditsMwWalkPopout .audit-mw-evidence-priority-btn.audit-mw-evidence-btn--icon {
  color: var(--alliance-primary);
  border-color: #d8e0ea;
  background: #f4f6fa;
}

#tab-audits .audit-mw-evidence-priority-btn--high.audit-mw-evidence-btn--icon,
#auditsMwWalkPopout .audit-mw-evidence-priority-btn--high.audit-mw-evidence-btn--icon {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.4);
  background: #fdecec;
}

#tab-audits .audit-mw-evidence-priority-btn--medium.audit-mw-evidence-btn--icon,
#auditsMwWalkPopout .audit-mw-evidence-priority-btn--medium.audit-mw-evidence-btn--icon {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.4);
  background: #fdf3e3;
}

#tab-audits .audit-mw-evidence-priority-btn--low.audit-mw-evidence-btn--icon,
#auditsMwWalkPopout .audit-mw-evidence-priority-btn--low.audit-mw-evidence-btn--icon {
  color: #15803d;
  border-color: rgba(21, 128, 61, 0.4);
  background: #e8f5ec;
}

#tab-audits .audit-mw-evidence-priority-pill,
#auditsMwWalkPopout .audit-mw-evidence-priority-pill {
  border-color: #d8e0ea;
}

#tab-audits .audit-mw-evidence-priority-pill--high,
#auditsMwWalkPopout .audit-mw-evidence-priority-pill--high {
  border-color: rgba(185, 28, 28, 0.35);
  color: #b91c1c;
  background: #fdecec;
}

#tab-audits .audit-mw-evidence-priority-pill--medium,
#auditsMwWalkPopout .audit-mw-evidence-priority-pill--medium {
  border-color: rgba(180, 83, 9, 0.35);
  color: #b45309;
  background: #fdf3e3;
}

#tab-audits .audit-mw-evidence-priority-pill--low,
#auditsMwWalkPopout .audit-mw-evidence-priority-pill--low {
  border-color: rgba(21, 128, 61, 0.35);
  color: #15803d;
  background: #e8f5ec;
}

#tab-audits .audit-mw-evidence-btn--ghost,
#auditsMwWalkPopout .audit-mw-evidence-btn--ghost {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: #5b6372;
}

#tab-audits .audit-mw-evidence-check-ui,
#auditsMwWalkPopout .audit-mw-evidence-check-ui {
  border-color: #b3bccb;
  background: #ffffff;
}

#tab-audits .audit-mw-evidence-check input:checked + .audit-mw-evidence-check-ui,
#auditsMwWalkPopout .audit-mw-evidence-check input:checked + .audit-mw-evidence-check-ui {
  border-color: #15803d;
  background: rgba(21, 128, 61, 0.16);
}

#tab-audits .audit-mw-evidence-check input:checked + .audit-mw-evidence-check-ui::after,
#auditsMwWalkPopout .audit-mw-evidence-check input:checked + .audit-mw-evidence-check-ui::after {
  border-right-color: #15803d;
  border-bottom-color: #15803d;
}

#tab-audits .audit-mw-evidence-trash,
#auditsMwWalkPopout .audit-mw-evidence-trash {
  border-color: rgba(185, 28, 28, 0.3);
  background: #fdecec;
  color: #b91c1c;
}

#tab-audits .audit-mw-evidence-trash:hover,
#auditsMwWalkPopout .audit-mw-evidence-trash:hover {
  background: #fbdada;
  border-color: rgba(185, 28, 28, 0.5);
  color: #b91c1c;
}

#tab-audits .audit-mw-evidence-photo-wrap,
#auditsMwWalkPopout .audit-mw-evidence-photo-wrap {
  border-color: #d8e0ea;
  background: #f4f6fa;
}

#tab-audits .audit-mw-evidence-icon-btn--photo,
#auditsMwWalkPopout .audit-mw-evidence-icon-btn--photo {
  background: rgba(255, 255, 255, 0.9);
}

#tab-audits .audit-mw-evidence-icon-btn--danger,
#auditsMwWalkPopout .audit-mw-evidence-icon-btn--danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.5);
}

#tab-audits .audit-mw-order-tile-thumb--empty,
#auditsMwWalkPopout .audit-mw-order-tile-thumb--empty {
  border-color: #cfd6e2;
  background: #f4f6fa;
}

#tab-audits .audit-mw-order-tile-thumb-add,
#auditsMwWalkPopout .audit-mw-order-tile-thumb-add {
  color: #8a93a3;
}

#tab-audits .audit-mw-order-tile-thumb-add:hover,
#auditsMwWalkPopout .audit-mw-order-tile-thumb-add:hover {
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.08);
}

#tab-audits .audit-mw-evidence-title,
#auditsMwWalkPopout .audit-mw-evidence-title {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-evidence-text,
#auditsMwWalkPopout .audit-mw-evidence-text {
  color: #5b6372;
}

#tab-audits .audit-mw-empty-panel,
#auditsMwWalkPopout .audit-mw-empty-panel {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: #5b6372;
}

/* ---- Notes ---- */
#tab-audits .audit-mw-notes-label,
#auditsMwWalkPopout .audit-mw-notes-label {
  color: #5b6372;
}

#tab-audits .audit-mw-notes-textarea,
#auditsMwWalkPopout .audit-mw-notes-textarea {
  border-color: #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-notes-textarea::placeholder,
#auditsMwWalkPopout .audit-mw-notes-textarea::placeholder {
  color: #8a93a3;
}

#tab-audits .audit-mw-notes-textarea:focus,
#auditsMwWalkPopout .audit-mw-notes-textarea:focus {
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 1px rgba(0, 159, 219, 0.2);
}

#tab-audits .audit-mw-notes,
#auditsMwWalkPopout .audit-mw-notes {
  border-color: #d8e0ea;
  background: #f4f6fa;
}

#tab-audits .audit-mw-notes-head,
#auditsMwWalkPopout .audit-mw-notes-head {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-notes-input,
#auditsMwWalkPopout .audit-mw-notes-input {
  border-color: #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-notes-recent,
#auditsMwWalkPopout .audit-mw-notes-recent {
  border-top-color: #d8e0ea;
}

#tab-audits .audit-mw-notes-quote,
#auditsMwWalkPopout .audit-mw-notes-quote {
  color: #475063;
}

#tab-audits .audit-mw-notes-meta,
#auditsMwWalkPopout .audit-mw-notes-meta {
  color: #8a93a3;
}

#tab-audits .audit-mw-notes-all,
#auditsMwWalkPopout .audit-mw-notes-all {
  color: var(--alliance-accent);
}

/* ---- Task toolbar + list ---- */
#tab-audits .audit-mw-search,
#auditsMwWalkPopout .audit-mw-search {
  border-color: #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-search::placeholder,
#auditsMwWalkPopout .audit-mw-search::placeholder {
  color: #8a93a3;
}

#tab-audits .audit-mw-cat,
#auditsMwWalkPopout .audit-mw-cat {
  border-color: #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-filter-ic,
#auditsMwWalkPopout .audit-mw-filter-ic {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: #5b6372;
}

#tab-audits .audit-mw-task,
#auditsMwWalkPopout .audit-mw-task {
  border-color: #d8e0ea;
  background: #ffffff;
}

#tab-audits .audit-mw-task-check-ui,
#auditsMwWalkPopout .audit-mw-task-check-ui {
  border-color: #b3bccb;
  background: #ffffff;
}

#tab-audits .audit-mw-task-check input:checked + .audit-mw-task-check-ui,
#auditsMwWalkPopout .audit-mw-task-check input:checked + .audit-mw-task-check-ui {
  border-color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.18);
}

#tab-audits .audit-mw-task-check input:checked + .audit-mw-task-check-ui::after,
#auditsMwWalkPopout .audit-mw-task-check input:checked + .audit-mw-task-check-ui::after {
  border-color: var(--alliance-accent);
}

#tab-audits .audit-mw-task-title,
#auditsMwWalkPopout .audit-mw-task-title {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-task-desc,
#auditsMwWalkPopout .audit-mw-task-desc,
#tab-audits .audit-mw-task-date,
#auditsMwWalkPopout .audit-mw-task-date {
  color: #5b6372;
}

#tab-audits .audit-mw-pri--high,
#auditsMwWalkPopout .audit-mw-pri--high {
  background: #fdecec;
  color: #b91c1c;
}

#tab-audits .audit-mw-pri--medium,
#auditsMwWalkPopout .audit-mw-pri--medium {
  background: #fdf3e3;
  color: #b45309;
}

#tab-audits .audit-mw-pri--low,
#auditsMwWalkPopout .audit-mw-pri--low {
  background: #e6eefb;
  color: #1d4ed8;
}

#tab-audits .audit-mw-row-ic--done,
#auditsMwWalkPopout .audit-mw-row-ic--done {
  color: #15803d;
}

#tab-audits .audit-mw-row-ic--progress,
#auditsMwWalkPopout .audit-mw-row-ic--progress {
  color: var(--alliance-accent);
}

#tab-audits .audit-mw-row-ic--todo,
#auditsMwWalkPopout .audit-mw-row-ic--todo {
  color: #8a93a3;
}

/* ---- End CTA ---- */
#tab-audits .audit-mw-end,
#auditsMwWalkPopout .audit-mw-end {
  background: linear-gradient(180deg, #2a5694 0%, var(--alliance-primary) 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(27, 66, 120, 0.35);
}

/* ---- Attachments ---- */
#tab-audits .audit-mw-attach-drop,
#auditsMwWalkPopout .audit-mw-attach-drop {
  border-color: #cfd6e2;
  background: #f4f6fa;
}

#tab-audits .audit-mw-attach-drop--active,
#tab-audits .audit-mw-attach-drop:hover,
#auditsMwWalkPopout .audit-mw-attach-drop--active,
#auditsMwWalkPopout .audit-mw-attach-drop:hover {
  border-color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.08);
}

#tab-audits .audit-mw-attach-drop-svg,
#auditsMwWalkPopout .audit-mw-attach-drop-svg {
  color: #8a93a3;
}

#tab-audits .audit-mw-attach-drop-title,
#auditsMwWalkPopout .audit-mw-attach-drop-title {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-attach-drop-hint,
#auditsMwWalkPopout .audit-mw-attach-drop-hint {
  color: #5b6372;
}

#tab-audits .audit-mw-attach-row,
#auditsMwWalkPopout .audit-mw-attach-row {
  background: #ffffff;
  border-color: #d8e0ea;
}

#tab-audits .audit-mw-attach-thumb,
#auditsMwWalkPopout .audit-mw-attach-thumb {
  background: #f4f6fa;
  border-color: #d8e0ea;
}

#tab-audits .audit-mw-attach-thumb--icon,
#auditsMwWalkPopout .audit-mw-attach-thumb--icon {
  color: #5b6372;
}

#tab-audits .audit-mw-attach-name,
#auditsMwWalkPopout .audit-mw-attach-name {
  color: var(--alliance-primary);
}

#tab-audits .audit-mw-attach-mime,
#auditsMwWalkPopout .audit-mw-attach-mime {
  color: #5b6372;
}

#tab-audits .audit-mw-attach-remove,
#auditsMwWalkPopout .audit-mw-attach-remove {
  color: #b91c1c;
  background: #fdecec;
}

#tab-audits .audit-mw-attach-remove:hover,
#auditsMwWalkPopout .audit-mw-attach-remove:hover {
  background: #fbdada;
}

#tab-audits .audit-mw-attach-empty,
#auditsMwWalkPopout .audit-mw-attach-empty {
  color: #5b6372;
  border-color: #cfd6e2;
}

/* ---- Popout shell + minimized dock ---- */
#auditsMwWalkPopout.audit-mwalk-popout {
  background: rgba(27, 66, 120, 0.32);
}

#auditsMwWalkPopout.audit-mwalk-popout.audit-mwalk-popout--file-drag {
  outline-color: var(--alliance-accent);
  background: rgba(27, 66, 120, 0.42);
}

#auditsMwWalkPopout .audit-mwalk-popout-endbar {
  border-top-color: #d8e0ea;
  background: rgba(255, 255, 255, 0.96);
}

#auditsMwWalkPopout .audit-mwalk-popout-minimize {
  border-color: #d8e0ea;
  background: #ffffff;
  color: #5b6372;
}

#auditsMwWalkPopout .audit-mwalk-popout-minimize:hover {
  background: #f4f6fa;
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}

#auditsMwWalkPopout .audit-mwalk-popout-cancel {
  border-color: rgba(185, 28, 28, 0.3);
  background: #fdecec;
  color: #b91c1c;
}

#auditsMwWalkPopout .audit-mwalk-popout-cancel:hover {
  background: #fbdada;
  border-color: rgba(185, 28, 28, 0.5);
  color: #b91c1c;
}

/* Pop-out (icon) + pop-back (labeled) controls in the popout header. */
#auditsMwWalkPopout .audit-mwalk-popout-popout {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: #5b6372;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

#auditsMwWalkPopout .audit-mwalk-popout-popout:hover {
  background: #f4f6fa;
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}

#auditsMwWalkPopout .audit-mwalk-popout-head-actions .audit-mwalk-popout-popback {
  width: auto;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.85rem;
  border-radius: 9px;
  border: 1px solid var(--alliance-accent);
  background: rgba(0, 159, 219, 0.28);
  color: #ffffff;
  font: 800 0.78rem var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

#auditsMwWalkPopout .audit-mwalk-popout-popback:hover {
  background: rgba(0, 159, 219, 0.42);
}

/* Give the popped-out header room for the labeled "Pop back in" button. */
#auditsMwWalkPopout.audit-mwalk-popout--window .audit-mwalk-head--popout {
  padding-right: 9rem;
}

/* The walkthrough popout fills its window (no scrim/centered card) and the
   End button is attached flush to the bottom of the tile — same in the in-app
   popout and the popped-out window. */
#auditsMwWalkPopout.audit-mwalk-popout {
  padding: 0;
  background: #ffffff;
}

#auditsMwWalkPopout.audit-mwalk-popout .audit-mwalk-popout-scroll {
  padding: 0;
}

#auditsMwWalkPopout.audit-mwalk-popout .audit-mwalk.audit-mwalk--popout {
  max-width: none;
  width: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#auditsMwWalkPopout.audit-mwalk-popout .audit-mwalk-head {
  border-radius: 0;
  /* Full-bleed popout reaches the physical top of the screen (the shell's
     safe-area padding is zeroed above), so the navy band itself absorbs the
     iOS status-bar inset — title/actions render below the clock. */
  padding-top: calc(0.8rem + env(safe-area-inset-top, 0px));
}

#auditsMwWalkPopout.audit-mwalk-popout .audit-mwalk-popout-head-actions {
  /* Keep the action buttons centered on the title line, not the taller band. */
  top: calc(50% + env(safe-area-inset-top, 0px) / 2);
}

#auditsMwWalkPopout.audit-mwalk-popout .audit-mwalk-popout-endbar {
  border-top: 1px solid #d8e0ea;
  background: #ffffff;
}

/* Popped-out window: icon-only tabs (hide the text labels). */
#auditsMwWalkPopout.audit-mwalk-popout--window .audit-mw-tab-label {
  display: none;
}

#auditsMwWalkPopout.audit-mwalk-popout--window .audit-mw-tab {
  gap: 0.3rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

#auditsMwWalkPopout.audit-mwalk-popout--window .audit-mw-tab svg {
  width: 18px;
  height: 18px;
}

/* "Walkthrough popped out" indicator — a small dock, not a full-screen block,
   so the rest of the app stays usable while the walkthrough is in its window. */
.audit-mw-popped-placeholder {
  position: fixed;
  right: max(0.9rem, env(safe-area-inset-right, 0px));
  bottom: max(0.9rem, env(safe-area-inset-bottom, 0px));
  z-index: 9100;
  width: min(320px, calc(100vw - 1.8rem));
}

@media (max-width: 767px) {
  .audit-mw-popped-placeholder {
    bottom: calc(64px + 0.6rem + env(safe-area-inset-bottom, 0px));
  }
}

.audit-mw-popped-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(27, 66, 120, 0.22);
  color: var(--alliance-primary);
}

.audit-mw-popped-card svg {
  color: var(--alliance-accent);
}

.audit-mw-popped-title {
  margin: 0;
  font: 800 1.05rem var(--font-body);
  color: var(--alliance-primary);
}

.audit-mw-popped-sub {
  margin: 0;
  font: 600 0.82rem/1.45 var(--font-body);
  color: #5b6372;
}

.audit-mw-popped-btn {
  margin-top: 0.3rem;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--alliance-primary) 0%, #2a5694 100%);
  color: #ffffff;
  font: 800 0.8rem var(--font-body);
  cursor: pointer;
}

.audit-mw-popped-btn:hover {
  filter: brightness(1.05);
}

#tab-audits .audit-mwalk-minimized-audits-hint,
#auditsMwWalkPopout .audit-mwalk-minimized-audits-hint {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: #5b6372;
}

#auditsMwWalkMinDock.audit-mwalk-min-dock {
  border-color: #d8e0ea;
  background: linear-gradient(165deg, #ffffff 0%, #f4f6fa 100%);
  box-shadow: 0 12px 40px rgba(27, 66, 120, 0.22);
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-kicker {
  color: var(--alliance-accent);
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-store {
  color: var(--alliance-primary);
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-time {
  color: #5b6372;
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-btn {
  border-color: #d8e0ea;
  background: #f4f6fa;
  color: #5b6372;
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-btn:hover {
  background: #e8eef5;
  border-color: var(--alliance-accent);
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-btn--close {
  border-color: rgba(185, 28, 28, 0.3);
  color: #b91c1c;
  background: #fdecec;
}

#auditsMwWalkMinDock .audit-mwalk-min-dock-btn--close:hover {
  background: #fbdada;
  border-color: rgba(185, 28, 28, 0.5);
  color: #b91c1c;
}

/* ---- Subtasks (checkable children under a to-do) ---- */
.audit-mw-subtasks {
  margin-top: 0.55rem;
  border-top: 1px dashed #d8e0ea;
  padding-top: 0.5rem;
}

.audit-mw-subtasks-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.audit-mw-subtasks-label {
  font: 800 0.58rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6372;
}

.audit-mw-subtasks-count {
  font: 800 0.58rem/1 var(--font-body);
  color: var(--alliance-primary);
  background: #eef3fa;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
}

.audit-mw-subtask-list {
  list-style: none;
  margin: 0 0 0.45rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.audit-mw-subtask {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.audit-mw-subtask-check {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 5px;
  border: 2px solid #b3bccb;
  background: #ffffff;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.audit-mw-subtask-check.is-done {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

.audit-mw-subtask-text {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 0.74rem/1.3 var(--font-body);
  color: var(--alliance-primary);
  overflow-wrap: anywhere;
}

.audit-mw-subtask.is-done .audit-mw-subtask-text {
  text-decoration: line-through;
  color: #8a93a3;
}

.audit-mw-subtask-remove {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8a93a3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.audit-mw-subtask-remove:hover {
  background: #fdecec;
  color: #b91c1c;
}

.audit-mw-subtask-add {
  display: flex;
  gap: 0.35rem;
}

.audit-mw-subtask-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.34rem 0.55rem;
  border-radius: 7px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  font: 600 0.74rem var(--font-body);
}

.audit-mw-subtask-input::placeholder {
  color: #8a93a3;
}

.audit-mw-subtask-input:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 1px rgba(0, 159, 219, 0.2);
}

.audit-mw-subtask-add-btn {
  flex: 0 0 auto;
  width: 1.95rem;
  height: 1.95rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(0, 159, 219, 0.45);
  background: rgba(0, 159, 219, 0.12);
  color: var(--alliance-accent);
  cursor: pointer;
}

.audit-mw-subtask-add-btn:hover {
  background: rgba(0, 159, 219, 0.2);
}

/* ---- Per-task rows: each task box has its own photo (composer) ---- */
.audit-mw-evidence-card--draft .audit-mw-evidence-fields--todo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.audit-mw-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.audit-mw-evidence-field-label {
  font: 800 0.62rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6372;
}

.audit-mw-task-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.audit-mw-task-row-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.audit-mw-task-input {
  flex: 1 1 auto;
  min-width: 0;
}

.audit-mw-task-row-btn {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.audit-mw-task-row-btn:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.12);
}

.audit-mw-task-row-btn--danger:hover {
  border-color: #f3b4b4;
  color: #b91c1c;
  background: #fdecec;
}

.audit-mw-task-thumb {
  position: relative;
  align-self: flex-start;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d8e0ea;
  line-height: 0;
}

.audit-mw-task-thumb-img {
  display: block;
  width: 100%;
  max-width: 8.5rem;
  height: auto;
  max-height: 6rem;
  object-fit: cover;
}

.audit-mw-task-thumb-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(8, 12, 24, 0.78);
  color: #f1f5f9;
  cursor: pointer;
}

.audit-mw-task-thumb-remove:hover {
  background: rgba(220, 38, 38, 0.85);
}

.audit-mw-task-add-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed rgba(0, 159, 219, 0.55);
  background: rgba(0, 159, 219, 0.1);
  color: var(--alliance-accent);
  font: 800 0.66rem var(--font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease;
}

.audit-mw-task-add-btn:hover {
  background: rgba(0, 159, 219, 0.2);
}

/* ---- Per-task lines: saved / complete card (equal checkable tasks) ---- */
.audit-mw-task-lines {
  margin-top: 0.55rem;
  border-top: 1px dashed #d8e0ea;
  padding-top: 0.5rem;
}

.audit-mw-task-line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.audit-mw-task-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-mw-task-line-bullet {
  flex: 0 0 auto;
  width: 0.9rem;
  display: grid;
  place-items: center;
  font: 800 1rem/1 var(--font-body);
  color: var(--alliance-accent);
}

.audit-mw-task-line-text {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 0.76rem/1.3 var(--font-body);
  color: var(--alliance-primary);
  overflow-wrap: anywhere;
}

.audit-mw-task-line.is-done .audit-mw-task-line-text {
  text-decoration: line-through;
  color: #8a93a3;
}

.audit-mw-task-line-thumb {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid #d8e0ea;
}

.audit-mw-task-line-remove {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8a93a3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.audit-mw-task-line-remove:hover {
  background: #fdecec;
  color: #b91c1c;
}

/* ---- Per-item order rows reuse the task-row styles; a few order extras ---- */
.audit-mw-qty-stepper--item {
  flex: 0 0 auto;
}

.audit-mw-qty-stepper--item .audit-mw-qty-stepper-btn,
.audit-mw-qty-stepper--item .audit-mw-evidence-input--order-qty {
  flex-basis: 1.85rem;
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
}

.audit-mw-order-line-qty {
  flex: 0 0 auto;
  font: 800 0.62rem/1 var(--font-body);
  color: var(--alliance-primary);
  background: #eef3fa;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
}

.audit-mw-task-line.is-done .audit-mw-order-line-qty {
  color: #8a93a3;
}

/* ---- Bulk order add panel ---- */
.audit-mw-bulk {
  margin-bottom: 0.7rem;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  background: #f4f6fa;
  overflow: hidden;
}

.audit-mw-bulk-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  list-style: none;
  font: 800 0.74rem var(--font-body);
  letter-spacing: 0.02em;
  color: var(--alliance-primary);
}

.audit-mw-bulk-summary::-webkit-details-marker {
  display: none;
}

.audit-mw-bulk-summary svg {
  color: var(--alliance-accent);
}

.audit-mw-bulk[open] .audit-mw-bulk-summary {
  border-bottom: 1px solid #d8e0ea;
}

.audit-mw-bulk-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem 0.8rem;
}

.audit-mw-bulk-hint {
  margin: 0;
  font: 600 0.72rem/1.4 var(--font-body);
  color: #5b6372;
}

.audit-mw-bulk-hint strong {
  color: var(--alliance-primary);
}

.audit-mw-bulk-recent {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.audit-mw-bulk-recent-label {
  font: 800 0.56rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6372;
}

.audit-mw-bulk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.audit-mw-bulk-chip {
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  font: 700 0.68rem var(--font-body);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.audit-mw-bulk-chip:hover {
  border-color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.08);
}

.audit-mw-bulk-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  font: 600 0.78rem/1.45 var(--font-body);
  resize: vertical;
}

.audit-mw-bulk-input::placeholder {
  color: #8a93a3;
}

.audit-mw-bulk-input:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 1px rgba(0, 159, 219, 0.2);
}

.audit-mw-bulk-actions {
  display: flex;
  justify-content: flex-end;
}

.audit-mw-bulk-add-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--alliance-primary) 0%, #2a5694 100%);
  color: #ffffff;
  font: 800 0.74rem var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.audit-mw-bulk-add-all:hover {
  filter: brightness(1.05);
}

/* ---- Review & submit modal ---- */
body.audit-mw-review-open {
  overflow: hidden;
}

.audit-mw-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px));
  background: rgba(27, 66, 120, 0.32);
  backdrop-filter: blur(4px);
}

.audit-mw-review-panel {
  width: min(680px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #d8e0ea;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(27, 66, 120, 0.3);
  overflow: hidden;
}

.audit-mw-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(90deg, #1b4278 0%, #0a0a0a 100%);
}

.audit-mw-review-title {
  margin: 0;
  font: 800 1.15rem var(--font-body);
  color: #ffffff;
}

.audit-mw-review-store {
  margin: 0.2rem 0 0;
  font: 600 0.78rem var(--font-body);
  color: rgba(255, 255, 255, 0.78);
}

.audit-mw-review-close {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
}

.audit-mw-review-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.audit-mw-review-body {
  padding: 0.9rem 1.1rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.audit-mw-review-sec-title {
  margin: 0 0 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: 800 0.7rem var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alliance-primary);
}

.audit-mw-review-sec-title span {
  font: 800 0.62rem var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: #5b6372;
  background: #eef3fa;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.audit-mw-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.audit-mw-review-item {
  border: 1px solid #d8e0ea;
  border-radius: 9px;
  background: #f9fbfd;
  padding: 0.5rem 0.6rem;
}

.audit-mw-review-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-mw-review-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.audit-mw-review-loc {
  font: 800 0.6rem var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6372;
}

.audit-mw-review-task {
  font: 700 0.8rem var(--font-body);
  color: var(--alliance-primary);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.audit-mw-review-qty {
  font: 800 0.8rem var(--font-body);
  color: var(--alliance-primary);
}

.audit-mw-review-ordernum {
  font: 600 0.72rem var(--font-body);
  color: #5b6372;
}

.audit-mw-review-tag {
  flex: 0 0 auto;
  font: 800 0.56rem var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
}

.audit-mw-review-tag--high {
  background: #fdecec;
  color: #b91c1c;
}

.audit-mw-review-tag--medium {
  background: #fdf3e3;
  color: #b45309;
}

.audit-mw-review-tag--low {
  background: #e6eefb;
  color: #1d4ed8;
}

.audit-mw-review-subcount {
  flex: 0 0 auto;
  font: 800 0.58rem var(--font-body);
  color: var(--alliance-primary);
  background: #eef3fa;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

.audit-mw-review-subs {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.4rem 0 0 0.2rem;
  border-top: 1px dashed #d8e0ea;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.audit-mw-review-subs li {
  position: relative;
  padding-left: 1rem;
  font: 600 0.72rem var(--font-body);
  color: var(--alliance-primary);
}

.audit-mw-review-subs li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--alliance-accent);
}

.audit-mw-review-subs li.is-done {
  color: #8a93a3;
  text-decoration: line-through;
}

.audit-mw-review-subs li.is-done::before {
  content: '●';
  color: #15803d;
}

.audit-mw-review-notes {
  margin: 0;
  font: 600 0.78rem/1.45 var(--font-body);
  color: #475063;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.audit-mw-review-empty {
  font: 600 0.74rem var(--font-body);
  color: #8a93a3;
}

.audit-mw-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid #d8e0ea;
  background: #f4f6fa;
}

.audit-mw-review-foot-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-mw-review-recap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border-radius: 9px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  font: 800 0.76rem var(--font-body);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.audit-mw-review-recap:hover {
  border-color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.06);
}

.audit-mw-review-recap.is-copied {
  border-color: #15803d;
  color: #15803d;
  background: #e8f5ec;
}

/* On the recap modal's navy header band — light green so it stays readable. */
.audits-mw-past-detail-recap.is-copied {
  border-color: #86efac !important;
  color: #b7f0c5 !important;
  background: rgba(34, 197, 94, 0.16) !important;
}

.audit-mw-review-back {
  padding: 0.6rem 0.95rem;
  border-radius: 9px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  font: 800 0.78rem var(--font-body);
  cursor: pointer;
}

.audit-mw-review-back:hover {
  background: #eef2f8;
  border-color: var(--alliance-accent);
}

.audit-mw-review-submit {
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #15803d 0%, #1f9d4e 100%);
  color: #ffffff;
  font: 800 0.8rem var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(21, 128, 61, 0.28);
}

.audit-mw-review-submit:hover {
  filter: brightness(1.05);
}

/* Popout left column wrapper (walkthrough scroll + endbar). */
.audit-mwalk-popout-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* =====================================================================
   UPLOAD tab — page panel chrome, drop zone, form fields, buttons.
   ===================================================================== */
#tab-upload .upload-page-shell {
  color: #000000;
}

#tab-upload .upload-page-panel {
  padding: 0;
}

#tab-upload .upload-page-panel__header-text,
#tab-upload .upload-page-panel__subtitle,
#tab-upload .upload-section-heading,
#tab-upload .upload-heading-collection,
#tab-upload .upload-heading-files,
#tab-upload .upload-field-label,
#tab-upload .upload-gate-lead {
  color: var(--alliance-primary);
}

#tab-upload .upload-drop-zone {
  background: #f4f4f8;
  border: 2px dashed #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-primary);
}

#tab-upload .upload-drop-zone:hover,
#tab-upload .upload-drop-zone.is-dragging {
  border-color: var(--alliance-accent);
  background: #FFFFFF;
}

#tab-upload .upload-drop-zone-hint,
#tab-upload .upload-drop-zone-formats {
  color: var(--alliance-text-muted);
}

#tab-upload input[type="text"],
#tab-upload input[type="password"],
#tab-upload input[type="email"],
#tab-upload input[type="number"],
#tab-upload textarea,
#tab-upload select,
#tab-upload .upload-gate-input,
#tab-upload .upload-field input {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

#tab-upload input:focus,
#tab-upload textarea:focus,
#tab-upload select:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.15);
}

#tab-upload .upload-gate-submit,
#tab-upload .upload-btn-secondary,
#tab-upload .upload-lock-again,
#tab-upload button[type="submit"] {
  background: var(--alliance-primary);
  border: 1px solid var(--alliance-primary);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

#tab-upload .upload-gate-submit:hover,
#tab-upload .upload-btn-secondary:hover,
#tab-upload .upload-lock-again:hover,
#tab-upload button[type="submit"]:hover {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

#tab-upload .upload-error-message,
#tab-upload .upload-gate-error,
#tab-upload .upload-collections-error {
  color: #b91c1c;
}

#tab-upload .upload-success-message {
  color: #15803d;
}

#tab-upload .upload-batch-progress-track {
  background: #e2e8f0;
  border-radius: 4px;
}

#tab-upload .upload-batch-progress-fill {
  background: var(--alliance-accent);
}

/* =====================================================================
   RESEARCH tab — mount table inherits the generic .inventory-table rule
   above. Add panel chrome already covered by alias.
   ===================================================================== */
#tab-research .research-page-shell {
  color: #000000;
}

#tab-research .research-panel__header-text {
  color: #FFFFFF;
}

#tab-research .research-panel__header-text h1,
#tab-research .research-panel__header-text h2,
#tab-research .research-panel__header-text h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-research .research-panel__subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-research .research-panel-icon-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  border-radius: 4px;
}

#tab-research .research-panel-icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* =====================================================================
   REQUESTS tab — list of links.
   ===================================================================== */
#tab-requests .requests-page-shell {
  padding: 20px;
  color: #000000;
}

#tab-requests .requests-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tab-requests .requests-link {
  display: block;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-primary);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}

#tab-requests .requests-link:hover {
  border-color: var(--alliance-accent);
  background: #f4f4f8;
  color: var(--alliance-accent);
}

/* =====================================================================
   HYLA cancel + merch order forms — labels, inputs, textareas, file pick,
   submit + status.
   ===================================================================== */
#tab-cancel-hyla-trade-in,
#tab-merchandising-order {
  color: #000000;
}

#tab-cancel-hyla-trade-in .hyla-cancel-shell,
#tab-merchandising-order .hyla-cancel-shell {
  color: #000000;
}

/* Header bar: navy gradient with white title + subtitle, matching every
   other .panel-header in the app. Stated explicitly (and scoped to these
   tabs) so the page-level color:#000 and the muted-subtitle rule below can't
   leave the heading dark/low-contrast on the navy bar. */
#tab-cancel-hyla-trade-in .hyla-cancel-panel__header,
#tab-merchandising-order .hyla-cancel-panel__header {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
}

#tab-cancel-hyla-trade-in .hyla-cancel-panel__header h2,
#tab-merchandising-order .hyla-cancel-panel__header h2 {
  color: #FFFFFF;
}

#tab-cancel-hyla-trade-in .hyla-cancel-subtitle,
#tab-merchandising-order .hyla-cancel-subtitle {
  color: rgba(255, 255, 255, 0.78);
}

#tab-cancel-hyla-trade-in .hyla-cancel-label,
#tab-merchandising-order .hyla-cancel-label {
  color: var(--alliance-primary);
  font-weight: 600;
}

#tab-cancel-hyla-trade-in .hyla-cancel-input,
#tab-cancel-hyla-trade-in .hyla-cancel-form input,
#tab-cancel-hyla-trade-in .hyla-cancel-form textarea,
#tab-cancel-hyla-trade-in .hyla-cancel-form select,
#tab-merchandising-order .hyla-cancel-input,
#tab-merchandising-order .hyla-cancel-form input,
#tab-merchandising-order .hyla-cancel-form textarea,
#tab-merchandising-order .hyla-cancel-form select {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-family: var(--font-family);
}

#tab-cancel-hyla-trade-in .hyla-cancel-form input:focus,
#tab-cancel-hyla-trade-in .hyla-cancel-form textarea:focus,
#tab-cancel-hyla-trade-in .hyla-cancel-form select:focus,
#tab-merchandising-order .hyla-cancel-form input:focus,
#tab-merchandising-order .hyla-cancel-form textarea:focus,
#tab-merchandising-order .hyla-cancel-form select:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.15);
}

#tab-cancel-hyla-trade-in .hyla-cancel-file-btn,
#tab-cancel-hyla-trade-in .hyla-cancel-submit,
#tab-merchandising-order .hyla-cancel-file-btn,
#tab-merchandising-order .hyla-cancel-submit {
  background: var(--alliance-primary);
  border: 1px solid var(--alliance-primary);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

#tab-cancel-hyla-trade-in .hyla-cancel-file-btn:hover,
#tab-cancel-hyla-trade-in .hyla-cancel-submit:hover,
#tab-merchandising-order .hyla-cancel-file-btn:hover,
#tab-merchandising-order .hyla-cancel-submit:hover {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

#tab-cancel-hyla-trade-in .hyla-cancel-filenames,
#tab-merchandising-order .hyla-cancel-filenames {
  color: var(--alliance-text-muted);
}

#tab-cancel-hyla-trade-in .hyla-cancel-status,
#tab-merchandising-order .hyla-cancel-status {
  color: var(--alliance-primary);
}

#tab-cancel-hyla-trade-in .hyla-cancel-status[data-state="error"],
#tab-merchandising-order .hyla-cancel-status[data-state="error"] {
  color: #b91c1c;
}

#tab-cancel-hyla-trade-in .hyla-cancel-status[data-state="success"],
#tab-merchandising-order .hyla-cancel-status[data-state="success"] {
  color: #15803d;
}

#tab-cancel-hyla-trade-in .hyla-employee-info,
#tab-merchandising-order .hyla-employee-info {
  color: var(--alliance-text-muted);
}

/* =====================================================================
   HYLA cancellations list view.
   ===================================================================== */
#tab-hyla-cancellations {
  color: #000000;
}

#tab-hyla-cancellations .hyla-list-shell {
  color: #000000;
}

#tab-hyla-cancellations .hyla-list-subtitle {
  color: #FFFFFF;
}

/* The cancellations header sits on a dark navy panel; the generic .tab-pane h2
   rule would paint the title navy (invisible). Keep it white on the new
   display theme, matching the Trade Portal / scorecard headings. Covers the
   Hyla Cancellations admin list, the single-trade detail, and the read-only
   Trade-In Cancellation Requests feed on the Requests page. */
#tab-hyla-cancellations .hyla-list-header h2,
#tab-hyla-trade-detail .hyla-list-header h2,
#tab-requests .requests-feed-panel .hyla-list-header h2 {
  color: #FFFFFF;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
}
#tab-requests .requests-feed-panel .hyla-list-subtitle {
  color: rgba(255, 255, 255, 0.78);
}

#tab-hyla-cancellations .hyla-list-refresh {
  background: var(--alliance-primary);
  border: 1px solid var(--alliance-primary);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}

#tab-hyla-cancellations .hyla-list-refresh:hover {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

#tab-hyla-cancellations .hyla-list-body > * {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  margin-bottom: 8px;
  color: #000000;
}

/* Click-to-copy fields (Phone / IMEI / FS Number) inside each
   cancellation tile. The dd value renders as a pill button that
   copies its data-hyla-copy value on click and briefly flashes the
   accent colour with a "Copied" tooltip. */
.hyla-list-field--copyable dd {
  padding: 0;
}

.hyla-list-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 8px;
  margin: -2px -8px;
  color: var(--alliance-primary, #1B4278);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  user-select: all;
  -webkit-user-select: all;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.hyla-list-copy:hover,
.hyla-list-copy:focus-visible {
  background: rgba(0, 159, 219, 0.1);
  border-color: var(--alliance-accent, #009FDB);
  color: var(--alliance-primary, #1B4278);
  outline: none;
}

.hyla-list-copy__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hyla-list-copy__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--alliance-text-muted, #5b6372);
  transition: color 0.12s ease, transform 0.12s ease;
}

.hyla-list-copy:hover .hyla-list-copy__icon,
.hyla-list-copy:focus-visible .hyla-list-copy__icon {
  color: var(--alliance-accent, #009FDB);
}

.hyla-list-copy.is-copied {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.6);
  color: #15803d;
}

.hyla-list-copy.is-copied .hyla-list-copy__icon {
  color: #15803d;
  transform: scale(1.05);
}

/* =====================================================================
   ARCHWAY ORDER TRACKER — apply the Alliance theme across every section
   (list page, toolbar, table, detail page, hero, cards, items table,
   email viewer, status / chip pills). Archway renders into #archway-root
   inside #tab-archway via the Vite IIFE bundle and ships its own
   archway-shipments.css with dark glass chrome; override every visible
   surface here so the page reads like the rest of the site without
   rebuilding the bundle.
   ===================================================================== */

#tab-archway,
#archway-root {
  /* Remap the brand tokens used inside the bundle so any var() callsite
     picks up Alliance colors automatically. */
  --aw-accent: var(--alliance-accent, #009FDB);
  --aw-accent-soft: rgba(0, 159, 219, 0.12);
  --aw-border: #d8e0ea;
  --aw-surface: #FFFFFF;
  --aw-surface-raised: #f4f6fa;
  color: #000000;
}

#tab-archway {
  background: transparent;
}

/* ---------- Page heading + meta ---------- */
#archway-root .aw-title {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#archway-root .aw-subtitle,
#archway-root .aw-muted,
#archway-root .aw-kicker {
  color: var(--alliance-text-muted);
}

#archway-root .aw-list-header,
#archway-root .aw-detail-nav {
  color: var(--alliance-primary);
}

/* ---------- Toolbar (search + select + buttons) ---------- */
#archway-root .aw-search,
#archway-root .aw-select {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

#archway-root .aw-search::placeholder {
  color: var(--alliance-text-muted);
  opacity: 1;
}

#archway-root .aw-search:focus,
#archway-root .aw-select:focus {
  outline: none !important;
  border-color: var(--alliance-accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.18) !important;
}

#archway-root .aw-search-icon {
  color: var(--alliance-text-muted);
}

#archway-root .aw-btn {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#archway-root .aw-btn:hover:not(:disabled) {
  background: #f4f6fa !important;
  border-color: var(--alliance-accent) !important;
  color: var(--alliance-primary) !important;
}

#archway-root .aw-btn:disabled {
  opacity: 0.55;
}

#archway-root .aw-btn--primary {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

#archway-root .aw-btn--primary:hover:not(:disabled) {
  background: var(--alliance-accent) !important;
  border-color: var(--alliance-accent) !important;
}

#archway-root .aw-btn--ghost {
  background: transparent !important;
}

#archway-root .aw-btn--ghost:hover:not(:disabled) {
  background: #f4f6fa !important;
  border-color: var(--alliance-accent) !important;
}

/* ---------- Panels (loading / error / empty) ---------- */
#archway-root .aw-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  color: #000000;
}

#archway-root .aw-loading .aw-spinner {
  border: 3px solid #e2e8f0;
  border-top-color: var(--alliance-accent);
}

#archway-root .aw-error h2 {
  color: var(--alliance-primary);
}

#archway-root .aw-empty-illustration {
  background: linear-gradient(180deg, rgba(0, 159, 219, 0.08), transparent);
  border: 1px dashed #d8e0ea;
}

#archway-root .aw-empty-box,
#archway-root .aw-empty-line {
  background: rgba(27, 66, 120, 0.1);
}

/* ---------- Table ---------- */
#archway-root .aw-table-wrap {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#archway-root .aw-table {
  /* Paint the navy→black gradient on the TABLE element so it forms ONE
     continuous header bar. Applying it to each <th> (as before) made every
     column its own navy→black slice. The opaque body rows below cover the
     gradient, so it only shows through the transparent header cells. */
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  color: #000000;
}

#archway-root .aw-table thead th {
  /* Transparent so the single table gradient shows through as one bar;
     relative so the column-divider ::after anchors to each cell. */
  background: transparent !important;
  position: relative;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  /* Match the Treasury tracker header bar height (0.55rem 0.75rem)
     instead of the taller default .aw-table th padding (0.7rem 0.9rem). */
  padding: 0.55rem 0.75rem !important;
}

/* White vertical column divider bars between header cells (In Transit look). */
#archway-root .aw-table thead th:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

#archway-root .aw-table .aw-th-sort {
  color: rgba(255, 255, 255, 0.88) !important;
}

#archway-root .aw-table .aw-th-sort:hover {
  color: #FFFFFF !important;
}

#archway-root .aw-table tbody tr,
#archway-root .aw-table .aw-row {
  background: #FFFFFF !important;
}

#archway-root .aw-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

#archway-root .aw-table .aw-row:hover td,
#archway-root .aw-table tbody tr:hover td {
  background: #eef2f8 !important;
}

#archway-root .aw-table th,
#archway-root .aw-table td {
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#archway-root .aw-table th:last-child,
#archway-root .aw-table td:last-child {
  border-right: none;
}

#archway-root .aw-table td {
  color: #000000;
}

#archway-root .aw-order-id {
  color: var(--alliance-accent) !important;
  font-weight: 700;
}

#archway-root .aw-row-link {
  color: inherit;
}

#archway-root .aw-row-link:hover .aw-order-id {
  color: var(--alliance-primary) !important;
}

#archway-root .aw-table-empty {
  color: var(--alliance-text-muted) !important;
}

#archway-root .aw-table-footer {
  color: var(--alliance-text-muted);
}

#archway-root .aw-pagination .aw-btn {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
}

#archway-root .aw-pagination .aw-btn.is-active,
#archway-root .aw-pagination .aw-btn[aria-current="page"] {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* ---------- Status pills ---------- */
#archway-root .aw-status {
  border-radius: 999px;
  font-weight: 700;
}

#archway-root .aw-status--delivered {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

#archway-root .aw-status--shipped {
  background: rgba(0, 159, 219, 0.14) !important;
  color: var(--alliance-primary) !important;
  border-color: rgba(0, 159, 219, 0.4) !important;
}

#archway-root .aw-status--other {
  background: rgba(100, 116, 139, 0.14) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.32) !important;
}

#archway-root .aw-badge {
  border-radius: 4px;
}

#archway-root .aw-badge--danger {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #b91c1c !important;
}

/* ---------- Tracking chips ---------- */
#archway-root .aw-chip {
  background: #f4f6fa !important;
  color: var(--alliance-primary) !important;
  border: 1px solid #e2e8f0;
}

#archway-root .aw-chip--more {
  color: var(--alliance-text-muted) !important;
  background: transparent !important;
  border-color: transparent;
}

#archway-root .aw-chip--link {
  background: rgba(0, 159, 219, 0.12) !important;
  color: var(--alliance-primary) !important;
  border-color: rgba(0, 159, 219, 0.3);
  text-decoration: none;
}

#archway-root .aw-chip--link:hover,
#archway-root .aw-chip--link:focus-visible {
  background: rgba(0, 159, 219, 0.2) !important;
  border-color: var(--alliance-accent);
  text-decoration: underline;
}

/* ---------- Detail page hero ---------- */
#archway-root .aw-detail-hero {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  color: #FFFFFF;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#archway-root .aw-detail-order {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#archway-root .aw-detail-hero-meta {
  color: rgba(255, 255, 255, 0.78);
}

#archway-root .aw-detail-hero .aw-kicker {
  color: rgba(255, 255, 255, 0.7);
}

#archway-root .aw-detail-hero .aw-status,
#archway-root .aw-detail-hero .aw-badge {
  /* hero already has a navy bg; keep the colored pills bright. */
}

/* ---------- Cards (Address / Tracking / Manager / Items / Email) ---------- */
#archway-root .aw-card {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  color: #000000;
}

#archway-root .aw-card-title {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#archway-root .aw-card-subtitle {
  color: var(--alliance-text-muted);
}

#archway-root .aw-address {
  color: #000000;
}

#archway-root .aw-tracking-list a,
#archway-root .aw-manager-email {
  color: var(--alliance-accent) !important;
}

#archway-root .aw-tracking-list a:hover,
#archway-root .aw-manager-email:hover {
  color: var(--alliance-primary) !important;
}

#archway-root .aw-manager-name {
  color: var(--alliance-primary);
}

/* ---------- Items table inside the detail page ---------- */
#archway-root .aw-items-card .aw-table thead th {
  /* Transparent over the table-element gradient (set on .aw-table) → one
     continuous band, not a per-column slice. */
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

#archway-root .aw-items-table tfoot td {
  background: #f4f6fa !important;
  color: var(--alliance-primary);
  border-top: 1px solid #e2e8f0;
  font-weight: 700;
}

/* ---------- Email viewer ---------- */
#archway-root .aw-email-toggle {
  color: var(--alliance-primary);
}

#archway-root .aw-email-body-wrap {
  border-top: 1px solid #e2e8f0;
}

#archway-root .aw-email-meta dt {
  color: var(--alliance-text-muted);
}

#archway-root .aw-email-meta dd {
  color: #000000;
}

#archway-root .aw-email-pre {
  background: #f4f6fa !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

#archway-root .aw-email-html {
  background: #FFFFFF !important;
  color: #0f172a;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
}

/* ---------- Generic links + headings inside archway ---------- */
#archway-root h1,
#archway-root h2,
#archway-root h3,
#archway-root h4 {
  color: var(--alliance-primary);
}

/* Headings that sit on the navy gradient bands must stay WHITE — the
   generic #archway-root h1–h4 navy rule above would otherwise render
   them navy-on-navy (e.g. the "Shipments" panel title, the detail card
   titles, and the detail hero order number). */
#archway-root .aw-panel-card__title,
#archway-root .aw-card-title,
#archway-root .aw-detail-order {
  color: #ffffff !important;
}

#archway-root a {
  color: var(--alliance-accent);
}

#archway-root a:hover {
  color: var(--alliance-primary);
}

/* =====================================================================
   MODAL OVERLAY (event modal + any generic modal). Switch from the dark
   dialog to a white card with navy accents.
   ===================================================================== */
.modal-overlay {
  background: rgba(27, 66, 120, 0.45);
}

.modal,
#eventModal {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.32) 0 12px 32px;
}

.modal-body,
#eventModal .modal-body {
  color: #000000;
}

.modal h1, .modal h2, .modal h3, .modal h4,
#eventModal h1, #eventModal h2, #eventModal h3, #eventModal h4 {
  color: var(--alliance-primary);
}

.modal a,
#eventModal a {
  color: var(--alliance-accent);
}

.modal-close,
#modalClose {
  background: transparent;
  border: none;
  color: var(--alliance-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-close:hover,
#modalClose:hover {
  color: var(--alliance-accent);
}

/* =====================================================================
   GENERIC text + link inside any tab-pane — replace muted-on-dark with
   muted-on-light so leftover unstyled copy still reads on the white tile.
   ===================================================================== */
.tab-pane {
  color: #000000;
}

.tab-pane h1,
.tab-pane h2,
.tab-pane h3,
.tab-pane h4 {
  color: var(--alliance-primary);
}

/* Compliance Scorecard hero sits on a navy band — its heading must stay white
   (the generic .tab-pane h1 rule above would otherwise paint it navy). */
#tab-compliance .cmsc-page-head h1 {
  color: #ffffff;
}
/* Same for the Inventory Scorecard hero (reuses the cmsc page-head chrome). */
#tab-inventory .cmsc-page-head h1 {
  color: #ffffff;
}
/* Same for the Financials Scorecard hero (renders inside the Cash tab pane). */
#tab-cash .cmsc-page-head h1 {
  color: #ffffff;
}
/* Trade Portal scorecard headings sit on navy chrome (hero, Store Trade
   Activity, and the classic Hyla/Nonsellable tables). The generic .tab-pane h*
   rule above would paint them navy → invisible. Keep them white and on the new
   display theme so they match Daily Operations. */
#tab-trade_portal .tpsc-page-head h1,
#tab-trade_portal .tpsc-tile-head h2,
#tab-trade_portal .tpsc-ct-head h3 {
  color: #ffffff;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
}
#tab-trade_portal .tpsc-page-head__icon { color: #ffffff; }
#tab-trade_portal .tpsc-tile-head .th-icon,
#tab-trade_portal .tpsc-ct-head .ct-icon { color: #46B7E8; }

.tab-pane p,
.tab-pane span:not([class*="alliance"]):not([class*="badge"]):not([class*="topbar"]) {
  /* Don't blast — only used as a last-resort safety net */
}

/* =====================================================================
   DAILY OPERATIONS PAGE — apply the Alliance light theme to the
   do-* reminders dashboard rendered inside #tab-daily_ops. The legacy
   style.css gradient + dark-blue/orange chrome is overridden with the
   In Transit pattern: white card, navy gradient header, light tab
   pills, light surfaces with navy headings.
   ===================================================================== */

/* Root tile — the wrapper that holds the page header + dashboard body. */
#tab-daily_ops .do-page-tile,
.do-page-tile {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  color: #000000;
}

#tab-daily_ops .do-reminders-root,
.do-reminders-root {
  color: #000000;
  font-family: var(--font-family);
}

/* Header band — navy gradient title bar with white text. */
#tab-daily_ops .do-page-tile .do-page-header,
.do-page-tile .do-page-header {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #FFFFFF;
}

#tab-daily_ops .do-page-header,
.do-page-header {
  color: #FFFFFF;
}

#tab-daily_ops .do-page-title,
.do-page-title {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-daily_ops .do-page-date,
#tab-daily_ops .do-page-filter,
.do-page-date,
.do-page-filter {
  color: rgba(255, 255, 255, 0.78);
}

#tab-daily_ops .do-sync-line,
.do-sync-line {
  background: #f4f6fa;
  color: var(--alliance-text-muted);
  border-bottom: 1px solid #e2e8f0;
}

/* Toolbar / search / level tabs — light wash with navy accents. */
#tab-daily_ops .do-page-tile .do-controls-bar,
.do-page-tile .do-controls-bar {
  background: #f4f6fa;
  border: 1px solid #e2e8f0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

#tab-daily_ops .do-inv-search,
.do-inv-search {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-primary);
}

#tab-daily_ops .do-inv-search input,
.do-inv-search input {
  background: transparent;
  color: var(--alliance-primary);
  border: none;
}

#tab-daily_ops .do-inv-search input::placeholder,
.do-inv-search input::placeholder {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-inv-search-icon,
.do-inv-search-icon {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-level-nav,
.do-level-nav {
  background: transparent;
}

#tab-daily_ops .do-level-tab,
.do-level-tab {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#tab-daily_ops .do-level-tab:hover,
.do-level-tab:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

#tab-daily_ops .do-level-tab.is-active,
#tab-daily_ops .do-level-tab[aria-pressed="true"],
.do-level-tab.is-active,
.do-level-tab[aria-pressed="true"] {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

#tab-daily_ops .do-store-page-tab__count,
.do-store-page-tab__count {
  background: rgba(0, 159, 219, 0.18);
  color: var(--alliance-primary);
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 700;
}

#tab-daily_ops .do-level-tab.is-active .do-store-page-tab__count,
#tab-daily_ops .do-level-tab[aria-pressed="true"] .do-store-page-tab__count,
.do-level-tab.is-active .do-store-page-tab__count,
.do-level-tab[aria-pressed="true"] .do-store-page-tab__count {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* Buttons. */
#tab-daily_ops .do-btn,
.do-btn {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  font-weight: 600;
}

#tab-daily_ops .do-btn--ghost:hover,
.do-btn--ghost:hover {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}

/* Overview cards — white card, navy accents. */
#tab-daily_ops .do-overview-title,
.do-overview-title {
  color: var(--alliance-primary);
}

#tab-daily_ops .do-overview-card,
.do-overview-card {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-primary);
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#tab-daily_ops .do-overview-count,
.do-overview-count {
  color: var(--alliance-primary);
}

#tab-daily_ops .do-overview-label,
.do-overview-label {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-overview-icon,
.do-overview-icon {
  color: var(--alliance-accent);
}

/* Section cards — white card, darker navy column-style title bar. */
#tab-daily_ops .do-section,
.do-section {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#tab-daily_ops .do-section-head,
.do-section-head {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  margin: 0;
}

#tab-daily_ops .do-section-toggle,
.do-section-toggle {
  color: #FFFFFF;
}

#tab-daily_ops .do-section-title,
.do-section-title {
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-daily_ops .do-section-badge,
.do-section-badge {
  background: rgba(0, 159, 219, 0.85);
  color: #FFFFFF;
}

#tab-daily_ops .do-section-chevron,
.do-section-chevron {
  color: #FFFFFF;
  opacity: 0.8;
}

#tab-daily_ops .do-section-body,
.do-section-body {
  background: #FFFFFF;
}

/* Subgroups & store groups */
#tab-daily_ops .do-subgroup-title,
.do-subgroup-title {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-subgroup + .do-subgroup,
.do-subgroup + .do-subgroup {
  border-top: 1px solid #e2e8f0;
}

#tab-daily_ops .do-store-group__rule,
.do-store-group__rule {
  background: linear-gradient(90deg, transparent, rgba(27, 66, 120, 0.2), transparent);
}

#tab-daily_ops .do-store-group__name,
.do-store-group__name {
  color: var(--alliance-primary);
  font-weight: 700;
}

#tab-daily_ops .do-store-group__opus,
.do-store-group__opus {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-store-group__dash,
.do-store-group__dash {
  color: var(--alliance-text-muted);
}

/* Grouped market / district / store wrappers — light card with navy
   accents instead of the dark glass gradient. */
#tab-daily_ops .do-grouped-market,
#tab-daily_ops .do-grouped-district,
#tab-daily_ops .do-grouped-store,
.do-grouped-market,
.do-grouped-district,
.do-grouped-store {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#tab-daily_ops .do-grouped-market__head,
#tab-daily_ops .do-grouped-district__head,
#tab-daily_ops .do-grouped-store__head,
.do-grouped-market__head,
.do-grouped-district__head,
.do-grouped-store__head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  border-bottom: none;
  color: #FFFFFF;
  padding: 14px 20px;
  margin: 0;
  border-radius: 4px 4px 0 0;
}

#tab-daily_ops .do-grouped-market__title,
#tab-daily_ops .do-grouped-district__title,
#tab-daily_ops .do-grouped-store__title,
.do-grouped-market__title,
.do-grouped-district__title,
.do-grouped-store__title {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-daily_ops .do-grouped-store__kicker,
#tab-daily_ops .do-grouped-store__crumb,
.do-grouped-store__kicker,
.do-grouped-store__crumb {
  color: rgba(255, 255, 255, 0.78);
}

#tab-daily_ops .do-grouped-market__districts,
#tab-daily_ops .do-grouped-district__stores,
#tab-daily_ops .do-grouped-store__sections,
.do-grouped-market__districts,
.do-grouped-district__stores,
.do-grouped-store__sections {
  padding: 16px;
}

#tab-daily_ops .do-store-section__head,
#tab-daily_ops .do-store-subgroup__head,
.do-store-section__head,
.do-store-subgroup__head {
  color: var(--alliance-primary);
  font-weight: 700;
}

#tab-daily_ops .do-store-section__title,
#tab-daily_ops .do-store-subgroup__title,
.do-store-section__title,
.do-store-subgroup__title {
  color: var(--alliance-primary);
}

#tab-daily_ops .do-store-subtopbar,
.do-store-subtopbar {
  background: #f4f6fa;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: var(--alliance-primary);
}

/* Group toggles (district / market collapse buttons) */
#tab-daily_ops .do-group-toggle,
.do-group-toggle {
  color: #FFFFFF;
}

#tab-daily_ops .do-group-toggle__chevron,
.do-group-toggle__chevron {
  color: #FFFFFF;
  opacity: 0.85;
}

/* Task tiles — alternating white / soft lavender like table rows. */
#tab-daily_ops .do-task,
.do-task {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: none;
  color: #000000;
  margin: 0.4rem 0;
}

#tab-daily_ops .do-task:nth-child(even),
.do-task:nth-child(even) {
  background: #f0f4fa;
}

#tab-daily_ops .do-task:hover,
.do-task:hover {
  background: #eef2f8;
  border-color: var(--alliance-accent);
}

#tab-daily_ops .do-task-primary,
.do-task-primary {
  color: #000000;
}

#tab-daily_ops .do-task-secondary,
#tab-daily_ops .do-task-context,
#tab-daily_ops .do-task-date,
#tab-daily_ops .do-task-meta,
.do-task-secondary,
.do-task-context,
.do-task-date,
.do-task-meta {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-task-qty-label,
.do-task-qty-label {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-task-qty-value,
.do-task-qty-value {
  color: var(--alliance-primary);
}

#tab-daily_ops .do-task-priority,
.do-task-priority {
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
}

#tab-daily_ops .do-priority--high .do-task-priority,
.do-priority--high .do-task-priority {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

#tab-daily_ops .do-priority--medium .do-task-priority,
.do-priority--medium .do-task-priority {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
  color: #b45309;
}

#tab-daily_ops .do-priority--low .do-task-priority,
.do-priority--low .do-task-priority {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}

#tab-daily_ops .do-task-check,
.do-task-check {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
}

#tab-daily_ops .do-task-check.is-checked,
.do-task-check.is-checked {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
}

#tab-daily_ops .do-task-chevron,
.do-task-chevron {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-item--completed.do-task::after,
.do-item--completed.do-task::after {
  background: rgba(27, 66, 120, 0.5);
}

/* Compliance info cards — Alliance light theme.
   Defaults in style.css are dark-mode; these overrides put them on a
   white background with the same border + typography as the do-task
   tiles next to them. */
#tab-daily_ops .do-compliance-card,
.do-compliance-card {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: none;
  color: var(--alliance-primary);
}

#tab-daily_ops .do-compliance-card__head,
.do-compliance-card__head {
  border-bottom: 1px solid #e2e8f0;
}

#tab-daily_ops .do-compliance-card__head h5,
.do-compliance-card__head h5 {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

#tab-daily_ops .do-compliance-card__value,
.do-compliance-card__value {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
}

#tab-daily_ops .do-compliance-card__metric,
.do-compliance-card__metric {
  background: #f0f4fa;
  border: 1px solid #d8e0ea;
}

#tab-daily_ops .do-compliance-card__metric-label,
.do-compliance-card__metric-label {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-compliance-card__metric-value,
.do-compliance-card__metric-value {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
}

/* Status tone overrides — match the Alliance palette. */
#tab-daily_ops .do-compliance-card__value.is-good,
#tab-daily_ops .do-compliance-card__metric.is-good .do-compliance-card__metric-value,
.do-compliance-card__value.is-good,
.do-compliance-card__metric.is-good .do-compliance-card__metric-value {
  color: var(--alliance-success);
}

#tab-daily_ops .do-compliance-card__value.is-warn,
#tab-daily_ops .do-compliance-card__metric.is-warn .do-compliance-card__metric-value,
.do-compliance-card__value.is-warn,
.do-compliance-card__metric.is-warn .do-compliance-card__metric-value {
  color: var(--alliance-warning);
}

#tab-daily_ops .do-compliance-card__value.is-bad,
#tab-daily_ops .do-compliance-card__metric.is-bad .do-compliance-card__metric-value,
.do-compliance-card__value.is-bad,
.do-compliance-card__metric.is-bad .do-compliance-card__metric-value {
  color: var(--alliance-error);
}

/* IPOG / Device Alive compliance-cell tone colors on the Compliance
   tab — match the Alliance palette and remain bold so the 100% = green
   signal is visible against the white table background. */
.da-compliance-good,
.ipog-cell-compliance.da-compliance-good {
  color: var(--alliance-success) !important;
  font-weight: 700;
}
.da-compliance-mid,
.ipog-cell-compliance.da-compliance-mid {
  color: var(--alliance-warning) !important;
  font-weight: 700;
}
.da-compliance-low,
.ipog-cell-compliance.da-compliance-low {
  color: var(--alliance-error) !important;
  font-weight: 700;
}

/* Skeleton placeholder. */
#tab-daily_ops .do-skeleton-root,
.do-skeleton-root {
  background: #FFFFFF;
}

#tab-daily_ops .do-skeleton-row,
#tab-daily_ops .do-skeleton-circle,
#tab-daily_ops .do-skeleton-lines,
.do-skeleton-row,
.do-skeleton-circle,
.do-skeleton-lines {
  background: linear-gradient(90deg, #f0f4fa 0%, #e2e8f0 50%, #f0f4fa 100%);
}

/* Error boundary. */
#tab-daily_ops .do-error-boundary,
.do-error-boundary {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: #000000;
  padding: 24px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#tab-daily_ops .do-error-title,
.do-error-title {
  color: var(--alliance-primary);
}

#tab-daily_ops .do-error-msg,
.do-error-msg {
  color: #b91c1c;
}

#tab-daily_ops .do-error-hint,
.do-error-hint {
  color: var(--alliance-text-muted);
}

/* Daily Ops modal (task detail). */
#tab-daily_ops .do-modal-backdrop,
.do-modal-backdrop {
  background: rgba(27, 66, 120, 0.45);
}

#tab-daily_ops .do-modal,
.do-modal {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: #000000;
  box-shadow: rgba(0, 0, 0, 0.32) 0 12px 32px;
}

#tab-daily_ops .do-modal-head,
.do-modal-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  color: #FFFFFF;
  border-bottom: none;
}

#tab-daily_ops .do-modal-title,
.do-modal-title {
  color: #FFFFFF;
}

#tab-daily_ops .do-modal-kicker,
.do-modal-kicker {
  color: rgba(255, 255, 255, 0.78);
}

#tab-daily_ops .do-modal-close,
.do-modal-close {
  color: #FFFFFF;
}

#tab-daily_ops .do-modal-body,
.do-modal-body {
  background: #FFFFFF;
  color: #000000;
}

#tab-daily_ops .do-modal-row,
.do-modal-row {
  border-bottom: 1px solid #e2e8f0;
}

#tab-daily_ops .do-modal-key,
.do-modal-key {
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-modal-val,
.do-modal-val {
  color: #000000;
}

/* Empty state. */
#tab-daily_ops .do-empty-state,
.do-empty-state {
  background: #FFFFFF;
  border: 1px dashed #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-text-muted);
}

#tab-daily_ops .do-subgroup-all-clear,
.do-subgroup-all-clear {
  color: var(--alliance-text-muted);
}

/* =====================================================================
   DAILY OPS tables — re-apply the In Transit pattern. style.css gives
   these orange-tinted dark chrome on the daily_ops tab; we override
   them to the same darker navy column bar + alternating rows the
   inventory tab uses.
   ===================================================================== */

#tab-daily_ops .daily-ops-shrink-panel,
#tab-daily_ops .daily-ops-nonsellable-panel,
#tab-daily_ops .daily-ops-cartons-panel,
#tab-daily_ops .daily-ops-scans-panel,
#tab-daily_ops .daily-ops-sts-panel,
#tab-daily_ops .daily-ops-eol-panel,
#tab-daily_ops .daily-ops-obs-acc-panel,
#tab-daily_ops .daily-ops-drawers-panel,
#tab-daily_ops .daily-ops-prodnote-panel,
#tab-daily_ops .daily-ops-ipog-panel,
#tab-daily_ops .daily-ops-da-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  color: #000000;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

#tab-daily_ops .daily-ops-shrink-head,
#tab-daily_ops .daily-ops-nonsellable-head,
#tab-daily_ops .daily-ops-cartons-head,
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head,
#tab-daily_ops .daily-ops-sts-head,
#tab-daily_ops .daily-ops-eol-head,
#tab-daily_ops .daily-ops-obs-acc-head,
#tab-daily_ops .daily-ops-drawers-head,
#tab-daily_ops .daily-ops-prodnote-head,
#tab-daily_ops .daily-ops-ipog-head,
#tab-daily_ops .daily-ops-da-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
}

#tab-daily_ops .daily-ops-shrink-head h3,
#tab-daily_ops .daily-ops-nonsellable-head h3,
#tab-daily_ops .daily-ops-cartons-head h3,
#tab-daily_ops .daily-ops-scans-head h3,
#tab-daily_ops .daily-ops-sts-head h3,
#tab-daily_ops .daily-ops-eol-head h3,
#tab-daily_ops .daily-ops-obs-acc-head h3,
#tab-daily_ops .daily-ops-drawers-head h3,
#tab-daily_ops .daily-ops-prodnote-head h3,
#tab-daily_ops .daily-ops-ipog-head h3,
#tab-daily_ops .daily-ops-da-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-daily_ops .daily-ops-shrink-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-nonsellable-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-cartons-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-scans-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-sts-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-eol-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-obs-acc-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-drawers-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-prodnote-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-ipog-head > .inventory-table-kpi-icon,
#tab-daily_ops .daily-ops-da-head > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

/* Daily Device Scans icon: style.css colors this via a higher-specificity
   :not(--monthly) selector, so match that specificity here to keep it #009fdb. */
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

#tab-daily_ops .daily-ops-shrink-meta,
#tab-daily_ops .daily-ops-nonsellable-meta,
#tab-daily_ops .daily-ops-cartons-meta,
#tab-daily_ops .daily-ops-scans-meta,
#tab-daily_ops .daily-ops-sts-meta,
#tab-daily_ops .daily-ops-eol-meta {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Column header bar — darker navy. */
#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table thead,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table thead,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table thead,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table thead,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table thead,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table thead,
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table thead,
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table thead,
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table thead,
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  backdrop-filter: none;
}

#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table thead th,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table thead th,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table thead th,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table thead th,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table thead th,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table thead th,
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table thead th,
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table thead th,
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table thead th,
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table thead th {
  color: #FFFFFF !important;
  font-weight: 700;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table thead th .dops-sort-arrow,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table thead th .dops-sort-arrow,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table thead th .dops-sort-arrow,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table thead th .dops-sort-arrow,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table thead th .dops-sort-arrow,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table thead th .dops-sort-arrow,
#tab-daily_ops .daily-ops-shrink-table thead th.shrink-sortable:hover {
  color: #FFFFFF !important;
}

/* Body rows — alternating white / soft lavender. */
#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table tbody tr,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody tr,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table tbody tr,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table tbody tr,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table tbody tr,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table tbody tr,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody tr,
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table tbody tr,
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody tr,
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table tbody tr,
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table tbody tr {
  background: #FFFFFF !important;
  border-bottom: none !important;
}

#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table tbody tr:nth-child(even),
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table tbody tr:hover,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody tr:hover,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table tbody tr:hover,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table tbody tr:hover,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table tbody tr:hover,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table tbody tr:hover,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody tr:hover,
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table tbody tr:hover,
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody tr:hover,
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table tbody tr:hover,
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table tbody tr:hover {
  background: #eef2f8 !important;
}

#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table tbody td,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody td,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table tbody td,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table tbody td,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table tbody td,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table tbody td,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody td,
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table tbody td,
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody td,
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table tbody td,
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table tbody td {
  color: #000000 !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}

#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-table tbody td:last-child,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-table tbody td:last-child,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-table tbody td:last-child,
#tab-daily_ops .daily-ops-scans-panel .daily-ops-scans-table tbody td:last-child,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-table tbody td:last-child,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-table tbody td:last-child,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-table tbody td:last-child,
#tab-daily_ops .daily-ops-drawers-panel .daily-ops-drawers-table tbody td:last-child,
#tab-daily_ops .daily-ops-prodnote-panel .daily-ops-prodnote-table tbody td:last-child,
#tab-daily_ops .daily-ops-ipog-panel .daily-ops-ipog-table tbody td:last-child,
#tab-daily_ops .daily-ops-da-panel .daily-ops-da-table tbody td:last-child {
  border-right: none !important;
}

/* Daily Ops board wrapper — give the page a light page background and let
   the reminders dashboard stretch edge-to-edge instead of being capped at
   720px and squeezed into one cell of the legacy 5-column grid. */
#tab-daily_ops .daily-ops-board {
  background: transparent;
  max-width: none;
  width: 100%;
}

#tab-daily_ops .daily-ops-dashboard {
  background: transparent;
  display: block;
  grid-template-columns: none;
  width: 100%;
  max-width: none;
}

#tab-daily_ops .daily-ops-board .do-reminders-root,
.do-reminders-root {
  max-width: none !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =====================================================================
   DAILY OPS — STORE VIEW task list. The store view renders each store
   as a do-grouped-store card with a header, a sub-topbar, a page-nav
   tab strip, and per-section subgroups containing do-task tiles.
   style.css ships two distinct rule blocks for these classes (lines
   23836-24006 and 24435-24600+), so the override must specifically
   beat both with !important on the parts that conflict.
   ===================================================================== */

/* Store card shell — white tile with navy gradient header band. */
#tab-daily_ops .do-grouped-store,
.do-grouped-store {
  background: #FFFFFF !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 24px 48px -28px rgba(15, 23, 42, 0.30) !important;
  overflow: hidden;
}

#tab-daily_ops .do-grouped-store__head,
.do-grouped-store__head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  padding: 14px 16px;
}

#tab-daily_ops .do-grouped-store__title,
.do-grouped-store__title {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-daily_ops .do-grouped-store__head .do-grouped-store__crumb,
.do-grouped-store__head .do-grouped-store__crumb {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Crumb inside the sub-topbar reads on the light wash, not on navy. */
#tab-daily_ops .do-store-subtopbar .do-grouped-store__crumb,
.do-store-subtopbar .do-grouped-store__crumb {
  color: var(--alliance-primary) !important;
}

#tab-daily_ops .do-store-subtopbar .do-grouped-store__crumb a,
.do-store-subtopbar .do-grouped-store__crumb a,
#tab-daily_ops .do-store-subtopbar a,
.do-store-subtopbar a {
  color: var(--alliance-accent) !important;
}

#tab-daily_ops .do-grouped-store__name,
.do-grouped-store__name {
  color: #FFFFFF !important;
  font-weight: 700;
}

#tab-daily_ops .do-grouped-store__icon,
.do-grouped-store__icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

#tab-daily_ops .do-grouped-store__badge,
.do-grouped-store__badge {
  background: rgba(0, 159, 219, 0.85) !important;
  color: #FFFFFF !important;
  border: none;
}

#tab-daily_ops .do-grouped-store__sections,
.do-grouped-store__sections {
  background: #FFFFFF !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding: 12px;
  gap: 12px;
}

#tab-daily_ops .do-group-toggle--store,
.do-group-toggle--store {
  background: transparent !important;
  color: #FFFFFF !important;
}

#tab-daily_ops .do-group-toggle--store:hover,
.do-group-toggle--store:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Store sub-topbar (status / breadcrumb) — light surface, navy text. */
#tab-daily_ops .do-store-subtopbar,
.do-store-subtopbar {
  background: #f4f6fa !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  color: var(--alliance-primary);
  padding: 10px 14px;
  margin: 0;
}

/* Page nav — light tab pills (3 tabs typically) with navy active state. */
#tab-daily_ops .do-store-page-nav,
.do-store-page-nav {
  background: #FFFFFF !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 10px 14px;
  margin: 0;
  gap: 8px;
}

#tab-daily_ops .do-store-page-tab,
.do-store-page-tab {
  background: #f4f6fa !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#tab-daily_ops .do-store-page-tab:hover,
.do-store-page-tab:hover {
  border-color: var(--alliance-accent) !important;
  color: var(--alliance-accent) !important;
  background: #FFFFFF !important;
}

#tab-daily_ops .do-store-page-tab.is-active,
.do-store-page-tab.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

#tab-daily_ops .do-store-page-tab__count,
.do-store-page-tab__count {
  background: rgba(0, 159, 219, 0.18) !important;
  border: 1px solid rgba(0, 159, 219, 0.32) !important;
  color: var(--alliance-primary) !important;
}

#tab-daily_ops .do-store-page-tab.is-active .do-store-page-tab__count,
.do-store-page-tab.is-active .do-store-page-tab__count {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
}

/* Section cards inside the store view — light surfaces, navy accent. */
#tab-daily_ops .do-store-section,
.do-store-section {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  padding: 12px;
  box-shadow: none;
}

#tab-daily_ops .do-store-section__head,
.do-store-section__head {
  background: transparent;
  margin-bottom: 8px;
  padding: 0;
}

#tab-daily_ops .do-store-section__title,
.do-store-section__title {
  color: var(--alliance-primary) !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#tab-daily_ops .do-store-section__subgroups,
.do-store-section__subgroups {
  background: #f4f6fa !important;
  border-radius: 4px !important;
  padding: 10px !important;
  gap: 10px;
}

#tab-daily_ops .do-store-subgroup + .do-store-subgroup,
.do-store-subgroup + .do-store-subgroup {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 10px;
}

#tab-daily_ops .do-store-subgroup__head,
.do-store-subgroup__head {
  background: transparent;
  margin-bottom: 6px;
}

#tab-daily_ops .do-store-subgroup__title,
.do-store-subgroup__title {
  color: var(--alliance-primary) !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Store card body cluster classes used inside the toggle header. */
#tab-daily_ops .do-sc__kicker,
.do-sc__kicker {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-daily_ops .do-sc__name,
.do-sc__name {
  color: #FFFFFF !important;
  font-weight: 700;
}

#tab-daily_ops .do-sc__crumb,
.do-sc__crumb {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-daily_ops .do-sc__head,
.do-sc__head {
  background: transparent;
}

#tab-daily_ops .do-sc__stats,
.do-sc__stats {
  color: rgba(255, 255, 255, 0.78);
}

#tab-daily_ops .do-sc__tabs,
.do-sc__tabs {
  background: transparent;
}

#tab-daily_ops .do-sc__tab,
.do-sc__tab {
  background: #f4f6fa !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px;
}

#tab-daily_ops .do-sc__tab.is-active,
.do-sc__tab.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* Inside-section task tiles — alternating white/lavender rows so the
   store view reads like a table. Reinforces the earlier .do-task rule
   with !important since style.css repeats the dark gradient. */
#tab-daily_ops .do-store-section__subgroups .do-task,
#tab-daily_ops .do-store-subgroup .do-task,
.do-store-section__subgroups .do-task,
.do-store-subgroup .do-task {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #000000 !important;
  margin: 0;
}

#tab-daily_ops .do-store-section__subgroups .do-task + .do-task,
#tab-daily_ops .do-store-subgroup .do-task + .do-task,
.do-store-section__subgroups .do-task + .do-task,
.do-store-subgroup .do-task + .do-task {
  margin-top: 6px;
}

#tab-daily_ops .do-store-section__subgroups .do-task:nth-child(even),
#tab-daily_ops .do-store-subgroup .do-task:nth-child(even),
.do-store-section__subgroups .do-task:nth-child(even),
.do-store-subgroup .do-task:nth-child(even) {
  background: #f0f4fa !important;
}

#tab-daily_ops .do-store-section__subgroups .do-task:hover,
#tab-daily_ops .do-store-subgroup .do-task:hover,
.do-store-section__subgroups .do-task:hover,
.do-store-subgroup .do-task:hover {
  background: #eef2f8 !important;
  border-color: var(--alliance-accent) !important;
}

#tab-daily_ops .do-store-section__subgroups .do-task-primary,
#tab-daily_ops .do-store-subgroup .do-task-primary,
.do-store-section__subgroups .do-task-primary,
.do-store-subgroup .do-task-primary {
  color: #000000 !important;
  font-weight: 600;
}

#tab-daily_ops .do-store-section__subgroups .do-task-secondary,
#tab-daily_ops .do-store-section__subgroups .do-task-context,
#tab-daily_ops .do-store-section__subgroups .do-task-date,
#tab-daily_ops .do-store-section__subgroups .do-task-meta,
#tab-daily_ops .do-store-subgroup .do-task-secondary,
#tab-daily_ops .do-store-subgroup .do-task-context,
#tab-daily_ops .do-store-subgroup .do-task-date,
#tab-daily_ops .do-store-subgroup .do-task-meta,
.do-store-section__subgroups .do-task-secondary,
.do-store-section__subgroups .do-task-context,
.do-store-section__subgroups .do-task-date,
.do-store-section__subgroups .do-task-meta,
.do-store-subgroup .do-task-secondary,
.do-store-subgroup .do-task-context,
.do-store-subgroup .do-task-date,
.do-store-subgroup .do-task-meta {
  color: var(--alliance-text-muted) !important;
}

/* "All clear" message inside a store section. */
#tab-daily_ops .do-store-section__subgroups .do-subgroup-all-clear,
.do-store-section__subgroups .do-subgroup-all-clear {
  color: var(--alliance-text-muted) !important;
  background: #FFFFFF;
  padding: 12px;
  text-align: center;
  border-radius: 4px;
}

/* =====================================================================
   INVENTORY TAB — title bars for the Daily Ops tables (Outstanding
   Shrink, Nonsellable Inventory, Cartons Not Received, STS Transfers,
   Obsolete Accessories, EOL Devices). style.css scopes the yellow
   chrome through #tab-inventory .daily-ops-*-head with !important on
   the h3/icon color, so the override must match that specificity and
   use !important on the same properties.
   ===================================================================== */

#tab-inventory .daily-ops-shrink-head,
#tab-inventory .daily-ops-nonsellable-head,
#tab-inventory .daily-ops-cartons-head,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head,
#tab-inventory .daily-ops-sts-head,
#tab-inventory .daily-ops-eol-head,
#tab-inventory .daily-ops-obs-acc-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
}

#tab-inventory .daily-ops-shrink-head h3,
#tab-inventory .daily-ops-nonsellable-head h3,
#tab-inventory .daily-ops-cartons-head h3,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head h3,
#tab-inventory .daily-ops-sts-head h3,
#tab-inventory .daily-ops-eol-head h3,
#tab-inventory .daily-ops-obs-acc-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#tab-inventory .daily-ops-shrink-head > .inventory-table-kpi-icon,
#tab-inventory .daily-ops-nonsellable-head > .inventory-table-kpi-icon,
#tab-inventory .daily-ops-cartons-head > .inventory-table-kpi-icon,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head > .inventory-table-kpi-icon,
#tab-inventory .daily-ops-sts-head > .inventory-table-kpi-icon,
#tab-inventory .daily-ops-eol-head > .inventory-table-kpi-icon,
#tab-inventory .daily-ops-obs-acc-head > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

#tab-inventory .daily-ops-shrink-head .daily-ops-shrink-meta,
#tab-inventory .daily-ops-nonsellable-head .daily-ops-nonsellable-meta,
#tab-inventory .daily-ops-cartons-head .daily-ops-cartons-meta,
#tab-inventory .daily-ops-scans-head .daily-ops-scans-meta,
#tab-inventory .daily-ops-sts-head .daily-ops-sts-meta,
#tab-inventory .daily-ops-eol-head .daily-ops-eol-meta,
#tab-inventory .daily-ops-obs-acc-head .daily-ops-obs-acc-meta {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-inventory .daily-ops-shrink-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-nonsellable-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-cartons-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-sts-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-eol-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-obs-acc-head > .inventory-table-kpi-icon svg {
  stroke: #009fdb;
  fill: none;
}

/* Same head treatment for the fullscreen popout header on the inventory
   tab (yellow chrome from style.css:15662). */
#tab-inventory .inventory-fs-popout-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
}

/* ============================================================
   Trade Portal (#tab-trade_portal) — same navy-gradient panel-head
   treatment used on Inventory, so the 'Hyla Trade-ins' and
   'Nonsellable Inventory' titles read as white on navy instead of
   falling back to the global light head (dark text on light bg).
   ============================================================ */
#tab-trade_portal .daily-ops-nonsellable-head,
#tab-trade_portal .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
}

#tab-trade_portal .daily-ops-nonsellable-head h3,
#tab-trade_portal .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#tab-trade_portal .daily-ops-nonsellable-head > .inventory-table-kpi-icon,
#tab-trade_portal .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .daily-ops-scans-head > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

#tab-trade_portal .daily-ops-nonsellable-head .daily-ops-nonsellable-meta,
#tab-trade_portal .daily-ops-scans-head .daily-ops-scans-meta {
  color: rgba(255, 255, 255, 0.78) !important;
}

#tab-trade_portal .daily-ops-nonsellable-head > .inventory-table-kpi-icon svg {
  stroke: #009fdb;
  fill: none;
}

/* Trade Portal table bodies (Hyla Trade-ins + Nonsellable Inventory) — match
   the In Transit table: 0.8rem font and white / soft-lavender (#f0f4fa) zebra
   striping with black text on light borders. The panel heads are themed above;
   only the bodies were missing the light treatment. */
#tab-trade_portal .daily-ops-scans-table,
#tab-trade_portal .daily-ops-nonsellable-table {
  font-size: 0.8rem;
}
#tab-trade_portal .daily-ops-scans-table tbody tr,
#tab-trade_portal .daily-ops-nonsellable-table tbody tr {
  background: #FFFFFF;
  border-bottom: none;
}
#tab-trade_portal .daily-ops-scans-table tbody tr:nth-child(even),
#tab-trade_portal .daily-ops-nonsellable-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
#tab-trade_portal .daily-ops-scans-table tbody tr:hover,
#tab-trade_portal .daily-ops-nonsellable-table tbody tr:hover {
  background: #eef2f8;
}
#tab-trade_portal .daily-ops-scans-table tbody td,
#tab-trade_portal .daily-ops-nonsellable-table tbody td {
  color: #000000;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
#tab-trade_portal .daily-ops-scans-table tbody td:last-child,
#tab-trade_portal .daily-ops-nonsellable-table tbody td:last-child {
  border-right: none;
}
/* Keep the red aging emphasis on Nonsellable, readable on the light rows. */
#tab-trade_portal .daily-ops-nonsellable-table tbody td.nonsellable-aging-high {
  color: #c0392b !important;
}

#tab-inventory .inventory-fs-popout-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#tab-inventory .inventory-fs-popout-head .inventory-popout-title-cluster > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

/* =====================================================================
   "Updated MM/DD/YY" stamp on the tile title bars. style.css ships
   per-tab tint colors (yellow / peach / cyan / green) that read on
   the original dark gradient. Force a translucent white tone that
   reads on the new navy gradient across every tab and the expand
   modal.
   ===================================================================== */
#tab-inventory .dops-table-updated-at,
#tab-daily_ops .dops-table-updated-at,
#tab-compliance .dops-table-updated-at,
#tab-cash .dops-table-updated-at,
#tab-trade_portal .dops-table-updated-at,
.modal.modal--dops-expand .dops-table-updated-at {
  color: rgba(255, 255, 255, 0.78) !important;
}

.dops-table-updated-at__line {
  color: inherit;
}

/* =====================================================================
   PAGINATION BARS — In Transit, Delivered, Outstanding Shrink,
   Nonsellable Inventory, Cartons Not Received, STS Transfers,
   Obsolete Accessories, EOL Devices, Scans (non-monthly).
   style.css ships per-tab pagination tints (yellow on inventory,
   orange on daily_ops, green on cash, cyan on compliance). Replace
   them with the Alliance theme: navy chips on a light wash, the
   active page as a filled accent button.
   ===================================================================== */

/* Base pagination row inside any daily-ops or inventory panel: light
   wash with a soft top border, muted range text. */
#tab-inventory .table-pagination.dops-pagination,
#tab-daily_ops .table-pagination.dops-pagination,
#tab-cash .cash-tables-mount .table-pagination.dops-pagination,
#tab-compliance .compliance-tables-mount .table-pagination.dops-pagination {
  background: #FFFFFF !important;
  border-top: 1px solid #e2e8f0 !important;
  color: var(--alliance-text-muted);
}

#tab-inventory .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .table-pagination.dops-pagination .table-pagination__range,
#tab-cash .cash-tables-mount .table-pagination.dops-pagination .table-pagination__range,
#tab-compliance .compliance-tables-mount .table-pagination.dops-pagination .table-pagination__range {
  color: var(--alliance-text-muted) !important;
}

/* Arrows + page numbers — navy pills on a light wash. */
#tab-inventory .table-pg__arrow,
#tab-daily_ops .table-pg__arrow,
#tab-cash .cash-tables-mount .table-pg__arrow,
#tab-compliance .compliance-tables-mount .table-pg__arrow,
#tab-inventory .inventory-pagination .table-pg__arrow {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

#tab-inventory .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .table-pg__arrow:hover:not([disabled]),
#tab-cash .cash-tables-mount .table-pg__arrow:hover:not([disabled]),
#tab-compliance .compliance-tables-mount .table-pg__arrow:hover:not([disabled]),
#tab-inventory .inventory-pagination .table-pg__arrow:hover:not([disabled]) {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

#tab-inventory .table-pg__arrow[disabled],
#tab-daily_ops .table-pg__arrow[disabled],
#tab-cash .cash-tables-mount .table-pg__arrow[disabled],
#tab-compliance .compliance-tables-mount .table-pg__arrow[disabled],
#tab-inventory .inventory-pagination .table-pg__arrow[disabled] {
  background: #f4f6fa !important;
  color: var(--alliance-text-muted) !important;
  border-color: #e2e8f0 !important;
  opacity: 0.55;
}

#tab-inventory .table-pg__num,
#tab-daily_ops .table-pg__num,
#tab-cash .cash-tables-mount .table-pg__num,
#tab-compliance .compliance-tables-mount .table-pg__num,
#tab-inventory .inventory-pagination .table-pg__num {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
}

#tab-inventory .table-pg__num:hover:not(.is-active),
#tab-daily_ops .table-pg__num:hover:not(.is-active),
#tab-cash .cash-tables-mount .table-pg__num:hover:not(.is-active),
#tab-compliance .compliance-tables-mount .table-pg__num:hover:not(.is-active),
#tab-inventory .inventory-pagination .table-pg__num:hover:not(.is-active) {
  background: #eef2f8 !important;
  border-color: var(--alliance-accent) !important;
  color: var(--alliance-primary) !important;
}

#tab-inventory .table-pg__num.is-active,
#tab-daily_ops .table-pg__num.is-active,
#tab-cash .cash-tables-mount .table-pg__num.is-active,
#tab-compliance .compliance-tables-mount .table-pg__num.is-active,
#tab-inventory .inventory-pagination .table-pg__num.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* Per-panel specificity overrides — these mirror the style.css selectors
   so the Alliance tint wins on every tab + table combination. */
#tab-inventory .daily-ops-shrink-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-inventory .daily-ops-nonsellable-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-inventory .daily-ops-cartons-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pagination.dops-pagination .table-pagination__range,
#tab-inventory .daily-ops-sts-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-inventory .daily-ops-eol-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-inventory .daily-ops-obs-acc-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-shrink-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-nonsellable-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-cartons-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-sts-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-eol-panel .table-pagination.dops-pagination .table-pagination__range,
#tab-daily_ops .daily-ops-obs-acc-panel .table-pagination.dops-pagination .table-pagination__range {
  color: var(--alliance-text-muted) !important;
}

#tab-inventory .daily-ops-shrink-panel .table-pg__arrow:hover:not([disabled]),
#tab-inventory .daily-ops-nonsellable-panel .table-pg__arrow:hover:not([disabled]),
#tab-inventory .daily-ops-cartons-panel .table-pg__arrow:hover:not([disabled]),
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pg__arrow:hover:not([disabled]),
#tab-inventory .daily-ops-sts-panel .table-pg__arrow:hover:not([disabled]),
#tab-inventory .daily-ops-eol-panel .table-pg__arrow:hover:not([disabled]),
#tab-inventory .daily-ops-obs-acc-panel .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .daily-ops-shrink-panel .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .daily-ops-nonsellable-panel .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .daily-ops-cartons-panel .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .daily-ops-sts-panel .table-pg__arrow:hover:not([disabled]),
#tab-daily_ops .daily-ops-eol-panel .table-pg__arrow:hover:not([disabled]) {
  background: var(--alliance-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--alliance-primary) !important;
}

#tab-inventory .daily-ops-shrink-panel .table-pg__num:hover:not(.is-active),
#tab-inventory .daily-ops-nonsellable-panel .table-pg__num:hover:not(.is-active),
#tab-inventory .daily-ops-cartons-panel .table-pg__num:hover:not(.is-active),
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pg__num:hover:not(.is-active),
#tab-inventory .daily-ops-sts-panel .table-pg__num:hover:not(.is-active),
#tab-inventory .daily-ops-eol-panel .table-pg__num:hover:not(.is-active),
#tab-inventory .daily-ops-obs-acc-panel .table-pg__num:hover:not(.is-active),
#tab-daily_ops .daily-ops-shrink-panel .table-pg__num:hover:not(.is-active),
#tab-daily_ops .daily-ops-nonsellable-panel .table-pg__num:hover:not(.is-active),
#tab-daily_ops .daily-ops-cartons-panel .table-pg__num:hover:not(.is-active),
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pg__num:hover:not(.is-active),
#tab-daily_ops .daily-ops-sts-panel .table-pg__num:hover:not(.is-active),
#tab-daily_ops .daily-ops-eol-panel .table-pg__num:hover:not(.is-active) {
  background: #eef2f8 !important;
  border-color: var(--alliance-accent) !important;
  color: var(--alliance-primary) !important;
}

#tab-inventory .daily-ops-shrink-panel .table-pg__num.is-active,
#tab-inventory .daily-ops-nonsellable-panel .table-pg__num.is-active,
#tab-inventory .daily-ops-cartons-panel .table-pg__num.is-active,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pg__num.is-active,
#tab-inventory .daily-ops-sts-panel .table-pg__num.is-active,
#tab-inventory .daily-ops-eol-panel .table-pg__num.is-active,
#tab-inventory .daily-ops-obs-acc-panel .table-pg__num.is-active,
#tab-daily_ops .daily-ops-shrink-panel .table-pg__num.is-active,
#tab-daily_ops .daily-ops-nonsellable-panel .table-pg__num.is-active,
#tab-daily_ops .daily-ops-cartons-panel .table-pg__num.is-active,
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .table-pg__num.is-active,
#tab-daily_ops .daily-ops-sts-panel .table-pg__num.is-active,
#tab-daily_ops .daily-ops-eol-panel .table-pg__num.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* =====================================================================
   TITLE BAR ACTION BUTTONS (expand / export). Replace the yellow /
   orange tints from style.css with the white-on-navy translucent pill
   style used elsewhere in the new theme.
   ===================================================================== */
.dops-table-expand-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

.dops-table-expand-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

#tab-inventory .daily-ops-shrink-panel .dops-table-expand-btn,
#tab-inventory .daily-ops-nonsellable-panel .dops-table-expand-btn,
#tab-inventory .daily-ops-cartons-panel .dops-table-expand-btn,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .dops-table-expand-btn,
#tab-inventory .daily-ops-sts-panel .dops-table-expand-btn,
#tab-inventory .daily-ops-eol-panel .dops-table-expand-btn,
#tab-inventory .daily-ops-obs-acc-panel .dops-table-expand-btn,
#tab-daily_ops .daily-ops-shrink-panel .dops-table-expand-btn,
#tab-daily_ops .daily-ops-nonsellable-panel .dops-table-expand-btn,
#tab-daily_ops .daily-ops-cartons-panel .dops-table-expand-btn,
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .dops-table-expand-btn,
#tab-daily_ops .daily-ops-sts-panel .dops-table-expand-btn,
#tab-daily_ops .daily-ops-eol-panel .dops-table-expand-btn,
#tab-cash .cash-tables-mount .dops-table-expand-btn,
#tab-compliance .compliance-tables-mount .dops-table-expand-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
}

#tab-inventory .daily-ops-shrink-panel .dops-table-expand-btn:hover,
#tab-inventory .daily-ops-nonsellable-panel .dops-table-expand-btn:hover,
#tab-inventory .daily-ops-cartons-panel .dops-table-expand-btn:hover,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .dops-table-expand-btn:hover,
#tab-inventory .daily-ops-sts-panel .dops-table-expand-btn:hover,
#tab-inventory .daily-ops-eol-panel .dops-table-expand-btn:hover,
#tab-inventory .daily-ops-obs-acc-panel .dops-table-expand-btn:hover,
#tab-daily_ops .daily-ops-shrink-panel .dops-table-expand-btn:hover,
#tab-daily_ops .daily-ops-nonsellable-panel .dops-table-expand-btn:hover,
#tab-daily_ops .daily-ops-cartons-panel .dops-table-expand-btn:hover,
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly) .dops-table-expand-btn:hover,
#tab-daily_ops .daily-ops-sts-panel .dops-table-expand-btn:hover,
#tab-daily_ops .daily-ops-eol-panel .dops-table-expand-btn:hover,
#tab-cash .cash-tables-mount .dops-table-expand-btn:hover,
#tab-compliance .compliance-tables-mount .dops-table-expand-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* KPI icon inside any daily-ops head — force white so it reads on the
   navy gradient regardless of style.css's per-tab tint. */
#tab-inventory .daily-ops-shrink-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-nonsellable-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-cartons-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-sts-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-eol-head > .inventory-table-kpi-icon svg,
#tab-inventory .daily-ops-obs-acc-head > .inventory-table-kpi-icon svg,
#tab-daily_ops .daily-ops-shrink-head > .inventory-table-kpi-icon svg,
#tab-daily_ops .daily-ops-nonsellable-head > .inventory-table-kpi-icon svg,
#tab-daily_ops .daily-ops-cartons-head > .inventory-table-kpi-icon svg,
#tab-daily_ops .daily-ops-sts-head > .inventory-table-kpi-icon svg,
#tab-daily_ops .daily-ops-eol-head > .inventory-table-kpi-icon svg,
#tab-cash .cash-tables-mount .daily-ops-drawers-head > .inventory-table-kpi-icon svg,
#tab-cash .cash-tables-mount .daily-ops-prodnote-head > .inventory-table-kpi-icon svg,
#tab-compliance .compliance-tables-mount .daily-ops-ipog-head > .inventory-table-kpi-icon svg,
#tab-compliance .compliance-tables-mount .daily-ops-da-head > .inventory-table-kpi-icon svg,
#tab-compliance .compliance-tables-mount .daily-ops-scans-head > .inventory-table-kpi-icon svg {
  stroke: #009fdb !important;
  color: #009fdb !important;
  fill: none;
}

/* =====================================================================
   TREASURY TRACKER — apply the Alliance theme across every section of
   the Treasury page (KPI strip, filter bar, table panel, mobile cards,
   detail drawer, email thread, attachments, lightbox). Treasury renders
   into #treasury-root inside #tab-treasury via the Vite IIFE bundle,
   and ships its own treasury-tracker.css with dark-gradient chrome —
   override that here so the live theme follows the rest of the site.
   ===================================================================== */

#tab-treasury,
#tab-treasury #treasury-root,
#treasury-root .arit-page {
  background: transparent !important;
  color: #000000;
}

#treasury-root .arit-dashboard,
#treasury-root .arit-dashboard-title h1,
#treasury-root .arit-dashboard-subtitle {
  color: #000000;
}

#treasury-root .arit-dashboard-title h1 {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#treasury-root .arit-dashboard-subtitle {
  color: var(--alliance-text-muted);
}

/* ---------- KPI strip ---------- */
/* Treasury KPI tiles mirror the Ticket Tracker (#tab-arit) tiles exactly —
   same white card, navy icon box, grid retune, and number/label type. The
   sparkline (::after, set in treasury-tracker.css) is preserved. */
#treasury-root .arit-kpi-card {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px !important;
  color: #000000;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 0.7rem !important;
  align-items: center !important;
  padding: 0.65rem 0.85rem 0.85rem !important;
  aspect-ratio: auto !important;
  min-height: 92px;
}

#treasury-root .arit-kpi-card > div {
  min-width: 0;
}

#treasury-root .arit-kpi-card:hover {
  border-color: var(--alliance-accent) !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px !important;
}

#treasury-root .arit-kpi-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 159, 219, 0.5), transparent) !important;
}

#treasury-root .arit-kpi-card * {
  color: var(--alliance-primary);
}

#treasury-root .arit-kpi-card span:not(.arit-kpi-icon) {
  color: var(--alliance-primary);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#treasury-root .arit-kpi-card small {
  color: var(--alliance-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#treasury-root .arit-kpi-card strong {
  color: var(--alliance-primary);
  font-size: 1.4rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#treasury-root .arit-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--alliance-primary);
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#treasury-root .arit-kpi-icon,
#treasury-root .arit-kpi-icon * {
  color: #FFFFFF !important;
}

#treasury-root .arit-kpi-icon svg,
#treasury-root .arit-kpi-icon svg * {
  stroke: #FFFFFF !important;
  fill: none;
}

#treasury-root .arit-kpi-icon svg {
  width: 22px;
  height: 22px;
}

#treasury-root .arit-kpi-card--blue .arit-kpi-icon { background: var(--alliance-primary); }
#treasury-root .arit-kpi-card--green .arit-kpi-icon { background: #15803d; }
#treasury-root .arit-kpi-card--orange .arit-kpi-icon { background: #b45309; }
#treasury-root .arit-kpi-card--purple .arit-kpi-icon { background: #6d28d9; }
#treasury-root .arit-kpi-card--slate .arit-kpi-icon { background: #475569; }
#treasury-root .arit-kpi-card--red .arit-kpi-icon { background: #b91c1c; }

#treasury-root .arit-kpi-chart {
  background: #f4f6fa;
}

#treasury-root .arit-kpi-bar {
  background: linear-gradient(180deg, var(--alliance-accent), rgba(0, 159, 219, 0.6));
}

/* ---------- Workspace + table panel ---------- */
#treasury-root .arit-workspace,
#treasury-root .arit-table-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  color: #000000;
}

#treasury-root .arit-table-toolbar,
#treasury-root .arit-table-toolbar--filters {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f0;
  color: var(--alliance-primary);
}

/* ---------- Filter tabs (issue type / status pills) ---------- */
#treasury-root .treasury-filter-tabs {
  background: transparent;
  gap: 6px;
}

#treasury-root .treasury-filter-tabs .arit-tab,
#treasury-root .arit-tab {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#treasury-root .treasury-filter-tabs .arit-tab:hover,
#treasury-root .arit-tab:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
}

#treasury-root .treasury-filter-tabs .arit-tab.active,
#treasury-root .arit-tab.active,
#treasury-root .arit-tab.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

#treasury-root .treasury-filter-issue-row {
  background: #f4f6fa;
  border-radius: 4px;
  padding: 8px;
}

#treasury-root .treasury-filter-grid,
#treasury-root .treasury-filter-toggle {
  color: var(--alliance-primary);
}

#treasury-root .treasury-filter-toggle input {
  accent-color: var(--alliance-primary);
}

#treasury-root .treasury-filters--pending {
  background: rgba(0, 159, 219, 0.08);
}

/* ---------- Banners ---------- */
#treasury-root .arit-banner--warn {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #b45309;
  border-radius: 4px;
}

#treasury-root .arit-banner--info {
  background: rgba(0, 159, 219, 0.1);
  border: 1px solid rgba(0, 159, 219, 0.35);
  color: var(--alliance-primary);
  border-radius: 4px;
}

#treasury-root .arit-banner--warn code,
#treasury-root .treasury-store-scope {
  background: rgba(255, 255, 255, 0.7);
  color: var(--alliance-primary);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ---------- Table (desktop view) ---------- */
#treasury-root .arit-table-wrapper {
  background: #FFFFFF;
  border-radius: 4px;
}

#treasury-root .arit-table {
  background: #FFFFFF;
  color: #000000;
}

#treasury-root .arit-table thead,
#treasury-root .arit-table .arit-table-header {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  color: #FFFFFF;
  font-weight: 700;
  border: none;
}

/* The Treasury column header row uses .arit-th-cell wrappers with an
   inner .arit-th-head + .arit-th-title-sort + .arit-th-sort-text. Force
   every nested element to a light text tone so the header reads on the
   navy gradient bar. */
#treasury-root .arit-table thead th,
#treasury-root .arit-table thead .arit-th-cell {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 0.75rem;
}

#treasury-root .arit-table thead .arit-th-head,
#treasury-root .arit-table thead .arit-th-title-sort,
#treasury-root .arit-table thead .arit-th-sort-text,
#treasury-root .arit-table thead .arit-th-sort-indicator,
#treasury-root .arit-table thead .arit-th-filter-toggle,
#treasury-root .arit-table thead .arit-th-filter-toggle-icon {
  color: rgba(255, 255, 255, 0.88) !important;
  background: transparent !important;
}

#treasury-root .arit-table thead .arit-th-title-sort:hover .arit-th-sort-text,
#treasury-root .arit-table thead .arit-th-head--sort-active .arit-th-sort-text {
  color: #FFFFFF !important;
}

#treasury-root .arit-table thead .arit-th-head--sort-active .arit-th-sort-indicator,
#treasury-root .arit-table thead .arit-th-filter-toggle[aria-expanded="true"],
#treasury-root .arit-table thead .arit-th-filter-toggle--on {
  color: var(--alliance-accent) !important;
}

#treasury-root .arit-table thead .arit-th-filter-toggle:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

#treasury-root .arit-table thead .arit-th-head--filtered .arit-th-sort-text {
  text-decoration-color: var(--alliance-accent) !important;
}

#treasury-root .arit-table-header.arit-sortable:hover {
  background: linear-gradient(90deg, #1B4278 0%, #13315a 100%) !important;
  color: #FFFFFF;
}

#treasury-root .arit-table tbody tr,
#treasury-root .arit-table-row {
  background: #FFFFFF !important;
  border-bottom: none !important;
}

#treasury-root .arit-table tbody tr:nth-child(even),
#treasury-root .arit-table-row:nth-child(even) {
  background: #f0f4fa !important;
}

#treasury-root .arit-table tbody tr:hover,
#treasury-root .arit-table-row:hover {
  background: #eef2f8 !important;
}

#treasury-root .arit-table td {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#treasury-root .arit-table td:last-child {
  border-right: none;
}

/* ---------- Site block + line ---------- */
#treasury-root .treasury-site-block__title,
#treasury-root .treasury-site-line__store {
  color: var(--alliance-primary) !important;
  font-weight: 700;
}

#treasury-root .treasury-site-block__meta,
#treasury-root .treasury-site-line__market,
#treasury-root .treasury-site-line__district,
#treasury-root .treasury-site-line__site,
#treasury-root .treasury-site-line__sep {
  color: var(--alliance-text-muted) !important;
}

/* ---------- Mobile card list ---------- */
#treasury-root .treasury-card-list {
  gap: 8px;
}

#treasury-root .treasury-mobile-card {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 4px;
  color: #000000;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

#treasury-root .treasury-mobile-card:hover {
  border-color: var(--alliance-accent) !important;
  background: #eef2f8;
}

#treasury-root .treasury-mobile-card.is-active {
  border-color: var(--alliance-primary) !important;
  background: #eef2f8;
}

#treasury-root .treasury-mobile-card--past-due {
  border-left: 3px solid #b91c1c;
}

#treasury-root .treasury-mobile-card__tap {
  color: var(--alliance-primary);
}

#treasury-root .treasury-mobile-card__variance--neg {
  color: #b91c1c !important;
}

#treasury-root .treasury-mobile-card__variance--pos {
  color: #15803d !important;
}

#treasury-root .treasury-mobile-card__chevron {
  color: var(--alliance-text-muted);
}

#treasury-root .treasury-mobile-card__facts {
  color: var(--alliance-text-muted);
}

#treasury-root .treasury-mobile-card__facts .is-past-due {
  color: #b91c1c;
  font-weight: 700;
}

#treasury-root .treasury-mobile-card__dts {
  color: var(--alliance-text-muted);
}

/* ---------- Issue / sequence / status badges ---------- */
#treasury-root .treasury-issue,
#treasury-root .treasury-seq {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#treasury-root .treasury-issue--shortage,
#treasury-root .treasury-seq--final {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #b91c1c !important;
}

#treasury-root .treasury-issue--overage {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #15803d !important;
}

#treasury-root .treasury-issue--variance,
#treasury-root .treasury-seq--second {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
}

#treasury-root .treasury-issue--late-deposit {
  background: rgba(0, 159, 219, 0.16) !important;
  color: var(--alliance-primary) !important;
}

#treasury-root .treasury-issue--missed-pickup {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #6d28d9 !important;
}

#treasury-root .treasury-issue--change-order {
  background: rgba(6, 182, 212, 0.16) !important;
  color: #0e7490 !important;
}

#treasury-root .treasury-issue--other,
#treasury-root .treasury-seq--unknown,
#treasury-root .treasury-seq--first {
  background: rgba(100, 116, 139, 0.14) !important;
  color: #475569 !important;
}

#treasury-root .treasury-seq--third {
  background: rgba(249, 115, 22, 0.14) !important;
  color: #c2410c !important;
}

#treasury-root .arit-status--written-off {
  background: rgba(100, 116, 139, 0.14) !important;
  color: #475569 !important;
  border: 1px solid rgba(100, 116, 139, 0.32);
  border-radius: 4px;
}

#treasury-root .arit-status--closed {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #15803d !important;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 4px;
}

#treasury-root .arit-amount--neg {
  color: #b91c1c !important;
}

#treasury-root .arit-amount--pos {
  color: #15803d !important;
}

#treasury-root .arit-deadline--past {
  color: #b91c1c !important;
}

#treasury-root .arit-dts {
  color: var(--alliance-text-muted);
}

#treasury-root .treasury-thread-count {
  background: rgba(0, 159, 219, 0.16);
  color: var(--alliance-primary);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
}

/* ---------- Detail drawer (slide-in) ---------- */
.treasury-drawer-backdrop {
  background: rgba(27, 66, 120, 0.45) !important;
}

.treasury-drawer {
  background: #FFFFFF !important;
  border-left: 1px solid #d8e0ea;
  box-shadow: rgba(0, 0, 0, 0.32) -12px 0 32px;
  color: #000000;
}

.treasury-drawer__handle {
  background: #d8e0ea;
}

.treasury-drawer__header {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
  padding: 16px 20px;
}

.treasury-drawer__header h2,
.treasury-drawer__header h3,
.treasury-drawer__header h4,
.treasury-drawer__header strong {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.treasury-drawer__header-badges {
  color: #FFFFFF;
}

.treasury-drawer__close {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

.treasury-drawer__close:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
}

.treasury-drawer__body {
  background: #FFFFFF;
  color: #000000;
}

.treasury-drawer .arit-detail-tabs {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f0;
  gap: 4px;
  padding: 8px 12px 0;
}

.treasury-drawer .arit-detail-tab {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
  font-weight: 600;
}

.treasury-drawer .arit-detail-tab:hover {
  background: #eef2f8;
}

.treasury-drawer .arit-detail-tab.is-active {
  background: #FFFFFF !important;
  border-color: #d8e0ea !important;
  border-bottom-color: #FFFFFF !important;
  color: var(--alliance-primary) !important;
  font-weight: 700;
  box-shadow: 0 -2px 0 var(--alliance-accent) inset;
}

.treasury-drawer .arit-actions-grid select,
.treasury-drawer .arit-actions-grid textarea,
.treasury-drawer input[type="text"],
.treasury-drawer input[type="number"],
.treasury-drawer input[type="email"],
.treasury-drawer textarea,
.treasury-drawer select {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

.treasury-drawer input:focus,
.treasury-drawer textarea:focus,
.treasury-drawer select:focus {
  border-color: var(--alliance-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.15);
}

.treasury-drawer button {
  border-radius: 4px;
}

.treasury-drawer button.arit-primary,
.treasury-drawer button[type="submit"] {
  background: var(--alliance-primary);
  border: 1px solid var(--alliance-primary);
  color: #FFFFFF;
  font-weight: 600;
  padding: 8px 16px;
}

.treasury-drawer button.arit-primary:hover,
.treasury-drawer button[type="submit"]:hover {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
}

/* ---------- Email thread + intro panels ---------- */
.treasury-email-thread__intro,
.treasury-attachments-intro {
  background: #f4f6fa;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: var(--alliance-primary);
  padding: 12px 16px;
}

.treasury-summary-thread-meta,
.treasury-summary-thread-meta__subject {
  color: var(--alliance-primary);
}

.treasury-email-thread__list {
  gap: 8px;
}

.treasury-email-thread__item {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 4px;
  color: #000000;
}

.treasury-email-thread__item.is-first {
  border-left: 3px solid var(--alliance-accent);
}

.treasury-email-thread__item.is-final {
  border-left: 3px solid var(--alliance-primary);
}

.treasury-email-thread__head {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 4px 4px 0 0;
  padding: 10px 14px;
}

.treasury-email-thread__meta {
  color: var(--alliance-primary);
}

.treasury-email-thread__meta-top {
  color: var(--alliance-text-muted);
}

.treasury-email-thread__meta-top strong {
  color: var(--alliance-primary);
}

.treasury-email-thread__time {
  color: var(--alliance-text-muted);
}

.treasury-email-thread__subject {
  color: var(--alliance-primary);
  font-weight: 700;
}

.treasury-email-thread__badges {
  gap: 6px;
}

.treasury-email-thread__role {
  background: rgba(0, 159, 219, 0.16);
  color: var(--alliance-primary);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.treasury-email-thread__item.is-final .treasury-email-thread__role {
  background: var(--alliance-primary);
  color: #FFFFFF;
}

.treasury-email-thread__chevron {
  color: var(--alliance-text-muted);
}

.treasury-email-thread__item .treasury-email__frame-wrap {
  background: #FFFFFF;
  border-top: 1px solid #e2e8f0;
}

.treasury-email-thread__item .treasury-email__iframe,
.treasury-email__iframe {
  background: #FFFFFF;
  border: none;
}

.treasury-email__frame-wrap {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
}

/* ---------- Attachments grid + thumbs ---------- */
.treasury-attachments-grid {
  gap: 10px;
}

.treasury-attachment-thumb,
.treasury-attachment-file {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  color: var(--alliance-primary);
  box-shadow: rgba(0, 0, 0, 0.06) 0 1px 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.treasury-attachment-thumb:hover,
.treasury-attachment-file:hover {
  border-color: var(--alliance-accent);
  box-shadow: rgba(0, 0, 0, 0.12) 0 4px 8px;
}

.treasury-attachment-thumb img {
  border-radius: 3px;
}

.treasury-attachment-thumb span {
  color: var(--alliance-text-muted);
  background: rgba(255, 255, 255, 0.92);
}

.treasury-attachment-thumb__email,
.treasury-attachment-file__email {
  color: var(--alliance-text-muted);
}

/* ---------- Lightbox (image viewer) ---------- */
.treasury-lightbox {
  background: rgba(27, 66, 120, 0.92) !important;
}

.treasury-lightbox img {
  border: 1px solid #d8e0ea;
  border-radius: 4px;
}

.treasury-lightbox__close {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

.treasury-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
}

/* ---------- Misc treasury text colors ---------- */
#treasury-root h1,
#treasury-root h2,
#treasury-root h3,
#treasury-root h4 {
  color: var(--alliance-primary);
}

/* Grouped-tracker redesign (tt-*): the hero and tile heads are navy
   gradients that carry their own white headings — the alliance-primary
   heading color above makes them navy-on-navy (invisible). Must win at
   the same #treasury-root scope. */
#treasury-root .tt-hero-head h1,
#treasury-root .tt-th-center h2 {
  color: #FFFFFF;
}

#treasury-root a {
  color: var(--alliance-accent);
}

#treasury-root a:hover {
  color: var(--alliance-primary);
}

#treasury-root .arit-table-loading,
#treasury-root .arit-empty,
#treasury-root .arit-skeleton {
  color: var(--alliance-text-muted);
  background: #FFFFFF;
}

/* =====================================================================
   DAILY OPS EXPAND MODAL (.modal.modal--dops-expand) — fullscreen popout
   shared by Open Drawers, Product Notes, Outstanding Shrink, Nonsellable,
   Cartons, STS, Obs-Acc, EOL, IPOG, DA, Scans. Replace the dark gold
   chrome with the Alliance light theme: white card, navy gradient title
   bar, darker navy column header, alternating rows, black text on light
   dividers.
   ===================================================================== */

.modal-overlay.active:has(.modal.modal--dops-expand) {
  background: rgba(27, 66, 120, 0.45) !important;
}

.modal.modal--dops-expand {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.32) 0 12px 32px !important;
  color: #000000;
}

/* Top title band — navy gradient with centered white Montserrat title. */
.modal.modal--dops-expand .dops-expand-modal-table-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
}

.modal.modal--dops-expand .dops-expand-modal-table-head .inventory-popout-title-cluster > .inventory-table-kpi-icon {
  color: #009fdb !important;
}

.modal.modal--dops-expand .dops-expand-modal-table-head .inventory-popout-title-cluster > h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.modal.modal--dops-expand .dops-table-updated-at {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Close × button — white-on-navy translucent pill matching the topbar. */
.modal.modal--dops-expand .modal-close {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
}

.modal.modal--dops-expand .modal-close:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Export / action buttons in the header. */
.modal.modal--dops-expand .dops-expand-modal-table-head .daily-ops-head-actions button,
.modal.modal--dops-expand .dops-expand-modal-table-head .daily-ops-head-actions .inventory-fs-export-csv-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

.modal.modal--dops-expand .dops-expand-modal-table-head .daily-ops-head-actions button:hover,
.modal.modal--dops-expand .dops-expand-modal-table-head .daily-ops-head-actions .inventory-fs-export-csv-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #FFFFFF !important;
}

/* Modal body wrapper — white surface, no dark wash behind the table. */
.modal.modal--dops-expand .modal-body {
  background: #FFFFFF;
}

.modal.modal--dops-expand .dops-expand-modal-scroll {
  background: #FFFFFF !important;
  border-radius: 0 !important;
  scrollbar-color: rgba(27, 66, 120, 0.35) transparent;
}

/* Column header bar — one continuous navy band on a sticky thead with
   transparent header cells (matches the inline tables + inventory fullscreen).
   The base rule makes each th position:sticky with its own gradient, which
   paints a segmented per-column band; override to the continuous pattern. */
.modal.modal--dops-expand .dops-expand-table {
  border-collapse: separate;
  border-spacing: 0;
}

.modal.modal--dops-expand .dops-expand-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
}

.modal.modal--dops-expand .dops-expand-table thead th {
  position: static;
  top: auto;
  background: transparent !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  /* Roomier fullscreen reading size (canonical for every expanded table). */
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modal.modal--dops-expand .dops-expand-table th .dops-sort-arrow,
.modal.modal--dops-expand .dops-expand-table th.dops-sortable:hover {
  color: #FFFFFF !important;
}

/* Body rows — alternating white / soft lavender, black text on light
   borders. */
.modal.modal--dops-expand .dops-expand-table tbody tr {
  background: #FFFFFF !important;
}

.modal.modal--dops-expand .dops-expand-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}

.modal.modal--dops-expand .dops-expand-table tbody tr:hover {
  background: #eef2f8 !important;
}

.modal.modal--dops-expand .dops-expand-table td {
  color: #000000 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
}

.modal.modal--dops-expand .dops-expand-table td:last-child {
  border-right: none !important;
}

/* Pagination inside the expand modal. */
.modal.modal--dops-expand .table-pagination.dops-pagination,
.modal.modal--dops-expand .dops-pagination {
  color: var(--alliance-text-muted) !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #FFFFFF;
}

.modal.modal--dops-expand .table-pg__arrow,
.modal.modal--dops-expand .table-pg__num {
  background: #f4f6fa !important;
  border: 1px solid #d8e0ea !important;
  color: var(--alliance-primary) !important;
  border-radius: 4px;
}

.modal.modal--dops-expand .table-pg__arrow:hover:not([disabled]),
.modal.modal--dops-expand .table-pg__num:hover:not(.is-active),
.modal.modal--dops-expand .table-pg__num.is-active {
  background: var(--alliance-primary) !important;
  border-color: var(--alliance-primary) !important;
  color: #FFFFFF !important;
}

/* Compliance export dropdown (Device Alive + IPOG title bars) — Full /
   Simple options. Wraps the existing translucent export pill so the
   visual matches the other title-bar buttons. */
.dops-export-dropdown { position: relative; display: inline-flex; }
.dops-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dops-export-menu[hidden] { display: none !important; }
.dops-export-menu__item {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--alliance-primary, #1B4278);
  cursor: pointer;
  white-space: nowrap;
}
.dops-export-menu__item:hover,
.dops-export-menu__item:focus-visible {
  background: rgba(0, 159, 219, 0.12);
  outline: none;
}
.dops-export-menu__item:active {
  background: rgba(27, 66, 120, 0.18);
}

/* Icon-triggered column filter (e.g. Daily Device Scans Count Status). */
.dops-filter-dropdown { position: relative; display: inline-flex; }
.dops-filter-toggle.is-active {
  border-color: rgba(56, 189, 248, 0.6);
  color: #38bdf8;
}
/* Body-level filter flyout (Daily Count Status / Monthly four-column). Lives
   under <body> so it is never clipped by the panel overflow or pane transform. */
.dops-filter-flyout {
  position: fixed;
  z-index: 9100;
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.22) 0 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dops-filter-flyout[hidden] { display: none !important; }
.dops-filter-flyout--multi { min-width: 230px; }
.dops-filter-flyout__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}
.dops-filter-flyout__group + .dops-filter-flyout__group {
  border-top: 1px solid #eef2f7;
  margin-top: 2px;
  padding-top: 2px;
}
.dops-filter-menu__head {
  padding: 6px 10px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a90;
}
.dops-filter-menu__item {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--alliance-primary, #1B4278);
  cursor: pointer;
  white-space: nowrap;
}
.dops-filter-menu__item:hover,
.dops-filter-menu__item:focus-visible {
  background: rgba(0, 159, 219, 0.12);
  outline: none;
}
.dops-filter-menu__item.is-selected {
  background: rgba(27, 66, 120, 0.12);
}

/* Multi-select checkbox rows in the filter flyout. */
.dops-filter-check {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 7px 10px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--alliance-primary, #1B4278);
  cursor: pointer;
  white-space: nowrap;
}
.dops-filter-check:hover,
.dops-filter-check:focus-visible {
  background: rgba(0, 159, 219, 0.12);
  outline: none;
}
.dops-filter-check__box {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1.5px solid #b6c2d2;
  border-radius: 3px;
  background: #ffffff;
  box-sizing: border-box;
}
.dops-filter-check.is-checked .dops-filter-check__box {
  background: var(--alliance-primary, #1B4278);
  border-color: var(--alliance-primary, #1B4278);
}
.dops-filter-check.is-checked .dops-filter-check__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dops-filter-check__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dops-filter-check--all { font-style: italic; }

/* =====================================================================
   DAILY OPERATIONS — Mobile layout polish.
   On phones the page was rendering with desktop padding/margins, so
   the store-tab pills + nested cards burned a lot of vertical space
   before the user could see real data. Tighten the breadcrumb, the
   tab pills, the section/subgroup chrome, and the task tiles so the
   content fits the viewport without horizontal squeeze.
   ===================================================================== */
@media (max-width: 767px) {
  #tab-daily_ops {
    padding: 0 0.5rem 1rem;
  }

  /* Outer "Daily Operations / Wednesday / All markets" hero band. */
  #tab-daily_ops .do-grouped-store__head {
    padding: 12px 14px;
    border-radius: 4px 4px 0 0;
  }
  #tab-daily_ops .do-grouped-store__title {
    font-size: 1.4rem;
    line-height: 1.15;
  }
  #tab-daily_ops .do-grouped-store__kicker {
    font-size: 0.74rem;
    margin-bottom: 0.15rem;
  }
  #tab-daily_ops .do-grouped-store__crumb {
    font-size: 0.78rem;
    line-height: 1.35;
    word-break: break-word;
  }

  /* Store-tab pill bar (INVENTORY / CASH / COMPLIANCE).
     The desktop layout made these chunky; on phones tighten them so
     all three pills fit and the count chip stays legible. */
  #tab-daily_ops .do-store-page-nav {
    gap: 0.4rem;
    padding: 0.65rem 0.7rem 0;
  }
  #tab-daily_ops .do-store-page-tab {
    padding: 0.45rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    min-width: 0;
    gap: 0.35rem;
  }
  #tab-daily_ops .do-store-page-tab__count {
    padding: 0 0.35rem;
    min-width: 1.25rem;
    font-size: 0.7rem;
  }

  /* Drop the page padding around the store sections so subgroups
     run edge-to-edge inside the store card. */
  #tab-daily_ops .do-grouped-store__sections {
    padding: 10px;
  }
  #tab-daily_ops .do-store-section {
    padding: 0;
  }
  #tab-daily_ops .do-store-section__head {
    padding: 0.45rem 0.15rem 0.35rem;
  }
  #tab-daily_ops .do-store-section__title {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }

  /* Each subgroup card (CARTONS NOT RECEIVED, NONSELLABLE, etc.). */
  #tab-daily_ops .do-store-subgroup {
    padding: 0.55rem 0.55rem 0.7rem;
    gap: 0.25rem;
  }
  #tab-daily_ops .do-store-subgroup__head {
    margin-bottom: 0.1rem;
  }
  #tab-daily_ops .do-store-subgroup__title {
    font-size: 0.66rem;
    letter-spacing: 0.07em;
  }

  /* Task tiles (the per-carton / per-item rows). The desktop tiles
     had ~1rem horizontal padding and a generous gap; on phones that
     pushed the "Carton CTNH…" text onto two lines while leaving a
     tall empty strip on the right. Tighten everything. */
  #tab-daily_ops .do-task {
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    margin: 0.25rem 0;
    min-height: 0;
  }
  #tab-daily_ops .do-task-check {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.55rem;
    flex-shrink: 0;
  }
  #tab-daily_ops .do-task-primary {
    font-size: 0.84rem;
    line-height: 1.25;
    word-break: break-word;
  }
  #tab-daily_ops .do-task-secondary,
  #tab-daily_ops .do-task-context {
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 0.1rem;
  }
  #tab-daily_ops .do-task-meta,
  #tab-daily_ops .do-task-date {
    font-size: 0.68rem;
  }
  #tab-daily_ops .do-task-priority {
    padding: 0.12rem 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }

  /* Compliance info cards — sit them flush with the tile padding and
     drop the inner gap so the strip is tighter on phones. */
  #tab-daily_ops .do-compliance-cards {
    gap: 0.45rem;
    padding: 0.2rem 0;
  }
  #tab-daily_ops .do-compliance-cards__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }
  #tab-daily_ops .do-compliance-card {
    padding: 0.45rem 0.5rem 0.55rem;
  }
  #tab-daily_ops .do-compliance-card__head h5 {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }
  #tab-daily_ops .do-compliance-card__value {
    font-size: 0.85rem;
    padding: 0.2rem 0.15rem;
  }
  #tab-daily_ops .do-compliance-card__metric-label {
    font-size: 0.56rem;
  }
  #tab-daily_ops .do-compliance-card__metric-value {
    font-size: 0.75rem;
  }
}


/* =====================================================================
   WORKBOOK PAGE — Alliance light theme overrides for #tab-workbook
   ===================================================================== */
#tab-workbook .workbook-page__title-wrap h2 {
  color: var(--alliance-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#tab-workbook .workbook-page__title-wrap p {
  color: var(--alliance-text-muted);
}

#tab-workbook .workbook-page__search,
#tab-workbook .workbook-page__btn {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
}
#tab-workbook .workbook-page__search:focus {
  border-color: var(--alliance-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.18);
}
#tab-workbook .workbook-page__btn:hover {
  background: var(--alliance-primary);
  border-color: var(--alliance-primary);
  color: #FFFFFF;
}
#tab-workbook .workbook-page__btn--ghost {
  background: transparent;
  color: var(--alliance-text-muted);
}
#tab-workbook .workbook-page__btn--ghost:hover {
  background: #f0f4fa;
  color: var(--alliance-primary);
  border-color: #d8e0ea;
}

#tab-workbook .workbook-tabs {
  border-bottom-color: #d8e0ea;
}
#tab-workbook .workbook-tab {
  color: var(--alliance-text-muted);
}
#tab-workbook .workbook-tab:hover {
  background: #f0f4fa;
  color: var(--alliance-primary);
}
#tab-workbook .workbook-tab.is-active {
  background: #FFFFFF;
  border-color: #d8e0ea;
  border-bottom-color: #FFFFFF;
  color: var(--alliance-primary);
}

#tab-workbook .workbook-status {
  color: var(--alliance-text-muted);
}
#tab-workbook .workbook-status--error {
  color: var(--alliance-error);
}

#tab-workbook .workbook-grid-wrap {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

#tab-workbook .workbook-grid-meta {
  background: #f4f6fa;
  color: var(--alliance-text-muted);
  border-bottom-color: #d8e0ea;
}

#tab-workbook .workbook-table thead th {
  background: #f4f6fa;
  color: var(--alliance-primary);
  border-bottom: 1px solid #d8e0ea;
  border-right: 1px solid #eef2f8;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.02em;
}
#tab-workbook .workbook-table .workbook-sortable:hover {
  background: rgba(0, 159, 219, 0.12);
}
#tab-workbook .workbook-sort-arrow {
  color: var(--alliance-accent);
}

#tab-workbook .workbook-table .workbook-rownum {
  background: #f4f6fa;
  color: var(--alliance-text-muted);
  border-right-color: #d8e0ea;
}

#tab-workbook .workbook-table tbody td {
  color: var(--alliance-primary);
  border-bottom-color: #eef2f8;
  border-right-color: #f4f6fa;
}
#tab-workbook .workbook-table tbody tr:nth-child(even) td {
  background: #f9fbfd;
}
#tab-workbook .workbook-table tbody tr:hover td {
  background: #eef4fb;
}

#tab-workbook .workbook-cell.is-saving {
  background: rgba(0, 159, 219, 0.18) !important;
}
#tab-workbook .workbook-cell.is-edited::after {
  background: var(--alliance-accent);
}

#tab-workbook .workbook-cell-input {
  background: #FFFFFF;
  border-color: var(--alliance-accent);
  color: var(--alliance-primary);
}

/* =====================================================================
   "IN TRANSIT" TABLE THEME — applied to the remaining tables that did
   not yet share the inventory In-transit look:
     • Past Walkthroughs  (.audits-mw-past-table — Audits page)
     • Adjustment Research (.research-table — Research page)
     • Treasury Tracker   (.arit-table — Treasury page)
     • Ticket Tracker     (.arit-table — Ticket/ARIT dashboard)

   (The Archway Order Tracker is fully themed inside its own rebuilt
   bundle — src/styles/archway-shipments.css — so it is not handled here.)

   Reference look (matches #tab-inventory .inventory-transport-carousel
   .inventory-table): navy→black gradient header band with bold white
   text, white / #f0f4fa zebra rows, black cell text, #e2e8f0 borders.

   The Treasury / Ticket tables are React/Vite components whose
   own CSS (arit-dashboard.css) is injected at
   runtime, so these overrides use !important to win the cascade — the
   same approach already used for the cash-page tables above. This file
   is the last stylesheet linked in index.html, so no rebuild of the
   React bundles is required for the theme to take effect.
   ===================================================================== */

/* ---- Wrappers: turn the dark frames into a clean light card ---- */
.audits-mw-past-table-wrap,
.research-table-scroll,
.arit-table-wrap,
.arit-table-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
}

/* ---- Table surface ---- */
.audits-mw-past-table,
.research-table,
.arit-table {
  background: #FFFFFF !important;
  color: #000000 !important;
}

/* ---- Header band: navy → black gradient ---- */
.audits-mw-past-table thead,
.research-table thead,
.arit-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
  backdrop-filter: none !important;
}

/* ---- Header cells: bold white text on a transparent cell so the band
        shows through; light divider underline ---- */
.audits-mw-past-table thead th,
.research-table thead th,
.research-table th,
.arit-table thead th,
.arit-table thead th.arit-table-header,
.arit-table thead th.arit-th-cell {
  background: transparent !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Keep header text/controls white (sort buttons, labels, arrows, icons). */
.audits-mw-past-table thead th .audits-mw-past-sort-btn,
.audits-mw-past-table thead th .audits-mw-past-sort-btn-label,
.audits-mw-past-table thead th .audits-mw-past-sort-ind,
.research-table thead th button,
.arit-table thead th .arit-sort-icon,
.arit-table thead th button {
  color: #FFFFFF !important;
}

/* Sortable header hover stays within the navy band. */
.audits-mw-past-table thead th .audits-mw-past-sort-btn:hover,
.arit-table thead th.arit-sortable:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

/* ---- Body rows: white / soft-lavender zebra + hover ---- */
.audits-mw-past-table tbody tr,
.research-table tbody tr,
.arit-table tbody tr,
.arit-table tbody tr.arit-table-row {
  background: #FFFFFF !important;
  border-bottom: none !important;
}
.audits-mw-past-table tbody tr:nth-child(even),
.research-table tbody tr:nth-child(even),
.arit-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}
.audits-mw-past-table tbody tr:hover,
.research-table tbody tr:hover,
.arit-table tbody tr:hover {
  background: #eef2f8 !important;
}

/* ---- Body cells: black text, light borders ---- */
.audits-mw-past-table tbody td,
.research-table tbody td,
.arit-table tbody td {
  color: #000000 !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}
.audits-mw-past-table tbody td:last-child,
.research-table tbody td:last-child,
.arit-table tbody td:last-child {
  border-right: none !important;
}

/* In-cell ticket-number accent that was light-blue for the dark theme
   would be unreadable on the white rows — darken it to the Alliance navy. */
.arit-table .arit-ticket-number {
  color: #13315a !important;
}

/* ---- Note popouts (📋) that open from the shrink tables — match the light
        table theme around them. The base style is a dark, red/maroon bubble
        which clashes with the now-white Outstanding Shrink / Adjustment
        Research tables. Restyle to the same look as those tables: a white card
        with the navy→black gradient header band, white title, and dark body
        text on white. Covers both:
          • .shrink-comment-popout — Outstanding Shrink panel (#tab-inventory)
          • .research-note-popout  — Adjustment Research view (#tab-research)
        theme-alliance.css is the last stylesheet, so these win the cascade. */
.shrink-comment-popout,
.research-note-popout {
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(27, 66, 120, 0.18), 0 2px 8px rgba(27, 66, 120, 0.10);
  backdrop-filter: none;
}

.shrink-comment-popout-head,
.research-note-popout-head {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-weight: 700;
}

.shrink-comment-popout-body,
.research-note-popout-body {
  background: #FFFFFF;
  color: #1f2937;
}

/* Speech-bubble tail (Outstanding Shrink popout only): recolor the fill to the
   white card and the outline to the light card border. */
.shrink-comment-popout::after {
  border-left-color: #FFFFFF;
}
.shrink-comment-popout::before {
  border-left-color: #d8e0ea;
}

/* ---- Past Walkthroughs: in-cell "Completed by", status label, and the
        count badges keep their dark-theme colors on the white rows. Recolor
        to the Alliance palette for legible contrast. ---- */
.audits-mw-past-mono {
  color: #13315a !important;
}

.audits-mw-past-status {
  color: #15803d !important;
}

.audits-mw-past-mini-badge {
  border-color: #d8e0ea !important;
  background: #eef3fa !important;
  color: #5b6372 !important;
}

.audits-mw-past-mini-badge strong {
  color: #13315a !important;
}

/* ---- Past Walkthroughs search bar: dark pill -> Alliance light field. ---- */
.audits-mw-past-search-input {
  border-color: #d8e0ea !important;
  background: #ffffff !important;
  color: var(--alliance-primary) !important;
}

.audits-mw-past-search-input::placeholder {
  color: #8a93a3 !important;
}

.audits-mw-past-search-input:focus {
  border-color: var(--alliance-accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 159, 219, 0.15) !important;
}

.audits-mw-past-search-svg,
.audits-mw-past-search-wrap:focus-within .audits-mw-past-search-svg {
  color: #5b6372 !important;
}

/* =====================================================================
   ONE CONTINUOUS header gradient for the Archway + Ticket Tracker tables.

   Putting the navy→black gradient on <thead>/<th> rendered it PER COLUMN
   in some browsers — collapsed-table row-group/cell backgrounds get
   painted per cell, so each column showed its own navy→black slice.

   Fix: paint the gradient on the <table> ELEMENT itself — a single
   full-width layer that physically cannot segment — and let the opaque
   body rows cover it, so the gradient only shows through the (transparent)
   header cells as one smooth bar across every column. White vertical
   divider bars sit on top, matching the In Transit column bar. This is
   asserted from theme-alliance.css (static, always shipped, linked after
   the React bundles) so it works regardless of any bundle rebuild.
   ===================================================================== */
.aw-table,
.arit-table-wrapper .arit-table {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%) !important;
}

/* Header cells transparent (and relative, to anchor the dividers) so the
   single table gradient shows straight through as one continuous bar. */
.aw-table thead,
.aw-table thead th,
.arit-table-wrapper .arit-table thead,
.arit-table-wrapper .arit-table thead th {
  background: transparent !important;
  color: #ffffff !important;
}
.aw-table thead th,
.arit-table-wrapper .arit-table thead th {
  position: relative !important;
}

/* Opaque body rows cover the table gradient everywhere below the header. */
.aw-table tbody tr,
.arit-table-wrapper .arit-table tbody tr {
  background: #ffffff !important;
}
.aw-table tbody tr:nth-child(even),
.arit-table-wrapper .arit-table tbody tr:nth-child(even) {
  background: #f0f4fa !important;
}
.aw-table tbody tr:hover,
.aw-table tbody tr.aw-row:hover,
.aw-table tbody tr.aw-row:hover td,
.arit-table-wrapper .arit-table tbody tr:hover {
  background: #eef2f8 !important;
}

/* White vertical column divider bars between header cells. */
.aw-table thead th:not(:last-child)::after,
.arit-table-wrapper .arit-table thead th:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

/* =====================================================================
   TABLE CONSISTENCY — the Outstanding Shrink recipe (navy→black header
   band, white bold header text, white/#f0f4fa zebra rows, #e2e8f0 cell
   dividers) applied to the last two stragglers: the /data status table
   and the Workbook grid. Every other table already follows the pattern.
   ===================================================================== */

/* ---- /data status table (not sticky → gradient on thead, th transparent) */
#tab-data-tools .datatools-status-table thead {
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
}

#tab-data-tools .datatools-status-table thead th {
  background: transparent;
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

#tab-data-tools .datatools-sortable:hover,
#tab-data-tools .datatools-sortable.is-sorted {
  color: #FFFFFF;
}

#tab-data-tools .datatools-status-table thead .datatools-sort-arrow {
  color: #FFFFFF;
}

#tab-data-tools .datatools-status-table tbody tr {
  background: #FFFFFF;
}

#tab-data-tools .datatools-status-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}

#tab-data-tools .datatools-status-table tbody tr:hover {
  background: #eef2f8;
}

#tab-data-tools .datatools-status-table tbody td {
  color: #000000;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#tab-data-tools .datatools-status-table tbody td:last-child {
  border-right: none;
}

/* ---- Workbook grid: header cells are position: sticky, so each th needs
        an opaque background — solid header-band navy instead of a
        transparent cell over a thead gradient (which breaks on scroll). */
#tab-workbook .workbook-table thead th {
  background: #13315a;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

#tab-workbook .workbook-table thead th.workbook-rownum {
  background: #13315a;
  color: #FFFFFF;
}

#tab-workbook .workbook-table thead .workbook-sortable:hover {
  background: rgba(255, 255, 255, 0.12);
}

#tab-workbook .workbook-table thead .workbook-sort-arrow {
  color: #FFFFFF;
}

/* =====================================================================
   ARIT TICKET DETAIL MODAL — light the SHELL + body. The hero, stat
   cards, tabs and timeline were already themed, but the modal shell
   itself stayed on the dark base `.modal` background, so the body
   (Ticket Details / Raw Row Data) rendered as light text on a dark gap.
   This popout opens from the Tracking table, so it now matches every
   other table's full-screen / popout view.
   ===================================================================== */
.modal-overlay.active:has(.modal.modal--arit) {
  background: rgba(27, 66, 120, 0.45) !important;
}

.modal.modal--arit {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.32) 0 12px 32px !important;
  color: #000000;
}

/* Collapsible "Ticket Details" / "Raw Row Data" — dark text on the white body. */
.modal.modal--arit .arit-modal-extra {
  color: #5b6372;
}

.modal.modal--arit .arit-modal-extra summary {
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  color: var(--alliance-primary);
}

.modal.modal--arit .arit-modal-extra summary::before {
  color: var(--alliance-accent);
}

.modal.modal--arit .arit-modal-extra summary:hover {
  color: var(--alliance-primary);
  border-color: var(--alliance-accent);
}

.modal.modal--arit .modal-detail-label {
  color: var(--alliance-text-muted);
}

.modal.modal--arit .modal-detail-value {
  color: #000000;
}

/* =====================================================================
   ARCHWAY SHIPMENTS — fullscreen expand. The overlay is portaled to
   <body> (outside #archway-root), so these are GLOBAL selectors that
   reproduce the canonical fullscreen-table look (matches the Outstanding
   Shrink fullscreen): navy header band, white/#f0f4fa zebra, #e2e8f0
   dividers, roomy 0.6/0.9 + 0.55/0.9 padding, sticky header.
   ===================================================================== */
.aw-fs-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.aw-fs-toggle:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.08);
}

.aw-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(0.5rem, env(safe-area-inset-top, 0px))
    max(0.5rem, env(safe-area-inset-right, 0px))
    max(0.5rem, env(safe-area-inset-bottom, 0px))
    max(0.5rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: rgba(13, 27, 49, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.aw-fs-panel {
  /* Fill the window (minus the overlay's safe-area padding): fullscreen
     tables should never be cut short by a fixed-width container. */
  width: 100%;
  height: 100%;
  max-height: min(100vh - 1rem, 100dvh - 1rem);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #d8e0ea;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(13, 27, 49, 0.35);
  overflow: hidden;
  box-sizing: border-box;
}

.aw-fs-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%);
  color: #ffffff;
  flex-shrink: 0;
}
.aw-fs-title {
  margin: 0;
  font: 800 1.05rem 'Montserrat', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}
.aw-fs-count {
  font: 700 0.72rem 'Montserrat', sans-serif;
  color: rgba(255, 255, 255, 0.72);
}
.aw-fs-spacer { flex: 1 1 auto; }
.aw-fs-close {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
}
.aw-fs-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

.aw-fs-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

/* Continuous navy band on the table element + transparent sticky header cells. */
table.aw-fs-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  color: #243042;
}
table.aw-fs-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
table.aw-fs-table thead th {
  background: transparent;
  color: #ffffff;
  font: 700 0.72rem 'Montserrat', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
table.aw-fs-table thead th .aw-th-sort {
  color: #ffffff;
  background: none;
  border: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}
table.aw-fs-table tbody tr { background: #ffffff; cursor: pointer; }
table.aw-fs-table tbody tr:nth-child(even) { background: #f0f4fa; }
table.aw-fs-table tbody tr:hover { background: #eef2f8; }
table.aw-fs-table tbody td {
  color: #000000;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
table.aw-fs-table tbody td:last-child { border-right: none; }
table.aw-fs-table .aw-table-empty {
  text-align: center;
  color: #5b6372;
  padding: 2rem;
}

@media (max-width: 767px) {
  .aw-fs-overlay { padding: 0; }
  .aw-fs-panel { width: 100%; max-height: none; height: 100%; border-radius: 0; }
}

/* =====================================================================
   ITEM LOOKUP results table — match the canonical fullscreen band so the
   expanded lookup view reads like Outstanding Shrink's fullscreen.
   ===================================================================== */
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  backdrop-filter: none;
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table th {
  background: transparent;
  color: #FFFFFF;
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table th .inventory-column-title,
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table th .inventory-column-control,
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table th .inventory-filter-btn,
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table th .inventory-sort-btn,
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table th button {
  color: #FFFFFF;
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table tbody tr {
  background: #FFFFFF;
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table tbody tr:nth-child(even) {
  background: #f0f4fa;
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table tbody tr:hover {
  background: #eef2f8;
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table tbody td {
  color: #000000;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
.inventory-item-lookup-tile .inventory-lookup-bubble .inventory-table tbody td:last-child {
  border-right: none;
}

/* =====================================================================
   TREASURY DISCREPANCIES — fullscreen expand. Reuses the global .aw-fs-*
   overlay chrome; the table is .arit-table.tt-fs-table with the canonical
   fullscreen band (portaled to <body>, so global selectors).
   ===================================================================== */
.tt-fs-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  margin-right: 0.5rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  background: #ffffff;
  color: var(--alliance-primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tt-fs-toggle:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.08);
}

table.tt-fs-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  background: linear-gradient(90deg, #13315a 0%, #000000 100%);
  color: #243042;
}
table.tt-fs-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
table.tt-fs-table thead th {
  background: transparent;
  color: #ffffff;
  font: 700 0.72rem 'Montserrat', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
table.tt-fs-table tbody tr { background: #ffffff; cursor: pointer; }
table.tt-fs-table tbody tr:nth-child(even) { background: #f0f4fa; }
table.tt-fs-table tbody tr:hover { background: #eef2f8; }
table.tt-fs-table tbody td {
  color: #000000;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
table.tt-fs-table tbody td:last-child { border-right: none; }
table.tt-fs-table .tt-fs-empty {
  text-align: center;
  color: #5b6372;
  padding: 2rem;
  white-space: normal;
}

/* =====================================================================
   SHARED EXCEL-STYLE COLUMN HEADERS — funnel button (in every sortable
   th, white on the navy band) + the body-level filter flyout (search +
   select/clear + checkbox list), reference look = Item Lookup's menus.
   ===================================================================== */
.dops-colfilter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.28rem;
  padding: 0;
  vertical-align: middle;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dops-colfilter-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
}
.dops-colfilter-btn.is-active {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
}

.dops-colfilter-flyout {
  position: fixed;
  z-index: 9600;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #d8e0ea;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(13, 27, 49, 0.28);
}

.dops-colfilter-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  background: #f4f6fa;
  color: #000000;
  font: 600 0.76rem var(--font-family);
}
.dops-colfilter-search:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 1px rgba(0, 159, 219, 0.2);
}

.dops-colfilter-actions {
  display: flex;
  gap: 0.35rem;
}
.dops-colfilter-action {
  flex: 1 1 0;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  background: #FFFFFF;
  color: var(--alliance-primary);
  font: 700 0.68rem var(--font-family);
  cursor: pointer;
}
.dops-colfilter-action:hover {
  border-color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.07);
}

.dops-colfilter-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  -webkit-overflow-scrolling: touch;
}
.dops-colfilter-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem;
  border-radius: 5px;
  font: 600 0.74rem var(--font-family);
  color: #000000;
  cursor: pointer;
  user-select: none;
}
.dops-colfilter-item:hover { background: #f0f4fa; }
.dops-colfilter-item input {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--alliance-accent);
  width: 0.95rem;
  height: 0.95rem;
}
.dops-colfilter-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dops-colfilter-empty {
  padding: 0.6rem 0.4rem;
  color: #5b6372;
  font: 600 0.74rem var(--font-family);
  text-align: center;
}

/* Larger touch targets on phones; flyout hugs the viewport width. */
@media (max-width: 767px) {
  .dops-colfilter-btn { width: 1.5rem; height: 1.5rem; }
  .dops-colfilter-item { padding: 0.5rem 0.4rem; }
  .dops-colfilter-item input { width: 1.1rem; height: 1.1rem; }
}

/* =====================================================================
   SHARED FILTER FUNNEL ICON — the single canonical icon (same path as the
   Outstanding Shrink .dops-colfilter-btn) reused across every table so the
   filter affordance is identical app-wide. Apply via the --ops-funnel mask.
   ===================================================================== */
:root {
  --ops-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z' fill='black'/%3E%3C/svg%3E");
}

/* Item Lookup: put the funnel on the existing filter trigger (label button
   already opens the search + multi-select menu). */
#tab-inventory .inventory-lookup-bubble .inventory-filter-btn::before {
  content: "";
  display: inline-block;
  width: 0.66rem;
  height: 0.66rem;
  margin-right: 0.3rem;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: var(--ops-funnel) center / contain no-repeat;
  mask: var(--ops-funnel) center / contain no-repeat;
  opacity: 0.85;
}
#tab-inventory .inventory-lookup-bubble .inventory-filter-btn:hover::before,
#tab-inventory .inventory-lookup-bubble .inventory-filter-btn.active::before {
  opacity: 1;
}

/* Ticket Tracker (ARIT): swap the ▾ glyph for the canonical funnel icon
   (keeps the existing per-column filter dropdown behavior). */
#tab-arit .arit-table thead .arit-th-filter-toggle-icon {
  font-size: 0 !important;
  width: 0.72rem;
  height: 0.72rem;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--ops-funnel) center / contain no-repeat;
  mask: var(--ops-funnel) center / contain no-repeat;
}

/* Range-mode flyout (Adjustment Research QTY / ADJ TOTAL numeric filter). */
.dops-cf-range-title {
  font: 700 0.72rem var(--font-family);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--alliance-primary);
}
.dops-cf-range-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: 600 0.72rem var(--font-family);
  color: #000000;
}
.dops-cf-range-cap { width: 2.1rem; flex: 0 0 auto; color: #5b6372; }
.dops-cf-range-prefix { color: #5b6372; }
.dops-cf-range-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.36rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  background: #f4f6fa;
  color: #000000;
  font: 600 0.78rem var(--font-family);
}
.dops-cf-range-input:focus {
  outline: none;
  border-color: var(--alliance-accent);
  box-shadow: 0 0 0 1px rgba(0, 159, 219, 0.2);
}

/* Funnel button injected into In Transit / Delivered headers (navy band). */
.inventory-dops-colfilter-btn {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.28rem;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.inventory-dops-colfilter-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
}
.inventory-dops-colfilter-btn.is-active {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
}
.inventory-dops-colfilter-btn .ops-funnel-ico {
  width: 0.72rem;
  height: 0.72rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--ops-funnel) center / contain no-repeat;
  mask: var(--ops-funnel) center / contain no-repeat;
}

/* Adjustment Research sort bar: keep the sort button + funnel together. */
.research-sort-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.research-sort-funnel {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 5px;
  border: 1px solid #d8e0ea;
  background: #FFFFFF;
  color: var(--alliance-primary);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.research-sort-funnel:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.08);
}
.research-sort-funnel.is-active {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
}
.research-sort-funnel .ops-funnel-ico {
  width: 0.72rem;
  height: 0.72rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--ops-funnel) center / contain no-repeat;
  mask: var(--ops-funnel) center / contain no-repeat;
}

/* React-bundle funnel button (Archway / Treasury). currentColor-based so it
   reads correctly on both navy-band and light headers. Dropdown chrome reuses
   the global .dops-colfilter-* classes. */
.ops-cf-btn {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.3rem;
  padding: 0;
  vertical-align: middle;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.92;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.ops-cf-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-color: color-mix(in srgb, currentColor 70%, transparent);
}
.ops-cf-btn.is-active {
  background: var(--alliance-accent);
  border-color: var(--alliance-accent);
  color: #FFFFFF;
  opacity: 1;
}
.ops-cf-ico {
  width: 0.72rem;
  height: 0.72rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--ops-funnel) center / contain no-repeat;
  mask: var(--ops-funnel) center / contain no-repeat;
}

/* Treasury static-header funnel alignment (Status / Issue / DTS). */
#treasury-root .arit-th-static-head {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

/* =====================================================================
   CARTON CONTENTS popout — Alliance-themed header (eyebrow + title +
   info chips + export) and a framed, content-hugging table card. Replaces
   the old pale "source badge" + plain meta text.
   ===================================================================== */
.carton-detail-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Left padding clears the top-left × (which lives in the modal gutter and
     overlaps the body edge slightly); right padding clears nothing now. */
  padding: 0 0 0.95rem 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.carton-detail-eyebrow {
  font: 700 0.66rem 'Montserrat', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alliance-accent);
}
.carton-detail-title {
  margin: 0;
  font: 800 1.7rem 'Montserrat', sans-serif;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--alliance-primary);
}
.carton-detail-cnum {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 800;
}
.carton-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.carton-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: #f4f6fa;
  border: 1px solid #d8e0ea;
  font: 600 0.78rem 'Montserrat', sans-serif;
  white-space: nowrap;
}
.carton-detail-chip-label {
  font: 700 0.62rem 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--alliance-text-muted);
}
.carton-detail-chip-value {
  color: var(--alliance-primary);
  font-weight: 700;
}
.carton-detail-chip--count {
  background: rgba(0, 159, 219, 0.08);
  border-color: rgba(0, 159, 219, 0.25);
}
.carton-detail-chip--count .carton-detail-chip-value {
  color: var(--alliance-accent);
}
.carton-detail-head-actions {
  position: absolute;
  top: 0;
  right: 0;
}

/* Close button — match the canonical popout × (dops expand / In Transit /
   Delivered / Item Lookup): 1.85rem rounded square pinned top-LEFT, above the
   header (z-index, so the positioned .carton-detail-head can't block clicks),
   in the Alliance white-card treatment used on light surfaces. */
.modal.modal--carton .modal-close {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.4rem;
  top: 1.2rem;
  left: calc(max(0px, env(safe-area-inset-left, 0px)) + var(--inventory-fullscreen-x-inset));
  right: auto;
  z-index: 6;
  border: 1px solid #d5d5d5;
  background: #FFFFFF;
  color: var(--alliance-primary);
  font: 700 1.1rem/1 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.modal--carton .modal-close:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.06);
}
.modal.modal--carton .modal-close:focus-visible {
  outline: 2px solid var(--alliance-accent);
  outline-offset: 2px;
}
.carton-detail-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.8rem;
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  background: #FFFFFF;
  color: var(--alliance-primary);
  font: 700 0.74rem 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.carton-detail-export-btn:hover {
  border-color: var(--alliance-accent);
  color: var(--alliance-accent);
  background: rgba(0, 159, 219, 0.07);
}

/* Frame the table as a card that hugs its content (a 1-line carton no longer
   leaves a giant stretched empty card), scrolling when it is tall. */
.modal.modal--carton .carton-detail-table-wrap--horizontal {
  flex: 0 1 auto;
  max-height: 100%;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(13, 27, 49, 0.05);
}
.modal .carton-detail-table--horizontal {
  width: 100%;
  min-width: max-content;
}
.modal .carton-detail-table tbody td {
  font-family: 'Montserrat', sans-serif;
}

/* Tighten the head on phones. */
@media (max-width: 767px) {
  .carton-detail-title { font-size: 1.3rem; }
  .carton-detail-head { padding-left: 1.6rem; }
  .carton-detail-head-actions { position: static; margin-bottom: 0.2rem; }
}

/* =====================================================================
   Daily Ops panels — LOADING-STATE alignment. The old dark theme forces
   these panels to a navy body (#tab-inventory/#tab-daily_ops overrides in
   style.css) which only gets hidden once the white table renders; the bare
   loading text div let the dark show through with stale gold text. Restore
   the white panel surface + Alliance muted loading text so the loading state
   matches the loaded look.
   ===================================================================== */
#tab-inventory .daily-ops-shrink-panel,
#tab-inventory .daily-ops-cartons-panel,
#tab-inventory .daily-ops-nonsellable-panel,
#tab-inventory .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly),
#tab-inventory .daily-ops-sts-panel,
#tab-inventory .daily-ops-eol-panel,
#tab-daily_ops .daily-ops-shrink-panel,
#tab-daily_ops .daily-ops-cartons-panel,
#tab-daily_ops .daily-ops-nonsellable-panel,
#tab-daily_ops .daily-ops-scans-panel:not(.daily-ops-scans-panel--monthly),
#tab-daily_ops .daily-ops-sts-panel,
#tab-daily_ops .daily-ops-eol-panel {
  background: #FFFFFF;
  border-color: #d8e0ea;
}

/* Closing Checklist photo / PDF links — Alliance primary blue on the white rows. */
.daily-ops-scans-table .cc-doc-link {
  color: var(--alliance-accent);
}

#tab-inventory .daily-ops-shrink-panel .daily-ops-shrink-loading,
#tab-inventory .daily-ops-cartons-panel .daily-ops-cartons-loading,
#tab-inventory .daily-ops-nonsellable-panel .daily-ops-nonsellable-loading,
#tab-inventory .daily-ops-sts-panel .daily-ops-sts-loading,
#tab-inventory .daily-ops-obs-acc-panel .daily-ops-obs-acc-loading,
#tab-inventory .daily-ops-eol-panel .daily-ops-eol-loading,
#tab-daily_ops .daily-ops-shrink-panel .daily-ops-shrink-loading,
#tab-daily_ops .daily-ops-cartons-panel .daily-ops-cartons-loading,
#tab-daily_ops .daily-ops-nonsellable-panel .daily-ops-nonsellable-loading,
#tab-daily_ops .daily-ops-sts-panel .daily-ops-sts-loading,
#tab-daily_ops .daily-ops-obs-acc-panel .daily-ops-obs-acc-loading,
#tab-daily_ops .daily-ops-eol-panel .daily-ops-eol-loading {
  background: #FFFFFF;
  color: var(--alliance-text-muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 1.1rem 1.1rem 1.4rem;
}

/* =====================================================================
   DESKTOP SIDEBAR COLLAPSE — toggle button in the topbar (right of the
   OPS-COMMAND title) + the collapsed icon-only rail. Everything is keyed
   off --rail-width, so the topbar rule, content offset and fixed panels
   all shift automatically. Scoped to >=768px: no effect on the mobile
   bottom bar, and the button is hidden there.
   ===================================================================== */
.rail-collapse-toggle { display: none; }

@media (min-width: 768px) {
  .rail-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    margin-left: 0.15rem;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    cursor: pointer;
    align-self: center;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .rail-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.65);
  }
  .rail-collapse-toggle:focus-visible {
    outline: 2px solid var(--alliance-accent);
    outline-offset: 2px;
  }
  .rail-collapse-toggle svg {
    transition: transform 0.18s ease;
  }
  /* Collapsed → chevron points right ("expand"). */
  html.rail-collapsed .rail-collapse-toggle svg {
    transform: rotate(180deg);
  }

  /* Narrow icon-only rail. html.rail-collapsed (0,1,1) outweighs the
     :root (0,1,0) declarations of --rail-width at any order. Geometry
     matches the MyHub reference: 56px strip, centered square icon
     buttons with airy vertical rhythm. */
  html.rail-collapsed {
    /* The desktop layout keys the rail width AND the body content offset to
       --sidebar-width (280px), not --rail-width — override both so the strip
       actually narrows and the content reflows into the freed space. Width =
       the Alliance Mobile logo's full visual footprint (topbar 0.55rem +
       .rail-brand 0.4rem padding + --ops-brand-size) plus a little extra
       breathing room around the icon buttons. */
    --rail-width: calc(var(--ops-brand-size) + 1.55rem);
    --sidebar-width: calc(var(--ops-brand-size) + 1.55rem);
  }
  html.rail-collapsed .command-rail .rail-label {
    display: none;
  }
  html.rail-collapsed .command-rail .rail-menu {
    /* Keep the expanded rail's top offset (clears the fixed full-width
       topbar) or the first item — Back to MyHub — hides underneath it. */
    padding: calc(var(--topbar-height) - 0.6rem) 0.35rem 0;
    gap: 0.3rem;
  }
  html.rail-collapsed .command-rail .rail-link,
  html.rail-collapsed .command-rail .rail-group-btn {
    justify-content: center;
    gap: 0;
    min-height: 42px;
    padding: 0.55rem 0;
    border-radius: 8px;
  }
  /* Roomier rhythm between items; keep the subtle separators readable in
     the thin strip. */
  html.rail-collapsed .command-rail .rail-menu > li + li {
    padding-top: 0.3rem;
    margin-top: 0.3rem;
  }
  html.rail-collapsed .command-rail .rail-chevron {
    display: none;
  }
  /* Submenu items: centered icons, no indent dot, same rhythm. */
  html.rail-collapsed .command-rail .rail-submenu .rail-link {
    padding-left: 0;
    min-height: 38px;
  }
  html.rail-collapsed .command-rail .rail-submenu .rail-link::after {
    display: none;
  }
  /* Notification badge hugs the icon corner in the thin strip. */
  html.rail-collapsed .command-rail .rail-notif-badge {
    top: 2px;
    right: 4px;
    transform: scale(0.9);
  }

  /* Collapsed-rail folder flyout: the open submenu floats as a chat bubble to
     the right of its folder button (left/top + tail-y set by JS — the rail
     clips overflow, so the bubble is position:fixed). The expanded rail keeps
     the normal inline submenu. */
  html.rail-collapsed .command-rail .rail-submenu:not([hidden]) {
    position: fixed;
    z-index: 240;
    min-width: 200px;
    margin: 0;
    padding: 0.5rem;
    /* Soft navy gradient, left→right so the left edge stays a uniform
       #1B4278 — the solid tail sits on that edge and must match it. */
    background: linear-gradient(90deg, #1B4278 0%, #122c52 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.45);
  }
  /* Bubble tail pointing back at the folder icon. */
  html.rail-collapsed .command-rail .rail-submenu:not([hidden])::before {
    content: "";
    position: absolute;
    left: -7px;
    top: calc(var(--rail-flyout-tail-y, 21px) - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #1B4278;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
  }
  /* Inside the bubble the labels come back and rows read like the expanded
     rail (the thin strip hides labels and centers icons). */
  html.rail-collapsed .command-rail .rail-submenu:not([hidden]) .rail-label {
    display: inline;
  }
  html.rail-collapsed .command-rail .rail-submenu:not([hidden]) .rail-link {
    justify-content: flex-start;
    gap: 0.55rem;
    min-height: 36px;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
  }
}

/* Inline header icons added to headings that previously had none
   (Adjustment Research, Merchandising Walkthrough, Treasury Discrepancies,
   Archway Shipments). Lay the icon + text on one centered row. */
#research-adjustment-heading,
.audit-mwalk-title,
.treasury-filterbar__title,
.aw-panel-card__title,
.aw-fs-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.aw-fs-head .aw-fs-title { display: flex; }
.treasury-filterbar__title .inventory-table-kpi-icon svg,
.aw-panel-card__title .inventory-table-kpi-icon svg,
.aw-fs-title .inventory-table-kpi-icon svg { width: 1.2rem; height: 1.2rem; }

/* =====================================================================
   SHARED TABLE TYPOGRAPHY — extracted from the MyHub Manager Homepage
   (source-of-truth HTML). Its global rule:
     body { color:#000; font-size:1rem; font-weight:400;
            font-family:var(--font-montserrat),sans-serif; line-height:1.5 }
   Panel titles there are MUI Typography-h6 in that theme (Montserrat):
     1.25rem / 500 / line-height 1.6 / letter-spacing 0.0075em, Title Case.
   ONE block below applies this to every table so they stay consistent.
   ===================================================================== */

/* --- Table / panel TITLES (the "Bonus Estimates" style) --- */
.daily-ops-shrink-head h3,
.daily-ops-cartons-head h3,
.daily-ops-scans-head h3,
.daily-ops-sts-head h3,
.daily-ops-obs-acc-head h3,
.daily-ops-eol-head h3,
.daily-ops-da-head h3,
.daily-ops-ipog-head h3,
.daily-ops-nonsellable-head h3,
.daily-ops-drawers-head h3,
.daily-ops-prodnote-head h3,
.inventory-popout-title-cluster h3,
.inventory-snapshot-title-row h2,
.inventory-lookup-bubble__title,
.dops-expand-modal-title,
#research-adjustment-heading,
.audit-mwalk-title,
#treasury-root .treasury-filterbar__title,
#archway-root .aw-panel-card__title,
.aw-fs-title {
  /* Corbert Black for titles (Montserrat fallback until the licensed cut
     is dropped into /assets/fonts/). */
  font-family: 'Corbert', 'Montserrat', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.0075em !important;
  text-transform: none !important;
}

/* --- Table CELL typography (source body rule: Montserrat 400 / 1.5) ---
   Family is forced (some legacy rules still set DM Sans); sizes and the
   band/zebra colors come from the existing theme. */
.daily-ops-shrink-table th, .daily-ops-shrink-table td,
.daily-ops-cartons-table th, .daily-ops-cartons-table td,
.daily-ops-scans-table th, .daily-ops-scans-table td,
.daily-ops-sts-table th, .daily-ops-sts-table td,
.daily-ops-obs-acc-table th, .daily-ops-obs-acc-table td,
.daily-ops-eol-table th, .daily-ops-eol-table td,
.daily-ops-da-table th, .daily-ops-da-table td,
.daily-ops-ipog-table th, .daily-ops-ipog-table td,
.daily-ops-nonsellable-table th, .daily-ops-nonsellable-table td,
.daily-ops-drawers-table th, .daily-ops-drawers-table td,
.daily-ops-prodnote-table th, .daily-ops-prodnote-table td,
.dops-expand-table th, .dops-expand-table td,
#tab-inventory .inventory-table th, #tab-inventory .inventory-table td,
#treasury-root .arit-table th, #treasury-root .arit-table td,
#archway-root .aw-table th, #archway-root .aw-table td,
table.tt-fs-table th, table.tt-fs-table td,
.aw-fs-table th, .aw-fs-table td,
.modal .carton-detail-table th, .modal .carton-detail-table td,
.audit-mwalk table th, .audit-mwalk table td,
#tab-research .research-list-shell {
  font-family: 'Corbert', 'Montserrat', sans-serif !important;
}

.daily-ops-shrink-table tbody td,
.daily-ops-cartons-table tbody td,
.daily-ops-scans-table tbody td,
.daily-ops-sts-table tbody td,
.daily-ops-obs-acc-table tbody td,
.daily-ops-eol-table tbody td,
.daily-ops-da-table tbody td,
.daily-ops-ipog-table tbody td,
.daily-ops-nonsellable-table tbody td,
.daily-ops-drawers-table tbody td,
.daily-ops-prodnote-table tbody td,
.dops-expand-table tbody td,
#tab-inventory .inventory-table tbody td,
#treasury-root .arit-table tbody td,
#archway-root .aw-table tbody td,
table.tt-fs-table tbody td,
.aw-fs-table tbody td,
.modal .carton-detail-table tbody td,
.audit-mwalk table tbody td {
  /* The reference rows read semibold (MyHub row labels/values), not 400. */
  font-weight: 600 !important;
  line-height: 1.5;
}

/* =====================================================================
   FILLED GLYPH RENDERING FIX — the header icon set is now solid/filled
   (paths use fill=currentColor, no strokes). Legacy theme rules written
   for the old line icons force `stroke: <color>; fill: none`, which
   erases the fill and draws the silhouettes as outlines. Final override:
   color the FILL from currentColor and disable stroking; every existing
   `color:` declaration (cyan heads, tone classes) keeps working since it
   feeds currentColor.
   ===================================================================== */
.inventory-table-kpi-icon svg,
.inventory-table-kpi-icon svg path,
.inventory-table-kpi-icon svg rect,
.inventory-table-kpi-icon svg circle {
  fill: currentColor !important;
  stroke: none !important;
}

/* =====================================================================
   CORBERT — requested table typeface. Only the Regular (400) cut is
   freely hosted; Corbert Black/Bold are commercial cuts (The Northern
   Block). The 700/900 faces use only `local()` sources for now — when
   the licensed Corbert-Bold.woff2 / Corbert-Black.woff2 land in
   /assets/fonts/, re-add the url() sources below local() to pick them
   up. Until then browsers synthesize the heavier weights from Regular
   (Montserrat remains the family fallback) and no 404s are logged.
   ===================================================================== */
@font-face {
  font-family: 'Corbert';
  font-style: normal;
  font-weight: 400;
  src: local('Corbert'), url('https://fonts.cdnfonts.com/s/22945/Corbert-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Corbert';
  font-style: normal;
  font-weight: 700;
  src: local('Corbert Bold'), local('Corbert-Bold');
  font-display: swap;
}
@font-face {
  font-family: 'Corbert';
  font-style: normal;
  font-weight: 900;
  src: local('Corbert Black'), local('Corbert-Black');
  font-display: swap;
}

/* =====================================================================
   ITEM LOOKUP tile: don't render the empty results section inline.
   #rawLookupBubbleExpanded ships hidden until a search runs, but the
   base sheet's `display: flex` (style.css) overrides the UA's
   [hidden]{display:none}, so the empty header band + "No search yet." +
   "Showing 0 rows" always showed in the tile. Honor `hidden`.
   ===================================================================== */
.inventory-lookup-bubble__expanded[hidden] {
  display: none !important;
}

/* Item Lookup expanded view: with pagination removed, the results wrap
   must flex-fill the overlay and scroll internally for long lists. */
.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-raw-search__table {
  flex: 1 1 auto;
  min-height: 0;
}

/* =====================================================================
   SHARED TABLE SIDE BUFFER — single source of truth for the horizontal
   gap between every table and its container edges.

   Reference (extracted, not approximated): the Nonsellable Inventory
   table — .daily-ops-nonsellable-panel and .daily-ops-nonsellable-table-wrap
   carry NO horizontal padding, so the table runs flush to the panel's
   1px border. Buffer = 0px.

   Already at the reference value (verified): the entire Daily Ops family
   (Outstanding Shrink, Cartons, STS, Obsolete, EOL, Hyla, Nonsellable,
   Drawers, Product Notes, Daily/Monthly Scans, Device Alive, iPOG),
   In Transit, Delivered, Treasury Discrepancies, Archway Shipments.
   The rules below bring the three deviators in line via the shared var,
   so future tweaks are one value change.
   ===================================================================== */
:root {
  --ops-table-side-buffer: 0px; /* from the Nonsellable reference */
}

/* Item Lookup expanded results (was 1rem bubble side padding). The navy
   head strip bled to the edges via -1rem margins; keep it edge-to-edge. */
.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble {
  padding-left: var(--ops-table-side-buffer) !important;
  padding-right: var(--ops-table-side-buffer) !important;
}
.inventory-item-lookup-tile .inventory-lookup-bubble-root--expanded .inventory-lookup-bubble__head-strip {
  margin-left: calc(-1 * var(--ops-table-side-buffer)) !important;
  margin-right: calc(-1 * var(--ops-table-side-buffer)) !important;
}

/* Adjustment Research (was 1rem body padding). */
section[aria-labelledby="research-adjustment-heading"] .research-panel__body {
  padding-left: var(--ops-table-side-buffer);
  padding-right: var(--ops-table-side-buffer);
}

/* Merchandising Walkthrough card (was 1.1rem side padding). The blue
   titlebar bleeds to the card edges with matching negative margins. */
#tab-audits .audit-mwalk,
#auditsMwWalkPopout .audit-mwalk {
  padding-left: var(--ops-table-side-buffer) !important;
  padding-right: var(--ops-table-side-buffer) !important;
}
#tab-audits .audit-mwalk-head,
#auditsMwWalkPopout .audit-mwalk-head {
  margin-left: calc(-1 * var(--ops-table-side-buffer));
  margin-right: calc(-1 * var(--ops-table-side-buffer));
}

/* =====================================================================
   INVENTORY: desktop two-column transport row. On desktop (>=1024px) the
   In Transit / Delivered carousel becomes a side-by-side grid — both
   panes visible (In Transit left, Delivered right), carousel arrows
   hidden, both titles shown in the shared head. Cartons Not Received
   renders first in #inventoryOpsTables directly below, spanning full
   width. Below 1024px nothing here applies, so phones/tablets keep the
   existing stacked carousel behavior.
   ===================================================================== */
@media (min-width: 1024px) {
  #tab-inventory .inventory-transport-carousel__panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
    /* stretch: both cards share the row height, so Delivered matches
       In Transit even with fewer rows (style.css flexes the pane so its
       table area absorbs the extra height). */
    align-items: stretch;
    padding: 0.75rem 0.75rem 0.9rem;
  }
  /* Both panes visible (the carousel JS still tracks is-active for the
     fullscreen/export defaults; that's harmless here). Fullscreen mode
     overrides this with position:fixed + display:flex !important. */
  #tab-inventory .inventory-transport-carousel__pane:not(.is-active) {
    display: block;
  }
  /* Read as two cards under the shared head. */
  #tab-inventory .inventory-transport-carousel__pane.inventory-snapshot-panel {
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    overflow: hidden;
  }
  /* No carousel paging on desktop. */
  #tab-inventory .inventory-transport-carousel__arrow {
    display: none !important;
  }
  /* Show BOTH titles — the slot overlays the full head width as a 2-column
     grid matching the panes below, so IN TRANSIT centers over the left
     column and DELIVERED centers over the right. */
  #tab-inventory .inventory-transport-carousel__title.inventory-snapshot-title-row:not(.is-active-title) {
    display: flex;
  }
  #tab-inventory .inventory-transport-carousel__shared-head {
    position: relative;
  }
  #tab-inventory .inventory-transport-carousel__title-slot {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: auto;
    max-width: none;
    min-width: 0;
    gap: 0;
    /* Labels only — keep the stamp + export/fullscreen buttons clickable. */
    pointer-events: none;
  }
  #tab-inventory .inventory-transport-carousel__title-slot .inventory-transport-carousel__title {
    justify-self: center;
  }
}

/* =====================================================================
   Alliance Mobile topbar logo — a touch smaller, sized to --ops-brand-size
   (square). The collapsed rail uses the same var, so the minimized nav
   strip matches the logo width. Override the base sheet's max-height:92%.
   ===================================================================== */
.topbar .rail-brand img {
  height: var(--ops-brand-size) !important;
  width: var(--ops-brand-size) !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain;
}

/* Merchandising Walkthrough titlebar icon — same cyan accent as every
   other navy-band table icon (it sat unstyled and inherited near-black). */
#tab-audits .audit-mwalk-head .inventory-table-kpi-icon,
#auditsMwWalkPopout .audit-mwalk-head .inventory-table-kpi-icon {
  color: #009fdb;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Unified table rounding — every data-table card uses the same
   16px radius as the Daily Operations tiles. The !important +
   high-specificity duplicates are needed to beat the scattered
   per-context `border-radius: 4px !important` rules above.
   ============================================================ */
.daily-ops-shrink-panel,
.daily-ops-nonsellable-panel,
.daily-ops-cartons-panel,
.daily-ops-scans-panel,
.daily-ops-sts-panel,
.daily-ops-obs-acc-panel,
.daily-ops-eol-panel,
.daily-ops-da-panel,
.daily-ops-ipog-panel,
.daily-ops-nonsell-log-panel,
.daily-ops-drawers-panel,
.daily-ops-prodnote-panel,
#tab-cash .cash-tables-mount .daily-ops-drawers-panel,
#tab-cash .cash-tables-mount .daily-ops-prodnote-panel,
.tab-pane .events-table-panel,
.tab-pane .tasks-table-panel,
#tab-arit .arit-table-wrap,
.arit-table-wrapper,
#treasury-root .arit-table-wrapper,
#archway-root .aw-table-wrap,
.inventory-item-lookup-tile,
#tab-inventory #inventory-transport-carousel.inventory-transport-carousel,
.modal.modal--dops-expand,
#tab-inventory .inventory-snapshot-panel--fullscreen,
#tab-inventory .inventory-transport-carousel__pane.inventory-snapshot-panel.inventory-snapshot-panel--fullscreen {
  border-radius: 16px !important;
}

/* =====================================================================
   TREASURY DISCREPANCIES FEED (Financials page)
   White-body panel + navy gradient head matching the other cash tiles;
   compact case feed mirroring the Treasury Tracker list.
   ===================================================================== */
#tab-cash .cash-tables-mount .treasury-feed-panel {
  background: #FFFFFF !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px !important;
  color: #16294A;
  margin-bottom: 16px;
}
#tab-cash .cash-tables-mount .treasury-feed-panel .daily-ops-scans-head {
  background: linear-gradient(90deg, #1B4278 0%, #0a0a0a 100%) !important;
  border-bottom: none !important;
  color: #FFFFFF;
}
#tab-cash .cash-tables-mount .treasury-feed-panel .daily-ops-scans-head h3 {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
}
#tab-cash .cash-tables-mount .treasury-feed-panel .daily-ops-scans-head > .inventory-table-kpi-icon {
  color: #46B7E8 !important;
}
#tab-cash .cash-tables-mount .treasury-feed-panel .daily-ops-scans-meta {
  color: rgba(255, 255, 255, 0.82) !important;
}

.treasury-feed-empty {
  padding: 22px 20px;
  font-size: 13px;
  color: #6b7a90;
  text-align: center;
}
.treasury-feed-list {
  display: flex;
  flex-direction: column;
  max-height: 560px;
  overflow-y: auto;
}
.treasury-feed-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid #eef2f7;
}
.treasury-feed-item:first-child { border-top: none; }
.treasury-feed-item:hover { background: #f4f9fd; }
.treasury-feed-item.is-past-due { box-shadow: inset 3px 0 0 #D63B57; }
.treasury-feed-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.treasury-feed-site { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.treasury-feed-store { font-weight: 700; font-size: 13.5px; color: #16294A; }
.treasury-feed-opus {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #1180B6; background: rgba(70, 183, 232, .1);
  border: 1px solid rgba(70, 183, 232, .3); border-radius: 5px; padding: 1px 6px;
}
.treasury-feed-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.treasury-feed-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
  color: #4A6386; background: #eef2f7; border: 1px solid #dde4ee;
}
.treasury-feed-badge.tf-issue { color: #5b4ea8; background: rgba(122, 95, 184, .09); border-color: rgba(122, 95, 184, .28); }
.treasury-feed-badge.tf-status--open { color: #C57E12; background: rgba(197, 126, 18, .1); border-color: rgba(197, 126, 18, .32); }
.treasury-feed-badge.tf-status--in_progress { color: #1180B6; background: rgba(70, 183, 232, .1); border-color: rgba(70, 183, 232, .32); }
.treasury-feed-badge.tf-status--resolved,
.treasury-feed-badge.tf-status--closed { color: #179C63; background: rgba(23, 156, 99, .1); border-color: rgba(23, 156, 99, .32); }
.treasury-feed-badge.tf-status--written_off { color: #6b7a90; background: #eef2f7; border-color: #dde4ee; }
.treasury-feed-badge.tf-emails { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.treasury-feed-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: #8298B5; }
.treasury-feed-facts .tf-dot { color: #c3cedd; }
.treasury-feed-facts .is-past-due { color: #D63B57; font-weight: 600; }
.treasury-feed-facts .treasury-feed-dts {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4A6386;
  background: #f0f3f8; border-radius: 5px; padding: 1px 6px;
}
.treasury-feed-variance {
  flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 700; text-align: right; min-width: 92px;
}
.treasury-feed-variance.is-neg { color: #D63B57; }
.treasury-feed-variance.is-pos { color: #179C63; }
.treasury-feed-variance.is-neutral { color: #4A6386; }

@media (max-width: 640px) {
  .treasury-feed-item { gap: 10px; padding: 11px 14px; }
  .treasury-feed-variance { min-width: 72px; font-size: 13px; }
  .treasury-feed-facts { display: none; }
}