#main-navbar-tools a.dropdown-toggle{text-decoration:none;color:#fff}.navbar .dropdown-submenu{position:relative}.navbar .dropdown-menu{margin:0;padding:0}.navbar .dropdown-menu a{font-size:.9em;padding:10px 15px;display:block;min-width:210px;text-align:left;border-radius:.25rem;min-height:44px}.navbar .dropdown-submenu a::after{transform:rotate(-90deg);position:absolute;right:16px;top:18px}.navbar .dropdown-submenu .dropdown-menu{top:0;left:100%}.card-header .btn{padding:2px 6px}.card-header h5{margin:0}.container>.card{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}@media screen and (min-width:768px){.navbar .dropdown:hover>.dropdown-menu{display:block}.navbar .dropdown-submenu:hover>.dropdown-menu{display:block}}.input-validation-error{border-color:#dc3545}.field-validation-error{font-size:.8em}.dataTables_scrollBody{min-height:248px}div.dataTables_wrapper div.dataTables_info{padding-top:11px;white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{padding-top:10px;margin-bottom:0}.rtl .dropdown-menu-right{right:auto;left:0}.rtl .dropdown-menu-right a{text-align:right}.rtl .navbar .dropdown-menu a{text-align:right}.rtl .navbar .dropdown-submenu .dropdown-menu{top:0;left:auto;right:100%}.rtl div.dataTables_wrapper div.dataTables_filter input{margin-left:auto;margin-right:.5em}.rtl div.dataTables_wrapper div.dataTables_filter{text-align:left}.rtl table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:right}.brand-container{text-align:center;margin-top:8rem}.brand-logo{height:50px}.brand-text{color:#292d33;font-family:Lexend;font-size:30px;font-style:normal;font-weight:500;line-height:34px;margin-top:5px;margin-bottom:15px}/*
 * radinik-theme.css
 * RightTrak ES by Radinik
 * ABP Framework v10.3
 * Generated from RADINIK_UI_STYLE.md
 * DO NOT EDIT MANUALLY — regenerate from the style guide
 */

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

/* ═══════════════════════════════════════════════════════════
   1. Color Tokens
════════════════════════════════════════════════════════════ */

/* wwwroot/css/radinik-theme.css */
:root {
  /* ── Primary Accent (Blue) ── */
  --rad-blue:         #1A4FA0;   /* Buttons, active nav, card bars, links     */
  --rad-blue-hover:   #2563C4;   /* Hover on primary elements                 */
  --rad-blue-muted:   rgba(26,79,160,0.10); /* Focus ring, subtle highlight   */
  --rad-blue-tint:    #F0F5FF;   /* Sub-header backgrounds, tag fills         */
  --rad-blue-tag:     #EFF4FF;   /* Tag/badge background for "No" state       */

  /* ── Logo Dot Palette ── */
  --rad-dot-dark: #2D1B4E;  /* Deep purple — code field text, deep accents   */
  --rad-dot-mid:  #7B3F6E;  /* Mid purple — avatar gradients, pair accents   */

  /* ── Sidebar ── */
  --rad-navy:       #1A1F3C;  /* Sidebar background                           */
  --rad-navy-mid:   #232847;  /* Sidebar mid tone                             */
  --rad-navy-hover: #2C3357;  /* Sidebar item hover                           */

  /* ── Surface & Layout ── */
  --rad-surface:   #F5F6FA;  /* Page background                               */
  --rad-white:     #FFFFFF;  /* Card / panel background                       */
  --rad-border:    #E4E7F0;  /* All dividers and input borders                */
  --rad-input-bg:  #F8F9FC;  /* Input / select / textarea background          */
  --rad-code-bg:   #EFF1F8;  /* Read-only code field background               */
  --rad-row-hover: #FAFBFE;  /* Table row hover, panel headers                */
  --rad-thead-bg:  #F0F2F8;  /* Table thead background                        */
  --rad-skeleton-mid: #ECEEF5; /* Skeleton shimmer mid-colour                 */

  /* ── Typography ── */
  --rad-text:         #1A1F3C;  /* Primary body text                          */
  --rad-text-2:       #5C6080;  /* Secondary / form labels                    */
  --rad-text-muted:   #9298B0;  /* Placeholders, helper text, footer          */
  --rad-sidebar-text: #CDD2E8;  /* Inactive sidebar item text (AA-compliant)  */

  /* ── Status ── */
  --rad-success:      #27AE60;
  --rad-success-tint: #E8F7EE;
  --rad-warning:      #F0A500;
  --rad-warning-tint: #FFF8E6;
  --rad-error:        #DC2626;  /* Validation errors, destructive buttons     */
  --rad-error-tint:   #FEF2F2;
  --rad-error-border: #FECACA;

  /* ── Overlay ── */
  --rad-overlay: rgba(26,31,60,0.45);  /* Modal backdrop                      */

  /* ── Inline accent text ── */
  --rad-accent-text: var(--rad-blue);  /* Section labels, results labels       */

  /* ── Fonts ── */
  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════
   4.1 Sidebar
════════════════════════════════════════════════════════════ */

.sidebar {
  width: 220px;
  background: var(--rad-navy);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width .2s ease;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Collapsed state */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .logo-name,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .s-label,
.sidebar.collapsed .s-item-text,
.sidebar.collapsed .caret { display: none; }
.sidebar.collapsed .s-item { justify-content: center; padding: 10px; }
.sidebar.collapsed .sidebar-footer { display: none; }

/* Logo area */
.sidebar-logo {
  padding: 22px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-name { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.logo-name em { color: var(--rad-blue-hover); font-style: normal; } /* "nik" in blue */
.logo-sub { font-size: 9px; color: var(--rad-text-muted); letter-spacing: .1em; text-transform: uppercase; }

/* Section groups */
.s-section { padding: 16px 10px 4px; }
.s-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rad-text-muted);
  padding: 0 8px; margin-bottom: 5px;
}

/* Nav items */
.s-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--rad-sidebar-text);   /* #CDD2E8 — AA-compliant on navy */
  transition: background .15s, color .15s;
  margin-bottom: 1px;
  cursor: pointer;
}
.s-item:hover   { background: var(--rad-navy-hover); color: #fff; }
.s-item.active  { background: var(--rad-blue); color: #fff; }
.s-item[aria-current="page"] { background: var(--rad-blue); color: #fff; }
.s-item .caret  { margin-left: auto; font-size: 10px; opacity: .5; }

/* Standalone top-level nav links (Home, Batches, Shipments — leaf items with no children).
   Slightly bolder than sub-items; icon at 87% opacity to match group-child items. */
.s-item-top { font-weight: 600; }
.s-item-top i { opacity: .87; }

/* Collapsed tooltip on hover */
.sidebar.collapsed .s-item { position: relative; }
.sidebar.collapsed .s-item:hover::after {
  content: attr(data-label);
  position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
  background: var(--rad-navy-hover); color: #fff;
  padding: 5px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  pointer-events: none; z-index: 100;
}

/* Sub-menu */
.s-sub {
  margin-left: 10px; padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.s-sub .s-item { font-size: 12.5px; font-weight: 400; padding: 6px 10px; }

/* Footer */
.sidebar-footer {
  margin-top: auto; padding: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 10.5px; color: var(--rad-text-muted); text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   4.2 Topbar
════════════════════════════════════════════════════════════ */

/* Page content area */
.content {
  flex: 1;
  padding: 26px 28px;
  background: var(--rad-surface);
  overflow-y: auto;
}

/* Topbar divider / spacer */
.tb-div { flex: 1; }

.topbar {
  background: var(--rad-white);
  border-bottom: 1px solid var(--rad-border);
  padding: 0 28px; height: 54px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 1px 4px rgba(26,31,60,.06);
}
.topbar-title { font-size: 14px; font-weight: 600; color: var(--rad-text); flex: 1; }

/* Network selector */
.net-select {
  background: var(--rad-surface); border: 1px solid var(--rad-border);
  border-radius: 7px; padding: 5px 28px 5px 10px;
  font-size: 12.5px; font-family: var(--font); color: var(--rad-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* User pill */
.user-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 3px; border-radius: 50px;
  border: 1px solid var(--rad-border); background: var(--rad-surface);
  cursor: pointer;
}
.user-pill:hover { border-color: var(--rad-blue); }
.user-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rad-blue) 0%, var(--rad-dot-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   4.3 Card
════════════════════════════════════════════════════════════ */

.card {
  background: var(--rad-white);
  border-radius: 12px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 1px 3px rgba(26,31,60,.07);
  overflow: hidden;
  margin-bottom: 18px;
}
.card-hdr {
  padding: 14px 22px;
  border-bottom: 1px solid var(--rad-border);
  display: flex; align-items: center; justify-content: space-between;
}

/* Blue left-bar accent — applied to every card title */
.card-hdr-title {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--rad-text);
  display: flex; align-items: center; gap: 8px;
}
.card-hdr-title::before {
  content: ''; display: block;
  width: 3px; height: 15px; border-radius: 2px;
  background: var(--rad-blue);
}

/* Card header action link (e.g. "— Collapse") */
.card-hdr-action {
  font-size: 12px; font-weight: 500;
  color: var(--rad-blue); cursor: pointer;
  transition: opacity .15s;
}
.card-hdr-action:hover { opacity: .7; }

.card-body { padding: 22px; }

/* Colored sub-headers inside cards (e.g. "Items Added") */
.card-sub-hdr {
  padding: 10px 22px;
  border-bottom: 1px solid var(--rad-border);
  background: var(--rad-blue-tint);
  font-size: 12px; font-weight: 600; color: var(--rad-blue);
}
.card-panel-hdr {
  padding: 10px 22px;
  border-bottom: 1px solid var(--rad-border);
  background: var(--rad-row-hover);
  font-size: 11.5px; font-weight: 700; color: var(--rad-text-2);
}

/* Action bar at card bottom (add links) */
.card-action-bar {
  border-top: 1px solid var(--rad-border);
  background: var(--rad-row-hover);
}

/* ═══════════════════════════════════════════════════════════
   4.4 Buttons
════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 17px; border-radius: 8px;
  font-size: 13px; font-weight: 600; font-family: var(--font);
  cursor: pointer; border: none; transition: all .15s;
}

/* Primary — blue fill */
.btn-primary {
  background: var(--rad-blue); color: #fff;
  box-shadow: 0 2px 8px rgba(26,79,160,.28);
}
.btn-primary:hover {
  background: var(--rad-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26,79,160,.36);
}

/* Ghost / Secondary */
.btn-ghost {
  background: var(--rad-surface); color: var(--rad-text-2);
  border: 1px solid var(--rad-border);
}
.btn-ghost:hover { border-color: var(--rad-blue); color: var(--rad-blue); }

/* Danger (destructive actions only) */
.btn-danger { background: var(--rad-error); color: #fff; }
.btn-danger:hover { background: #B91C1C; }

/* Small variant */
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* Disabled state — applies to all variants */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading state — shown while async action is in-flight */
.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading .btn-spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  flex-shrink: 0;
}
.btn-ghost.btn-loading .btn-spinner {
  border-color: rgba(26,79,160,0.3);
  border-top-color: var(--rad-blue);
}

/* ═══════════════════════════════════════════════════════════
   4.5 Form Fields
════════════════════════════════════════════════════════════ */

/* Shared base for input, select, textarea */
.form-control {
  background: var(--rad-input-bg);
  border: 1px solid var(--rad-border);
  border-radius: 8px; padding: 8px 12px;
  font-size: 13px; font-family: var(--font); color: var(--rad-text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
/* Use :focus-visible so keyboard users see the ring; mouse clicks do not */
.form-control:focus-visible {
  outline: none;
  border-color: var(--rad-blue);
  box-shadow: 0 0 0 3px var(--rad-blue-muted);
}
/* Fallback for browsers that don't support :focus-visible */
.form-control:focus:not(:focus-visible) { outline: none; }

/* Read-only auto-generated code / ID fields */
.form-control.code-field {
  font-family: var(--mono); font-size: 12px;
  background: var(--rad-code-bg); color: var(--rad-dot-dark);
  font-weight: 500; cursor: default;
}

/* Select chevron — applied to both .form-control selects and .form-select */
select.form-control,
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  padding-right: 32px;
}

/* Bootstrap uses .form-select for <select> — apply the same base styles as .form-control */
.form-select {
  background-color: var(--rad-input-bg);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--rad-text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.form-select:focus,
.form-select:focus-visible {
  outline: none;
  border-color: var(--rad-blue);
  box-shadow: 0 0 0 3px var(--rad-blue-muted);
}
.form-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

textarea.form-control { resize: vertical; min-height: 82px; line-height: 1.55; }

/* Disabled fields */
.form-control:disabled,
.form-control[readonly]:not(.code-field) {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--rad-surface);
}

/* Validation — invalid state */
.form-control.is-invalid {
  border-color: var(--rad-error);
  box-shadow: none;
}
.form-control.is-invalid:focus-visible {
  border-color: var(--rad-error);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
}

/* Validation error message */
.field-error {
  font-size: 11.5px; color: var(--rad-error);
  margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.field-error::before {
  content: '!';
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rad-error); color: #fff;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}

/* An error span that JS fills in is empty until something goes wrong, and ::before
   would otherwise draw a bare "!" bubble under a perfectly valid field. The tag
   helper's spans are covered by .field-validation-valid; hand-written ones are not. */
.field-error:empty { display: none; }

/* Advisory message — the value is legal but probably not what was meant.
   Same shape as .field-error so the two read as one family, in the warning
   colour so it is clearly not blocking the save. */
.field-warning {
  font-size: 11.5px; color: var(--rad-warning);
  margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.field-warning::before {
  content: 'i';
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rad-warning); color: #fff;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}

/* ABP Blazor validation — maps to same style as .field-error */
.validation-message {
  font-size: 11.5px; color: var(--rad-error);
  margin-top: 4px;
}

/* Helper text below non-error fields */
.field-hint {
  font-size: 11px; color: var(--rad-text-muted);
  margin-top: 4px;
}

/* Labels */
.form-label {
  font-size: 11px; font-weight: 600;
  color: var(--rad-text-2);
  letter-spacing: .03em; text-transform: uppercase;
}
/* Use a single canonical class for the required asterisk */
.form-label .required { color: var(--rad-blue); }

/* Two-column form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid.form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span-2 { grid-column: span 2; }

/* ═══════════════════════════════════════════════════════════
   4.6 Data Table
════════════════════════════════════════════════════════════ */

table { width: 100%; border-collapse: collapse; }

thead tr { background: var(--rad-thead-bg); }
th {
  padding: 9px 14px; text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rad-text-2);
  border-bottom: 1px solid var(--rad-border);
  white-space: nowrap;
}
td {
  padding: 10px 14px; font-size: 12.5px;
  border-bottom: 1px solid var(--rad-border);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--rad-row-hover); }

/* Sortable column headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { content: ' ↕'; opacity: 0.3; font-size: 9px; }
th.sort-asc::after  { content: ' ↑'; opacity: 1; color: var(--rad-blue); }
th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--rad-blue); }

/* Three-dot row action menu */
.dot-menu {
  display: inline-flex; gap: 2px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid transparent;
  position: relative;
}
.dot-menu:hover { border-color: var(--rad-border); background: var(--rad-surface); }
.dot-menu span { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--rad-text-muted); display: block; }

/* Dot-menu dropdown */
.dot-menu-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26,31,60,.12);
  min-width: 140px; z-index: 50;
  overflow: hidden;
}
.dot-menu.open .dot-menu-dropdown { display: block; }
.dot-menu-item {
  padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--rad-text); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: background .1s;
}
.dot-menu-item:hover { background: var(--rad-row-hover); }
.dot-menu-item.danger { color: var(--rad-error); }
.dot-menu-item.danger:hover { background: var(--rad-error-tint); }

/* ── btn-dot-menu: the Bootstrap-dropdown trigger used in DataTable cells ──
   Renders as "•••" with Radinik ghost styling; the dropdown list is
   styled below to match .dot-menu-dropdown / .dot-menu-item. */
.btn-dot-menu {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--rad-text-muted);
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-dot-menu:hover,
.btn-dot-menu[aria-expanded="true"] {
  background: var(--rad-surface);
  border-color: var(--rad-border);
  color: var(--rad-text);
}
/* ── Global Bootstrap dropdown override ─────────────────────
   Bootstrap/Popper.js may reattach .dropdown-menu to <body>,
   so never use a parent-dependent selector like "td .dropdown-menu".
   These rules apply to every dropdown in the app.              ── */
.dropdown-menu {
  font-family: var(--font) !important;
  font-size: 13px !important;
  border: 1px solid var(--rad-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(26,31,60,.12) !important;
  padding: 6px 0 !important;
  min-width: 150px !important;
  background: var(--rad-white) !important;
}
.dropdown-menu .dropdown-item {
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--rad-text-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background .1s !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--rad-row-hover) !important;
  color: var(--rad-text) !important;
}
.dropdown-menu .dropdown-item.text-danger {
  color: var(--rad-error) !important;
}
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
  background: var(--rad-error-tint) !important;
  color: var(--rad-error) !important;
}
.dropdown-menu .dropdown-item i { margin-right: 0 !important; }
.dropdown-menu .dropdown-divider {
  border-color: var(--rad-border) !important;
  margin: 4px 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   4.7 Tags / Badges
════════════════════════════════════════════════════════════ */

.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-no      { background: var(--rad-blue-tag);     color: var(--rad-blue); }
.tag-yes     { background: var(--rad-success-tint); color: var(--rad-success); }
.tag-warning { background: var(--rad-warning-tint); color: var(--rad-warning); }
.tag-error   { background: var(--rad-error-tint);   color: var(--rad-error); }

/* Inline text utilities (used by DataTables cell renderers) */
.mono        { font-family: var(--font-mono); }
.text-muted  { color: var(--rad-text-muted); }

/* Audit trail report — property change detail list inside a results cell */
.audit-detail-list { font-size: 10.5px; line-height: 1.6; }
.audit-object-id   { font-size: 10.5px; }

/* ═══════════════════════════════════════════════════════════
   4.8 Breadcrumb & Page Header
════════════════════════════════════════════════════════════ */

.breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--rad-text-muted); margin-bottom: 6px; }
.breadcrumb .active { color: var(--rad-blue); font-weight: 500; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.page-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--rad-text); }
.page-sub { font-size: 12.5px; color: var(--rad-text-2); margin-top: 3px; }
.btn-group { display: flex; gap: 10px; align-items: center; }

