/* ════════════════════════════════════════════════════════════════════
   MAHARAJ MARKETING ERP — THEME  (Things-3 style, Light + Dark)
   ────────────────────────────────────────────────────────────────────
   This one file controls the look of the whole app.
   • Light theme colours: sections 1 + 2.   Dark theme colours: section 3.
     Palette values are "R G B" (27 122 239 = #1B7AEF).
   • The ☾ / ☀ button in the sidebar switches Light / Dark; the choice is
     remembered per browser (first visit follows the computer's setting).
   • To go back to the old look, remove from index.html:
       <link rel="stylesheet" href="/theme.css?v=5">
   • After uploading a new version, raise ?v=5 → ?v=6 in index.html.
   The client Catalog PDF is NOT affected by this file.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Light tokens ────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --mm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto,
             "Noto Sans Gujarati", "Helvetica Neue", Arial, sans-serif;

  --mm-canvas:         #E8EBF0;   /* page background — grey enough that white cards stand out in daylight */
  --mm-surface:        #FFFFFF;   /* cards, tables, modals            */
  --mm-surface-2:      #F6F7F9;   /* inputs, soft panels              */
  --mm-sidebar:        #E9EAEE;   /* (sub-menu tracks)                */
  --mm-sidebar-hover:  rgba(0, 0, 0, .07);
  --mm-sidebar-active: rgba(26, 111, 224, .14);
  --mm-sidebar-active-ink: #0B57C2;
  --mm-line:           #CFD4DC;   /* borders                          */
  --mm-line-strong:    #B7BDC7;
  --mm-th:             #EDF0F4;   /* table header                     */

  /* Left menu: deep graphite panel in BOTH themes — strong contrast with the page */
  --sb-bg:        #1B2230;
  --sb-line:      rgba(255, 255, 255, .08);
  --sb-ink:       #C9D1DD;        /* menu text                        */
  --sb-ink-3:     #8B96A8;        /* small labels                     */
  --sb-ink-hi:    #FFFFFF;        /* hover / selected text            */
  --sb-hover:     rgba(255, 255, 255, .08);
  --sb-active:    #1A6FE0;        /* selected item = solid blue pill  */
  --sb-card:      rgba(255, 255, 255, .06);
  --mm-zebra:          #F7F8FA;   /* every 2nd table row              */
  --mm-row-hover:      #E6F0FD;

  --mm-ink:   #0F1012;            /* main text                        */
  --mm-ink-2: #2B2C30;            /* secondary text                   */
  --mm-ink-3: #54565C;            /* labels, table headers            */

  --mm-accent:       #1A6FE0;     /* Things blue (deep enough for white text) */
  --mm-accent-hover: #135BC0;
  --mm-accent-ink:   #0B57C2;     /* accent used as text              */
  --mm-accent-soft:  rgba(26, 111, 224, .12);
  --mm-on-accent:    #FFFFFF;

  --mm-i-blue: #1A6FE0; --mm-i-yellow: #D99A00; --mm-i-red: #E03A31; --mm-i-teal: #1C8A7F;
  --mm-i-green: #1F9A55; --mm-i-tan: #97794B; --mm-i-purple: #7550C4; --mm-i-orange: #E07A14; --mm-i-gray: #64666D;

  --mm-radius-sm: 8px; --mm-radius: 10px; --mm-radius-lg: 14px; --mm-radius-xl: 18px;
  --mm-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);
  --mm-shadow:    0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
  --mm-shadow-lg: 0 18px 44px -12px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08);
  --mm-btn-shadow: 0 1px 2px rgba(16, 24, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
  --mm-seg-active: #FFFFFF;        /* selected segment in sub-menus    */
}

