/* ==========================================================================
   Secupohl glass theme — web counterpart of the mobile v4 "liquid glass"
   redesign (secupohl-docu-app, branch redesign, src/ui/theme.ts).

   Styling only. Loaded last from include/style.ejs and layered over the
   PIXINVENT Modern Admin markup: no IDs, classes or scripts change.

   Theme selection: <html data-theme="dark|light|auto">, set before first
   paint by the inline script in include/style.ejs (localStorage key
   "secuapp-theme"). Dark is the native theme and the default when nothing is
   chosen; light is its inversion; auto follows prefers-color-scheme.

   Token names mirror theme.ts: page, ink, text2, muted, faint, border,
   glass-border, field-border, tile, action, action-text, action-soft,
   approved, open, issue, synced; radii card 28 / field 20 / button 24 /
   tile 18 / stat 24 / sheet 36 / chip 999.
   ========================================================================== */

/* -------- 1. Tokens ----------------------------------------------------- */
:root {
    color-scheme: dark;
    --secu-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    --secu-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --secu-font-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;

    --secu-page: #0B0B0B;
    --secu-page-login: #141414;
    --secu-hero: #161616;
    --secu-surface-solid: #1C1C1C;
    --secu-sheet-solid: #1E1E1E;
    --secu-ink: #F5F4F1;
    --secu-text2: #C9C7C2;
    --secu-muted: #97958F;
    --secu-faint: #7E7C77;
    --secu-chevron: #A9A7A1;
    --secu-border: #2C2C2C;
    --secu-glass-border: rgba(255,255,255,0.10);
    --secu-field-border: rgba(255,255,255,0.12);
    --secu-field-bg: rgba(255,255,255,0.05);
    --secu-tile: rgba(255,255,255,0.07);
    --secu-tile-hover: rgba(255,255,255,0.11);
    --secu-highlight: rgba(255,255,255,0.24);

    --secu-action: #FF6A13;
    --secu-action-text: #FF9A3D;
    --secu-action-soft: rgba(255,106,19,0.16);
    --secu-approved: #5BE3A2;
    --secu-approved-soft: rgba(61,214,140,0.14);
    --secu-approved-fill: #178A5B;
    --secu-open: #FF9A3D;
    --secu-open-soft: rgba(255,106,19,0.16);
    --secu-issue: #FF8A78;
    --secu-issue-soft: rgba(240,90,70,0.16);
    --secu-issue-fill: #C8321F;
    --secu-synced: #3DD68C;
    --secu-locked-bg: #F5F4F1;
    --secu-locked-text: #141414;

    --secu-topbar: rgba(11,11,11,0.86);
    --secu-bar: rgba(36,36,36,0.5);
    --secu-sheet: rgba(30,30,30,0.80);
    --secu-backdrop: rgba(20,20,20,0.55);

    --secu-glass-grad: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
    --secu-surface-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 1px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.35);
    --secu-primary-grad: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 50%);
    --secu-primary-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.12), 0 6px 16px rgba(255,106,19,0.18);
    --secu-secondary-bg: rgba(255,255,255,0.04);
    --secu-secondary-border: rgba(255,255,255,0.2);
    --secu-secondary-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
    --secu-sheet-shadow: 0 24px 60px rgba(0,0,0,0.6);
    --secu-page-glow: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255,106,19,0.18), transparent 70%), radial-gradient(ellipse 50% 35% at 0% 70%, rgba(255,106,19,0.08), transparent 70%), radial-gradient(ellipse 40% 30% at 90% 100%, rgba(255,255,255,0.05), transparent 70%);
    --secu-hero-glow: radial-gradient(ellipse 120% 90% at 100% 0%, rgba(255,106,19,0.22), transparent 55%), linear-gradient(115deg, transparent 62%, rgba(255,255,255,0.04) 62%, rgba(255,255,255,0.04) 70%, transparent 70%);
    --secu-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A9A7A1'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");

    --secu-radius-card: 28px;
    --secu-radius-field: 20px;
    --secu-radius-button: 24px;
    --secu-radius-tile: 18px;
    --secu-radius-stat: 24px;
    --secu-radius-sheet: 36px;
    --secu-radius-chip: 999px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --secu-page: #EFEDE8;
    --secu-page-login: #E9E6E0;
    --secu-hero: #161616;
    --secu-surface-solid: #FFFFFF;
    --secu-sheet-solid: #FBFAF8;
    --secu-ink: #141414;
    --secu-text2: #3A3936;
    --secu-muted: #6E6C67;
    --secu-faint: #8E8C87;
    --secu-chevron: #6E6C67;
    --secu-border: #DDDAD3;
    --secu-glass-border: rgba(20,20,20,0.08);
    --secu-field-border: rgba(20,20,20,0.16);
    --secu-field-bg: #FFFFFF;
    --secu-tile: rgba(20,20,20,0.05);
    --secu-tile-hover: rgba(20,20,20,0.09);
    --secu-highlight: rgba(255,255,255,0.9);

    --secu-action: #FF6A13;
    --secu-action-text: #D4530A;
    --secu-action-soft: rgba(255,106,19,0.14);
    --secu-approved: #178A5B;
    --secu-approved-soft: rgba(23,138,91,0.12);
    --secu-approved-fill: #178A5B;
    --secu-open: #C45400;
    --secu-open-soft: rgba(255,106,19,0.14);
    --secu-issue: #C8321F;
    --secu-issue-soft: rgba(200,50,31,0.10);
    --secu-issue-fill: #C8321F;
    --secu-synced: #178A5B;

    --secu-topbar: rgba(239,237,232,0.86);
    --secu-bar: rgba(255,255,255,0.6);
    --secu-sheet: rgba(255,255,255,0.86);
    --secu-backdrop: rgba(20,20,20,0.35);

    --secu-glass-grad: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
    --secu-surface-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.5), 0 10px 30px rgba(20,20,20,0.07);
    --secu-primary-grad: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 50%);
    --secu-primary-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.10), 0 6px 16px rgba(255,106,19,0.22);
    --secu-secondary-bg: rgba(255,255,255,0.6);
    --secu-secondary-border: rgba(20,20,20,0.18);
    --secu-secondary-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    --secu-sheet-shadow: 0 24px 60px rgba(20,20,20,0.18);
    --secu-page-glow: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255,106,19,0.12), transparent 70%), radial-gradient(ellipse 50% 35% at 0% 70%, rgba(255,106,19,0.05), transparent 70%);
    --secu-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236E6C67'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        color-scheme: light;
        --secu-page: #EFEDE8;
        --secu-page-login: #E9E6E0;
        --secu-hero: #161616;
        --secu-surface-solid: #FFFFFF;
        --secu-sheet-solid: #FBFAF8;
        --secu-ink: #141414;
        --secu-text2: #3A3936;
        --secu-muted: #6E6C67;
        --secu-faint: #8E8C87;
        --secu-chevron: #6E6C67;
        --secu-border: #DDDAD3;
        --secu-glass-border: rgba(20,20,20,0.08);
        --secu-field-border: rgba(20,20,20,0.16);
        --secu-field-bg: #FFFFFF;
        --secu-tile: rgba(20,20,20,0.05);
        --secu-tile-hover: rgba(20,20,20,0.09);
        --secu-highlight: rgba(255,255,255,0.9);
        --secu-action: #FF6A13;
        --secu-action-text: #D4530A;
        --secu-action-soft: rgba(255,106,19,0.14);
        --secu-approved: #178A5B;
        --secu-approved-soft: rgba(23,138,91,0.12);
        --secu-approved-fill: #178A5B;
        --secu-open: #C45400;
        --secu-open-soft: rgba(255,106,19,0.14);
        --secu-issue: #C8321F;
        --secu-issue-soft: rgba(200,50,31,0.10);
        --secu-issue-fill: #C8321F;
        --secu-synced: #178A5B;
        --secu-topbar: rgba(239,237,232,0.86);
        --secu-bar: rgba(255,255,255,0.6);
        --secu-sheet: rgba(255,255,255,0.86);
        --secu-backdrop: rgba(20,20,20,0.35);
        --secu-glass-grad: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
        --secu-surface-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.5), 0 10px 30px rgba(20,20,20,0.07);
        --secu-primary-grad: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 50%);
        --secu-primary-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.10), 0 6px 16px rgba(255,106,19,0.22);
        --secu-secondary-bg: rgba(255,255,255,0.6);
        --secu-secondary-border: rgba(20,20,20,0.18);
        --secu-secondary-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
        --secu-sheet-shadow: 0 24px 60px rgba(20,20,20,0.18);
        --secu-page-glow: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255,106,19,0.12), transparent 70%), radial-gradient(ellipse 50% 35% at 0% 70%, rgba(255,106,19,0.05), transparent 70%);
        --secu-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236E6C67'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
    }
}

