/* Faral Work visual system — warm workspace palette */
:root {
    /* Premium warm-minimal semantic tokens. Keep the legacy aliases below
       so existing components continue to work without markup changes. */
    --bg-body: #F6F5EF;
    --bg-card: #F4F1EA;
    --bg-surface: #F4F1EA;
    --text-primary: #0F4336;
    --heading-color: #0F4336;
    --border-color: rgba(181, 155, 122, .35);
    --accent-warm: #B59B7A;
    --text-muted: #A58B70;
    --text-secondary: #A58B70;
    --primary-blue-gradient: linear-gradient(155deg, #4f8fc4 0%, #2d6ca8 35%, #1d518c 68%, #123b70 100%);
    --primary-blue-solid: #2d6ca8;
    --primary-blue-dark: #1d518c;
    --primary-blue-soft: rgba(45, 108, 168, 0.14);
    --card-outline-blue: #2d6ca8;
    --online-color: #22c55e;
    --online-color-dark: #15803d;
    --online-background: #dcfce7;
    --online-border: #86efac;
    --primary-blue-hover: #235c98;
    --color-primary: var(--primary-blue-solid);
    --btn-primary-bg: var(--primary-blue-solid);
    --color-primary-light: #EAF2FF;
    --btn-primary-hover: var(--primary-blue-hover);

    --fw-ivory: #F6F5EF;
    --fw-green: var(--primary-blue-solid);
    --fw-green-dark: var(--primary-blue-dark);
    --fw-tan: #B59B7A;
    --fw-sand: #F4F1EA;
    --fw-muted-tan: #A58B70;
    --fw-blue: var(--primary-blue-solid);
    --fw-blue-pale: var(--primary-blue-soft);
    --fw-ink: #0F4336;
    --fw-border: rgba(181, 155, 122, .35);
    --fw-shadow: rgba(49, 92, 69, .05);
}

html, body {
    background: var(--fw-ivory) !important;
    color: var(--fw-ink) !important;
}

body.unified-app {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --dark-page-bg: #0b1420;
    --dark-page-bg-secondary: #0f1d2a;
    --dark-surface-1: #111f2d;
    --dark-surface-2: #172a3b;
    --dark-surface-3: #1d3448;
    --dark-surface-glass: rgba(17,31,45,.88);
    --dark-text-primary: #f3f7fb;
    --dark-text-secondary: #c0ccd7;
    --dark-text-muted: #8fa0af;
    --dark-control-bg: #132231;
    --dark-control-hover: #192e41;
    --dark-control-border: rgba(137,166,190,.28);
    --dark-blue: #4f8fc4;
    --dark-blue-strong: #2d6ca8;
    --dark-blue-deep: #1d518c;
    --dark-blue-soft: rgba(79,143,196,.16);
    --dark-divider: rgba(137,166,190,.18);
    --dark-shadow: 0 10px 28px rgba(0,0,0,.24);
    --bg-body: var(--dark-page-bg);
    --bg-card: var(--dark-surface-1);
    --bg-surface: var(--dark-surface-2);
    --text-primary: var(--dark-text-primary);
    --heading-color: var(--dark-text-primary);
    --text-muted: var(--dark-text-muted);
    --text-secondary: var(--dark-text-secondary);
    --border-color: var(--dark-divider);
    --fw-ivory: var(--dark-page-bg);
    --fw-sand: var(--dark-surface-1);
    --fw-ink: var(--dark-text-primary);
    --fw-muted-tan: var(--dark-text-muted);
    --fw-border: var(--dark-divider);
    --theme-page: var(--dark-page-bg);
    --theme-surface: var(--dark-surface-1);
    --theme-surface-soft: var(--dark-surface-2);
    --theme-ink: var(--dark-text-primary);
    --theme-muted: var(--dark-text-muted);
    --theme-line: var(--dark-divider);
}

html[data-theme="dark"] body {
    background: #0B0D10 !important;
    color: #E2E8F0 !important;
}
html[data-theme="dark"] body.unified-app :where(.card, .glass-card, .panel, .table-card, .f-card, .modal, .modal-box, .table-shell) {
    background: #13161A !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #E2E8F0 !important;
}
html[data-theme="dark"] body.unified-app :where(input, select, textarea, .f-input) {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #E2E8F0 !important;
}
html[data-theme="dark"] body.unified-app :where(input, select, textarea, .f-input):focus {
    border-color: #0F4336 !important;
    box-shadow: 0 0 0 3px rgba(15, 67, 54, .24) !important;
}

body.unified-app .site-pattern,
body.unified-app .bg-gradient { opacity: .18; }
body.unified-app .top-accent { background: #dad1b6 !important; }

/* Shared chrome */
.main-header {
    background: var(--bg-surface) !important;
    border-color: var(--card-outline-blue) !important;
    box-shadow: 0 4px 20px rgba(49, 92, 69, .05) !important;
}
.brand-mark { background: var(--primary-blue-gradient) !important; box-shadow: 0 7px 18px rgba(18,59,112,.24) !important; }
.brand-title, .brand-text { color: var(--fw-green) !important; }
.brand-sub, .site-date { color: var(--fw-muted-tan) !important; }
.brand-badge { color: var(--fw-green) !important; border-color: var(--fw-tan) !important; background: rgba(181,155,122,.13) !important; }
.global-search-field, .user-dropdown {
    background: rgba(255,255,255,.96) !important;
    border-color: var(--fw-border) !important;
}
.page-nav-drawer {
    background: #dad1b6 !important;
    border: 2px solid #2d6ca8 !important;
    box-sizing: border-box !important;
}
.global-search-field:focus-within { border-color: var(--fw-blue) !important; box-shadow: 0 0 0 3px rgba(49,87,213,.12) !important; }
.nav-link, .user-menu-name, .user-dd-item { color: var(--fw-green) !important; }
.user-dd-item:hover, .page-nav-drawer .btn-outline:hover { background: var(--fw-blue-pale) !important; color: var(--fw-blue) !important; }
.page-nav-drawer .btn-glow, .btn-primary { background: var(--primary-blue-gradient) !important; border-color: var(--primary-blue-solid) !important; color: #fff !important; }
.btn-outline { color: var(--fw-green) !important; border-color: var(--fw-border) !important; background: rgba(255,255,255,.56) !important; }
.theme-toggle, .page-nav-toggle { color: var(--fw-green) !important; border-color: var(--fw-border) !important; }

/* Shared surfaces and controls */
.glass-card, .card, .panel, .table-card, .f-card, .modal, .modal-box, .modal-dialog,
.stat-card, .insight-card, .dashboard-card, .summary-box, .kpi-card,
.pro-sidebar > *, .pro-sc, .pro-nav, .pro-avc-body {
    background: var(--bg-card) !important;
    box-sizing: border-box;
    border: 1px solid var(--card-outline-blue);
    box-shadow: 0 4px 20px rgba(49, 92, 69, .05) !important;
}

html[data-theme="dark"] body.unified-app :where(.card, .glass-card, .panel, .table-card, .f-card, .modal, .modal-box, .modal-dialog, .stat-card, .insight-card, .dashboard-card, .summary-box, .kpi-card) {
    border-color: var(--card-outline-blue) !important;
}

/* Layout breathing room: keep the existing chat full-bleed exception intact. */
body.unified-app .app-shell:not(:has(.chat-layout-page)),
body.unified-app #main-content:not(:has(.chat-layout-page)),
body.unified-app .page-wrapper,
body.unified-app .main-content,
body:not(.unified-app) .page-content {
    padding: clamp(24px, 4vw, 48px);
}

body :where(table, .table-shell, .card, .glass-card, .panel, .table-card, .f-card) {
    border-radius: 12px;
}
body :where(.table-shell, .card, .glass-card, .panel, .table-card, .f-card) {
    overflow: hidden;
}
body.unified-app :where(input, select, textarea, .f-input, .form-panel) {
    border-color: rgba(181, 155, 122, .35) !important;
}
body.unified-app :where(input, select, textarea, .f-input) {
    background: rgba(255, 255, 255, .6) !important;
    border: 1px solid rgba(181, 155, 122, .35) !important;
    border-radius: 10px !important;
}
body.unified-app :where(input, select, textarea, .f-input):focus {
    border-color: #0F4336 !important;
    box-shadow: 0 0 0 3px rgba(15, 67, 54, .1) !important;
}

body.unified-app :where(.acc-btn-save, .oc-btn-pri, .atp-save-btn) {
    background: #254EDB !important;
    border-color: #254EDB !important;
    color: #fff !important;
}
body.unified-app :where(.acc-btn-save, .oc-btn-pri, .atp-save-btn):hover {
    background: #1D3FB8 !important;
    border-color: #1D3FB8 !important;
}

/* The navigation rail remains a calm, high-contrast navy surface. */
body.unified-app .sidebar,
body.unified-app .startup-sidebar,
body.unified-app .admin-sidebar,
body:not(.unified-app) .sidebar {
    background: #1E293B !important;
    color: rgba(255, 255, 255, .82) !important;
}
body.unified-app .sidebar .nav-item,
body.unified-app .sidebar .sidebar-section,
body.unified-app .sidebar .sidebar-sub,
body:not(.unified-app) .sidebar .nav-item {
    color: rgba(255, 255, 255, .78) !important;
}

/* Replace legacy purple promotional surfaces with the approved blue system. */
.gift-hero,
body.unified-app .gift-hero,
body.unified-app .page-content > .card[style*="7c3aed"] {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 38%, #3157D5 100%) !important;
    border-color: transparent !important;
}

/* Metric cards: these surfaces are light, so their content must not inherit
   the white text used by the old colored-card treatment. */
body :where(.stat-card, .summary-box, .insight-card, .kpi-card) {
    color: var(--text-primary, #0F4336) !important;
}
body :where(.stat-card, .summary-box, .insight-card, .kpi-card) :where(h1, h2, h3, .stat-num, .summary-value, .insight-value, .kpi-num, strong) {
    color: var(--text-primary, #0F4336) !important;
}
body :where(.stat-card, .summary-box, .insight-card, .kpi-card) :where(p, span, small, .stat-label, .summary-label, .insight-label, .kpi-label, .kpi-sub, .stat-trend) {
    color: var(--text-muted, #A58B70) !important;
}

/* Revenue summary in the subscriptions admin page previously carried an
   inline white color. Override only this legacy summary card and its text. */
body .page-content > .card[style*="7c3aed"] :where(div, span, strong, p) {
    color: var(--text-primary, #0F4336) !important;
}
body .page-content > .card[style*="7c3aed"] :where(div[style*="font-size:.8rem"], div[style*="font-size:.87rem"]) {
    color: var(--text-muted, #A58B70) !important;
}

/* Premium dashboard hero panels: replace generic blue promotional surfaces
   with the signature Old Money jade treatment. */
body :where(.hero-banner, .welcome-banner, .revenue-hero, .dashboard-stats-card, .blue-panel, .gift-hero) {
    background: linear-gradient(135deg, #0F4336 0%, #061F19 100%) !important;
    color: #F6F5EF !important;
    border-color: rgba(181, 155, 122, .4) !important;
    box-shadow: 0 10px 30px rgba(6, 31, 25, .15) !important;
}

body :where(.hero-banner, .welcome-banner, .revenue-hero, .dashboard-stats-card, .blue-panel, .gift-hero)
:where(h1, h2, h3, h4, strong, .rh-num, .rh-value, .stat-num, .summary-value) {
    color: #F6F5EF !important;
}

body :where(.hero-banner, .welcome-banner, .revenue-hero, .dashboard-stats-card, .blue-panel, .gift-hero)
:where(p, small, .rh-label, .rh-unit, .stat-label, .summary-label, .hero-subtitle) {
    color: rgba(246, 245, 239, .7) !important;
}

body :where(.revenue-hero, .dashboard-stats-card) :where(.rh-divider, .stat-divider, .summary-divider) {
    background-color: rgba(181, 155, 122, .4) !important;
    border-color: rgba(181, 155, 122, .4) !important;
}

/* Profile banners use the same hierarchy, with the requested dark-mode
   variant retained for richer contrast. */
body :where(.pro-header, .profile-header) {
    background: linear-gradient(135deg, #0F4336 0%, #061F19 100%) !important;
    box-shadow: 0 10px 30px rgba(6, 31, 25, .15) !important;
}
html[data-theme="dark"] body :where(.pro-header, .profile-header) {
    background: linear-gradient(135deg, #0A2E25 0%, #051A14 100%) !important;
}

/* Light financial dashboard treatment: airy surfaces that sit naturally on
   the cream page instead of reading as heavy green blocks. */
html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero
) {
    background: #FFFFFF !important;
    border: 1px solid rgba(181, 155, 122, .3) !important;
    color: #0F4336 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .02) !important;
}

html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero
) :where(h1, h2, h3, h4, strong, .rh-num, .rh-value, .stat-num, .summary-value) {
    color: #0F4336 !important;
}

html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero
) :where(p, small, .rh-label, .rh-unit, .stat-label, .summary-label, .hero-subtitle) {
    color: var(--text-muted, #78716C) !important;
}

html:not([data-theme="dark"]) body :where(.revenue-hero, .dashboard-stats-card)
:where(.rh-divider, .stat-divider, .summary-divider) {
    background-color: rgba(181, 155, 122, .25) !important;
    border-color: rgba(181, 155, 122, .25) !important;
}

html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero
) :where(svg, .welcome-icon, .stat-icon, .summary-icon) {
    color: #B59B7A !important;
    fill: currentColor;
    stroke: currentColor;
}

/* Preserve a refined dark-mode surface instead of forcing white cards there. */
html[data-theme="dark"] body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero
) {
    background: #13161A !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #E2E8F0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2) !important;
}

/* Warm & Premium emotional layer: ivory paper, jade ink and a camel glow. */
html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero,
    .stat-card,
    .summary-box,
    .insight-card,
    .kpi-card
) {
    background: #FDFCF9 !important;
    border: 1px solid rgba(181, 155, 122, .2) !important;
    border-radius: 16px !important;
    color: #0F4336 !important;
    box-shadow: 0 12px 35px rgba(181, 155, 122, .12) !important;
    transition: all .3s ease !important;
}

/* Dashboard cards: add quiet contrast and structure without visual noise. */
html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) {
    background: #FFFFFF !important;
    border: 1px solid rgba(181, 155, 122, .15) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(15, 67, 54, .06) !important;
}

html:not([data-theme="dark"]) body :where(
    .dashboard-box > .card-title,
    .dashboard-card-head,
    .card-head,
    .table-toolbar,
    .table-container > .card-head
) {
    border-bottom: 1px solid rgba(181, 155, 122, .2) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) :where(.card-title, .section-title, .dashboard-card-head, .table-toolbar-title, h2, h3) {
    color: #0F4336 !important;
    font-weight: 800 !important;
}

html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) table thead th {
    background-color: #F8F7F4 !important;
    color: #78716C !important;
    font-weight: 700 !important;
    border-color: rgba(181, 155, 122, .2) !important;
}

html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) table tbody tr {
    transition: background .2s ease;
}
html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) table tbody tr:hover {
    background-color: #F9FAF9 !important;
}

html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) :where(.btn-outline, .btn-ghost, .btn-secondary) {
    background: #FDFCF9 !important;
    border: 1px solid #B59B7A !important;
    color: #0F4336 !important;
    transition: all .3s ease !important;
}
html:not([data-theme="dark"]) body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) :where(.btn-outline, .btn-ghost, .btn-secondary):hover {
    background: #B59B7A !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] body :where(
    .dashboard-box,
    .dashboard-card,
    .chart-card,
    .table-container,
    .table-wrap,
    .card:not([style*="linear-gradient"])
) {
    background: #13161A !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2) !important;
}