/* ── 2. Light palette (re-colours every Tailwind colour class) ──────── */
:root {
  /* slate, gray, zinc, neutral, stone */
  --c-slate-50:246 247 249; --c-slate-100:238 239 242; --c-slate-200:220 222 227; --c-slate-300:195 197 204; --c-slate-400:134 136 144; --c-slate-500:100 102 109; --c-slate-600:74 76 82; --c-slate-700:51 53 58; --c-slate-800:32 34 38; --c-slate-900:17 18 20; --c-slate-950:8 9 10;
  --c-gray-50:246 247 249; --c-gray-100:238 239 242; --c-gray-200:220 222 227; --c-gray-300:195 197 204; --c-gray-400:134 136 144; --c-gray-500:100 102 109; --c-gray-600:74 76 82; --c-gray-700:51 53 58; --c-gray-800:32 34 38; --c-gray-900:17 18 20; --c-gray-950:8 9 10;
  --c-zinc-50:246 247 249; --c-zinc-100:238 239 242; --c-zinc-200:220 222 227; --c-zinc-300:195 197 204; --c-zinc-400:134 136 144; --c-zinc-500:100 102 109; --c-zinc-600:74 76 82; --c-zinc-700:51 53 58; --c-zinc-800:32 34 38; --c-zinc-900:17 18 20; --c-zinc-950:8 9 10;
  --c-neutral-50:246 247 249; --c-neutral-100:238 239 242; --c-neutral-200:220 222 227; --c-neutral-300:195 197 204; --c-neutral-400:134 136 144; --c-neutral-500:100 102 109; --c-neutral-600:74 76 82; --c-neutral-700:51 53 58; --c-neutral-800:32 34 38; --c-neutral-900:17 18 20; --c-neutral-950:8 9 10;
  --c-stone-50:246 247 249; --c-stone-100:238 239 242; --c-stone-200:220 222 227; --c-stone-300:195 197 204; --c-stone-400:134 136 144; --c-stone-500:100 102 109; --c-stone-600:74 76 82; --c-stone-700:51 53 58; --c-stone-800:32 34 38; --c-stone-900:17 18 20; --c-stone-950:8 9 10;

  /* blue, sky */
  --c-blue-50:238 245 254; --c-blue-100:220 234 253; --c-blue-200:187 214 251; --c-blue-300:143 188 248; --c-blue-400:90 157 244; --c-blue-500:46 134 242; --c-blue-600:26 111 224; --c-blue-700:19 91 192; --c-blue-800:15 74 158; --c-blue-900:13 62 130; --c-blue-950:10 43 92;
  --c-sky-50:238 245 254; --c-sky-100:220 234 253; --c-sky-200:187 214 251; --c-sky-300:143 188 248; --c-sky-400:90 157 244; --c-sky-500:46 134 242; --c-sky-600:26 111 224; --c-sky-700:19 91 192; --c-sky-800:15 74 158; --c-sky-900:13 62 130; --c-sky-950:10 43 92;

  /* indigo, violet, purple, fuchsia */
  --c-indigo-50:244 241 252; --c-indigo-100:233 226 249; --c-indigo-200:211 198 243; --c-indigo-300:182 161 234; --c-indigo-400:154 125 223; --c-indigo-500:138 99 210; --c-indigo-600:101 69 184; --c-indigo-700:82 56 153; --c-indigo-800:66 46 124; --c-indigo-900:55 39 101; --c-indigo-950:34 24 64;
  --c-violet-50:244 241 252; --c-violet-100:233 226 249; --c-violet-200:211 198 243; --c-violet-300:182 161 234; --c-violet-400:154 125 223; --c-violet-500:138 99 210; --c-violet-600:101 69 184; --c-violet-700:82 56 153; --c-violet-800:66 46 124; --c-violet-900:55 39 101; --c-violet-950:34 24 64;
  --c-purple-50:244 241 252; --c-purple-100:233 226 249; --c-purple-200:211 198 243; --c-purple-300:182 161 234; --c-purple-400:154 125 223; --c-purple-500:138 99 210; --c-purple-600:101 69 184; --c-purple-700:82 56 153; --c-purple-800:66 46 124; --c-purple-900:55 39 101; --c-purple-950:34 24 64;
  --c-fuchsia-50:244 241 252; --c-fuchsia-100:233 226 249; --c-fuchsia-200:211 198 243; --c-fuchsia-300:182 161 234; --c-fuchsia-400:154 125 223; --c-fuchsia-500:138 99 210; --c-fuchsia-600:101 69 184; --c-fuchsia-700:82 56 153; --c-fuchsia-800:66 46 124; --c-fuchsia-900:55 39 101; --c-fuchsia-950:34 24 64;

  /* amber, yellow */
  --c-amber-50:255 248 230; --c-amber-100:255 239 194; --c-amber-200:255 224 138; --c-amber-300:255 209 92; --c-amber-400:248 193 50; --c-amber-500:244 180 0; --c-amber-600:138 93 0; --c-amber-700:110 74 0; --c-amber-800:90 60 0; --c-amber-900:69 46 0; --c-amber-950:46 31 0;
  --c-yellow-50:255 248 230; --c-yellow-100:255 239 194; --c-yellow-200:255 224 138; --c-yellow-300:255 209 92; --c-yellow-400:248 193 50; --c-yellow-500:244 180 0; --c-yellow-600:138 93 0; --c-yellow-700:110 74 0; --c-yellow-800:90 60 0; --c-yellow-900:69 46 0; --c-yellow-950:46 31 0;

  /* orange */
  --c-orange-50:255 245 236; --c-orange-100:255 231 209; --c-orange-200:255 205 163; --c-orange-300:253 175 110; --c-orange-400:247 151 63; --c-orange-500:240 138 36; --c-orange-600:184 94 18; --c-orange-700:148 74 15; --c-orange-800:120 61 14; --c-orange-900:98 50 12; --c-orange-950:54 27 6;

  /* emerald, green, lime */
  --c-emerald-50:235 248 239; --c-emerald-100:209 241 220; --c-emerald-200:165 226 189; --c-emerald-300:112 204 150; --c-emerald-400:69 185 118; --c-emerald-500:46 168 98; --c-emerald-600:27 125 67; --c-emerald-700:22 102 54; --c-emerald-800:19 82 44; --c-emerald-900:16 68 36; --c-emerald-950:8 39 26;
  --c-green-50:235 248 239; --c-green-100:209 241 220; --c-green-200:165 226 189; --c-green-300:112 204 150; --c-green-400:69 185 118; --c-green-500:46 168 98; --c-green-600:27 125 67; --c-green-700:22 102 54; --c-green-800:19 82 44; --c-green-900:16 68 36; --c-green-950:8 39 26;
  --c-lime-50:235 248 239; --c-lime-100:209 241 220; --c-lime-200:165 226 189; --c-lime-300:112 204 150; --c-lime-400:69 185 118; --c-lime-500:46 168 98; --c-lime-600:27 125 67; --c-lime-700:22 102 54; --c-lime-800:19 82 44; --c-lime-900:16 68 36; --c-lime-950:8 39 26;

  /* teal, cyan */
  --c-teal-50:235 247 246; --c-teal-100:207 238 234; --c-teal-200:162 221 214; --c-teal-300:108 198 189; --c-teal-400:63 176 164; --c-teal-500:36 158 146; --c-teal-600:24 116 105; --c-teal-700:21 94 86; --c-teal-800:19 76 70; --c-teal-900:17 62 58; --c-teal-950:9 37 34;
  --c-cyan-50:235 247 246; --c-cyan-100:207 238 234; --c-cyan-200:162 221 214; --c-cyan-300:108 198 189; --c-cyan-400:63 176 164; --c-cyan-500:36 158 146; --c-cyan-600:24 116 105; --c-cyan-700:21 94 86; --c-cyan-800:19 76 70; --c-cyan-900:17 62 58; --c-cyan-950:9 37 34;

  /* red, rose */
  --c-red-50:255 241 240; --c-red-100:255 223 220; --c-red-200:255 195 190; --c-red-300:255 154 146; --c-red-400:247 111 102; --c-red-500:238 75 66; --c-red-600:200 48 42; --c-red-700:168 38 33; --c-red-800:136 32 28; --c-red-900:110 27 24; --c-red-950:61 14 12;
  --c-rose-50:255 241 240; --c-rose-100:255 223 220; --c-rose-200:255 195 190; --c-rose-300:255 154 146; --c-rose-400:247 111 102; --c-rose-500:238 75 66; --c-rose-600:200 48 42; --c-rose-700:168 38 33; --c-rose-800:136 32 28; --c-rose-900:110 27 24; --c-rose-950:61 14 12;

  /* pink */
  --c-pink-50:246 247 249; --c-pink-100:238 239 242; --c-pink-200:220 222 227; --c-pink-300:195 197 204; --c-pink-400:134 136 144; --c-pink-500:100 102 109; --c-pink-600:74 76 82; --c-pink-700:51 53 58; --c-pink-800:32 34 38; --c-pink-900:17 18 20; --c-pink-950:8 9 10;
}

