/* =============================================================
   RaqmiERP — Design System
   Bootstrap 5.3 + Bootstrap Icons + Geist
   Achromatic palette · light + dark · enterprise SaaS
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Zinc scale (light is default) */
    --zinc-50:  #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;

    /* Semantic — light */
    --bg-app:        var(--zinc-50);
    --bg-surface:    #ffffff;
    --bg-elevated:   #ffffff;
    --bg-muted:      var(--zinc-100);
    --bg-hover:      rgba(24, 24, 27, .04);
    --bg-active:     rgba(24, 24, 27, .07);

    --border-subtle: rgba(24, 24, 27, .08);
    --border-default:var(--zinc-200);
    --border-strong: var(--zinc-300);

    --text-primary:  var(--zinc-900);
    --text-secondary:var(--zinc-600);
    --text-muted:    var(--zinc-500);
    --text-faint:    var(--zinc-400);
    --text-inverse:  #ffffff;
    --bg-inverse:    var(--zinc-900);

    --accent:        var(--zinc-900);
    --accent-hover:  var(--zinc-800);
    --accent-fg:     #ffffff;

    --success:       #16a34a;
    --success-bg:    rgba(22, 163, 74, .10);
    --danger:        #dc2626;
    --danger-bg:     rgba(220, 38, 38, .10);
    --warning:       #d97706;
    --warning-bg:    rgba(217, 119, 6, .10);
    --info:          var(--zinc-700);
    --info-bg:       rgba(63, 63, 70, .07);

    --ring:          rgba(24, 24, 27, .12);
    --ring-focus:    rgba(24, 24, 27, .25);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .03);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, .06), 0 20px 40px rgba(0, 0, 0, .08);

    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --sidebar-w:           260px;
    --sidebar-w-collapsed: 72px;
    --topbar-h:            56px;

    --sidebar-link-color:  #0a0a0a;
    --sidebar-link-icon:   #3f3f46;
    --sidebar-group-color: #52525b;

    --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --transition:      180ms cubic-bezier(.4, 0, .2, 1);
}

/* Dark theme via Bootstrap data-bs-theme attribute */
[data-bs-theme="dark"] {
    --bg-app:        #0a0a0b;
    --bg-surface:    #121214;
    --bg-elevated:   #18181b;
    --bg-muted:      #1c1c1f;
    --bg-hover:      rgba(255, 255, 255, .04);
    --bg-active:     rgba(255, 255, 255, .07);

    --border-subtle: rgba(255, 255, 255, .06);
    --border-default:rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .12);

    --text-primary:  #fafafa;
    --text-secondary:#d4d4d8;
    --text-muted:    #a1a1aa;
    --text-faint:    #71717a;
    --text-inverse:  var(--zinc-900);
    --bg-inverse:    #fafafa;

    --accent:        #fafafa;
    --accent-hover:  #e4e4e7;
    --accent-fg:     var(--zinc-900);

    --success:       #22c55e;
    --success-bg:    rgba(34, 197, 94, .12);
    --danger:        #ef4444;
    --danger-bg:     rgba(239, 68, 68, .12);
    --warning:       #f59e0b;
    --warning-bg:    rgba(245, 158, 11, .12);
    --info:          #d4d4d8;
    --info-bg:       rgba(255, 255, 255, .06);

    --ring:          rgba(255, 255, 255, .12);
    --ring-focus:    rgba(255, 255, 255, .28);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, .5), 0 24px 48px rgba(0, 0, 0, .55);

    --sidebar-link-color: #e4e4e7;
    --sidebar-link-icon:  #a1a1aa;
    --sidebar-group-color:#71717a;
}

/* Accent color themes — opt-in via [data-theme-color] on <html>.
   Default (no attribute, or "default") stays the zinc accent above untouched. */
