/* =========================================================
   ICS Meet — shared stylesheet (login + dashboards)
   Extends the main site's brand tokens with role accent colors.
   ========================================================= */
:root{
  --navy:#0A1F4D; --blue:#17469E; --dark-blue:#071433; --light-blue:#EEF3FB;
  --orange:#FF8A1F; --orange-dark:#E67510; --gold:#C9A227; --gold-light:#F1E0B3; --gold-dark:#9C7A1B;
  --violet:#7C3AED; --violet-light:#F1E8FE; --emerald:#10B981; --emerald-light:#E1FBF0;
  --red:#DC2626; --red-light:#FDECEC;
  --text-dark:#16213A; --text-muted:#68758B; --border:#E3EAF5;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(7,26,73,.06); --shadow-md:0 12px 30px rgba(7,26,73,.10); --shadow-lg:0 24px 60px rgba(7,26,73,.28);
  --font-display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --accent:var(--blue); --accent-dark:var(--navy); --accent-light:var(--light-blue); --accent-ink:#fff; --accent-glow:rgba(23,70,158,.22);
}
body.role-ceo{ --accent:var(--gold); --accent-dark:var(--gold-dark); --accent-light:var(--gold-light); --accent-ink:#3a2e06; --accent-glow:rgba(201,162,39,.24); }
body.role-manager{ --accent:var(--blue); --accent-dark:var(--navy); --accent-light:var(--light-blue); --accent-ink:#fff; --accent-glow:rgba(23,70,158,.22); }
body.role-teacher{ --accent:var(--violet); --accent-dark:#5B21B6; --accent-light:var(--violet-light); --accent-ink:#fff; --accent-glow:rgba(124,58,237,.22); }
body.role-student{ --accent:var(--emerald); --accent-dark:#047857; --accent-light:var(--emerald-light); --accent-ink:#fff; --accent-glow:rgba(16,185,129,.22); }
body.role-staff{ --accent:var(--orange); --accent-dark:var(--orange-dark); --accent-light:#FFEEDB; --accent-ink:#fff; --accent-glow:rgba(255,138,31,.22); }

*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);color:var(--text-dark);background:#F6F8FC;}
h1,h2,h3{font-family:var(--font-display);margin:0;color:var(--navy);line-height:1.2;}
a{color:inherit;}
button{font-family:var(--font-body);cursor:pointer;}
.flash{max-width:1240px;margin:16px auto 0;padding:12px 18px;border-radius:var(--radius-sm);font-size:.86rem;font-weight:600;}
.flash-error{background:var(--red-light);color:var(--red);border:1px solid #f6c6c6;}
.flash-ok{background:var(--emerald-light);color:#047857;border:1px solid #b6ecd3;}

/* ---------- login page ---------- */
body.meet-auth{background:radial-gradient(1200px 800px at 12% 8%, #12296b 0%, var(--dark-blue) 46%, #050c1f 100%);min-height:100vh;overflow-x:hidden;position:relative;}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;}
.blob-1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%,var(--blue),transparent 70%);top:-160px;left:-120px;animation:drift1 22s ease-in-out infinite;}
.blob-2{width:460px;height:460px;background:radial-gradient(circle at 30% 30%,var(--gold),transparent 70%);bottom:-180px;right:-100px;animation:drift2 26s ease-in-out infinite;}
.blob-3{width:360px;height:360px;background:radial-gradient(circle at 30% 30%,var(--violet),transparent 70%);top:38%;right:8%;animation:drift3 19s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,30px) scale(1.08);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-35px,-25px) scale(1.1);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-25px,35px) scale(.94);}}
.topbrand{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding:26px 40px;}
.logo-mark-wrap{width:46px;height:46px;min-width:46px;border-radius:var(--radius-sm);background:#fff;padding:4px;flex-shrink:0;box-shadow:var(--shadow-md);overflow:hidden;display:inline-flex;align-items:center;justify-content:center;}
.logo-mark-wrap .logo-mark-img{width:100% !important;height:100% !important;object-fit:contain;border-radius:6px;display:block;}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:.92rem;line-height:1.25;color:#fff;}
.logo-text small{display:block;font-weight:600;font-size:.7rem;color:#9db4e6;}
.meet-tag{margin-left:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#dfe8fb;font-size:.78rem;font-weight:600;padding:8px 16px;border-radius:var(--radius-pill);}
.meet-tag svg{width:15px;height:15px;stroke:var(--gold);}
.stage{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 100px);padding:20px 24px 60px;}
.auth-wrap{display:flex;gap:56px;align-items:center;max-width:1080px;width:100%;}
.pitch{flex:1;color:#fff;}
.pitch h1{font-size:2.3rem;color:#fff;margin-bottom:16px;}
.pitch h1 span{color:var(--gold);}
.pitch p{color:#b9c6e8;font-size:1.02rem;line-height:1.65;max-width:420px;}
.role-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:26px;}
.role-chip{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:10px 16px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:600;color:#e8edf9;text-align:center;line-height:1.3;}
.role-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dot-svc1{background:var(--gold);} .dot-svc2{background:var(--violet);} .dot-svc3{background:var(--blue);} .dot-svc4{background:var(--emerald);} .dot-svc5{background:var(--orange);} .dot-svc6{background:#06B6D4;} .dot-svc7{background:var(--red);}
.card{width:400px;flex-shrink:0;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px 32px 28px;}
.card h2{font-size:1.28rem;margin-bottom:4px;}
.card .sub{color:var(--text-muted);font-size:.85rem;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--text-dark);margin-bottom:6px;}
.input-wrap{position:relative;}
.input-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--blue);}
.input-wrap input{width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.92rem;font-family:var(--font-body);color:var(--text-dark);outline:none;}
.input-wrap input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,70,158,.12);}
.btn-primary{width:100%;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border:none;border-radius:var(--radius-sm);padding:13px;font-size:.95rem;font-weight:700;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;gap:8px;}
.footnote{text-align:center;color:var(--text-muted);font-size:.74rem;margin-top:18px;line-height:1.5;}

/* ---------- dashboard chrome (shared across all roles) ---------- */
.layout{display:flex;min-height:100vh;}
.sidebar{width:225px;flex-shrink:0;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:20px 14px;}
.side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px;}
.side-brand .logo-mark-wrap{width:38px;height:38px;min-width:38px;}
.avatar-photo{border-radius:50%;object-fit:cover;flex-shrink:0;display:block;}
.side-brand .t{font-family:var(--font-display);font-weight:700;font-size:.78rem;line-height:1.3;}
.side-brand .t small{display:block;font-weight:600;color:#9db4e6;font-size:.62rem;}
.nav-label{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7488ac;padding:14px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:600;color:#cdd8f2;margin-bottom:2px;text-decoration:none;border:none;background:none;width:100%;text-align:left;}
.nav-item svg{width:17px;height:17px;flex-shrink:0;}
.nav-item.active{background:var(--accent-glow);color:var(--accent-light);}
.nav-item.active svg{stroke:var(--accent-light);}
.nav-item .count{margin-left:auto;background:rgba(255,255,255,.12);font-size:.66rem;padding:1px 7px;border-radius:var(--radius-pill);}
.main{flex:1;min-width:0;}
.mobile-menu-btn{display:none;background:none;border:none;padding:6px;margin-right:2px;border-radius:var(--radius-sm);flex-shrink:0;}
.mobile-menu-btn svg{width:22px;height:22px;stroke:var(--navy);display:block;}
.sidebar-backdrop{display:none;}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 28px;background:#fff;border-bottom:1px solid var(--border);}
.topbar h1{font-size:1.2rem;}
.topbar .sub{font-size:.8rem;color:var(--text-muted);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.role-badge{background:var(--accent-light);color:var(--accent-dark);font-size:.7rem;font-weight:800;padding:5px 12px;border-radius:var(--radius-pill);}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center;}
.logout-link{font-size:.76rem;font-weight:700;color:var(--text-muted);}
.content{padding:26px 28px 50px;}
.section-title{display:flex;align-items:center;gap:10px;margin:30px 0 14px;}
.section-title:first-child{margin-top:0;}
.section-title h2{font-size:1.02rem;}
.section-title .pill{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat-card{border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-sm);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark));}
.stat-card svg{width:22px;height:22px;opacity:.85;margin-bottom:26px;}
.stat-card.alt{background:linear-gradient(135deg,var(--navy),var(--dark-blue));}
.stat-card.live{background:linear-gradient(135deg,var(--red),#96201d);}
.stat-card .num{font-family:var(--font-display);font-weight:800;font-size:1.7rem;}
.stat-card .lbl{font-size:.76rem;opacity:.9;margin-top:2px;}
.card-box{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
table{width:100%;border-collapse:collapse;font-size:.84rem;}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:12px 18px;border-bottom:1px solid var(--border);}
td{padding:13px 18px;border-bottom:1px solid var(--border);color:var(--text-dark);}
tr:last-child td{border-bottom:none;}
.tag{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);background:var(--accent-light);color:var(--accent-dark);}
.btn{background:var(--navy);color:#fff;border:none;font-size:.74rem;font-weight:700;padding:7px 14px;border-radius:var(--radius-sm);}
.btn-accent{background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff;border:none;font-weight:700;font-size:.86rem;padding:11px 20px;border-radius:var(--radius-sm);}
.btn-outline{background:#fff;border:1.5px solid var(--border);color:var(--text-dark);font-weight:700;font-size:.8rem;padding:8px 16px;border-radius:var(--radius-sm);}
.btn-terminate{background:var(--red-light);color:var(--red);border:1.5px solid #f6c6c6;font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:var(--radius-sm);}
.btn-end-live{background:var(--red-light);color:var(--red);border:1.5px solid #f6c6c6;font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:var(--radius-sm);margin-left:8px;}

/* Shared confirmation popup — used before any destructive action (ending
   someone else's live session, terminating a user, etc.) instead of the
   browser's plain gray confirm() box. */
.confirm-overlay{position:fixed;inset:0;background:rgba(10,20,45,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;}
/* The rule above and the browser's built-in [hidden]{display:none} rule
   have EQUAL CSS specificity, and an author stylesheet always wins that
   tie over the browser's own — so without this line the popup would
   render open the instant the page loads (display:flex beats
   display:none) no matter what the HTML "hidden" attribute says, and
   toggling that attribute back on from JS would do nothing. This next
   rule has higher specificity than both, so the hidden attribute is
   correctly honored again. */
.confirm-overlay[hidden]{display:none;}
.confirm-box{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:380px;width:100%;padding:30px 28px 26px;text-align:center;animation:confirmPop .18s ease;}
@keyframes confirmPop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.confirm-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--red),#F97316);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 10px 24px rgba(220,38,38,.28);}
.confirm-icon svg{width:28px;height:28px;}
.confirm-box h3{font-family:var(--font-display);font-size:1.1rem;color:var(--text-dark);margin:0 0 8px;}
.confirm-box p{font-size:.86rem;color:var(--text-muted);margin:0 0 22px;line-height:1.5;}
.confirm-actions{display:flex;gap:10px;justify-content:center;}
.confirm-cancel{background:#fff;border:1.5px solid var(--border);color:var(--text-dark);font-weight:700;font-size:.84rem;padding:10px 20px;border-radius:var(--radius-sm);}
.confirm-ok{background:linear-gradient(135deg,var(--red),#B91C1C);color:#fff;border:none;font-weight:700;font-size:.84rem;padding:10px 22px;border-radius:var(--radius-sm);box-shadow:0 8px 18px rgba(220,38,38,.3);}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;}
.panel{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:22px;}
.panel h3{font-size:.96rem;margin-bottom:14px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-x label{display:block;font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em;}
.field-x input,.field-x select{width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.84rem;font-family:var(--font-body);color:var(--text-dark);}
.field-x.full{grid-column:1/-1;}
.role-fields{grid-column:1/-1;border-radius:var(--radius-sm);padding:14px;margin-top:2px;display:none;}
.role-fields.show{display:block;}
.role-fields.teacher{background:var(--violet-light);}
.role-fields.student{background:var(--emerald-light);}
.role-fields .tagline{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;display:block;}
.role-fields.teacher .tagline{color:var(--violet);}
.role-fields.student .tagline{color:#047857;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.mini-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.mini-row:last-child{border-bottom:none;padding-bottom:0;}
.mini-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);font-weight:700;font-size:.74rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mini-row .name{font-size:.84rem;font-weight:700;}
.mini-row .meta{font-size:.72rem;color:var(--text-muted);}
.progress-track{height:9px;border-radius:var(--radius-pill);background:var(--border);overflow:hidden;margin:8px 0 4px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-dark),var(--accent));border-radius:var(--radius-pill);}
.empty-note{color:var(--text-muted);font-size:.84rem;padding:20px;text-align:center;}

@media (max-width:880px){
  .auth-wrap{flex-direction:column;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .two-col{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}

  /* ---------- mobile: sidebar becomes a slide-in drawer, not a fixed
     225px column eating into the content area ---------- */
  .layout{position:relative;}
  .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow-lg);
    width:240px;
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(7,20,51,0);
    pointer-events:none;transition:background .22s ease;z-index:55;
  }
  .sidebar-backdrop.show{background:rgba(7,20,51,.45);pointer-events:auto;}
  .main{width:100%;min-width:0;}
  .topbar{padding:14px 16px;gap:8px;}
  .topbar h1{font-size:1.04rem;}
  .topbar .sub{font-size:.74rem;}
  .content{padding:16px 14px 40px;}
}

@media (max-width:560px){
  .stats-row{grid-template-columns:1fr;}
  .topbar-right{gap:6px;}
  .role-badge{display:none;}
  .card{width:100%;}
  .auth-wrap{gap:24px;}
}