/* Ambient mesh background: an ultra-soft sage / ivory / slate atmosphere. */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) body.unified-app {
    background-color: #EFECE1 !important;
    background-image:
        radial-gradient(at 0% 0%, #F6F4EB 0%, transparent 65%),
        radial-gradient(at 100% 0%, #BBD1C5 0%, transparent 65%),
        radial-gradient(at 100% 100%, #B4C6DF 0%, transparent 65%),
        radial-gradient(at 0% 100%, #E0D3BB 0%, transparent 65%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

html:not([data-theme="dark"]) body :where(.main-layout, .main, .content, .layout-main, .admin-main, .startup-main) {
    background: transparent !important;
}

/* Startup shell: let the body mesh continue behind the full content height. */
html:not([data-theme="dark"]) body :where(.layout, .main-area, .page-content) {
    background: transparent !important;
    min-height: 100vh;
}
html:not([data-theme="dark"]) body .layout {
    display: flex;
    align-items: stretch;
}
html:not([data-theme="dark"]) body .main-area {
    flex: 1 1 auto;
    height: auto !important;
}
html:not([data-theme="dark"]) body .page-content {
    flex: 1 1 auto;
    height: auto !important;
}

html[data-theme="dark"] body :where(.main-layout, .main, .content, .layout-main, .admin-main, .startup-main) {
    background: #0B0D10 !important;
}
html[data-theme="dark"] body :where(.layout, .main-area, .page-content) {
    background: #0B0D10 !important;
    min-height: 100vh;
}

/* Startup base safeguard: the canvas must follow content height, not only
   the first viewport. */
html,
body {
    height: auto !important;
    min-height: 100vh !important;
}
.layout {
    min-height: 100vh;
    height: auto;
}

html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero,
    .stat-card,
    .summary-box,
    .insight-card,
    .kpi-card
) :where(h1, h2, h3, h4, strong, .rh-num, .rh-value, .stat-num, .summary-value, .insight-value, .kpi-num) {
    color: #0F4336 !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero,
    .stat-card,
    .summary-box,
    .insight-card,
    .kpi-card
) :where(p, small, .rh-label, .rh-unit, .stat-label, .summary-label, .insight-label, .kpi-label, .kpi-sub, .stat-trend) {
    color: var(--text-muted, #78716C) !important;
}

html:not([data-theme="dark"]) body :where(
    .revenue-hero,
    .dashboard-stats-card,
    .stat-card,
    .summary-box,
    .insight-card,
    .kpi-card
) :where(.rh-divider, .stat-divider, .summary-divider) {
    background-color: rgba(181, 155, 122, .35) !important;
    border-color: rgba(181, 155, 122, .35) !important;
}

html:not([data-theme="dark"]) body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero,
    .stat-card,
    .summary-box,
    .insight-card,
    .kpi-card
) :where(svg, .welcome-icon, .stat-icon, .summary-icon, .kpi-icon) {
    color: #B59B7A !important;
    stroke: currentColor;
}

html:not([data-theme="dark"]) body :where(.hero-banner, .welcome-banner, .revenue-hero, .gift-hero) {
    border-top: 4px solid #B59B7A !important;
}

/* Dark mode keeps the same emotional hierarchy without introducing a bright
   ivory island into the charcoal interface. */
html[data-theme="dark"] body :where(
    .hero-banner,
    .welcome-banner,
    .revenue-hero,
    .dashboard-stats-card,
    .blue-panel,
    .gift-hero,
    .stat-card,
    .summary-box,
    .insight-card,
    .kpi-card
) {
    background: #13161A !important;
    border-color: rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
    color: #E2E8F0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .2) !important;
    transition: all .3s ease !important;
}
input, select, textarea, .f-input {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
input:focus, select:focus, textarea:focus, .f-input:focus { border-color: var(--fw-blue) !important; box-shadow: 0 0 0 3px rgba(49,87,213,.11) !important; }
a { color: var(--color-primary); }
.text-muted, .muted, small { color: var(--text-muted); }

/* Explicit component mapping requested by the new visual system. */
body.unified-app :where(h1, h2, h3, h4, h5, h6, .card-title, .card-head h2, .card-head h3) {
    color: var(--heading-color);
}
body.unified-app :where(.btn-primary, .btn-pri, .btn-glow, .btn-select, .btn-confirm) {
    background: var(--primary-blue-gradient) !important;
    border-color: var(--primary-blue-solid) !important;
    color: #fff !important;
}
body.unified-app :where(.btn-primary, .btn-pri, .btn-glow, .btn-select, .btn-confirm):hover {
    background: var(--primary-blue-gradient) !important;
    border-color: var(--primary-blue-hover) !important;
    color: #fff !important;
    filter: brightness(.92);
}
body.unified-app :where(.card, .glass-card, .panel, .table-card, .modal, .modal-box) {
    background: var(--bg-card) !important;
    border-color: var(--card-outline-blue) !important;
    box-shadow: 0 4px 20px rgba(49, 92, 69, .05) !important;
}

/* Attendance dashboard */
body.task-dashboard-theme .dash-hero {
    background: linear-gradient(135deg, #eef3ec 0%, var(--fw-sand) 58%, #eaf2ff 100%) !important;
    border-color: var(--card-outline-blue) !important;
    box-shadow: 0 18px 42px rgba(18,59,112,.10) !important;
}
body.task-dashboard-theme .hero-content h1 { color: var(--fw-green) !important; }
body.task-dashboard-theme .hero-content > p:not(.kicker), body.task-dashboard-theme .dashboard-datetime { color: var(--fw-muted-tan) !important; }
body.task-dashboard-theme .hero-content .kicker { color: var(--primary-blue-dark) !important; border-color: var(--primary-blue-solid) !important; background: rgba(255,255,255,.72) !important; }
body.task-dashboard-theme .hero-chips .chip { color: var(--primary-blue-dark) !important; border-color: var(--primary-blue-solid) !important; background: rgba(255,255,255,.76) !important; }
body.task-dashboard-theme .ring-progress { stroke: var(--fw-tan) !important; }
body.task-dashboard-theme .timer-widget #start-btn:not(:disabled) { background: var(--fw-tan) !important; border-color: var(--fw-tan) !important; color: #fff !important; }
body.task-dashboard-theme .dashboard-time { color: var(--fw-green) !important; }

/* Profile / account area */
.pro-header, .profile-header, body.unified-app .pro-header, body.unified-app .profile-header {
    background: var(--primary-blue-gradient) !important;
}
html[data-theme="dark"] .pro-header,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] body.unified-app .pro-header,
html[data-theme="dark"] body.unified-app .profile-header {
    background: var(--primary-blue-gradient) !important;
}
.pro-edit-btn { background: var(--primary-blue-gradient) !important; box-shadow: 0 6px 18px rgba(18,59,112,.24) !important; }
.pro-ni:hover, .pro-ni.on { background: var(--fw-blue-pale) !important; color: var(--fw-blue) !important; }
.pro-ni-ic { background: rgba(49,87,213,.09) !important; }
.pro-kpi-n { color: var(--fw-green) !important; }

/* Subscription, landing, and utility pages */
button, .button, .btn-primary { font-family: inherit; }
.subscription-hero, .buy-hero, .landing-hero { background: linear-gradient(135deg, var(--primary-blue-solid), var(--primary-blue-dark) 68%, var(--fw-tan)) !important; }
.badge, .chip, .status-active, .alert-info { background: var(--fw-blue-pale) !important; color: var(--fw-blue) !important; border-color: #cbdcff !important; }
.status-success, .alert-success { background: var(--primary-blue-soft) !important; color: var(--primary-blue-dark) !important; border-color: var(--primary-blue-solid) !important; }
.status-warning, .alert-warning { background: var(--fw-sand) !important; color: var(--fw-muted-tan) !important; border-color: #dfd0bd !important; }

/* The two internal admin shells have their own embedded styles, so these
   selectors intentionally use !important to keep the product palette unified. */
.sidebar, .startup-sidebar, .admin-sidebar { background: var(--primary-blue-gradient) !important; }
.nav-item:hover { background: rgba(234,242,255,.16) !important; color: #fff !important; }
.nav-item.active { background: var(--primary-blue-gradient) !important; border-color: var(--primary-blue-solid) !important; color: #fff !important; }
.brand-icon, .sidebar-logo-icon { background: var(--fw-tan) !important; box-shadow: 0 4px 14px rgba(181,155,122,.30) !important; }
.main, .content, .layout-main, .admin-main, .startup-main { background: var(--fw-ivory) !important; }
.topbar, .admin-topbar, .startup-topbar { background: rgba(246,245,239,.94) !important; border-color: var(--fw-border) !important; }

@media (max-width: 700px) {
    .main-header { width: calc(100% - 20px) !important; }
    .pro-layout { grid-template-columns: 1fr !important; }
    .pro-sidebar { position: static !important; }
}

/* Final cascade for the approved shared behavior. */
html.sidebar-precollapsed body.unified-app { padding-right: 68px; }
html.sidebar-precollapsed body.unified-app .page-nav-rail { --sidebar-current-width: 68px; }
body.unified-app .page-nav-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1d518c;
    background: #c8d9e2;
    border: 1px solid rgba(29,81,140,.34);
    border-radius: 11px;
    box-shadow: 0 4px 10px rgba(18,59,112,.12);
}
body.unified-app .page-nav-toggle:hover { background: #b9cedb; }
body.unified-app .page-nav-toggle:focus-visible { outline: 2px solid #1d518c; outline-offset: 2px; }
@media (max-width: 767px) {
    html.sidebar-precollapsed body.unified-app { padding-right: 0; }
}

body.task-dashboard-theme .timer-widget,
body.task-dashboard-theme .timer-widget * { color: #fff; }
body.task-dashboard-theme .timer-widget .f-input { color:#fff !important; }
body.task-dashboard-theme .timer-widget .f-input::placeholder { color:rgba(255,255,255,.78) !important; }
body.task-dashboard-theme .timer-widget #start-btn:not(:disabled) {
    background: var(--primary-blue-gradient) !important;
    border-color: rgba(126,190,244,.55) !important;
    color:#fff !important;
}
body.task-dashboard-theme .timer-widget #end-btn:not(:disabled) {
    background: rgba(11,43,82,.72) !important;
    border-color: rgba(255,255,255,.24) !important;
    color:#fff !important;
}

html[data-theme="dark"] body.unified-app {
    --bg-body:#0b1420;
    --bg-card:#111f2d;
    --bg-surface:#172a3b;
    --text-primary:#f3f7fb;
    --text-muted:#8798a8;
    --heading-color:#f3f7fb;
    --control-bg:#132231;
    --control-border:rgba(137,166,190,.25);
}
html[data-theme="dark"] body.unified-app :where(input,select,textarea,.f-input) {
    background:var(--control-bg) !important;
    color:var(--text-primary) !important;
    border-color:var(--control-border) !important;
}
html[data-theme="dark"] body.unified-app :where(input,select,textarea,.f-input)::placeholder { color:var(--text-muted) !important; }
html[data-theme="dark"] body.unified-app .page-nav-drawer { background:#111f2d !important; }

/* Shared workspace chrome: keep the header and search surface consistent
   with the dashboard while preserving the existing dimensions and behavior. */
body.unified-app .main-header {
    border-radius: 18px;
    background: rgba(255, 255, 255, .88) !important;
    border-color: rgba(45, 108, 168, .20) !important;
    box-shadow: 0 8px 24px rgba(18, 59, 112, .07),
        inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body.unified-app .global-search-field {
    min-height: 46px;
    border: 1px solid rgba(45, 108, 168, .22) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 8px 20px rgba(18, 59, 112, .08),
        inset 0 1px 0 rgba(255, 255, 255, .78) !important;
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
}
body.unified-app .global-search-field .global-search-icon {
    color: var(--primary-blue-solid);
}
body.unified-app .global-search-field input {
    color: var(--text-primary, #173b68) !important;
}
body.unified-app .global-search-field kbd {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(45, 108, 168, .18);
    color: var(--primary-blue-dark);
}
body.unified-app .global-search-field:focus-within {
    border-color: rgba(45, 108, 168, .48) !important;
    box-shadow: 0 0 0 3px rgba(45, 108, 168, .11),
        0 10px 24px rgba(18, 59, 112, .10) !important;
}

/* The inactive rail items need a calm, readable contrast against the navy
   drawer in dark mode; the active item keeps the approved blue gradient. */
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-outline {
    background: #c8d9e2 !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #1d518c !important;
}
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-outline:hover,
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-outline:focus-visible {
    background: #d7e5eb !important;
    color: #123b70 !important;
}
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-glow {
    background: var(--primary-blue-gradient) !important;
    border-color: rgba(126, 190, 244, .45) !important;
    color: #fff !important;
}

/* Dark-mode dividers stay visible without the harsh bright edge. */
html[data-theme="dark"] body.unified-app :where(.main-header, .glass-card, .stat-card,
    .mini-stat, .card, .panel, .table-card, .table-shell, .insight-card) {
    border-color: rgba(79, 143, 196, .20) !important;
}
html[data-theme="dark"] body.unified-app .global-search-field {
    background: rgba(17, 31, 45, .94) !important;
    border-color: rgba(79, 143, 196, .24) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html[data-theme="dark"] body.unified-app .global-search-field kbd {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(137, 166, 190, .22);
    color: #b8c8d7;
}
html[data-theme="dark"] body.unified-app .global-search-field:focus-within {
    border-color: rgba(79, 143, 196, .48) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 196, .14),
        0 10px 26px rgba(0, 0, 0, .28) !important;
}

/* Profile Edit uses its actual account-layout scope and the dashboard's
   warm glass surfaces; form geometry and subscription semantics stay intact. */
body.unified-app:has(.account-layout) :where(.sb-profile-card, .sb-sub-card, .acc-page-header, .acc-form-card) {
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(237,244,243,.82)) !important;
    border-color: rgba(45,108,168,.22) !important;
    box-shadow: 0 10px 28px rgba(18,59,112,.08) !important;
    color: var(--text-primary) !important;
}
body.unified-app:has(.account-layout) .sb-profile-card::before {
    background: var(--primary-blue-gradient) !important;
}
body.unified-app:has(.account-layout) :where(.sb-name, .acc-page-header h1, .acc-form-card h2) {
    color: var(--text-primary) !important;
}
body.unified-app:has(.account-layout) :where(.sb-username, .sb-nav-section-label, .acc-page-header p, .acc-form-group label, .acc-form-hint) {
    color: var(--text-muted) !important;
}
body.unified-app:has(.account-layout) :where(.sb-nav-item, .sb-nav-item.active) {
    color: var(--primary-blue-dark) !important;
}
body.unified-app:has(.account-layout) .sb-nav-item.active {
    background: var(--primary-blue-soft) !important;
}
body.unified-app:has(.account-layout) :where(.acc-form-control, .acc-form-card input, .acc-form-card select, .acc-form-card textarea) {
    background: rgba(255,255,255,.78) !important;
    color: var(--text-primary) !important;
    border-color: rgba(45,108,168,.24) !important;
}
body.unified-app:has(.account-layout) .acc-btn-save {
    background: var(--primary-blue-gradient) !important;
    border-color: var(--primary-blue-solid) !important;
    color: #fff !important;
}
html[data-theme="dark"] body.unified-app:has(.account-layout) :where(.sb-profile-card, .sb-sub-card, .acc-page-header, .acc-form-card) {
    background: var(--dark-surface-glass) !important;
    border-color: rgba(79,143,196,.28) !important;
    color: var(--dark-text-primary) !important;
}
html[data-theme="dark"] body.unified-app:has(.account-layout) :where(.acc-form-control, .acc-form-card input, .acc-form-card select, .acc-form-card textarea) {
    background: var(--dark-control-bg) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-control-border) !important;
}

/* Projects page uses the same working width and visual language as the
   dashboard. Scope these rules to the real Projects wrapper only. */
body.unified-app:has(.projects-page-shell) .projects-page-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding: 20px clamp(12px, 2vw, 28px) 40px;
    box-sizing: border-box;
}
body.unified-app:has(.projects-page-shell) .pl-hero {
    width: 100%;
    max-width: none;
    background: linear-gradient(110deg, #f7f5ed 0%, #f7f4ec 58%, #edf4f3 100%) !important;
    border: 1px solid rgba(45,108,168,.2);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(18,59,112,.08);
    color: var(--text-primary);
}
body.unified-app:has(.projects-page-shell) .pl-hero-title {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
body.unified-app:has(.projects-page-shell) .pl-hero-sub { color: var(--text-muted) !important; }
body.unified-app:has(.projects-page-shell) .pl-stat-n {
    color: var(--text-primary) !important;
}
body.unified-app:has(.projects-page-shell) .pl-stat-l {
    color: var(--text-muted) !important;
}
body.unified-app:has(.projects-page-shell) .pl-filter-bar,
body.unified-app:has(.projects-page-shell) .proj-grid,
body.unified-app:has(.projects-page-shell) .pl-empty,
body.unified-app:has(.projects-page-shell) #noResults { width: 100%; max-width: none; }
body.unified-app:has(.projects-page-shell) .proj-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
body.unified-app:has(.projects-page-shell) .btn-new-proj,
body.unified-app:has(.projects-page-shell) .pl-filter-btn.active,
body.unified-app:has(.projects-page-shell) .pl-filter-btn:hover {
    background: var(--primary-blue-gradient) !important;
    border-color: var(--primary-blue-solid) !important;
    color: #fff !important;
}
body.unified-app:has(.projects-page-shell) .proj-card,
body.unified-app:has(.projects-page-shell) .pl-empty {
    background: var(--bg-card) !important;
    border-color: rgba(45,108,168,.2) !important;
    color: var(--text-primary);
}
body.unified-app:has(.projects-page-shell) .ps-active {
    background: var(--primary-blue-soft) !important;
    color: var(--primary-blue-dark) !important;
}
body.unified-app:has(.projects-page-shell) :where(.proj-card-name, .proj-card-desc, .proj-prog-label, .proj-prog-pct, .proj-meta-pill) {
    color: var(--text-primary) !important;
}
body.unified-app:has(.projects-page-shell) :where(.proj-card-desc, .proj-prog-label, .proj-meta-pill) {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .pl-hero {
    background: linear-gradient(110deg, #172a3b 0%, #1d3448 100%) !important;
    border-color: rgba(79,143,196,.34);
    color: var(--text-primary);
}
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .pl-stat-n { color: #f3f7fb !important; }
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .pl-stat-l { color: #b5c2cf !important; }
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .proj-card,
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .pl-empty,
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .pl-search,
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) .pl-filter-btn {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: rgba(79,143,196,.34) !important;
}
html[data-theme="dark"] body.unified-app:has(.projects-page-shell) :where(.modal-box, .modal-head, .form-group input, .form-group textarea, .form-group select) {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: rgba(79,143,196,.34) !important;
}

/* Keep the collapse control at the top edge of the rail, out of the menu
   items; the existing click handler still controls the saved state. */
body.unified-app .page-nav-toggle {
    top: auto !important;
    bottom: 16px !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-blue-gradient);
    border-color: rgba(126,190,244,.58);
    box-shadow: 0 6px 14px rgba(18,59,112,.24);
    transform: none;
}
body.unified-app .page-nav-toggle .nav-burger { width: 18px; height: 18px; }
body.unified-app .page-nav-toggle .nav-burger line { stroke: #fff; }

/* Seven-part visual consistency pass: scoped to existing components only. */
body.task-dashboard-theme .timer-widget,
body.task-dashboard-theme .timer-widget * {
    color: #fff;
}
body.task-dashboard-theme .timer-widget .timer-label,
body.task-dashboard-theme .timer-widget .timer-meta-outside,
body.task-dashboard-theme .timer-widget .clock-segment small,
body.task-dashboard-theme .timer-widget .clock-sep {
    color: rgba(255,255,255,.82) !important;
}
body.task-dashboard-theme .timer-widget .clock-value { color: #fff !important; text-shadow: 0 0 12px rgba(255,255,255,.24); }
body.task-dashboard-theme .timer-widget .timer-day,
body.task-dashboard-theme .timer-widget .overflow-badge { color: #fff !important; }
body.task-dashboard-theme .timer-widget .f-input { color:#fff !important; }
body.task-dashboard-theme .timer-widget .f-input::placeholder { color: rgba(255,255,255,.78) !important; }
body.task-dashboard-theme .timer-widget #start-btn:not(:disabled) {
    background: var(--primary-blue-gradient) !important;
    border-color: rgba(126,190,244,.55) !important;
    color: #fff !important;
}
body.task-dashboard-theme .timer-widget #end-btn:not(:disabled) {
    background: rgba(11,43,82,.72) !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #fff !important;
}
body.task-dashboard-theme .timer-widget svg { color:#fff; }

body.task-dashboard-theme .dashboard-colleagues-grid {
    direction: rtl;
    justify-content: start;
}

/* Keep the shared workspace content full-width without using viewport units. */
body.unified-app .app-shell:not(:has(.chat-layout-page)) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin-inline: 0 !important;
    box-sizing: border-box;
    padding-inline: clamp(12px, 2vw, 28px);
}

/* Projects page: palette only, with its existing markup and interactions. */
body.unified-app:has(.proj-grid) {
    --projects-blue: var(--primary-blue-solid);
    --projects-blue-gradient: var(--primary-blue-gradient);
}
body.unified-app:has(.proj-grid) .pl-hero {
    background: var(--projects-blue-gradient);
    box-shadow: 0 14px 32px rgba(18,59,112,.18);
}
body.unified-app:has(.proj-grid) .btn-new-proj,
body.unified-app:has(.proj-grid) .pl-filter-btn.active,
body.unified-app:has(.proj-grid) .pl-filter-btn:hover {
    background: var(--projects-blue-gradient);
    border-color: var(--primary-blue-solid);
}
body.unified-app:has(.proj-grid) .pl-filter-btn,
body.unified-app:has(.proj-grid) .pl-search,
body.unified-app:has(.proj-grid) .proj-card,
body.unified-app:has(.proj-grid) .pl-empty {
    border-color: rgba(45,108,168,.2);
}
body.unified-app:has(.proj-grid) .proj-card,
body.unified-app:has(.proj-grid) .pl-search,
body.unified-app:has(.proj-grid) .pl-empty { background: var(--bg-card); color: var(--text-primary); }
body.unified-app:has(.proj-grid) .proj-card-name,
body.unified-app:has(.proj-grid) .modal-title { color: var(--text-primary); }
body.unified-app:has(.proj-grid) .proj-card-desc,
body.unified-app:has(.proj-grid) .proj-meta-pill,
body.unified-app:has(.proj-grid) .pl-stat-l { color: var(--text-muted); }
html[data-theme="dark"] body.unified-app:has(.proj-grid) .proj-card,
html[data-theme="dark"] body.unified-app:has(.proj-grid) .pl-empty,
html[data-theme="dark"] body.unified-app:has(.proj-grid) .modal-box {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(79,143,196,.34);
}
html[data-theme="dark"] body.unified-app:has(.proj-grid) .pl-filter-btn,
html[data-theme="dark"] body.unified-app:has(.proj-grid) .pl-search {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: rgba(79,143,196,.34);
}

/* Dark-mode semantic surfaces. Success/online intentionally stays green. */
html[data-theme="dark"] body.unified-app {
    --bg-body: #0b1220;
    --bg-card: #121d2d;
    --bg-surface: #16253a;
    --text-primary: #e6eef8;
    --text-muted: #9fb0c5;
    --heading-color: #f3f7fb;
    --border-color: rgba(79,143,196,.28);
    --fw-ink: #e6eef8;
    --fw-sand: #121d2d;
    --fw-border: rgba(79,143,196,.28);
}
html[data-theme="dark"] body.unified-app .main-header,
html[data-theme="dark"] body.unified-app .glass-card,
html[data-theme="dark"] body.unified-app .card,
html[data-theme="dark"] body.unified-app .panel,
html[data-theme="dark"] body.unified-app .table-card,
html[data-theme="dark"] body.unified-app .table-shell {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: rgba(79,143,196,.34) !important;
}
html[data-theme="dark"] body.unified-app :where(h1,h2,h3,h4,strong,th) { color: var(--heading-color); }
html[data-theme="dark"] body.unified-app :where(p,small,label,td,.text-muted) { color: var(--text-muted); }
html[data-theme="dark"] body.unified-app :where(input,select,textarea,.f-input) {
    background: #0f1a2a !important;
    color: var(--text-primary) !important;
    border-color: rgba(79,143,196,.34) !important;
}
html[data-theme="dark"] body.unified-app .page-nav-drawer { background: #0f1a2a !important; border-color: rgba(79,143,196,.48) !important; }

/* Workspace-wide shell alignment. These rules use the real shared wrappers;
   the dashboard remains the visual reference and keeps its own internals. */
body.unified-app .main-header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
}
body.unified-app .app-shell:has(.chat-layout-page) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin-inline: 0 !important;
    box-sizing: border-box;
    padding: 0;
}
body.unified-app .chat-layout-page {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    box-sizing: border-box;
}
body.unified-app .chat-main-panel,
body.unified-app .chat-sidebar-panel { min-width: 0; }

body.unified-app:has(.attmgmt-wrap) .attmgmt-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin-inline: 0 !important;
    box-sizing: border-box;
    color: var(--text-primary);
}
body.unified-app:has(.attmgmt-wrap) .attmgmt-card {
    background: var(--bg-card) !important;
    border: 2px solid #887a7a !important;
    border-radius: 18px !important;
    box-shadow: 0 0 6px rgba(136,122,122,.42), 0 5px 12px rgba(136,122,122,.18) !important;
}
body.unified-app:has(.attmgmt-wrap) .att-month-nav,
body.unified-app:has(.attmgmt-wrap) .attmgmt-stat {
    background: var(--bg-card) !important;
    border-color: rgba(45,108,168,.2) !important;
    color: var(--text-primary);
}
body.unified-app:has(.attmgmt-wrap) .attmgmt-table th {
    background: var(--bg-surface) !important;
    color: var(--text-muted) !important;
}
body.unified-app:has(.attmgmt-wrap) .attmgmt-table td { color: var(--text-primary); }
html[data-theme="dark"] body.unified-app:has(.attmgmt-wrap) .attmgmt-card {
    border-color: #887a7a !important;
    box-shadow: 0 0 6px rgba(136,122,122,.34), 0 5px 14px rgba(0,0,0,.22) !important;
}

/* The shared header is the single workspace header; page titles stay below it. */
body.unified-app:has(.account-layout) .account-layout,
body.unified-app:has(.oc-wrap) .oc-wrap,
body.unified-app:has(.proj-grid) > .app-shell > div:first-of-type {
    min-width: 0;
}

/* Profile edit and organization chart inherit the dashboard surfaces without
   changing their grids, controls, or data-driven interactions. */
body.unified-app:has(.account-layout) :where(.sb-profile-card, .sb-sub-card, .acc-page-header, .acc-form-card) {
    background: var(--bg-card) !important;
    border-color: rgba(45,108,168,.2) !important;
    color: var(--text-primary);
}
body.unified-app.organization-chart-ui :where(.oc-canvas, .oc-side, .oc-toolbar, .oc-canvas-controls) {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}
body.unified-app.organization-chart-ui .oc-canvas {
    background-image: radial-gradient(circle, rgba(45,108,168,.22) 1.5px, transparent 1.5px) !important;
    border-color: rgba(45,108,168,.3) !important;
}
html[data-theme="dark"] body.unified-app:has(.account-layout) :where(.sb-profile-card, .sb-sub-card, .acc-page-header, .acc-form-card),
html[data-theme="dark"] body.unified-app.organization-chart-ui :where(.oc-canvas, .oc-side, .oc-toolbar, .oc-canvas-controls) {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: rgba(79,143,196,.34) !important;
}

/* Keep the shared right navigation identical on every workspace page. */
body.unified-app .page-nav-drawer {
    width: var(--sidebar-current-width) !important;
    height: 100vh !important;
    padding: 22px 12px !important;
    gap: 7px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #dad1b6 !important;
    box-shadow: none !important;
}
body.unified-app .page-nav-drawer .btn {
    min-height: 40px !important;
    border-radius: 11px !important;
    font-size: .78rem !important;
    box-shadow: none !important;
}
body.unified-app .page-nav-rail.open .page-nav-toggle {
    right: var(--sidebar-current-width) !important;
}

/* The TeamAva mark belongs at the top of the open workspace sidebar. */
body.unified-app .page-nav-drawer {
    justify-content: flex-start !important;
}
body.unified-app .sidebar-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    padding: 4px 0 17px;
    text-decoration: none;
}
body.unified-app .sidebar-brand-logo .teamava-logo {
    width: 96px;
    height: 42px;
}
body.unified-app .page-nav-rail:not(.open) .sidebar-brand-logo {
    padding-inline: 0;
}
body.unified-app .page-nav-rail:not(.open) .sidebar-brand-logo .teamava-logo {
    transform: scale(.46);
    transform-origin: center;
    margin-inline: -26px;
}

/* Unified brand asset: use the supplied Team Ava artwork everywhere. */
body.unified-app .teamava-logo {
    display: block;
    width: 70px;
    height: 54px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body .teamava-brand-art {
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
}
body .teamava-avatar-fallback {
    display:block;
    width:32px !important;
    height:32px !important;
    padding:0 !important;
    object-fit:contain !important;
    border-radius:50% !important;
    background:#fff !important;
}
body.unified-app .nav-brand-icon {
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}
body.subscription-buy .nav-logo::before {
    display: none !important;
}
body.unified-app .sidebar-brand-logo .teamava-logo {
    width: 154px;
    height: 112px;
}
body.unified-app .page-nav-rail:not(.open) .sidebar-brand-logo .teamava-logo {
    transform: none;
    width: 54px;
    height: 54px;
    margin-inline: 0;
}

@media (max-width: 767px) {
    body.unified-app .sidebar-brand-logo { display: none; }
}

/* Personal notebook: a calm, roomier card with a clear save area. */
body.task-dashboard-theme .notebook-card {
    padding: 18px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,241,234,.84)) !important;
    border: 1px solid var(--card-outline-blue) !important;
    border-radius: 18px !important;
}
body.task-dashboard-theme .notebook-head { margin-bottom: 14px !important; }
body.task-dashboard-theme .notebook-head h2 { font-size: .95rem !important; color: var(--fw-green) !important; }
body.task-dashboard-theme .notebook-persist { display: block; margin-top: 4px; font-size: .61rem; color: var(--fw-muted-tan) !important; }
body.task-dashboard-theme .notebook-card .insight-icon { width: 32px; height: 32px; border-radius: 10px; color: var(--primary-blue-dark) !important; background: var(--primary-blue-soft) !important; }
body.task-dashboard-theme .notebook-card .note-form { gap: 8px !important; margin-bottom: 13px !important; }
body.task-dashboard-theme .notebook-card .note-form input { min-height: 38px; padding: 9px 12px !important; border-radius: 11px !important; border-color: #d9d4c9 !important; background: #fff !important; font-size: .72rem !important; }
body.task-dashboard-theme .notebook-card .note-form button { width: 38px; min-height: 38px; border-radius: 11px; background: var(--primary-blue-gradient) !important; font-weight: 800; box-shadow: 0 5px 12px rgba(18,59,112,.18); }
body.task-dashboard-theme .notebook-card .note-list { max-height: 230px; gap: 7px; padding-left: 2px; overflow-y: auto; }
body.task-dashboard-theme .notebook-card .note-row { min-height: 31px; padding: 4px 5px; gap: 8px; border-bottom: 1px solid rgba(181,155,122,.18); font-size: .71rem; }
body.task-dashboard-theme .notebook-card .note-row:last-child { border-bottom: 0; }
body.task-dashboard-theme .notebook-card .note-row span { color: var(--fw-ink); }
body.task-dashboard-theme .notebook-card .note-check { width: 23px; height: 23px; flex-basis: 23px; border-color: var(--primary-blue-solid); background: var(--primary-blue-soft); color: var(--primary-blue-dark); }

/* Dashboard hero and clock refinement.  The clock is the primary action, so
   it gets a confident, spacious panel instead of a squeezed mini-card. */
body.task-dashboard-theme .dash-hero {
    min-height: 326px !important;
    grid-template-columns: minmax(0, 1fr) 304px !important;
    gap: 34px !important;
    padding: 24px 30px !important;
    background:
        radial-gradient(circle at 28% 15%, rgba(255,255,255,.88), transparent 31%),
        radial-gradient(circle at 78% 90%, rgba(181,155,122,.16), transparent 27%),
        linear-gradient(125deg, #f8f7f2 0%, #f4f1ea 56%, #eaf2ff 100%) !important;
    border-color: #d5ded5 !important;
    box-shadow: 0 18px 42px rgba(18,59,112,.12) !important;
}
body.task-dashboard-theme .hero-content {
    min-height: 272px !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-right: 1px solid rgba(181,155,122,.28);
}
body.task-dashboard-theme .hero-content h1 {
    max-width: 700px;
    margin-top: 12px !important;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem) !important;
    line-height: 1.45 !important;
    color: var(--fw-green) !important;
}
body.task-dashboard-theme .hero-content > p:not(.kicker) { max-width: 640px; font-size: .86rem !important; line-height: 2 !important; }
body.task-dashboard-theme .hero-chips { margin-top: 22px !important; gap: 9px !important; }
body.task-dashboard-theme .hero-chips .chip { padding: 8px 13px !important; border-radius: 12px !important; box-shadow: 0 5px 15px rgba(18,59,112,.06) !important; }

body.task-dashboard-theme .timer-widget {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    justify-self: stretch !important;
    gap: 5px !important;
    padding: 12px 14px 14px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 34px rgba(18,59,112,.25), inset 0 1px 0 rgba(255,255,255,.17) !important;
}
body.task-dashboard-theme .timer-widget::before { opacity: .55; }
body.task-dashboard-theme .timer-day {
    top: 13px !important; right: 14px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.10) !important;
    font-size: .61rem !important;
}
body.task-dashboard-theme .timer-ring { --ring-size: 184px !important; margin-top: 10px !important; }
body.task-dashboard-theme .ring-track { stroke: rgba(255,255,255,.20) !important; stroke-width: 9; }
body.task-dashboard-theme .ring-progress { stroke: var(--fw-tan) !important; stroke-width: 9; filter: drop-shadow(0 3px 8px rgba(181,155,122,.38)); }
body.task-dashboard-theme .timer-center { padding: 16px !important; }
body.task-dashboard-theme .timer-label { font-size: .68rem !important; letter-spacing: .05em !important; }
body.task-dashboard-theme .live-clock { gap: 4px !important; margin: 9px 0 5px !important; }
body.task-dashboard-theme .clock-segment { min-width: 45px !important; gap: 4px !important; }
body.task-dashboard-theme .clock-value { font-size: 1.82rem !important; letter-spacing: -.05em !important; }
body.task-dashboard-theme .clock-segment small { font-size: .55rem !important; color: rgba(255,255,255,.72) !important; }
body.task-dashboard-theme .clock-sep { color: rgba(255,255,255,.66) !important; font-size: 1.15rem !important; }
body.task-dashboard-theme .timer-meta-outside { min-height: 20px; margin: 0 0 3px !important; font-size: .64rem !important; }
body.task-dashboard-theme .timer-widget form { max-width: 260px !important; gap: 8px !important; }
body.task-dashboard-theme .timer-widget .f-input { min-height: 38px; padding: 8px 10px !important; border-radius: 11px !important; background: rgba(255,255,255,.13) !important; }
body.task-dashboard-theme .timer-widget .btn { min-height: 38px !important; padding: 7px 9px !important; border-radius: 11px !important; font-size: .78rem !important; }
body.task-dashboard-theme .timer-widget #start-btn:not(:disabled) { background: var(--fw-tan) !important; border-color: var(--fw-tan) !important; color: #fff !important; }
body.task-dashboard-theme .timer-widget #end-btn:not(:disabled) { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.28) !important; }

@media (max-width: 900px) {
    body.task-dashboard-theme .dash-hero { grid-template-columns: 1fr !important; gap: 20px !important; }
    body.task-dashboard-theme .hero-content { min-height: 0 !important; border-right: 0; border-bottom: 1px solid rgba(181,155,122,.25); padding-bottom: 22px !important; }
    body.task-dashboard-theme .timer-widget { width: 100% !important; justify-self: stretch !important; }
}

@media (max-width: 560px) {
    body.task-dashboard-theme .dash-hero { padding: 18px !important; }
    body.task-dashboard-theme .hero-content h1 { font-size: 1.55rem !important; }
    body.task-dashboard-theme .timer-widget { width: 100% !important; height: auto !important; min-height: 0 !important; }
    body.task-dashboard-theme .timer-ring { --ring-size: 166px !important; }
}

/* Use the actual workspace width.  The dashboard should feel like an app,
   with its working area filling the center on large and medium screens. */
@media (min-width: 1201px) {
    body.task-dashboard-theme .app-shell { width: calc(100% - 32px) !important; max-width: 1680px !important; }
    body.task-dashboard-theme .main-header { width: calc(100% - 32px) !important; max-width: 1680px !important; }
    body.task-dashboard-theme .dash-hero { grid-template-columns: minmax(0, 1fr) 340px !important; gap: 42px !important; }
    body.task-dashboard-theme .timer-widget { width: 100% !important; height: auto !important; min-height: 0 !important; }
    body.task-dashboard-theme .timer-ring { --ring-size: 194px !important; }
}

@media (min-width: 701px) and (max-width: 1200px) {
    body.task-dashboard-theme .app-shell { width: calc(100% - 24px) !important; max-width: none !important; }
    body.task-dashboard-theme .main-header { width: calc(100% - 24px) !important; }
    body.task-dashboard-theme .dash-hero { grid-template-columns: minmax(0, 1fr) 286px !important; gap: 22px !important; min-height: 300px !important; }
    body.task-dashboard-theme .timer-widget { width: 100% !important; height: auto !important; min-height: 0 !important; }
    body.task-dashboard-theme .timer-ring { --ring-size: 168px !important; }
    body.task-dashboard-theme .hero-content { min-height: 250px !important; }
}

@media (max-width: 700px) {
    body.task-dashboard-theme .app-shell { width: calc(100% - 20px) !important; max-width: none !important; }
    body.task-dashboard-theme .main-header { width: calc(100% - 20px) !important; }
    body.task-dashboard-theme .dash-hero { width: 100% !important; margin: 0 !important; }
    body.task-dashboard-theme .dashboard-insights { width: 100% !important; }
    body.task-dashboard-theme .stat-grid { width: 100% !important; }
}

/* End-of-file cascade for the seven approved fixes. */
html.sidebar-precollapsed body.unified-app { padding-right: 68px; }
html.sidebar-precollapsed body.unified-app .page-nav-rail { --sidebar-current-width: 68px; }
body.unified-app .page-nav-toggle {
    width:36px; height:36px; padding:0; display:inline-flex;
    align-items:center; justify-content:center; color:#1d518c;
    background:#c8d9e2; border:1px solid rgba(29,81,140,.34);
    border-radius:11px; box-shadow:0 4px 10px rgba(18,59,112,.12);
}
body.unified-app .page-nav-toggle:hover { background:#b9cedb; }
body.unified-app .page-nav-toggle:focus-visible { outline:2px solid #1d518c; outline-offset:2px; }
body.task-dashboard-theme .timer-widget,
body.task-dashboard-theme .timer-widget * { color:#fff; }
body.task-dashboard-theme .timer-widget .f-input { color:#fff !important; }
body.task-dashboard-theme .timer-widget .f-input::placeholder { color:rgba(255,255,255,.78) !important; }
body.task-dashboard-theme .timer-widget #start-btn:not(:disabled) {
    background:var(--primary-blue-gradient) !important;
    border-color:rgba(126,190,244,.55) !important; color:#fff !important;
}
body.task-dashboard-theme .timer-widget #end-btn:not(:disabled) {
    background:rgba(11,43,82,.72) !important;
    border-color:rgba(255,255,255,.24) !important; color:#fff !important;
}
html[data-theme="dark"] body.unified-app {
    --bg-body:#0b1420; --bg-card:#111f2d; --bg-surface:#172a3b;
    --text-primary:#f3f7fb; --text-muted:#8798a8; --heading-color:#f3f7fb;
    --control-bg:#132231; --control-border:rgba(137,166,190,.25);
}
html[data-theme="dark"] body.unified-app :where(input,select,textarea,.f-input) {
    background:var(--control-bg) !important; color:var(--text-primary) !important;
    border-color:var(--control-border) !important;
}
html[data-theme="dark"] body.unified-app :where(input,select,textarea,.f-input)::placeholder { color:var(--text-muted) !important; }
html[data-theme="dark"] body.unified-app .page-nav-drawer { background:#111f2d !important; }
html[data-theme="dark"] body.unified-app .main-header { background:#101f2e !important; border-color:rgba(137,166,190,.20) !important; box-shadow:0 8px 24px rgba(0,0,0,.20) !important; }
html[data-theme="dark"] body.unified-app :where(.glass-card,.stat-card,.mini-stat,.card,.panel,.table-card,.table-shell,.insight-card) { border-color:rgba(137,166,190,.20) !important; }
html[data-theme="dark"] body.unified-app .global-search-field { background:#132231 !important; border-color:rgba(126,190,244,.26) !important; }
html[data-theme="dark"] body.unified-app .global-search-field:focus-within { border-color:rgba(126,190,244,.48) !important; }
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-outline { background:#c8d9e2 !important; border-color:rgba(255,255,255,.22) !important; color:#1d518c !important; }
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-outline:hover,
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-outline:focus-visible { background:#d7e5eb !important; color:#123b70 !important; }
html[data-theme="dark"] body.unified-app .page-nav-drawer > .btn-glow { background:var(--primary-blue-gradient) !important; border-color:rgba(126,190,244,.45) !important; color:#fff !important; }

/* Attendances page dark mode: replace the remaining light attendance
   surfaces with the same navy/blue levels used by the dashboard. */
html[data-theme="dark"] body.unified-app .profile-layout .side-profile-card,
html[data-theme="dark"] body.unified-app .profile-layout .profile-main > .glass-card,
html[data-theme="dark"] body.unified-app .profile-layout .profile-main > .attendance-stat-grid,
html[data-theme="dark"] body.unified-app .profile-layout .profile-main > .stat-grid .stat-card,
html[data-theme="dark"] body.unified-app .profile-layout .attendance-day-card {
    background: #111f2d !important;
    border-color: rgba(79,143,196,.28) !important;
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app .profile-layout .side-metric-row,
html[data-theme="dark"] body.unified-app .profile-layout .attendance-meta-item {
    background: #172a3b !important;
    border-color: rgba(79,143,196,.22) !important;
    color: #dce7f1 !important;
}
html[data-theme="dark"] body.unified-app .profile-layout :where(.side-profile-title,
    .attendance-day-head h3, .attendance-meta-item strong, .stat-card strong) {
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app .profile-layout :where(.side-profile-sub,
    .side-metric-row span, .attendance-day-no, .attendance-meta-item span,
    .stat-card span, .stat-card small, .kicker) {
    color: #c0ccd7 !important;
}
html[data-theme="dark"] body.unified-app .profile-layout .attendance-day-card.friday {
    border-color: #7f8fa0 !important;
}

/* Leave summary grid: the parent section must not keep the legacy white
   surface behind its dark metric cards. */
html:not([data-theme="dark"]) body.unified-app .profile-layout .profile-main > .leave-summary-stat-grid {
    background:transparent !important;
}
html[data-theme="dark"] body.unified-app .profile-layout .profile-main > .stat-grid {
    background: transparent !important;
}

/* Use the dashboard's horizontal header breathing room across all workspace
   pages. This changes only the shared header spacing, not its internals. */
@media (min-width: 1201px) {
    body.unified-app .main-header {
        width: calc(100% - 32px) !important;
        max-width: 1680px !important;
        margin-inline: auto !important;
    }
}
@media (min-width: 701px) and (max-width: 1200px) {
    body.unified-app .main-header {
        width: calc(100% - 24px) !important;
        margin-inline: auto !important;
    }
}
@media (max-width: 700px) {
    body.unified-app .main-header {
        width: calc(100% - 20px) !important;
        margin-inline: auto !important;
    }
}

/* Profile page dark mode: remove the legacy green/white treatment and use
   the dashboard's navy surfaces and blue hero. */
html[data-theme="dark"] body.unified-app .top-accent {
    background: #123b70 !important;
    box-shadow: 0 2px 10px rgba(18,59,112,.28) !important;
}
html[data-theme="dark"] .top-accent {
    background: #123b70 !important;
}
html[data-theme="dark"] body.unified-app .pro-header,
html[data-theme="dark"] body.unified-app .pro-avc-banner {
    background: var(--primary-blue-gradient) !important;
}
html[data-theme="dark"] body.unified-app .pro-header::before {
    background: rgba(79,143,196,.12) !important;
}
html[data-theme="dark"] body.unified-app :where(.pro-avc, .pro-avc-body, .pro-nav,
    .pro-card, .pro-sc, .work-balance-card) {
    background: #111f2d !important;
    border-color: rgba(79,143,196,.28) !important;
    color: #f3f7fb !important;
    box-shadow: 0 9px 26px rgba(0,0,0,.20) !important;
}
html[data-theme="dark"] body.unified-app :where(.pro-name, .pro-sc-val, .pro-card-head h2,
    .pro-ii-val, .pro-tl-title, .pro-balance-value, .pro-avc-body .pro-kpi-n) {
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app :where(.pro-uname, .pro-sc-lbl, .pro-kpi-l,
    .pro-ii-lbl, .pro-tl-meta, .pro-prog-lbl, .pro-card p) {
    color: #aebdcb !important;
}
html[data-theme="dark"] body.unified-app :where(.pro-kpi, .pro-ii, .pro-prog-bar,
    .work-balance-value, .pro-bio) {
    background: #172a3b !important;
    border-color: rgba(79,143,196,.22) !important;
    color: #dce7f1 !important;
}
html[data-theme="dark"] body.unified-app .pro-nav-sep,
html[data-theme="dark"] body.unified-app .work-days-note,
html[data-theme="dark"] body.unified-app .pro-tl-item {
    border-color: rgba(137,166,190,.18) !important;
}
html[data-theme="dark"] body.unified-app .pro-table th,
html[data-theme="dark"] body.unified-app .pro-table td {
    border-color: rgba(137,166,190,.18) !important;
    color: #c0ccd7 !important;
}
html[data-theme="dark"] body.unified-app .pro-table tbody tr:hover td,
html[data-theme="dark"] body.unified-app .pro-table tbody tr:hover {
    background: #1b3144 !important;
    color: #f3f7fb !important;
}

/* Profile sidebar panel: use the same dark surface as the dashboard instead
   of the legacy green-tinted card treatment. */
html[data-theme="dark"] body.unified-app :where(.pro-avc, .pro-avc-body) {
    background: #111f2d !important;
    border-color: rgba(79,143,196,.28) !important;
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app :where(.pro-avc-body .pro-name, .pro-avc-body .pro-kpi-n) {
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app :where(.pro-avc-body .pro-uname, .pro-avc-body .pro-kpi-l) {
    color: #9fb0c5 !important;
}

/* Workspace account pages: remove the old green/white surfaces in dark mode. */
html[data-theme="dark"] body.unified-app.organization-ui,
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) {
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(.organization-nav, .organization-panel,
    .fw-employees-header, .fw-employee-list-card, .profile-sidebar, .side-profile-card,
    .profile-main, .glass-card, .table-wrap, .table-shell, .pos-summary-card, .pm-dialog),
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(.chat-layout-page,
    .chat-sidebar-panel, .chat-main-panel) {
    background: #111f2d !important;
    border-color: rgba(79,143,196,.30) !important;
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(.organization-explainer,
    .organization-filters, .organization-empty, .settings-tabs, .settings-panel,
    .pos-sidebar-item, .pm-body, .pm-tabs),
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(.chat-sidebar-head,
    .chat-search-wrap, .chat-user-row, .chat-header, .chat-input-area, .chat-file-preview) {
    background: #172a3b !important;
    border-color: rgba(137,166,190,.25) !important;
    color: #c0ccd7 !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(h1,h2,h3,h4,.kicker,
    .organization-page-head h1, .fw-employees-header h1, .side-profile-title,
    .pos-sc-count, .pm-title),
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(h1,h2,h3,h4,
    .chat-user-name, .chat-header-name, .chat-select-state) {
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(p, label, .organization-explainer,
    .organization-page-head p, .fw-employees-header .card-head p, .side-profile-sub,
    .settings-label-hint, .settings-field-hint, .organization-empty p, td, th),
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(p, label,
    .chat-last-preview, .chat-time, .chat-status-text, .chat-start-hint) {
    color: #aebdcb !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(input, select, textarea,
    .f-input, .pm-input, .settings-textarea),
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(input, textarea,
    .f-input, .chat-textarea) {
    background: #132231 !important;
    border-color: rgba(137,166,190,.32) !important;
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(input, textarea, select)::placeholder,
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(input, textarea)::placeholder {
    color: #8fa0af !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(table, .data-table) td,
html[data-theme="dark"] body.unified-app.organization-ui :where(table, .data-table) th {
    border-color: rgba(137,166,190,.20) !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(.oc-canvas, .oc-side,
    .oc-toolbar, .oc-root-drop, .oc-zoom-bar, .oc-modal, .oc-select, .oc-search,
    .oc-tab-panel, .oc-emp-list) {
    background: #111f2d !important;
    border-color: rgba(79,143,196,.30) !important;
    color: #c0ccd7 !important;
}
html[data-theme="dark"] body.unified-app.organization-ui :where(.oc-title h1, .oc-side-head,
    .oc-detail-modal .dn, .oc-modal h2, .oc-node-name) {
    color: #f3f7fb !important;
}
html[data-theme="dark"] body.unified-app.organization-ui .btn-outline {
    background: #132231 !important;
    border-color: rgba(79,143,196,.34) !important;
    color: #cfe0ec !important;
}
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(.chat-user-row:hover,
    .chat-row-active, .chat-input-box-wrap) {
    background: #1d3448 !important;
}
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) :where(.chat-user-row a,
    .chat-back-row a, .chat-header-info strong, .chat-shortcut-item) {
    color: #dbe7f1 !important;
}
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) .chat-shortcut-item {
    background: #1d3448 !important;
}
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) .chat-bubble-wrap.theirs .chat-bubble {
    background: #1d3448 !important;
    color: #e6eef5 !important;
    border-color: rgba(137,166,190,.25) !important;
}
html[data-theme="dark"] body.unified-app:has(.chat-layout-page) .chat-bubble-wrap.mine .chat-bubble {
    background: #245b91 !important;
    color: #fff !important;
}

/* Subscription portal and purchase pages use the legacy `theme-dark` hook. */
html.theme-dark body.portal-theme,
html.theme-dark body.subscription-buy,
html.theme-dark body.invoice-page {
    background: #0b1420 !important;
    color: #f3f7fb !important;
}
html.theme-dark body.portal-theme :where(.nav, .sb, .card, .sub-card, .plan,
    .profile-side, .modal),
html.theme-dark body.subscription-buy :where(nav, .plan-card, .modal),
html.theme-dark body.invoice-page .card {
    background: #111f2d !important;
    border-color: rgba(79,143,196,.30) !important;
    color: #f3f7fb !important;
}
html.theme-dark body.portal-theme :where(.info-cell, .dash-mini, .meta-tag,
    .profile-side-item, .profile-badge, .ni-ico),
html.theme-dark body.subscription-buy :where(.modal-plan-summary, .btn-cancel),
html.theme-dark body.invoice-page :where(.back, th) {
    background: #172a3b !important;
    border-color: rgba(137,166,190,.28) !important;
    color: #cfe0ec !important;
}
html.theme-dark body.portal-theme :where(h1,h2,h3,h4,.card-title,.info-val,
    .plan-name,.dash-mini-value,.sb-name,.kpi-n),
html.theme-dark body.subscription-buy :where(h1,h2,h3,.plan-name),
html.theme-dark body.invoice-page :where(.head h1, td:first-child, td:nth-child(5)) {
    color: #f3f7fb !important;
}
html.theme-dark body.portal-theme :where(p, small, .info-label, .plan-dur,
    .sub-plan, .sb-email, .sb-lbl, .kpi-l),
html.theme-dark body.subscription-buy :where(.subtitle, .plan-dur, .plan-emp,
    .plan-price span, .modal p),
html.theme-dark body.invoice-page :where(td, .empty) {
    color: #aebdcb !important;
}
html.theme-dark body.portal-theme :where(input, textarea, select),
html.theme-dark body.subscription-buy :where(input, textarea, select) {
    background: #132231 !important;
    border-color: rgba(137,166,190,.32) !important;
    color: #f3f7fb !important;
}
html.theme-dark body.subscription-buy .plan-card.selected,
html.theme-dark body.subscription-buy .modal-plan-summary {
    background: #173858 !important;
}
html.theme-dark body.invoice-page th {
    background: #172a3b !important;
    color: #cfe0ec !important;
}
html.theme-dark body.invoice-page td {
    border-color: rgba(137,166,190,.20) !important;
}

/* Subscription portal navigation: the legacy portal rules did not restyle
   its menu links, so inactive labels became nearly invisible and the active
   item stayed light. */
html.theme-dark body.portal-theme .sb,
html.theme-dark body.portal-theme .sb-nav {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.30) !important;
}
html.theme-dark body.portal-theme .ni {
    background:transparent !important;
    color:#aebdcb !important;
}
html.theme-dark body.portal-theme .ni:hover {
    background:#1d3448 !important;
    color:#f3f7fb !important;
}
html.theme-dark body.portal-theme .ni.active {
    background:#245b91 !important;
    color:#fff !important;
    box-shadow:inset -3px 0 #7ebef4 !important;
}
html.theme-dark body.portal-theme .ni-ico {
    background:#172a3b !important;
    color:#cfe0ec !important;
}
html.theme-dark body.portal-theme .ni:hover .ni-ico,
html.theme-dark body.portal-theme .ni.active .ni-ico {
    background:#2d6fa8 !important;
    color:#fff !important;
}
html.theme-dark body.portal-theme .sb-lbl,
html.theme-dark body.portal-theme .kpi-l,
html.theme-dark body.portal-theme .sb-email,
html.theme-dark body.portal-theme .sb-ps-email {
    color:#8fa0af !important;
}
html.theme-dark body.portal-theme .sb-kpis,
html.theme-dark body.portal-theme .sb-sep,
html.theme-dark body.portal-theme .sb-foot {
    border-color:rgba(137,166,190,.22) !important;
}
html.theme-dark body.portal-theme .sb-profile-sel,
html.theme-dark body.portal-theme .sb-ps-drop {
    background:#172a3b !important;
    border-color:rgba(79,143,196,.30) !important;
}
html.theme-dark body.portal-theme .sb-ps-name,
html.theme-dark body.portal-theme .sb-ps-item {
    color:#dbe7f1 !important;
}
html.theme-dark body.portal-theme .nav-user .sb-profile-sel,
html.theme-dark body.portal-theme .nav-actions > a[title="صفحه اصلی"] {
    background:#172a3b !important;
    border-color:rgba(79,143,196,.34) !important;
    color:#dbe7f1 !important;
}
html.theme-dark body.portal-theme .nav-user-name,
html.theme-dark body.portal-theme .nav-user .sb-ps-chev {
    color:#dbe7f1 !important;
}
html.theme-dark body.portal-theme .htbl {
    background:#111f2d !important;
    color:#dbe7f1 !important;
}
html.theme-dark body.portal-theme .htbl th {
    background:#172a3b !important;
    color:#c0ccd7 !important;
    border-color:rgba(137,166,190,.24) !important;
}
html.theme-dark body.portal-theme .htbl td {
    background:#111f2d !important;
    color:#dbe7f1 !important;
    border-color:rgba(137,166,190,.20) !important;
}
html.theme-dark body.portal-theme .htbl tr:hover td {
    background:#1d3448 !important;
}

/* Workspace page: its cards and tabs are defined with light inline/component
   colors in account.html, so give every workspace state the same dark surface
   and readable text contrast as the rest of the subscription portal. */
html.theme-dark body.portal-theme .wk-tabs {
    background:#132231 !important;
    border:1px solid rgba(79,143,196,.30) !important;
}
html.theme-dark body.portal-theme .wk-tab {
    color:#aebdcb !important;
}
html.theme-dark body.portal-theme .wk-tab:hover {
    background:#1d3448 !important;
    color:#f3f7fb !important;
}
html.theme-dark body.portal-theme .wk-tab.active {
    background:#245b91 !important;
    color:#fff !important;
    box-shadow:0 2px 10px rgba(0,0,0,.28) !important;
}
html.theme-dark body.portal-theme .wk-tab .tab-cnt {
    background:#29435b !important;
    color:#cfe0ec !important;
}
html.theme-dark body.portal-theme .wk-tab.active .tab-cnt {
    background:#3b82f6 !important;
    color:#fff !important;
}
html.theme-dark body.portal-theme .wk-card {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.30) !important;
    color:#f3f7fb !important;
}
html.theme-dark body.portal-theme .wk-card:hover {
    background:#172a3b !important;
    border-color:#4f8fc4 !important;
    box-shadow:0 4px 20px rgba(0,0,0,.30) !important;
}
html.theme-dark body.portal-theme .wk-name,
html.theme-dark body.portal-theme .wk-empty h2,
html.theme-dark body.portal-theme .wk-card [style*="color:#0f172a"],
html.theme-dark body.portal-theme .wk-card [style*="color: #0f172a"] {
    color:#f3f7fb !important;
}
html.theme-dark body.portal-theme .wk-meta,
html.theme-dark body.portal-theme .wk-empty p,
html.theme-dark body.portal-theme .inv-from,
html.theme-dark body.portal-theme .wk-card [style*="color:#64748b"],
html.theme-dark body.portal-theme .wk-card [style*="color: #64748b"] {
    color:#aebdcb !important;
}
html.theme-dark body.portal-theme .wk-card [style*="color:#94a3b8"],
html.theme-dark body.portal-theme .wk-card [style*="color: #94a3b8"] {
    color:#9fb2c2 !important;
}
html.theme-dark body.portal-theme .wk-avatar {
    background:#1d3448 !important;
}
html.theme-dark body.portal-theme .wk-progress-bar {
    background:#29435b !important;
}
html.theme-dark body.portal-theme .wk-badge.green {
    background:#173a31 !important;
    color:#86efac !important;
}
html.theme-dark body.portal-theme .wk-badge.red {
    background:#3b2028 !important;
    color:#fda4af !important;
}
html.theme-dark body.portal-theme .wk-badge.amber {
    background:#3b2e18 !important;
    color:#fcd34d !important;
}
html.theme-dark body.portal-theme .wk-badge.purple {
    background:#30204b !important;
    color:#d8b4fe !important;
}
html.theme-dark body.portal-theme .wk-badge.gray {
    background:#29435b !important;
    color:#c0ccd7 !important;
}
html.theme-dark body.portal-theme .wk-btn.ghost {
    background:#132231 !important;
    border-color:rgba(79,143,196,.34) !important;
    color:#cfe0ec !important;
}
html.theme-dark body.portal-theme .wk-btn.ghost:hover {
    background:#1d3448 !important;
    color:#fff !important;
}
html.theme-dark body.portal-theme .inv-card {
    background:#3b2e18 !important;
    border-color:rgba(252,211,77,.32) !important;
}
html.theme-dark body.portal-theme .inv-card [style*="color:#1e293b"],
html.theme-dark body.portal-theme .inv-card [style*="color: #1e293b"] {
    color:#f3f7fb !important;
}
html.theme-dark body.portal-theme .wk-empty-ico,
html.theme-dark body.portal-theme .inv-card > div:first-child {
    background:#1d3448 !important;
}
html.theme-dark body.portal-theme #no-active-banner {
    color:#f3f7fb !important;
}

/* Purchase page: neutralize the redesign's light glass surfaces and inline
   form colors while keeping the blue conversion actions prominent. */
html.theme-dark body.subscription-buy nav {
    background:#111f2d !important;
    border-bottom-color:rgba(79,143,196,.30) !important;
    box-shadow:0 4px 22px rgba(0,0,0,.22) !important;
}
html.theme-dark body.subscription-buy .nav-logo {
    color:#dbe7f1 !important;
}
html.theme-dark body.subscription-buy nav a[style*="color:var(--text-muted)"],
html.theme-dark body.subscription-buy nav a[style*="color: var(--text-muted)"] {
    color:#aebdcb !important;
}
html.theme-dark body.subscription-buy nav a[style*="background:#eff6ff"],
html.theme-dark body.subscription-buy nav a[style*="background: #eff6ff"] {
    background:#172a3b !important;
    border-color:rgba(79,143,196,.34) !important;
    color:#bfdbfe !important;
}
html.theme-dark body.subscription-buy .eyebrow {
    color:#86c9a7 !important;
}
html.theme-dark body.subscription-buy .heading-note {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.30) !important;
}
html.theme-dark body.subscription-buy .heading-note strong {
    color:#f3f7fb !important;
}
html.theme-dark body.subscription-buy .heading-note small {
    color:#aebdcb !important;
}
html.theme-dark body.subscription-buy .note-icon {
    background:#3b2e18 !important;
    color:#fcd34d !important;
}
html.theme-dark body.subscription-buy .current-sub {
    box-shadow:0 16px 30px rgba(0,0,0,.28) !important;
}
html.theme-dark body.subscription-buy .expired-banner {
    background:#3b2028 !important;
    border-color:rgba(253,164,175,.30) !important;
    color:#fda4af !important;
}
html.theme-dark body.subscription-buy .benefit {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.30) !important;
    color:#f3f7fb !important;
}
html.theme-dark body.subscription-buy .benefit small,
html.theme-dark body.subscription-buy .plans-heading p,
html.theme-dark body.subscription-buy .vat-note {
    color:#aebdcb !important;
}
html.theme-dark body.subscription-buy .benefit-icon {
    background:#173858 !important;
    color:#93c5fd !important;
}
html.theme-dark body.subscription-buy .vat-note {
    background:#173a31 !important;
}
html.theme-dark body.subscription-buy .plan-card {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.30) !important;
    color:#f3f7fb !important;
    box-shadow:0 9px 25px rgba(0,0,0,.24) !important;
}
html.theme-dark body.subscription-buy .plan-card::after {
    background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 34%) !important;
}
html.theme-dark body.subscription-buy .plan-card:hover {
    background:#172a3b !important;
    border-color:#4f8fc4 !important;
    box-shadow:0 18px 34px rgba(0,0,0,.32) !important;
}
html.theme-dark body.subscription-buy .plan-card.featured {
    border-color:#4f8fc4 !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.22),0 13px 30px rgba(0,0,0,.28) !important;
}
html.theme-dark body.subscription-buy .plan-card.selected {
    background:#173858 !important;
    border-color:#60a5fa !important;
}
html.theme-dark body.subscription-buy .plan-dur,
html.theme-dark body.subscription-buy .plan-emp,
html.theme-dark body.subscription-buy .plan-price span,
html.theme-dark body.subscription-buy .plan-card [style*="color:var(--text-muted)"],
html.theme-dark body.subscription-buy .plan-card [style*="color: var(--text-muted)"] {
    color:#aebdcb !important;
}
html.theme-dark body.subscription-buy .plan-features {
    border-top-color:rgba(137,166,190,.22) !important;
}
html.theme-dark body.subscription-buy .plan-features li::before {
    color:#86efac !important;
}
html.theme-dark body.subscription-buy .modal-overlay {
    background:rgba(3,10,18,.72) !important;
}
html.theme-dark body.subscription-buy .modal {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.38) !important;
    color:#f3f7fb !important;
    box-shadow:0 26px 70px rgba(0,0,0,.48) !important;
}
html.theme-dark body.subscription-buy .modal h2,
html.theme-dark body.subscription-buy .modal label {
    color:#f3f7fb !important;
}
html.theme-dark body.subscription-buy .modal p,
html.theme-dark body.subscription-buy #seats-max-hint,
html.theme-dark body.subscription-buy #modal-plan-dur {
    color:#aebdcb !important;
}
html.theme-dark body.subscription-buy .modal-plan-summary {
    background:#173858 !important;
    border-color:rgba(96,165,250,.38) !important;
}
html.theme-dark body.subscription-buy .modal-plan-summary .name {
    color:#f3f7fb !important;
}
html.theme-dark body.subscription-buy :where(#modal-workspace-name,#modal-seats) {
    background:#132231 !important;
    border-color:rgba(137,166,190,.34) !important;
    color:#f3f7fb !important;
}
html.theme-dark body.subscription-buy :where(#modal-workspace-name,#modal-seats)::placeholder {
    color:#8fa0af !important;
}
html.theme-dark body.subscription-buy #price-breakdown {
    background:#132231 !important;
    border-color:rgba(137,166,190,.28) !important;
    color:#dbe7f1 !important;
}
html.theme-dark body.subscription-buy #price-breakdown [style*="color:#64748b"],
html.theme-dark body.subscription-buy #price-breakdown [style*="color: #64748b"] {
    color:#aebdcb !important;
}
html.theme-dark body.subscription-buy #price-breakdown [style*="color:#0a3d7a"],
html.theme-dark body.subscription-buy #price-breakdown [style*="color: #0a3d7a"] {
    color:#93c5fd !important;
}
html.theme-dark body.subscription-buy #price-breakdown [style*="border-top"] {
    border-top-color:rgba(137,166,190,.28) !important;
}

/* Attendance page refresh.  Everything is scoped to attendance-page so the
   shared profile, card and button components keep their existing behavior on
   every other account screen. */
body.attendance-page {
    --attendance-surface:rgba(255,255,255,.78);
    --attendance-surface-soft:rgba(245,248,251,.88);
    --attendance-border:rgba(45,108,168,.18);
    --attendance-primary:#2d6ca8;
    --attendance-primary-dark:#123b70;
    --attendance-text:#123b70;
    --attendance-muted:#718399;
}
body.attendance-page .attendance-page-shell {
    display:block;
    width:100%;
    max-width:none;
}
body.attendance-page .attendance-top-card {
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(280px,1.3fr) auto;
    align-items:center;
    gap:22px;
    min-height:112px;
    padding:18px 20px;
    margin-bottom:14px;
    background:var(--attendance-surface);
    border:1px solid var(--attendance-border);
    border-radius:18px;
    box-shadow:0 6px 20px rgba(18,59,112,.07);
    backdrop-filter:blur(14px);
}
body.attendance-page .attendance-top-identity { min-width:0; }
body.attendance-page .attendance-top-identity .profile-identity { align-items:center; }
body.attendance-page .attendance-top-identity .profile-avatar {
    width:56px;
    height:56px;
    flex:0 0 56px;
}
body.attendance-page .attendance-top-identity .chip {
    padding:4px 9px;
    border-radius:999px;
    font-size:.68rem;
}
body.attendance-page .attendance-top-summary { min-width:0; }
body.attendance-page .attendance-top-summary .kicker {
    margin:0 0 4px;
    color:var(--attendance-muted);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.02em;
}
body.attendance-page .attendance-top-summary h1 {
    margin:0 0 5px;
    color:var(--attendance-text);
    font-size:1.28rem;
    line-height:1.35;
}
body.attendance-page .attendance-top-summary p:last-child {
    margin:0;
    color:var(--attendance-muted);
    font-size:.76rem;
    line-height:1.7;
}
body.attendance-page .attendance-top-actions {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    flex-wrap:wrap;
}
body.attendance-page .attendance-top-actions .btn {
    min-height:36px;
    padding:7px 11px;
    border-radius:10px;
    font-size:.72rem;
    white-space:nowrap;
}
body.attendance-page .attendance-content {
    display:grid;
    gap:14px;
}
body.attendance-page .attendance-stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    width:100%;
}
body.attendance-page .attendance-stat-grid .stat-card {
    min-height:112px;
    padding:16px;
    border:1px solid var(--attendance-border);
    border-radius:16px;
    background:var(--attendance-surface);
    box-shadow:0 4px 14px rgba(18,59,112,.06);
}
body.attendance-page .attendance-stat-grid .stat-card span,
body.attendance-page .attendance-stat-grid .stat-card small {
    color:var(--attendance-muted);
    font-size:.72rem;
}
body.attendance-page .attendance-stat-grid .stat-card strong {
    display:block;
    margin:10px 0 5px;
    color:var(--attendance-text);
    font-size:1.28rem;
    line-height:1.2;
}
body.attendance-page .attendance-days-shell {
    padding:14px;
    border:1px solid var(--attendance-border);
    border-radius:18px;
    background:var(--attendance-surface);
    box-shadow:0 6px 20px rgba(18,59,112,.07);
}
body.attendance-page .month-nav-bar {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    min-height:58px;
    gap:10px;
    margin-bottom:14px;
    padding:8px 10px;
    border:1px solid var(--attendance-border);
    border-radius:14px;
    background:var(--attendance-surface-soft) !important;
    color:var(--attendance-text);
    box-shadow:none;
}
body.attendance-page .month-nav-btn {
    min-height:36px;
    padding:7px 10px;
    border:1px solid var(--attendance-border);
    border-radius:10px;
    background:rgba(255,255,255,.55);
    color:var(--attendance-primary-dark);
    font-size:.72rem;
}
body.attendance-page .month-nav-btn:hover:not(.disabled) {
    background:#eaf3fb;
    color:var(--attendance-primary-dark);
}
body.attendance-page .month-nav-center { min-width:0; }
body.attendance-page .month-nav-title {
    color:var(--attendance-text);
    font-size:1rem;
    font-weight:800;
}
body.attendance-page .month-nav-sub {
    color:var(--attendance-muted);
    font-size:.7rem;
    opacity:1;
}
body.attendance-page .attendance-days-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:start;
    gap:10px;
}
body.attendance-page .attendance-day-card {
    display:grid;
    gap:9px;
    min-width:0;
    min-height:0;
    padding:13px;
    border:1px solid var(--attendance-border);
    border-radius:16px;
    background:rgba(255,255,255,.82) !important;
    box-shadow:0 4px 14px rgba(18,59,112,.06);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.attendance-page .attendance-day-card:hover {
    transform:translateY(-1px);
    border-color:rgba(45,108,168,.32);
    box-shadow:0 8px 20px rgba(18,59,112,.10);
}
body.attendance-page .attendance-day-card.selected {
    background:rgba(231,242,252,.96) !important;
    border:2px solid var(--attendance-primary);
    box-shadow:0 6px 18px rgba(45,108,168,.12);
}
body.attendance-page .attendance-day-card.friday {
    border:1px solid rgba(45,108,168,.18);
}
body.attendance-page .attendance-day-card.friday.today {
    box-shadow:inset 0 0 0 2px rgba(45,108,168,.22),0 6px 18px rgba(18,59,112,.08);
}
body.attendance-page .attendance-day-card.friday .attendance-day-no,
body.attendance-page .attendance-day-card.friday .attendance-day-head h3 {
    color:var(--attendance-primary-dark);
}
body.attendance-page .attendance-day-head h3 {
    color:var(--attendance-text);
    font-size:.88rem;
}
body.attendance-page .attendance-day-no,
body.attendance-page .attendance-day-caption {
    color:var(--attendance-muted);
    font-size:.68rem;
}
body.attendance-page .attendance-day-meta { gap:7px; }
body.attendance-page .attendance-meta-item {
    min-width:0;
    padding:8px;
    border:1px solid rgba(45,108,168,.12);
    border-radius:11px;
    background:rgba(245,248,251,.76);
}
body.attendance-page .attendance-meta-item span {
    color:var(--attendance-muted);
    font-size:.66rem;
}
body.attendance-page .attendance-meta-item strong {
    color:var(--attendance-text);
    font-size:.8rem;
}
body.attendance-page .attendance-day-caption { font-size:.65rem; }
body.attendance-page .attendance-session-item {
    padding:8px;
    border:1px solid rgba(45,108,168,.12);
    border-radius:11px;
    background:rgba(248,250,252,.72);
}
body.attendance-page .attendance-session-item.is-active {
    background:rgba(255,244,230,.82);
    border-color:rgba(213,139,81,.25);
}
body.attendance-page .attendance-session-content strong { color:var(--attendance-text);font-size:.76rem; }
body.attendance-page .attendance-session-content small { color:var(--attendance-muted);font-size:.67rem; }
body.attendance-page .attendance-empty-state {
    padding:9px 8px;
    color:var(--attendance-muted);
    background:rgba(245,248,251,.72);
    border-color:rgba(45,108,168,.16);
    font-size:.68rem;
}

@media (min-width:1440px) {
    body.attendance-page .attendance-days-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1024px) and (max-width:1439px) {
    body.attendance-page .attendance-days-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:700px) and (max-width:1023px) {
    body.attendance-page .attendance-days-grid,
    body.attendance-page .attendance-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:699px) {
    body.attendance-page .attendance-top-card { grid-template-columns:1fr;gap:10px;padding:14px; }
    body.attendance-page .attendance-top-actions { justify-content:stretch; }
    body.attendance-page .attendance-top-actions .btn { flex:1 1 auto; }
    body.attendance-page .attendance-stat-grid,
    body.attendance-page .attendance-days-grid { grid-template-columns:1fr; }
    body.attendance-page .month-nav-bar { grid-template-columns:1fr;gap:6px; }
    body.attendance-page .month-nav-center { order:-1; }
    body.attendance-page .month-nav-btn { justify-content:center; }
}

html[data-theme="dark"] body.attendance-page {
    --attendance-surface:rgba(17,31,45,.92);
    --attendance-surface-soft:#172a3b;
    --attendance-border:rgba(126,190,244,.22);
    --attendance-text:#f3f7fb;
    --attendance-muted:#c0ccd7;
}
html[data-theme="dark"] body.attendance-page .attendance-top-card,
html[data-theme="dark"] body.attendance-page .attendance-stat-grid .stat-card,
html[data-theme="dark"] body.attendance-page .attendance-days-shell {
    background:var(--attendance-surface) !important;
    border-color:var(--attendance-border) !important;
    color:var(--attendance-text) !important;
    box-shadow:0 6px 20px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-top-summary .kicker,
html[data-theme="dark"] body.attendance-page .attendance-top-summary p:last-child,
html[data-theme="dark"] body.attendance-page .attendance-stat-grid .stat-card span,
html[data-theme="dark"] body.attendance-page .attendance-stat-grid .stat-card small {
    color:var(--attendance-muted) !important;
}
html[data-theme="dark"] body.attendance-page .month-nav-bar {
    background:var(--attendance-surface-soft) !important;
    border-color:var(--attendance-border) !important;
}
html[data-theme="dark"] body.attendance-page .month-nav-btn {
    background:#132231 !important;
    border-color:var(--attendance-border) !important;
    color:#dbe7f1 !important;
}
html[data-theme="dark"] body.attendance-page .month-nav-btn:hover:not(.disabled) {
    background:#1d3448 !important;
    color:#fff !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card,
html[data-theme="dark"] body.attendance-page .attendance-day-card.selected {
    background:#111f2d !important;
    border-color:var(--attendance-border) !important;
    color:var(--attendance-text) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card:hover {
    background:#172a3b !important;
    border-color:rgba(126,190,244,.38) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-meta-item,
html[data-theme="dark"] body.attendance-page .attendance-session-item,
html[data-theme="dark"] body.attendance-page .attendance-empty-state {
    background:#172a3b !important;
    border-color:rgba(126,190,244,.18) !important;
    color:#dbe7f1 !important;
}
html[data-theme="dark"] body.attendance-page .attendance-session-item.is-active {
    background:#3b2e18 !important;
    border-color:rgba(252,211,77,.25) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.friday,
html[data-theme="dark"] body.attendance-page .attendance-day-card.friday.today {
    border-color:rgba(126,190,244,.30) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-action-btn {
    background:#132231 !important;
    border-color:rgba(126,190,244,.26) !important;
    color:#bfdbfe !important;
}
html[data-theme="dark"] body.attendance-page .attendance-action-btn.delete {
    background:#3b2028 !important;
    color:#fda4af !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card :where(.attendance-day-no,.attendance-day-caption,
    .attendance-meta-item span,.attendance-session-content small,.attendance-empty-state) {
    color:#c0ccd7 !important;
}
html[data-theme="dark"] body.attendance-page .attendance-top-identity .chip {
    background:#173858 !important;
    border-color:rgba(126,190,244,.24) !important;
    color:#dbe7f1 !important;
}

/* The add-attendance plus must stay legible against its blue button surface. */
body.attendance-page .attendance-add-trigger {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    min-height:34px;
    padding:5px 10px;
    border:1px solid var(--primary-blue-solid) !important;
    border-radius:10px;
    background:var(--primary-blue-gradient) !important;
    color:#fff !important;
    font-size:1.05rem;
    font-weight:900;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
}
body.attendance-page .attendance-add-trigger:hover {
    background:var(--primary-blue-dark) !important;
    color:#fff !important;
}
body.unified-app.attendance-page:not(.task-dashboard-theme) .attendance-add-trigger,
html[data-theme="dark"] body.unified-app.attendance-page:not(.task-dashboard-theme) .attendance-add-trigger {
    color:#fff !important;
}
body.unified-app.attendance-page:not(.task-dashboard-theme) .attendance-add-trigger:hover,
html[data-theme="dark"] body.unified-app.attendance-page:not(.task-dashboard-theme) .attendance-add-trigger:hover {
    color:#fff !important;
}

/* Use the shared blue accent for the add-attendance modal as well; the
   component's legacy add variant was still using an emerald header. */
body.attendance-page .atp-mhead--add {
    background:var(--primary-blue-gradient) !important;
}

/* Compact day cards: preserve all information while reducing vertical
   scrolling through the month. */
body.attendance-page .attendance-day-card {
    gap:6px;
    padding:10px;
}
body.attendance-page .attendance-day-head { gap:7px; }
body.attendance-page .attendance-day-head h3 { margin-top:2px; }
body.attendance-page .attendance-day-meta { gap:5px; }
body.attendance-page .attendance-meta-item {
    padding:6px 8px;
    border-radius:9px;
}
body.attendance-page .attendance-meta-item strong {
    margin-top:2px;
    font-size:.76rem;
}
body.attendance-page .attendance-day-meter {
    height:5px;
    margin-top:0;
}
body.attendance-page .attendance-day-caption {
    font-size:.61rem;
    line-height:1.3;
}
body.attendance-page .attendance-session-list { gap:5px; }
body.attendance-page .attendance-session-item {
    padding:6px 8px;
    border-radius:9px;
}
body.attendance-page .attendance-session-content { gap:1px; }
body.attendance-page .attendance-session-content strong { font-size:.72rem; }
body.attendance-page .attendance-session-content small { font-size:.63rem; }
body.attendance-page .attendance-action-btn {
    width:29px;
    height:29px;
    border-radius:8px;
}
body.attendance-page .attendance-day-card.is-empty .attendance-empty-state {
    padding:6px 7px;
    border-radius:8px;
    font-size:.63rem;
    line-height:1.35;
}

/* Every configured day off (weekly, company-specific or official) gets a
   calm red wash.  It remains fully actionable: the add button is not hidden
   or disabled by this styling. */
body.attendance-page .attendance-day-card.holiday {
    background:rgba(255,247,247,.90) !important;
    border-color:rgba(220,38,38,.22) !important;
}
body.attendance-page .attendance-day-card.holiday:hover {
    background:rgba(255,242,242,.98) !important;
    border-color:rgba(220,38,38,.34) !important;
}
body.attendance-page .attendance-day-card.holiday .attendance-day-no,
body.attendance-page .attendance-day-card.holiday .attendance-day-head h3 {
    color:#b4233b !important;
}
body.attendance-page .attendance-day-card.holiday .attendance-holiday-badge {
    background:#fde2e2 !important;
    border-color:#f5b7b7 !important;
    color:#b42318 !important;
}
body.attendance-page .attendance-day-card.holiday.today {
    box-shadow:inset 0 0 0 2px rgba(220,38,38,.18),0 5px 14px rgba(18,59,112,.06);
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday,
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday.selected {
    background:rgba(62,31,39,.82) !important;
    border-color:rgba(253,164,175,.28) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday:hover {
    background:rgba(75,35,45,.94) !important;
    border-color:rgba(253,164,175,.42) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday .attendance-day-no,
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday .attendance-day-head h3 {
    color:#fda4af !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday .attendance-holiday-badge {
    background:#5b2733 !important;
    border-color:rgba(253,164,175,.30) !important;
    color:#fecdd3 !important;
}

/* Attendance state colors: worked days are green, holidays always win over
   the worked state, and approved daily leave is read-only gray. */
body.attendance-page .attendance-day-card.has-attendance:not(.holiday):not(.daily-leave) {
    background:rgba(220,249,231,.98) !important;
    border-color:rgba(22,163,74,.52) !important;
    box-shadow:0 4px 14px rgba(22,101,52,.12) !important;
}
body.attendance-page .attendance-day-card.has-attendance:not(.holiday):not(.daily-leave):hover {
    background:rgba(232,250,239,.98) !important;
}
body.attendance-page .attendance-day-card.daily-leave,
body.attendance-page .attendance-day-card.daily-leave:hover {
    background:rgba(226,232,240,.96) !important;
    border-color:rgba(71,85,105,.48) !important;
    color:#64748b !important;
    filter:grayscale(.2);
}
body.attendance-page .attendance-day-card.daily-leave .attendance-add-trigger,
body.attendance-page .attendance-day-card.daily-leave .attendance-session-actions {
    display:none !important;
}
body.attendance-page .attendance-day-card.daily-leave .attendance-leave-badge {
    background:#cbd5e1 !important;
    border-color:#94a3b8 !important;
    color:#475569 !important;
}
body.attendance-page .attendance-sessions-toggle {
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:29px;
    padding:4px 9px;
    border:1px solid rgba(45,108,168,.36);
    border-radius:8px;
    background:linear-gradient(135deg,#e9f9b8,#c5e67b);
    border-color:rgba(123,155,37,.62);
    color:#3e5f12;
    font-size:.66rem;
    font-weight:800;
    cursor:pointer;
}
body.attendance-page .attendance-day-controls {
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}
body.attendance-page .attendance-jalali-input {
    display:flex;
    align-items:center;
    gap:6px;
}
body.attendance-page .attendance-jalali-input .f-input { flex:1; }
body.attendance-page .attendance-jalali-cal-btn {
    flex:0 0 38px;
    height:38px;
    border:1px solid rgba(45,108,168,.35);
    border-radius:9px;
    background:#dbeafe;
    color:#1d4ed8;
    cursor:pointer;
}
body.attendance-page .attendance-jalali-calendar {
    position:fixed;
    z-index:10050;
    width:288px;
    padding:14px;
    border:1px solid rgba(45,108,168,.38);
    border-radius:16px;
    background:#f8fafc;
    box-shadow:0 14px 30px rgba(15,31,52,.25);
    direction:ltr;
}
body.attendance-page .attendance-jalali-calendar-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
    color:#164b83;
}
body.attendance-page .attendance-jalali-calendar-head button,
body.attendance-page .attendance-jalali-days button {
    border:1px solid rgba(45,108,168,.22);
    border-radius:7px;
    background:#fff;
    color:#164b83;
    cursor:pointer;
}
body.attendance-page .attendance-jalali-calendar-head button { width:28px; height:26px; }
body.attendance-page .attendance-jalali-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
body.attendance-page .attendance-jalali-days button { min-height:27px; font-size:.72rem; }
body.attendance-page .attendance-jalali-days button:hover,
body.attendance-page .attendance-jalali-calendar-head button:hover { background:#dbeafe; }
body.attendance-page .attendance-jalali-days button.is-today {
    background:#dbeafe;
    border-color:#60a5fa;
    color:#1d4ed8;
    font-weight:800;
}
body.attendance-page .attendance-jalali-calendar-foot {
    margin-top:10px;
    text-align:center;
}
body.attendance-page .attendance-jalali-calendar-foot button {
    border:0;
    border-radius:10px;
    padding:7px 22px;
    background:linear-gradient(135deg,#1687ff,#00b4d8);
    color:#fff;
    cursor:pointer;
    font-weight:700;
}
body.attendance-page .attendance-sessions-toggle:hover {
    background:linear-gradient(135deg,#f1ffc8,#d3ee8f);
    border-color:rgba(93,125,19,.75);
}
body.attendance-page .attendance-session-note {
    display:block;
    margin-top:3px;
    color:#61738a;
    font-size:.64rem;
    line-height:1.45;
    overflow-wrap:anywhere;
}
body.attendance-page .attendance-day-card {
    border-width:1.5px !important;
}
body.attendance-page .attendance-day-card.holiday {
    background:rgba(255,226,226,.98) !important;
    border-color:rgba(220,38,38,.48) !important;
    box-shadow:0 4px 14px rgba(185,28,28,.10) !important;
}
body.attendance-page .attendance-day-card.holiday:hover {
    background:rgba(255,216,216,1) !important;
}
body.attendance-page .attendance-add-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
body.attendance-page .attendance-add-actions .atp-save-btn,
body.attendance-page .attendance-add-actions .atp-leave-open,
body.attendance-page .attendance-add-actions .atp-leave-back {
    width:100%;
    margin-top:0;
}
body.attendance-page [hidden] {
    display:none !important;
}
body.attendance-page .attendance-add-actions .atp-leave-open {
    border:1px solid rgba(55,140,211,.75) !important;
    background:linear-gradient(135deg,#4b99d0,#194d8d) !important;
    color:#fff !important;
    box-shadow:0 8px 18px rgba(25,77,141,.18);
}
body.attendance-page .attendance-add-actions .atp-leave-open:hover {
    background:linear-gradient(135deg,#5aa8df,#235da0) !important;
}
body.attendance-page .attendance-leave-pane {
    padding-top:4px;
}
html:not([data-theme="dark"]) body.attendance-page .attendance-leave-mode .atp-mhead {
    background:#f8fafc !important;
    border-bottom:1px solid rgba(45,108,168,.18) !important;
}
body.attendance-page .attendance-leave-mode .atp-mhead-icon { display:none; }
body.attendance-page .attendance-leave-mode .atp-mhead-text { margin-inline-start:0; }
html:not([data-theme="dark"]) body.attendance-page .attendance-leave-mode .atp-mhead-text h2 { color:#172a3b !important; }
html:not([data-theme="dark"]) body.attendance-page .attendance-leave-mode .atp-mhead-sub { color:#64748b !important; }
body.attendance-page .attendance-leave-mode .atp-dialog,
body.attendance-page .attendance-leave-mode .modal-dialog { max-width:660px !important; }
html:not([data-theme="dark"]) body.attendance-page .attendance-leave-mode .attendance-leave-pane {
    background:#f8f5ef;
    padding:18px 16px 12px;
    border-radius:0 0 18px 18px;
}
body.attendance-page .attendance-leave-mode .attendance-leave-pane .atp-note-row {
    gap:6px;
}
html[data-theme="dark"] body.attendance-page .atp-dialog {
    background:#111f2d !important;
    border:1px solid rgba(126,190,244,.25);
    color:#dbe7f1;
}
html[data-theme="dark"] body.attendance-page .atp-form {
    background:#111f2d !important;
    color:#dbe7f1;
}
html[data-theme="dark"] body.attendance-page .atp-time-tabs,
html[data-theme="dark"] body.attendance-page .atp-picker-zone,
html[data-theme="dark"] body.attendance-page .atp-manual-bar {
    background:#172a3b !important;
    border-color:rgba(126,190,244,.22) !important;
}
html[data-theme="dark"] body.attendance-page .atp-ttab.active {
    background:#203b52 !important;
}
html[data-theme="dark"] body.attendance-page .atp-ttab-val,
html[data-theme="dark"] body.attendance-page .atp-mpill,
html[data-theme="dark"] body.attendance-page .atp-drum-lbl,
html[data-theme="dark"] body.attendance-page .atp-note-row label,
html[data-theme="dark"] body.attendance-page .atp-manual-hint {
    color:#c0ccd7 !important;
}
html[data-theme="dark"] body.attendance-page .atp-ttab.active .atp-ttab-lbl,
html[data-theme="dark"] body.attendance-page .atp-ttab.active .atp-ttab-val {
    color:#60a5fa !important;
}
html[data-theme="dark"] body.attendance-page .attendance-leave-mode .atp-mhead {
    background:#172a3b !important;
    border-bottom-color:rgba(126,190,244,.24) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-leave-mode .atp-mhead-text h2 { color:#f3f7fb !important; }
html[data-theme="dark"] body.attendance-page .attendance-leave-mode .atp-mhead-sub { color:#aebdcb !important; }
html[data-theme="dark"] body.attendance-page .attendance-leave-mode .attendance-leave-pane {
    background:#111f2d !important;
}
html[data-theme="dark"] body.attendance-page .attendance-leave-mode .atp-close-btn {
    background:#203b52 !important;
    border-color:rgba(126,190,244,.40) !important;
    color:#f3f7fb !important;
}
html:not([data-theme="dark"]) body.attendance-page .attendance-leave-mode .atp-close-btn {
    background:#eef5fb !important;
    border-color:rgba(45,108,168,.28) !important;
    color:#164b83 !important;
}
body.attendance-page .attendance-jalali-calendar-head strong {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
}
body.attendance-page .attendance-jalali-calendar-head strong small {
    color:#2563eb;
    font-size:.72rem;
}
body.attendance-page .attendance-jalali-weekdays,
body.attendance-page .attendance-jalali-days { direction:rtl; }
body.attendance-page .attendance-jalali-weekdays {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
    margin-bottom:3px;
    text-align:center;
    color:#64748b;
    font-size:.68rem;
    font-weight:700;
}
body.attendance-page .attendance-leave-time-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.has-attendance:not(.holiday):not(.daily-leave) {
    background:rgba(25,83,57,.98) !important;
    border-color:rgba(134,239,172,.52) !important;
    box-shadow:0 4px 14px rgba(20,120,75,.16) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.has-attendance:not(.holiday):not(.daily-leave):hover {
    background:rgba(27,70,57,.98) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.daily-leave,
html[data-theme="dark"] body.attendance-page .attendance-day-card.daily-leave:hover {
    background:rgba(51,65,85,.90) !important;
    border-color:rgba(148,163,184,.30) !important;
    color:#cbd5e1 !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday,
html[data-theme="dark"] body.attendance-page .attendance-day-card.holiday.selected {
    background:rgba(92,40,51,.98) !important;
    border-color:rgba(253,164,175,.58) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.daily-leave .attendance-leave-badge {
    background:#475569 !important;
    border-color:#64748b !important;
    color:#e2e8f0 !important;
}
html[data-theme="dark"] body.attendance-page .attendance-sessions-toggle {
    background:linear-gradient(135deg,#b9d866,#8fb83e);
    border-color:rgba(190,225,91,.62);
    color:#233500;
}
html[data-theme="dark"] body.attendance-page .attendance-jalali-cal-btn,
html[data-theme="dark"] body.attendance-page .attendance-jalali-calendar {
    background:#172a3b;
    border-color:rgba(96,165,250,.42);
    color:#dbeafe;
}
html[data-theme="dark"] body.attendance-page .attendance-jalali-calendar-head,
html[data-theme="dark"] body.attendance-page .attendance-jalali-calendar-head button,
html[data-theme="dark"] body.attendance-page .attendance-jalali-days button {
    color:#dbeafe;
}
html[data-theme="dark"] body.attendance-page .attendance-jalali-calendar-head button,
html[data-theme="dark"] body.attendance-page .attendance-jalali-days button {
    background:#203b52;
    border-color:rgba(96,165,250,.28);
}
html[data-theme="dark"] body.attendance-page .attendance-sessions-toggle:hover {
    background:linear-gradient(135deg,#cbed76,#a3cf4c);
}
html[data-theme="dark"] body.attendance-page .attendance-session-note {
    color:#bfd0df;
}

/* Compact leave summary counters. */
body.leaves-page .leave-summary-stat-grid {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px;
    margin-bottom:10px;
}
body.leaves-page .leave-summary-stat-grid .stat-card {
    min-height:82px;
    padding:13px 16px;
    border-radius:14px;
}
body.leaves-page .leave-summary-stat-grid .stat-card span { font-size:.72rem; }
body.leaves-page .leave-summary-stat-grid .stat-card strong { font-size:1.45rem; }
body.leaves-page .leave-summary-stat-grid .stat-card small { display:none; }
html[data-theme="dark"] body.leaves-page .leave-summary-stat-grid .stat-card {
    background:#111f2d !important;
    border-color:rgba(79,143,196,.30) !important;
}
@media (max-width:700px) {
    body.leaves-page .leave-summary-stat-grid {
        grid-template-columns:1fr !important;
    }
}

/* Multiple sessions stay collapsed until the user asks to inspect them. */
body.attendance-page .attendance-sessions-collapsible {
    border:1px solid rgba(45,108,168,.14);
    border-radius:10px;
    background:rgba(248,250,252,.58);
    overflow:hidden;
}
body.attendance-page .attendance-sessions-collapsible > summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:30px;
    padding:6px 9px;
    color:var(--attendance-primary-dark);
    font-size:.68rem;
    font-weight:800;
    cursor:pointer;
    list-style:none;
}
body.attendance-page .attendance-sessions-collapsible > summary::-webkit-details-marker { display:none; }
body.attendance-page .attendance-sessions-collapsible > summary::before {
    content:'⌄';
    order:2;
    font-size:.9rem;
    line-height:1;
    transition:transform .15s ease;
}
body.attendance-page .attendance-sessions-collapsible[open] > summary::before { transform:rotate(180deg); }
body.attendance-page .attendance-sessions-summary-meta {
    margin-right:auto;
    color:var(--attendance-muted);
    font-size:.62rem;
    font-weight:600;
}
body.attendance-page .attendance-sessions-collapsible .attendance-session-list {
    padding:0 6px 6px;
}
html[data-theme="dark"] body.attendance-page .attendance-sessions-collapsible {
    background:#132231 !important;
    border-color:rgba(126,190,244,.20) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-sessions-collapsible > summary {
    color:#dbe7f1 !important;
}
html[data-theme="dark"] body.attendance-page .attendance-sessions-summary-meta {
    color:#c0ccd7 !important;
}

/* Keep today's card visually identifiable on the main attendance calendar. */
body.attendance-page .attendance-day-card.today:not(.has-attendance):not(.holiday):not(.daily-leave) {
    background:linear-gradient(145deg,#eff6ff,#dbeafe) !important;
    border:2px solid #2563eb !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.14),0 8px 22px rgba(37,99,235,.12) !important;
}
html[data-theme="dark"] body.attendance-page .attendance-day-card.today:not(.has-attendance):not(.holiday):not(.daily-leave) {
    background:linear-gradient(145deg,#173b67,#123054) !important;
    border-color:#60a5fa !important;
    box-shadow:0 0 0 3px rgba(96,165,250,.18),0 8px 22px rgba(0,0,0,.22) !important;
}

/* Final dark-mode contrast layer shared by every authenticated workspace page. */
body.unified-app .global-search-field {
    border-radius:999px !important;
    padding-inline:16px 11px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(235,244,250,.86)) !important;
    border:1px solid rgba(45,108,168,.20) !important;
    box-shadow:0 10px 26px rgba(18,59,112,.10),inset 0 1px 0 #fff !important;
}
body.unified-app .global-search-field input,
html[data-theme="dark"] body.unified-app .global-search-field input {
    border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;
}
body.unified-app .global-search-field kbd { border-radius:999px;padding:4px 8px; }
html[data-theme="dark"] body.unified-app .global-search-field {
    background:linear-gradient(135deg,#14283a,#102131) !important;
    border-color:rgba(120,180,224,.30) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.chat-user-row.is-online > a {
    background:linear-gradient(135deg,#e4f9ea,#d5f3df) !important;
    border:1px solid rgba(34,197,94,.28) !important;
    box-shadow:0 5px 16px rgba(22,163,74,.09);
}
html[data-theme="dark"] .chat-user-row.is-online > a {
    background:linear-gradient(135deg,#173d31,#164634) !important;
    border-color:rgba(74,222,128,.36) !important;
    color:#eafff0 !important;
}
html[data-theme="dark"] body.unified-app {
    background:#09131d !important;
    color:#dce7f1;
}
html[data-theme="dark"] body.unified-app .app-shell,
html[data-theme="dark"] body.unified-app main { color:#dce7f1; }
html[data-theme="dark"] body.unified-app :where(h1,h2,h3,h4,h5,h6,.brand-title,.card-title) { color:#f4f8fc !important; }
html[data-theme="dark"] body.unified-app :where(.glass-card,.card,.panel,.table-shell,.table-card,.acc-form-card,.acc-page-header,.proj-card,.pl-empty,.kanban-col,.k-modal) {
    background:rgba(16,31,45,.94) !important;
    border-color:rgba(125,158,184,.24) !important;
    color:#dce7f1 !important;
    box-shadow:0 10px 30px rgba(0,0,0,.20) !important;
}
html[data-theme="dark"] body.unified-app :where(table,tbody,tr,td) { color:#dce7f1; }
html[data-theme="dark"] body.unified-app :where(thead,th) { background:#172b3d !important;color:#bcd0e1 !important; }
html[data-theme="dark"] body.unified-app :where(.page-nav-drawer > .btn-outline,.page-nav-rail:not(.open) .page-nav-drawer > .btn-outline) {
    background:#172b3d !important;
    border-color:rgba(125,158,184,.25) !important;
    color:#9ac9ed !important;
    box-shadow:none !important;
}
html[data-theme="dark"] body.unified-app :where(.page-nav-drawer > .btn-outline:hover,.page-nav-drawer > .btn-outline:focus-visible) {
    background:#203b52 !important;color:#dff2ff !important;
}
html[data-theme="dark"] body.unified-app :where(.muted,.subtle,p,.proj-card-desc,.pm-note) { color:#aebdcc; }
html[data-theme="dark"] body.unified-app a { text-underline-offset:3px; }

/* Outer table cards keep the requested exact border in both themes. */
body.unified-app :where(.table-card,.table-shell,.attmgmt-card,.leave-management-table-card,.employee-table-card) {
    box-sizing:border-box;
    border:2px solid #887a7a !important;
    border-radius:18px !important;
    box-shadow:0 0 6px rgba(136,122,122,.42),0 5px 12px rgba(136,122,122,.18) !important;
}
html[data-theme="dark"] body.unified-app :where(.table-card,.table-shell,.attmgmt-card,.leave-management-table-card,.employee-table-card) {
    border-color:#887a7a !important;
    box-shadow:0 0 6px rgba(136,122,122,.34),0 5px 14px rgba(0,0,0,.22) !important;
}

/* Project subpages: use the available canvas instead of narrow centered columns. */
body.unified-app:has(.ep-wrap) .app-shell,
body.unified-app:has(.bl-wrap) .app-shell,
body.unified-app:has(.sprint-page) .app-shell,
body.unified-app:has(.pm-shell) .app-shell,
body.unified-app:has(.project-edit-shell) .app-shell {
    width:100% !important;
    max-width:none !important;
    padding:10px 22px 54px !important;
    box-sizing:border-box;
}
body.unified-app :where(.ep-wrap,.bl-wrap,.sprint-page,.pm-shell,.project-edit-shell) {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box;
}
body.unified-app :where(.ep-wrap,.bl-wrap,.sprint-page,.pm-shell) {
    padding:12px 0 30px !important;
}
body.unified-app :where(.ep-header,.bl-header,.sprint-page-header,.pm-head) {
    padding:15px 18px !important;
    margin-bottom:16px !important;
    border:1px solid rgba(45,108,168,.16);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,247,253,.78));
    box-shadow:0 8px 24px rgba(18,59,112,.07);
}
body.unified-app .ep-grid {
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) !important;
    gap:18px !important;
}
body.unified-app .ep-card {
    min-height:175px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
body.unified-app .bl-wrap .sprint-bar,
body.unified-app .bl-wrap .epic-group,
body.unified-app .sprint-card,
body.unified-app .pm-card,
body.unified-app .project-edit-shell .glass-card {
    width:100%;
    box-sizing:border-box;
}
body.unified-app .bl-wrap .sprint-bar {
    margin-bottom:16px;
}
body.unified-app .bl-wrap .epic-group {
    margin-bottom:16px !important;
}
body.unified-app .bl-task {
    min-height:60px;
    padding:12px 16px !important;
}
body.unified-app .sprint-page {
    padding-top:12px !important;
}
body.unified-app .sprint-card {
    max-width:none !important;
    padding:18px 20px !important;
}
body.unified-app .pm-row {
    grid-template-columns:minmax(220px,.85fr) minmax(0,2fr) !important;
}
body.unified-app .pm-controls {
    grid-template-columns:minmax(130px,1fr) minmax(120px,1fr) auto auto !important;
}
body.unified-app .project-edit-shell {
    padding:12px 0 30px !important;
}
body.unified-app .project-edit-shell .glass-card {
    max-width:900px;
    margin:0 auto;
    padding:24px 28px !important;
}
html[data-theme="dark"] body.unified-app :where(.ep-header,.bl-header,.sprint-page-header,.pm-head) {
    background:linear-gradient(135deg,#14283a,#102131);
    border-color:rgba(120,180,224,.26);
    box-shadow:0 8px 24px rgba(0,0,0,.20);
}
html[data-theme="dark"] body.unified-app :where(.ep-card,.bl-wrap .sprint-bar,.bl-wrap .epic-group,.bl-task,.sprint-card,.pm-card,.pm-row,.project-edit-shell .glass-card) {
    background:rgba(16,31,45,.94) !important;
    border-color:rgba(125,158,184,.24) !important;
    color:#dce7f1 !important;
}
@media (max-width:900px) {
    body.unified-app:has(.ep-wrap) .app-shell,
    body.unified-app:has(.bl-wrap) .app-shell,
    body.unified-app:has(.sprint-page) .app-shell,
    body.unified-app:has(.pm-shell) .app-shell,
    body.unified-app:has(.project-edit-shell) .app-shell { padding-inline:14px !important; }
    body.unified-app .pm-row { grid-template-columns:1fr !important; }
    body.unified-app .pm-controls { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:640px) {
    body.unified-app:has(.ep-wrap) .app-shell,
    body.unified-app:has(.bl-wrap) .app-shell,
    body.unified-app:has(.sprint-page) .app-shell,
    body.unified-app:has(.pm-shell) .app-shell,
    body.unified-app:has(.project-edit-shell) .app-shell { padding-inline:10px !important; }
    body.unified-app :where(.ep-header,.bl-header,.sprint-page-header,.pm-head) {
        padding:12px !important;
        align-items:flex-start;
    }
    body.unified-app .ep-grid { grid-template-columns:minmax(0,1fr) !important; }
    body.unified-app .bl-task { flex-wrap:wrap; gap:8px !important; }
    body.unified-app .bl-task-meta { width:100%; }
    body.unified-app .pm-controls { grid-template-columns:1fr !important; }
    body.unified-app .project-edit-shell .glass-card { padding:18px 14px !important; }
}