/* === Inter webfont (Sprint 2 / Reese) ============================= */
/* Self-hosted Inter v20 variable font, Latin subset only (≈48KB). Non-Latin
   characters fall back to system-ui — acceptable trade-off for the ≤80KB
   font budget on this internal admin tool. */
@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    src:url('/fonts/inter/Inter-Variable-Latin.woff2') format('woff2-variations'),
        url('/fonts/inter/Inter-Variable-Latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* === Theme overrides (Sprint 2 / Reese) =========================== */
/* Bootstrap-5 default primary (#0d6efd) reads as harsh in dashboard density.
   Swap to a darker navy. Variable swap covers .btn-primary, .text-primary,
   .bg-primary, .border-primary, .table-active highlight, etc. */
:root{
    --bs-primary:#0d4c8b;
    --bs-primary-rgb:13,76,139;
    --bs-link-color:#0d4c8b;
    --bs-link-hover-color:#093965;
    --bs-body-font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --bs-body-font-weight:400;
    --bs-body-line-height:1.5;
}

/* Bootstrap doesn't auto-recompute hover/active hues from the var — pin them. */
.btn-primary{--bs-btn-bg:#0d4c8b;--bs-btn-border-color:#0d4c8b;--bs-btn-hover-bg:#093965;--bs-btn-hover-border-color:#093965;--bs-btn-active-bg:#072e54;--bs-btn-active-border-color:#072e54;--bs-btn-disabled-bg:#0d4c8b;--bs-btn-disabled-border-color:#0d4c8b}
.btn-outline-primary{--bs-btn-color:#0d4c8b;--bs-btn-border-color:#0d4c8b;--bs-btn-hover-bg:#0d4c8b;--bs-btn-hover-border-color:#0d4c8b;--bs-btn-active-bg:#0d4c8b;--bs-btn-active-border-color:#0d4c8b}

/* Typography rebalance — body 400, headers 500, page titles 600. Reserve
   nothing for 700+. Inter looks better slightly tightened at heading sizes. */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500;letter-spacing:-0.01em}
h1,.h1,h4,.h4{font-weight:600}
.fw-bold{font-weight:600!important}

/* Dashboard density: numeric columns get tabular figures for vertical
   alignment of IDs, totals, dates. */
.font-monospace,
.orders-tab-shell .orders-id,
.orders-tab-shell .orders-date,
.orders-tab-shell .orders-table td.text-end,
#registrationsTable td:nth-child(3),
#registrationsTable td:nth-child(4),
#registrationsTable td:nth-child(5),
#registrationsTable td:nth-child(6),
#accountsTable td:nth-child(3),
#accountsTable td:nth-child(4),
#accountsTable td:nth-child(5),
#accountsTable td:nth-child(6){font-variant-numeric:tabular-nums}

/* === Layout (unchanged from prior baseline) ======================= */
/* Top navbar — 3-column flex so title stays centered independent of logo/actions width */
.sam-topbar{display:flex;align-items:center;min-height:56px}

/* ============================================================
   Fit-to-viewport layout
   ----------------------------------------------------------------
   The body is locked to viewport height — pages never produce a
   browser-level scrollbar. .main-content owns the default scroll
   when a page's content overflows. Pages that opt in via
   body.viewport-page (Customer Search etc.) take it further: main
   itself doesn't scroll; instead each panel/tab inside is its own
   scroll container. The topbar is position:fixed (Bootstrap
   .fixed-top); .sam-page-shell carries the 56px top padding so the
   scroll container (and its scrollbar) starts BELOW the topbar
   rather than running its track up behind it.
   ============================================================ */
html,body{height:100%;margin:0;overflow:hidden}
/* padding-top clears the fixed 56px topbar HERE (not on .main-content) so the
   scroll container starts below the header — otherwise .main-content's scrollbar
   track runs the full height and visually passes behind the topbar. box-sizing
   is border-box (Bootstrap Reboot), so height stays 100vh. */
.sam-page-shell{height:100vh;padding-top:56px;display:flex;flex-direction:column;overflow:hidden}
#wrapper{min-height:0;overflow:hidden}
.main-content{min-height:0;overflow-y:auto}

/* Per-panel scrolling for pages that opt into fit-to-viewport */
body.viewport-page .main-content{overflow:hidden;display:flex;flex-direction:column}
body.viewport-page #customerSearchRow{flex:1 1 auto;min-height:0;overflow:hidden}
body.viewport-page #customerSearchPanelCol,
body.viewport-page #customerProfileCol{display:flex;flex-direction:column;height:100%;overflow:hidden}
/* Two stacked cards: search card at natural height, results card fills + scrolls. */
body.viewport-page #customerSearchPanelCol > #customerSearchCard{flex:0 0 auto}
body.viewport-page #customerSearchPanelCol > #customerResultsCard{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #customerSearchPanelCol > #customerResultsCard > .card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #searchResults{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
body.viewport-page #profileArea{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
/* .tab-content is a flex column so the active .tab-pane stretches via flex.
   height:100% on a flex-grown parent isn't "definite" per the CSS spec, so
   percentage heights on children fall back to auto — use flex sizing instead. */
body.viewport-page #profileArea > .tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #profileArea > .tab-content > .tab-pane.active.show{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:.25rem}
/* Products dashboard — same fit-to-viewport pattern as Customer Search. */
body.viewport-page #productSearchRow{flex:1 1 auto;min-height:0;overflow:hidden}
body.viewport-page #productSearchPanelCol,
body.viewport-page #productDetailCol{display:flex;flex-direction:column;height:100%;overflow:hidden}
/* Two stacked cards: filter card sits at natural height, results card fills the
   remaining space and scrolls internally. */
body.viewport-page #productSearchPanelCol > #productFilterCard{flex:0 0 auto}
body.viewport-page #productSearchPanelCol > #productResultsCard{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #productSearchPanelCol > #productResultsCard > .card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #productSearchResults{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
/* SKU dashboard — same fit-to-viewport + two-card pattern as Products. */
body.viewport-page #skuSearchRow{flex:1 1 auto;min-height:0;overflow:hidden}
body.viewport-page #skuSearchPanelCol,
body.viewport-page #skuDetailCol{display:flex;flex-direction:column;height:100%;overflow:hidden}
body.viewport-page #skuSearchPanelCol > #skuSearchCard{flex:0 0 auto}
body.viewport-page #skuSearchPanelCol > #skuResultsCard{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #skuSearchPanelCol > #skuResultsCard > .card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.viewport-page #skuSearchResults{flex:1 1 auto;min-height:0;overflow-y:auto}
body.viewport-page #skuSearchResults .sku-results-scroll{max-height:none;overflow:visible}
body.viewport-page #skuDetailCol > #skuDetailArea{flex:1 1 auto;min-height:0;overflow-y:auto}
body.viewport-page #productDetailCol > #productDetailArea{flex:1 1 auto;min-height:0;overflow-y:auto}
.sam-topbar-left{flex:0 0 260px}
.sam-topbar-center{flex:1 1 auto}
.sam-topbar-right{flex:0 0 260px;display:flex;justify-content:flex-end;align-items:center}
.sam-avatar-btn{border:0;background:transparent;line-height:1}
.sam-avatar-btn:focus{box-shadow:none}
.sam-avatar-btn::after{display:none}
.sam-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bs-primary);color:#fff;font-weight:600;font-size:.85rem;letter-spacing:.5px}
.sam-topbar-title{color:#fff;font-size:1.15rem;font-weight:600;letter-spacing:.3px}
.sam-topbar .navbar-brand img{display:block}
@media(max-width:767.98px){.sam-topbar-title{font-size:.95rem}.sam-topbar-left,.sam-topbar-right{flex-basis:auto}}

/* Sidebar */
.sidebar{width:260px;min-height:100vh;padding-top:56px;position:fixed;top:0;left:0;overflow-y:auto;transition:margin-left .3s ease;z-index:1000}
.sidebar .nav-link{color:rgba(255,255,255,.7);padding:.5rem 1rem;font-size:.9rem;border-radius:.25rem;margin:1px .5rem;font-weight:400}
.sidebar .nav-link:hover{color:#fff;background-color:rgba(255,255,255,.1)}
.sidebar .nav-link.active{color:#fff;background-color:rgba(13,76,139,.6);font-weight:500}
.sidebar .nav-link .bi-chevron-down{transition:transform .2s}
.sidebar .nav-link.collapsed .bi-chevron-down{transform:rotate(-90deg)}

/* Main content — the 56px topbar clearance now lives on .sam-page-shell; only
   the visual gap below the topbar remains here. The page bg is a touch darker
   than the cards (was #f8f9fa, nearly the same white as the cards) so the white
   cards/sections separate instead of bleeding together. */
.main-content{margin-left:260px;padding-top:1rem;background-color:#e9ecf1}
.restricted-layout .main-content{margin-left:0}

/* Give the shadow-sm cards a defined edge against the page bg. They use
   .border-0 (which is !important), so the border override needs the
   higher-specificity .card.shadow-sm selector + !important to win. A slightly
   stronger, cooler shadow adds depth without shouting. */
.card.shadow-sm{
    border:1px solid #d7dce3 !important;
    box-shadow:0 1px 3px rgba(20,35,60,.10),0 1px 2px rgba(20,35,60,.06) !important;
}

/* Master/detail dashboards (Customer / Products / SKU): trim the left search
   column from the default col-md-3 (25%) to ~22% so the detail/profile pane
   gets more room. ID selectors beat the .col-md-3 width; md+ only so the
   columns still stack full-width on small screens. */
@media (min-width: 768px) {
    #customerSearchPanelCol,#productSearchPanelCol,#skuSearchPanelCol{width:22%}
    #customerProfileCol,#productDetailCol,#skuDetailCol{width:78%}
}
/* Keep the search-type button labels (e.g. "Product Key") legible in the
   narrower column. */
.search-type-buttons .btn{font-size:.8rem;padding-left:.35rem;padding-right:.35rem}

/* Footer — offset past the fixed sidebar so it aligns with main content.
   Matches .main-content margin so footer text is never under the sidebar. */
.sam-footer{margin-left:260px}
.restricted-layout .sam-footer{margin-left:0}

/* Coming soon placeholder */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;color:#6c757d}

/* Customer search */
.customer-results-scroll{max-height:calc(100vh - 475px);min-height:200px;overflow-y:auto;padding-right:.25rem}
.search-type-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.search-type-buttons .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#searchResults .list-group-item.active{background-color:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
#searchResults .list-group-item.active small{color:rgba(255,255,255,.8)!important}
/* Products result list — selected-row highlight mirrors Customer Search. */
.product-results-scroll{max-height:calc(100vh - 300px);min-height:200px;overflow-y:auto;padding-right:.25rem}
/* Row: name+sub on the left, status vertically centered on the right. Denser
   than default — full-size names read too large in this narrow column. */
#productSearchResults .product-result-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .65rem;border-bottom:1px solid #f0f2f5}
#productSearchResults .product-result-row:last-of-type{border-bottom-color:transparent}
#productSearchResults .product-result-row:hover{background:#f6f9fc}
#productSearchResults .prr-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
#productSearchResults .prr-name{font-size:.85rem;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productSearchResults .prr-sub{font-size:.75rem;color:#8a94a0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productSearchResults .prr-status{font-size:.75rem;white-space:nowrap;flex-shrink:0}
/* Status colour by lifecycle kind (Quinn's convention: small coloured text). */
.prr-status-live{color:#1a7f43;font-weight:600}
.prr-status-pending{color:#b07d18}
.prr-status-muted{color:#98a2ad}
#productSearchResults .product-result-row.active{background-color:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
#productSearchResults .product-result-row.active .prr-sub,
#productSearchResults .product-result-row.active .prr-status{color:rgba(255,255,255,.9)!important}

/* Search input affordances — magnifier + clear (×) for the Find Product box. */
.sam-search-wrap{position:relative}
.sam-search-wrap .sam-search-icon{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:#9aa5b0;font-size:.85rem;pointer-events:none}
.sam-search-wrap input{padding-left:1.9rem;padding-right:1.9rem}
.sam-search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);color:#c2cad3;font-size:.95rem;border:0;background:transparent;padding:0;line-height:1;cursor:pointer;display:none}
.sam-search-clear:hover{color:#7a8794}
.sam-search-wrap.has-text .sam-search-clear{display:inline-flex}
/* Compact sort control living inside the Results header. */
.sam-inline-sort{font-size:.72rem;border:0;background:transparent;color:var(--bs-primary);font-weight:600;padding:.05rem 1.1rem .05rem .2rem;cursor:pointer}
.sam-inline-sort:focus{outline:none;box-shadow:none}
/* SKU result list — scroll region mirrors Products/Customer search. */
.sku-results-scroll{max-height:calc(100vh - 300px);min-height:200px;overflow-y:auto;padding-right:.25rem}
/* Denser rows — full-size <strong> names read too large in this narrow column. */
.sku-results-scroll .list-group-item{padding:.45rem .65rem}
.sku-results-scroll .list-group-item strong{font-size:.85rem;font-weight:600}
.sku-results-scroll .list-group-item small{font-size:.75rem}
#tabContactInfo .card-body{padding:1rem}
#tabContactInfo .form-label{margin-bottom:.15rem;color:#6c757d}
#tabContactInfo .form-control-plaintext{padding-top:0;padding-bottom:.15rem;margin-bottom:0;min-height:auto}
#profileTabs{margin-bottom:0!important}
.coming-soon-panel .card-body{padding:2rem}
#accountsTable th:first-child,#accountsTable td:first-child,#accountPropertiesTable th:first-child,#accountPropertiesTable td:first-child{padding-left:1rem}
/* Registrations: indent the Status column to match the Accounts table. Scoped to
   the header + data rows so the full-width expanded edit panel isn't shifted. */
#registrationsTable thead th:first-child,#registrationsTable tbody tr.registration-row td:first-child{padding-left:1rem}
/* Orders: indent the first column (Order ID) to match the Accounts/Registrations
   tables. Scoped to the header + data rows so an expanded detail row isn't shifted. */
#ordersTable thead th:first-child,#ordersTable tbody tr.orders-row td:first-child{padding-left:1rem}
#accountsTable th:last-child,#accountsTable td:last-child{padding-right:1rem}
#accountsTable .account-row{cursor:pointer}
#accountsTable,#accountsTable th,#accountsTable td{font-size:.875rem}
#accountDetails .form-control-plaintext{font-size:.875rem}

/* Mobile sidebar */
@media(max-width:991.98px){
.sidebar{margin-left:-260px}
.sidebar.show{margin-left:0}
.main-content{margin-left:0}
.sam-footer{margin-left:0}
}

/* Desktop sidebar collapse — opt-in via body.sidebar-collapsed toggled by
   the chevron handle inside the sidebar on >=992px screens. Per-session
   only (no localStorage); fresh page loads start expanded. */
@media(min-width:992px){
body.sidebar-collapsed .sidebar{margin-left:-260px}
body.sidebar-collapsed .main-content{margin-left:0}
body.sidebar-collapsed .sam-footer{margin-left:0}
}

/* "Show sidebar" button lives in the topbar (next to where the mobile burger
   sits) and is shown only on desktop when the sidebar has been collapsed.
   Default-hidden so it doesn't show up in the normal layout. */
#expandSidebarBtn{display:none}
@media(min-width:992px){
body.sidebar-collapsed #expandSidebarBtn{display:inline-flex;align-items:center;justify-content:center}
}

/* === Activation Logs (Riley) === */
.activations-table .toggle-detail{color:#6c757d;text-decoration:none}
.activations-table .toggle-detail:hover{color:var(--bs-primary)}
.activations-table .activation-detail td{border-top:0}
.activations-table .filter-by-ip{color:inherit;text-decoration:underline dotted}
.activations-table .filter-by-ip:hover{color:var(--bs-primary)}
.activations-table .text-monospace{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
/* Whole-row click toggles the expanded detail panel; show the affordance */
.activations-tab-table tr.activation-primary,
.activations-table tr.activation-primary{cursor:pointer}
/* Column widths — mirror the customer-profile Activations tab layout
   with an extra Email column. Order: toggle | Date | Email | Action |
   Result | Application | IP | Serial | RegID. */
.activations-table{table-layout:fixed}
.activations-table th:nth-child(1),.activations-table td:nth-child(1){width:30px}
.activations-table th:nth-child(2),.activations-table td:nth-child(2){width:145px}
.activations-table th:nth-child(3),.activations-table td:nth-child(3){width:200px}
.activations-table th:nth-child(4),.activations-table td:nth-child(4){width:105px}
.activations-table th:nth-child(5),.activations-table td:nth-child(5){width:200px}
.activations-table th:nth-child(6),.activations-table td:nth-child(6){width:110px}
.activations-table th:nth-child(7),.activations-table td:nth-child(7){width:130px}
.activations-table th:nth-child(8),.activations-table td:nth-child(8){width:250px}
.activations-table th:nth-child(9),.activations-table td:nth-child(9){width:80px}
.activations-table tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activations-table .activation-detail td{white-space:normal;overflow:visible}

/* === Quote support extension (Quinn) === */
.btn-quote-support-extension{margin-left:.25rem}
#quoteSupportExtensionModal .quote-prefill-summary{background:#f8f9fa;border-radius:.375rem;padding:.5rem .75rem}
#quoteSupportExtensionModal #quoteArtifactBody{white-space:pre;min-height:240px}

/* === Orders pillar (Morgan) === */
.orders-tab-shell .orders-table thead th{cursor:default;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;color:#5b6470;font-weight:500}
.orders-tab-shell .orders-table thead th.orders-sort{cursor:pointer;user-select:none}
.orders-tab-shell .orders-table thead th.orders-sort:hover{background:#eef1f4}
.orders-tab-shell .orders-row{cursor:pointer}
.orders-tab-shell .orders-row:hover{background:#f8f9fa}
.orders-tab-shell .orders-row:focus{outline:2px solid var(--bs-primary);outline-offset:-2px}
.orders-tab-shell .orders-id{padding-right:.25rem !important;white-space:nowrap}
.orders-tab-shell .orders-date{padding-left:.25rem !important;white-space:nowrap}
.orders-tab-shell .orders-product{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Breathing room between the right-aligned Order Total (col 4) and the
   Fulfillment badge (col 5). */
.orders-tab-shell .orders-table thead th:nth-child(5),.orders-tab-shell .orders-table tbody tr.orders-row td:nth-child(5){padding-left:1.5rem}
.orders-tab-shell .orders-recurring-pill,.orders-tab-shell .orders-subscription-pill{font-size:.7rem;letter-spacing:.02em}
.orders-tab-shell .orders-row-focus{animation:ordersRowPulse 2s ease-in-out;background:#fff3cd !important}
.orders-tab-shell .orders-fulfillment-action{font-size:.78rem;padding:.15rem .55rem}
.orders-tab-shell .orders-filter{max-width:340px}
@@keyframes ordersRowPulse{0%{background:#fff3cd}100%{background:transparent}}

/* === Orders inline expand panel (mirrors Registrations pattern 2026-05-18) === */
/* Chevron column */
.orders-chevron-th,.orders-chevron-cell{width:1.5rem;padding-left:.25rem!important;padding-right:.5rem!important;white-space:nowrap;vertical-align:middle}
.orders-chevron-th{font-size:0}
/* Reuse shared chevron + expanded-row styles from Registrations */
.orders-row-expanded{background:#f0f6ff!important}
.orders-expanded-row{background:#fff!important}
.orders-expanded-row>td{padding:0!important;border-top:none!important}
/* Inline detail panel shell */
.orders-detail-panel{padding:.75rem 1rem 1rem;border-top:2px solid var(--bs-primary)}
/* Top metadata strip */
.orders-detail-meta{padding-bottom:.5rem;font-size:.85rem}
/* Three-column grid section titles */
.orders-detail-panel .orders-section-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#6c757d;margin-bottom:.4rem;font-weight:500}
/* Scrollable items/transactions containers */
.orders-detail-panel .orders-inner-scroll{max-height:300px;overflow-y:auto}
/* Order-detail items + transactions tables are denser to fit more columns */
.orders-detail-panel .orders-items-table,
.orders-detail-panel .orders-tx-table{font-size:.8rem}
.orders-detail-panel .orders-items-table th,
.orders-detail-panel .orders-items-table td,
.orders-detail-panel .orders-tx-table th,
.orders-detail-panel .orders-tx-table td{padding:.35rem .5rem;white-space:nowrap}
.orders-detail-panel .orders-tx-table .orders-tx-failed{background:#fff5f5}
.orders-detail-panel .orders-tx-table .orders-tx-failed td{color:#9a3434}

/* === Registrations redesign 2026-05 (Quinn's direction) ==============
   Row-actions hidden-until-selected pattern (Devon/Reese) is replaced by
   Option B: actions live in the expanded edit panel. The collapsed row is
   pure information; the chevron is the only persistent affordance that
   indicates the row is expandable. */

/* --- Status text variants (replaces big colored badges) --- */
/* All status text: small size, slightly tighter weight than body copy.
   Colors are semantic and proportional — expired/inactive are muted because
   they are the most common state and should not shout. */
.reg-status{font-size:.78rem;font-weight:600;white-space:nowrap}
.reg-status-active{color:#198754}
.reg-status-muted{color:#6c757d;font-weight:400}
.reg-status-expired{color:#dc3545;font-weight:600}
.reg-status-info{color:#0a58ca}
.reg-status-unknown{color:#6c757d;font-weight:400}

/* --- Registration row action buttons --- */
/* The default btn-outline-secondary grey read as disabled (Pat 2026-06-08).
   Recolor the action-bar buttons to the theme navy so enabled actions clearly
   look clickable. Bootstrap's .btn:disabled keeps --bs-btn-disabled-color at the
   secondary grey + .65 opacity, so unavailable buttons (Support/Activations
   Quote) still read as muted/disabled — preserving the enabled/disabled contrast. */
.reg-panel-actions .btn-outline-secondary,
.reg-footer-actions .btn-outline-secondary{
    --bs-btn-color:#0d4c8b;
    --bs-btn-border-color:#0d4c8b;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#0d4c8b;
    --bs-btn-hover-border-color:#0d4c8b;
    --bs-btn-active-bg:#093965;
    --bs-btn-active-border-color:#093965;
}

/* --- Row cursor + expand state --- */
.registration-row{cursor:pointer}
.registration-row:focus{outline:2px solid var(--bs-primary);outline-offset:-2px}

/* Chevron column: narrow, right-aligned */
.reg-chevron-th,
.reg-chevron-cell{width:1.5rem;padding-left:.25rem!important;padding-right:.5rem!important;white-space:nowrap;vertical-align:middle}
.reg-chevron-th{font-size:0}
.reg-chevron{display:inline-block;font-size:.75rem;color:#9ca3af;transition:transform .2s ease}
.reg-chevron-open{transform:rotate(90deg);color:var(--bs-primary)}

/* Expanded row: no hover background, no top-border gap */
.reg-expanded-row{background:#fff!important}
.reg-expanded-row>td{padding:0!important;border-top:none!important}

/* Slightly highlight the expanded source row */
.reg-row-expanded{background:#f0f6ff!important}

/* 2s flash after Product Key search lands so the matched row stands out. */
.reg-row-jump-flash{animation:reg-row-jump-flash 2s ease-out;outline:2px solid #ffc107;outline-offset:-2px}
@keyframes reg-row-jump-flash{0%{background:#fff3cd!important}100%{background:transparent}}

/* --- Expanded edit panel shell --- */
.reg-edit-panel{padding:.75rem 1rem 1rem;border-top:2px solid var(--bs-primary)}

/* --- Summary row (top of panel) --- */
.reg-panel-summary{padding-bottom:.5rem;font-size:.85rem}

/* --- Related-actions row --- */
.reg-panel-actions{padding-bottom:.25rem;font-size:.82rem}
.reg-panel-actions .btn{font-size:.78rem}

/* --- Edit form --- */
.reg-edit-form label.form-label{font-size:.75rem}

/* --- Save button: subtle ring when enabled to hint it's actionable --- */
.reg-save-btn:not(:disabled){box-shadow:0 0 0 2px rgba(13,76,139,.18)}

/* --- Inline form status line --- */
.reg-form-status{min-height:1.2em}

/* --- Discard-changes inline alert --- */
.reg-edit-panel .alert{font-size:.82rem}

/* === Activations Modal — bundle-grouped layout (2026-05-19) ===========
   Each product section is a Bootstrap .card.mb-3 — the card border + mb-3
   gap gives unambiguous visual separation between products (Pat 2026-05-19).
   .act-bundle-section and its first-child border-top rules are retired;
   Bootstrap card handles all border and spacing.
   Progress bar colour thresholds: used>=limit → warning; used>0 → success;
   used===0 → secondary. */
.act-bundle-header{cursor:pointer;user-select:none}
.act-bundle-header:hover{background:#e9ecef}
.act-bundle-header:focus{outline:2px solid var(--bs-primary);outline-offset:-2px}
.act-bundle-header .act-chevron{display:inline-block;font-size:.75rem;color:#9ca3af;transition:transform .2s ease;margin-right:.4rem}
.act-bundle-header .act-chevron.act-chevron-open{transform:rotate(90deg);color:var(--bs-primary)}
.act-bundle-body{padding:0}
.act-bundle-inner-scroll{max-height:250px;overflow-y:auto}
.act-bundle-progress{min-width:80px;max-width:120px}

/* === Loading spinners (Riley / Sprint 2, todo 5dgals) =================
   Uniform Bootstrap spinner pattern across customer search/profile UX.
   sam-spinner-inline = sidebar/list-level (sm spinner, low padding).
   sam-spinner-panel  = panel/section-level (full spinner, taller min-height
   to prevent layout jump when spinner appears/disappears). */
.sam-spinner-inline{min-height:2.5rem}
.sam-spinner-panel{min-height:12rem;padding:3rem 1rem}
#registrationsSpinner.sam-spinner-panel{min-height:8rem;padding:2rem 1rem}

/* Default density for all Bootstrap tables in SAM (Pat 2026-05-28).
   Bootstrap's 16px default reads too loose in this admin context. Any table
   that needs to opt out can set its own font-size via a more-specific rule. */
.table { font-size: 14px; }

/* === Field typography — PROJECT-WIDE label/value standard (Pat 2026-06-02) ====
   Single source of truth for how a form caption vs. its data should read. Use
   these on every form so labels stay quiet and values/section headers carry the
   weight — change the look here once and every adopting page follows.
     .sam-field-label   — field caption (replaces the ad-hoc 'form-label small')
     .sam-field-value   — a READ-ONLY value shown as text, not a fake-editable box
     .sam-field-hint    — helper text under a field (quieter than the label)
     .sam-section / .sam-section-title — a grouped block with a hairline header */
.sam-field-label{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7a8794;margin-bottom:.15rem;display:block}
.sam-field-value{font-size:.95rem;font-weight:600;color:#1f2933;display:flex;align-items:center;gap:.35rem;min-height:calc(1.5em + .5rem + 2px)}
.sam-field-value .bi-lock-fill{font-size:.72rem;color:#aab4be}
.sam-field-hint{font-size:.72rem;color:#9aa5b0;margin-top:.2rem}
.sam-section + .sam-section{margin-top:1.4rem}
.sam-section-title{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bs-primary);margin-bottom:.65rem;padding-bottom:.4rem;border-bottom:1px solid #e3e8ee}
.sam-section-title .bi{font-size:.95rem;opacity:.8}

/* === Search/filter vs. results separation (Pat 2026-06-03) ====================
   For left-pane dashboards the filters and the result list read as two separate
   cards. .sam-results-header is the small captioned header at the top of the
   results card (label + "N shown" count). Reusable across search dashboards. */
.sam-results-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid #e3e8ee}
.sam-results-count{font-size:.72rem;font-weight:500;color:#9aa5b0}

/* Product identity header — status-at-a-glance (first adopter of the above) */
.sam-id-card{background:linear-gradient(180deg,#f7f9fb,#fff);border:1px solid #e3e8ee;border-radius:.55rem;padding:1rem 1.15rem}
.sam-abbr-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;background:#eef2f6;border:1px solid #dce3ea;color:#34455a;padding:.1rem .5rem;border-radius:.35rem}
.sam-id-meta{font-size:.78rem;color:#7a8794}
.sam-id-meta strong{color:#3a4754;font-weight:600}
.sam-pill{font-size:.72rem;font-weight:600;padding:.22rem .6rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem}
.sam-pill-info{background:#e7f0fa;color:#0d4c8b}
.sam-pill-ok{background:#e7f4ec;color:#1a7f43}
.sam-pill-off{background:#f1f3f5;color:#98a2ad}
/* Compact product create/edit form — fit on one screen, less wasted vertical space. */
.sam-form-compact .sam-section+.sam-section{margin-top:.75rem}
.sam-form-compact .sam-section-title{margin-bottom:.4rem;padding-bottom:.28rem}
.sam-form-compact .tab-content>.tab-pane>.card>.card-body{padding:.7rem 1rem}
.sam-form-compact .row{--bs-gutter-y:.5rem}
.sam-form-compact .sam-field-hint{margin-top:.08rem;font-size:.68rem}
.sam-form-compact .nav-tabs{margin-bottom:.6rem!important}
.sam-form-header .card-body{padding:.5rem 1rem}

/* Subscriptions: shared column layout so Active and Inactive tables align */
.subs-table { table-layout: fixed; }
.subs-table .subs-col-status { width: 90px; }
.subs-table .subs-col-serial { width: 290px; }
.subs-table .subs-col-order { width: 240px; }
.subs-table .subs-col-charge { width: 110px; }
.subs-table .subs-col-payment { width: 100px; }
.subs-table td, .subs-table th { overflow: hidden; text-overflow: ellipsis; }

/* === SmartException list: per-record detail row (ExceptionMessage + Misc) === */
/* Each tb_Exceptions record renders as a main row plus an always-visible detail
   row (legacy SAM stacked these). Group the pair: drop the divider between them
   and add one after the detail row so each record reads as a single unit. Misc
   is often large JSON — wrap it rather than let it blow out the table width. */
/* Extra top padding on the main row gives each record breathing room below the
   divider; bottom border is dropped so the main row + detail row read as one. */
#se-rows tr[data-exception-id]>td{border-bottom:0;padding-top:.85rem}
/* Detail row gets a subtle tint so each record (main row + detail) reads as one
   grouped block instead of blending into the next. Keep the default cell padding
   on top so the Message/Misc text has equal breathing room top and bottom. */
#se-rows tr.se-detail-row>td{background-color:var(--bs-tertiary-bg)}
/* Slightly darker divider between full records. */
#se-rows tr.se-detail-row{border-bottom:1px solid rgba(0,0,0,.18)}

/* SmartException Details page: compact uppercase field labels + full-width,
   scroll-capped code blocks so long stack traces / Misc JSON use the horizontal
   space instead of wrapping into a tall narrow column. */
.se-dt{font-size:.7rem;letter-spacing:.03em;text-transform:uppercase}
.se-pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:28rem;overflow:auto;background:var(--bs-tertiary-bg);border:1px solid var(--bs-border-color);border-radius:.375rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.se-misc{white-space:pre-wrap;word-break:break-word}
/* Clamp Message/Misc to ~4 lines on the list; full text lives on the Details
   page (the ID link). line-height 1.5 × 4 = 6em. */
.se-clamp{max-height:6em;overflow:hidden;line-height:1.5}