/* PROJECT visual polish layer
   This file is intentionally loaded last. It improves the whole app without
   changing view structure. */

:root {
    --app-bg: #f6f8fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-border: #e0e7f0;
    --app-border-strong: #c5d0df;
    --app-text: #101828;
    --app-text-soft: #344054;
    --app-muted: #667085;
    --app-primary: var(--primary-blue, #0046ff);
    --app-primary-dark: var(--primary-dark, #0030b8);
    --app-primary-soft: #edf3ff;
    --app-radius: 8px;
    --app-shadow: 0 10px 24px rgba(16, 24, 40, .06);
    --app-shadow-strong: 0 18px 40px rgba(16, 24, 40, .10);
    --app-focus: 0 0 0 .2rem rgba(var(--primary-rgb, 0, 70, 255), .14);
}

/* Soporte de zoom del navegador: evitar cortes horizontales */
html {
    overflow-x: hidden;
}

body.app-shell {
    overflow-x: hidden;
    min-width: 320px;
}

/* ============================================
   SOLO pantallas grandes (2K / 4K / PC grandes)
   - No afecta móvil ni tablet
   - Mantiene el diseño responsive original
   ============================================ */
@media (min-width: 1600px) {
    body.app-shell .app-main {
        padding-left: clamp(1rem, 2vw, 2.5rem);
        padding-right: clamp(1rem, 2vw, 2.5rem);
    }

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

    /* Quitar límites de max-width específicos solo en pantallas grandes */
    body.app-shell .blanks-hero,
    body.app-shell .blanks-summary-grid,
    body.app-shell .blanks-action-grid,
    body.app-shell .blanks-dashboard-grid,
    body.app-shell .inventory-clean-shell,
    body.app-shell .ld-header,
    body.app-shell .ld-summary,
    body.app-shell .ld-inventory,
    body.app-shell .pb-content {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

@media (min-width: 2200px) {
    body.app-shell .app-main {
        padding-left: clamp(1.5rem, 3vw, 4rem);
        padding-right: clamp(1.5rem, 3vw, 4rem);
    }

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

html,
body,
body.app-shell {
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb, 0, 70, 255), .055), transparent 34rem),
        linear-gradient(180deg, #fbfcff 0, var(--app-bg) 24rem) !important;
    color: var(--app-text) !important;
    font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.app-shell * {
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.app-shell .app-main,
body.app-shell .app-container,
body.app-shell .page-wrapper,
body.app-shell .dashboard-core,
body.app-shell .page-container,
body.app-shell .container-fluid,
body.app-shell .view-shell {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-container {
    min-height: calc(100vh - 52px);
    padding: 24px clamp(16px, 2vw, 32px) 32px !important;
}

body.app-shell .app-sidebar {
    display: none !important;
}

body.app-shell .industrial-shell {
    display: block !important;
}

body.app-shell .app-workspace {
    min-height: 100vh;
}

/* Top navigation */
body.app-shell .app-topbar {
    min-height: 68px;
    padding: 0 clamp(16px, 2vw, 32px) !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(14px) !important;
}

body.app-shell .topbar-brand {
    color: #101828 !important;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .01em !important;
}

body.app-shell .topbar-brand i {
    color: var(--app-primary) !important;
    font-size: 1.35rem;
}

body.app-shell .topbar-search {
    min-height: 42px;
    width: min(35vw, 430px);
    background: #ffffff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04) !important;
}

body.app-shell .topbar-search input {
    color: var(--app-text) !important;
    font-weight: 600;
}

body.app-shell .topbar-search input::placeholder {
    color: #667085 !important;
    opacity: 1 !important;
}

body.app-shell .topbar-icon,
body.app-shell .theme-picker,
body.app-shell .topbar-active-users {
    min-height: 40px;
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--app-border) !important;
    background: #ffffff !important;
    color: #344054 !important;
    box-shadow: none !important;
}

body.app-shell .topbar-icon:hover,
body.app-shell .theme-picker:hover,
body.app-shell .topbar-active-users:hover {
    color: var(--app-primary) !important;
    border-color: #abc0ff !important;
    background: #f8fbff !important;
}

body.app-shell .topbar-avatar {
    background: #f2f4f7 !important;
    color: #344054 !important;
    border: 1px solid #d8e0eb !important;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .08) !important;
}

/* Typography */
body.app-shell h1,
body.app-shell h2,
body.app-shell h3,
body.app-shell h4,
body.app-shell h5,
body.app-shell h6,
body.app-shell .index-title,
body.app-shell .page-heading h4,
body.app-shell .modal-title {
    color: var(--app-text) !important;
    font-weight: 850 !important;
    line-height: 1.2;
}

body.app-shell h1,
body.app-shell .index-title {
    font-size: clamp(1.55rem, 1.4vw + 1rem, 2rem) !important;
}

body.app-shell h2,
body.app-shell .page-heading h4 {
    font-size: clamp(1.25rem, .9vw + .9rem, 1.55rem) !important;
}

body.app-shell p,
body.app-shell small,
body.app-shell .text-muted,
body.app-shell .index-subtitle,
body.app-shell .module-count,
body.app-shell .card-subtitle {
    color: var(--app-muted) !important;
}

body.app-shell strong,
body.app-shell .fw-bold,
body.app-shell .fw-semibold {
    color: inherit;
}

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

body.app-shell .text-success {
    color: #15803d !important;
}

body.app-shell .text-danger {
    color: #b42318 !important;
}

body.app-shell .text-warning {
    color: #b54708 !important;
}

body.app-shell .text-info {
    color: #0369a1 !important;
}

/* Cards and page panels */
body.app-shell .card,
body.app-shell .compact-card,
body.app-shell .narrow-card,
body.app-shell .trim-entry-card,
body.app-shell .department-card,
body.app-shell .module-card,
body.app-shell .metric-card,
body.app-shell .content-panel,
body.app-shell .table-card,
body.app-shell .page-heading,
body.app-shell .modern-card,
body.app-shell .vidal-kpi,
body.app-shell .vidal-shortcut-card,
body.app-shell .blanks-index-card,
body.app-shell .blanks-summary-card,
body.app-shell .blanks-action-card,
body.app-shell .blanks-modern-panel {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
    overflow: hidden;
}

body.app-shell .card,
body.app-shell .content-panel,
body.app-shell .table-card,
body.app-shell .modern-card {
    padding: clamp(1rem, 1.1vw, 1.25rem);
}

body.app-shell .card:hover,
body.app-shell .department-card:hover,
body.app-shell .module-card:hover,
body.app-shell .vidal-shortcut-card:hover,
body.app-shell .blanks-action-card:hover {
    border-color: color-mix(in srgb, var(--app-primary) 34%, var(--app-border)) !important;
    box-shadow: var(--app-shadow-strong) !important;
    transform: translateY(-1px);
}

body.app-shell .card-header,
body.app-shell .card-footer,
body.app-shell .modal-header,
body.app-shell .modal-footer,
body.app-shell .vidal-panel-header {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}

body.app-shell .hero-header,
body.app-shell .production-hero,
body.app-shell .blanks-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, 1)),
        radial-gradient(circle at top right, rgba(var(--primary-rgb, 0, 70, 255), .08), transparent 22rem) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    border-left: 0 !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .hero-header h1,
body.app-shell .hero-header h2,
body.app-shell .hero-header h3,
body.app-shell .hero-header small,
body.app-shell .hero-header .small,
body.app-shell .hero-header .text-white-50 {
    color: var(--app-text) !important;
}

body.app-shell .hero-header small,
body.app-shell .hero-header .text-white-50 {
    color: var(--app-muted) !important;
}

/* Tables */
body.app-shell .table-responsive {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    overflow: auto !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .05) !important;
}

body.app-shell .card .table-responsive,
body.app-shell .blanks-modern-table {
    border-width: 0 !important;
    border-radius: var(--app-radius) !important;
}

body.app-shell .table,
body.app-shell .table-base,
body.app-shell .table-trims,
body.app-shell .pulled-table,
body.app-shell .modern-table {
    --bs-table-bg: #ffffff;
    --bs-table-color: #172033;
    --bs-table-striped-bg: #f8fbff;
    --bs-table-striped-color: #172033;
    --bs-table-hover-bg: #eef4ff;
    --bs-table-hover-color: #111827;
    --bs-table-border-color: #e4eaf3;
    width: 100%;
    margin-bottom: 0;
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #e4eaf3 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem !important;
    line-height: 1.42 !important;
}

body.app-shell .table thead th,
body.app-shell .table-base thead th,
body.app-shell .table-trims thead th,
body.app-shell .pulled-table thead th,
body.app-shell .modern-table thead th {
    height: 42px;
    padding: .68rem .82rem !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #104db8, #073b97) !important;
    border-color: #07347f !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-shell .table td,
body.app-shell .table th,
body.app-shell .table-base td,
body.app-shell .table-trims td,
body.app-shell .pulled-table td,
body.app-shell .modern-table td {
    padding: .68rem .82rem !important;
    color: #26364d !important;
    background-color: #ffffff !important;
    border-color: #e4eaf3 !important;
    vertical-align: middle !important;
}

body.app-shell .table tbody tr:nth-child(even) td,
body.app-shell .table-base tbody tr:nth-child(even) td,
body.app-shell .table-trims tbody tr:nth-child(even) td,
body.app-shell .pulled-table tbody tr:nth-child(even) td,
body.app-shell .modern-table tbody tr:nth-child(even) td {
    background: #f8fbff !important;
}

body.app-shell .table-hover tbody tr:hover > *,
body.app-shell .table tbody tr:hover td,
body.app-shell .table-base tbody tr:hover td,
body.app-shell .table-trims tbody tr:hover td,
body.app-shell .pulled-table tbody tr:hover td,
body.app-shell .modern-table tbody tr:hover td {
    color: #111827 !important;
    background: #eef4ff !important;
}

body.app-shell .table caption,
body.app-shell .table .small,
body.app-shell .table small {
    color: #667085 !important;
}

body.app-shell .table td:first-child,
body.app-shell .table-base td:first-child,
body.app-shell .table-trims td:first-child,
body.app-shell .pulled-table td:first-child {
    color: #172033 !important;
    font-weight: 750;
}

body.app-shell .table .text-primary,
body.app-shell .table td.fw-bold.text-primary {
    color: var(--app-primary) !important;
}

body.app-shell .table .text-success,
body.app-shell .table td.text-success,
body.app-shell .table td .text-success {
    color: #15803d !important;
}

body.app-shell .table .text-danger,
body.app-shell .table td.text-danger,
body.app-shell .table td .text-danger {
    color: #b42318 !important;
}

body.app-shell .table .text-warning,
body.app-shell .table td.text-warning,
body.app-shell .table td .text-warning {
    color: #b54708 !important;
}

body.app-shell .table .text-info,
body.app-shell .table td.text-info,
body.app-shell .table td .text-info {
    color: #0369a1 !important;
}

/* Forms */
body.app-shell .form-control,
body.app-shell .form-select,
body.app-shell textarea,
body.app-shell input,
body.app-shell select,
body.app-shell .select2-container--bootstrap-5 .select2-selection {
    min-height: 42px;
    color: #172033 !important;
    background-color: #ffffff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
    font-weight: 600;
}

body.app-shell .form-control:focus,
body.app-shell .form-select:focus,
body.app-shell textarea:focus,
body.app-shell input:focus,
body.app-shell select:focus {
    border-color: var(--app-primary) !important;
    box-shadow: var(--app-focus) !important;
}

body.app-shell input::placeholder,
body.app-shell textarea::placeholder {
    color: #667085 !important;
    opacity: 1 !important;
}

/* Buttons */
body.app-shell .btn,
body.app-shell .btn-action,
body.app-shell .action-btn,
body.app-shell .blanks-soft-btn,
body.app-shell .blanks-row-btn,
body.app-shell .page-btn {
    min-height: 31px;
    min-width: 0;
    padding: .38rem .62rem;
    border-radius: var(--app-radius) !important;
    font-size: .76rem !important;
    font-weight: 750 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: visible;
}

body.app-shell .btn-sm,
body.app-shell .btn-group-sm > .btn {
    min-height: 28px;
    font-size: .68rem !important;
    padding: .28rem .5rem !important;
}

body.app-shell .btn-lg,
body.app-shell .btn-group-lg > .btn {
    min-height: 36px;
    font-size: .82rem !important;
}

body.app-shell .btn.py-0,
body.app-shell .btn-sm.py-0 {
    min-height: 26px;
}

body.app-shell .btn.px-1,
body.app-shell .btn-sm.px-1 {
    padding-left: .38rem !important;
    padding-right: .38rem !important;
}

body.app-shell .btn i,
body.app-shell .btn .bi,
body.app-shell .btn-action i,
body.app-shell .action-btn i,
body.app-shell .blanks-soft-btn i,
body.app-shell .blanks-row-btn i,
body.app-shell .page-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1em;
    line-height: 1;
}

body.app-shell .btn-sm i,
body.app-shell .btn-sm .bi {
    font-size: .82rem;
}

body.app-shell .action-btn,
body.app-shell .btn-action,
body.app-shell .page-btn {
    min-width: 30px;
    padding-inline: .35rem !important;
}

body.app-shell .action-btn,
body.app-shell .btn-action {
    aspect-ratio: 1 / 1;
}

body.app-shell .btn.w-100 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 36px;
    font-size: .78rem !important;
    height: auto;
    aspect-ratio: auto !important;
    padding-block: .5rem;
    padding-inline: .8rem !important;
}

body.app-shell .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 24px;
    padding-left: 1.5rem; /* Bootstrap 5 default */
}