/* Inline add-item link (bottom of card sections) */
.add-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600;
  color: var(--rad-accent-text); cursor: pointer;
  padding: 10px 22px;
  transition: opacity .15s;
}
.add-link:hover { opacity: .75; }

/* ═══════════════════════════════════════════════════════════
   4.9 Modal / Dialog
════════════════════════════════════════════════════════════ */

/* Backdrop */
.rad-modal-overlay {
  position: fixed; inset: 0;
  background: var(--rad-overlay);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

/* Dialog container */
.rad-modal {
  background: var(--rad-white);
  border-radius: 14px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 20px 60px rgba(26,31,60,.22);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rad-modal.modal-lg { max-width: 780px; }
.rad-modal.modal-sm { max-width: 400px; }

/* Modal header */
.rad-modal-hdr {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--rad-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.rad-modal-title {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.2px; color: var(--rad-text);
  display: flex; align-items: center; gap: 8px;
}
.rad-modal-title::before {
  content: ''; display: block;
  width: 3px; height: 16px; border-radius: 2px;
  background: var(--rad-blue);
}
.rad-modal-close {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--rad-border);
  background: var(--rad-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--rad-text-muted);
  font-size: 14px; transition: all .15s;
}
.rad-modal-close:hover { border-color: var(--rad-blue); color: var(--rad-blue); }

/* Modal body */
.rad-modal-body {
  padding: 22px 24px;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--rad-border) transparent;
}

/* Modal footer — left-aligned, same order as form footer */
.rad-modal-ftr {
  padding: 14px 24px;
  border-top: 1px solid var(--rad-border);
  background: var(--rad-surface);
  display: flex; justify-content: flex-start; gap: 10px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   4.10 Notifications & Toasts
════════════════════════════════════════════════════════════ */

/* Toast container — bottom-right, stacks upward */
#abp-notification-container,
.abp-toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px;
}

/* Base toast */
.rad-toast {
  background: var(--rad-white);
  border-radius: 10px; border: 1px solid var(--rad-border);
  box-shadow: 0 8px 24px rgba(26,31,60,.14);
  padding: 13px 16px;
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13px; font-weight: 500; color: var(--rad-text);
  animation: toastIn .2s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); max-height: 100px; }
  to   { opacity: 0; transform: translateY(8px); max-height: 0; padding: 0; }
}
.rad-toast.dismissing { animation: toastOut .25s ease forwards; }

/* Left accent bar */
.rad-toast::before {
  content: ''; display: block; flex-shrink: 0;
  width: 3px; border-radius: 2px; align-self: stretch;
}
.rad-toast.toast-success::before { background: var(--rad-success); }
.rad-toast.toast-warning::before { background: var(--rad-warning); }
.rad-toast.toast-error::before   { background: var(--rad-error); }
.rad-toast.toast-info::before    { background: var(--rad-blue); }

.rad-toast-body { flex: 1; }
.rad-toast-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.rad-toast-msg   { font-size: 12.5px; color: var(--rad-text-2); line-height: 1.4; }

/* Dismiss button */
.rad-toast-close {
  flex-shrink: 0; background: none; border: none;
  color: var(--rad-text-muted); cursor: pointer;
  font-size: 14px; padding: 0; line-height: 1;
  transition: color .15s;
}
.rad-toast-close:hover { color: var(--rad-text); }

/* ═══════════════════════════════════════════════════════════
   4.11 Empty States
════════════════════════════════════════════════════════════ */

.empty-state {
  padding: 48px 22px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}
.empty-state-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--rad-blue-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--rad-blue); margin-bottom: 4px;
}
.empty-state-title { font-size: 14px; font-weight: 600; color: var(--rad-text); }
.empty-state-body  { font-size: 13px; color: var(--rad-text-muted); max-width: 300px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   4.12 Loading & Skeleton States
════════════════════════════════════════════════════════════ */

/* Full-card spinner overlay — spinner is a real child element, not ::after */
.card-loading { position: relative; pointer-events: none; }
.card-loading-veil {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.75);
  border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}

