/* =====================================================================
   aha.legal theme — Bootstrap 5.3 override
   Load AFTER bootstrap.min.css. Brand = logo navy #0C447C (hue 210°, = step 600).
   Dark mode selector in this app: html[data-bs-theme="dark"] (set by base.html).
   ===================================================================== */

:root,
[data-bs-theme="light"] {
  /* ---- Brand scale (logo = 600) ---------------------------------- */
  --ah-50:  #EFF5FA;
  --ah-100: #DBE8F5;
  --ah-200: #B4CFE9;
  --ah-300: #81ADDA;
  --ah-400: #3B85CE;
  --ah-500: #1963AE;
  --ah-600: #0C447C;   /* logo */
  --ah-700: #0A3866;
  --ah-800: #092B4E;
  --ah-900: #081F36;

  /* ---- Cool neutrals --------------------------------------------- */
  --ah-ink:     #0F172A;   /* near-black body text */
  --ah-text-2:  #4F5B6C;
  --ah-text-3:  #6B7686;   /* AA (4.6:1) on white */
  --ah-border:  #E1E6ED;
  --ah-border-strong: #CBD3DD;   /* inputs, table header rule */
  --ah-surface: #FFFFFF;
  --ah-page:    #F1F4F8;   /* a touch deeper so white cards separate */
  --ah-hover:   #EEF2F7;

  /* ---- Status: rationed ------------------------------------------ */
  /* Clearer, less pastel status hues (still AA on white for text) */
  --ah-danger:  #C9302C;
  --ah-warning: #C77C02;
  --ah-success: #1E8A56;
  --ah-info:    #1F6FD1;

  /* ---- Map onto Bootstrap --------------------------------------- */
  --bs-primary: var(--ah-600);           --bs-primary-rgb: 12, 68, 124;
  --bs-primary-text-emphasis: var(--ah-800);
  --bs-primary-bg-subtle: #E3EEF9;
  --bs-primary-border-subtle: #A9C8EA;

  --bs-secondary: var(--ah-text-2);      --bs-secondary-rgb: 79, 91, 108;
  --bs-secondary-text-emphasis: #333E4E;
  --bs-secondary-bg-subtle: #E8ECF2;
  --bs-secondary-border-subtle: var(--ah-border-strong);

  --bs-info: var(--ah-info);             --bs-info-rgb: 31, 111, 209;
  --bs-info-text-emphasis: #0F4C99;
  --bs-info-bg-subtle: #E1EDFC;
  --bs-info-border-subtle: #A6C8F3;

  --bs-danger: var(--ah-danger);         --bs-danger-rgb: 201, 48, 44;
  --bs-danger-text-emphasis: #9B1F1B;
  --bs-danger-bg-subtle: #FCE3E2;
  --bs-danger-border-subtle: #F2B3B0;

  --bs-warning: var(--ah-warning);       --bs-warning-rgb: 199, 124, 2;
  --bs-warning-text-emphasis: #7C4A00;
  --bs-warning-bg-subtle: #FDEFD5;
  --bs-warning-border-subtle: #F2CF8C;

  --bs-success: var(--ah-success);       --bs-success-rgb: 30, 138, 86;
  --bs-success-text-emphasis: #12603A;
  --bs-success-bg-subtle: #DCF3E6;
  --bs-success-border-subtle: #A5DBBE;

  --bs-body-color: var(--ah-ink);        --bs-body-color-rgb: 15, 23, 42;
  --bs-emphasis-color: var(--ah-ink);
  --bs-secondary-color: var(--ah-text-2);
  --bs-tertiary-color: var(--ah-text-3);
  --bs-body-bg: var(--ah-page);
  --bs-secondary-bg: var(--ah-hover);
  --bs-tertiary-bg: #F9FAFC;             --bs-tertiary-bg-rgb: 249, 250, 252;
  --bs-secondary-bg-rgb: 238, 242, 247;
  --bs-border-color: var(--ah-border);
  --bs-border-color-translucent: rgba(26, 36, 51, .10);

  --bs-link-color: var(--ah-600);        --bs-link-color-rgb: 12, 68, 124;
  --bs-link-hover-color: var(--ah-800);  --bs-link-hover-color-rgb: 9, 43, 78;
  --bs-focus-ring-color: rgba(12, 68, 124, .25);
}