/* -------- 2. Base: page, type, links ------------------------------------ */
html { background: var(--secu-page); }
html body,
html body.boxed-layout .app-content {
    background: var(--secu-page);
    color: var(--secu-ink);
    font-family: var(--secu-font);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
/* The page glow of the mobile design, fixed behind everything. */
html body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--secu-page-glow);
}

/* style.css forces PFCentroSlabPro / Square with !important; same selectors, later file. */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, th,
p, span, a, font, label, body, .btn, input, select, textarea, button, .table, .form-control {
    font-family: var(--secu-font) !important;
}
h1, h2, h3, .h1, .h2, .h3,
.card .card-title, .modal-title, .swal2-title,
.content-header-title, .secu-page-title {
    font-family: var(--secu-font-display) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.12;
    color: var(--secu-ink);
}
h4, h5, h6, .h4, .h5, .h6 { color: var(--secu-ink); font-weight: 700; }
h1, .h1 { font-size: 38px; }
h2, .h2 { font-size: 31px; }
h3, .h3 { font-size: 25px; }
h4, .h4 { font-size: 19px; }
h5, .h5 { font-size: 17px; }
h6, .h6 { font-size: 15px; }
p { color: var(--secu-text2); }
small, .small, .font-small-3, .font-small-2 { color: var(--secu-muted); }
.text-muted, .grey, .blue-grey, .blue-grey.lighten-2, .text-black-50, .grey.darken-2 { color: var(--secu-muted) !important; }
hr { border-top-color: var(--secu-border); }
a { color: var(--secu-action-text); }
a:hover, a:focus { color: var(--secu-action); text-decoration: none; }
.card-link, .card-link:hover { color: var(--secu-action-text); font-weight: 600; }
.secu-mono, .serial, .serial-no { font-family: var(--secu-font-mono) !important; }

::selection { background: var(--secu-action-soft); color: var(--secu-ink); }
:focus-visible { outline: 2px solid var(--secu-action); outline-offset: 2px; }
.btn:focus, .form-control:focus, .page-link:focus { box-shadow: none; }