body.app-shell .form-check .form-check-input {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 1.125rem;
    margin: 0;
    margin-top: 0;
    cursor: pointer;
}

body.app-shell .form-check .form-check-input:checked {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='white' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

body.app-shell .form-check .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 0, 70, 255), 0.2);
    border-color: var(--app-primary);
}

body.app-shell .form-check .form-check-label {
    margin: 0;
    line-height: 1.25;
    color: var(--app-text-soft);
    font-weight: 650;
    cursor: pointer;
}

body.app-shell .table .btn,
body.app-shell .table-base .btn,
body.app-shell .table-trims .btn,
body.app-shell .pulled-table .btn,
body.app-shell .modern-table .btn {
    min-width: 34px;
    max-width: none;
    font-size: .68rem !important;
}

body.app-shell .btn-primary,
body.app-shell .btn-success,
body.app-shell .btn-info,
body.app-shell .btn-vidal,
body.app-shell .btn-action,
body.app-shell .action-btn.btn-view {
    color: #ffffff !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-primary) 88%, #ffffff), var(--app-primary-dark)) !important;
    border-color: var(--app-primary) !important;
    box-shadow: 0 10px 20px rgba(var(--primary-rgb, 0, 70, 255), .18) !important;
}

body.app-shell .btn-primary:hover,
body.app-shell .btn-success:hover,
body.app-shell .btn-info:hover,
body.app-shell .btn-vidal:hover,
body.app-shell .btn-action:hover,
body.app-shell .action-btn.btn-view:hover {
    background: var(--app-primary-dark) !important;
    border-color: var(--app-primary-dark) !important;
}

