/* Copied style for public_html */
:root{
  --primary-grad: linear-gradient(90deg,#00d5ca,#06b6d4);
  --primary-grad-2: linear-gradient(90deg,#06b6d4,#4f46e5);
  --bg-grad: linear-gradient(135deg, #1f2532 0%, #132f52 50%, #00121a 100%);
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.08);
  --glass-blur: 6px;
}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg-grad);
  color:#e6eef6;
}
.navbar-brand{font-weight:700;color:#fff!important}
.nav-link{color:rgba(255,255,255,0.85)!important}
.nav-link.active {
    background-color: rgb(219 234 254);
    color: #1e3a8a !important;
    border-radius: .375rem;    
}
.auth-card{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px); }
.btn-primary{ color:#fff; background-image: var(--primary-grad); border: none; box-shadow: 0 6px 18px rgba(12,24,48,0.35); }
.btn-primary:hover{ filter:brightness(1.02); transform: translateY(-1px); }
.btn-secondary{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); color: #fff; }
.btn-gradient{ color:#1f2532; background-image: var(--primary-grad); border:none; font-weight: 600; }
.card{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); color: #e6eef6; margin-bottom: 1rem; box-shadow: 0 6px 18px rgba(2,6,23,0.45); }
.card .card-title{ color:#fff; padding: 1.25rem 0; font-size: 2rem; font-weight: 600; }
.card .card-body{ padding: 2rem; }
.list-group-item{ background:transparent; border:1px solid rgba(255,255,255,0.03); color:#e6eef6 }
.table thead th{ color: #cfe8ff }
.table tbody td{ color: #e6eef6 }
.table-responsive{ overflow-x:auto }
.form-control{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); color:#e6eef6 }
.form-control:focus{ box-shadow: 0 0 0 0.15rem rgba(79,70,229,0.15); border-color: rgba(79,70,229,0.45); }
.offcanvas{ background: rgba(2,6,23,0.85); color: #e6eef6 }
.offcanvas .nav-link{ color: #dbeafe }
img.img-fluid{ max-width:100%; height:auto }
pre, code{ word-break:break-word; white-space:pre-wrap }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace }
@media (max-width:575px){ .navbar-brand{ font-size:1rem } }

.sidebar { width: 220px; position: fixed; top:56px; left:0; bottom:0; padding:1rem; }
.navbar, .sidebar {
    background: rgba(31,37,50,0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

a {
    color: #87e876;
}

input::placeholder { color: #fff !important; font-style: italic; }

/* spinner fade and overlay for subscribers/broadcast */
.spinner-fade{opacity:0;transition:opacity .28s ease}
.spinner-fade.show{opacity:1}
.subs-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  pointer-events:auto;
  border-radius: .5rem;
}
.card > .card-body{position:relative}

@media (max-width: 768px) {
    .content {
        margin: 30px 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.btn-close {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 4l22 22M4 26L26 4'/%3E%3C/svg%3E");
}