/* Modern Admin colour utilities → design tokens (one action colour). */
.primary, .info { color: var(--secu-action-text) !important; }
.success { color: var(--secu-approved) !important; }
.warning { color: var(--secu-open) !important; }
.danger { color: var(--secu-issue) !important; }
.bg-primary, .bg-info { background-color: var(--secu-action) !important; color: #fff !important; }
.bg-success { background-color: var(--secu-approved-fill) !important; color: #fff !important; }
.bg-danger { background-color: var(--secu-issue-fill) !important; color: #fff !important; }
.bg-warning { background-color: var(--secu-open) !important; color: #141414 !important; }
.white, .bg-white { background-color: transparent !important; }
.border-grey, .border-lighten-3 { border-color: var(--secu-glass-border) !important; }
.box-shadow-2, .box-shadow-1, .box-shadow-3 { box-shadow: none !important; }

/* -------- 3. Shell: top bar, floating rail, content, footer ------------- */
.header-navbar,
.header-navbar.navbar-dark,
.header-navbar.navbar-light {
    background: var(--secu-topbar) !important;
}
.header-navbar .navbar-container,
.header-navbar .navbar-header { background: transparent !important; }
.header-navbar .navbar-header { z-index: 2; }
.header-navbar {
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--secu-glass-border);
}
.header-navbar.navbar-shadow { box-shadow: none; }
/* Brand: natural proportions, 44px tall, left edge on the rail's edge, centred in the bar. */
.header-navbar .navbar-header .navbar-brand .brand-logo { width: auto; max-width: none; height: 44px; max-height: 44px; }
@media (min-width: 992px) {
    .header-navbar .navbar-header { padding-left: 12px; }
    .header-navbar .navbar-header > .navbar-nav { height: 100%; align-items: center; flex-wrap: nowrap; }
    .header-navbar .navbar-header .navbar-brand { display: flex; align-items: center; margin: 0; padding: 0; height: 100%; }
}
.header-navbar .navbar-nav > li > a,
.header-navbar .navbar-nav .nav-link,
.header-navbar.navbar-dark .navbar-nav > li > a,
.header-navbar.navbar-dark .navbar-nav .nav-link,
.header-navbar .navbar-container .nav-link,
.header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name,
.header-navbar .navbar-header .nav-link {
    color: var(--secu-ink) !important;
}
.header-navbar .navbar-nav .nav-link:hover,
.header-navbar .navbar-header .nav-link:hover { color: var(--secu-action-text) !important; }
.header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name { font-weight: 600; }
.header-navbar .navbar-container ul.nav > li { display: flex; align-items: center; }
.header-navbar .navbar-container ul.nav > li.nav-item > a.dropdown-toggle { border-radius: var(--secu-radius-chip); }
.header-navbar .navbar-container ul.nav > li.nav-item > a.dropdown-toggle:hover { background: var(--secu-tile); }
.avatar { border-radius: var(--secu-radius-chip); }
.avatar.no-pic { background: var(--secu-tile) !important; }
.avatar.avatar-online i { background-color: var(--secu-synced) !important; border-color: var(--secu-page) !important; }

/* The sidebar becomes a floating glass rail (desktop); the overlay menu on small screens stays flush. */
.main-menu,
.main-menu.menu-dark,
.main-menu.menu-light {
    background: var(--secu-glass-grad), var(--secu-surface-solid) !important;
    color: var(--secu-text2);
    border-right: 0 !important;
    box-shadow: var(--secu-surface-shadow);
}
.main-menu.menu-shadow { box-shadow: var(--secu-surface-shadow); }
@media (min-width: 992px) {
    body.vertical-layout.vertical-menu-modern .main-menu.menu-fixed {
        top: calc(5rem + 12px) !important;
        bottom: 12px !important;
        left: 12px !important;
        height: auto !important;
        width: 236px;
        border: 1px solid var(--secu-glass-border);
        border-radius: var(--secu-radius-card);
        overflow: hidden;
    }
    body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.menu-fixed {
        width: 48px;
        left: 6px !important;
        border-radius: var(--secu-radius-stat);
    }
    body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.menu-fixed.expanded,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.menu-fixed:hover {
        width: 236px;
    }
}
.main-menu .main-menu-content { padding: 12px 0; }
.main-menu .navigation,
.main-menu.menu-dark .navigation > li,
.main-menu.menu-light .navigation > li { background: transparent; padding: 0; }
.main-menu.menu-dark .navigation > li > a,
.main-menu.menu-light .navigation > li > a,
.main-menu .navigation > li > a {
    margin: 2px 8px;
    padding: 11px 12px !important;
    border-radius: var(--secu-radius-tile);
    color: var(--secu-text2) !important;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .15s ease, color .15s ease;
}
.main-menu .navigation > li > a > i { color: var(--secu-muted); margin: 0 !important; top: 0 !important; float: none !important; width: 24px; text-align: center; flex: 0 0 auto; }
.main-menu .navigation > li > a .menu-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-menu .navigation > li > a .badge:empty { display: none; }
.main-menu.menu-dark .navigation > li:hover > a,
.main-menu.menu-dark .navigation > li.hover > a,
.main-menu .navigation > li:hover > a {
    background: var(--secu-tile) !important;
    color: var(--secu-ink) !important;
}
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-light .navigation > li.active > a,
.main-menu .navigation > li.active > a {
    background: var(--secu-action-soft) !important;
    color: var(--secu-action-text) !important;
    font-weight: 700;
    border-right: 0 !important;
}
.main-menu.menu-dark .navigation > li.active > a > i,
.main-menu .navigation > li.active > a > i { color: var(--secu-action); }
.main-menu.menu-dark .navigation > li.open > a,
.main-menu.menu-dark .navigation > li.menu-collapsed-open > a { border-right: 0 !important; }
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded):not(:hover) .navigation > li > a {
    justify-content: center;
    margin: 2px 4px;
    padding: 12px 0 !important;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded):not(:hover) .navigation > li > a .menu-title,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded):not(:hover) .navigation > li > a .badge { display: none; }
.main-menu .navigation > li > a > i::before { font-size: 1.5rem; }
.sidenav-overlay, .content-overlay { background: var(--secu-backdrop) !important; }
.sidenav-overlay.show, .content-overlay.show { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

html body .content .content-wrapper { padding: 1.5rem 1.5rem 0; }
@media (min-width: 992px) { html body .content .content-wrapper { padding: 1.75rem 2rem 0 1.5rem; } }
html body .content .content-wrapper .content-header-title { color: var(--secu-ink); letter-spacing: 0.01em; }
.secu-page-title { font-size: 31px; margin: 4px 0 20px; }
.secu-page-title small, .secu-page-title .secu-page-subtitle {
    display: block;
    font-family: var(--secu-font) !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--secu-muted);
    margin-top: 4px;
}

footer.footer, footer.footer.footer-dark, footer.footer.footer-static, footer.footer.navbar-border {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--secu-muted);
    padding: 1.2rem 1.5rem;
}
footer.footer p, footer.footer span { color: var(--secu-muted) !important; font-size: 13px; }
footer.footer a { color: var(--secu-text2) !important; font-weight: 700; }
footer.footer a:hover { color: var(--secu-action-text) !important; }

