@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════
   DESIGN TOKENS — change per breakpoint
══════════════════════════════════════════ */
:root {
  --sidebar-bg:      #111827;
  --sidebar-text:    #9ca3af;
  --sidebar-active:  #ffffff;
  --sidebar-accent:  #6366f1;
  --sidebar-hover:   #1f2937;
  --sidebar-width:   230px;
  --content-bg:      #f0f2f8;
  --card-bg:         #ffffff;
  --border:          #e5e7eb;
  --text-primary:    #111827;
  --text-secondary:  #4b5563;
  --text-muted:      #9ca3af;
  --accent:          #6366f1;
  --accent-light:    #eef2ff;
  --accent-dark:     #4f46e5;
  --success:         #059669;
  --success-light:   #d1fae5;
  --warning:         #d97706;
  --warning-light:   #fef3c7;
  --danger:          #dc2626;
  --danger-light:    #fee2e2;
  --urgent:          #ea580c;
  --urgent-light:    #ffedd5;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.14);
  --font-main: 'Outfit','Noto Sans Devanagari','Segoe UI',Tahoma,Arial,sans-serif;
  --transition: 0.18s ease;

  /* Fluid sizes — full desktop */
  --ph: 16px 28px;          /* page-header padding */
  --pb: 20px 28px;          /* page-body padding */
  --card-p: 18px 20px;      /* card-body padding */
  --card-hp: 14px 20px;     /* card-header padding */
  --stat-val: 32px;         /* stat value font */
  --meas-input: 22px;       /* measurement cell font */
  --meas-min: 72px;         /* meas grid min-width */
  --meas-pad: 10px 4px;     /* meas input padding */
  --h1: 18px;               /* page h1 size */
  --nav-fs: 13px;           /* nav link font */
  --btn-pad: 10px 18px;
  --card-gap: 14px;
}

/* ══ COMPACT MODE — 1280px laptop ══ */
@media (max-width: 1280px) {
  :root {
    --sidebar-width: 210px;
    --ph: 12px 20px;
    --pb: 14px 20px;
    --card-p: 14px 16px;
    --card-hp: 11px 16px;
    --stat-val: 28px;
    --meas-input: 19px;
    --meas-min: 65px;
    --meas-pad: 8px 4px;
    --h1: 17px;
    --card-gap: 12px;
  }
}

/* ══ SMALL LAPTOP / TABLET LANDSCAPE — 1024px ══ */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 52px;   /* icon-only sidebar */
    --ph: 10px 16px;
    --pb: 12px 16px;
    --card-p: 12px 14px;
    --card-hp: 10px 14px;
    --stat-val: 24px;
    --meas-input: 16px;
    --meas-min: 58px;
    --meas-pad: 6px 3px;
    --h1: 16px;
    --nav-fs: 0px;
    --card-gap: 10px;
  }
}

/* ══ TABLET PORTRAIT / LARGE PHONE — 768px ══ */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --ph: 10px 14px;
    --pb: 12px 14px;
    --card-p: 12px 12px;
    --card-hp: 10px 12px;
    --stat-val: 22px;
    --meas-input: 15px;
    --meas-min: 54px;
    --meas-pad: 6px 3px;
    --h1: 15px;
    --card-gap: 8px;
  }
}

