/* Autoría: Miguel Goñi Moscoso del Prado */
/**
 * ============================================================
 * MICROLAY DESIGN SYSTEM — Component Library
 * ============================================================
 *
 * Full component library built entirely on design-tokens.css.
 * No hardcoded color values — everything references a token.
 *
 * Table of Contents:
 *   00. BASE RESET & GLOBALS
 *   01. TYPOGRAPHY
 *   02. LAYOUT SHELL (sidebar, topbar, main content)
 *   03. BUTTONS
 *   04. BADGES & CHIPS
 *   05. CARDS
 *   06. FORM CONTROLS
 *   07. TABLES
 *   08. NAVIGATION (tabs, breadcrumbs)
 *   09. ALERTS & NOTIFICATIONS
 *   10. MODALS & OVERLAYS
 *   11. TOASTS
 *   12. PROGRESS & LOADING
 *   13. AVATARS
 *   14. DROPZONE
 *   15. METRIC BOXES
 *   16. EMPTY STATES
 *   17. UTILITY CLASSES
 *   18. ANIMATIONS
 *
 * Requirements: design-tokens.css must be loaded first.
 * Version: 1.0 — Feb 2026
 * ============================================================ */

@import url('/static/css/design-tokens.css?v=20260503_klockner_sidebar_grey');


/* ============================================================
   00. BASE RESET & GLOBALS
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-canvas);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-text-brand);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-brand-hover); }
a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img, svg { display: block; max-width: 100%; }

/* Skip to main content — accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 9999;
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}
.skip-link:focus {
    top: var(--space-2);
    outline: 2px solid var(--color-border-focus);
}

button { cursor: pointer; font-family: var(--font-sans); }

input, textarea, select {
    font-family: var(--font-sans);
    font-size: var(--font-size-body-md);
}

code, pre, kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

::selection {
    background-color: var(--color-brand-muted);
    color: var(--color-brand-active);
}

/* Scrollbar — webkit */
/* Scrollbar — Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

/* Scrollbar — webkit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }


/* ============================================================
   01. TYPOGRAPHY
   ============================================================ */

/* ── Headings */
h1, h2, h3, h4, h5, h6,
.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5, .ds-h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-heading);
}

h1, .ds-h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); }
h2, .ds-h2 { font-size: var(--font-size-h2); }
h3, .ds-h3 { font-size: var(--font-size-h3); }
h4, .ds-h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); }
h5, .ds-h5 { font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); }
h6, .ds-h6 { font-size: var(--font-size-h6); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }

/* ── Display (landing / hero text) */
.ds-display-lg {
    font-size: var(--font-size-display-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tighter);
    line-height: 1.05;
}
.ds-display-md {
    font-size: var(--font-size-display-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tighter);
}
.ds-display-sm {
    font-size: var(--font-size-display-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

/* ── Body */
.ds-body-lg  { font-size: var(--font-size-body-lg);  line-height: var(--line-height-relaxed); }
.ds-body-md  { font-size: var(--font-size-body-md);  line-height: var(--line-height-relaxed); }
.ds-body-sm  { font-size: var(--font-size-body-sm);  line-height: var(--line-height-normal); }
.ds-body-xs  { font-size: var(--font-size-body-xs);  line-height: var(--line-height-normal); }

/* ── Labels */
.ds-label-lg { font-size: var(--font-size-label-lg); font-weight: var(--font-weight-medium); }
.ds-label-md { font-size: var(--font-size-label-md); font-weight: var(--font-weight-medium); }
.ds-label-sm { font-size: var(--font-size-label-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); }
.ds-caption   { font-size: var(--font-size-caption); color: var(--color-text-muted); }

/* ── Text utilities */
.ds-text-primary   { color: var(--color-text-primary) !important; }
.ds-text-secondary { color: var(--color-text-secondary) !important; }
.ds-text-muted     { color: var(--color-text-muted) !important; }
.ds-text-brand     { color: var(--color-text-brand) !important; }
.ds-text-success   { color: var(--color-text-success) !important; }
.ds-text-error     { color: var(--color-text-error) !important; }
.ds-text-warning   { color: var(--color-text-warning) !important; }
.ds-text-inverse   { color: var(--color-text-inverse) !important; }

.ds-font-light     { font-weight: var(--font-weight-light) !important; }
.ds-font-regular   { font-weight: var(--font-weight-regular) !important; }
.ds-font-medium    { font-weight: var(--font-weight-medium) !important; }
.ds-font-semibold  { font-weight: var(--font-weight-semibold) !important; }
.ds-font-bold      { font-weight: var(--font-weight-bold) !important; }

.ds-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section title with accent bar */
.ds-section-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-brand);
    margin-bottom: var(--space-4);
    letter-spacing: var(--letter-spacing-normal);
}


/* ============================================================
   02. LAYOUT SHELL
   ============================================================ */

/* ── Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--layout-sidebar-collapsed-width);
    height: 100vh;
    background-color: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-sidebar-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--transition-normal);
    z-index: var(--z-fixed);
}

/* Desktop: expand on hover */
@media (min-width: 992px) {
    .sidebar:hover,
    .sidebar.sidebar--pinned {
        width: var(--layout-sidebar-width);
    }
}

/* Mobile: hidden by default */
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--layout-sidebar-width);
    }
    .sidebar.sidebar--open {
        transform: translateX(0);
    }
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-sidebar-border);
    min-height: var(--layout-topbar-height);
    overflow: hidden;
}

.sidebar-logo img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

/* Keep Microlay sidebar logo variants proportional in collapsed/expanded states */
.sidebar-logo img.sidebar-logo-collapsed,
.sidebar-logo img.sidebar-logo-expanded {
    width: auto;
    height: 36px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0;
}

.sidebar-logo-text {
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-sidebar-text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.sidebar:hover .sidebar-logo-text,
.sidebar.sidebar--pinned .sidebar-logo-text {
    opacity: 1;
}

/* Nav items */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) 0;
}

.sidebar-nav-section {
    margin-top: var(--space-4);
}

.sidebar-nav-title {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-sidebar-text-muted);
    padding: 0 var(--space-4);
    margin-bottom: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    height: 0;
    transition: opacity var(--transition-fast), height var(--transition-fast);
}

.sidebar:hover .sidebar-nav-title,
.sidebar.sidebar--pinned .sidebar-nav-title {
    opacity: 1;
    height: auto;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    color: var(--color-sidebar-text);
    text-decoration: none;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    border-left: 3px solid transparent;
    position: relative;
    min-height: 40px;
}

.sidebar-nav-item:hover {
    background-color: var(--color-sidebar-hover);
    color: var(--color-sidebar-text);
}

.sidebar-nav-item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
    background-color: var(--color-sidebar-hover);
}

.sidebar-nav-item.active,
.sidebar-nav-item[aria-current="page"] {
    background-color: var(--color-sidebar-active-bg);
    color: var(--prim-cyan-400);
    border-left-color: var(--color-sidebar-active-bar);
}

.sidebar-nav-item i,
.sidebar-nav-item .nav-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: var(--color-sidebar-icon);
    transition: color var(--transition-fast);
}

.sidebar-nav-item:hover i,
.sidebar-nav-item.active i {
    color: var(--prim-cyan-400);
}

.sidebar-nav-item .nav-label {
    opacity: 0;
    visibility: hidden;
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), width var(--transition-fast);
    flex: 1;
}

.sidebar:hover .sidebar-nav-item .nav-label,
.sidebar.sidebar--pinned .sidebar-nav-item .nav-label,
.sidebar.hover-expanded .sidebar-nav-item .nav-label {
    opacity: 1;
    visibility: visible;
    width: auto;
    overflow: visible;
}

/* Tooltip for collapsed state */
.sidebar-nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--layout-sidebar-collapsed-width) + var(--space-2));
    background: rgba(26, 35, 50, 0.95);
    color: #fff;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body-xs);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: var(--z-tooltip);
}

@media (min-width: 992px) {
    .sidebar:not(:hover):not(.sidebar--pinned) .sidebar-nav-item:hover::after {
        opacity: 1;
    }
}

/* ── Topbar */
.topbar {
    position: fixed;
    top: 0;
    left: var(--layout-sidebar-collapsed-width);
    right: 0;
    height: var(--layout-topbar-height);
    background: linear-gradient(135deg, var(--color-topbar-bg), var(--color-topbar-bg-end));
    border-bottom: 2px solid var(--color-topbar-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    gap: var(--space-4);
    z-index: var(--z-sticky);
    transition: left var(--transition-normal);
}

.sidebar:hover ~ .topbar,
.sidebar.sidebar--pinned ~ .topbar {
    left: var(--layout-sidebar-width);
}

@media (max-width: 991px) {
    .topbar { left: 0; }
}

.topbar-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-topbar-text);
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Mobile sidebar toggle */
.sidebar-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--color-topbar-text);
    font-size: 1.25rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.sidebar-toggle:hover { background-color: rgba(255,255,255,0.15); }
@media (max-width: 991px) { .sidebar-toggle { display: flex; align-items: center; } }

/* ── Main content */
.main-content {
    margin-left: var(--layout-sidebar-collapsed-width);
    margin-top: var(--layout-topbar-height);
    padding: var(--layout-content-padding);
    min-height: calc(100vh - var(--layout-topbar-height));
    transition: margin-left var(--transition-normal);
}

.sidebar:hover ~ .main-content,
.sidebar.sidebar--pinned ~ .main-content {
    margin-left: var(--layout-sidebar-width);
}

