/* =========================================================================
   RELM GLOW-UP LAYER
   App-wide visual refresh. Loaded last in base.html so it layers on top of
   hydes.css / relm-game-fx.css / bootstrap. Purely additive: it elevates
   shared chrome (background, navbar, cards, buttons, chips, headings, forms)
   and lifts the dashboard's bespoke widget wrappers without replacing their
   signature gradients.
   ========================================================================= */

:root{
  --glo-teal:        #26C6D6;
  --glo-teal-soft:   rgba(38,198,214,0.45);
  --glo-teal-faint:  rgba(38,198,214,0.10);
  --glo-gold:        #f6b100;
  --glo-gold-soft:   rgba(246,177,0,0.40);
  --glo-red:         #d4152b;
  --glo-ink:         #05080d;
  --glo-surface:     #0f161f;
  --glo-surface-2:   #141c26;
  --glo-line:        rgba(255,255,255,0.07);
  --glo-line-strong: rgba(38,198,214,0.30);
  --glo-radius:      18px;
  --glo-radius-sm:   12px;
  --glo-shadow:      0 10px 30px rgba(0,0,0,0.45);
  --glo-shadow-lift: 0 16px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(38,198,214,0.18), 0 14px 40px rgba(38,198,214,0.10);
  --glo-ease:        cubic-bezier(0.2,0.7,0.2,1);
}

/* ---- Page ambiance -------------------------------------------------------
   Layer soft brand glows + a faint grid over the existing radial body bg. */
body{
  position: relative;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(38,198,214,0.10), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(246,177,0,0.06), transparent 60%),
    radial-gradient(ellipse at top, #131c28 0%, #0d1117 60%, var(--glo-ink) 100%) !important;
  background-attachment: fixed !important;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.6;
}
body > .container,
body > nav,
body > #clockBanner,
body > .toast-container{ position: relative; z-index: 1; }

/* ---- Navbar: glassy dark with a teal hairline --------------------------- */
.navbar.bg-dark{
  background: rgba(9,13,18,0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--glo-line);
  box-shadow: 0 1px 0 rgba(38,198,214,0.18), 0 8px 26px rgba(0,0,0,0.40);
}
.navbar .nav-link{ transition: color .18s var(--glo-ease), transform .18s var(--glo-ease); }
.navbar .nav-link:hover{ color: var(--glo-teal) !important; }
.navbar .nav-link.active{
  color: var(--glo-teal) !important;
  position: relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute; left:.75rem; right:.75rem; bottom:2px; height:2px;
  border-radius:3px;
  background: var(--glo-teal);
  box-shadow: 0 0 10px rgba(38,198,214,0.7);
}

/* ---- Generic Bootstrap cards: refined surface + hover lift -------------- */
.card{
  background: linear-gradient(160deg, var(--glo-surface-2) 0%, var(--glo-surface) 100%) !important;
  border: 1px solid var(--glo-line) !important;
  border-radius: var(--glo-radius) !important;
  box-shadow: var(--glo-shadow) !important;
  transition: transform .22s var(--glo-ease), box-shadow .22s var(--glo-ease), border-color .22s var(--glo-ease) !important;
  position: relative;
}
.card:hover{
  transform: translateY(-3px);
  border-color: var(--glo-line-strong) !important;
  box-shadow: var(--glo-shadow-lift) !important;
}
.card .card-header{
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid var(--glo-line) !important;
}
.card .card-header,
.card h1, .card h2, .card h3, .card h4, .card h5{
  letter-spacing: .3px;
}

/* ---- Bespoke dashboard widget wrappers: same lift, keep their gradients - */
.tcc-wrap, .pc-hero, .rn-hero-card, .wd-wall-card, .top5-leaders-card,
.thyme-play-card, .ai-buddy-card, .pinned-review-card, .pinned-top-wrap,
.rg-broadcast-strip, .rhud, #myPayCard, #dailyOpsCard, #stormyCard{
  transition: transform .22s var(--glo-ease), box-shadow .22s var(--glo-ease), border-color .22s var(--glo-ease) !important;
}
.tcc-wrap:hover, .pc-hero:hover, .rn-hero-card:hover, .wd-wall-card:hover,
.top5-leaders-card:hover, .thyme-play-card:hover, .ai-buddy-card:hover,
.pinned-review-card:hover, #myPayCard:hover, #dailyOpsCard:hover, #stormyCard:hover{
  transform: translateY(-3px);
  box-shadow: var(--glo-shadow-lift) !important;
  border-color: var(--glo-line-strong) !important;
}

