/* ==========================================================================
   LOGY UI — Unified Theme (Light/Dark) + Builder Compatibility
   Version: 1.0
   ========================================================================== */

/* ---- Brand Tokens ------------------------------------------------------- */
:root {
  /* Neon accents */
  --cyan:    #00C8FF;
  --violet:  #9D00FF;
  --green:   #00FFA2;
  --apricot: #FFC342;
  --magenta: #FF54D8;
  --teal:    #00D3D8;

  /* Light theme base */
  --bg:      #F9F9FA;
  --surface: #FFFFFF;
  --text:    #0B0E11;
  --muted:   #0891b2;
  --line:    #E6E8EB;
  --soft:    #F5F7FA;

  --radius: 12px;
  --shadow: 0 6px 20px rgba(11,14,17,.06);

  /* Feedback states */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Builder rails (AND/OR tree) */
  --rail:   #5e5ce6;
  --rail-2: #8ea2ff;

  /* Condition rows tints (light) */
  --row-bg:     var(--surface);
  --row-border: #e6e8f0;
  --entry-bg:   #f6fff6;
  --entry-border:#d6f5d6;
  --exit-bg:    #fff7f6;
  --exit-border:#ffd7d1;
  --focus-ring: rgba(94,92,230,.25);

  /* Card accents */
  --card-bg:     var(--surface);
  --card-border: var(--line);
  --card-shadow: 0 2px 10px rgba(0,0,0,.04);
  --leg-accent:  #f0f3ff; /* subtle left rail for leg blocks */
}

/* Dark theme when html[data-theme="dark"] is set */
html[data-theme="dark"] {
  --bg:      #0B0E11;
  --surface: #16191d;
  --text:    #F5F5F5;
  --muted:   #828891;
  --line:    #242a31;
  --soft:    #11151b;

  --shadow:  0 12px 32px rgba(0,200,255,.08);

  --row-bg:      #14161a;
  --row-border:  #2a2e37;
  --entry-bg:    #101a12;
  --entry-border:#223a2a;
  --exit-bg:     #1a1413;
  --exit-border: #3a2420;
  --focus-ring:  rgba(134,179,255,.28);

  --card-bg:     #14161a;
  --card-border: #2a2e37;
  --leg-accent:  #202433;
}

/* ---- Base / Typography -------------------------------------------------- */
html { 
  font-size: 16px; 
  height: 100%; 
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll */
}
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll */
  position: relative; /* Establish positioning context */
}
h1,h2,h3,h4,h5,h6,.title { font-family: "Exo 2", Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
.title { font-weight: 800; }
.subtitle { color: var(--muted); }

/* Links */
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utilities */
.is-hidden { display: none !important; }
.m-0 { margin:0 !important; }
.mt-1 { margin-top:.25rem !important; }
.mt-2 { margin-top:.5rem !important; }
.mt-3 { margin-top:1rem !important; }
.mb-0 { margin-bottom:0 !important; }
.mb-2 { margin-bottom:.5rem !important; }
.mb-3 { margin-bottom:1rem !important; }
.p-0 { padding:0 !important; }

/* ---- Layout ------------------------------------------------------------- */
.section { padding: 2rem 1rem; }
.container { max-width: 1080px; margin: 0 auto; }

/* Simple responsive grid for index/home (Bulma-like) */
.columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.column { grid-column: span 12; }
@media (min-width: 768px) { .column.is-half { grid-column: span 6; } }

/* ---- Cards / Surfaces --------------------------------------------------- */
.box,
.content-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1rem;
}

.notification {
  background: #1C1E23;
  color: #EAEAEA;
  border-radius: var(--radius);
  padding: 1.25rem;
}
html[data-theme="light"] .notification {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}