/* ════════════════════════════════════
   RESET
════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-main);font-size:14px;background:var(--content-bg);color:var(--text-primary);line-height:1.6;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;}
input,textarea,select{font-family:inherit;}

.app-shell{display:flex;min-height:100vh;}

/* ════════════════════════════════════
   SIDEBAR — full desktop
════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:100;
  transition:width var(--transition), transform var(--transition);
  overflow:hidden;
}

.sidebar-logo{padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,0.07);}
.sidebar-logo .logo-row{display:flex;align-items:center;gap:10px;}
.sidebar-logo .logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.sidebar-logo .shop-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;transition:opacity var(--transition);}
.sidebar-logo .shop-sub{font-size:10px;color:rgba(156,163,175,0.7);margin-top:1px;white-space:nowrap;overflow:hidden;transition:opacity var(--transition);}

.lang-toggle{display:flex;gap:4px;padding:8px 10px 6px;transition:all var(--transition);}
.lang-btn{flex:1;padding:5px 4px;font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,0.1);border-radius:5px;background:transparent;color:var(--sidebar-text);transition:all var(--transition);cursor:pointer;text-align:center;letter-spacing:0.5px;}
.lang-btn.active{background:var(--sidebar-accent);color:#fff;border-color:var(--sidebar-accent);}
.lang-btn:hover:not(.active){background:rgba(255,255,255,0.07);color:#fff;}

.sidebar-nav{flex:1;padding:6px 0;overflow-y:auto;overflow-x:hidden;}
.sidebar-nav::-webkit-scrollbar{width:0;}
.nav-section-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:rgba(156,163,175,0.45);padding:10px 14px 4px;white-space:nowrap;overflow:hidden;transition:opacity var(--transition);}

.nav-link{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 6px;color:var(--sidebar-text);font-size:var(--nav-fs);font-weight:500;border-radius:8px;transition:all var(--transition);border:1px solid transparent;white-space:nowrap;overflow:hidden;}
.nav-link:hover{background:var(--sidebar-hover);color:#e5e7eb;}
.nav-link.active{background:rgba(99,102,241,0.15);color:#c7d2fe;border-color:rgba(99,102,241,0.25);}
.nav-link .nav-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:rgba(255,255,255,0.06);border-radius:6px;}
.nav-link.active .nav-icon{background:rgba(99,102,241,0.25);}
.nav-link .nav-badge{margin-left:auto;background:var(--danger);color:white;font-size:10px;font-weight:700;padding:1px 5px;border-radius:99px;min-width:16px;text-align:center;flex-shrink:0;}
.nav-link .nav-badge.amber{background:var(--warning);}

.sidebar-footer{padding:10px 12px;border-top:1px solid rgba(255,255,255,0.07);}
.owner-btn{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.25);border-radius:var(--radius-md);color:#a5b4fc;font-size:12px;font-weight:600;transition:all var(--transition);white-space:nowrap;overflow:hidden;}
.owner-btn:hover{background:rgba(99,102,241,0.22);color:#fff;}
.owner-btn.danger-btn{background:rgba(220,38,38,0.1);border-color:rgba(220,38,38,0.25);color:#fca5a5;}
.owner-btn.danger-btn:hover{background:rgba(220,38,38,0.2);}

/* ════ ICON-ONLY SIDEBAR at ≤1024px ════ */
@media (max-width:1024px) and (min-width:769px) {
  .sidebar{width:52px;}
  .sidebar-logo .shop-name,.sidebar-logo .shop-sub{display:none;}
  .sidebar-logo{padding:12px 10px;}
  .lang-toggle{padding:6px 6px 4px;}
  .lang-btn{font-size:9px;padding:4px 2px;}
  .nav-section-label{display:none;}
  .nav-link{padding:9px;margin:1px 4px;justify-content:center;}
  .nav-link span:not(.nav-icon):not(.nav-badge){display:none;}
  .nav-link .nav-icon{margin:0;}
  .nav-badge{display:none !important;}
  .owner-btn span{display:none;}
  .owner-btn{padding:9px;justify-content:center;}
  /* Show tooltip on hover via title attr */
  .nav-link{position:relative;}
}

/* ════════════════════════════════════
   MAIN CONTENT
════════════════════════════════════ */
.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh;display:flex;flex-direction:column;transition:margin-left var(--transition);}

.page-header{background:var(--card-bg);border-bottom:1px solid var(--border);padding:var(--ph);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,0.05);}
.page-header h1{font-size:var(--h1);font-weight:700;color:var(--text-primary);letter-spacing:-0.3px;}
.page-header .header-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}
.page-body{padding:var(--pb);flex:1;}

/* ════════════════════════════════════
   STAT CARDS
════════════════════════════════════ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--card-gap);margin-bottom:var(--card-gap);}
.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(12px,1.5vw,20px) clamp(12px,1.5vw,18px);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);border-top:3px solid var(--border);}
.stat-card.blue  {border-top-color:#818cf8;}
.stat-card.green {border-top-color:#34d399;}
.stat-card.amber {border-top-color:#fbbf24;}
.stat-card.red   {border-top-color:#f87171;}
.stat-card.orange{border-top-color:#fb923c;}
.stat-card.purple{border-top-color:#a78bfa;}
.stat-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:6px;}
.stat-value{font-size:var(--stat-val);font-weight:800;line-height:1;letter-spacing:-1px;color:var(--text-primary);}
.stat-value.small{font-size:calc(var(--stat-val) - 4px);}
.stat-sub{font-size:11px;margin-top:5px;color:var(--text-muted);}

/* ════════════════════════════════════
   CARDS
════════════════════════════════════ */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.card-header{padding:var(--card-hp);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-size:14px;font-weight:700;color:var(--text-primary);}
.card-body{padding:var(--card-p);}