/* ── 3. Dark theme ──────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --mm-canvas:         #20242C;
  --mm-surface:        #2A2F39;
  --mm-surface-2:      #323845;
  --mm-sidebar:        #19191C;
  --sb-bg:             #111215;
  --sb-line:           rgba(255, 255, 255, .07);
  --sb-active:         #2F8BF6;
  --mm-sidebar-hover:  rgba(255, 255, 255, .06);
  --mm-sidebar-active: #2C2C31;
  --mm-sidebar-active-ink: #F2F2F5;
  --mm-line:           #434A59;
  --mm-line-strong:    #566074;
  --mm-th:             #333A47;
  --mm-zebra:          #2D323C;
  --mm-row-hover:      #36405A;

  --mm-ink:   #EEF1F6;
  --mm-ink-2: #CCD3DE;
  --mm-ink-3: #A3ADBC;

  --mm-accent:       #2F8BF6;
  --mm-accent-hover: #4A9BF7;
  --mm-accent-ink:   #6FB0FA;
  --mm-accent-soft:  rgba(47, 139, 246, .20);

  --mm-i-blue: #4A9BF7; --mm-i-yellow: #F4C430; --mm-i-red: #F76F66; --mm-i-teal: #3FB0A4;
  --mm-i-green: #45B976; --mm-i-tan: #C4A77A; --mm-i-purple: #A88BE6; --mm-i-orange: #F7973F; --mm-i-gray: #98989F;

  --mm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --mm-shadow:    0 1px 3px rgba(0, 0, 0, .45);
  --mm-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
  --mm-btn-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --mm-seg-active: #424A5A;

  /* slate, gray, zinc, neutral, stone */
  --c-slate-50:32 34 43; --c-slate-100:41 43 52; --c-slate-200:53 55 65; --c-slate-300:67 69 80; --c-slate-400:119 121 134; --c-slate-500:142 142 149; --c-slate-600:174 174 180; --c-slate-700:199 199 204; --c-slate-800:225 225 230; --c-slate-900:242 242 245; --c-slate-950:255 255 255;
  --c-gray-50:32 34 43; --c-gray-100:41 43 52; --c-gray-200:53 55 65; --c-gray-300:67 69 80; --c-gray-400:119 121 134; --c-gray-500:142 142 149; --c-gray-600:174 174 180; --c-gray-700:199 199 204; --c-gray-800:225 225 230; --c-gray-900:242 242 245; --c-gray-950:255 255 255;
  --c-zinc-50:32 34 43; --c-zinc-100:41 43 52; --c-zinc-200:53 55 65; --c-zinc-300:67 69 80; --c-zinc-400:119 121 134; --c-zinc-500:142 142 149; --c-zinc-600:174 174 180; --c-zinc-700:199 199 204; --c-zinc-800:225 225 230; --c-zinc-900:242 242 245; --c-zinc-950:255 255 255;
  --c-neutral-50:32 34 43; --c-neutral-100:41 43 52; --c-neutral-200:53 55 65; --c-neutral-300:67 69 80; --c-neutral-400:119 121 134; --c-neutral-500:142 142 149; --c-neutral-600:174 174 180; --c-neutral-700:199 199 204; --c-neutral-800:225 225 230; --c-neutral-900:242 242 245; --c-neutral-950:255 255 255;
  --c-stone-50:32 34 43; --c-stone-100:41 43 52; --c-stone-200:53 55 65; --c-stone-300:67 69 80; --c-stone-400:119 121 134; --c-stone-500:142 142 149; --c-stone-600:174 174 180; --c-stone-700:199 199 204; --c-stone-800:225 225 230; --c-stone-900:242 242 245; --c-stone-950:255 255 255;

  /* blue, sky */
  --c-blue-50:41 52 72; --c-blue-100:42 58 84; --c-blue-200:44 69 105; --c-blue-300:47 88 145; --c-blue-400:90 157 244; --c-blue-500:46 134 242; --c-blue-600:61 142 243; --c-blue-700:72 148 243; --c-blue-800:143 188 248; --c-blue-900:187 214 251; --c-blue-950:220 234 253;
  --c-sky-50:41 52 72; --c-sky-100:42 58 84; --c-sky-200:44 69 105; --c-sky-300:47 88 145; --c-sky-400:90 157 244; --c-sky-500:46 134 242; --c-sky-600:61 142 243; --c-sky-700:72 148 243; --c-sky-800:143 188 248; --c-sky-900:187 214 251; --c-sky-950:220 234 253;

  /* indigo, violet, purple, fuchsia */
  --c-indigo-50:51 49 69; --c-indigo-100:57 53 79; --c-indigo-200:68 60 97; --c-indigo-300:88 73 130; --c-indigo-400:154 125 223; --c-indigo-500:138 99 210; --c-indigo-600:144 108 215; --c-indigo-700:148 115 218; --c-indigo-800:182 161 234; --c-indigo-900:211 198 243; --c-indigo-950:233 226 249;
  --c-violet-50:51 49 69; --c-violet-100:57 53 79; --c-violet-200:68 60 97; --c-violet-300:88 73 130; --c-violet-400:154 125 223; --c-violet-500:138 99 210; --c-violet-600:144 108 215; --c-violet-700:148 115 218; --c-violet-800:182 161 234; --c-violet-900:211 198 243; --c-violet-950:233 226 249;
  --c-purple-50:51 49 69; --c-purple-100:57 53 79; --c-purple-200:68 60 97; --c-purple-300:88 73 130; --c-purple-400:154 125 223; --c-purple-500:138 99 210; --c-purple-600:144 108 215; --c-purple-700:148 115 218; --c-purple-800:182 161 234; --c-purple-900:211 198 243; --c-purple-950:233 226 249;
  --c-fuchsia-50:51 49 69; --c-fuchsia-100:57 53 79; --c-fuchsia-200:68 60 97; --c-fuchsia-300:88 73 130; --c-fuchsia-400:154 125 223; --c-fuchsia-500:138 99 210; --c-fuchsia-600:144 108 215; --c-fuchsia-700:148 115 218; --c-fuchsia-800:182 161 234; --c-fuchsia-900:211 198 243; --c-fuchsia-950:233 226 249;

  /* amber, yellow */
  --c-amber-50:61 57 48; --c-amber-100:74 66 46; --c-amber-200:95 81 42; --c-amber-300:136 109 36; --c-amber-400:248 193 50; --c-amber-500:244 180 0; --c-amber-600:245 185 18; --c-amber-700:246 188 30; --c-amber-800:255 209 92; --c-amber-900:255 224 138; --c-amber-950:255 239 194;
  --c-yellow-50:61 57 48; --c-yellow-100:74 66 46; --c-yellow-200:95 81 42; --c-yellow-300:136 109 36; --c-yellow-400:248 193 50; --c-yellow-500:244 180 0; --c-yellow-600:245 185 18; --c-yellow-700:246 188 30; --c-yellow-800:255 209 92; --c-yellow-900:255 224 138; --c-yellow-950:255 239 194;

  /* orange */
  --c-orange-50:61 53 51; --c-orange-100:73 59 51; --c-orange-200:94 70 52; --c-orange-300:134 90 52; --c-orange-400:247 151 63; --c-orange-500:240 138 36; --c-orange-600:242 143 45; --c-orange-700:244 146 52; --c-orange-800:253 175 110; --c-orange-900:255 205 163; --c-orange-950:255 231 209;

  /* emerald, green, lime */
  --c-emerald-50:41 56 57; --c-emerald-100:42 64 61; --c-emerald-200:44 78 68; --c-emerald-300:47 104 80; --c-emerald-400:69 185 118; --c-emerald-500:46 168 98; --c-emerald-600:54 174 105; --c-emerald-700:60 178 110; --c-emerald-800:112 204 150; --c-emerald-900:165 226 189; --c-emerald-950:209 241 220;
  --c-green-50:41 56 57; --c-green-100:42 64 61; --c-green-200:44 78 68; --c-green-300:47 104 80; --c-green-400:69 185 118; --c-green-500:46 168 98; --c-green-600:54 174 105; --c-green-700:60 178 110; --c-green-800:112 204 150; --c-green-900:165 226 189; --c-green-950:209 241 220;
  --c-lime-50:41 56 57; --c-lime-100:42 64 61; --c-lime-200:44 78 68; --c-lime-300:47 104 80; --c-lime-400:69 185 118; --c-lime-500:46 168 98; --c-lime-600:54 174 105; --c-lime-700:60 178 110; --c-lime-800:112 204 150; --c-lime-900:165 226 189; --c-lime-950:209 241 220;

  /* teal, cyan */
  --c-teal-50:41 55 62; --c-teal-100:41 62 69; --c-teal-200:41 75 80; --c-teal-300:42 99 101; --c-teal-400:63 176 164; --c-teal-500:36 158 146; --c-teal-600:45 164 152; --c-teal-700:52 169 157; --c-teal-800:108 198 189; --c-teal-900:162 221 214; --c-teal-950:207 238 234;
  --c-cyan-50:41 55 62; --c-cyan-100:41 62 69; --c-cyan-200:41 75 80; --c-cyan-300:42 99 101; --c-cyan-400:63 176 164; --c-cyan-500:36 158 146; --c-cyan-600:45 164 152; --c-cyan-700:52 169 157; --c-cyan-800:108 198 189; --c-cyan-900:162 221 214; --c-cyan-950:207 238 234;

  /* red, rose */
  --c-red-50:61 46 54; --c-red-100:73 49 56; --c-red-200:94 53 59; --c-red-300:133 62 65; --c-red-400:247 111 102; --c-red-500:238 75 66; --c-red-600:241 88 79; --c-red-700:243 97 88; --c-red-800:255 154 146; --c-red-900:255 195 190; --c-red-950:255 223 220;
  --c-rose-50:61 46 54; --c-rose-100:73 49 56; --c-rose-200:94 53 59; --c-rose-300:133 62 65; --c-rose-400:247 111 102; --c-rose-500:238 75 66; --c-rose-600:241 88 79; --c-rose-700:243 97 88; --c-rose-800:255 154 146; --c-rose-900:255 195 190; --c-rose-950:255 223 220;

  /* pink */
  --c-pink-50:32 34 43; --c-pink-100:41 43 52; --c-pink-200:53 55 65; --c-pink-300:67 69 80; --c-pink-400:119 121 134; --c-pink-500:142 142 149; --c-pink-600:174 174 180; --c-pink-700:199 199 204; --c-pink-800:225 225 230; --c-pink-900:242 242 245; --c-pink-950:255 255 255;
}

