/* =====================================================================================
   Architectural Minimalist theme  (light + dark)
   Palette sampled from the "Archi | Studio" design-system reference:
     cream #F7F4EB · slate #353C42 · brushed slate #A3AAB2 · charcoal #25282B
     brushed gold #C8A870 · near-black #0D0F11

   How it works
   - <html data-theme="light|dark"> is set before first paint by theme-switcher.js.
   - The existing pages already colour themselves through --clr-* custom properties
     (declared in :root by pm.css and several inline <style> blocks). This file re-declares
     them on html[data-theme=...] (higher specificity than :root), so the whole app re-themes
     without touching each view. A few hardcoded colours (#fff, #cdd8d4 ...) are overridden below.
   - The small dashboard cards (.stat-card / .health-card) are intentionally pinned to their
     original look in both themes.
   ===================================================================================== */

/* ---- 1. Brand palette (raw values) ---------------------------------------------- */
:root {
    --archi-cream: #F7F4EB;
    --archi-cream-dark: #EFEBDF;
    --archi-slate: #353C42;
    --archi-slate-soft: #454D55;
    --archi-brushed: #A3AAB2;
    --archi-charcoal: #25282B;
    --archi-gold: #C8A870;
    --archi-gold-deep: #B08F55;
    --archi-near-black: #0D0F11;

    --archi-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --archi-radius: 12px;
    --archi-radius-pill: 999px;
    --archi-transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ---- 2. Semantic tokens: LIGHT (default) ---------------------------------------- */
html[data-theme="light"],
html:not([data-theme]) {
    color-scheme: light;

    --th-page: var(--archi-cream);
    --th-surface: #FFFFFF;
    --th-surface-2: var(--archi-cream-dark);
    --th-surface-hover: #F3F0E6;
    --th-border: #DCD8CB;
    --th-border-soft: #ECE8DC;
    --th-text: var(--archi-charcoal);
    --th-text-muted: #6A727A;
    --th-text-faint: #8E959C;
    --th-heading: var(--archi-slate);
    --th-banner: var(--archi-slate);
    --th-banner-text: var(--archi-cream);
    --th-primary: var(--archi-slate);
    --th-primary-hover: var(--archi-charcoal);
    --th-on-primary: var(--archi-cream);
    --th-accent: var(--archi-gold);
    --th-on-accent: var(--archi-charcoal);
    --th-sidebar: #FBF9F3;
    --th-active-bg: #ECE7D8;
    --th-shadow: 0 4px 20px rgba(37, 40, 43, .08);
    --th-focus: rgba(200, 168, 112, .45);

    /* Existing app tokens, re-pointed at the palette */
    --clr-dark: var(--archi-slate);
    --clr-primary: var(--archi-slate-soft);
    --clr-light-green: var(--archi-gold);
    --clr-bg: var(--archi-cream-dark);
    --clr-amber: #D9BE86;
    --clr-red: #B5483E;
    --th-holiday-bg: #FBE3E0;
    --th-holiday-border: #E8A8A0;
    --th-holiday-text: #9A3329;
    --app-bg: var(--archi-cream);
    --bs-body-bg: var(--archi-cream);
}

/* ---- 3. Semantic tokens: DARK --------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    --th-page: var(--archi-near-black);
    --th-surface: #16181B;
    --th-surface-2: var(--archi-charcoal);
    --th-surface-hover: #1E2124;
    --th-border: #353C42;
    --th-border-soft: #2A2F33;
    --th-text: var(--archi-cream);
    --th-text-muted: var(--archi-brushed);
    --th-text-faint: #7C848C;
    --th-heading: var(--archi-cream);
    --th-banner: var(--archi-charcoal);
    --th-banner-text: var(--archi-cream);
    --th-primary: var(--archi-gold);
    --th-primary-hover: #D8BC88;
    --th-on-primary: var(--archi-near-black);
    --th-accent: var(--archi-gold);
    --th-on-accent: var(--archi-near-black);
    --th-sidebar: #111315;
    --th-active-bg: #25282B;
    --th-shadow: 0 4px 20px rgba(0, 0, 0, .45);
    --th-focus: rgba(200, 168, 112, .4);

    /* In dark mode --clr-dark / --clr-primary are used by the views as TEXT colours, so they become light. */
    --clr-dark: var(--archi-cream);
    --clr-primary: var(--archi-gold);
    --clr-light-green: var(--archi-gold);
    --clr-bg: var(--archi-charcoal);
    --clr-amber: var(--archi-gold);
    --clr-red: #E0705F;
    --th-holiday-bg: #3A2321;
    --th-holiday-border: #7A3F39;
    --th-holiday-text: #F0A094;
    --app-bg: var(--archi-near-black);
    --bs-body-bg: var(--archi-near-black);
}