/* Spinner */
.rad-spinner {
  border: 2.5px solid var(--rad-border);
  border-top-color: var(--rad-blue);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
.rad-spinner        { width: 22px; height: 22px; }
.rad-spinner.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.rad-spinner.spinner-lg { width: 34px; height: 34px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg,
    var(--rad-surface) 25%,
    var(--rad-skeleton-mid) 50%,
    var(--rad-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 5px;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.sk-line      { height: 12px; margin-bottom: 8px; }
.sk-line-w100 { width: 100%; }
.sk-line-w75  { width: 75%; }
.sk-line-w50  { width: 50%; }
.sk-cell      { height: 38px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════
   4.13 Pagination
════════════════════════════════════════════════════════════ */

.pagination {
  display: flex; align-items: center; gap: 4px;
  padding: 14px 22px;
  border-top: 1px solid var(--rad-border);
}
.page-item {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--rad-text-2); cursor: pointer;
  border: 1px solid transparent; transition: all .15s; padding: 0 8px;
}
.page-item:hover   { background: var(--rad-surface); border-color: var(--rad-border); }
.page-item.active  { background: var(--rad-blue); color: #fff; border-color: var(--rad-blue); }
.page-item[aria-current="page"] { background: var(--rad-blue); color: #fff; border-color: var(--rad-blue); }
.page-item.ellipsis  { cursor: default; color: var(--rad-text-muted); }
.page-item.disabled  { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Radinik renderer state classes (pg-* prefix avoids Bootstrap collision) */
.page-item.pg-active        { background: var(--rad-blue); color: #fff; border-color: var(--rad-blue); }
.page-item.pg-active:hover  { background: var(--rad-blue); border-color: var(--rad-blue); color: #fff; }
.page-item.pg-disabled      { opacity: 0.38; cursor: default; pointer-events: none; }
.page-item.pg-ellipsis      { cursor: default; color: var(--rad-text-muted); pointer-events: none; }

/* Rows-per-page control rendered by radinik-datatables.js */
.page-size-wrap {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--rad-text-muted);
}
.page-size-wrap select {
  background: var(--rad-surface); border: 1px solid var(--rad-border);
  border-radius: 7px; padding: 4px 24px 4px 8px;
  font-size: 12.5px; font-family: var(--font); color: var(--rad-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; cursor: pointer;
}

.page-size-select {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--rad-text-muted);
}
.page-size-select select {
  background: var(--rad-surface); border: 1px solid var(--rad-border);
  border-radius: 7px; padding: 4px 24px 4px 8px;
  font-size: 12.5px; font-family: var(--font); color: var(--rad-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   4.13a Idle Session Warning Modal  (§16)
════════════════════════════════════════════════════════════ */

.idle-modal-overlay {
  position: fixed; inset: 0;
  background: var(--rad-overlay);
  backdrop-filter: blur(3px);
  z-index: var(--z-idle);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.idle-modal {
  background: var(--rad-white);
  border-radius: 14px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 20px 60px rgba(26,31,60,.28);
  max-width: 400px;
  width: 100%;
  overflow: hidden;
}

.idle-modal-hdr {
  background: var(--rad-warning-tint);
  border-bottom: 1px solid #F0D080;
  padding: 16px 22px;
  display: flex; align-items: center; gap: 10px;
}
.idle-modal-hdr-icon  { color: var(--rad-warning); flex-shrink: 0; }
.idle-modal-hdr-title { font-size: 14px; font-weight: 700; color: var(--rad-text); }

.idle-modal-body { padding: 22px 24px; text-align: center; }

/* Countdown ring */
.idle-countdown-wrap {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  position: relative;
}
.idle-countdown-ring {
  width: 80px; height: 80px;
  transform: rotate(-90deg);
}
.idle-countdown-ring circle {
  fill: none;
  stroke: var(--rad-border);
  stroke-width: 5;
}
.idle-countdown-ring .progress {
  stroke: var(--rad-warning);
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .5s;
}
.idle-countdown-ring .progress.urgent { stroke: var(--rad-error); }

.idle-countdown-number {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  color: var(--rad-text);
  font-family: var(--mono);
}

.idle-message {
  font-size: 13.5px;
  color: var(--rad-text-2);
  line-height: 1.6;
  margin-bottom: 6px;
}
.idle-message strong { color: var(--rad-text); }

.idle-modal-ftr {
  padding: 14px 24px;
  border-top: 1px solid var(--rad-border);
  background: var(--rad-surface);
  display: flex; gap: 10px;
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   4.14 Back Navigation Link
════════════════════════════════════════════════════════════ */

/* Use .btn.btn-ghost for the back button — not a bare link */
/* Example: <button class="btn btn-ghost">‹ Back</button> */

/* ═══════════════════════════════════════════════════════════
   4.15 Date Picker Input
════════════════════════════════════════════════════════════ */

.date-input-wrap {
  position: relative; width: 100%;
}
.date-input-wrap .form-control { padding-right: 38px; }
.date-input-icon {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--rad-text-muted); pointer-events: none;
  display: flex; align-items: center;
}
.date-input-wrap .form-control:focus-visible ~ .date-input-icon {
  color: var(--rad-blue);
}

/* ═══════════════════════════════════════════════════════════
   4.16 Two-Column Page Layout
════════════════════════════════════════════════════════════ */

.page-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.page-cols.cols-6-4 { grid-template-columns: 3fr 2fr; }
.page-cols.cols-4-6 { grid-template-columns: 2fr 3fr; }
.page-cols .card { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   4.17 Inline Section Label (within card body)
════════════════════════════════════════════════════════════ */

.section-label {
  font-size: 13px; font-weight: 700;
  color: var(--rad-accent-text);   /* use token, not raw var(--rad-blue) */
  margin-bottom: 14px; margin-top: 6px;
  letter-spacing: 0.01em;
}
.section-label.with-divider {
  padding-top: 18px;
  border-top: 1px solid var(--rad-border);
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════
   4.18 Inline Matrix Input Table
════════════════════════════════════════════════════════════ */

.fee-grid { width: 100%; border-collapse: collapse; }
.fee-grid thead th {
  padding: 8px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rad-text-2); background: var(--rad-thead-bg);
  border-bottom: 1px solid var(--rad-border);
  text-align: left; white-space: nowrap;
}
.fee-grid thead th:first-child { width: 160px; }
.fee-grid tbody td.fee-row-label {
  font-size: 13px; font-weight: 500; color: var(--rad-text);
  padding: 10px 10px 10px 0; vertical-align: middle; white-space: nowrap;
}
.fee-grid tbody td.fee-cell { padding: 5px 6px; vertical-align: middle; }
.fee-grid tbody td.fee-cell .form-control { min-width: 90px; }
.fee-grid tbody tr:hover td { background: inherit; }

/* ═══════════════════════════════════════════════════════════
   4.19 Search / Filter Page Pattern
════════════════════════════════════════════════════════════ */

.search-btn-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; }
.results-label {
  font-size: 13px; font-weight: 700;
  color: var(--rad-accent-text);
  padding: 14px 22px 10px;
}

/* ═══════════════════════════════════════════════════════════
   4.20 Table Cell Link (Row-level Navigation)
════════════════════════════════════════════════════════════ */

.tbl-link {
  color: var(--rad-blue); font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(26,79,160,0.30);
  text-underline-offset: 2px; cursor: pointer;
  transition: color .15s, text-decoration-color .15s;
}
.tbl-link:hover {
  color: var(--rad-blue-hover);
  text-decoration-color: var(--rad-blue-hover);
}

/* ═══════════════════════════════════════════════════════════
   4.21 Tab Strip (within card body)
════════════════════════════════════════════════════════════ */

.tab-strip {
  display: flex; border-bottom: 1px solid var(--rad-border);
  margin: 0 -22px; padding: 0 22px;
}
.tab-item {
  /* button element resets */
  background: none;
  border: none;
  border-radius: 0;
  font-family: inherit;
  line-height: inherit;
  /* tab styling */
  font-size: 13px; font-weight: 500; color: var(--rad-text-muted);
  padding: 10px 16px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab-item:hover { color: var(--rad-text-2); }
.tab-item.active { color: var(--rad-blue); border-bottom-color: var(--rad-blue); font-weight: 600; }
.tab-item:focus-visible { outline: 2px solid var(--rad-blue-muted); outline-offset: -2px; border-radius: 4px; }
.tab-panel { padding-top: 18px; display: none; }
.tab-panel.show { display: block; }

/* ═══════════════════════════════════════════════════════════
   4.22 Inline Editable Table (Add / Delete rows)
════════════════════════════════════════════════════════════ */

.inline-tbl-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 8px; border-bottom: 2px solid var(--rad-border); margin-bottom: 4px;
}

/* The rule above describes the div-based grid below it, but every editable table in
   the app puts the class on a real <thead>. `display: flex` there takes the header
   row out of the table's column algorithm, so header cells size themselves and stop
   lining up with the body — and the widened row pushes its action buttons behind a
   horizontal scrollbar. Restore the row-group display and drop the box properties
   that only meant something to the flex container; §4.6's base `th` already carries
   the padding and the label typography, so only the heavier 2px rule moves onto the
   cells, where a collapsed table paints it. */
thead.inline-tbl-hdr {
  display: table-header-group;
  padding: 0; margin-bottom: 0; border-bottom: none;
}
thead.inline-tbl-hdr > tr > th { border-bottom: 2px solid var(--rad-border); }
.inline-tbl-hdr-cols {
  display: grid; grid-template-columns: 1fr 1fr 80px;
  gap: 12px; flex: 1; align-items: center;
}
.inline-tbl-col-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--rad-text-2);
}
.inline-row {
  display: grid; grid-template-columns: 1fr 1fr 80px;
  gap: 12px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--rad-border);
}
.inline-row:last-child { border-bottom: none; }
.inline-row:only-child .btn-danger { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════
   4.23 Form Footer (End-of-Form Actions)
════════════════════════════════════════════════════════════ */

.form-footer {
  display: flex;
  justify-content: flex-start;   /* left-aligned */
  align-items: center;
  gap: 10px;
  padding: 20px 0 8px;
}

/* ═══════════════════════════════════════════════════════════
   DataTables overrides (Razor Pages)
════════════════════════════════════════════════════════════ */

/* ── Wrapper & layout ── */
.dataTables_wrapper {
  font-family: var(--font);
  font-size: 13px;
  color: var(--rad-text);
}

/* ── Table itself ── */
table.dataTable {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
table.dataTable thead tr { background: var(--rad-thead-bg); }
table.dataTable thead th,
table.dataTable thead td {
  padding: 9px 14px !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: var(--rad-text-2) !important;
  border-bottom: 1px solid var(--rad-border) !important;
  border-top: none !important;
  white-space: nowrap;
}
table.dataTable tbody td {
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  border-bottom: 1px solid var(--rad-border) !important;
  border-top: none !important;
  vertical-align: middle;
}
table.dataTable tbody tr:last-child td { border-bottom: none !important; }
table.dataTable tbody tr:hover td     { background: var(--rad-row-hover) !important; }

/* Kill DataTables default striping */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background: inherit !important; }

/* ── Sort arrows ── */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-size: 9px; opacity: 0.3;
}
table.dataTable thead .sorting::after      { content: ' ↕' !important; }
table.dataTable thead .sorting_asc::after  { content: ' ↑' !important; opacity: 1; color: var(--rad-blue); }
table.dataTable thead .sorting_desc::after { content: ' ↓' !important; opacity: 1; color: var(--rad-blue); }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; background-image: none !important; }

/* ── Search box ── */
.dataTables_filter label {
  font-size: 11px; font-weight: 600;
  color: var(--rad-text-2); letter-spacing: .03em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.dataTables_filter input {
  background: var(--rad-input-bg) !important;
  border: 1px solid var(--rad-border) !important;
  border-radius: 8px !important; padding: 7px 12px !important;
  font-size: 13px !important; font-family: var(--font) !important;
  color: var(--rad-text) !important;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  margin-left: 6px;
}
.dataTables_filter input:focus-visible {
  border-color: var(--rad-blue) !important;
  box-shadow: 0 0 0 3px var(--rad-blue-muted) !important;
}

/* ── Length selector (rows per page) ── */
.dataTables_length label {
  font-size: 12px; color: var(--rad-text-muted);
  display: flex; align-items: center; gap: 6px;
}
.dataTables_length select {
  background: var(--rad-surface) !important;
  border: 1px solid var(--rad-border) !important;
  border-radius: 7px !important; padding: 4px 24px 4px 8px !important;
  font-size: 12.5px !important; font-family: var(--font) !important;
  color: var(--rad-text) !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 6px center !important;
  cursor: pointer;
}

/* ── Info text ("Showing 1 to 10 of 57 entries") ── */
.dataTables_info {
  font-size: 12px; color: var(--rad-text-muted);
  padding: 14px 0 !important;
}

/* ── Pagination — ABP uses datatables.net-bs5 which renders:
     <ul class="pagination">
       <li class="paginate_button page-item [active|disabled]">
         <a class="page-link">…</a>
       </li>
     </ul>
   Strategy: style the <li> as the visual button (per §9.1 spec),
   strip all Bootstrap chrome from the inner <a>. ── */

/* Reset Bootstrap's <ul class="pagination"> */
.dataTables_paginate { padding: 10px 0 !important; }
.dataTables_paginate .pagination {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: wrap;
}

/* ── The <li> IS the visual button ── */
.dataTables_paginate .paginate_button {
  min-width: 32px; height: 32px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  font-size: 13px !important; font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--rad-text-2) !important;
  border: 1px solid transparent !important;
  background: none !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  padding: 0 8px !important;
  box-shadow: none !important;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--rad-surface) !important;
  border-color: var(--rad-border) !important;
  color: var(--rad-text) !important;
}
/* Active / current page */
.dataTables_paginate .paginate_button.active,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.active:hover,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--rad-blue) !important;
  border-color: var(--rad-blue) !important;
  color: #fff !important;
}
/* Disabled buttons (at first/last page boundaries) */
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.38 !important;
  cursor: default !important;
  background: none !important;
  border-color: transparent !important;
  color: var(--rad-text-muted) !important;
  pointer-events: none !important;
}

/* ── Strip ALL Bootstrap chrome from the inner <a class="page-link"> ──
   It must be invisible and fill its parent <li>. ── */
.dataTables_paginate .paginate_button > a.page-link,
.dataTables_paginate .paginate_button > span.page-link {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: inherit !important;
  line-height: 1 !important;
}

.dataTables_paginate .ellipsis { color: var(--rad-text-muted) !important; }

/* ── Processing overlay ── */
.dataTables_processing {
  background: rgba(255,255,255,0.85) !important;
  border: none !important; border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(26,31,60,.12) !important;
  font-size: 13px !important; font-family: var(--font) !important;
  color: var(--rad-text-2) !important;
  padding: 14px 22px !important;
}

/* ── Selected row ── */
table.dataTable tbody tr.selected td {
  background: var(--rad-blue-tint) !important;
  color: var(--rad-text) !important;
}

/* ── Responsive extension (dt-responsive) ── */
td.dtr-control::before {
  border-color: var(--rad-blue) !important;
  background-color: var(--rad-blue) !important;
}

/* ═══════════════════════════════════════════════════════════
   Telerik Grid overrides (Blazor)
════════════════════════════════════════════════════════════ */

.k-grid                   { border: 1px solid var(--rad-border) !important; border-radius: 0 0 12px 12px; }
.k-grid-header            { background: var(--rad-thead-bg) !important; }
.k-grid-header th,
.k-header                 { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em !important;
                            text-transform: uppercase !important; color: var(--rad-text-2) !important;
                            border-color: var(--rad-border) !important; padding: 9px 14px !important; }
.k-grid td                { font-size: 12.5px !important; padding: 10px 14px !important;
                            border-color: var(--rad-border) !important; }
.k-grid tr:hover td       { background: var(--rad-row-hover) !important; }
.k-alt                    { background: inherit !important; }
.k-pager-wrap             { background: var(--rad-surface) !important; border-color: var(--rad-border) !important; }
.k-state-selected td      { background: var(--rad-blue-tint) !important; color: var(--rad-text) !important; }
.k-sort-icon              { color: var(--rad-blue) !important; }

/* ═══════════════════════════════════════════════════════════
   8.5 `abp-dynamic-form` Grid Override
════════════════════════════════════════════════════════════ */

/* ── abp-dynamic-form → Radinik form-grid ── */

/* Remove Bootstrap row/col wrappers visually */
.dynamic-form .row   { display: contents; }
.dynamic-form .col,
.dynamic-form [class*="col-"] {
  display: contents;
}

/* The form itself becomes the grid container */
.dynamic-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Each generated form-group maps to .form-group */
.dynamic-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;   /* kill Bootstrap's margin-bottom */
}

/* ABP generated labels → Radinik form-label */
.dynamic-form .form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rad-text-2);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* ABP generated inputs/selects/textareas → Radinik form-control */
.dynamic-form .form-group .form-control {
  background: var(--rad-input-bg);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--rad-text);
  transition: border-color .15s, box-shadow .15s;
}
.dynamic-form .form-group .form-control:focus-visible {
  outline: none;
  border-color: var(--rad-blue);
  box-shadow: 0 0 0 3px var(--rad-blue-muted);
}

/* ABP validation spans → Radinik field-error */
.dynamic-form .field-validation-error,
.dynamic-form .text-danger {
  font-size: 11.5px;
  color: var(--rad-error);
  margin-top: 4px;
}