@media (max-width: 991px) {
    .main-content { margin-left: 0; }
}

/* Page header */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.page-header-info {}
.page-header-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-1);
}
.page-header-subtitle {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-secondary);
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}


/* ============================================================
   03. BUTTONS
   ============================================================ */

/* ── Base */
.btn, .ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--duration-instant) var(--ease-standard);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    min-height: 36px;
}

.btn:focus-visible, .ds-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn:active:not(:disabled), .ds-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled, .ds-btn:disabled,
.btn[disabled], .btn.disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
    box-shadow: none;
}

/* ── Sizes */
.btn-xs, .ds-btn-xs {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-body-xs);
    min-height: 26px;
    border-radius: var(--radius-sm);
}
.btn-sm, .ds-btn-sm {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--font-size-body-xs);
    min-height: 36px;
}
.btn-lg, .ds-btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-body-md);
    min-height: 44px;
    border-radius: var(--radius-lg);
}
.btn-xl, .ds-btn-xl {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-body-lg);
    min-height: 52px;
    border-radius: var(--radius-lg);
}

/* ── Icon buttons */
.btn-icon, .ds-btn-icon {
    padding: var(--space-2);
    min-width: 36px;
    border-radius: var(--radius-md);
}
.btn-icon.btn-sm { min-width: 30px; padding: var(--space-1-5); }
.btn-icon.btn-lg { min-width: 44px; padding: var(--space-3); }

/* ── Full width */
.btn-block, .ds-btn-block { width: 100%; }

/* ── Variants */

/* Primary */
.btn-primary, .ds-btn-primary {
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
    border-color: var(--color-brand-hover);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover, .ds-btn-primary:hover {
    background: linear-gradient(135deg, var(--color-brand-hover), var(--color-brand-active));
    border-color: var(--color-brand-active);
    color: var(--color-text-inverse);
    box-shadow: 0 6px 18px rgba(3, 152, 172, 0.38);
}

/* Secondary */
.btn-secondary, .ds-btn-secondary {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.btn-secondary:hover, .ds-btn-secondary:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

/* Ghost */
.btn-ghost, .ds-btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
}
.btn-ghost:hover, .ds-btn-ghost:hover {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

/* Outline (brand) */
.btn-outline, .ds-btn-outline,
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--color-brand);
    color: var(--color-brand);
}
.btn-outline:hover, .ds-btn-outline:hover,
.btn-outline-primary:hover {
    background-color: var(--color-brand-subtle);
    color: var(--color-brand-hover);
}

/* Danger */
.btn-danger, .ds-btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error-hover);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-error);
}
.btn-danger:hover, .ds-btn-danger:hover {
    background-color: var(--color-error-hover);
    border-color: var(--color-error-hover);
    color: var(--color-text-inverse);
}

/* Outline danger */
.btn-outline-danger, .ds-btn-outline-danger {
    background-color: transparent;
    border-color: var(--color-error);
    color: var(--color-error);
}
.btn-outline-danger:hover, .ds-btn-outline-danger:hover {
    background-color: var(--color-error-subtle);
}

/* Success */
.btn-success, .ds-btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success-hover);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-success);
}
.btn-success:hover, .ds-btn-success:hover {
    background-color: var(--color-success-hover);
    color: var(--color-text-inverse);
}

/* Warning */
.btn-warning, .ds-btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning-hover);
    color: var(--color-text-inverse);
}
.btn-warning:hover, .ds-btn-warning:hover {
    background-color: var(--color-warning-hover);
    color: var(--color-text-inverse);
}

/* Loading state */
.btn.is-loading, .btn[data-loading] {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.btn.is-loading::after, .btn[data-loading]::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ds-spin 0.7s linear infinite;
}


/* ============================================================
   04. BADGES & CHIPS
   ============================================================ */
.badge, .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    font-size: var(--font-size-label-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
    line-height: 1;
    white-space: nowrap;
}

/* Default (neutral) */
.badge-default, .ds-badge-default,
.badge.bg-secondary {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.badge-brand, .ds-badge-brand,
.badge.bg-primary {
    background-color: var(--color-brand-subtle);
    color: var(--color-text-brand);
    border: 1px solid var(--color-brand-border);
}

.badge-success, .ds-badge-success,
.badge.bg-success {
    background-color: var(--color-success-subtle);
    color: var(--color-text-success);
    border: 1px solid var(--color-success-border);
}

.badge-error, .ds-badge-error,
.badge.bg-danger {
    background-color: var(--color-error-subtle);
    color: var(--color-text-error);
    border: 1px solid var(--color-error-border);
}

.badge-warning, .ds-badge-warning,
.badge.bg-warning {
    background-color: var(--color-warning-subtle);
    color: var(--color-text-warning);
    border: 1px solid var(--color-warning-border);
}

.badge-info, .ds-badge-info,
.badge.bg-info {
    background-color: var(--color-info-subtle);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

/* Solid variants */
.badge-solid-brand   { background-color: var(--color-brand);   color: #fff; }
.badge-solid-success { background-color: var(--color-success); color: #fff; }
.badge-solid-error   { background-color: var(--color-error);   color: #fff; }
.badge-solid-warning { background-color: var(--color-warning); color: #fff; }

/* Dot badge (notification indicator) */
.badge-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.badge-dot.brand   { background-color: var(--color-brand); }
.badge-dot.success { background-color: var(--color-success); }
.badge-dot.error   { background-color: var(--color-error); }
.badge-dot.warning { background-color: var(--color-warning); }

/* Count badge */
.badge-count {
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    font-size: 10px;
    background-color: var(--color-error);
    color: #fff;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
}

/* Chip (removable tag) */
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-body-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}
.ds-chip:hover { border-color: var(--color-border-brand); }
.ds-chip-remove {
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 0;
    transition: color var(--transition-fast);
}
.ds-chip-remove:hover { color: var(--color-error); }


/* ============================================================
   05. CARDS
   ============================================================ */
.card, .ds-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

/* Hover elevation */
.card-hover:hover, .ds-card-hover:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-brand);
}

/* Elevated */
.card-elevated, .ds-card-elevated {
    box-shadow: var(--shadow-md);
    border: none;
}

/* Flat (no shadow, just border) */
.card-flat, .ds-card-flat {
    box-shadow: none;
}

/* Brand accent card */
.card-brand, .ds-card-brand {
    border-top: 3px solid var(--color-brand);
}
.card-success { border-top: 3px solid var(--color-success); }
.card-error   { border-top: 3px solid var(--color-error); }
.card-warning { border-top: 3px solid var(--color-warning); }

/* ── Card sections */
.card-header, .ds-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-canvas);
}

.card-header-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin: 0;
}

.card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card-body, .ds-card-body {
    padding: var(--space-5);
    color: var(--color-text-primary);
}

.card-body.card-body-sm { padding: var(--space-4); }
.card-body.card-body-lg { padding: var(--space-6) var(--space-8); }

.card-footer, .ds-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-canvas);
}

/* Stat / KPI card */
.ds-stat-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast);
}
.ds-stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.ds-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.ds-stat-icon.brand   { background-color: var(--color-brand-subtle);   color: var(--color-brand); }
.ds-stat-icon.success { background-color: var(--color-success-subtle); color: var(--color-success); }
.ds-stat-icon.error   { background-color: var(--color-error-subtle);   color: var(--color-error); }
.ds-stat-icon.warning { background-color: var(--color-warning-subtle); color: var(--color-warning); }
.ds-stat-body { flex: 1; min-width: 0; }
.ds-stat-label {
    font-size: var(--font-size-body-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.ds-stat-value {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
    margin-bottom: var(--space-1);
}
.ds-stat-change {
    font-size: var(--font-size-body-xs);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.ds-stat-change.up   { color: var(--color-text-success); }
.ds-stat-change.down { color: var(--color-text-error); }


/* ============================================================
   06. FORM CONTROLS
   ============================================================ */

/* ── Form group */
.ds-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    margin-bottom: var(--space-4);
}

.ds-label {
    font-size: var(--font-size-label-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.ds-label .required {
    color: var(--color-error);
    font-size: var(--font-size-body-xs);
}

.ds-hint {
    font-size: var(--font-size-body-xs);
    color: var(--color-text-muted);
}

.ds-error-msg {
    font-size: var(--font-size-body-xs);
    color: var(--color-text-error);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ── Base input */
.ds-input,
.ds-select,
.ds-textarea,
.form-control {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 40px;
    outline: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.ds-input::placeholder,
.ds-textarea::placeholder,
.form-control::placeholder {
    color: var(--color-text-muted);
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover,
.form-control:hover {
    border-color: var(--color-border-strong);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus,
.form-control:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

/* Error state */
.ds-input.is-invalid,
.ds-input[aria-invalid="true"],
.form-control.is-invalid {
    border-color: var(--color-error);
    background-image: none;
}
.ds-input.is-invalid:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(234, 84, 85, 0.20);
}

/* Success state */
.ds-input.is-valid,
.form-control.is-valid {
    border-color: var(--color-success);
}
.ds-input.is-valid:focus,
.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(40, 199, 111, 0.20);
}

/* Disabled */
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled,
.form-control:disabled {
    background-color: var(--color-bg-disabled);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* Sizes */
.ds-input-sm, .form-control-sm {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--font-size-body-sm);
    min-height: 32px;
}
.ds-input-lg, .form-control-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-body-lg);
    min-height: 48px;
    border-radius: var(--radius-lg);
}

/* Select */
.ds-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* Textarea */
.ds-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: var(--line-height-relaxed);
}

/* Input with icon */
.ds-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.ds-input-group .ds-input { padding-left: var(--space-9, 2.25rem); }
.ds-input-group .ds-input-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
    font-size: 0.875rem;
}
.ds-input-group .ds-input-icon-right { left: auto; right: var(--space-3); }
.ds-input-group .ds-input.has-icon-right { padding-right: var(--space-9, 2.25rem); }

/* ── Checkbox & Radio */
.ds-check-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds-check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.ds-check-input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-surface);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--transition-fast);
    position: relative;
}

