/* ============================================================================
   Daybreak - Chrome stylesheet (PR 8 Phase C)
   Holds the page-wrapper, header, sidebar, submenu, dashboard layout, stat
   cards, activity list, and entrance-animation rules that used to live in
   inline <style> blocks inside index.php and head.php.

   Token-driven via assets/themes/daybreak/css/_tokens.css. Legacy daybreak
   token names (--bg-color, --card-color, --accent-color, --text-primary,
   --text-secondary, --shadow-sm/md/lg, --btn-principal-text) all alias to
   the canonical tokens in _tokens.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   PR 8 Phase F.1 - Public pages (login, register, verification, forgot/reset)
   skip the admin chrome (no header/sidebar rendered). Override the admin
   _layout.css rules so the page doesn't have an 80px gap at the top or a
   260px sidebar offset.
   --------------------------------------------------------------------------- */
body.daybreak-public,
body.theme-new.daybreak-public {
    padding-top: 0 !important;
}
body.theme-new.daybreak-public #wrapper,
body.theme-new.daybreak-public .content-wrapper {
    margin-left: 0 !important;
    min-height: 100vh !important;
}

/* ---------------------------------------------------------------------------
   Modern Layout Structure (extracted from index.php inline <style>)
   --------------------------------------------------------------------------- */
html,
body {
    height: 100%;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    position: relative;
}

/* PR 8 Phase I.F+ - on login pages let login-2026.css own the chrome.
   chrome.css's body { display:flex; background-color:var(--bg-color) }
   was casting a light surface that hid the 2026 login scene gradient.
   Restore login-2026's expected body dark gradient (mirrors line 35-38
   of assets/css/login-2026.css) and reset display so .lg-shell can flex.

   Also force #content + #wrapper > .content fully visible on login pages.
   Admin's _layout.css stagger (opacity 0 → 1 on .pp-mounted) was making
   the form invisible if layout.js failed to add .pp-mounted (which can
   happen when nothing on the login page matches its selectors). */
body.lg-host {
    display: block !important;
    background:
        radial-gradient(circle at 50% 100%, rgba(0, 229, 141, 0.14), transparent 60%),
        radial-gradient(circle at 50% 0%, rgba(0, 229, 141, 0.06), transparent 50%),
        #050507 !important;
    color: #F0F0F0 !important;
}

body.lg-host #wrapper,
body.lg-host #wrapper > .content,
body.lg-host #content,
body.lg-host #content.content,
body.lg-host .main-container,
body.lg-host .public-content-area {
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
}

/* PR 8 Phase I.F+ - label + placeholder readability on login.
   Admin's _forms.css line 8:
       body.theme-new .control-label, body.theme-new label, body.theme-new .form-group > label {
           color: var(--text-main) !important;
       }
   That selector catches the 2026 login's .lg-field-label (the floating
   "Endereço de E-mail" / "Senha" text) and forces it to dark `#333`,
   which is invisible on the dark glass card. Restore the light color
   the login engine designed for. */
body.lg-host label,
body.lg-host .lg-field-label,
body.lg-host .lg-toggle-text,
body.lg-host .lg-caps-warning,
body.lg-host .lg-forgot {
    color: rgba(240, 240, 240, 0.85) !important;
}

/* When the field is empty (no value, no focus) the floating label sits
   inside the input and acts as the placeholder. It needs to be slightly
   dimmer than the focused state but still readable. */
body.lg-host .lg-field-input:placeholder-shown + .lg-field-label,
body.lg-host .lg-field-input:not(:focus):not(:-webkit-autofill) + .lg-field-label {
    color: rgba(240, 240, 240, 0.55) !important;
}

/* Once focused or filled, the label shrinks to a brighter accent color */
body.lg-host .lg-field-input:focus + .lg-field-label,
body.lg-host .lg-field-input:not(:placeholder-shown) + .lg-field-label {
    color: rgba(240, 240, 240, 0.85) !important;
}