[data-theme-color="green"]  { --accent: #1A5C38; --accent-hover: #175333; --accent-fg: #ffffff; }
[data-theme-color="maroon"] { --accent: #9A2F23; --accent-hover: #88291F; --accent-fg: #ffffff; }
[data-theme-color="gold"]   { --accent: #92722A; --accent-hover: #816425; --accent-fg: #ffffff; }

[data-bs-theme="dark"][data-theme-color="green"]  { --accent-hover: #3C7456; }
[data-bs-theme="dark"][data-theme-color="maroon"] { --accent-hover: #AE594F; }
[data-bs-theme="dark"][data-theme-color="gold"]   { --accent-hover: #A88E55; }

.theme-color-menu { min-width: 170px; padding: 6px; }
.theme-color-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .875rem;
    text-align: left;
}
.theme-color-option:hover { background: var(--bg-hover); }
.theme-color-option.active { background: var(--bg-active); font-weight: 600; }
.theme-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    flex: 0 0 auto;
}
.theme-color-swatch-default { background: var(--zinc-900); }
.theme-color-swatch-green   { background: #1A5C38; }
.theme-color-swatch-maroon  { background: #9A2F23; }
.theme-color-swatch-gold    { background: #92722A; }

/* ---------- 2. Base ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    transition: background-color var(--transition), color var(--transition);
}

/* Compact density for small desktop screens (1366x768, 1280x800, 1440x900 offices). Nearly
   every size in this sheet is rem, so stepping the root down ~13% scales type, spacing and
   tables together — the page reads like it does on a 1080p screen. The fixed px chrome
   (sidebar, topbar) is stepped down alongside it. `screen` keeps printing untouched, and the
   992px floor leaves tablets and phones at their normal, touch-friendly size. */
@media screen and (min-width: 992px) and (max-width: 1440px) {
    html, body { font-size: 13px; }
    :root {
        --sidebar-w: 228px;
        --topbar-h:  50px;
    }
}

body { min-height: 100vh; }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: .9375rem; }
h6 { font-size: .8125rem; }

code, pre, .font-mono { font-family: var(--font-mono); font-size: .85em; }

a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--text-secondary); }

hr { border-color: var(--border-subtle); opacity: 1; }

/* ---------- 3. Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* ---------- 4. App shell ---------- */
.app-shell { min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    /* dvh tracks the *visible* viewport, so the offcanvas bottom (Administration
       group + footer) is never left behind the mobile browser's URL/tab bar.
       vh above is the fallback for browsers without dvh support. */
    height: 100dvh;
    position: fixed;
    top: 0; left: 0;
    z-index: 1045;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    transition: width var(--transition);
    overflow: hidden;
}

/* Vibrant Solid Brand Sidebar — the accent at full strength.
   Hover/active/border are SHADES (mixed toward black), never white tints: a
   translucent white over a saturated colour reads as a milky film, not a
   highlight, and the always-present active link would wear it permanently. */
html[data-theme-color="green"] .sidebar,
html[data-theme-color="maroon"] .sidebar,
html[data-theme-color="gold"] .sidebar {
    background: var(--accent);
    --bg-surface: var(--accent);
    --border-subtle: color-mix(in srgb, var(--accent) 80%, #000000);
    --border-default: color-mix(in srgb, var(--accent) 70%, #000000);
    --border-strong: color-mix(in srgb, var(--accent) 60%, #000000);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.86);
    --text-muted: rgba(255, 255, 255, 0.72);
    --text-faint: rgba(255, 255, 255, 0.58);
    --bg-hover: color-mix(in srgb, var(--accent) 74%, #000000);
    --bg-active: color-mix(in srgb, var(--accent) 58%, #000000);
    --sidebar-link-color: rgba(255, 255, 255, 0.88);
    --sidebar-link-icon: rgba(255, 255, 255, 0.88);
    --sidebar-group-color: rgba(255, 255, 255, 0.66);
}

html[data-theme-color="green"] .sidebar-link.active::before,
html[data-theme-color="maroon"] .sidebar-link.active::before,
html[data-theme-color="gold"] .sidebar-link.active::before {
    background: #ffffff;
}



.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: var(--topbar-h);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    flex-shrink: 0;
}
.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1;
}
.sidebar-brand-link:hover { color: inherit; }
.sidebar-brand-mark {
    width: 28px; height: 28px;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
}
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sidebar-brand-name { font-weight: 600; font-size: .9rem; }
.sidebar-brand-sub  { font-size: .7rem; color: var(--text-muted); }

.sidebar-context {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sidebar-context-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.sidebar-context-value {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 12px;
}

.sidebar-section-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 14px 10px 6px;
}

/* Collapsible sidebar groups */
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 10px 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sidebar-group-color);
    transition: color var(--transition-fast);
}
.sidebar-group-toggle:hover { color: var(--text-secondary); }
.sidebar-group-toggle .sg-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sidebar-group-toggle .sg-label i {
    font-size: 1.125rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-group-toggle .sg-chevron {
    font-size: .75rem;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    margin-inline-start: 4px;
}
.sidebar-group-toggle.collapsed .sg-chevron { transform: rotate(-90deg); }
[dir="rtl"] .sidebar-group-toggle.collapsed .sg-chevron { transform: rotate(90deg); }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-link-color);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.1;
    position: relative;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.sidebar-link i {
    font-size: 1.05rem;
    width: 18px;
    text-align: center;
    color: var(--sidebar-link-icon);
    flex-shrink: 0;
}
.sidebar-link span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-group .collapse .sidebar-link,
.sidebar-group .collapsing .sidebar-link { padding-inline-start: 36px; }
.sidebar-group.ms-2 .collapse .sidebar-link,
.sidebar-group.ms-2 .collapsing .sidebar-link { padding-inline-start: 28px; }
.sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-link:hover i { color: var(--text-primary); }
.sidebar-link.active {
    background: var(--bg-active);
    color: var(--text-primary);
    font-weight: 600;
}
.sidebar-link.active i { color: var(--text-primary); }
.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* Collapsed sidebar (desktop) — icon rail.
   Scoped to >=992px so the mobile offcanvas is never affected by the rail state. */
@media (min-width: 992px) {
    /* `.offcanvas.app-offcanvas` also sets width, with equal specificity but later
       in this file — hence the extra `.offcanvas` here to outrank it. */
    html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-w-collapsed); }

    /* Only glyphs survive; every text-bearing element folds away. */
    html[data-sidebar="collapsed"] .sidebar .sidebar-brand-text,
    html[data-sidebar="collapsed"] .sidebar .sidebar-context,
    html[data-sidebar="collapsed"] .sidebar .sidebar-section-label,
    html[data-sidebar="collapsed"] .sidebar .sidebar-divider,
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle .sg-chevron,
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle .sg-label > span,
    html[data-sidebar="collapsed"] .sidebar .sidebar-scroll > .sidebar-link > span { display: none; }

    /* The footer label carries Bootstrap's `.d-flex`, which is `!important`. */
    html[data-sidebar="collapsed"] .sidebar .sidebar-footer .user-meta { display: none !important; }

    html[data-sidebar="collapsed"] .sidebar .sidebar-brand { padding: 0; justify-content: center; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-brand-link { flex: 0 0 auto; gap: 0; justify-content: center; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-footer { padding: 10px 8px; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-footer .sidebar-link { justify-content: center; gap: 0; }

    /* A <button> sizes to fit-content under `width: auto` even when display:flex,
       which would collapse the box and strip `justify-content` of any effect. */
    html[data-sidebar="collapsed"] .sidebar .sidebar-scroll > .sidebar-link,
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
        margin: 2px 0;
        border-radius: var(--radius-sm);
    }
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle .sg-label { gap: 0; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle:hover,
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle[aria-expanded="true"] { background: var(--bg-hover); }
    html[data-sidebar="collapsed"] .sidebar .sidebar-group-toggle[aria-expanded="true"] { color: var(--text-primary); }

    /* A group's collapse panel becomes a fixed flyout. position:fixed escapes the
       overflow clipping on .offcanvas-body / .sidebar-scroll; JS supplies `top`. */
    html[data-sidebar="collapsed"] .sidebar .sidebar-group > .collapse,
    html[data-sidebar="collapsed"] .sidebar .sidebar-group > .collapsing {
        position: fixed;
        left: var(--sidebar-w-collapsed);
        z-index: 1050;
        min-width: 212px;
        max-height: 72vh;
        overflow-y: auto;
        padding: 6px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius);
        box-shadow: var(--shadow-xl);
        height: auto !important;   /* beats Bootstrap's inline height animation */
        transition: none !important;
    }
    html[data-sidebar="collapsed"] .sidebar .sidebar-group > .collapsing { display: none; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-group .collapse .sidebar-link,
    html[data-sidebar="collapsed"] .sidebar .sidebar-group.ms-2 .collapse .sidebar-link { padding-inline-start: 10px; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-group .collapse .sidebar-link.active::before { left: -6px; }
}

/* Hover label for rail icons — a single body-level node, positioned by JS. */
.rail-tip {
    position: fixed;
    z-index: 1060;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-inverse, #18181b);
    color: var(--text-inverse, #fafafa);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.rail-tip.is-visible { opacity: 1; }

/* Persistent desktop sidebar by overriding offcanvas defaults on large screens */
@media (min-width: 992px) {
    .sidebar.offcanvas {
        transform: none !important;
        visibility: visible !important;
    }
}

/* Mobile offcanvas inherits sidebar styling */
.offcanvas.app-offcanvas {
    width: var(--sidebar-w);
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.offcanvas.app-offcanvas .offcanvas-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- 5. Main content + topbar ---------- */
.main-area {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition);
}
html[data-sidebar="collapsed"] .main-area { margin-left: var(--sidebar-w-collapsed); }
@media (max-width: 991.98px) { .main-area, html[data-sidebar="collapsed"] .main-area { margin-left: 0; } }

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--bg-app) 78%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}

.topbar-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.topbar-breadcrumb {
    font-size: .875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-container {
    padding: 24px 28px 40px;
    flex: 1;
}
@media (max-width: 575.98px) { .page-container { padding: 16px; } }

/* ---------- 6. Buttons ---------- */
.btn {
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }
.btn-sm { padding: 7px 11px; font-size: .8125rem; }
.btn-lg { padding: 11px 18px; font-size: .9375rem; }
.btn i { font-size: 1em; }

/* Primary = solid achromatic */
.btn-primary, .btn-dark {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.btn-primary:hover, .btn-dark:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
    border-color: var(--accent-hover);
}

/* Secondary = bordered surface */
.btn-secondary, .btn-outline-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* Ghost = transparent */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    box-shadow: none;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Outline danger */
.btn-outline-danger {
    background: var(--bg-surface);
    color: var(--danger);
    border-color: var(--border-default);
}
.btn-outline-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-success {
    background: var(--bg-surface);
    color: var(--success);
    border-color: var(--border-default);
}
.btn-outline-success:hover {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}

/* Icon-only button */
.btn-icon {
    /* inline-flex, not the .btn default: .btn-icon is used bare on <a> as well as <button>,
       and width/height are ignored on an inline element - which left link actions unboxed. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    box-shadow: none;
    border-radius: var(--radius-sm);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon i { font-size: 1.05rem; }
.btn-icon.dropdown-toggle::after { display: none; }

/* ---------- 7. Forms ---------- */
.form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.form-text { font-size: .8125rem; color: var(--text-muted); margin-top: 4px; }

.form-control, .form-select {
    font-family: var(--font-sans);
    font-size: .9375rem;
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    line-height: 1.4;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: 0 0 0 3px var(--ring-focus);
    outline: none;
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}
textarea.form-control { min-height: 80px; }
/* The .form-control rule above wins over Bootstrap's .form-control-sm (same specificity, later),
   so every "small" input in the app renders at this one size. Bootstrap's .input-group-sm > *
   rule is more specific and survived, which made an input shrink the moment it gained an addon
   or button (the partner picker, barcode field, product search). Pin those to the same size. */
.input-group-sm > .form-control, .input-group-sm > .form-select,
.input-group-sm > .typeahead > .typeahead-input {
    padding: 9px 12px;
    font-size: .9375rem;
}
.input-group-sm > .input-group-text, .input-group-sm > .btn { font-size: .875rem; }

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger);
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-bg); }

/* Checkbox / radio / switch */
.form-check-input {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-xs);
}
.form-check-input:focus { border-color: var(--text-secondary); box-shadow: 0 0 0 3px var(--ring-focus); }
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-label { font-size: .875rem; color: var(--text-primary); }

/* Native select chevron — light + dark variants so it stays visible on dark surfaces */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2352525b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
}
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* Validation helpers — make small text fit better */
.text-danger.small { font-size: .75rem; margin-top: 4px; display: inline-block; }

/* ---------- 8. Cards ---------- */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px 18px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.card-body { padding: 18px; }
.card-body.p-0 + .card-body, .card > .card-body { color: var(--text-primary); }

/* Sticky pager — pins a list card's footer to the bottom of the viewport so the
   page controls stay reachable while a long table scrolls. Put it on the footer
   element and keep that footer as the last child of the scrolling card body. */
.pager-sticky {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.page-size-select { width: 75px; }

/* Metric card */
.metric-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.metric-card:hover { border-color: var(--border-default); }
.metric-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.metric-label i { font-size: .85rem; }
.metric-value {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.metric-trend {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.metric-trend.up    { color: var(--success); }
.metric-trend.down  { color: var(--danger); }

/* Sparkline placeholder */
.sparkline {
    height: 32px;
    margin-top: 10px;
    background: linear-gradient(180deg, var(--bg-muted) 0%, transparent 100%);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.sparkline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 32' preserveAspectRatio='none'%3E%3Cpath d='M0,24 L15,18 L30,22 L45,12 L60,16 L75,8 L100,14' fill='none' stroke='%2371717a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ---------- 9. Tables ---------- */
.table {
    --bs-table-bg: transparent;
    color: var(--text-primary);
    font-size: .875rem;
    margin: 0;
    border-color: var(--border-subtle);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px;
    vertical-align: middle;
}
.table thead th, .table > thead > tr > th {
    background-color: var(--bg-muted) !important;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--border-subtle);
    padding: 11px 16px;
    white-space: nowrap;
}
.table > tbody > tr:hover > * {
    background: var(--bg-hover);
}
.table-dark { background: transparent !important; }
.table-hover > tbody > tr:hover > * { background: var(--bg-hover); }
.table tbody tr:last-child > * { border-bottom: 0; }

.table .mono, .table td.mono { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); }
.table code {
    font-family: var(--font-mono);
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .75rem;
}

/* ---------- 10. Status pills ---------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    padding: 5px 10px 5px 9px;
    border-radius: 999px;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
}
.status-pill.is-success  { color: var(--success); background: var(--success-bg); border-color: transparent; }
.status-pill.is-danger   { color: var(--danger);  background: var(--danger-bg);  border-color: transparent; }
.status-pill.is-warning  { color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.status-pill.is-info     { color: var(--info);    background: var(--info-bg);    border-color: transparent; }
.status-pill.is-muted    { color: var(--text-muted); }
.status-pill.is-violet   { color: #7c3aed; background: rgba(124, 58, 237, .10); border-color: transparent; }
.status-pill.is-dark     { color: var(--text-primary); background: var(--bg-muted); border-color: transparent; }
[data-bs-theme="dark"] .status-pill.is-violet { color: #a78bfa; background: rgba(167, 139, 250, .14); }

/* Tag (no dot, for non-status labels like schema version) */
.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

/* ---------- 11. Alerts ---------- */
.alert {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: .875rem;
    padding: 12px 14px;
    background-color: var(--bg-muted);
    color: var(--text-primary);
}
.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
}
.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: transparent;
}
.alert-info, .alert-primary {
    background: var(--info-bg);
    color: var(--text-secondary);
    border-color: transparent;
}
.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: transparent;
}

/* ---------- 12. Dropdown ---------- */
.dropdown-menu {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 220px;
    font-size: .875rem;
    color: var(--text-primary);
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background var(--transition-fast);
}
.dropdown-item i { color: var(--text-muted); width: 16px; text-align: center; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dropdown-divider { border-color: var(--border-subtle); margin: 6px 2px; }
.dropdown-header {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 6px 10px 4px;
}

/* ---------- 13. Modal ---------- */
.modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 20px;
}
.modal-footer { border-top: 1px solid var(--border-subtle); padding: 14px 20px; }
.modal-backdrop.show { opacity: .5; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .65; }

/* ---------- 14. Topbar controls + search ---------- */
.topbar-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 12px;
    background-color: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .875rem;
    min-width: 260px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.topbar-search:hover { border-color: var(--border-default); }
.topbar-search i { font-size: .95rem; }
.topbar-search .kbd {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .68rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
}
@media (max-width: 767.98px) { .topbar-search { min-width: 0; padding: 6px 10px; } .topbar-search .label, .topbar-search .kbd { display: none; } }

.topbar-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.topbar-avatar:hover { background: var(--bg-hover); }

/* Row avatar - 28px photo or initials disc used in list tables (e.g. /HR/Employees). */
.row-avatar {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-muted);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

/* ---------- 15. Command palette ---------- */
.cmdk .modal-dialog { max-width: 560px; margin-top: 12vh; }
.cmdk .modal-content { padding: 0; overflow: hidden; }
.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.cmdk-input-wrap i { color: var(--text-muted); font-size: 1.05rem; }
.cmdk-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: .95rem;
}
.cmdk-input::placeholder { color: var(--text-faint); }
.cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-section-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 10px 10px 4px;
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .85rem;
    transition: background var(--transition-fast);
    text-decoration: none;
}
.cmdk-item i { color: var(--text-muted); width: 18px; text-align: center; }
.cmdk-item:hover, .cmdk-item.is-active {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.cmdk-item:hover i, .cmdk-item.is-active i { color: var(--text-primary); }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: .85rem; }
.cmdk-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 8px 14px;
    display: flex;
    gap: 16px;
    font-size: .7rem;
    color: var(--text-faint);
}
.cmdk-footer .kbd {
    font-family: var(--font-mono);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 1px 5px;
    border-radius: 4px;
    margin: 0 3px;
}