/* ── 4. Type & base ─────────────────────────────────────────────────── */
body { font-family: var(--mm-font); color: var(--mm-ink); background: var(--mm-canvas);
       -webkit-font-smoothing: antialiased; letter-spacing: 0; }
html[data-theme="dark"] body { letter-spacing: -0.003em; }
body, #sidebar, #main-content, .bg-white, thead th { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.font-black     { font-weight: 800; }   /* light: firm, readable weights */
.font-extrabold { font-weight: 800; }
.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
html[data-theme="dark"] .font-black     { font-weight: 700; }   /* dark: a touch lighter */
html[data-theme="dark"] .font-extrabold { font-weight: 700; }
html[data-theme="dark"] .font-bold      { font-weight: 600; }
body[class] *::selection { background: var(--mm-accent-soft); color: inherit; }

.rounded-xl  { border-radius: var(--mm-radius); }
.rounded-2xl { border-radius: var(--mm-radius-lg); }
.rounded-3xl { border-radius: var(--mm-radius-xl); }
.shadow-sm   { --tw-shadow: var(--mm-shadow-sm); --tw-shadow-colored: var(--mm-shadow-sm); }
.shadow, .shadow-md { --tw-shadow: var(--mm-shadow); --tw-shadow-colored: var(--mm-shadow); }
.shadow-lg, .shadow-xl, .shadow-2xl { --tw-shadow: var(--mm-shadow-lg); --tw-shadow-colored: var(--mm-shadow-lg); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(127,127,135,.35); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(127,127,135,.6); background-clip: padding-box; border: 2px solid transparent; }

