/* ==========================================================================
   SAPA ERP — Design System
   --------------------------------------------------------------------------
   One file, four layers (in cascade order):

     1. Tokens        — the only place raw colour / size values live.
     2. Base          — document defaults, focus, scrollbars, motion.
     3. Shell         — topbar, module sidebar, workspace (body.sapa-app).
     4. Components    — .sapa-* classes used by Blade components and views.
     5. Compatibility — scoped normalisation of legacy utility classes that
                        were written for the retired dark theme. Each rule
                        here can be deleted once no view uses that class.

   Tailwind (Play CDN, v3) is configured in layouts/app.blade.php with the
   same token values for colour, radius, shadow and type scale, so utilities
   and components stay in sync.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Typography — two families only */
    --sapa-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sapa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sapa-fs-app-title: 0.875rem;   /* 14px — product / app name in topbar */
    --sapa-fs-page-title: 1.125rem;  /* 18px — page title */
    --sapa-fs-record-title: 1.25rem; /* 20px — record name on form/detail */
    --sapa-fs-section: 0.8125rem;    /* 13px — section title */
    --sapa-fs-body: 0.8125rem;       /* 13px — table body, field value */
    --sapa-fs-label: 0.75rem;        /* 12px — form label */
    --sapa-fs-th: 0.6875rem;         /* 11px — table header */
    --sapa-fs-meta: 0.6875rem;       /* 11px — metadata, helper */

    /* Brand — Enterprise Teal ("tile") */
    --sapa-brand-50: #f0fdfa;
    --sapa-brand-100: #ccfbf1;
    --sapa-brand-200: #99f6e4;
    --sapa-brand-300: #5eead4;
    --sapa-brand-400: #2dd4bf;
    --sapa-brand-500: #14b8a6;
    --sapa-brand-600: #0d9488;
    --sapa-brand-700: #0f766e;
    --sapa-brand-800: #115e59;
    --sapa-brand-900: #134e4a;

    --sapa-primary: var(--sapa-brand-600);
    --sapa-primary-hover: var(--sapa-brand-700);
    --sapa-primary-active: var(--sapa-brand-800);
    --sapa-primary-subtle: var(--sapa-brand-50);
    --sapa-primary-ring: rgba(13, 148, 136, 0.28);
    --sapa-secondary: #0f766e;         /* dark teal */
    --sapa-accent: #b25e09;            /* amber — attention, used sparingly */

    /* Surfaces */
    --sapa-bg-app: #f3f5f8;
    --sapa-surface: #ffffff;
    --sapa-surface-2: #f7f8fa;         /* table head, section header, read-only */
    --sapa-surface-hover: #eef2f7;
    --sapa-nav-surface: #162033;       /* topbar */
    --sapa-nav-text: #c3cddd;
    --sapa-nav-text-strong: #ffffff;
    --sapa-nav-hover: rgba(255, 255, 255, 0.08);
    --sapa-nav-border: rgba(255, 255, 255, 0.08);
    --sapa-sidebar-surface: #ffffff;

    /* Text */
    --sapa-text: #1b2433;
    --sapa-text-2: #475467;
    --sapa-text-muted: #667085;
    --sapa-text-disabled: #98a2b3;

    /* Borders */
    --sapa-border: #dde2e9;
    --sapa-border-strong: #c5ccd6;
    --sapa-divider: #edf0f4;

    /* Semantic status — meaning is identical in every module */
    --sapa-success: #11744a;  --sapa-success-bg: #e8f5ee;  --sapa-success-border: #b7dfc9;
    --sapa-warning: #9a5a06;  --sapa-warning-bg: #fdf4e3;  --sapa-warning-border: #f1d39d;
    --sapa-danger:  #b42335;  --sapa-danger-bg:  #fdecee;  --sapa-danger-border:  #f4c1c8;
    --sapa-info:    #1d68a8;  --sapa-info-bg:    #e8f1fa;  --sapa-info-border:    #bad4ee;
    --sapa-neutral: #4b5565;  --sapa-neutral-bg: #f1f3f6;  --sapa-neutral-border: #dce0e6;
    --sapa-danger-ring: rgba(180, 35, 53, 0.22);

    /* Shape & elevation */
    --sapa-radius-sm: 3px;
    --sapa-radius: 5px;
    --sapa-radius-lg: 8px;
    --sapa-shadow-overlay: 0 12px 32px -8px rgba(16, 24, 40, 0.22), 0 0 0 1px rgba(16, 24, 40, 0.06);
    --sapa-shadow-raised: 0 1px 2px rgba(16, 24, 40, 0.06);

    /* Spacing */
    --sapa-topbar-h: 3rem;            /* 48px */
    --sapa-sidebar-w: 14.5rem;        /* 232px */
    --sapa-page-px: 1.5rem;
    --sapa-page-py: 1.25rem;
    --sapa-control-h: 2rem;           /* 32px buttons / inputs in toolbars */
    --sapa-field-h: 2.25rem;          /* 36px inputs in forms */
    --sapa-cell-px: 0.75rem;
    --sapa-cell-py: 0.5rem;
    --sapa-section-gap: 1rem;

    /* Legacy aliases still read by older inline styles / components */
    --sapa-bg-page: var(--sapa-bg-app);
    --sapa-bg-surface: var(--sapa-surface);
    --sapa-border-subtle: var(--sapa-border);
    --sapa-text-main: var(--sapa-text);
    --sapa-input-bg: var(--sapa-surface);
    --sapa-input-border: var(--sapa-border-strong);
    --sapa-input-border-hover: #98a2b3;
    --sapa-input-text: var(--sapa-text);
    --sapa-input-placeholder: #8a94a6;
    --sapa-input-disabled-bg: var(--sapa-surface-2);
    --sapa-input-radius: var(--sapa-radius);
    --sapa-success-light: var(--sapa-success-bg);
    --sapa-warning-light: var(--sapa-warning-bg);
    --sapa-danger-light: var(--sapa-danger-bg);
    --sapa-danger-hover: #93192a;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
