:root {
    --sidebar-width: 240px;
    --sidebar-rail-width: 68px;
}

/* Sidebar Navigation Styles */
.sidebar-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: #fafaf8;
    border-right: 1px solid #e8e5e0;
    display: flex;
    flex-direction: column;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease;
}

/* Brand Section */
.sidebar-brand {
    padding: 16px 16px 14px;
    border-bottom: 1px solid #e8e5e0;
    flex-shrink: 0;
}

.sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-dark);
}

.sidebar-brand .brand-link .icon {
    font-size: 22px;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Org-uploaded logo in the sidebar brand. Height-constrained, width scales. */
.sidebar-brand .brand-logo {
    max-height: 32px;
    width: auto;
    flex-shrink: 0;
}

/* Platform (Sahab Key) key mark in the sidebar brand, paired with the wordmark. */
.sidebar-brand .brand-mark {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-brand .brand-text {
    display: flex;
    flex-direction: column;
}

.sidebar-brand .brand-name {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1.2;
}

.sidebar-brand .brand-tagline {
    font-size: 11px;
    color: #6b7280;
    font-weight: var(--font-weight-normal);
}

/* Building Scope Indicator */
.building-scope-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 500;
    color: #1e40af;
    flex-shrink: 0;
}

.building-scope-indicator .icon {
    font-size: 11px;
    color: #3b82f6;
    flex-shrink: 0;
}

.building-scope-indicator span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Menu */
.sidebar-menu {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    margin: 1px 8px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    border-radius: 6px;
    border-left: none;
    transition: all var(--transition-fast);
}

.sidebar-nav-item .icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: #6b7280;
    transition: color var(--transition-fast);
}

.sidebar-nav-item:hover {
    background: rgba(208, 167, 100, 0.06);
    color: var(--primary-color);
}

.sidebar-nav-item:hover .icon {
    color: var(--primary-color);
}

.sidebar-nav-item.active {
    background: rgba(208, 167, 100, 0.1);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}

.sidebar-nav-item.active .icon {
    color: var(--primary-color);
}

.nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* User Section (bottom) */
.sidebar-user {
    border-top: 1px solid #e8e5e0;
    padding: 12px 16px;
    flex-shrink: 0;
    margin-top: auto;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sidebar-user .user-avatar .icon {
    font-size: 24px;
    color: #6b7280;
}

.sidebar-user .user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user .user-name {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sidebar-user .user-role {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    color: #6b7280;
    text-decoration: none;
    font-size: 13px;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.sidebar-logout:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Mobile Toggle Button */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1040;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 18px;
    color: var(--text-dark);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-fast);
    min-width: 44px;
    min-height: 44px;
}

.sidebar-toggle:hover {
    background: #f9fafb;
    border-color: var(--primary-color);
}

/* Sidebar Overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1025;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
}

/* Footer Styles. The footer sits on a dark #1f2937 background, so its text uses
   LIGHT colors to meet WCAG AA contrast: #d1d5db for body, and --brand-on-dark
   for accents, which is the org's own hue lightened until it clears AA here.
   --brand-tint is the raw color and is only safe on light surfaces. */
.app-footer {
    background: #1f2937;
    color: #d1d5db;
    padding: var(--spacing-xl) 0;
    margin-top: auto;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Signed-in pages: a quiet legal bar rather than a marketing block. The sidebar is
   the navigation, and the product credit belongs here once, not twice. */
.app-footer-compact {
    background: transparent;
    color: var(--text-muted);
    padding: 14px 0;
    border-top: 1px solid #e8e5e0;
}

.app-footer-compact .footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 12px;
}

.app-footer-compact .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.app-footer-compact a {
    color: var(--text-muted);
    text-decoration: none;
}

.app-footer-compact a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-brand h3 {
    color: var(--brand-on-dark, var(--brand-tint));
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

/* Brand logo in the dark footer (Sahab Key light variant, or an org logo). */
.footer-brand .footer-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    margin-bottom: var(--spacing-sm);
}

.footer-brand p {
    color: #d1d5db;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.footer-section h4 {
    color: #f3f4f6;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    color: #d1d5db;
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--brand-on-dark, var(--brand-tint));
}

.footer-contact p {
    color: #d1d5db;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.footer-contact .icon {
    width: 20px;
    color: var(--brand-on-dark, var(--brand-tint));
    margin-right: var(--spacing-xs);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid #374151;
    font-size: var(--font-size-sm);
}

.footer-bottom a {
    color: var(--brand-on-dark, var(--brand-tint));
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.footer-bottom a:hover {
    text-decoration: underline;
}


/* ==========================================
   RESIZE AND RAIL
   Width lives in --sidebar-width so the sidebar, the content column, and the
   footer all move together. nav-footer.js writes it, and an inline script in
   layout.ejs restores the stored value before first paint.
   ========================================== */
/* Fixed, not absolute: the sidebar scrolls its own content, and a handle inside
   that scroller would slide out of reach on a long menu. */
.sidebar-resizer {
    position: fixed;
    top: 0;
    left: calc(var(--sidebar-width) - 3px);
    width: 7px;
    height: 100vh;
    padding: 0;
    border: none;
    background: transparent;
    cursor: col-resize;
    z-index: 1031;
}

.sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 1px;
    height: 100%;
    background: transparent;
    transition: background 0.15s;
}