/* Keyboard focus that is always visible */
#app :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

/* ── 5. Login screen ────────────────────────────────────────────────── */
#login-screen { background: var(--mm-canvas); background-image: none; }
#login-screen > div:not(#login-theme-toggle) { background: var(--mm-surface); border: 1px solid var(--mm-line); box-shadow: var(--mm-shadow-lg); }
#login-theme-toggle { background: var(--mm-surface); color: var(--mm-ink-2); border: 1px solid var(--mm-line); box-shadow: var(--mm-shadow-sm); }
#login-theme-toggle:hover { color: var(--mm-ink); }

/* ── 6. Sidebar (dark panel in both themes) ─────────────────────────── */
#app #sidebar { background: var(--sb-bg); color: var(--sb-ink); box-shadow: none; border-right: 1px solid var(--sb-line);
  /* brighter icon colours for the dark panel */
  --mm-i-blue: #6AAEFF; --mm-i-yellow: #F7C948; --mm-i-red: #FF7B72; --mm-i-teal: #4FD1C5; --mm-i-green: #5BD38A;
  --mm-i-tan: #D8BC8A; --mm-i-purple: #B69CFF; --mm-i-orange: #FFA657; --mm-i-gray: #9AA5B8; }
#sidebar .border-slate-800 { border-color: var(--sb-line); }
#sidebar h1 { color: var(--sb-ink-hi); }
#sidebar .sidebar-brand-text span { color: var(--sb-ink-3); }
#sidebar button.bg-slate-800 { background: var(--sb-card); color: var(--sb-ink); }
#sidebar button.bg-slate-800:hover { background: var(--sb-hover); color: var(--sb-ink-hi); }
#sidebar #sidebar-reorder-toggle { color: var(--sb-ink-3); }
#sidebar #sidebar-reorder-toggle:hover { background: var(--sb-hover); color: var(--sb-ink-hi); }

