/* =========================================================
   PETT — global theme + aesthetic polish layer.
   Loaded AFTER pett.css and any page-specific CSS.

   ─── HOW TO TWEAK ────────────────────────────────────────
   • All colors are defined as CSS custom properties in the
     two blocks below: LIGHT (`:root`) and DARK
     (`html[data-bs-theme="dark"]`).
   • Change a single var to retheme the whole app.
   • The light palette mirrors the original `main` branch
     teal/cyan family (color1..color7).
   • Dark palette is the indigo/slate scheme.
   • Layout / sizing / radius / shadow rules below the
     token blocks DO NOT need to change.
   ========================================================= */


/* ════════════════════════════════════════════════════════
   LIGHT MODE — original main-branch teal palette
   ════════════════════════════════════════════════════════ */
:root{
    /* Brand / accent (was --color1..--color5 on main) */
    --pett-c1: hsl(180, 100%, 10%);   /* deepest teal — navbar/headers      */
    --pett-c2: hsl(180, 25%,  30%);
    --pett-c3: hsl(180, 61%,  25%);   /* accent-hover                       */
    --pett-c4: hsl(180, 70%,  30%);   /* accent                             */
    --pett-c5: hsl(180, 61%,  40%);   /* bright accent                      */
    --pett-c6: hsl(180, 20%,  80%);   /* light teal — header band/totals    */
    --pett-c7: hsl(180, 10%,  80%);   /* near-grey teal — header text       */

    /* Semantic tokens (re-exported names used everywhere below) */
    --pett-page-bg:        hsl(180, 20%, 60%);          /* main body bg     */
    --pett-surface:        hsla(0,   0%, 96%, .95);     /* card bg          */
    --pett-surface-2:      hsl(180, 20%, 88%);          /* sub surface      */
    --pett-row-even:       hsl(180, 20%, 92%);
    --pett-row-odd:        hsl(180, 20%, 86%);
    --pett-row-hover:      hsla(180, 50%, 70%, .35);
    --pett-row-selected:   hsla(180, 60%, 60%, .45);
    --pett-totals-bg:      var(--pett-c6);

    --pett-table-header-bg: var(--pett-c1);
    --pett-table-header-fg: var(--pett-c7);

    --pett-navbar-bg:       var(--pett-c1);
    --pett-navbar-fg:       var(--pett-c7);

    --pett-accent:        var(--pett-c4);
    --pett-accent-hover:  var(--pett-c3);
    --pett-accent-soft:   hsla(180, 50%, 60%, .18);

    --pett-success:       hsl(140, 60%, 35%);
    --pett-success-soft:  hsl(140, 55%, 86%);           /* filled cells     */
    --pett-danger:        hsl(0,   70%, 45%);
    --pett-danger-soft:   hsl(0,   70%, 90%);           /* empty cells      */

    --pett-muted:   hsl(180, 8%, 38%);
    --pett-border:  hsla(180, 30%, 25%, .18);

    /* Sizing tokens (theme-agnostic) */
    --pett-radius:    .375rem;
    --pett-radius-sm: .25rem;
    --pett-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
    --pett-shadow-md: 0 4px 14px rgba(0,0,0,.14);

    /* Hand-off to BS5 */
    --bs-body-bg:        var(--pett-page-bg);
    --bs-tertiary-bg:    var(--pett-surface);
    --bs-secondary-bg:   var(--pett-surface-2);
    --bs-border-color:   var(--pett-border);
}