/* Full-width fields — add .span-2 to the abp-form-content wrapper */
.dynamic-form .form-group.span-2 { grid-column: span 2; }

/* ═══════════════════════════════════════════════════════════
   8.7 Responsive Breakpoints
════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {

  /* Collapse sidebar to icon-only */
  .sidebar {
    width: 60px;
    min-width: 60px;
  }
  .sidebar .logo-name,
  .sidebar .logo-sub,
  .sidebar .s-label,
  .sidebar .s-item-text,
  .sidebar .caret { display: none; }
  .sidebar .s-item { justify-content: center; padding: 10px; }
  .sidebar .sidebar-footer { display: none; }

  /* Two-column page layout becomes single column */
  .page-cols,
  .page-cols.cols-6-4,
  .page-cols.cols-4-6 { grid-template-columns: 1fr; }

  /* Form grid becomes single column */
  .form-grid,
  .form-grid.form-grid-3,
  .form-grid.form-grid-4 { grid-template-columns: 1fr; }
  .form-group.span-2 { grid-column: span 1; }
  .dynamic-form { grid-template-columns: 1fr; }
  .dynamic-form .form-group.span-2 { grid-column: span 1; }
}

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {

  /* Hide sidebar entirely — use a drawer/hamburger instead */
  .sidebar { display: none; }
  .sidebar.mobile-open { display: flex; position: fixed; z-index: 200; height: 100vh; width: 220px; }

  /* Topbar — tighter padding */
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar-title { font-size: 13px; }

  /* Page content — tighter padding */
  .content { padding: 18px 16px; }

  /* Cards — tighter body padding */
  .card-body { padding: 16px; }
  .card-hdr  { padding: 12px 16px; }

  /* Fee grid — allow horizontal scroll */
  .fee-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Topbar controls — hide network selector label on mobile */
  .net-label { display: none; }

  /* Modal — full-width on mobile */
  .rad-modal { max-width: 100%; border-radius: 14px 14px 0 0; }
  .rad-modal-overlay { align-items: flex-end; padding: 0; }

  /* Toast — full width */
  #abp-notification-container,
  .abp-toast-container { left: 12px; right: 12px; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   9.1 DataTables Renderer Plugin (Approach 3 — Full HTML Control)
════════════════════════════════════════════════════════════ */

/* Wrapper output by the dom string */
.rad-dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rad-border);
  padding: 0 22px;
}
/* DT 2.x uses .dt-info; keep .dataTables_info as fallback */
.rad-dt-footer .dt-info,
.rad-dt-footer .dataTables_info {
  font-size: 12px;
  color: var(--rad-text-muted);
  padding: 14px 0;
}
/* DT 2.x paging host: .dt-paging (was .dataTables_paginate) */
.rad-dt-footer .dt-paging,
.rad-dt-footer .dataTables_paginate {
  display: flex;
  align-items: center;
}
.rad-dt-footer .pagination {
  border-top: none;
  padding: 10px 0;
}

/* ═══════════════════════════════════════════════════════════
   9.2 Native Radinik Table (Approach 4 — No DataTables)
════════════════════════════════════════════════════════════ */

/* Native table sort links */
a.sort-link {
  color: var(--rad-text-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
a.sort-link::after        { content: ' ↕'; opacity: 0.3; font-size: 9px; }
a.sort-link.sort-asc::after  { content: ' ↑'; opacity: 1; color: var(--rad-blue); }
a.sort-link.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--rad-blue); }
a.sort-link:hover         { color: var(--rad-blue); }

/* ═══════════════════════════════════════════════════════════
   10.5 Modal Size Decision in CSS
════════════════════════════════════════════════════════════ */

.rad-modal          { max-width: 560px; }   /* default — up to ~6 fields */
.rad-modal.modal-lg { max-width: 780px; }   /* up to ~10 fields or 1 tab strip */
.rad-modal.modal-sm { max-width: 400px; }   /* delete confirmation, single field */

/* ═══════════════════════════════════════════════════════════
   11.2 Tree Menu CSS
════════════════════════════════════════════════════════════ */

/* ── Tree: expandable parent item ───────────────────────────── */
.s-item.has-children {
  position: relative;
}

/* Chevron — rotates on expand */
.s-item.has-children .s-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--rad-sidebar-text);
  transition: transform .2s ease, color .15s;
}
.s-item.has-children:hover .s-chevron,
.s-item.has-children.open   .s-chevron { color: #fff; }
.s-item.has-children.open   .s-chevron { transform: rotate(90deg); }

/* ── Tree: sub-menu container ───────────────────────────────── */
.s-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.s-sub.open {
  /* max-height set dynamically by JS to scrollHeight */
  max-height: 600px;   /* fallback — JS overrides this */
}
.s-sub .s-item {
  font-size: 12.5px;
  font-weight: 400;
  padding: 6px 10px;
}

/* ── Level 3: nested sub-menu ───────────────────────────────── */
.s-sub .s-sub {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.05);
}
.s-sub .s-sub .s-item {
  font-size: 12px;
  padding: 5px 8px;
}

/* ── Active ancestor: parent stays highlighted when child is
   the current page ─────────────────────────────────────────── */
.s-item.has-children.ancestor {
  color: #fff;
  background: var(--rad-navy-hover);
}
.s-item.has-children.ancestor .s-chevron { color: #fff; }

/* ── Collapsed sidebar: hide sub-menus entirely ─────────────── */
.sidebar.collapsed .s-sub     { display: none; }
.sidebar.collapsed .s-chevron { display: none; }

/* ═══════════════════════════════════════════════════════════
   12.2 jQuery Validation → Radinik CSS Bridge
════════════════════════════════════════════════════════════ */

/* ── Bridge jQuery Validation classes → Radinik tokens ── */

/* Invalid input */
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
  border-color: var(--rad-error) !important;
  box-shadow: none;
}
input.input-validation-error:focus-visible,
select.input-validation-error:focus-visible,
textarea.input-validation-error:focus-visible {
  border-color: var(--rad-error) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.10) !important;
}

/* Valid input (after correction) */
input.input-validation-valid,
select.input-validation-valid,
textarea.input-validation-valid {
  border-color: var(--rad-border);
}

/* Error message span */
span.field-validation-error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--rad-error);
  margin-top: 4px;
}
span.field-validation-error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rad-error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Hide the span when valid (jQuery Validation adds .field-validation-valid) */
span.field-validation-valid { display: none; }

/* Validation summary */
div.validation-summary-errors {
  background: var(--rad-error-tint);
  border: 1px solid var(--rad-error-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--rad-error);
}
div.validation-summary-errors ul {
  margin: 6px 0 0 16px;
  padding: 0;
}
div.validation-summary-errors ul li {
  font-size: 12.5px;
  margin-bottom: 3px;
  line-height: 1.4;
}
div.validation-summary-valid { display: none; }

/* ABP abp-validation-summary tag helper */
.abp-validation-summary {
  /* inherits div.validation-summary-errors styles above */
}

/* ═══════════════════════════════════════════════════════════
   12.5 `[Remote]` Validation (Async Server Check)
════════════════════════════════════════════════════════════ */

/* Remote validation in-flight indicator */
input.input-validation-pending {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239298B0' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10' stroke-dasharray='32' stroke-dashoffset='10'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 36px;
}

/* ═══════════════════════════════════════════════════════════
   12.7 Blazor `EditContext` → Radinik CSS Integration
════════════════════════════════════════════════════════════ */

/* Blazor EditForm invalid state — mirrors jQuery Validation bridge */
.modified.invalid  { border-color: var(--rad-error) !important; }
.modified.valid    { border-color: var(--rad-border); }

/* ═══════════════════════════════════════════════════════════
   13.1 Full Topbar CSS
════════════════════════════════════════════════════════════ */

/* ── Topbar layout ─────────────────────────────────────────────── */
.topbar {
  background: var(--rad-white);
  border-bottom: 1px solid var(--rad-border);
  padding: 0 24px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(26,31,60,.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Environment badge ─────────────────────────────────────────── */
.env-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.env-badge.env-prod { background: var(--rad-success-tint); color: var(--rad-success); }
.env-badge.env-uat  { background: var(--rad-warning-tint); color: var(--rad-warning); }
.env-badge.env-dev  { background: var(--rad-blue-tint);    color: var(--rad-blue); }
.env-badge.env-val  { background: #F3E8FF;                 color: #7C3AED; } /* Validation env */

/* ── Spacer ────────────────────────────────────────────────────── */
.topbar-spacer { flex: 1; }

/* ── Global search ─────────────────────────────────────────────── */
.topbar-search {
  position: relative;
  width: 220px;
  transition: width .2s ease;
}
.topbar-search:focus-within { width: 320px; }
.topbar-search input {
  width: 100%;
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 6px 12px 6px 32px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--rad-text);
  transition: border-color .15s, box-shadow .15s;
}
.topbar-search input:focus-visible {
  outline: none;
  border-color: var(--rad-blue);
  box-shadow: 0 0 0 3px var(--rad-blue-muted);
}
.topbar-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rad-text-muted);
  pointer-events: none;
}

/* Global search results dropdown */
.topbar-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,31,60,.14);
  z-index: 200;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
}
.topbar-search:focus-within .topbar-search-results { display: block; }
.search-result-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
  padding: 10px 14px 4px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--rad-text);
  transition: background .1s;
}
.search-result-item:hover { background: var(--rad-row-hover); }
.search-result-item mark {
  background: var(--rad-blue-tint);
  color: var(--rad-blue);
  border-radius: 2px;
  padding: 0 2px;
  font-style: normal;
}
.search-result-meta {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  margin-left: auto;
}

/* ── Help link ─────────────────────────────────────────────────── */
.topbar-icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--rad-border);
  background: var(--rad-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--rad-text-muted);
  transition: all .15s;
  flex-shrink: 0;
  text-decoration: none;
}
.topbar-icon-btn:hover {
  border-color: var(--rad-blue);
  color: var(--rad-blue);
  background: var(--rad-blue-tint);
}

/* ── Notification bell ─────────────────────────────────────────── */
.topbar-bell {
  position: relative;
}
.topbar-bell .bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  background: var(--rad-error);
  color: #fff;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--rad-white);
}

/* Notification dropdown */
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(26,31,60,.16);
  z-index: 200;
  overflow: hidden;
}
.topbar-bell.open .notif-dropdown { display: block; }
.notif-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--rad-border);
  display: flex; align-items: center; justify-content: space-between;
}
.notif-header-title {
  font-size: 13px; font-weight: 700; color: var(--rad-text);
}
.notif-mark-all {
  font-size: 11.5px; font-weight: 500;
  color: var(--rad-blue); cursor: pointer;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rad-border);
  cursor: pointer;
  transition: background .1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--rad-row-hover); }
.notif-item.unread { background: var(--rad-blue-tint); }
.notif-item.unread:hover { background: #E8EFFE; }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rad-blue);
  flex-shrink: 0;
  margin-top: 5px;
}
.notif-item:not(.unread) .notif-dot { background: transparent; }
.notif-text { font-size: 12.5px; color: var(--rad-text); line-height: 1.4; flex: 1; }
.notif-time { font-size: 11px; color: var(--rad-text-muted); white-space: nowrap; }
.notif-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--rad-border);
  background: var(--rad-surface);
  text-align: center;
  font-size: 12.5px; font-weight: 500; color: var(--rad-blue);
  cursor: pointer;
}

/* ── Organisation name ─────────────────────────────────────────── */
.topbar-org {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rad-text-2);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── App version ───────────────────────────────────────────────── */
.topbar-version {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--rad-text-muted);
  flex-shrink: 0;
  padding: 3px 7px;
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════════
   13.4 Sidebar Branding
════════════════════════════════════════════════════════════ */

/* Sidebar logo text */
.logo-product {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1;
}
.logo-product em {
  color: var(--rad-blue-hover);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   13.5 User Pill Dropdown
════════════════════════════════════════════════════════════ */

.user-nm { font-size: 13px; font-weight: 500; color: var(--rad-text); }

.user-pill-wrap { position: relative; }
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(26,31,60,.16);
  z-index: var(--z-overlay, 400);
  overflow: hidden;
}
.user-pill-wrap.open .user-dropdown { display: block; }