/* -------- 4. Theme switch (light / auto / dark) ------------------------- */
.secu-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    margin: 0 10px 0 0;
    border-radius: var(--secu-radius-chip);
    background: var(--secu-tile);
    border: 1px solid var(--secu-glass-border);
    box-shadow: inset 0 1px 0 var(--secu-highlight);
}
.secu-theme-switch__btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--secu-radius-chip);
    background: transparent;
    color: var(--secu-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.secu-theme-switch__btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.secu-theme-switch__btn:hover { color: var(--secu-ink); background: var(--secu-tile-hover); }
.secu-theme-switch__btn[aria-pressed="true"] {
    background: var(--secu-surface-solid);
    color: var(--secu-action-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 var(--secu-highlight);
}
.secu-theme-switch__btn:focus-visible { outline: 2px solid var(--secu-action); outline-offset: 1px; }
.secu-theme-switch--floating { position: fixed; top: 16px; right: 16px; z-index: 1035; margin: 0; }
@media (max-width: 575.98px) { .header-navbar .secu-theme-switch { margin-right: 4px; } }

/* -------- 5. Cards (glass surface, radius 28) --------------------------- */
.card {
    background: var(--secu-glass-grad);
    background-color: transparent;
    border: 1px solid var(--secu-glass-border);
    border-radius: var(--secu-radius-card);
    box-shadow: var(--secu-surface-shadow);
    color: var(--secu-ink);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.card .card-header {
    position: relative;
    background: transparent;
    border-bottom: 1px solid var(--secu-border);
    padding: 1.25rem 1.5rem;
}
.card .card-header.border-0 { border-bottom: 0; }
.card .card-body { padding: 1.5rem; }
.card .card-footer { background: transparent; border-top: 1px solid var(--secu-border); padding: 1rem 1.5rem; }
.card .card-title { font-size: 22px; margin-bottom: 0; }
.card .card-subtitle { color: var(--secu-muted); }
.card .card-header .heading-elements { top: 50%; right: 1.5rem; transform: translateY(-50%); margin-top: 0; }
.card .card-header .heading-elements .btn { margin: 0; }
.card.pull-up { transition: transform .2s ease, box-shadow .2s ease; }
.card.pull-up:hover { transform: translateY(-3px); box-shadow: var(--secu-surface-shadow), 0 16px 40px rgba(0,0,0,0.35); }
.card .card { box-shadow: none; background: var(--secu-tile); }
.card.bg-primary, .card.bg-info { background: var(--secu-action) !important; }
.line-on-side {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 0 !important;
    line-height: 1.3 !important;
    margin: 0;
}
.line-on-side::before, .line-on-side::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--secu-border); }
.line-on-side span { background: transparent !important; padding: 0 !important; color: var(--secu-muted); }

/* Stat / quick-link tiles (dashboard, radius 24): icon in a glass tile. */
.card.pull-up .card-body .media { gap: 12px; }
.card.pull-up .card-body .media .media-body { min-width: 0; }
.card.pull-up .card-body .media h3 {
    font-family: var(--secu-font-display) !important;
    font-size: clamp(15px, 1.2vw, 20px);
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    color: var(--secu-ink) !important;
    margin: 0;
}
.card.pull-up .card-body .media > div:last-child i {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--secu-radius-tile);
    background: var(--secu-action-soft);
    color: var(--secu-action) !important;
    font-size: 26px !important;
    box-shadow: inset 0 1px 0 var(--secu-highlight);
    float: none !important;
    flex: 0 0 auto;
}
a > .card.pull-up { border-radius: var(--secu-radius-stat); }
a:hover > .card.pull-up h3 { color: var(--secu-action-text) !important; }

/* Dashboard hero: the mobile hero block (dark, orange glow, diagonal light stripe). Used by
   .promo-banner (existing markup) and .secu-hero (markup with greeting + title). */
.promo-banner, .secu-hero {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: var(--secu-radius-card) !important;
    border: 1px solid rgba(255,255,255,0.10);
    background-color: var(--secu-hero);
    background-image: var(--secu-hero-glow);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 20px 50px rgba(0,0,0,0.35);
    color: #F5F4F1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 32px;
}
.secu-hero__brand { position: absolute; top: 24px; left: 32px; height: 26px; width: auto; opacity: .95; }
.secu-hero__status {
    position: absolute;
    top: 20px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--secu-radius-chip);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: #F5F4F1;
    font-weight: 600;
    font-size: 14px;
}
.secu-hero__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--secu-synced); }
.secu-hero__greeting { font-size: 17px; font-weight: 500; color: #C9C7C2; margin: 0 0 4px; }
.secu-hero__title {
    font-family: var(--secu-font-display) !important;
    font-size: 38px;
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #F5F4F1;
    margin: 0;
}
@media (min-width: 992px) { .secu-hero__title { font-size: 48px; } .promo-banner, .secu-hero { min-height: 220px; padding: 32px 36px; } }

/* -------- 6. Buttons ---------------------------------------------------- */
.btn {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--secu-radius-button);
    padding: 0.8rem 1.25rem;
    min-height: 44px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    color: var(--secu-ink);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .1s ease;
}
.btn i { font-size: 1.15em; line-height: 1; }
.btn.round { border-radius: var(--secu-radius-button); }
.btn-sm, .btn-group-sm > .btn { min-height: 34px; padding: 0.35rem 0.9rem; font-size: 12px; }
.btn-lg, .btn-group-lg > .btn { min-height: 56px; padding: 1rem 1.5rem; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.45; }