/* ---- Buttons ------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: none;
  border-radius: 10px;
  padding: .5rem .9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--soft);
  color: var(--text);
  transition: transform .04s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

/* Accent variants */
.button.is-accent-purple { background: var(--violet); color:#fff; }
.button.is-accent-orange { background: var(--apricot); color:#0B0E11; }
.button.is-accent-pink   { background: var(--magenta); color:#fff; }
.button.is-accent-teal   { background: var(--teal); color:#0B0E11; }
.button.is-primary       { background: var(--cyan); color:#0B0E11; }
.button.is-light         { background: var(--soft); color: var(--text); }

/* Small */
.button.is-small { padding:.4rem .8rem; font-size:.85rem; border-radius: 8px; }

/* ---- Icon Tiles (inline SVG wrapper) ----------------------------------- */
.icon {
  width: 64px; height: 64px;
  display: inline-grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--cyan) 12%);
  box-shadow: 0 0 24px 2px rgba(0,200,255,.22);
}
.icon svg { width: 36px; height: 36px; }
.icon--purple { background: color-mix(in srgb, var(--surface) 84%, var(--violet) 16%); box-shadow:0 0 24px 2px rgba(157,0,255,.25); }
.icon--orange { background: color-mix(in srgb, var(--surface) 86%, var(--apricot) 14%); box-shadow:0 0 24px 2px rgba(255,195,66,.28); }
.icon--pink   { background: color-mix(in srgb, var(--surface) 86%, var(--magenta) 14%); box-shadow:0 0 24px 2px rgba(255,84,216,.28); }
.icon--teal   { background: color-mix(in srgb, var(--surface) 86%, var(--teal) 14%); box-shadow:0 0 24px 2px rgba(0,211,216,.28); }

/* ---- Header/footer atoms ------------------------------------------------ */
.welcome-title { font: 800 2rem/1.15 "Exo 2", sans-serif; text-align: center; margin: 0 0 2rem; letter-spacing: -.02em; }
.logo-img { max-width: 220px; height: auto; vertical-align: middle; display: inline-block; }
.footer { text-align: center; color: #9aa3ad; padding: 2rem 1rem; }

/* Page Footer (for index and other pages) */
.page-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 2rem 1rem;
  margin-top: 3rem;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-text {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
}

.footer-link {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--violet);
  text-decoration: underline;
}

.footer-copyright {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .page-footer {
    padding: 1.5rem 0.75rem;
    margin-top: 2rem;
  }
  
  .footer-text {
    font-size: 0.85rem;
  }
  
  .footer-copyright {
    font-size: 0.8rem;
  }
}

/* ---- Theme Toggle button ------------------------------------------------ */



/* ---- Select2 tuning ----------------------------------------------------- */
.select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.select2-selection {
  display: flex !important; align-items: center !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  background: var(--surface) !important; color: var(--text) !important;
  overflow: hidden !important;
}
.select2-selection__rendered {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  line-height: 2.3rem !important; padding-left: .75rem !important;
  color: var(--text) !important;
}
.select2-selection__arrow {
  position: static; flex: 0 0 auto;
  width: 1.6rem; height: 2.2rem; display:flex; align-items:center; justify-content:center;
}
.select2-dropdown {
  max-width: 100% !important;
  border-radius: 10px !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ---- Forms / Inputs ----------------------------------------------------- */
.input, .textarea, .select select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.input:focus, .textarea:focus, .select select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-color: color-mix(in srgb, var(--rail) 40%, var(--line));
}

/* ---- Tables (generic) --------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.table th, .table td {
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--line);
}
.table th { text-align: left; color: var(--muted); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }

/* ---- Helper for page sections ------------------------------------------ */
.feature-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.text-button { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.text-button p span { color: #FFA947; font-weight: 600; }
/* ==== Home header & logo (match base.html markup) ==== */
.app-logo   { width: 180px; height: auto; max-width: 40vw; display: inline-block; }

/* ==== Icon tiles used by index.html (alias of .icon) ==== */
.icon-tile {
  width: 64px; height: 64px;
  display: inline-grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--cyan) 12%);
  box-shadow: 0 0 24px 2px rgba(0,200,255,.22);
}
.icon-tile svg { width: 36px; height: 36px; }
/* existing variants work as-is */
.icon--purple { background: color-mix(in srgb, var(--surface) 84%, var(--violet) 16%); box-shadow:0 0 24px 2px rgba(157,0,255,.25); }
.icon--orange { background: color-mix(in srgb, var(--surface) 86%, var(--apricot) 14%); box-shadow:0 0 24px 2px rgba(255,195,66,.28); }
.icon--pink   { background: color-mix(in srgb, var(--surface) 86%, var(--magenta) 14%); box-shadow:0 0 24px 2px rgba(255,84,216,.28); }
.icon--teal   { background: color-mix(in srgb, var(--surface) 86%, var(--teal) 14%); box-shadow:0 0 24px 2px rgba(0,211,216,.28); }

/* ==== CTA buttons used by index.html (alias of .button variants) ==== */
.cta {
  display: inline-flex; align-items: center; gap: .5rem;
  border: none; border-radius: 10px; padding: .5rem .9rem;
  font-weight: 600; cursor: pointer;
}
.cta--purple { background: var(--violet);  color: #fff; }
.cta--orange { background: var(--apricot); color: #0B0E11; }
.cta--pink   { background: var(--magenta); color: #fff; }
.cta--teal   { background: var(--teal);    color: #0B0E11; }

/* Optional: ensure welcome title style is present */
.welcome-title { font: 800 2rem/1.15 "Exo 2", sans-serif; text-align: center; margin: 0 0 2rem; letter-spacing: -.02em; }
/* === IFLOGY header logo styling === */
/* Restore highlight colors like preview */
.muted-span { color: var(--apricot); font-weight: 600; }

/* Center icon and text alignment */
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
/* ===== IFLOGY brand header (bigger IF, underline, spacing) ===== */

/* ===== Theme toggle & Login button positions/colors ===== */
.toggle{
  position: fixed;
  top: 1rem; left: 1rem;          /* move away from Login so they don’t overlap */
  z-index: 999;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .45rem .7rem;
}
/* make the toggle use cyan accent on hover */
/* === Theme Toggle refinement === */
.button.toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 8px rgba(0,200,255,0.2);
  transition: all 0.2s ease;
  max-width: 100vw;
  box-sizing: border-box;
}
.button.toggle:hover {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 12px rgba(0,200,255,0.4);
}


/* ===== Sticky footer (footer sits at bottom of viewport) ===== */
/* Body height and layout - consolidated */
html, body{ 
  height: 100%; 
  overflow-x: hidden; /* Prevent horizontal scroll */
}
body{
  display: grid;
  grid-template-rows: auto 1fr auto; /* header | main | footer */
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll */
  position: relative; /* Establish positioning context */
}
.app-main{ /* wrap your page content in base.html */
  min-height: 0; /* allow grid to size properly */
  overflow-x: hidden; /* Prevent horizontal overflow */
}

/* ===== Feature blocks: stretch wider and feel larger ===== */
.container{ max-width: 1280px; }           /* more width than before */
@media (min-width: 1400px){ .container{ max-width: 1340px; } }

.columns{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
}
.column{ grid-column: span 12; }
@media (min-width: 900px){
  .column.is-half{ grid-column: span 6; }  /* keep 2-up but with a wider container */
}
.box{
  padding: 1.75rem 1.25rem;
  border-radius: 12px;
}

/* Center feature contents + restore highlight like preview */
.feature{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap:1rem;
}
.muted-span{ color: var(--apricot); font-weight: 600; }

/* Icon tiles (ensure visible color) */
.icon-tile{
  width: 72px; height: 72px;               /* slightly larger for presence */
  display: inline-grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--cyan) 12%);
  box-shadow: 0 0 24px 2px rgba(0,200,255,.22);
}
.icon-tile svg{ width: 40px; height: 40px; }
.icon--purple{ background: color-mix(in srgb, var(--surface) 84%, var(--violet) 16%); box-shadow: 0 0 24px 2px rgba(157,0,255,.25); }
.icon--orange{ background: color-mix(in srgb, var(--surface) 86%, var(--apricot) 14%); box-shadow: 0 0 24px 2px rgba(255,195,66,.28); }
.icon--pink{   background: color-mix(in srgb, var(--surface) 86%, var(--magenta) 14%); box-shadow: 0 0 24px 2px rgba(255,84,216,.28); }
.icon--teal{   background: color-mix(in srgb, var(--surface) 86%, #00D3D8 14%); box-shadow: 0 0 24px 2px rgba(0,211,216,.28); }

/* CTA buttons (if you’re using .cta classes) */
.cta{ display:inline-flex; align-items:center; gap:.5rem; border:none; border-radius:10px; padding:.6rem 1rem; font-weight:600; cursor:pointer; }
.cta--purple{ background: var(--violet);  color:#fff; }
.cta--orange{ background: var(--apricot); color:#0B0E11; }
.cta--pink{   background: var(--magenta); color:#fff; }
.cta--teal{   background: #00D3D8;        color:#0B0E11; }

/* Footer look */
.footer{ text-align:center; color:#9aa3ad; padding: 1.4rem 1rem; }
/* ==========================================================================
   IFLOGY — Header, Logo & User Menu (Final)
   ========================================================================== */

/* ---- Header Layout ------------------------------------------------------ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  overflow: visible; /* Allow dropdown to overflow header */
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  left: 0;
  right: 0;
}
.app-header .brand-iflogy {
  justify-self: center;
}
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---- Logo --------------------------------------------------------------- */
.brand-iflogy {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.1rem;
  line-height: 1;
  text-decoration: none;
}

.brand-if {
  font-family: 'Exo 2', Inter, sans-serif;
  font-weight: 800;
  /* was clamp(2.2rem, 4vw, 2.8rem) → 20% smaller */
  font-size: clamp(1.76rem, 3.2vw, 2.24rem);
  letter-spacing: -0.8px;
  color: var(--cyan);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--cyan) 45%, transparent),
    0 0 14px color-mix(in srgb, var(--cyan) 30%, transparent);
}
/* Make the IF letters the anchor box */
.brand-if-letters {
  position: relative;
  display: inline-block;
  font-family: 'Exo 2', Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  color: var(--cyan);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--cyan) 45%, transparent),
    0 0 14px color-mix(in srgb, var(--cyan) 30%, transparent);
  letter-spacing: -0.02em;
}

/* Tiny black gem in LIGHT mode + strong cyan halo */
.brand-if-letters::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -58%) rotate(45deg);
  width:0.10em;        /* tiny base size */
  height:0.10em;
  border-radius:8%;
  pointer-events:none;
  z-index:2;

  /* black core with slight inner highlight */
  background: radial-gradient(circle at 45% 40%, #000 0%, #0b0e11 90%);
  box-shadow:
    0 0 10px rgba(0,200,255,.70),
    0 0 22px rgba(0,200,255,.55),
    0 0 36px rgba(0,200,255,.40),
    inset 0 0 7px rgba(255,255,255,.18);
  animation: ifgemPulse 2.2s ease-in-out infinite;
  will-change: transform, filter, box-shadow;
}

/* Luminous jewel in DARK mode */
html[data-theme="dark"] .brand-if-letters::after{
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #d7ebff 25%,
    #9fd6ff 50%,
    #5abaff 75%,
    #249bff 100%
  );
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.90),
    0 0 16px rgba(150,200,255,.85),
    0 0 34px rgba(80,180,255,.65),
    0 0 50px rgba(0,200,255,.55);
}

/* Bigger visible pulse so the tiny base size still “breathes” */
@keyframes ifgemPulse{
  0%,100%{
    transform: translate(-50%,-58%) rotate(45deg) scale(1);
    filter: brightness(1) contrast(1.05);
    box-shadow:
      0 0 10px rgba(0,200,255,.70),
      0 0 22px rgba(0,200,255,.55),
      0 0 36px rgba(0,200,255,.40),
      inset 0 0 7px rgba(255,255,255,.18);
  }
  50%{
    transform: translate(-50%,-58%) rotate(45deg) scale(1.75);
    filter: brightness(1.3) contrast(1.15);
    box-shadow:
      0 0 18px rgba(0,220,255,.90),
      0 0 42px rgba(0,220,255,.75),
      0 0 66px rgba(0,220,255,.65),
      inset 0 0 11px rgba(255,255,255,.32);
  }
}

@media (prefers-reduced-motion: reduce){
  .brand-if-letters::after{ animation: none; }
}

/* LOGY part (slightly smaller to match new IF size) */
.brand-logy {
  font-family: 'Exo 2', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.0vw, 2.1rem);
  margin-left: 0.12rem;
  color: var(--text);
}
html[data-theme="dark"] .brand-logy { color: #fff; }


/* ---- Diamond Dot -------------------------------------------------------- */
/* Dark Mode (jewel look) */
html[data-theme="dark"] .brand-i-dot {
  position: absolute;
  left: 50%;
  top: -0.25em;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.18em;
  height: 0.18em;
  border-radius: 4%;
  background: linear-gradient(
    145deg,
    #fff 0%,
    #e8e2ff 15%,
    #d3c8ff 30%,
    #bcaeff 45%,
    #a18cff 60%,
    #a6ffd4 75%,
    #fff6c4 85%,
    #7550ff 100%
  );
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.85),
    0 0 12px rgba(160, 140, 255, 0.8),
    0 0 22px rgba(140, 120, 255, 0.55),
    0 0 26px rgba(255, 255, 200, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  animation: sparkle 5s ease-in-out infinite, heartbeat 2.6s ease-in-out infinite;
}

/* Light Mode (black gem + cyan glow) */
html[data-theme="light"] .brand-i-dot {
  position: absolute;
  left: 50%;
  top: -0.25em;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.18em;
  height: 0.18em;
  border-radius: 4%;
  background: radial-gradient(
    circle at 45% 40%,
    #010101 0%,
    #030303 50%,
    #060606 90%,
    #080808 100%
  );
  border: 1px solid rgba(20, 20, 20, 1);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cyan) 25%, transparent),
    0 0 16px color-mix(in srgb, var(--cyan) 15%, transparent),
    inset 0 0 6px rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .brand-i-dot::after {
  content: "";
  position: absolute;
  inset: 10% 10% 10% 10%;
  border-radius: 4%;
  background: radial-gradient(
    circle at 45% 30%,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.01) 90%
  );
  filter: blur(0.3px);
}

/* ---- Diamond Animation -------------------------------------------------- */
@keyframes sparkle {
  0%, 100% { filter: brightness(1) contrast(1.05); }
  50% { filter: brightness(1.15) contrast(1.1); }
}
@keyframes heartbeat {
  0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  25% { transform: translate(-50%, -50%) rotate(45deg) scale(1.07); }
  50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.02); }
  75% { transform: translate(-50%, -50%) rotate(45deg) scale(1.07); }
  100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