/* ════════════════════════════════════════════════════════
   DARK MODE — indigo / slate (UNTOUCHED look)
   ════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"]{
    --pett-page-bg:        #181a20;
    --pett-surface:        #1e1f24;
    --pett-surface-2:      #25262c;
    --pett-row-even:       #1e1f24;
    --pett-row-odd:        #25262c;
    --pett-row-hover:      rgba(129,140,248,.14);
    --pett-row-selected:   rgba(129,140,248,.28);
    --pett-totals-bg:      #2f3340;

    --pett-table-header-bg: #2a2b33;
    --pett-table-header-fg: #e5e7eb;

    --pett-navbar-bg:      #111418;
    --pett-navbar-fg:      rgba(255,255,255,.85);

    --pett-accent:         #818cf8;
    --pett-accent-hover:   #a5b4fc;
    --pett-accent-soft:    rgba(129,140,248,.18);

    --pett-success:        #34d399;
    --pett-success-soft:   hsl(160, 35%, 22%);
    --pett-danger:         #f87171;
    --pett-danger-soft:    hsl(0, 35%, 28%);

    --pett-muted:   #9ca3af;
    --pett-border:  rgba(255,255,255,.10);

    --pett-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --pett-shadow-md: 0 4px 12px rgba(0,0,0,.5);

    --bs-body-bg:        var(--pett-page-bg);
    --bs-body-color:     #e5e7eb;
    --bs-tertiary-bg:    var(--pett-surface);
    --bs-secondary-bg:   var(--pett-surface-2);
    --bs-border-color:   var(--pett-border);

    /* checkboxes */
    --checkbox-color-primary:    var(--pett-accent);
    --checkbox-color-secondary:  var(--pett-accent-soft);
    --checkbox-color-background: var(--pett-surface-2);
    --checkbox-color-disabled:   #6b7280;
}


/* =========================================================
   ↓↓↓  Below: layout / structural rules — use vars only.
   No need to edit when retheming colors.
   ========================================================= */

/* ----------- Base ----------- */
body{
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
    font-family: 'Segoe UI', system-ui, -apple-system, 'Inter', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--pett-accent); text-decoration: none; }
a:hover{ color: var(--pett-accent-hover); text-decoration: none; }
hr{ border-color: var(--pett-border); opacity: .6; }

/* ----------- Navbar polish ----------- */
.navbar.bg-dark{
    background-color: var(--pett-navbar-bg) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.25);
    padding-top: .35rem; padding-bottom: .35rem;
}
.navbar-brand{ font-weight: 600; letter-spacing: .02em; }
.navbar .nav-link{ color: var(--pett-navbar-fg) !important; transition: color .15s ease; }
.navbar .nav-link:hover{ color: #fff !important; }
.navbar .dropdown-menu{
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius);
    box-shadow: var(--pett-shadow-md);
    padding: .35rem;
}
.navbar .dropdown-item{
    border-radius: var(--pett-radius-sm);
    padding: .35rem .6rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
    background-color: var(--pett-accent-soft);
    color: var(--pett-accent);
}
#theme-toggle{
    border-radius: 999px; width: 2rem; height: 2rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85);
}
#theme-toggle:hover{ background-color: rgba(255,255,255,.08); color: #fff; }
.icon.login{ display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; }
.icon.login:has(> i.bi){
    filter: none !important;
    color: var(--pett-navbar-fg);
    font-size: 1.35rem;
    line-height: 1;
}
.icon.login:has(> i.bi):hover{
    color: #fff;
    filter: none !important;
}