/* Global search results inside the palette (docs/plan_global_search.md P4) */
.cmdk-progress { height: 2px; background: transparent; overflow: hidden; }
.cmdk-progress.is-loading { background: var(--bg-muted); }
.cmdk-progress.is-loading::after {
    content: ""; display: block; height: 100%; width: 40%;
    background: var(--text-muted); animation: cmdk-progress 1s ease-in-out infinite;
}
@keyframes cmdk-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cmdk-group-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 10px 4px;
}
.cmdk-group-head .cmdk-section-label { padding: 0; }
.cmdk-group-head .cmdk-count { color: var(--text-muted); font-weight: 400; margin-inline-start: 4px; }
.cmdk-group-head .cmdk-viewall { font-size: .72rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.cmdk-group-head .cmdk-viewall:hover, .cmdk-group-head .cmdk-viewall.is-active { color: var(--text-primary); text-decoration: underline; }
.cmdk-row { display: block; padding: 7px 10px; }
.cmdk-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmdk-row-main .mono { font-family: var(--font-mono); font-size: .78rem; color: var(--text-primary); white-space: nowrap; }
.cmdk-row-main .cmdk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-row-main .cmdk-amount { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.cmdk-row-main .cmdk-date { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.cmdk-row-main .status-pill { font-size: .62rem; }
.cmdk-row-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: var(--text-muted); margin-top: 2px; padding-inline-start: 0; }
.cmdk-row mark { background: var(--warning-bg); color: inherit; font-weight: 700; padding: 0 1px; border-radius: 2px; }
.cmdk-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); white-space: nowrap; }
.cmdk-open { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.cmdk-open.is-zero { color: var(--text-faint); }
.cmdk-static.is-demoted .cmdk-section-label { color: var(--text-faint); }
.cmdk-recent .cmdk-row { display: flex; align-items: center; gap: 10px; }
.cmdk-group.is-collapsed .cmdk-row, .cmdk-group.is-collapsed .cmdk-empty { display: none; }
.cmdk-group-toggle { display: none; background: none; border: 0; color: var(--text-muted); padding: 0 4px; }
@media (max-width: 575.98px) {
    .cmdk .modal-dialog { max-width: none; margin: 0; height: 100%; }
    .cmdk .modal-content { height: 100%; border-radius: 0; }
    .cmdk-list { max-height: none; flex: 1; }
    .cmdk-group-toggle { display: inline-block; }
    .cmdk-row-main .cmdk-date, .cmdk-row-meta { font-size: .7rem; }
}

/* ---------- 16. Skeleton + empty state ---------- */
.skeleton {
    display: block;
    background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-hover) 50%, var(--bg-muted) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-card { height: 80px; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-muted);
}
.empty-state-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    margin: 0 auto 14px;
    background: var(--bg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.1rem;
}
.empty-state-title { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state-desc  { font-size: .8125rem; color: var(--text-muted); margin-bottom: 16px; max-width: 320px; margin-inline: auto; }

/* ---------- 17. Page header ---------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-header h1, .page-header h2, .page-header h3 { margin: 0; }
.page-header-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.page-header-sub   { font-size: .8125rem; color: var(--text-muted); margin-top: 4px; }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Pins a page header just below the global topbar so its actions (e.g. Back / Save)
   stay reachable while the form scrolls. Theme-aware via tokens. */
.page-header--sticky {
    position: sticky;
    top: var(--topbar-h);
    z-index: 1010;
    background: var(--bg-app);
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 992px) {
    .page-header--sticky { top: calc(var(--topbar-h) + 43px); }
}

/* ---------- 18. Auth + setup screens ---------- */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bg-app);
}
@media (min-width: 992px) {
    .auth-shell { grid-template-columns: 2fr 3fr; }
}