/* ---- User Menu ---------------------------------------------------------- */
.user-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 25%, transparent);
  cursor: pointer;
}
.user-avatar:hover {
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.user-name-inline {
  margin-top: 2px;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  color: var(--muted);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 0.5rem;
  display: none;
  z-index: 1000;
  max-height: none;
  overflow: visible;
  overflow-y: visible;
}
.user-dropdown .user-id {
  font: 700 12px/1.2 Inter, system-ui, sans-serif;
  color: var(--text);
  margin: 0.25rem 0.25rem 0.4rem;
}
.user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.user-dropdown .dropdown-item:hover {
  background: var(--soft);
}
.user-dropdown .logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Dropdown toggle ---------------------------------------------------- */
.user-menu[data-open="true"] .user-dropdown {
  display: block;
}
/* --- Fix diamond overlay & clicks --- */
.brand-i-dot { pointer-events: none; z-index: 1; }  /* let clicks pass through */

.app-header { 
  position: sticky; 
  z-index: 100; 
  overflow: visible !important; /* Ensure dropdown can overflow header */
}

/* --- Right-corner user icon visibility & alignment --- */
.header-actions { justify-self: end; display: flex; align-items: center; gap: .6rem; padding-right: .5rem; }
.user-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 25%, transparent);
  cursor: pointer;
}
.user-icon:hover{ box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 45%, transparent); }