#sidebar .nav-btn { color: var(--sb-ink); font-weight: 500; border-radius: var(--mm-radius-sm); }
#sidebar .nav-btn:hover { background: var(--sb-hover); color: var(--sb-ink-hi); }
#sidebar .nav-btn.bg-blue-700 { background: var(--sb-active); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px -2px rgba(26, 111, 224, .6); }
#sidebar .nav-btn.bg-blue-700 > i:not(.nav-drag-handle) { color: #fff; }
#sidebar.minimized .nav-btn { border-radius: var(--mm-radius); }
#sidebar .nav-drag-handle { color: var(--sb-ink-3); }

#sidebar .nav-btn > i:not(.nav-drag-handle) { color: var(--mm-i-gray); }
#nav-dashboard        > i:not(.nav-drag-handle) { color: var(--mm-i-blue); }
#nav-item-search      > i:not(.nav-drag-handle) { color: var(--mm-i-gray); }
#nav-upcoming-goods   > i:not(.nav-drag-handle) { color: var(--mm-i-red); }
#nav-daily-stock      > i:not(.nav-drag-handle),
#nav-sales            > i:not(.nav-drag-handle) { color: var(--mm-i-teal); }
#nav-client-catalog   > i:not(.nav-drag-handle) { color: var(--mm-i-purple); }
#nav-master-items     > i:not(.nav-drag-handle) { color: var(--mm-i-blue); }
#nav-purchase-history > i:not(.nav-drag-handle) { color: var(--mm-i-green); }
#nav-product-images   > i:not(.nav-drag-handle) { color: var(--mm-i-purple); }
#nav-china-orders     > i:not(.nav-drag-handle) { color: var(--mm-i-orange); }
#nav-suppliers        > i:not(.nav-drag-handle) { color: var(--mm-i-tan); }
#nav-preorder         > i:not(.nav-drag-handle) { color: var(--mm-i-yellow); }
#nav-attendance       > i:not(.nav-drag-handle) { color: var(--mm-i-teal); }
#nav-admin-users      > i:not(.nav-drag-handle) { color: var(--mm-i-gray); }
#sidebar .nav-btn.bg-blue-700 > i:not(.nav-drag-handle) { color: #fff; }
#sidebar #theme-toggle > i { color: var(--mm-i-purple); }
html[data-theme="dark"] #sidebar #theme-toggle > i { color: var(--mm-i-yellow); }