.user-dropdown-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rad-border);
}
.user-dropdown-name { font-size: 13.5px; font-weight: 700; color: var(--rad-text); margin-bottom: 2px; }
.user-dropdown-email { font-size: 11.5px; color: var(--rad-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown-role { font-size: 11px; font-weight: 600; color: var(--rad-blue); margin-top: 3px; letter-spacing: .02em; }
.user-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500; color: var(--rad-text-2);
  cursor: pointer; transition: background .1s; text-decoration: none;
}
.user-dropdown-item:hover { background: var(--rad-row-hover); color: var(--rad-text); }
.user-dropdown-item.danger { color: var(--rad-error); }
.user-dropdown-item.danger:hover { background: var(--rad-error-tint); }
.user-dropdown-divider { height: 1px; background: var(--rad-border); margin: 4px 0; }

/* ═══════════════════════════════════════════════════════════
   14.1 Auth Page Layout Shell
════════════════════════════════════════════════════════════ */

/* ── Auth layout — no sidebar, centred card ─── */
.auth-shell {
  min-height: 100vh;
  background: var(--rad-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid background pattern */
.auth-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle, rgba(26,79,160,0.18) 1px, transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
}

.auth-card {
  background: var(--rad-white);
  border-radius: 16px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  width: 100%;
  max-width: 420px;
  padding: 40px;
  position: relative;
  z-index: 1;
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.auth-logo-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--rad-text);
  letter-spacing: -0.3px;
}
.auth-logo-name em { color: var(--rad-blue); font-style: normal; }
.auth-logo-sub {
  font-size: 11px;
  color: var(--rad-text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--rad-text);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 13px;
  color: var(--rad-text-2);
  margin-bottom: 24px;
  line-height: 1.5;
}

.auth-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--rad-text-muted);
}
.auth-footer a {
  color: var(--rad-blue);
  font-weight: 500;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* Version + copyright footer */
.auth-version-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--rad-border);
  text-align: center;
  font-size: 11px;
  color: var(--rad-text-muted);
  letter-spacing: .01em;
  line-height: 1.7;
}
.auth-version-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--rad-surface);
  color: var(--rad-blue);
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid var(--rad-border);
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Centre button text inside auth card (full-width flex column stretches the button) */
.auth-card .btn { justify-content: center; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 11.5px;
  color: var(--rad-text-muted);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rad-border);
}

/* ── 21 CFR Part 11 compliance notice on auth pages ── */
.auth-cfr-notice {
  background: var(--rad-blue-tint);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 11.5px;
  color: var(--rad-text-2);
  line-height: 1.5;
}
.auth-cfr-notice strong { color: var(--rad-blue); }

/* ── Auth page form helpers ── */
.auth-form-group {
  margin-bottom: 16px;
}

/* Password field with toggle button */
.auth-pw-wrap {
  display: flex;
  align-items: stretch;
}
.auth-pw-wrap .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  flex: 1;
}
.auth-pw-wrap .auth-pw-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  color: var(--rad-text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.auth-pw-wrap .auth-pw-toggle:hover { background: var(--rad-row-hover); color: var(--rad-blue); }

/* Remember me + forgot-password row */
.auth-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.auth-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--rad-text-2);
  cursor: pointer;
}
.auth-check-label input[type="checkbox"] {
  accent-color: var(--rad-blue);
  width: 14px; height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.auth-link {
  font-size: 12.5px;
  color: var(--rad-text-muted);
  text-decoration: none;
}
.auth-link:hover { color: var(--rad-blue); text-decoration: underline; }

/* Provider button (external OAuth) */
.auth-ext-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rad-text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 8px;
}
.auth-ext-btn:hover { border-color: var(--rad-blue); background: var(--rad-blue-tint); color: var(--rad-blue); }

/* ═══════════════════════════════════════════════════════════
   15.2 Signature Modal CSS
════════════════════════════════════════════════════════════ */

/* ── E-signature modal — extends .rad-modal ── */
.sig-modal { max-width: 480px; }

.sig-modal .rad-modal-hdr {
  background: var(--rad-navy);
  border-bottom-color: rgba(255,255,255,.1);
}
.sig-modal .rad-modal-title { color: #fff; }
.sig-modal .rad-modal-title::before { background: var(--rad-blue-hover); }
.sig-modal .rad-modal-close { background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
.sig-modal .rad-modal-close:hover { background: rgba(255,255,255,.2); }

/* Action being signed — shown in the modal body */
.sig-action-banner {
  background: var(--rad-blue-tint);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sig-action-icon { color: var(--rad-blue); flex-shrink: 0; margin-top: 1px; }
.sig-action-text { font-size: 13px; color: var(--rad-text); line-height: 1.5; }
.sig-action-text strong { color: var(--rad-blue); }

/* Meaning of signature */
.sig-meaning {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  font-style: italic;
  margin-top: 14px;
  line-height: 1.5;
}

/* Signed-by display (read-only after capture) */
.sig-captured {
  background: var(--rad-success-tint);
  border: 1px solid var(--rad-success);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--rad-success);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   16.1 Idle Warning CSS
════════════════════════════════════════════════════════════ */

/* ── Idle warning modal — extends .rad-modal ── */
.idle-modal-overlay {
  position: fixed; inset: 0;
  background: var(--rad-overlay);
  backdrop-filter: blur(3px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.idle-modal {
  background: var(--rad-white);
  border-radius: 14px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 20px 60px rgba(26,31,60,.28);
  max-width: 400px;
  width: 100%;
  overflow: hidden;
}

.idle-modal-hdr {
  background: var(--rad-warning-tint);
  border-bottom: 1px solid #F0D080;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.idle-modal-hdr-icon { color: var(--rad-warning); flex-shrink: 0; }
.idle-modal-hdr-title {
  font-size: 14px; font-weight: 700;
  color: var(--rad-text);
}

.idle-modal-body { padding: 22px 24px; text-align: center; }

/* Countdown ring */
.idle-countdown-wrap {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  position: relative;
}
.idle-countdown-ring {
  width: 80px; height: 80px;
  transform: rotate(-90deg);
}
.idle-countdown-ring circle {
  fill: none;
  stroke: var(--rad-border);
  stroke-width: 5;
}
.idle-countdown-ring .progress {
  stroke: var(--rad-warning);
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .5s;
}
.idle-countdown-ring .progress.urgent { stroke: var(--rad-error); }
.idle-countdown-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--rad-text);
  font-family: var(--mono);
}

.idle-message {
  font-size: 13.5px;
  color: var(--rad-text-2);
  line-height: 1.6;
  margin-bottom: 6px;
}
.idle-message strong { color: var(--rad-text); }

.idle-modal-ftr {
  padding: 14px 24px;
  border-top: 1px solid var(--rad-border);
  background: var(--rad-surface);
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   17.2 PDF Viewer CSS
════════════════════════════════════════════════════════════ */

/* ── PDF viewer card ─────────────────────────────────────────── */
.pdf-viewer-card {
  background: var(--rad-white);
  border-radius: 12px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 1px 3px rgba(26,31,60,.07);
  overflow: hidden;
  margin-bottom: 18px;
}

.pdf-viewer-toolbar {
  padding: 10px 18px;
  border-bottom: 1px solid var(--rad-border);
  background: var(--rad-surface);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdf-viewer-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rad-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pdf-viewer-title::before {
  content: '';
  display: block;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--rad-blue);
}
.pdf-viewer-actions { display: flex; gap: 8px; align-items: center; }

.pdf-frame-wrap {
  position: relative;
  background: #525659;
  /* 16:9 ratio placeholder — adjust to A4 or letter aspect ratio */
  /* A4 at 96 DPI ≈ 794 × 1123 px → ratio = 1123/794 ≈ 1.415 */
}
.pdf-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 800px;   /* fixed height — let the iframe scroll internally */
  border: none;
}

/* Loading state while PDF generates */
.pdf-frame-wrap .pdf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #525659;
  gap: 14px;
}
.pdf-loading-text {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font);
}

/* ═══════════════════════════════════════════════════════════
   17.4 Print Stylesheet
════════════════════════════════════════════════════════════ */

@media print {
  /* Hide navigation chrome */
  .sidebar, .topbar, .form-footer,
  .search-btn-row, .pagination,
  .pdf-viewer-toolbar { display: none !important; }

  /* Remove shadows and borders */
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  /* Full width — no sidebar offset */
  .main, .content { width: 100% !important; padding: 0 !important; }
  body { background: #fff !important; }

  /* Show the PDF viewer frame full page */
  .pdf-frame-wrap iframe {
    height: 100vh !important;
    width: 100% !important;
  }

  /* Ensure table rows don't break across pages */
  .rtbl tbody tr { break-inside: avoid; }

  /* Print-visible URL footnote */
  a[href]::after {
    content: none; /* suppress URL printing — report speaks for itself */
  }
}

/* ═══════════════════════════════════════════════════════════
   18.1 ABP Identity Modal Override
════════════════════════════════════════════════════════════ */

/* ── ABP Identity modals (Create/Edit User, Role, etc.) ── */

/* Modal wrapper — ABP uses .modal-dialog */
.modal-dialog .modal-content {
  border-radius: 14px !important;
  border: 1px solid var(--rad-border) !important;
  box-shadow: 0 20px 60px rgba(26,31,60,.22) !important;
  overflow: hidden;
}

/* Modal header */
.modal-dialog .modal-header {
  background: var(--rad-white) !important;
  border-bottom: 1px solid var(--rad-border) !important;
  padding: 18px 24px 16px !important;
  display: flex;
  align-items: center;
}
.modal-dialog .modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: var(--rad-text) !important;
  font-family: var(--font) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-dialog .modal-title::before {
  content: '';
  display: block;
  width: 3px; height: 16px;
  border-radius: 2px;
  background: var(--rad-blue);
}
.modal-dialog .btn-close {
  width: 28px; height: 28px;
  border-radius: 7px !important;
  border: 1px solid var(--rad-border) !important;
  background: var(--rad-surface) !important;
  opacity: 1 !important;
  padding: 0 !important;
  transition: all .15s;
}
.modal-dialog .btn-close:hover {
  border-color: var(--rad-blue) !important;
  background: var(--rad-blue-tint) !important;
}

/* Modal body */
.modal-dialog .modal-body {
  padding: 22px 24px !important;
  font-family: var(--font) !important;
}

/* Modal footer */
.modal-dialog .modal-footer {
  padding: 14px 24px !important;
  border-top: 1px solid var(--rad-border) !important;
  background: var(--rad-surface) !important;
  justify-content: flex-start !important;
}

/* ── ABP Bootstrap form → Radinik form ── */
.modal-dialog .form-control,
.modal-dialog .form-select {
  background: var(--rad-input-bg) !important;
  border: 1px solid var(--rad-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  color: var(--rad-text) !important;
}
.modal-dialog .form-control { padding: 8px 12px !important; }
/* Preserve room for the chevron arrow in select elements */
.modal-dialog .form-select  { padding: 8px 32px 8px 12px !important; }
.modal-dialog .form-control:focus,
.modal-dialog .form-select:focus {
  border-color: var(--rad-blue) !important;
  box-shadow: 0 0 0 3px var(--rad-blue-muted) !important;
}
.modal-dialog .form-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--rad-text-2) !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  font-family: var(--font) !important;
}

/* ── ABP Bootstrap buttons → Radinik buttons ── */
.modal-dialog .btn-primary {
  background: var(--rad-blue) !important;
  border-color: var(--rad-blue) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  box-shadow: 0 2px 8px rgba(26,79,160,.28) !important;
  padding: 8px 17px !important;
}
.modal-dialog .btn-primary:hover {
  background: var(--rad-blue-hover) !important;
  border-color: var(--rad-blue-hover) !important;
}
.modal-dialog .btn-secondary,
.modal-dialog .btn-default {
  background: var(--rad-surface) !important;
  border: 1px solid var(--rad-border) !important;
  color: var(--rad-text-2) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  padding: 8px 17px !important;
  box-shadow: none !important;
}
.modal-dialog .btn-secondary:hover,
.modal-dialog .btn-default:hover {
  border-color: var(--rad-blue) !important;
  color: var(--rad-blue) !important;
}

/* ── Bootstrap nav-tabs inside ABP modals → Radinik tab strip ──
   Targets the User create/edit modal which uses Bootstrap's nav-tabs
   for the User Info / Roles / Password tab groups.               */
.modal-dialog .nav-tabs {
  border-bottom: 1px solid var(--rad-border) !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
}
.modal-dialog .nav-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--rad-text-muted) !important;
  padding: 8px 16px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  transition: color .15s, border-color .15s !important;
  margin-bottom: -1px !important;
}
.modal-dialog .nav-tabs .nav-link:hover {
  color: var(--rad-text) !important;
  border-bottom-color: var(--rad-border) !important;
}
.modal-dialog .nav-tabs .nav-link.active,
.modal-dialog .nav-tabs .nav-item.show .nav-link {
  color: var(--rad-blue) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--rad-blue) !important;
  background: none !important;
}
.modal-dialog .tab-content > .tab-pane {
  font-family: var(--font) !important;
}
/* Role checkboxes inside tab pane */
.modal-dialog .form-check-input {
  width: 15px !important;
  height: 15px !important;
  border: 1.5px solid var(--rad-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
.modal-dialog .form-check-input:checked {
  background-color: var(--rad-blue) !important;
  border-color: var(--rad-blue) !important;
}
.modal-dialog .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--rad-blue-muted) !important;
  border-color: var(--rad-blue) !important;
}
.modal-dialog .form-check-label {
  font-size: 13px !important;
  font-family: var(--font) !important;
  color: var(--rad-text) !important;
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════
   18.2 Permission Tree Override
════════════════════════════════════════════════════════════ */

/* ── ABP permission tree ────────────────────────────────────── */

/* Top-level group headers */
.permission-group-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--rad-text-2) !important;
  padding: 10px 0 6px !important;
  border-bottom: 1px solid var(--rad-border) !important;
  margin-bottom: 4px !important;
  font-family: var(--font) !important;
}

/* Permission checkbox items */
.permission-list .form-check {
  padding: 5px 0 5px 24px !important;
  border-radius: 6px;
  transition: background .1s;
}
.permission-list .form-check:hover {
  background: var(--rad-row-hover);
}
.permission-list .form-check-input {
  accent-color: var(--rad-blue);
  width: 14px; height: 14px;
  cursor: pointer;
}
.permission-list .form-check-label {
  font-size: 13px !important;
  color: var(--rad-text) !important;
  font-family: var(--font) !important;
  cursor: pointer;
}