/* Anchor the dropdown to the icon and keep it within the header edge */
.user-menu { 
  position: relative; 
  overflow: visible; /* Allow dropdown to overflow */
  z-index: 1001; /* Higher than header */
} 
.user-dropdown{
  position: absolute; 
  top: 48px; 
  right: 0;  /* snap to the right edge of the icon */
  min-width: 220px;
  max-width: 280px;
  background: var(--surface); 
  border: 1px solid var(--line);
  border-radius: 12px; 
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: .5rem;
  z-index: 1001; /* Higher than header */
  overflow: visible !important;
  max-height: none !important;
}

/* If screen edge is too tight, nudge dropdown inward a bit */
@media (max-width: 380px){
  .user-dropdown{ right: .5rem; }
}
/* Force grid header just in case any old rule survives */
.app-header{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
}
/* Dropdown should be hidden by default, only show when not hidden */
.user-dropdown{ 
  display: none !important; 
  z-index: 1000;
  max-height: none;
  overflow: visible;
}
.user-dropdown:not([hidden]){ 
  display: block !important; 
}
.user-dropdown[hidden]{ 
  display: none !important; 
} 
/* --- Fix: diamond "dot" popping out of the header ----------------------- */
/* Anchor the dot to the I, not the whole brand, and lower it a bit */
.brand-i { position: relative; display: inline-block; }

