/* AIINVOICE: the landing page's visual language across both applications.
   Screen-only component styling keeps document printing and PDF layouts intact. */
:root {
    --ai-surface: var(--bs-body-bg);
    --ai-canvas: var(--bs-light);
    --ai-border: var(--bs-border-color);
    --ai-accent-soft: rgba(var(--bs-primary-rgb), .08);
    --ai-shadow: 0 4px 24px rgba(25, 42, 70, .045);
    --ai-radius: .75rem;
}
@media screen {
    body { background: var(--ai-canvas); -webkit-font-smoothing: antialiased; }
    h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; }
    h1.h3, h1.h4 { font-weight: 700; }
    a { text-underline-offset: .2em; }
    :is(a, button, summary):focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 3px; }
    .page-content { min-height: 100vh; }
    .page-content .page-content-wrapper:not(.m-0) {
        margin: 1.75rem;
        padding: .5rem 0 1.5rem;
        background: transparent;
        border-radius: 0;
    }
    .top-bar {
        background: var(--ai-surface);
        border-bottom: 1px solid var(--ai-border);
        min-height: 80px;
        padding-inline: 1.75rem;
    }
    .navbar-brand {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        color: var(--bs-primary);
        font-family: var(--ai-font, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: -.04em;
    }
    .navbar-brand::before {
        content: '';
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: .5rem;
        background: linear-gradient(white,white) 8px 15px/3px 7px no-repeat,
                    linear-gradient(white,white) 14px 10px/3px 12px no-repeat,
                    linear-gradient(white,white) 20px 6px/3px 16px no-repeat,
                    var(--bs-primary);
    }
    .sidebar { background: var(--ai-surface); border-color: var(--ai-border); }
    .sidebar > .d-flex { min-height: 80px; border-bottom: 1px solid var(--ai-border); }
    .sidebar .navbar-brand { margin: 0; padding: 1rem 1.35rem; }
    .sidebar .sidebar-content { background: var(--ai-surface); }
    .sidebar .sidebar-content .navbar-nav > .nav-item { margin-bottom: .3rem; }
    .sidebar .sidebar-content .nav-link {
        font-size: .875rem;
        line-height: 1.6;
        border-radius: .5rem;
        transition: background-color .15s, color .15s;
    }
    .sidebar .sidebar-content .nav-link:is(.active,:hover),
    .sidebar .sidebar-content .navbar-nav > .nav-item > .nav-link[aria-expanded=true] {
        background: var(--ai-accent-soft);
        color: var(--bs-primary);
    }
    .sidebar .sidebar-content .nav-link.active { font-weight: 700; }
    .sidebar .sidebar-content .nav.collapse { margin: .35rem 0 .65rem .85rem; border-left: 1px solid var(--ai-border); padding-left: .45rem; }
    .top-bar .nav-link { font-size: .875rem; }
    .top-bar .sidebar-collapsed, .sidebar-offcanvas-menu { border-radius: .5rem; color: var(--bs-primary); }
    .navbar-toggler { border-radius: .5rem; }
    .card {
        background: var(--ai-surface);
        border: 1px solid var(--ai-border);
        border-radius: var(--ai-radius);
        box-shadow: var(--ai-shadow);
    }
    .card.shadow, .card.shadow-sm { box-shadow: var(--ai-shadow) !important; }
    .card-header { background: transparent; border-bottom-color: var(--ai-border); padding: 1.2rem 1.4rem; }
    .card-body { padding: 1.4rem; }
    .card-footer { background: transparent; border-top-color: var(--ai-border); }
    .card .card { box-shadow: none; }
    .btn {
        border-radius: .5rem;
        font-weight: 500;
        font-size: .875rem;
        padding: .65rem 1rem;
        box-shadow: none;
        transition: background-color .15s, border-color .15s, box-shadow .15s;
    }
    .btn-primary { --bs-btn-hover-bg: #12553f; --bs-btn-hover-border-color: #104b3b; }
    .btn-sm, .btn-group-sm > .btn { padding: .35rem .65rem; font-size: .8rem; }
    .btn-lg { padding: .85rem 1.4rem; font-size: 1rem; }
    .btn-outline-light { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--ai-border); --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-bg: var(--ai-accent-soft); --bs-btn-hover-border-color: var(--bs-primary); }
    .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
    .btn-group > .btn:not(:first-child), .input-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .form-label, .control-label { font-weight: 500; font-size: .875rem; margin-bottom: .5rem; }
    .form-control, .form-select {
        border-color: var(--ai-border);
        border-radius: .5rem;
        font-size: .9375rem;
        background-color: var(--ai-surface);
        min-height: 42px;
    }
    .form-control:focus, .form-select:focus {
        border-color: rgba(var(--bs-primary-rgb), .65);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .1);
    }
    .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .12); }
    .form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .12); }
    .form-control-sm, .form-select-sm { min-height: 34px; font-size: .8125rem; }
    .input-group-text { border-color: var(--ai-border); background: var(--ai-canvas); border-radius: .5rem; }
    .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
    .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12); }
    .form-text, .hint-block { font-size: .8125rem; color: var(--bs-secondary-color); }
    .table {
        --bs-table-bg: transparent;
        --bs-table-border-color: var(--ai-border);
        --bs-table-striped-bg: rgba(var(--bs-primary-rgb), .025);
        --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .035);
        vertical-align: middle;
        font-size: .875rem;
    }
    .table > thead > tr > th { background: var(--ai-canvas); font-weight: 700; font-size: .75rem; letter-spacing: .025em; padding: 1rem .85rem; border-bottom-width: 1px; }
    .table > tbody > tr > td { padding: .9rem .85rem; }
    .table .filters td { padding: .6rem .5rem; background: var(--ai-surface); }
    .table .filters .form-control, .table .filters .form-select { font-size: .8125rem; min-height: 34px; }
    .table-sm > tbody > tr > td { padding: .5rem .6rem; }
    .table-bordered { border-color: var(--ai-border); }
    .grid-view .summary { font-size: .8125rem; color: var(--bs-secondary-color); margin-bottom: 1rem; }
    .grid-view .pagination { gap: .3rem; flex-wrap: wrap; }
    .page-link { border-radius: .45rem; font-size: .8125rem; border-color: var(--ai-border); }
    .page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: .45rem; }
    .dropdown-menu { border: 1px solid var(--ai-border); border-radius: .65rem; box-shadow: 0 12px 35px rgba(25,42,70,.1); padding: .4rem; }
    .dropdown-item { border-radius: .35rem; padding: .5rem .75rem; font-size: .875rem; }
    .dropdown-item:hover, .dropdown-item:focus { background: var(--ai-accent-soft); color: var(--bs-primary); }
    .dropdown-item.active, .dropdown-item:active { background: var(--bs-primary); color: white; }
    .modal-content { border: 1px solid var(--ai-border); border-radius: 1rem; box-shadow: 0 24px 70px rgba(25,42,70,.15); }
    .modal-header, .modal-footer { border-color: var(--ai-border); padding: 1.2rem 1.5rem; }
    .modal-body { padding: 1.5rem; }
    .offcanvas { background-color: var(--ai-surface); }
    .nav-tabs { border-color: var(--ai-border); gap: .3rem; }
    .nav-tabs .nav-link { border-radius: .5rem .5rem 0 0; padding: .7rem 1rem; font-size: .875rem; }
    .nav-pills .nav-link { border-radius: .5rem; font-size: .875rem; }
    .nav-pills .nav-link.active { background: var(--bs-primary); color: white; }
    .breadcrumb { font-size: .8125rem; gap: .2rem; }
    .alert { border-radius: .65rem; font-size: .875rem; }
    .badge { font-weight: 500; line-height: 1.3; border-radius: .35rem; }
    .accordion-item { border-color: var(--ai-border); }
    .accordion-button { font-weight: 500; }
    .select2-container--krajee-bs5 .select2-selection,
    .select2-container--bootstrap-5 .select2-selection { border-color: var(--ai-border); border-radius: .5rem; background: var(--ai-surface); }
    .select2-container--krajee-bs5.select2-container--focus .select2-selection,
    .select2-container--bootstrap-5.select2-container--focus .select2-selection { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb),.1); }
    .select2-dropdown, .daterangepicker, .datepicker { border-color: var(--ai-border); border-radius: .65rem; box-shadow: var(--ai-shadow); }
    .ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--ai-border); }
    .dropzone { border: 1px dashed rgba(var(--bs-primary-rgb),.35); border-radius: var(--ai-radius); background: var(--ai-accent-soft); }
    .auth-layout > main { min-height: 100vh; display: flex; align-items: center; padding: 2rem 0; }
    .auth-layout > main > section { width: 100%; padding-block: 1rem; }
    .auth-layout .bg-mode.shadow { border: 1px solid var(--ai-border); border-radius: 1rem !important; box-shadow: 0 12px 45px rgba(25,42,70,.06) !important; }
    .app-footer { background: var(--ai-surface) !important; border-top: 1px solid var(--ai-border); font-size: .8125rem; }
    .app-footer .nav-link { font-size: .8125rem; }
    [data-bs-theme=dark] { --ai-shadow: 0 4px 24px rgba(0,0,0,.12); }
    @media (max-width: 1199.98px) {
        .sidebar > .d-flex { display: none !important; }
        .top-bar { padding: 1rem; min-height: 72px; }
    }
    @media (max-width: 767.98px) {
        .page-content .page-content-wrapper:not(.m-0) { margin: 1rem; padding: 0 0 1rem; }
        .card-body, .card-header { padding: 1rem; }
        .modal-body, .modal-header, .modal-footer { padding: 1rem; }
        .top-bar .nav-link { font-size: .8125rem; }
        .auth-layout > main { padding: 1rem 0; }
        .table > thead > tr > th, .table > tbody > tr > td { padding: .65rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .sidebar .nav-link, .btn { transition: none; }
    }
}