#sidebar .sidebar-profile { background: var(--sb-card); border: 1px solid var(--sb-line); box-shadow: none; }
#sidebar .sidebar-profile .text-white { color: var(--sb-ink-hi); }
#sidebar .sidebar-profile .text-slate-400, #sidebar .sidebar-profile .text-slate-500 { color: var(--sb-ink-3); }
#sidebar .sidebar-profile .bg-blue-700\/30 { background: rgba(106, 174, 255, .18); color: #9CC8FF; }
#sidebar .sidebar-profile button.bg-slate-700 { background: transparent; color: var(--sb-ink-3); }
#sidebar .sidebar-profile button.bg-slate-700:hover { background: var(--sb-hover); color: var(--sb-ink-hi); }

/* ── 7. Page, cards, buttons ────────────────────────────────────────── */
#main-content { background: var(--mm-canvas); }
#main-content .bg-white.border:not(#catalog-pdf-content *) { border-color: var(--mm-line); }
#main-content .rounded-2xl.bg-white:not(#catalog-pdf-content *) { box-shadow: var(--mm-shadow-sm); }

/* One accent colour for main actions (yellow and dark buttons become blue) */
#app :is(button, a, label).bg-amber-500 { background: var(--mm-accent); color: var(--mm-on-accent); }
#app :is(button, a, label).bg-amber-500:hover { background: var(--mm-accent-hover); }
#main-content button.bg-slate-800:not(#catalog-pdf-content *) { background: var(--mm-accent); color: var(--mm-on-accent); }
#main-content button.bg-slate-800:not(#catalog-pdf-content *):hover { background: var(--mm-accent-hover); }
/* Solid buttons get a crisp edge so they "sit" on the page */
#app button:is(.bg-amber-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-emerald-600, .bg-emerald-700, .bg-red-600, .bg-red-500, .bg-violet-600, .bg-slate-800):not(#sidebar *) { box-shadow: var(--mm-btn-shadow); }

/* Sub-menus (Master Item | Pre-Approval, Stock | Sales) are styled by .mm-subtabs in index.html,
   using --mm-th, --mm-line, --mm-seg-active and --mm-accent from this file. */

