/**
 * TradeAudit Platform - Design System
 * Main CSS Entry Point with Cascade Layers
 * Version: 2.0.1 (2026) - COMPILED VERSION FOR PERFORMANCE
 *
 * Architecture:
 * - Modern CSS with Cascade Layers
 * - Container Queries for component responsiveness
 * - CSS Nesting
 * - Custom Properties (CSS Variables)
 * - WCAG 2.2 AA Compliant
 * - Native Dark Mode Support
 *
 * Layer Order (specificity from lowest to highest):
 * 1. reset       - CSS reset and normalization
 * 2. tokens      - Design tokens (primitives, semantic, component)
 * 3. foundations - Typography, animations, base styles
 * 4. layouts     - Page structure, grid, sidebar, header
 * 5. components  - Reusable UI components
 * 6. utilities   - Helper classes
 * 7. overrides   - Third-party overrides (if needed)
 *
 * PERFORMANCE NOTE: All CSS is now compiled into main-compiled.css to avoid
 * multiple HTTP requests that were freezing the browser.
 */

/* ===== DEFINE LAYER ORDER ===== */
@layer reset, tokens, foundations, layouts, components, utilities, overrides;


/* ===== ALL STYLES (COMPILED) ===== */
@import url('./main-compiled.css');


/* ===== OVERRIDES LAYER (for third-party libraries) ===== */
/* DataTables overrides */
@layer overrides {

    /* Override DataTables default styles to match design system */
    .dataTables_wrapper {
        font-family: var(--primitive-font-sans);
        font-size: var(--primitive-font-size-base);
    }

    .dataTables_length,
    .dataTables_filter {
        margin-bottom: var(--space-md);
    }

    .dataTables_filter input {
        /* Input styles will be inherited from our design system */
        border: var(--input-border-width) solid var(--input-border-color);
        border-radius: var(--input-border-radius);
        padding: var(--input-padding-y) var(--input-padding-x);
    }

    .dataTables_info,
    .dataTables_paginate {
        margin-top: var(--space-md);
        font-size: var(--primitive-font-size-sm);
        color: var(--color-text-secondary);
    }

    .paginate_button {
        padding: var(--space-sm) var(--space-md);
        margin: 0 var(--space-xs);
        border-radius: var(--primitive-radius-sm);
        border: 1px solid var(--color-border-default);
        background: var(--color-bg-card);
        color: var(--color-text-primary);
        cursor: pointer;
        transition: var(--transition-fast);

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

        &.current {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: white;
        }

        &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }
}

/* ===== SELECT2 OVERRIDES (Moved out of layer for specificity) ===== */
/* Prepend body to win specificity war against CDN */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    background: var(--input-bg);
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    min-height: 42px;
    padding: var(--space-xs) var(--space-sm);
}

/* Fix multiselect to prevent vertical growth */
body .select2-container--default .select2-selection--multiple {
    max-height: 80px;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary);
    line-height: 28px;
    padding-left: var(--space-xs);
}

body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-placeholder);
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: var(--space-sm);
}

body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-secondary) transparent transparent transparent;
}

body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text-secondary) transparent;
}

body .select2-container--default .select2-selection--single:focus,
body .select2-container--default .select2-selection--multiple:focus,
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-border-focus-ring);
    outline: none;
}

/* Select2 dropdown */
body .select2-dropdown {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--primitive-radius-md);
    box-shadow: var(--dropdown-shadow);
    z-index: var(--primitive-z-dropdown);
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--input-bg);
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    color: var(--color-text-primary);
    padding: var(--space-sm);
}

body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-border-focus);
    outline: none;
}

body .select2-container--default .select2-results__option {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-primary);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--color-primary);
    color: white;
}

body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

body .select2-container--default .select2-results__option--disabled {
    color: var(--color-text-disabled);
}

/* Pill/Tag Styling for Multiple Select - Following Official Select2 Structure */
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--primitive-radius-sm);
    color: var(--color-primary);
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    padding-left: 20px;
    /* Space for X button on LEFT */
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
}