/* Left branded panel — hidden below lg. Background photo is set inline per-request
   (Login.cshtml.cs picks one of the 5 uploads/login-screen/* images at random);
   the gradient scrim keeps the logo/footer readable over any of them. */
.auth-brand-panel {
    display: none;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    overflow: hidden;
    background-color: var(--zinc-900);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
}
@media (min-width: 992px) {
    .auth-brand-panel { display: flex; }
}
.auth-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .12) 32%, rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, .72) 100%);
    pointer-events: none;
}
.auth-brand-panel-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.auth-brand-panel-top img { width: 36px; height: 36px; }
.auth-brand-panel-name { font-size: 1.0625rem; font-weight: 600; }
.auth-brand-panel-foot { position: relative; z-index: 1; font-size: .75rem; color: rgba(255, 255, 255, .55); }

/* Right form panel */
.auth-form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.auth-form-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 50% 0%, var(--bg-muted) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-lg);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
}
.auth-brand .sidebar-brand-mark { width: 32px; height: 32px; }
.auth-brand-name { font-size: 1rem; font-weight: 600; }
/* Card sits on --bg-surface, which flips light/dark — swap the mark so it stays visible either way. */
.auth-brand-mark-dark { display: none; }
[data-bs-theme="dark"] .auth-brand-mark-light { display: none; }
[data-bs-theme="dark"] .auth-brand-mark-dark { display: inline-block; }
.auth-title { font-size: 1.125rem; font-weight: 600; text-align: center; margin-bottom: 4px; }
.auth-sub   { font-size: .8125rem; color: var(--text-muted); text-align: center; margin-bottom: 22px; }
.auth-footer { text-align: center; margin-top: 18px; font-size: .8125rem; color: var(--text-muted); }
.auth-footer a { color: var(--text-secondary); }
.auth-footer a:hover { color: var(--text-primary); }