/* Primary: the orange glass button (the one action colour). */
.btn-primary, .btn-info, .btn.bg-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active,
.btn-primary:focus, .btn-info:focus {
    color: #fff !important;
    background-color: var(--secu-action) !important;
    background-image: var(--secu-primary-grad);
    border-color: transparent !important;
    box-shadow: var(--secu-primary-shadow);
}
.btn-primary:hover, .btn-info:hover { background-color: #FF7A2E !important; color: #fff !important; }
/* Secondary: outlined glass. */
.btn-outline-primary, .btn-outline-info, .btn-outline-secondary, .btn-light, .btn.grey, .btn-secondary, .btn-default,
.btn-outline-primary:focus, .btn-outline-info:focus, .btn-outline-secondary:focus {
    color: var(--secu-ink) !important;
    background: var(--secu-secondary-bg) !important;
    border-color: var(--secu-secondary-border) !important;
    box-shadow: var(--secu-secondary-shadow);
}
.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn.grey:hover, .btn-secondary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled):active {
    background: var(--secu-tile-hover) !important;
    color: var(--secu-ink) !important;
    border-color: var(--secu-secondary-border) !important;
}
/* Danger: coral on soft red (outline) or the issue fill (solid). */
.btn-outline-danger, .btn-outline-danger:focus {
    color: var(--secu-issue) !important;
    background: var(--secu-issue-soft) !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-outline-danger:hover, .btn-outline-danger:not(:disabled):not(.disabled):active { background: rgba(240,90,70,0.28) !important; color: var(--secu-issue) !important; }
.btn-danger, .btn-danger:hover, .btn-danger:focus { color: #fff !important; background: var(--secu-issue-fill) !important; border-color: transparent !important; }
.btn-success, .btn-success:hover, .btn-success:focus { color: #fff !important; background: var(--secu-approved-fill) !important; border-color: transparent !important; }
.btn-warning, .btn-warning:hover { color: #141414 !important; background: var(--secu-open) !important; border-color: transparent !important; }
.btn-outline-success { color: var(--secu-approved) !important; background: var(--secu-approved-soft) !important; border-color: transparent !important; }
.btn-outline-warning { color: var(--secu-open) !important; background: var(--secu-open-soft) !important; border-color: transparent !important; }
.btn-link { color: var(--secu-action-text) !important; background: transparent !important; text-transform: none; letter-spacing: 0; font-weight: 700; }
/* Icon-only circles in tables and lists. */
.btn.btn-float {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
    border-radius: var(--secu-radius-chip) !important;
    margin: 2px 4px 2px 0;
    box-shadow: none !important;
}
.btn.btn-float i { font-size: 17px; }
.btn.btn-float.btn-outline-info, .btn.btn-float.btn-outline-primary, .btn.btn-float.btn-outline-secondary {
    background: var(--secu-tile) !important;
    border-color: var(--secu-glass-border) !important;
    box-shadow: inset 0 1px 0 var(--secu-highlight) !important;
}
.btn.btn-float.btn-outline-info:hover, .btn.btn-float.btn-outline-primary:hover { background: var(--secu-tile-hover) !important; color: var(--secu-action-text) !important; }
.btn-group .btn { border-radius: var(--secu-radius-button); }

/* -------- 7. Forms (fields radius 20, 48 high) -------------------------- */
label, .form-group label, legend { color: var(--secu-text2); font-size: 13px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.01em; }
.form-control, .custom-select, select.form-control, textarea.form-control,
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    height: auto;
    min-height: 48px;
    padding: 0.7rem 1rem;
    font-size: 15px;
    color: var(--secu-ink);
    background-color: var(--secu-field-bg);
    border: 1px solid var(--secu-field-border);
    border-radius: var(--secu-radius-field);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control.form-control-sm { min-height: 38px; padding: 0.35rem 0.85rem; font-size: 14px; }
.form-control::placeholder { color: var(--secu-faint); opacity: 1; }
.form-control:focus, .custom-select:focus, .dataTables_wrapper .dataTables_filter input:focus {
    color: var(--secu-ink);
    background-color: var(--secu-field-bg);
    border-color: var(--secu-action);
    box-shadow: 0 0 0 1px var(--secu-action);
    outline: 0;
}
.form-control:disabled, .form-control[readonly] { background-color: var(--secu-tile); color: var(--secu-muted); border-color: var(--secu-glass-border); opacity: 1; }
select.form-control:not([multiple]), .custom-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--secu-select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 2.4rem;
}
select.form-control option, .custom-select option { background: var(--secu-sheet-solid); color: var(--secu-ink); }
textarea.form-control { min-height: 112px; line-height: 1.45; }
.form-control.round { border-radius: var(--secu-radius-field); }
.form-control.square { border-radius: 8px; }
.input-group-text { background: var(--secu-tile); border: 1px solid var(--secu-field-border); color: var(--secu-muted); border-radius: var(--secu-radius-field); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .input-group-text, .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--secu-action); width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
fieldset label { font-weight: 500; font-size: 14px; color: var(--secu-text2); }
input[type="file"].form-control, .custom-file-label { color: var(--secu-muted); }
.form-text, .help-block { color: var(--secu-muted); font-size: 13px; }
/* Validation (jqBootstrapValidation / form-validation.css). */
.has-error .form-control, .form-control.error, .form-control.is-invalid { border-color: var(--secu-issue) !important; box-shadow: 0 0 0 0.5px var(--secu-issue); }
.has-error .help-block, .has-error label, label.error, .error-msg, .invalid-feedback { color: var(--secu-issue) !important; }
.has-success .form-control, .form-control.valid, .form-control.is-valid { border-color: var(--secu-approved) !important; }
.has-success .help-block, .has-success label, .valid-feedback { color: var(--secu-approved) !important; }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container .select2-selection--single {
    min-height: 48px;
    background: var(--secu-field-bg) !important;
    border: 1px solid var(--secu-field-border) !important;
    border-radius: var(--secu-radius-field) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 16px; color: var(--secu-ink); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--secu-faint); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--secu-chevron) transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--secu-chevron) transparent; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--secu-action) !important; box-shadow: 0 0 0 1px var(--secu-action); }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 6px 10px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--secu-action-soft);
    border: 0;
    border-radius: var(--secu-radius-chip);
    color: var(--secu-ink);
    padding: 4px 12px;
    margin: 4px 6px 0 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--secu-action-text); margin-right: 6px; }
.select2-dropdown {
    background: var(--secu-sheet-solid);
    border: 1px solid var(--secu-glass-border);
    border-radius: var(--secu-radius-field);
    box-shadow: var(--secu-sheet-shadow);
    overflow: hidden;
    color: var(--secu-ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--secu-field-bg);
    border: 1px solid var(--secu-field-border);
    border-radius: 12px;
    color: var(--secu-ink);
    padding: 8px 12px;
}
.select2-container--default .select2-results__option { padding: 10px 16px; color: var(--secu-text2); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background: var(--secu-action-soft) !important; color: var(--secu-ink) !important; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--secu-tile); color: var(--secu-ink); }
.select2-container--default .select2-results__group { color: var(--secu-muted); }

