/*
Theme Name: TSS Inventory Manager System
Theme URI: https://tss-ims.local
Description: TSS Inventory Manager System — Especially for Garment Industry
Version: 1.1.0
Author: TSS Development Team
Text Domain: garment-ims
*/

/* ── Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--sidebar-bg:linear-gradient(175deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%);
--sidebar-hover:#3730a3;
--sidebar-active:#4f46e5;
--content-bg:#f5f7ff;
--card-bg:#fff;
--primary:#4f46e5;--primary-light:#6366f1;--primary-dark:#3730a3;
--danger:#dc2626;--danger-light:#fef2f2;
--success:#16a34a;--success-light:#f0fdf4;
--warning:#d97706;--warning-light:#fffbeb;
--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;
--border:#e2e8f0;--border-light:#f1f5f9;
--shadow-sm:0 1px 3px rgba(79,70,229,.08);
--shadow-md:0 4px 12px rgba(79,70,229,.1),0 2px 4px rgba(0,0,0,.06);
--shadow-lg:0 10px 25px rgba(79,70,229,.12),0 4px 10px rgba(0,0,0,.08);
}

html,body{height:100%;overflow:hidden}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--content-bg);color:var(--text-primary)}

/* ── Layout ─────────────────────────────────────────────────────────── */
.gims-app{display:flex;height:100vh;width:100vw;overflow:hidden}
.gims-sidebar{width:248px;min-width:248px;height:100vh;background:linear-gradient(175deg,#1e1b4b 0%,#312e81 55%,#1e1b4b 100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:4px 0 20px rgba(79,70,229,.25)}
.gims-main{flex:1;display:flex;flex-direction:column;min-width:0}
.gims-topbar{height:60px;min-height:60px;background:#fff;border-bottom:1px solid var(--border);padding:0 28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 8px rgba(79,70,229,.06)}
.gims-content{flex:1;overflow:auto;padding:28px;background:var(--content-bg)}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar-logo{padding:20px 16px 18px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:12px}
.sidebar-logo-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#818cf8,#4f46e5);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(99,102,241,.5);flex-shrink:0}
.sidebar-logo-icon svg{width:20px;height:20px;color:#fff;fill:none;stroke:currentColor;stroke-width:2}
.sidebar-logo h1{font-size:12.5px;font-weight:800;color:#fff;letter-spacing:.04em;line-height:1.2}
.sidebar-logo p{font-size:9px;color:rgba(199,210,254,.75);font-weight:500;letter-spacing:.02em;margin-top:2px;line-height:1.3}

.sidebar-nav{flex:1;overflow:auto;padding:12px 10px}
.nav-group{margin-bottom:18px}
.nav-group-label{padding:0 10px;margin-bottom:6px;font-size:9.5px;font-weight:700;color:rgba(165,180,252,.55);text-transform:uppercase;letter-spacing:.1em}
.nav-btn{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:none;background:none;color:rgba(196,181,253,.7);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;margin-bottom:2px;text-align:left;font-family:inherit}
.nav-btn:hover{background:rgba(255,255,255,.08);color:#e0e7ff}
.nav-btn.active{background:rgba(99,102,241,.28);color:#c7d2fe;box-shadow:0 0 0 1px rgba(99,102,241,.4)}
.nav-btn svg{width:17px;height:17px;flex-shrink:0}
.nav-btn .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#818cf8;display:none}
.nav-btn.active .dot{display:block}

.sidebar-bottom{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:12px}
.sidebar-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#818cf8,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.sidebar-bottom .name{font-size:12px;font-weight:600;color:#e0e7ff}
.sidebar-bottom .role{font-size:10px;color:rgba(165,180,252,.6)}

/* ── TopBar ─────────────────────────────────────────────────────────── */
.topbar-title{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:24px}
.topbar-clock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);background:#f5f7ff;padding:6px 12px;border-radius:8px;border:1px solid var(--border)}
.topbar-clock svg{width:15px;height:15px;color:var(--primary)}
.topbar-clock .sep{color:var(--text-muted)}
.topbar-clock .time{font-family:'Courier New',monospace;font-size:12px;font-variant-numeric:tabular-nums;color:var(--primary);font-weight:600}
.topbar-user{display:flex;align-items:center;gap:8px;padding-left:16px;border-left:1px solid var(--border)}
.topbar-user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#c7d2fe,#ddd6fe);display:flex;align-items:center;justify-content:center}
.topbar-user-avatar svg{width:14px;height:14px;color:#4f46e5}
.topbar-user .uname{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1}
.topbar-user .urole{font-size:10px;color:var(--text-muted);line-height:1;margin-top:2px}

/* ── Cards & Stat Cards ─────────────────────────────────────────────── */
.card{background:#fff;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.card-header h3{font-size:14px;font-weight:700;color:var(--text-primary)}
.card-body{padding:20px 22px}

.stat-card{background:#fff;border-radius:14px;border:1px solid var(--border);padding:22px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat-card-inner{display:flex;align-items:flex-start;justify-content:space-between}
.stat-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.stat-value{font-size:26px;font-weight:800;color:var(--text-primary);letter-spacing:-.02em}
.stat-sub{font-size:11px;color:var(--text-muted);margin-top:5px}
.stat-icon{padding:11px;border-radius:12px}
.stat-icon svg{width:22px;height:22px}
.stat-icon.blue{background:#ede9fe}.stat-icon.blue svg{color:#4f46e5}
.stat-icon.red{background:#fee2e2}.stat-icon.red svg{color:#dc2626}
.stat-icon.green{background:#dcfce7}.stat-icon.green svg{color:#16a34a}
.stat-icon.amber{background:#fef3c7}.stat-icon.amber svg{color:#d97706}
.stat-icon.purple{background:#f5f3ff}.stat-icon.purple svg{color:#7c3aed}

/* ── Grid Helpers ───────────────────────────────────────────────────── */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.col-span-2{grid-column:span 2}
.space-y>*+*{margin-top:16px}
.space-y-sm>*+*{margin-top:12px}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-end{display:flex;justify-content:flex-end}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .15s;font-family:inherit}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.3)}.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(79,70,229,.4)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#15803d}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:#f1f5f9}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-sm svg{width:14px;height:14px}
.btn-icon{padding:6px;border-radius:8px;border:none;background:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.btn-icon svg{width:16px;height:16px}
.btn-icon.edit{color:#4f46e5}.btn-icon.edit:hover{background:#ede9fe}
.btn-icon.delete{color:#ef4444}.btn-icon.delete:hover{background:#fee2e2}
.btn-icon.success{color:#16a34a}.btn-icon.success:hover{background:#dcfce7}
.btn:disabled,.btn-icon:disabled{opacity:.5;cursor:not-allowed}

/* ── Table ──────────────────────────────────────────────────────────── */
.table-wrap{overflow:auto;max-height:calc(100vh - 320px);border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm)}
.data-table{width:100%;font-size:14px;border-collapse:collapse}
.data-table thead{position:sticky;top:0;z-index:10}
.data-table th{padding:12px 16px;text-align:left;font-weight:600;font-size:12px;color:var(--text-secondary);background:#f8fafc;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
.data-table th:hover{color:var(--primary)}
.data-table th .sort-icon{display:inline-flex;margin-left:4px;vertical-align:middle;color:#cbd5e1}
.data-table td{padding:12px 16px;color:var(--text-primary);border-bottom:1px solid var(--border-light)}
.data-table tr:nth-child(even){background:rgba(248,250,252,.5)}
.data-table tr:hover{background:rgba(219,234,254,.3)}
.data-table .actions-cell{text-align:right;white-space:nowrap}
.data-table .actions-cell .btn-icon{display:inline-flex}
.row-low-stock{background:#fef2f2!important}
.row-low-stock:hover{background:#fee2e2!important}
.empty-state{padding:64px 20px;text-align:center;color:var(--text-muted)}
.empty-state svg{width:48px;height:48px;margin:0 auto 12px;stroke-width:1}
.empty-state p{font-size:14px;font-weight:500}
.empty-state .sub{font-size:12px;margin-top:4px}
.font-mono{font-family:'Courier New',monospace}
.text-green{color:#16a34a}.text-red{color:#dc2626}.text-amber{color:#d97706}.text-blue{color:#2563eb}

/* ── Search ─────────────────────────────────────────────────────────── */
.search-wrap{position:relative;margin-bottom:16px}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted)}
.search-wrap input{padding:8px 12px 8px 36px;max-width:320px}

/* ── Pagination ─────────────────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:14px;color:var(--text-secondary)}
.pagination-btns{display:flex;align-items:center;gap:4px}
.page-btn{width:32px;height:32px;border-radius:8px;border:none;background:none;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:inherit}
.page-btn:hover{background:#f1f5f9}
.page-btn.active{background:var(--primary);color:#fff}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-btn svg{width:16px;height:16px}

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-input{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text-primary);background:#fff;transition:border-color .15s,box-shadow .15s;outline:none}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-input.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
.form-label .req{color:var(--danger)}
.form-group{margin-bottom:16px}
.form-error{font-size:12px;color:var(--danger);margin-top:4px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:1.5em;padding-right:40px}
textarea.form-input{resize:vertical}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:9999px;font-size:12px;font-weight:600;text-transform:capitalize}
.badge-pending{background:#fef3c7;color:#92400e}
.badge-in_progress{background:#ede9fe;color:#4f46e5}
.badge-completed{background:#dcfce7;color:#166534}
.badge-shipped,.badge-dispatched{background:#f1f5f9;color:#475569}
.badge-ready{background:#e0f2fe;color:#0c4a6e}
/* Dispatch pipeline card color */
.pipeline-card.dispatch{background:#f5f3ff;border-color:#ddd6fe}.pipeline-card.dispatch .label{color:#6d28d9}
.pipeline-card.dispatch .progress-fill{background:#7c3aed}

/* ── Modal (Slide-in Panel) ─────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(2px)}
.modal-panel{position:relative;height:100%;width:520px;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column}
.modal-panel.sm{width:400px}
.modal-panel.lg{width:680px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:18px;font-weight:600;color:var(--text-primary)}
.modal-body{flex:1;overflow:auto;padding:20px 24px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);background:rgba(248,250,252,.5)}

/* Modal Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideOutRight{from{transform:translateX(0)}to{transform:translateX(100%)}}
.modal-backdrop.enter{animation:fadeIn .2s ease-out forwards}
.modal-backdrop.exit{animation:fadeOut .2s ease-in forwards}
.modal-panel.enter{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards}
.modal-panel.exit{animation:slideOutRight .25s ease-in forwards}

/* ── Confirm Dialog ─────────────────────────────────────────────────── */
.confirm-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.confirm-dialog{position:relative;background:#fff;border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);padding:24px;width:420px}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.confirm-dialog.enter{animation:scaleIn .2s ease-out forwards}

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast-container{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid;min-width:300px;max-width:420px;background:#fff}
.toast.success{border-color:#a7f3d0}.toast.error{border-color:#fecaca}
.toast svg{width:20px;height:20px;flex-shrink:0}
.toast.success svg{color:#10b981}.toast.error svg{color:#ef4444}
.toast p{font-size:14px;font-weight:500;color:var(--text-primary);flex:1}
.toast .close{padding:4px;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--text-muted);transition:background .15s;display:flex}
.toast .close:hover{background:#f1f5f9}
.toast .close svg{width:14px;height:14px}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
.toast.enter{animation:toastIn .3s cubic-bezier(.16,1,.3,1) forwards}
.toast.exit{animation:toastOut .25s ease-in forwards}

/* ── Spinner ────────────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
.spinner-sm{width:16px;height:16px;border-width:2px}
.loading-center{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}

/* ── Pulse Alert ────────────────────────────────────────────────────── */
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
.pulse-alert{animation:pulseRed 2s infinite}

/* ── Pipeline Cards ─────────────────────────────────────────────────── */
.pipeline-card{padding:16px;border-radius:12px;border:1px solid}
.pipeline-card.cutting{background:#fff7ed;border-color:#fed7aa}.pipeline-card.cutting .label{color:#c2410c}
.pipeline-card.stitching{background:#eff6ff;border-color:#bfdbfe}.pipeline-card.stitching .label{color:#1d4ed8}
.pipeline-card.ironing{background:#faf5ff;border-color:#e9d5ff}.pipeline-card.ironing .label{color:#7e22ce}
.pipeline-card.packing{background:#ecfdf5;border-color:#a7f3d0}.pipeline-card.packing .label{color:#16a34a}
.progress-bar{width:100%;height:8px;border-radius:4px;background:rgba(255,255,255,.6);margin:12px 0;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;transition:width .3s}
.pipeline-card.cutting .progress-fill{background:#f97316}
.pipeline-card.stitching .progress-fill{background:#3b82f6}
.pipeline-card.ironing .progress-fill{background:#a855f7}
.pipeline-card.packing .progress-fill{background:#22c55e}
.pipeline-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10px}
.pipeline-stats .plabel{color:var(--text-muted)}
.pipeline-stats .pval{font-size:14px;font-weight:600}

/* In House Production Pipeline Colors */
.pipeline-card.yarn{background:#f0fdfa;border-color:#99f6e4}.pipeline-card.yarn .label{color:#0f766e}
.pipeline-card.yarn .progress-fill{background:#14b8a6}
.pipeline-card.knit{background:#eef2ff;border-color:#c7d2fe}.pipeline-card.knit .label{color:#4338ca}
.pipeline-card.knit .progress-fill{background:#6366f1}
.pipeline-card.dye{background:#fff1f2;border-color:#fecdd3}.pipeline-card.dye .label{color:#be123c}
.pipeline-card.dye .progress-fill{background:#f43f5e}
.pipeline-stats .col-3{grid-template-columns:1fr 1fr 1fr}

/* ── Toggle Switch ──────────────────────────────────────────────────── */
.toggle{position:relative;width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;transition:background .2s}
.toggle.on{background:#22c55e}.toggle.off{background:#d1d5db}
.toggle-knob{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s}
.toggle.on .toggle-knob{transform:translateX(22px)}
.toggle.off .toggle-knob{transform:translateX(2px)}

/* ── Report Cards ───────────────────────────────────────────────────── */
.report-card{background:#fff;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:20px;transition:box-shadow .2s}
.report-card:hover{box-shadow:var(--shadow-md)}
.report-card h3{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.report-card .desc{font-size:12px;color:var(--text-muted)}
.report-btns{display:flex;gap:8px;margin-left:16px}
.btn-pdf{background:#fef2f2;color:#b91c1c;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}
.btn-pdf:hover{background:#fee2e2}
.btn-excel{background:#f0fdf4;color:#15803d;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}
.btn-excel:hover{background:#dcfce7}

/* ── Wastage Summary Cards ──────────────────────────────────────────── */
.wastage-summary{padding:12px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.wastage-summary .wlabel{font-size:12px;color:var(--text-muted);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wastage-summary .wval{font-size:18px;font-weight:700;color:#dc2626}

/* ── Low Stock Bar ──────────────────────────────────────────────────── */
.low-stock-item{padding:12px;border-radius:8px;background:rgba(254,242,242,.6);border:1px solid #fecaca}
.low-stock-bar{width:100%;height:6px;border-radius:3px;background:#fecaca;margin:6px 0;overflow:hidden}
.low-stock-fill{height:100%;border-radius:3px;background:#ef4444}

/* ── Utility ────────────────────────────────────────────────────────── */
.capitalize{text-transform:capitalize}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-lg{font-size:18px}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}
.w-auto{width:auto}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:1024px){
.gims-sidebar{width:200px;min-width:200px}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.gims-sidebar{display:none}
.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
.col-span-2{grid-column:span 1}
.modal-panel,.modal-panel.sm,.modal-panel.lg{width:100%}
.form-grid-2,.form-grid-3{grid-template-columns:1fr}
}

/* ── Custom Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── Additional Grid & Layout Utilities ─────────────────────────────── */
.col-span-3{grid-column:span 3}
.mb-0{margin-bottom:0!important}
.text-purple{color:#7c3aed}
.text-indigo{color:#4f46e5}
.font-bold{font-weight:700}

/* ── Actions cell gap ────────────────────────────────────────────────── */
.actions-cell .btn-icon + .btn-icon{margin-left:2px}

/* ── Form note info box ──────────────────────────────────────────────── */
.form-note{padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.5}

/* ── Stat card purple icon ───────────────────────────────────────────── */
.stat-icon.indigo{background:#ede9fe}.stat-icon.indigo svg{color:#4f46e5}

/* ── Report export buttons disabled state ───────────────────────────── */
.btn-pdf:disabled,.btn-excel:disabled{opacity:.5;cursor:not-allowed}

/* ── Modal md wider ─────────────────────────────────────────────────── */
.modal-panel.md{width:560px}

/* ── Order timeline section ─────────────────────────────────────────── */
.mt-4{margin-top:16px}

/* ── Supplier detail inline table ───────────────────────────────────── */
#supplier-detail .data-table th{background:#f8fafc;font-size:11px}
#supplier-detail .data-table td{font-size:12px;padding:8px 12px}

/* ── Dispatch form order select info ────────────────────────────────── */
#field-order_id option{font-size:13px}

/* ── Due-date warning helpers already in utility, add pulse for due ─── */
@keyframes pulseDue{0%,100%{opacity:1}50%{opacity:.7}}
.overdue{color:var(--danger);font-weight:600}
.due-soon{color:var(--warning);font-weight:600}

/* ── Responsive additions ───────────────────────────────────────────── */
@media(max-width:1280px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .gims-sidebar{width:200px;min-width:200px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .col-span-2{grid-column:span 2}
}
@media(max-width:768px){
  .gims-sidebar{display:none}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .col-span-2,.col-span-3{grid-column:span 1}
  .modal-panel,.modal-panel.sm,.modal-panel.md,.modal-panel.lg{width:100%}
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .report-btns{flex-direction:column}
  .stat-value{font-size:20px}
}

/* ══════════════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ══════════════════════════════════════════════════════════════════════ */

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 30%, #302b63 60%, #24243e 100%);
  overflow: hidden;
}

/* Animated Background Shapes */
.login-bg-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
}

.shape-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #6366f1, transparent);
  top: -100px;
  right: -100px;
  animation: loginFloat 12s ease-in-out infinite;
}

.shape-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #8b5cf6, transparent);
  bottom: -50px;
  left: -100px;
  animation: loginFloat 15s ease-in-out infinite reverse;
}

.shape-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #a855f7, transparent);
  top: 40%;
  left: 50%;
  animation: loginFloat 10s ease-in-out infinite 2s;
}

@keyframes loginFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.05); }
  66%      { transform: translate(-20px, 15px) scale(0.95); }
}

/* Login Card */
.login-card {
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: 92vw;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 40px 36px;
  animation: loginCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Login Header */
.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.login-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
}

.login-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 14px;
  color: rgba(196, 181, 253, 0.7);
  font-weight: 400;
}

/* Login Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(199, 210, 254, 0.8);
  letter-spacing: 0.02em;
}

.login-label svg {
  color: rgba(165, 180, 252, 0.6);
}

.login-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  color: #fff;
  outline: none;
  transition: all 0.2s ease;
}

.login-input::placeholder {
  color: rgba(165, 180, 252, 0.35);
}

.login-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Password Wrapper */
.login-password-wrap {
  position: relative;
}

.login-password-wrap .login-input {
  padding-right: 44px;
}

.login-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: rgba(165, 180, 252, 0.5);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.login-eye-btn:hover {
  color: rgba(199, 210, 254, 0.9);
}

/* Login Button */
.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}

.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.login-btn-text {
  display: inline;
}

.login-btn-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Login Spinner */
.login-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Login Error */
.login-error {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 13px;
  font-weight: 500;
  animation: loginErrorIn 0.3s ease forwards;
}

.login-error svg {
  flex-shrink: 0;
  color: #f87171;
}

@keyframes loginErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shake Animation */
@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.login-card.shake {
  animation: loginShake 0.5s ease;
}

/* Success Animation */
.login-card.login-success {
  animation: loginSuccessOut 0.4s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

@keyframes loginSuccessOut {
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}

/* Login Footer */
.login-footer {
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-footer p {
  font-size: 12px;
  color: rgba(165, 180, 252, 0.4);
  font-weight: 500;
}

.login-footer-sub {
  font-size: 10px !important;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR USER DROPDOWN
   ══════════════════════════════════════════════════════════════════════ */

.topbar-user {
  position: relative;
  cursor: pointer;
}

.topbar-chevron {
  color: var(--text-muted);
  margin-left: 4px;
  transition: transform 0.2s;
}

.topbar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: none;
  z-index: 50;
  animation: dropdownIn 0.2s ease forwards;
}

.topbar-dropdown.open {
  display: block;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.dropdown-item:hover {
  background: #f5f3ff;
  color: var(--primary);
}

.dropdown-item svg {
  flex-shrink: 0;
}

.dropdown-danger {
  color: #dc2626;
}

.dropdown-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR LOGOUT BUTTON
   ══════════════════════════════════════════════════════════════════════ */

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-logout-btn {
  padding: 6px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(196, 181, 253, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ══════════════════════════════════════════════════════════════════════
   PRODUCTION PIPELINE — INCOMING QUEUE
   ══════════════════════════════════════════════════════════════════════ */

.incoming-queue-section {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
}

.incoming-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.incoming-queue-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
}

.incoming-queue-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.incoming-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 16px 20px;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.incoming-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.incoming-card-left {
  flex: 1;
  min-width: 0;
}

.incoming-order-num {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.incoming-customer {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.incoming-item {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.incoming-card-center {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.incoming-stat {
  text-align: center;
}

.incoming-stat .label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}

.incoming-stat .val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.incoming-prev-info {
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.incoming-card-right {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   ALERT BANNER
   ══════════════════════════════════════════════════════════════════════ */

@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.alert-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #fca5a5;
  border-radius: 12px;
  transition: all 0.3s;
}

.alert-banner.pulse {
  animation: alertPulse 2s infinite;
}

.alert-banner-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.alert-banner-content {
  flex: 1;
  min-width: 0;
}

.alert-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: #991b1b;
  margin-bottom: 2px;
}

.alert-banner-msg {
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.4;
}

.alert-banner-meta {
  font-size: 11px;
  color: #dc2626;
  margin-top: 4px;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════
   UNIT SWITCHER
   ══════════════════════════════════════════════════════════════════════ */

.unit-switcher {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.unit-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.unit-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.unit-btn:not(.active):hover {
  background: #e2e8f0;
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════════
   FABRIC LOT SELECTION
   ══════════════════════════════════════════════════════════════════════ */

.fabric-availability-section {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.fabric-lots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.fabric-lot-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.fabric-lot-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

.fabric-lot-card:has(.fabric-lot-check:checked) {
  border-color: var(--primary);
  background: #ede9fe;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.fabric-lot-card.low-stock {
  border-color: #fecaca;
  background: #fef2f2;
}

.fabric-lot-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.fabric-lot-info {
  flex: 1;
  min-width: 0;
}

.fabric-lot-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
}

.fabric-lot-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.fabric-lot-avail {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  margin-top: 2px;
}

.fabric-lot-qty-wrap {
  flex-shrink: 0;
}

.fabric-lot-qty {
  width: 80px !important;
  text-align: center;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   SIZE BREAKDOWN GRID
   ══════════════════════════════════════════════════════════════════════ */

.size-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.size-input-group {
  text-align: center;
}

.size-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.size-input {
  text-align: center;
  padding: 6px 4px !important;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   ACCEPT / PROGRESS INFO BAR
   ══════════════════════════════════════════════════════════════════════ */

.accept-info-bar {
  padding: 14px 18px;
  background: linear-gradient(135deg, #ede9fe, #e0e7ff);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  margin-bottom: 20px;
}

.accept-info-bar p {
  font-size: 14px;
  font-weight: 600;
  color: #3730a3;
}

.accept-info-bar .text-muted {
  font-size: 12px;
  font-weight: 400;
  color: #6366f1;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   FINISH SUMMARY MODAL
   ══════════════════════════════════════════════════════════════════════ */

.finish-summary {
  padding: 4px 0;
}

.finish-overall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc, #ede9fe);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 20px;
}

.finish-overall-info h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.finish-overall-info .text-muted {
  font-size: 13px;
}

.finish-overall-pct {
  text-align: center;
}

.finish-pct-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(
    var(--primary) calc(var(--pct) * 1%),
    #e2e8f0 calc(var(--pct) * 1%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto 6px;
}

.finish-pct-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
}

.finish-pct-ring span {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
}

.finish-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finish-stage-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s;
}

.finish-stage-row:hover {
  box-shadow: var(--shadow-sm);
}

.finish-stage-row.has-pending {
  border-color: #fca5a5;
  background: #fef2f2;
}

.finish-stage-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 100px;
  text-transform: capitalize;
}

.finish-stage-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
}

.finish-stat {
  text-align: center;
}

.finish-stat .label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.finish-stat .val {
  font-size: 14px;
  font-weight: 700;
}

.finish-stage-status {
  flex-shrink: 0;
}

.finish-stage-action {
  flex-shrink: 0;
}

/* Badge additions for new statuses */
.badge-accepted { background: #e0f2fe; color: #0c4a6e; }
.badge-not_started { background: #f1f5f9; color: #64748b; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — PIPELINE ADDITIONS
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .incoming-card { flex-wrap: wrap; }
  .incoming-card-center { gap: 12px; }
  .fabric-lots-grid { grid-template-columns: 1fr; }
  .finish-stage-row { flex-wrap: wrap; gap: 8px; }
  .finish-stage-stats { gap: 10px; }
  .size-breakdown-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .incoming-card { flex-direction: column; align-items: flex-start; }
  .incoming-card-center { flex-wrap: wrap; }
  .finish-overall { flex-direction: column; gap: 16px; text-align: center; }
  .finish-stage-row { flex-direction: column; align-items: flex-start; }
  .size-breakdown-grid { grid-template-columns: repeat(3, 1fr); }
}