/* ════════════════════════════════════
   FORMS
════════════════════════════════════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid .full{grid-column:span 2;}
.field-wrap{display:flex;flex-direction:column;gap:5px;}
.field-wrap label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.4px;}
input[type="text"],input[type="number"],input[type="tel"],input[type="date"],input[type="password"],textarea,select{
  width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-md);
  font-size:14px;color:var(--text-primary);background:#fafbfc;
  transition:border-color var(--transition),box-shadow var(--transition);outline:none;appearance:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,0.1);background:#fff;}
input::placeholder,textarea::placeholder{color:var(--text-muted);}
textarea{resize:vertical;min-height:70px;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}

/* ════════════════════════════════════
   BUTTONS
════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:var(--btn-pad);border-radius:var(--radius-md);font-size:13px;font-weight:600;border:none;transition:all var(--transition);white-space:nowrap;cursor:pointer;}
.btn-primary{background:var(--accent);color:white;box-shadow:0 2px 8px rgba(99,102,241,0.3);}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);}
.btn-success{background:var(--success);color:white;box-shadow:0 2px 8px rgba(5,150,105,0.3);}
.btn-success:hover{background:#047857;transform:translateY(-1px);}
.btn-danger{background:var(--danger);color:white;}
.btn-danger:hover{background:#b91c1c;}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border);}
.btn-ghost:hover{background:var(--content-bg);color:var(--text-primary);}
.btn-lg{padding:12px 24px;font-size:15px;border-radius:var(--radius-lg);}
.btn-sm{padding:6px 10px;font-size:12px;}
.btn-full{width:100%;}

/* ════════════════════════════════════
   VOICE FAB
════════════════════════════════════ */
.voice-fab-container{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
#voice-hint{background:rgba(17,24,39,0.9);color:#e0e8ff;font-size:11px;font-weight:500;padding:5px 10px;border-radius:18px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#voice-fab{width:50px;height:50px;border-radius:50%;background:var(--accent);border:none;color:white;font-size:20px;box-shadow:0 4px 16px rgba(99,102,241,0.45);display:flex;align-items:center;justify-content:center;transition:all var(--transition);cursor:grab;}#voice-fab:active{cursor:grabbing;}
#voice-fab:hover{transform:scale(1.08);}
#voice-fab.listening{background:var(--danger);animation:micPulse 1.2s ease-in-out infinite;}
@keyframes micPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
@keyframes fabShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}

/* ════════════════════════════════════
   TABLES
════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead{background:#f9fafb;}
th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-muted);border-bottom:1px solid var(--border);}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#f9fafb;}

/* ════════════════════════════════════
   BADGES
════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:0.3px;}
.badge-pending  {background:#fef3c7;color:#92400e;}
.badge-partial  {background:#dbeafe;color:#1e40af;}
.badge-ready    {background:#d1fae5;color:#065f46;}
.badge-delivered{background:#f3f4f6;color:#374151;}
.badge-urgent   {background:#ffedd5;color:#9a3412;}

/* ════════════════════════════════════
   ACTION CARDS
════════════════════════════════════ */
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;}
.action-card{background:var(--card-bg);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:16px 10px;text-align:center;transition:all var(--transition);cursor:pointer;display:block;}
.action-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.action-card .action-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 8px;background:var(--accent-light);}
.action-card .action-label{font-size:12px;font-weight:700;color:var(--text-primary);}
.action-card .action-sub{font-size:10px;color:var(--text-muted);margin-top:2px;}

/* ════════════════════════════════════
   PIN SCREEN
════════════════════════════════════ */
.pin-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--content-bg);padding:20px;}
.pin-card{background:var(--card-bg);border-radius:var(--radius-xl);padding:36px 32px;width:100%;max-width:360px;box-shadow:var(--shadow-lg);text-align:center;}
.pin-logo{width:58px;height:58px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
.pin-title{font-size:20px;font-weight:800;margin-bottom:5px;letter-spacing:-0.5px;}
.pin-sub{font-size:13px;color:var(--text-muted);margin-bottom:26px;}
.pin-dots{display:flex;justify-content:center;gap:14px;margin-bottom:24px;}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:transparent;transition:all 0.15s;}
.pin-dot.filled{background:var(--accent);border-color:var(--accent);}
.pin-dot.error{background:var(--danger);border-color:var(--danger);}
.pin-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pin-key{background:#f9fafb;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px 10px;font-size:18px;font-weight:700;color:var(--text-primary);transition:all var(--transition);cursor:pointer;}
.pin-key:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.pin-key:active{transform:scale(0.93);}
.pin-key.del{font-size:14px;color:var(--text-muted);}
.pin-key.zero{grid-column:2;}
.pin-error{color:var(--danger);font-size:12px;font-weight:600;margin-top:14px;min-height:18px;}
@keyframes pinShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-6px);}80%{transform:translateX(6px);}}
.pin-card.shake{animation:pinShake 0.4s ease-in-out;}

