/* ============================================================================
   App shell — OwnersInventory's two-column navigation, HealthCoreX's colours.
   All values come from tokens.css.
   ============================================================================ */

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font);
    font-size: var(--app-font-size);
    -webkit-font-smoothing: antialiased;
}

/* ============================ Auth pages ============================ */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Their auth background is a barely-there tint; this is the teal equivalent. */
    background: linear-gradient(160deg, #f7fbfc 0%, #eef5f8 100%);
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.75rem;
}

.auth-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.auth-brand__mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-700));
    display: grid; place-items: center; color: #fff; font-weight: 700;
}
.auth-brand__text { line-height: 1.05; }
.auth-brand__name { font-weight: 700; color: var(--app-text); letter-spacing: -.01em; }
.auth-brand__sub { font-size: .68rem; letter-spacing: .14em; color: var(--app-muted); text-transform: uppercase; }

.auth-topbar__aside { display: flex; align-items: center; gap: .85rem; font-size: .9rem; color: var(--app-muted); }

.auth-body { flex: 1; display: grid; place-items: center; padding: 1rem; }

.auth-card {
    width: 100%;
    max-width: 448px;
    background: var(--app-surface);
    border-radius: 18px;
    box-shadow: var(--app-shadow-lg);
    padding: 2.25rem 2.5rem 2rem;
}

.auth-card__title { text-align: center; font-size: 1.35rem; font-weight: 700; margin-bottom: 1.5rem; }

.auth-footer { text-align: center; padding: 1.25rem; color: var(--app-muted); font-size: .82rem; }

/* Inputs. Deliberately one style: their Sign In uses filled inputs and Sign Up
   uses outlined ones — an inconsistency not worth reproducing. */
.form-label { font-weight: 600; font-size: .8rem; margin-bottom: .25rem; color: var(--app-text); }

/* Compact by default. Most of this app is data entry — the customer modal alone has nineteen
   fields — and roomy inputs push a form past the height of the screen it opens in.
   Line height is stated rather than inherited so a row's height is the same wherever it renders. */
.form-control, .form-select {
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    padding: .3rem .65rem;
    font-size: .875rem;
    line-height: 1.4;
    background: var(--app-surface);
}

/* Sign in and sign up are three fields on an empty page. Height costs nothing there and a
   larger target is easier to hit, so they keep the roomier padding. */
.auth-card .form-control,
.auth-card .form-select { padding: .6rem .75rem; }

/* The small variant, restated. The rule above has the same specificity as Bootstrap's
   .form-control-sm and loads after it, so it was overriding the smaller padding and every
   "sm" control in the app — the quantity boxes in a return, the picker's filters — rendered
   full height. Declaring it here is what makes the class mean anything. */
.form-control-sm, .form-select-sm {
    padding: .15rem .45rem;
    font-size: .78rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(22, 135, 167, .15);
    outline: none;
}

.form-control[readonly] { background: var(--app-surface-sunken); color: var(--app-muted); }

/* Password field with a reveal toggle */
.field-password { position: relative; }
.field-password .form-control { padding-right: 2.6rem; }
.field-password__toggle {
    position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: .35rem .5rem; cursor: pointer;
    color: var(--app-muted); line-height: 1;
}
.field-password__toggle:hover { color: var(--app-text); }

.btn-primary {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-on-primary);
    font-weight: 600;
    border-radius: var(--app-radius-pill);
    padding: .62rem 1.1rem;
}
.btn-primary:hover, .btn-primary:focus { background: var(--app-primary-700); border-color: var(--app-primary-700); }