/* Override both theme-specific rules in one place */

/* Give the header a tiny extra top padding so the jewel has breathing room */
.app-header{ padding-top: calc(0.75rem + 4px) !important; }

/* On very small screens, nudge the dot a touch lower */
@media (max-width: 480px){
 
/* Put the theme toggle on the LEFT */
.button.toggle{
  position: fixed;
  top: 1rem;
  left: 1rem !important;
  right: auto !important;   /* cancel any earlier 'right' */
  z-index: 110;             /* above header content, below menus if needed */
  max-width: 100vw;
  box-sizing: border-box;
}

/* Ensure theme toggle stays within screen bounds on all devices */
@media (max-width: 768px) {
  .button.toggle {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: auto !important;
    top: 1rem !important;
    z-index: 110 !important;
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* If you still have this earlier rule, neutralize it */
.toggle{
  right: auto !important;   /* cancel the old right:1rem */
  left: 1rem !important;
}

/* Prevent overlap with brand on tiny screens */
@media (max-width: 420px){
  .app-header{ padding-left: 56px !important; } /* 42px button + breathing room */
}
/* === 1) Diamond: lift slightly and give breathing room (keeps it aesthetic) === */

/* A hair more top padding so jewel never “pops out” */
.app-header{ padding-top: calc(0.75rem + 2px) !important; }

/* === 2 & 5) Dropdown typography: smaller, cleaner === */
.user-dropdown{
  font-size: 13.5px;                 /* smaller overall */
}
.user-dropdown .user-id{
  font: 700 12px/1.2 Inter, system-ui, sans-serif;
  color: var(--muted);
  margin: 0.25rem 0.25rem 0.4rem;
}
.user-dropdown .dropdown-item{
  font: 500 13.5px/1.25 Inter, system-ui, sans-serif;
  padding: 0.42rem 0.55rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
}
.user-dropdown .dropdown-item svg{ opacity: .8; }

/* Keep hover pleasant in both themes */
.user-dropdown .dropdown-item:hover{ background: var(--soft); }

/* === 3 & 4) Logout: clear contrast in dark; proper hover in light === */
.user-dropdown .dropdown-item.logout{
  color: var(--danger);                           /* red label by default */
  border: 1px solid transparent;
  background: transparent;
}
.user-dropdown .dropdown-item.logout:hover{
  /* Light mode hover: soft red tint */
  background: color-mix(in srgb, var(--danger) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--danger) 25%, var(--line) 75%);
}
html[data-theme="dark"] .user-dropdown .dropdown-item.logout{
  /* In dark, soften the red for readability */
  color: #ffb3b3;
}
html[data-theme="dark"] .user-dropdown .dropdown-item.logout:hover{
  background: rgba(239, 68, 68, 0.18);           /* ef4444 @ ~18% */
  border-color: rgba(239, 68, 68, 0.35);
}

/* === Keep the icon truly on the right; ensure layering above brand === */
.header-actions{ 
  justify-self: end; 
  padding-right: .6rem; 
  position: relative; 
  z-index: 1001; /* Higher than header to allow dropdown overflow */
  overflow: visible; /* Allow dropdown to overflow */
}
.user-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line);
  background: var(--surface); color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent);
}
.user-icon:hover{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 32%, transparent), 0 0 10px rgba(0,200,255,.22);
}

