/* ===== DESIGN TOKENS ===== */
:root, [data-theme="light"] {
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-offset: #eef1f5;
  --color-border: #e2e8f0;
  --color-divider: #e9eef4;
  --color-text: #1a2332;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-primary: #0d6e8f;
  --color-primary-hover: #0a5a77;
  --color-primary-light: #e0f2fe;
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-info: #0891b2;
  --color-info-light: #cffafe;
  --color-secondary: #64748b;
  --color-secondary-light: #f1f5f9;
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
  --font-body: 'Inter', system-ui, sans-serif;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --transition: 150ms cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] {
  --color-bg: #0f1117;
  --color-surface: #161b22;
  --color-surface-2: #1c2128;
  --color-surface-offset: #21262d;
  --color-border: #30363d;
  --color-divider: #21262d;
  --color-text: #e6edf3;
  --color-text-muted: #8b949e;
  --color-text-faint: #484f58;
  --color-primary: #4fa3c0;
  --color-primary-hover: #3a8fad;
  --color-primary-light: #1a3a4a;
}
/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-bg);min-height:100dvh;line-height:1.6}
img,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
/* ===== APP LAYOUT ===== */
.app-layout{display:flex;min-height:100dvh}
/* ===== SIDEBAR ===== */
.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform var(--transition)}
.sidebar-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);height:var(--topbar-height)}
.logo-icon{width:32px;height:32px;flex-shrink:0}
.logo-title{font-size:var(--text-base);font-weight:700;color:var(--color-text);line-height:1}
.logo-sub{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1}
.sidebar-nav{flex:1;overflow-y:auto;padding:var(--space-3) 0}
.nav-section{padding:var(--space-4) var(--space-5) var(--space-1);font-size:0.65rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-faint)}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);border-radius:0;transition:background var(--transition),color var(--transition);white-space:nowrap}
.nav-item:hover,.nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}
.nav-item.active{font-weight:600}
.nav-item svg{width:16px;height:16px;flex-shrink:0}
.sidebar-footer{padding:var(--space-3) 0;border-top:1px solid var(--color-border)}
.nav-logout:hover{background:var(--color-danger-light);color:var(--color-danger)}
/* ===== TOPBAR ===== */
.main-wrapper{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{height:var(--topbar-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);position:sticky;top:0;z-index:50}
.sidebar-toggle{display:none;padding:var(--space-2);color:var(--color-text-muted)}
.topbar-right{display:flex;align-items:center;gap:var(--space-4)}
.user-role-badge{font-size:var(--text-xs);background:var(--color-primary-light);color:var(--color-primary);padding:2px var(--space-2);border-radius:var(--radius-full,9999px);font-weight:500}
.notif-btn{position:relative;color:var(--color-text-muted);padding:var(--space-1)}
.notif-btn:hover{color:var(--color-primary)}
.notif-btn svg{width:18px;height:18px}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--color-danger);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm)}
.user-name{font-size:var(--text-sm);font-weight:500;color:var(--color-text)}
/* ===== MAIN CONTENT ===== */
.main-content{flex:1;padding:var(--space-6);max-width:1400px}
/* ===== PAGE HEADER ===== */
.page-header{margin-bottom:var(--space-6)}
.page-header h1{font-size:var(--text-xl);font-weight:700;color:var(--color-text)}
.page-header p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}
.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
/* ===== CARDS ===== */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.card-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
/* ===== KPI CARDS ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.kpi-label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-2)}
.kpi-value{font-size:1.75rem;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums lining-nums;line-height:1}
/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;border:1px solid transparent;cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition);white-space:nowrap}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.btn-secondary:hover{background:var(--color-surface-offset);border-color:var(--color-border)}
.btn-success{background:var(--color-success);color:#fff}
.btn-success:hover{opacity:0.9}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-danger:hover{opacity:0.9}
.btn-warning{background:var(--color-warning);color:#fff}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn-full{width:100%;justify-content:center}
.btn-group{display:flex;gap:var(--space-2);flex-wrap:wrap}
/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border)}
.data-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.data-table th{background:var(--color-surface-2);padding:var(--space-3) var(--space-4);text-align:left;font-size:0.7rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);white-space:nowrap}
.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);vertical-align:middle;font-variant-numeric:tabular-nums}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--color-surface-2)}
/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;font-size:0.7rem;font-weight:600;white-space:nowrap}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}
.badge-success{background:var(--color-success-light);color:var(--color-success)}
.badge-warning{background:var(--color-warning-light);color:var(--color-warning)}
.badge-danger{background:var(--color-danger-light);color:var(--color-danger)}
.badge-secondary{background:var(--color-secondary-light);color:var(--color-secondary)}
.badge-info{background:var(--color-info-light);color:var(--color-info)}
/* ===== FORMS ===== */
.form-group{margin-bottom:var(--space-4)}
.form-label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);transition:border-color var(--transition),box-shadow var(--transition)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 15%,transparent)}
.form-textarea{resize:vertical;min-height:80px}
.form-help{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4)}
/* ===== ALERTS ===== */
.flash-messages{margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.alert{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm)}
.alert svg{width:16px;height:16px;flex-shrink:0}
.alert-close{margin-left:auto;color:inherit;opacity:0.6}
.alert-success{background:var(--color-success-light);color:var(--color-success)}
.alert-danger{background:var(--color-danger-light);color:var(--color-danger)}
.alert-warning{background:var(--color-warning-light);color:var(--color-warning)}
.alert-info{background:var(--color-info-light);color:var(--color-info)}
/* ===== AUTH ===== */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg)}
.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);width:100%;max-width:400px;box-shadow:var(--shadow-lg)}
.auth-logo{display:flex;justify-content:center;margin-bottom:var(--space-5)}
.auth-title{font-size:var(--text-xl);font-weight:700;text-align:center;margin-bottom:var(--space-1)}
.auth-sub{color:var(--color-text-muted);font-size:var(--text-sm);text-align:center;margin-bottom:var(--space-6)}
/* ===== STATUS TIMELINE ===== */
.status-timeline{display:flex;flex-direction:column;gap:var(--space-3)}
.status-event{display:flex;gap:var(--space-3);align-items:flex-start}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--color-primary);margin-top:5px;flex-shrink:0}
.status-dot-muted{background:var(--color-border)}
.status-info{font-size:var(--text-xs);color:var(--color-text-muted)}
/* ===== CAPACITY BOARD ===== */
.capacity-grid{display:grid;gap:var(--space-3)}
.capacity-row{display:grid;grid-template-columns:120px repeat(14,1fr);gap:4px;align-items:center}
.capacity-qt{font-size:var(--text-xs);font-weight:600;color:var(--color-text)}
.cap-cell{text-align:center;padding:4px 2px;border-radius:4px;font-size:0.65rem;font-weight:600;cursor:default}
.cap-free{background:var(--color-success-light);color:var(--color-success)}
.cap-partial{background:var(--color-warning-light);color:var(--color-warning)}
.cap-full{background:var(--color-danger-light);color:var(--color-danger)}
/* ===== ORDER FORM ITEMS TABLE ===== */
.items-scroll{overflow-x:auto}
.items-table{min-width:1200px;font-size:var(--text-xs)}
.items-table th,.items-table td{padding:var(--space-2);vertical-align:middle;border-bottom:1px solid var(--color-divider)}
.items-table input,.items-table select{padding:4px 6px;font-size:var(--text-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);width:100%;min-width:80px}
.items-table input:focus,.items-table select:focus{outline:none;border-color:var(--color-primary)}
/* ===== PAGINATION ===== */
.pagination{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-5)}
.page-btn{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface)}
.page-btn:hover,.page-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
/* ===== SEARCH BAR ===== */
.search-bar{position:relative;max-width:320px}
.search-bar input{padding-left:2rem}
.search-bar .search-icon{position:absolute;left:var(--space-2);top:50%;transform:translateY(-50%);color:var(--color-text-faint);pointer-events:none;width:14px;height:14px}
/* ===== FILTERS ===== */
.filter-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:var(--space-12) var(--space-8);color:var(--color-text-muted)}
.empty-state svg{width:48px;height:48px;margin:0 auto var(--space-4);color:var(--color-text-faint)}
.empty-state h3{color:var(--color-text);margin-bottom:var(--space-2);font-size:var(--text-base)}
/* ===== MOBILE ===== */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrapper{margin-left:0}
  .sidebar-toggle{display:flex}
  .form-row-2,.form-row-3{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .user-name{display:none}
}