/* Indent child permissions */
.permission-list .child-permission {
  margin-left: 20px !important;
  border-left: 2px solid var(--rad-border);
  padding-left: 12px !important;
}

/* Select all checkbox */
.permission-select-all .form-check-label {
  font-weight: 600 !important;
  color: var(--rad-blue) !important;
}

/* ═══════════════════════════════════════════════════════════
   18.3 ABP Identity Page Header Override
════════════════════════════════════════════════════════════ */

/* ── ABP Identity page wrapper ────────────────────────────────── */

/* Page toolbar — ABP renders .page-toolbar */
.page-toolbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ABP page title */
.page-toolbar h1,
.page-toolbar .page-header {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
  color: var(--rad-text) !important;
  font-family: var(--font) !important;
  margin: 0 !important;
}

/* ABP toolbar Create button */
.page-toolbar .btn-primary {
  background: var(--rad-blue) !important;
  border-color: var(--rad-blue) !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 17px !important;
  box-shadow: 0 2px 8px rgba(26,79,160,.28) !important;
}

/* ABP data table wrapper */
.abp-crud-page-wrapper {
  background: none !important;
  padding: 0 !important;
}

/* ABP card around the identity table */
.abp-crud-page-wrapper .card,
.identity-page-content .card {
  border-radius: 12px !important;
  border: 1px solid var(--rad-border) !important;
  box-shadow: 0 1px 3px rgba(26,31,60,.07) !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   19. Z-Index Scale
════════════════════════════════════════════════════════════ */

:root {
  /* existing tokens … */

  /* ── Z-index scale ─────────────────────────────────────────── */
  --z-base:       0;      /* Static content                        */
  --z-raised:     10;     /* Slightly elevated cards, hover states  */
  --z-dropdown:   50;     /* Dot-menu dropdowns, select options     */
  --z-sticky:     100;    /* Sticky topbar                          */
  --z-overlay:    200;    /* Search results, notification dropdown  */
  --z-modal:      1000;   /* Modals and modal overlays              */
  --z-signature:  1100;   /* E-signature modal (above regular modals) */
  --z-idle:       2000;   /* Idle session warning (above everything) */
  --z-toast:      9999;   /* Toasts (always on top)                 */
}

.topbar            { z-index: var(--z-sticky); }
.dot-menu-dropdown { z-index: var(--z-dropdown); }
.topbar-search-results,
.notif-dropdown    { z-index: var(--z-overlay); }
.rad-modal-overlay { z-index: var(--z-modal); }
.sig-modal         { z-index: var(--z-signature); }
.idle-modal-overlay{ z-index: var(--z-idle); }
#abp-notification-container,
.abp-toast-container { z-index: var(--z-toast); }

/* ═══════════════════════════════════════════════════════════
   20.2 Audit Trail CSS
════════════════════════════════════════════════════════════ */

/* ── Audit trail card ──────────────────────────────────────── */
.audit-card .card-hdr { background: var(--rad-surface); }

/* Timeline container */
.audit-timeline {
  padding: 6px 22px 4px;
  position: relative;
}
.audit-timeline::before {
  content: '';
  position: absolute;
  left: 42px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rad-border);
}

/* Single event row */
.audit-event {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rad-border);
  position: relative;
}
.audit-event:last-child { border-bottom: none; }

/* Dot on the timeline */
.audit-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rad-blue);
  border: 2px solid var(--rad-white);
  box-shadow: 0 0 0 1px var(--rad-border);
  margin-top: 4px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.audit-dot.dot-create  { background: var(--rad-success); }
.audit-dot.dot-update  { background: var(--rad-blue); }
.audit-dot.dot-delete  { background: var(--rad-error); }
.audit-dot.dot-approve { background: #7C3AED; }
.audit-dot.dot-sign    { background: var(--rad-warning); }
.audit-dot.dot-lock    { background: var(--rad-text-muted); }

/* Event content */
.audit-content { min-width: 0; }
.audit-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.audit-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--rad-text);
}
.audit-user {
  font-size: 12.5px;
  color: var(--rad-blue);
  font-weight: 500;
}
.audit-time {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--mono);
}

/* Changed fields list */
.audit-changes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.audit-change-row {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  gap: 8px;
  font-size: 12px;
  align-items: baseline;
}
.audit-field-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}
.audit-old-val {
  color: var(--rad-error);
  text-decoration: line-through;
  font-family: var(--mono);
  font-size: 12px;
}
.audit-new-val {
  color: var(--rad-success);
  font-family: var(--mono);
  font-size: 12px;
}

/* Signature badge on signed events */
.audit-sig-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F3E8FF;
  color: #7C3AED;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}

/* Reason code badge */
.audit-reason {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--rad-blue-tint);
  color: var(--rad-blue);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════
   21.2 Lock State CSS
════════════════════════════════════════════════════════════ */

/* ── Locked record banner ──────────────────────────────────── */
.record-lock-banner {
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-left: 4px solid var(--rad-text-muted);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.record-lock-banner.lock-approved {
  border-left-color: var(--rad-success);
  background: var(--rad-success-tint);
}
.record-lock-banner.lock-released {
  border-left-color: #7C3AED;
  background: #F3E8FF;
}
.record-lock-banner.lock-archived {
  border-left-color: var(--rad-text-muted);
  background: var(--rad-surface);
}
.lock-banner-icon { flex-shrink: 0; margin-top: 1px; }
.lock-banner-icon.approved { color: var(--rad-success); }
.lock-banner-icon.released { color: #7C3AED; }
.lock-banner-icon.archived { color: var(--rad-text-muted); }
.lock-banner-body { flex: 1; min-width: 0; }
.lock-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--rad-text);
  margin-bottom: 3px;
}
.lock-banner-meta {
  font-size: 12px;
  color: var(--rad-text-2);
  line-height: 1.5;
}
.lock-banner-meta strong { color: var(--rad-text); }
.lock-banner-actions { display: flex; gap: 8px; align-items: center; }

/* Locked fields — visually distinct from disabled */
.form-control.locked {
  background: var(--rad-code-bg) !important;
  border-color: transparent !important;
  color: var(--rad-text) !important;
  cursor: default !important;
  opacity: 1 !important;
  font-weight: 500;
}
select.form-control.locked,
textarea.form-control.locked {
  appearance: none;
  background-image: none !important;
  resize: none;
}

/* Locked card — subtle overlay on card header */
.card.card-locked .card-hdr {
  background: var(--rad-surface);
}
.card.card-locked .card-hdr-title::before {
  background: var(--rad-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   22.2 Label-Value Pair CSS
════════════════════════════════════════════════════════════ */

/* ── Read-only label-value grid ─────────────────────────────── */
.view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.view-field {
  padding: 12px 0;
  border-bottom: 1px solid var(--rad-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.view-field:nth-last-child(-n+2) { border-bottom: none; }  /* last row */
.view-field.span-2 { grid-column: span 2; }

.view-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}
.view-value {
  font-size: 13.5px;
  color: var(--rad-text);
  line-height: 1.4;
}
.view-value.code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--rad-dot-dark);
  font-weight: 500;
}
.view-value.empty {
  color: var(--rad-text-muted);
  font-style: italic;
}

/* ── View page action bar ─────────────────────────────────────── */
.view-page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════
   23.1 File Upload CSS
════════════════════════════════════════════════════════════ */

/* ── File upload — drop zone ────────────────────────────────── */
.file-drop-zone {
  border: 2px dashed var(--rad-border);
  border-radius: 10px;
  background: var(--rad-input-bg);
  padding: 28px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--rad-blue);
  background: var(--rad-blue-tint);
}
.file-drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.file-drop-icon {
  color: var(--rad-text-muted);
  margin-bottom: 10px;
  transition: color .15s;
}
.file-drop-zone:hover .file-drop-icon,
.file-drop-zone.drag-over .file-drop-icon { color: var(--rad-blue); }
.file-drop-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rad-text);
  margin-bottom: 4px;
}
.file-drop-title span { color: var(--rad-blue); }
.file-drop-hint {
  font-size: 12px;
  color: var(--rad-text-muted);
}

/* ── Attached file list ────────────────────────────────────── */
.file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  font-size: 13px;
}
.file-item-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--rad-blue-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--rad-blue);
  flex-shrink: 0;
}
.file-item-icon.pdf-icon  { background: #FEF2F2; color: var(--rad-error); }
.file-item-icon.xlsx-icon { background: #E8F7EE; color: var(--rad-success); }
.file-item-icon.doc-icon  { background: var(--rad-blue-tint); color: var(--rad-blue); }
.file-item-name {
  flex: 1;
  font-weight: 500;
  color: var(--rad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item-size {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  font-family: var(--mono);
  flex-shrink: 0;
}
.file-item-remove {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--rad-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.file-item-remove:hover {
  border-color: var(--rad-error-border);
  background: var(--rad-error-tint);
  color: var(--rad-error);
}

/* Upload progress bar */
.file-item-progress {
  width: 100%;
  height: 3px;
  background: var(--rad-border);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.file-item-progress-bar {
  height: 100%;
  background: var(--rad-blue);
  border-radius: 2px;
  transition: width .3s ease;
}

/* ═══════════════════════════════════════════════════════════
   24.2 Inline Alert CSS
════════════════════════════════════════════════════════════ */

/* ── Page-level banner ─────────────────────────────────────── */
.page-banner {
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.page-banner.banner-info {
  background: var(--rad-blue-tint);
  border: 1px solid rgba(26,79,160,.2);
  color: var(--rad-text);
}
.page-banner.banner-info .banner-icon { color: var(--rad-blue); }

.page-banner.banner-warning {
  background: var(--rad-warning-tint);
  border: 1px solid rgba(240,165,0,.3);
  color: var(--rad-text);
}
.page-banner.banner-warning .banner-icon { color: var(--rad-warning); }

.page-banner.banner-error {
  background: var(--rad-error-tint);
  border: 1px solid var(--rad-error-border);
  color: var(--rad-text);
}
.page-banner.banner-error .banner-icon { color: var(--rad-error); }

.page-banner.banner-success {
  background: var(--rad-success-tint);
  border: 1px solid rgba(39,174,96,.3);
  color: var(--rad-text);
}
.page-banner.banner-success .banner-icon { color: var(--rad-success); }

.banner-icon { flex-shrink: 0; margin-top: 1px; }
.banner-body { flex: 1; min-width: 0; }
.banner-title {
  font-weight: 700;
  color: var(--rad-text);
  margin-bottom: 2px;
}
.banner-text { color: var(--rad-text-2); }
.banner-actions { margin-top: 8px; display: flex; gap: 8px; }
.banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rad-text-muted);
  padding: 0;
  line-height: 1;
  font-size: 16px;
  transition: color .15s;
  margin-top: -1px;
}
.banner-dismiss:hover { color: var(--rad-text); }

/* ═══════════════════════════════════════════════════════════
   25.2 KPI Tile CSS
════════════════════════════════════════════════════════════ */

/* ── KPI / Stat tiles ──────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-tile {
  background: var(--rad-white);
  border-radius: 12px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 1px 3px rgba(26,31,60,.07);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

/* Accent bar — top edge, coloured by type */
.kpi-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}
.kpi-tile.kpi-blue::before    { background: var(--rad-blue); }
.kpi-tile.kpi-success::before { background: var(--rad-success); }
.kpi-tile.kpi-warning::before { background: var(--rad-warning); }
.kpi-tile.kpi-purple::before  { background: #7C3AED; }

.kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}
.kpi-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-tile.kpi-blue    .kpi-icon { background: var(--rad-blue-tint);    color: var(--rad-blue); }
.kpi-tile.kpi-success .kpi-icon { background: var(--rad-success-tint); color: var(--rad-success); }
.kpi-tile.kpi-warning .kpi-icon { background: var(--rad-warning-tint); color: var(--rad-warning); }
.kpi-tile.kpi-purple  .kpi-icon { background: #F3E8FF;                 color: #7C3AED; }

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--rad-text);
  letter-spacing: -.5px;
  line-height: 1;
  font-family: var(--mono);
}

.kpi-trend {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-trend.up   { color: var(--rad-success); }
.kpi-trend.down { color: var(--rad-error); }
.kpi-trend.flat { color: var(--rad-text-muted); }

.kpi-subtext {
  font-size: 12px;
  color: var(--rad-text-muted);
}

/* ── Pending actions list ──────────────────────────────────── */
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rad-border);
}
.action-item:last-child { border-bottom: none; }
.action-priority {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.action-priority.high   { background: var(--rad-error); }
.action-priority.medium { background: var(--rad-warning); }
.action-priority.low    { background: var(--rad-blue); }
.action-body { flex: 1; min-width: 0; }
.action-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rad-text);
  margin-bottom: 2px;
}
.action-meta {
  font-size: 11.5px;
  color: var(--rad-text-muted);
}
.action-due {
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--rad-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.action-due.overdue { color: var(--rad-error); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   27.2 Plant Context & Data Scoping
════════════════════════════════════════════════════════════ */

/* ── Plant indicator in sidebar footer ─────────────────────── */
.sidebar-footer-plant {
  font-size: 11px;
  font-weight: 600;
  color: var(--rad-sidebar-text);
  padding: 8px 12px 4px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-footer-plant .plant-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rad-success);
  flex-shrink: 0;
}
.sidebar-footer-plant .plant-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Multi-plant access indicator */
.sidebar-footer-plant .plant-multi {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rad-warning);
}

/* ═══════════════════════════════════════════════════════════
   28.2 Aggregation Tree CSS
════════════════════════════════════════════════════════════ */

/* ── Aggregation tree ───────────────────────────────────────── */
.agg-tree {
  font-family: var(--font);
  font-size: 13px;
}

/* Each node row */
.agg-node {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

/* Indentation lines */
.agg-indent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 28px;
  flex-shrink: 0;
  position: relative;
}
.agg-indent-line {
  width: 1px;
  background: var(--rad-border);
  flex: 1;
  min-height: 100%;
  position: absolute;
  left: 14px;
  top: 0; bottom: 0;
}
.agg-indent-elbow {
  width: 14px;
  height: 20px;
  border-left: 1px solid var(--rad-border);
  border-bottom: 1px solid var(--rad-border);
  border-radius: 0 0 0 4px;
  flex-shrink: 0;
  margin-top: 10px;
}

/* Node content */
.agg-node-content {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  margin: 3px 0;
  overflow: hidden;
  transition: box-shadow .15s;
}
.agg-node-content:hover {
  box-shadow: 0 2px 8px rgba(26,31,60,.1);
}

/* Node header bar */
.agg-node-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--rad-white);
  cursor: pointer;
  user-select: none;
}
.agg-node-header:hover { background: var(--rad-row-hover); }

