/* Authoritative Tetrafol brand foundation. Loaded after shared/page CSS. */
:root {
    /* Brand */
    --brand-primary: #1e5a2e;
    --brand-primary-dark: #0f3d25;
    --brand-secondary: #2f6f4e;
    --brand-accent: #6fad6e;
    --brand-soft: #a9cfab;

    /* Surfaces */
    --surface-page: #f4f6f2;
    --surface-card: #ffffff;
    --surface-subtle: #f7f8f5;

    /* Text and borders */
    --text-primary: #1f2933;
    --text-muted: #6b7280;
    --border-color: #dfe5df;
    --control-border: #89968b;

    /* Semantic status */
    --status-success: #2f8f4e;
    --status-success-soft: #edf7ef;
    --status-success-border: #9dceaa;
    --status-success-text: #236b3b;
    --status-danger: #dc4545;
    --status-warning: #f4b400;
    --status-warning-soft: #fff8df;
    --status-warning-border: #e4c85c;
    --status-warning-text: #6b4e00;
    --status-info-soft: #eef4f5;
    --status-info-border: #b9cdd1;
    --status-info-text: #334e55;
    --status-neutral-bg: #f1f3f1;
    --status-neutral-text: #465149;
    --status-danger-soft: #fdf0f0;
    --status-danger-border: #efb6b6;
    --status-danger-text: #9f2525;
    --status-danger-dark: #7f1d1d;

    /* Global application shell */
    --shell-navbar-bg: var(--brand-primary-dark);
    --shell-navbar-border: rgba(255, 255, 255, 0.12);
    --shell-navbar-text: #f7faf7;
    --shell-navbar-muted: #d8e5da;
    --shell-nav-state: rgba(169, 207, 171, 0.14);
    --shell-forecast-bg: var(--brand-primary);
    --shell-shadow: 0 1px 3px rgba(15, 61, 37, 0.12);
    --component-radius: 10px;
    --component-radius-major: 12px;
    --component-shadow: 0 1px 3px rgba(31, 41, 51, 0.08);
    --component-focus-ring: rgba(111, 173, 110, 0.28);
    --focus-ring: var(--component-focus-ring);

    /* Backward-compatible aliases used by existing components. */
    --page-bg: var(--surface-page);
    --panel-bg: var(--surface-card);
    --panel-edge: var(--border-color);
    --ink: var(--text-primary);
    --muted: var(--text-muted);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --danger: var(--status-danger);
    --accent: var(--brand-secondary);
    --accent-soft: var(--brand-soft);
    --header-bg: var(--brand-primary-dark);
    --header-ink: #f7faf7;
    --input-border: var(--control-border);
    --surface-soft: var(--surface-subtle);
    --today: var(--status-warning);
    --today-soft: #f8ecd2;
    --row-sticky: var(--surface-subtle);
    --pending: var(--status-warning);
    --button-bg: var(--surface-card);
    --button-border: var(--border-color);
}

body {
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--surface-page);
    color: var(--text-primary);
}

/* Tetrafol global shell. Structural behavior remains in app.css/styles.css. */
.navbar.bg-dark {
    background: var(--shell-navbar-bg) !important;
    border-bottom: 1px solid var(--shell-navbar-border);
    box-shadow: var(--shell-shadow);
    --bs-navbar-color: var(--shell-navbar-muted);
    --bs-navbar-hover-color: var(--shell-navbar-text);
    --bs-navbar-active-color: var(--shell-navbar-text);
    --bs-navbar-brand-color: var(--shell-navbar-text);
    --bs-navbar-brand-hover-color: var(--brand-soft);
}

