:root{--bg:#f5f7fb;--panel:#ffffff;--card:#ffffff;--muted:#6b7280;--text:#0f172a;--brand:#2563eb;--brand-contrast:#ffffff;--danger:#dc2626;--success:#16a34a;--border:#e5e7eb}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(90deg,#1e3a8a,#2563eb);border-bottom:1px solid #1d4ed8}
.brand{font-weight:600;color:#eef2ff}
.topbar nav a{color:#e5e7eb;text-decoration:none;margin-left:16px;padding:6px 8px;border-radius:8px}
.topbar nav a.active{background:rgba(255,255,255,0.18);color:#ffffff}
.page{padding:16px}
.panel{max-width:1400px;margin:0 auto}
.row{display:flex;gap:8px}
.space-between{justify-content:space-between}
.center{align-items:center}
.right{justify-content:flex-end}
.flex1{flex:1}
.mt{margin-top:12px}.mt-sm{margin-top:8px}
input,select,button{background:#ffffff;border:1px solid #cbd5e1;color:var(--text);padding:10px 12px;border-radius:8px}
input::placeholder{color:#6b7280}
input:focus,select:focus{outline:3px solid #bfdbfe;border-color:#60a5fa}
.btn{background:var(--brand);border:1px solid var(--brand);color:var(--brand-contrast);font-weight:600;cursor:pointer}
.btn.secondary{background:#f3f4f6;border:1px solid var(--border);color:#111827}
.btn.secondary.tab{background:#f3f4f6;border:1px solid var(--border);color:#111827}
.btn.secondary.tab.active{background:#2563eb;color:#fff}
#page-people .btn.secondary{background:var(--brand);border:1px solid var(--brand);color:var(--brand-contrast);font-weight:600}
.btn.pending{background:#fffbeb;border:1px solid #f59e0b;color:#92400e}
.btn.pending:hover{background:#fef3c7;border-color:#d97706}
.btn.pending:focus{outline:3px solid #fde68a}
.btn:disabled{opacity:.6;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.table th{color:#111827;font-weight:600;background:#f3f4f6}
/* Tenant Settings: subtle grouping (no borders) */
.table th.banner-col, .table td.banner-col { border-left: none; }
.table th.banner-col.b3, .table td.banner-col.b3 { border-right: none; }
/* Keep header default background; apply very light tint to body cells only */
.table td.banner-col.b1 { background:#fafafa; }
.table td.banner-col.b2 { background:#f9fafb; }
.table td.banner-col.b3 { background:#f8fafc; }
.badge{padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid transparent}
.badge.active{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.badge.inactive{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.toggle{display:inline-block;width:34px;height:18px;border-radius:999px;background:#e5e7eb;position:relative;vertical-align:middle;cursor:pointer;border:1px solid var(--border)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#9ca3af;transition:left .18s ease}
.toggle.on{background:#dbeafe;border-color:#93c5fd}
.toggle.on::after{left:18px;background:#2563eb}
.muted{color:var(--muted)}
/* Send PIN button hover effect - outlined style */
#btnSendPin:hover {
  background: #eff6ff !important;
  border-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
}
#btnSendPin:active {
  transform: translateY(0);
  background: #dbeafe !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Hide protected links before login; reveal after auth */
nav a.protected{display:none; pointer-events:none; opacity:.0}
body.authed nav a.protected{display:inline-block; pointer-events:auto; opacity:1}
/* Authless links visible when logged out; hide them after login */

/* Registration Split-Screen Layout */
.registration-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.registration-image {
  flex: 1.5;
  background: url('/admin/assets/symphora-image.png') center/cover no-repeat;
  min-height: 100vh;
}

.registration-form {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  position: relative;
  max-width: 600px;
}

/* Auth Navigation Links - Top Right */
.auth-nav-links {
  position: absolute;
  top: 32px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.auth-link {
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.auth-link:hover {
  color: #2563eb;
}

.auth-link.active {
  color: #2563eb;
  font-weight: 600;
}

.auth-separator {
  color: #d1d5db;
  font-weight: 300;
}

/* Login Tab Styling - Less blue, more subtle */
.login-tab {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-tab:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

.login-tab.active {
  background: #ffffff;
  border: 2px solid #2563eb;
  color: #2563eb;
  font-weight: 600;
}

/* Hide topbar on registration and login pages */
body.hide-topbar .topbar {
  display: none !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .registration-container {
    flex-direction: column;
    position: relative;
  }
  .registration-image {
    min-height: 200px;
  }
  .registration-form {
    padding: 24px;
    padding-top: 70px;
  }
  .auth-nav-links {
    top: 20px;
    right: 24px;
    font-size: 14px;
  }
}
body.authed nav a.authless{display:none}
/* Super Admin: ONLY show Training Management and Tenant Management */
body.super-admin nav a.protected{display:none !important; pointer-events:none !important; opacity:0 !important}
body.super-admin nav a.protected#nav-training{display:inline-block !important; pointer-events:auto !important; opacity:1 !important}
/* Employee: hide all admin navigation items (critical security) - MUST BE FIRST */
body.employee-portal nav a.protected{display:none !important; pointer-events:none !important; opacity:0 !important}
body.employee-portal nav a.protected#nav-company-details{display:none !important; pointer-events:none !important; opacity:0 !important}
/* Company Admin: Hide Tenant Management, show Company Details */
body.authed:not(.super-admin):not(.employee-portal) nav a.protected#nav-tenant-management{display:none !important; pointer-events:none !important; opacity:0 !important}
body.authed:not(.super-admin):not(.employee-portal) nav a.protected#nav-company-details{display:inline-block !important; pointer-events:auto !important; opacity:1 !important}
/* Super Admin: Hide Company Details */
body.super-admin nav a.protected#nav-company-details{display:none !important; pointer-events:none !important; opacity:0 !important}
body.super-admin nav a.protected#nav-tenant-management{display:inline-block !important; pointer-events:auto !important; opacity:1 !important}
/* modal */
dialog{border:0;border-radius:12px;padding:0;background:transparent}
dialog::backdrop{background:rgba(0,0,0,0.5)}
.modal{background:var(--panel);padding:16px 16px 12px;border:1px solid var(--border);border-radius:12px;min-width:560px}
.modal h3{margin:0 0 12px}
/* Div-based modal overlay */
#dataQualityModal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
#dataQualityModal .modal-content{
  background:var(--panel);
  border-radius:12px;
  padding:24px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
/* Global grids used across admin pages */
.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:10px}
.grid-1{grid-template-columns:1fr}
/* Quiz-specific grids (for isolation when needed) */
.quiz-grid{display:grid;grid-template-columns:1fr;gap:10px}
.quiz-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* existing styles above */

/* Quiz redesign (scoped) */
#quizDialog .quiz-progress { height: 6px; background:#e5e7eb; border-radius:4px; overflow:hidden; }
#quizDialog .quiz-progress > .bar { height:100%; background:#2563eb; transition:width .25s ease; }
#quizDialog .quiz-question{font-size:18px; line-height:1.5; font-weight:700; color:#0f172a}
#quizDialog .option-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
#quizDialog .option-card:hover { border-color:#93c5fd; background:#f8fafc; }
#quizDialog .option-card input[type="checkbox"] { transform: scale(1.2); }
#quizDialog .option-card label{font-size:15px}
#quizDialog .quiz-footer { display:flex; justify-content:flex-end; gap:8px; padding-top:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:#f3f4f6; color:#374151; font-size:12px; border:1px solid #e5e7eb; }
.banner{margin-top:10px;padding:10px 12px;border-radius:8px;border:1px solid #bbf7d0;background:#ecfdf5;color:#065f46;display:block}

/* Modern gradient header (scoped) */
#quizDialog .quiz-ribbon{height:10px;border-radius:10px;background:linear-gradient(90deg,#1d4ed8,#60a5fa);margin-bottom:10px}
#quizDialog .quiz-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;font-size:12px}
/* Option cards with hover ring and selected state (scoped) */
#quizDialog .option-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
#quizDialog .option-card:hover{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(147,197,253,0.35)}
#quizDialog .option-card.selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,0.25)}

/* Login layout fixes */
#cardEmpLogin, #cardAdminLogin { padding:16px; }
#cardEmpLogin .grid, #cardAdminLogin .grid { max-width:420px; }
#cardEmpLogin input, #cardAdminLogin input { width:100%; }
#cardEmpLogin .row.right, #cardAdminLogin .row.right { max-width:420px; }

/* Register/Activate layout: single-column, stacked labels */
#page-register .card, #page-activate .card { max-width:640px; margin: 0 auto; }
#page-register .grid, #page-activate .grid {
  display:grid; gap:10px; max-width:560px; margin: 0 auto;
  grid-template-columns: 1fr;
}
#page-register label, #page-activate label { display:block; }
#page-register label > input, #page-activate label > input { display:block; width:100%; margin-top:6px; }
#page-register .form-section, #page-activate .form-section { margin: 8px 0 4px; }
#page-register .row.right, #page-activate .row.right { max-width:560px; margin: 8px auto 0; }

/* Smaller inline action for Activate screen */
#page-activate #btnSendCode{
  padding:6px 10px; font-size:12px; height:36px; line-height:1.2;
  white-space:nowrap; align-self:end;
}

/* Hide Upload Review for non-super-admins by default */
body:not(.super-admin) #nav-upload,
body:not(.super-admin) #quickUpload { display:none !important; }

/* Choices.js multi-select styling fixes */
.choices {
  margin-bottom: 0;
  font-size: 14px;
}

.choices__inner {
  background: #ffffff !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.choices__inner:focus {
  outline: 3px solid #bfdbfe;
  border-color: #60a5fa;
}

/* Placeholder styling - darker like regular select */
.choices__input::placeholder {
  color: #0f172a !important;
  opacity: 1;
}

.choices__placeholder {
  color: #0f172a !important;
  opacity: 1;
}

.choices[data-type*="select-multiple"] .choices__inner {
  padding: 6px 8px;
}

.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.choices__list--multiple .choices__item {
  background: #2563eb;
  border: 1px solid #1d4ed8;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
}

.choices__input {
  min-width: 80px;
  color: #0f172a;
}

.choices__list--dropdown {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  min-width: 250px !important;
  width: auto !important;
}

.choices__list--dropdown .choices__item--selectable {
  padding: 10px 12px;
  font-size: 14px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: #dbeafe;
  color: #1e40af;
}

/* Filter row spacing and alignment */
#page-people .card .row.gap {
  align-items: center !important;
  display: flex !important;
}

/* Force all filter elements to align */
#page-people .choices,
#page-people select {
  vertical-align: middle;
  margin: 0;
  align-self: center;
}

/* Make all inputs same height */
#page-people input,
#page-people select,
#page-people .choices {
  height: 44px !important;
}

#page-people .choices__inner {
  min-height: 44px !important;
  height: 44px !important;
  line-height: 1.4;
}

/* Prevent wrapping in selected items */
#page-people .choices__list--multiple .choices__item {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}