/* ============================================================
   INCOM WMTS — SITE STYLESHEET
   ============================================================ */

/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand palette */
    --primary: #0284c7;
    --primary-dark: #0369a1;
    --primary-light: #e0f2fe;
    /* Semantic colors */
    --success: #16a34a;
    --success-light: #dcfce7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --warning: #d97706;
    --warning-light: #fef3c7;
    /* Accent colors */
    --purple: #7c3aed;
    --purple-light: #ede9fe;
    --teal: #0d9488;
    --teal-light: #ccfbf1;
    --orange: #ea580c;
    --orange-light: #ffedd5;
    --indigo: #4f46e5;
    --pink: #db2777;
    /* Slate scale */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #0284c7, #0ea5e9);
    --purple-gradient: linear-gradient(135deg, #6d28d9, #8b5cf6);
    --teal-gradient: linear-gradient(135deg, #0f766e, #14b8a6);
    --indigo-gradient: linear-gradient(135deg, #4338ca, #6366f1);
    --pink-gradient: linear-gradient(135deg, #be185d, #ec4899);
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.065);
    --shadow-lg: 0 14px 35px rgba(15, 23, 42, 0.09);
    --shadow-xl: 0 24px 65px rgba(15, 23, 42, 0.12);
    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    /* Typography */
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}


/* ============================================================
   02. GLOBAL RESET & BASE
   ============================================================ */
* {
    box-sizing: border-box;
}

html {
    font-size: 17px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    html {
        font-size: 19px;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--slate-50);
    color: var(--slate-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-size: 0.95rem;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--slate-100);
}

::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--slate-400);
    }

:focus-visible {
    outline: 3px solid rgba(2, 132, 199, 0.3);
    outline-offset: 1px;
}

/* JS visibility helpers — used by site.js. Do not remove. */
.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.validation-summary-valid {
    display: none;
}


/* ============================================================
   03. APP SHELL & CONTENT LAYOUT
   ============================================================ */
.app-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: var(--slate-50);
}

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

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.35rem;
    background: radial-gradient( circle at 100% 0%, rgba(14, 165, 233, 0.035), transparent 28% ), var(--slate-50);
}


/* ============================================================
   04. NAVBAR
   ============================================================ */
.navbar {
    min-height: 62px;
    padding: 0.5rem 1.5rem !important;
    background: linear-gradient(135deg, #0b4a6f 0%, #0369a1 35%, #0284c7 70%, #0ea5e9 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    transition: transform 0.2s ease;
}

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

.navbar-brand-icon-wrapper {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.navbar-brand:hover .navbar-brand-icon-wrapper {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(255, 255, 255, 0.15);
}

.navbar-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.navbar-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

.navbar-role {
    font-weight: 700;
    opacity: 0.9;
}

.navbar-separator {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0.3rem;
}

.navbar-page {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.navbar-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.2rem;
}

.user-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1;
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.2s ease;
}

    .user-dropdown-toggle > span,
    .user-dropdown-toggle .navbar-user-icon {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }

    .user-dropdown-toggle:hover,
    .user-dropdown-toggle:focus {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

.user-dropdown-menu {
    min-width: 200px;
    font-size: 0.78rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border: none;
}

    .user-dropdown-menu .dropdown-item {
        padding: 0.55rem 1.2rem;
        font-weight: 500;
        color: var(--slate-700);
        transition: background 0.15s, color 0.15s;
    }

        .user-dropdown-menu .dropdown-item:hover {
            background: var(--slate-100);
            color: var(--slate-900);
        }

        .user-dropdown-menu .dropdown-item i {
            font-size: 0.9rem;
            margin-right: 0.5rem;
        }

    .user-dropdown-menu .dropdown-divider {
        margin: 0.25rem 0;
        border-top: 1px solid var(--slate-200);
    }


/* ============================================================
   05. BUTTONS
   ============================================================ */
.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--primary-gradient);
    border: none;
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    }

.btn-success {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1e293b;
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border: none;
}

.btn-secondary {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    border: none;
}

.action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 0.5rem 0.8rem;
    border-radius: 50px;
    border: none;
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
    font-weight: 650;
}

.back-circle-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-600);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .back-circle-btn:hover {
        background: var(--slate-50);
        border-color: var(--slate-300);
        color: var(--slate-900);
        box-shadow: var(--shadow-sm);
    }

.btn-camera-close {
    border-radius: 8px;
    font-weight: 600;
    background: #fff;
    color: var(--danger);
    border: 1px solid var(--danger-light);
    transition: all 0.2s ease;
}

    .btn-camera-close:hover {
        background: var(--danger-light);
        border-color: #fca5a5;
        color: #b91c1c;
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
    }


/* ============================================================
   06. FORMS & INPUTS
   ============================================================ */
.form-control,
.form-select {
    height: 44px;
    padding: 0 0.9rem;
    line-height: 1;
    border-radius: 9px;
    border: 1px solid var(--slate-300);
    background-color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--slate-800);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.2rem;
}

input[type="file"].form-control {
    height: 44px;
    padding: 5px 8px 5px 5px;
    display: flex;
    align-items: center;
    border: 1px dashed var(--slate-300);
    border-radius: 9px;
    background: var(--slate-50);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--slate-600);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

    input[type="file"].form-control:hover {
        border-color: var(--primary);
        background: #fff;
    }

    input[type="file"].form-control::file-selector-button {
        height: 32px;
        margin: 0 0.9rem 0 0;
        padding: 0 1.1rem;
        border: none;
        border-radius: 6px;
        background: var(--primary-gradient);
        color: #fff;
        font-weight: 600;
        font-size: 0.78rem;
        letter-spacing: -0.005em;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: transform 0.15s, box-shadow 0.15s;
    }

        input[type="file"].form-control::file-selector-button:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

.sc-filter-select {
    height: 44px;
    padding: 0 2.4rem 0 1rem;
    line-height: 1;
    border-radius: 9px;
    border: 1px solid var(--slate-300);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 14px 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate-700);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .sc-filter-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
    }

.sc-filter-w-sm {
    width: 140px;
}

.sc-filter-w-md {
    width: 160px;
}

.sc-filter-w-lg {
    width: 320px;
}

.sc-filter-w-date {
    width: 150px;
}

/* Filter search button — matches the height of form-control/form-select */
/* Filter search/clear button — matches the height of form-control/form-select */
.sc-filter-btn {
    height: 44px;
    min-height: 44px;
    width: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
}

/* Add button in list toolbars — same height as filters, text + icon */
.sc-filter-add-btn {
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1.1rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    white-space: nowrap;
    background: var(--primary-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(2, 132, 199, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

    .sc-filter-add-btn i {
        font-size: 0.95rem;
    }

    .sc-filter-add-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -6px rgba(2, 132, 199, 0.5);
        color: #fff;
    }

/* Outline button for panel headers (e.g., "View All History") */
.sc-history-btn {
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: -0.005em;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-600);
    transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

    .sc-history-btn i {
        font-size: 0.85rem;
        opacity: 0.85;
    }

    .sc-history-btn:hover {
        color: var(--primary);
        background: var(--primary-light);
        border-color: #7dd3fc;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(2, 132, 199, 0.12);
        text-decoration: none;
    }

.sc-user-avatar {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.15);
}

.input-group .password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--slate-300);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: var(--slate-500);
    font-size: 1.1rem;
    padding: 0 0.9rem;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

    .input-group .password-toggle:hover {
        color: var(--primary);
        background: var(--slate-50);
    }

.input-group > .form-control {
    border-radius: 8px 0 0 8px;
    border-right: none;
}

    .input-group > .form-control:focus {
        border-right: none;
        box-shadow: none;
    }


/* ============================================================
   07. DASHBOARD — LAYOUT PRIMITIVES
   ============================================================ */
.sc-dashboard {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0.1rem 0 2rem;
}

.sc-section {
    margin-bottom: 1.25rem;
}

.sc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

    .sc-section-header h2 {
        margin: 0;
        color: var(--slate-900);
        font-size: 1.2rem;
        font-weight: 850;
        letter-spacing: -0.025em;
    }

.sc-section-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1.05rem;
}

    .sc-section-icon.lg {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .sc-section-icon.warning {
        background: #fef3c7;
        color: #b45309;
    }

    .sc-section-icon.success {
        background: #dcfce7;
        color: #15803d;
    }

    .sc-section-icon.teal {
        background: var(--teal-light);
        color: var(--teal);
    }

.sc-eyebrow {
    display: inline-block;
    color: var(--slate-500);
    font-size: 0.65rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sc-realtime {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.68rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 800;
}

    .sc-realtime span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }


/* ============================================================
   08. PANEL
   ============================================================ */
.sc-panel {
    margin-bottom: 1.25rem;
    border: 1px solid var(--slate-200);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.045);
    overflow: hidden;
}

.sc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, #fff, #fbfdff);
    border-bottom: 1px solid var(--slate-200);
}

.sc-panel-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sc-panel-icon {
    width: 41px;
    height: 41px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1rem;
}