/* Real ::placeholder attribute (some browsers still render it) */
body.lg-host input::placeholder,
body.lg-host textarea::placeholder,
body.lg-host .lg-field-input::placeholder,
body.lg-host .form-control::placeholder {
    color: rgba(240, 240, 240, 0.55) !important;
    opacity: 1;
}
body.lg-host input::-webkit-input-placeholder,
body.lg-host .lg-field-input::-webkit-input-placeholder {
    color: rgba(240, 240, 240, 0.55) !important;
}
body.lg-host input::-moz-placeholder,
body.lg-host .lg-field-input::-moz-placeholder {
    color: rgba(240, 240, 240, 0.55) !important;
    opacity: 1;
}
body.lg-host input:-ms-input-placeholder,
body.lg-host .lg-field-input:-ms-input-placeholder {
    color: rgba(240, 240, 240, 0.55) !important;
}

/* The input text itself - admin _forms.css also forces var(--text-main)
   which is dark in light mode. Force light text inside login inputs. */
body.lg-host .lg-field-input,
body.lg-host input[type="email"],
body.lg-host input[type="password"],
body.lg-host input[type="text"] {
    color: rgba(240, 240, 240, 0.95) !important;
}

#wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

#content {
    flex: 1;
    padding: 0;
    margin-left: 0;
    transition: margin-left 0.3s ease;
}

#content.has-sidebar {
    margin-left: 0;
    margin-right: 10px;
    margin-top: 0;
    transition: margin-left 0.3s ease;
}

/* PR 8 Phase I.B - the admin chrome (linked via assets/css/theme/_layout.css)
   already provides the page geometry: #wrapper has margin-left = sidebar-width,
   and #wrapper > .content has padding 1.5rem 2rem 2rem. Daybreak's legacy
   .main-container added ANOTHER layer (max-width: 1400px; margin: 0 auto;
   padding: 2rem) which pushed content far away from the sidebar with empty
   gutters on each side. Under the new chrome we neutralize it: .main-container
   becomes a transparent shell so admin's .content padding owns the layout.
   Also drop the legacy margin-right:10px on #content.has-sidebar so content
   fills the viewport edge-to-edge minus admin's standard 32px gutters. */