.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
body.sidebar-resizing .sidebar-resizer::after {
    background: var(--primary-color);
}

.sidebar-resizer:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

body.sidebar-resizing {
    cursor: col-resize;
    user-select: none;
}

body.sidebar-resizing .sidebar-nav {
    transition: none;
}

.sidebar-rail-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 4px 8px 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-rail-toggle:hover {
    background: #f0ede8;
    color: var(--primary-color);
}

.sidebar-rail-toggle .icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Collapsed rail: icons only. Labels are hidden rather than removed, so the
   accessible name of every link survives the collapse. */
body.sidebar-collapsed {
    --sidebar-width: var(--sidebar-rail-width);
}

body.sidebar-collapsed .sidebar-nav .brand-text,
body.sidebar-collapsed .sidebar-nav-item > span,
body.sidebar-collapsed .sidebar-user .user-details,
body.sidebar-collapsed .sidebar-logout span,
body.sidebar-collapsed .building-scope-indicator span,
body.sidebar-collapsed .sidebar-rail-toggle span,
body.sidebar-collapsed .sidebar-resizer {
    display: none;
}

body.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar-nav-item,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .sidebar-logout,
body.sidebar-collapsed .sidebar-rail-toggle,
body.sidebar-collapsed .building-scope-indicator {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .sidebar-brand .brand-link {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-rail-toggle .icon {
    transform: rotate(180deg);
}

body.sidebar-collapsed .nav-badge {
    position: absolute;
    top: 4px;
    right: 12px;
}

body.sidebar-collapsed .sidebar-nav-item {
    position: relative;
}

/* Billing lock: the subscription is unpaid, so every destination except Billing
   bounces back here. Saying so up front beats letting people discover it. */
.sidebar-nav-item.is-locked {
    opacity: 0.42;
}

.sidebar-nav-item.is-locked:hover {
    background: transparent;
    color: #4b5563;
}

.sidebar-nav-item.is-locked:hover .icon {
    color: inherit;
}

.sidebar-lock-note {
    margin: 6px 14px 10px;
    padding: 8px 10px;
    border: 1px solid #f0e0c4;
    border-radius: 8px;
    background: #fdf8ee;
    font-size: 11.5px;
    line-height: 1.45;
    color: #7a5c1e;
}

body.sidebar-collapsed .sidebar-lock-note {
    display: none;
}

/* Responsive Design */
@media (max-width: 992px) {
    .sidebar-nav {
        width: 240px;
        transform: translateX(-100%);
    }

    body.sidebar-collapsed .sidebar-nav {
        width: 240px;
    }

    body.sidebar-collapsed .sidebar-nav .brand-text,
    body.sidebar-collapsed .sidebar-nav-item > span,
    body.sidebar-collapsed .sidebar-user .user-details,
    body.sidebar-collapsed .sidebar-logout span,
    body.sidebar-collapsed .sidebar-lock-note {
        display: revert;
    }

    .sidebar-resizer,
    .sidebar-rail-toggle {
        display: none;
    }

    .sidebar-nav.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: block;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}

/* Page adjustments */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
}

.app-footer {
    margin-left: var(--sidebar-width);
}

/* The sidebar offset makes room for the fixed sidebar; pages rendered without
   the sidebar (legal pages, logged-out views) must not reserve that space. */
body:not(:has(.sidebar-nav)) .main-content,
body:not(:has(.sidebar-nav)) .app-footer {
    margin-left: 0;
}

@media (max-width: 992px) {
    .main-content,
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }

    .app-footer,
    body.sidebar-collapsed .app-footer {
        margin-left: 0;
    }
}

/* Ensure content doesn't go under navbar */
.manager-container,
.tenant-container,
.td,
.boarding-container {
    padding-top: var(--spacing-sm);
}

/* Mobile: larger touch targets for sidebar nav items */
@media (max-width: 992px) {
    .sidebar-nav-item {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    .sidebar-nav-item .icon {
        font-size: 16px;
    }

    .sidebar-logout {
        padding: 10px 8px;
        min-height: 44px;
    }

    /* Ensure content clears the hamburger button */
    .td,
    .manager-container,
    .tenant-container {
        padding-top: 56px;
    }
}

@media (max-width: 768px) {
    .footer-main {
        gap: var(--spacing-md);
    }

    .footer-content {
        padding: 0 var(--spacing-md);
    }

    .app-footer {
        padding: var(--spacing-lg) 0;
    }
}

/* Impersonation Banner
   Rendered by views/partials/impersonation-banner.ejs from the layout, so it is
   present on every authenticated page while a platform admin is acting inside a
   customer's account. It is pinned to the viewport and has no dismiss control.
   --impersonation-banner-height is a per-breakpoint default that keeps the page
   correct before scripts run; public/js/impersonation-banner.js replaces it with
   the bar's measured height once the copy has wrapped. Everything the app pins to
   the top of the viewport (sidebar, hamburger, skip link) and the content column
   are offset by that value, so nothing ends up underneath the bar. */
body.is-impersonating {
    --impersonation-banner-height: 60px;
}

.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Above the sidebar (1030) and its overlay (1025) so it is never covered,
       below the modal layer (1040) so a dialog is never sliced in half. */
    z-index: 1035;
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.impersonation-banner-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px var(--spacing-lg);
}

