:root {
  --primary: #c62828;
  --primary-dark: #8e0000;
  --primary-light: #ff5f52;
  --sidebar-width: 240px;
  --header-height: 60px;
}

* { box-sizing: border-box; }

/* The page's scrollbar lane is ALWAYS reserved, so a short page and a tall page have the same width and the content never slides sideways when
   the scrollbar appears or disappears (or when a modal locks scrolling). */
html { scrollbar-gutter: stable; }

body {
  margin: 0;            /* the browser's default 8px margin put content at 248px instead of 240px and made every page 16px taller than the screen */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  background: #f4f6f9;
  color: #333;
  min-height: 100vh;
}

/* ── LOGIN ─────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #8e0000 50%, #c62828 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-logo .logo-icon {
  font-size: 3rem;
  color: var(--primary);
}

.login-logo h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0.5rem 0 0.2rem;
}

.login-logo p {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

/* ── LAYOUT ─────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;          /* when the menu is taller than the window it scrolls on its own... */
  scrollbar-gutter: stable;       /* ...and its lane is always reserved, so links keep one width whether or not it scrolls */
  overscroll-behavior: contain;
}

.sidebar-header {
  padding: 1.25rem 1rem;
  background: #000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-height);
}

.sidebar-header .brand-icon { font-size: 1.5rem; color: var(--primary-light); }
.sidebar-header .brand-name { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sidebar-header .brand-sub { font-size: 0.7rem; color: #aaa; }

.sidebar-nav { flex: 1; padding: 0.5rem 0; }

.nav-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  padding: 1rem 1rem 0.25rem;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sidebar-nav a.active { color: #fff; background: rgba(198,40,40,0.25); border-left-color: var(--primary); }
.sidebar-nav a i { width: 18px; text-align: center; }

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid #333;
  font-size: 0.82rem;
  color: #888;
}

/* Main content */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;        /* a flex child never shrinks below its content by default: a wide table made Customers 1640px wide and the whole page scroll sideways */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  height: var(--header-height);
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar-title { font-size: 1.1rem; font-weight: 600; color: #222; }

.topbar-right { display: flex; align-items: center; gap: 1rem; }

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #333;
  padding: 0.25rem;
  min-width: 44px;
  min-height: 44px;
}

/* Bell notifications */
.notif-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.notif-btn:hover { background: #f5f5f5; }

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none;
  max-height: 420px;
  overflow-y: auto;
}

.notif-dropdown.show { display: block; }
.notif-header { padding: 0.75rem 1rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.9rem; }
.notif-item { padding: 0.75rem 1rem; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.15s; font-size: 0.85rem; }
.notif-item:hover { background: #fafafa; }
.notif-item.unread { background: #fff8f8; border-left: 3px solid var(--primary); }
.notif-time { font-size: 0.75rem; color: #999; margin-top: 2px; }

/* Page content */
.page-content { padding: 1.5rem; flex: 1; }

/* Cards */
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid var(--primary);
  min-height: 80px;
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(198,40,40,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--primary);
  flex-shrink: 0;
}

.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: 0.8rem; color: #777; margin-top: 2px; }

.stat-card.green { border-left-color: #2e7d32; }
.stat-card.green .stat-icon { background: rgba(46,125,50,0.1); color: #2e7d32; }
.stat-card.orange { border-left-color: #e65100; }
.stat-card.orange .stat-icon { background: rgba(230,81,0,0.1); color: #e65100; }
.stat-card.blue { border-left-color: #1565c0; }
.stat-card.blue .stat-icon { background: rgba(21,101,192,0.1); color: #1565c0; }

/* Data card */
.data-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}

.data-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.data-card-title { font-weight: 600; font-size: 0.95rem; }
.data-card-body { padding: 1.25rem; }

/* Tables */
.table-responsive { overflow-x: auto; }

.app-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.app-table th { background: #f8f8f8; font-weight: 600; color: #555; padding: 0.75rem 1rem; text-align: left; border-bottom: 2px solid #e8e8e8; white-space: nowrap; }
.app-table td { padding: 0.7rem 1rem; border-bottom: 1px solid #f2f2f2; vertical-align: middle; }
.app-table tr:last-child td { border-bottom: none; }
.app-table tbody tr:hover { background: #fafafa; }

/* Badges */
.badge-status {
  display: inline-block;
  padding: 0.3em 0.7em;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.badge-active { background: #e8f5e9; color: #2e7d32; }
.badge-overdue { background: #ffebee; color: #c62828; }
.badge-expired { background: #f5f5f5; color: #757575; }
.badge-trial { background: #e3f2fd; color: #1565c0; }
.badge-attended { background: #e8f5e9; color: #2e7d32; }
.badge-sick { background: #fff3e0; color: #e65100; }
.badge-not-attended { background: #f5f5f5; color: #757575; }
.badge-lead { background: #fff8e1; color: #b45309; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  text-decoration: none;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-danger { background: #c62828; color: #fff; }
.btn-danger:hover { background: #8e0000; }
.btn-success { background: #2e7d32; color: #fff; }
.btn-success:hover { background: #1b5e20; }
.btn-secondary { background: #757575; color: #fff; }
.btn-secondary:hover { background: #424242; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; min-height: 36px; }
.btn-icon { padding: 0.35rem; border-radius: 6px; }

/* Form controls */
.form-control, .form-select {
  display: block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
}

.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(198,40,40,0.15);
}

.form-label { display: block; font-size: 0.85rem; font-weight: 600; color: #555; margin-bottom: 0.3rem; }
.form-group { margin-bottom: 1rem; }

/* Search bar */
.search-bar {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.search-bar input {
  padding-left: 2.5rem;
}

.search-bar .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none;
}

/* Attendance specific */
.attendance-checkbox {
  width: 40px;
  height: 40px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.attendance-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.customer-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid #f0f0f0; }
.customer-row:last-child { border-bottom: none; }
.customer-row:hover { background: #fafafa; }
.customer-row.blocked { background: #fff8f8; }

.customer-info { flex: 1; min-width: 0; }
.customer-name { font-weight: 600; font-size: 0.95rem; }
.customer-meta { font-size: 0.78rem; color: #777; margin-top: 1px; }

.red-badge {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
  padding: 0.2em 0.6em;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.attendance-status-select {
  font-size: 0.875rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-height: 44px;
  min-width: 140px;
  background: #fff;
}

.attendance-status-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Calendar */
.fc .fc-button-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.fc .fc-button-primary:hover {
  background-color: var(--primary-dark) !important;
}
.fc-event { border-radius: 4px !important; font-size: 0.8rem !important; cursor: pointer; }
.fc-daygrid-event { padding: 2px 4px !important; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.show { display: flex; }

.modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: slideUp 0.25s ease;

  /* The box itself must not scroll. When it did, the footer scrolled with the
     content: on a short viewport the action buttons ("Cancel Package", "Save")
     rendered below the fold inside the scroll container, so they were unclickable
     unless you knew to scroll INSIDE the modal. Only the body scrolls now, and
     the header and footer stay put. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;   /* stays put while the body scrolls */
}

.modal-title { font-size: 1rem; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #888; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #f5f5f5; color: #333; }
/* Only the body scrolls; header and footer are pinned so the actions are always
   reachable regardless of how tall the content is. */
.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;          /* narrow screens: wrap rather than overflow sideways */
  background: #fff;
  border-radius: 0 0 14px 14px;
}

/* Loading */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  display: none;
}

.loading-overlay.show { display: flex; }

.spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #f3f3f3;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: #333;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.875rem;
  min-width: 260px;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: slideIn 0.25s ease;
}

.toast.success { background: #2e7d32; }
.toast.error { background: #c62828; }
.toast.warning { background: #e65100; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Coach layout – bottom tab bar */
.coach-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.coach-topbar {
  background: #1a1a1a;
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.coach-topbar .brand { font-weight: 700; font-size: 1rem; color: var(--primary-light); }
.coach-topbar .user-name { font-size: 0.85rem; color: #ccc; }

.coach-content { flex: 1; padding: 1rem; padding-bottom: 80px; }

.coach-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  display: flex;
  z-index: 1000;
  border-top: 1px solid #333;
}

.coach-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  color: #888;
  text-decoration: none;
  font-size: 0.7rem;
  gap: 0.25rem;
  min-height: 60px;
  transition: color 0.2s;
}

.coach-tab i { font-size: 1.2rem; }
.coach-tab.active { color: var(--primary-light); }
.coach-tab:hover { color: #ccc; }

/* Utilities */
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 0.25rem; }
.text-muted { color: #888; font-size: 0.82rem; }
.text-danger { color: #c62828; }
.text-success { color: #2e7d32; }
.fw-600 { font-weight: 600; }
.w-100 { width: 100%; }

/* Alert */
.alert {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alert-danger { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.alert-warning { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.alert-info { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }

/* Session info card */
.session-info-card {
  background: linear-gradient(135deg, #1a1a1a, #8e0000);
  color: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.session-info-card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.session-info-card .meta { font-size: 0.85rem; opacity: 0.8; }

/* Select all bar */
.select-all-bar {
  background: #fff;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Offline banner ─────────────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  background: #b71c1c;
  color: #fff;
  text-align: center;
  padding: .55rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

@keyframes notifPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.45); background: #ff5f52; }
  100% { transform: scale(1); }
}
.notif-badge.notif-pulse { animation: notifPulse .5s ease; }

/* Commission page */
.commission-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  padding: 1.25rem;
  border-left: 4px solid var(--primary);
  transition: box-shadow .2s;
  cursor: pointer;
}
.commission-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.commission-name   { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; }
.commission-pct    { font-size: .78rem; color: #888; }
.commission-amount { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.commission-sub    { font-size: .78rem; color: #777; }
.month-bar-wrap { display: flex; gap: 2px; align-items: flex-end; height: 32px; margin-top: .5rem; }
.month-bar { flex: 1; background: rgba(198,40,40,.25); border-radius: 2px 2px 0 0; min-height: 3px; transition: background .15s; }
.month-bar:hover { background: var(--primary); }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .hamburger-btn { display: flex; }
  .sidebar-overlay { display: block; }
}

/* The dark area behind the open menu drawer (tablet / phone): shown only while the drawer is open (.show, set by initSidebar), never on desktop.
   It used to be display:none !important at every width, so tapping outside the drawer could never close it. */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
@media (max-width: 1024px) {
  .sidebar-overlay.show { display: block; }
}
@media (min-width: 1025px) {
  .sidebar-overlay, .sidebar-overlay.show { display: none; }
}

/* A modal (or the open drawer) holds the page still. The scrollbar lane is reserved above, so locking scroll moves nothing. */
body.modal-open { overflow: hidden; }

/* ── SIDEBAR GROUPS (one menu for every page: scripts/maintenance/sync-nav.js) ─────────────────────────── */
.sidebar-nav .nav-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sidebar-nav .nav-group > summary::-webkit-details-marker { display: none; }
.sidebar-nav .nav-group > summary:hover { color: #ddd; }
.sidebar-nav .nav-group > summary:focus-visible { outline: 2px solid #1565c0; outline-offset: -2px; }
/* A drawn chevron (not an icon font): fixed size, so nothing shifts while fonts load. */
.sidebar-nav .nav-group > summary::after {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-right: 2px solid #888; border-bottom: 2px solid #888;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.sidebar-nav .nav-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.sidebar-nav .nav-group > summary.has-active { color: #fff; }

/* Role-aware menu (scripts/maintenance/sync-nav.js): a Receptionist sees only the items they may use. Cosmetic: pages and APIs enforce roles themselves. */
html[data-role="receptionist"] .sidebar-nav [data-roles="admin"] { display: none; }
.sidebar-nav .nav-receptionist-only { display: none; }
html[data-role="receptionist"] .sidebar-nav .nav-receptionist-only { display: flex; }

/* ── Level Progress panel (public/js/utils.js#renderLevelPanel) ─────────────────────────────────
   Shared by the Admin customer record and the Coach student record — one CSS definition, one JS
   renderer, so the two portals can never drift into showing different badge layouts for the same
   customer even though the data underneath is already guaranteed identical. */
.detail-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }

.lvl-panel { border: 1px solid #e0e0e0; border-radius: 10px; padding: 1rem; background: #fafafa; }
.lvl-panel-title { font-weight: 700; font-size: 1rem; margin-bottom: .9rem; color: #222; }
.lvl-year-row { display: flex; gap: .6rem; align-items: center; margin-bottom: .9rem; }
.lvl-year-row:last-of-type { margin-bottom: 0; }
.lvl-year-label { writing-mode: horizontal-tb; font-size: .68rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .03em; width: 42px; flex-shrink: 0; text-align: center; }
.lvl-badges { display: flex; gap: .5rem; flex: 1; flex-wrap: wrap; }
.lvl-badge-wrap { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 56px; }
.lvl-badge { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; position: relative; background-size: cover; background-position: center; flex-shrink: 0; }
.lvl-badge.achieved { border-color: #2e7d32; }
.lvl-badge.current { border-color: #1565c0; border-width: 3px; box-shadow: 0 0 0 3px rgba(21,101,192,.18); }
.lvl-badge.future { filter: grayscale(1) opacity(.55); }
.lvl-badge-check { position: absolute; bottom: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%; background: #2e7d32; color: #fff; font-size: .6rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fafafa; }
.lvl-badge-tag { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: center; line-height: 1.15; }
.lvl-badge-tag.achieved { color: #2e7d32; }
.lvl-badge-tag.current { color: #1565c0; }
.lvl-badge-tag.future { color: #999; }
.lvl-next-card { margin-top: 1rem; padding: .75rem; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; }
.lvl-next-bar { height: 9px; background: #eee; border-radius: 5px; overflow: hidden; margin: .4rem 0; }
.lvl-next-bar > div { height: 100%; background: #1565c0; }
.lvl-next-bar.eligible > div { background: #2e7d32; }
.lvl-history-list { margin-top: .75rem; font-size: .82rem; }
.lvl-history-row { display: flex; justify-content: space-between; padding: .4rem 0; border-top: 1px solid #eee; }
.lvl-sport-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.lvl-sport-tab { font-size: .72rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.lvl-sport-tab.active { background: #1565c0; color: #fff; border-color: #1565c0; }

@media (max-width: 760px) {
  .detail-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .page-content { padding: 1rem; }
  .stat-card .stat-value { font-size: 1.3rem; }
  .data-card-header { flex-direction: column; align-items: flex-start; }
  .search-bar { max-width: 100%; }
  .modal-box { border-radius: 14px 14px 0 0; max-height: 95vh; margin: 0; align-self: flex-end; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .notif-dropdown { width: 90vw; right: -50px; }
}

@media (max-width: 480px) {
  .btn { min-height: 44px; }
  .topbar { padding: 0 0.75rem; }
  .app-table th, .app-table td { padding: 0.6rem 0.75rem; }
  .login-card { padding: 1.75rem; }
  /* Attendance toolbar: let the search box take the full width below the buttons */
  .select-all-bar .search-bar { flex: 1 0 100% !important; max-width: 100% !important; order: 3; }
  .select-all-bar #attendCount { order: 4; }
}