.ds-check-input[type="radio"] { border-radius: var(--radius-full); }

.ds-check-input:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.ds-check-input:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.ds-check-input[type="radio"]:checked::after {
    background-image: none;
    border-radius: var(--radius-full);
    inset: 4px;
    background-color: #fff;
}

.ds-check-input:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.ds-check-label {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

/* ── Toggle Switch */
.ds-switch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.ds-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}

.ds-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ds-switch input[type="checkbox"]:checked + .ds-switch-track {
    background-color: var(--color-brand);
}

.ds-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.ds-switch input[type="checkbox"]:checked + .ds-switch-track::after {
    transform: translateX(18px);
}

.ds-switch-label {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}


/* ============================================================
   07. TABLES
   ============================================================ */
.ds-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
}

.ds-table,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body-sm);
}

.ds-table thead,
.table thead {
    background-color: var(--color-bg-canvas);
    border-bottom: 2px solid var(--color-border);
}

.ds-table th,
.table th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-label-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
    white-space: nowrap;
}

.ds-table td,
.table td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.ds-table tbody tr:last-child td,
.table tbody tr:last-child td {
    border-bottom: none;
}

.ds-table tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: var(--color-bg-hover);
}

.ds-table .ds-table-action-col { width: 1%; white-space: nowrap; }


/* ============================================================
   08. NAVIGATION
   ============================================================ */

/* ── Tabs */
.ds-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
}
.ds-tabs::-webkit-scrollbar { display: none; }

.ds-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ds-tab:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-elevated);
}

.ds-tab.active, .ds-tab[aria-selected="true"] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

/* ── Breadcrumbs */
.ds-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    font-size: var(--font-size-body-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.ds-breadcrumb-item a {
    color: var(--color-text-secondary);
    text-decoration: none;
}
.ds-breadcrumb-item a:hover { color: var(--color-brand); }
.ds-breadcrumb-item.current { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.ds-breadcrumb-sep { color: var(--color-text-muted); }


/* ============================================================
   09. ALERTS & NOTIFICATIONS
   ============================================================ */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid;
    font-size: var(--font-size-body-sm);
}

.ds-alert .ds-alert-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.ds-alert .ds-alert-body { flex: 1; }
.ds-alert .ds-alert-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.ds-alert .ds-alert-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    font-size: 1rem;
    line-height: 1;
    padding: var(--space-0-5);
    transition: opacity var(--transition-fast);
}
.ds-alert .ds-alert-close:hover { opacity: 1; }

.ds-alert-info {
    background-color: var(--color-info-subtle);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}
.ds-alert-success {
    background-color: var(--color-success-subtle);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}
.ds-alert-error {
    background-color: var(--color-error-subtle);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}
.ds-alert-warning {
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning-border);
    color: var(--color-text-warning);
}


/* ============================================================
   10. MODALS & OVERLAYS
   ============================================================ */
.ds-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg-overlay);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: ds-fade-in var(--duration-normal) var(--ease-decelerate);
}

.ds-modal {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--space-8));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ds-slide-up var(--duration-normal) var(--ease-decelerate);
}

.ds-modal-sm { max-width: 420px; }
.ds-modal-lg { max-width: 760px; }
.ds-modal-xl { max-width: 1040px; }

.ds-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.ds-modal-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin: 0;
}

.ds-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: all var(--transition-fast);
}
.ds-modal-close:hover {
    background: var(--color-error-subtle);
    color: var(--color-error);
}

.ds-modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
    color: var(--color-text-primary);
}

.ds-modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
    background-color: var(--color-bg-canvas);
}


/* ============================================================
   11. TOASTS
   ============================================================ */
.ds-toast-container {
    position: fixed;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    padding: var(--space-4);
}

.ds-toast-container.top-right    { top: 0; right: 0; align-items: flex-end; }
.ds-toast-container.bottom-right { bottom: 0; right: 0; align-items: flex-end; }
.ds-toast-container.top-center   { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }

.ds-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    font-size: var(--font-size-body-sm);
    color: var(--color-text-primary);
    pointer-events: all;
    max-width: 380px;
    animation: ds-slide-in-right var(--duration-normal) var(--ease-decelerate);
}

.ds-toast-icon { font-size: 1rem; flex-shrink: 0; }
.ds-toast-msg  { flex: 1; }
.ds-toast-stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.ds-toast-title {
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}
.ds-toast-body {
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.ds-toast-body > :last-child {
    margin-bottom: 0;
}
.ds-toast.rich {
    align-items: flex-start;
}
.ds-toast.rich .ds-toast-icon {
    margin-top: 2px;
}

.ds-toast.success .ds-toast-icon { color: var(--color-success); }
.ds-toast.error   .ds-toast-icon { color: var(--color-error); }
.ds-toast.warning .ds-toast-icon { color: var(--color-warning); }
.ds-toast.info    .ds-toast-icon { color: var(--color-brand); }

.ds-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.ds-toast-close:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}


/* ============================================================
   12. PROGRESS & LOADING
   ============================================================ */

/* ── Progress bar */
.ds-progress {
    height: 6px;
    background-color: var(--color-bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.ds-progress-lg { height: 10px; }
.ds-progress-sm { height: 4px; }

.ds-progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-brand), var(--color-brand-hover));
    transition: width var(--duration-slow) var(--ease-standard);
}
.ds-progress-bar.success { background: var(--color-success); }
.ds-progress-bar.error   { background: var(--color-error); }
.ds-progress-bar.warning { background: var(--color-warning); }
.ds-progress-bar.striped {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%, transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: ds-progress-stripes 1s linear infinite;
}

/* ── Spinner */
.ds-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand);
    border-radius: var(--radius-full);
    animation: ds-spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}
.ds-spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.ds-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.ds-spinner-xl { width: 48px; height: 48px; border-width: 4px; }
.ds-spinner.success { border-top-color: var(--color-success); }
.ds-spinner.error   { border-top-color: var(--color-error); }

/* ── Skeleton loader */
.ds-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-elevated) 25%,
        var(--color-bg-hover) 50%,
        var(--color-bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: ds-skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}
.ds-skeleton-text  { height: var(--font-size-body-md); margin-bottom: var(--space-2); }
.ds-skeleton-title { height: var(--font-size-h3); margin-bottom: var(--space-3); }
.ds-skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }

/* Inline skeleton shimmer — auto-removes when aria-busy is cleared */
[aria-busy="true"].ds-skeleton-text {
    color: transparent;
    background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-hover) 50%, var(--color-bg-elevated) 75%);
    background-size: 200% 100%;
    animation: ds-skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    min-width: 80px;
    display: inline-block;
}


/* ============================================================
   13. AVATARS
   ============================================================ */
.ds-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-brand-subtle);
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body-sm);
    overflow: hidden;
    flex-shrink: 0;
    /* default size */
    width: 36px;
    height: 36px;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar-xs  { width: 24px; height: 24px; font-size: var(--font-size-caption); }
.ds-avatar-sm  { width: 32px; height: 32px; font-size: var(--font-size-body-xs); }
.ds-avatar-lg  { width: 48px; height: 48px; font-size: var(--font-size-body-md); }
.ds-avatar-xl  { width: 64px; height: 64px; font-size: var(--font-size-h4); }
.ds-avatar-2xl { width: 96px; height: 96px; font-size: var(--font-size-h2); }

/* Avatar group */
.ds-avatar-group {
    display: flex;
    flex-direction: row-reverse;
}
.ds-avatar-group .ds-avatar {
    border: 2px solid var(--color-bg-surface);
    margin-left: -8px;
}
.ds-avatar-group .ds-avatar:last-child { margin-left: 0; }


/* ============================================================
   14. DROPZONE
   ============================================================ */
.ds-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    cursor: pointer;
    background-color: var(--color-bg-canvas);
    transition: all var(--transition-normal);
    position: relative;
}

.ds-dropzone:hover,
.ds-dropzone.ds-drag-over {
    border-color: var(--color-brand);
    background-color: var(--color-brand-subtle);
}

.ds-dropzone.ds-drag-over {
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    transform: scale(1.01);
}

.ds-dropzone-icon {
    font-size: 2.5rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    transition: color var(--transition-fast);
}
.ds-dropzone:hover .ds-dropzone-icon,
.ds-dropzone.ds-drag-over .ds-dropzone-icon {
    color: var(--color-brand);
}

.ds-dropzone-title {
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.ds-dropzone-hint {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-muted);
}

.ds-dropzone-link {
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================
   15. METRIC BOXES (printer / clinical KPIs)
   ============================================================ */
.metric-box {
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-brand);
}