body.theme-new #content.has-sidebar {
    margin-right: 0;
}
body.theme-new .main-container {
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* PR 8 Phase I.B - the daybreak legacy wrapper hierarchy was:
       #wrapper > #content > .main-container > .page-header
                                              > .alerts-section
                                              > .content-area > .submenu-container > .submenu
                                                              > .template-content > <page>
   Each level had its own card-like styling (background, padding, border,
   shadow) which stacked into a thick gutter on the left + clipping on the
   right because everything inside admin's `.content` got nested in two
   more cards before reaching the actual `.panel_s` panels.

   Under the new chrome, neutralize the bespoke wrappers so admin's
   `.content` padding (1.5rem 2rem 2rem) + the rewritten panel markup
   (`.row > .col-md-12 > .panel_s`) own the layout. Each rule below is a
   wrapper that should now be transparent, not a card. */

body.theme-new .page-header {
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-new .page-header .page-title h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem 0;
    padding: 0;
    border: none;
    color: var(--text-heading);
}

body.theme-new .page-header .page-subtitle {
    font-size: .9rem;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

body.theme-new .page-header .page-subtitle::before {
    display: none;
}

body.theme-new .alerts-section {
    margin: 0 0 1rem 0;
    padding: 0;
}

body.theme-new .content-area {
    margin-top: 0;
    padding: 0;
    gap: 1rem;
}

/* .template-content was a card wrapping the page output. The new panels
   are already cards (.panel_s) so we drop the outer card and let panels
   sit on the page background directly. */
body.theme-new .template-content {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* .submenu-container is a tabs strip - admin uses .nav-tabs for this.
   Drop the card chrome here, keep the items styled as pills via the
   submenu-link rule below. */
body.theme-new .submenu-container {
    margin: 0 0 1rem 0;
}

/* PR 8 Phase I.F+ - module pages compat. Modules like geomarketing,
   saas_clients, omniu_studio, parceiros, file_manager render their own
   view files which use inexxus-25-era wrappers:
       .profile-page > .container > .row.profile-main-row > .col-lg-12 >
         .profile-section.card-element > .section-header + .profile-content >
           .form-section / .content-section / .dashboard-section

   Until each module's views are rewritten to admin patterns, neutralize
   the outer wrappers (so they don't fight the new chrome geometry) and
   re-paint the inner card-like sections as .panel_s equivalents. */

/* Outer page wrappers - make transparent so admin .content owns the gutter */
body.theme-new .profile-page,
body.theme-new .page-container,
body.theme-new .profile-main-row,
body.theme-new .page-main-row,
body.theme-new .profile-main-column,
body.theme-new .page-main-column {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
    width: auto !important;
}

/* Inner "section" containers - render like panels */
body.theme-new .profile-section,
body.theme-new .page-section,
body.theme-new .form-section,
body.theme-new .content-section {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.25rem;
    margin: 0 0 1rem 0;
}

/* Section header (title + actions) on legacy module pages */
body.theme-new .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    box-shadow: none;
}

body.theme-new .section-title {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

body.theme-new .section-title i {
    color: var(--primary-color);
}

body.theme-new .section-subtitle {
    margin: 0 0 .75rem 0;
    color: var(--text-heading);
    font-size: .95rem;
    font-weight: 600;
}

body.theme-new .section-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Legacy .input-field (used heavily by module forms) - paint like .form-control */
body.theme-new .input-field {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    padding: 0.55rem 0.9rem;
    width: 100%;
}

body.theme-new .input-field:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--primary-focus);
    outline: none;
}

body.theme-new .form-label {
    color: var(--text-heading);
    font-weight: 500;
    margin-bottom: .35rem;
    display: inline-block;
}

/* Common legacy button class used by older module pages */
body.theme-new .btn-principal {
    background-color: var(--primary-color);
    color: var(--btn-principal-text);
    border: 1px solid var(--primary-color);
}

body.theme-new .btn-principal:hover {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
    color: var(--btn-principal-text);
}

body.theme-new .btn-toggle {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

body.theme-new .btn-toggle.active {
    background: var(--primary-color);
    color: var(--btn-principal-text);
    border-color: var(--primary-color);
}

/* PR 8 Phase I.F+ - per-module known-bad patterns. Modules often ship
   inline-styled `color: #ffffff` on their hero text (designed assuming a
   dark page background) and `max-width: 1400px; margin: 0 auto` outer
   wrappers (which fight the new admin chrome geometry). Override the
   known offenders so they render correctly in both light and dark modes. */

/* OmniU Studio landing */
body.theme-new .omniu-studio-landing {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.theme-new .omniu-studio-landing .landing-header h1,
body.theme-new .omniu-studio-landing .landing-header p {
    color: var(--text-heading) !important;
}
body.theme-new .omniu-studio-landing .landing-header p {
    color: var(--text-muted) !important;
}
body.theme-new .omniu-studio-landing .feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
    transition: box-shadow var(--transition-speed) var(--ease-standard),
                transform var(--transition-speed) var(--ease-standard);
}
body.theme-new .omniu-studio-landing .feature-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
body.theme-new .omniu-studio-landing .feature-card h3 {
    color: var(--text-heading);
}
body.theme-new .omniu-studio-landing .feature-card p {
    color: var(--text-muted);
}
body.theme-new .omniu-studio-landing .feature-link {
    text-decoration: none;
    display: block;
}

/* SaaS Clients pages */
body.theme-new .saas-clients-page,
body.theme-new .saas-leads-page,
body.theme-new .saas-expenses-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Geomarketing pages */
body.theme-new .geomarketing-page,
body.theme-new .geomarketing-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Catch-all for module headers that hardcoded white text. If a module
   page is inside the new chrome (body.theme-new) and the user is on light
   mode, white text is invisible. Force any inline color: #fff / #ffffff
   on common header tags inside module wrappers back to the theme tokens. */
body.theme-new [class*="-landing"] h1[style*="color: #fff"],
body.theme-new [class*="-landing"] h1[style*="color:#fff"],
body.theme-new [class*="-landing"] h2[style*="color: #fff"],
body.theme-new [class*="-landing"] h2[style*="color:#fff"] {
    color: var(--text-heading) !important;
}
body.theme-new [class*="-landing"] p[style*="color: #fff"],
body.theme-new [class*="-landing"] p[style*="color:#fff"],
body.theme-new [class*="-landing"] span[style*="color: #fff"],
body.theme-new [class*="-landing"] span[style*="color:#fff"] {
    color: var(--text-muted) !important;
}

/* Empty state styling for module pages that use .empty-state */
body.theme-new .empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

body.theme-new .empty-state i,
body.theme-new .empty-state .empty-icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: .75rem;
    display: block;
}

body.theme-new .empty-state h4,
body.theme-new .empty-state .empty-title {
    margin: 0 0 .25rem 0;
    color: var(--text-heading);
    font-weight: 600;
}

body.theme-new .empty-state p,
body.theme-new .empty-state .empty-message {
    margin: 0;
    color: var(--text-muted);
}

body.theme-new .submenu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: .25rem;
}