.btn-social {
    width: 100%;
    border: 1px solid var(--app-border-strong);
    background: var(--app-surface);
    border-radius: var(--app-radius-pill);
    padding: .62rem 1.1rem;
    font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn-social:hover { background: var(--app-surface-sunken); }

.auth-divider { display: flex; align-items: center; gap: .9rem; margin: 1.25rem 0; color: var(--app-muted); font-size: .85rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }

.auth-link { color: var(--app-primary); font-weight: 600; text-decoration: underline; }

/* ============================ App shell ============================ */

.shell { display: flex; min-height: 100vh; }

/* Column 1 — icon rail. Persists through drill-down. */
.rail {
    width: var(--app-rail-width);
    flex: 0 0 var(--app-rail-width);
    background: var(--app-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 0;
    position: sticky; top: 0; height: 100vh;
}

.rail__head {
    display: flex; align-items: center;
    width: 100%; padding: 0 .5rem .5rem; flex: 0 0 auto;
    /* Matches the topbar, so the brand and the toggle beside it sit on one line. */
    min-height: var(--app-topbar-height);
}

/* The toggle lives in the topbar. Kept flush left there so it lines up with the menu edge
   rather than floating in the middle of the header. */
.topbar__nav { margin-right: .25rem; flex: 0 0 auto; }

.rail__brand {
    display: flex; align-items: center; gap: .55rem;
    text-decoration: none; flex: 0 0 auto; min-width: 0;
    margin: 0 auto;
}
.nav-expanded .rail__brand { margin: 0; }

.rail__mark {
    width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-700));
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem;
}

/* Hidden rather than absent while collapsed, so expanding does not reflow the icons. */
.rail__wordmark { display: none; color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; }

.rail__items { display: flex; flex-direction: column; gap: .15rem; width: 100%; align-items: center; overflow-y: auto; }

.rail__item {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 9px;
    color: var(--app-rail-text);
    font-size: 1.05rem;
    text-decoration: none;
    flex: 0 0 auto;
}
.rail__item:hover { background: var(--app-rail-hover); color: #fff; }
.rail__item.is-active { background: var(--app-rail-active); color: #fff; }
.rail__sep { width: 26px; height: 1px; background: rgba(255,255,255,.14); margin: .4rem 0; flex: 0 0 auto; }

.rail__label { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Expanded rail -------------------------------------------------------

   The width lives on the shell rather than on .rail so the sticky column and
   the content beside it move together; animating .rail alone would slide the
   menu over the page instead of alongside it.
*/
.nav-expanded .rail {
    width: var(--app-rail-width-open);
    flex-basis: var(--app-rail-width-open);
    align-items: stretch;
    padding-left: .5rem; padding-right: .5rem;
}

.nav-expanded .rail__head { padding-left: 0; padding-right: 0; }
.nav-expanded .rail__wordmark { display: block; }
.nav-expanded .rail__items { align-items: stretch; }

.nav-expanded .rail__item {
    width: auto; height: auto; min-height: 40px;
    grid-template-columns: 1.4rem 1fr;
    place-items: center start;
    gap: .65rem;
    padding: .45rem .6rem;
    font-size: .9rem;
}
.nav-expanded .rail__item .bi { font-size: 1.05rem; justify-self: center; }
.nav-expanded .rail__label { display: block; }
.nav-expanded .rail__sep { width: auto; align-self: stretch; }

/* Only the width animates. Transitioning the whole rail would fade the labels
   in from the wrong place as the column grows. */
@media (prefers-reduced-motion: no-preference) {
    .rail { transition: width .16s ease, flex-basis .16s ease; }
}

.rail__backdrop {
    position: fixed; inset: 0; z-index: 39;
    background: rgba(9, 26, 33, .45);
}

/* Column 2 — the active module's pages. */
.panel {
    width: var(--app-panel-width);
    flex: 0 0 var(--app-panel-width);
    background: var(--app-panel);
    border-right: 1px solid var(--app-panel-border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}

.panel__head {
    height: var(--app-topbar-height);
    display: flex; align-items: center; gap: .5rem;
    padding: 0 .85rem;
    border-bottom: 1px solid var(--app-panel-border);
    font-weight: 600;
}
.panel__back { color: var(--app-panel-muted); text-decoration: none; display: grid; place-items: center; }
.panel__back:hover { color: var(--app-text); }

.panel__items { padding: .6rem .5rem; overflow-y: auto; }

.panel__item {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    /* min-height rather than a fixed height, and a normal line-height: a label
       that wraps must grow the row, not overflow it. */
    min-height: 38px;
    padding: .45rem .65rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-panel-text);
    text-decoration: none;
    line-height: 1.3;
}
.panel__item:hover { background: var(--app-surface-sunken); }
.panel__item.is-active { background: var(--app-panel-active-bg); color: var(--app-panel-active-text); font-weight: 600; }

.panel__pin { opacity: 0; color: var(--app-panel-muted); flex: 0 0 auto; }
.panel__item:hover .panel__pin, .panel__pin.is-pinned { opacity: 1; }
.panel__pin.is-pinned { color: var(--app-primary); }

/* Column 3 — content */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--app-topbar-height);
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.25rem;
    position: sticky; top: 0; z-index: 20;
}

.topbar__search { position: relative; flex: 0 1 420px; }
.topbar__search .form-control { padding-left: 2.2rem; border-radius: var(--app-radius-pill); background: var(--app-surface-sunken); }
.topbar__search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--app-muted); }