/* ════════════════════════════════════
   WIZARD
════════════════════════════════════ */
.wizard-steps{display:flex;align-items:center;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:4px;gap:3px;margin-bottom:16px;overflow-x:auto;}
.wizard-step{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:600;color:var(--text-muted);transition:all var(--transition);white-space:nowrap;flex:1;cursor:default;}
.wizard-step.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,0.3);}
.wizard-step.active span{color:#fff !important;}
.wizard-step.done{color:var(--success);}
.wizard-step.done .step-num{background:var(--success);border-color:var(--success);color:#fff !important;}
.wizard-step.active .step-num{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.6);color:#fff !important;}
.wizard-step .step-num{width:20px;height:20px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}

/* ════════════════════════════════════
   ORDER CODE
════════════════════════════════════ */
.order-code-hero{display:inline-flex;align-items:center;gap:6px;background:var(--card-bg);border:2.5px solid var(--accent);border-radius:14px;padding:clamp(12px,1.5vw,18px) clamp(22px,3vw,36px);box-shadow:0 0 0 5px rgba(99,102,241,0.07),var(--shadow-md);}
.order-code-hero .hash{font-size:clamp(16px,2vw,22px);font-weight:800;color:var(--accent);opacity:0.6;}
.order-code-hero .code{font-size:clamp(32px,4vw,48px);font-weight:900;color:var(--accent);letter-spacing:3px;line-height:1;}

.order-code-sticky{position:sticky;top:0;z-index:40;background:var(--accent);color:white;text-align:center;padding:7px;font-size:13px;font-weight:700;letter-spacing:1px;border-bottom:2px solid var(--accent-dark);}
.order-code-sticky .oc-num{font-size:16px;font-weight:900;letter-spacing:2px;}

/* ════════════════════════════════════
   GARMENT CARDS & MEASUREMENTS
════════════════════════════════════ */
.garment-card{background:var(--card-bg);border:1.5px solid var(--border);border-left:4px solid var(--accent);border-radius:12px;padding:clamp(10px,1.2vw,16px) clamp(12px,1.5vw,18px);margin-top:10px;animation:slideIn 0.2s ease-out;}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.garment-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.garment-card-title{font-size:14px;font-weight:800;color:var(--text-primary);}
.garment-card-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}

/* Measurement grid — fluid columns */
.meas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--meas-min),1fr));gap:5px;}
.meas-cell label{font-size:12px;font-weight:900;color:#1e1b4b;display:block;margin-bottom:4px;text-align:center;letter-spacing:-0.3px;}
.meas-cell input{width:100%;padding:var(--meas-pad);font-size:var(--meas-input);font-weight:900;text-align:center;border:2px solid var(--border);border-radius:10px;background:#f8fafc;color:#111;line-height:1;}
.meas-cell input:focus{border-color:#4f46e5;background:#fff;outline:none;box-shadow:0 0 0 3px rgba(99,102,241,0.12);}

/* ════════════════════════════════════
   PAYMENT
════════════════════════════════════ */
.pay-summary{background:#f9fafb;border-radius:var(--radius-md);padding:14px;margin-bottom:14px;}
.pay-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px;}
.pay-row:last-child{border-bottom:none;font-weight:700;font-size:15px;color:var(--accent);}
.pay-mode-btns{display:flex;gap:7px;margin-top:8px;}
.pay-mode-btn{flex:1;padding:9px;border:1.5px solid var(--border);border-radius:var(--radius-md);text-align:center;cursor:pointer;font-size:12px;font-weight:600;transition:all var(--transition);background:var(--card-bg);}
.pay-mode-btn.active{background:var(--success-light);border-color:var(--success);color:var(--success);}

/* ════════════════════════════════════
   IMAGES
════════════════════════════════════ */
.img-preview-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.img-preview-grid img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid var(--border);}

/* ════════════════════════════════════
   SUCCESS SCREEN
════════════════════════════════════ */
.success-screen{text-align:center;padding:28px 16px;}
.success-icon{width:68px;height:68px;background:var(--success-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px;}
.success-order-code{font-size:24px;font-weight:800;color:var(--accent);letter-spacing:1px;margin:10px 0;}
.success-wrap{text-align:center;padding:clamp(20px,3vw,48px) clamp(14px,3vw,32px);}
.success-checkmark{width:76px;height:76px;background:var(--success-light);border:3px solid var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px;animation:popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);}
@keyframes popIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.success-title{font-size:22px;font-weight:900;color:var(--text-primary);margin-bottom:5px;letter-spacing:-0.5px;}
.success-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:18px;}
.success-code-box{display:inline-flex;align-items:center;gap:8px;background:var(--accent-light);border:2px solid var(--accent);border-radius:12px;padding:clamp(10px,1.2vw,14px) clamp(20px,3vw,32px);margin:0 auto 18px;}
.success-code-box .hash{font-size:14px;color:var(--accent);opacity:0.6;font-weight:800;}
.success-code-box .code{font-size:clamp(26px,3.5vw,36px);font-weight:900;color:var(--accent);letter-spacing:3px;}
.success-details{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:24px;}
.success-pill{background:#f3f4f6;border-radius:18px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--text-secondary);}
.success-pill.green{background:var(--success-light);color:var(--success);}
.success-pill.red{background:var(--danger-light);color:var(--danger);}
.success-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

/* ════════════════════════════════════
   TOASTS
════════════════════════════════════ */
.toast-container{position:fixed;top:14px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.toast{background:var(--text-primary);color:white;padding:10px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);pointer-events:auto;display:flex;align-items:center;gap:8px;animation:toastIn 0.3s ease-out;max-width:300px;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
.toast.warning{background:var(--warning);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ════════════════════════════════════
   CHOICE CARDS
════════════════════════════════════ */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px;margin:0 auto;}
.choice-card{background:var(--card-bg);border:2px solid var(--border);border-radius:18px;padding:clamp(20px,2.5vw,36px) clamp(14px,2vw,24px);text-align:center;cursor:pointer;transition:all 0.2s;}
.choice-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(99,102,241,0.15);transform:translateY(-3px);}
.choice-card .cc-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;}
.choice-card .cc-title{font-size:16px;font-weight:800;margin-bottom:5px;color:var(--text-primary);}
.choice-card .cc-sub{font-size:12px;color:var(--text-muted);}

/* ════════════════════════════════════
   MODAL
════════════════════════════════════ */
.wa-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:500;display:flex;align-items:center;justify-content:center;}
.wa-modal{background:var(--card-bg);border-radius:18px;padding:28px;width:90%;max-width:320px;text-align:center;box-shadow:var(--shadow-lg);}
.wa-modal h3{font-size:17px;font-weight:800;margin-bottom:7px;}
.wa-modal p{font-size:13px;color:var(--text-muted);margin-bottom:20px;}
.wa-lang-btn{display:block;width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:700;margin-bottom:8px;border:2px solid var(--border);cursor:pointer;transition:all 0.15s;}
.wa-lang-btn.green{background:#25D366;color:#fff;border-color:#25D366;}
.wa-lang-btn.blue{background:#2563EB;color:#fff;border-color:#2563EB;}

/* ════════════════════════════════════
   MOBILE (≤768px) — hamburger layout
════════════════════════════════════ */
@media (max-width:768px) {
  :root{--sidebar-width:0px;}
  .sidebar{transform:translateX(-250px);width:250px;}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;}
  .form-grid{grid-template-columns:1fr;}
  .form-grid .full{grid-column:1;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .menu-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--content-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:17px;cursor:pointer;}
  .voice-fab-container{bottom:14px;right:12px;}
  .wizard-step span:not(.step-num){font-size:10px;}
  .meas-grid{grid-template-columns:repeat(3,1fr) !important;}
  .meas-cell input{font-size:15px !important;padding:5px 3px !important;}
  .choice-grid{grid-template-columns:1fr;}
  .payment-grid{grid-template-columns:1fr !important;}
  .success-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
}
@media (min-width:769px){.menu-toggle{display:none;}}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;}
.sidebar-overlay.show{display:block;}

