/* ==========================================================================
   System themes
   The layout sets <html class="themed" data-theme="..."> for every theme
   except "classic" (the original look), so classic is untouched by this file.
   Each theme only defines tokens; the shared rules below consume them.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Theme tokens
   ------------------------------------------------------------------------- */

/* Graphite: neutral charcoal and white with a burnt-orange accent; flat, crisp and business-like */
html[data-theme="graphite"] {
    --th-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --th-heading-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --th-font-size: 0.875rem;
    --th-body-bg: #f4f5f7;
    --th-surface: #ffffff;
    --th-surface-2: #f8f9fa;
    --th-text: #1f2328;
    --th-muted: #636c76;
    --th-border: #dfe2e6;
    --th-heading: #1f2328;

    --th-accent: #c2410c;
    --th-accent-rgb: 194, 65, 12;
    --th-accent-hover: #9a3412;
    --th-accent-soft: #fff1e8;
    --th-link: #b23c0b;
    --th-link-rgb: 178, 60, 11;

    --th-navbar-bg: #16181d;
    --th-sidebar-bg: #24272e;
    --th-sidebar-border: none;
    --th-sidebar-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
    --th-sidebar-text: #b4bac3;
    --th-sidebar-sub-text: #9ba2ad;
    --th-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --th-sidebar-hover-text: #ffffff;
    --th-sidebar-active-bg: rgba(255, 255, 255, .09);
    --th-sidebar-active-text: #ffffff;
    --th-sidebar-indicator: #f97316;
    --th-sidebar-rule: rgba(255, 255, 255, .12);

    --th-thead-bg: #eef0f3;
    --th-thead-text: #3d444d;
    --th-thead-transform: uppercase;
    --th-thead-size: 0.7rem;
    --th-thead-spacing: 0.06em;
    --th-thead-border: #d5d9de;
    --th-row-hover: #fff4ec;
    --th-row-stripe: transparent;
    --th-cell-py: 0.35rem;
    --th-cell-px: 0.55rem;
    --th-cell-sm-py: 0.2rem;
    --th-cell-sm-px: 0.4rem;

    --th-radius: 0.375rem;
    --th-radius-sm: 0.3rem;
    --th-btn-radius: 0.3rem;
    --th-badge-radius: 0.25rem;
    --th-card-border: #dfe2e6;
    --th-card-shadow: none;
    --th-card-shadow-hover: 0 0 0 1px #c2410c;
    --th-card-header-bg: #fafbfc;
    --th-card-lift: 0;

    /* Legacy tokens used by existing pages */
    --primary: #16181d;
    --secondary: #c2410c;
    --success: #1a7f37;
    --warning: #bf8700;
    --danger: #cf222e;
}