body.app-shell .btn:hover,
body.app-shell .btn-action:hover,
body.app-shell .action-btn:hover,
body.app-shell .page-btn:hover {
    transform: translateY(-1px);
}

body.app-shell .btn-outline-primary,
body.app-shell .btn-outline-success,
body.app-shell .btn-outline-vidal,
body.app-shell .btn-outline-secondary,
body.app-shell .btn-light,
body.app-shell .btn-outline-light {
    color: var(--app-primary) !important;
    background: #ffffff !important;
    border-color: #b9c9ff !important;
}

body.app-shell .btn-outline-primary:hover,
body.app-shell .btn-outline-success:hover,
body.app-shell .btn-outline-vidal:hover,
body.app-shell .btn-outline-secondary:hover,
body.app-shell .btn-light:hover,
body.app-shell .btn-outline-light:hover {
    color: #ffffff !important;
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

body.app-shell .btn-link {
    color: var(--app-primary) !important;
    font-weight: 800;
    font-size: .74rem !important;
}

body.app-shell .input-group .btn,
body.app-shell .modal-footer .btn,
body.app-shell .card-header .btn,
body.app-shell .page-heading .btn,
body.app-shell .blanks-toolbar .btn,
body.app-shell .vidal-panel-header .btn {
    font-size: .72rem !important;
}

/* Tabs, badges, statuses */
body.app-shell .nav-tabs {
    border-color: var(--app-border) !important;
    gap: .35rem;
}

body.app-shell .nav-tabs .nav-link {
    color: #475467 !important;
    border-radius: var(--app-radius) !important;
    font-weight: 750;
    border: 1px solid transparent !important;
}

body.app-shell .nav-tabs .nav-link.active {
    color: var(--app-primary) !important;
    background: var(--app-primary-soft) !important;
    border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-border)) !important;
    border-top: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border)) !important;
}