.sc-panel-heading h2 {
    margin: 0;
    color: var(--slate-900);
    font-size: 1.1rem;
    font-weight: 850;
}

.sc-panel-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sc-active-pill,
.sc-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 50px;
    font-size: 0.61rem;
    font-weight: 850;
}

.sc-active-pill {
    color: #15803d;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

    .sc-active-pill > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
    }

.sc-role-pill {
    color: var(--slate-600);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
}

.sc-panel-body {
    padding: 1.2rem;
}

.sc-panel-narrow {
    max-width: 600px;
}

.sc-panel-body .sc-panel {
    margin-bottom: 0;
}


/* ============================================================
   09. VERTICAL STEP LIST
   ============================================================ */
.sc-steps-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.sc-step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.sc-step-badge {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

    .sc-step-badge.warning {
        background: var(--warning-light);
        color: #b45309;
    }

    .sc-step-badge.success {
        background: var(--success-light);
        color: #15803d;
    }

.sc-step-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.15rem;
}

    .sc-step-content strong {
        display: block;
        color: var(--slate-900);
        font-size: 0.9rem;
        font-weight: 850;
        letter-spacing: -0.01em;
        line-height: 1.3;
    }

    .sc-step-content span {
        display: block;
        color: var(--slate-500);
        font-size: 0.78rem;
        line-height: 1.5;
    }


/* ============================================================
   10. KPI METRIC CARDS
   ============================================================ */
.sc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.sc-metric-card {
    position: relative;
    min-height: 148px;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--slate-200);
    border-radius: 17px;
    background: #fff;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "top top" "label value" "footer footer";
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.045);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

    .sc-metric-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
    }

    .sc-metric-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-gradient);
    }

    .sc-metric-card::after {
        content: "";
        position: absolute;
        right: -38px;
        bottom: -48px;
        width: 115px;
        height: 115px;
        border-radius: 50%;
        background: rgba(14, 165, 233, 0.07);
        pointer-events: none;
        transition: transform 0.3s;
    }

    .sc-metric-card:hover::after {
        transform: scale(1.12);
    }

    /* Filled color variants — shared rules via :is() */
    .sc-metric-card.blue,
    .sc-metric-card.green,
    .sc-metric-card.purple,
    .sc-metric-card.teal,
    .sc-metric-card.red {
        color: #fff;
        border: none;
    }

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red)::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red)::after {
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15), transparent 50%);
}

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red) .sc-metric-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red) .sc-metric-label {
    color: rgba(255, 255, 255, 0.75);
}

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red) .sc-metric-value {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red) .sc-metric-footer {
    color: rgba(255, 255, 255, 0.8);
}

:is(.sc-metric-card.blue, .sc-metric-card.green, .sc-metric-card.purple, .sc-metric-card.teal, .sc-metric-card.red) .sc-metric-chip {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.sc-metric-card.blue {
    background: linear-gradient(145deg, #0369a1 0%, #0284c7 40%, #0ea5e9 100%);
    box-shadow: 0 12px 30px -8px rgba(2, 132, 199, 0.35);
}

.sc-metric-card.green {
    background: linear-gradient(145deg, #15803d 0%, #16a34a 40%, #22c55e 100%);
    box-shadow: 0 12px 30px -8px rgba(22, 163, 74, 0.35);
}

.sc-metric-card.purple {
    background: linear-gradient(145deg, #6d28d9 0%, #7c3aed 40%, #8b5cf6 100%);
    box-shadow: 0 12px 30px -8px rgba(124, 58, 237, 0.35);
}

.sc-metric-card.teal {
    background: linear-gradient(145deg, #0f766e 0%, #0d9488 40%, #14b8a6 100%);
    box-shadow: 0 12px 30px -8px rgba(13, 148, 136, 0.35);
}

.sc-metric-card.red {
    background: linear-gradient(145deg, #b91c1c 0%, #dc2626 40%, #ef4444 100%);
    box-shadow: 0 12px 30px -8px rgba(220, 38, 38, 0.35);
}

.sc-metric-top {
    grid-area: top;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.sc-metric-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 1rem;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.055);
}

.sc-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border-radius: 50px;
    font-size: 0.58rem;
    font-weight: 850;
}

    .sc-metric-chip.neutral {
        color: var(--slate-500);
        background: var(--slate-100);
    }

    .sc-metric-chip.success {
        color: #15803d;
        background: #ecfdf5;
    }

    .sc-metric-chip.warning {
        color: #c2410c;
        background: #fff7ed;
    }

    .sc-metric-chip.danger {
        color: #b91c1c;
        background: #fee2e2;
    }

.sc-metric-label {
    grid-area: label;
    position: relative;
    z-index: 2;
    align-self: center;
    color: var(--slate-500);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.sc-metric-value {
    grid-area: value;
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: end;
    margin: 0 0 0 1.25rem;
    color: var(--slate-900);
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    text-align: right;
}

.sc-metric-footer {
    grid-area: footer;
    position: relative;
    z-index: 2;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 0.4rem;
    color: var(--slate-400);
    font-size: 0.68rem;
    font-weight: 650;
}

    .sc-metric-footer i {
        font-size: 0.76rem;
        opacity: 0.75;
        transition: transform 0.18s;
    }

.sc-metric-card:hover .sc-metric-footer i {
    transform: translateX(3px);
}

/* System variant */
.sc-metric-card.system {
    min-height: 148px;
    color: #fff;
    border: none;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 40%), linear-gradient(135deg, #0c4a6e 0%, #0369a1 45%, #0284c7 100%);
    box-shadow: 0 12px 30px -8px rgba(2, 132, 199, 0.5);
}

    .sc-metric-card.system::before {
        background: linear-gradient(90deg, #7dd3fc, #fff, #38bdf8);
    }

    .sc-metric-card.system::after {
        background: rgba(255, 255, 255, 0.055);
    }

.sc-metric-icon.system {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.sc-system-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    right: -45px;
    top: -50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.sc-system-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 850;
}

    .sc-system-live > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #86efac;
        box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.1);
    }

.sc-metric-card.system .sc-metric-label {
    color: rgba(255, 255, 255, 0.66);
}

.sc-system-value {
    grid-area: value;
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0 1rem;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 850;
    text-align: right;
}

    .sc-system-value i {
        color: #86efac;
        font-size: 0.85rem;
    }

.sc-system-footer {
    grid-area: footer;
    position: relative;
    z-index: 2;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 0.4rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.62rem;
    font-weight: 700;
}

    .sc-system-footer span:last-child {
        color: #fff;
    }


/* ============================================================
   11. TASK ACTION TILES
   ============================================================ */
.sc-tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.sc-task-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.95rem 1rem 0.95rem 1.15rem;
    min-height: 138px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-left: 5px solid var(--slate-300);
    color: var(--slate-800);
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

    .sc-task-tile:hover {
        transform: translateY(-3px);
        color: var(--slate-800);
    }

    .sc-task-tile.blue {
        border-color: #bfdbfe;
        border-left-color: var(--primary);
    }

        .sc-task-tile.blue:hover {
            border-color: var(--primary);
            box-shadow: 0 16px 32px -10px rgba(2, 132, 199, 0.22);
        }

    .sc-task-tile.green {
        border-color: #bbf7d0;
        border-left-color: var(--success);
    }

        .sc-task-tile.green:hover {
            border-color: var(--success);
            box-shadow: 0 16px 32px -10px rgba(22, 163, 74, 0.22);
        }

    .sc-task-tile.orange {
        border-color: #fed7aa;
        border-left-color: var(--orange);
    }

        .sc-task-tile.orange:hover {
            border-color: var(--orange);
            box-shadow: 0 16px 32px -10px rgba(234, 88, 12, 0.22);
        }

    .sc-task-tile.purple {
        border-color: #ddd6fe;
        border-left-color: var(--purple);
    }

        .sc-task-tile.purple:hover {
            border-color: var(--purple);
            box-shadow: 0 16px 32px -10px rgba(124, 58, 237, 0.22);
        }

    .sc-task-tile.teal {
        border-color: #99f6e4;
        border-left-color: var(--teal);
    }

        .sc-task-tile.teal:hover {
            border-color: var(--teal);
            box-shadow: 0 16px 32px -10px rgba(13, 148, 136, 0.22);
        }

    .sc-task-tile.indigo {
        border-color: #c7d2fe;
        border-left-color: var(--indigo);
    }

        .sc-task-tile.indigo:hover {
            border-color: var(--indigo);
            box-shadow: 0 16px 32px -10px rgba(79, 70, 229, 0.22);
        }

    .sc-task-tile.pink {
        border-color: #fbcfe8;
        border-left-color: var(--pink);
    }

        .sc-task-tile.pink:hover {
            border-color: var(--pink);
            box-shadow: 0 16px 32px -10px rgba(219, 39, 119, 0.22);
        }

.sc-task-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.4);
}

.sc-task-tile.blue .sc-task-icon {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.sc-task-tile.green .sc-task-icon {
    background: linear-gradient(135deg, #15803d, #22c55e);
}

.sc-task-tile.orange .sc-task-icon {
    background: linear-gradient(135deg, #c2410c, #f97316);
}

.sc-task-tile.purple .sc-task-icon {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
}

.sc-task-tile.teal .sc-task-icon {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.sc-task-tile.indigo .sc-task-icon {
    background: linear-gradient(135deg, #4338ca, #6366f1);
}

.sc-task-tile.pink .sc-task-icon {
    background: linear-gradient(135deg, #be185d, #ec4899);
}

.sc-task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-right: 2.4rem;
}

.sc-task-title {
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: -0.015em;
    color: var(--slate-900);
    line-height: 1.25;
}

.sc-task-subtitle {
    font-size: 0.7rem;
    color: var(--slate-500);
    line-height: 1.4;
}

.sc-task-arrow {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 0.8rem;
    transition: all 0.2s;
}

.sc-task-tile.blue .sc-task-arrow {
    background: var(--primary-light);
    color: var(--primary);
}

.sc-task-tile.green .sc-task-arrow {
    background: var(--success-light);
    color: var(--success);
}

.sc-task-tile.orange .sc-task-arrow {
    background: var(--orange-light);
    color: var(--orange);
}

.sc-task-tile.purple .sc-task-arrow {
    background: var(--purple-light);
    color: var(--purple);
}

.sc-task-tile.teal .sc-task-arrow {
    background: var(--teal-light);
    color: var(--teal);
}

.sc-task-tile.indigo .sc-task-arrow {
    background: #e0e7ff;
    color: var(--indigo);
}

.sc-task-tile.pink .sc-task-arrow {
    background: #fce7f3;
    color: var(--pink);
}

.sc-task-tile:hover .sc-task-arrow {
    transform: translate(3px, -3px);
}


/* ============================================================
   12. FEATURE TILE
   ============================================================ */
.sc-feature-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem 1.5rem 1.5rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--primary-light);
    border-left: 5px solid var(--primary);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    margin-bottom: 1.25rem;
    transition: box-shadow 0.22s, border-color 0.22s;
}

    .sc-feature-tile:hover {
        border-color: var(--primary);
        box-shadow: 0 20px 42px -12px rgba(2, 132, 199, 0.24);
    }

.sc-feature-icon {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 10px 22px -10px rgba(2, 132, 199, 0.5);
}

.sc-feature-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sc-feature-eyebrow {
    font-size: 0.65rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.sc-feature-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--slate-900);
    line-height: 1.2;
}

.sc-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--slate-500);
}

    .sc-feature-meta strong {
        color: var(--slate-700);
        font-weight: 700;
    }

.sc-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 50px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 0.68rem;
    font-weight: 850;
}

.sc-feature-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    background: var(--primary-gradient);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px -6px rgba(2, 132, 199, 0.4);
    transition: all 0.2s;
}

    .sc-feature-action:hover {
        transform: translateY(-2px);
        color: #fff;
        box-shadow: 0 14px 28px -8px rgba(2, 132, 199, 0.5);
    }


