/* assets/style.css
   UI theme for both User & Admin panels (Bootstrap 5 based)
*/

:root{
  --app-grad-user: linear-gradient(90deg,#0ea5e9,#22c55e);
  --app-grad-admin: linear-gradient(90deg,#111827,#334155);
  --app-card-radius: 18px;
}

html, body{ height:100%; }

body{
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(800px 400px at 90% 0%, rgba(34,197,94,.14), transparent 55%),
    #f5f7fb;
}

/* Navbar */
.navbar.app-navbar{ background: var(--app-grad-user); }
.navbar.admin-navbar{ background: var(--app-grad-admin); }
.navbar .navbar-brand{ font-weight: 900; letter-spacing: .2px; }
.navbar .brand-wrap{ display:flex; align-items:center; gap:10px; }
.navbar .app-logo{ height:34px; width:auto; border-radius:10px; background:rgba(255,255,255,.12); padding:4px; }
.navbar .nav-logo{ height:34px; width:auto; border-radius:10px; background:rgba(255,255,255,.12); padding:4px; }
.navbar .nav-link{
  font-weight:800;
  opacity: .95;
  border-radius: 999px;
  padding: .45rem .8rem;
}
.navbar .nav-link:hover{
  opacity: 1;
  background: rgba(255,255,255,.12);
}
.navbar .nav-link.active{
  opacity: 1;
  background: rgba(255,255,255,.18);
}

/* Page hero */
.page-hero{
  border-radius: var(--app-card-radius);
  color:#fff;
  padding: 22px 22px;
  background: var(--app-grad-user);
  box-shadow: 0 12px 30px rgba(17,24,39,.12);
}
.page-hero.admin{ background: var(--app-grad-admin); }

/* Cards */
.card-soft{
  border: 0;
  border-radius: var(--app-card-radius);
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
}
.card-soft .card-header{
  border-bottom: 0;
  background: transparent;
}

/* Dashboard tiles */
.stat-card{
  border-radius: 16px;
  padding: 16px 16px;
  border: 0;
  background: linear-gradient(135deg, #0f172a, #334155);
  box-shadow: 0 12px 26px rgba(17,24,39,.10);
  color:#fff;
}
.stat-card.alt{ background: linear-gradient(135deg, #0f172a, #0ea5e9); }
.stat-card.alt2{ background: linear-gradient(135deg, #0f172a, #22c55e); }
.stat-card.alt3{ background: linear-gradient(135deg, #0f172a, #a855f7); }
.stat-card.alt4{ background: linear-gradient(135deg, #0f172a, #f97316); }

.stat-label{
  font-size: .95rem;
  opacity: .90;
  font-weight: 800;
}
.stat-value{
  margin-top: 8px;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}

/* Broadcast status tile (solid colors) */
.stat-card.online{
  background-color: #16a34a !important;
  background-image: none !important;
  border-color: #16a34a !important;
  color:#fff !important;
}
.stat-card.offline{
  background-color: #dc2626 !important;
  background-image: none !important;
  border-color: #dc2626 !important;
  color:#fff !important;
}
.stat-card.online .stat-label,
.stat-card.online .stat-value,
.stat-card.offline .stat-label,
.stat-card.offline .stat-value{
  color:#fff !important;
  opacity: 1 !important;
}

/* Tables */
.table thead th{ white-space: nowrap; }

/* Auth pages */
.auth-page{
  background:
    radial-gradient(900px 450px at 15% 0%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(900px 450px at 85% 0%, rgba(168,85,247,.18), transparent 60%),
    #f5f7fb;
}
.role-admin.auth-page{
  background:
    radial-gradient(900px 450px at 15% 0%, rgba(17,24,39,.22), transparent 60%),
    radial-gradient(900px 450px at 85% 0%, rgba(148,163,184,.18), transparent 60%),
    #f5f7fb;
}

.auth-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

/* Modern centered login card */
.auth-card-modern{
  width: 100%;
  max-width: 440px;
  border: 0;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 55px rgba(17,24,39,.18);
}
.auth-card-modern-admin{ max-width: 560px; }
.auth-logo{
  height: 54px;
  width: auto;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  padding: 8px;
}
.auth-card-modern .form-control{
  border-radius: 14px;
}
.auth-card-modern .btn{
  border-radius: 14px;
  font-weight: 800;
}
.auth-card{
  width: 100%;
  max-width: 980px;
  border: 0;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(17,24,39,.14);
}

.auth-card-mini{
  width:100%;
  max-width: 420px;
  border:0;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(17,24,39,.14);
}

.auth-card-admin{
  width:100%;
  max-width: 560px;
  border:0;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(17,24,39,.14);
}
.auth-mini-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.auth-mini-head img{ height:38px; width:auto; border-radius:12px; background:rgba(17,24,39,.06); padding:6px; }
.auth-mini-sub{ color:#6b7280; font-size: .95rem; }
.auth-side{
  padding: 34px 30px;
  color:#fff;
  background: var(--app-grad-user);
}
.auth-side.admin{ background: var(--app-grad-admin); }
.auth-side .title{ font-weight: 900; font-size: 28px; line-height: 1.1; }
.auth-side .subtitle{ opacity:.9; margin-top: 10px; }
.auth-form{ padding: 26px 24px; background:#fff; }

@media (max-width: 992px){
  .auth-side{ display:none; }
  .auth-form{ padding: 22px 18px; }
}

/* Little helpers */
.text-muted-2{ color: rgba(255,255,255,.82) !important; }
.badge-soft{
  background: rgba(255,255,255,.18);
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
}


/* Narrow containers for cleaner layout */
.container-narrow{
  max-width: 1100px;
}


/* Top brand + menu (logo centered, menu under) */
.top-brand{
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-brand-user{
  background: linear-gradient(135deg, #0b1220, #0f172a);
}
.top-brand-admin{
  background: linear-gradient(135deg, #0b0f19, #111827);
}
.brand-logo{
  height: 64px;
  width:auto;
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(0,0,0,.20);
  background: rgba(255,255,255,.10);
  padding: 6px;
}
.brand-title{
  font-weight: 900;
  letter-spacing: .3px;
  font-size: 1.55rem;
  line-height: 1.1;
}
.brand-sub{
  margin-top: 6px;
  font-weight: 700;
  opacity: .85;
  font-size: .95rem;
}

.top-menu{
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.top-menu-user{
  background: #0b1220;
}
.top-menu-admin{
  background: #0b0f19;
}

/* Pills */
.app-pills .nav-link{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.app-pills .nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.26);
  color:#fff;
}
.top-menu-user .app-pills .nav-link.active{
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  border-color: transparent;
  color:#fff;
}
.top-menu-admin .app-pills .nav-link.active{
  background: linear-gradient(135deg, #a855f7, #0ea5e9);
  border-color: transparent;
  color:#fff;
}
.app-pills .nav-link.logout{
  background: #dc2626;
  border-color: #dc2626;
  color:#fff;
}
.app-pills .nav-link.logout:hover{
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
}

/* Page background */
body.role-user{
  background: #f3f4f6;
}
body.role-admin{
  background: #f3f4f6;
}


.menu-stack{
  max-width: 560px;
}
.menu-stack .nav-link{
  text-align: center;
}