/* ---- 4. Pin the small dashboard cards to their original look -------------------- */
.stat-card,
.health-card {
    --clr-dark: #0a3a45;
    --clr-primary: #0f505e;
    --clr-light-green: #4a9db0;
    --clr-bg: #e3eef1;
    --clr-amber: #f0cd6e;
    --clr-red: #e2574c;
    color-scheme: light;
}
.health-card .progress-track { background: #e3eef1 !important; }
.health-card .progress-fill { background: #0f505e !important; }
.health-card .status-badge { background: #e3eef1 !important; color: #0a3a45 !important; }

/* ---- 5. Base ------------------------------------------------------------------- */
html,
body {
    background: var(--th-page) !important;
    color: var(--th-text);
    font-family: var(--archi-font);
}

body { transition: var(--archi-transition); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--th-heading); }

a { color: var(--th-primary); }
a:hover { color: var(--th-primary-hover); }

hr { border-color: var(--th-border); opacity: 1; }
.text-muted { color: var(--th-text-muted) !important; }

::selection { background: var(--archi-gold); color: var(--archi-near-black); }

main.app-page { background: var(--th-page) !important; }

/* ---- 6. Shell: sidebar, topbar, content ---------------------------------------- */
.sidebar {
    background: var(--th-sidebar) !important;
    border-right: 1px solid var(--th-border) !important;
    transition: var(--archi-transition);
}
.company-name { color: var(--th-heading) !important; }
.menu-title { color: var(--th-text-muted) !important; letter-spacing: .08em; text-transform: uppercase; }

.sidebar-menu .nav-link { color: var(--th-text-muted) !important; border-radius: var(--archi-radius) !important; }
.sidebar-menu .nav-link:hover,
.sidebar-menu .nav-link.active {
    color: var(--th-heading) !important;
    background: var(--th-active-bg) !important;
}
.sidebar-menu .nav-link.active::before { background: var(--th-accent) !important; }

.topbar {
    background: var(--th-sidebar) !important;
    border-bottom: 1px solid var(--th-border) !important;
    transition: var(--archi-transition);
}
.notification { color: var(--th-text-muted) !important; }
.badge-count { background: var(--th-accent) !important; color: var(--th-on-accent) !important; }
.profile-image { background: var(--th-surface-2) !important; border: 1px solid var(--th-border); }
.user-info h6 { color: var(--th-text); }
.user-info small { color: var(--th-text-muted) !important; }
.user-profile .fa-chevron-down { color: var(--th-text-muted) !important; }

.main-content { background: var(--th-page); }

/* ---- 7. Theme toggle button (rendered by _ThemeToggle.cshtml) ------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 18px;
    padding: 0;
    border-radius: var(--archi-radius-pill);
    border: 1px solid var(--th-border);
    background: transparent;
    color: var(--th-text-muted);
    cursor: pointer;
    transition: var(--archi-transition), transform .2s ease;
}
.theme-toggle:hover { color: var(--th-heading); border-color: var(--th-accent); background: var(--th-active-bg); }
.theme-toggle:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

/* Floating variant for pages without a topbar (login, standalone pages) */
.theme-toggle--floating {
    position: fixed;
    top: 16px;
    right: 16px;
    margin: 0;
    z-index: 1100;
    background: var(--th-surface);
    box-shadow: var(--th-shadow);
}

/* ---- 8. Bootstrap components --------------------------------------------------- */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.popover,
.toast {
    background-color: var(--th-surface);
    color: var(--th-text);
    border-color: var(--th-border);
}
.card-header, .card-footer, .modal-header, .modal-footer { background: var(--th-surface-2); border-color: var(--th-border); }
.dropdown-item { color: var(--th-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--th-active-bg); color: var(--th-heading); }
.dropdown-divider { border-color: var(--th-border); }
.profile-dropdown { box-shadow: var(--th-shadow) !important; border: 1px solid var(--th-border) !important; background: var(--th-surface) !important; }
.profile-dropdown .dropdown-item:hover { background: var(--th-active-bg) !important; color: var(--th-heading) !important; }

.form-control,
.form-select,
.custom-input,
.input-group-text {
    background-color: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
.form-control::placeholder,
.custom-input::placeholder { color: var(--th-text-faint) !important; }
.form-control:focus,
.form-select:focus,
.custom-input:focus {
    border-color: var(--th-accent) !important;
    box-shadow: 0 0 0 .2rem var(--th-focus) !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--th-surface-2) !important; opacity: .8; }
.form-check-input { background-color: var(--th-surface); border-color: var(--th-border); }
.form-check-input:checked { background-color: var(--th-accent); border-color: var(--th-accent); }
label, .form-label, .custom-label { color: var(--th-text-muted); }

html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A3AAB2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.table { color: var(--th-text); border-color: var(--th-border); }
.table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--th-border-soft); }
.table-hover > tbody > tr:hover > * { background-color: var(--th-surface-hover); color: var(--th-text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--th-surface-2); color: var(--th-text); }