/* ----------- Buttons (modernize .btn-grad) ----------- */
.btn-grad{
    background-image: none !important;
    background-color: var(--pett-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius);
    padding: .35rem .8rem;
    font-weight: 500;
    box-shadow: var(--pett-shadow-sm);
    transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn-grad:hover{
    background-color: var(--pett-accent-soft);
    color: var(--pett-accent);
    box-shadow: var(--pett-shadow-md);
}
.btn-grad:active{ transform: translateY(1px); }
.btn-grad a, .btn-grad a:hover{ color: inherit; text-decoration: none; }

/* edit modal action pair */
.form-action-wrapper>.btn-submit{
    background-color: var(--pett-accent);
    border: 1px solid var(--pett-accent);
    color: #fff; border-radius: var(--pett-radius);
}
.form-action-wrapper>.btn-submit:hover{
    background-color: var(--pett-accent-hover);
    border-color: var(--pett-accent-hover); color: #fff;
}
.form-action-wrapper>.btn-cancel{
    background-color: transparent;
    border: 1px solid var(--pett-border);
    color: var(--bs-body-color); border-radius: var(--pett-radius);
}
.form-action-wrapper>.btn-cancel:hover{ background-color: var(--pett-row-hover); }

/* ----------- Wrappers / cards (form-wrapper, .wrapper, .dev-wrapper) ----------- */
.form-wrapper,
.wrapper,
.dev-wrapper{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius);
    box-shadow: var(--pett-shadow-sm);
}
.wrapper:has(.form-signin){
    background: none !important;
    border: none !important;
}
/* ----------- Form inputs ----------- */
.input-field,
input.input-field, select.input-field,
input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="search"], input[type="password"], input[type="email"],
select, textarea{
    background-color: var(--pett-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius-sm);
}
input:focus, select:focus, textarea:focus{
    outline: none;
    border-color: var(--pett-accent);
    box-shadow: 0 0 0 3px var(--pett-accent-soft);
}
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] textarea{
    background-color: var(--pett-surface-2);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ----------- Generic plain tables (wallet/loanees/list-of-payments) ----------- */
/* Override per-page inline <style> blocks that hard-code light hsl(180,20%,...) bgs */
.dev-wrapper{
    /* shrink-to-fit so 2-col tables don't span the whole page */
    width: max-content;
    max-width: 100%;
    min-width: 22rem;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1rem 1.25rem !important;
}
.dev-wrapper table{
    background-color: transparent !important;
    color: var(--bs-body-color);
    border-collapse: collapse;
    width: auto;            /* let the table size to its content, not full wrapper */
    margin: 0 auto;
}
.dev-wrapper thead{
    background-color: var(--pett-table-header-bg) !important;
    color: var(--pett-table-header-fg) !important;
    border-bottom: 1px solid var(--pett-border) !important;
}
.dev-wrapper thead th{
    background-color: transparent !important;
    color: var(--pett-table-header-fg) !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .1rem .25rem;
    white-space: nowrap;
}
.dev-wrapper tbody tr{
    background-color: transparent !important;
    border-bottom: 1px solid var(--pett-border);
}
.dev-wrapper tbody tr:nth-child(even){
    background-color: var(--pett-row-odd) !important;
}
.dev-wrapper tbody tr:nth-child(odd){
    background-color: var(--pett-row-even) !important;
}
.dev-wrapper tbody tr:hover{
    background-color: var(--pett-row-hover) !important;
}
/* Totals row = second-to-last (subtle panel) — only on wallet (has-summary) */
.dev-wrapper.has-summary tbody tr:nth-last-child(2){
    background-color: var(--pett-totals-bg) !important;
    border-top: 1px solid var(--pett-border) !important;
    font-weight: 700;
}
/* "ISOP" / extra-info row = last row (muted saddle/brown tone) — wallet only */
.dev-wrapper.has-summary tbody tr:nth-last-child(1){
    background-color: transparent !important;
    border-top: 1px solid var(--pett-border) !important;
    color: hsl(28, 35%, 40%) !important;
    font-style: italic;
    font-weight: 500;
}
html[data-bs-theme="dark"] .dev-wrapper.has-summary tbody tr:nth-last-child(1){
    color: hsl(32, 45%, 65%) !important;
}
.dev-wrapper tbody td{
    color: inherit !important;
    padding: .1rem .25rem;
    font-size: 1rem;
    white-space: nowrap;
}

/* list-of-payments account-select-form */
.account-select-form button{
    background-color: var(--pett-accent) !important;
    color: #fff !important;
    border: 1px solid var(--pett-accent) !important;
    border-radius: var(--pett-radius-sm) !important;
}
.account-select-form button:hover{
    background-color: var(--pett-accent-hover) !important;
    border-color: var(--pett-accent-hover) !important;
}
.account-select-form select{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border) !important;
}
html[data-bs-theme="dark"] .account-select-form select{
    background-color: var(--pett-surface-2) !important;
}

/* ----------- general_table.css overrides (periodic-payment ONLY) ----------- */
/* Scoped to .general-table-wrapper so purchase-plan-report (uses generic_table.j2,
   no wrapper class) and other .wrapper pages stay neutral. */