/* === Make sure dropdown visibility uses the [hidden] toggle === */
/* Dropdown visibility handled above - removed duplicate rule */
.brand-i-dot {
  position: absolute;
  left: 50%;
  /* lower the diamond so it doesn't touch the “I” cap line */
  top: 0.10em;                       /* tweak 0.06–0.16em to taste */
  transform: translate(-50%, -25%) rotate(45deg);
  width: 0.18em;                     /* proportional to font size */
  height: 0.18em;
  pointer-events: none;              /* never block clicks */
  z-index: 1;
}

/* keep your existing dark/light gradient styles; they will still apply.
   If they re-declare position/top/transform, this block above wins
   because it comes later in the file. */

/* Optional: a touch more header padding so the jewel never “pops out” */
.app-header { padding-top: calc(0.75rem + 2px) !important; }

/* === User dropdown – better icon contrast in dark mode ================== */
html[data-theme="dark"] .user-dropdown{
  background: #1a1f26;                 /* slightly darker than --surface */
  border-color: #2a2e37;
}

.user-dropdown .dropdown-item svg{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;                  /* ensure it inherits the text color */
  color: currentColor;
  opacity: .9;                         /* default */
}

/* In dark mode, make icons crisper and add a subtle glow edge */
html[data-theme="dark"] .user-dropdown .dropdown-item{
  color: #e9edf3;                      /* a touch brighter than --text */
}
html[data-theme="dark"] .user-dropdown .dropdown-item svg{
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); /* tiny edge so it pops */
}