body.app-shell .badge,
body.app-shell .status-pill {
    border-radius: var(--app-radius) !important;
    font-weight: 850 !important;
}

body.app-shell .status-pill {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .55rem;
    color: #ffffff !important;
}

body.app-shell .status-inactive {
    color: #475467 !important;
    background: #e5eaf2 !important;
}

body.app-shell .status-complete,
body.app-shell .bg-active {
    color: #ffffff !important;
    background: #15803d !important;
}

body.app-shell .bg-inactive {
    color: #ffffff !important;
    background: #b42318 !important;
}

body.app-shell .status-partial,
body.app-shell .status-neck {
    color: #53320a !important;
}

body.app-shell .status-paperwork,
body.app-shell .status-pulled,
body.app-shell .status-prod,
body.app-shell .status-trims,
body.app-shell .status-packing,
body.app-shell .status-shipping {
    color: #ffffff !important;
}

/* Modals and alerts */
body.app-shell .modal-content {
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .2) !important;
}

body.app-shell .modal-body {
    background: #ffffff !important;
}

body.app-shell .alert {
    border-radius: var(--app-radius) !important;
    border-width: 1px !important;
    font-weight: 650;
}

/* Utility refinements for dashboard pages */
body.app-shell .dashboard-grid,
body.app-shell .department-grid,
body.app-shell .module-grid,
body.app-shell .vidal-shortcut-grid,
body.app-shell .blanks-action-grid,
body.app-shell .blanks-summary-grid {
    gap: 1rem !important;
}

body.app-shell .icon-container,
body.app-shell .department-icon,
body.app-shell .summary-icon,
body.app-shell .vidal-shortcut-icon {
    border-radius: var(--app-radius) !important;
}

body.app-shell .text-truncate-sm {
    max-width: 260px;
}

@media (max-width: 768px) {
    html,
    body,
    body.app-shell {
        width: 100%;
        overflow-x: hidden;
    }

    body.app-shell .app-topbar {
        min-height: auto;
        flex-wrap: wrap;
        align-items: center;
        gap: .65rem;
        padding: .75rem .85rem !important;
    }

    body.app-shell .topbar-brand {
        min-width: 0;
        max-width: calc(100vw - 1.7rem);
        font-size: 1rem;
    }

    body.app-shell .topbar-brand img {
        width: 28px !important;
        height: 28px !important;
        margin-right: 4px !important;
        flex: 0 0 auto;
    }

    body.app-shell .topbar-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-shell .topbar-search {
        order: 3;
        display: flex !important;
        width: 100%;
        min-height: 40px;
    }

    body.app-shell .topbar-actions {
        width: 100%;
        order: 2;
        display: flex;
        align-items: center;
        gap: .45rem;
        overflow-x: auto;
        padding-bottom: .15rem;
        scrollbar-width: thin;
    }

    body.app-shell .topbar-actions > * {
        flex: 0 0 auto;
    }

    body.app-shell .theme-picker {
        width: 136px;
        max-width: 42vw;
    }

    body.app-shell .topbar-icon,
    body.app-shell .topbar-active-users,
    body.app-shell .topbar-avatar {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0 !important;
    }

    body.app-shell .topbar-active-users span,
    body.app-shell .topbar-user-text {
        display: none !important;
    }

    body.app-shell .app-container {
        padding: 12px !important;
    }

    body.app-shell .page-wrapper,
    body.app-shell .dashboard-core,
    body.app-shell .view-shell,
    body.app-shell .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.app-shell .card,
    body.app-shell .content-panel,
    body.app-shell .table-card,
    body.app-shell .modern-card,
    body.app-shell .blanks-modern-panel,
    body.app-shell .vidal-dashboard-hero {
        padding: .85rem !important;
    }

    body.app-shell .table,
    body.app-shell .table-base,
    body.app-shell .table-trims,
    body.app-shell .pulled-table {
        font-size: .86rem !important;
    }

    body.app-shell .table thead th,
    body.app-shell .table td,
    body.app-shell .table th {
        padding: .58rem .62rem !important;
    }

    body.app-shell .btn,
    body.app-shell .btn-action,
    body.app-shell .action-btn,
    body.app-shell .blanks-soft-btn,
    body.app-shell .blanks-row-btn {
        min-height: 40px;
        max-width: 100%;
        white-space: nowrap;
    }

    body.app-shell .blanks-modern-heading,
    body.app-shell .vidal-dashboard-hero,
    body.app-shell .page-heading,
    body.app-shell .index-hero {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.app-shell .blanks-heading-actions,
    body.app-shell .blanks-toolbar,
    body.app-shell .vidal-panel-header,
    body.app-shell .card-header,
    body.app-shell .page-heading > div {
        flex-wrap: wrap !important;
    }

    body.app-shell .blanks-summary-grid,
    body.app-shell .blanks-action-grid,
    body.app-shell .vidal-kpi-grid,
    body.app-shell .vidal-shortcut-grid,
    body.app-shell .metric-strip,
    body.app-shell .department-grid,
    body.app-shell .module-grid {
        grid-template-columns: 1fr !important;
    }

    body.app-shell .app-statusbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
        padding: .75rem .85rem !important;
        font-size: .78rem;
    }

    body.app-shell .app-statusbar nav {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* Desktop / 2K grid normalization
   Keeps dashboard and index modules in real grids instead of collapsed mobile stacks. */
@media (min-width: 993px) {
    body.app-shell .app-container {
        padding: 28px clamp(22px, 2.4vw, 56px) 36px !important;
    }

    body.app-shell .dashboard-core,
    body.app-shell .view-shell,
    body.app-shell .shipping-dashboard-shell,
    body.app-shell .vidal-dashboard-shell {
        width: 100% !important;
        max-width: min(1840px, 100%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.app-shell .inventory-clean-shell {
        width: 100% !important;
        max-width: min(1840px, 100%) !important;
    }

    body.app-shell .department-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        align-items: stretch !important;
    }

    body.app-shell .dashboard-grid,
    body.app-shell .module-grid,
    body.app-shell .shipping-action-grid,
    body.app-shell .blanks-action-grid,
    body.app-shell .vidal-shortcut-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        align-items: stretch !important;
    }

    body.app-shell .metric-strip,
    body.app-shell .inventory-kpis,
    body.app-shell .blanks-summary-grid,
    body.app-shell .vidal-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        align-items: stretch !important;
    }

    body.app-shell .blanks-dashboard-grid,
    body.app-shell .vidal-dashboard-panels {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
    }
}

@media (min-width: 1600px) {
    body.app-shell .app-container {
        padding-left: clamp(36px, 3vw, 72px) !important;
        padding-right: clamp(36px, 3vw, 72px) !important;
    }

    body.app-shell .dashboard-core,
    body.app-shell .view-shell,
    body.app-shell .shipping-dashboard-shell,
    body.app-shell .vidal-dashboard-shell,
    body.app-shell .inventory-clean-shell {
        max-width: min(1920px, 100%) !important;
    }

    body.app-shell .department-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    }

    body.app-shell .dashboard-grid,
    body.app-shell .module-grid,
    body.app-shell .shipping-action-grid,
    body.app-shell .blanks-action-grid,
    body.app-shell .vidal-shortcut-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    body.app-shell .topbar-brand span {
        max-width: 58vw;
    }

    body.app-shell h1,
    body.app-shell .index-title {
        font-size: 1.35rem !important;
    }

    body.app-shell h2,
    body.app-shell .page-heading h4 {
        font-size: 1.15rem !important;
    }

    body.app-shell .modal-dialog {
        margin: .5rem !important;
    }

    body.app-shell .modal-content {
        max-height: calc(100vh - 1rem);
    }

    body.app-shell .modal-body {
        overflow: auto;
    }
}