.navbar-brand {
    color: var(--shell-navbar-text);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.navbar .nav-link {
    border-radius: 0.25rem;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link.show {
    background-color: var(--shell-nav-state);
}

.navbar .nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar .dropdown-item:focus-visible,
.navbar-toggler:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.navbar .dropdown-menu-dark {
    --bs-dropdown-bg: var(--brand-primary-dark);
    --bs-dropdown-border-color: var(--shell-navbar-border);
    --bs-dropdown-color: var(--shell-navbar-muted);
    --bs-dropdown-link-color: var(--shell-navbar-muted);
    --bs-dropdown-link-hover-color: var(--shell-navbar-text);
    --bs-dropdown-link-hover-bg: var(--shell-nav-state);
    --bs-dropdown-link-active-color: var(--shell-navbar-text);
    --bs-dropdown-link-active-bg: var(--brand-primary);
}

.global-cash-forecast {
    background: var(--shell-forecast-bg);
    border-bottom: 1px solid var(--shell-navbar-border);
    box-shadow: var(--shell-shadow);
}

.global-cash-forecast .label,
.global-cash-forecast .as-of {
    color: var(--shell-navbar-muted);
}

.global-cash-forecast .value {
    color: var(--brand-soft);
}

.app-content {
    box-shadow: 0 1px 3px rgba(31, 41, 51, 0.08);
}

.app-content > h2 {
    color: var(--text-primary);
    text-shadow: none;
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 111, 173, 110;
}

/* Shared page headers and major content containers. */
.page-header {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.page-header h1,
.dashboard-header h1,
.card-header h1,
.toolbar-title,
.summary-section h3,
.section-card h2,
.section-card h3,
.table-card h2 {
    letter-spacing: -0.01em;
}

.dashboard-card,
.page-card,
.detail-card {
    background: var(--surface-card);
    border-color: var(--border-color);
    border-radius: var(--component-radius-major);
    box-shadow: var(--component-shadow);
}

.section-card,
.table-card {
    background: var(--surface-card);
    border-color: var(--border-color);
    border-radius: var(--component-radius);
    box-shadow: none;
}

.dashboard-header,
.card-header {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
    color: var(--shell-navbar-text);
}

.dashboard-header {
    border-radius: var(--component-radius-major);
}

.dashboard-header p,
.card-header p {
    color: var(--shell-navbar-muted);
}

/* Shared operational toolbars and filter panels. */
.toolbar {
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--component-radius);
    padding: 10px 12px;
}

.toolbar-title {
    color: var(--text-primary);
}

.toolbar-subtitle,
.table-sub,
.help-text {
    color: var(--text-muted);
}

.filter-card,
.filter-bar {
    background: var(--surface-subtle);
    border-color: var(--border-color);
    border-radius: var(--component-radius);
    box-shadow: none;
}

.filter-field label {
    color: var(--text-muted);
}

/* Shared non-semantic actions. Dimensions and disabled behavior are retained. */
.toolbar-actions .primary,
.filter-actions .primary,
.filter-actions button.primary,
.btn.primary,
.btn-save {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.toolbar-actions .primary:hover,
.filter-actions .primary:hover,
.filter-actions button.primary:hover,
.btn.primary:hover,
.btn-save:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #fff;
}

.toolbar-actions .secondary,
.filter-actions .secondary,
.btn.secondary,
.btn-outline-secondary {
    background: var(--surface-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.toolbar-actions .secondary:hover,
.filter-actions .secondary:hover,
.btn.secondary:hover,
.btn-outline-secondary:hover {
    background: var(--surface-subtle);
    border-color: var(--brand-soft);
    color: var(--brand-primary-dark);
}

.toolbar-actions .primary:focus-visible,
.toolbar-actions .secondary:focus-visible,
.filter-actions button:focus-visible,
.filter-actions a:focus-visible,
.btn.primary:focus-visible,
.btn.secondary:focus-visible,
.btn-save:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem var(--component-focus-ring);
}

/* Structural table treatment. Application-defined row colors remain authoritative. */
.table-responsive,
.table-wrap {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--component-radius);
    box-shadow: none;
}

.table,
table.statement-table,
table.summary-table,
table.candidate-table,
table.pl-table {
    background-color: var(--surface-card);
    color: var(--text-primary);
}

.table thead,
.table > thead,
table.statement-table thead,
table.summary-table thead,
table.candidate-table thead {
    background-color: var(--surface-subtle);
    border-bottom-color: var(--border-color);
}

.table th,
table.statement-table th,
table.summary-table th,
table.candidate-table th {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table td,
table.statement-table td,
table.summary-table td,
table.candidate-table td,
table.pl-table td {
    border-color: var(--border-color);
}

.day-header td {
    background-color: var(--surface-subtle) !important;
    border-top-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Compact summaries and neutral information blocks. */
.summary-section {
    background: var(--surface-subtle);
    border-color: var(--border-color);
    border-radius: var(--component-radius);
    box-shadow: none;
}

.summary-section h3,
.stat-item .value {
    color: var(--text-primary);
}

.stat-item {
    background: var(--surface-card);
    border-color: var(--border-color);
    border-radius: 8px;
}

.stat-item .label,
.stat-as-of,
.text-subtle {
    color: var(--text-muted);
}

/* Tetrafol form controls. Defensive mobile/iOS declarations remain in the
   shared stylesheet and are repeated here only where the cascade requires
   a brand-specific border or focus treatment. */
.form-control:not(.bg-dark):not(.text-white),
.form-select:not(.bg-dark):not(.text-white),
textarea.form-control:not(.bg-dark):not(.text-white) {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    border-color: var(--control-border) !important;
    border-radius: 8px;
    color-scheme: light;
}

.form-control:not(.bg-dark):not(.text-white):hover:not(:disabled):not([readonly]),
.form-select:not(.bg-dark):not(.text-white):hover:not(:disabled) {
    border-color: var(--brand-secondary) !important;
}

.form-control:not(.bg-dark):not(.text-white):focus,
.form-select:not(.bg-dark):not(.text-white):focus,
textarea.form-control:not(.bg-dark):not(.text-white):focus {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary);
    border-color: var(--brand-secondary) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.form-control:not(.bg-dark):not(.text-white)::placeholder,
textarea.form-control:not(.bg-dark):not(.text-white)::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--surface-subtle) !important;
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted);
    border-color: var(--border-color) !important;
    opacity: 1;
}

.input-group-text {
    background: var(--surface-subtle);
    color: var(--text-primary);
    border-color: var(--control-border);
}

:where(.page-card, .form-panel, .section-card) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:where(.page-card, .form-panel, .section-card) select,
:where(.page-card, .form-panel, .section-card) textarea {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--control-border);
    border-radius: 8px;
    color-scheme: light;
}