/* Modal backdrops: soft blur */
.bg-slate-900\/60, .bg-slate-950\/60 { background-color: rgba(10, 10, 12, .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Inputs */
#app :where(input:not([type=checkbox]):not([type=radio]), select, textarea) { border-color: var(--mm-line-strong); }
#app :where(input, select, textarea):focus { border-color: var(--mm-accent); }
#app :where(input, select, textarea)::placeholder { color: var(--mm-ink-3); opacity: .8; }

/* ── 8. Tables ──────────────────────────────────────────────────────── */
#main-content thead tr, #main-content thead th {
  background: var(--mm-th); color: var(--mm-ink-2);
  text-transform: none; letter-spacing: 0; font-weight: 700; }
html[data-theme="dark"] #main-content thead :is(tr, th) { font-weight: 600; }
#main-content thead th { font-size: 12px; border-bottom: 1px solid var(--mm-line-strong); }
#main-content thead th * { color: inherit; }
#main-content tbody td { border-color: var(--mm-line); }
#main-content :where(tbody tr:nth-child(even)) { background-color: var(--mm-zebra); }
#main-content :where(tbody tr):hover { background-color: var(--mm-row-hover); }
#main-content thead th:is(.bg-amber-800, .bg-orange-800, .bg-orange-700) { color: rgb(var(--c-orange-700)); box-shadow: inset 0 -2px 0 var(--mm-i-orange); }
#main-content thead th:is(.bg-cyan-800, .bg-sky-800, .bg-blue-700)       { color: var(--mm-accent-ink);     box-shadow: inset 0 -2px 0 var(--mm-accent); }
#main-content thead th:is(.bg-teal-800)                                  { color: rgb(var(--c-teal-700));   box-shadow: inset 0 -2px 0 var(--mm-i-teal); }
#main-content thead th:is(.bg-emerald-800, .bg-emerald-700)              { color: rgb(var(--c-emerald-700)); box-shadow: inset 0 -2px 0 var(--mm-i-green); }
#main-content thead th:is(.bg-red-700)                                   { color: rgb(var(--c-red-700));    box-shadow: inset 0 -2px 0 var(--mm-i-red); }
#main-content thead th input { background: var(--mm-surface); color: var(--mm-ink); border: 1px solid var(--mm-line-strong); }
#main-content tbody tr.bg-emerald-200 { background: var(--mm-th); box-shadow: inset 0 1px 0 var(--mm-line-strong); }

/* Excel-style blocks */
.excel-header          { background-color: rgb(var(--c-amber-50)); }
.excel-orange-header   { background-color: rgb(var(--c-orange-100)); color: rgb(var(--c-orange-800)); }
.excel-pink-cell       { background-color: var(--mm-surface-2); }
.excel-green-highlight { background-color: var(--mm-i-green); color: #fff; }
#main-content .border-slate-900:not(#catalog-pdf-content *) { border-color: var(--mm-line-strong); }

/* Item Search stock card */
#wh-grid > div > div:nth-child(1), #wh-grid > div > div:nth-child(2) { background: var(--mm-th); color: var(--mm-ink-2); }
#wh-grid > div > div:nth-child(3) { background: var(--mm-surface); }
#wh-grid [id^="wh-stock-"], #card-crt-rate, #card-loose-rate, #card-crt-pcs { color: var(--mm-ink); }
#wh-col-kosad > div:first-child { box-shadow: inset 0 3px 0 var(--mm-i-orange); }
#wh-col-vr    > div:first-child { box-shadow: inset 0 3px 0 var(--mm-i-blue); }
#wh-col-yc    > div:first-child { box-shadow: inset 0 3px 0 var(--mm-i-red); }
#wh-col-main  > div:first-child { box-shadow: inset 0 3px 0 var(--mm-i-green); }
#card-item-name, #card-item-name.excel-header { background: var(--mm-surface); color: var(--mm-ink); border-bottom: 1px solid var(--mm-line); letter-spacing: 0; }
#main-content .excel-pink-cell { background: var(--mm-surface); }
#card-dds-code { background: var(--mm-accent-soft); color: var(--mm-accent-ink); }

/* Dashboard value cards */
#main-content [class*="bg-gradient-to-"]:not(#catalog-pdf-content *) {
  background-image: none; background-color: var(--mm-surface); color: var(--mm-ink);
  border: 1px solid var(--mm-line); box-shadow: var(--mm-shadow-sm); }
#main-content [class*="bg-gradient-to-"]:not(#catalog-pdf-content *) .text-white { color: var(--mm-ink); }
#main-content [class*="bg-gradient-to-"]:not(#catalog-pdf-content *) :is([class*="-100"], [class*="-200"]):not([class*="bg-"]) { color: var(--mm-ink-3); }
#main-content [class*="bg-gradient-to-"]:not(#catalog-pdf-content *) .bg-white\/20 { background: var(--mm-surface-2); color: var(--mm-ink-2); }
#main-content .from-orange-500:not(#catalog-pdf-content *)  { box-shadow: inset 4px 0 0 var(--mm-i-orange), var(--mm-shadow-sm); }
#main-content .from-blue-500:not(#catalog-pdf-content *)    { box-shadow: inset 4px 0 0 var(--mm-i-blue),   var(--mm-shadow-sm); }
#main-content .from-red-500:not(#catalog-pdf-content *)     { box-shadow: inset 4px 0 0 var(--mm-i-red),    var(--mm-shadow-sm); }
#main-content .from-emerald-500:not(#catalog-pdf-content *) { box-shadow: inset 4px 0 0 var(--mm-i-green),  var(--mm-shadow-sm); }
#main-content .from-violet-600:not(#catalog-pdf-content *)  { box-shadow: inset 4px 0 0 var(--mm-i-purple), var(--mm-shadow-sm); }

/* ── 9. Toasts ──────────────────────────────────────────────────────── */
@keyframes mm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#toast-container .animate-bounce { animation: mm-toast-in .22s ease-out both; }
#toast-container > .bg-slate-900 { background: #2C2C2E; color: #fff; border-color: #3A3A3C; }
@media (prefers-reduced-motion: reduce) { #toast-container .animate-bounce { animation: none; } body, #sidebar, #main-content, .bg-white, thead th { transition: none; } }

/* ── 10. Dark-only fixes (things that are hard-coded white/black) ──── */
html[data-theme="dark"] .bg-white:not(#catalog-pdf-content):not(#catalog-pdf-content *) { background-color: var(--mm-surface); }
html[data-theme="dark"] :is(.bg-slate-900, .bg-slate-800, .bg-slate-700):not(thead *):not(#sidebar):not(#sidebar *):not(#catalog-pdf-content *):not(#main-content button) { background-color: #3A3A3F; }
html[data-theme="dark"] :is(.bg-slate-900, .bg-slate-800, .bg-slate-700):not(thead *):not(#sidebar):not(#sidebar *):not(#catalog-pdf-content *):not(#main-content button):is(.text-slate-800, .text-slate-900) { color: #fff; }
html[data-theme="dark"] :where(#app) :where(input, select, textarea):not([class*="bg-"]) { background-color: var(--mm-surface-2); color: var(--mm-ink); }
html[data-theme="dark"] img:not(#catalog-pdf-content *) { background-color: #fff; }   /* product photos keep a white card */
html[data-theme="dark"] #toast-container > .bg-slate-900 { background: #424A5A; }

/* ── 11. Keep the client Catalog PDF exactly as before ──────────────── */
#catalog-pdf-content { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; letter-spacing: normal; color-scheme: light; }
#catalog-pdf-content .font-black     { font-weight: 900; }
#catalog-pdf-content .font-extrabold { font-weight: 800; }
#catalog-pdf-content .font-bold      { font-weight: 700; }
#catalog-pdf-content .rounded-xl  { border-radius: .75rem; }
#catalog-pdf-content .rounded-2xl { border-radius: 1rem; }
#catalog-pdf-content .rounded-3xl { border-radius: 1.5rem; }