/* ============================================================
   13. SECTION HEADER LINKS
   ============================================================ */
.sc-section-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.sc-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-600);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

    .sc-section-link i {
        font-size: 0.85rem;
        opacity: 0.85;
        transition: color 0.18s;
    }

    .sc-section-link:hover {
        color: var(--primary);
        background: var(--primary-light);
        border-color: #7dd3fc;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(2, 132, 199, 0.12);
    }

        .sc-section-link:hover i {
            opacity: 1;
        }


/* ============================================================
   14. FORM SECTION BLOCK
   ============================================================ */
.sc-form-section {
    margin-bottom: 1.75rem;
}

.sc-form-section-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--slate-200);
}

.sc-form-section-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.95rem;
}

.sc-form-section-title {
    margin: 0;
    color: var(--slate-900);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -0.015em;
}


/* ============================================================
   15. INLINE INFO BANNER
   ============================================================ */
.sc-info-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

    .sc-info-banner i {
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .sc-info-banner.success {
        background: var(--success-light);
        color: #166534;
        border: 1px solid #bbf7d0;
    }

    .sc-info-banner.warning {
        background: var(--warning-light);
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .sc-info-banner.info {
        background: var(--primary-light);
        color: var(--primary-dark);
        border: 1px solid #bae6fd;
    }

.sc-supplier-block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 560px;
}


/* ============================================================
   16. PALLET REVIEW CARD (mobile)
   ============================================================ */
.sc-pallet-review-card {
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.sc-pallet-review-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px dashed var(--slate-200);
}

    .sc-pallet-review-card-title strong {
        color: var(--slate-900);
        font-size: 0.9rem;
        font-weight: 850;
        letter-spacing: -0.01em;
    }

    .sc-pallet-review-card-title .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
        cursor: pointer;
    }

.sc-pallet-review-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.sc-pallet-review-label {
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/*--------------------------------------------------------
   16.1 STACKED MOBILE FIELD
  -------------------------------------------------------- */
.sc-mobile-field.stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.65rem 0;
}

    .sc-mobile-field.stacked .sc-mobile-label {
        flex: 0 0 auto;
        width: 100%;
        text-align: left;
    }

    .sc-mobile-field.stacked .sc-mobile-value {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        display: block;
        text-align: left;
    }

.sc-mobile-value > .form-control,
.sc-mobile-value > .form-select,
.sc-mobile-value > textarea {
    width: 100%;
    max-width: 100%;
}


/*--------------------------------------------------------
   16.2 TEXTAREA SIZING
  -------------------------------------------------------- */
textarea.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    line-height: 1.4;
    resize: vertical;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-y: hidden;
}

.sc-table td textarea.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.35;
    resize: vertical;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-y: hidden;
}

.sc-table th:has(+ th:empty),
.sc-table td:has(textarea) {
    min-width: 220px;
    max-width: 320px;
    vertical-align: top;
}


/*--------------------------------------------------------
   16.3 TABLE CELL CONTROL ALIGNMENT
  -------------------------------------------------------- */
.sc-table td .form-select,
.sc-table td .form-control {
    height: 38px;
    min-height: 38px;
    font-size: 0.78rem;
    padding: 0.45rem 0.7rem;
}

.sc-table td .form-select {
    padding-right: 2rem;
    background-position: right 0.55rem center;
}


/* ============================================================
   17. WEIGHT SUMMARY STAT
   ============================================================ */
.sc-weight-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.sc-weight-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.sc-weight-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1.05rem;
}

    .sc-weight-stat-icon.teal {
        background: var(--teal-light);
        color: var(--teal);
    }

.sc-weight-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sc-weight-stat-label {
    color: var(--slate-500);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sc-weight-stat-value {
    color: var(--slate-900);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

    .sc-weight-stat-value span {
        color: var(--slate-400);
        font-size: 0.72rem;
        font-weight: 700;
        margin-left: 0.15rem;
    }


/* ============================================================
   18. ACTION FOOTER
   ============================================================ */
.sc-action-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--slate-200);
}

    .sc-action-footer .btn {
        flex: 1 1 40%;
        min-width: 0;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* ============================================================
   19. ACTIVE DELIVERY ACCORDION
   ============================================================ */
.sc-delivery-item {
    border: 1px solid var(--slate-200) !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.045);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .sc-delivery-item:last-child {
        margin-bottom: 0;
    }

    .sc-delivery-item:hover {
        border-color: var(--slate-300) !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    }

.sc-delivery-toggle {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1rem 1.15rem !important;
    color: inherit !important;
    align-items: stretch;
    transition: background 0.2s;
}

    .sc-delivery-toggle:not(.collapsed) {
        background: linear-gradient(180deg, #fff, #f8fbff) !important;
        border-bottom: 1px solid var(--slate-200) !important;
    }

    .sc-delivery-toggle::after {
        display: none !important;
    }

.sc-delivery-header-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    padding-right: 0.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .sc-delivery-header-content {
        grid-template-columns: auto minmax(320px, 1fr) auto;
        gap: 1.75rem;
        padding-right: 0;
    }
}

.sc-delivery-id {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

@media (min-width: 768px) {
    .sc-delivery-id {
        max-width: 420px;
    }
}

.sc-delivery-id strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--slate-900);
    font-size: 0.92rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

    .sc-delivery-id strong i {
        color: var(--primary);
    }

.sc-delivery-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--slate-900);
    font-size: 0.98rem;
    font-weight: 850;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.sc-delivery-title-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.85rem;
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
}

.sc-delivery-id span {
    color: var(--slate-500);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sc-delivery-id span i {
        opacity: 0.7;
    }

.sc-delivery-supplier {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--slate-600);
    font-size: 0.78rem;
    font-weight: 650;
}

    .sc-delivery-supplier i {
        color: var(--slate-400);
        font-size: 0.85rem;
    }

.sc-delivery-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--slate-500);
    font-weight: 600;
}