.main-container {
    padding: 2rem;
    padding-bottom: 80px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Public Content Area - For login and verification pages (scene engine
   centers its glass card in the viewport). */
.public-content-area {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* Public Preview Area - For document-preview public links (contract /
   invoice / proposal / estimate / public ticket). Wraps the view in a
   normal Bootstrap container so the .preview-top-wrapper grid renders
   correctly. No flex centering — the document flows from the top of the
   viewport like a normal page. */
.public-preview-area {
    width: 100%;
    min-height: 100vh;
    padding: 24px 0 80px;
    background: var(--bg-color);
    color: var(--text-main);
}

/* Document-preview styling ported from inexxus/css/style.css (lines
   1683-1724). The global assets/css/style.css doesn't ship these — they
   were per-theme. Daybreak's style.css is purpose-built for the new
   dashboard chrome and doesn't carry them either, so without these rules
   the sticky action-button header, logo column and overall preview-top
   spacing render with no background, no shadow, and the wrong margin. */
.preview-sticky-header {
    z-index: 1;
    background: var(--bg-card);
    color: var(--text-main);
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08);
    width: 100% !important;
    left: 0 !important;
}
@media (max-width: 767px) {
    .preview-sticky-header {
        padding-right: 20px;
        padding-left: 20px;
    }
}
.preview-sticky-header .sticky-hidden { display: none !important; }
.preview-sticky-header .sticky-visible { display: inherit !important; }
.mobile .preview-sticky-header { padding: 15px; }

@media (min-width: 1281px), (min-width: 1025px) and (max-width: 1280px) {
    .preview-top-wrapper {
        margin-top: 25px;
    }
}

/* Logo block inside .preview-top-wrapper — make sure the image scales
   into the .col-md-3 column without overflowing the panel. */
.preview-top-wrapper .estimate-html-logo img,
.preview-top-wrapper .invoice-html-logo img,
.preview-top-wrapper .contract-html-logo img,
.preview-top-wrapper .proposal-html-logo img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Page Header
   --------------------------------------------------------------------------- */
.page-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-bottom: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    border-color: transparent;
    text-align: left !important;
    margin-top: initial !important;
}