.auth-theme-toggle {
    position: fixed;
    top: 16px; right: 16px;
    z-index: 10;
}

/* Setup wizard */
.setup-shell {
    min-height: 100vh;
    background: var(--bg-app);
    padding: 56px 16px;
    position: relative;
}
.setup-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.setup-card-header {
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.setup-card-body { padding: 26px; }
.setup-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.setup-step-dot {
    width: 28px; height: 4px;
    border-radius: 2px;
    background: var(--bg-muted);
    transition: background var(--transition-fast);
}
.setup-step-dot.active { background: var(--accent); }
.setup-step-dot.done   { background: var(--success); }

/* ---------- 19. Utility tweaks ---------- */
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.border, .border-bottom, .border-top { border-color: var(--border-subtle) !important; }
.bg-light, .bg-body-tertiary { background: var(--bg-muted) !important; }

.divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 18px 0;
}

/* Spinner used for loading icons (replaces fa-spin) */
.spin { animation: spin 0.9s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bootstrap Icons baseline alignment */
.bi { vertical-align: -0.125em; line-height: 1; }

/* Account picker list rows */
.acc-pick-row:hover { background-color: var(--bs-secondary-bg) !important; }
.acc-pick-row:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* Cashier — payment panel fade-in */
#paymentPanel { animation: fadeInUp var(--transition) ease both; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   RTL — Arabic layout overrides
   Bootstrap RTL CSS handles all Bootstrap components.
   These rules handle the custom sidebar/shell layout only.
   ============================================================= */

/* Arabic font stack */
[lang="ar"], [lang="ar"] body {
    --font-sans: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: normal;
    letter-spacing: 0;
    line-height: 1.7;
}

/* Sidebar flips to right side */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-subtle);
}