/* -------- 8. Tables and DataTables -------------------------------------- */
.table { color: var(--secu-ink); margin-bottom: 0; }
.table td, .table th,
.table.table-xl td, .table.table-xl th {
    background-color: transparent !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--secu-border) !important;
    padding: 0.9rem 1rem;
    vertical-align: middle;
}
.table thead th, .table th {
    color: var(--secu-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--secu-border) !important;
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover, .table-hover tbody tr:hover td { background-color: var(--secu-tile) !important; color: var(--secu-ink); }
.table a:not(.btn) { color: var(--secu-ink); font-weight: 600; }
.table a:not(.btn):hover { color: var(--secu-action-text); }
.table td span { color: var(--secu-text2); }
.table .text-truncate { max-width: 220px; }
.table td .btn { vertical-align: middle; margin: 3px 6px 3px 0; }
.table td .btn-float + .btn-sm, .table td .btn-sm + .btn-sm { margin-left: 2px; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--secu-border) !important; }
.table-responsive { border-radius: var(--secu-radius-tile); }
table.dataTable, table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--secu-muted); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--secu-muted); padding: 0.75rem 0; font-size: 14px; }
.dataTables_wrapper .dataTables_filter input { min-height: 40px; padding: 0.4rem 0.9rem; margin-left: 8px; width: 220px; max-width: 100%; }
.dataTables_wrapper .dataTables_length select { min-height: 40px; padding: 0.3rem 2rem 0.3rem 0.8rem; display: inline-block; width: auto; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
    background: var(--secu-tile) !important;
    border: 1px solid var(--secu-glass-border) !important;
    border-radius: var(--secu-radius-chip) !important;
    color: var(--secu-text2) !important;
    margin: 0 3px;
    padding: 0.4rem 0.9rem;
    min-width: 36px;
    font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .pagination .page-link:hover { background: var(--secu-tile-hover) !important; color: var(--secu-ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link { background: var(--secu-action) !important; color: #fff !important; border-color: transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .pagination .page-item.disabled .page-link { opacity: .4; }
.dataTables_wrapper .dataTables_processing { background: var(--secu-sheet-solid); color: var(--secu-ink); border-radius: var(--secu-radius-field); }

/* Status dots in list rows. */
.la-dot-circle-o.success { color: var(--secu-approved) !important; }
.la-dot-circle-o.danger { color: var(--secu-issue) !important; }
.la-dot-circle-o.warning { color: var(--secu-open) !important; }

/* -------- 9. Chips, alerts, badges, progress, tabs, dropdowns, modals --- */
.badge {
    border: 0;
    border-radius: var(--secu-radius-chip);
    padding: 0.4em 0.8em;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    background: var(--secu-tile);
    color: var(--secu-text2);
}
.badge-primary, .badge-info, .badge.bg-primary { background: var(--secu-action-soft) !important; color: var(--secu-action-text) !important; }
.badge-success { background: var(--secu-approved-soft) !important; color: var(--secu-approved) !important; }
.badge-danger { background: var(--secu-issue-soft) !important; color: var(--secu-issue) !important; }
.badge-warning { background: var(--secu-open-soft) !important; color: var(--secu-open) !important; }
.badge-secondary, .badge-light, .badge-default { background: var(--secu-tile) !important; color: var(--secu-text2) !important; }

.alert { border: 1px solid transparent; border-radius: var(--secu-radius-field); padding: 0.9rem 1.1rem; font-weight: 500; }
.alert-success, .alert.bg-success { background: var(--secu-approved-soft) !important; color: var(--secu-approved) !important; border-color: rgba(61,214,140,0.25); }
.alert-danger, .alert.bg-danger { background: var(--secu-issue-soft) !important; color: var(--secu-issue) !important; border-color: rgba(240,90,70,0.25); }
.alert-warning, .alert-info, .alert-primary, .alert.bg-primary, .alert.bg-info, .alert.bg-warning { background: var(--secu-open-soft) !important; color: var(--secu-open) !important; border-color: rgba(255,106,19,0.25); }
.alert-secondary, .alert-light, .alert-dark { background: var(--secu-tile) !important; color: var(--secu-text2) !important; }
.alert .close { color: inherit; text-shadow: none; }

.progress { height: 8px; background: var(--secu-tile); border-radius: var(--secu-radius-chip); overflow: hidden; box-shadow: inset 0 1px 0 rgba(0,0,0,0.2); }
.progress .progress-bar { background-color: var(--secu-action); border-radius: var(--secu-radius-chip); }
.progress.progress-lg, .progress-lg { height: 12px; }

.nav-tabs { border-bottom: 0; gap: 4px; padding: 4px; background: var(--secu-tile); border-radius: var(--secu-radius-button); display: inline-flex; margin-bottom: 1rem; }
.nav-tabs .nav-item { margin-bottom: 0; }
.nav-tabs .nav-link { border: 0; border-radius: var(--secu-radius-chip); color: var(--secu-muted); font-weight: 700; padding: 0.5rem 1.1rem; }
.nav-tabs .nav-link:hover { color: var(--secu-ink); border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: var(--secu-surface-solid); color: var(--secu-action-text); border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 var(--secu-highlight); }
.nav-pills .nav-link { border-radius: var(--secu-radius-chip); color: var(--secu-text2); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--secu-action); color: #fff; }

.dropdown-menu, .dropdown .dropdown-menu {
    background: var(--secu-sheet-solid);
    border: 1px solid var(--secu-glass-border);
    border-radius: var(--secu-radius-field);
    box-shadow: var(--secu-sheet-shadow), inset 0 1px 0 var(--secu-highlight);
    padding: 6px;
    color: var(--secu-ink);
    min-width: 12rem;
    margin-top: 6px;
    opacity: 1;
}
.dropdown-item { color: var(--secu-text2); border-radius: 12px; padding: 0.55rem 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.dropdown-item i { color: var(--secu-muted); font-size: 1.1em; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--secu-tile); color: var(--secu-ink); }
.dropdown-item:hover i { color: var(--secu-action-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--secu-action-soft); color: var(--secu-ink); }
.dropdown-divider { border-top-color: var(--secu-border); }

.modal-backdrop { background: var(--secu-backdrop); }
.modal-backdrop.show { opacity: 1; }
.modal-content {
    background: var(--secu-sheet);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--secu-glass-border);
    border-top-color: rgba(255,255,255,0.3);
    border-radius: var(--secu-radius-sheet);
    box-shadow: var(--secu-sheet-shadow);
    color: var(--secu-ink);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--secu-border); padding: 1.5rem 1.75rem 1.1rem; align-items: center; }
.modal-header .modal-title { font-size: 25px; display: flex; align-items: center; gap: 10px; }
.modal-header .modal-title i { color: var(--secu-action); font-size: 0.9em; }
.modal-body { padding: 1.5rem 1.75rem; }
.modal-footer { border-top: 1px solid var(--secu-border); padding: 1.1rem 1.75rem; gap: 8px; }
.close, .modal-header .close {
    color: var(--secu-ink);
    text-shadow: none;
    opacity: .7;
    width: 36px;
    height: 36px;
    border-radius: var(--secu-radius-chip);
    background: var(--secu-tile);
    padding: 0;
    margin: 0 0 0 auto;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}
.close:hover, .close:focus { opacity: 1; color: var(--secu-ink); background: var(--secu-tile-hover); }

/* SweetAlert2 and toastr */
.swal2-popup {
    background: var(--secu-sheet-solid) !important;
    border: 1px solid var(--secu-glass-border);
    border-radius: var(--secu-radius-sheet) !important;
    color: var(--secu-ink) !important;
    box-shadow: var(--secu-sheet-shadow);
    font-family: var(--secu-font);
    padding: 2rem;
}
.swal2-popup .swal2-title { color: var(--secu-ink) !important; font-size: 25px; }
.swal2-popup .swal2-content, .swal2-popup .swal2-html-container { color: var(--secu-text2) !important; font-size: 15px; }
.swal2-popup .swal2-styled.swal2-confirm { background: var(--secu-action) !important; border-radius: var(--secu-radius-button) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; min-height: 44px; padding: 0.7rem 1.4rem; box-shadow: var(--secu-primary-shadow) !important; }
.swal2-popup .swal2-styled.swal2-cancel { background: var(--secu-secondary-bg) !important; color: var(--secu-ink) !important; border: 1px solid var(--secu-secondary-border) !important; border-radius: var(--secu-radius-button) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; min-height: 44px; }
.swal2-popup .swal2-icon.swal2-warning { border-color: var(--secu-open); color: var(--secu-open); }
.swal2-popup .swal2-icon.swal2-error { border-color: var(--secu-issue); }
.swal2-popup .swal2-icon.swal2-success { border-color: var(--secu-approved); color: var(--secu-approved); }
.swal2-container.swal2-shown { background: var(--secu-backdrop) !important; }
#toast-container > div { border-radius: var(--secu-radius-field); box-shadow: var(--secu-sheet-shadow); opacity: 1; font-family: var(--secu-font); padding: 15px 15px 15px 50px; }
#toast-container > .toast-success { background-color: var(--secu-approved-fill); }
#toast-container > .toast-error { background-color: var(--secu-issue-fill); }
#toast-container > .toast-info { background-color: #2A2A2A; }
#toast-container > .toast-warning { background-color: #C45400; }

/* Loader (include/loader.ejs) and the PDF progress panel. */
.sk-fading-circle .sk-circle:before { background-color: var(--secu-action); }
.loader-back { background: transparent; }
.pdf-loading {
    background: var(--secu-sheet-solid) !important;
    border: 1px solid var(--secu-glass-border);
    border-radius: var(--secu-radius-sheet) !important;
    box-shadow: var(--secu-sheet-shadow);
    color: var(--secu-ink);
}
.pdf-loading h2.display-4 { font-size: 25px; margin: 1rem 0; }
.pdf-loading .progress { height: 10px; }
.pdf-loading-back.show, .pdf-loading-back.modal.show { background: var(--secu-backdrop); }

/* Empty states */
.no-project { padding: 2rem 1rem 3rem; }
.no-project img { max-width: 360px !important; width: 100%; opacity: .95; }
.no-project p { margin-top: 1rem; }

/* Images, thumbnails, media */
.img-thumbnail { background: var(--secu-tile); border: 1px solid var(--secu-glass-border); border-radius: var(--secu-radius-field); padding: 4px; }
.media img, .thumb, .thumbnail { border-radius: var(--secu-radius-field); }

/* -------- 10. Auth pages (login, register, recover, onboarding) --------- */
body.blank-page { background: var(--secu-page-login); }
body.blank-page::before { background: var(--secu-page-glow), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,106,19,0.06), transparent 70%); }
.blank-page .content-wrapper .flexbox-container { min-height: 100vh; align-items: center; padding: 24px 0; }
.blank-page .card { border-radius: var(--secu-radius-card); }
.blank-page .card .card-header { padding: 2rem 2rem 0.5rem; }
.blank-page .card .card-body { padding: 1.5rem 2rem 2rem; }
.blank-page .card .card-footer { padding: 1.1rem 2rem; }
.blank-page .card-title img.resize, .blank-page .card-title img { width: auto !important; max-width: 60%; max-height: 44px; }
.blank-page .card-subtitle { font-size: 14px !important; padding-top: 1rem !important; }
.blank-page .form-control { min-height: 52px; }
.blank-page .btn-block { min-height: 52px; margin-top: 0.5rem; }
.blank-page fieldset label { margin: 0; }