/* ---- Components that cache their own colours in 5.3 -------------- */
.btn-primary {
  --bs-btn-bg: var(--ah-600);            --bs-btn-border-color: var(--ah-600);
  --bs-btn-hover-bg: var(--ah-700);      --bs-btn-hover-border-color: var(--ah-700);
  --bs-btn-active-bg: var(--ah-800);     --bs-btn-active-border-color: var(--ah-800);
  --bs-btn-disabled-bg: var(--ah-300);   --bs-btn-disabled-border-color: var(--ah-300);
  --bs-btn-focus-shadow-rgb: 12, 68, 124;
}
.btn-outline-primary {
  --bs-btn-color: var(--ah-600);         --bs-btn-border-color: var(--ah-200);
  --bs-btn-hover-bg: var(--ah-50);       --bs-btn-hover-color: var(--ah-700);
  --bs-btn-hover-border-color: var(--ah-300);
  --bs-btn-active-bg: var(--ah-100);     --bs-btn-active-color: var(--ah-800);
}
.btn-danger  { --bs-btn-bg: var(--ah-danger);  --bs-btn-border-color: var(--ah-danger);
               --bs-btn-hover-bg: #A82522;     --bs-btn-hover-border-color: #A82522; }
.btn-success { --bs-btn-bg: var(--ah-success); --bs-btn-border-color: var(--ah-success);
               --bs-btn-hover-bg: #177046;     --bs-btn-hover-border-color: #177046; }
.btn-warning { --bs-btn-bg: var(--ah-warning); --bs-btn-border-color: var(--ah-warning);
               --bs-btn-color: #fff;           --bs-btn-hover-color: #fff;
               --bs-btn-hover-bg: #A66700;     --bs-btn-hover-border-color: #A66700; }

.dropdown-menu { --bs-dropdown-link-active-bg: var(--ah-50);
                 --bs-dropdown-link-active-color: var(--ah-800);
                 --bs-dropdown-link-hover-bg: var(--ah-hover); }
.nav-pills     { --bs-nav-pills-link-active-bg: var(--ah-600); }
.list-group    { --bs-list-group-active-bg: var(--ah-50);
                 --bs-list-group-active-color: var(--ah-800);
                 --bs-list-group-active-border-color: var(--ah-200); }
.pagination    { --bs-pagination-active-bg: var(--ah-600);
                 --bs-pagination-active-border-color: var(--ah-600); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ah-600); }
.form-check-input:checked { background-color: var(--ah-600); border-color: var(--ah-600); }
.form-control:focus, .form-select:focus { border-color: var(--ah-300); }

/* ---- Badges: subtle by default ----------------------------------- */
.badge-soft-neutral { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }
.badge-soft-brand   { background: var(--bs-primary-bg-subtle);   color: var(--bs-primary-text-emphasis); }
.badge-soft-warning { background: var(--bs-warning-bg-subtle);   color: var(--bs-warning-text-emphasis); }
.badge-soft-success { background: var(--bs-success-bg-subtle);   color: var(--bs-success-text-emphasis); }

/* ---- Avatar initials: clear but never status-coloured ------------ */
.avatar-1 { background: #2F6DB5; } /* blue   */
.avatar-2 { background: #12858C; } /* teal   */
.avatar-3 { background: #6D4FC2; } /* violet */
.avatar-4 { background: #B26B12; } /* amber  */
.avatar-5 { background: #3E8B47; } /* green  */
.avatar-6 { background: #556275; } /* slate  */

/* =====================================================================
   DARK MODE — html[data-bs-theme="dark"] (the app's real mechanism)
   ===================================================================== */
[data-bs-theme="dark"] {
  --ah-ink:     #E3E8EF;
  --ah-text-2:  #A3AEBD;
  --ah-text-3:  #6F7B8C;
  --ah-border:  #263243;
  --ah-surface: #172030;
  --ah-page:    #0F1620;
  --ah-hover:   #1D2838;

  --ah-danger:  #F06A66;
  --ah-warning: #F0A73A;
  --ah-success: #45C486;
  --ah-info:    #5EA2F5;

  --bs-body-color: var(--ah-ink);        --bs-body-color-rgb: 227, 232, 239;
  --bs-emphasis-color: #F4F7FA;
  --bs-secondary-color: var(--ah-text-2);
  --bs-tertiary-color: var(--ah-text-3);
  --bs-body-bg: var(--ah-page);          --bs-body-bg-rgb: 15, 22, 32;
  --bs-secondary-bg: var(--ah-hover);
  --bs-tertiary-bg: #131B27;             --bs-tertiary-bg-rgb: 19, 27, 39;
  --bs-secondary-bg-rgb: 29, 40, 56;
  --ah-border-strong: #34435A;
  --bs-border-color: var(--ah-border);
  --bs-border-color-translucent: rgba(227, 232, 239, .10);

  --bs-primary: #74A8DC;                 --bs-primary-rgb: 116, 168, 220;
  --bs-primary-text-emphasis: #B4CFE9;
  --bs-primary-bg-subtle: #14293D;
  --bs-primary-border-subtle: #13406C;

  --bs-secondary: var(--ah-text-2);      --bs-secondary-rgb: 163, 174, 189;
  --bs-secondary-text-emphasis: #CBD3DE;
  --bs-secondary-bg-subtle: #1D2838;
  --bs-secondary-border-subtle: #2C394C;

  --bs-info: var(--ah-info);             --bs-info-rgb: 94, 162, 245;
  --bs-info-text-emphasis: #B5D3FA;
  --bs-info-bg-subtle: #132C4A;
  --bs-info-border-subtle: #1E4F8C;

  --bs-danger: var(--ah-danger);         --bs-danger-rgb: 240, 106, 102;
  --bs-danger-text-emphasis: #F8B8B6;
  --bs-danger-bg-subtle: #421A1C;
  --bs-danger-border-subtle: #7A2B2D;

  --bs-warning: var(--ah-warning);       --bs-warning-rgb: 240, 167, 58;
  --bs-warning-text-emphasis: #F6D29A;
  --bs-warning-bg-subtle: #3D2C10;
  --bs-warning-border-subtle: #7A5419;

  --bs-success: var(--ah-success);       --bs-success-rgb: 69, 196, 134;
  --bs-success-text-emphasis: #A6E6C6;
  --bs-success-bg-subtle: #123527;
  --bs-success-border-subtle: #22603F;

  --bs-link-color: #90B8DF;              --bs-link-color-rgb: 144, 184, 223;
  --bs-link-hover-color: #B8D1EA;        --bs-link-hover-color-rgb: 184, 209, 234;
  --bs-focus-ring-color: rgba(116, 168, 220, .35);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .offcanvas { --bs-card-bg: var(--ah-surface);
  --bs-modal-bg: var(--ah-surface); --bs-dropdown-bg: var(--ah-surface);
  --bs-offcanvas-bg: var(--ah-surface); }

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #2466A8;           --bs-btn-border-color: #2466A8;
  --bs-btn-hover-bg: #2F7AC6;     --bs-btn-hover-border-color: #2F7AC6;
  --bs-btn-active-bg: #5194D6;    --bs-btn-active-border-color: #5194D6;
  --bs-btn-disabled-bg: #194066;  --bs-btn-disabled-border-color: #194066;
  --bs-btn-focus-shadow-rgb: 116, 168, 220;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #90B8DF;        --bs-btn-border-color: #13406C;
  --bs-btn-hover-bg: #14293D;     --bs-btn-hover-color: #B8D1EA;
  --bs-btn-hover-border-color: #2466A8;
  --bs-btn-active-bg: #143352;    --bs-btn-active-color: #D9E6F2;
}
[data-bs-theme="dark"] .btn-danger  { --bs-btn-bg: #B93A3A; --bs-btn-border-color: #B93A3A;
                                      --bs-btn-hover-bg: #CC4E4E; --bs-btn-hover-border-color: #CC4E4E; }
[data-bs-theme="dark"] .btn-success { --bs-btn-bg: #2E7D5B; --bs-btn-border-color: #2E7D5B;
                                      --bs-btn-hover-bg: #3A9470; --bs-btn-hover-border-color: #3A9470; }
[data-bs-theme="dark"] .btn-warning { --bs-btn-bg: #B7791F; --bs-btn-border-color: #B7791F;
                                      --bs-btn-hover-bg: #C98A2E; --bs-btn-hover-border-color: #C98A2E; }

[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-link-active-bg: #14293D;
                                        --bs-dropdown-link-active-color: #D9E6F2;
                                        --bs-dropdown-link-hover-bg: var(--ah-hover); }
[data-bs-theme="dark"] .nav-pills     { --bs-nav-pills-link-active-bg: #2466A8; }
[data-bs-theme="dark"] .list-group    { --bs-list-group-active-bg: #14293D;
                                        --bs-list-group-active-color: #D9E6F2;
                                        --bs-list-group-active-border-color: #13406C; }
[data-bs-theme="dark"] .pagination    { --bs-pagination-active-bg: #2466A8;
                                        --bs-pagination-active-border-color: #2466A8; }
[data-bs-theme="dark"] .progress,
[data-bs-theme="dark"] .progress-stacked { --bs-progress-bar-bg: #3B85CE; }
[data-bs-theme="dark"] .form-check-input:checked { background-color: #2466A8; border-color: #2466A8; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { border-color: #2466A8; }

[data-bs-theme="dark"] .badge-soft-neutral { background: #1D2838; color: #CBD3DE; }
[data-bs-theme="dark"] .badge-soft-brand   { background: #14293D; color: #B4CFE9; }
[data-bs-theme="dark"] .badge-soft-warning { background: #352A17; color: #EDCC96; }
[data-bs-theme="dark"] .badge-soft-success { background: #16302A; color: #A9DBC2; }

[data-bs-theme="dark"] .avatar-1 { background: #4785C2; }
[data-bs-theme="dark"] .avatar-2 { background: #3A8C92; }
[data-bs-theme="dark"] .avatar-3 { background: #7D6CA6; }
[data-bs-theme="dark"] .avatar-4 { background: #A9845A; }
[data-bs-theme="dark"] .avatar-5 { background: #6F906B; }
[data-bs-theme="dark"] .avatar-6 { background: #6B7789; }

/* =====================================================================
   COMPAT LAYER - legacy utility classes remapped to tokens (both modes).
   Classes stay in markup (some are toggled by JS); only their colour changes.
   ===================================================================== */
.bg-white  { background-color: var(--ah-surface) !important; }
.bg-light, .table-light, .btn-light, .list-group-item-light { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); }
.bg-light  { background-color: var(--bs-tertiary-bg) !important; }
html[data-bs-theme="dark"] tr.table-warning > *,
html[data-bs-theme="dark"] .table-warning > *,
html[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: rgba(217, 160, 80, 0.15) !important;
  --bs-table-accent-bg: rgba(217, 160, 80, 0.15) !important;
  --bs-table-color: #EDCC96 !important;
  --bs-table-border-color: #6A4E22 !important;
  background-color: rgba(217, 160, 80, 0.15) !important;
  color: #EDCC96 !important;
}
html[data-bs-theme="dark"] tr.table-danger > *,
html[data-bs-theme="dark"] .table-danger > *,
html[data-bs-theme="dark"] .table-danger {
  --bs-table-bg: rgba(224, 114, 114, 0.15) !important;
  --bs-table-accent-bg: rgba(224, 114, 114, 0.15) !important;
  --bs-table-color: #F2B3B3 !important;
  --bs-table-border-color: #6B2D30 !important;
  background-color: rgba(224, 114, 114, 0.15) !important;
  color: #F2B3B3 !important;
}
html[data-bs-theme="dark"] tr.table-success > *,
html[data-bs-theme="dark"] .table-success > *,
html[data-bs-theme="dark"] .table-success {
  --bs-table-bg: rgba(95, 176, 138, 0.15) !important;
  --bs-table-accent-bg: rgba(95, 176, 138, 0.15) !important;
  --bs-table-color: #A9DBC2 !important;
  --bs-table-border-color: #285443 !important;
  background-color: rgba(95, 176, 138, 0.15) !important;
  color: #A9DBC2 !important;
}
html[data-bs-theme="dark"] tr.table-info > *,
html[data-bs-theme="dark"] .table-info > *,
html[data-bs-theme="dark"] .table-info,
html[data-bs-theme="dark"] tr.table-primary > *,
html[data-bs-theme="dark"] .table-primary > *,
html[data-bs-theme="dark"] .table-primary {
  --bs-table-bg: rgba(116, 168, 220, 0.15) !important;
  --bs-table-accent-bg: rgba(116, 168, 220, 0.15) !important;
  --bs-table-color: #B4CFE9 !important;
  --bs-table-border-color: #13406C !important;
  background-color: rgba(116, 168, 220, 0.15) !important;
  color: #B4CFE9 !important;
}
html[data-bs-theme="dark"] tr.table-secondary > *,
html[data-bs-theme="dark"] .table-secondary > *,
html[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: rgba(163, 174, 189, 0.15) !important;
  --bs-table-accent-bg: rgba(163, 174, 189, 0.15) !important;
  --bs-table-color: #CBD3DE !important;
  --bs-table-border-color: #2C394C !important;
  background-color: rgba(163, 174, 189, 0.15) !important;
  color: #CBD3DE !important;
}
.text-dark, .text-black { color: var(--bs-body-color) !important; }
.btn-light { --bs-btn-bg: var(--ah-surface); --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color);
             --bs-btn-hover-bg: var(--ah-hover); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color);
             --bs-btn-active-bg: var(--ah-hover); --bs-btn-active-color: var(--bs-body-color); }
.btn-dark  { --bs-btn-bg: var(--ah-800); --bs-btn-border-color: var(--ah-800); --bs-btn-hover-bg: var(--ah-900); --bs-btn-hover-border-color: var(--ah-900); }
.border-light { border-color: var(--bs-border-color) !important; }
/* Accessible contrast on solid status badges and fills:
   Warning (yellow/amber) ALWAYS requires dark text (#1a1208) in both modes (white on yellow is unreadable).
   Success, Danger, Primary, Dark ALWAYS require crisp white text (#fff) in both modes. */
.bg-warning, .btn-warning, .badge.bg-warning,
.bg-warning.text-dark, .btn-warning.text-dark, .badge.bg-warning.text-dark { color: #1a1208 !important; }
[data-bs-theme="dark"] .bg-warning,
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .btn-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-warning.text-dark { background-color: #D9A050 !important; color: #1a1208 !important; }

.bg-success, .btn-success, .badge.bg-success,
.bg-danger, .btn-danger, .badge.bg-danger,
.bg-primary, .btn-primary, .badge.bg-primary,
.bg-dark, .btn-dark, .badge.bg-dark { color: #ffffff !important; }
[data-bs-theme="dark"] .bg-success,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .bg-danger,
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .badge.bg-danger { color: #ffffff !important; }
/* purple/indigo helper classes are retired (neutral / brand) */
.text-purple, .text-indigo { color: var(--bs-primary-text-emphasis); }
/* scrollbars, code, selects follow tokens */
::-webkit-scrollbar-thumb { background: var(--bs-border-color); }
[data-bs-theme="dark"] pre, [data-bs-theme="dark"] code { color: var(--bs-body-color); }
[data-bs-theme="dark"] pre { background: var(--bs-tertiary-bg); }

/* Assignee initials: deterministic muted palette (see .avatar-N); used via var(--ah-avatar-N) */
:root { --ah-avatar-1:#366BA1; --ah-avatar-2:#2F7A80; --ah-avatar-3:#6B5A93; --ah-avatar-4:#9A7547; --ah-avatar-5:#5F7F5B; --ah-avatar-6:#5B6778; }
[data-bs-theme="dark"] { --ah-avatar-1:#4785C2; --ah-avatar-2:#3A8C92; --ah-avatar-3:#7D6CA6; --ah-avatar-4:#A9845A; --ah-avatar-5:#6F906B; --ah-avatar-6:#6B7789; }

/* Sidebar/nav icons are neutral (text-secondary); active item's icon takes the brand colour */
#sidebar .nav-link.active i, #sidebar .nav-link.active i.text-secondary { color: var(--bs-primary) !important; }
[data-bs-theme="dark"] #sidebar .nav-link.active i.text-secondary { color: var(--bs-primary) !important; }

/* ---- Third-party widgets: Select2 (+ bootstrap-5 theme), toasts, tooltips/popovers (both modes) ---- */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--bs-body-color); }
.select2-dropdown, .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--ah-surface); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-container--default .select2-results__option { color: var(--bs-body-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--selected,
.select2-container--default .select2-results__option--selected { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text-emphasis); }
.select2-search--dropdown .select2-search__field, .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--ah-300); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

/* Select2 Optgroups & Project hierarchy */
.select2-results__group {
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    color: var(--bs-emphasis-color, var(--bs-body-color)) !important;
    padding: 8px 12px 3px 12px !important;
    letter-spacing: 0.01em;
}
html[data-bs-theme="dark"] .select2-results__group,
[data-bs-theme="dark"] .select2-results__group {
    color: #f1f5f9 !important;
}

/* Indent projects inside client optgroups */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options--nested .select2-results__option,
.select2-container--default .select2-results__options--nested .select2-results__option,
.select2-results__options--nested .select2-results__option {
    padding-left: 1.75rem !important;
    font-weight: 400 !important;
}

/* Native select optgroup styling */
optgroup {
    font-weight: 700 !important;
    font-style: normal !important;
    color: var(--bs-emphasis-color, inherit) !important;
}
optgroup option {
    font-weight: 400 !important;
    padding-left: 1.25rem !important;
}
.toast { --bs-toast-bg: var(--ah-surface); --bs-toast-color: var(--bs-body-color); --bs-toast-border-color: var(--bs-border-color); }
.tooltip { --bs-tooltip-bg: var(--ah-ink); --bs-tooltip-color: var(--ah-surface); }
.popover { --bs-popover-bg: var(--ah-surface); --bs-popover-border-color: var(--bs-border-color); --bs-popover-header-bg: var(--bs-tertiary-bg); --bs-popover-body-color: var(--bs-body-color); }
input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: light; }
[data-bs-theme="dark"] input[type="date"], [data-bs-theme="dark"] input[type="time"], [data-bs-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bs-danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--bs-success); }
/* Solid brand fills (white text on top): dark mode needs a deeper blue than --bs-primary (which is a light text/link colour there) */
:root, [data-bs-theme="light"] { --ah-primary-fill: var(--ah-600); --ah-primary-fill-hover: var(--ah-700); }
[data-bs-theme="dark"] { --ah-primary-fill: #2466A8; --ah-primary-fill-hover: #2F7AC6; }
.bg-primary, .text-bg-primary, .badge.bg-primary { background-color: var(--ah-primary-fill) !important; color: #fff !important; }
.bg-info, .text-bg-info, .btn-info { --bs-btn-bg: var(--ah-primary-fill); --bs-btn-border-color: var(--ah-primary-fill); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--ah-primary-fill-hover); --bs-btn-hover-border-color: var(--ah-primary-fill-hover); --bs-btn-hover-color: #fff; }
.bg-info, .text-bg-info { background-color: var(--ah-primary-fill) !important; color: #fff !important; }

/* ---- Responsive Capsule Tabs (.nav-tabs-capsule) ---- */
.nav-tabs-capsule {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 0.45rem !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.nav-tabs-capsule .nav-item {
  margin: 0 !important;
  flex-shrink: 0;
}
.nav-tabs-capsule .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding: 0.38rem 0.72rem !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-secondary-color) !important;
  background-color: var(--ah-surface) !important;
  transition: all 0.15s ease-in-out !important;
  text-decoration: none;
}
.nav-tabs-capsule .nav-link:hover:not(.active) {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)) !important;
}
.nav-tabs-capsule .nav-link.active,
.nav-tabs-capsule .nav-link[aria-selected="true"] {
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  background-color: #eff6ff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.08);
}
.nav-tabs-capsule .nav-link .badge {
  font-size: 0.75rem;
  vertical-align: middle;
}

[data-bs-theme="dark"] .nav-tabs-capsule .nav-link {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .nav-tabs-capsule .nav-link:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .nav-tabs-capsule .nav-link.active,
[data-bs-theme="dark"] .nav-tabs-capsule .nav-link[aria-selected="true"] {
  color: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* =====================================================================
   LIGHT MODE: crisp white surfaces
   Bootstrap 5.3 paints components with --bs-body-bg, which here is the
   page grey. Dark mode already remaps them (see above); this does the
   same for light mode so every card/modal/dropdown/input is pure white.
   ===================================================================== */
html:not([data-bs-theme="dark"]) :is(.card, .modal, .dropdown-menu, .offcanvas, .offcanvas-md,
     .list-group, .accordion, .popover, .toast, .table) {
  --bs-card-bg: #fff;          --bs-card-cap-bg: #fff;
  --bs-modal-bg: #fff;         --bs-dropdown-bg: #fff;
  --bs-offcanvas-bg: #fff;     --bs-list-group-bg: #fff;
  --bs-accordion-bg: #fff;     --bs-popover-bg: #fff;
  --bs-toast-bg: #fff;         --bs-table-bg: transparent;
}

/* ALL cards white: nested cards, bg-light / bg-body-tertiary cards and
   inline tinted gradients. Intentionally solid brand/status cards are kept. */
html:not([data-bs-theme="dark"]) .card:not(.page-head):not([class*="text-bg-"]):not(.bg-primary):not(.bg-dark):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-danger-subtle):not(.bg-warning-subtle):not(.bg-success-subtle),
html:not([data-bs-theme="dark"]) :is(.glass-card, .focus-card, .fin-metric-card, .modal-content):not([class*="text-bg-"]):not(.bg-primary):not(.bg-dark) {
  background-color: #fff !important;
  background-image: none !important;
}
html:not([data-bs-theme="dark"]) .card-header:not([class*="text-bg-"]):not(.bg-primary):not(.bg-dark):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info),
html:not([data-bs-theme="dark"]) .card-footer:not([class*="text-bg-"]):not(.bg-primary):not(.bg-dark) {
  background-color: #fff !important;
  background-image: none !important;
}
html:not([data-bs-theme="dark"]) .card-header { border-bottom: 1px solid var(--ah-border); }
html:not([data-bs-theme="dark"]) .card-footer { border-top: 1px solid var(--ah-border); }

/* Cards inside cards: flat, bordered (no double shadow) */
html:not([data-bs-theme="dark"]) .card .card,
html:not([data-bs-theme="dark"]) .card .glass-card {
  box-shadow: none !important;
  border: 1px solid var(--ah-border);
}

/* Inputs: white with a clearly visible border (were page-grey) */
html:not([data-bs-theme="dark"]) :is(.form-control, .form-select):not(:disabled):not([readonly]):not(.bg-transparent):not(.border-0),
html:not([data-bs-theme="dark"]) .select2-container--bootstrap-5 .select2-selection,
html:not([data-bs-theme="dark"]) .select2-container--default .select2-selection--single,
html:not([data-bs-theme="dark"]) .select2-container--default .select2-selection--multiple,
html:not([data-bs-theme="dark"]) .select2-search--dropdown .select2-search__field {
  background-color: #fff;
  border-color: var(--ah-border-strong);
}
html:not([data-bs-theme="dark"]) .input-group-text {
  background-color: #fff;
  border-color: var(--ah-border-strong);
}

/* Table header: white with a stronger bottom rule instead of a grey band */
html:not([data-bs-theme="dark"]) .table thead th,
html:not([data-bs-theme="dark"]) .table > thead > tr > th,
html:not([data-bs-theme="dark"]) .table thead.table-light th,
html:not([data-bs-theme="dark"]) .table thead.bg-light th {
  background-color: #fff !important;
  border-bottom: 1px solid var(--ah-border-strong) !important;
}

/* Neutral inline code (IČO/DIČ etc. rendered pink-red = looked like errors) */
html:not([data-bs-theme="dark"]) code:not(.brand-font) {
  color: var(--ah-ink);
  background: #F1F4F8;
  padding: .05rem .3rem;
  border-radius: .25rem;
  font-size: .85em;
}
[data-bs-theme="dark"] code:not(.brand-font) {
  color: var(--bs-body-color);
}

/* =====================================================================
   EMPHASIS / DE-CROWDING (both modes)
   ===================================================================== */

/* Uppercase micro-labels inside cards -> calm sentence-case sub-headers.
   Table headers, badges, buttons and dropdown headers keep their style. */
.card :is(h6, span, div, small, p, label).text-uppercase:not(.badge):not(.btn):not(.dropdown-header):not(th) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
}

/* KPI cards: "border-start border-4 border-primary" painted a heavy 4px box
   on all sides (glass-card sets a full border). Keep only a thin left accent. */
.card.border-start:is(.border-3, .border-4, .border-5) {
  border-width: 1px !important;
  border-left-width: 3px !important;
  border-top-color: var(--bs-border-color) !important;
  border-right-color: var(--bs-border-color) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

/* Slightly roomier, consistent card padding */
.card {
  --bs-card-spacer-y: 1.125rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-padding-y: .75rem;
  --bs-card-cap-padding-x: 1.25rem;
}

/* Page header (title + subtitle + primary action) sits on the page, not in a card */
.card.page-head {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.card.page-head > .card-body { padding: 0 0 .25rem 0 !important; }
.card.page-head h4 { font-size: 1.5rem; }

/* Top-bar title is hidden while the in-page header is visible (see base.html) */
body.page-head-visible #topbar-page-header { opacity: 0; pointer-events: none; }
#topbar-page-header { transition: opacity .15s ease; }

/* Split primary buttons: thin divider between action and caret */
.btn-group > .btn-primary.dropdown-toggle-split { border-left: 1px solid rgba(255, 255, 255, .35) !important; }

/* =====================================================================
   READABILITY LAYER (lessons from strnad.legal timesheets)
   R1 content text ~15px, normal tracking    R2 metadata = text, not pills
   R3 one visible action, rest on hover       R4 quiet rows, state = left edge
   R5 groups separated by space, not chrome
   ===================================================================== */
:root {
  --ah-text-content: 13px; /* Clean 13px body & row text (balanced between 11.4px and 14px) */
  --ah-text-table:   13px;
  --ah-text-meta:    13px;
  --ah-row-min-h:    40px;
  --ah-row-sep: color-mix(in srgb, var(--ah-border) 70%, transparent);
}

/* ---- Per-client colours (stable: client.pk % 10, see client_color_class) ---- */
.cc-none { --cc: var(--ah-text-3); }
.cc-0 { --cc: #2563EB; }  /* blue    */
.cc-1 { --cc: #0F8A7E; }  /* teal    */
.cc-2 { --cc: #7C3AED; }  /* violet  */
.cc-3 { --cc: #C2185B; }  /* raspberry */
.cc-4 { --cc: #D9480F; }  /* orange  */
.cc-5 { --cc: #15803D; }  /* green   */
.cc-6 { --cc: #A16207; }  /* amber   */
.cc-7 { --cc: #0E7490; }  /* cyan    */
.cc-8 { --cc: #4338CA; }  /* indigo  */
.cc-9 { --cc: #4D7C0F; }  /* olive   */
[data-bs-theme="dark"] .cc-0 { --cc: #6EA0FF; }
[data-bs-theme="dark"] .cc-1 { --cc: #3CCFBE; }
[data-bs-theme="dark"] .cc-2 { --cc: #A98BFA; }
[data-bs-theme="dark"] .cc-3 { --cc: #F06A9B; }
[data-bs-theme="dark"] .cc-4 { --cc: #FF8A50; }
[data-bs-theme="dark"] .cc-5 { --cc: #4ADE80; }
[data-bs-theme="dark"] .cc-6 { --cc: #F5C030; }
[data-bs-theme="dark"] .cc-7 { --cc: #38BDF8; }
[data-bs-theme="dark"] .cc-8 { --cc: #8B8CF8; }
[data-bs-theme="dark"] .cc-9 { --cc: #A3E635; }

/* ---- R2: meta text  ●  Client / Project ---------------------------- */
.ah-meta {
  display: inline-flex; align-items: center; gap: .45rem;
  min-width: 0; max-width: 100%;
  font-size: var(--ah-text-meta); font-weight: 400; line-height: 1.35;
  color: var(--ah-text-3); white-space: nowrap;
  background: none; border: 0; padding: 0;
}
.ah-meta[role="button"], button.ah-meta, a.ah-meta { cursor: pointer; text-decoration: none; }
.ah-meta-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc, var(--ah-text-3));
}
.ah-meta-dot.is-hollow { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cc, var(--ah-text-3)); }
.ah-meta-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ah-meta-client { color: var(--ah-text-3); }
.ah-meta-sep { color: var(--ah-border-strong); margin: 0 .2rem; }
.ah-meta-project { color: var(--cc, var(--ah-text-2)); font-weight: 500; }
.ah-meta-empty { color: var(--ah-text-3); font-style: italic; }
.ah-meta[role="button"]:hover .ah-meta-project, a.ah-meta:hover .ah-meta-project, button.ah-meta:hover .ah-meta-project { text-decoration: underline; text-underline-offset: 2px; }
.ah-meta[role="button"]:focus-visible, button.ah-meta:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 2px; border-radius: 4px; }

/* ---- Filter chips (toggleable project shortcuts) -------------------- */
.ah-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--ah-border); background: var(--ah-surface);
  font-size: .8125rem; font-weight: 500; color: var(--ah-text-2);
  line-height: 1.3; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background-color .12s, opacity .12s;
}
.ah-chip:hover { border-color: var(--cc, var(--ah-border-strong)); background: var(--ah-hover); }
.ah-chip .ah-chip-project { color: var(--cc, var(--ah-text-2)); }
.ah-chip i, .ah-chip a { color: var(--ah-text-3) !important; font-size: .75em; text-decoration: none; }
.ah-chip a:hover, .ah-chip i:hover { color: var(--ah-ink) !important; }

/* ---- R3: flat icon buttons + hover-revealed actions ----------------- */
.ah-btn-icon {
  --size: 24px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size); height: var(--size); padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ah-text-3); font-size: .75rem; line-height: 1; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.ah-btn-icon:hover { background: var(--ah-hover); color: var(--ah-ink); }
.ah-btn-icon:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 1px; }
.ah-btn-icon.is-danger:hover  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger); }
.ah-btn-icon.is-success:hover { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.ah-btn-icon.is-primary:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

.ah-row-actions { opacity: 0.35; transition: opacity .15s ease; }
.ah-row:hover .ah-row-actions,
.ah-row:focus-within .ah-row-actions,
.ah-row-actions:hover, .ah-row-actions:focus-within { opacity: 1; }
@media (hover: none) { .ah-row-actions { opacity: 1; } }

/* ---- R4: quiet rows ------------------------------------------------- */
.ah-row {
  position: relative;
  min-height: var(--ah-row-min-h);
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--ah-row-sep);
  font-size: var(--ah-text-content);
  transition: background-color .12s ease;
}
.ah-row:last-child { border-bottom: 0; }
.ah-row:hover { background-color: color-mix(in srgb, var(--ah-hover) 60%, transparent); }
/* State lives on a 3px left edge, never as a row tint */
.ah-row.is-warning { box-shadow: inset 3px 0 0 var(--bs-warning); }
.ah-row.is-running { box-shadow: inset 3px 0 0 var(--bs-success); }
.ah-row.is-draft   { box-shadow: inset 3px 0 0 var(--bs-primary); }
.ah-row.is-danger  { box-shadow: inset 3px 0 0 var(--bs-danger); }

/* ---- Numbers ---------------------------------------------------------- */
.ah-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ah-num-main { font-weight: 600; color: var(--ah-ink); }
.ah-num-sub  { font-weight: 400; color: var(--ah-text-3); font-size: .72rem; }

/* ---- R5: groups separated by space ---------------------------------- */
.ah-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem .5rem;
}
.ah-group-title { font-size: 1rem; font-weight: 600; color: var(--ah-ink); }
.ah-group-sub   { font-size: var(--ah-text-meta); color: var(--ah-text-3); font-weight: 400; }

/* ---- Legacy project pills (team workload, statements, …) render as meta text ---- */
.badge.project-as-meta {
  background: none !important; border: 0 !important; padding: 0 !important;
  font-size: var(--ah-text-meta) !important; font-weight: 400 !important;
  letter-spacing: 0 !important; color: var(--ah-text-3) !important;
  display: inline-flex; align-items: center; gap: .45rem;
}
.badge.project-as-meta::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc, var(--ah-text-3));
}

/* =====================================================================
   UNIFIED APP-WIDE TYPOGRAPHY & ELEMENT SPACING SYSTEM
   - Level 1: Page Titles (18px / bold, brand font)
   - Level 2: Section & Card Headings (15px / semi-bold)
   - Level 3: All Normal Content Text (13px, comfortable 1.5 line height)
     * Body copy, subtitles, descriptions (no more tiny 10px text)
     * Form labels (13px, weight 500, proper margin)
     * Form inputs, selects, buttons (13px, 34-36px height)
     * Navigation pills & tabs (13px, weight 500)
     * Textareas, result boxes, table cells (13px)
   - Level 4: Micro Meta & Badges (11.5px)
   ===================================================================== */
:root {
  --ah-font-title:   18px;
  --ah-font-heading: 15px;
  --ah-font-body:    13px;
  --ah-font-meta:    11.5px;
}

/* Page titles across all dashboards and feature modules */
.brand-font.h4, h4.brand-font, .page-head h4, .task-page-header h4,
.notes-header-card h4, .card-header h4, .top-navbar h1 {
  font-size: var(--ah-font-title) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--ah-ink) !important;
  margin-bottom: 0.25rem;
}

/* Section titles, tool sub-headers, widget titles, card titles */
h5, h6, .card-title, .section-title, .h5, .h6, .widget-title,
.dash-focus-row h6, .tool-section-title {
  font-size: var(--ah-font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--ah-ink) !important;
}

/* Normal content text across paragraphs, descriptions, and leads */
body, p, .lead, .description-text {
  font-size: var(--ah-font-body);
  line-height: 1.5;
  color: var(--ah-ink);
}

/* Subtitles, secondary descriptions, and helper narratives */
p.text-muted, .text-muted.small, p.small, .page-subtitle,
.card-header p.text-muted, .form-text {
  font-size: var(--ah-font-body) !important;
  color: var(--ah-text-2) !important;
  line-height: 1.45 !important;
}

/* Form labels: clean 13px with medium weight and proper bottom spacing */
.form-label, label:not(.form-check-label) {
  font-size: var(--ah-font-body) !important;
  font-weight: 500 !important;
  color: var(--ah-ink) !important;
  margin-bottom: 0.35rem;
}

/* Form controls & selects: unified 13px, comfortable min-height, crisp borders */
.form-control, .form-select, .input-group-text {
  font-size: var(--ah-font-body) !important;
  min-height: 36px;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  border-color: var(--bs-border-color);
}
.form-control-sm, .form-select-sm {
  min-height: 30px;
  font-size: var(--ah-font-body) !important;
  padding: 0.25rem 0.55rem;
}

/* Buttons: unified 13px font and proper click-target sizing */
.btn {
  font-size: var(--ah-font-body) !important;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.btn-sm {
  font-size: var(--ah-font-body) !important;
  padding: 0.25rem 0.6rem;
  min-height: 28px;
}
.btn-lg {
  font-size: 14px !important;
  padding: 0.5rem 1.1rem;
}

/* Navigation tabs, pills, and filter chips */
.nav-tabs .nav-link, .nav-pills .nav-link, .helper-nav-tabs .nav-link,
.task-filter-chip, .notes-nav-item, .sort-dropdown-toggle {
  font-size: var(--ah-font-body) !important;
  font-weight: 500;
}

/* Textareas & Tool Result Boxes */
textarea.form-control, .tool-result-box {
  font-size: var(--ah-font-body) !important;
  line-height: 1.5 !important;
}

/* Tables */
.table td, .table th {
  font-size: var(--ah-font-body) !important;
  vertical-align: middle;
}
.table th {
  font-weight: 600;
  color: var(--ah-text-2);
}

/* Micro metadata badges, pill counts, timestamps */
.badge:not(.fs-6):not(.h4):not(.h3),
.count-badge, .badge-preset, .assignee-initials {
  font-size: var(--ah-font-meta);
}