/* Main content margin flips */
[dir="rtl"] .main-area {
    margin-left: 0;
    margin-right: var(--sidebar-w);
    transition: margin-right var(--transition);
}
html[dir="rtl"][data-sidebar="collapsed"] .main-area {
    margin-right: var(--sidebar-w-collapsed);
    margin-left: 0;
}
@media (max-width: 991.98px) {
    [dir="rtl"] .main-area,
    html[dir="rtl"][data-sidebar="collapsed"] .main-area {
        margin-right: 0;
        margin-left: 0;
    }
}

/* Rail flyouts open toward the content, i.e. leftward when the sidebar is on the right. */
@media (min-width: 992px) {
    html[dir="rtl"][data-sidebar="collapsed"] .sidebar .sidebar-group > .collapse,
    html[dir="rtl"][data-sidebar="collapsed"] .sidebar .sidebar-group > .collapsing {
        left: auto;
        right: var(--sidebar-w-collapsed);
    }
}

/* Active indicator moves to right edge */
[dir="rtl"] .sidebar-link.active::before {
    left: auto;
    right: -10px;
    border-radius: 3px 0 0 3px;
}

/* Offcanvas mobile sidebar is on the right in RTL — handled by Bootstrap RTL classes in _Layout */

/* Topbar breadcrumb chevron flips */
[dir="rtl"] .topbar-breadcrumb .sep i { transform: scaleX(-1); display: inline-block; }

/* Topbar search box spacing */
[dir="rtl"] .topbar-search { direction: rtl; }

/* Dropdown menu alignment */
[dir="rtl"] .dropdown-menu-end { --bs-position: start; }

/* Page header actions gap direction */
[dir="rtl"] .page-header-actions { margin-left: 0; }