.page-title {
    flex: 1;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.page-title h1 {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: none;
    text-shadow: none;
    border: none;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.page-subtitle {
    color: var(--accent-color);
    font-size: 1rem;
    margin: 0.75rem 0 1rem 0;
    font-weight: 600;
    line-height: 1.3;
    opacity: 1;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    display: block !important;
    border: none;
    text-align: left !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    position: relative;
    padding-left: 1rem;
}

.page-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    border-radius: 2px;
}

/* Override any CSS that might be affecting page-title and page-subtitle */
.page-title h1,
.page-title p,
.page-subtitle,
.page-subtitle p {
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    width: 100% !important;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 2rem;
    align-self: flex-start;
}

.search-container {
    min-width: 300px;
}

/* ---------------------------------------------------------------------------
   Alerts Section
   --------------------------------------------------------------------------- */
.alerts-section {
    margin-bottom: 1.5rem;
    z-index: 1000;
    position: relative;
    transition: all 0.3s ease;
}

.alerts-section:empty {
    display: none;
    margin-bottom: 0;
    height: 0;
    overflow: hidden;
}

.alerts-section:not(:empty) {
    display: block !important;
}

.modern-alert {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   Content Area
   --------------------------------------------------------------------------- */
.content-area {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 80px;
    margin-top: -1rem;
}

/* ---------------------------------------------------------------------------
   Submenu
   --------------------------------------------------------------------------- */
.submenu-container {
    margin-bottom: 1rem;
}

.submenu {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--card-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.submenu-item { flex: 1; }

.submenu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0.75rem;
    margin: 0.5rem;
}

.submenu-link:hover {
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    transform: translateY(-2px);
}

.submenu-link i { font-size: 1.1rem; }

/* ---------------------------------------------------------------------------
   Template Content
   --------------------------------------------------------------------------- */
.template-content {
    background-color: var(--card-color);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* ---------------------------------------------------------------------------
   Dashboard Grid Layout
   --------------------------------------------------------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-section {
    background-color: var(--card-color);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.dashboard-section:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i { color: var(--accent-color); }

.section-actions {
    display: flex;
    gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Stats Grid
   --------------------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--accent-color) 5%, var(--card-color)));
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--btn-principal-text);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Projects Grid
   --------------------------------------------------------------------------- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.project-stat-card {
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.project-stat-card:hover {
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
    transform: translateX(4px);
}

.project-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.project-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.project-stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Recent Activity
   --------------------------------------------------------------------------- */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.activity-content { flex: 1; }

.activity-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
}

.activity-time {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Background canvas (legacy starfield)
   --------------------------------------------------------------------------- */
#background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ---------------------------------------------------------------------------
   Modern Card / Input / Button / Sidebar logo (was head.php inline)
   --------------------------------------------------------------------------- */
.card-element {
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    transition: all 0.3s ease;
    padding: 1.5rem;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.card-element:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.5rem;
}

.sidebar-header {
    overflow: hidden;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.input-field {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    width: 100%;
    transition: all 0.2s ease;
}

.input-field:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.btn-principal {
    background-color: var(--accent-color);
    color: var(--btn-principal-text);
    text-align: center;
}

.btn-principal:hover:not(:disabled) {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: color-mix(in srgb, var(--bg-color) 80%, var(--border-color));
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--border-color);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   Theme Toggle floating button
   --------------------------------------------------------------------------- */
#theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 9999px;
    z-index: 50;
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

#theme-toggle:hover {
    background-color: var(--border-color);
    transform: scale(1.1);
}

#theme-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-primary);
}

#theme-icon-light { display: block !important; }
#theme-icon-dark  { display: none  !important; }
body.dark #theme-icon-light { display: none  !important; }
body.dark #theme-icon-dark  { display: block !important; }
#theme-icon-light.hidden { display: none !important; }
#theme-icon-dark.hidden  { display: none !important; }

/* ---------------------------------------------------------------------------
   Font Awesome icon fixes
   --------------------------------------------------------------------------- */
.fas,
.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.fa-bolt:before { content: "\f0e7" !important; }

.section-header i,
.section-title i {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    font-size: 1.3rem !important;
    color: var(--accent-color) !important;
}

.section-title i,
.section-header i,
.dashboard-section .section-title i,
.dashboard-section .section-header i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
}

body:not(.dark) .section-title i,
body:not(.dark) .section-header i,
body:not(.dark) .dashboard-section .section-title i,
body:not(.dark) .dashboard-section .section-header i {
    background-color: var(--accent-color) !important;
    color: white !important;
}

body.dark .section-title i,
body.dark .section-header i,
body.dark .dashboard-section .section-title i,
body.dark .dashboard-section .section-header i {
    color: var(--accent-color) !important;
}

body.dark a.btn.btn-principal i {
    color: var(--btn-principal-text) !important;
}

[data-dashboard-section] .section-title i,
[data-dashboard-section] .section-header i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
}

body:not(.dark) [data-dashboard-section] .section-title i,
body:not(.dark) [data-dashboard-section] .section-header i {
    background-color: var(--accent-color) !important;
    color: white !important;
}

body.dark [data-dashboard-section] .section-title i,
body.dark [data-dashboard-section] .section-header i {
    background-color: transparent !important;
    color: var(--accent-color) !important;
}

/* ---------------------------------------------------------------------------
   Logo sizing
   --------------------------------------------------------------------------- */
