/* ============================================================
   Temple UI layer — sandstone, sacred geometry, mythology palette
   Loaded after style.css + motion.css (so it can override).
   Adds, never removes.
   ============================================================ */

/* ---- Display typography ---- */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.brand, .sidebar .brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Tabular numerals on dashboard tiles + tables */
.tile .num,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* ---- Devanagari subtitle paired with English h1 (added by JS for known routes) ---- */
.h1-deva {
  display: block;
  font-family: var(--font-deva);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--saffron);
  opacity: 0.85;
  margin-top: 4px;
  text-transform: none;
}

/* ============================================================
   Sacred geometry background — Sri Yantra layer behind .shell
   ============================================================ */
.shell {
  position: relative;
  isolation: isolate;
}
.shell::before {
  content: "";
  position: fixed;
  left: 50%; top: 50%;
  width: clamp(560px, 75vh, 920px);
  height: clamp(560px, 75vh, 920px);
  margin-left: calc(clamp(560px, 75vh, 920px) / -2);
  margin-top:  calc(clamp(560px, 75vh, 920px) / -2);
  background-image: url("/static/images/sri-yantra.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  animation: sri-rotate 80s linear infinite;
  will-change: transform;
}
@keyframes sri-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
body.theme-light .shell::before { opacity: 0.09; }

/* ============================================================
   Sandstone paper texture overlay — soft warm grain
   ============================================================ */
body::after {
  /* (existing trishul corner — preserved; texture goes on a new layer) */
}
.sandstone {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,153,51,0.6) 0, transparent 1px),
    radial-gradient(circle at 32% 64%, rgba(196,30,58,0.5) 0, transparent 1px),
    radial-gradient(circle at 68% 28%, rgba(245,183,0,0.5) 0, transparent 1px),
    radial-gradient(circle at 88% 78%, rgba(232,93,117,0.5) 0, transparent 1px);
  background-size: 6px 6px, 9px 9px, 7px 7px, 11px 11px;
}
body.theme-light .sandstone { opacity: 0.10; mix-blend-mode: multiply; }

/* ============================================================
   Component upgrades — additive
   ============================================================ */

/* TILES: kumkum tika in the corner + chandan-gold gradient on numbers */
.tile {
  border-image: linear-gradient(135deg, transparent, rgba(255,153,51,0.18), transparent) 1;
}
.tile::after {
  /* replaces hover ring? no — we keep the saffron edge from motion.css and ADD this */
}
/* (tile number gradient removed by user request — kept solid in glass.css) */

/* Add a tiny kumkum dot in tile corner (auspicious mark) */
.tile {
  position: relative;
}
.tile > .lbl::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kumkum);
  box-shadow: 0 0 10px rgba(196,30,58,0.7);
  opacity: 0.55;
}

/* TABLES: temple-step zebra (every 4th row tinted) + gold rule under header */
table thead tr { position: relative; }
table thead tr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--haldi), var(--kesari), var(--haldi), transparent);
  opacity: 0.7;
}
table tbody tr:nth-child(4n) { background: rgba(255,153,51,0.025); }
body.theme-light table tbody tr:nth-child(4n) { background: rgba(194,65,12,0.04); }

