/* =====================================================================
   Canteen "Glass Kitchen" theme — shared look with the login page.
   Loaded AFTER each page's own <style>, so equal-specificity rules win.
   Screen-only: printing (guest labels, CSV) keeps the original styles.
   ===================================================================== */

@media screen {
  :root {
    --t-green: #1b7f5a;
    --t-green-dark: #0b3d2e;
    --t-gold: #f59e0b;
    --t-gold-light: #fde68a;
    --t-ink: #0f172a;
    --t-muted: #5b6b7f;
    --t-glass: rgba(255, 255, 255, 0.9);
    --t-glass-line: rgba(255, 255, 255, 0.65);
    --t-radius: 22px;
    --t-shadow: 0 22px 50px rgba(2, 30, 20, 0.28), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
  }

  html { background: #0b3d2e; }
  body {
    font-family: "Segoe UI", "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
    color: var(--t-ink);
    background: linear-gradient(160deg, #0b3d2e 0%, #1b7f5a 50%, #c99a2e 135%) fixed !important;
    min-height: 100vh;
  }
  .container { position: relative; z-index: 2; }

  /* ---------- background scene (templates/_scene.html) ---------- */
  .bg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .bg-scene .bg-layer {
    position: absolute; inset: -6%;
    transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0);
    transition: transform 0.2s ease-out;
  }
  .bg-scene .bg-layer.near { transform: translate3d(calc(var(--mx, 0) * -44px), calc(var(--my, 0) * -28px), 0); }
  .bg-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; animation: t-breathe 10s ease-in-out infinite; }
  .bg-glow.g1 { width: 50vmax; height: 50vmax; left: -14vmax; top: -16vmax; background: #34d399; }
  .bg-glow.g2 { width: 42vmax; height: 42vmax; right: -14vmax; bottom: -16vmax; background: #fbbf24; animation-delay: -5s; }
  .bg-item {
    position: absolute; font-size: var(--s, 48px); line-height: 1; opacity: 0.55;
    filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.3));
    animation: t-float var(--d, 8s) ease-in-out infinite; animation-delay: var(--delay, 0s);
  }
  @keyframes t-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -20px; rotate: 5deg; } }
  @keyframes t-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  @keyframes t-rise { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: none; } }

  /* ---------- page headers ---------- */
  .topbar, .header {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: var(--t-radius) !important;
    box-shadow: 0 20px 44px rgba(2, 30, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #fff !important;
    animation: t-rise 0.6s cubic-bezier(.2, .9, .2, 1) both;
  }
  .topbar h1, .header h1 { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); letter-spacing: 0.2px; }
  .topbar h1::before, .header h1::before {
    content: "🍱"; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin-right: 0.45em;
    font-size: 0.85em; vertical-align: middle; border-radius: 0.5em;
    background: linear-gradient(145deg, var(--t-gold-light), var(--t-gold));
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  }
  .topbar .muted, .header .muted, .header p, .topbar .hint { color: rgba(255, 255, 255, 0.85) !important; }
  .badge {
    background: rgba(255, 255, 255, 0.2) !important; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px !important;
  }

  /* header link-buttons: glass pills */
  .logout-btn, .back-btn, .btn-link, .top-btn, .export-btn,
  .header-actions a, .topbar-actions a {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    text-decoration: none !important;
    font-weight: 600;
    backdrop-filter: blur(6px);
    transition: background 0.2s, transform 0.15s;
  }
  .logout-btn:hover, .back-btn:hover, .btn-link:hover, .top-btn:hover, .export-btn:hover,
  .header-actions a:hover, .topbar-actions a:hover { background: rgba(255, 255, 255, 0.32) !important; transform: translateY(-1px); }
  .export-btn { background: linear-gradient(180deg, var(--t-gold-light), var(--t-gold)) !important; color: #3b2a00 !important; border-color: transparent !important; }

  /* ---------- glass cards ---------- */
  .card, .guest-card, .add-card, .fb-card, .success-box {
    background: var(--t-glass) !important;
    border: 1px solid var(--t-glass-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: t-rise 0.6s cubic-bezier(.2, .9, .2, 1) both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cards > .card:nth-child(2), .grid > .card:nth-child(2), .layout > .card:nth-child(2) { animation-delay: 0.06s; }
  .cards > .card:nth-child(3) { animation-delay: 0.12s; }
  .cards > .card:nth-child(4) { animation-delay: 0.18s; }
  .guest-card:hover, .fb-card:hover, .cards > .card:hover {
    transform: translateY(-4px) rotateX(2deg);
    box-shadow: 0 30px 60px rgba(2, 30, 20, 0.35), 0 2px 0 rgba(255, 255, 255, 0.6) inset !important;
  }
  .card h2, .add-card h2 {
    color: var(--t-green-dark);
    display: flex; align-items: center; gap: 10px;
  }
  .card h2::before, .add-card h2::before {
    content: ""; width: 6px; height: 1.1em; border-radius: 6px;
    background: linear-gradient(180deg, var(--t-gold-light), var(--t-gold));
    flex: none;
  }

  /* KPI numbers */
  .big-number, .metric strong {
    background: linear-gradient(135deg, var(--t-green) 0%, #10b981 55%, var(--t-gold) 120%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
    font-weight: 800;
  }
  .metric, .summary-box, .result, .not-found-box, .matches-box {
    border-radius: 16px !important;
  }

  /* text that sits directly on the dark background */
  .container > .hint, .container > p, .container > .muted, .container > .filter-note,
  .card-grid > .empty-state, .card-list > .empty-state, .container > .empty-state {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* ---------- form controls ---------- */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    border-radius: 14px !important;
    border: 1px solid #d6e0ea !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--t-gold) !important;
    box-shadow: 0 0 0 4px rgba(253, 230, 138, 0.55) !important;
  }

  /* ---------- primary actions: gold 3D (same as login) ---------- */
  .btn-primary, .add-btn, .submit-btn, .again-btn,
  #searchBtn, #recordBtn, #manualEntryBtn, #captureBtn, #addGuestBtn {
    background: linear-gradient(180deg, var(--t-gold-light), var(--t-gold)) !important;
    color: #3b2a00 !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 0 #b45309, 0 12px 18px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
    cursor: pointer;
  }
  .btn-primary:hover, .add-btn:hover, .submit-btn:hover, .again-btn:hover,
  #searchBtn:hover, #recordBtn:hover, #manualEntryBtn:hover, #captureBtn:hover, #addGuestBtn:hover { filter: brightness(1.05); }
  .btn-primary:active, .add-btn:active, .submit-btn:active, .again-btn:active,
  #searchBtn:active, #recordBtn:active, #manualEntryBtn:active, #captureBtn:active, #addGuestBtn:active {
    transform: translateY(4px); box-shadow: 0 1px 0 #b45309, 0 4px 8px rgba(0, 0, 0, 0.18) !important;
  }
  button:disabled, .submit-btn:disabled, #recordBtn:disabled {
    filter: grayscale(0.6) brightness(0.95); box-shadow: none !important; transform: none !important; cursor: not-allowed;
  }
  /* the vendor "record meal" button is THE main action — make it big and green */
  #recordBtn:not(:disabled) {
    background: linear-gradient(180deg, #34d399, var(--t-green)) !important;
    color: #fff !important;
    box-shadow: 0 5px 0 #0f5c40, 0 14px 22px rgba(16, 185, 129, 0.35) !important;
  }

  .btn-muted, .print-btn {
    background: #eef3f8 !important; color: #1e293b !important; border: 1px solid #d6e0ea !important;
    border-radius: 12px !important; font-weight: 600;
  }
  .btn-danger, .delete-btn {
    background: linear-gradient(180deg, #f87171, #dc2626) !important; color: #fff !important; border: 0 !important;
    border-radius: 12px !important; font-weight: 600; box-shadow: 0 3px 0 #991b1b !important;
  }
  .btn-muted:active, .print-btn:active, .btn-danger:active, .delete-btn:active { transform: translateY(2px); }

  .category-btn { border-radius: 16px !important; transition: transform 0.15s, box-shadow 0.15s; }
  .category-btn:hover { transform: translateY(-2px); }
  .category-btn.active {
    background: linear-gradient(180deg, #ecfdf5, #d1fae5) !important;
    border-color: var(--t-green) !important; box-shadow: 0 0 0 3px rgba(27, 127, 90, 0.2);
  }
  .match-item { border-radius: 14px !important; transition: transform 0.15s, background 0.15s; }
  .match-item:hover { transform: translateX(3px); }

  /* ---------- tables ---------- */
  .table-wrap { border-radius: 16px; overflow: auto; border: 1px solid #e3eaf2; background: #fff; }
  table { border-collapse: separate !important; border-spacing: 0; width: 100%; }
  th {
    background: linear-gradient(180deg, #145f45, #0f4c37) !important; color: #fff !important;
    font-weight: 700; position: sticky; top: 0; z-index: 1;
  }
  tbody tr:nth-child(even) td { background: #f7faf9; }
  tbody tr:hover td { background: #fff8e1; }

  /* tags / pills keep their colours, just rounder */
  .tag, .role-tag, .status-pill { border-radius: 999px !important; }

  .logout-btn, .back-btn, .btn-link, .top-btn, .export-btn,
  .header-actions a, .topbar-actions a { white-space: nowrap; width: auto !important; }
  form.add-form input, form.add-form select { width: 100%; }
  /* grid children default to min-width:auto, so a wide table stretched its
     card past the screen on phones; let the table scroll inside instead */
  .layout > *, .cards > *, .grid > *, .two-col > *, .filter-grid > * { min-width: 0; }
  img, svg, video, canvas { max-width: 100%; }
  #trendChart svg { max-width: none; }

  /* ---------- small screens: lighter scene, same look ---------- */
  @media (max-width: 640px) {
    .bg-scene .bg-layer.near { display: none; }
    .logout-btn, .back-btn, .btn-link, .top-btn, .export-btn,
    .header-actions a, .topbar-actions a { padding: 7px 12px !important; font-size: 0.85rem !important; }
    .topbar-actions, .header-actions { flex-wrap: wrap; gap: 8px !important; }
    .card, .guest-card, .add-card, .fb-card { border-radius: 18px !important; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-scene *, .card, .guest-card, .add-card, .fb-card, .topbar, .header { animation: none !important; transition: none !important; }
  .bg-scene .bg-layer { transform: none !important; }
}

@media print {
  .bg-scene { display: none !important; }
}