.general-table-wrapper > table,
.general-table-wrapper table.dataframe{
    background-color: transparent !important;
    color: var(--bs-body-color);
    border-collapse: collapse;
    font-size: .85rem;
}
.general-table-wrapper table thead{
    background-color: var(--pett-table-header-bg) !important;
    color: var(--pett-table-header-fg) !important;
}
.general-table-wrapper table thead th{
    background-color: transparent !important;
    color: var(--pett-table-header-fg) !important;
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem .5rem;
    border: none;
}
/* keep filled green / empty pink semantics, just refined */
.general-table-wrapper table tbody>tr>td{
    background-color: var(--pett-success-soft) !important;
    border: 1px solid var(--pett-border) !important;
    color: var(--bs-body-color);
    padding: .25rem .4rem;
}
.general-table-wrapper table tbody>tr>td:empty{
    background-color: var(--pett-danger-soft) !important;
}
.general-table-wrapper table tbody>tr>th{
    background-color: var(--pett-surface-2) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border) !important;
    padding: .25rem .5rem;
    font-weight: 500;
    text-align: left;
}

/* ----------- Plain DataFrame wrapper (purchase-plan-report — generic_table.j2) ----------- */
/* Excludes .general-table-wrapper (periodic-payment) which keeps the green/red palette. */
.wrapper:not(.general-table-wrapper) > table.dataframe{
    background-color: transparent !important;
    color: var(--bs-body-color);
    border-collapse: collapse;
    font-size: .85rem;
}
.wrapper:not(.general-table-wrapper) > table.dataframe thead,
.wrapper:not(.general-table-wrapper) > table.dataframe thead th{
    background-color: var(--pett-table-header-bg) !important;
    color: var(--pett-table-header-fg) !important;
    border: none !important;
    font-weight: 600;
    padding: .4rem .6rem !important;
}
.wrapper:not(.general-table-wrapper) > table.dataframe tbody>tr{
    background-color: transparent !important;
    border-bottom: 1px solid var(--pett-border) !important;
}
.wrapper:not(.general-table-wrapper) > table.dataframe tbody>tr:nth-child(even){
    background-color: var(--pett-row-odd) !important;
}
.wrapper:not(.general-table-wrapper) > table.dataframe tbody>tr>td,
.wrapper:not(.general-table-wrapper) > table.dataframe tbody>tr>th{
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
    border: none !important;
    padding: .25rem .6rem !important;
    text-align: right;
}
.wrapper:not(.general-table-wrapper) > table.dataframe tbody>tr>th{
    text-align: left;
    font-weight: 500;
}

/* ----------- expandable_table.css overrides (overview) ----------- */
.wrapper table .tr-cat1,
.wrapper table .tr-cat2,
.wrapper table .tr-cat3{
    background-color: transparent !important;
    color: var(--bs-body-color);
    font-weight: 400;
}
.wrapper table .tr-cat1{
    background-color: var(--pett-row-odd) !important;
    font-weight: 500;
}
.wrapper table .tr-cat2{
    background-color: var(--pett-row-even) !important;
}
.wrapper table .tr-cat3{
    background-color: var(--pett-row-even) !important;
    color: var(--pett-muted);
    font-size: .78rem;
}
.wrapper table .tr-cat1 td,
.wrapper table .tr-cat2 td,
.wrapper table .tr-cat3 td{
    background-color: transparent !important;
    border-color: var(--pett-border) !important;
    border-left: none !important;
    border-right: none !important;
}
/* Totals row stands out */
.wrapper table .tr-totals,
.wrapper table .tr-cat1.tr-totals{
    background-color: var(--pett-totals-bg) !important;
    color: var(--bs-body-color) !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--pett-accent) !important;
}
.wrapper table .tr-totals td{
    background-color: transparent !important;
    border-top: 2px solid var(--pett-accent) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: .5rem .5rem !important;
    font-size: .9rem;
}
/* Kill the weird greenish vertical bar between TTL & AVG (last column border-left) */
.wrapper table th:nth-last-child(1),
.wrapper table td:nth-last-child(1){
    border-left: 1px solid var(--pett-border) !important;
}
/* Ensure AVG column gets a soft separator only */
.wrapper table .tr-cat1 td:nth-last-child(1),
.wrapper table .tr-cat2 td:nth-last-child(1),
.wrapper table .tr-cat3 td:nth-last-child(1){
    border-left: 1px solid var(--pett-border) !important;
}
/* Cleaner overview font (counter the over-bold default) */
#bills, .wrapper > table{
    font-weight: 400;
}
.expand-child-rows{
    color: var(--pett-accent);
    font-size: 1rem !important;
}