/* BUTTONS: sandalwood gradient, gold leaf trim */
button {
  background: linear-gradient(180deg, var(--kesari) 0%, var(--kesari-deep) 100%);
  border: 1px solid var(--kesari-deep);
  color: #1a0e00;
  position: relative;
}
button::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 40%);
  pointer-events: none;
}
body.theme-light button { color: #fff; }

/* BADGES — sacred color codes */
.badge.st-confirmed { background: rgba(47,125,50,0.18); color: var(--tulsi); border: 1px solid rgba(47,125,50,0.35); }
.badge.st-pending   { background: rgba(13,124,143,0.18); color: var(--mor-pankh); border: 1px solid rgba(13,124,143,0.35); }
.badge.st-awaiting_payment { background: rgba(245,183,0,0.18); color: var(--haldi); border: 1px solid rgba(245,183,0,0.35); }
.badge.st-cancelled { background: rgba(196,30,58,0.18); color: var(--kumkum); border: 1px solid rgba(196,30,58,0.35); }
.badge.st-rejected  { background: rgba(107,98,88,0.20); color: var(--bhasma); border: 1px solid rgba(107,98,88,0.45); }

body.theme-light .badge.st-confirmed { background: #d1fae5; color: var(--tulsi); }
body.theme-light .badge.st-pending   { background: #cffafe; color: #155e63; }
body.theme-light .badge.st-awaiting_payment { background: #fef3c7; color: #92400e; }
body.theme-light .badge.st-cancelled { background: #fee2e2; color: var(--kumkum); }
body.theme-light .badge.st-rejected  { background: #f3f0ec; color: #4a4239; }

/* INPUTS: chandan border on focus + soft kumkum glow */
input:focus, select:focus, textarea:focus {
  border-color: var(--kesari) !important;
  box-shadow: 0 0 0 3px rgba(255,153,51,0.18), 0 0 18px rgba(196,30,58,0.10);
}

/* CARD top filigree — already there from motion.css; here we add a corner mandala dot */
.card::after {
  content: "";
  position: absolute;
  top: 8px; right: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kumkum);
  box-shadow: 0 0 8px rgba(196,30,58,0.6);
  opacity: 0.5;
  pointer-events: none;
}

/* SIDEBAR torana (gateway) accent above brand */
.sidebar .brand {
  position: relative;
  padding-top: 18px;
}
.sidebar .brand::before {
  content: "";
  position: absolute;
  top: 0; left: 8px; right: 8px;
  height: 8px;
  background:
    radial-gradient(circle at 10% 100%, var(--kesari) 0 2.5px, transparent 3px),
    radial-gradient(circle at 30% 100%, var(--kesari) 0 2.5px, transparent 3px),
    radial-gradient(circle at 50% 100%, var(--kesari) 0 2.5px, transparent 3px),
    radial-gradient(circle at 70% 100%, var(--kesari) 0 2.5px, transparent 3px),
    radial-gradient(circle at 90% 100%, var(--kesari) 0 2.5px, transparent 3px);
  opacity: 0.6;
}

/* Sidebar — kalasha (temple finial) at the very bottom of the foot, before blessing */
.sidebar-foot::before {
  content: "🪔";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px rgba(255,153,51,0.5));
  animation: kalasha-flicker 3s ease-in-out infinite alternate;
}
@keyframes kalasha-flicker {
  0%   { opacity: 0.7; transform: translateY(0) scale(1); }
  50%  { opacity: 1;   transform: translateY(-1px) scale(1.05); }
  100% { opacity: 0.85; transform: translateY(0) scale(1); }
}

/* ============================================================
   Time-aware greeting strip — populated by temple.js
   ============================================================ */
.muhurta-strip {
  font-family: var(--font-deva);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--saffron);
  text-align: center;
  padding: 6px 4px;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  opacity: 0.85;
}
.muhurta-strip .muhurta-en {
  font-family: inherit;
  font-style: italic;
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* Bhasma Aarti countdown widget (rendered by temple.js into sidebar) */
.bhasma-strip {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--haldi);
  margin-top: 4px;
  padding: 4px 6px;
  background: rgba(245,183,0,0.06);
  border: 1px solid rgba(245,183,0,0.2);
  border-radius: 6px;
}
.bhasma-strip strong { color: var(--kesari); font-weight: 700; }
body.theme-light .bhasma-strip { color: #92400e; background: #fef3c7; border-color: #fde68a; }

/* ============================================================
   Lotus bloom — used by .bloom and toast .ok
   ============================================================ */
@keyframes lotus-bloom {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.bloom { animation: lotus-bloom 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.mhk-toast.ok::before {
  content: "🪷 ";
  animation: lotus-bloom 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

/* ============================================================
   Kalachakra (wheel of time) loading spinner — for .loading
   ============================================================ */
.loading {
  position: relative;
  display: inline-block;
  width: 32px; height: 32px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0%, var(--kesari) 25%, var(--haldi) 50%, var(--kesari-deep) 75%, transparent 100%);
  animation: kalachakra 1.4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px);
          mask: radial-gradient(circle, transparent 9px, #000 10px);
}
@keyframes kalachakra {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Aarti flame trace under counting tile numbers
   ============================================================ */
.tile .num.counting {
  position: relative;
}
.tile .num.counting::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 24px; height: 4px;
  margin-left: -12px;
  background: radial-gradient(ellipse, var(--haldi), transparent 70%);
  filter: blur(2px);
  animation: flame 1s ease-out;
}
@keyframes flame {
  0%   { transform: translateY(8px) scaleY(1.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(-2px) scaleY(0.6); opacity: 0; }
}

/* ============================================================
   Print: clean, no decorations
   ============================================================ */
@media print {
  .shell::before, .sandstone, .trishul-watermark,
  body::before, body::after,
  .muhurta-strip, .bhasma-strip { display: none !important; }
}