/* Indigo: deep indigo sidebar, cool lavender table headers, violet-blue accent; flat and compact like Graphite */
html[data-theme="indigo"] {
    --th-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --th-font-size: 0.875rem;
    --th-body-bg: #f5f6fb;
    --th-surface: #ffffff;
    --th-surface-2: #f8f8fd;
    --th-text: #1e1b3a;
    --th-muted: #64648a;
    --th-border: #e0e1ef;
    --th-heading: #1e1b4b;

    --th-accent: #4f46e5;
    --th-accent-rgb: 79, 70, 229;
    --th-accent-hover: #4338ca;
    --th-accent-soft: #eef0ff;
    --th-link: #4338ca;
    --th-link-rgb: 67, 56, 202;

    --th-navbar-bg: #17153b;
    --th-sidebar-bg: #1e1b4b;
    --th-sidebar-border: none;
    --th-sidebar-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
    --th-sidebar-text: #c7c9f0;
    --th-sidebar-sub-text: #a9abdc;
    --th-sidebar-hover-bg: rgba(255, 255, 255, .07);
    --th-sidebar-hover-text: #ffffff;
    --th-sidebar-active-bg: rgba(129, 140, 248, .22);
    --th-sidebar-active-text: #ffffff;
    --th-sidebar-indicator: #a5b4fc;
    --th-sidebar-rule: rgba(255, 255, 255, .12);

    --th-thead-bg: #eef0fb;
    --th-thead-text: #312e81;
    --th-thead-transform: uppercase;
    --th-thead-size: 0.7rem;
    --th-thead-spacing: 0.06em;
    --th-thead-border: #d9dbf3;
    --th-row-hover: #f3f4ff;
    --th-row-stripe: transparent;
    --th-cell-py: 0.35rem;
    --th-cell-px: 0.55rem;
    --th-cell-sm-py: 0.2rem;
    --th-cell-sm-px: 0.4rem;

    --th-radius: 0.375rem;
    --th-radius-sm: 0.3rem;
    --th-btn-radius: 0.3rem;
    --th-badge-radius: 0.25rem;
    --th-card-border: #e0e1ef;
    --th-card-shadow: none;
    --th-card-shadow-hover: 0 0 0 1px #4f46e5;
    --th-card-header-bg: #fafaff;
    --th-card-lift: 0;

    --primary: #17153b;
    --secondary: #4f46e5;
    --success: #15803d;
    --warning: #b45309;
    --danger: #dc2626;
}
/* Plantation: estate greens with gold highlights, compact spreadsheet-style tables */
html[data-theme="plantation"] {
    --th-font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --th-font-size: 0.875rem;
    --th-body-bg: #f4f4ec;
    --th-surface: #ffffff;
    --th-surface-2: #f7f8f1;
    --th-text: #1d2a20;
    --th-muted: #5f6b5c;
    --th-border: #d6dacb;
    --th-heading: #1b3a2a;

    --th-accent: #2e7d32;
    --th-accent-rgb: 46, 125, 50;
    --th-accent-hover: #1b5e20;
    --th-accent-soft: #e6f2e2;
    --th-link: #2e7d32;
    --th-link-rgb: 46, 125, 50;

    --th-navbar-bg: #1b3a2a;
    --th-sidebar-bg: #234a35;
    --th-sidebar-border: none;
    --th-sidebar-shadow: inset -1px 0 0 rgba(0, 0, 0, .15);
    --th-sidebar-text: rgba(255, 255, 255, .82);
    --th-sidebar-sub-text: rgba(255, 255, 255, .7);
    --th-sidebar-hover-bg: rgba(255, 255, 255, .08);
    --th-sidebar-hover-text: #ffffff;
    --th-sidebar-active-bg: #d4a72c;
    --th-sidebar-active-text: #1b3a2a;
    --th-sidebar-indicator: #f2d27a;
    --th-sidebar-rule: rgba(255, 255, 255, .25);

    --th-thead-bg: #2f5d3a;
    --th-thead-text: #ffffff;
    --th-thead-transform: none;
    --th-thead-size: 0.8125rem;
    --th-thead-spacing: 0;
    --th-thead-border: #24492d;
    --th-row-hover: #fbf3d9;
    --th-row-stripe: #f6f8f1;
    --th-cell-py: 0.35rem;
    --th-cell-px: 0.55rem;
    --th-cell-sm-py: 0.2rem;
    --th-cell-sm-px: 0.4rem;

    --th-radius: 0.3rem;
    --th-radius-sm: 0.25rem;
    --th-btn-radius: 0.25rem;
    --th-badge-radius: 0.2rem;
    --th-card-border: #d6dacb;
    --th-card-shadow: none;
    --th-card-shadow-hover: 0 0 0 1px #d4a72c;
    --th-card-header-bg: #eef1e6;
    --th-card-lift: 0;

    --primary: #1b3a2a;
    --secondary: #2e7d32;
    --success: #2e7d32;
    --warning: #c98f00;
    --danger: #c62828;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
html.themed {
    --bs-primary: var(--th-accent);
    --bs-primary-rgb: var(--th-accent-rgb);
    --bs-link-color: var(--th-link);
    --bs-link-color-rgb: var(--th-link-rgb);
    --bs-link-hover-color-rgb: var(--th-accent-rgb);
    --bs-link-hover-color: var(--th-accent-hover);
    --bs-border-radius: var(--th-radius-sm);
    --bs-border-radius-sm: calc(var(--th-radius-sm) * .75);
    --bs-border-radius-lg: var(--th-radius);
    --bs-body-font-family: var(--th-font);
    --bs-body-font-size: var(--th-font-size);
    --bs-border-color: var(--th-border);
    --bs-focus-ring-color: rgba(var(--th-accent-rgb), .25);
}

html.themed body {
    font-family: var(--th-font);
    font-size: var(--th-font-size);
    background-color: var(--th-body-bg);
    color: var(--th-text);
    -webkit-font-smoothing: antialiased;
}

html.themed ::selection { background: rgba(var(--th-accent-rgb), .25); }


html.themed main h1.h2,
html.themed main .h2 {
    font-family: var(--th-heading-font, var(--th-font));
    color: var(--th-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
html.themed main .border-bottom { border-color: var(--th-border) !important; }

html.themed #nprogress .bar { background: var(--th-accent) !important; }
html.themed #nprogress .peg { box-shadow: 0 0 10px var(--th-accent), 0 0 5px var(--th-accent) !important; }

/* Scrollbars */
html.themed * { scrollbar-width: thin; scrollbar-color: var(--th-border) transparent; }
html.themed ::-webkit-scrollbar { width: 10px; height: 10px; }
html.themed ::-webkit-scrollbar-thumb { background: var(--th-border); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html.themed ::-webkit-scrollbar-track { background: transparent; }

/* -------------------------------------------------------------------------
   Navbar & sidebar
   ------------------------------------------------------------------------- */
html.themed .app-navbar {
    background: var(--th-navbar-bg) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .08);
}

html.themed .sidebar {
    background: var(--th-sidebar-bg);
    color: var(--th-sidebar-text);
    border-right: var(--th-sidebar-border);
    box-shadow: var(--th-sidebar-shadow);
}
html.themed .sidebar hr { border-color: var(--th-sidebar-rule); opacity: 1; }

html.themed .sidebar .nav-link {
    color: var(--th-sidebar-text);
    border-radius: var(--th-radius-sm);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html.themed .sidebar .nav-link:hover {
    background: var(--th-sidebar-hover-bg);
    color: var(--th-sidebar-hover-text);
}
html.themed .sidebar .nav-link.active {
    background: var(--th-sidebar-active-bg);
    color: var(--th-sidebar-active-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--th-sidebar-indicator);
}
html.themed .sidebar .nav-submenu .nav-link { color: var(--th-sidebar-sub-text); }
html.themed .sidebar .nav-submenu .nav-link:hover { background: var(--th-sidebar-hover-bg); color: var(--th-sidebar-hover-text); }
html.themed .sidebar .nav-submenu .nav-link.active {
    background: var(--th-sidebar-active-bg);
    color: var(--th-sidebar-active-text);
}

/* -------------------------------------------------------------------------
   Cards, alerts, modals, dropdowns
   ------------------------------------------------------------------------- */
html.themed .card {
    --bs-card-bg: var(--th-surface);
    --bs-card-border-color: var(--th-card-border);
    --bs-card-border-radius: var(--th-radius);
    --bs-card-inner-border-radius: calc(var(--th-radius) - 1px);
    --bs-card-cap-bg: var(--th-card-header-bg);
    --bs-card-color: var(--th-text);
    border-color: var(--th-card-border) !important;
    box-shadow: var(--th-card-shadow) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
html.themed .card .card { box-shadow: none !important; }
html.themed .card-header.bg-light,
html.themed .card-header.bg-white {
    background-color: var(--th-card-header-bg) !important;
    border-bottom: 1px solid var(--th-border);
}
html.themed .card-footer { border-top-color: var(--th-border); }

/* Dashboard stat tiles lift on hover */
html.themed .stats-card:hover,
html.themed a > .card:hover,
html.themed .card.card-hover:hover {
    box-shadow: var(--th-card-shadow-hover) !important;
    transform: translateY(var(--th-card-lift));
}

html.themed .alert { border-radius: var(--th-radius-sm); }
html.themed .modal { --bs-modal-border-radius: var(--th-radius); --bs-modal-inner-border-radius: calc(var(--th-radius) - 1px); }
html.themed .modal-content { border: 1px solid var(--th-card-border); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
html.themed .dropdown-menu {
    --bs-dropdown-border-radius: var(--th-radius-sm);
    --bs-dropdown-link-active-bg: var(--th-accent);
    border-color: var(--th-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
html.themed .list-group { --bs-list-group-active-bg: var(--th-accent); --bs-list-group-active-border-color: var(--th-accent); }
html.themed .badge { border-radius: var(--th-badge-radius); font-weight: 600; letter-spacing: .01em; }

/* -------------------------------------------------------------------------
   Buttons & forms
   ------------------------------------------------------------------------- */
html.themed .btn { --bs-btn-border-radius: var(--th-btn-radius); --bs-btn-font-weight: 500; transition: all .15s ease; }
html.themed .btn-sm { --bs-btn-border-radius: calc(var(--th-btn-radius) * .8); }

html.themed .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--th-accent);
    --bs-btn-border-color: var(--th-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--th-accent-hover);
    --bs-btn-hover-border-color: var(--th-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--th-accent-hover);
    --bs-btn-active-border-color: var(--th-accent-hover);
    --bs-btn-disabled-bg: var(--th-accent);
    --bs-btn-disabled-border-color: var(--th-accent);
    --bs-btn-focus-shadow-rgb: var(--th-accent-rgb);
    color: #fff;
}
html.themed .btn-outline-primary {
    --bs-btn-color: var(--th-accent);
    --bs-btn-border-color: var(--th-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--th-accent);
    --bs-btn-hover-border-color: var(--th-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--th-accent-hover);
    --bs-btn-active-border-color: var(--th-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--th-accent-rgb);
    color: var(--th-accent);
}
html.themed .btn-outline-primary:hover { color: #fff; }
html.themed .btn-primary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(var(--th-accent-rgb), .3); }

html.themed .form-control,
html.themed .form-select { border-color: var(--th-border); border-radius: var(--th-radius-sm); }
html.themed .form-control:focus,
html.themed .form-select:focus {
    border-color: rgba(var(--th-accent-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--th-accent-rgb), .2);
}
html.themed .form-check-input:checked { background-color: var(--th-accent); border-color: var(--th-accent); }
html.themed .form-check-input:focus { border-color: rgba(var(--th-accent-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--th-accent-rgb), .2); }
html.themed .input-group-text { border-color: var(--th-border); }

html.themed .pagination {
    --bs-pagination-color: var(--th-link);
    --bs-pagination-hover-color: var(--th-accent-hover);
    --bs-pagination-active-bg: var(--th-accent);
    --bs-pagination-active-border-color: var(--th-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--th-accent-rgb), .2);
    --bs-pagination-border-radius: var(--th-radius-sm);
}
html.themed main .nav-pills { --bs-nav-pills-link-active-bg: var(--th-accent); }
html.themed .nav-tabs .nav-link.active { color: var(--th-accent); font-weight: 600; }

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
html.themed .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--th-text);
    --bs-table-border-color: var(--th-border);
    --bs-table-hover-bg: var(--th-row-hover);
    --bs-table-hover-color: var(--th-text);
    --bs-table-striped-bg: var(--th-row-stripe);
    font-variant-numeric: tabular-nums;
}
html.themed .table > :not(caption) > * > * { padding: var(--th-cell-py) var(--th-cell-px); }
html.themed .table-sm > :not(caption) > * > * { padding: var(--th-cell-sm-py) var(--th-cell-sm-px); }

html.themed .table > thead,
html.themed .table > thead.table-light,
html.themed .table > thead > tr > th {
    --bs-table-bg: var(--th-thead-bg);
    --bs-table-color: var(--th-thead-text);
    --bs-table-border-color: var(--th-thead-border);
}
html.themed .table > thead > tr > th,
html.themed .table > thead > tr > td {
    background-color: var(--th-thead-bg);
    color: var(--th-thead-text);
    text-transform: var(--th-thead-transform);
    font-size: var(--th-thead-size);
    letter-spacing: var(--th-thead-spacing);
    font-weight: 600;
    border-bottom: 1px solid var(--th-thead-border);
    white-space: nowrap;
    vertical-align: middle;
}
/* Several pages hard-code `.table th { background:#f8f9fa }` – keep row headers in the body readable */
html.themed .table > tbody > tr > th { background-color: var(--th-surface-2); color: var(--th-text); }
html.themed .table-hover > tbody > tr:hover > * { background-color: var(--th-row-hover); --bs-table-bg-state: var(--th-row-hover); }
html.themed .table > tbody > tr > td { vertical-align: middle; border-color: var(--th-border); }

/* Rounded table corners inside cards */
html.themed .card > .table-responsive:first-child > .table > thead > tr:first-child > th:first-child,
html.themed .card > .card-body.p-0 > .table-responsive > .table > thead > tr:first-child > th:first-child { border-top-left-radius: calc(var(--th-radius) - 1px); }
html.themed .card > .table-responsive:first-child > .table > thead > tr:first-child > th:last-child,
html.themed .card > .card-body.p-0 > .table-responsive > .table > thead > tr:first-child > th:last-child { border-top-right-radius: calc(var(--th-radius) - 1px); }

/* DataTables */
html.themed .dataTables_wrapper .dataTables_length,
html.themed .dataTables_wrapper .dataTables_filter,
html.themed .dataTables_wrapper .dataTables_info,
html.themed .dataTables_wrapper .dataTables_processing,
html.themed .dataTables_wrapper .dataTables_paginate { color: var(--th-muted) !important; }
html.themed .dataTables_wrapper .dataTables_filter input,
html.themed .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-sm);
    background-color: var(--th-surface);
    color: var(--th-text);
}
html.themed table.dataTable thead > tr > th,
html.themed table.dataTable thead > tr > td { border-bottom: 1px solid var(--th-thead-border) !important; }
html.themed table.dataTable.no-footer { border-bottom: 1px solid var(--th-border) !important; }
html.themed .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--th-radius-sm) !important; color: var(--th-text) !important; }
html.themed .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.themed .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--th-accent) !important;
    border-color: var(--th-accent) !important;
    color: #fff !important;
}
html.themed .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--th-accent-soft) !important;
    border-color: transparent !important;
    color: var(--th-accent-hover) !important;
}