/* X Button - Positioned on LEFT following Select2 official pattern */
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-right: 1px solid var(--color-primary);
    border-top-left-radius: var(--primitive-radius-sm);
    border-bottom-left-radius: var(--primitive-radius-sm);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 0 4px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.7;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--color-error-light, #ffe5e5);
    color: var(--color-error);
    opacity: 1;
    outline: none;
}


/* ===== SWEETALERT2 OVERRIDES (outside layers to override CDN) ===== */
/* These styles are NOT in a @layer so they can override the CDN styles */
div.swal2-popup.swal2-modal {
    font-family: var(--primitive-font-sans);
    border-radius: var(--primitive-radius-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-xl);
    padding: var(--space-xl);
}

div.swal2-popup .swal2-title {
    font-size: var(--primitive-font-size-xl);
    font-weight: var(--primitive-font-weight-semibold);
    color: var(--color-text-primary);
    padding: 0;
    margin-bottom: var(--space-sm);
}

div.swal2-popup .swal2-html-container {
    font-size: var(--primitive-font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0;
}

div.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

div.swal2-popup .swal2-icon.swal2-error {
    border-color: var(--color-error);
}

div.swal2-popup .swal2-icon.swal2-error .swal2-x-mark-line-left,
div.swal2-popup .swal2-icon.swal2-error .swal2-x-mark-line-right {
    background-color: var(--color-error);
}

div.swal2-popup .swal2-icon.swal2-success {
    border-color: var(--color-success);
    color: var(--color-success);
}

div.swal2-popup .swal2-icon.swal2-success .swal2-success-line-tip,
div.swal2-popup .swal2-icon.swal2-success .swal2-success-line-long {
    background-color: var(--color-success);
}

div.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--color-success-light);
}

div.swal2-popup .swal2-icon.swal2-info {
    border-color: var(--color-info);
    color: var(--color-info);
}

div.swal2-popup .swal2-icon.swal2-question {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

div.swal2-container {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

div.swal2-popup .swal2-actions {
    margin-top: var(--space-lg);
    gap: var(--space-sm);
}

div.swal2-popup button.swal2-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--primitive-radius-md);
    font-family: var(--primitive-font-sans);
    font-size: var(--primitive-font-size-base);
    font-weight: var(--primitive-font-weight-medium);
    color: white;
    transition: all 0.15s ease;
    box-shadow: none;
}

div.swal2-popup button.swal2-confirm:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

div.swal2-popup button.swal2-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-bg-hover);
    border: 2px solid var(--color-border-default);
    border-radius: var(--primitive-radius-md);
    font-family: var(--primitive-font-sans);
    font-size: var(--primitive-font-size-base);
    font-weight: var(--primitive-font-weight-medium);
    color: var(--color-text-primary);
    transition: all 0.15s ease;
    box-shadow: none;
}