/* ----------- purchase-plan.css overrides ----------- */
/* purchase-plan.css sets `table{ background:#fff }` which is white in dark mode.
   Force the table itself to be transparent so themed row stripes show through. */
form table{
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}
form table tbody tr{
    background-color: transparent !important;
}
form table tbody tr:nth-child(even){
    background-color: var(--pett-row-odd) !important;
}
form table tbody tr:nth-child(odd){
    background-color: var(--pett-row-even) !important;
}
/* Fix: Done column too wide, checkbox too small/misaligned */
form table thead th{
    background-color: var(--pett-table-header-bg) !important;
    color: var(--pett-table-header-fg) !important;
    border: none !important;
    padding: .4rem .5rem !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 500;
}
form table thead th a,
form table thead th a:link,
form table thead th a:visited{
    color: var(--pett-table-header-fg) !important;
}
form table tbody tr td{
    border-bottom: 1px solid var(--pett-border) !important;
    color: var(--bs-body-color);
}
/* Done column: 5th td */
form table thead th:nth-child(5),
form table tbody td:nth-child(5){
    width: 5ch !important;
    text-align: center !important;
    vertical-align: middle !important;
}
form table tbody td.checkbox-container{
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: .25rem !important;
}
form table tbody td.checkbox-container .checkbox{
    display: inline-block;
    padding-left: 0;
    margin: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
}
form table tbody td.checkbox-container .checkmark{
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    top: 0; left: 0;
    border: 1px solid var(--pett-accent);
    background-color: var(--pett-surface);
    border-radius: 3px;
}
html[data-bs-theme="dark"] form table tbody td.checkbox-container .checkmark{
    background-color: var(--pett-surface-2);
}
form table tbody td.checkbox-container .checkbox input:checked ~ .checkmark{
    background-color: var(--pett-accent);
}
form table tbody td.checkbox-container .checkbox input:checked ~ .checkmark:after{
    display: block;
    left: 5px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-top-width: 0;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 0;
    transform: rotate(45deg);
}
/* selected row */
form table tbody tr.selected,
form table tbody tr.highlight{
    background-color: var(--pett-row-selected) !important;
}
.editable{
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

/* ----------- add-record YE checkbox (disabled in dark mode) ----------- */
html[data-bs-theme="dark"] .checkbox input:disabled ~ .checkmark{
    background-color: #3a3b42 !important;
    border-color: #4b5563 !important;
    outline: none;
}
html[data-bs-theme="dark"] .checkbox:has(input:disabled){
    color: var(--pett-muted);
}

/* ----------- db_view custom table (table-view.html) ----------- */
.db_table{ background-color: transparent; color: var(--bs-body-color); }
.thead{ background-color: var(--pett-table-header-bg) !important; }
.thcell{
    color: var(--pett-table-header-fg) !important;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .04em;
    font-weight: 500;
}
.tdcell{ border-bottom-color: var(--pett-border) !important; }
.tdrow:nth-child(even){ background-color: var(--pett-row-odd); }
.tdrow:nth-child(odd){  background-color: var(--pett-row-even); }
.tdrow:hover{
    background-color: var(--pett-row-hover) !important;
    filter: none !important;
}
.tdrow.row-selected{
    background-color: var(--pett-row-selected) !important;
    filter: none !important;
    color: var(--bs-body-color) !important;
}
.db-viewer-toolbar{
    background-color: var(--pett-surface-2) !important;
    border-bottom: 1px solid var(--pett-border);
}
.filter-input{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--pett-border) !important;
}
html[data-bs-theme="dark"] .filter-input{ background-color: var(--pett-surface-2) !important; }
.filter-clear{ color: var(--pett-muted); }
.filter-clear:hover{ color: var(--bs-body-color); }

