/* === SLMMmedia EXTRA CSS (consolidated) === */

/* Login: Fullscreen Cloud Background & Glass Effects */
.login-hero{
  position: relative;
  min-height: calc(100vh - 0px);
  display: flex;
  align-items: center;
}
.login-hero::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url('/assets/img/backgrounds/login-bg.png');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  transform: none;
  filter: brightness(0.78) saturate(1.05) contrast(1.05);
  z-index: -2;
}
.login-hero::after{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(50% 35% at 85% 20%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(50% 35% at 15% 85%, rgba(14,165,233,.35), transparent 60%);
  z-index: -1;
}
.pro-glass{
  background: rgba(17,19,25,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 1.25rem;
  color: #e9eef6;
}
.glow-border{ position: relative; }
.glow-border::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(14,165,233,.85));
  filter: blur(16px);
  opacity:.22;
  z-index:-1;
}
.hover-lift{ transition: transform .45s ease, box-shadow .45s ease; }
.hover-lift:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.form-control{
  background: rgba(255,255,255,0.9);
  border-radius: .8rem;
}
.form-control:focus{
  border-color:#7c3aed;
  box-shadow: 0 0 0 .25rem rgba(124,58,237,.25), 0 8px 30px rgba(124,58,237,.35);
}
.btn-primary{
  background-image: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
}
.btn-primary:hover{ filter: brightness(1.04); }
.shadow-2xl{ box-shadow: 0 30px 60px rgba(0, 0, 0, .55)!important; }
.animate-fade-in{ animation: fadeIn .6s ease-out both; }
@keyframes fadeIn{ from { opacity:0; transform: translateY(6px) } to { opacity:1; transform: none } }

/* Footer: force white */
footer.text-center.text-muted.py-4.small,
footer.text-center.text-muted.py-4.small *,
footer.text-center,
footer.text-center * {
  color: #ffffff !important;
}
footer.text-center a,
footer.text-center .link-secondary,
footer.text-center a:hover,
footer.text-center .link-secondary:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none;
}
footer.text-center { text-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* Provider logos */
.provider-logo { height: 18px; vertical-align: text-bottom; }

/* Dashboard Pro+ */
.page-dashboard{
  position: relative;
  isolation: isolate;
  margin-top: -.5rem;
}
.page-dashboard::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(1200px 800px at 15% 20%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(1000px 700px at 85% 80%, rgba(14,165,233,.25), transparent 60%),
              linear-gradient(180deg, #0f172a 0%, #111827 100%);
}
.page-dashboard::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(2px) saturate(105%);
}
.tile-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
@media (max-width: 1200px){ .tile-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 768px){ .tile-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px){ .tile-grid{ grid-template-columns: repeat(2, 1fr); } }
.tile, .panel{
  background: rgba(17,19,25,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  padding: 1rem;
  color: #e9eef6;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tile:hover, .panel:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.tile--kpi{ grid-column: span 3; position: relative; overflow: hidden; }
.tile--kpi::after{
  content:""; position:absolute; inset:-1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(14,165,233,.25));
  filter: blur(18px); opacity:.18; z-index:-1;
}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: .5rem; }
.header-row h1{ font-size: clamp(1.25rem, 2vw, 1.6rem); margin:0; }
.header-row .muted{ color: rgba(255,255,255,.6); font-size:.9rem; }
.kpi{ display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
.kpi .icon{
  font-size:1.6rem; opacity:.9;
  padding:.6rem; border-radius:.8rem;
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(14,165,233,.22));
  border: 1px solid rgba(255,255,255,.12);
}
.kpi .label{ font-size:.8rem; opacity:.85; margin-bottom:.15rem; }
.kpi .value{ font-size:1.6rem; font-weight:800; letter-spacing: .3px; }
.panel{ grid-column: span 8; }
.panel--side{ grid-column: span 4; }
#chartBookings{ max-height: 120px; height:120px; }
.gauge{
  --val: 0;
  --color: #22c55e;
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--val)*1%), rgba(255,255,255,0.12) 0);
  display:grid; place-items:center; position:relative;
}
.gauge::before{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.gauge > span{ position:relative; font-weight:800; font-size:1.1rem; }
.progress-soft{
  height:.5rem; border-radius:1rem; background: rgba(255,255,255,.12); overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.progress-soft > .bar{
  height:100%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  width: var(--w, 0%);
}
.list-activity li + li{ border-top: 1px dashed rgba(255,255,255,.12); }
.list-activity .meta{ color: rgba(255,255,255,.7); }
.reveal{ opacity:0; transform: translateY(8px); animation: reveal .6s ease forwards; }
.reveal:nth-child(2){ animation-delay:.05s } .reveal:nth-child(3){ animation-delay:.1s }
.reveal:nth-child(4){ animation-delay:.15s } .reveal:nth-child(5){ animation-delay:.2s }
@keyframes reveal{ to{ opacity:1; transform:none } }
.support-card .btn{ white-space: nowrap; }

/* === Dashboard brand heading (v=dashboardPro3) === */
.brand-head{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  display:flex; align-items:center; gap:.65rem;
  margin: 0;
}
.brand-head .cloud{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color:#fff;
  box-shadow: 0 8px 20px rgba(14,165,233,.35);
  flex: 0 0 38px;
}
.brand-head .cloud i{ font-size: 1.15rem; line-height: 1; }
.header-row .muted{ display:none !important; } /* remove old subtext gently */

/* === Topbar with user + prominent logout (v=navbarUser1) === */
.topbar{
  position: sticky; top: 0; z-index: 1030;
  background: rgba(17,19,25,0.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  min-height: 52px;
}
.user-chip{
  color:#fff; font-weight:600;
  padding:.35rem .6rem; border-radius:.65rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.logout-btn{
  box-shadow: 0 8px 20px rgba(239,68,68,.35);
}
.logout-btn:hover{ filter: brightness(1.05); }

/* === About Modal glass styling (brandTitle1) === */
.modal-content.pro-glass{
  background: rgba(17,19,25,0.65);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #e9eef6;
}
.modal-header .btn-close{ filter: invert(1) grayscale(100%); }