.metric-box.metric-success { background: linear-gradient(135deg, var(--color-success), var(--color-success-hover)); box-shadow: var(--shadow-success); }
.metric-box.metric-error   { background: linear-gradient(135deg, var(--color-error),   var(--color-error-hover));   box-shadow: var(--shadow-error); }
.metric-box.metric-warning { background: linear-gradient(135deg, var(--color-warning), var(--color-warning-hover)); }
.metric-box.metric-dark    { background: linear-gradient(135deg, var(--prim-sidebar-800), var(--prim-sidebar-700)); box-shadow: var(--shadow-md); }

.metric-box .metric-value {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: #fff !important;
}
.metric-box .metric-label {
    font-size: var(--font-size-body-xs);
    opacity: 0.85;
    margin-top: var(--space-1);
    color: #fff !important;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.metric-box-sm {
    padding: var(--space-2) var(--space-3);
}
.metric-box-sm .metric-value { font-size: var(--font-size-h4); }
.metric-box-sm .metric-label { font-size: var(--font-size-caption); }


/* ============================================================
   16. EMPTY STATES
   ============================================================ */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
    color: var(--color-text-secondary);
}

.ds-empty-icon {
    font-size: 3rem;
    color: var(--color-border);
    margin-bottom: var(--space-4);
}

.ds-empty-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}

.ds-empty-description {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-secondary);
    max-width: 380px;
    margin-bottom: var(--space-6);
}


/* ============================================================
   17. UTILITY CLASSES
   ============================================================ */

/* ── Spacing */
.ds-mt-0  { margin-top: var(--space-0) !important; }
.ds-mt-2  { margin-top: var(--space-2) !important; }
.ds-mt-4  { margin-top: var(--space-4) !important; }
.ds-mt-6  { margin-top: var(--space-6) !important; }
.ds-mt-8  { margin-top: var(--space-8) !important; }
.ds-mb-0  { margin-bottom: var(--space-0) !important; }
.ds-mb-2  { margin-bottom: var(--space-2) !important; }
.ds-mb-4  { margin-bottom: var(--space-4) !important; }
.ds-mb-6  { margin-bottom: var(--space-6) !important; }
.ds-mb-8  { margin-bottom: var(--space-8) !important; }
.ds-p-4   { padding: var(--space-4) !important; }
.ds-p-5   { padding: var(--space-5) !important; }
.ds-p-6   { padding: var(--space-6) !important; }
.ds-gap-2 { gap: var(--space-2) !important; }
.ds-gap-3 { gap: var(--space-3) !important; }
.ds-gap-4 { gap: var(--space-4) !important; }

/* ── Layout */
.ds-flex        { display: flex !important; }
.ds-inline-flex { display: inline-flex !important; }
.ds-grid        { display: grid !important; }
.ds-block       { display: block !important; }
.ds-hidden      { display: none !important; }

.ds-flex-center  { align-items: center; justify-content: center; }
.ds-flex-between { justify-content: space-between; }
.ds-flex-end     { justify-content: flex-end; }
.ds-items-center { align-items: center !important; }
.ds-items-start  { align-items: flex-start !important; }
.ds-flex-wrap    { flex-wrap: wrap !important; }
.ds-flex-1       { flex: 1 !important; }
.ds-shrink-0     { flex-shrink: 0 !important; }

.ds-w-full  { width: 100% !important; }
.ds-h-full  { height: 100% !important; }

/* ── Background */
.ds-bg-surface   { background-color: var(--color-bg-surface) !important; }
.ds-bg-canvas    { background-color: var(--color-bg-canvas) !important; }
.ds-bg-elevated  { background-color: var(--color-bg-elevated) !important; }
.ds-bg-brand     { background-color: var(--color-brand-subtle) !important; }

/* ── Border */
.ds-border       { border: 1px solid var(--color-border) !important; }
.ds-border-brand { border: 1px solid var(--color-brand-border) !important; }
.ds-rounded-sm   { border-radius: var(--radius-sm) !important; }
.ds-rounded-md   { border-radius: var(--radius-md) !important; }
.ds-rounded-lg   { border-radius: var(--radius-lg) !important; }
.ds-rounded-xl   { border-radius: var(--radius-xl) !important; }
.ds-rounded-full { border-radius: var(--radius-full) !important; }

/* ── Shadow */
.ds-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.ds-shadow-md { box-shadow: var(--shadow-md) !important; }
.ds-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.ds-shadow-none { box-shadow: none !important; }

/* ── Overflow */
.ds-overflow-hidden { overflow: hidden !important; }
.ds-overflow-auto   { overflow: auto !important; }

/* ── Position */
.ds-relative { position: relative !important; }
.ds-absolute { position: absolute !important; }
.ds-sticky   { position: sticky !important; }

/* ── Divider */
.ds-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}
.ds-divider-vertical {
    width: 1px;
    background-color: var(--color-border);
    align-self: stretch;
    margin: 0 var(--space-3);
}

/* ── Grid layouts */
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.ds-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

@media (max-width: 768px) {
    .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
    .ds-grid-auto { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 991px) {
    .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   18. EMPTY STATES & ERROR BOUNDARIES
   ============================================================ */

/* Empty state — for lists/tables/pages with no data */
.ds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10) var(--space-6);
    color: var(--color-text-muted);
}

.ds-empty-state i,
.ds-empty-state .ds-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
}

.ds-empty-state .ds-empty-title {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.ds-empty-state .ds-empty-desc {
    font-size: var(--font-size-body-sm);
    max-width: 320px;
    margin-bottom: var(--space-5);
}

.ds-empty-state .btn {
    margin-top: var(--space-2);
}

/* Error boundary — for API failures / load errors */
.ds-error-boundary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    border: 1px dashed var(--color-error);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-surface);
}

.ds-error-boundary i {
    font-size: 2.5rem;
    color: var(--color-error);
    margin-bottom: var(--space-3);
    opacity: 0.6;
}

.ds-error-boundary .ds-error-title {
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.ds-error-boundary .ds-error-desc {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    max-width: 360px;
}


/* ============================================================
   19. ANIMATIONS
   ============================================================ */
@keyframes ds-spin {
    to { transform: rotate(360deg); }
}

@keyframes ds-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes ds-progress-stripes {
    to { background-position-x: 1rem; }
}

@keyframes ds-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ds-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes ds-slide-up {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ds-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes ds-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes ds-soft-highlight {
    0% {
        opacity: 1;
        transform: translateY(0);
        outline-color: transparent;
    }
    35% {
        opacity: 1;
        transform: translateY(-2px);
        outline-color: rgba(3, 152, 172, 0.32);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        outline-color: transparent;
    }
}

/* Motion utilities */
.ds-revealable {
    opacity: 0;
    transform: translateY(12px);
    filter: saturate(0.96);
    transition:
        opacity var(--duration-normal) var(--ease-decelerate),
        transform var(--duration-normal) var(--ease-decelerate),
        filter var(--duration-normal) var(--ease-decelerate);
    will-change: opacity, transform;
}

.ds-revealable.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: none;
}

.ds-updated-pulse {
    outline: 1px solid transparent;
    animation: ds-soft-highlight 0.9s var(--ease-standard);
}

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


/* ============================================================
   20. GLOBAL A11Y FIXES (UI/UX Audit 2026-03-10)
   ============================================================ */

/* ── Touch targets: ensure 44px min on touch devices */
@media (pointer: coarse) {
    .btn-sm, .ds-btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-icon.btn-sm {
        min-width: 44px;
        min-height: 44px;
        padding: var(--space-2);
    }

    .btn-close {
        min-width: 44px;
        min-height: 44px;
        padding: var(--space-3) !important;
    }

    /* Close buttons in modals (custom × pattern) */
    .close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Checkboxes and radio */
    .form-check-input {
        min-width: 24px;
        min-height: 24px;
    }
}

/* ── Global focus-visible (supplement existing rules) */
.btn-close:focus-visible,
.close-btn:focus-visible,
.form-select:focus-visible,
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible,
.list-group-item:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* ── Tabular figures for numeric displays */
.tabular-nums,
[data-numeric],
.metric-value,
.metric-value-sm,
.metric-subvalue,
.stat-value {
    font-variant-numeric: tabular-nums;
}

/* ── Table header accessibility */
table th {
    scope: col; /* CSS can't set attributes, but hint for devs */
}

/* ── Skip link ensure visibility on focus */
.skip-link:focus {
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 10000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-surface);
    color: var(--color-text-brand);
    border: 2px solid var(--color-border-focus);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}


/* ============================================================
   21. FLUTTER DARK THEME OVERRIDES
   ============================================================
 * Traduce el DNA visual del Flutter DarkModeTheme a la webapp.
 * Activo vía [data-theme="dark"] o prefers-color-scheme: dark.
 *
 * Principios:
 *   - Topbar plana navy (no gradiente cian)
 *   - Elevación por white overlay, no por sombras negras
 *   - Inputs con fondo azul-oscuro (#4B547D)
 *   - Temperatura de texto fría azul-gris en toda la jerarquía
 *   - Brand cian como único acento luminoso
 *
 * Ver: docs/FLUTTER_DARK_THEME_PLAN.md
 * ============================================================ */

/* ── Fase 2: Topbar dark — flat navy + línea cian ── */

[data-theme="dark"] .topbar,
[data-theme="dark"] #topbar {
    background: var(--color-topbar-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--color-brand) !important;
    box-shadow: 0 2px 12px rgba(3, 152, 172, 0.12);
}