/* db-view.css legacy overrides */
.db_table_view{ color: var(--bs-body-color); }
.db_table_view .table-data-row:nth-child(even){ background-color: var(--pett-row-even) !important; }
.db_table_view .table-data-row:nth-child(odd){  background-color: var(--pett-row-odd) !important; }
.db_table_view .table-data-row:hover{
    background-color: var(--pett-row-hover) !important;
    color: var(--bs-body-color) !important;
}
.db_table_view .table-header-cell{
    background-color: var(--pett-table-header-bg) !important;
    color: var(--pett-table-header-fg) !important;
    border-right-color: var(--pett-border) !important;
}
.db_table_view .row-selected{
    background-color: var(--pett-row-selected) !important;
    color: var(--bs-body-color) !important;
}

/* ----------- Modal (table-view.html custom modal) ----------- */
.modal{ background-color: rgba(0,0,0,.55); }
.modal-content{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border) !important;
    border-radius: var(--pett-radius);
    box-shadow: var(--pett-shadow-md);
}
.form-line > input,
.form-line > select{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border) !important;
    border-radius: var(--pett-radius-sm);
}
html[data-bs-theme="dark"] .form-line > input,
html[data-bs-theme="dark"] .form-line > select{
    background-color: var(--pett-surface-2) !important;
}
.form-line > input:read-only{
    background-color: var(--pett-surface-2) !important;
    color: var(--pett-muted) !important;
}
.lockable-field input{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border) !important;
}
html[data-bs-theme="dark"] .lockable-field input{
    background-color: var(--pett-surface-2) !important;
}

/* ----------- list-of-payments: checkbox column + done row state ----------- */
.lop-table .lop-check-col{
    width: 2.5rem;
    text-align: center !important;
    padding: 0 .5rem !important;
}
.lop-table .lop-check{
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--pett-accent);
    margin: 0;
    vertical-align: middle;
}
.lop-table tbody tr.lop-row-done td{
    color: var(--pett-muted) !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: .55;
}
.lop-table tbody tr.lop-row-done .lop-check-col{
    text-decoration: none;
    opacity: 1;
}

/* ----------- view-bill-wrapper (continue checkbox -> AJAX _single_record.html) ----------- */
/* AJAX html ships with inline <style> using whitesmoke / blue header. Force consistency
   with the form-wrapper above it. */
.view-bill-wrapper{
    background-color: var(--pett-surface) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius);
    box-shadow: var(--pett-shadow-sm);
    /* padding: .75rem 1rem !important; */
}
.view-bill-wrapper .table{
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
    margin: 0;
}
.view-bill-wrapper .header-row{
    background-color: var(--pett-table-header-bg) !important;
    color: var(--pett-table-header-fg) !important;
    filter: brightness(.85);
}
.view-bill-wrapper .header-cell{
    color: var(--pett-table-header-fg) !important;
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .5rem !important;
}
.view-bill-wrapper .data-row{
    background-color: var(--pett-surface-2) !important;
    border-bottom: 1px solid var(--pett-border) !important;
}
.view-bill-wrapper .data-row:nth-child(even){
    background-color: var(--pett-surface-2) !important;
}
.view-bill-wrapper .data-cell{
    color: var(--bs-body-color) !important;
    padding: .25rem .5rem !important;
}
.view-bill-wrapper .total-row{
    background-color: var(--pett-totals-bg) !important;
    color: var(--bs-body-color) !important;
    border-top: 1px solid var(--pett-accent) !important;
}
.view-bill-wrapper .total-row td{ padding: .35rem .5rem !important; }