/* Datepicker */
html.themed .datepicker table tr td.active,
html.themed .datepicker table tr td.active:hover { background-color: var(--th-accent) !important; color: #fff; }
html.themed .datepicker table tr td.today { background-color: var(--th-accent-soft) !important; color: var(--th-accent-hover) !important; }

/* -------------------------------------------------------------------------
   Plantation extras: zebra rows and gold accents
   ------------------------------------------------------------------------- */
html[data-theme="plantation"] .table > tbody > tr:nth-of-type(even) > * { background-color: var(--th-row-stripe); }
html[data-theme="plantation"] .table-hover > tbody > tr:hover > * { background-color: var(--th-row-hover); }
html[data-theme="plantation"] .table:not(.table-borderless) > tbody > tr > td { border-right: 1px solid #eceee4; }
html[data-theme="plantation"] .table:not(.table-borderless) > tbody > tr > td:last-child { border-right: 0; }
html[data-theme="plantation"] .card-header.bg-primary { background-color: #2f5d3a !important; }
html[data-theme="plantation"] .app-navbar { border-bottom: 3px solid #d4a72c; }
html[data-theme="plantation"] main h1.h2 { border-left: 4px solid #d4a72c; padding-left: .6rem; }

/* -------------------------------------------------------------------------
   Graphite extras: flat panels, orange focus line on page titles
   ------------------------------------------------------------------------- */
html[data-theme="graphite"] .card-header.bg-primary { background-color: #24272e !important; border-bottom: 2px solid #c2410c; }
html[data-theme="graphite"] .app-navbar { box-shadow: none; border-bottom: 1px solid #000; }
html[data-theme="graphite"] main h1.h2 { font-weight: 600; }
html[data-theme="graphite"] main > .border-bottom.pb-2 { border-bottom: 2px solid #1f2328 !important; }
html[data-theme="graphite"] .table > tbody > tr > td { border-bottom-color: #eceef1; }
html[data-theme="graphite"] .btn-primary:hover:not(:disabled) { box-shadow: none; }

/* -------------------------------------------------------------------------
   Indigo extras: flat panels, indigo rule under page titles
   ------------------------------------------------------------------------- */
html[data-theme="indigo"] .card-header.bg-primary { background-color: #1e1b4b !important; border-bottom: 2px solid #818cf8; }
html[data-theme="indigo"] .app-navbar { box-shadow: none; border-bottom: 1px solid #0d0b26; }
html[data-theme="indigo"] main h1.h2 { font-weight: 700; }
html[data-theme="indigo"] main > .border-bottom.pb-2 { border-bottom: 2px solid #4f46e5 !important; }
html[data-theme="indigo"] .table > tbody > tr > td { border-bottom-color: #ececf7; }
html[data-theme="indigo"] .btn-primary:hover:not(:disabled) { box-shadow: none; }
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    html.themed *, html.themed *::before, html.themed *::after { transition: none !important; }
    html.themed .stats-card:hover, html.themed .card:hover { transform: none !important; }
}