/* Final compact button pass: loaded last to normalize old view-specific button sizing. */
body.app-shell .btn:not(.topbar-icon):not(.action-btn):not(.btn-action):not(.page-btn),
body.app-shell button.btn:not(.topbar-icon):not(.action-btn):not(.btn-action),
body.app-shell a.btn:not(.topbar-icon):not(.action-btn):not(.btn-action) {
    min-height: 31px !important;
    height: auto !important;
    min-width: 0 !important;
    width: auto;
    aspect-ratio: auto !important;
    padding: .36rem .62rem !important;
    font-size: .76rem !important;
    line-height: 1.12 !important;
    gap: .28rem !important;
}

body.app-shell .btn.btn-sm:not(.topbar-icon):not(.action-btn):not(.btn-action),
body.app-shell .table .btn,
body.app-shell .table-base .btn,
body.app-shell .table-trims .btn,
body.app-shell .pulled-table .btn,
body.app-shell .modern-table .btn {
    min-height: 27px !important;
    padding: .24rem .45rem !important;
    font-size: .68rem !important;
}

body.app-shell .btn.w-100:not(.topbar-icon) {
    min-height: 36px !important;
    padding: .48rem .75rem !important;
    font-size: .78rem !important;
}

body.app-shell .btn-lg:not(.topbar-icon) {
    min-height: 36px !important;
    padding: .5rem .8rem !important;
    font-size: .82rem !important;
}

@media (max-width: 768px) {
    body.app-shell .btn:not(.topbar-icon):not(.action-btn):not(.btn-action):not(.page-btn),
    body.app-shell .btn-action,
    body.app-shell .action-btn,
    body.app-shell .blanks-soft-btn,
    body.app-shell .blanks-row-btn {
        min-height: 31px !important;
        font-size: .74rem !important;
    }
}

body.app-shell .blanks-page .blanks-toolbar {
    gap: .3rem !important;
}

body.app-shell .blanks-page .blanks-toolbar .btn,
body.app-shell .blanks-page .blanks-toolbar button.btn,
body.app-shell .blanks-page .blanks-toolbar a.btn {
    flex: 0 0 auto !important;
    min-height: 26px !important;
    padding: .22rem .45rem !important;
    font-size: .66rem !important;
    line-height: 1.1 !important;
    gap: .22rem !important;
}

body.app-shell .blanks-page .blanks-toolbar .btn i,
body.app-shell .blanks-page .blanks-toolbar .btn .bi {
    font-size: .76rem !important;
}

body.app-shell .blanks-page .table .btn,
body.app-shell .blanks-page .modal .btn {
    min-height: 25px !important;
    padding: .2rem .4rem !important;
    font-size: .64rem !important;
}

@media (max-width: 992px) {
    body.app-shell .blanks-page .blanks-toolbar .btn {
        flex: 0 1 auto !important;
        width: auto !important;
    }
}