[x-cloak] { display: none !important; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--sapa-font-sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-feature-settings: 'cv11', 'ss01';
}

:focus-visible {
    outline: 2px solid var(--sapa-primary);
    outline-offset: 2px;
}

.font-mono, code, kbd, samp {
    font-family: var(--sapa-font-mono);
}

/* Numbers, currency, quantities: aligned digits without switching font */
.tabular-nums,
.sapa-num {
    font-variant-numeric: tabular-nums;
}

.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cfd5de; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #b3bcc8; }

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

/* Motion: short, functional, and off when the user asks for less motion */
@keyframes sapaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sapaRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sapaSlideInLeft { from { transform: translateX(-100%); } to { transform: none; } }

.sapa-page-transition { animation: sapaFadeIn 0.12s ease-out both; }
.sapa-animate-scale-in,
.sapa-animate-slide-down,
.sapa-animate-slide-up { animation: sapaRise 0.14s ease-out both; }
.sapa-backdrop-fade { transition: opacity 0.15s ease-out; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   3. SHELL  (body.sapa-app — back-office layout only)
   ========================================================================== */
body.sapa-app {
    background: var(--sapa-bg-app);
    color: var(--sapa-text);
    font-size: var(--sapa-fs-body);
}

/* ---- 3.1 Topbar (global navigation surface) ---------------------------- */
.sapa-topbar {
    height: var(--sapa-topbar-h);
    background: var(--sapa-nav-surface);
    color: var(--sapa-nav-text);
    border-bottom: 1px solid #0d1524;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 30;
}
@media (min-width: 640px) { .sapa-topbar { padding: 0 0.75rem; } }

.sapa-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: var(--sapa-radius);
    color: var(--sapa-nav-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.sapa-topbar-btn:hover,
.sapa-topbar-btn[aria-expanded="true"] {
    background: var(--sapa-nav-hover);
    color: var(--sapa-nav-text-strong);
}

.sapa-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: var(--sapa-nav-text-strong);
    text-decoration: none;
}
.sapa-brand-mark {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--sapa-radius);
    background: var(--sapa-brand-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.sapa-brand-product {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8c9ab1;
}
.sapa-brand-app {
    font-size: var(--sapa-fs-app-title);
    font-weight: 600;
    color: var(--sapa-nav-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sapa-topbar-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--sapa-nav-border);
    flex-shrink: 0;
}

/* Global search trigger (opens the command palette / app switcher) */
.sapa-global-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    width: 100%;
    max-width: 22rem;
    padding: 0 0.625rem;
    border-radius: var(--sapa-radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #93a1b8;
    font-size: 0.75rem;
    cursor: pointer;
    text-align: left;
}
.sapa-global-search:hover { background: rgba(255, 255, 255, 0.1); color: #c3cddd; }
.sapa-global-search kbd {
    margin-left: auto;
    font-size: 0.625rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--sapa-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #93a1b8;
}

/* Profile button inside the dark topbar */
.sapa-topbar #user-profile-btn {
    background: transparent;
    border-color: transparent;
    border-radius: var(--sapa-radius);
}
.sapa-topbar #user-profile-btn:hover { background: var(--sapa-nav-hover); }
.sapa-topbar #topbar-user-name { color: var(--sapa-nav-text-strong); }
.sapa-topbar .sapa-topbar-company { color: #93a1b8; }

/* ---- 3.2 Shell frame ---------------------------------------------------- */
.sapa-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.sapa-workspace {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.75rem 2rem;
    background: var(--sapa-bg-app);
}
@media (min-width: 640px) { .sapa-workspace { padding: var(--sapa-page-py) var(--sapa-page-px) 2rem; } }

/* ---- 3.3 Module sidebar ------------------------------------------------- */
.sapa-sidebar {
    width: var(--sapa-sidebar-w);
    flex-shrink: 0;
    background: var(--sapa-sidebar-surface);
    border-right: 1px solid var(--sapa-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sapa-sidebar-head {
    padding: 0.75rem 0.875rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sapa-sidebar-title {
    font-size: var(--sapa-fs-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sapa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sapa-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0.5rem 0.75rem;
}
.sapa-sidebar-foot {
    border-top: 1px solid var(--sapa-divider);
    padding: 0.5rem;
}

/* Desktop: in normal flow; can be collapsed by the user (persisted) */
@media (min-width: 1024px) {
    .sapa-sidebar { display: flex !important; position: static; }
    html.sapa-sidebar-collapsed .sapa-sidebar { display: none !important; }
    #mobile-nav-backdrop { display: none !important; }
}
/* Mobile / tablet: off-canvas drawer */
@media (max-width: 1023.98px) {
    .sapa-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: min(18rem, 86vw);
        box-shadow: var(--sapa-shadow-overlay);
    }
    .sapa-sidebar.hidden { display: none; }
    .sapa-sidebar:not(.hidden) { animation: sapaSlideInLeft 0.18s ease-out both; }
}
#mobile-nav-backdrop {
    background: rgba(16, 24, 40, 0.48);
}
#mobile-nav-backdrop:not(.hidden) { animation: sapaFadeIn 0.15s ease-out both; }

/* Module navigation inside the sidebar.
   Markup contract (layouts/app.blade.php):
     a.sapa-tab-btn                         — top-level entry
     div.sapa-nav-group > button.sapa-tab-btn + div.sapa-dropdown-panel > a.sapa-dropdown-item
*/
.sapa-module-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sapa-module-nav .sapa-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.125rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--sapa-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sapa-text-2);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.sapa-module-nav .sapa-tab-btn > span, .sapa-module-nav .sapa-tab-btn > span * { font-size: inherit; font-weight: inherit; }
.sapa-module-nav .sapa-tab-btn > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sapa-module-nav .sapa-tab-btn:hover { background: var(--sapa-surface-hover); color: var(--sapa-text); }
.sapa-module-nav a.sapa-tab-btn.is-active {
    background: var(--sapa-primary-subtle);
    color: var(--sapa-primary-hover);
    font-weight: 600;
}
.sapa-module-nav a.sapa-tab-btn.is-active::before,
.sapa-module-nav .sapa-dropdown-item.is-active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--sapa-primary);
}

/* Group header (button) */
.sapa-module-nav .sapa-nav-group { position: relative; }
.sapa-module-nav .sapa-nav-group > .sapa-tab-btn {
    font-size: var(--sapa-fs-meta);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sapa-text-muted);
    margin-top: 0.625rem;
    min-height: 1.75rem;
}
.sapa-module-nav .sapa-nav-group > .sapa-tab-btn.is-active { color: var(--sapa-primary-hover); }
.sapa-module-nav .sapa-nav-group > .sapa-tab-btn > svg { transition: transform 0.12s ease; flex-shrink: 0; }
.sapa-module-nav .sapa-nav-group.is-collapsed > .sapa-tab-btn > svg { transform: rotate(-90deg); }
.sapa-module-nav .sapa-nav-group.is-collapsed > .sapa-dropdown-panel { display: none; }

/* Group items */
.sapa-module-nav .sapa-dropdown-panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sapa-module-nav .sapa-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.125rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--sapa-radius);
    color: var(--sapa-text-2);
    position: relative;
    text-decoration: none;
}
.sapa-module-nav .sapa-dropdown-item:hover { background: var(--sapa-surface-hover); color: var(--sapa-text); }
.sapa-module-nav .sapa-dropdown-item.is-active { background: var(--sapa-primary-subtle); }
/* Item icon: one size, one colour; descriptions are for the command palette, not the sidebar */
.sapa-module-nav .sapa-dropdown-item > div:first-child:not(:only-child) {
    width: 1rem;
    height: 1rem;
    background: none;
    color: var(--sapa-text-muted);
    border: 0;
    flex-shrink: 0;
}
.sapa-module-nav .sapa-dropdown-item > div:first-child:not(:only-child) svg { width: 1rem; height: 1rem; }
.sapa-module-nav .sapa-dropdown-item:hover > div:first-child:not(:only-child) { background: none; color: var(--sapa-text-2); }
.sapa-module-nav .sapa-dropdown-item.is-active > div:first-child:not(:only-child) { color: var(--sapa-primary); }
.sapa-module-nav .sapa-dropdown-item p { display: none; }
/* Decorative mono "tags" next to item labels are not shown in the sidebar */
.sapa-module-nav .sapa-dropdown-item .font-mono { display: none; }
.sapa-module-nav .sapa-dropdown-item .flex-1 { min-width: 0; }
/* Sub-headings and dividers inside a group */
.sapa-module-nav .sapa-dropdown-panel > div.uppercase {
    padding: 0.5rem 0.625rem 0.125rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sapa-text-disabled);
}
.sapa-module-nav .sapa-dropdown-panel > div[class*="border-t"] { margin: 0.25rem 0.625rem; border-color: var(--sapa-divider); }
.sapa-module-nav .sapa-dropdown-item span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: inherit;
    line-height: 1.25;
}
.sapa-module-nav .sapa-dropdown-item.is-active span { color: var(--sapa-primary-hover); font-weight: 600; }

