:root {
        --animet-navy: #0b1a3a;
        --animet-navy-2: #14275c;
        --animet-red: #e31e2d;
        --animet-accent: #e31e2d;
        --animet-bg: #f2f1ef;
        --animet-surface: #ffffff;
        --animet-border: #eceff5;
        --animet-text: #1a2540;
        --animet-muted: #8792a6;
        --animet-topbar: #ffffff;
        --sidebar-w: 240px;
        --sidebar-w-collapsed: 64px;

        /* Sidebar theme (light default): white surface, navy text/branding */
        --sidebar-bg-1: #ffffff;
        --sidebar-bg-2: #f7f8fc;
        --sidebar-border: #eceff5;
        --sidebar-text: #10213d;
        --sidebar-muted: rgba(16, 33, 61, .62);
        --sidebar-hover-bg: rgba(16, 33, 61, .05);
        --sidebar-active-bg: rgba(227, 30, 45, .08);

        /* Re-theme Bootstrap's own primary color to the Animet brand red so
           .btn-primary, .text-primary, .bg-primary-subtle, etc. follow suit. */
        --bs-primary: #e31e2d;
        --bs-primary-rgb: 227, 30, 45;
        --bs-link-color: #e31e2d;
        --bs-link-color-rgb: 227, 30, 45;
        --bs-link-hover-color: #b3161f;
    }
    :root[data-bs-theme="light"] {
        color-scheme: light;
    }
    :root[data-bs-theme="dark"] {
        color-scheme: dark;
        --animet-bg: #0e1320;
        --animet-surface: #161c2c;
        --animet-border: #262e42;
        --animet-text: #eef1f8;
        --animet-muted: #94a0ba;
        --animet-topbar: #161c2c;

        /* Sidebar theme (dark): navy gradient, white text/branding */
        --sidebar-bg-1: var(--animet-navy);
        --sidebar-bg-2: var(--animet-navy-2);
        --sidebar-border: rgba(255, 255, 255, .08);
        --sidebar-text: #ffffff;
        --sidebar-muted: rgba(255, 255, 255, .65);
        --sidebar-hover-bg: rgba(255, 255, 255, .06);
        --sidebar-active-bg: rgba(255, 255, 255, .1);
    }
    body {
        background-color: var(--animet-bg);
        color: var(--animet-text);
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* --- Sidebar: full height, own subtle collapse control, follows theme --- */
    #sidebar {
        width: var(--sidebar-w);
        min-height: 100vh;
        background: linear-gradient(180deg, var(--sidebar-bg-1) 0%, var(--sidebar-bg-2) 100%);
        border-right: 1px solid var(--sidebar-border);
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 1030;
        display: flex;
        flex-direction: column;
        transition: width .18s ease, transform .2s ease, background .15s ease;
        overflow: hidden;
    }
    #sidebar .sidebar-top-row { display: flex; justify-content: flex-end; padding: .6rem .6rem 0; }
    #sidebarCollapseToggle { color: var(--sidebar-muted); border: none; background: transparent; flex: 0 0 auto; }
    #sidebarCollapseToggle:hover { color: var(--sidebar-text); }
    #sidebar .sidebar-caption {
        color: var(--sidebar-muted);
        font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
        padding: .5rem 1.25rem .5rem; white-space: nowrap; overflow: hidden;
        transition: opacity .12s ease;
    }
    #sidebar .nav-link {
        color: var(--sidebar-muted);
        font-size: .9rem;
        padding: .6rem 1.25rem;
        border-left: 3px solid transparent;
        display: flex; align-items: center;
        white-space: nowrap; overflow: hidden;
    }
    #sidebar .nav-link i { width: 1.25rem; margin-right: .6rem; font-size: 1rem; flex: 0 0 auto; }
    #sidebar .nav-label { transition: opacity .1s ease; }
    #sidebar .nav-link:hover { color: var(--sidebar-text); background: var(--sidebar-hover-bg); }
    #sidebar .nav-link.active {
        color: var(--sidebar-text);
        background: var(--sidebar-active-bg);
        border-left-color: var(--animet-accent);
        font-weight: 600;
    }
    #sidebar .sidebar-footer { color: var(--sidebar-muted); font-size: .72rem; padding: .85rem 1.25rem; white-space: nowrap; overflow: hidden; }

    /* Collapsed (desktop icon-rail) state, with hover-to-expand */
    #sidebar.collapsed { width: var(--sidebar-w-collapsed); }
    #sidebar.collapsed .sidebar-caption,
    #sidebar.collapsed .nav-label,
    #sidebar.collapsed .sidebar-footer,
    #sidebar.collapsed #sidebarCollapseToggle { opacity: 0; pointer-events: none; }
    #sidebar.collapsed:hover {
        width: var(--sidebar-w);
        box-shadow: 6px 0 16px rgba(0,0,0,.25);
        z-index: 1035;
    }
    #sidebar.collapsed:hover .sidebar-caption,
    #sidebar.collapsed:hover .nav-label,
    #sidebar.collapsed:hover .sidebar-footer,
    #sidebar.collapsed:hover #sidebarCollapseToggle { opacity: 1; pointer-events: auto; }

    main.content-area { margin-left: var(--sidebar-w); transition: margin-left .18s ease; }
    body.sidebar-collapsed main.content-area { margin-left: var(--sidebar-w-collapsed); }

    /* --- Topbar: scoped to the main content area only (right of the sidebar) -
           this is where the logo lives, so it's always in the same place next
           to the page content regardless of the sidebar's collapsed/expanded/
           off-canvas state. --- */
    #topbar {
        background: var(--animet-topbar);
        border-bottom: 1px solid var(--animet-border);
        padding: .65rem 1.5rem;
        position: sticky; top: 0; z-index: 1020;
    }
    .topbar-brand { display: flex; align-items: center; text-decoration: none; }
    .topbar-logo-img { height: 30px; width: auto; object-fit: contain; }
    #topbar .user-chip { font-size: .85rem; color: var(--animet-muted); }
    #themeToggleBtn, #sidebarToggleBtn { border-color: var(--animet-border); }

    /* --- Stat cards: fixed equal height so a two-line label never makes one
           card taller than its neighbours --- */
    .stat-card {
        background: var(--animet-surface);
        border: 1px solid var(--animet-border);
        border-radius: .75rem;
        padding: .85rem 1.1rem;
        box-shadow: 0 1px 2px rgba(16, 33, 61, 0.04);
        height: 100%;
        min-height: 84px;
    }
    .stat-card .stat-icon {
        width: 38px; height: 38px; border-radius: .6rem;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; flex: 0 0 auto;
    }
    .stat-card .stat-value { font-size: 1.3rem; font-weight: 700; color: var(--animet-text); line-height: 1.1; }
    .stat-card .stat-label { font-size: .66rem; color: var(--animet-muted); text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; }

    /* --- Card / table shell --- */
    .content-card {
        background: var(--animet-surface);
        border: 1px solid var(--animet-border);
        border-radius: .75rem;
        box-shadow: 0 1px 2px rgba(16, 33, 61, 0.04);
    }
    /* Compact table: smaller padding/type so more rows fit without crowding. */
    .table > :not(caption) > * > * { padding: .4rem .7rem; vertical-align: middle; font-size: .84rem; }
    .table thead th {
        font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
        color: var(--animet-muted); border-bottom: 1px solid var(--animet-border);
        padding-top: .55rem; padding-bottom: .55rem;
    }
    #orders-table tbody tr { transition: background-color .12s ease; }

    .status-pill { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; background: #eef0f5; color: #4a5573; white-space: nowrap; }
    .status-pill.status-COMPLETED { background: #e3f7ec; color: #128a4a; }
    .status-pill.status-CANCELLED { background: #fde8ea; color: #b3273d; }
    .status-pill.status-SEND, .status-pill.status-TO_SEND { background: #e6eefd; color: #1f56c9; }
    .status-pill.status-RECEIVED, .status-pill.status-PARTIALLY_RECEIVED { background: #fff4e0; color: #a6690a; }
    .status-pill.status-AMENDED { background: #f1e9fb; color: #7434c4; }

    :root[data-bs-theme="dark"] .status-pill { background: rgba(255,255,255,.08); color: #c7cee0; }
    :root[data-bs-theme="dark"] .status-pill.status-COMPLETED { background: rgba(40,199,111,.15); color: #4ade80; }
    :root[data-bs-theme="dark"] .status-pill.status-CANCELLED { background: rgba(239,68,68,.15); color: #f87171; }
    :root[data-bs-theme="dark"] .status-pill.status-SEND, :root[data-bs-theme="dark"] .status-pill.status-TO_SEND { background: rgba(59,130,246,.15); color: #60a5fa; }
    :root[data-bs-theme="dark"] .status-pill.status-RECEIVED, :root[data-bs-theme="dark"] .status-pill.status-PARTIALLY_RECEIVED { background: rgba(245,158,11,.15); color: #fbbf24; }
    :root[data-bs-theme="dark"] .status-pill.status-AMENDED { background: rgba(168,85,247,.15); color: #c084fc; }

    .nav-tabs .nav-link { color: var(--animet-muted); font-weight: 500; border: none; padding: .6rem 1rem; }
    .nav-tabs .nav-link.active { color: var(--animet-accent); border-bottom: 2px solid var(--animet-accent); background: transparent; }
    .nav-tabs { border-bottom-color: var(--animet-border); }

    .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
    .sortable-th:hover { color: var(--animet-accent); }
    .sortable-th .sort-idle-icon { opacity: .35; font-size: .7rem; }
    .sortable-th sup { font-size: .6rem; margin-left: 1px; }

    /* --- Mobile off-canvas sidebar --- */
    .sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1025;
        opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

    @media (max-width: 991.98px) {
        #sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
        #sidebar.show { transform: translateX(0); }
        #sidebar.collapsed .sidebar-caption,
        #sidebar.collapsed .nav-label,
        #sidebar.collapsed .sidebar-footer,
        #sidebar.collapsed #sidebarCollapseToggle { opacity: 1; pointer-events: auto; }
        main.content-area, body.sidebar-collapsed main.content-area { margin-left: 0; }
    }