.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: .35rem; }

.icon-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent;
    display: grid; place-items: center; color: var(--app-muted); position: relative;
}
.icon-btn:hover { background: var(--app-surface-sunken); color: var(--app-text); }
.icon-btn__badge {
    position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px;
    border-radius: 999px; background: var(--app-danger); color: #fff;
    font-size: .62rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--app-primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .75rem;
}

/* Organization + store switcher */
.orgbar {
    display: flex; align-items: center; gap: .6rem;
    background: transparent; border: 0; padding: .3rem .5rem; border-radius: var(--app-radius-sm);
    text-align: left; color: var(--app-text);
}
.orgbar:hover { background: var(--app-surface-sunken); }
.orgbar__name { font-weight: 700; line-height: 1.1; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgbar__meta { font-size: .72rem; color: var(--app-muted); line-height: 1.1; }

.orgmenu { min-width: 320px; padding: .5rem; border: 1px solid var(--app-border); box-shadow: var(--app-shadow-lg); border-radius: 14px; }
.orgmenu__section { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--app-muted); padding: .5rem .6rem .25rem; }
.orgmenu__item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--app-radius-sm); color: var(--app-text); text-decoration: none; }
.orgmenu__item:hover { background: var(--app-surface-sunken); }
.orgmenu__badge { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .72rem; flex: 0 0 auto; }

.main { flex: 1; padding: 1.25rem 1.5rem; }

.breadcrumbbar { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; color: var(--app-muted); font-size: .82rem; margin-bottom: .75rem; }
.breadcrumbbar a { color: var(--app-muted); text-decoration: none; }
.breadcrumbbar a:hover { color: var(--app-primary); }

.card-surface { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }

.app-footer {
    height: var(--app-footer-height);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted); font-size: .8rem;
    background: var(--app-surface);
}

/* ============================ Status pills ============================ */

.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: var(--app-radius-pill); font-size: .75rem; font-weight: 600; }
.pill--success { background: var(--app-success-bg); color: var(--app-success-text); }
.pill--warning { background: var(--app-warning-bg); color: var(--app-warning-text); }
.pill--info    { background: var(--app-info-bg);    color: var(--app-info-text); }
.pill--danger  { background: var(--app-danger-bg);  color: var(--app-danger-text); }
.pill--muted   { background: var(--app-surface-sunken); color: var(--app-muted); }

/* ============================ Grid toolbar ============================

   DataTables' Bootstrap 5 integration puts .dt-length and .dt-buttons in the same column as block
   elements, so the row-count menu and the Columns button stack. It also stamps .btn-secondary onto
   every button, which lands after the outline class in the sheet and paints the Columns button a
   solid grey slab. Both are corrected here rather than by fighting the class list in JavaScript,
   which the library rewrites on every redraw.
*/