/* ---- 3.4 Top-bar dropdown panels (profile, notifications) ---------------- */
.sapa-dropdown-panel-floating,
#user-profile-dropdown {
    background: var(--sapa-surface);
    border: 1px solid var(--sapa-border);
    border-radius: var(--sapa-radius-lg);
    box-shadow: var(--sapa-shadow-overlay);
}
#user-profile-dropdown .user-header-card { background: var(--sapa-surface-2); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* ---- 4.1 Page header & breadcrumb -------------------------------------- */
.sapa-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: var(--sapa-section-gap);
}
@media (min-width: 768px) {
    .sapa-page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
/* Mobile: the primary action (last in DOM, right-most on desktop) comes first */
@media (max-width: 767.98px) {
    .sapa-page-header .sapa-action-group { flex-direction: row-reverse; justify-content: flex-end; }
}
.sapa-page-title {
    font-size: var(--sapa-fs-page-title);
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--sapa-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.sapa-page-subtitle { font-size: var(--sapa-fs-label); color: var(--sapa-text-muted); margin-top: 0.125rem; }
.sapa-record-title { font-size: var(--sapa-fs-record-title); line-height: 1.75rem; font-weight: 600; color: var(--sapa-text); }
.sapa-section-title {
    font-size: var(--sapa-fs-section);
    font-weight: 600;
    color: var(--sapa-text);
    margin: 0;
}
.sapa-meta { font-size: var(--sapa-fs-meta); color: var(--sapa-text-muted); }

.sapa-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--sapa-text-muted);
    margin-bottom: 0.25rem;
}
.sapa-breadcrumb a { color: var(--sapa-text-muted); text-decoration: none; }
.sapa-breadcrumb a:hover { color: var(--sapa-primary); text-decoration: underline; }
.sapa-breadcrumb [aria-current="page"] { color: var(--sapa-text-2); font-weight: 500; }
.sapa-breadcrumb-sep { color: #b5bdc9; }

/* ---- 4.2 Buttons -------------------------------------------------------- */
.sapa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: var(--sapa-control-h);
    padding: 0 0.75rem;
    border-radius: var(--sapa-radius);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--sapa-border-strong);
    background: var(--sapa-surface);
    color: var(--sapa-text);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.sapa-btn:hover { background: var(--sapa-surface-2); border-color: #aeb7c4; }
.sapa-btn:disabled, .sapa-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.sapa-btn svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.sapa-btn-primary,
.sapa-btn-action {
    background: var(--sapa-primary);
    border-color: var(--sapa-primary);
    color: #fff;
}
.sapa-btn-primary:hover,
.sapa-btn-action:hover { background: var(--sapa-primary-hover); border-color: var(--sapa-primary-hover); color: #fff; }
.sapa-btn-primary:active,
.sapa-btn-action:active { background: var(--sapa-primary-active); }
.sapa-btn-ghost { border-color: transparent; background: transparent; color: var(--sapa-text-2); }
.sapa-btn-ghost:hover { background: var(--sapa-surface-hover); border-color: transparent; color: var(--sapa-text); }
.sapa-btn-danger { background: var(--sapa-surface); border-color: var(--sapa-danger-border); color: var(--sapa-danger); }
.sapa-btn-danger:hover { background: var(--sapa-danger-bg); border-color: var(--sapa-danger); }
.sapa-btn-sm { height: 1.75rem; padding: 0 0.5rem; font-size: 0.6875rem; }
.sapa-btn-icon { width: var(--sapa-control-h); padding: 0; }

/* .sapa-btn-action is the legacy primary class: keep its box model */
.sapa-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--sapa-radius);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: none;
}