/* Level type badge */
.agg-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.agg-level-pallet  { background: #F3E8FF; color: #7C3AED; }
.agg-level-case    { background: var(--rad-blue-tint); color: var(--rad-blue); }
.agg-level-carton  { background: var(--rad-warning-tint); color: var(--rad-warning); }
.agg-level-item    { background: var(--rad-success-tint); color: var(--rad-success); }

/* Serial number */
.agg-serial {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rad-dot-dark);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* GTIN + batch */
.agg-meta {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Plant origin tag — shown on cross-plant nodes */
.agg-plant-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rad-text-2);
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* Status indicator */
.agg-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agg-status.commissioned  { background: var(--rad-success); }
.agg-status.aggregated    { background: var(--rad-blue); }
.agg-status.shipped       { background: #7C3AED; }
.agg-status.decommissioned{ background: var(--rad-error); }
.agg-status.sampled       { background: var(--rad-warning); }

/* Expand/collapse chevron */
.agg-chevron {
  color: var(--rad-text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.agg-node-content.open .agg-chevron { transform: rotate(90deg); }

/* Children container */
.agg-children {
  padding: 0 0 6px 28px;
  display: none;
}
.agg-node-content.open + .agg-children,
.agg-children.open { display: block; }

/* Child count badge */
.agg-count {
  font-size: 11px;
  color: var(--rad-text-muted);
  background: var(--rad-surface);
  border: 1px solid var(--rad-border);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* Truncated items indicator */
.agg-truncated {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--rad-blue);
  cursor: pointer;
  font-weight: 500;
}
.agg-truncated:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   29.2 EPCIS Timeline CSS
════════════════════════════════════════════════════════════ */

/* ── EPCIS timeline modal content ──────────────────────────── */
.epcis-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Event row */
.epcis-event {
  border-bottom: 1px solid var(--rad-border);
  cursor: pointer;
  transition: background .1s;
}
.epcis-event:last-child { border-bottom: none; }
.epcis-event:hover .epcis-event-header { background: var(--rad-row-hover); }
.epcis-event.open .epcis-event-header  { background: var(--rad-blue-tint); }

.epcis-event-header {
  display: grid;
  grid-template-columns: 100px 140px 1fr 120px 80px;
  gap: 10px;
  align-items: center;
  padding: 11px 16px;
  transition: background .1s;
}

/* Event type badge */
.epcis-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.epcis-type.object      { background: var(--rad-blue-tint);    color: var(--rad-blue); }
.epcis-type.aggregation { background: #F3E8FF;                 color: #7C3AED; }
.epcis-type.transaction { background: var(--rad-success-tint); color: var(--rad-success); }
.epcis-type.transform   { background: var(--rad-warning-tint); color: var(--rad-warning); }

/* Business step */
.epcis-step {
  font-size: 12px;
  color: var(--rad-text-2);
  font-weight: 500;
}

/* Disposition */
.epcis-disposition {
  font-size: 12px;
  color: var(--rad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Timestamp */
.epcis-time {
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--rad-text-muted);
  white-space: nowrap;
}

/* Submission status */
.epcis-sub-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}
.epcis-sub-status.sent      { color: var(--rad-success); }
.epcis-sub-status.pending   { color: var(--rad-warning); }
.epcis-sub-status.failed    { color: var(--rad-error); }
.epcis-sub-status.acked     { color: #7C3AED; }

/* Expand chevron */
.epcis-chevron {
  justify-self: end;
  color: var(--rad-text-muted);
  transition: transform .2s;
}
.epcis-event.open .epcis-chevron { transform: rotate(90deg); }

/* Expanded detail panel */
.epcis-detail {
  display: none;
  padding: 14px 16px;
  background: var(--rad-surface);
  border-top: 1px solid var(--rad-border);
}
.epcis-event.open .epcis-detail { display: block; }

/* Detail tabs: Readable | Raw XML/JSON */
.epcis-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rad-border);
  margin-bottom: 14px;
}
.epcis-detail-tab {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rad-text-muted);
  padding: 7px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.epcis-detail-tab.active {
  color: var(--rad-blue);
  border-bottom-color: var(--rad-blue);
  font-weight: 600;
}

/* Raw event code block */
.epcis-raw {
  background: var(--rad-code-bg);
  border-radius: 8px;
  padding: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rad-dot-dark);
  overflow-x: auto;
  white-space: pre;
  max-height: 280px;
  overflow-y: auto;
}

/* Readable key-value pairs */
.epcis-readable {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
}
.epcis-readable-key {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
  align-self: start;
  padding-top: 1px;
}
.epcis-readable-val {
  font-size: 13px;
  color: var(--rad-text);
  font-family: var(--mono);
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════
   30.1 Inline Integration Status (on records)
════════════════════════════════════════════════════════════ */

/* ── Integration status bar ─────────────────────────────────── */
.integration-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.int-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
/* SAP */
.int-status-pill.int-sap {
  background: var(--rad-surface);
  border-color: var(--rad-border);
  color: var(--rad-text-2);
}
/* TraceLink */
.int-status-pill.int-tracelink {
  background: var(--rad-surface);
  border-color: var(--rad-border);
  color: var(--rad-text-2);
}
/* States */
.int-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.int-dot.synced  { background: var(--rad-success); }
.int-dot.pending { background: var(--rad-warning); }
.int-dot.failed  { background: var(--rad-error); }
.int-dot.na      { background: var(--rad-border); }

.int-status-pill.has-error {
  background: var(--rad-error-tint);
  border-color: var(--rad-error-border);
  color: var(--rad-error);
  cursor: pointer;
}
.int-status-pill.has-error:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════
   30.2 Integration Monitor Page
════════════════════════════════════════════════════════════ */

/* ── Integration monitor ────────────────────────────────────── */
.int-monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.int-system-tile {
  background: var(--rad-white);
  border-radius: 12px;
  border: 1px solid var(--rad-border);
  box-shadow: 0 1px 3px rgba(26,31,60,.07);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.int-system-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.int-system-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--rad-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.int-system-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}
.int-conn-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}
.int-conn-status.connected    { color: var(--rad-success); }
.int-conn-status.disconnected { color: var(--rad-error); }
.int-conn-status.degraded     { color: var(--rad-warning); }

.int-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rad-border);
}
.int-stat-item { display: flex; flex-direction: column; gap: 2px; }
.int-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}
.int-stat-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--rad-text);
  letter-spacing: -.3px;
}
.int-stat-value.has-failures { color: var(--rad-error); }
.int-stat-value.all-good     { color: var(--rad-success); }

.int-last-sync {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════
   33.1 CSS
════════════════════════════════════════════════════════════ */

/* ── ABP page progress bar ───────────────────────────────────── */
#nprogress .bar {
  background: var(--rad-blue) !important;
  height: 3px !important;
  box-shadow: none !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--rad-blue), 0 0 5px var(--rad-blue) !important;
}
#nprogress .spinner-icon {
  border-top-color:  var(--rad-blue) !important;
  border-left-color: var(--rad-blue) !important;
}

/* ABP setBusy overlay — shown over a card/element while loading */
.abp-busy-indicator {
  background: rgba(255,255,255,0.75) !important;
  border-radius: inherit;
}
.abp-busy-indicator .abp-busy-message {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--rad-text-2) !important;
}
.abp-busy-indicator i {
  color: var(--rad-blue) !important;
}

/* ═══════════════════════════════════════════════════════════
   34.2 Settings Page Shell CSS
════════════════════════════════════════════════════════════ */

/* ── Settings page layout ────────────────────────────────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

/* Left: category navigation */
.settings-nav {
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 80px;   /* topbar height + margin */
}
.settings-nav-section {
  padding: 12px 14px 6px;
  border-bottom: 1px solid var(--rad-border);
}
.settings-nav-section:last-child { border-bottom: none; }
.settings-nav-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
  padding: 0 6px;
  margin-bottom: 4px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rad-text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  margin-bottom: 2px;
}
.settings-nav-item:hover  { background: var(--rad-surface); color: var(--rad-text); }
.settings-nav-item.active { background: var(--rad-blue-tint); color: var(--rad-blue); font-weight: 600; }

/* Right: settings content */
.settings-content { min-width: 0; }

/* Global / Per-plant scope indicator on a setting group */
.settings-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
}
.settings-scope-badge.global    { background: var(--rad-blue-tint); color: var(--rad-blue); }
.settings-scope-badge.per-plant { background: var(--rad-warning-tint); color: var(--rad-warning); }

/* Plant override indicator — shown when a setting has a plant-level override */
.settings-overridden {
  font-size: 11px;
  color: var(--rad-warning);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   35.1 CSS
════════════════════════════════════════════════════════════ */

/* ── Serial range display ────────────────────────────────────── */
.serial-range-block {
  background: var(--rad-code-bg);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.serial-range-row {
  display: grid;
  grid-template-columns: 200px 200px 100px 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
}

.serial-range-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
  margin-bottom: 4px;
}

.serial-range-value {
  color: var(--rad-dot-dark);
  font-weight: 500;
}
.serial-range-separator {
  color: var(--rad-text-muted);
  font-weight: 400;
  text-align: center;
}
.serial-range-count {
  color: var(--rad-text-2);
  font-family: var(--font);
  font-size: 12px;
}
.serial-range-status {
  justify-self: end;
}

/* GS1 identifier formatting helpers */
.gtin-formatted {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--rad-dot-dark);
  font-weight: 500;
  letter-spacing: .02em;
}
.sscc-formatted {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rad-dot-dark);
}

/* ═══════════════════════════════════════════════════════════
   36.1 Exception Severity & Status Tokens
════════════════════════════════════════════════════════════ */

/* ── Exception severity badges ───────────────────────────────── */
.exc-severity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.exc-severity.critical { background: #FEE2E2; color: #991B1B; }
.exc-severity.high     { background: var(--rad-error-tint); color: var(--rad-error); }
.exc-severity.medium   { background: var(--rad-warning-tint); color: var(--rad-warning); }
.exc-severity.low      { background: var(--rad-blue-tint); color: var(--rad-blue); }
.exc-severity.info     { background: var(--rad-surface); color: var(--rad-text-muted); }

/* Exception status */
.exc-status { /* uses standard .tag classes */ }

/* Exception resolution card */
.exc-resolution {
  background: var(--rad-success-tint);
  border: 1px solid rgba(39,174,96,.3);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--rad-text-2);
}
.exc-resolution-title {
  font-weight: 700;
  color: var(--rad-success);
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   37.1 Scan Input CSS
════════════════════════════════════════════════════════════ */

/* ── Scanner input field ─────────────────────────────────────── */
.scan-input-wrap {
  position: relative;
}
.scan-input-wrap .form-control {
  padding-left: 38px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  border-width: 2px;
  transition: border-color .1s, box-shadow .1s, background .1s;
}

/* Scan icon */
.scan-input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rad-text-muted);
  pointer-events: none;
  transition: color .1s;
}

/* States */
.scan-input-wrap.scan-success .form-control {
  border-color: var(--rad-success) !important;
  background: var(--rad-success-tint) !important;
  box-shadow: 0 0 0 3px rgba(39,174,96,0.15) !important;
}
.scan-input-wrap.scan-success .scan-input-icon { color: var(--rad-success); }