.sc-delivery-extra-item {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.26rem 0.58rem;
    border-radius: 50px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    color: var(--slate-600);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

    .sc-delivery-extra-item i {
        font-size: 0.72rem;
        color: var(--slate-400);
    }

    .sc-delivery-extra-item strong {
        color: var(--slate-800);
        font-weight: 850;
    }

.accordion-button:not(.collapsed) .sc-delivery-extra {
    display: none;
}

.sc-delivery-progress-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
    min-width: 0;
}

@media (min-width: 768px) {
    .sc-delivery-progress-block {
        width: 100%;
        max-width: 640px;
        justify-self: center;
    }
}

/* Mini bar — hidden by default; only rendered inside the rich progress block */
.sc-delivery-progress-mini {
    display: none;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 120px;
    max-width: 220px;
    padding: 0 1rem;
}

.sc-delivery-progress-block .sc-delivery-progress-mini {
    display: flex;
    flex: 1;
    max-width: none;
    padding: 0;
}

.sc-delivery-progress-mini-track {
    flex: 1;
    height: 6px;
    border-radius: 50px;
    background: var(--slate-200);
    overflow: hidden;
}

.sc-delivery-progress-block .sc-delivery-progress-mini-track {
    height: 8px;
}

.sc-delivery-progress-mini-fill {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    box-shadow: 0 0 6px rgba(14, 165, 233, 0.3);
    transition: width 0.4s;
    width: var(--sc-progress-width, 0%);
}

.sc-delivery-progress-mini-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    min-width: 34px;
    text-align: right;
}

.sc-delivery-progress-caption {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--slate-500);
    letter-spacing: -0.005em;
}

    .sc-delivery-progress-caption strong {
        color: var(--slate-900);
        font-weight: 850;
    }

    .sc-delivery-progress-caption span {
        color: var(--slate-400);
    }

.sc-delivery-meta-line {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
}

@media (min-width: 768px) {
    .sc-delivery-meta-line {
        min-width: 120px;
    }
}

.sc-delivery-remaining-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.32rem 0.68rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    color: #9a3412;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.08);
}

    .sc-delivery-remaining-stat.complete {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border-color: #bbf7d0;
        color: #15803d;
        box-shadow: 0 3px 8px rgba(22, 163, 74, 0.08);
    }

.sc-delivery-remaining-num {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: inherit;
}

    .sc-delivery-remaining-num i {
        font-size: 0.95rem;
    }

.sc-delivery-remaining-label {
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

    .sc-delivery-remaining-label i {
        font-size: 0.65rem;
        margin-right: 0.15rem;
    }

.sc-delivery-count {
    color: var(--slate-700);
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

    .sc-delivery-count span {
        color: var(--slate-400);
        font-weight: 600;
    }

.sc-delivery-body {
    background: var(--slate-50) !important;
    padding: 1rem 1.15rem !important;
}

.sc-delivery-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .sc-delivery-meta-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sc-delivery-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}

.sc-delivery-meta-label {
    color: var(--slate-500);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sc-delivery-meta-value {
    color: var(--slate-800);
    font-size: 0.82rem;
    font-weight: 750;
}

    .sc-delivery-meta-value.highlight {
        color: var(--primary);
    }


/* ============================================================
   20. PALLET CHIP GRID + QC MINI BAR
   ============================================================ */
.sc-pallet-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

.sc-pallet-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--slate-200);
    background: #fff;
    min-width: 0;
}

    .sc-pallet-chip.scanned {
        border-color: #bbf7d0;
        background: #f0fdf4;
    }

    .sc-pallet-chip.rejected {
        border-color: #fecaca;
        background: #fef2f2;
    }

    .sc-pallet-chip.pending {
        border-color: var(--slate-200);
        background: var(--slate-50);
    }

.sc-pallet-chip-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.68rem;
    color: #fff;
}

.sc-pallet-chip.scanned .sc-pallet-chip-icon {
    background: #22c55e;
}

.sc-pallet-chip.rejected .sc-pallet-chip-icon {
    background: #ef4444;
}

.sc-pallet-chip.pending .sc-pallet-chip-icon {
    background: var(--slate-300);
}

.sc-pallet-chip-content {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}

.sc-pallet-chip-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--slate-800);
}

.sc-pallet-chip.scanned .sc-pallet-chip-code {
    color: #166534;
}

.sc-pallet-chip.rejected .sc-pallet-chip-code {
    color: #991b1b;
}

.sc-pallet-chip.pending .sc-pallet-chip-code {
    color: var(--slate-500);
}

.sc-pallet-chip-time {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--slate-500);
    opacity: 0.85;
}

.sc-pallet-chip.scanned .sc-pallet-chip-time {
    color: #15803d;
    opacity: 0.75;
}

.sc-pallet-chip.rejected .sc-pallet-chip-time {
    color: #b91c1c;
    opacity: 0.75;
}

.sc-pallet-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.sc-pallet-list-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--slate-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .sc-pallet-list-title i {
        font-size: 0.85rem;
        opacity: 0.7;
    }

.sc-pallet-list-count {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--primary);
}

.sc-qc-mini-bar-segments {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 50px;
    overflow: hidden;
    background: var(--slate-200);
}

.sc-qc-mini-segment {
    flex: var(--sc-qc-segment-flex, 1);
    min-width: 6px;
    border-radius: 50px;
    transition: flex 0.4s ease;
}

    .sc-qc-mini-segment.approved {
        background: linear-gradient(90deg, #15803d, #22c55e);
    }

    .sc-qc-mini-segment.rejected {
        background: linear-gradient(90deg, #b91c1c, #ef4444);
    }

    .sc-qc-mini-segment.pending {
        background: linear-gradient(90deg, #c2410c, #f97316);
    }

.sc-qc-mini-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    color: var(--slate-500);
}

.sc-qc-mini-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

    .sc-qc-mini-legend-item::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .sc-qc-mini-legend-item.approved::before {
        background: #22c55e;
    }

    .sc-qc-mini-legend-item.rejected::before {
        background: #ef4444;
    }

    .sc-qc-mini-legend-item.pending::before {
        background: #f97316;
    }

    .sc-qc-mini-legend-item strong {
        color: var(--slate-800);
        font-weight: 800;
    }


/* ============================================================
   21. TABLES
   ============================================================ */
.table-responsive {
    border-radius: 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.sc-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.82rem;
}

    .sc-table thead {
        background: var(--slate-200);
    }

    .sc-table th {
        padding: 0.75rem 1rem;
        border: 1px solid var(--slate-300);
        background-color: var(--slate-200);
        color: var(--slate-800);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.085em;
        white-space: nowrap;
    }

    .sc-table td {
        padding: 0.82rem 1rem;
        border: 1px solid var(--slate-200);
        color: var(--slate-700);
        font-size: 0.78rem;
        vertical-align: middle;
    }

    .sc-table tbody tr {
        transition: background 0.18s;
    }

        .sc-table tbody tr:hover {
            background: #f8fbff;
        }

.sc-slip-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sc-slip-icon {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.78rem;
}

.sc-slip-cell strong {
    color: var(--slate-800);
    font-size: 0.72rem;
    font-weight: 850;
}

.sc-slip-cell span {
    color: var(--slate-400);
    font-size: 0.59rem;
    display: block;
    margin-top: 0.12rem;
}

.sc-supplier-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate-700);
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.sc-company-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 0.68rem;
}

.sc-invoice-cell strong {
    color: var(--slate-600);
    font-size: 0.69rem;
    font-weight: 750;
}

.sc-invoice-cell span {
    color: var(--slate-400);
    font-size: 0.59rem;
    display: block;
    margin-top: 0.12rem;
}

.sc-progress-cell {
    width: 100%;
    min-width: 160px;
    max-width: 280px;
}

    .sc-progress-cell.auto {
        width: auto;
    }

    /* Wider variant — used when KG meta row needs more horizontal room */
    .sc-progress-cell.wide {
        max-width: 460px;
    }

.sc-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

    .sc-progress-info strong {
        color: var(--slate-700);
        font-size: 0.65rem;
    }

        .sc-progress-info strong span {
            color: var(--slate-400);
            font-weight: 600;
        }

    .sc-progress-info > span {
        color: var(--slate-500);
        font-size: 0.6rem;
        font-weight: 850;
    }

.sc-progress-track {
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 50px;
    background: var(--slate-200);
}

    .sc-progress-track.lg {
        height: 8px;
    }

.sc-progress-fill {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.2);
    transition: width 0.5s;
    width: var(--sc-progress-width, 0%);
}

.sc-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.sc-row-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    transition: all 0.18s;
}

    .sc-row-btn:hover {
        background: #dbeafe;
        color: #1d4ed8;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }

    .sc-row-btn.success {
        color: #15803d;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

        .sc-row-btn.success:hover {
            background: #dcfce7;
            border-color: #86efac;
        }


/* Pagination */
.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-font-size: 0.85rem;
    --bs-pagination-border-radius: 8px;
    --bs-pagination-color: var(--slate-700);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--slate-200);
    --bs-pagination-hover-color: var(--primary);
    --bs-pagination-hover-bg: var(--slate-50);
    --bs-pagination-hover-border-color: var(--slate-300);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-color: var(--slate-400);
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: var(--slate-200);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    margin-bottom: 0;
}

    .pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        min-height: 36px;
        line-height: 1;
        border-radius: 8px;
    }


