/* ============================================================
   Aydin Chips — design system
   Inspired by GreenChips (greenchips.com): forest-green primary,
   warm off-white body, dark charcoal footer, moderate radii,
   crisp neutral borders, soft shadows. Chip+leaf decorative
   motifs reinforce the chip-distribution + eco-aware identity.
   ============================================================ */

/* Icons are provided by Bootstrap Icons (web/bootstrap-icons/). Render them
   without the default 3s invisibility window. The .bi base class + per-icon
   ::before glyphs come from bootstrap-icons.min.css; we only nudge the
   font-display here so missing-font never blocks paint. */
@font-face {
    font-family: "bootstrap-icons";
    font-display: swap;
    src: url("../bootstrap-icons/fonts/bootstrap-icons.woff2") format("woff2");
}

:root {
    /* Brand palette — forest green primary */
    --ac-primary:        #16a34a;   /* green-600 */
    --ac-primary-700:    #15803d;   /* green-700 hover */
    --ac-primary-500:    #22c55e;
    --ac-primary-300:    #86efac;
    --ac-primary-100:    #dcfce7;
    --ac-primary-50:     #f0fdf4;
    --ac-accent:         #0ea5e9;   /* chip-industry sky-blue accent */
    --ac-accent-100:     #e0f2fe;
    --ac-leaf:           #4ade80;   /* fresh leaf tint for decorative motifs */

    --ac-bg:             #fafaf9;   /* warm off-white */
    --ac-bg-grad-1:      #f0fdf4;   /* very light green tint */
    --ac-bg-grad-2:      #fafaf9;

    --ac-card-bg:        #ffffff;
    --ac-card-border:    #e7e5e4;   /* warm neutral border */
    --ac-card-shadow:    0 1px 2px rgba(16,16,16,.04), 0 4px 16px rgba(5, 150, 105, .05);
    --ac-card-shadow-hi: 0 2px 6px rgba(16,16,16,.06), 0 12px 32px rgba(5, 150, 105, .08);

    --ac-text:           #18181b;   /* zinc-900 */
    --ac-text-strong:    #09090b;
    --ac-muted:          #71717a;   /* zinc-500 */
    --ac-border:         #e4e4e7;   /* zinc-200 */
    --ac-input-border:   #d4d4d8;   /* zinc-300 */

    --ac-footer-bg:      #18181b;   /* charcoal footer */
    --ac-footer-fg:      #a1a1aa;
    --ac-footer-link:    #e4e4e7;
}

/* ---- Re-tint Tabler primary ---- */
[data-bs-theme="light"],
:root {
    --tblr-primary: var(--ac-primary);
    --tblr-primary-rgb: 22, 163, 74;
    --tblr-primary-darken: var(--ac-primary-700);
    --tblr-primary-lt: var(--ac-primary-100);
    --tblr-primary-fg: #ffffff;
    --tblr-link-color: var(--ac-primary-700);
}

/* ---- Body / app shell ---- */
body {
    background: var(--ac-bg);
    color: var(--ac-text);
    font-feature-settings: 'cv11','ss01','ss03';
    -webkit-font-smoothing: antialiased;
}

/* Subtle circuit-pattern body backdrop (chip industry texture, green-tinted) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .28;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%2386efac' stroke-width='0.5' opacity='0.6'><circle cx='10' cy='10' r='1.5'/><circle cx='70' cy='70' r='1.5'/><circle cx='70' cy='10' r='1.5'/><circle cx='10' cy='70' r='1.5'/><path d='M10 10 L30 10 L30 30 M70 10 L50 10 L50 30 M10 70 L30 70 L30 50 M70 70 L50 70 L50 50'/></g></svg>");
    background-size: 80px 80px;
}

/* ============================================================
   APP CONTAINER — wide layout, small side padding only
   ============================================================ */
.app-container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: none;
}
@media (min-width: 1200px) {
    .app-container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ============================================================
   PAGE HEADER (gradient + dot pattern + avatar)
   ============================================================ */
.page-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ac-bg-grad-1) 0%, #ffffff 60%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid var(--ac-card-border);
    margin: 1rem 0 1.25rem;
    padding: 1.25rem 1.5rem;
}
.page-header::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 55%;
    background-image: radial-gradient(circle, rgba(74, 222, 128, .50) 1.1px, transparent 1.5px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 95%);
            mask-image: linear-gradient(to left, black 10%, transparent 95%);
    pointer-events: none;
}
/* Inner container must sit above the ::after dot-pattern so title + actions
   are not painted over. Match BOTH old container-xl and new container-fluid. */
.page-header > .container-xl,
.page-header > .container-fluid,
.page-header > .container { position: relative; z-index: 2; }

.page-pretitle {
    color: var(--ac-primary-700);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.page-title {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--ac-text-strong);
    margin: .15rem 0 .35rem;
    line-height: 1.15;
}
.page-title .badge { font-size: .72rem; font-weight: 600; }

/* avatar block on the left of page-header */
.ph-avatar {
    width: 60px; height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ac-primary-100), #fff);
    border: 1px solid var(--ac-card-border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ac-primary-700);
    font-size: 1.8rem;
    flex-shrink: 0;
}

/* Audit-meta strip */
.audit-meta-strip {
    color: var(--ac-muted);
    font-size: .8125rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin-top: .25rem;
}
.audit-meta-strip i { color: var(--ac-primary-300); margin-right: .25rem; }
.audit-meta-strip .sep { color: var(--ac-primary-300); }

/* "More actions" button area */
.ph-actions .btn { border-radius: 10px; }
.ph-actions .more-actions {
    background: #fff;
    border: 1px solid var(--ac-card-border);
    color: var(--ac-text);
    font-weight: 500;
}
.ph-actions .more-actions:hover {
    background: var(--ac-primary-50);
    color: var(--ac-primary-700);
    border-color: var(--ac-primary-300);
}

/* ============================================================
   NAVBAR (top menu)
   ============================================================ */
.navbar.sticky-top { backdrop-filter: saturate(140%) blur(10px); background: rgba(255,255,255,.85) !important; }
.navbar .navbar-brand .avatar { background: linear-gradient(135deg, var(--ac-primary-100), var(--ac-accent-100)); color: var(--ac-primary-700); font-weight: 700; }
.navbar.navbar-expand-md .navbar-nav .nav-link { padding: .7rem 1rem; font-weight: 500; color: var(--ac-text); }
.navbar .nav-link:hover { color: var(--ac-primary); }
.navbar .nav-link.active { color: var(--ac-primary) !important; }
.dropdown-menu { border: 1px solid var(--ac-card-border); border-radius: 12px; padding: .35rem; }
.dropdown-header { color: var(--ac-primary-700); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .5rem .75rem .25rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ac-primary-50); color: var(--ac-primary-700); }
.dropdown-item i { color: var(--ac-primary); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--ac-card-bg);
    border: 1px solid var(--ac-card-border);
    border-radius: 12px;
    overflow: hidden;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ac-border);
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }
.card-footer { background: transparent; border-top: 1px solid var(--ac-border); padding: .85rem 1.25rem; }

.card-section {
    position: relative;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--ac-border);
}
.card-section:last-child { border-bottom: 0; }
.card-section-title { font-weight: 700; color: var(--ac-text-strong); font-size: 1.05rem; margin-bottom: .1rem; }
.card-section-sub   { color: var(--ac-muted); font-size: .85rem; margin-bottom: 1rem; }

/* Decorative chip illustration in section header (right-aligned, faint) */
.card-section .section-deco {
    position: absolute;
    right: 1rem; top: 1rem;
    width: 110px; height: 80px;
    opacity: .55;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
}

/* ============================================================
   TABS (entity update screens) — segmented pills inside a card
   ============================================================ */