/* ---- Buttons: tactile, branded, consistent ----------------------------- */
.btn{
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .15s var(--glo-ease), box-shadow .2s var(--glo-ease), filter .2s var(--glo-ease) !important;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary,
.btn-info{
  background: linear-gradient(135deg, #2fd6e6 0%, var(--glo-teal) 45%, #14a3b3 100%) !important;
  border: none !important;
  color: #04222a !important;
  box-shadow: 0 6px 18px rgba(38,198,214,0.28) !important;
}
.btn-primary:hover,
.btn-info:hover{ filter: brightness(1.06); box-shadow: 0 10px 26px rgba(38,198,214,0.38) !important; }
.btn-warning{
  background: linear-gradient(135deg, #ffc233 0%, var(--glo-gold) 55%, #d99700 100%) !important;
  border: none !important;
  color: #1a1205 !important;
  box-shadow: 0 6px 18px rgba(246,177,0,0.26) !important;
}
.btn-warning:hover{ filter: brightness(1.05); box-shadow: 0 10px 26px rgba(246,177,0,0.36) !important; }
.btn-danger{
  background: linear-gradient(135deg, #ef3349 0%, var(--glo-red) 60%, #a8101f 100%) !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(212,21,43,0.28) !important;
}
.btn-success{
  background: linear-gradient(135deg, #34e08c 0%, #1a9058 70%, #137a48 100%) !important;
  border: none !important;
  color: #03210f !important;
  box-shadow: 0 6px 18px rgba(26,144,88,0.28) !important;
}
.btn-outline-light,
.btn-outline-secondary{
  border-color: var(--glo-line-strong) !important;
  transition: transform .15s var(--glo-ease), border-color .2s var(--glo-ease), background .2s var(--glo-ease), color .2s var(--glo-ease) !important;
}
.btn-outline-light:hover,
.btn-outline-secondary:hover{
  background: var(--glo-teal-faint) !important;
  border-color: var(--glo-teal) !important;
  color: var(--glo-teal) !important;
}

/* ---- Badges & chips ----------------------------------------------------- */
.badge{ letter-spacing: .4px; border-radius: 999px; }
.badge.bg-secondary{ background: rgba(255,255,255,0.08) !important; color: #cdd6df !important; }

/* ---- Progress bars ------------------------------------------------------ */
.progress{
  background: rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.progress-bar{
  background: linear-gradient(90deg, #14a3b3, var(--glo-teal), #5be3ee) !important;
  box-shadow: 0 0 12px rgba(38,198,214,0.45);
}

/* ---- Headings: subtle brand presence ----------------------------------- */
h1, h2, h3{ letter-spacing: .3px; }

/* ---- Flash messages & toasts ------------------------------------------- */
.alert{
  border: 1px solid var(--glo-line) !important;
  border-radius: var(--glo-radius-sm) !important;
  backdrop-filter: blur(8px);
  box-shadow: var(--glo-shadow);
}
.toast{
  border-radius: var(--glo-radius-sm) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5) !important;
}

/* ---- Form controls: focus glow ----------------------------------------- */
.form-control, .form-select{
  background: rgba(10,15,22,0.7) !important;
  border: 1px solid var(--glo-line) !important;
  border-radius: var(--glo-radius-sm) !important;
  color: #e8eef2 !important;
  transition: border-color .2s var(--glo-ease), box-shadow .2s var(--glo-ease) !important;
}
.form-control:focus, .form-select:focus{
  border-color: var(--glo-teal) !important;
  box-shadow: 0 0 0 .2rem rgba(38,198,214,0.20) !important;
  background: rgba(10,15,22,0.9) !important;
}
.form-control::placeholder{ color: #6c7a88 !important; }

/* ---- List groups & tables (admin/office pages) ------------------------- */
.list-group-item{
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--glo-line) !important;
  color: #dbe3ea;
}
.table{ color: #dbe3ea; }
.table > :not(caption) > * > *{ border-color: var(--glo-line) !important; }

/* ---- First-paint reveal for generic cards (widgets already use rg-fadeup) */
@media (prefers-reduced-motion: no-preference){
  .container > .card,
  .container > .row > [class*="col"] > .card{
    animation: gloReveal .5s var(--glo-ease) both;
  }
}
@keyframes gloReveal{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---- Custom scrollbar --------------------------------------------------- */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(38,198,214,0.45), rgba(38,198,214,0.18));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(38,198,214,0.6); background-clip: padding-box; }