/* ============================================================
   22. STATUS BADGES
   ============================================================ */
.sc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.58rem;
    border-radius: 50px;
    font-size: 0.59rem;
    font-weight: 850;
    white-space: nowrap;
}

    .sc-status.warning {
        background: #fef3c7;
        color: #a16207;
    }

    .sc-status.success {
        background: #dcfce7;
        color: #15803d;
    }

    .sc-status.info {
        background: #e0f2fe;
        color: #0369a1;
    }

    .sc-status.neutral {
        background: #f1f5f9;
        color: #475569;
    }

    .sc-status.danger {
        background: #fee2e2;
        color: #b91c1c;
    }


/* ============================================================
   23. EMPTY STATES
   ============================================================ */
.sc-empty-state {
    padding: 3.5rem 1.25rem;
    text-align: center;
}

.sc-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    color: var(--slate-400);
    font-size: 1.8rem;
}

.sc-empty-state h3 {
    margin: 0;
    color: var(--slate-700);
    font-size: 0.98rem;
    font-weight: 850;
}

.sc-empty-state p {
    max-width: 420px;
    margin: 0.4rem auto 1rem;
    color: var(--slate-400);
    font-size: 0.7rem;
    line-height: 1.55;
}

.sc-empty-button {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.55rem 0.85rem;
    border-radius: 9px;
    color: #fff;
    background: var(--primary-gradient);
    font-size: 0.67rem;
    font-weight: 850;
    box-shadow: 0 7px 17px rgba(2, 132, 199, 0.18);
}


/* ============================================================
   24. FOOTER
   ============================================================ */

.app-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    padding: 1.25rem 1.25rem 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--slate-500);
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

    .app-footer span {
        white-space: nowrap;
    }

.app-footer-heart {
    color: #ef4444;
    font-size: 0.95rem;
    animation: heart-pop 1.2s infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.app-footer-divider {
    color: var(--slate-400);
    opacity: 0.6;
    margin: 0 0.15rem;
}

.app-footer-version {
    color: var(--slate-600);
    font-weight: 600;
    font-size: 0.7rem;
    background: rgba(148, 163, 184, 0.15);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
}

.version-update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    padding: 0.65rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    animation: slideDownBanner 0.3s ease-out;
}

@keyframes slideDownBanner {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes heart-pop {
    0%, 100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.3);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(1);
    }
}

@keyframes heart-pop-mobile {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}


/* ============================================================
   25. LOGIN PAGE — Split on desktop, single-card on mobile
   ============================================================ */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: radial-gradient(circle at 20% 20%, rgba(2, 132, 199, 0.15), transparent 30%), radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.10), transparent 40%), linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #dbeafe 100%);
    position: relative;
    overflow: hidden;
}

    .login-body::before,
    .login-body::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
        animation: floatOrb 8s infinite alternate;
    }

    .login-body::before {
        width: 300px;
        height: 300px;
        background: rgba(2, 132, 199, 0.2);
        top: -100px;
        left: -100px;
    }

    .login-body::after {
        width: 250px;
        height: 250px;
        background: rgba(14, 165, 233, 0.2);
        bottom: -80px;
        right: -80px;
        animation-delay: 2s;
    }

@keyframes floatOrb {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(30px, -30px);
    }
}

@keyframes cardEntry {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    animation: cardEntry 0.5s ease-out;
}

.login-brand-panel {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 2.5rem 2.25rem;
    color: #fff;
    background: linear-gradient(135deg, #0b4a6f 0%, #0369a1 40%, #0284c7 75%, #0ea5e9 100%);
    position: relative;
    overflow: hidden;
}

    .login-brand-panel::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -100px;
        top: -80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        pointer-events: none;
    }

    .login-brand-panel::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        left: -70px;
        bottom: -70px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

    .login-eyebrow i {
        color: #fbbf24;
        font-size: 0.65rem;
    }

.login-headline {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    position: relative;
    z-index: 1;
}

    .login-headline span {
        display: block;
        background: linear-gradient(135deg, #fde68a, #fbbf24);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.login-features {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    position: relative;
    z-index: 1;
}

    .login-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

.login-feature-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

    .login-feature-icon i {
        color: #fff;
        font-size: inherit;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .login-feature-icon i::before {
            display: block;
            line-height: 1;
            vertical-align: baseline;
        }

.login-features strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 850;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Description text — scoped so it does NOT override the icon wrapper */
.login-features li > div > span {
    display: block;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.2rem;
    line-height: 1.4;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form-head {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}

.login-form-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto 0.5rem;
    display: block;
    filter: brightness(0) saturate(100%) invert(38%) sepia(90%) saturate(1500%) hue-rotate(180deg);
}

.login-form-head h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--slate-900);
}

.login-form-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--slate-500);
}

.login-card {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.18), 0 8px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

    .login-card .card-body {
        padding: 1.5rem 1.35rem !important;
    }

.brand-icon-wrapper {
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.35), 0 0 0 6px rgba(2, 132, 199, 0.1);
    animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 10px 24px rgba(2, 132, 199, 0.35), 0 0 0 6px rgba(2, 132, 199, 0.1);
    }

    50% {
        box-shadow: 0 10px 32px rgba(2, 132, 199, 0.5), 0 0 0 10px rgba(2, 132, 199, 0.12);
    }
}

.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.login-tagline {
    margin-top: 0.65rem;
    font-size: 0.78rem;
}

.login-card .form-label {
    color: var(--slate-600);
    font-size: 0.82rem;
    font-weight: 600;
}

.login-card .form-control {
    height: 48px;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--slate-300);
    border-radius: 10px;
    background: #fff;
    color: var(--slate-800);
    font-size: 0.92rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .login-card .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
    }

.login-card .input-group {
    border: 1px solid var(--slate-300);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .login-card .input-group:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
    }

    .login-card .input-group .form-control {
        height: 48px;
        border: none;
        border-radius: 0;
        padding: 0.7rem 0.95rem;
    }

        .login-card .input-group .form-control:focus {
            border: none;
            box-shadow: none;
        }

    .login-card .input-group .password-toggle {
        border: none;
        background: transparent;
        color: var(--slate-500);
        font-size: 1.05rem;
        padding: 0.5rem 0.95rem;
        transition: color 0.2s;
    }

        .login-card .input-group .password-toggle:hover {
            color: var(--primary);
        }

.login-card .btn-primary {
    height: 48px;
    border: none;
    border-radius: 10px;
    background: var(--primary-gradient);
    font-size: 0.95rem;
    font-weight: 700;
    transition: filter 0.15s;
}

    .login-card .btn-primary:hover {
        filter: brightness(0.95);
    }

.login-mobile-brand {
    display: block;
}

@media (min-width: 992px) {
    .login-shell {
        max-width: 920px;
        display: flex;
        background: #fff;
        border-radius: var(--radius-xl);
        box-shadow: 0 20px 50px rgba(2, 132, 199, 0.14), 0 6px 16px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        animation: cardEntry 0.5s ease-out;
    }

    .login-brand-panel {
        display: flex;
        flex: 0 0 42%;
        min-height: 520px;
    }

    .login-form-panel {
        flex: 1;
        min-width: 0;
        padding: 2.5rem 2.75rem;
        justify-content: center;
    }

    .login-form-head {
        display: flex;
    }

    .login-card {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

        .login-card .card-body {
            padding: 0 !important;
        }

        .login-card .btn-primary {
            height: 46px;
            border-radius: 10px;
        }

        .login-card .form-control,
        .login-card .input-group,
        .login-card .input-group .form-control {
            height: 46px;
        }

    .login-mobile-brand {
        display: none;
    }
}


/* ============================================================
   26. HANDHELD / OPERATOR
   ============================================================ */
.handheld-shell {
    max-width: 380px;
    margin: 20px auto;
    background: #fff;
    border: 8px solid var(--slate-800);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.handheld-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--slate-900);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.handheld-body {
    padding: 16px;
}

.scan-input-box {
    margin-bottom: 14px;
    padding: 14px;
    text-align: center;
    background: var(--slate-50);
    border: 2px dashed var(--primary);
    border-radius: var(--radius-sm);
}

    .scan-input-box input {
        width: 100%;
        padding: 9px;
        border: 1px solid var(--slate-300);
        border-radius: var(--radius-sm);
        text-align: center;
        font-size: 0.9rem;
        font-weight: 700;
    }

.progress-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 12px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
}

.progress-num {
    color: var(--primary-dark);
    font-size: 1.3rem;
    font-weight: 800;
}

.scan-reader-container {
    margin-bottom: 1rem;
}

.scan-reader {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.scan-processing-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6);
    z-index: 9999;
}

    .scan-processing-overlay.is-visible {
        display: flex;
    }