[data-theme="dark"] .topbar-title,
[data-theme="dark"] .topbar-brand {
    color: var(--color-text-primary);
}

/* Accent cian para el nombre/logo en topbar dark */
[data-theme="dark"] .topbar-brand span,
[data-theme="dark"] .topbar-brand-accent {
    color: var(--color-brand);
}

/* Botones/acciones en topbar dark */
[data-theme="dark"] .topbar-actions .btn,
[data-theme="dark"] .topbar-actions button {
    color: var(--color-text-primary);
}

[data-theme="dark"] .topbar-actions .btn:hover,
[data-theme="dark"] .topbar-actions button:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

/* Sidebar toggle icon en dark */
[data-theme="dark"] .sidebar-toggle {
    color: var(--color-text-primary);
}
[data-theme="dark"] .sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topbar,
    :root:not([data-theme="light"]) #topbar {
        background: var(--color-topbar-bg) !important;
        background-image: none !important;
        border-bottom: 1px solid var(--color-brand) !important;
        box-shadow: 0 2px 12px rgba(3, 152, 172, 0.12);
    }
}


/* ── Fase 3: Card elevation system dark — overlay blanco ── */

/* Cards base: overlay sutil sobre surface */
[data-theme="dark"] .card,
[data-theme="dark"] .ds-card {
    background-color: var(--color-bg-surface-overlay);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Card hover: borde cian tonal */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .ds-card:hover {
    border-color: rgba(3, 152, 172, 0.30);
    box-shadow: var(--shadow-md);
}

/* Card elevated: un nivel más de profundidad */
[data-theme="dark"] .card-elevated,
[data-theme="dark"] .ds-card--elevated {
    background-color: var(--prim-neutral-750);
    border: 1px solid rgba(3, 152, 172, 0.15);
    box-shadow: var(--shadow-md);
}

/* Card brand: acento de tope cian */
[data-theme="dark"] .card-brand,
[data-theme="dark"] .ds-card--brand {
    border-top: 2px solid var(--color-brand);
}

/* Card header dentro de dark */
[data-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .card-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-top-color: var(--color-border);
}

/* Metric boxes y KPI cards */
[data-theme="dark"] .metric-box,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card {
    background-color: var(--color-bg-surface-overlay);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Modales dark: navy sólido + borde sutil */
[data-theme="dark"] .modal-content {
    background-color: var(--prim-neutral-800);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-border);
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-border);
    background-color: rgba(255, 255, 255, 0.02);
}

/* Backdrop con blur (glassmorphism overlay) */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Dropdowns dark */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--prim-neutral-800);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(3, 152, 172, 0.10);
    color: var(--color-text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--color-border);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .ds-card {
        background-color: var(--color-bg-surface-overlay);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .modal-content {
        background-color: var(--prim-neutral-800);
        border: 1px solid var(--color-border);
    }
    :root:not([data-theme="light"]) .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}


/* ── Fase 4: Form inputs dark — fondo azul-oscuro Flutter ── */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .ds-input {
    background-color: var(--color-bg-input);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] .ds-input::placeholder {
    color: var(--color-text-icon-muted);
}

[data-theme="dark"] .form-control:hover,
[data-theme="dark"] .form-select:hover,
[data-theme="dark"] .ds-input:hover {
    border-color: var(--color-border-strong);
    background-color: rgba(75, 84, 125, 0.85);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .ds-input:focus {
    background-color: var(--color-bg-input);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(3, 152, 172, 0.20);
    outline: none;
}

/* Select — chevron blanco en dark */
[data-theme="dark"] select.form-control,
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23CFD3EC' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}

/* Checkboxes y radios */
[data-theme="dark"] .form-check-input {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

[data-theme="dark"] .form-check-input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(3, 152, 172, 0.20);
}

/* Input groups */
[data-theme="dark"] .input-group-text {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* Labels */
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: var(--color-text-title);
}

/* Disabled inputs */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] input:disabled {
    background-color: var(--color-bg-unselect);
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

/* Validation states dark */
[data-theme="dark"] .form-control.is-valid,
[data-theme="dark"] .was-validated .form-control:valid {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(40, 199, 111, 0.15);
}

[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .was-validated .form-control:invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(234, 84, 85, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select,
    :root:not([data-theme="light"]) .ds-input {
        background-color: var(--color-bg-input);
        border-color: var(--color-border);
        color: var(--color-text-primary);
    }
    :root:not([data-theme="light"]) .form-control::placeholder {
        color: var(--color-text-icon-muted);
    }
    :root:not([data-theme="light"]) .input-group-text {
        background-color: var(--color-bg-unselect);
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }
}


/* ── Fase 5: Refinamientos globales dark ── */

/* — 5.1 Botones dark — */

/* Primary: mismo cian + glow */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .ds-btn--primary {
    box-shadow: 0 2px 10px rgba(3, 152, 172, 0.30);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .ds-btn--primary:hover {
    box-shadow: 0 4px 18px rgba(3, 152, 172, 0.45);
    transform: translateY(-1px);
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .ds-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(3, 152, 172, 0.25);
}

/* Secondary/ghost */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .ds-btn--secondary {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .ds-btn--secondary:hover {
    background-color: rgba(67, 73, 104, 0.6);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

/* Ghost/outline dark */
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .ds-btn--outline {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .ds-btn--outline:hover {
    background-color: rgba(3, 152, 172, 0.12);
    color: var(--prim-cyan-400);
}

/* Danger: glow rojo */
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .ds-btn--danger {
    box-shadow: 0 2px 10px rgba(234, 84, 85, 0.25);
}

[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .ds-btn--danger:hover {
    box-shadow: 0 4px 18px rgba(234, 84, 85, 0.35);
}

/* Light/ghost buttons */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .ds-btn--ghost {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}


/* — 5.2 Tablas dark — */

[data-theme="dark"] .table th,
[data-theme="dark"] thead th {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
    color: var(--color-text-title);
}

[data-theme="dark"] .table td,
[data-theme="dark"] tbody td {
    border-color: rgba(67, 73, 104, 0.45);
    color: var(--color-text-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--color-text-primary);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(3, 152, 172, 0.08);
    color: var(--color-text-primary);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--color-border);
}

[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--color-border);
}

/* Table footer */
[data-theme="dark"] .table tfoot td,
[data-theme="dark"] .table tfoot th {
    background-color: var(--color-bg-unselect);
    border-top-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}


/* — 5.3 Badges dark (borde tonal para definición) — */

[data-theme="dark"] .badge,
[data-theme="dark"] .ds-badge {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Chips dark */
[data-theme="dark"] .chip,
[data-theme="dark"] .ds-chip {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .chip:hover,
[data-theme="dark"] .ds-chip:hover {
    background-color: rgba(3, 152, 172, 0.12);
    border-color: var(--color-brand);
    color: var(--prim-cyan-400);
}


/* — 5.4 Alerts dark (borde lateral de color) — */

[data-theme="dark"] .alert {
    border-left-width: 3px;
    border-left-style: solid;
}

[data-theme="dark"] .alert-success {
    border-left-color: var(--color-success);
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
    border-left-color: var(--color-error);
}

[data-theme="dark"] .alert-warning {
    border-left-color: var(--color-warning);
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-primary {
    border-left-color: var(--color-brand);
}


/* — 5.5 Sidebar active state refinado — */

[data-theme="dark"] .sidebar-item--active,
[data-theme="dark"] .sidebar .nav-item.active > .nav-link,
[data-theme="dark"] .sidebar .nav-link.active {
    box-shadow: inset 3px 0 0 var(--color-brand);
    background-color: rgba(3, 152, 172, 0.12);
}

[data-theme="dark"] .sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Sidebar section titles dark */
[data-theme="dark"] .sidebar-section-title,
[data-theme="dark"] .nav-label {
    color: var(--color-text-unselect);
}

/* Sidebar icons muted */
[data-theme="dark"] .sidebar .nav-link:not(.active) .nav-icon,
[data-theme="dark"] .sidebar .nav-link:not(.active) i {
    color: var(--color-text-icon-muted);
}


/* — 5.6 Scrollbar dark (Flutter: #3A3E59) — */

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #3a3e59;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #4a4f6e;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: var(--prim-neutral-850);
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
        background-color: #3a3e59;
    }
    :root:not([data-theme="light"]) ::-webkit-scrollbar-track {
        background-color: var(--prim-neutral-850);
    }
}


/* — 5.7 Section titles / subtítulos cian (Flutter titleMedium) — */

/* Section headers destacados usan cian como Flutter titleMedium/titleSmall */
[data-theme="dark"] .section-title,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .card-subtitle,
[data-theme="dark"] .section-label {
    color: var(--prim-cyan-400);
}

/* Breadcrumbs dark */
[data-theme="dark"] .breadcrumb-item a {
    color: var(--color-brand);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--color-text-title);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-icon-muted);
}


/* — 5.8 Focus ring refinado para dark — */

[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(3, 152, 172, 0.20);
}


/* — 5.9 Progress bars dark — */

[data-theme="dark"] .progress {
    background-color: var(--color-bg-unselect);
}

[data-theme="dark"] .progress-bar {
    box-shadow: 0 0 8px rgba(3, 152, 172, 0.35);
}


/* — 5.10 Tabs / navigation dark — */

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border);
    background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--color-brand);
    background-color: var(--color-bg-surface-overlay);
    border-color: var(--color-border) var(--color-border) var(--color-bg-surface-overlay);
}

[data-theme="dark"] .nav-pills .nav-link {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: rgba(3, 152, 172, 0.18);
    color: var(--prim-cyan-400);
}


/* — 5.11 Toasts dark — */

[data-theme="dark"] .toast,
[data-theme="dark"] .ds-toast {
    background-color: var(--prim-neutral-750);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .toast-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom-color: var(--color-border);
    color: var(--color-text-title);
}

[data-theme="dark"] .toast-body {
    color: var(--color-text-primary);
}


/* — 5.12 Page header dark — */

[data-theme="dark"] .page-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h2,
[data-theme="dark"] .page-title {
    color: var(--color-heading);
}


/* — 5.13 List groups dark — */

[data-theme="dark"] .list-group-item {
    background-color: var(--color-bg-surface-overlay);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .list-group-item.active {
    background-color: rgba(3, 152, 172, 0.15);
    border-color: var(--color-brand);
    color: var(--prim-cyan-400);
}


/* — 5.14 Skeleton / loading shimmer dark — */

[data-theme="dark"] .skeleton,
[data-theme="dark"] .ds-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-unselect) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        var(--color-bg-unselect) 75%
    );
    background-size: 200% 100%;
}