/* ════════════════════════════════════
   VERY SMALL (≤480px)
════════════════════════════════════ */
@media (max-width:480px){
  .wizard-step span:not(.step-num){display:none;}
  .wizard-step{min-width:30px;}
  .order-code-hero .code{font-size:30px !important;letter-spacing:2px !important;}
}

/* ════════════════════════════════════
   MISC UTILITIES
════════════════════════════════════ */
.text-center{text-align:center;}.text-right{text-align:right;}
.text-muted{color:var(--text-muted);}.text-success{color:var(--success);}
.text-danger{color:var(--danger);}.text-warning{color:var(--warning);}
.mt-4{margin-top:4px;}.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}
.mb-12{margin-bottom:12px;}.mb-16{margin-bottom:16px;}.mb-20{margin-bottom:20px;}.mb-24{margin-bottom:24px;}
.flex{display:flex;}.flex-center{display:flex;align-items:center;}
.justify-between{justify-content:space-between;}
.fw-700{font-weight:700;}.fs-13{font-size:13px;}
.divider{height:1px;background:var(--border);margin:16px 0;}
.page-body{width:100%;}
.page-body.centered{max-width:900px;margin:0 auto;}
.main-content{display:flex;flex-direction:column;align-items:stretch;}

/* Live clock */
.live-clock{font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-light);padding:5px 12px;border-radius:18px;letter-spacing:0.3px;}