.scan-processing-spinner {
    width: 3rem;
    height: 3rem;
    color: #fff;
}

.scan-result-modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.putaway-info-btn {
    width: 30px;
    height: 30px;
    padding: 0;
}

.putaway-rack-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    background: var(--success-light);
    color: var(--success);
}

.sc-toast-container {
    z-index: 1100;
}

.sc-modal-icon {
    font-size: 3rem;
}


/* ============================================================
   26.1 SCANNER INPUT
   Applies to: #ScannedCode, #palletInput, #rackInput
   ============================================================ */
:is(#ScannedCode, #palletInput, #rackInput).scan-input {
    height: 52px;
    padding: 0 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-width: 2px;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    :is(#ScannedCode, #palletInput, #rackInput).scan-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
        outline: none;
    }

    :is(#ScannedCode, #palletInput, #rackInput).scan-input::placeholder {
        color: var(--slate-400);
        font-weight: 500;
        letter-spacing: 0;
    }

@media (min-width: 768px) {
    :is(#ScannedCode, #palletInput, #rackInput).scan-input {
        height: 56px;
        font-size: 1rem;
    }
}

.scan-listening-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate-500);
    letter-spacing: 0.01em;
}

.scan-listening-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    animation: scan-listening-pulse 1.6s ease-in-out infinite;
}

@keyframes scan-listening-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08);
    }
}


/* ============================================================
   26.2 REFRESH BAR — auto-refresh + last-sync indicator
   ============================================================ */
.sc-refresh-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.sc-last-sync {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--slate-500);
    letter-spacing: 0.01em;
}

    .sc-last-sync i {
        font-size: 0.72rem;
        color: #22c55e;
        transition: color 0.15s;
    }

    .sc-last-sync.stale i {
        color: var(--warning);
    }

    .sc-last-sync.error i {
        color: var(--danger);
    }

.sc-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-600);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .sc-refresh-btn:hover {
        color: var(--primary);
        background: var(--primary-light);
        border-color: #7dd3fc;
    }

    .sc-refresh-btn i {
        font-size: 0.78rem;
        transition: transform 0.4s ease;
    }

    .sc-refresh-btn.spinning i {
        animation: sc-refresh-spin 0.8s linear infinite;
    }

@keyframes sc-refresh-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767.98px) {
    /* Section title + refresh bar stack vertically on mobile */
    .sc-section-title-group {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Refresh bar becomes a compact full-width pill */
    .sc-refresh-bar {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.4rem 0.7rem;
        margin-bottom: 0;
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 50px;
    }

    /* Keep the timestamp visible on mobile — compressed */
    .sc-last-sync-text {
        display: inline;
        font-size: 0.68rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .sc-last-sync {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Icon-only refresh button on mobile */
    .sc-refresh-btn {
        padding: 0.35rem 0.55rem;
        border: none;
        background: transparent;
        flex: 0 0 auto;
    }

        .sc-refresh-btn:hover {
            background: var(--primary-light);
        }

    .sc-refresh-btn-label {
        display: none;
    }

    .sc-refresh-btn i {
        font-size: 0.9rem;
    }
}

.sc-section-header .sc-refresh-bar {
    margin-bottom: 0;
    justify-content: flex-start;
}

.sc-section-title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

/* ============================================================
   27. PUTAWAY STEP INDICATOR
   ============================================================ */
.putaway-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: var(--slate-50);
}

.putaway-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: -0.01em;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-500);
    transition: all 0.25s ease;
}

    .putaway-step i {
        font-size: 0.85rem;
    }

    .putaway-step.active {
        background: var(--primary-light);
        border-color: #7dd3fc;
        color: var(--primary-dark);
        box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
    }

    .putaway-step.done {
        background: var(--success-light);
        border-color: #86efac;
        color: #15803d;
    }

    .putaway-step .bi-check-circle-fill {
        font-size: 0.8rem;
        margin-left: 0.15rem;
        animation: putaway-check-pop 0.3s ease-out;
    }

.putaway-step-arrow {
    color: var(--slate-300);
    font-size: 0.75rem;
}

@keyframes putaway-check-pop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


/* ============================================================
   28. MOBILE CARDS
   ============================================================ */
.sc-mobile-card {
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-left: 4px solid var(--primary-light);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .sc-mobile-card:active {
        transform: scale(0.98);
        box-shadow: var(--shadow-md);
    }

.sc-mobile-card-header {
    padding: 1rem;
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .sc-mobile-card-header strong {
        font-size: 1rem;
        color: var(--slate-800);
        font-weight: 700;
    }

    .sc-mobile-card-header .text-muted {
        font-size: 0.78rem;
        color: var(--slate-500);
    }

.sc-mobile-card-body {
    padding: 0.75rem 1rem;
}

.sc-mobile-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--slate-100);
}

    .sc-mobile-field:last-child {
        border-bottom: none;
    }

.sc-mobile-label {
    flex: 0 0 40%;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sc-mobile-value {
    flex: 1;
    font-size: 0.85rem;
    color: var(--slate-700);
    text-align: right;
}

.sc-mobile-card-footer {
    padding: 0.6rem 1rem;
    background: var(--slate-50);
    border-top: 1px solid var(--slate-100);
    text-align: right;
}


/* ============================================================
   29. UNIVERSAL LOADER
   ============================================================ */
#universal-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    transition: opacity 0.3s, visibility 0.3s;
}

    #universal-loader.active {
        visibility: visible;
        opacity: 1;
    }

    #universal-loader .spinner-border {
        width: 4rem;
        height: 4rem;
        color: var(--primary);
        border-width: 0.22rem;
        border-color: #fff transparent #fff transparent;
    }

    #universal-loader p {
        margin-top: 1.1rem;
        color: #fff;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.07em;
    }


/* ============================================================
   30. UPLOAD PROGRESS DIALOG
   ============================================================ */
.upload-progress-track {
    height: 20px;
}

.upload-progress-fill {
    width: var(--upload-progress-width, 0%);
}


/* ============================================================
   30b. MODALS — reusable dialog component
   ============================================================ */