/* Hover/active states – maintain contrast */
.user-dropdown .dropdown-item:hover{
  background: var(--soft);
}
html[data-theme="dark"] .user-dropdown .dropdown-item:hover{
  background: rgba(255,255,255,.06);
}

/* Logout stays clearly red in dark mode */
html[data-theme="dark"] .user-dropdown .dropdown-item.logout{
  color: #ff9a9a;                      /* brighter than before */
}
html[data-theme="dark"] .user-dropdown .dropdown-item.logout:hover{
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}

/* === Center the diamond between I and F, not on top of I =============== */
.brand-if {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.08em;                /* reduce I–F spacing slightly */
}

.brand-i-dot {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%) rotate(45deg); /* centers it */
  width: 0.18em;
  height: 0.18em;
  pointer-events: none;
  z-index: 1;
}

/* Tweak offset depending on size — a little lower on huge screens */
@media (min-width: 1400px) {
  .brand-i-dot {
    transform: translate(-50%, -40%) rotate(45deg);
  }
}

/* Ensure diamond doesn’t overlap header line */
.app-header {
  padding-top: calc(0.75rem + 4px) !important;
}
         /* Base page layout: sticky footer done right */
/* Body layout rules consolidated above - removed duplicate */
.user-dropdown .dropdown-item svg {
  fill: var(--text) !important;
  opacity: 0.85; /* optional for softer default look */
  transition: opacity 0.15s ease;
}

/* Force dropdown icon color in both themes */
.user-dropdown .dropdown-item svg,
.user-dropdown .dropdown-item svg * {
  fill: currentColor !important;   /* cover shapes using fill */
  stroke: currentColor !important; /* cover outline-only icons */
}