/* — 5.15 Empty states dark — */

[data-theme="dark"] .empty-state-icon {
    color: var(--color-text-icon-muted);
}

[data-theme="dark"] .empty-state-title {
    color: var(--color-text-title);
}

[data-theme="dark"] .empty-state-description {
    color: var(--color-text-secondary);
}


/* — 5.16 HR / dividers dark — */

[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--color-border);
    opacity: 1;
}


/* — 5.17 Code blocks dark — */

[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--color-bg-unselect);
    border-color: var(--color-border);
    color: var(--prim-cyan-300);
}


/* ── Fin: Flutter Dark Theme Overrides ── */


/* ============================================================
   KLOCKNER AUTOMATE PROFILE OVERRIDES
   Controlled by config brand_identity.active_profile = "klockner".
   ============================================================ */
.brand-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.brand-logo-mark {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.brand-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-logo-wordmark img {
    width: auto;
    height: 36px;
    max-width: 160px;
    object-fit: contain;
}

.brand-logo-mark--klockner {
    position: relative;
    overflow: hidden;
    border: 3px solid var(--color-brand);
    background: var(--color-bg-surface);
    color: var(--color-heading);
    font-size: 1.35rem;
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-brand) 18%, transparent);
}

.brand-logo-mark--klockner::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 13px;
    height: 13px;
    background: var(--color-accent-hot);
}

.brand-logo-wordmark {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--color-sidebar-text);
    white-space: nowrap;
}

.brand-logo-wordmark--text {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1;
}

.brand-logo-wordmark-main {
    font-size: 1.05rem;
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0;
}

.brand-logo-wordmark-sub {
    font-size: 0.62rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar:not(:hover):not(.sidebar--pinned):not(.hover-expanded) .brand-logo-wordmark {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

[data-design-system="klockner"] body {
    background-color: var(--color-bg-canvas);
}

[data-design-system="klockner"] .main-content,
[data-design-system="klockner"] .content-wrapper,
[data-design-system="klockner"] .page-content,
[data-design-system="klockner"] main {
    background-color: var(--color-bg-canvas);
}

[data-design-system="klockner"] .sidebar {
    background-color: var(--color-sidebar-bg);
    background-image: linear-gradient(180deg, var(--color-sidebar-bg), var(--klockner-menu-grey-deep, var(--color-sidebar-bg)));
    border-right-color: var(--color-sidebar-border);
    box-shadow: 1px 0 0 var(--color-sidebar-border), 12px 0 28px color-mix(in oklch, var(--klockner-ink) 12%, transparent);
}

[data-design-system="klockner"] .sidebar-logo {
    padding: var(--space-3) var(--space-4);
    border-bottom-color: var(--color-sidebar-border);
}

[data-design-system="klockner"] .sidebar .brand-logo-mark--klockner {
    background: var(--color-bg-surface);
    border-color: var(--color-brand);
    color: var(--color-heading);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-sidebar-text) 16%, transparent);
}

[data-design-system="klockner"] .sidebar .brand-logo-wordmark-main {
    color: var(--color-sidebar-text);
}

[data-design-system="klockner"] .sidebar .brand-logo-wordmark-sub {
    color: var(--color-sidebar-text-muted);
}

[data-design-system="klockner"] .sidebar-nav-title {
    color: var(--color-sidebar-text-muted);
    letter-spacing: 0.1em;
}

[data-design-system="klockner"] .sidebar-nav-item {
    border-left: 3px solid transparent;
    color: var(--color-sidebar-text);
    border-radius: var(--radius-md);
    margin-inline: var(--space-2);
    background: transparent;
}

[data-design-system="klockner"] .sidebar-nav-item i {
    color: var(--color-sidebar-icon);
}

[data-design-system="klockner"] .sidebar-nav-item:hover,
[data-design-system="klockner"] .sidebar-nav-item:focus-visible {
    color: var(--color-sidebar-text);
    background: var(--color-sidebar-hover);
    border-left-color: color-mix(in oklch, var(--color-sidebar-text) 32%, transparent);
}

[data-design-system="klockner"] .sidebar-nav-item.active,
[data-design-system="klockner"] .sidebar-nav-item[aria-current="page"] {
    color: var(--color-sidebar-text);
    background: var(--color-sidebar-active-bg);
    border-left-color: var(--color-sidebar-active-bar);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklch, var(--color-sidebar-text) 14%, transparent),
        0 8px 18px color-mix(in oklch, var(--klockner-ink) 24%, transparent);
}

[data-design-system="klockner"] .sidebar-nav-item:hover i,
[data-design-system="klockner"] .sidebar-nav-item.active i {
    color: var(--color-brand);
}

[data-design-system="klockner"] .sidebar-nav-item.active::before,
[data-design-system="klockner"] .sidebar-nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    background: var(--color-accent-hot);
}

[data-design-system="klockner"] .sidebar-nav-item::after {
    background: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-text);
    border: 1px solid var(--color-sidebar-border);
}

[data-design-system="klockner"] .sidebar-footer {
    border-top-color: var(--color-sidebar-border);
}

[data-design-system="klockner"] .sidebar-version {
    color: var(--color-sidebar-text-muted);
}

[data-design-system="klockner"] .topbar,
[data-design-system="klockner"] #topbar {
    background: var(--color-topbar-bg) !important;
    background-image: linear-gradient(135deg, var(--color-topbar-bg), var(--color-topbar-bg-end)) !important;
    border-bottom: 1px solid var(--color-topbar-border) !important;
    box-shadow: 0 10px 28px color-mix(in oklch, var(--color-topbar-bg) 16%, transparent) !important;
}

[data-design-system="klockner"] .topbar h1,
[data-design-system="klockner"] .topbar h2,
[data-design-system="klockner"] .topbar h3,
[data-design-system="klockner"] .topbar h4,
[data-design-system="klockner"] .topbar h5,
[data-design-system="klockner"] .topbar h6,
[data-design-system="klockner"] .topbar-title {
    color: var(--color-topbar-text);
}

[data-design-system="klockner"] .topbar-title i {
    color: var(--color-brand);
}

[data-design-system="klockner"] .topbar .printer-selector-btn,
[data-design-system="klockner"] .topbar .profile-indicator {
    color: var(--color-topbar-text);
    background: color-mix(in oklch, var(--color-topbar-text) 10%, transparent);
    border-color: color-mix(in oklch, var(--color-topbar-text) 24%, transparent);
}

[data-design-system="klockner"] .topbar .printer-selector-btn:hover,
[data-design-system="klockner"] .topbar .printer-selector-btn:focus-visible {
    color: var(--color-topbar-text);
    background: color-mix(in oklch, var(--color-topbar-text) 18%, transparent);
    border-color: color-mix(in oklch, var(--color-brand) 78%, var(--color-topbar-text));
}

[data-design-system="klockner"] .btn-primary,
[data-design-system="klockner"] .ds-btn-primary,
[data-design-system="klockner"] .ds-btn--primary {
    background: var(--color-brand);
    background-image: none;
    border-color: var(--color-brand);
    border-radius: var(--radius-md);
    box-shadow: none;
    color: var(--color-heading);
    font-weight: var(--font-weight-semibold);
}

[data-design-system="klockner"] .btn-primary:hover,
[data-design-system="klockner"] .ds-btn-primary:hover,
[data-design-system="klockner"] .ds-btn--primary:hover {
    background: var(--color-brand-hover);
    background-image: none;
    border-color: var(--color-brand-hover);
    color: var(--color-heading);
    box-shadow: none;
}

[data-design-system="klockner"] .btn-info,
[data-design-system="klockner"] .btn-success,
[data-design-system="klockner"] .btn-warning {
    color: var(--color-heading) !important;
    border-color: transparent;
    font-weight: var(--font-weight-semibold);
}

[data-design-system="klockner"] .btn-info *,
[data-design-system="klockner"] .btn-success *,
[data-design-system="klockner"] .btn-warning * {
    color: currentColor !important;
}

