/**
 * IBET Staff — Master 3-Layer Glass (SINGLE KNOB FILE)
 * ============================================================
 * ဒီဖိုင်ထိပ်က token တွေကိုပဲ ပြင်ပါ။
 * တခြား CSS (theme-light / frosted / page) က ဒီတန်ဖိုးတွေကို
 * staff-glass-lock.css ကနေ ဖိသုံးထားလို့ ဒီမှာ ချိန်ရုံနဲ့ တစ်ဆိုက်လုံး လိုက်ပါတယ်။
 *
 * Light = html[data-theme="light"] + body.light-theme
 * Dark  = default + body.dark-theme
 */

/* ╔══════════════════════════════════════════════════════════╗
   ║  TUNABLE — Layer tokens only (edit here)                 ║
   ╚══════════════════════════════════════════════════════════╝ */

:root {
  --glass-ink: #f1f5f9;
  --glass-muted: #94a3b8;

  /* --- Layer 1: dark — (1) teal TL · (2) soft center · (3) original rose BR --- */
  --glass-l1-pad:
    /* 1 TL teal — reach toward center */
    radial-gradient(ellipse 100% 85% at 6% 8%, rgba(45, 212, 191, 0.2), transparent 70%),
    radial-gradient(ellipse 80% 70% at 22% 26%, rgba(45, 212, 191, 0.12), transparent 66%),
    radial-gradient(ellipse 55% 48% at 38% 40%, rgba(45, 212, 191, 0.08), transparent 58%),
    /* mid meeting — teal + rose soft converge */
    radial-gradient(ellipse 48% 42% at 46% 44%, rgba(45, 212, 191, 0.07), transparent 55%),
    radial-gradient(ellipse 48% 42% at 54% 56%, rgba(244, 63, 94, 0.045), transparent 55%),
    radial-gradient(ellipse 40% 36% at 50% 50%, rgba(167, 139, 250, 0.05), transparent 52%),
    /* 3 BR rose — reach toward center (slightly softer) */
    radial-gradient(ellipse 100% 85% at 96% 94%, rgba(244, 63, 94, 0.14), transparent 70%),
    radial-gradient(ellipse 80% 70% at 78% 76%, rgba(244, 63, 94, 0.08), transparent 66%),
    radial-gradient(ellipse 55% 48% at 62% 64%, rgba(244, 63, 94, 0.05), transparent 58%),
    linear-gradient(
      135deg,
      rgba(45, 212, 191, 0.1) 0%,
      rgba(45, 212, 191, 0.06) 26%,
      rgba(165, 180, 252, 0.04) 42%,
      rgba(196, 181, 253, 0.04) 50%,
      rgba(244, 63, 94, 0.03) 58%,
      rgba(244, 63, 94, 0.05) 78%,
      rgba(244, 63, 94, 0.07) 100%
    ),
    linear-gradient(135deg, #2a3346 0%, #222938 48%, #1a2030 100%);

  /* --- Layer 2: clear glass pane (dark) --- */
  --glass-l2-bg: rgba(255, 255, 255, 0.05);
  --glass-l2-blur: blur(12px);
  --glass-l2-border: 1px solid rgba(255, 255, 255, 0.12);
  --glass-l2-border-top: 1px solid rgba(255, 255, 255, 0.2);
  --glass-l2-border-left: 1px solid rgba(255, 255, 255, 0.12);
  --glass-l2-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
  --glass-l2-radius: 24px;

  /* --- Layer 3: Floating controls / buttons --- */
  --glass-l3-bg: rgba(255, 255, 255, 0.12);
  --glass-l3-bg-hover: rgba(255, 255, 255, 0.18);
  --glass-l3-blur: blur(6px);
  --glass-l3-border: 1px solid rgba(255, 255, 255, 0.15);
  --glass-l3-border-top: rgba(255, 255, 255, 0.35);
  --glass-l3-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  --glass-l3-radius: 12px;
  --glass-l3-ink: #ffffff;
  /* Role buttons (Announce-style soft glass) */
  --glass-l3-primary-bg: rgba(59, 130, 246, 0.4);
  --glass-l3-primary-bg-hover: rgba(59, 130, 246, 0.58);
  --glass-l3-primary-ink: #eff6ff;
  --glass-l3-danger-bg: rgba(239, 68, 68, 0.4);
  --glass-l3-danger-bg-hover: rgba(239, 68, 68, 0.58);
  --glass-l3-danger-ink: #fff1f2;
  --glass-l3-ghost-bg: rgba(148, 163, 184, 0.22);
  --glass-l3-ghost-bg-hover: rgba(148, 163, 184, 0.34);
  --glass-l3-ghost-ink: #e2e8f0;
  --glass-l3-dark-bg: rgba(30, 41, 59, 0.55);
  --glass-l3-dark-bg-hover: rgba(30, 41, 59, 0.72);
  --glass-l3-dark-ink: #f8fafc;
  --glass-l3-secondary-bg: rgba(45, 212, 191, 0.28);
  --glass-l3-secondary-bg-hover: rgba(45, 212, 191, 0.42);
  --glass-l3-secondary-ink: #ecfeff;
  --glass-l3-success-bg: rgba(34, 197, 94, 0.36);
  --glass-l3-success-bg-hover: rgba(34, 197, 94, 0.52);
  --glass-l3-success-ink: #ecfdf5;
}

html[data-theme="light"],
body.light-theme {
  --glass-ink: #111827; /* darker, clearer text */
  --glass-muted: #4b5563; /* mid tone for secondary text */

  /*
   * Light clear-glass: L1 gradient shows through L2;
   * opacity 0.4–0.6 + blur ~10px + rim + inset highlight.
   */
  /* --- Layer 1 Light --- */
  --glass-l1-pad: linear-gradient(135deg, #8eb8ff 0%, #b8e4fb 100%);

  /* --- Layer 2 Light — clear glass (0.25 so L1 pad reads through) --- */
  --glass-l2-bg: rgba(255, 255, 255, 0.25);
  --glass-l2-blur: blur(10px);
  --glass-l2-border: 1px solid rgba(255, 255, 255, 0.55);
  --glass-l2-border-top: 1px solid rgba(255, 255, 255, 0.85);
  --glass-l2-border-left: 1px solid rgba(255, 255, 255, 0.5);
  --glass-l2-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.75);

  /* --- Layer 3 Light (one step denser than L2 so controls pop) --- */
  --glass-l3-bg: rgba(255, 255, 255, 0.28);
  --glass-l3-bg-hover: rgba(255, 255, 255, 0.46);
  --glass-l3-blur: blur(8px);
  --glass-l3-border: 1px solid rgba(255, 255, 255, 0.42);
  --glass-l3-border-top: rgba(255, 255, 255, 0.7);
  --glass-l3-shadow: none;
  --glass-l3-ink: #333333;
  /* Role buttons — light (readable tint vs frosted pad; Announce-style) */
  --glass-l3-primary-bg: rgba(37, 99, 235, 0.42);
  --glass-l3-primary-bg-hover: rgba(37, 99, 235, 0.58);
  --glass-l3-primary-ink: #1e3a8a;
  --glass-l3-danger-bg: rgba(239, 68, 68, 0.38);
  --glass-l3-danger-bg-hover: rgba(239, 68, 68, 0.52);
  --glass-l3-danger-ink: #7f1d1d;
  --glass-l3-ghost-bg: rgba(100, 116, 139, 0.22);
  --glass-l3-ghost-bg-hover: rgba(100, 116, 139, 0.34);
  --glass-l3-ghost-ink: #334155;
  --glass-l3-dark-bg: rgba(30, 41, 59, 0.5);
  --glass-l3-dark-bg-hover: rgba(30, 41, 59, 0.68);
  --glass-l3-dark-ink: #0f172a;
  --glass-l3-secondary-bg: rgba(20, 184, 166, 0.22);
  --glass-l3-secondary-bg-hover: rgba(20, 184, 166, 0.36);
  --glass-l3-secondary-ink: #115e59;
  --glass-l3-success-bg: rgba(34, 197, 94, 0.24);
  --glass-l3-success-bg-hover: rgba(34, 197, 94, 0.38);
  --glass-l3-success-ink: #14532d;
}

/* Legacy aliases — frosted / theme-light / theme-layers follow these */
:root,
html[data-theme="light"],
body.light-theme,
body.dark-theme {
  --staff-pad-bg: var(--glass-l1-pad);
  --staff-ink: var(--glass-ink);
  --staff-card-bg: var(--glass-l2-bg);
  --staff-card-blur: var(--glass-l2-blur);
  --staff-card-border: var(--glass-l2-border);
  --staff-card-border-top: var(--glass-l2-border-top);
  --staff-card-shadow: var(--glass-l2-shadow);
  --staff-glass-fill: var(--glass-l2-bg);
  --staff-glass-fill-soft: var(--glass-l2-bg);
  --staff-glass-blur: var(--glass-l2-blur);
  --staff-glass-border: var(--glass-l2-border);
  --staff-glass-border-top: var(--glass-l2-border-top);
  --staff-glass-shadow: var(--glass-l2-shadow);
  --staff-glass-text: var(--glass-ink);
  --staff-ctrl-bg: var(--glass-l3-bg);
  --staff-ctrl-bg-hover: var(--glass-l3-bg-hover);
  --staff-ctrl-blur: var(--glass-l3-blur);
  --staff-ctrl-border: var(--glass-l3-border);
  --staff-ctrl-shadow: var(--glass-l3-shadow);
  --staff-ctrl-ink: var(--glass-l3-ink);
  --staff-btn-bg: var(--glass-l3-bg);
  --staff-btn-bg-hover: var(--glass-l3-bg-hover);
  --staff-btn-blur: var(--glass-l3-blur);
  --staff-btn-border: var(--glass-l3-border);
  --staff-btn-shadow: var(--glass-l3-shadow);
  --staff-btn-ink: var(--glass-l3-ink);
  --staff-btn-radius: var(--glass-l3-radius);
  --staff-btn-primary-bg: var(--glass-l3-primary-bg);
  --staff-btn-primary-bg-hover: var(--glass-l3-primary-bg-hover);
  --staff-btn-primary-ink: var(--glass-l3-primary-ink);
  --staff-btn-danger-bg: var(--glass-l3-danger-bg);
  --staff-btn-danger-bg-hover: var(--glass-l3-danger-bg-hover);
  --staff-btn-danger-ink: var(--glass-l3-danger-ink);
  --staff-btn-ghost-bg: var(--glass-l3-ghost-bg);
  --staff-btn-ghost-bg-hover: var(--glass-l3-ghost-bg-hover);
  --staff-btn-ghost-ink: var(--glass-l3-ghost-ink);
  --staff-btn-dark-bg: var(--glass-l3-dark-bg);
  --staff-btn-dark-bg-hover: var(--glass-l3-dark-bg-hover);
  --staff-btn-dark-ink: var(--glass-l3-dark-ink);
  --staff-btn-secondary-bg: var(--glass-l3-secondary-bg);
  --staff-btn-secondary-bg-hover: var(--glass-l3-secondary-bg-hover);
  --staff-btn-secondary-ink: var(--glass-l3-secondary-ink);
  --staff-btn-success-bg: var(--glass-l3-success-bg);
  --staff-btn-success-bg-hover: var(--glass-l3-success-bg-hover);
  --staff-btn-success-ink: var(--glass-l3-success-ink);
  --staff-chip-bg: var(--glass-l3-bg);
  --staff-chip-border: var(--glass-l3-border);
  --staff-chip-blur: var(--glass-l3-blur);
  --staff-chip-shadow: var(--glass-l3-shadow);
  --staff-chip-ink: var(--glass-l3-ink);
  --staff-liquid-btn-bg: var(--glass-l3-bg);
  --staff-liquid-btn-bg-hover: var(--glass-l3-bg-hover);
  --staff-liquid-btn-border: var(--glass-l3-border);
  --staff-liquid-btn-blur: var(--glass-l3-blur);
  --staff-liquid-btn-radius: var(--glass-l3-radius);
  --staff-liquid-btn-shadow: var(--glass-l3-shadow);
  --staff-liquid-btn-ink: var(--glass-l3-ink);
  --glass-surface: var(--glass-l2-bg);
  --glass-surface-soft: var(--glass-l2-bg);
  --glass-surface-strong: var(--glass-l3-bg);
  --glass-blur: var(--glass-l2-blur);
  --glass-border: var(--glass-l2-border);
  --glass-shadow: var(--glass-l2-shadow);
  --glass-shadow-soft: var(--glass-l2-shadow);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  APPLY — tokens only (do not hardcode colors below)      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Layer 1 */
html,
html body,
html body .app-fullscreen-frame {
  margin: 0;
  min-height: 100vh;
  background: var(--glass-l1-pad) !important;
  background-image: var(--glass-l1-pad) !important;
  background-color: transparent !important;
  background-attachment: fixed !important;
  color: var(--glass-ink);
  transition: background 0.3s ease;
}

html body::before,
html body::after,
html body .app-fullscreen-frame::before,
html body .app-fullscreen-frame::after {
  content: none !important;
  display: none !important;
}

.grid-20x15-container {
  background: transparent !important;
}

/* Layer 2 utilities */
.glass-l2,
.glass-container {
  border-radius: var(--glass-l2-radius);
  transition: all 0.3s ease;
  color: var(--glass-ink);
  isolation: auto;
  background: var(--glass-l2-bg) !important;
  backdrop-filter: var(--glass-l2-blur) !important;
  -webkit-backdrop-filter: var(--glass-l2-blur) !important;
  border: var(--glass-l2-border) !important;
  border-top: var(--glass-l2-border-top) !important;
  border-left: var(--glass-l2-border-left) !important;
  box-shadow: var(--glass-l2-shadow) !important;
}

/* Layer 3 utilities */
.glass-l3,
.glass-btn {
  background: var(--glass-l3-bg) !important;
  -webkit-backdrop-filter: var(--glass-l3-blur) !important;
  backdrop-filter: var(--glass-l3-blur) !important;
  border: var(--glass-l3-border) !important;
  box-shadow: var(--glass-l3-shadow) !important;
  color: var(--glass-l3-ink) !important;
  border-radius: var(--glass-l3-radius);
  transition: all 0.2s ease;
}

.glass-btn {
  width: 100%;
  padding: 14px;
  margin: 10px 0;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}

.glass-l3:hover,
.glass-btn:hover {
  background: var(--glass-l3-bg-hover) !important;
  transform: translateY(-2px);
}