/* mono code blocks stay LTR */
[dir="rtl"] .mono, [dir="rtl"] code, [dir="rtl"] pre { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* Table numeric columns keep LTR */
[dir="rtl"] td.mono, [dir="rtl"] th.mono { direction: ltr; text-align: right; }

/* Tag badges stay LTR */
[dir="rtl"] .tag { direction: ltr; }

/* ── Roles/Edit — permissions grid ─────────────────────────────────────── */
.perm-card { border: 1px solid var(--border, #e3e3e8); box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .15s ease; }
.perm-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.perm-card .card-header { background: #fafafa; border-bottom: 1px solid var(--border, #e3e3e8); }
.perm-check .form-check-input { width: 1.05rem; height: 1.05rem; border-radius: 4px; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.perm-check .form-check-label { cursor: pointer; user-select: none; font-size: .875rem; }
.perm-check .perm-hint { cursor: help; font-size: .75rem; vertical-align: -1px; }
.perm-check .perm-hint:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 50%; }
.perm-master { width: 1.1rem; height: 1.1rem; border-radius: 4px; cursor: pointer; }
[data-bs-theme="dark"] .perm-card .card-header { background: rgba(255,255,255,.03); }
.perm-category-header { padding: 8px 4px; border-bottom: 1px solid var(--border, #e3e3e8); }
.perm-category-header h6 { font-size: .95rem; letter-spacing: .01em; }
.perm-cat-toggle .sg-chevron { transition: transform .15s ease; }
.perm-cat-toggle.collapsed .sg-chevron { transform: rotate(-90deg); }
.perm-module-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.perm-subgroup-header { font-size: .72rem; letter-spacing: .06em; }
.perm-row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--border, #e3e3e8);
    border-radius: 6px;
    background: var(--bs-body-bg);
}
.perm-row:hover { background: rgba(15,23,42,.025); }
.perm-row.is-muted { opacity: .62; }
.perm-row-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.perm-row-head .perm-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-row-head .perm-count { flex-shrink: 0; margin-left: auto; }
.perm-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.perm-actions .perm-check { min-width: 118px; }
.perm-readonly { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 118px; font-size: .875rem; line-height: 1.25; }
.perm-readonly i { font-size: .8rem; margin-top: .15rem; flex-shrink: 0; }
.perm-readonly.is-on i { color: var(--bs-success); }
.perm-readonly.is-off { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .perm-row:hover { background: rgba(255,255,255,.03); }
@media (max-width: 767.98px) {
    .perm-row { grid-template-columns: 1fr; }
    .perm-actions .perm-check,
    .perm-readonly { min-width: 45%; }
}
.perm-thumb { width: 32px; height: 32px; object-fit: cover; flex-shrink: 0; font-size: .75rem; }

/* ── Module 14: rendered rich-text content (sanitised server-side) ─────────────── */
.content-body { line-height: 1.65; }
.content-body img { max-width: 100%; height: auto; border-radius: 6px; }
.content-body h1, .content-body h2, .content-body h3 { margin-top: 1.25rem; margin-bottom: .5rem; }
.content-body ul, .content-body ol { padding-inline-start: 1.5rem; }
.content-body blockquote {
    border-inline-start: 3px solid var(--border, #e3e3e8);
    padding-inline-start: 1rem; margin-inline-start: 0; color: var(--text-muted, #6b6b76);
}
.content-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.content-body th, .content-body td { border: 1px solid var(--border, #e3e3e8); padding: 6px 10px; text-align: start; }
.content-body hr { border: 0; border-top: 1px solid var(--border, #e3e3e8); margin: 1.25rem 0; }
.content-body a { text-decoration: underline; }

/* ── Always-dark sidebar — base structure ────────────────────────────────── */
/* Sidebar is pinned dark regardless of the page light/dark theme toggle.    */
/* All child elements inherit these scoped tokens automatically.              */
.sidebar,
.offcanvas.app-offcanvas {
    /* Sidebar-scoped accent. Deliberately NOT var(--accent): the global accent is
       achromatic (zinc-900 / #fafafa), and a tint of black on a black sidebar is
       invisible — which is why the active row used to read as pure greyscale.
       Green appears in exactly two places, the active wash and the indicator bar;
       hover stays neutral so the active row is the only thing that draws the eye.
       Overridden wholesale by the brand-fill themes further up (higher specificity). */
    --sidebar-accent:      #3ECF8E;

    --bg-surface:          #121212;
    --bg-hover:            rgba(255, 255, 255, .05);
    --bg-active:           rgba(62, 207, 142, .12);   /* --sidebar-accent @ 12% */
    --border-subtle:       #2e2e2e;
    --border-default:      #2e2e2e;
    --text-primary:        #fafafa;
    --text-secondary:      #898989;
    --text-muted:          #898989;
    --text-faint:          #898989;
    --sidebar-link-color:  #898989;
    --sidebar-link-icon:   #898989;
    --sidebar-group-color: #fafafa;
    background: #121212;
}

/* The 3px indicator bar. The brand-fill themes override this to #ffffff with a
   more specific selector, so they are unaffected. */
.sidebar .sidebar-link.active::before,
.offcanvas.app-offcanvas .sidebar-link.active::before {
    background: var(--sidebar-accent);
}

/* Section divider — 1px rule above each section label */
.sidebar-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 6px 0;
}

/* Active link styling relies on the cascade from line 367 */

/* ── Compact invoice fee cells (Invoices/Create + Detail) ─────────────────────
   A line's fee components render as a horizontal strip of compact cells instead
   of stacked full-width rows. Editable controls live in a per-cell details panel
   (Create); Detail uses read-only chips with a tooltip. */
.fee-strip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }

.fee-cell {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    padding: .35rem .5rem;
    min-width: 150px;
    font-size: .8125rem;
}
.fee-cell-head { display: flex; align-items: center; gap: .4rem; }
.fee-cell .fee-type-label { font-weight: 500; white-space: nowrap; }
.fee-cell .fee-amount { width: 92px; text-align: right; }
.fee-info-btn { color: var(--bs-secondary-color); }
.fee-info-btn.is-open { color: var(--bs-primary); }

.fee-details {
    margin-top: .4rem;
    padding-top: .4rem;
    border-top: 1px dashed var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 240px;
}
.fee-details-row { display: flex; align-items: center; gap: .4rem; }
.fee-details-row > label { width: 60px; margin: 0; color: var(--bs-secondary-color); font-size: .72rem; }
.fee-details-row .fee-account-name { font-size: .75rem; }

.line-tax-status { font-weight: 500; }

/* Read-only fee chip (Invoices/Detail) */
.fee-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .3rem .55rem;
    font-size: .8125rem;
}
.fee-chip.is-display-only { border-style: dashed; opacity: .75; }
.fee-chip .fee-chip-label { color: var(--bs-secondary-color); }
.fee-chip .fee-chip-amount { font-weight: 500; }
.fee-chip .fee-chip-info { color: var(--bs-secondary-color); cursor: help; }

/* ---------- 21. Chatter / Activity timeline ---------- */
details > summary { cursor: pointer; }
.chatter-item { font-size: .8125rem; }
.chatter-item .status-pill { font-size: .65rem; }

/* ---------- 22. Dashboard hero band ---------- */
.dash-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(circle at 12% -35%, rgba(45, 212, 191, .72), transparent 42%),
        linear-gradient(112deg, #0891b2 0%, #1167a8 48%, #172554 100%) !important;
    border: 0 !important;
    box-shadow: 0 16px 36px rgba(15, 56, 105, .2) !important;
}
.dash-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 38%);
}
.dash-hero .card-body { position: relative; z-index: 1; }
.dash-hero .text-dark,
.dash-hero .text-secondary { color: #fff !important; }
.dash-hero .text-muted { color: rgba(255, 255, 255, .7) !important; }
.dash-hero .vr,
.dash-hero .border-start { border-color: rgba(255, 255, 255, .26) !important; }
.dash-hero-avatar {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .28) !important;
    font-weight: 600; font-size: 1.05rem; letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px rgba(3, 31, 74, .18) !important;
}
.dash-hero-name { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.dash-hero-sub { font-size: .8125rem; }
.dash-hero-clock-label {
    font-size: .65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
}
.dash-hero-clock-val { font-size: 1.1rem; font-weight: 600; }
.dash-hero .btn-primary {
    color: #0f4f87;
    background: #fff;
    border-color: #fff;
}
.dash-hero .btn-primary:hover,
.dash-hero .btn-primary:focus-visible {
    color: #0b3d6a;
    background: #eaf6ff;
    border-color: #eaf6ff;
}
.dash-hero .btn-outline-primary {
    color: #fff;
    border-color: rgba(255, 255, 255, .72);
}
.dash-hero .btn-outline-primary:hover,
.dash-hero .btn-outline-primary:focus-visible {
    color: #0f4f87;
    background: #fff;
    border-color: #fff;
}
.dash-hero .badge.bg-light,
.dash-hero .bg-light {
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .24) !important;
}

/* ---------- 22b. On-break banner + live timer ---------- */
.dash-break-banner {
    border-left: 4px solid var(--bs-warning);
    background: rgba(255, 193, 7, .08);
}
.dash-break-timer {
    font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--bs-warning-text-emphasis, #997404);
}
.dash-break-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bs-warning); flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255, 193, 7, .7);
    animation: dash-break-pulse 1.6s infinite;
}
@keyframes dash-break-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* ---------- 23. Vendor bill line editor ---------- */
.vendor-bill-lines { min-width: 1180px; }
.vendor-bill-lines th:nth-child(1) { width: 175px; }   /* Product */
.vendor-bill-lines th:nth-child(2) { min-width: 220px; } /* Description */
.vendor-bill-lines th:nth-child(3) { width: 220px; }   /* Account */
.vendor-bill-lines th:nth-child(4) { width: 95px; }    /* Qty */
.vendor-bill-lines th:nth-child(5) { width: 125px; }   /* Unit price */
.vendor-bill-lines th:nth-child(6) { width: 165px; }   /* Purchase tax */
.vendor-bill-lines th:nth-child(7) { width: 105px; }   /* Net */
.vendor-bill-lines th:nth-child(8) { width: 95px; }    /* VAT */
.vendor-bill-lines th:nth-child(9) { width: 110px; }   /* Total */
.vendor-bill-lines th:nth-child(10) { width: 42px; }   /* Remove */
.vendor-bill-lines-total { background: var(--bg-muted); font-weight: 600; }

/* ---------- 24. Typeahead (reusable async autocomplete — see site.js) ---------- */
.typeahead { position: relative; }
.typeahead-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 1055;
    max-height: 320px;
    overflow-y: auto;
    padding: 5px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.typeahead-item {
    display: block;
    width: 100%;
    text-align: start;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.typeahead-item:hover, .typeahead-item.is-active { background: var(--bg-hover); }
.typeahead-label, .typeahead-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.typeahead-label { font-size: .85rem; font-weight: 500; }
.typeahead-meta  { font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono); }
.typeahead-mark  { background: transparent; padding: 0; color: inherit; font-weight: 700; }
.typeahead-empty { padding: 18px 10px; text-align: center; color: var(--text-muted); font-size: .8rem; }
/* Inside an .input-group the wrapper, not the input, is the flex child — so it has to
   grow, and the input's trailing corners have to be squared against the addon itself. */
.input-group > .typeahead { flex: 1 1 auto; min-width: 0; }
.input-group > .typeahead:not(:last-child) > .typeahead-input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
/* Standalone typeahead used as a page-header action (e.g. the "new advance" partner
   picker) — give it a comfortable, capped width and drop to full width on mobile. */
.advance-partner-picker { width: 320px; max-width: 100%; }
@media (max-width: 575.98px) {
    .advance-partner-picker { width: 100%; }
}

/* Full-page busy overlay (shown by site.js for data-busy-overlay forms / long navigations). */
.app-busy-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    z-index: 2000;
}
.app-busy-overlay.is-visible { display: flex; }

/* ---------- 20. Stat tiles (self-service hubs: My Attendance, My Transactions) ---------- */
/* A tile is a label + one big number + optional sub-line. Tiles sit in a row and never share a
   line with prose, which is what keeps a summary card readable at a glance. */
.stat-tile {
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--bg-muted);
    min-width: 0;
}
.stat-tile .stat-label { font-size: .6875rem; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.stat-tile .stat-label .ti { font-size: 1rem; }
.stat-tile .stat-value { font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.stat-tile .stat-sub   { font-size: .75rem; color: var(--text-muted); margin-top: 3px; }
.stat-tile.is-hero .stat-value { font-size: 2rem; }
.leave-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.leave-row:first-child { border-top: 0; padding-top: 0; }
.leave-row .leave-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.leave-row .leave-name .ti { font-size: 1.125rem; }
.leave-row .leave-figures { font-size: .8125rem; color: var(--text-muted); white-space: nowrap; }
.leave-row .leave-figures strong { color: var(--text-primary); }

/* ---------- 21. KPI cards (one definition; the per-page <style> copies are being retired) ---------- */
.kpi-card { min-width: 140px; display: block; text-decoration: none; color: inherit; }
.kpi-card:hover { border-color: var(--zinc-400); }
.kpi-label { font-size: .75rem; color: var(--text-muted); margin-bottom: .2rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-sub   { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }
.kpi-icon  { font-size: 1.5rem; opacity: .8; }

/* ---------- 22. Layout utilities (so pages carry no style="" attributes) ---------- */
.table-compact { font-size: .8125rem; }
.w-date   { width: 130px; }
.w-select { width: auto; min-width: 130px; }
.filter-search { min-width: 200px; }
.col-w-xs { width: 40px; }
.col-w-sm { width: 95px; }
.col-w-md { width: 130px; }
.col-w-lg { width: 160px; }
.col-w-num { width: 110px; }
.col-w-actions { width: 80px; }
.truncate-md { max-width: 220px; }
.truncate-lg { max-width: 240px; }
.empty-state-icon { font-size: 2.5rem; }

/* Progress-bar widths in 5% steps, so a server-computed percentage needs no style attribute. */
.pct-0 { width: 0%; }
.pct-5 { width: 5%; }
.pct-10 { width: 10%; }
.pct-15 { width: 15%; }
.pct-20 { width: 20%; }
.pct-25 { width: 25%; }
.pct-30 { width: 30%; }
.pct-35 { width: 35%; }
.pct-40 { width: 40%; }
.pct-45 { width: 45%; }
.pct-50 { width: 50%; }
.pct-55 { width: 55%; }
.pct-60 { width: 60%; }
.pct-65 { width: 65%; }
.pct-70 { width: 70%; }
.pct-75 { width: 75%; }
.pct-80 { width: 80%; }
.pct-85 { width: 85%; }
.pct-90 { width: 90%; }
.pct-95 { width: 95%; }
.pct-100 { width: 100%; }

/* Multi-line free text (document notes) shown as typed: keeps the line breaks, still wraps. */
.text-pre-line { white-space: pre-line; }