[data-design-system="klockner"] .btn-secondary,
[data-design-system="klockner"] .ds-btn-secondary,
[data-design-system="klockner"] .ds-btn--secondary {
    background: var(--color-bg-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

[data-design-system="klockner"] .btn-secondary:hover,
[data-design-system="klockner"] .ds-btn-secondary:hover,
[data-design-system="klockner"] .ds-btn--secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

[data-design-system="klockner"] .btn-outline-primary {
    color: var(--color-text-brand);
    border-color: var(--color-brand);
    border-radius: var(--radius-md);
}

[data-design-system="klockner"] .btn-outline-primary:hover {
    color: var(--color-heading);
    background: var(--color-brand-subtle);
    border-color: var(--color-brand-hover);
}

[data-design-system="klockner"] .main-content .btn-outline-secondary {
    color: var(--color-heading) !important;
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-strong) !important;
}

[data-design-system="klockner"] .main-content .btn-outline-secondary:hover,
[data-design-system="klockner"] .main-content .btn-outline-secondary:focus-visible {
    color: var(--color-heading) !important;
    background: var(--color-bg-hover) !important;
    border-color: var(--color-border-strong) !important;
}

[data-design-system="klockner"] .main-content .btn-outline-secondary *,
[data-design-system="klockner"] .main-content .btn-outline-secondary:hover * {
    color: currentColor !important;
}

[data-design-system="klockner"] #tankResinDisplay .btn-outline-light {
    color: var(--color-heading);
    background: var(--color-bg-surface);
    border-color: var(--color-border-strong);
}

[data-design-system="klockner"] #tankResinDisplay .btn-outline-light:hover,
[data-design-system="klockner"] #tankResinDisplay .btn-outline-light:focus-visible {
    color: var(--color-heading);
    background: var(--color-brand-subtle);
    border-color: var(--color-brand);
}

[data-design-system="klockner"] #tankResinDisplay .btn-outline-light i {
    color: currentColor;
}

[data-design-system="klockner"] .main-content .inventory-hero .btn-outline-light,
[data-design-system="klockner"] .main-content .invoices-header .btn-outline-light {
    color: var(--color-heading) !important;
    background: color-mix(in oklch, var(--color-bg-surface) 44%, transparent) !important;
    border-color: color-mix(in oklch, var(--color-heading) 62%, transparent) !important;
}

[data-design-system="klockner"] .main-content .inventory-hero .btn-outline-light:hover,
[data-design-system="klockner"] .main-content .inventory-hero .btn-outline-light:focus-visible,
[data-design-system="klockner"] .main-content .invoices-header .btn-outline-light:hover,
[data-design-system="klockner"] .main-content .invoices-header .btn-outline-light:focus-visible {
    color: var(--color-heading) !important;
    background: var(--color-bg-surface) !important;
    border-color: var(--color-heading) !important;
}

[data-design-system="klockner"] .main-content .inventory-hero .btn-outline-light *,
[data-design-system="klockner"] .main-content .invoices-header .btn-outline-light * {
    color: currentColor !important;
}

[data-design-system="klockner"] .main-content .card-header.bg-primary,
[data-design-system="klockner"] .main-content .card-header.bg-info,
[data-design-system="klockner"] .main-content .card-header.bg-success,
[data-design-system="klockner"] .main-content .card-header.bg-warning,
[data-design-system="klockner"] .main-content .card-header.bg-secondary,
[data-design-system="klockner"] .modal-header.bg-primary,
[data-design-system="klockner"] .modal-header.bg-info,
[data-design-system="klockner"] .modal-header.bg-success,
[data-design-system="klockner"] .modal-header.bg-warning,
[data-design-system="klockner"] .modal-header.bg-secondary {
    position: relative;
    overflow: hidden;
    color: var(--color-heading) !important;
    background: var(--color-bg-elevated) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--color-border) !important;
}

[data-design-system="klockner"] .main-content .card-header.bg-primary::before,
[data-design-system="klockner"] .main-content .card-header.bg-info::before,
[data-design-system="klockner"] .main-content .card-header.bg-success::before,
[data-design-system="klockner"] .main-content .card-header.bg-warning::before,
[data-design-system="klockner"] .main-content .card-header.bg-secondary::before,
[data-design-system="klockner"] .modal-header.bg-primary::before,
[data-design-system="klockner"] .modal-header.bg-info::before,
[data-design-system="klockner"] .modal-header.bg-success::before,
[data-design-system="klockner"] .modal-header.bg-warning::before,
[data-design-system="klockner"] .modal-header.bg-secondary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
}

[data-design-system="klockner"] .main-content .card-header.bg-primary::before,
[data-design-system="klockner"] .main-content .card-header.bg-info::before,
[data-design-system="klockner"] .modal-header.bg-primary::before,
[data-design-system="klockner"] .modal-header.bg-info::before {
    background: var(--color-brand);
}

[data-design-system="klockner"] .main-content .card-header.bg-success::before,
[data-design-system="klockner"] .modal-header.bg-success::before {
    background: var(--color-success);
}

[data-design-system="klockner"] .main-content .card-header.bg-warning::before,
[data-design-system="klockner"] .modal-header.bg-warning::before {
    background: var(--color-warning);
}

[data-design-system="klockner"] .main-content .card-header.bg-secondary::before,
[data-design-system="klockner"] .modal-header.bg-secondary::before {
    background: var(--color-border-strong);
}

[data-design-system="klockner"] .main-content .card-header.bg-primary *,
[data-design-system="klockner"] .main-content .card-header.bg-info *,
[data-design-system="klockner"] .main-content .card-header.bg-success *,
[data-design-system="klockner"] .main-content .card-header.bg-warning *,
[data-design-system="klockner"] .main-content .card-header.bg-secondary *,
[data-design-system="klockner"] .modal-header.bg-primary *,
[data-design-system="klockner"] .modal-header.bg-info *,
[data-design-system="klockner"] .modal-header.bg-success *,
[data-design-system="klockner"] .modal-header.bg-warning *,
[data-design-system="klockner"] .modal-header.bg-secondary * {
    color: var(--color-heading) !important;
}

[data-design-system="klockner"] .main-content .card-header.bg-primary i,
[data-design-system="klockner"] .main-content .card-header.bg-info i,
[data-design-system="klockner"] .modal-header.bg-primary i,
[data-design-system="klockner"] .modal-header.bg-info i {
    color: var(--color-brand) !important;
}

[data-design-system="klockner"] .main-content .card-header.bg-success i,
[data-design-system="klockner"] .modal-header.bg-success i {
    color: var(--color-success) !important;
}

[data-design-system="klockner"] .main-content .card-header.bg-warning i,
[data-design-system="klockner"] .modal-header.bg-warning i {
    color: var(--color-warning) !important;
}

[data-design-system="klockner"] .main-content .card-header .btn-outline-light,
[data-design-system="klockner"] .modal-header .btn-outline-light {
    color: var(--color-heading) !important;
    background: var(--color-bg-surface) !important;
    border-color: var(--color-border-strong) !important;
}

[data-design-system="klockner"] .main-content .card-header .btn-outline-light:hover,
[data-design-system="klockner"] .main-content .card-header .btn-outline-light:focus-visible,
[data-design-system="klockner"] .modal-header .btn-outline-light:hover,
[data-design-system="klockner"] .modal-header .btn-outline-light:focus-visible {
    color: var(--color-heading) !important;
    background: var(--color-bg-hover) !important;
    border-color: var(--color-brand) !important;
}

[data-design-system="klockner"] .main-content .card-header .btn-outline-light *,
[data-design-system="klockner"] .modal-header .btn-outline-light * {
    color: currentColor !important;
}

[data-design-system="klockner"] .modal-header .btn-close-white {
    filter: none;
    opacity: 0.72;
}

[data-design-system="klockner"] .modal-header .btn-close-white:hover,
[data-design-system="klockner"] .modal-header .btn-close-white:focus-visible {
    opacity: 1;
}

[data-design-system="klockner"] .main-content .progress-bar.bg-primary,
[data-design-system="klockner"] .main-content .progress-bar.bg-info,
[data-design-system="klockner"] .main-content .progress-bar.bg-success,
[data-design-system="klockner"] .main-content .progress-bar.bg-warning {
    color: var(--color-heading) !important;
    font-weight: var(--font-weight-semibold);
}

