/* ========================================================================== 
   PROJECT global UI
   ========================================================================== */
:root {
    --primary: #1d4ed8;
    --primary-dark: #1e3a8a;
    --primary-soft: #dbeafe;
    --accent: #0f766e;
    --warning: #b45309;
    --danger: #be123c;
    --success: #15803d;
    /* Fondo general de la aplicación: usar blanco para mejor contraste del diseño */
    --bg-app: #ffffff;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --border: #d9e2ef;
    --border-strong: #b7c4d6;
    --text-main: #1f2937;
    --text-muted: #64748b;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, .08);
    --radius-sm: 6px;
    --radius-md: 8px;
    /* Aumentar el ancho máximo del contenido para pantallas muy grandes (televisores 85") */
    --content-max: 2560px;
}

/* Forzar que los wrappers internos no limiten el ancho del contenido */
@media (min-width: 1200px) {
    .page-wrapper,
    .dashboard-core,
    .view-shell,
    .content-panel,
    .card,
    .app-container {
        max-width: none !important;
        width: 100% !important;
    }

    /* Si dentro de las páginas existe .page-wrapper centrada, quitar su max-width */
    .page-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--app-gutter) !important;
        padding-right: var(--app-gutter) !important;
    }
}

/* Ajuste: aumentar la columna del grid para usar más espacio para contenido */
@media (min-width: 1400px) {
    .industrial-shell {
        grid-template-columns: 200px 1fr; /* barra lateral fija 200px, resto para contenido */
    }
}


html {
    min-height: 100%;
}

body {
    /* Fondo plano blanco para que el diseño destaque como en la maqueta */
    background: var(--bg-app);
    color: var(--text-main);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: .95rem;
}

:root {
    --app-gutter: clamp(.75rem, 1.25vw, 1.75rem);
    --content-max: 2560px;
}

.app-main,
.app-header,
.app-footer {
    width: 100%;
}

.app-container,
.app-main > .container-fluid,
.app-header .container-fluid,
.app-footer .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
}

/* ========================================================================== 
   Navigation and shell
   ========================================================================== */
.app-navbar {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(185, 199, 220, .75);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    color: #0f172a !important;
    gap: .55rem;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 8px 18px rgba(29, 78, 216, .22);
}

.navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #475569;
    border-radius: var(--radius-sm);
    padding: .55rem .8rem;
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary);
    background: var(--primary-soft);
}

.page-heading {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem;
}

.page-heading h4 {
    color: #0f172a;
    font-size: 1.05rem;
}

.app-footer {
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid var(--border);
}

/* ========================================================================== 
   Cards and sections
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

.card.shadow-sm,
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.hero-header {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    margin-bottom: 1.25rem;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ========================================================================== 
   Tables
   ========================================================================== */
.table {
    margin-bottom: 0;
    color: var(--text-main);
}

.table > :not(caption) > * > * {
    border-bottom-color: #e5edf6;
}

.table thead th {
    background: #f1f5f9;
    color: #475569;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: .82rem .9rem;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #eef6ff;
}

.table-bordered {
    border: 1px solid var(--border);
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}

/* ========================================================================== 
   Forms
   ========================================================================== */
.form-label {
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    min-height: 42px;
    color: #0f172a;
    background-color: #ffffff !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control,
.form-select {
    padding: .62rem .8rem !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .14) !important;
    outline: none !important;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    color: var(--text-muted) !important;
    background-color: #eef2f7 !important;
    border-color: #d8e1ee !important;
    cursor: not-allowed;
}

.table input[type="number"] {
    min-height: 34px;
    text-align: center;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
}

.table input[type="number"]:focus {
    border-color: var(--primary);
    background: #ffffff;
}

.data-value-display {
    display: block;
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .62rem .8rem;
    font-size: .95rem;
    font-weight: 600;
    margin-top: 4px;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
}

/* ========================================================================== 
   Buttons
   ========================================================================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 16px rgba(29, 78, 216, .16);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-secondary {
    color: #475569;
    border-color: #cbd5e1;
    background: #ffffff;
}

.btn-outline-secondary:hover {
    color: #0f172a;
    border-color: #94a3b8;
    background: #f8fafc;
}

.action-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.btn-view {
    color: var(--primary);
    background: var(--primary-soft);
}

.btn-view:hover {
    color: #ffffff;
    background: var(--primary);
}

.btn-delete {
    color: var(--danger);
    background: #ffe4e6;
}

.btn-delete:hover {
    color: #ffffff;
    background: var(--danger);
}

/* ========================================================================== 
   Status indicators
   ========================================================================== */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: .38rem .72rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.status-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.dot-active {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(21, 128, 61, .12);
}

.dot-complete {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .12);
}