.impersonation-banner-content > .icon {
    font-size: 20px;
    flex-shrink: 0;
}

.impersonation-banner-text {
    /* Zero basis, not auto: on a phone the row wraps, and an auto basis would
       push the copy onto its own line below the warning icon. */
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    /* Customer org names and user names are arbitrary strings; never let one
       push the button off a narrow screen. */
    overflow-wrap: anywhere;
}

.impersonation-banner-exit {
    flex-shrink: 0;
    background: #ffffff;
    color: #7f1d1d;
    font-weight: var(--font-weight-semibold);
    min-height: 40px;
}

.impersonation-banner-exit:hover:not(:disabled) {
    background: #fee2e2;
}

.impersonation-banner-exit:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* An author `display` beats the UA stylesheet's [hidden] { display: none },
   so the failure row has to opt back out explicitly or it ships visible. */
.impersonation-banner-fallback[hidden] {
    display: none;
}

.impersonation-banner-fallback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: 8px var(--spacing-lg);
    background: #ffffff;
    border-top: 1px solid #fecaca;
}

.impersonation-banner-error {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
}

.impersonation-banner-signout {
    flex-shrink: 0;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.impersonation-banner-signout:hover {
    color: #991b1b;
}

/* Offsets: nothing may sit behind the bar. */
body.is-impersonating .sidebar-nav {
    top: var(--impersonation-banner-height);
    height: calc(100vh - var(--impersonation-banner-height));
}

body.is-impersonating .sidebar-toggle {
    top: calc(var(--impersonation-banner-height) + 10px);
}

body.is-impersonating .skip-link:focus {
    top: calc(var(--impersonation-banner-height) + 8px);
}

/* .main-content is border-box with min-height: 100vh, so the padding sits inside
   the existing height and adds no extra page scroll. */
body.is-impersonating .main-content {
    padding-top: var(--impersonation-banner-height);
}

@media (max-width: 992px) {
    body.is-impersonating {
        --impersonation-banner-height: 80px;
    }
}

/* Narrow phones (tested at 375px): the copy takes the full width and the exit
   control drops to its own full-width row at a 44px touch target. */
@media (max-width: 575px) {
    body.is-impersonating {
        --impersonation-banner-height: 128px;
    }

    .impersonation-banner-content {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: 8px var(--spacing-md);
    }

    /* The copy wraps to several lines on a phone, and the bar reserves that
       height from the page, so tighten the type rather than eat the viewport. */
    .impersonation-banner-text {
        font-size: 12.5px;
        line-height: 1.4;
    }

    .impersonation-banner-exit {
        flex: 1 0 100%;
        justify-content: center;
        min-height: 44px;
    }

    .impersonation-banner-fallback {
        padding: 8px var(--spacing-md);
    }
}

body.is-demo-session {
    --demo-banner-height: 56px;
}

.demo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    background: var(--gradient);
    color: var(--text-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.demo-banner-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px var(--spacing-lg);
}

.demo-banner-content > .icon {
    font-size: 18px;
    flex-shrink: 0;
}

.demo-banner-text {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.demo-banner-cta {
    flex-shrink: 0;
    background: var(--white);
    color: var(--secondary-color);
    font-weight: var(--font-weight-semibold);
    min-height: 40px;
    text-decoration: none;
}

.demo-banner-cta:hover {
    background: #fff7ea;
}

.demo-banner-cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

body.is-demo-session .sidebar-nav {
    top: var(--demo-banner-height);
    height: calc(100vh - var(--demo-banner-height));
}

body.is-demo-session .sidebar-toggle {
    top: calc(var(--demo-banner-height) + 10px);
}

body.is-demo-session .skip-link:focus {
    top: calc(var(--demo-banner-height) + 8px);
}

body.is-demo-session .main-content {
    padding-top: var(--demo-banner-height);
}

@media (max-width: 992px) {
    body.is-demo-session {
        --demo-banner-height: 76px;
    }
}

@media (max-width: 575px) {
    body.is-demo-session {
        --demo-banner-height: 116px;
    }

    .demo-banner-content {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: 8px var(--spacing-md);
    }

    .demo-banner-text {
        font-size: 12.5px;
        line-height: 1.4;
    }

    .demo-banner-cta {
        flex: 1 0 100%;
        justify-content: center;
        min-height: 44px;
    }
}