/* ---- 4.3 Toolbar (search + filters + view actions) ---------------------- */
.sapa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--sapa-surface);
    border: 1px solid var(--sapa-border);
    border-bottom: 0;
    border-radius: var(--sapa-radius-lg) var(--sapa-radius-lg) 0 0;
}
.sapa-toolbar + .sapa-panel,
.sapa-toolbar + .sapa-table-responsive { border-top-left-radius: 0; border-top-right-radius: 0; }
.sapa-search {
    position: relative;
    flex: 1 1 14rem;
    max-width: 24rem;
}
.sapa-search input {
    width: 100%;
    height: var(--sapa-control-h);
    padding: 0 0.625rem 0 2rem;
    border: 1px solid var(--sapa-border-strong);
    border-radius: var(--sapa-radius);
    background: var(--sapa-surface);
    font-size: 0.75rem;
    color: var(--sapa-text);
}
.sapa-search input:focus { outline: none; border-color: var(--sapa-primary); box-shadow: 0 0 0 3px var(--sapa-primary-ring); }
.sapa-search svg {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    transform: translateY(-50%);
    color: var(--sapa-text-muted);
    pointer-events: none;
}

/* Segmented filter tabs (record state filters) */
.sapa-filter-tabs { display: flex; gap: 0.125rem; overflow-x: auto; scrollbar-width: none; }
.sapa-filter-tabs::-webkit-scrollbar { display: none; }
.sapa-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.875rem;
    padding: 0 0.625rem;
    border-radius: var(--sapa-radius);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sapa-text-2);
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
}
.sapa-filter-tab:hover { background: var(--sapa-surface-hover); color: var(--sapa-text); }
.sapa-filter-tab[aria-current="true"],
.sapa-filter-tab.is-active {
    background: var(--sapa-primary-subtle);
    border-color: var(--sapa-brand-200);
    color: var(--sapa-primary-hover);
    font-weight: 600;
}
.sapa-filter-tab .sapa-count {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--sapa-text-muted);
}
.sapa-filter-tab.is-active .sapa-count { color: var(--sapa-primary); }

/* List action bar (select all · bulk actions · import/export).
   Rendered by layouts/partials/universal-list-operations and docked above the
   first list table by its script. */
.sapa-list-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--sapa-surface);
    border: 1px solid var(--sapa-border);
    border-radius: var(--sapa-radius-lg);
}
.sapa-list-actionbar.is-docked {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.sapa-list-actionbar.is-docked + .sapa-table-responsive { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Pages without a list table (kanban, dashboards): only the data import/export
   actions remain, shown as a quiet right-aligned strip. */
.sapa-list-actionbar.is-page-level {
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 0.5rem;
    background: transparent;
    border: 0;
}
.sapa-list-actionbar.is-page-level > div:first-child { display: none; }
/* Inside an existing card the bar docks cleanly above the table */
.bg-white > .sapa-list-actionbar.is-docked,
.sapa-panel > .sapa-list-actionbar.is-docked,
.sapa-card > .sapa-list-actionbar.is-docked,
.sapa-list-actionbar.is-card-header {
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    background: rgba(248, 250, 252, 0.75);
    border-color: var(--sapa-border);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.dark .bg-white > .sapa-list-actionbar.is-docked,
.dark .sapa-panel > .sapa-list-actionbar.is-docked,
.dark .sapa-card > .sapa-list-actionbar.is-docked,
.dark .sapa-list-actionbar.is-card-header {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(51, 65, 85, 0.8);
}

/* Standalone floating toolbar when inside a card container with padding */
.space-y-3\.5 > .sapa-list-actionbar.is-docked,
.space-y-4 > .sapa-list-actionbar.is-docked,
.p-4 > .sapa-list-actionbar.is-docked,
.p-5 > .sapa-list-actionbar.is-docked,
.p-6 > .sapa-list-actionbar.is-docked,
.sapa-list-actionbar.is-standalone-toolbar {
    border-width: 1px;
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    background: rgba(248, 250, 252, 0.85);
    border-color: var(--sapa-border);
    margin-bottom: 0;
}

.dark .space-y-3\.5 > .sapa-list-actionbar.is-docked,
.dark .space-y-4 > .sapa-list-actionbar.is-docked,
.dark .p-4 > .sapa-list-actionbar.is-docked,
.dark .p-5 > .sapa-list-actionbar.is-docked,
.dark .p-6 > .sapa-list-actionbar.is-docked,
.dark .sapa-list-actionbar.is-standalone-toolbar {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.8);
}

/* ---- 4.4 Panels / cards ------------------------------------------------- */
.sapa-panel,
.sapa-card {
    background: var(--sapa-surface);
    border: 1px solid var(--sapa-border);
    border-radius: var(--sapa-radius-lg);
}
.sapa-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--sapa-divider);
}
.sapa-panel-body { padding: 0.875rem; }