[data-design-system="klockner"] .main-content .card-body .metric-box,
[data-design-system="klockner"] .main-content .card-body .metric-box-sm {
    color: var(--color-heading) !important;
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

[data-design-system="klockner"] .main-content .card-body .metric-box *,
[data-design-system="klockner"] .main-content .card-body .metric-box-sm * {
    color: var(--color-heading) !important;
}

[data-design-system="klockner"] .main-content .card-body .metric-box .metric-label,
[data-design-system="klockner"] .main-content .card-body .metric-box-sm .metric-label-sm {
    color: var(--color-text-secondary) !important;
}

[data-design-system="klockner"] .card,
[data-design-system="klockner"] .ds-card,
[data-design-system="klockner"] .auth-card {
    border-radius: var(--radius-lg);
    border-color: var(--color-border);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
}

[data-design-system="klockner"] .badge-brand,
[data-design-system="klockner"] .ds-badge-brand,
[data-design-system="klockner"] .badge-primary {
    color: var(--color-text-brand);
    background: var(--color-brand-subtle);
    border-color: var(--color-brand-border);
}

[data-design-system="klockner"] .alert-info,
[data-design-system="klockner"] .ds-alert-info {
    color: var(--color-text-primary);
    background: var(--color-brand-subtle);
    border-color: var(--color-brand-border);
}

[data-design-system="klockner"] .form-control,
[data-design-system="klockner"] .form-select,
[data-design-system="klockner"] .input-group-text {
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-design-system="klockner"] .form-control:focus,
[data-design-system="klockner"] .form-select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[data-design-system="klockner"] .auth-logo-badge {
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

[data-design-system="klockner"] .auth-logo-badge .brand-logo-mark--klockner {
    width: 54px;
    height: 54px;
    font-size: 2rem;
}

[data-design-system="klockner"] body.auth-page {
    background:
        linear-gradient(180deg, var(--color-bg-surface) 0 86px, var(--color-bg-canvas) 86px 100%);
}

@media (max-width: 768px) {
    [data-design-system="klockner"] body.auth-page {
        background: var(--color-bg-canvas);
    }
}


/* ============================================================
   SALES PORTAL — sp-* component module (P0-6)
   ============================================================
   Complete styling for the rep / territory-manager / logistics /
   admin-signup surfaces. Templates reference these classes today
   but the rules lived nowhere — every page rendered as raw HTML.
   Built entirely from design tokens so the Klockner Automate brand
   profile (data-design-system="klockner") inherits palette + radii
   for free.

   Chat / status / timeline classes (.sp-chat-panel, .sp-thread*,
   .sp-msg*, .sp-status-panel, .sp-timeline*) live in
   sales_portal_chat.css — that file is loaded only when threads are
   enabled and predates this module.
   ============================================================ */

/* ─── Shell ───────────────────────────────────────────────── */
.sp-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--color-bg-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-normal);
}

/* Public surfaces (login / register / pending-approval) render without
   the sidebar — the rep hasn't authenticated, the nav links would all
   bounce them straight back to login anyway. Centre the form so the
   page reads like a real login screen and not a 240-px-wide gap with
   content on the right. */
.sp-shell.sp-shell-public {
    grid-template-columns: 1fr;
    place-items: center;
}
.sp-shell.sp-shell-public .sp-main {
    max-width: 480px;
    width: 100%;
}

.sp-side {
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-right: 1px solid var(--color-sidebar-border);
}

.sp-brand {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-4);
}

.sp-nav-item {
    display: block;
    padding: var(--space-2-5) var(--space-3);
    color: var(--color-sidebar-text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-nav-item:hover,
.sp-nav-item:focus-visible {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text);
    outline: none;
}

.sp-nav-item.active,
.sp-nav-item[aria-current="page"] {
    background: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-text);
    box-shadow: inset 3px 0 0 var(--color-sidebar-active-bar);
}

.sp-main {
    padding: var(--space-6) var(--space-8);
    max-width: var(--layout-content-max-width);
    width: 100%;
}

@media (max-width: 768px) {
    .sp-shell {
        grid-template-columns: 1fr;
    }
    .sp-side {
        flex-direction: row;
        flex-wrap: wrap;
        padding: var(--space-3) var(--space-4);
        border-right: none;
        border-bottom: 1px solid var(--color-sidebar-border);
    }
    .sp-brand { margin: 0 var(--space-4) 0 0; }
    .sp-main { padding: var(--space-4); }
}

/* ─── Section wrappers ────────────────────────────────────── */
.sp-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.sp-section > h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
}

.sp-list-header,
.sp-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.sp-list-header h2,
.sp-editor-header h2 {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
}

.sp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.sp-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-body-sm);
    color: var(--color-text-secondary);
}

/* ─── Dashboard cards ─────────────────────────────────────── */
.sp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.sp-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-card h3 {
    margin: 0;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-secondary);
}

.sp-card a {
    margin-top: auto;
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-sm);
    text-decoration: none;
}
.sp-card a:hover { text-decoration: underline; }

.sp-metric {
    margin: 0;
    font-size: var(--font-size-display-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.sp-btn:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

.sp-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    border-color: var(--color-border-focus);
}

.sp-btn:disabled,
.sp-btn[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.sp-btn-primary {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text-inverse);
}
.sp-btn-primary:hover:not(:disabled) {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-text-inverse);
}

.sp-btn-danger {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-text-inverse);
}
.sp-btn-danger:hover:not(:disabled) {
    background: var(--color-error-hover);
    border-color: var(--color-error-hover);
    color: var(--color-text-inverse);
}

.sp-btn-sm {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--font-size-body-sm);
}

/* ─── Inputs / forms ──────────────────────────────────────── */
.sp-input,
.sp-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.sp-form select,
.sp-form textarea,
.sp-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.sp-grid select,
.sp-grid textarea,
.sp-toolbar select,
.sp-toolbar input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-body-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sp-input:focus,
.sp-form :is(input, select, textarea):focus,
.sp-grid :is(input, select, textarea):focus,
.sp-toolbar :is(select, input):focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.sp-form,
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-4);
}

.sp-form label,
.sp-grid label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-label-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.sp-grid textarea,
.sp-form textarea {
    min-height: 80px;
    resize: vertical;
}

/* Search results dropdown under .sp-input — used by customer/catalog pickers. */
.sp-results {
    list-style: none;
    margin: var(--space-1) 0 var(--space-3);
    padding: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 280px;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}
.sp-results:empty { display: none; }
.sp-results li {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-body-sm);
}
.sp-results li:last-child { border-bottom: none; }
.sp-results li:hover,
.sp-results li:focus-visible,
.sp-results li.sp-results-active {
    background: var(--color-bg-hover);
    outline: none;
}

/* Status placeholder rendered inside .sp-results (loading / empty /
   error). Non-clickable, dimmer than real items, italic so the rep's
   eye distinguishes "no matches" from a single-result list. */
.sp-results-status {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-body-sm);
    cursor: default;
}

/* ─── Tables ──────────────────────────────────────────────── */
.sp-table,
.sp-lines {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: var(--font-size-body-sm);
}

.sp-table thead th,
.sp-lines thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-label-sm);
    border-bottom: 1px solid var(--color-border);
}

.sp-table tbody td,
.sp-lines tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.sp-table tbody tr:last-child td,
.sp-lines tbody tr:last-child td {
    border-bottom: none;
}

.sp-table tbody tr:hover,
.sp-lines tbody tr:hover {
    background: var(--color-bg-hover);
}

/* Numeric line columns: qty, unit price, discount, total. Right-align +
   tabular-nums so totals visually line up across rows. */
.sp-lines tbody td:nth-child(n+3):nth-child(-n+6) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Totals strip ────────────────────────────────────────── */
.sp-totals {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin: var(--space-5) 0;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}

.sp-totals > div {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
}

.sp-totals .sp-total {
    color: var(--color-heading);
    font-size: var(--font-size-h4);
}

/* ─── Action footer (form footer with primary/secondary buttons) ─── */
.sp-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

/* ─── Tabs ────────────────────────────────────────────────── */
.sp-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.sp-tab {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sp-tab:hover { color: var(--color-text-primary); }

.sp-tab.active,
.sp-tab[aria-selected="true"] {
    color: var(--color-text-brand);
    border-bottom-color: var(--color-brand);
}

.sp-panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.sp-panel[hidden] { display: none; }

/* ─── Badges + state color map ────────────────────────────── */
.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-full);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: var(--font-size-label-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border: 1px solid var(--color-border);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

/* State-specific badges (set by JS via the FSM state string).
   Keep names aligned 1:1 with OrderDraftState / CustomerDraftState. */
.sp-badge.sp-badge-draft,
.sp-badge.sp-badge-cancelled {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.sp-badge.sp-badge-pending_sales_approval,
.sp-badge.sp-badge-returned_to_sales,
.sp-badge.sp-badge-pending_logistics_review,
.sp-badge.sp-badge-pending_approval {
    background: var(--color-warning-subtle);
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
}
.sp-badge.sp-badge-approved_by_sales,
.sp-badge.sp-badge-pending_logistics,
.sp-badge.sp-badge-in_dispatch,
.sp-badge.sp-badge-exported,
.sp-badge.sp-badge-approved {
    background: var(--color-info-subtle);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}
.sp-badge.sp-badge-confirmed,
.sp-badge.sp-badge-promoted_to_erp {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}
.sp-badge.sp-badge-rejected,
.sp-badge.sp-badge-logistics_error {
    background: var(--color-error-subtle);
    color: var(--color-error-text);
    border-color: var(--color-error-border);
}

/* AI-resolved row marker — used on lines that came from intake materializer
   so the rep can spot what the LLM authored before submit. */
.sp-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-sm);
    background: var(--color-brand-subtle);
    color: var(--color-text-brand);
    border: 1px solid var(--color-brand-border);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.sp-intake-banner {
    background: var(--color-brand-subtle);
    border: 1px solid var(--color-brand-border);
    color: var(--color-text-brand);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-sm);
}

/* ─── Feedback / empty state ──────────────────────────────── */
.sp-feedback {
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body-sm);
    border: 1px solid transparent;
    line-height: var(--line-height-snug);
}
.sp-feedback:empty { display: none; }
.sp-feedback[role="alert"] {
    background: var(--color-error-subtle);
    color: var(--color-error-text);
    border-color: var(--color-error-border);
}
.sp-feedback.sp-feedback-success {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}
.sp-feedback.sp-feedback-info {
    background: var(--color-info-subtle);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}

.sp-empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

/* ─── Dialog (uses native <dialog>) ───────────────────────── */
.sp-dialog,
dialog.sp-dialog {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
}
.sp-dialog::backdrop,
dialog.sp-dialog::backdrop {
    background: var(--color-bg-overlay);
}