/* ----------- Treeview pages (select-categories, select-accounts) ----------- */
/* checkbox.css globally sets `.checkbox-container { justify-content: flex-end }`
   which pushes content to the right inside <li>. On treeview we want it left so
   the ├ / └ glyphs (li::before) align with the row content. */
.tree_main .checkbox-container,
.main_ul .checkbox-container,
.sub_ul .checkbox-container,
.inner_ul .checkbox-container{
    justify-content: flex-start !important;
    align-items: center;
}
/* Keep the connector glyphs aligned with their checkbox row */
.inner_ul li{
    position: relative;
    line-height: var(--checkbox-size, 16px);
}
.inner_ul li::before{
    line-height: 1;
}

/* Theme-coloured tree connectors (was hard-coded var(--color4) inline) */
.inner_ul li::before,
.inner_ul li:last-child::before{
    color: var(--pett-accent) !important;
}


/* ----------- Tiles (home page) ----------- */
.tile{
    background-color: var(--pett-surface) !important;
    border: 1px solid var(--pett-border);
    box-shadow: var(--pett-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
    color: var(--bs-body-color);
}
.tile:hover{
    box-shadow: var(--pett-shadow-md);
    transform: translateY(-2px);
}

/* ----------- Pagination ----------- */
.pagination .page-link{
    background-color: transparent;
    color: var(--bs-body-color);
    border-color: var(--pett-border);
}
.pagination .page-item.active .page-link{
    background-color: var(--pett-accent);
    border-color: var(--pett-accent);
    color: #fff;
}
.pagination .page-link:hover{
    background-color: var(--pett-accent-soft);
    color: var(--pett-accent);
}

/* ----------- Alerts ----------- */
.alert{
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius);
    box-shadow: var(--pett-shadow-sm);
}

/* ----------- Login ----------- */
.form-signin{
    padding: 1.75rem;
    background-color: var(--pett-surface);
    border: 1px solid var(--pett-border);
    border-radius: var(--pett-radius);
    box-shadow: var(--pett-shadow-md);
    max-width: 360px;
    margin: 3rem auto;
}
.remember > input{
    width: 1rem;
    height: 1rem;
}
/* .form-signin input{ width: 100%; margin-bottom: .5rem; } */
.form-signin .btn-grad,
.form-signin button{ width: 100%; }

/* ----------- jQuery-UI compatibility ----------- */
html[data-bs-theme="dark"] .ui-widget.ui-widget-content{
    background: var(--pett-surface);
    color: var(--bs-body-color);
    border-color: var(--pett-border);
}
html[data-bs-theme="dark"] .ui-widget-header{
    background: var(--pett-surface-2);
    color: var(--bs-body-color);
    border-color: var(--pett-border);
}
html[data-bs-theme="dark"] .ui-state-default,
html[data-bs-theme="dark"] .ui-widget-content .ui-state-default{
    background: var(--pett-surface-2);
    color: var(--bs-body-color);
    border-color: var(--pett-border);
}
html[data-bs-theme="dark"] .ui-state-active,
html[data-bs-theme="dark"] .ui-widget-content .ui-state-active{
    background: var(--pett-accent);
    color: #fff;
    border-color: var(--pett-accent);
}

/* ----------- Misc ----------- */
/* Bill index spinners in dark */
html[data-bs-theme="dark"] a.spinner{
    background-color: var(--pett-surface-2);
    color: var(--bs-body-color);
    border-color: var(--pett-border);
}

/* Tag chips */
html[data-bs-theme="dark"] .tag{
    background-color: var(--pett-accent-soft);
    color: var(--bs-body-color);
}

/* Theme toggle icon visibility (scoped to root only to ignore navbar's local theme attr) */
html[data-bs-theme="dark"] #theme-toggle .bi-sun-fill{ display: inline-block; }
html[data-bs-theme="dark"] #theme-toggle .bi-moon-stars-fill{ display: none; }
html[data-bs-theme="light"] #theme-toggle .bi-sun-fill{ display: none; }
html[data-bs-theme="light"] #theme-toggle .bi-moon-stars-fill{ display: inline-block; }