.sc-modal {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.sc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.2rem;
    background: linear-gradient(180deg, #fff, #fbfdff);
    border-bottom: 1px solid var(--slate-200);
    color: var(--slate-900);
}

    .sc-modal-header.danger {
        background: linear-gradient(135deg, #dc2626, #ef4444);
        border-bottom-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .sc-modal-header.success {
        background: linear-gradient(135deg, #15803d, #22c55e);
        border-bottom-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .sc-modal-header.warning {
        background: linear-gradient(135deg, #d97706, #f59e0b);
        border-bottom-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .sc-modal-header.info {
        background: var(--primary-gradient);
        border-bottom-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

.sc-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.sc-modal-header .btn-close {
    opacity: 0.85;
    transition: opacity 0.15s;
    margin: 0;
}

    .sc-modal-header .btn-close:hover {
        opacity: 1;
    }

.sc-modal-body {
    padding: 1.5rem 1.25rem;
    text-align: center;
}

    .sc-modal-body .sc-modal-icon {
        display: block;
        font-size: 3rem;
        line-height: 1;
        margin: 0 auto 0.9rem;
    }

    .sc-modal-body p {
        margin: 0;
    }

    .sc-modal-body .sc-modal-lead {
        font-size: 0.95rem;
        font-weight: 850;
        color: var(--slate-900);
        letter-spacing: -0.01em;
    }

    .sc-modal-body .sc-modal-sub {
        margin-top: 0.35rem;
        font-size: 0.78rem;
        color: var(--slate-500);
    }

.sc-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0 1.25rem 1.25rem;
}

    .sc-modal-footer .btn {
        flex: 0 0 auto;
        min-width: 130px;
        padding: 0.7rem 1.35rem;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }


/* ============================================================
   31. RESPONSIVE — CROSS-CUTTING OVERRIDES
   ============================================================ */

/* ── ≥ 768px small overrides ──────────────────────────────── */
@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

/* ── ≥ 576px action footer — desktop layout ───────────────── */
@media (min-width: 576px) {
    .sc-action-footer {
        flex-direction: row;
        justify-content: flex-end;
        gap: 0.6rem;
    }

        .sc-action-footer .btn {
            flex: 0 0 auto;
            width: auto;
            padding: 0.6rem 1.5rem;
        }
}

/* ── ≤ 1300px — metrics grid 2-column ─────────────────────── */
@media (max-width: 1300px) {
    .sc-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── ≤ 991.98px — tablet ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .app-content {
        padding: 1rem;
    }

    .sc-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sc-panel-meta {
        width: 100%;
        justify-content: flex-start;
    }

    /* Task tiles become rows */
    .sc-tasks-grid {
        grid-template-columns: 1fr;
    }

    .sc-task-tile {
        min-height: auto;
        flex-direction: row;
        align-items: center;
        padding: 0.85rem 0.9rem 0.85rem 1rem;
        gap: 0.85rem;
    }

    .sc-task-icon {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
        border-radius: 11px;
        flex-shrink: 0;
    }

    .sc-task-content {
        padding-right: 2.4rem;
    }

    .sc-task-title {
        font-size: 0.95rem;
    }

    .sc-task-arrow {
        top: 50%;
        bottom: auto;
        right: 0.8rem;
        transform: translateY(-50%);
    }

    .sc-task-tile:hover .sc-task-arrow {
        transform: translateY(-50%) translate(2px, -2px);
    }

    /* Pagination compact */
    .pagination {
        --bs-pagination-padding-x: 0.6rem;
        --bs-pagination-padding-y: 0.4rem;
        --bs-pagination-font-size: 0.8rem;
    }

        .pagination .page-link {
            min-height: 32px;
        }
}

/* ── ≤ 767.98px — mobile landscape ───────────────────────── */
@media (max-width: 767.98px) {
    .app-content {
        padding: 0.85rem;
    }

    .navbar-user span,
    .navbar-center {
        display: none;
    }

    .sc-panel-body {
        padding: 1rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    /* Feature tile stacks */
    .sc-feature-tile {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem;
    }

    .sc-feature-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
    }

    .sc-feature-title {
        font-size: 1.15rem;
    }

    .sc-feature-action {
        justify-content: center;
        width: 100%;
    }

    /* Section header stacks */
    .sc-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .sc-section-links {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .sc-section-link {
        flex: 1 1 auto;
        min-width: 130px;
        justify-content: center;
        padding: 0.55rem 0.85rem;
        font-size: 0.75rem;
        border-radius: 10px;
    }

        .sc-section-link i {
            font-size: 0.9rem;
        }

    .sc-section-link-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Delivery accordion mobile */
    .sc-delivery-toggle {
        padding: 0.9rem 1rem !important;
    }

    .sc-delivery-title {
        font-size: 0.92rem;
    }

    .sc-delivery-meta-line {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .sc-delivery-body {
        padding: 0.85rem 1rem !important;
    }

    .sc-supplier-block {
        max-width: 100%;
    }

    /* Filters full width */
    .sc-filter-w-sm,
    .sc-filter-w-md,
    .sc-filter-w-lg,
    .sc-filter-w-date {
        width: 100%;
        max-width: 100%;
    }

    /* Weight summary stacks */
    .sc-weight-summary {
        grid-template-columns: 1fr;
    }

    /* Action footer fixed to viewport bottom */
    .sc-action-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        margin: 0;
        border-top: 1px solid var(--slate-200);
        padding: 0.7rem 1.1rem;
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        .sc-action-footer .btn {
            flex: 1 1 40%;
            padding: 0.65rem 0.9rem;
            font-size: 0.85rem;
        }

    /* Remove empty dashboard padding when a fixed footer is present */
    .sc-dashboard:has(.sc-action-footer) {
        padding-bottom: 0;
    }

    /* Reserve space at the bottom of the copyright so the fixed
       buttons do not cover it */
    .app-content:has(.sc-action-footer) .app-footer {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }

    /* Putaway steps smaller */
    .putaway-steps {
        padding: 0.5rem 0.6rem;
        gap: 0.35rem;
    }

    .putaway-step {
        padding: 0.35rem 0.6rem;
        font-size: 0.65rem;
    }

        .putaway-step i {
            font-size: 0.78rem;
        }

    /* Step list tighter */
    .sc-step-badge {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        font-size: 0.88rem;
        border-radius: 10px;
    }

    .sc-step-item {
        gap: 0.75rem;
    }

    .sc-step-content strong {
        font-size: 0.85rem;
    }

    .sc-step-content span {
        font-size: 0.74rem;
    }


    .sc-panel-meta {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem !important;
    }

        /* Row 1 — count pill (left) */
        .sc-panel-meta > .sc-active-pill {
            order: 1;
        }

        /* Row 1 — add button (right) */
        .sc-panel-meta > .sc-filter-add-btn {
            order: 2;
            margin-left: auto;
        }

    .sc-panel-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

        /* Row 1 — count pill (left) */
        .sc-panel-meta > .sc-active-pill {
            order: 1;
            margin-right: auto;
        }

        /* Row 1 — add button (right) */
        .sc-panel-meta > .sc-filter-add-btn {
            order: 2;
            padding: 0 0.9rem;
            font-size: 0.78rem;
            flex-shrink: 0;
        }

        /* Search form gets its own block below */
        .sc-panel-meta > form {
            order: 3;
            flex-basis: 100%;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

            /* Search input — takes as much as possible, minimum 200px */
            .sc-panel-meta > form input[type="text"] {
                flex: 1 1 200px;
                min-width: 0;
                width: auto;
                max-width: 100%;
            }

            /* Filter dropdown — wraps to its own row */
            .sc-panel-meta > form select {
                flex: 1 1 100%;
                min-width: 0;
                width: auto;
                max-width: 100%;
                order: 10;
            }

            /* Search + Clear buttons — fixed 44×44 */
            .sc-panel-meta > form .sc-filter-btn {
                flex: 0 0 44px;
                width: 44px;
                min-width: 44px;
                order: 2;
            }
}

/* ── ≤ 575.98px — phone portrait ─────────────────────────── */
@media (max-width: 575.98px) {
    .navbar {
        min-height: 50px;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    .navbar-brand-icon-wrapper {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .app-content {
        padding: 0.7rem;
    }

    .sc-section-header h2 {
        font-size: 1rem;
    }

    .sc-metrics-grid {
        grid-template-columns: 1fr;
    }

    .sc-metric-card {
        min-height: 142px;
    }

    .login-card .card-body {
        padding: 2rem 1.35rem !important;
    }

    .sc-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .sc-panel-heading {
        margin-bottom: 0.5rem;
    }

    /* Master List toolbar — inherits layout from the 767.98 block;
       only tighten gaps here. */
    .sc-panel-meta {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.5rem;
    }

        .sc-panel-meta .sc-active-pill {
            flex: 0 0 auto;
        }

    /* Filter dropdowns keep their flex behavior inside the toolbar;
       the standalone width rule applies only outside the toolbar. */
    .sc-filter-select {
        width: 190px;
        max-width: 100%;
    }

    .sc-panel-meta > form .sc-filter-select {
        width: auto;
    }

    .sc-section-link {
        min-width: 110px;
        padding: 0.5rem 0.7rem;
        font-size: 0.7rem;
        border-radius: 9px;
    }

        .sc-section-link i {
            font-size: 0.85rem;
        }

    /* Footer stacks - Clean centering and compact mobile padding */
    .app-footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.68rem;
        text-align: center;
        width: 100%;
    }

        .app-footer span {
            white-space: normal;
            text-align: center;
        }

    .app-footer-heart {
        font-size: 0.85rem;
        animation: heart-pop-mobile 1.5s infinite;
    }

    /* Re-apply the extra bottom padding on phones — the shorthand
       padding rule above resets it, so we must restore it AFTER it */
    .app-content:has(.sc-action-footer) .app-footer {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── ≤ 400px — very small phones ─────────────────────────── */
@media (max-width: 400px) {
    .sc-section-link {
        min-width: 100px;
        padding: 0.45rem 0.6rem;
        font-size: 0.68rem;
    }

        .sc-section-link i {
            font-size: 0.8rem;
        }

    .pagination {
        --bs-pagination-padding-x: 0.5rem;
        --bs-pagination-padding-y: 0.3rem;
        --bs-pagination-font-size: 0.72rem;
    }

    /* Master List toolbar — tighter gaps on very small phones */
    .sc-panel-meta {
        gap: 0.4rem !important;
    }

        .sc-panel-meta > form {
            gap: 0.4rem;
        }
}


/* ============================================================
   32. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}


/* ============================================================
   33. PAGE-SPECIFIC — CREATE MOVEMENT REQUEST
   ============================================================ */

/* 33.1 — Product Insights Grid */
.sc-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.sc-insight-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.9rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
    min-width: 0;
}

.sc-insight-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
}

.sc-insight-value {
    color: var(--slate-800);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sc-insight-value strong {
        color: var(--slate-900);
        font-weight: 850;
    }

    .sc-insight-value span {
        color: var(--slate-400);
        font-size: 0.68rem;
        font-weight: 700;
    }

@media (max-width: 767.98px) {
    .sc-insights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 33.2 — Pallet Pick Grid */
.sc-pallet-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}

.sc-pallet-pick {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 11px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    min-width: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .sc-pallet-pick:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.25);
    }

.sc-pallet-pick-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 0.75rem;
}

.sc-pallet-pick-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.sc-pallet-pick-code {
    font-size: 0.8rem;
    font-weight: 850;
    color: #166534;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pallet-pick-meta {
    font-size: 0.65rem;
    font-weight: 600;
    color: #15803d;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pallet-pick-remove {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #dc2626;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

    .sc-pallet-pick-remove:hover {
        background: #fee2e2;
        color: #b91c1c;
        border-color: #fca5a5;
        transform: scale(1.05);
    }

    .sc-pallet-pick-remove:focus-visible {
        outline: 3px solid rgba(220, 38, 38, 0.25);
        outline-offset: 1px;
    }


/* 33.3 — Leftover Material list (shared base) */
.sc-leftover-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sc-leftover-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-left: 3px solid var(--success);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}

.sc-leftover-wo {
    font-size: 0.85rem;
    font-weight: 850;
    color: var(--slate-900);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.sc-leftover-meta {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-leftover-kg {
    font-size: 0.85rem;
    font-weight: 850;
    color: #15803d;
    white-space: nowrap;
}


/* 33.4 — Leftover block inside the narrow Required Quantity (KG) column
         Scoped to #leftoverSection only — forces a 2-row stacked item
         layout so the WO meta never truncates in the narrow column. */
#leftoverSection {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    #leftoverSection .sc-pallet-list-header {
        margin-bottom: 0;
        gap: 0.4rem;
    }

    #leftoverSection .sc-pallet-list-title {
        font-size: 0.66rem;
        letter-spacing: 0.04em;
    }

    #leftoverSection .sc-active-pill {
        padding: 0.26rem 0.55rem;
        font-size: 0.55rem;
        flex-shrink: 0;
    }

        #leftoverSection .sc-active-pill strong {
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: -0.01em;
        }

    #leftoverSection .sc-info-banner {
        font-size: 0.66rem;
        padding: 0.42rem 0.6rem;
        line-height: 1.35;
        gap: 0.4rem;
    }

        #leftoverSection .sc-info-banner i {
            font-size: 0.8rem;
        }

    /* 2-row stacked item — WO + KG on top, meta wraps below */
    #leftoverSection .sc-leftover-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "wo   kg"
            "meta meta";
        row-gap: 0.2rem;
        column-gap: 0.6rem;
        padding: 0.55rem 0.7rem;
        align-items: center;
    }

    #leftoverSection .sc-leftover-wo {
        grid-area: wo;
        font-size: 0.78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #leftoverSection .sc-leftover-kg {
        grid-area: kg;
        font-size: 0.78rem;
        align-self: center;
    }

    #leftoverSection .sc-leftover-meta {
        grid-area: meta;
        font-size: 0.63rem;
        line-height: 1.35;
        white-space: normal; /* allow wrap instead of truncate */
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }


/* KG meta row inside Active Production Requests table */
.sc-kg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    margin-top: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--slate-500);
}

    .sc-kg-meta strong {
        color: var(--slate-800);
        font-weight: 850;
    }

.sc-kg-meta-leftover strong {
    color: #15803d;
}


/* 33.5 — Pick mode toggle + Alternatives + Manual list */
.sc-pick-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 50px;
}

    .sc-pick-mode-toggle button {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.35rem 0.75rem;
        border: none;
        background: transparent;
        color: var(--slate-600);
        font-size: 0.7rem;
        font-weight: 750;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

        .sc-pick-mode-toggle button.active {
            background: #fff;
            color: var(--primary);
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
        }

        .sc-pick-mode-toggle button i {
            font-size: 0.8rem;
        }

.sc-pallet-empty {
    grid-column: 1 / -1;
    padding: 1.2rem 1rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--slate-500);
    border: 1px dashed var(--slate-300);
    border-radius: 11px;
    background: var(--slate-50);
}