.entity-tabs {
    margin-top: 1rem;
}
.entity-tabs > .nav-tabs {
    background: #fff;
    border: 1px solid var(--ac-card-border);
    border-radius: 14px;
    padding: .35rem;
    margin-bottom: 1rem;
    gap: .15rem;
}
.entity-tabs > .nav-tabs > .nav-item > .nav-link {
    border: 0;
    border-radius: 10px;
    padding: .65rem 1rem;
    color: var(--ac-muted);
    font-weight: 500;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    position: relative;
}
.entity-tabs > .nav-tabs > .nav-item > .nav-link i { color: var(--ac-primary-300); transition: color .15s ease; }
.entity-tabs > .nav-tabs > .nav-item > .nav-link:hover {
    background: var(--ac-primary-50);
    color: var(--ac-primary-700);
}
.entity-tabs > .nav-tabs > .nav-item > .nav-link:hover i { color: var(--ac-primary); }
.entity-tabs > .nav-tabs > .nav-item > .nav-link.active {
    color: var(--ac-primary-700) !important;
    background: var(--ac-primary-50);
}
.entity-tabs > .nav-tabs > .nav-item > .nav-link.active i { color: var(--ac-primary); }
.entity-tabs > .tab-content {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Sub-pills used on Master Data + Company role filter row */
.nav-pills .nav-link {
    border-radius: 999px;
    padding: .4rem .85rem;
    color: var(--ac-muted);
    font-weight: 500;
}
.nav-pills .nav-link.active {
    background: var(--ac-primary);
    color: #fff;
}
.nav-pills .nav-link:hover:not(.active) { background: var(--ac-primary-50); color: var(--ac-primary-700); }

/* ============================================================
   FORMS — inputs / labels / focus / errors
   ============================================================ */
.form-label {
    color: var(--ac-text-strong);
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .3rem;
    letter-spacing: .005em;
}
.form-label.required::after { content: ' *'; color: var(--ac-primary); }
.form-hint { color: var(--ac-muted); font-size: .75rem; margin-top: .25rem; }

.form-control,
.form-select {
    border: 1.5px solid var(--ac-input-border);
    border-radius: 8px;
    padding: .55rem .85rem;
    background: #fff;
    color: var(--ac-text);
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: none;
}
.form-control::placeholder { color: #a1a1aa; }
.form-control:focus,
.form-select:focus {
    border-color: var(--ac-primary);
    background: #fff;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #e11d48;
}
.form-control-sm, .form-select-sm { border-radius: 6px; padding: .35rem .6rem; }

textarea.form-control { line-height: 1.45; }

/* Input with leading icon */
.input-icon .input-icon-addon { color: var(--ac-primary-300); }
.input-icon:focus-within .input-icon-addon { color: var(--ac-primary); }

/* Form-switch (toggle) */
.form-switch .form-check-input {
    width: 2.5em; height: 1.35em;
    background-color: var(--ac-input-border);
    border-color: var(--ac-input-border);
}
.form-check-input:checked { background-color: var(--ac-primary); border-color: var(--ac-primary); }
.form-check-input:focus   { }

/* TomSelect (searchable dropdown) — match input style */
.ts-wrapper .ts-control {
    border: 1.5px solid var(--ac-input-border) !important;
    border-radius: 8px !important;
    padding: .45rem .8rem !important;
    background: #fff !important;
    box-shadow: none !important;
    min-height: 42px;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--ac-primary) !important;
}

/* Small-size Tom Select — match form-control-sm height (universal) */
.ts-wrapper.form-control-sm .ts-control,
.ts-wrapper.form-select-sm  .ts-control {
    min-height: 31px !important;
    padding: .2rem .55rem !important;
    font-size: .8125rem !important;
    border-radius: 6px !important;
}
.ts-wrapper.form-control-sm,
.ts-wrapper.form-select-sm { font-size: .8125rem; }

/* Native file inputs — match other small inputs height (universal) */
.form-control[type="file"].form-control-sm { line-height: 1.4; padding: .2rem .55rem; }
.form-control[type="file"] { padding: .35rem .6rem; }
.form-control[type="file"]::file-selector-button {
    margin-right: .75rem; padding: .35rem .85rem;
    background: var(--ac-primary-50); color: var(--ac-primary-700);
    border: 0; border-right: 1px solid var(--ac-card-border);
    border-radius: 6px 0 0 6px;
    cursor: pointer;
}
.form-control[type="file"].form-control-sm::file-selector-button {
    padding: .15rem .65rem; font-size: .8125rem;
}
.ts-dropdown {
    background: #ffffff !important;            /* solid, never see-through */
    border: 1px solid var(--ac-card-border) !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    z-index: 99999 !important;                 /* always above page chrome */
}
.ts-dropdown .ts-dropdown-content { background: #ffffff !important; }
.ts-dropdown .option,
.ts-dropdown .optgroup-header { background: #ffffff !important; }
.modal-open .ts-dropdown   { z-index: 1080 !important; }  /* modal backdrop (1055) sits above */
.modal-dialog .ts-dropdown { z-index: 1080 !important; }  /* when modal hosts the picker */
.ts-dropdown .active { background: var(--ac-primary-50) !important; color: var(--ac-primary-700) !important; }
.ts-wrapper.single .ts-control:after { border-color: var(--ac-primary) transparent transparent transparent !important; }

/* ---- Autocomplete text-input typeahead ---- */
.ac-wrap { position: relative; }
.ac-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff !important;          /* always opaque */
    border: 1px solid var(--ac-card-border);
    border-radius: 10px;
    z-index: 99998;                          /* just below ts-dropdown but above page chrome */
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
    padding: .25rem;
    display: none;
}
.ac-item {
    display: block;
    padding: .45rem .65rem;
    border-radius: 6px;
    color: var(--ac-text);
    cursor: pointer;
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.3;
}
.ac-item:hover, .ac-item.active {
    background: var(--ac-primary-50);
    color: var(--ac-primary-700);
}
.ac-item .ac-sub { font-size: .75rem; color: var(--ac-muted); display: block; margin-top: .1rem; }
.ac-loading { display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--ac-muted); font-size: .85rem; }
.ac-empty { padding: .75rem; color: var(--ac-muted); font-size: .85rem; text-align: center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: 8px;
    font-weight: 600;
    padding: .5rem 1rem;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-sm { border-radius: 6px; padding: .35rem .65rem; font-weight: 500; }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--ac-primary-500) 0%, var(--ac-primary) 100%);
    border: 0;
    color: #fff;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-primary-700) 100%);
    color: #fff;
}
.btn-primary:disabled { background: var(--ac-primary-300); color: #fff; box-shadow: none; }

.btn-outline-primary {
    color: var(--ac-primary-700);
    border: 1.5px solid var(--ac-primary-300);
    background: #fff;
}
.btn-outline-primary:hover { background: var(--ac-primary-50); color: var(--ac-primary-700); border-color: var(--ac-primary); }

.btn-outline-secondary {
    color: var(--ac-text);
    border: 1.5px solid var(--ac-border);
    background: #fff;
}
.btn-outline-secondary:hover { background: var(--ac-primary-50); color: var(--ac-primary-700); border-color: var(--ac-primary-300); }

.btn-link { color: var(--ac-primary-700); text-decoration: none; font-weight: 500; }
.btn-link:hover { color: var(--ac-primary); text-decoration: none; }

.btn-danger,
.btn-outline-danger { border-radius: 10px; }
.btn-outline-danger {
    border: 1.5px solid #fecaca;
    background: #fff;
    color: #b91c1c;
}
.btn-outline-danger:hover { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }

/* Floating action bar at bottom of forms (sticky-feel) */
.form-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-top: 1px solid var(--ac-border);
    padding: .9rem 1.25rem;
    border-radius: 0 0 16px 16px;
    margin: 1.25rem -1.25rem -1.25rem;
}

/* ============================================================
   BADGES — soft pill style
   ============================================================ */