:where(.page-card, .form-panel, .section-card) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
:where(.page-card, .form-panel, .section-card) select:focus,
:where(.page-card, .form-panel, .section-card) textarea:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

:where(.page-card, .form-panel, .section-card) input:disabled,
:where(.page-card, .form-panel, .section-card) select:disabled,
:where(.page-card, .form-panel, .section-card) textarea:disabled,
:where(.page-card, .form-panel, .section-card) input[readonly],
:where(.page-card, .form-panel, .section-card) textarea[readonly] {
    background: var(--surface-subtle);
    color: var(--text-muted);
    border-color: var(--border-color);
    opacity: 1;
}

.form-label,
.form-panel label,
.page-card label,
.section-card label,
.modal-content:not(.bg-dark) label {
    color: var(--text-primary);
    font-weight: 600;
}

.form-text,
.help-text,
.form-panel .form-text,
.page-card .form-text,
.section-card .form-text,
.modal-content:not(.bg-dark) .form-text {
    color: var(--text-muted);
}

.invalid-feedback,
.error-message,
.errorlist,
.field-error-compact {
    color: var(--status-danger);
}

.form-error-summary,
.inline-error-box {
    background: var(--status-danger-soft);
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
    border-radius: 8px;
}

.form-check-input,
form input[type="checkbox"],
form input[type="radio"] {
    accent-color: var(--brand-primary);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.btn.danger,
.btn-danger {
    --bs-btn-bg: var(--status-danger-text);
    --bs-btn-border-color: var(--status-danger-text);
    --bs-btn-hover-bg: var(--status-danger-dark);
    --bs-btn-hover-border-color: var(--status-danger-dark);
    --bs-btn-active-bg: var(--status-danger-dark);
    --bs-btn-active-border-color: var(--status-danger-dark);
    --bs-btn-disabled-bg: var(--status-danger-text);
    --bs-btn-disabled-border-color: var(--status-danger-text);
    background: var(--status-danger-text);
    border-color: var(--status-danger-text);
    color: #fff;
}

.btn.danger:hover,
.btn-danger:hover {
    background: var(--status-danger-dark);
    border-color: var(--status-danger-dark);
    color: #fff;
}

/* Alerts and Django messages. */
.alert {
    border-radius: 8px;
    box-shadow: none;
}

.alert-success {
    --bs-alert-bg: var(--status-success-soft);
    --bs-alert-border-color: var(--status-success-border);
    --bs-alert-color: var(--status-success-text);
    background: var(--status-success-soft);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

.alert-danger,
.alert-error {
    --bs-alert-bg: var(--status-danger-soft);
    --bs-alert-border-color: var(--status-danger-border);
    --bs-alert-color: var(--status-danger-text);
    background: var(--status-danger-soft);
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
}

.alert-warning {
    --bs-alert-bg: var(--status-warning-soft);
    --bs-alert-border-color: var(--status-warning-border);
    --bs-alert-color: var(--status-warning-text);
    background: var(--status-warning-soft);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.alert-info {
    --bs-alert-bg: var(--status-info-soft);
    --bs-alert-border-color: var(--status-info-border);
    --bs-alert-color: var(--status-info-text);
    background: var(--status-info-soft);
    border-color: var(--status-info-border);
    color: var(--status-info-text);
}

.alert-secondary {
    --bs-alert-bg: var(--status-neutral-bg);
    --bs-alert-border-color: var(--border-color);
    --bs-alert-color: var(--status-neutral-text);
    background: var(--status-neutral-bg);
    border-color: var(--border-color);
    color: var(--status-neutral-text);
}

.alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Generic Bootstrap badges; accounting/category-specific badge classes are
   intentionally not included. */
.badge.bg-success {
    background-color: var(--status-success-text) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: var(--status-danger-text) !important;
    color: #fff !important;
}

.badge.bg-warning {
    background-color: var(--status-warning) !important;
    color: #3d3100 !important;
}

.badge.bg-secondary {
    background-color: #5f6b64 !important;
    color: #fff !important;
}

.badge.bg-light {
    background-color: var(--surface-subtle) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Light Bootstrap modals. Deliberately leave .modal-content.bg-dark alone. */
.modal-content:not(.bg-dark) {
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--component-radius-major);
    box-shadow: 0 12px 32px rgba(31, 41, 51, 0.18);
    color-scheme: light;
}

.modal-content:not(.bg-dark) .modal-header,
.modal-content:not(.bg-dark) .modal-footer {
    border-color: var(--border-color);
}

.modal-content:not(.bg-dark) .modal-title {
    color: var(--text-primary);
}

/* Workspace dropdowns; navbar dropdowns retain their dark shell treatment. */
.dropdown-menu:not(.dropdown-menu-dark) {
    --bs-dropdown-bg: var(--surface-card);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-color: var(--text-primary);
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-color: var(--brand-primary-dark);
    --bs-dropdown-link-hover-bg: var(--surface-subtle);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--brand-primary);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(31, 41, 51, 0.12);
}

.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

/* Bootstrap and existing compact pagination. */
.pagination {
    --bs-pagination-color: var(--text-primary);
    --bs-pagination-bg: var(--surface-card);
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-hover-color: var(--brand-primary-dark);
    --bs-pagination-hover-bg: var(--surface-subtle);
    --bs-pagination-hover-border-color: var(--brand-soft);
    --bs-pagination-focus-color: var(--brand-primary-dark);
    --bs-pagination-focus-bg: var(--surface-subtle);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--focus-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-bg: var(--surface-subtle);
    --bs-pagination-disabled-border-color: var(--border-color);
}

.pagination-bar {
    color: var(--text-muted);
    border-color: var(--border-color);
}

.pagination-links a {
    color: var(--brand-primary);
}

.pagination-links a:hover,
.pagination-links a:focus-visible {
    color: var(--brand-primary-dark);
}

.pagination-links a:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

/* Existing empty/loading states. Layout and copy remain unchanged. */
.empty-state {
    background: var(--surface-subtle);
    color: var(--text-muted);
    border-color: var(--border-color);
    border-radius: var(--component-radius);
    box-shadow: none;
}

.empty-state h1,
.empty-state h2,
.empty-state h3,
.empty-state h4 {
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-muted);
}

.progress {
    background-color: var(--status-neutral-bg);
}

.progress-bar:not([class*="bg-"]) {
    background-color: var(--brand-primary);
}

.spinner-border:not([class*="text-"]),
.spinner-grow:not([class*="text-"]) {
    color: var(--brand-primary);
}

/* Bootstrap tooltip/popover surfaces. */
.tooltip {
    --bs-tooltip-bg: var(--brand-primary-dark);
    --bs-tooltip-color: #fff;
}

.popover {
    --bs-popover-bg: var(--surface-card);
    --bs-popover-border-color: var(--border-color);
    --bs-popover-header-bg: var(--surface-subtle);
    --bs-popover-header-color: var(--text-primary);
    --bs-popover-body-color: var(--text-primary);
    box-shadow: var(--component-shadow);
}

/* Breadcrumbs and generic tabs on the light workspace. */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-muted);
    --bs-breadcrumb-item-active-color: var(--text-primary);
}

.breadcrumb a,
.breadcrumb-dark a.text-white-50 {
    color: var(--brand-primary) !important;
}

.breadcrumb a:hover {
    color: var(--brand-primary-dark) !important;
}

.breadcrumb .active,
.breadcrumb-dark .active.text-white {
    color: var(--text-primary) !important;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--border-color);
    --bs-nav-tabs-link-hover-border-color: var(--border-color) var(--border-color) transparent;
    --bs-nav-tabs-link-active-color: var(--brand-primary-dark);
    --bs-nav-tabs-link-active-bg: var(--surface-card);
    --bs-nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--surface-card);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--text-muted);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus-visible {
    color: var(--brand-primary-dark);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--brand-primary);
    color: #fff;
}

/* Remaining shared decorative Bootstrap-blue actions. */
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.auth-form button[type="submit"] {
    background-color: var(--brand-primary);
}

.auth-form button[type="submit"]:hover {
    background-color: var(--brand-primary-dark);
}

/* Tetrafol footer visual treatment; positioning remains in shared CSS. */
.footer {
    background: var(--brand-primary-dark);
    border-top-color: var(--shell-navbar-border);
    color: var(--shell-navbar-muted);
    box-shadow: 0 -1px 3px rgba(15, 61, 37, 0.12);
}