.scan-input-wrap.scan-error .form-control {
  border-color: var(--rad-error) !important;
  background: var(--rad-error-tint) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.scan-input-wrap.scan-error .scan-input-icon { color: var(--rad-error); }

.scan-input-wrap.scan-processing .form-control {
  border-color: var(--rad-warning) !important;
  background: var(--rad-warning-tint) !important;
}

/* Feedback message below the input */
.scan-feedback {
  font-size: 12px;
  font-family: var(--mono);
  margin-top: 6px;
  min-height: 18px;
  transition: color .1s;
}
.scan-feedback.success { color: var(--rad-success); font-weight: 600; }
.scan-feedback.error   { color: var(--rad-error);   font-weight: 600; }
.scan-feedback.info    { color: var(--rad-text-muted); }

/* ═══════════════════════════════════════════════════════════
   38.1 Stepper CSS
════════════════════════════════════════════════════════════ */

/* ── Batch status stepper ────────────────────────────────────── */
.status-stepper {
  display: flex;
  align-items: flex-start;
  padding: 20px 22px;
  overflow-x: auto;
  gap: 0;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 110px;
  position: relative;
}

/* Connector line between steps */
.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--rad-border);
  z-index: 0;
}
.stepper-step.completed:not(:last-child)::after {
  background: var(--rad-blue);
}

/* Step circle */
.stepper-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--rad-border);
  background: var(--rad-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--rad-text-muted);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: all .2s;
}
.stepper-step.completed .stepper-circle {
  background: var(--rad-blue);
  border-color: var(--rad-blue);
  color: #fff;
}
.stepper-step.active .stepper-circle {
  background: var(--rad-white);
  border-color: var(--rad-blue);
  border-width: 3px;
  color: var(--rad-blue);
}
.stepper-step.error .stepper-circle {
  background: var(--rad-error);
  border-color: var(--rad-error);
  color: #fff;
}

/* Step label */
.stepper-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rad-text-muted);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
}
.stepper-step.completed .stepper-label { color: var(--rad-blue); }
.stepper-step.active    .stepper-label { color: var(--rad-text); }
.stepper-step.error     .stepper-label { color: var(--rad-error); }

/* Step meta — timestamp + signatory */
.stepper-meta {
  font-size: 10.5px;
  color: var(--rad-text-muted);
  text-align: center;
  margin-top: 4px;
  line-height: 1.4;
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════
   39.1 Signature Block CSS
════════════════════════════════════════════════════════════ */

/* ── Printed signature block ─────────────────────────────────── */
.sig-print-block {
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 20px;
  background: var(--rad-surface);
}
.sig-print-block-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rad-border);
}
.sig-print-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sig-print-field { display: flex; flex-direction: column; gap: 3px; }
.sig-print-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}
.sig-print-value {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rad-text);
  font-family: var(--mono);
}
.sig-print-meaning {
  grid-column: span 4;
  font-size: 11.5px;
  color: var(--rad-text-2);
  font-style: italic;
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--rad-border);
  margin-top: 6px;
}

/* Print-only visibility */
@media screen { .sig-print-block { display: block; } }
@media print  {
  .sig-print-block {
    border: 1px solid #999 !important;
    background: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .sig-print-meaning { border-top-color: #999 !important; }
}

/* ═══════════════════════════════════════════════════════════
   40.1 CSS
════════════════════════════════════════════════════════════ */

/* ── Confirmation phrase input ───────────────────────────────── */
.confirm-phrase-wrap {
  margin-top: 14px;
}
.confirm-phrase-instruction {
  font-size: 13px;
  color: var(--rad-text-2);
  margin-bottom: 8px;
  line-height: 1.5;
}
.confirm-phrase-instruction code {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--rad-dot-dark);
  background: var(--rad-code-bg);
  padding: 1px 5px;
  border-radius: 4px;
}
.confirm-phrase-input {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  letter-spacing: .02em;
}
.confirm-phrase-input.phrase-match {
  border-color: var(--rad-success) !important;
  background: var(--rad-success-tint) !important;
}

/* ═══════════════════════════════════════════════════════════
   41. ABP Feature Management Override
════════════════════════════════════════════════════════════ */

/* ── ABP Feature Management modal ────────────────────────────── */
/* Reuses §18.1 modal-dialog overrides — no additional CSS needed */

/* Feature group headers */
.feature-group-header,
abp-feature-group-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--rad-text-2) !important;
  padding: 10px 0 6px !important;
  border-bottom: 1px solid var(--rad-border) !important;
  margin-bottom: 4px !important;
  font-family: var(--font) !important;
}

/* Feature items — reuse permission tree styles */
.feature-list .form-check           { padding: 5px 0 5px 24px !important; border-radius: 6px; transition: background .1s; }
.feature-list .form-check:hover     { background: var(--rad-row-hover); }
.feature-list .form-check-input     { accent-color: var(--rad-blue); width: 14px; height: 14px; cursor: pointer; }
.feature-list .form-check-label     { font-size: 13px !important; color: var(--rad-text) !important; font-family: var(--font) !important; cursor: pointer; }

/* Feature value input (text/number features) */
.feature-list .feature-value-input  { /* inherits .form-control via §18.1 */ }

/* ═══════════════════════════════════════════════════════════
   42. ABP `ObjectExtending` Extra Fields
════════════════════════════════════════════════════════════ */

/* ── Extra fields injected by ObjectExtensionManager ─────────── */

/* ABP wraps extra fields in .row > .col — flatten to Radinik form-group */
.modal-dialog .extra-properties .row  { display: contents; }
.modal-dialog .extra-properties [class*="col-"] { display: contents; }

.modal-dialog .extra-properties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rad-border);
}

/* Section label above the extra fields block */
.modal-dialog .extra-properties::before {
  content: attr(data-section-label);
  grid-column: span 2;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rad-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   43.1 Download Link CSS
════════════════════════════════════════════════════════════ */

/* ── Read-only attachment list (view mode) ───────────────────── */
.attachment-list { display: flex; flex-direction: column; gap: 8px; }

.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.attachment-item:hover {
  border-color: var(--rad-blue);
  box-shadow: 0 2px 8px rgba(26,79,160,.1);
}
.attachment-item-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--rad-blue-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--rad-blue);
  flex-shrink: 0;
}
.attachment-item-icon.pdf  { background: #FEF2F2; color: var(--rad-error); }
.attachment-item-icon.xlsx { background: #E8F7EE; color: var(--rad-success); }
.attachment-item-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--rad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-item-meta {
  font-size: 11.5px;
  color: var(--rad-text-muted);
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
}
.attachment-download-icon {
  color: var(--rad-blue);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   44.1 Wizard CSS
════════════════════════════════════════════════════════════ */

/* ── Wizard step indicator ───────────────────────────────────── */
.wizard-header {
  background: var(--rad-white);
  border: 1px solid var(--rad-border);
  border-radius: 12px;
  padding: 20px 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(26,31,60,.07);
}
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  gap: 8px;
}

/* Connector */
.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--rad-border);
  z-index: 0;
}
.wizard-step.completed:not(:last-child)::after { background: var(--rad-blue); }

/* Circle */
.wizard-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--rad-border);
  background: var(--rad-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--rad-text-muted);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.wizard-step.completed .wizard-circle {
  background: var(--rad-blue);
  border-color: var(--rad-blue);
  color: #fff;
}
.wizard-step.active .wizard-circle {
  border-color: var(--rad-blue);
  border-width: 3px;
  color: var(--rad-blue);
  font-weight: 800;
}

.wizard-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--rad-text-muted);
  text-align: center;
}
.wizard-step.completed .wizard-step-label { color: var(--rad-blue); }
.wizard-step.active    .wizard-step-label { color: var(--rad-text); font-weight: 600; }

/* Wizard content card */
.wizard-content { @* same as .card *@ }

/* Wizard navigation footer */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 8px;
}
.wizard-footer-left  { display: flex; gap: 10px; }
.wizard-footer-right { display: flex; gap: 10px; }
.wizard-step-counter {
  font-size: 12.5px;
  color: var(--rad-text-muted);
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════
   Batch report — key/value summary + table totals row
════════════════════════════════════════════════════════════ */

/* Borderless label/value spec sheet (batch information summary) */
.kv-table td.kv-label {
  width: 1%; white-space: nowrap;
  font-size: 12px; font-weight: 600;
  color: var(--rad-text-muted);
}
.kv-table td { font-weight: 600; }
.kv-table tbody tr:hover td { background: transparent; }

/* Emphasised totals row at the foot of a report table */
tr.kv-total td {
  font-weight: 700;
  background: var(--rad-thead-bg);
  border-top: 2px solid var(--rad-blue);
  border-bottom: none;
}
tr.kv-total:hover td { background: var(--rad-thead-bg); }

/* ═══════════════════════════════════════════════════════════
   Serial pool status pill — two axes in one token
════════════════════════════════════════════════════════════ */

/* Administrative (inactive) and operational (running / paused / flushing /
   faulted) states collapse into a single pill, because an operator reading a
   pool list wants one answer: is this pool serving serials right now? */
.pool-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pool-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pool-status.running  { background: var(--rad-success-tint); color: var(--rad-success); }
.pool-status.paused   { background: var(--rad-warning-tint); color: var(--rad-warning); }
.pool-status.flushing { background: var(--rad-blue-tint);    color: var(--rad-blue); }
.pool-status.faulted  { background: var(--rad-error-tint);   color: var(--rad-error); }
.pool-status.inactive { background: var(--rad-surface);      color: var(--rad-text-muted); }

/* Print template lifecycle, on the same pill because it answers the same shape of
   question: can this record be used right now? Draft reads as "not yet" rather than
   as a fault, so it takes the muted surface rather than a warning tint. */
.pool-status.draft        { background: var(--rad-surface);       color: var(--rad-text-muted); }
.pool-status.approved     { background: var(--rad-success-tint);  color: var(--rad-success); }
.pool-status.discontinued { background: var(--rad-error-tint);    color: var(--rad-error); }

/* Flushing is the one transient state, so its dot pulses — the row is telling
   the operator to wait rather than to act. */
.pool-status.flushing::before { animation: poolFlushPulse 1.2s ease-in-out infinite; }

@keyframes poolFlushPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .pool-status.flushing::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   55. Serial pool stock bar — one allocation's level
════════════════════════════════════════════════════════════ */

/* Two facts in one strip: how much stock there is, and how much of it can
   actually be drawn. Available and Allocated are separate segments rather than
   one total because TotalQty is stock in the pool's custody — an allocation
   sitting at its ceiling entirely in reserved stock cannot serve a single
   request, and a single bar would show that as full. */
.stock-bar {
  position: relative;
  margin: 6px 0 26px;
}

.stock-bar-track {
  display: flex;
  height: 12px;
  border-radius: 6px;
  background: var(--rad-code-bg);
  border: 1px solid var(--rad-border);
  overflow: hidden;
}

.stock-bar-seg { height: 100%; }
.stock-bar-seg.available { background: var(--rad-blue); }

/* Grey, not a second accent: allocated stock is in custody but cannot be drawn,
   and colouring it as a variant of Available invites reading the two together. */
.stock-bar-seg.allocated { background: var(--rad-text-muted); }

/* At or below the minimum the allocation is due for replenishment. Amber says
   that without claiming anything has failed — the top-up may already be queued. */
.stock-bar-seg.available.below-min { background: var(--rad-warning); }

/* Markers ride above the track so they stay visible over a filled bar. */
.stock-bar-marker {
  position: absolute;
  top: -3px;
  width: 0;
  height: 18px;
  border-left: 2px solid var(--rad-text-2);
}
.stock-bar-marker.min { border-left-style: dashed; }

/* A minimum of zero puts the marker on the left edge, where a centred label hangs
   off the card. Applied by the page when the marker is within a label's reach of
   the start. */
.stock-bar-marker.at-start .stock-bar-marker-label { transform: none; }

.stock-bar-marker-label {
  position: absolute;
  top: 20px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--rad-text-muted);
}

/* The ceiling marker sits at the right edge, so its label would overflow the
   card; it is anchored inward instead. */
.stock-bar-marker.max .stock-bar-marker-label { transform: translateX(-100%); }

.stock-bar-legend {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--rad-text-2);
}
.stock-bar-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.stock-bar-swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex: none;
}
.stock-bar-swatch.available { background: var(--rad-blue); }
.stock-bar-swatch.available.below-min { background: var(--rad-warning); }
.stock-bar-swatch.allocated { background: var(--rad-text-muted); }

/* The §30.2 stat value below the bar takes the bar's own amber at the threshold.
   .has-failures would make it red, and red on this page means a faulted pool (§54)
   — an allocation due for a top-up has not failed at anything. */
.int-stat-value.below-min { color: var(--rad-warning); }

/* An allocation taken out of service keeps its stock and its history, so it is
   dimmed rather than hidden. */
.level-card-inactive { opacity: .6; }

/* ── Pack-level print template assignment (§4.5) ────────────────────────────
   A sub-row inside the packaging grid rather than a card of its own: what a
   level prints belongs to the level, and separating them would make the reader
   match two grids up by level number. Inset and on the page ground so the
   nesting reads without a second border everywhere. */
.pack-level-templates-row > td {
  background: var(--rad-surface);
  padding: 10px 12px 10px 28px;
}

.pack-level-templates-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

/* The nested grid carries the level's own visual weight, not the outer table's:
   a second set of full-strength header rules reads as two tables of equal rank. */
.pack-level-templates-table { margin-bottom: 0; }
.pack-level-templates-table > thead > tr > th {
  font-size: 10.5px;
  padding-top: 0;
  padding-bottom: 6px;
}
.pack-level-templates-table > tbody > tr:last-child > td { border-bottom: none; }

/* Shown only while the level has nothing assigned. A level that prints nothing
   is a real configuration, not an error — but it should not be a silent one. */
.pack-level-templates-empty { padding-top: 2px; }