/* Buttons: pill-shaped, line-weight borders like the reference */
.btn { border-radius: var(--archi-radius-pill); font-weight: 600; letter-spacing: .02em; transition: var(--archi-transition); }
.btn-primary,
.login-btn {
    background-color: var(--th-primary) !important;
    border-color: var(--th-primary) !important;
    color: var(--th-on-primary) !important;
}
.btn-primary:hover, .btn-primary:focus,
.login-btn:hover, .login-btn:focus {
    background-color: var(--th-primary-hover) !important;
    border-color: var(--th-primary-hover) !important;
    color: var(--th-on-primary) !important;
}
.btn-outline-primary,
.btn-outline-secondary {
    color: var(--th-primary);
    border-color: var(--th-primary);
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover { background: var(--th-primary); border-color: var(--th-primary); color: var(--th-on-primary); }
.btn-secondary { background: var(--archi-brushed); border-color: var(--archi-brushed); color: var(--archi-near-black); }
.btn-secondary:hover { background: #B6BCC3; border-color: #B6BCC3; color: var(--archi-near-black); }
.btn-warning { background: var(--archi-gold); border-color: var(--archi-gold); color: var(--archi-near-black); }
.btn-light { background: var(--th-surface); border-color: var(--th-border); color: var(--th-text); }
.btn-link { color: var(--th-primary); }
.text-primary { color: var(--th-primary) !important; }
.bg-primary { background-color: var(--th-primary) !important; color: var(--th-on-primary) !important; }
.bg-light { background-color: var(--th-surface-2) !important; }
.bg-white { background-color: var(--th-surface) !important; }
.border { border-color: var(--th-border) !important; }
.page-link { background: var(--th-surface); border-color: var(--th-border); color: var(--th-primary); }
.page-item.active .page-link { background: var(--th-primary); border-color: var(--th-primary); color: var(--th-on-primary); }
.nav-tabs { border-color: var(--th-border); }
.nav-tabs .nav-link { color: var(--th-text-muted); }
.nav-tabs .nav-link.active { background: var(--th-surface); color: var(--th-heading); border-color: var(--th-border) var(--th-border) var(--th-surface); }

/* DataTables / toastr */
.dataTables_wrapper, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--th-text) !important; }
table.dataTable tbody tr { background-color: transparent !important; }
#toast-container > div { box-shadow: var(--th-shadow); opacity: 1; }