.dt-length,
.dt-buttons { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; }
.dt-buttons { margin-left: .5rem; }
.dt-length select { width: auto; }
.dt-length label { margin: 0; color: var(--app-muted); font-size: .85rem; }

.dt-buttons .btn.btn-secondary {
    background: transparent;
    color: var(--app-text);
    border-color: var(--app-border);
}
.dt-buttons .btn.btn-secondary:hover,
.dt-buttons .btn.btn-secondary:focus,
.dt-buttons .btn.btn-secondary.show { background: var(--app-surface-sunken); color: var(--app-text); }

/* ============================ Responsive ============================ */

@media (max-width: 991.98px) {
    .panel { display: none; }
}

@media (max-width: 767.98px) {
    /* Off canvas, and opened from the topbar — the rail cannot hold its own trigger when it is
       the thing that is off screen. Always at the open width: a 56px drawer of unlabelled icons
       would be the same puzzle the drawer exists to solve. */
    .rail {
        position: fixed; z-index: 40;
        width: var(--app-rail-width-open);
        flex-basis: var(--app-rail-width-open);
        align-items: stretch;
        padding-left: .5rem; padding-right: .5rem;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .nav-open .rail { transform: none; }

    .rail__head { padding-left: 0; padding-right: 0; }
    .rail__wordmark { display: block; }
    .rail__items { align-items: stretch; }

    .rail__item {
        width: auto; height: auto; min-height: 40px;
        grid-template-columns: 1.4rem 1fr;
        place-items: center start;
        gap: .65rem;
        padding: .45rem .6rem;
        font-size: .9rem;
    }
    .rail__item .bi { justify-self: center; }
    .rail__label { display: block; }
    .rail__sep { width: auto; align-self: stretch; }

    .topbar__search { flex: 1 1 auto; }
}

/* The backdrop belongs to the phone layout only; on a desktop the rail is part of the page. */
@media (min-width: 768px) {
    .rail__backdrop { display: none; }
}

/* ======================= Grid row selection ========================= */
/* The tick column carries no header text, so it should take no more room than the box. */
.grid-select { width: 2.25rem; text-align: center; }

/* ========================= Printed documents ========================= */
/* An invoice, a ticket and a purchase order render into the shared modal and print from there,
   so what is on screen and what leaves the printer are the same markup. */

.doc { color: #000; background: #fff; font-size: .9rem; }
.doc__title { color: var(--app-primary); font-weight: 700; }
.doc__head,
.doc__band {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border: 1px solid #dcdcdc; border-radius: .4rem; padding: .6rem .8rem; margin-bottom: .75rem;
}
.doc__table thead th { background: var(--app-primary); color: #fff; font-weight: 600; }
.doc__balance { font-size: 1.25rem; font-weight: 700; margin-top: .25rem; }
.doc__footer { border-top: 1px solid #000; margin-top: 1rem; padding-top: .4rem; text-align: center; font-size: .8rem; }

/* Roughly 80mm of thermal paper, so the layout on screen is the layout that prints. */
.ticket { max-width: 21rem; color: #000; background: #fff; font-size: .75rem; }
.ticket__name { font-weight: 700; font-size: .95rem; }
.ticket__meta th, .ticket__meta td,
.ticket__totals th, .ticket__totals td { padding: .1rem .25rem; border: 0; }
.ticket__meta th, .ticket__totals th { font-weight: 600; white-space: nowrap; }
.ticket__lines { font-size: .7rem; }
.ticket__lines th, .ticket__lines td { padding: .15rem .2rem; }
.ticket__lines thead th { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.ticket__code { font-size: .7rem; letter-spacing: .05em; }
.ticket__footer { border-top: 1px solid #000; border-bottom: 1px solid #000; margin-top: .6rem; padding: .3rem 0; text-align: center; }

@media print {
    /* Only the document prints. Everything else on the page — rail, topbar, the modal chrome
       around it — is screen furniture that would otherwise come out on paper too. */
    body * { visibility: hidden; }
    [data-print-area], [data-print-area] * { visibility: visible; }
    [data-print-area] {
        position: absolute; inset: 0 auto auto 0; width: 100%;
        margin: 0; padding: 0; box-shadow: none;
    }
    .modal, .modal-dialog, .modal-content { position: static; display: block; max-width: none; margin: 0; border: 0; }
    .modal-backdrop, .modal-header, .modal-footer { display: none !important; }
    .doc__table thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; }
    a[href]::after { content: none !important; }
}

/* ====================== Document detail pages ======================== */
/* An invoice or a purchase order read as a record: a titled panel of facts, then the lines,
   then the money. The target puts the panel title in the brand colour, which also separates
   the two summaries at the top of the page from the grid under them. */

.panel__title {
    background: var(--app-primary); color: #fff;
    font-weight: 600; padding: .5rem .9rem;
    border-radius: var(--app-radius) var(--app-radius) 0 0;
}

/* Label/value pairs. The label column is sized to the text so values line up down the panel
   instead of drifting with whichever row happens to have the longest label. */
.detail-table > tbody > tr > th {
    width: 1%; white-space: nowrap;
    font-weight: 600; color: var(--app-muted);
    background: var(--app-surface-sunken);
}
.detail-table > tbody > tr > td { vertical-align: middle; }

.detail-grid > thead > tr > th {
    background: var(--app-primary); color: #fff;
    font-weight: 600; white-space: nowrap;
}
.detail-grid__foot > tr > th,
.detail-grid__foot > tr > td { background: var(--app-surface-sunken); }

/* The supplier's copy leads with who is ordering, so the name is the banner. */
.vendor-po__banner {
    background: var(--app-primary); color: #fff;
    font-weight: 700; font-size: 1.1rem;
    padding: .7rem 1rem; border-radius: var(--app-radius);
}

/* ========================== Product picker =========================== */
.picker-card {
    display: block; width: 100%; height: 100%;
    background: var(--app-surface); border: 1px solid var(--app-border);
    border-radius: var(--app-radius); padding: .5rem;
    font-size: .78rem; line-height: 1.25; cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.picker-card:hover { border-color: var(--app-primary); box-shadow: var(--app-shadow-sm); }

/* A short flash on pick. The modal stays open — choosing one product usually means several —
   so without it there is nothing to say the click registered. */
.picker-card--picked { border-color: var(--app-success-text); background: var(--app-success-bg); }

.picker-card__image {
    display: flex; align-items: center; justify-content: center;
    height: 3.5rem; margin-bottom: .35rem;
    background: var(--app-surface-sunken); border-radius: calc(var(--app-radius) - 2px);
    color: var(--app-muted); font-size: 1.2rem;
}
.picker-card__name { display: block; font-weight: 600; }

/* ========================= Address summary cards ===================== */
/* The Address tab reads back what was typed on the other two rather than offering a third
   place to type it, so these are cards, not fields. */
.address-card {
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid var(--app-border); border-radius: var(--app-radius);
    padding: .75rem 1rem; margin-bottom: .75rem;
}
.address-card__icon { font-size: 1.35rem; line-height: 1; }

/* The grid's own horizontal scroll. DataTables relocates the table into a container it builds
   itself, so this has to hang off the class named in its layout string rather than a wrapper
   in the markup. */
.dt-container .grid-scroll { overflow-x: auto; }

/* ===================== Scrollable dialogs ============================ */
/* Every dialog here wraps its header, body and footer in a <form> so one submit carries the
   lot. That extra element breaks the chain modal-dialog-scrollable depends on: Bootstrap
   expects .modal-content to be the flex column whose body shrinks, and with a form between
   them the body cannot shrink, so the footer — Cancel and Submit — slides off the bottom of
   the screen. Making the form the flex column restores it. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }

/* ========================== Density =================================
   The target packs noticeably more onto a screen than stock Bootstrap does, and this is where
   the difference lives — not in the inputs, which already match its ~31px, but in everything
   around them. Bootstrap's defaults are drawn for marketing pages; this is a back office where
   somebody reads forty rows at a time.
   ==================================================================== */

/* Buttons. Bootstrap's .375rem/.75rem at 16px is a generous target for a page with three of
   them; a grid header has six. */
.btn { padding: .3rem .7rem; font-size: .875rem; border-radius: var(--app-radius-sm); }
.btn-sm { padding: .2rem .55rem; font-size: .8rem; }

/* The pill buttons on the auth screens keep their shape — they are the page's main action. */
.btn-primary, .btn-social { border-radius: var(--app-radius-pill); }
.auth-card .btn-primary, .auth-card .btn-social { padding: .55rem 1.1rem; font-size: .925rem; }

/* Grid and detail tables. A row of 14 columns is read across, not admired. */
.table > :not(caption) > * > * { padding: .4rem .55rem; }
.table { font-size: .85rem; }
.detail-table > tbody > tr > th,
.detail-table > tbody > tr > td { padding: .35rem .6rem; }

/* Panels. The outer padding was set for a page with one card on it. */
.card-surface.p-3, .card-surface.p-md-4 { padding: .9rem !important; }
.panel__title { padding: .4rem .75rem; font-size: .85rem; }

/* Dialogs. Header and footer are chrome; the body is the part worth the room. */
.modal-header, .modal-footer { padding: .6rem .9rem; }
.modal-title { font-size: 1rem; }
.modal-body { padding: .9rem; }

/* Tabs sit directly above the fields they switch between, so they do not need the gap. */
.nav-tabs .nav-link { padding: .4rem .8rem; font-size: .875rem; }

/* Form rows. g-3 is 1rem of gutter between every field on a nineteen-field form. */
.modal-body .row.g-3 { --bs-gutter-y: .6rem; }

/* Alerts, used here for the record-count banner and validation summaries. */
.alert { padding: .5rem .75rem; font-size: .85rem; margin-bottom: .6rem; }

/* The breadcrumb bar above every page. */
.breadcrumbbar { font-size: .78rem; margin-bottom: .5rem; }

/* Grid cells never wrap. One long header — "Days Since Last Payment" — was wrapping to three
   lines in a 70px column and setting the height of every other header on the row, so a list of
   fourteen short columns carried a 95px band across the top. The table scrolls sideways in its
   own box now, which is the trade the target makes too. */
.dt-container .table > :not(caption) > * > * { white-space: nowrap; }

/* ======================== Grid row actions =========================== */
/* Inline buttons rather than a three-dot menu, matching the target: what a row can do is
   readable without opening anything, and the common action costs one click instead of two.
   Kept on one line — the column does not wrap, and the grid scrolls if the set is wide. */
.grid-actions { display: flex; gap: .25rem; justify-content: flex-end; }
.grid-actions .btn { padding: .1rem .4rem; font-size: .75rem; line-height: 1.35; }

/* Labels stay on a desktop — the target's buttons are labelled, and an icon alone asks the
   reader to remember what a pencil on this particular row does. They drop below the point where
   a row of five would crowd out the data columns; the title attribute keeps them reachable. */
@media (max-width: 992px) {
    .grid-actions .btn { font-size: 0; padding: .2rem .35rem; }
    .grid-actions .btn .bi { font-size: .8rem; }
}

/* ==================== Shape, from the target's stylesheet =============
   Its .btn is border-radius: 0 and the customer page squares .form-control off too. Rounded
   controls read as roomier than they are, which is most of why this still looked softer than
   the screens beside it even once the metrics matched.
   ==================================================================== */
.btn { border-radius: 2px; }
.form-control, .form-select { border-radius: 2px; }

/* The card keeps its corners — the target's .box is border-radius: 10px with an all-round
   shadow rather than the flat outline this had. */
.card-surface {
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .12);
    border-color: transparent;
}

/* Pill buttons stay pills: they are the auth pages' main action and read as one. */
.btn-primary, .btn-social { border-radius: var(--app-radius-pill); }
.grid-actions .btn, .modal-footer .btn { border-radius: 2px; }