/* Staff console colour themes, chosen per device under Account (stored in this browser).
   Each theme only redefines the shared colour variables; the screens themselves don't change.
   Applied with <html data-appearance="...">. Printing always uses the default light colours,
   the guest menu keeps the restaurant's own design, and the kitchen display keeps its dark look. */

@media screen {
  /* ---- Tabliqo Dark ------------------------------------------------------------------- */
  :root[data-appearance="dark"] {
    color-scheme: dark;
    --fog: #0f1513; --chalk: #171f1c; --surface-2: #1c2622; --paper: #1f2824;
    --ink: #e6ece9; --graphite: #c9d3ce; --slate: #93a29b; --line: #2b3833;
    --awning: #0b2a22; --awning-2: #133a2f; --awning-3: #1d4a3d; --awning-text: #b9d1c7; --on-awning: #ffffff;
    --btn-bg: #1f7a5c; --btn-hover: #24906c; --btn-fg: #ffffff;
    --mango: #f5a524; --on-mango: #1b1408; --mango-soft: #3a2c10; --mango-ink: #f7c56b;
    --palm: #2fbf87; --palm-soft: #11352a; --palm-ink: #8ee0bd;
    --chili: #ff6b5e; --chili-soft: #3d1714; --chili-ink: #ffb1a9;
    --sky: #6aa5ff; --sky-soft: #14274a; --sky-ink: #a9c8ff;
  }

  /* ---- Solarized Light ------------------------------------------------------------------ */
  :root[data-appearance="solarized-light"] {
    color-scheme: light;
    --fog: #eee8d5; --chalk: #fdf6e3; --surface-2: #f5efdc; --paper: #fdf6e3;
    --ink: #073642; --graphite: #586e75; --slate: #657b83; --line: #ddd6c1;
    --awning: #073642; --awning-2: #0b4554; --awning-3: #125566; --awning-text: #93a1a1; --on-awning: #fdf6e3;
    --btn-bg: #268bd2; --btn-hover: #1f78b8; --btn-fg: #fdf6e3;
    --mango: #b58900; --on-mango: #fdf6e3; --mango-soft: #f4e3b5; --mango-ink: #7a5c00;
    --palm: #859900; --palm-soft: #e8ecc8; --palm-ink: #5a6600;
    --chili: #dc322f; --chili-soft: #f8dcd3; --chili-ink: #a3201d;
    --sky: #268bd2; --sky-soft: #d9e8f3; --sky-ink: #1a5f91;
  }

  /* ---- Solarized Dark ------------------------------------------------------------------- */
  :root[data-appearance="solarized-dark"] {
    color-scheme: dark;
    --fog: #002b36; --chalk: #073642; --surface-2: #0a3f4c; --paper: #0a3f4c;
    --ink: #eee8d5; --graphite: #93a1a1; --slate: #839496; --line: #0f4b59;
    --awning: #00212b; --awning-2: #073642; --awning-3: #0d4553; --awning-text: #93a1a1; --on-awning: #fdf6e3;
    --btn-bg: #268bd2; --btn-hover: #2f99e3; --btn-fg: #fdf6e3;
    --mango: #b58900; --on-mango: #002b36; --mango-soft: #2f3a14; --mango-ink: #e0b84a;
    --palm: #859900; --palm-soft: #1c3a1d; --palm-ink: #c5d36b;
    --chili: #dc322f; --chili-soft: #3b1f22; --chili-ink: #ff8f86;
    --sky: #268bd2; --sky-soft: #0c3a57; --sky-ink: #8ac3f0;
  }

  /* ---- Monokai ------------------------------------------------------------------------------ */
  :root[data-appearance="monokai"] {
    color-scheme: dark;
    --fog: #1e1f1c; --chalk: #272822; --surface-2: #2f302a; --paper: #2f302a;
    --ink: #f8f8f2; --graphite: #e6e6dc; --slate: #a59f85; --line: #3e3d32;
    --awning: #171814; --awning-2: #3e3d32; --awning-3: #49483e; --awning-text: #cfcfc2; --on-awning: #f8f8f2;
    --btn-bg: #a6e22e; --btn-hover: #b7ef45; --btn-fg: #1e1f1c;
    --mango: #e6db74; --on-mango: #272822; --mango-soft: #3d3a1e; --mango-ink: #e6db74;
    --palm: #a6e22e; --palm-soft: #2c3a14; --palm-ink: #c4f06a;
    --chili: #f92672; --chili-soft: #3d1a28; --chili-ink: #ff86ae;
    --sky: #66d9ef; --sky-soft: #173a42; --sky-ink: #9ae9f7;
  }

  /* ---- Nord ----------------------------------------------------------------------------------- */
  :root[data-appearance="nord"] {
    color-scheme: dark;
    --fog: #2e3440; --chalk: #3b4252; --surface-2: #434c5e; --paper: #434c5e;
    --ink: #eceff4; --graphite: #e5e9f0; --slate: #a9b1c1; --line: #4c566a;
    --awning: #242933; --awning-2: #3b4252; --awning-3: #434c5e; --awning-text: #d8dee9; --on-awning: #eceff4;
    --btn-bg: #88c0d0; --btn-hover: #9dcfdd; --btn-fg: #2e3440;
    --mango: #ebcb8b; --on-mango: #2e3440; --mango-soft: #4a4535; --mango-ink: #ebcb8b;
    --palm: #a3be8c; --palm-soft: #3a4a3c; --palm-ink: #c2d8ae;
    --chili: #bf616a; --chili-soft: #4b3740; --chili-ink: #e3a1a8;
    --sky: #88c0d0; --sky-soft: #36505d; --sky-ink: #b5dbe6;
  }

  /* ---- Dracula ---------------------------------------------------------------------------------- */
  :root[data-appearance="dracula"] {
    color-scheme: dark;
    --fog: #21222c; --chalk: #282a36; --surface-2: #303241; --paper: #303241;
    --ink: #f8f8f2; --graphite: #e2e2dc; --slate: #a4abcd; --line: #44475a;
    --awning: #191a21; --awning-2: #282a36; --awning-3: #343746; --awning-text: #c7cae0; --on-awning: #f8f8f2;
    --btn-bg: #bd93f9; --btn-hover: #caa6fb; --btn-fg: #21222c;
    --mango: #ffb86c; --on-mango: #282a36; --mango-soft: #4a3a2a; --mango-ink: #ffb86c;
    --palm: #50fa7b; --palm-soft: #1f3d2a; --palm-ink: #8affa8;
    --chili: #ff5555; --chili-soft: #4a2528; --chili-ink: #ff9a9a;
    --sky: #8be9fd; --sky-soft: #213e4a; --sky-ink: #b4f2ff;
  }

  /* ---- High Contrast (dark, strongest edges, for bright kitchens and low vision) ------------------ */
  :root[data-appearance="high-contrast"] {
    color-scheme: dark;
    --fog: #000000; --chalk: #0b0b0b; --surface-2: #161616; --paper: #0b0b0b;
    --ink: #ffffff; --graphite: #ffffff; --slate: #e2e2e2; --line: #a8a8a8;
    --awning: #000000; --awning-2: #1f1f1f; --awning-3: #333333; --awning-text: #ffffff; --on-awning: #ffffff;
    --btn-bg: #ffd400; --btn-hover: #ffe14d; --btn-fg: #000000;
    --mango: #ffd400; --on-mango: #000000; --mango-soft: #332b00; --mango-ink: #ffe766;
    --palm: #3ff28f; --palm-soft: #00331a; --palm-ink: #7dffb8;
    --chili: #ff5c5c; --chili-soft: #3d0000; --chili-ink: #ffb3b3;
    --sky: #6cb4ff; --sky-soft: #001f40; --sky-ink: #b3d8ff;
  }
  :root[data-appearance="high-contrast"] .card,
  :root[data-appearance="high-contrast"] .panel,
  :root[data-appearance="high-contrast"] .tcard,
  :root[data-appearance="high-contrast"] .ticket { border: 1.5px solid #ffffff; }

  /* ---- Pieces that keep a light look in every theme otherwise ---------------------------------- */
  :root[data-appearance]:not([data-appearance="light"]) .topbar { background: color-mix(in srgb, var(--fog) 90%, transparent); }
  :root[data-appearance]:not([data-appearance="light"]) .nav a[aria-current="page"] { background: var(--chalk); color: var(--ink); }
  :root[data-appearance]:not([data-appearance="light"]) .side .who .link { color: var(--mango-ink); }
  :root[data-appearance]:not([data-appearance="light"]) .ticket::before { background: radial-gradient(circle at 6px 0, transparent 5px, var(--paper) 5.5px) -1px 0 / 12px 8px repeat-x; }
  :root[data-appearance]:not([data-appearance="light"]) .ticket { border-color: var(--line); }
  :root[data-appearance]:not([data-appearance="light"]) img.qr { background: #fff; }
}

/* The theme picker under Account */
.appearance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.appearance-grid label { position: relative; display: grid; gap: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; font-weight: 650; font-size: 14px; }
.appearance-grid input { position: absolute; opacity: 0; pointer-events: none; }
.appearance-grid label:has(input:checked) { border-color: var(--mango); box-shadow: 0 0 0 2px var(--mango); }
.appearance-grid label:has(input:focus-visible) { outline: 3px solid var(--mango); outline-offset: 2px; }
.swatch { display: grid; grid-template-columns: 26% 1fr; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(127, 127, 127, .35); }
.swatch i { display: block; }
.swatch b { display: grid; align-content: center; gap: 4px; padding: 0 6px; }
.swatch b span { display: block; height: 5px; border-radius: 3px; }