/* toastr adds the class "toast" to every toast, which the Bootstrap re-skin above paints with the page surface
   colour (and it out-ranks toastr's own .toast-success etc.), leaving white text on a white / near-black box.
   These id-level rules give each type its own solid background in both themes. */
#toast-container > .toast { border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
#toast-container > .toast-success { background-color: #2f7d57; }
#toast-container > .toast-error   { background-color: #b5483e; }
#toast-container > .toast-info    { background-color: #3b6f93; }
#toast-container > .toast-warning { background-color: #e0ad4a; color: var(--archi-charcoal); }
html[data-theme="dark"] #toast-container > .toast-success { background-color: #27694a; }
html[data-theme="dark"] #toast-container > .toast-error   { background-color: #a33a31; }
html[data-theme="dark"] #toast-container > .toast-info    { background-color: #2f6280; }
html[data-theme="dark"] #toast-container > .toast-warning { background-color: var(--archi-gold); color: var(--archi-near-black); }
#toast-container > .toast-warning .toast-close-button { color: inherit; }

/* ---- 9. Project-management module (pm.css) and dashboard (Home/Index) ----------- */
/* Banners */
.pm .page-banner,
.db-banner--dark,
.db-banner--primary { background: var(--th-banner) !important; }
.pm .page-banner h2, .db-banner h2 { color: var(--th-banner-text) !important; letter-spacing: .01em; }
.pm .page-banner p, .db-banner p { color: rgba(247, 244, 235, .65) !important; }
.role-pill { background: rgba(247, 244, 235, .14) !important; color: var(--th-banner-text) !important; }

/* Surfaces */
.pm .content-card,
.pm .form-card,
.content-card {
    background: var(--th-surface) !important;
    box-shadow: var(--th-shadow) !important;
    border: 1px solid var(--th-border-soft);
}
.pm .content-card__header,
.pm .form-card__header,
.content-card__title,
.pm .data-table thead th,
.db-table thead th {
    background: var(--th-surface-2) !important;
    color: var(--th-heading) !important;
    border-bottom-color: var(--th-border) !important;
}
.pm .data-table tbody td,
.db-table tbody td { color: var(--th-text) !important; border-bottom-color: var(--th-border-soft) !important; }
.pm .data-table tbody tr:hover td,
.db-table tbody tr:hover td { background: var(--th-surface-hover) !important; }
.pm .record-count, .pm .td-meta, .pm .page-info, .pm .char-counter,
.pm .detail-item .label, .pm .field label, .empty-lane, .pm .td-empty { color: var(--th-text-muted) !important; }
.pm .detail-item { border-bottom-color: var(--th-border-soft) !important; }
.pm .form-actions { border-top-color: var(--th-border-soft) !important; }