/* KPI tile — label, value, context line. No decorative icon tiles. */
.sapa-kpi { padding: 0.75rem 0.875rem; }
.sapa-kpi-label {
    font-size: var(--sapa-fs-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sapa-text-muted);
}
.sapa-kpi-value {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--sapa-text);
    font-variant-numeric: tabular-nums;
    margin-top: 0.25rem;
}
.sapa-kpi-context { font-size: var(--sapa-fs-meta); color: var(--sapa-text-muted); margin-top: 0.125rem; }

/* ---- 4.5 Data table ----------------------------------------------------- */
.sapa-table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--sapa-surface);
    border: 1px solid var(--sapa-border);
    border-radius: var(--sapa-radius-lg);
}
.sapa-table-responsive table { width: 100%; min-width: 40rem; border-collapse: collapse; }
.sapa-table-responsive::-webkit-scrollbar { height: 8px; }
.sapa-table-responsive::-webkit-scrollbar-thumb { background: #cfd5de; border-radius: 8px; }
/* A table already framed by a panel does not need a second border */
.sapa-panel .sapa-table-responsive,
.sapa-card .sapa-table-responsive,
.bg-white .sapa-table-responsive { border: 0; border-radius: 0; }

/* Responsive Form Lines Tables (e.g. Journal Items STJ, Invoices, Sales, Purchases) */
.sapa-form-sheet .overflow-x-auto,
.sapa-form-sheet [class*="overflow-x-auto"],
.overflow-x-auto:has(> table),
.sapa-table-responsive {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.sapa-form-sheet .overflow-x-auto > table,
.sapa-form-sheet [class*="overflow-x-auto"] > table {
    min-width: 42rem; /* Prevents cell crunching on mobile viewports */
}
@media (max-width: 639.98px) {
    .overflow-x-auto > table,
    .sapa-table-responsive table {
        min-width: 42rem !important;
    }
}

/* ---- 4.6 Status indicator (text + dot; never colour alone) ------------- */
.sapa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: 1.25rem;
    padding: 0 0.4375rem;
    border-radius: var(--sapa-radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sapa-chip-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; background: currentColor; }
.sapa-chip-success { background: var(--sapa-success-bg); color: var(--sapa-success); border-color: var(--sapa-success-border); }
.sapa-chip-warning { background: var(--sapa-warning-bg); color: var(--sapa-warning); border-color: var(--sapa-warning-border); }
.sapa-chip-danger  { background: var(--sapa-danger-bg);  color: var(--sapa-danger);  border-color: var(--sapa-danger-border); }
.sapa-chip-info    { background: var(--sapa-info-bg);    color: var(--sapa-info);    border-color: var(--sapa-info-border); }
.sapa-chip-neutral { background: var(--sapa-neutral-bg); color: var(--sapa-neutral); border-color: var(--sapa-neutral-border); }
.sapa-chip-primary { background: var(--sapa-primary-subtle); color: var(--sapa-primary-hover); border-color: var(--sapa-brand-200); }

/* ---- 4.7 Forms ---------------------------------------------------------- */
.sapa-form-section { background: var(--sapa-surface); border: 1px solid var(--sapa-border); border-radius: var(--sapa-radius-lg); }
.sapa-form-section-head { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--sapa-divider); }
.sapa-form-section-body { padding: 0.875rem; display: grid; gap: 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .sapa-form-section-body.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sapa-form-section-body.is-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sapa-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.sapa-label { font-size: var(--sapa-fs-label); font-weight: 500; color: var(--sapa-text-2); }
.sapa-label .sapa-required { color: var(--sapa-danger); margin-left: 0.125rem; }
.sapa-help { font-size: var(--sapa-fs-meta); color: var(--sapa-text-muted); }
.sapa-error { font-size: var(--sapa-fs-meta); color: var(--sapa-danger); font-weight: 500; }
.sapa-value { font-size: var(--sapa-fs-body); color: var(--sapa-text); }

.sapa-input {
    width: 100%;
    height: var(--sapa-field-h);
    min-height: var(--sapa-field-h);
    box-sizing: border-box;
    background-color: var(--sapa-surface);
    color: var(--sapa-text);
    border: 1px solid var(--sapa-border-strong);
    border-radius: var(--sapa-radius);
    padding: 0 0.625rem;
    font-size: var(--sapa-fs-body);
    line-height: 1.25rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    outline: none;
}
select.sapa-input,
body.sapa-app main select,
body.sapa-app select,
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--sapa-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%2364748b'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
    background-position: right 1rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.125rem 1.125rem !important;
    padding-right: 2.75rem !important;
    cursor: pointer;
}
.dark select.sapa-input,
.dark body.sapa-app main select,
.dark body.sapa-app select,
.dark select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%2394a3b8'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
}
select[multiple].sapa-input,
body.sapa-app main select[multiple],
select[multiple] {
    background-image: none !important;
    padding-right: 0.75rem !important;
}
textarea.sapa-input { height: auto; min-height: 5rem; padding: 0.5rem 0.625rem; }
.sapa-input::placeholder { color: var(--sapa-input-placeholder); opacity: 1; }
.sapa-input:hover:not(:disabled):not([readonly]):not(:focus) { border-color: var(--sapa-input-border-hover); }
.sapa-input:focus,
.sapa-input:focus-within,
.sapa-input.is-active { border-color: var(--sapa-primary); box-shadow: 0 0 0 3px var(--sapa-primary-ring); }
.sapa-input.is-invalid, .sapa-input[aria-invalid="true"] { border-color: var(--sapa-danger); }
.sapa-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--sapa-danger-ring); }
.sapa-input:disabled,
.sapa-input[readonly],
.sapa-input.is-disabled { background-color: var(--sapa-surface-2); color: var(--sapa-text-2); cursor: not-allowed; }