.badge {
    font-weight: 600;
    padding: .35em .65em;
    border-radius: 999px;
    letter-spacing: .01em;
}
.bg-blue-lt   { background: #dbeafe !important; color: #1d4ed8 !important; }
.bg-green-lt  { background: #d1fae5 !important; color: #047857 !important; }
.bg-red-lt    { background: #fee2e2 !important; color: #b91c1c !important; }
.bg-yellow-lt { background: #fef3c7 !important; color: #b45309 !important; }
.bg-purple-lt { background: var(--ac-primary-100) !important; color: var(--ac-primary-700) !important; }
.bg-cyan-lt   { background: var(--ac-accent-100) !important; color: #0e7490 !important; }
.bg-secondary-lt { background: #f1f5f9 !important; color: #475569 !important; }
.bg-orange-lt { background: #ffedd5 !important; color: #c2410c !important; }
.bg-primary-lt { background: var(--ac-primary-100) !important; color: var(--ac-primary-700) !important; }

/* Bootstrap's built-in .badge.bg-danger inherits body text colour
   (dark grey) which is unreadable on the solid red background. Every
   place we use it — the CANCELLED marker on commission payments,
   advance adjustments, generic error chips — needs white text. Force
   it globally so nobody has to remember `text-white` on every usage. */
.badge.bg-danger,
.bg-danger.badge {
    color: #ffffff !important;
}

/* ============================================================
   GRIDVIEW / TABLES
   ============================================================ */
.grid-view table.table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.grid-view table.table thead th {
    background: var(--ac-primary-50);
    color: var(--ac-primary-700);
    border-bottom: 1px solid var(--ac-border);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .75rem 1rem;
    white-space: nowrap;
}
.grid-view table.table tbody tr { transition: background .12s ease; }
.grid-view table.table tbody tr:hover { background: var(--ac-primary-50); }
.grid-view table.table tbody td { padding: .8rem 1rem; vertical-align: middle; border-top: 1px solid var(--ac-border); }
.grid-view .summary { color: var(--ac-muted); font-size: .8125rem; padding-top: .5rem; }
.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    color: var(--ac-primary-700);
    border-color: var(--ac-card-border);
}
.pagination .page-item.active .page-link { background: var(--ac-primary); border-color: var(--ac-primary); color: #fff; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { background: transparent; padding: 0; font-size: .82rem; }
.breadcrumb-item a { color: var(--ac-primary-700); text-decoration: none; font-weight: 500; }
.breadcrumb-item.active { color: var(--ac-muted); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-content { border: 0; border-radius: 14px; }
.modal-header { border-bottom: 1px solid var(--ac-border); padding: 1rem 1.25rem; }
.modal-title { font-weight: 700; color: var(--ac-text-strong); }
.modal-body { padding: 1.25rem; }
.modal-blur .modal-backdrop { backdrop-filter: blur(4px); background: rgba(46,32,89,.45); }

/* ============================================================
   EMPTY-STATE
   ============================================================ */
.empty { padding: 3rem 1rem; text-align: center; }
.empty-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px;
    background: var(--ac-primary-50); color: var(--ac-primary);
    display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.empty-title { font-weight: 700; color: var(--ac-text-strong); margin-bottom: .25rem; }
.empty-subtitle { color: var(--ac-muted); margin-bottom: 1rem; }

/* ============================================================
   AUTH PAGES — split screen: brand panel + form (layouts/auth.php)
   ============================================================ */
.auth-split { min-height: 100vh; display: flex; background: #fff; }
.auth-brand {
    flex: 0 0 44%;
    max-width: 620px;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    color: #cbd5e1;
    background:
        radial-gradient(circle at 85% 15%, rgba(16,185,129,.22), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(79,70,229,.20), transparent 40%),
        linear-gradient(160deg, #0b1324 0%, #0f1b30 100%);
    position: relative;
    overflow: hidden;
}
.auth-brand::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(148,163,184,.14) 1px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, transparent);
            mask-image: linear-gradient(to bottom, transparent, black 40%, transparent);
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-top { display: flex; align-items: center; gap: .75rem; }
.auth-brand-name { font-weight: 800; letter-spacing: .06em; font-size: 1.15rem; color: #fff; }
.auth-brand-body h1 { color: #fff; font-size: 2.1rem; font-weight: 700; line-height: 1.2; margin-bottom: .75rem; }
.auth-brand-body p { font-size: 1rem; color: #94a3b8; max-width: 26rem; }
.auth-brand-flow { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 26rem; }
.auth-brand-flow li {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .75rem; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    font-size: .85rem; color: #cbd5e1;
}
.auth-brand-flow i { color: var(--ac-primary-500); }
.auth-brand-foot { font-size: .8rem; color: #64748b; }

.auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--ac-bg); }
.auth-form-inner { width: 100%; max-width: 420px; }
.auth-form-inner .card { border: 1px solid var(--ac-border); border-radius: 14px; }
.auth-mobile-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; }
.auth-mobile-brand .auth-brand-name { color: var(--ac-text-strong); }

/* ============================================================
   HTMX feedback
   ============================================================ */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Reusable busy-state for any button that fires an HTMX request.
   Markup pattern:
     <button class="btn btn-primary" hx-...>
       <span class="btn-loading-idle"><i class="bi bi-search me-1"></i>Search</span>
       <span class="btn-loading-spinner">
         <span class="spinner-border spinner-border-sm me-1" role="status"></span>Searching…
       </span>
     </button>
   When HTMX adds .htmx-request to the button (its own request) OR to an
   ancestor (e.g. a wrapping form), we swap the two states and lock the
   button so it can't be double-clicked. */
.btn-loading-spinner { display: none; align-items: center; }
.btn.htmx-request,
.htmx-request .btn-loading-spinner-host { /* host = ancestor that gets .htmx-request */
    cursor: progress;
    pointer-events: none;
}
.btn.htmx-request .btn-loading-idle,
.htmx-request .btn-loading-spinner-host .btn-loading-idle { display: none !important; }
.btn.htmx-request .btn-loading-spinner,
.htmx-request .btn-loading-spinner-host .btn-loading-spinner { display: inline-flex !important; }

/* Toastr position + style */
#toast-container > div { opacity: .98; border-radius: 10px; }
.toast { border-radius: 10px !important; }

/* ============================================================
   UTILITY — alert (info / success / danger) shape
   ============================================================ */
.alert { border-radius: 12px; border: 0; padding: .85rem 1rem; }
.alert-info    { background: var(--ac-primary-50); color: var(--ac-primary-700); }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-danger  { background: #fee2e2; color: #991b1b; }
.alert i { margin-right: .35rem; }

/* ============================================================
   AVATAR (used in user menu and other places)
   ============================================================ */
.avatar { border-radius: 8px; font-weight: 600; }
.avatar-sm  { width: 32px;  height: 32px;  font-size: .75rem; }
.avatar-md  { width: 48px;  height: 48px;  font-size: 1rem; }
.avatar-xl  { width: 80px;  height: 80px;  font-size: 1.5rem; }

/* ============================================================
   DOCUMENT TOTALS table + side panel (reusable for Req / Quote / PO / SO / INV)
   ============================================================ */
@media (min-width: 992px) {
    .totals-side {
        position: sticky;
        top: 80px;        /* clears the sticky navbar */
        align-self: flex-start;
    }
}
.totals-table { font-size: .9rem; }
.totals-table td { padding: .35rem .5rem; border: 0; }
.totals-table .border-top td { border-top: 1px solid var(--ac-border) !important; padding-top: .55rem; }
.totals-table .grand-total-row td {
    background: var(--ac-primary-50);
    border-top: 2px solid var(--ac-primary) !important;
    padding-top: .65rem;
    padding-bottom: .65rem;
    color: var(--ac-primary-700);
    font-size: .92rem;
}
.totals-table .grand-total-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ac-primary-700);
    letter-spacing: -.01em;
}

/* ============================================================
   FOOTER — dark charcoal, GreenChips style
   ============================================================ */
.footer.footer-transparent {
    background: var(--ac-footer-bg) !important;
    color: var(--ac-footer-fg);
    border-top: 0;
    margin-top: 2rem;
    padding: 1.25rem 0;
    border-radius: 12px 12px 0 0;
}
.footer.footer-transparent a { color: var(--ac-footer-link); text-decoration: none; }
.footer.footer-transparent a:hover { color: var(--ac-primary-300); }
.footer.footer-transparent .list-inline-dots li { color: var(--ac-footer-fg); }
.footer.footer-transparent .list-inline-dots li::after { color: var(--ac-footer-fg); opacity: .4; }

/* ============================================================
   DASHBOARD STAT TILES (GreenChips-style big numbers)
   ============================================================ */
.stat-card {
    background: #fff;
    border: 1px solid var(--ac-card-border);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1rem;
    position: relative;
    overflow: hidden;
}
.stat-card .stat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ac-primary-100);
    color: var(--ac-primary-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: .85rem;
}
.stat-card .stat-label {
    color: var(--ac-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin: 0;
}
.stat-card .stat-value {
    color: var(--ac-text-strong);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: .25rem 0 .25rem;
    letter-spacing: -.01em;
}
.stat-card .stat-sub { color: var(--ac-muted); font-size: .8rem; }
.stat-card.stat-eco .stat-icon { background: var(--ac-primary-100); color: var(--ac-primary-700); }
.stat-card.stat-blue .stat-icon { background: var(--ac-accent-100); color: #0369a1; }
.stat-card.stat-warn .stat-icon { background: #fef3c7; color: #92400e; }
.stat-card.stat-red  .stat-icon { background: #fee2e2; color: #991b1b; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .page-header { padding: 1rem; border-radius: 14px; }
    .page-header::after { width: 35%; }
    .page-title { font-size: 1.3rem; }
    .ph-avatar { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 12px; }
    .entity-tabs > .nav-tabs { padding: .25rem; gap: 0; }
    .entity-tabs > .nav-tabs > .nav-item > .nav-link { padding: .5rem .65rem; font-size: .85rem; }
}

/* ============================================================
   NUMBER INPUTS — keyboard only, no mouse scroll, no spinner arrows
   ------------------------------------------------------------
   Per spec: number-typed inputs (qty, price, etc.) must NOT be
   nudgeable via the spinner buttons or the mouse wheel. Users
   type values; up/down arrows on the keyboard still work.
   The wheel-block lives in web/js/site.js.
   ============================================================ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;   /* Firefox */
    appearance: textfield;
}

/* ============================================================
 * Hide every delete UI surface across the system.
 *
 * Business policy is "no delete option at all" — neither hard
 * nor soft. The real enforcement is server-side in
 * BaseController::beforeAction() (blocks every /delete URL
 * with 403). These CSS rules just remove the buttons from
 * the page so users don't see something they can't use.
 *
 * Cancel / uncancel / void / archive flows are NOT delete and
 * are deliberately not matched here.
 * ============================================================ */

/* Forms whose action posts to a URL containing /delete (Yii's
 * Url::to(['delete', ...]) renders differently depending on the
 * pretty-url mode — catch both shapes). */
form[action*="/delete"],
form[action*="%2Fdelete"],
form[action*="r=delete"],
form[action$="/delete"] {
    display: none !important;
}

/* Any "data-confirm" message containing "delete" (case-insensitive
 * via the two common casings). */
[data-confirm*="elete"],
[data-confirm*="ELETE"] {
    display: none !important;
}

/* Direct links to /delete endpoints. */
a[href*="/delete"],
a[href*="%2Fdelete"],
a[href*="r=delete"] {
    display: none !important;
}

/* Trash icons inside any button — hide the icon (then most buttons
 * collapse to empty width and become invisible). Some buttons are
 * trash-icon-only so we can also drop the whole button via :has(). */
.btn .bi-trash,
.btn .bi-trash-fill,
.btn .bi-trash3,
.btn .bi-trash3-fill {
    display: none !important;
}
.btn:has(> .bi-trash):not(:has(> :not(.bi-trash):not(.visually-hidden))),
.btn:has(> .bi-trash-fill):not(:has(> :not(.bi-trash-fill):not(.visually-hidden))) {
    display: none !important;
}

/* ============================================================
   APP SHELL — fixed sidebar + slim top bar (views/layouts/main.php, _sidebar.php)
   ============================================================ */
:root {
    --app-sidebar-w:        256px;
    --app-sidebar-w-mini:   72px;
    --app-topbar-h:         60px;
    --app-sidebar-bg:       #0b1324;   /* deep navy */
    --app-sidebar-bg-2:     #0f1b30;
    --app-sidebar-fg:       #aab6ca;
    --app-sidebar-fg-dim:   #64748b;
    --app-sidebar-hover:    rgba(255, 255, 255, .06);
    --app-sidebar-active:   rgba(16, 185, 129, .15);
    --app-sidebar-border:   rgba(255, 255, 255, .07);
}

body { background: #f4f6f5; }
body::before { display: none; }   /* drop the circuit backdrop for a calmer canvas */

.app-shell { min-height: 100vh; }

/* ---- Sidebar ---- */
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--app-sidebar-w);
    background: linear-gradient(180deg, var(--app-sidebar-bg) 0%, var(--app-sidebar-bg-2) 100%);
    color: var(--app-sidebar-fg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .2s ease, transform .25s ease;
}
.app-sidebar-brand {
    height: var(--app-topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 1.1rem;
    border-bottom: 1px solid var(--app-sidebar-border);
}
.app-brand-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}
.app-brand-link:hover { color: #fff; text-decoration: none; }
.app-brand-mark {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ac-primary-500), var(--ac-primary-700));
    color: #fff;
}
.app-brand-logo {
    height: 36px; max-width: 150px;
    display: inline-flex; align-items: center;
    background: #fff; border-radius: 8px; padding: 3px 6px;
}
.app-brand-logo img { max-height: 30px; max-width: 138px; object-fit: contain; }
.app-brand-name {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar-close {
    border: 0; background: transparent; color: var(--app-sidebar-fg);
    font-size: 1.1rem; padding: .25rem;
}

.app-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem .65rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.app-nav { list-style: none; margin: 0; padding: 0; }
.app-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    margin: 1px 0;
    border-radius: 8px;
    color: var(--app-sidebar-fg);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: background .12s ease, color .12s ease;
}
.app-nav-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; opacity: .85; }
.app-nav-link span { overflow: hidden; text-overflow: ellipsis; }
.app-nav-link:hover { background: var(--app-sidebar-hover); color: #fff; text-decoration: none; }
.app-nav-link.active { background: var(--app-sidebar-active); color: #fff; font-weight: 600; }
.app-nav-link.active i { color: var(--ac-primary-500); opacity: 1; }
.app-nav-link.active::before {
    content: '';
    position: absolute; left: -.65rem; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--ac-primary-500);
}

.app-nav-group { margin-top: .6rem; }
.app-nav-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    padding: .45rem .75rem;
    color: var(--app-sidebar-fg-dim);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 6px;
}
.app-nav-heading:hover { color: var(--app-sidebar-fg); }
.app-nav-heading i { font-size: .7rem; transition: transform .2s ease; }
.app-nav-group:not(.is-open) .app-nav-heading i { transform: rotate(-90deg); }
.app-nav-group > .app-nav { display: none; }
.app-nav-group.is-open > .app-nav { display: block; }

/* ---- Main column ---- */
.app-main {
    margin-left: var(--app-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--app-topbar-h);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem 0 .75rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ac-border);
}
.app-topbar-title { flex: 1; min-width: 0; }
.app-topbar-title .breadcrumb { margin: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.app-topbar-heading { font-weight: 600; font-size: 1rem; color: var(--ac-text-strong); }
.app-topbar-actions { display: flex; align-items: center; gap: .35rem; }

.app-icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--ac-muted);
    font-size: 1.25rem;
    text-decoration: none;
}
.app-icon-btn:hover { background: var(--ac-primary-50); color: var(--ac-primary-700); }

.app-user-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; background: transparent; padding: .25rem .35rem; border-radius: 999px;
    color: var(--ac-muted); font-size: .75rem;
}
.app-user-btn:hover { background: var(--ac-primary-50); }
.app-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ac-primary-100);
    color: var(--ac-primary-700);
    font-weight: 700; font-size: .8rem;
}
.app-user-menu { min-width: 240px; }

.app-content { flex: 1; padding-top: .25rem; }
.app-footer {
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: .78rem;
    color: var(--ac-muted);
}

/* ---- Desktop: collapsible to an icon rail ---- */
@media (min-width: 992px) {
    .app-sidebar-backdrop { display: none; }
    html.sidebar-mini .app-sidebar { width: var(--app-sidebar-w-mini); }
    html.sidebar-mini .app-main { margin-left: var(--app-sidebar-w-mini); }
    html.sidebar-mini .app-brand-name,
    html.sidebar-mini .app-nav-link span,
    html.sidebar-mini .app-nav-heading span { display: none; }
    html.sidebar-mini .app-sidebar-brand { justify-content: center; padding: 0; }
    html.sidebar-mini .app-brand-logo { display: none; }
    html.sidebar-mini .app-nav-link { justify-content: center; padding: .6rem 0; }
    html.sidebar-mini .app-nav-heading { justify-content: center; padding: .3rem 0; border-top: 1px solid var(--app-sidebar-border); border-radius: 0; }
    html.sidebar-mini .app-nav-heading i { display: none; }
    /* In the rail every group is expanded: the icons are the whole menu. */
    html.sidebar-mini .app-nav-group > .app-nav { display: block; }
}

/* ---- Mobile / tablet: off-canvas ---- */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: none; }
    .app-main { margin-left: 0; }
    html.sidebar-open .app-sidebar { transform: none; }
    .app-sidebar-backdrop {
        position: fixed; inset: 0; z-index: 1035;
        background: rgba(15, 23, 20, .45);
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    html.sidebar-open .app-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    html.sidebar-open body { overflow: hidden; }
    .app-topbar { padding: 0 .75rem 0 .5rem; }
}

@media print {
    .app-sidebar, .app-sidebar-backdrop { display: none !important; }
    .app-main { margin-left: 0 !important; }
}

/* --- Password show/hide eye toggle (see site.js) --- */
.pw-eye-wrap {
    position: relative;
}
.pw-eye-wrap > input {
    padding-right: 2.5rem;
}
.pw-eye-wrap > input.is-invalid,
.pw-eye-wrap > input.is-valid {
    padding-right: 4.25rem;
    background-position: right 2.5rem center;
}
.pw-eye-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--tblr-secondary, #6c757d);
    cursor: pointer;
}
.pw-eye-btn:hover {
    color: var(--tblr-body-color, #1d273b);
}
/* The input is now wrapped, so Bootstrap's `.is-invalid ~ .invalid-feedback`
   sibling rule no longer reaches the error text; restore it here. */
.pw-eye-wrap:has(> .is-invalid) ~ .invalid-feedback {
    display: block;
}

/* ============================================================
   DESIGN SYSTEM v2 — CHIPSTRADER
   Loaded last so it wins over Tabler + the legacy rules above.
   Palette: emerald primary, indigo accent, cool slate neutrals,
   deep navy sidebar. Flat UI: no box-shadows anywhere — depth
   comes from borders and surface tints only.
   ============================================================ */
:root,
[data-bs-theme="light"] {
    /* Brand */
    --ac-primary:        #059669;   /* emerald-600 */
    --ac-primary-700:    #047857;
    --ac-primary-500:    #10b981;
    --ac-primary-300:    #6ee7b7;
    --ac-primary-100:    #d1fae5;
    --ac-primary-50:     #ecfdf5;
    --ac-accent:         #4f46e5;   /* indigo-600 */
    --ac-accent-100:     #e0e7ff;
    --ac-leaf:           #34d399;

    /* Neutrals (slate) */
    --ac-bg:             #f5f7fa;
    --ac-bg-grad-1:      #f5f7fa;
    --ac-bg-grad-2:      #f5f7fa;
    --ac-card-bg:        #ffffff;
    --ac-card-border:    #e2e8f0;
    --ac-card-shadow:    none;
    --ac-card-shadow-hi: none;
    --ac-text:           #1e293b;
    --ac-text-strong:    #0f172a;
    --ac-muted:          #64748b;
    --ac-border:         #e2e8f0;
    --ac-input-border:   #cbd5e1;
    --ac-surface-2:      #f8fafc;   /* table heads, footers, subtle panels */

    /* Spacing scale used by the shell */
    --app-gutter:        1.5rem;
    --app-gap:           1.25rem;
    --app-radius:        10px;
    --app-radius-sm:     8px;
    --app-control-h:     40px;
    --app-control-h-sm:  32px;

    /* Tabler hooks */
    --tblr-primary: var(--ac-primary);
    --tblr-primary-rgb: 5, 150, 105;
    --tblr-primary-darken: var(--ac-primary-700);
    --tblr-primary-lt: var(--ac-primary-100);
    --tblr-link-color: var(--ac-primary-700);
    --tblr-link-color-rgb: 4, 120, 87;
    --tblr-body-bg: var(--ac-bg);
    --tblr-border-color: var(--ac-border);
    --tblr-box-shadow: none;
    --tblr-box-shadow-sm: none;
    --tblr-box-shadow-lg: none;
    --tblr-box-shadow-inset: none;
    --tblr-box-shadow-card: none;
    --tblr-box-shadow-dropdown: none;
    --tblr-shadow-card: none;
    --bs-box-shadow: none;
}

/* ---- 1. No shadows, anywhere (incl. inline style="" and third-party widgets) ---- */
*,
*::before,
*::after {
    box-shadow: none !important;
}
/* Keyboard focus stays visible without a glow: crisp outline instead. */
:focus-visible {
    outline: 2px solid var(--ac-primary-500);
    outline-offset: 2px;
}
.form-control:focus-visible,
.form-select:focus-visible,
.ts-control:focus-visible,
.form-check-input:focus-visible { outline: 0; }

/* ---- 2. Shell geometry ---- */
/* Tabler shifts <html> right by the scrollbar width (margin-left: calc(100vw - 100%)).
   With a fixed sidebar that pushed the whole app 15px right and clipped the right edge. */
html { margin-left: 0 !important; margin-right: 0 !important; scrollbar-gutter: stable; }
body { background: var(--ac-bg); color: var(--ac-text); font-size: .875rem; }

.app-container,
.container-fluid.app-container {
    padding-left: var(--app-gutter);
    padding-right: var(--app-gutter);
}
/* Views wrap their own .page-body/.app-container inside the layout's one — don't double the padding. */
.app-content .app-container .app-container,
.page-header .app-container { padding-left: 0; padding-right: 0; }
.app-content .page-body .page-body { margin: 0; padding: 0; }
.app-content .page-body { margin: 0; padding: 0 0 var(--app-gutter); }
.app-content > .page-body:first-child { padding-top: var(--app-gutter); }
.app-pagehead { padding-top: var(--app-gutter); }

.app-topbar { background: #ffffff; backdrop-filter: none; border-bottom: 1px solid var(--ac-border); padding: 0 var(--app-gutter) 0 .75rem; }
.app-topbar .breadcrumb { font-size: .8125rem; }
.app-topbar .breadcrumb-item a { color: var(--ac-muted); font-weight: 500; }
.app-topbar .breadcrumb-item a:hover { color: var(--ac-primary-700); }
.app-topbar .breadcrumb-item.active,
.app-topbar .breadcrumb-item:last-child { color: var(--ac-text-strong); font-weight: 600; }
.app-footer { border-top: 1px solid var(--ac-border); background: #fff; padding: .85rem var(--app-gutter); }

/* ---- 3. Page header (PageHead widget + hand-built ones) ---- */
.page-header {
    background: #ffffff;
    border: 1px solid var(--ac-border);
    border-radius: var(--app-radius);
    margin: 0 0 var(--app-gap);
    padding: 1.1rem 1.25rem;
    min-height: 0;
}
.page-header::after { display: none; }
.app-content > .page-body .page-header { margin-top: 0; }
.ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.ph-main { flex: 1 1 340px; min-width: 0; }
.ph-actions { flex: 0 1 auto; margin-left: auto; }
.ph-actions .btn-list,
.page-header .btn-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: 0; }
.ph-actions .btn-list > *,
.page-header .btn-list > * { margin: 0 !important; }
.ph-avatar {
    width: 48px; height: 48px;
    border-radius: var(--app-radius);
    background: var(--ac-primary-50);
    border: 1px solid var(--ac-primary-100);
    color: var(--ac-primary-700);
    font-size: 1.35rem;
}
.page-pretitle { color: var(--ac-primary-700); font-size: .7rem; letter-spacing: .08em; }
.page-title {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
    font-size: 1.4rem; margin: .1rem 0 0; line-height: 1.25;
}
.page-title-text { white-space: nowrap; }
.page-title .badge { font-size: .7rem; }
.audit-meta-strip { margin-top: .35rem; font-size: .78rem; }
.audit-meta-strip i { color: var(--ac-primary-500); }

/* ---- 4. Cards ---- */
.card {
    border: 1px solid var(--ac-border);
    border-radius: var(--app-radius);
    background: #fff;
}
.card-header { padding: .85rem 1.25rem; background: #fff; min-height: 0; }
.card-header .card-title { font-size: .95rem; font-weight: 600; margin: 0; }
.card-body { padding: 1.25rem; }
.card-footer { padding: .85rem 1.25rem; background: var(--ac-surface-2); }
.card + .card { margin-top: var(--app-gap); }
.row > * > .card + .card { margin-top: var(--app-gap); }
.card-section { padding: 1.25rem; }
.card-section-title { font-size: 1rem; font-weight: 600; }
.card-section-sub { margin-bottom: 1rem; font-size: .8125rem; }
.card-section .section-deco { width: 72px; height: 56px; opacity: .35; }
.stat-card { border: 1px solid var(--ac-border); border-radius: var(--app-radius); }

/* ---- 5. Tabs on entity screens ---- */
.entity-tabs { margin-top: 0; }
.entity-tabs > .nav-tabs {
    border: 1px solid var(--ac-border);
    border-radius: var(--app-radius);
    padding: .3rem;
    margin-bottom: var(--app-gap);
    gap: .25rem;
    flex-wrap: wrap;
}
.entity-tabs > .nav-tabs > .nav-item > .nav-link { padding: .5rem .9rem; border-radius: var(--app-radius-sm); font-size: .875rem; }
.entity-tabs > .nav-tabs > .nav-item > .nav-link.active {
    background: var(--ac-primary);
    color: #fff !important;
}
.entity-tabs > .nav-tabs > .nav-item > .nav-link.active i,
.entity-tabs > .nav-tabs > .nav-item > .nav-link.active .badge { color: #fff !important; }
.entity-tabs > .nav-tabs > .nav-item > .nav-link.active .badge { background: rgba(255,255,255,.22) !important; }
.nav-pills .nav-link.active { background: var(--ac-primary); }

/* ---- 6. Forms: one control height, tighter rhythm ---- */
.form-label { font-size: .8rem; font-weight: 600; color: var(--ac-text-strong); margin-bottom: .35rem; }
.form-control,
.form-select {
    border: 1px solid var(--ac-input-border);
    border-radius: var(--app-radius-sm);
    padding: .45rem .75rem;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--ac-text);
    background-color: #fff;
}
.form-control:not(textarea):not([type="file"]):not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not([multiple]) { height: var(--app-control-h); }
.form-control-sm:not(textarea),
.form-select-sm { height: var(--app-control-h-sm); padding: .25rem .6rem; font-size: .8125rem; border-radius: 6px; }
.form-control:focus,
.form-select:focus { border-color: var(--ac-primary); background: #fff; }
.form-control.is-invalid,
.form-select.is-invalid { border-color: #dc2626; }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled { background-color: var(--ac-surface-2); color: var(--ac-muted); }
.form-control::placeholder { color: #94a3b8; }
.input-group > .form-control,
.input-group > .form-select { height: var(--app-control-h); }
.input-group-text { border-color: var(--ac-input-border); background: var(--ac-surface-2); font-size: .8125rem; }

/* Tom Select matches native inputs exactly */
.ts-wrapper .ts-control {
    border: 1px solid var(--ac-input-border) !important;
    border-radius: var(--app-radius-sm) !important;
    padding: .45rem .75rem !important;
    min-height: var(--app-control-h) !important;
    font-size: .875rem;
    line-height: 1.4;
    display: flex; align-items: center; flex-wrap: wrap;
}
.ts-wrapper.single .ts-control { padding-right: 2rem !important; }
.ts-wrapper.focus .ts-control { border-color: var(--ac-primary) !important; }
/* When Tom Select wraps a .form-control/.form-select, its theme makes the WRAPPER
   the visible box (border + caret) and strips the inner control's border. */
.ts-wrapper.form-control,
.ts-wrapper.form-select {
    height: auto !important;
    min-height: var(--app-control-h);
    padding: 0 !important;
    border: 1px solid var(--ac-input-border) !important;
    border-radius: var(--app-radius-sm) !important;
    background-color: #fff;
}
.ts-wrapper.form-control.focus,
.ts-wrapper.form-select.focus { border-color: var(--ac-primary) !important; }
.ts-wrapper.form-control.disabled,
.ts-wrapper.form-select.disabled { background-color: var(--ac-surface-2); }
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control {
    border: 0 !important;
    min-height: calc(var(--app-control-h) - 2px) !important;
    background: transparent !important;
}
.ts-wrapper.form-control-sm,
.ts-wrapper.form-select-sm { min-height: var(--app-control-h-sm); }
.ts-wrapper.form-control-sm .ts-control,
.ts-wrapper.form-select-sm .ts-control { min-height: calc(var(--app-control-h-sm) - 2px) !important; }
.ts-wrapper.form-control-sm .ts-control,
.ts-wrapper.form-select-sm .ts-control { min-height: var(--app-control-h-sm) !important; padding: .2rem .6rem !important; }
.ts-dropdown, .ac-menu { border: 1px solid var(--ac-input-border) !important; }

/* Field rhythm: rows with a gutter already space their columns, so drop the
   field's own bottom margin there (otherwise the gap doubles). */
.row[class*="g-"] > * > .mb-3[class*="field-"]:last-child,
.row[class*="g-"] > * > .mb-3:last-child { margin-bottom: 0; }
.row[class*="gy-"], .row.g-3 { --tblr-gutter-y: 1rem; --bs-gutter-y: 1rem; }
.mb-3[class*="field-"] { margin-bottom: 1rem; }
.form-text, .form-hint, .hint-block { font-size: .75rem; color: var(--ac-muted); margin-top: .3rem; }
.invalid-feedback { font-size: .75rem; margin-top: .3rem; }
.form-check { min-height: 1.25rem; }
.form-switch .form-check-input { width: 2.25em; height: 1.25em; }
.form-action-bar { margin: 1.25rem -1.25rem -1.25rem; padding: .85rem 1.25rem; border-radius: 0 0 var(--app-radius) var(--app-radius); background: var(--ac-surface-2); }

/* ---- 7. Buttons: flat, consistent heights ---- */
.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    font-size: .8125rem;
    padding: .5rem .95rem;
    line-height: 1.35;
    min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center; gap: .1rem;
}
.btn-sm { min-height: 32px; padding: .3rem .7rem; font-size: .78rem; border-radius: 6px; }
.btn-lg { min-height: 46px; }
.btn:active { transform: none; }
.btn-primary,
.btn-success {
    background: var(--ac-primary);
    border: 1px solid var(--ac-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus { background: var(--ac-primary-700); border-color: var(--ac-primary-700); color: #fff; }
.btn-primary:disabled, .btn-success:disabled { background: var(--ac-primary-300); border-color: var(--ac-primary-300); }
.btn-outline-primary { border: 1px solid var(--ac-primary-300); color: var(--ac-primary-700); background: #fff; }
.btn-outline-primary:hover { background: var(--ac-primary-50); border-color: var(--ac-primary); color: var(--ac-primary-700); }
.btn-outline-secondary,
.btn-secondary,
.btn-white,
.btn-light { border: 1px solid var(--ac-input-border); color: var(--ac-text); background: #fff; }
.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-white:hover,
.btn-light:hover { background: var(--ac-surface-2); border-color: #94a3b8; color: var(--ac-text-strong); }
.btn-outline-danger { border: 1px solid #fecaca; color: #b91c1c; border-radius: var(--app-radius-sm); }
.btn-outline-danger:hover { background: #fef2f2; border-color: #f87171; color: #991b1b; }
.btn-danger { background: #dc2626; border-color: #dc2626; border-radius: var(--app-radius-sm); }
.btn-icon { min-width: 32px; padding-left: .45rem; padding-right: .45rem; }
.btn-list { gap: .5rem; }

/* ---- 8. Tables / grids ---- */
.grid-view,
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { --tblr-table-bg: transparent; font-size: .8125rem; margin-bottom: 0; color: var(--ac-text); }
.table > :not(caption) > * > * { padding: .65rem .85rem; }
.table thead th,
.grid-view table.table thead th {
    background: var(--ac-surface-2);
    color: var(--ac-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ac-border);
    white-space: nowrap;
    padding: .6rem .85rem;
}
.grid-view table.table { border-radius: 0; }
.grid-view table.table tbody td { padding: .65rem .85rem; }
.table tbody tr:hover,
.grid-view table.table tbody tr:hover { background: #f8fafc; }
/* Document numbers, part numbers, dates and amounts never break mid-token. */
.table td code,
.table td a > code,
.table td.text-end,
.table th.text-end,
.table td .badge,
.table td.text-nowrap { white-space: nowrap; }
code {
    color: var(--ac-primary-700);
    background: var(--ac-primary-50);
    border-radius: 4px;
    padding: .1rem .35rem;
    font-size: .78rem;
}
.table td:last-child .btn-list,
.table td:last-child { white-space: nowrap; }
.card > .table-responsive:last-child .table,
.card > .grid-view:last-child .table { margin-bottom: 0; }
.grid-view .summary { padding: .65rem .85rem; }
.pagination { gap: .25rem; margin: .75rem .85rem; flex-wrap: wrap; }
.pagination .page-link { border-radius: 6px !important; margin: 0; min-width: 32px; text-align: center; }

/* ---- 9. Badges ---- */
.badge { font-weight: 600; font-size: .7rem; padding: .3em .6em; border-radius: 999px; }
.bg-purple-lt { background: #ede9fe !important; color: #6d28d9 !important; }
.bg-cyan-lt   { background: #cffafe !important; color: #0e7490 !important; }
.bg-blue-lt   { background: #dbeafe !important; color: #1d4ed8 !important; }
.bg-green-lt  { background: #d1fae5 !important; color: #047857 !important; }
.bg-primary-lt { background: var(--ac-primary-100) !important; color: var(--ac-primary-700) !important; }

/* ---- 10. Dropdowns, modals, alerts, toasts ---- */
.dropdown-menu { border: 1px solid var(--ac-input-border); border-radius: var(--app-radius); padding: .35rem; }
.dropdown-item { font-size: .8125rem; }
.dropdown-item i { color: var(--ac-muted); }
.dropdown-item:hover i { color: var(--ac-primary); }
.modal-content { border: 1px solid var(--ac-input-border); border-radius: 12px; }
.modal-backdrop.show { opacity: .5; }
.modal-header, .modal-footer { padding: .9rem 1.25rem; }
.modal-footer { background: var(--ac-surface-2); border-top: 1px solid var(--ac-border); border-radius: 0 0 12px 12px; }
.alert { border-radius: var(--app-radius); border: 1px solid transparent; }
.alert-info    { background: #eef2ff; color: #3730a3; border-color: #e0e7ff; }
.alert-success { background: var(--ac-primary-50); color: #065f46; border-color: var(--ac-primary-100); }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
#toast-container > div { border-radius: var(--app-radius); opacity: 1; }
.empty { padding: 2.5rem 1rem; }

/* Currency converter FAB: flat */
#cc-fab { background: var(--ac-primary) !important; border: 2px solid #fff !important; }
#cc-panel { border: 1px solid var(--ac-input-border) !important; }
#cc-panel .cc-head { background: var(--app-sidebar-bg, #0b1324) !important; }

/* ---- 11. Responsive ---- */
@media (max-width: 991.98px) {
    :root { --app-gutter: 1rem; --app-gap: 1rem; }
}
@media (max-width: 575.98px) {
    .page-header { padding: .9rem 1rem; }
    .page-title { font-size: 1.2rem; }
    .ph-avatar { width: 40px; height: 40px; font-size: 1.1rem; }
    .ph-actions { margin-left: 0; width: 100%; }
    .ph-actions .btn-list { justify-content: flex-start; }
    .card-body, .card-section { padding: 1rem; }
}

/* ---- 12. Table density fixes (lists must fit their card at 1366px+) ---- */
.table > :not(caption) > * > *,
.grid-view table.table tbody td,
.grid-view table.table thead th { padding-left: .65rem; padding-right: .65rem; }
.table thead th a,
.grid-view table.table thead th a { color: inherit; text-decoration: none; }
.table thead th a:hover { color: var(--ac-primary-700); }
/* Icon-only buttons in rows: square, compact */
.table td .btn-sm:has(> i:only-child) { width: 30px; min-height: 30px; padding: 0; }
.table td .btn + .btn { margin-left: .25rem; }
.table td .me-1.btn { margin-right: 0 !important; }
/* Dashboard tables: short values, keep each on one line (names already truncate) */
.dash-card .table td,
.dash-card .table th { white-space: nowrap; }
/* Header labels may wrap to two lines — they shouldn't dictate column width. */
.table thead th,
.grid-view table.table thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; min-width: 4.5rem; }
.table thead th:empty { min-width: 0; }
/* Wide tables scroll inside their card instead of being clipped by it. */
.card { overflow: visible; }
.card > .table-responsive,
.card > .grid-view,
.card .card-body > .grid-view { overflow-x: auto; }
.card > .table-responsive:first-child,
.card > .grid-view:first-child { border-radius: var(--app-radius) var(--app-radius) 0 0; }
/* Bootstrap's .mb-3 utility is !important — inside gutter rows it doubles the gap. */
.row[class*="g-"] > * > .mb-3[class*="field-"]:last-child,
.row[class*="g-"] > * > .mb-3:last-child { margin-bottom: 0 !important; }
/* Tabler makes .page-header a flex container; the row must span it or short headers wrap into a column. */
.page-header > .ph-row,
.page-header > .row,
.page-header > .app-container { width: 100%; flex: 1 1 100%; }
@media (max-width: 575.98px) {
    .audit-meta-strip .sep { display: none; }
    .audit-meta-strip { flex-direction: column; align-items: flex-start; gap: .15rem; }
}

/* ============================================================
   v3 — compact density, top-bar quick actions, numbers that fit,
   no one-sided card borders.
   ============================================================ */
:root {
    --app-gutter:        1.25rem;
    --app-gap:           1rem;
    --app-control-h:     36px;
    --app-control-h-sm:  30px;
    --app-topbar-h:      56px;
}

/* ---- Top bar ---- */
.app-topbar { gap: .5rem; }
.app-topbar-actions { gap: .5rem; }
.app-topbar-sep { width: 1px; height: 24px; background: var(--ac-border); margin: 0 .15rem; }
.app-search {
    position: relative;
    align-items: center;
    width: clamp(180px, 22vw, 300px);
}
.app-search i {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--ac-muted); font-size: .85rem; pointer-events: none;
}
.app-search input {
    width: 100%; height: 34px;
    padding: 0 .75rem 0 2rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--app-radius-sm);
    background: var(--ac-surface-2);
    font-size: .8125rem;
    color: var(--ac-text);
}
.app-search input:focus { outline: 0; border-color: var(--ac-primary); background: #fff; }
.app-search input::placeholder { color: #94a3b8; }
.app-quick-btn { min-height: 34px; padding: .3rem .8rem; font-size: .8125rem; }
.app-quick-menu { min-width: 210px; }
.app-quick-menu .dropdown-item i { width: 1.1rem; text-align: center; color: var(--ac-primary); }
.app-icon-btn { width: 34px; height: 34px; font-size: 1.1rem; }
.app-avatar { width: 32px; height: 32px; font-size: .75rem; }
.app-sidebar-brand { height: var(--app-topbar-h); }

/* ---- Compact page header ---- */
.page-header { padding: .8rem 1rem; }
.ph-row { gap: .5rem .85rem; }
.ph-avatar { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 8px; }
.page-title { font-size: 1.2rem; }
.page-pretitle { font-size: .66rem; }
.audit-meta-strip { margin-top: .2rem; font-size: .75rem; }

/* ---- Compact cards ---- */
.card-header { padding: .6rem 1rem; }
.card-body { padding: 1rem; }
.card-footer { padding: .6rem 1rem; }
.card-section { padding: 1rem; }
.card-section-sub { margin-bottom: .75rem; }
.card-sm > .card-body,
.card-body.py-2 { padding-top: .6rem !important; padding-bottom: .6rem !important; }
.row-cards,
.row.g-3 { --tblr-gutter-x: 1rem; --tblr-gutter-y: 1rem; --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.mb-3 { margin-bottom: .85rem !important; }
.entity-tabs > .nav-tabs { padding: .25rem; margin-bottom: var(--app-gap); }
.entity-tabs > .nav-tabs > .nav-item > .nav-link { padding: .4rem .75rem; font-size: .8125rem; }
.form-label { margin-bottom: .25rem; font-size: .78rem; }
.form-control, .form-select { padding: .375rem .7rem; font-size: .8125rem; }
.ts-wrapper .ts-control { padding: .3rem .7rem !important; font-size: .8125rem; }
.btn { min-height: 34px; padding: .4rem .85rem; }
.btn-sm { min-height: 30px; padding: .25rem .6rem; }
.table > :not(caption) > * > *,
.grid-view table.table tbody td { padding-top: .5rem; padding-bottom: .5rem; }
.table thead th,
.grid-view table.table thead th { padding-top: .5rem; padding-bottom: .5rem; }
.form-action-bar { padding: .7rem 1rem; margin: 1rem -1rem -1rem; }

/* ---- Numbers in cards: always fit ----
   Summary cards render the figure as a direct .h2/.h3/.h4 child of .card-body.
   The card-body becomes a size container so the figure scales to the card. */
.card-body:has(> :is(.h1, .h2, .h3, .h4):is(.m-0, .mb-0)) { container-type: inline-size; }
.card-body > :is(.h1, .h2, .h3, .h4):is(.m-0, .mb-0) {
    font-size: clamp(1rem, 9cqi, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ac-text-strong);
}
.card-body > .h4:is(.m-0, .mb-0) { font-size: clamp(.95rem, 8cqi, 1.3rem); }
.stat-card { container-type: inline-size; }
.stat-card .stat-value {
    font-size: clamp(1.05rem, 10cqi, 1.75rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.totals-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals-table td:first-child { white-space: normal; }
.totals-table .grand-total-value { font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.text-end, td.text-end { font-variant-numeric: tabular-nums; }

/* ---- No one-sided borders on cards / tiles (accent bars) ---- */
.card,
.dash-card,
.dash-hero,
.alert-tile,
.stat-card,
.page-header {
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-color: var(--ac-border) !important;
    border-style: solid !important;
}
.card-status-start, .card-status-end, .card-status-top, .card-status-bottom { display: none !important; }
.border-start.border-3, .border-start.border-4, .border-end.border-3, .border-end.border-4 { border-width: 1px !important; }

@media (max-width: 575.98px) {
    :root { --app-gutter: .85rem; }
    .app-topbar { padding: 0 .6rem 0 .35rem; }
}

/* ---- Brand assets (web/images/brand) ---- */
img.app-brand-mark { width: 36px; height: 36px; border-radius: 10px; background: none; padding: 0; display: block; flex-shrink: 0; }
.auth-logo { height: 40px; width: auto; display: block; }
.auth-mobile-brand .auth-logo { height: 36px; }

/* ---- Modals: header + footer fixed, only the body scrolls ----
   Applies to every modal (same idea as Bootstrap's .modal-dialog-scrollable,
   but also when a <form> wraps the body + footer). Footers that AJAX-loaded
   forms render inside the body are moved out by pinModalFooter() in site.js. */
.modal-dialog:not(.modal-fullscreen) .modal-content {
    max-height: calc(100vh - 2 * var(--tblr-modal-margin, 1.75rem));
    max-height: calc(100dvh - 2 * var(--tblr-modal-margin, 1.75rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-dialog-scrollable { height: auto; max-height: calc(100% - 2 * var(--tblr-modal-margin, 1.75rem)); }
.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.modal-header,
.modal-footer { flex-shrink: 0; background: #fff; }
.modal-header { border-bottom: 1px solid var(--ac-border); }
.modal-footer {
    border-top: 1px solid var(--ac-border);
    background: var(--ac-surface-2);
    padding: .7rem 1.25rem;
    gap: .5rem;
}
.modal-footer > * { margin: 0; }
.modal-footer[data-pinned] > * { width: 100%; }
.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) .modal-content { max-height: calc(100dvh - 1rem); }
}

/* ---- Textareas always take the full form row (col-12) ----
   Any grid column that holds a textarea spans the whole row, whatever
   col-* size the view gave it. Columns that contain a nested .row are
   layout columns (e.g. main 8 + sidebar 4), not field columns — skip those. */
.row > [class*="col"]:has(textarea):not(:has(.row)) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
.row > [class*="col"]:has(textarea):not(:has(.row)) textarea { width: 100%; }

/* ---- Header link to the assistants page (views/assistant/index.php, web/css/assistant.css) ---- */
.app-ai-btn { color: var(--ac-primary-700); background: var(--ac-primary-50); }
.app-ai-btn:hover { background: var(--ac-primary-100); color: var(--ac-primary-700); }
.app-ai-btn.active { background: var(--ac-primary); color: #fff; }
@media print { .app-ai-btn { display: none !important; } }
.ai-agent-list summary { cursor: pointer; list-style: none; }
.ai-agent-list summary::-webkit-details-marker { display: none; }
.ai-agent-dot {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .72rem;
}