/* Inputs & secondary buttons */
.pm .fc,
.pm .search-input,
.pm .filter-select,
.pm .pagination-bar .form-select,
.pm .btn-clear,
.pm .btn-page,
.pm .btn-cancel,
.db-btn--ghost {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
.pm .fc::placeholder { color: var(--th-text-faint) !important; }
.pm .fc:focus, .pm .search-input:focus { border-color: var(--th-accent) !important; box-shadow: 0 0 0 3px var(--th-focus) !important; }
.pm .btn-clear:hover, .pm .btn-page:hover:not(:disabled), .pm .btn-cancel:hover { background: var(--th-active-bg) !important; color: var(--th-heading) !important; }
.pm .pagination-bar { border-top-color: var(--th-border-soft) !important; color: var(--th-text) !important; }

/* Primary actions */
.pm .btn-search,
.pm .btn-save,
.db-btn--primary,
.mt-btn,
.tc-play {
    background: var(--th-primary) !important;
    color: var(--th-on-primary) !important;
    border-radius: var(--archi-radius-pill);
}
.pm .btn-search:hover, .pm .btn-save:hover, .db-btn--primary:hover, .mt-btn:hover, .tc-play:hover {
    background: var(--th-primary-hover) !important;
    color: var(--th-on-primary) !important;
}
.pm .btn-add { background: var(--th-accent) !important; color: var(--th-on-accent) !important; border-radius: var(--archi-radius-pill); }
.pm .btn-add:hover { color: var(--th-on-accent) !important; }
.db-btn--amber { background: var(--th-accent) !important; color: var(--th-on-accent) !important; }
.progress-fill { background: var(--th-accent) !important; }
.progress-track { background: var(--th-surface-2) !important; }

/* Links */
.pm .action-link, .section-label { color: var(--th-primary) !important; }
html[data-theme="light"] .pm .action-link, html[data-theme="light"] .section-label { color: var(--archi-slate) !important; }
.pm .action-link:hover { color: var(--th-heading) !important; }

/* Badges & alerts */
.pm .badge-type, .status-badge { background: var(--th-surface-2) !important; color: var(--th-text) !important; }
html[data-theme="dark"] .pm .badge-active,
html[data-theme="dark"] .alert-success, html[data-theme="dark"] .db-alert-ok,
html[data-theme="dark"] .pm .alert-success { background: rgba(80, 160, 110, .16); color: #8FD6A8; border-color: rgba(80, 160, 110, .35); }
html[data-theme="dark"] .pm .badge-inactive,
html[data-theme="dark"] .alert-error, html[data-theme="dark"] .db-alert-err,
html[data-theme="dark"] .pm .alert-error { background: rgba(224, 112, 95, .14); color: #F0A396; border-color: rgba(224, 112, 95, .35); }
html[data-theme="dark"] .pm .badge-warn { background: rgba(200, 168, 112, .16); color: #E2C98F; }
html[data-theme="dark"] .pm .badge-info { background: rgba(163, 170, 178, .16); color: #C9CED3; }

/* ---- 10. Login & standalone pages ---------------------------------------------- */
.login-card {
    background: var(--th-surface) !important;
    border: 1px solid var(--th-border);
    box-shadow: var(--th-shadow) !important;
}
.welcome-title { color: var(--th-heading) !important; font-weight: 300 !important; text-transform: uppercase; letter-spacing: .08em; }
.welcome-subtitle { color: var(--th-text-muted) !important; }
.custom-label { color: var(--th-text-muted) !important; }
.reset-link, .forgot-text a { color: var(--th-primary) !important; }
html[data-theme="light"] .reset-link, html[data-theme="light"] .forgot-text a { color: var(--archi-slate) !important; }
.eye-icon { color: var(--th-text-muted) !important; }
.login-btn { border-radius: var(--archi-radius-pill) !important; }

footer.app-footer {
    background: var(--th-sidebar) !important;
    border-top: 1px solid var(--th-border) !important;
    color: var(--th-text-muted);
}
.prmy-text-color { color: var(--th-text-muted) !important; }

/* ---- 11. Mobile "My tasks" layout ---------------------------------------------- */
.pwa-header { background: var(--th-banner) !important; color: var(--th-banner-text) !important; }
html[data-theme="dark"] body { color: var(--th-text); }
.pwa-header .theme-toggle { margin-right: 0; color: var(--th-banner-text); border-color: rgba(247, 244, 235, .35); }
.pwa-header .theme-toggle:hover { color: var(--th-banner-text); background: rgba(247, 244, 235, .12); }

/* ---- 12. Motion preferences ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}