/* ---- 4.8 Tabs (record notebook) ---------------------------------------- */
.sapa-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--sapa-border); overflow-x: auto; scrollbar-width: none; }
.sapa-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sapa-text-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    background: none;
    cursor: pointer;
}
.sapa-tab:hover { color: var(--sapa-text); }
.sapa-tab[aria-selected="true"], .sapa-tab.is-active { color: var(--sapa-primary-hover); border-bottom-color: var(--sapa-primary); font-weight: 600; }

/* ---- 4.9 Empty & loading states ---------------------------------------- */
.sapa-empty { text-align: center; padding: 2.5rem 1rem; color: var(--sapa-text-muted); }
.sapa-empty-title { font-size: var(--sapa-fs-section); font-weight: 600; color: var(--sapa-text); margin-top: 0.5rem; }
.sapa-empty-text { font-size: 0.75rem; margin-top: 0.25rem; max-width: 26rem; margin-left: auto; margin-right: auto; }
.sapa-skeleton { background: linear-gradient(90deg, #eef1f5 25%, #f6f8fa 50%, #eef1f5 75%); background-size: 200% 100%; animation: sapaShimmer 1.2s linear infinite; border-radius: var(--sapa-radius-sm); }
@keyframes sapaShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- 4.10 App switcher cards (apps-space overlay) ----------------------- */
.app-card { border-radius: var(--sapa-radius-lg); }

/* ---- 4.11 Misc helpers -------------------------------------------------- */
.sapa-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.font-heading { font-family: var(--sapa-font-sans); }

/* ---- 4.12 Smart Buttons (oe_button_box) — Mobile-First Responsive ------ */
.sapa-smart-box-container,
.oe_button_box {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    border-bottom: 1px solid var(--sapa-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 10;
}

.sapa-smart-button-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.sapa-smart-btn,
.sapa-smart-button-box > a,
.sapa-smart-button-box > button {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--sapa-radius);
    border: 1px solid var(--sapa-border);
    background-color: var(--sapa-surface);
    color: var(--sapa-text);
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 44px;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.sapa-smart-btn:hover,
.sapa-smart-button-box > a:hover,
.sapa-smart-button-box > button:hover {
    background-color: var(--sapa-surface-hover);
    border-color: var(--sapa-border-strong);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06);
}

.sapa-smart-btn:active,
.sapa-smart-button-box > a:active,
.sapa-smart-button-box > button:active {
    transform: scale(0.98);
}

@media (min-width: 640px) {
    .sapa-smart-box-container,
    .oe_button_box {
        justify-content: flex-end;
        padding-bottom: 0.875rem;
        position: relative;
        z-index: 10;
    }

    .sapa-smart-button-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: auto;
        gap: 0.375rem;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .sapa-smart-btn,
    .sapa-smart-button-box > a,
    .sapa-smart-button-box > button {
        border: 1px solid var(--sapa-border);
        border-radius: var(--sapa-radius);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
        padding: 0.45rem 0.75rem;
        min-height: 42px;
        min-width: 120px;
        max-width: 260px;
        background-color: var(--sapa-surface);
    }
}

/* ---- 4.13 Perfectionist Watermark Stamp (Mobile & Desktop Responsive) ---- */
.sapa-watermark-stamp {
    position: absolute;
    top: 1rem;
    right: 1rem;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-style: solid;
    border-radius: 0.5rem;
    transform: rotate(-10deg);
    opacity: 0.13;
    font-size: 1.5rem;
    line-height: 1;
    border-width: 4px;
    padding: 0.35rem 0.85rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .sapa-watermark-stamp {
        top: 1.5rem;
        right: 2rem;
        font-size: 2.75rem;
        border-width: 6px;
        padding: 0.5rem 1.35rem;
        transform: rotate(-12deg);
        opacity: 0.14;
    }
}

@media (min-width: 1024px) {
    .sapa-watermark-stamp {
        top: 1.75rem;
        right: 2.75rem;
        font-size: 3.5rem;
        border-width: 7px;
        padding: 0.6rem 1.75rem;
        opacity: 0.15;
    }
}

.sapa-watermark-posted {
    color: #059669;
    border-color: #059669;
}
.dark .sapa-watermark-posted {
    color: #34d399;
    border-color: #34d399;
    opacity: 0.18;
}

.sapa-watermark-cancel {
    color: #e11d48;
    border-color: #e11d48;
}
.dark .sapa-watermark-cancel {
    color: #fb7185;
    border-color: #fb7185;
    opacity: 0.18;
}

.sapa-watermark-paid {
    color: #0d9488;
    border-color: #0d9488;
}
.dark .sapa-watermark-paid {
    color: #2dd4bf;
    border-color: #2dd4bf;
    opacity: 0.18;
}

.sapa-watermark-done {
    color: #2563eb;
    border-color: #2563eb;
}
.dark .sapa-watermark-done {
    color: #60a5fa;
    border-color: #60a5fa;
    opacity: 0.18;
}

/* Scoped override for legacy divide-x smart button boxes & sheets on mobile */
@media (max-width: 639px) {
    body.sapa-app .oe_form_sheet,
    body.sapa-app [class*="oe_form_sheet"] {
        padding: 0.875rem !important;
    }

    /* Support legacy inline-flex divide-x boxes automatically */
    .oe_button_box > div.inline-flex,
    .sapa-smart-box-container > div.inline-flex {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.375rem !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .oe_button_box > div.inline-flex > a,
    .oe_button_box > div.inline-flex > button,
    .sapa-smart-box-container > div.inline-flex > a,
    .sapa-smart-box-container > div.inline-flex > button {
        border: 1px solid var(--sapa-border) !important;
        border-radius: var(--sapa-radius) !important;
        background: var(--sapa-surface) !important;
        padding: 0.5rem 0.625rem !important;
        min-height: 44px !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
    }

    .oe_button_box > div.inline-flex > *:last-child:nth-child(odd),
    .sapa-smart-box-container > div.inline-flex > *:last-child:nth-child(odd) {
        grid-column: span 2 / span 2 !important;
    }
}

/* ==========================================================================
   5. COMPATIBILITY LAYER  (scoped to body.sapa-app)
   --------------------------------------------------------------------------
   Views were originally written for a dark theme and later forced to light
   mode by remapping utilities. These rules keep that contract working with
   the new tokens, without !important where specificity is enough:
   `body.sapa-app .x` (0,2,1) outranks a Tailwind utility `.x` (0,1,0).
   ========================================================================== */

/* 5.1 Workspace defaults: ERP density for every table and heading */
body.sapa-app main table { font-size: var(--sapa-fs-body); }
body.sapa-app main thead th {
    background: var(--sapa-surface-2);
    color: var(--sapa-text-2);
    font-size: var(--sapa-fs-th);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem var(--sapa-cell-px);
    border-bottom: 1px solid var(--sapa-border);
    white-space: nowrap;
}
body.sapa-app main tbody td {
    padding-top: var(--sapa-cell-py);
    padding-bottom: var(--sapa-cell-py);
    border-bottom: 1px solid var(--sapa-divider);
    vertical-align: middle;
}
body.sapa-app main tbody tr:last-child > td { border-bottom: 0; }
body.sapa-app main tbody tr:hover > td { background: #f8fafc; }
/* Two families only: monospace is reserved for code (pre, code, kbd, code editors).
   Elsewhere legacy `font-mono` becomes the UI face with tabular figures. */
body.sapa-app main .font-mono:not(pre):not(code):not(kbd):not(textarea):not(samp) {
    font-family: var(--sapa-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
/* Identifiers, dates and amounts: tabular figures in the UI face (mono reserved for code) */
body.sapa-app main td.font-mono,
body.sapa-app main td .font-mono,
body.sapa-app main .tabular-nums {
    font-family: var(--sapa-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
body.sapa-app main td.font-mono.text-\[11px\],
body.sapa-app main td.font-mono.text-\[10px\] { white-space: nowrap; }
body.sapa-app main td.text-right,
body.sapa-app main th.text-right { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Status badges inside tables: one line, restrained radius (no pills) */
body.sapa-app main td span[class*="rounded-full"][class*="px-"],
body.sapa-app main td span[class*="rounded-md"][class*="px-"],
body.sapa-app main td span[class*="rounded-lg"][class*="px-"] {
    white-space: nowrap;
    border-radius: var(--sapa-radius-sm);
}
body.sapa-app main td .sapa-chip { white-space: nowrap; }

/* Page titles inside views (h1/h2 carrying text-xl/2xl/3xl) */
body.sapa-app main h1.text-2xl, body.sapa-app main h2.text-2xl,
body.sapa-app main h1.text-3xl, body.sapa-app main h2.text-3xl,
body.sapa-app main h1.text-xl,  body.sapa-app main h2.text-xl {
    font-size: var(--sapa-fs-page-title);
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 5.2 Surfaces named after the retired dark palette */
body.sapa-app .bg-slate-950,
body.sapa-app .bg-slate-950\/85,
body.sapa-app .bg-slate-950\/90,
body.sapa-app .bg-slate-950\/95 { background-color: var(--sapa-surface-2); }
body.sapa-app .bg-slate-900,
body.sapa-app .bg-slate-900\/95,
body.sapa-app .bg-slate-900\/90,
body.sapa-app .bg-slate-900\/80,
body.sapa-app .bg-slate-900\/60 { background-color: var(--sapa-surface); border-color: var(--sapa-border); }
body.sapa-app .bg-slate-800 { background-color: var(--sapa-neutral-bg); color: #334155; border-color: var(--sapa-border); }
body.sapa-app .bg-slate-800:hover { background-color: #e5e9ef; }
/* Intentionally dark controls (e.g. "bg-slate-900 text-white" buttons) keep their colour */
body.sapa-app .bg-slate-900.text-white,
body.sapa-app .bg-slate-800.text-white { background-color: var(--sapa-text); color: #fff; }
/* Code / XML editors keep a dark canvas */
body.sapa-app pre.bg-slate-950,
body.sapa-app textarea.bg-slate-950,
body.sapa-app .font-mono.bg-slate-950 { background-color: #101828; color: #e4e7ec; }

body.sapa-app .border-slate-800,
body.sapa-app .border-slate-800\/80,
body.sapa-app .border-slate-700,
body.sapa-app .border-slate-700\/80,
body.sapa-app .border-slate-700\/70 { border-color: var(--sapa-border); }

body.sapa-app .text-slate-100 { color: var(--sapa-text); }
body.sapa-app .text-slate-200 { color: #1e293b; }
body.sapa-app .text-slate-300 { color: #344054; }
body.sapa-app .text-slate-400,
body.sapa-app .text-slate-500 { color: var(--sapa-text-muted); }
/* …except on genuinely dark surfaces (topbar, dark buttons, code canvases) */
body.sapa-app .sapa-topbar .text-slate-300,
body.sapa-app .sapa-topbar .text-slate-400,
body.sapa-app .bg-slate-900.text-white .text-slate-300,
body.sapa-app .bg-slate-900.text-white .text-slate-400 { color: var(--sapa-nav-text); }

/* 5.3 Tinted semantic utilities → semantic tokens */
body.sapa-app .bg-emerald-500\/10, body.sapa-app .bg-emerald-500\/20,
body.sapa-app .bg-emerald-950\/20, body.sapa-app .bg-emerald-950\/30,
body.sapa-app .bg-emerald-950\/40, body.sapa-app .bg-emerald-950\/80 { background-color: var(--sapa-success-bg); border-color: var(--sapa-success-border); color: var(--sapa-success); }
body.sapa-app .text-emerald-300, body.sapa-app .text-emerald-400 { color: var(--sapa-success); }

body.sapa-app .bg-amber-500\/10, body.sapa-app .bg-amber-500\/20 { background-color: var(--sapa-warning-bg); border-color: var(--sapa-warning-border); color: var(--sapa-warning); }
body.sapa-app .text-amber-300, body.sapa-app .text-amber-400 { color: var(--sapa-warning); }

body.sapa-app .bg-rose-500\/10, body.sapa-app .bg-rose-500\/20,
body.sapa-app .bg-rose-950\/20, body.sapa-app .bg-rose-950\/80 { background-color: var(--sapa-danger-bg); border-color: var(--sapa-danger-border); color: var(--sapa-danger); }
body.sapa-app .text-rose-300, body.sapa-app .text-rose-400 { color: var(--sapa-danger); }

body.sapa-app .bg-sky-500\/10, body.sapa-app .bg-sky-500\/20,
body.sapa-app .bg-blue-500\/10, body.sapa-app .bg-blue-500\/20 { background-color: var(--sapa-info-bg); border-color: var(--sapa-info-border); color: var(--sapa-info); }
body.sapa-app .text-sky-300, body.sapa-app .text-sky-400 { color: var(--sapa-info); }

/* indigo/purple/violet are mapped to the brand scale in the Tailwind config */
body.sapa-app .bg-indigo-500\/10, body.sapa-app .bg-indigo-500\/20 { background-color: var(--sapa-primary-subtle); border-color: var(--sapa-brand-200); color: var(--sapa-primary-hover); }
body.sapa-app .text-indigo-300, body.sapa-app .text-indigo-400 { color: var(--sapa-primary); }

/* 5.4 Form controls written without a component class */
body.sapa-app main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.sapa-app main select,
body.sapa-app main textarea {
    background-color: var(--sapa-surface);
    color: var(--sapa-text);
    border-color: var(--sapa-border-strong);
}
body.sapa-app main input:disabled,
body.sapa-app main select:disabled,
body.sapa-app main textarea:disabled { background-color: var(--sapa-surface-2); color: var(--sapa-text-muted); cursor: not-allowed; }
body.sapa-app main input::placeholder,
body.sapa-app main textarea::placeholder { color: var(--sapa-input-placeholder); opacity: 1; }
body.sapa-app main input:focus,
body.sapa-app main select:focus,
body.sapa-app main textarea:focus { border-color: var(--sapa-primary); }
body.sapa-app input[type="checkbox"], body.sapa-app input[type="radio"] { accent-color: var(--sapa-primary); }
/* Code editors inside forms keep their dark canvas */
body.sapa-app main textarea.bg-slate-950,
body.sapa-app main textarea.font-mono.bg-slate-900 { background-color: #101828; color: #e4e7ec; }

/* 5.4b Responsive guards: prevent horizontal clipping/overlap on narrow viewports.
   Keep desktop unclipped so floating dropdowns inside tables remain visible. */
body.sapa-app main select { max-width: 100%; }
body.sapa-app main .grid > * { min-width: 0; }
@media (max-width: 1023.98px) {
    body.sapa-app main :is(div, section):has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* 5.5 Decoration retired by the redesign: glass, glows, gradients on chrome */
body.sapa-app .glass-panel { background: var(--sapa-surface); border: 1px solid var(--sapa-border); }
body.sapa-app main [class*="backdrop-blur"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.sapa-app .hero-banner {
    background: var(--sapa-surface);
    border: 1px solid var(--sapa-border);
    color: var(--sapa-text);
}