/* ===== Base font & reset ===== */
:root{
  --bg-start:#1e3c72;
  --bg-end:#2a5298;
  --glass:rgba(255,255,255,0.16);
  --glass-strong:rgba(255,255,255,0.22);
  --glass-soft:rgba(255,255,255,0.10);
  --text:#ffffff;
  --text-soft:#f0f0f0;
  --muted:#d7dbe7;
  --accent:#ff6b6b;
  --accent-hover:#e55a5a;
  --border:rgba(255,255,255,0.28);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --topbar-h:56px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
  color: var(--text);
  min-height:100vh;
}

/* ===== Layout helpers ===== */
.container{ width:100%; max-width:1100px; margin:0 auto; padding:16px; }
.center-viewport{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.mt-1{ margin-top:.75rem; }
.mt-2{ margin-top:1.25rem; }
.center{ text-align:center; }

/* ===== Top bar (overlay) ===== */
.top-bar{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background: color-mix(in oklab, var(--glass) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

/* Push dashboard content below the fixed header */
.top-bar + .container{
  margin-top: calc(var(--topbar-h) + 16px);
}


/* ===== Buttons ===== */
button,
.btn,
.btn:link,
.btn:visited{
  font-size:11pt;
  background: var(--accent);
  color:#fff;
  border:1px solid transparent;
  height:38px;
  padding:0 1.15rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
  box-shadow: 0 6px 16px rgba(255,107,107,.25);
}
button:hover,.btn:hover{ background: var(--accent-hover); }
button:active,.btn:active{ transform: translateY(1px); }
button:focus-visible,.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,107,107,.35);
}

/* Secondary (glass) */
.btn--subtle{
  background: var(--glass);
  color: var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn--subtle:hover{ background: var(--glass-strong); }

/* Icon-only buttons (glass style) */
.btn-icon{
  background: var(--glass);
  color: var(--text);
  border:1px solid var(--border);
  box-shadow:none;
  height:32px; width:32px;
  padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.btn-icon:hover{ background: var(--glass-strong); }
.btn-icon.btn-icon-lg{ height:38px; width:38px; border-radius:10px; }
.btn-icon .icon{ width:18px; height:18px; stroke-width:2; }
.btn-icon.btn-icon-lg .icon{ width:20px; height:20px; stroke-width:2; }

/* ===== Panels / cards / modals (glass) ===== */
.form-container,
.modal-content{
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:28px;
  color: var(--text);
}

/* Headings */
.form-container h2,
.modal-content h2,
.section-title{
  margin:0 0 .75rem 0;
  font-weight:800;
  letter-spacing:.3px;
  color: var(--text);
}

/* ===== Forms & inputs ===== */
label{ display:block; font-weight:700; color:var(--text); margin-top:.5rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="file"],
select,
textarea{
  width:100%; max-width:100%;
  font-size:11pt;
  padding:.75rem .9rem;
  margin-top:.45rem; margin-bottom:1rem;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--glass-strong);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.75); }

input:focus,select:focus,textarea:focus{
  outline:none; 
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,107,.28);
}

/* File input button */
input[type="file"]::file-selector-button{
  background: var(--glass);
  color: var(--text);
  border:1px solid var(--border);
  padding:.5rem .9rem; border-radius:10px; margin-right:.7rem;
  cursor:pointer;
}
input[type="file"]::file-selector-button:hover{ background: var(--glass-strong); }

/* Helper text / alerts */
.viewer-count{ color: var(--muted); text-align:center; font-weight:600; }
.text-error{ color:#ffd0d0; } 
.text-success{ color:#d4ffe6; }

/* ===== Tables (glass) ===== */
table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
  color: var(--text-soft);
  box-shadow: var(--shadow);
  margin-top:12px;
}
th,td{ padding:.85rem 1rem; text-align:left; vertical-align:middle; }
th{
  background: var(--glass-strong);
  color: var(--text);
  font-weight:800;
  border-bottom:1px solid var(--border);
}
tr:not(:last-child) td{ border-bottom:1px solid var(--border); }
tbody tr:hover{ background: var(--glass-strong); }

/* action cell layout */
.actions{ display:flex; gap:.35rem; }

/* Online status dots */
.online-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.online-dot.green{ background:#7CFC98; box-shadow:0 0 8px rgba(124,252,152,.8); }
.online-dot.red{ background:#B0B7C3; }

/* ===== Modal shell ===== */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:20; }
.modal-content{ max-width:480px; margin:6% auto; }

/* Modal actions row & generic form actions */
.form-actions{ display:flex; gap:.75rem; margin-top:1rem; }
.form-actions .btn, .form-actions button{ flex:1; }

/* ===== Theater stage (centered, below top bar) ===== */
.theater{
  height: calc(100vh - var(--topbar-h));
  margin-top: var(--topbar-h);
  display: grid;
  place-items: center;
  padding: 16px; /* so overlays/badge don't clip edges */
}

/* Size wrapper the player fills.
   Auto scales between a comfortable min and max. */
.stage{
  width: clamp(420px, 60vw, 900px); /* adjust middle % to taste */
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  container-type: size;            /* enable container queries/units */
}

/* Video.js fills the wrapper exactly */
.video-js{
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  overflow: hidden;
  margin: 0;
}

/* Mobile: still centered, a bit wider but capped by clamp() above */
@media (max-width: 768px){
  .theater{ padding: 8px; }
  .stage{ width: clamp(320px, 92vw, 620px); }
}

/* ===== Viewer badge (auto-scales with container) ===== */
.vjs-viewer-badge{
  position:absolute;
  top: 12px; left: 12px;
  z-index: 10;
  display:inline-flex; align-items:center; gap: 0.5em;

  /* Make the whole badge scale with the .stage width using container units */
  font-size: clamp(10px, 2.2cqw, 14px); /* cqw = 1% of the container width */

  padding: 0.6em 0.9em;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight:700;
  line-height: 1;
  box-shadow: var(--shadow);
  pointer-events:none;
  user-select:none;
}

.vjs-viewer-badge .eye{
  width: 1.1em; height: 1.1em;             /* scale with font-size */
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M12 5c-5 0-9.27 3.11-11 7 1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M12 5c-5 0-9.27 3.11-11 7 1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/></svg>') center/contain no-repeat;
}

.vjs-viewer-badge .count{
  font-size: 1em;                           /* inherits scaling */
}

/* If user hides controls, fade the badge (Facebook-like) */
.vjs-has-started.vjs-user-inactive .vjs-viewer-badge{
  opacity:0; transition: opacity .25s ease;
}
.vjs-has-started.vjs-user-active .vjs-viewer-badge{
  opacity:1; transition: opacity .25s ease;
}

/* tiny cusor hint */
.sortable { cursor: pointer; user-select: none; }