/* -------- 11. Motion and print ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .card.pull-up, .main-menu .navigation > li > a, .secu-theme-switch__btn, .table-hover tbody tr { transition: none !important; }
    .card.pull-up:hover { transform: none; }
}
@media print {
    html body::before { display: none; }
    html body, .card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
}

/* -------- 12. Legacy helpers from assets/css/style.css ----------------- */
/* Collapsible section headers (.cust-header) and framed headers (.custom-header) used on the
   project, roof and anchor-point pages: glass tiles instead of the old grey bars. */
.cust-header, .card-header.cust-header, .card .card-header.cust-header {
    background: var(--secu-tile) !important;
    border: 1px solid var(--secu-glass-border) !important;
    border-radius: var(--secu-radius-tile) !important;
    padding: 0.9rem 1.25rem !important;
    color: var(--secu-ink);
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 var(--secu-highlight);
}
.cust-header .card-title, .card-title.cust-header, h1.cust-header, h3.cust-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 19px;
    box-shadow: none;
}
.cust-header a, .cust-header .float-right { color: var(--secu-action-text); font-weight: 600; }
.cust-header a:hover { color: var(--secu-action); }
.cust-header .la, .cust-header .ft, .cust-header [class*="ft-"], .cust-header [class*="la-"] { color: var(--secu-action-text); }
.custom-header { border: 1px solid var(--secu-border); border-radius: var(--secu-radius-field) !important; background: var(--secu-tile); }
.cards-cus-header { color: var(--secu-ink); }
.resize { width: auto !important; }
/* Modern Admin "pull-up"/"border-grey" helpers and the "lh-condensed" order lists. */
.order-details { color: var(--secu-text2); }
.lh-condensed span { color: var(--secu-text2); }
/* Collapse toggles (plus/minus icons in section headers). */
.card-header .heading-elements a i, .card-header .collapse-toggle, .card-header [data-toggle="collapse"] { color: var(--secu-action-text); }