/* AIINVOICE visual system: forest-green actions, mint accents, neutral surfaces. */
@media screen {
    :root, [data-bs-theme=light] {
        --bs-primary: #176b52;
        --bs-primary-rgb: 23,107,82;
        --bs-warning: #c9e8d9;
        --bs-warning-rgb: 255,202,40;
        --bs-body-font-family: var(--ai-font, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
        --bs-body-color: #3f3f3f;
        --bs-body-color-rgb: 63,63,63;
        --bs-heading-color: #222;
        --bs-link-color: #176b52;
        --bs-link-color-rgb: 23,107,82;
        --bs-link-hover-color: #104b3b;
        --bs-link-hover-color-rgb: 16,75,59;
        --bs-light: #f4f7f4;
        --bs-light-rgb: 244,247,244;
        --bs-border-color: #ddd;
        --bs-border-radius: .3rem;
        --bs-border-radius-lg: .4rem;
        --ai-radius: .35rem;
        --ai-shadow: 0 1px 4px rgba(0,0,0,.035);
        --ai-canvas: #f5f8f5;
    }
    body, h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--ai-font, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif); letter-spacing: normal; }
    h1, h2 { font-weight: 400; }
    h1.h3, h1.h4 { font-weight: 400; }
    .navbar-brand { font-weight: 700; font-size: 23px; color: #111 !important; gap: 0; letter-spacing: -.7px; }
    .navbar-brand::before { display: none; }
    .navbar-brand .brand-word { background: #c9e8d9; color: #111; border-radius: 4px; padding: 3px 5px; margin-left: 3px; line-height: 1.1; }
    .public-header { background: #f6f9f6; }
    .public-header .navbar { min-height: 65px; }
    .public-header .nav-link { color: #526b60; font-size: 15px; font-weight: 400; }
    .public-header .navbar-nav { gap: 12px; }
    .public-header .btn { font-size: 15px; }
    .top-bar { min-height: 70px; background: #f6f9f6; }
    .sidebar > .d-flex { min-height: 70px; }
    .sidebar { background: white; }
    .sidebar .navbar-brand { padding: 1rem; font-size: 21px; }
    .sidebar .sidebar-content .nav-link { border-radius: .25rem; font-weight: 400; }
    .sidebar .sidebar-content .nav-link.active,
    .sidebar .sidebar-content .navbar-nav > .nav-item > .nav-link[aria-expanded=true] { color: #176b52; background: #e5f3ec; }
    .sidebar .sidebar-content .nav-link:hover { background: #eef5f0; }
    .btn { border-radius: 4px; font-weight: 400; padding: .6rem 1rem; font-size: 15px; }
    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: #176b52;
        --bs-btn-border-color: #176b52;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #12553f;
        --bs-btn-hover-border-color: #12553f;
        --bs-btn-active-bg: #0e4534;
        --bs-btn-active-border-color: #0e4534;
        --bs-btn-disabled-bg: #176b52;
        --bs-btn-disabled-border-color: #176b52;
        --bs-btn-focus-shadow-rgb: 23,107,82;
    }
    .btn-warning {
        --bs-btn-color: #292515;
        --bs-btn-bg: #c9e8d9;
        --bs-btn-border-color: #c9e8d9;
        --bs-btn-hover-color: #19170f;
        --bs-btn-hover-bg: #b3dcc7;
        --bs-btn-hover-border-color: #b3dcc7;
        --bs-btn-active-bg: #a0cfb7;
        --bs-btn-active-border-color: #a0cfb7;
    }
    .btn-outline-primary { --bs-btn-color: #176b52; --bs-btn-border-color: #176b52; --bs-btn-hover-bg: #176b52; --bs-btn-hover-border-color: #176b52; --bs-btn-active-bg: #176b52; --bs-btn-active-border-color: #176b52; }
    .btn-link { --bs-btn-color: #176b52; --bs-btn-hover-color: #104b3b; }
    .btn-sm, .btn-group-sm > .btn { font-size: 13px; padding: .3rem .6rem; }
    .card { border-radius: 5px; border-color: #ddd; }
    .card-header { background: #fafafa; }
    .card-header h3, .card-header h4, .card-title { color: #176b52; }
    .form-control, .form-select, .input-group-text { border-radius: 4px; }
    .form-control, .form-select { font-size: 15px; }
    .form-control:focus, .form-select:focus { border-color: #80b39b; box-shadow: 0 0 0 .15rem #176b5218; }
    .table > thead > tr > th { background: #f1f3f5; color: #3c5d4e; font-size: 13px; letter-spacing: 0; }
    .table { --bs-table-hover-bg: #f0f8f3; }
    .page-link { color: #176b52; border-radius: 3px; }
    .active > .page-link, .page-link.active { background: #176b52; border-color: #176b52; color: white; }
    .dropdown-menu, .modal-content { border-radius: 5px; }
    .nav-tabs .nav-link { border-radius: 4px 4px 0 0; }
    .nav-pills .nav-link { border-radius: 4px; }
    .nav-pills .nav-link.active { background: #176b52; }
    .auth-layout { background: white; }
    .auth-layout .bg-mode.shadow { border-radius: 6px !important; box-shadow: 0 3px 15px #00000009 !important; }
    .auth-layout h1 { font-weight: 400; }
    .app-footer { background: #f4f5f6 !important; }
    .app-footer .nav-link { color: #526b60 !important; }
}

/* Shared modern typography, including readable financial numerals. */
@media screen {
    :root {
        --ai-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --bs-body-font-family: var(--ai-font);
        --bs-body-line-height: 1.65;
    }
    body { font-family: var(--ai-font); font-size: 16px; line-height: 1.65; }
    h1, h2, h3, h4, h5, h6 { font-family: var(--ai-font); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
    h1.h3, h1.h4, .auth-layout h1 { font-weight: 600; }
    .navbar-brand { font-family: var(--ai-font); font-weight: 700; }
    .btn, .form-control, .form-select, .input-group-text, .dropdown-item, .nav-link { font-family: var(--ai-font); }
    .btn { font-weight: 500; line-height: 1.5; }
    .form-control, .form-select { font-size: 16px; }
    .table, .document-row, .document-total, input[type=number] { font-variant-numeric: tabular-nums; }
    .table { font-size: 14px; line-height: 1.55; }
    .table > thead > tr > th { font-size: 13px; font-weight: 600; }
    .sidebar .sidebar-content .nav-link, .public-header .nav-link { font-weight: 500; }
    .form-label, .control-label { font-size: 14px; font-weight: 500; }
}

/* Brand accents remain separate from semantic warning, success, and error colors. */
@media screen {
    :root, [data-bs-theme=light] {
        --ai-brand: #176b52;
        --ai-brand-hover: #12553f;
        --ai-mint: #c9e8d9;
        --ai-accent-soft: #e9f5ee;
        --bs-primary-text-emphasis: #104b3b;
        --bs-primary-bg-subtle: #e5f3ec;
        --bs-primary-border-subtle: #b9dac9;
        --bs-warning: #d79b25;
        --bs-warning-rgb: 215,155,37;
    }
    .navbar-brand .brand-word { background: var(--ai-mint); color: #164c39; }
    .btn-warning { --bs-btn-color: #382a0c; --bs-btn-bg: #f4d48d; --bs-btn-border-color: #f4d48d; --bs-btn-hover-bg: #e7c16a; --bs-btn-hover-border-color: #e7c16a; --bs-btn-active-bg: #dbb457; --bs-btn-active-border-color: #dbb457; }
    .form-switch .form-check-input:checked { background-color: var(--ai-brand); }
}