div.swal2-popup button.swal2-cancel:hover {
    background: var(--color-bg-card);
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* ===== FOOTER LAYOUT FIX ===== */
/* Bootstrap float-right/d-none classes are not loaded — use flexbox instead */
.main-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-footer__version {
    flex-shrink: 0;
}





/* ===== CARD LOADING OVERLAY — FIX FLICKER ===== */
/*
 * main-compiled.css has backdrop-filter:blur(3px) on ::after which forces a
 * GPU composite layer even at opacity:0, causing a visible flash on every search.
 * These unlayered rules win over any @layer rule and override the compiled CSS.
 */
.card.is-loading::after {
    backdrop-filter: none;
    opacity: 0;
    animation: card-overlay-appear 0ms 400ms forwards;
}

.card.is-loading::before {
    opacity: 0;
    animation: card-overlay-appear 0ms 400ms forwards, card-spinner 0.8s 400ms linear infinite;
}

@keyframes card-overlay-appear {
    to { opacity: 1; }
}


/* ===== SCROLLBAR STYLES ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-border-default, rgba(128,128,128,0.4));
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary, rgba(128,128,128,0.7));
}
::-webkit-scrollbar-corner {
    background: transparent;
}
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-default, rgba(128,128,128,0.4)) transparent;
}


/* ===== GLOBAL STYLES ===== */
@layer foundations {
    html {
        /* Enable smooth scrolling */
        scroll-behavior: smooth;
    }

    body {
        /* Ensure body takes full height */
        min-height: 100vh;
        display: flex;
        flex-direction: column;

        /* Prevent layout shift on page load */
        overflow-x: hidden;
    }

    /* Ensure images are responsive by default */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better default for buttons */
    button {
        font-family: inherit;
    }

    /* Better focus styles for keyboard navigation */
    :focus-visible {
        outline: 2px solid var(--color-border-focus);
        outline-offset: 2px;
    }

    /* Remove outline for mouse users */
    :focus:not(:focus-visible) {
        outline: none;
    }
}


/* ===== DARK MODE TOGGLE ===== */
/* Add data-theme="dark" to <html> to enable dark mode */
/* This is controlled by JavaScript (theme-controller.js) */



/* ===== RESPONSIVE TABLES — Container Queries por complejidad real ===== */
/*
 * Cada tabla declara su contenedor. El card view se activa cuando el espacio
 * disponible deja de ser suficiente para esa tabla específica, calculado
 * a partir del ancho mínimo real de sus columnas (análisis de columnas reales).
 *
 * Grupos:
 *   --simple  (5-6 col): Brands, Suppliers, Substances, Departments, Unities → 560px
 *   --medium  (7-8 col): Groups, Subgroups, Questionnaires                   → 700px
 *   --complex (9-10 col): Presentations, UserCustomers                        → 820px
 *   --dense  (10-13 col): Users, Products, Customers                          → 940px
 */

.table-container {
    container-type: inline-size;
}

.table-container--simple  { container-name: dt-s; }
.table-container--medium  { container-name: dt-m; }
.table-container--complex { container-name: dt-c; }
.table-container--dense   { container-name: dt-d; }

/* --- Card view compartido (aplicado por cada grupo en su umbral) ---------- */

@container dt-s (max-width: 560px) {
    thead { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }
    tbody tr { display: block; background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: var(--primitive-radius-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); overflow: hidden; }
    tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); border-right: none; min-height: 44px; box-sizing: border-box; }
    tbody td:last-child { border-bottom: none; justify-content: center; background: var(--color-bg-secondary); padding: var(--space-md); }
    tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding-right: var(--space-md); flex-shrink: 0; min-width: 90px; }
    tbody td:last-child::before { display: none; }
}

@container dt-m (max-width: 700px) {
    thead { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }
    tbody tr { display: block; background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: var(--primitive-radius-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); overflow: hidden; }
    tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); border-right: none; min-height: 44px; box-sizing: border-box; }
    tbody td:last-child { border-bottom: none; justify-content: center; background: var(--color-bg-secondary); padding: var(--space-md); }
    tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding-right: var(--space-md); flex-shrink: 0; min-width: 90px; }
    tbody td:last-child::before { display: none; }
}

@container dt-c (max-width: 820px) {
    thead { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }
    tbody tr { display: block; background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: var(--primitive-radius-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); overflow: hidden; }
    tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); border-right: none; min-height: 44px; box-sizing: border-box; }
    tbody td:last-child { border-bottom: none; justify-content: center; background: var(--color-bg-secondary); padding: var(--space-md); }
    tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding-right: var(--space-md); flex-shrink: 0; min-width: 90px; }
    tbody td:last-child::before { display: none; }
}

@container dt-d (max-width: 940px) {
    thead { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }
    tbody tr { display: block; background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: var(--primitive-radius-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); overflow: hidden; }
    tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); border-right: none; min-height: 44px; box-sizing: border-box; }
    tbody td:last-child { border-bottom: none; justify-content: center; background: var(--color-bg-secondary); padding: var(--space-md); }
    tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding-right: var(--space-md); flex-shrink: 0; min-width: 90px; }
    tbody td:last-child::before { display: none; }
}

/* ===== PRINT STYLES ===== */
@media print {
    @page {
        margin: 1cm;
    }

    body {
        background: white;
        color: black;
    }

    /* Hide non-printable elements */
    .sidebar,
    .header,
    .page-header-actions,
    .btn,
    button {
        display: none;
    }

    /* Expand content to full width */
    .main-container {
        margin-left: 0;
        margin-top: 0;
    }

    /* Remove shadows and borders for print */
    .card,
    .table-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* Prevent page breaks inside elements */
    .card,
    .table-modern tr {
        page-break-inside: avoid;
    }
}