/* -------- 13. Collapsed rail and small screens -------------------------- */
/* Collapsed sidebar: keep the brand logo readable (the header column shrinks to 60px). */
body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar .navbar-header { overflow: visible; }
body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar .navbar-header .navbar-brand .brand-logo { max-width: none; height: 44px; max-height: 44px; }
@media (max-width: 991.98px) {
    /* Card header actions stack under the title instead of overlapping it. */
    .card .card-header .heading-elements { position: static; transform: none; margin-top: 12px; display: block; }
    .card .card-header .heading-elements .btn { margin-right: 6px; margin-bottom: 4px; }
    /* Responsive tables scroll sideways instead of growing into tall wrapped rows. */
    .table-responsive .table td, .table-responsive .table th { white-space: nowrap; }
    .promo-banner, .secu-hero { min-height: 160px; padding: 20px 22px; }
    .secu-hero__title { font-size: 32px; }
    html body .content .content-wrapper { padding: 1.25rem 1rem 0; }
}

/* -------- 14. Form specificity fixes (found on the auth pages) ---------- */
/* bootstrap-extended styles `form .form-control` (0,1,1) with a dark-blue text and lavender border/placeholder,
   which beat the plain .form-control rules above inside every <form>. */
form .form-control, form .custom-select, form select.form-control, form textarea.form-control {
    color: var(--secu-ink);
    background-color: var(--secu-field-bg);
    border-color: var(--secu-field-border);
}
form .form-control:focus, form .custom-select:focus { border-color: var(--secu-action); color: var(--secu-ink); }
form .form-control:disabled, form .form-control[readonly] { color: var(--secu-muted); border-color: var(--secu-glass-border); background-color: var(--secu-tile); }
form .form-control::-webkit-input-placeholder, form .form-control::placeholder { color: var(--secu-faint); opacity: 1; }
/* jqBootstrapValidation toggles .error / .issue / .validate on the .form-group; form-validation.css (loaded after
   this file on some pages) colours them with saturated red/orange/green glows. Higher specificity wins here. */
html body .form-group.error input, html body .form-group.error select, html body .form-group.error textarea,
html body .form-group.error .form-control { color: var(--secu-ink); border-color: var(--secu-issue); box-shadow: none; }
html body .form-group.error input:focus, html body .form-group.error select:focus, html body .form-group.error textarea:focus,
html body .form-group.error .form-control:focus { border-color: var(--secu-issue); box-shadow: 0 0 0 1px var(--secu-issue); }
html body .form-group.error .help-block, html body .form-group.error .help-inline, html body .form-group.error label.error { color: var(--secu-issue); }
html body .form-group.issue input, html body .form-group.issue select, html body .form-group.issue textarea,
html body .form-group.issue .form-control { color: var(--secu-ink); border-color: var(--secu-open); box-shadow: none; }
html body .form-group.issue input:focus, html body .form-group.issue .form-control:focus { border-color: var(--secu-open); box-shadow: 0 0 0 1px var(--secu-open); }
html body .form-group.issue .help-block, html body .form-group.issue .help-inline { color: var(--secu-open); }
html body .form-group.validate input, html body .form-group.validate select, html body .form-group.validate textarea,
html body .form-group.validate .form-control { color: var(--secu-ink); border-color: var(--secu-approved); box-shadow: none; }
html body .form-group.validate input:focus, html body .form-group.validate .form-control:focus { border-color: var(--secu-approved); box-shadow: 0 0 0 1px var(--secu-approved); }
html body .form-group.validate .help-block, html body .form-group.validate .help-inline { color: var(--secu-approved); }
html body .form-group .help-block { font-size: 13px; margin-top: 4px; }
/* Tall auth cards stay clear of the floating theme switch on phones. */
@media (max-width: 767.98px) { .blank-page .content-wrapper .flexbox-container { padding-top: 72px; } }
/* Six-column lists on 1280-class laptops: tighter truncation avoids a horizontal scroll. */
@media (max-width: 1439.98px) { .table .text-truncate { max-width: 150px; } }

/* -------- 15. Modal actions, header toggle, Cropper.js ------------------ */
/* The template pairs a .btn-outline-primary submit with a .btn.grey close in every modal footer; the submit is the
   primary action, so it takes the orange glass look. */
.modal .modal-footer .btn-outline-primary, .modal .modal-footer .btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--secu-action) !important;
    background-image: var(--secu-primary-grad);
    border-color: transparent !important;
    box-shadow: var(--secu-primary-shadow);
}
.modal .modal-footer .btn-outline-primary:hover { background-color: #FF7A2E !important; color: #fff !important; }
/* Modern Admin's ellipsis toggle for header actions is redundant (section 13 stacks them on small screens). */
.card-header .heading-elements-toggle { display: none !important; }
/* Cropper.js ships blue handles and a light checkerboard. */
.cropper-view-box { outline: 1px solid var(--secu-action); outline-color: var(--secu-action); }
.cropper-line, .cropper-point, .cropper-point.point-se::before { background-color: var(--secu-action); }
.cropper-bg { background-image: none; background-color: var(--secu-tile); }
.cropper-modal { background-color: var(--secu-page); }
.modal-body .cropper-container { border-radius: var(--secu-radius-tile); overflow: hidden; }
#crop-modal .modal-header.bg-primary, .modal .modal-header.bg-primary { background-color: transparent !important; color: var(--secu-ink) !important; }
#crop-modal .modal-title.white, .modal .modal-title.white { color: var(--secu-ink) !important; }
/* Rows built by page scripts end with a stray empty <tr>; never render it. */
.table tbody tr:empty { display: none; }
/* Line Awesome icons placed in a <span> (back links in section headers): section 2's span font rule must not win. */
span.la, span[class^="la-"], span[class*=" la-"] { font-family: LineAwesome !important; }
span.ft, span[class^="ft-"], span[class*=" ft-"] { font-family: feather !important; }
/* Page titles in the (otherwise empty) content header line up with the cards. */
.content-header.row { margin-left: 0; margin-right: 0; }