/* KeyoKids CRM — flat, pastel red theme. Loaded after each page's styles. */
:root {
    color-scheme: light;
    --brand: #b94b53;
    --brand-hover: #a33e46;
    --brand-dark: #8d343d;
    --brand-soft: #fbe8e6;
    --brand-wash: #fff5f3;
    --brand-line: #e6b8b3;
    --bg: #fcf7f6;
    --bg-soft: #fff3f1;
    --sidebar-bg: #f8e7e4;
    --sidebar-active: #f0ceca;
    --sidebar-text: #684f50;
    --sidebar-text-active: #8d343d;
    /* Existing modules use these names for primary actions and decorative accents. */
    --accent-green: #b94b53;
    --accent-teal: #a94b52;
    --accent-blue: #a9454f;
    --accent-purple: #995963;
    --accent-pink: #d98a8e;
    --accent-orange: #a46c37;
    --accent-red: #b43845;
    --card-bg: #fff;
    --text-primary: #3f3034;
    --text-secondary: #756165;
    --text-muted: #857276;
    --border: #eddcda;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --transition: color .18s ease, background-color .18s ease, border-color .18s ease;
    --bs-primary: #b94b53;
    --bs-primary-rgb: 185, 75, 83;
    --bs-link-color: #a33e46;
    --bs-link-hover-color: #8d343d;
    --bs-body-color: #3f3034;
    --bs-body-bg: #fcf7f6;
    --bs-border-color: #eddcda;
    --bs-border-radius: 8px;
    --bs-focus-ring-color: rgba(185, 75, 83, .18);
}
body { background: var(--bg); color: var(--text-primary); }
::selection { background: #f0ceca; color: #6b2932; }

/* A pale, flat navigation surface keeps the workspace light. */
body .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
}
.sidebar .sidebar-logo { border-bottom-color: var(--border); }
.sidebar .logo-text span:first-child { color: var(--brand-dark); }
.sidebar .logo-text span:last-child { color: var(--sidebar-text); }
.sidebar .sidebar-section-title { color: #886569; }
.sidebar .logo-icon::before { background: #c96269; }
.sidebar .logo-icon::after { background: #e6a5a0; }
.sidebar .nav-item-group { border-top-color: var(--border); }
.sidebar .nav-sub .nav-sub { border-left-color: #dfb8b4; }
.sidebar .nav-item:hover,
.sidebar .nav-sub a:hover { background: #f3d9d5; color: var(--brand-dark); }
.sidebar .nav-item.active,
.sidebar .nav-sub .nav-item.active,
.sidebar .nav-sub a.active-sub {
    background: var(--sidebar-active);
    color: var(--brand-dark);
    box-shadow: none;
}
.sidebar .nav-item.active::before { background: var(--brand); }
body .topbar { background: #fff; border-bottom-color: var(--border); box-shadow: none; }
.topbar .topbar-user-avatar,
.topbar .topbar-profile-avatar { background: var(--brand-soft); color: var(--brand-dark); box-shadow: none; }
body .notification-header { background: var(--brand-wash); }
body .notif-item { border-bottom-color: var(--border); }
body .notif-item:hover,
body .search-item:hover,
body .see-all-btn:hover { background: var(--brand-wash); }
body .notif-icon { background: var(--brand-soft); color: var(--brand-dark); }

/* Flat surfaces, including module-specific cards and forms. */
body :is(.card, .stat-card, .mini-stat, .table-card, .filter-bar, .wizard-panel,
    .form-card, .detail-card, .select-card, .photo-card, .modal-content,
    .dropdown-menu, .notification-dropdown, .topbar-search-dropdown, .swal2-popup) {
    box-shadow: none !important;
    border-color: var(--border) !important;
    border-radius: var(--radius);
}
body :is(.card, .stat-card, .mini-stat, .table-card, .filter-bar, .wizard-panel,
    .form-card, .detail-card, .select-card, .photo-card) { background-color: var(--card-bg); }
body :is(.card, .stat-card, .mini-stat, .quick-action):hover { transform: none; box-shadow: none; }
body :is(.card-header, .modal-header, .modal-footer, .table-top, .table-footer) {
    border-color: var(--border);
    background-color: #fff;
}
body .stat-card:nth-child(n)::after { background: #d88c8e; height: 2px; }
body :is(.stat-icon, .mini-stat-icon, .birthday-avatar, .overdue-avatar, .activity-icon) {
    background: var(--brand-soft) !important;
    color: var(--brand-dark);
    border-radius: 10px;
}
body .quick-action:nth-child(n)::before { background: var(--brand-soft); }
body .quick-action:hover { border-color: var(--brand-line); color: var(--brand-dark); }
body .birthday-item:hover { background: var(--brand-wash); }
body .capacity-bar { background: #fbe8e6; }
body .capacity-bar span { color: var(--brand-dark) !important; }
body .prenote-banner { background: #fbf0dc; color: #855d25; }
body .chart-bar.filled { background: #c76b74; }
body .chart-bar.empty { background: #e2e8f0; }
body .donut-wrapper circle[stroke="#EC4899"] { stroke: var(--accent-pink); }
body .donut-wrapper circle[stroke="#3B82F6"] { stroke: var(--accent-blue); }
body .chart-bar-group { min-width: 0; }
body .chart-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body .chart-bar:hover { filter: none; transform: none; }
body .stat-change.up { background: #edf5ef; color: #386a4e; }
body .stat-change.down { background: #fbe7e7; color: #a13b45; }
body .stat-change.neutral { background: #f5efee; color: var(--text-secondary); }
body .card-badge.blue { background: var(--brand-soft); color: var(--brand-dark); }
body .card-badge.green { background: #edf5ef; color: #386a4e; }
body .card-badge.orange { background: #fbf0dc; color: #855d25; }
body .card-badge.red { background: #fbe7e7; color: #a13b45; }

/* Keep destructive, success and warning actions distinguishable. */
body .btn { border-radius: var(--radius-sm); box-shadow: none !important; }
body :is(.btn-primary, .btn-save, .btn-login, .filter-btn),
body .swal2-styled.swal2-confirm {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none;
    filter: none;
}
body :is(.btn-primary, .btn-save, .btn-login, .filter-btn):hover,
body .swal2-styled.swal2-confirm:hover {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    transform: none;
    filter: none;
}
body :is(.btn-primary, .btn-save, .filter-btn):active {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}
body :is(.btn-secondary, .btn-ghost, .btn-light, .btn-icon) {
    background: #fff !important;
    border: 1px solid var(--border);
    color: var(--text-secondary) !important;
}
body :is(.btn-secondary, .btn-ghost, .btn-light, .btn-icon):hover {
    background: var(--brand-wash) !important;
    border-color: var(--brand-line);
    color: var(--brand-dark) !important;
}
body :is(.btn-outline-primary, .btn-soft-primary) {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px solid var(--brand-line);
}
body :is(.btn-outline-primary, .btn-soft-primary):hover {
    background: var(--sidebar-active);
    color: var(--brand-dark);
    border-color: var(--brand);
}
body .btn-success { background: #427756; border-color: #427756; color: #fff; }
body .btn-success:hover { background: #346345; border-color: #346345; }
body .btn-warning { background: #f7e8ca; border-color: #e5cea1; color: #77511e; }
body .btn-danger { background: #a93746; border-color: #a93746; color: #fff; }
body .btn-danger:hover { background: #912938; border-color: #912938; }
body .action-btn { box-shadow: none !important; }
body .action-btn.view { background: var(--brand-soft); color: var(--brand-dark); }
body .action-btn.view:hover { background: #efd0cc; color: #782d36; }
body .action-btn.edit { background: #fbf0dc; color: #855d25; }
body .action-btn.edit:hover { background: #f1dfbc; color: #6e4819; }
body .action-btn.delete { background: #fbe7e7; color: #a13b45; }
body .action-btn.delete:hover { background: #f1cdcf; color: #8a2935; }
body :is(.table-action-button:hover, .table-action-button.show) {
    background: var(--brand-soft) !important;
    border-color: var(--brand-line) !important;
    color: var(--brand-dark) !important;
}
body .dropdown-item:hover { background: var(--brand-wash); }
body .dropdown-item:active,
body .dropdown-item.active { background: var(--brand-soft); color: var(--brand-dark); }

/* Fields use borders for structure and a clear, red focus indicator. */
body :is(.form-control, .form-select, .filter-select, .inline-search,
    .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple) {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background-color: #fff;
    box-shadow: none;
}
body :is(.form-control, .form-select, .filter-select, .inline-search,
    .field input, .field select, .field textarea):focus,
body :is(.search-bar, .table-search):focus-within,
body .select2-container--focus .select2-selection,
body .select2-container--open .select2-selection {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(185, 75, 83, .12) !important;
    outline: none;
}
body :is(.form-control, .form-select, .field input, .field select, .field textarea):disabled {
    background-color: #f5efee;
    color: var(--text-muted);
}
body .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
body .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(185,75,83,.12); }
body .select2-dropdown { border-color: var(--border); border-radius: 8px; }
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-soft); color: var(--brand-dark);
}
body .select2-container--default .select2-results__option[aria-selected=true] {
    background: #f2d4d0; color: var(--brand-dark);
}
body :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* Tables, tabs and multi-step forms share the same palette. */
body :is(.data-table, table.dataTable, .table) thead th {
    background-color: var(--brand-wash);
    color: #78565b;
    border-color: var(--border);
}
body :is(.data-table, table.dataTable) tbody tr { border-bottom-color: #f2e7e5; }
body :is(.data-table, table.dataTable) tbody tr:hover { background-color: var(--brand-wash); }
body .table { --bs-table-hover-bg: #fff5f3; --bs-table-border-color: #eddcda; }
body .page-btn.active-page,
body .page-item.active .page-link,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-soft) !important;
    border: 1px solid var(--brand-line) !important;
    color: var(--brand-dark) !important;
    box-shadow: none;
}
body .page-link { color: var(--brand-dark); border-color: var(--border); }
body .nav-tabs { border-bottom-color: var(--border); }
body .nav-tabs .nav-link { color: var(--text-secondary); }
body .nav-tabs .nav-link.active {
    color: var(--brand-dark);
    background: #fff;
    border-color: var(--border) var(--border) #fff;
}
body .nav-pills .nav-link.active { background: var(--brand-soft); color: var(--brand-dark); }
body .wizard-top { background: var(--brand-wash); }
body .wizard-tab .step-num { background: #f0e3e1; color: var(--text-secondary); }
body .wizard-tab.is-active { background: var(--brand-soft); color: var(--brand-dark); box-shadow: none; }
body .wizard-tab.is-active .step-num { background: var(--brand); color: #fff; }
body .wizard-tab.is-done { background: #edf5ef; color: #386a4e; }
body .wizard-tab.is-done .step-num { background: #427756; color: #fff; }
body .wizard-progress-track { background: #f0e3e1; }
body .wizard-progress-fill { background: #c76b74; }
body .upload-box { background: var(--brand-wash); border-color: var(--brand-line); }
body .upload-box:hover { background: var(--brand-soft); border-color: var(--brand); }

/* Module-specific decorative gradients and status surfaces. */
body .status-badge.active { background: #edf5ef; color: #386a4e; }
body .status-badge.active::before { background: #427756; box-shadow: none; }
body .status-badge.waiting { background: #fbf0dc; color: #855d25; }
body .status-badge.passive { background: #fbe7e7; color: #a13b45; }
body .status-badge.passive::before { box-shadow: none; }
body :is(.photo-card, .photo-frame, .tenant-logo) { background: var(--brand-wash); }
body .tenant-logo { color: var(--brand-dark); }
body .stat-card.income { background: #edf5ef; color: #386a4e; }
body .stat-card.expense { background: #fbe7e7; color: #a13b45; }
body .stat-card.net { background: var(--brand-soft); color: var(--brand-dark); }
body :is(.stat-card.income, .stat-card.expense, .stat-card.net) .stat-value { color: inherit; }
body .stat-open { background: #edf5ef; color: #386a4e; }
body .stat-progress { background: #fbf0dc; color: #855d25; }
body .stat-closed { background: #f1ebea; color: #756165; }

/* Standalone branch picker still uses the older application stylesheet. */
body.authentication-bg { background: var(--bg) !important; }
.authentication-bg .card { border: 1px solid var(--border); }
.authentication-bg .footer-alt,
.authentication-bg .footer-alt .bg-body { background: var(--bg) !important; color: var(--text-secondary); }

@media (max-width: 768px) {
    body .content { padding: 20px 16px; }
    body .field-grid { grid-template-columns: minmax(0, 1fr); }
    body .field-grid > * { grid-column: 1 / -1 !important; min-width: 0; }
    body .field-grid .field { min-width: 0; }
    body .field-grid :is(input, select, textarea) { min-width: 0; max-width: 100%; }
    body .step-header { flex-wrap: wrap; }
    body .page-header { flex-wrap: wrap; gap: 14px; }
    body .page-actions { flex-wrap: wrap; gap: 8px; }
    body .table-top, body .table-footer { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    body .animate-in, body .animate-in-row > *, body .mini-stats > *,
    body .table-card, body .filter-bar, body .data-table tbody tr {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}