.login-logo .company-logo,
.login-logo a img {
    max-height: 60px;
    max-width: 200px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* ---------------------------------------------------------------------------
   Modern Tables / Progress / Badges / Pagination / Breadcrumb / Alerts / Modals
   --------------------------------------------------------------------------- */
.modern-table {
    background-color: var(--card-color);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.modern-table thead th {
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border-bottom: 2px solid var(--accent-color);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem;
}

.modern-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modern-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.modern-progress {
    background-color: var(--border-color);
    border-radius: 9999px;
    overflow: hidden;
    height: 0.75rem;
}

.modern-progress .progress-bar {
    background-color: var(--accent-color);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.badge {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.75rem;
}

.badge-primary  { background-color: var(--accent-color);  color: var(--btn-principal-text); }
.badge-secondary{ background-color: var(--border-color);  color: var(--text-primary); }
.badge-success  { background-color: var(--success-color); color: white; }
.badge-danger   { background-color: var(--error-color);   color: white; }

.modern-pagination .page-link {
    color: var(--text-primary);
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.modern-pagination .page-link:hover {
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.modern-pagination .page-item.active .page-link {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--btn-principal-text);
}

.modern-breadcrumb {
    background-color: var(--card-color);
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.modern-breadcrumb .breadcrumb-item a {
    color: var(--accent-color);
    text-decoration: none;
}

.modern-breadcrumb .breadcrumb-item.active {
    color: var(--text-secondary);
}

.alert {
    border: none;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.alert-info    { background-color: var(--info-tint);    color: var(--info-color); }
.alert-success { background-color: var(--success-tint); color: var(--success-color); }
.alert-warning { background-color: var(--warning-tint); color: var(--warning-color); }
.alert-danger  { background-color: var(--danger-tint);  color: var(--danger-color); }

.modal-content {
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
}

.modal-header { border-bottom: 1px solid var(--border-color); padding: 1.5rem; }
.modal-body   { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--border-color); padding: 1.5rem; }
.modal-title  { color: var(--text-primary); font-weight: 600; }

body.light .modern-table thead th,
body.light .modern-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.form-control { height: auto; }

/* ---------------------------------------------------------------------------
   Animations (legacy daybreak page-load fade)
   --------------------------------------------------------------------------- */
.fade-in { animation: fadeIn 0.5s ease-in-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.slide-in-left { animation: slideInLeft 0.5s ease-out; }

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--accent-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg);  }
    100% { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Page entrance stagger (PR 8 Phase C.4)
   Per DOCS/theme-standards/04_ENTRANCE_AND_MOTION.md, header fades first
   (0ms), sidebar next (~80ms), content last (~160ms). Activation script in
   footer.php adds .pp-mounted on next frame, then transitions take over.
   Suppressed on login pages (body.lg-host owns its own scene paint).
   --------------------------------------------------------------------------- */
body.theme-new:not(.pp-mounted):not(.lg-host) #header,
body.theme-new:not(.pp-mounted):not(.lg-host) .app-sidebar,
body.theme-new:not(.pp-mounted):not(.lg-host) #content {
    opacity: 0;
}

body.theme-new.pp-mounted #header,
body.theme-new.pp-mounted .app-sidebar,
body.theme-new.pp-mounted #content {
    opacity: 1;
}

body.theme-new.pp-mounted #header      { transition: opacity 0.55s ease   0ms; }
body.theme-new.pp-mounted .app-sidebar { transition: opacity 0.55s ease  80ms; }
body.theme-new.pp-mounted #content     { transition: opacity 0.55s ease 160ms; }

@media (prefers-reduced-motion: reduce) {
    body.theme-new:not(.pp-mounted):not(.lg-host) #header,
    body.theme-new:not(.pp-mounted):not(.lg-host) .app-sidebar,
    body.theme-new:not(.pp-mounted):not(.lg-host) #content {
        opacity: 1;
    }
    body.theme-new.pp-mounted #header,
    body.theme-new.pp-mounted .app-sidebar,
    body.theme-new.pp-mounted #content {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Weather chip (PR 8 Phase C.6)
   Promoted from dashboard-only widget to a persistent header chip visible
   on every authenticated page. Markup lives in template_parts/navigation.php
   inside the header right cluster. JS shared with the dashboard widget via
   weather_widget.js (sessionStorage cache + dual paint).
   --------------------------------------------------------------------------- */
/* PR 8 Phase I - personalized greeting in the header center cluster.
   "Welcome back, <firstname>!" — replaces the dashboard welcome hero. */
body.theme-new .dk-header-greeting {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}
body.theme-new .dk-header-greeting__hello {
    color: var(--text-muted);
    font-weight: 400;
}
body.theme-new .dk-header-greeting__name {
    color: var(--text-heading);
    font-weight: 600;
}

.dk-weather-chip {
    /* PR 8 Phase H - lives inside the header right cluster now, no longer
       fixed-positioned. Sits in flow with the notif bell, theme switch,
       and profile dropdown. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-speed) var(--ease-standard),
                transform   var(--transition-speed) var(--ease-standard);
}

.dk-weather-chip:hover {
    background: var(--primary-tint);
    transform: translateY(-1px);
}

.dk-weather-chip__icon {
    color: var(--warning-color);
    font-size: 14px;
}

.dk-weather-chip__temp { font-weight: 600; }
.dk-weather-chip__city { color: var(--text-muted); }

.dk-weather-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elev);
    z-index: 1100;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--ease-standard),
                transform var(--transition-speed) var(--ease-standard);
}

.dk-weather-chip.is-open .dk-weather-popover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dk-weather-popover__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
    color: var(--text-main);
}

.dk-weather-popover__row span:first-child { color: var(--text-muted); }

@media (max-width: 768px) {
    .dk-weather-chip__city { display: none; }
}

@media (max-width: 480px) {
    .dk-weather-chip { display: none; }
}

body.lg-host .dk-weather-chip,
body.lg-host .dk-weather-popover {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   PR 8 Phase F.2 - Compat layer for legacy .nav-item markup that customer
   modules might inject via the customers_navigation_start/end hooks.
   Those modules wrote handlers that emit:
       <li class="nav-item"><a href="..." class="nav-link"><i></i><span></span></a></li>
   Inside the new .app-sidebar__list, those <li>s get default browser
   styling (bullet, indented). This compat layer makes legacy markup look
   like .app-sidebar__item without forcing module authors to rewrite.
   --------------------------------------------------------------------------- */
body.theme-new .app-sidebar__list .nav-item {
    list-style: none;
    margin: 1px 6px;
}

body.theme-new .app-sidebar__list .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text-main);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-speed) var(--ease-standard),
                color      var(--transition-speed) var(--ease-standard);
}

body.theme-new .app-sidebar__list .nav-item > .nav-link:hover {
    background: var(--primary-tint);
    color: var(--primary-color);
}

body.theme-new .app-sidebar__list .nav-item > .nav-link > .nav-icon,
body.theme-new .app-sidebar__list .nav-item > .nav-link > i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

body.theme-new .app-sidebar__list .nav-item > .nav-link > .nav-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.theme-new .app-sidebar__list .nav-item.active > .nav-link {
    background: var(--primary-color);
    color: var(--btn-principal-text);
    box-shadow: var(--shadow-soft);
}

/* Collapsed sidebar - hide labels on legacy items too */
body.theme-new.sidebar-collapsed .app-sidebar:not(:hover) .nav-item > .nav-link > .nav-text {
    display: none;
}

body.theme-new.sidebar-collapsed .app-sidebar:not(:hover) .nav-item > .nav-link {
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #content,
    #content.has-sidebar {
        margin-left: 0;
        margin-top: 0;
    }
    #content.has-sidebar { margin-right: 10px; }

    .main-container {
        padding: 1rem;
        padding-bottom: 80px;
    }

    .page-header {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        margin-bottom: 2rem;
        text-align: left;
    }

    .page-title h1 {
        font-size: 2.25rem;
        font-weight: 700;
    }

    .page-subtitle { font-size: 1.125rem; }

    .page-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .search-container {
        min-width: auto;
        width: 100%;
    }

    .content-area { padding-bottom: 60px; }
}

@media (max-width: 768px) {
    .main-container {
        padding: 0.75rem;
        padding-bottom: 80px;
        background: transparent !important;
    }

    .sidebar-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
        background-color: var(--card-color) !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 70px !important;
    }

    .content-area,
    .template-content {
        background: transparent !important;
    }

    .page-title h1 { font-size: 1.5rem; }

    .page-subtitle {
        font-size: 1rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .template-content { padding: 1rem; }

    .stats-grid    { grid-template-columns: 1fr; }
    .dashboard-grid{ grid-template-columns: 1fr; }
    .submenu       { flex-direction: column; }
    .submenu-item  { flex: none; }
    .submenu-link  { justify-content: flex-start; }

    .card-element {
        padding: 1rem;
        margin: 0.5rem;
    }

    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .login-logo .company-logo,
    .login-logo a img {
        max-height: 50px;
        max-width: 150px;
    }
}

@media (max-width: 360px) {
    .login-logo .company-logo,
    .login-logo a img {
        max-height: 40px;
        max-width: 120px;
    }
}