.status-paperwork { background: #64748b; color: #ffffff; }
.status-partial { background: #facc15; color: #422006; }
.status-pulled { background: #475569; color: #ffffff; }
.status-neck { background: #fde68a; color: #78350f; }
.status-prod { background: var(--primary); color: #ffffff; }
.status-trims { background: #7c3aed; color: #ffffff; }
.status-packing { background: #f97316; color: #ffffff; }
.status-shipping { background: var(--accent); color: #ffffff; }
.status-inactive { background: #e2e8f0; color: #64748b; }

/* ========================================================================== 
   Responsive polish
   ========================================================================== */

@media (min-width: 1800px) {
    body {
        font-size: 1rem;
    }

    .table thead th {
        padding: .8rem .75rem;
    }

    .table td {
        padding: .75rem;
    }
}

@media (max-width: 992px) {
    .navbar .nav-link {
        width: 100%;
        justify-content: flex-start;
    }

    .table-responsive .table {
        min-width: 860px;
    }
}

@media (max-width: 576px) {
    :root {
        --app-gutter: .65rem;
    }

    body {
        font-size: .9rem;
    }

    .navbar-brand span {
        font-size: .95rem;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .hero-header {
        padding: 1.1rem;
    }

    .page-heading h4 {
        font-size: .98rem;
    }

    .btn {
        white-space: normal;
    }

    .status-pill {
        min-width: 76px;
        padding: .32rem .5rem;
    }
}
@media (max-width: 768px) {
    .app-main .container-fluid,
    .app-header .container-fluid {
        padding-left: var(--app-gutter) !important;
        padding-right: var(--app-gutter) !important;
    }

    .page-heading {
        align-items: flex-start !important;
        gap: .75rem;
        flex-direction: column;
    }

    .card {
        padding: 1rem;
    }

    .table thead th,
    .table td {
        padding: .7rem;
    }
}

/* ========================================================================== 
   UI refresh layer
   ========================================================================== */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #e0ecff;
    --accent: #0f766e;
    --accent-soft: #ccfbf1;
    --warning-soft: #fef3c7;
    --danger-soft: #ffe4e6;
    --success-soft: #dcfce7;
    --bg-app: #f4f7fb;
    --border: #dbe4ef;
    --border-strong: #b8c6d9;
    --text-main: #172033;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 14px 30px rgba(15, 23, 42, .09);
}

body {
    line-height: 1.45;
    background:
        linear-gradient(180deg, #eef5ff 0, rgba(244, 247, 251, 0) 260px),
        var(--bg-app);
}

.app-navbar {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(185, 199, 220, .78);
}

.brand-mark {
    box-shadow: 0 8px 18px rgba(37, 99, 235, .20);
}

.navbar .nav-link {
    font-weight: 700;
    transition: color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}

.page-heading {
    padding: .9rem 1.05rem;
    background: rgba(255, 255, 255, .92);
}

.card {
    border-color: rgba(219, 228, 239, .95);
}

.card:hover {
    border-color: #cbd5e1;
}

.table {
    background: #ffffff;
}

.table thead th {
    background: #eef3f9;
    color: #334155;
    padding: .78rem .82rem;
}

.table td {
    padding: .76rem .82rem;
}

.table-hover tbody tr:hover {
    background-color: #f0f7ff;
}

.table-responsive {
    border: 1px solid rgba(219, 228, 239, .78);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14) !important;
}

.btn {
    line-height: 1.25;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn-primary {
    box-shadow: 0 8px 16px rgba(37, 99, 235, .16);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: rgba(37, 99, 235, .38);
    background: #ffffff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.btn-outline-success {
    color: var(--success);
    border-color: rgba(21, 128, 61, .38);
    background: #ffffff;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    color: #ffffff;
    background: var(--success);
    border-color: var(--success);
}

.alert-success {
    color: #14532d;
    background: var(--success-soft);
    border-color: #bbf7d0;
}

.alert-warning {
    color: #78350f;
    background: var(--warning-soft);
    border-color: #fde68a;
}

.alert-danger {
    color: #881337;
    background: var(--danger-soft);
    border-color: #fecdd3;
}

.status-pill {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

@media (max-width: 576px) {
    .table-responsive {
        border-radius: var(--radius-sm);
    }

    .btn {
        min-height: 38px;
    }
}

/* ========================================================================== 
   Shared view and operations tables
   ========================================================================== */
.view-shell {
    width: 100%;
    padding: clamp(.75rem, 1.2vw, 1.25rem) 0;
}

.view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.view-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .55rem;
}

.view-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 850;
    line-height: 2rem;
}

.view-subtitle {
    margin-top: .25rem;
    color: var(--text-muted);
    font-size: .84rem;
}

.toolbar-search {
    width: min(100%, 280px);
}

.content-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(.75rem, 1.1vw, 1rem);
}

.nav-tabs {
    gap: .15rem;
    border-color: var(--border);
}

.nav-tabs .nav-link {
    color: #475569;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: .72rem 1rem;
    font-size: .83rem;
    font-weight: 800;
    text-transform: uppercase;
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    background: #f8fafc;
    border-bottom-color: #bfdbfe;
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    background: #ffffff;
    border-bottom-color: var(--primary);
}

.table-trims,
.pulled-table,
.table-base {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    font-size: .8rem;
}

.table-trims th,
.table-trims td,
.pulled-table th,
.pulled-table td,
.table-base th,
.table-base td {
    padding: .58rem .5rem;
    border: 1px solid #e5edf6;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.table-trims thead th,
.pulled-table thead th,
.table-base thead th {
    color: #ffffff;
    background: #1f2937;
    font-weight: 850;
    text-transform: uppercase;
}

.table-trims tbody tr:nth-child(even) td,
.pulled-table tbody tr:nth-child(even) td,
.table-base tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.table-trims tbody tr:hover td,
.pulled-table tbody tr:hover td,
.table-base tbody tr:hover td {
    background: #eef6ff;
}

.sticky-desc,
.sticky-order {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 150px;
    background: #ffffff;
    box-shadow: 2px 0 4px rgba(15, 23, 42, .08);
    text-align: left !important;
    font-weight: 800;
}

thead .sticky-desc,
thead .sticky-order {
    z-index: 6;
    color: #ffffff;
    background: #1f2937;
}

.sticky-desc {
    min-width: 220px;
}

.text-left-cell {
    min-width: 150px;
    text-align: left !important;
}

.section-entry,
.table-trims thead .section-entry {
    color: #14532d !important;
    background: #dcfce7 !important;
}

.section-exit,
.table-trims thead .section-exit {
    color: #881337 !important;
    background: #ffe4e6 !important;
}

.section-stock,
.table-trims thead .section-stock {
    color: #78350f !important;
    background: #fef3c7 !important;
}

.size-head,
.pulled-table thead .size-head {
    color: #ffffff !important;
    background: var(--primary) !important;
}

.holo-head,
.pulled-table thead .holo-head {
    color: #ffffff !important;
    background: var(--warning) !important;
}

.bg-total,
.total-cell {
    background: #eef3f9 !important;
    color: #0f172a;
    font-weight: 900;
}

.bg-final {
    background: #fde68a !important;
    color: #422006;
    font-weight: 900;
}

.qty-cell {
    color: #0f172a;
    font-weight: 850;
}

.holo-total-cell {
    color: #92400e;
    background: #fffbeb !important;
    font-weight: 900;
}

.muted-dash {
    color: #94a3b8;
    font-weight: 700;
}

.subhead {
    display: block;
    font-size: .68rem;
    font-weight: 750;
    opacity: .82;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .78rem 1rem;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: 850;
}

.panel-heading-kicker {
    margin-left: auto;
    color: #64748b;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.panel-heading-primary {
    color: #ffffff;
    background: var(--primary);
}

.panel-heading-dark {
    color: #ffffff;
    background: #1f2937;
}

.panel-heading-warning {
    color: #422006;
    background: #fde68a;
}

.readonly-field {
    min-height: 42px;
    display: flex;
    align-items: center;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .62rem .8rem;
    font-weight: 650;
}

.trim-entry-card {
    border-color: #cbd5e1;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.trim-entry-controls {
    padding: 1rem 1rem .75rem;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.trim-size-section {
    padding: 1rem;
    background: #ffffff;
}

.trim-size-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.trim-size-toolbar .form-label {
    margin: 0;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.trim-size-strip {
    display: flex;
    gap: .7rem;
    padding-bottom: .85rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.size-entry-tile {
    min-width: 96px;
    min-height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    scroll-snap-align: start;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    padding: .65rem .55rem;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease, transform .14s ease;
}

.talla-container {
    display: none;
}

.size-entry-tile:hover,
.size-entry-tile.has-value {
    background: #eff6ff;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .18), 0 10px 20px rgba(37, 99, 235, .10);
    transform: translateY(-1px);
}

.size-entry-label {
    color: #0f172a;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.size-entry-tile .input-cantidad {
    height: auto;
    min-height: 34px;
    margin-top: .25rem;
    padding: 0 !important;
    color: var(--primary);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1.25rem;
    font-weight: 900;
}

.size-entry-tile .input-cantidad::placeholder {
    color: var(--primary);
    opacity: 1;
}

.total-entry-tile {
    min-width: 245px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--primary);
    text-align: left;
    background: #eff6ff;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    box-shadow: 0 10px 20px rgba(37, 99, 235, .10);
}

/* --------------------------------------------------------------------------
   Custom responsive tweaks: mejor visual en pantallas muy grandes (85") y en
   móviles de ~6". Fondo blanco y adaptación de espacios y componentes.
   ----------------------------------------------------------------------- */

/* Aumentar aún más el ancho del contenido en pantallas ultra-wide */
@media (min-width: 2560px) {
    :root {
        /* Para pantallas ultra-wide dar más espacio útil */
        --content-max: 3000px;
    }
}

/* Ajustes específicos para móviles pequeños (6" ~ ancho <= 420px) */
@media (max-width: 420px) {
    :root {
        --app-gutter: .4rem;
    }

    body {
        font-size: .98rem;
    }

    .page-heading {
        padding: .6rem .65rem;
    }

    .page-wrapper,
    .view-shell,
    .content-panel {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    /* Formularios y botones ocupan todo el ancho para mejor usabilidad */
    .form-control,
    .form-select,
    .toolbar-search {
        width: 100% !important;
        min-width: 0 !important;
    }

    .btn,
    .btn-primary,
    .btn-outline-secondary,
    .btn-action,
    .btn-view,
    .btn-delete {
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
    }

    .trim-size-strip,
    .size-entry-tile {
        gap: .45rem;
    }

    .size-entry-tile {
        min-width: 80px;
        padding: .45rem .35rem;
    }

    .total-entry-tile {
        min-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .table-responsive {
        font-size: .92rem;
    }
}

/* Pulir el aspecto en pantallas grandes: centrar y usar más ancho útil */
@media (min-width: 1400px) {
    .page-wrapper,
    .dashboard-core,
    .view-shell {
        width: min(100%, var(--content-max));
        margin-left: auto;
        margin-right: auto;
    }

    .page-wrapper {
        padding: clamp(1rem, 1.2vw, 2rem) 0 2rem;
    }

    .page-heading {
        padding: 1rem 1.25rem;
    }

    .card,
    .content-panel {
        border-radius: 12px;
    }
}

/* Forzar uso de todo el ancho disponible en pantallas grandes */
@media (min-width: 1200px) {
    .page-wrapper,
    .dashboard-core,
    .view-shell,
    .app-main .container-fluid,
    .app-container {
        width: 100% !important;
        max-width: none !important; /* eliminar limitación por --content-max */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--app-gutter) !important;
        padding-right: var(--app-gutter) !important;
    }

    /* Tablas y paneles usan todo el ancho disponible */
    .table-responsive,
    .content-panel,
    .card {
        width: 100% !important;
        max-width: none !important;
    }
}


.total-entry-label {
    display: block;
    color: #1e3a8a;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.total-entry-value {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    color: var(--primary);
    font-size: 1.6rem;
    font-weight: 950;
    line-height: 1;
}

.total-entry-meta {
    color: #475569;
    font-size: .72rem;
    font-style: italic;
    border-left: 1px solid #bfdbfe;
    padding-left: 1rem;
}

.trim-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
    background: #ffffff;
}

.trim-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}

.latest-table-link {
    color: var(--primary);
    font-size: .8rem;
    font-weight: 750;
    text-decoration: none;
}

.latest-table-link:hover {
    text-decoration: underline;
}

.badge-soft-primary {
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid rgba(37, 99, 235, .16);
}

.narrow-card {
    width: min(100%, 760px);
}

.compact-card {
    width: min(100%, 560px);
}

.icon-xl {
    font-size: 3rem;
    line-height: 1;
}

.pre-wrap {
    white-space: pre-wrap;
}

.text-truncate-sm {
    max-width: 150px;
}

@media (max-width: 768px) {
    .view-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .view-toolbar-actions,
    .view-toolbar-actions .btn,
    .toolbar-search {
        width: 100%;
    }

    .trim-form-footer,
    .trim-form-actions,
    .total-entry-tile {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .total-entry-meta {
        border-left: 0;
        border-top: 1px solid #bfdbfe;
        padding-top: .65rem;
        padding-left: 0;
    }
}

/* ==========================================================================
   Industrial Precision UX layer
   Palette: primary #0056B3, secondary #495057, tertiary #28A745, neutral #ADB5BD
   ========================================================================== */
:root {
    --primary: #0056B3;
    --primary-dark: #003f86;
    --primary-soft: #e7f0fb;
    --secondary: #495057;
    --tertiary: #28A745;
    --neutral: #ADB5BD;
    --success: #28A745;
    --bg-app: #edf3fa;
    --surface: #ffffff;
    --surface-muted: #f4f8fc;
    --border: #c5d1de;
    --border-strong: #9fb0c2;
    --text-main: #1f2733;
    --text-muted: #5f6b7a;
    --shadow-sm: 0 1px 2px rgba(31, 39, 51, .06);
    --shadow-md: 0 16px 36px rgba(31, 39, 51, .12);
    --radius-sm: 6px;
    --radius-md: 6px;
    --app-gutter: clamp(.8rem, 1.5vw, 1.4rem);
    --content-max: 1440px;
}

body.app-shell {
    min-height: 100vh;
    color: var(--text-main);
    background: var(--bg-app);
}

body.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(#d8e1eb 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: .45;
}

.industrial-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
}

.app-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1rem .75rem;
    background: #e7eef7;
    border-right: 1px solid var(--border);
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    color: #111827;
    text-decoration: none;
    line-height: 1.15;
}

.sidebar-brand:hover {
    color: var(--primary);
}

.sidebar-brand-title {
    font-size: .95rem;
    font-weight: 900;
}

.sidebar-brand-subtitle {
    color: var(--secondary);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sidebar-link {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #283442;
    border-radius: var(--radius-sm);
    padding: .48rem .55rem;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
    transition: color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.sidebar-link i {
    width: 16px;
    color: inherit;
    font-size: .95rem;
}

.sidebar-link:hover {
    color: var(--primary);
    background: rgba(0, 86, 179, .08);
}

.sidebar-link.active {
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 10px 20px rgba(0, 86, 179, .22);
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.sidebar-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #c62828;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: .45rem .5rem;
    font-size: .68rem;
    font-weight: 850;
    text-align: left;
}

.sidebar-logout:hover {
    background: rgba(198, 40, 40, .08);
}

.app-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0 .85rem;
    background: #f8fbff;
    border-bottom: 1px solid var(--border);
}

.topbar-search {
    width: min(100%, 260px);
    min-height: 25px;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--secondary);
    background: #eaf1fa;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: .2rem .7rem;
}

.topbar-search input {
    width: 100%;
    color: var(--text-main);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: .72rem;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.topbar-icon {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #102033;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.topbar-icon:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.topbar-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    background: #c62828;
    border: 1px solid #ffffff;
    border-radius: 50%;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: .65rem;
    border-left: 1px solid var(--border);
}

.topbar-user-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}

.topbar-user-text strong {
    color: #152033;
    font-size: .66rem;
    font-weight: 900;
}

.topbar-user-text span {
    color: var(--secondary);
    font-size: .6rem;
}

.topbar-avatar {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), #1d7d4e);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 900;
}

.app-main {
    flex: 1;
    padding: 1rem var(--app-gutter) 1.2rem;
}

.app-container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 !important;
}

.auth-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.view-shell {
    padding: .25rem 0 0;
}

.view-title {
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: 0;
}

.view-subtitle {
    color: #506070;
    font-size: .82rem;
}

.view-toolbar {
    margin-bottom: .9rem;
}

.card,
.content-panel,
.trim-entry-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.panel-heading {
    min-height: 38px;
    color: #1f2733;
    background: #e9f1fa;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: .7rem .9rem;
}

.panel-heading-primary,
.panel-heading-dark {
    color: #1f2733;
    background: #e9f1fa;
}

.panel-heading-warning {
    color: #7c4d00;
    background: #f7ead3;
}

.panel-heading-kicker {
    color: var(--secondary);
}

.form-label {
    color: #1f2733;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    min-height: 34px;
    color: #172033;
    background-color: var(--surface-muted) !important;
    border-color: var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font-size: .82rem;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 .16rem rgba(0, 86, 179, .16) !important;
}

.btn {
    min-height: 32px;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    font-weight: 800;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 7px 14px rgba(0, 86, 179, .22);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-success {
    background-color: var(--tertiary);
    border-color: var(--tertiary);
}

.btn-outline-secondary {
    color: #172033;
    background: #ffffff;
    border-color: var(--border-strong);
}

.trim-entry-card {
    padding: 0;
}

.trim-entry-controls {
    padding: 1rem .9rem .75rem;
    background: #ffffff;
}

.trim-size-section {
    padding: .9rem;
}

.trim-size-strip {
    gap: .65rem;
}

.size-entry-tile {
    min-width: 68px;
    min-height: 78px;
    background: #edf3fa;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

.size-entry-tile:hover,
.size-entry-tile.has-value {
    background: var(--primary-soft);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(0, 86, 179, .25), 0 10px 20px rgba(0, 86, 179, .10);
}

.size-entry-label {
    color: #1f2733;
}

.size-entry-tile .input-cantidad {
    color: var(--primary);
    font-size: 1.05rem;
}

.size-entry-tile .input-cantidad::placeholder {
    color: var(--primary);
}

.total-entry-tile {
    min-width: 243px;
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.total-entry-label {
    color: #003f86;
}

.total-entry-meta {
    color: var(--secondary);
    border-left-color: #b8d3f0;
}

.trim-form-footer {
    background: #ffffff;
}

.latest-table-link {
    color: var(--primary);
}

.table-responsive {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.table thead th {
    color: #1f2733;
    background: #e9f1fa;
    font-size: .68rem;
    letter-spacing: .04em;
}

.table td {
    font-size: .82rem;
}

.table-hover tbody tr:hover {
    background-color: #f0f6fd;
}

.badge-soft-primary {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 992px) {
    .industrial-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    .sidebar-brand {
        min-width: 140px;
    }

    .sidebar-nav {
        flex-direction: row;
        min-width: max-content;
    }

    .sidebar-footer {
        display: none;
    }
}

@media (max-width: 640px) {
    .topbar-search {
        display: none;
    }

    .topbar-user-text {
        display: none;
    }

    .app-main {
        padding: .75rem;
    }

    .view-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* System Core refinements for shared shell */
.industrial-shell {
    grid-template-columns: 166px minmax(0, 1fr);
}

.app-sidebar {
    gap: 1.6rem;
    background: #e7eef7;
}

.sidebar-brand {
    min-height: 58px;
    justify-content: center;
}

.sidebar-brand-title {
    color: #0b1320;
    font-size: .92rem;
}

.sidebar-brand-subtitle {
    color: #5f6b7a;
    font-size: .56rem;
    letter-spacing: 0;
    text-transform: none;
}

.sidebar-link {
    min-height: 26px;
    gap: .55rem;
    padding: .38rem .52rem;
    font-size: .64rem;
}

.sidebar-link i {
    width: 14px;
    font-size: .82rem;
}

.app-topbar {
    min-height: 42px;
    background: rgba(248, 251, 255, .72);
}

.topbar-search {
    width: min(100%, 188px);
    min-height: 25px;
    background: #edf3fa;
    border-color: transparent;
}

.topbar-search input {
    font-size: .64rem;
}

.topbar-icon {
    width: 25px;
    height: 25px;
    color: #17324d;
    text-decoration: none;
}

.topbar-user {
    padding-left: .45rem;
    border-left: 0;
}

.topbar-avatar {
    width: 24px;
    height: 24px;
    background: #0056B3;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

.app-main {
    padding-top: 1rem;
    background: #ced8e3;
}

.app-statusbar {
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .25rem 1rem;
    color: #334155;
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid #c5d1de;
    font-size: .62rem;
}

.app-statusbar strong {
    color: #008b3a;
}

.app-statusbar nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-statusbar a {
    color: #334155;
    text-decoration: none;
}

.app-statusbar a:hover {
    color: #0056B3;
}

@media (min-width: 1800px) {
    .app-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .app-container {
        max-width: var(--content-max);
    }
}

@media (max-width: 992px) {
    .industrial-shell {
        grid-template-columns: 1fr;
    }

    .sidebar-brand {
        min-height: auto;
    }

    .app-statusbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    :root {
        --app-gutter: 16px;
    }

    .app-main {
        padding: 16px;
    }

    .app-sidebar {
        gap: .8rem;
        padding: .75rem;
    }

    .sidebar-nav {
        gap: .25rem;
    }

    .sidebar-link {
        min-width: max-content;
    }
}

@media (max-width: 420px) {
    :root {
        --app-gutter: 12px;
    }

    .app-main {
        padding: 12px;
    }

    .app-topbar {
        justify-content: flex-end;
        padding-inline: .55rem;
    }

    .topbar-actions {
        gap: .25rem;
    }

    .app-statusbar nav {
        flex-wrap: wrap;
        gap: .55rem;
    }
}

/* ==========================================================================
   DESIGN.md alignment: Industrial Precision system
   ========================================================================== */
:root {
    --ds-surface: #fbf8ff;
    --ds-surface-dim: #dad9e4;
    --ds-surface-container-lowest: #ffffff;
    --ds-surface-container-low: #f4f2fe;
    --ds-surface-container: #eeedf8;
    --ds-surface-container-high: #e8e7f2;
    --ds-surface-container-highest: #e3e1ed;
    --ds-on-surface: #1a1b23;
    --ds-on-surface-variant: #444654;
    --ds-outline: #757686;
    --ds-outline-variant: #c5c5d7;
    --ds-action: #536aee;
    --ds-primary: #00187b;
    --ds-primary-container: #0127b3;
    --ds-secondary: #525b8f;
    --ds-secondary-container: #bac3fe;
    --ds-tertiary: #7d1000;
    --ds-error: #ba1a1a;
    --ds-error-container: #ffdad6;
    --primary: var(--ds-action);
    --primary-dark: var(--ds-primary);
    --primary-soft: #dee0ff;
    --secondary: var(--ds-secondary);
    --tertiary: var(--ds-tertiary);
    --bg-app: var(--ds-surface);
    --surface: var(--ds-surface-container-lowest);
    --surface-muted: var(--ds-surface-container-low);
    --border: var(--ds-outline-variant);
    --border-strong: var(--ds-outline);
    --text-main: var(--ds-on-surface);
    --text-muted: var(--ds-on-surface-variant);
    --radius-sm: .5rem;
    --radius-md: .5rem;
    --shadow-sm: 0 1px 2px rgba(26, 27, 35, .06);
    --shadow-md: 0 4px 12px rgba(26, 27, 35, .08);
    --content-max: 1440px;
}

html {
    background: var(--ds-surface);
}

body {
    color: var(--ds-on-surface);
    background: var(--ds-surface);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

body.app-shell {
    color: var(--ds-on-surface);
    background: var(--ds-surface);
}

body.app-shell::before {
    background-image: radial-gradient(rgba(117, 118, 134, .32) 1px, transparent 1px);
    opacity: .35;
}

.industrial-shell {
    grid-template-columns: 168px minmax(0, 1fr);
}

.app-sidebar {
    background: var(--ds-surface-container-low);
    border-right-color: var(--ds-outline-variant);
}

.sidebar-brand-title,
.view-title,
.index-title {
    color: var(--ds-on-surface);
    letter-spacing: 0;
}

.sidebar-brand-subtitle,
.view-subtitle,
.index-subtitle {
    color: var(--ds-on-surface-variant);
}

.sidebar-link {
    min-height: 32px;
    color: var(--ds-on-surface-variant);
    border-radius: .5rem;
}

.sidebar-link:hover {
    color: var(--ds-primary);
    background: var(--ds-secondary-container);
}

.sidebar-link.active {
    color: #ffffff;
    background: var(--ds-action);
    box-shadow: 0 4px 12px rgba(83, 106, 238, .22);
}

.app-topbar {
    min-height: 44px;
    background: rgba(251, 248, 255, .88);
    border-bottom-color: var(--ds-outline-variant);
}

.topbar-search {
    min-height: 32px;
    background: var(--ds-surface-container-low);
    border: 1px solid var(--ds-outline-variant);
    border-radius: 9999px;
}

.topbar-icon {
    color: var(--ds-on-surface-variant);
}

.topbar-icon:hover {
    color: var(--ds-primary);
    background: var(--ds-secondary-container);
}

.topbar-avatar {
    background: var(--ds-action);
}

.app-main {
    background: var(--ds-surface-dim);
}

.app-container {
    max-width: var(--content-max);
}

.app-statusbar {
    color: var(--ds-on-surface-variant);
    background: var(--ds-surface-container-lowest);
    border-top-color: var(--ds-outline-variant);
}

.app-statusbar strong {
    color: var(--ds-primary-container);
}

.card,
.content-panel,
.trim-entry-card,
.table-responsive,
.metric-card,
.module-card {
    background: var(--ds-surface-container-lowest);
    border-color: var(--ds-outline-variant);
    border-radius: .5rem;
    box-shadow: var(--shadow-sm);
}

.panel-heading,
.panel-heading-primary,
.panel-heading-dark {
    color: var(--ds-on-surface);
    background: var(--ds-surface-container-high);
    border-bottom-color: var(--ds-outline-variant);
    border-radius: .5rem .5rem 0 0;
}

.panel-heading-warning {
    color: var(--ds-tertiary);
    background: var(--ds-error-container);
}

.form-label {
    color: var(--ds-on-surface);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .05em;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px;
    color: var(--ds-on-surface);
    background-color: var(--ds-surface-container-lowest) !important;
    border-color: var(--ds-outline) !important;
    border-radius: .5rem !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--ds-action) !important;
    box-shadow: 0 0 0 2px rgba(83, 106, 238, .22) !important;
}

.btn,
.btn-action {
    min-height: 40px;
    border-radius: .5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary,
.btn-action {
    color: #ffffff;
    background-color: var(--ds-action);
    border-color: var(--ds-action);
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-action:hover,
.btn-action:focus {
    color: #ffffff;
    background-color: var(--ds-primary);
    border-color: var(--ds-primary);
}

.btn-outline-primary,
.btn-outline-secondary {
    color: var(--ds-secondary);
    background: var(--ds-surface-container-lowest);
    border-color: var(--ds-outline-variant);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    color: #ffffff;
    background: var(--ds-action);
    border-color: var(--ds-action);
}

.table {
    font-variant-numeric: tabular-nums;
}

.table thead th,
.table-trims thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--ds-on-surface);
    background: var(--ds-surface-container-high);
    border-bottom: 1px solid var(--ds-outline-variant);
    padding: 8px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .05em;
}

.table td,
.table-trims td {
    padding: 8px;
    border-bottom-color: var(--ds-outline-variant);
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table tbody tr:nth-child(even),
.table-trims tbody tr:nth-child(even) {
    background-color: rgba(244, 242, 254, .62);
}

.table-hover tbody tr:hover,
.table-trims tbody tr:hover {
    background-color: var(--ds-surface-container-high);
}

.badge-soft-primary {
    color: var(--ds-primary);
    background: var(--ds-secondary-container);
    border-color: rgba(83, 106, 238, .26);
}

.size-entry-tile,
.total-entry-tile {
    border-radius: .5rem;
}

.size-entry-tile.has-value,
.size-entry-tile:hover {
    background: var(--ds-secondary-container);
    border-color: var(--ds-action);
    box-shadow: 0 0 0 2px rgba(83, 106, 238, .18);
}

.total-entry-tile {
    background: var(--ds-secondary-container);
    border-color: var(--ds-action);
}

@media (max-width: 992px) {
    .industrial-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    .sidebar-brand {
        min-width: 132px;
    }

    .sidebar-nav {
        flex-direction: row;
        min-width: max-content;
    }

    .sidebar-footer {
        display: none;
    }
}

@media (max-width: 768px) {
    .app-main {
        padding: 16px;
    }
}

@media (max-width: 420px) {
    body {
        font-size: 14px;
    }

    .app-main {
        padding: 12px;
    }

    .view-title {
        font-size: 1.35rem;
    }
}

/* ==========================================================================
   Modern Data Tables
   ========================================================================== */
.hero-header {
    color: var(--ds-on-surface);
    background: var(--ds-surface-container-lowest);
    border: 1px solid var(--ds-outline-variant);
    border-radius: .5rem;
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.hero-header h2 {
    color: var(--ds-on-surface);
    font-size: 1.5rem;
    line-height: 2rem;
}

.hero-header small,
.hero-header .text-white-50 {
    color: var(--ds-on-surface-variant) !important;
}

.hero-header .small {
    color: var(--ds-on-surface-variant);
}

.hero-header .btn-light {
    color: #ffffff !important;
    background: var(--ds-action);
    border-color: var(--ds-action);
}

.hero-header .btn-outline-light {
    color: var(--ds-secondary);
    background: var(--ds-surface-container-lowest);
    border-color: var(--ds-outline-variant);
}

.hero-header .btn-outline-light:hover {
    color: #ffffff;
    background: var(--ds-action);
    border-color: var(--ds-action);
}

.card:has(.table-responsive) {
    padding: 0;
    overflow: hidden;
    background: var(--ds-surface-container-lowest);
}

.table-responsive {
    background:
        linear-gradient(90deg, rgba(251, 248, 255, 1), rgba(251, 248, 255, 0)) left top / 18px 100% no-repeat,
        linear-gradient(270deg, rgba(251, 248, 255, 1), rgba(251, 248, 255, 0)) right top / 18px 100% no-repeat,
        var(--ds-surface-container-lowest);
    border: 1px solid var(--ds-outline-variant);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(26, 27, 35, .06);
    scrollbar-color: var(--ds-outline) var(--ds-surface-container-low);
    scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--ds-surface-container-low);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--ds-outline);
    border: 2px solid var(--ds-surface-container-low);
    border-radius: 9999px;
}

.table,
.table-base,
.table-trims,
.pulled-table {
    width: 100%;
    margin: 0;
    color: var(--ds-on-surface);
    background: var(--ds-surface-container-lowest);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.table > :not(caption) > * > *,
.table-base th,
.table-base td,
.table-trims th,
.table-trims td,
.pulled-table th,
.pulled-table td {
    border: 0;
    border-bottom: 1px solid var(--ds-outline-variant);
}

.table thead th,
.table-base thead th,
.table-trims thead th,
.pulled-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 40px;
    color: var(--ds-on-surface) !important;
    background: var(--ds-surface-container-highest) !important;
    border-bottom: 1px solid var(--ds-outline);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td,
.table-base td,
.table-trims td,
.pulled-table td {
    color: var(--ds-on-surface);
    background: var(--ds-surface-container-lowest);
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.table tbody tr:nth-child(even) td,
.table-base tbody tr:nth-child(even) td,
.table-trims tbody tr:nth-child(even) td,
.pulled-table tbody tr:nth-child(even) td {
    background: rgba(244, 242, 254, .58) !important;
}

.table-hover tbody tr:hover > *,
.table tbody tr:hover td,
.table-base tbody tr:hover td,
.table-trims tbody tr:hover td,
.pulled-table tbody tr:hover td {
    background: var(--ds-surface-container-high) !important;
}

.table tbody tr:last-child td,
.table-base tbody tr:last-child td,
.table-trims tbody tr:last-child td,
.pulled-table tbody tr:last-child td {
    border-bottom: 0;
}

.table td:first-child,
.table-base td:first-child,
.table-trims td:first-child,
.pulled-table td:first-child {
    font-weight: 700;
}

.sticky-desc,
.sticky-order {
    left: 0;
    z-index: 6;
    color: var(--ds-on-surface) !important;
    background: var(--ds-surface-container-lowest) !important;
    border-right: 1px solid var(--ds-outline-variant) !important;
    box-shadow: 8px 0 16px rgba(26, 27, 35, .04);
}

thead .sticky-desc,
thead .sticky-order {
    z-index: 8;
    background: var(--ds-surface-container-highest) !important;
}

.section-entry,
.table-trims thead .section-entry {
    color: #00531a !important;
    background: #d8ffd8 !important;
}

.section-exit,
.table-trims thead .section-exit {
    color: var(--ds-tertiary) !important;
    background: var(--ds-error-container) !important;
}

.section-stock,
.table-trims thead .section-stock {
    color: var(--ds-primary) !important;
    background: var(--ds-secondary-container) !important;
}

.size-head,
.pulled-table thead .size-head {
    color: #ffffff !important;
    background: var(--ds-action) !important;
}

.holo-head,
.pulled-table thead .holo-head {
    color: #ffffff !important;
    background: var(--ds-tertiary) !important;
}

.status-pill {
    min-width: 72px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.status-dot {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ds-surface-container-lowest);
    box-shadow: 0 0 0 1px var(--ds-outline-variant);
}

.dot-active {
    background: var(--ds-action);
}

.dot-complete {
    background: #16883a;
}

.status-paperwork,
.status-pulled {
    color: var(--ds-secondary);
    background: var(--ds-surface-container-low);
    border-color: var(--ds-outline-variant);
}

.status-partial,
.status-neck {
    color: #8b4b00;
    background: #fff2cf;
    border-color: #ffd98a;
}

.status-complete {
    color: #00531a;
    background: #d8ffd8;
    border-color: #87d891;
}

.status-prod,
.status-trims {
    color: var(--ds-primary);
    background: var(--ds-secondary-container);
    border-color: rgba(83, 106, 238, .26);
}

.status-packing,
.status-shipping {
    color: var(--ds-tertiary);
    background: var(--ds-error-container);
    border-color: rgba(125, 16, 0, .22);
}

.status-inactive {
    color: var(--ds-on-surface-variant);
    background: var(--ds-surface-container);
    border-color: var(--ds-outline-variant);
}

.action-btn,
.table td .btn-link {
    width: 34px;
    height: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-secondary) !important;
    background: var(--ds-surface-container-lowest);
    border: 1px solid var(--ds-outline-variant);
    border-radius: .5rem;
    padding: 0;
    text-decoration: none !important;
}

.action-btn:hover,
.table td .btn-link:hover {
    color: #ffffff !important;
    background: var(--ds-action);
    border-color: var(--ds-action);
    transform: translateY(-1px);
}

.table td .text-danger,
.table td .btn-link.text-danger {
    color: var(--ds-tertiary) !important;
}

.table td .btn-link.text-danger:hover {
    color: #ffffff !important;
    background: var(--ds-tertiary);
    border-color: var(--ds-tertiary);
}

.pagination {
    gap: 6px;
}

.page-link {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-secondary);
    background: var(--ds-surface-container-lowest);
    border: 1px solid var(--ds-outline-variant);
    border-radius: .5rem !important;
}

.page-link:hover,
.page-item.active .page-link {
    color: #ffffff;
    background: var(--ds-action);
    border-color: var(--ds-action);
}

.page-item.disabled .page-link {
    color: var(--ds-outline);
    background: var(--ds-surface-container-low);
}

@media (max-width: 768px) {
    .table,
    .table-base,
    .table-trims,
    .pulled-table {
        font-size: 13px;
    }

    .table thead th,
    .table-base thead th,
    .table-trims thead th,
    .pulled-table thead th,
    .table td,
    .table-base td,
    .table-trims td,
    .pulled-table td {
        padding: 8px 10px;
    }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ==========================================================================
   App-wide visual refresh
   ========================================================================== */
:root {
    --ui-bg: #f6f8fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-border: #d8e1ec;
    --ui-border-strong: #b9c7d8;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-primary: #1d4ed8;
    --ui-primary-dark: #1e40af;
    --ui-success: #15803d;
    --ui-vidal: #0f766e;
    --ui-vidal-dark: #115e59;
    --ui-danger: #b91c1c;
    --ui-radius: 8px;
    --ui-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);
}

body.app-shell {
    color: var(--ui-text) !important;
    background: var(--ui-bg) !important;
}

.industrial-shell {
    min-height: 100vh;
    background: var(--ui-bg) !important;
}

.app-workspace,
.app-main,
.app-container {
    background: var(--ui-bg) !important;
}

.app-container {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
}

.app-sidebar {
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 6px 0 22px rgba(15, 23, 42, .04);
}

.sidebar-brand {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--ui-border);
}

.sidebar-link {
    min-height: 42px;
    margin: 2px 8px;
    padding: .62rem .85rem !important;
    border-radius: 7px;
    border-right: 0 !important;
    gap: .65rem;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
}

.sidebar-link.active,
.sidebar-link.active:hover,
.sidebar-link:focus-visible {
    color: var(--ui-primary) !important;
    background: #eaf1ff !important;
    box-shadow: inset 3px 0 0 var(--ui-primary);
}

.app-topbar {
    min-height: 64px;
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid var(--ui-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    backdrop-filter: blur(12px);
}

.topbar-search {
    max-width: 520px;
    background: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
}

.topbar-search input {
    min-height: 38px;
}

.topbar-icon,
.topbar-active-users,
.sidebar-logout {
    border-radius: 8px !important;
}

.topbar-icon:hover,
.topbar-active-users:hover {
    background: #eef4ff !important;
    color: var(--ui-primary) !important;
}

.card,
.compact-card,
.narrow-card,
.trim-entry-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

.card > .card-body {
    padding: 16px !important;
}

.card-header,
.card-footer {
    border-color: var(--ui-border) !important;
}

.btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 7px !important;
    font-weight: 700;
    line-height: 1.15;
}

.btn-sm {
    min-height: 31px;
    padding: .32rem .55rem;
}

.btn-primary {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

.btn-primary:hover {
    background: var(--ui-primary-dark) !important;
    border-color: var(--ui-primary-dark) !important;
}

.btn-success {
    background: var(--ui-success) !important;
    border-color: var(--ui-success) !important;
}

.btn-outline-secondary {
    color: #475569 !important;
    background: #ffffff !important;
    border-color: var(--ui-border-strong) !important;
}

.btn-outline-secondary:hover {
    color: var(--ui-text) !important;
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.form-label {
    color: #334155 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px !important;
    border-color: var(--ui-border-strong) !important;
    border-radius: 7px !important;
    color: var(--ui-text) !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 .18rem rgba(29, 78, 216, .16) !important;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.nav-tabs {
    gap: .25rem;
    border-bottom: 1px solid var(--ui-border);
}

.nav-tabs .nav-link {
    min-height: 36px;
    color: #475569;
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
    font-weight: 800;
}

.nav-tabs .nav-link:hover {
    color: var(--ui-primary);
    border-color: var(--ui-border);
    background: #f8fafc;
}

.nav-tabs .nav-link.active {
    color: var(--ui-primary);
    background: #ffffff;
    border-color: var(--ui-border) var(--ui-border) #ffffff;
}

.table-responsive {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
}

.table,
.table-base,
.table-trims,
.pulled-table {
    font-size: 13px !important;
}

.table thead th,
.table-base thead th,
.table-trims thead th,
.pulled-table thead th {
    padding: 8px 10px !important;
    font-size: 11px !important;
    line-height: 15px !important;
}

.table td,
.table-base td,
.table-trims td,
.pulled-table td {
    padding: 7px 10px !important;
    line-height: 18px !important;
}

.table .btn,
.table-base .btn,
.table-trims .btn,
.pulled-table .btn {
    min-height: 29px;
}

.modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.modal-header {
    min-height: 56px;
    background: #ffffff;
    border-bottom: 1px solid var(--ui-border);
}

.modal-title {
    color: var(--ui-text);
    font-size: 1rem;
}

.modal-body {
    background: #ffffff;
}

.alert {
    padding: .75rem .9rem;
    border-radius: var(--ui-radius) !important;
}

.vidal-card {
    border-top: 4px solid var(--ui-vidal) !important;
}

.text-vidal {
    color: var(--ui-vidal) !important;
}

.btn-vidal {
    color: #ffffff !important;
    background-color: var(--ui-vidal) !important;
    border-color: var(--ui-vidal) !important;
}

.btn-vidal:hover,
.btn-vidal:focus {
    color: #ffffff !important;
    background-color: var(--ui-vidal-dark) !important;
    border-color: var(--ui-vidal-dark) !important;
}

.btn-outline-vidal {
    color: var(--ui-vidal) !important;
    background: #ffffff !important;
    border-color: var(--ui-vidal) !important;
}

.btn-outline-vidal:hover,
.btn-outline-vidal:focus {
    color: #ffffff !important;
    background: var(--ui-vidal) !important;
    border-color: var(--ui-vidal) !important;
}

.blanks-page {
    padding: 12px !important;
}

.blanks-index-card {
    overflow: hidden;
}

.blanks-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: 14px;
}

.blanks-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
}

.blanks-toolbar .btn {
    margin-right: 0 !important;
}

.create-entry-modal-header {
    border-top: 4px solid var(--ui-success);
}

.create-entry-modal-header.is-vidal {
    border-top-color: var(--ui-vidal);
}

.create-entry-frame {
    width: 100%;
    height: min(78vh, 860px);
    border: 0;
    display: block;
    background: #ffffff;
}

.container-fluid > .card {
    max-width: 100%;
}

@media (max-width: 992px) {
    .blanks-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .blanks-toolbar {
        justify-content: flex-start;
    }

    .blanks-toolbar .btn {
        flex: 1 1 180px;
    }
}

@media (max-width: 768px) {
    .app-container {
        padding-top: 10px !important;
    }

    .card > .card-body {
        padding: 12px !important;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .create-entry-frame {
        height: 82vh;
    }
}

/* Home dashboard refinements */
.dashboard-core {
    padding-top: 12px !important;
}

.index-hero {
    align-items: center !important;
    padding: 4px 0 10px !important;
    margin-bottom: 10px !important;
}

.index-title {
    letter-spacing: 0 !important;
}

.metric-strip {
    gap: .65rem !important;
    margin-bottom: .85rem !important;
}

.metric-card {
    min-height: 58px !important;
    padding: .65rem .85rem !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

.department-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: .85rem !important;
}

.department-card {
    min-height: 230px !important;
    gap: .85rem !important;
    padding: .9rem !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

.department-card:hover {
    border-color: color-mix(in srgb, var(--module-color, var(--ui-primary)) 42%, var(--ui-border)) !important;
    transform: translateY(-1px);
}

.department-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
}

.department-view-list {
    gap: .45rem !important;
}

.department-view-link {
    min-height: 52px !important;
    grid-template-columns: 32px minmax(0, 1fr) 18px !important;
    gap: .58rem !important;
    padding: .55rem .65rem !important;
    border-color: var(--ui-border) !important;
}

.department-view-icon {
    width: 32px !important;
    height: 32px !important;
}

.department-view-text strong {
    font-size: .82rem !important;
}

.department-view-text small {
    font-size: .67rem !important;
}

@media (max-width: 420px) {
    .department-grid {
        grid-template-columns: 1fr !important;
    }

    .department-card {
        min-height: 0 !important;
    }
}