/* === PROJECT IOS POLISH STANDARD EMBED === */
/* PROJECT iOS-style polish layer
   Loaded last. Visual-only overrides; no view structure changes. */

:root {
    --ios-font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --ios-bg: #f5f7fb;
    --ios-surface: #ffffff;
    --ios-surface-2: #f8fafc;
    --ios-border: #dfe7f2;
    --ios-border-strong: #c7d3e3;
    --ios-text: #0f172a;
    --ios-text-2: #334155;
    --ios-muted: #64748b;
    --ios-radius: 8px;
    --ios-control-radius: 8px;
    --ios-shadow: 0 10px 28px rgba(15, 23, 42, .07);
    --ios-shadow-soft: 0 4px 14px rgba(15, 23, 42, .05);
    --ios-shadow-strong: 0 18px 44px rgba(15, 23, 42, .12);
    --ios-primary: var(--app-primary, var(--theme-primary, #2563eb));
    --ios-primary-rgb: var(--theme-primary-rgb, var(--primary-rgb, 37, 99, 235));
    --ios-primary-soft: color-mix(in srgb, var(--ios-primary) 12%, #ffffff);
    --ios-primary-softer: color-mix(in srgb, var(--ios-primary) 7%, #ffffff);
}

html,
body,
body.app-shell {
    min-height: 100%;
    background:
        radial-gradient(circle at 14% -10%, rgba(var(--ios-primary-rgb), .13), transparent 28rem),
        radial-gradient(circle at 88% 0%, rgba(var(--ios-primary-rgb), .08), transparent 22rem),
        linear-gradient(180deg, #fbfdff 0%, var(--ios-bg) 260px, var(--ios-bg) 100%) !important;
    color: var(--ios-text) !important;
    font-family: var(--ios-font) !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body.app-shell *,
body.app-shell *::before,
body.app-shell *::after {
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.app-shell .app-main,
body.app-shell .app-container,
body.app-shell .container,
body.app-shell .container-fluid,
body.app-shell .page-wrapper,
body.app-shell .page-container,
body.app-shell .view-shell,
body.app-shell .dashboard-core {
    background: transparent !important;
    color: var(--ios-text) !important;
}

body.app-shell .app-container {
    max-width: 100%;
    padding: 28px clamp(18px, 2.4vw, 42px) 36px !important;
}

/* Topbar */
body.app-shell .app-topbar {
    min-height: 72px !important;
    padding: 0 clamp(18px, 2.5vw, 40px) !important;
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(203, 213, 225, .78) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .035) !important;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    gap: 20px;
}

body.app-shell .topbar-brand {
    color: var(--ios-text) !important;
    font-size: 1.22rem !important;
    font-weight: 850 !important;
    gap: .55rem !important;
}

body.app-shell .topbar-brand img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px;
    padding: 5px;
    background: var(--ios-primary-softer);
    border: 1px solid color-mix(in srgb, var(--ios-primary) 22%, var(--ios-border));
    object-fit: contain;
}

body.app-shell .topbar-search {
    width: min(34vw, 440px) !important;
    min-height: 42px !important;
    background: #fff !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: var(--ios-control-radius) !important;
    box-shadow: var(--ios-shadow-soft) !important;
}

body.app-shell .topbar-search i {
    color: var(--ios-muted) !important;
}

body.app-shell .topbar-search input {
    color: var(--ios-text) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
}

body.app-shell .topbar-search input::placeholder {
    color: #7c8aa0 !important;
}

body.app-shell .topbar-actions {
    gap: .65rem !important;
}

body.app-shell .topbar-icon,
body.app-shell .theme-picker,
body.app-shell .topbar-active-users {
    min-width: 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: var(--ios-control-radius) !important;
    border: 1px solid var(--ios-border) !important;
    background: #fff !important;
    color: var(--ios-text-2) !important;
    box-shadow: var(--ios-shadow-soft) !important;
    font-size: .86rem !important;
    font-weight: 750 !important;
}

body.app-shell .theme-picker {
    width: auto !important;
    padding: .35rem 2rem .35rem .75rem !important;
}

body.app-shell .topbar-icon:hover,
body.app-shell .theme-picker:hover,
body.app-shell .topbar-active-users:hover {
    color: var(--ios-primary) !important;
    border-color: color-mix(in srgb, var(--ios-primary) 34%, var(--ios-border)) !important;
    background: var(--ios-primary-softer) !important;
    transform: translateY(-1px);
}

body.app-shell .topbar-avatar {
    width: 40px !important;
    height: 40px !important;
    background: #f2f6fb !important;
    border: 1px solid var(--ios-border) !important;
    color: var(--ios-text-2) !important;
    box-shadow: var(--ios-shadow-soft) !important;
}

body.app-shell .topbar-user-text strong {
    color: var(--ios-text) !important;
    font-size: .86rem !important;
}

/* Typography */
body.app-shell h1,
body.app-shell h2,
body.app-shell h3,
body.app-shell h4,
body.app-shell h5,
body.app-shell h6,
body.app-shell .index-title,
body.app-shell .page-heading h4,
body.app-shell .modal-title {
    color: var(--ios-text) !important;
    font-family: var(--ios-font) !important;
    font-weight: 820 !important;
    line-height: 1.15 !important;
}

body.app-shell h1,
body.app-shell .index-title {
    font-size: clamp(1.65rem, 1.2vw + 1.1rem, 2.15rem) !important;
}

body.app-shell h2,
body.app-shell .page-heading h4 {
    font-size: clamp(1.35rem, .8vw + 1rem, 1.75rem) !important;
}

body.app-shell p,
body.app-shell small,
body.app-shell .text-muted,
body.app-shell .index-subtitle,
body.app-shell .card-subtitle,
body.app-shell .module-count {
    color: var(--ios-muted) !important;
}

body.app-shell .text-primary,
body.app-shell a:not(.btn):not(.dropdown-item) {
    color: var(--ios-primary) !important;
}

/* Surfaces */
body.app-shell .card,
body.app-shell .modal-content,
body.app-shell .dropdown-menu,
body.app-shell .content-panel,
body.app-shell .table-card,
body.app-shell .modern-card,
body.app-shell .compact-card,
body.app-shell .narrow-card,
body.app-shell .department-card,
body.app-shell .module-card,
body.app-shell .metric-card,
body.app-shell .vidal-kpi,
body.app-shell .vidal-shortcut-card,
body.app-shell .blanks-index-card,
body.app-shell .blanks-summary-card,
body.app-shell .blanks-action-card,
body.app-shell .blanks-modern-panel,
body.app-shell .pallet-side-card {
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: var(--ios-radius) !important;
    box-shadow: var(--ios-shadow) !important;
    color: var(--ios-text) !important;
}

body.app-shell .card,
body.app-shell .content-panel,
body.app-shell .table-card,
body.app-shell .modern-card {
    overflow: hidden;
}

body.app-shell .card-header,
body.app-shell .card-footer,
body.app-shell .modal-header,
body.app-shell .modal-footer,
body.app-shell .vidal-panel-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: var(--ios-border) !important;
    color: var(--ios-text) !important;
}

body.app-shell .card-header.bg-primary,
body.app-shell .modal-header.bg-primary,
body.app-shell .bg-primary {
    background: linear-gradient(135deg, var(--ios-primary), color-mix(in srgb, var(--ios-primary) 78%, #111827)) !important;
    color: #fff !important;
}

body.app-shell .card-header.bg-primary *,
body.app-shell .modal-header.bg-primary *,
body.app-shell .bg-primary * {
    color: #fff !important;
}

body.app-shell .bg-light,
body.app-shell .table-light,
body.app-shell .list-group-item,
body.app-shell .dropdown-item {
    background-color: var(--ios-surface-2) !important;
    color: var(--ios-text) !important;
}

body.app-shell .border,
body.app-shell .border-top,
body.app-shell .border-end,
body.app-shell .border-bottom,
body.app-shell .border-start {
    border-color: var(--ios-border) !important;
}

/* KPI/action cards */
body.app-shell .department-card,
body.app-shell .module-card,
body.app-shell .metric-card,
body.app-shell .vidal-shortcut-card,
body.app-shell .blanks-action-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.app-shell .department-card:hover,
body.app-shell .module-card:hover,
body.app-shell .metric-card:hover,
body.app-shell .vidal-shortcut-card:hover,
body.app-shell .blanks-action-card:hover {
    border-color: color-mix(in srgb, var(--ios-primary) 36%, var(--ios-border)) !important;
    box-shadow: var(--ios-shadow-strong) !important;
    transform: translateY(-2px);
}

/* Buttons */
body.app-shell .btn {
    min-height: 34px;
    border-radius: var(--ios-control-radius) !important;
    font-size: .82rem !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    padding: .48rem .82rem !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
}

body.app-shell .btn-sm {
    min-height: 30px;
    font-size: .76rem !important;
    padding: .36rem .66rem !important;
}

body.app-shell .btn-lg {
    min-height: 42px;
    font-size: .92rem !important;
    padding: .62rem 1rem !important;
}

body.app-shell .btn-primary,
body.app-shell .btn-success,
body.app-shell .btn-info {
    background: linear-gradient(135deg, var(--ios-primary), color-mix(in srgb, var(--ios-primary) 82%, #0f172a)) !important;
    border-color: var(--ios-primary) !important;
    color: #fff !important;
}

body.app-shell .btn-primary:hover,
body.app-shell .btn-success:hover,
body.app-shell .btn-info:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(var(--ios-primary-rgb), .22) !important;
}

body.app-shell .btn-outline-primary,
body.app-shell .btn-outline-secondary,
body.app-shell .btn-outline-dark,
body.app-shell .btn-outline-info,
body.app-shell .btn-outline-success,
body.app-shell .btn-outline-warning,
body.app-shell .btn-outline-danger {
    background: #fff !important;
    border-color: var(--ios-border) !important;
    color: var(--ios-text-2) !important;
}

body.app-shell .btn-outline-primary:hover,
body.app-shell .btn-outline-secondary:hover,
body.app-shell .btn-outline-dark:hover,
body.app-shell .btn-outline-info:hover,
body.app-shell .btn-outline-success:hover,
body.app-shell .btn-outline-warning:hover,
body.app-shell .btn-outline-danger:hover {
    background: var(--ios-primary-softer) !important;
    border-color: color-mix(in srgb, var(--ios-primary) 38%, var(--ios-border)) !important;
    color: var(--ios-primary) !important;
}

body.app-shell .btn-danger,
body.app-shell .btn-outline-danger:hover {
    --bs-btn-bg: #ef4444;
    --bs-btn-border-color: #ef4444;
}

body.app-shell .btn i {
    font-size: .95em;
}

/* Forms */
body.app-shell .form-control,
body.app-shell .form-select,
body.app-shell .select2-container--bootstrap-5 .select2-selection,
body.app-shell .select2-container .select2-selection--single,
body.app-shell textarea,
body.app-shell input[type="search"] {
    min-height: 38px;
    background-color: #fff !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: var(--ios-control-radius) !important;
    color: var(--ios-text) !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02) !important;
}

body.app-shell .form-control::placeholder,
body.app-shell textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

body.app-shell .form-control:focus,
body.app-shell .form-select:focus,
body.app-shell .select2-container--bootstrap-5.select2-container--focus .select2-selection,
body.app-shell .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: color-mix(in srgb, var(--ios-primary) 55%, var(--ios-border)) !important;
    box-shadow: 0 0 0 .22rem rgba(var(--ios-primary-rgb), .12) !important;
}

body.app-shell label,
body.app-shell .form-label {
    color: var(--ios-text-2) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

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

body.app-shell input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Tables */
body.app-shell .table-responsive {
    border-radius: var(--ios-radius);
}

body.app-shell table.table {
    --bs-table-bg: #fff;
    --bs-table-color: var(--ios-text);
    --bs-table-border-color: var(--ios-border);
    margin-bottom: 0;
    border-color: var(--ios-border) !important;
    font-size: .82rem;
}

body.app-shell .table > :not(caption) > * > * {
    padding: .62rem .7rem;
    color: var(--ios-text) !important;
    border-color: var(--ios-border) !important;
    vertical-align: middle;
}

body.app-shell .table-sm > :not(caption) > * > * {
    padding: .42rem .5rem;
}

body.app-shell .table thead th,
body.app-shell .table-light th,
body.app-shell thead.table-light th {
    background: linear-gradient(180deg, var(--ios-primary) 0%, color-mix(in srgb, var(--ios-primary) 82%, #0f172a) 100%) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--ios-primary) 72%, #0f172a) !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-shell .table thead th * {
    color: #fff !important;
}

body.app-shell .table tbody tr:nth-child(even) > * {
    background-color: rgba(248, 250, 252, .78) !important;
}

body.app-shell .table-hover tbody tr:hover > *,
body.app-shell .table tbody tr:hover > * {
    background-color: var(--ios-primary-softer) !important;
}

body.app-shell .table-warning > * {
    --bs-table-bg: #fff7e6;
    --bs-table-color: #713f12;
}

body.app-shell .table-info > * {
    --bs-table-bg: #eef7ff;
    --bs-table-color: #0f3a5c;
}

body.app-shell .table-success > * {
    --bs-table-bg: #ecfdf3;
    --bs-table-color: #14532d;
}

body.app-shell .table-danger > * {
    --bs-table-bg: #fff1f2;
    --bs-table-color: #7f1d1d;
}

/* Badges */
body.app-shell .badge {
    border-radius: 999px !important;
    padding: .36rem .58rem !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

body.app-shell .badge.bg-primary,
body.app-shell .badge.text-bg-primary {
    background: var(--ios-primary) !important;
    color: #fff !important;
}

body.app-shell .badge.bg-light,
body.app-shell .text-bg-light {
    background: #f1f5f9 !important;
    color: var(--ios-text-2) !important;
    border: 1px solid var(--ios-border) !important;
}

/* Modals */
body.app-shell .modal-backdrop.show {
    opacity: .32;
    backdrop-filter: blur(4px);
}

body.app-shell .modal-content {
    overflow: hidden;
}

body.app-shell .modal-header {
    min-height: 56px;
}

body.app-shell .modal-body {
    background: #fbfdff !important;
}

body.app-shell .modal-footer {
    min-height: 58px;
}

/* Auth */
body:not(.app-shell) .auth-main,
body.app-shell .auth-main {
    background:
        radial-gradient(circle at 22% -12%, rgba(var(--ios-primary-rgb), .14), transparent 28rem),
        linear-gradient(180deg, #fbfdff, #f5f7fb) !important;
    font-family: var(--ios-font) !important;
}

body:not(.app-shell) .auth-main .card,
body.app-shell .auth-main .card {
    border: 1px solid var(--ios-border) !important;
    border-radius: var(--ios-radius) !important;
    box-shadow: var(--ios-shadow) !important;
}

/* Department-specific accents using same structure */
body.app-shell[data-department="packing"] {
    --ios-primary: var(--theme-primary, #2563eb);
}

body.app-shell[data-department="blanks"] .page-heading,
body.app-shell[data-department="vidal"] .page-heading,
body.app-shell[data-department="packing"] .page-heading {
    background: rgba(255,255,255,.96) !important;
}

/* Mobile */
@media (max-width: 992px) {
    body.app-shell .app-topbar {
        min-height: auto !important;
        padding: .7rem 1rem !important;
        flex-wrap: wrap;
    }

    body.app-shell .topbar-search {
        order: 3;
        display: flex !important;
        width: 100% !important;
    }

    body.app-shell .topbar-actions {
        margin-left: auto;
        gap: .4rem !important;
    }

    body.app-shell .app-container {
        padding: 16px 12px 24px !important;
    }

    body.app-shell .card,
    body.app-shell .content-panel,
    body.app-shell .table-card,
    body.app-shell .modern-card {
        border-radius: var(--ios-radius) !important;
    }
}

@media (max-width: 640px) {
    body.app-shell {
        font-size: 13px;
    }

    body.app-shell .topbar-brand span {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-shell .theme-picker,
    body.app-shell .topbar-active-users span,
    body.app-shell .topbar-user-text {
        display: none !important;
    }

    body.app-shell .btn {
        min-height: 32px;
        font-size: .76rem !important;
        padding: .38rem .58rem !important;
    }

    body.app-shell .table > :not(caption) > * > * {
        padding: .48rem .5rem;
    }
}