/* Owner nav */
.owner-nav-section{border-top:1px solid rgba(255,255,255,0.07);margin-top:6px;padding-top:6px;}

/* Sidebar logo assets */
.sidebar-logo-img{width:32px;height:32px;border-radius:9px;object-fit:cover;}
.sidebar-logo-placeholder{width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}

/* Status badges */
.filter-tab{background:#f1f5f9;border:1.5px solid var(--border);border-radius:18px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;color:var(--text-secondary);}
.filter-tab:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.filter-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.status-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;}
.status-pending{background:#dbeafe;color:#1e40af;}
.status-ready{background:#ede9fe;color:#6d28d9;}
.status-delivered{background:#d1fae5;color:#065f46;}
.urgent-row .card{animation:urgentPulse 2s ease-in-out infinite;}
@keyframes urgentPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}50%{box-shadow:0 0 0 4px rgba(239,68,68,0.15);}}

/* Animations */
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bounceIn{0%{transform:scale(0.8);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.card{animation:fadeIn 0.22s ease-out;}
.page-body>*{animation:slideUp 0.22s ease-out;}
.btn:active{transform:scale(0.97);}
.nav-link{transition:all 0.15s ease;}
@media(min-width:769px){.nav-link:hover{transform:translateX(2px);}}

/* Screen size indicator (auto-hide after 3s) */
#screen-indicator{position:fixed;bottom:12px;left:calc(var(--sidebar-width) + 12px);background:rgba(17,24,39,0.85);color:#e0e8ff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;z-index:9998;pointer-events:none;transition:opacity 0.5s;letter-spacing:0.3px;}
#screen-indicator.hidden{opacity:0;}

/* Watermark */
.app-content::before{content:"उत्तम टेलर्स";position:fixed;bottom:40px;right:30px;font-size:50px;font-weight:900;color:rgba(99,102,241,0.04);pointer-events:none;z-index:0;transform:rotate(-15deg);white-space:nowrap;user-select:none;}

/* Font size tokens */
:root{--fs-xs:11px;--fs-sm:13px;--fs-base:15px;--fs-md:17px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:28px;--fs-3xl:36px;--fs-huge:44px;}

/* ══════════════════════════════════════════
   DARK MODE — data-theme="dark" on <html>
══════════════════════════════════════════ */
[data-theme="dark"] {
  --content-bg:    #0f172a;
  --card-bg:       #1e293b;
  --border:        #334155;
  --text-primary:  #f1f5f9;
  --text-secondary:#94a3b8;
  --text-muted:    #64748b;
  --accent-light:  #1e1b4b;
  --success-light: #064e3b;
  --warning-light: #451a03;
  --danger-light:  #450a0a;
  --urgent-light:  #431407;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 10px 32px rgba(0,0,0,0.6);
  --sidebar-bg:    #0a0f1e;
  --sidebar-hover: #161f35;
}

/* Main layout */
[data-theme="dark"] body                    { background: var(--content-bg); color: var(--text-primary); }
[data-theme="dark"] .main-content          { background: var(--content-bg); }
[data-theme="dark"] .page-header           { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .page-body             { background: var(--content-bg); }

/* Cards */
[data-theme="dark"] .card                  { background: var(--card-bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .card-header           { background: var(--card-bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .card-body             { background: var(--card-bg) !important; }

/* Tables */
[data-theme="dark"] table                  { background: var(--card-bg); }
[data-theme="dark"] thead                  { background: #1e293b !important; }
[data-theme="dark"] th                     { background: #1e293b !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
[data-theme="dark"] td                     { border-color: var(--border) !important; color: var(--text-primary); }
[data-theme="dark"] tr:hover td            { background: rgba(99,102,241,0.06) !important; }
[data-theme="dark"] tbody tr               { background: var(--card-bg); }
[data-theme="dark"] tbody tr:nth-child(even){ background: #1a2540; }

/* Inputs */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea               { background: #0f172a !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] input::placeholder     { color: var(--text-muted) !important; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus         { border-color: var(--accent) !important; background: #1a2540 !important; }

/* Inline white/grey backgrounds commonly used */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:white"]  { background: var(--card-bg) !important; }
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background:#f8faff"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background:#f0f4ff"],
[data-theme="dark"] [style*="background:#fafbfd"],
[data-theme="dark"] [style*="background:#f8f9ff"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#f3f4f6"] { background: #1a2540 !important; }

/* Text overrides for inline dark text */
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color:#1e1b4b"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color:#1f2937"]      { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color:#475569"]      { color: var(--text-secondary) !important; }

/* Borders */
[data-theme="dark"] [style*="border:1px solid #e"],
[data-theme="dark"] [style*="border:1.5px solid #e"],
[data-theme="dark"] [style*="border:2px solid #e"] { border-color: var(--border) !important; }

/* Gradient cards in dashboard etc — keep sidebar-like dark */
[data-theme="dark"] [style*="background:linear-gradient(135deg,#f"],
[data-theme="dark"] [style*="background:linear-gradient(135deg,#eef"],
[data-theme="dark"] [style*="background:linear-gradient(135deg,#f8"] { background: #1a2540 !important; }

/* Special: gradient summary stats (light blue etc.) */
[data-theme="dark"] [style*="background:#eef2ff"],
[data-theme="dark"] [style*="background:#e0e7ff"],
[data-theme="dark"] [style*="background:#ede9fe"]  { background: #1e1b4b !important; }
[data-theme="dark"] [style*="background:#d1fae5"]  { background: #064e3b !important; }
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"]  { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background:#fffbeb"]  { background: #451a03 !important; }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track  { background: #0f172a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb  { background: #334155; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Dark mode toggle button */
#dark-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 8px;
  font-family: var(--font-main);
}
#dark-toggle:hover {
  background: var(--sidebar-hover);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
#dark-toggle .toggle-icon { font-size: 16px; line-height: 1; }
.dark-toggle-track {
  margin-left: auto;
  width: 36px; height: 20px;
  background: #374151;
  border-radius: 20px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.dark-toggle-track.on { background: #6366f1; }
.dark-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.dark-toggle-track.on .dark-toggle-thumb { transform: translateX(16px); }

/* ── Dark mode hover fix — override inline onmouseover backgrounds ── */
/* CSS !important overrides inline styles set via JS */
[data-theme="dark"] tr                          { background: var(--card-bg) !important; }
[data-theme="dark"] tbody tr:nth-child(even)    { background: #1a2540 !important; }
[data-theme="dark"] tr:hover                    { background: rgba(99,102,241,0.12) !important; }
[data-theme="dark"] tr:hover td                 { background: transparent !important; }

/* Fix inline white backgrounds on hover for all elements */
[data-theme="dark"] *:hover[style*="background"]{ background-color: unset; }

/* Specific hover colors used in templates */
[data-theme="dark"] [onmouseover*="#fafbff"]:hover,
[data-theme="dark"] [onmouseover*="#f8fafc"]:hover,
[data-theme="dark"] [onmouseover*="#fef2f2"]:hover { background: rgba(99,102,241,0.1) !important; }

/* ══════════════════════════════════════════════════
   BOTTOM NAV — Mobile App Style
══════════════════════════════════════════════════ */
.bottom-nav { display: none; }

@media (max-width: 768px) {

  /* ── Bottom Navigation ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--sidebar-bg);
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  }
  .bnav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 4px 6px;
    color: #6b7280;
    font-size: 10px; font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    gap: 3px;
  }
  .bnav-item.active { color: #818cf8; }
  .bnav-item.active .bnav-icon { transform: scale(1.15); }
  .bnav-icon { font-size: 22px; line-height: 1; }
  .bnav-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2px; }

  /* ── Main content padding for bottom nav ── */
  .main-content { padding-bottom: 72px !important; }
  .voice-fab-container { bottom: 82px !important; }
  .toast-container { bottom: 82px !important; }

  /* ── Page Header — compact ── */
  .page-header {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: sticky; top: 0; z-index: 50;
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .page-header h1 { font-size: 16px !important; }
  .header-sub { display: none; }

  /* ── Page Body ── */
  .page-body { padding: 12px 12px !important; }

  /* ── Cards ── */
  .card { border-radius: 12px !important; margin-bottom: 10px; }
  .card-body { padding: 12px !important; }
  .card-header { padding: 10px 12px !important; }

  /* ── Stat grid 2-col on mobile ── */
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── Tables → Card List ── */
  .mobile-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.responsive-table thead { display: none !important; }
  table.responsive-table,
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td { display: block !important; }
  table.responsive-table tr {
    background: var(--card-bg) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  table.responsive-table td {
    padding: 4px 0 !important;
    border: none !important;
    font-size: 13px !important;
  }
  table.responsive-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block; margin-bottom: 2px;
  }

  /* ── Order Status Table → Cards ── */
  .orders-table { display: block !important; }
  .orders-table thead { display: none !important; }
  .orders-table tbody { display: block !important; }
  .orders-table tbody tr.orow {
    display: block !important;
    background: var(--card-bg) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer;
  }
  .orders-table tbody tr.orow td {
    display: block !important;
    padding: 3px 0 !important;
    border: none !important;
  }
  /* Hide progress column on mobile */
  .orders-table td:nth-child(5) { display: none !important; }
  /* Show delivery date + order inline */
  .orders-table td:nth-child(1) { font-size: 11px !important; color: var(--text-muted) !important; margin-bottom: 2px; }
  .orders-table td:nth-child(2) { margin-bottom: 4px; }
  .orders-table td:nth-child(3) { margin-bottom: 4px; }
  .orders-table td:nth-child(4) { margin-bottom: 4px; }
  .orders-table td:nth-child(6) { margin-bottom: 6px; }
  /* Actions full width */
  .orders-table td:nth-child(7) { display: flex !important; gap: 8px; margin-top: 6px; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }
  .orders-table td:nth-child(7) button,
  .orders-table td:nth-child(7) a { flex: 1; text-align: center; padding: 10px !important; font-size: 13px !important; }

  /* ── Tabs — scrollable ── */
  .sched-tabs, [style*="display:flex"][style*="overflow"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .sched-tabs::-webkit-scrollbar { display: none; }
  .sched-tab, .filter-tab { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* ── Sort buttons — scrollable ── */
  .sort-bar { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }

  /* ── Inputs — bigger touch targets ── */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 12px !important;
    min-height: 44px;
  }
  button, .btn {
    min-height: 44px;
    font-size: 14px !important;
  }

  /* ── Form grids → single col ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Dashboard cards ── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Work log table ── */
  .wl-table { font-size: 12px !important; }
  .wl-table th, .wl-table td { padding: 6px 8px !important; }

  /* ── Measurement cells ── */
  .meas-grid { grid-template-columns: repeat(3,1fr) !important; }
  .meas-cell input { font-size: 16px !important; min-height: 44px; }

  /* ── Expanded order panel ── */
  [style*="grid-template-columns:1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Search bar — full width on mobile ── */
  #srch, [id*="search"], [id*="Search"] {
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px !important;
  }

  /* ── Pickup page — bigger cards ── */
  .pickup-card { padding: 14px !important; }

  /* ── Dark mode bottom nav ── */
  [data-theme="dark"] .bottom-nav {
    background: #0a0f1e;
    border-color: rgba(255,255,255,0.06);
  }

  /* ══ FIX: Sidebar text visibility on mobile (white/light text always) ══ */
  .sidebar, .sidebar * { color: #e5e7eb !important; }
  .sidebar .nav-link { color: #d1d5db !important; }
  .sidebar .nav-link.active { color: #ffffff !important; background: rgba(99,102,241,0.25) !important; }
  .sidebar .nav-link:hover { color: #ffffff !important; }
  .sidebar .shop-sub { color: #9ca3af !important; }
  .sidebar .nav-section-label { color: #9ca3af !important; }
  .sidebar .owner-btn { color: #c7d2fe !important; }
  /* ══ FIX: Sidebar text labels must always be visible on true mobile — the
     icon-only collapse (.nav-link span:not(.nav-icon):not(.nav-badge){display:none})
     is only meant for the 769-1024px tablet rail, never for phone-width screens. ══ */
  .sidebar .nav-link span:not(.nav-icon):not(.nav-badge) { display: inline !important; }
  .sidebar .owner-btn span { display: inline !important; }
  .sidebar { width: 250px !important; }
  .sidebar #dark-toggle { color: #e5e7eb !important; }
  .sidebar-overlay.show { background: rgba(0,0,0,0.65) !important; }

  /* ══ FIX: Dashboard hero tiles — much smaller on mobile ══ */
  [style*="font-size:56px"]   { font-size: 32px !important; }
  [style*="font-size:90px"]   { font-size: 48px !important; }
  [style*="font-size:48px"]   { font-size: 28px !important; }
  [style*="font-size:36px"]   { font-size: 24px !important; }
  [style*="font-size:32px"]   { font-size: 22px !important; }
  [style*="font-size:28px"]   { font-size: 20px !important; }
  [style*="font-size:24px"]   { font-size: 18px !important; }
  [style*="font-size:22px"]   { font-size: 17px !important; }
  [style*="font-size:20px"]   { font-size: 16px !important; }

  /* ══ FIX: Hero/stat card padding — more compact ══ */
  [style*="padding:28px 28px 24px"],
  [style*="padding:24px 24px 20px"] { padding: 16px 16px 14px !important; }
  [style*="border-radius:18px"]     { border-radius: 14px !important; }

  /* ══ FIX: Dashboard cards — reduce excessive gap ══ */
  [style*="margin-bottom:10px"][style*="font-size:56px"] { margin-bottom: 4px !important; }

  /* ══ General: reduce oversized icons/emoji in headers ══ */
  .card-title, h1, h2 { font-size: 16px !important; }
  h1[style*="font-size"] { font-size: 18px !important; }
}