/* Alternatives — dashed, muted, clickable to add */
.sc-pallet-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}

.sc-pallet-alt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 11px;
    border: 1px dashed var(--slate-300);
    background: #fff;
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

    .sc-pallet-alt:hover {
        border-color: var(--primary);
        box-shadow: 0 6px 14px -8px rgba(2, 132, 199, 0.3);
        transform: translateY(-1px);
    }

.sc-pallet-alt-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 0.75rem;
}

.sc-pallet-alt-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.sc-pallet-alt-code {
    font-size: 0.8rem;
    font-weight: 850;
    color: var(--slate-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pallet-alt-meta {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pallet-alt-add {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #bae6fd;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

    .sc-pallet-alt-add:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        transform: scale(1.05);
    }

    .sc-pallet-alt-add:focus-visible {
        outline: 3px solid rgba(2, 132, 199, 0.25);
        outline-offset: 1px;
    }

/* Manual — full pool list */
.sc-pallet-manual-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.sc-pallet-manual {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .sc-pallet-manual:hover {
        border-color: var(--slate-300);
        background: var(--slate-50);
    }

    .sc-pallet-manual.selected {
        border-color: #bbf7d0;
        background: #f0fdf4;
    }

.sc-pallet-manual-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--slate-300);
    color: transparent;
    font-size: 0.75rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sc-pallet-manual.selected .sc-pallet-manual-check {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.sc-pallet-manual-content {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.sc-pallet-manual-code {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--slate-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pallet-manual.selected .sc-pallet-manual-code {
    color: #166534;
}

.sc-pallet-manual-meta {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .sc-pick-mode-toggle button {
        padding: 0.3rem 0.6rem;
        font-size: 0.66rem;
    }
}

/* Suggested alternative — highlighted */
.sc-pallet-alt.suggested {
    position: relative;
    border: 1px solid var(--primary);
    background: var(--primary-light);
    box-shadow: 0 6px 16px -8px rgba(2, 132, 199, 0.35);
}

.sc-pallet-alt-badge {
    position: absolute;
    top: -8px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    background: var(--primary);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);
}

    .sc-pallet-alt-badge i {
        font-size: 0.65rem;
    }

.sc-pallet-alt.suggested .sc-pallet-alt-icon {
    background: rgba(2, 132, 199, 0.15);
    color: var(--primary);
}

.sc-pallet-alt.suggested .sc-pallet-alt-code {
    color: var(--primary-dark);
}


/* 33.6 — Selected-pallets summary highlight ("6 selected · 3165.10 KG") */
.sc-pallet-list-count.highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.9rem;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary-light), #fff);
    border: 1px solid #7dd3fc;
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: -0.005em;
    box-shadow: 0 3px 10px -4px rgba(2, 132, 199, 0.35);
    white-space: nowrap;
}

    .sc-pallet-list-count.highlight strong {
        color: var(--primary);
        font-weight: 900;
        font-size: 0.82rem;
        letter-spacing: -0.01em;
    }


/* 33.8 — Expired Pallet Warning & Yellow Tint */
.sc-pallet-expired-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    background: #fef08a;
    color: #854d0e;
    border: 1px solid #fde047;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Picked Pallet — yellow tint when expired */
.sc-pallet-pick.is-expired {
    background: #fffbeb !important;
    border-color: #fde047 !important;
}

.sc-pallet-pick.is-expired:hover {
    box-shadow: 0 6px 14px -6px rgba(202, 138, 4, 0.35) !important;
}

.sc-pallet-pick-icon.expired {
    background: #eab308 !important;
    color: #fff !important;
}

.sc-pallet-pick.is-expired .sc-pallet-pick-code {
    color: #854d0e !important;
}

.sc-pallet-pick.is-expired .sc-pallet-pick-meta {
    color: #a16207 !important;
}

/* Alternative Pallet — yellow tint when expired */
.sc-pallet-alt.is-expired {
    background: #fffdf0 !important;
    border-color: #fde047 !important;
}

.sc-pallet-alt-icon.expired {
    background: #fef08a !important;
    color: #a16207 !important;
}

.sc-pallet-alt.is-expired .sc-pallet-alt-code {
    color: #854d0e !important;
}

/* Manual Pallet Row — yellow tint when expired */
.sc-pallet-manual.is-expired {
    background: #fffdf0;
    border-color: #fef08a;
}

.sc-pallet-manual.is-expired:hover {
    background: #fefce8;
    border-color: #fde047;
}

.sc-pallet-manual.selected.is-expired {
    background: #fef9c3 !important;
    border-color: #eab308 !important;
}

.sc-pallet-manual.selected.is-expired .sc-pallet-manual-check {
    background: #eab308 !important;
    border-color: #eab308 !important;
}

.sc-pallet-manual.is-expired .sc-pallet-manual-code {
    color: #854d0e;
}

/* 33.7 — Dashboard table scroll + Load more */
.sc-table-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

    .sc-table-scroll .sc-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--slate-200);
        box-shadow: 0 1px 0 var(--slate-300);
    }

.sc-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0.85rem 0 0;
}

/* ============================================================
   33.5 — DASHBOARD TABLE SCROLL + LOAD MORE
   ============================================================ */

/* Constrain dashboard table height so it matches the ~5-row visible area */
.sc-table-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

    /* Keep the header visible while scrolling */
    .sc-table-scroll .sc-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--slate-200);
        box-shadow: 0 1px 0 var(--slate-300);
    }

/* Load More wrapper + button */
.sc-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0.85rem 0 0;
}

.sc-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.15rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-600);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

    .sc-load-more-btn:hover {
        color: var(--primary);
        background: var(--primary-light);
        border-color: #7dd3fc;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(2, 132, 199, 0.12);
    }

    .sc-load-more-btn i {
        font-size: 0.8rem;
        opacity: 0.85;
    }

.sc-pallet-pick, .sc-pallet-alt, .sc-pallet-manual {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}