/* Make sure the item text (and thus currentColor) is theme-aware */
.user-dropdown .dropdown-item { color: var(--text); }
html[data-theme="dark"] .user-dropdown .dropdown-item { color: #e9edf3; }

/* Optional: hover pop */
.user-dropdown .dropdown-item:hover svg { opacity: 1; filter: none; }
.user-dropdown .dropdown-item.logout,
.user-dropdown .dropdown-item.logout svg,
.user-dropdown .dropdown-item.logout svg * {
  color: var(--apricot) !important;
}
html[data-theme="dark"] .user-dropdown .dropdown-item.logout { color: #ff9a9a !important; }

/* compact, LOGY-ish */
.lg-compact { --sz:12px; --pad:10px; }
.lg-compact h3 { font-weight:800; font-size: var(--sz); letter-spacing:.02em; margin:0; }
.lg-cardbar { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lg-actions { display:flex; gap:6px; }

.btn-xs { padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); cursor:pointer; font:700 11px/1 Inter; }
.btn-xs:hover { border-color: color-mix(in srgb, var(--lg-cyan) 50%, var(--line)); }
.btn-xs.btn-danger { background:#2a1111; border-color:#5f1c1c; color:#ffdede; }

.lg-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
@media (max-width: 768px){ .lg-grid2 { grid-template-columns:1fr; } }

.lg-row { display:grid; grid-template-columns:150px 1fr; gap:8px; align-items:center; margin:6px 0; }
.lg-key { font:700 11px/1 Inter; color:#cfe6f7; }
.mt-1 { margin-top:6px; }

.chip { display:inline-block; padding:3px 8px; border:1px solid var(--line); border-radius:999px; font:700 10px/1 Inter; color:var(--muted); }
.lg-summary { display:flex; gap:6px; flex-wrap:wrap; }

.lg-dialog { border:none; border-radius:14px; padding:0; width:min(880px, calc(100vw - 24px)); }
.lg-dialog::backdrop { background:rgba(0,0,0,.5); }
.lg-dialog .modal-body { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; }
.lg-modalbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }

/* ============ Mobile Bottom Navigation Bar ============ */
/* HIDDEN BY DEFAULT ON ALL SCREENS - Only show on mobile (max-width: 768px) */
.mobile-bottom-nav {
  /* Force hide by default - will be overridden ONLY on mobile */
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1 !important; /* Negative z-index to ensure it's behind everything */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  box-sizing: border-box;
  overflow: hidden !important;
  justify-content: space-around;
  align-items: center;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide all nav items and labels by default */
.mobile-nav-item,
.mobile-nav-label,
.mobile-nav-item svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Explicitly hide on desktop/tablet (min-width: 769px) - STRICT */
@media screen and (min-width: 769px) {
  .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    width: 0 !important;
    max-width: 0 !important;
    z-index: -1 !important;
    background: transparent !important;
  }
  /* Hide labels and icons on desktop */
  .mobile-nav-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .mobile-nav-item svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .mobile-nav-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Also hide on all screen sizes above 768px - catch any edge cases */
@media screen and (min-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    z-index: -1 !important;
  }
}

/* Show only on mobile (max-width: 768px) */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    background: var(--surface) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 1000 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Show labels and icons on mobile */
  .mobile-nav-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .mobile-nav-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .mobile-nav-item svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Fix header at top on mobile */
  .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    min-height: 60px;
  }
  
  /* Add padding to body to account for fixed header and bottom nav */
  body {
    padding-top: 70px !important; /* Header height */
    padding-bottom: 72px !important; /* Mobile nav height */
  }
  
  /* Add padding to main content to prevent overlap */
  .app-main {
    padding-top: 0 !important; /* Body already has padding-top */
    padding-bottom: 0 !important; /* Body already has padding-bottom */
    min-height: calc(100vh - 142px) !important; /* Viewport minus header (70px) and nav (72px) */
  }
  
  /* Ensure sections and forms have proper spacing - remove extra padding since body handles it */
  .varp-section,
  .section {
    padding-bottom: 0 !important; /* Body already has padding-bottom */
  }
  
  /* Ensure modals are not hidden - they should be centered, not affected by body padding */
  .modal {
    padding-top: 70px !important; /* Account for header */
    padding-bottom: 72px !important; /* Account for mobile nav */
  }
  
  /* Dashboard grid spacing */
  #userGrid,
  #adminGrid {
    padding-bottom: 0 !important; /* Body already has padding-bottom */
  }
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--muted);
  transition: all 0.2s ease;
  border-radius: 10px;
  min-width: 60px;
  flex: 1;
  position: relative;
}

.mobile-nav-item:hover {
  color: var(--cyan);
  background: rgba(0, 200, 255, 0.08);
}

.mobile-nav-item svg {
  stroke: currentColor;
  transition: all 0.2s ease;
}

.mobile-nav-item:hover svg,
.mobile-nav-item.active svg {
  stroke: var(--cyan);
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.4));
}

.mobile-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.mobile-nav-item.active {
  color: var(--cyan);
}

.mobile-nav-item.active .mobile-nav-label {
  color: var(--cyan);
}

/* Dark theme adjustments */
html[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(22, 25, 29, 0.95);
  border-top-color: var(--line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .mobile-nav-item:hover {
  background: rgba(0, 200, 255, 0.12);
}

/* Light theme adjustments */
html[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: var(--line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .mobile-nav-item:hover {
  background: rgba(0, 200, 255, 0.1);
}

/* Active state indicator (small dot above icon) */
.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.6);
}