/* =============================================================================
   CSS LAYER ORDER — controls cascade priority regardless of file/selector order.
   Tailwind utilities (loaded last, unlayered) automatically win over all layers.
   ============================================================================= */
@layer base, components, layout;

/* =============================================================================
   BASE.CSS — Layer declaration + unique tokens + stability rules
   =============================================================================
   This file contains:
   - @layer order declaration (base, components, layout)
   - Unique design tokens (breakpoints, z-index) not in components.css
   - Layout stability rules (overflow, min-width, max-width guards)
   - Dark theme border overrides
   - Utility classes (.no-scrollbar)
   - Print styles

   All shared design tokens, typography, surfaces, buttons, and prose
   now live in components.css (@layer components).
   ============================================================================= */

/* =============================================================================
   BREAKPOINT REFERENCE (unified system — use ONLY these values)
   =============================================================================
   --bp-xs:  320px   small phones
   --bp-sm:  480px   phones
   --bp-md:  768px   tablets
   --bp-lg:  1024px  desktop
   --bp-xl:  1440px  large screens

   Mobile-first: base = mobile, then @media (min-width: VAR) for larger.
   ============================================================================= */

/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   UNIQUE TOKENS — only properties NOT defined in components.css.
   All shared design tokens now live in components.css (@layer components).
   ----------------------------------------------------------------------------- */
:root {
    /* Breakpoints (for JS reference — CSS uses literals in @media) */
    --bp-xs: 320px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;

    /* Z-Index Scale (centralized) */
    --z-bg: -1;
    --z-sidebar-overlay: 30;
    --z-sidebar: 40;
    --z-header: 50;
    --z-impersonation: 60;
    --z-drawer: 80;
    --z-modal: 100;
    --z-modal-nested: 110;
    --z-mobile-bar: 120;
    --z-toast: 125;
    --z-record-modal: 130;
    --z-toast-container: 150;
    --z-admin-modal: 200;
}

@layer base {

/* =============================================================================
   GLOBAL RESET — properties NOT in components.css
   ============================================================================= */

html {
    min-height: 100%;
    min-height: -webkit-fill-available;
    overscroll-behavior-y: contain;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
}

@supports (min-height: 100dvh) {
    body { min-height: 100dvh; }
}
@supports (-webkit-touch-callout: none) {
    body { min-height: -webkit-fill-available; }
}

/* =============================================================================
   CABINET LAYOUT — Safe area fallbacks
   ============================================================================= */

header[role="banner"] {
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
}
.cabinet-main {
    top: 3.5rem;
    top: calc(3.5rem + env(safe-area-inset-top, 0px));
}

/* =============================================================================
   LAYOUT STABILITY — prevent blowout
   ============================================================================= */

:where(img, video, canvas, svg) {
    max-width: 100%;
    height: auto;
}
:where(table) {
    width: 100%;
    table-layout: auto;
    word-break: break-word;
}
:where(.flex > *) { min-width: 0; }
:where(.grid > *) { min-width: 0; }

/* =============================================================================
   DARK THEME — Improved dividers & borders
   ============================================================================= */

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.08);
}
.dark .border-gray-200,
.dark .border-gray-800,
.dark hr {
    border-color: rgba(255, 255, 255, 0.10);
}

/* =============================================================================
   DISABLED STATE — [disabled] attr + pointer-events (extends components.css)
   ============================================================================= */

:where(.btn-primary, .btn-secondary, .btn-tertiary, .btn-success, .btn-danger)[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
    .mesh-bg, .glass, #backToTop, .toast-container,
    #cabinetSidebar, #cabinetSidebarOverlay,
    header[role="banner"], .skip-link,
    #chatWidget, #cabinetBottomNav, #cookieConsent,
    [role="dialog"], .modal-backdrop {
        display: none !important;
    }
    main { padding-top: 0 !important; }
    body { overflow: visible !important; }
}

} /* end @layer base */