/* =============================================================================
   Portal shell: student / teacher / admin dashboards
   ========================================================================== */

body.portal {
  --sidebar-w: 264px;
  background: var(--ivory);
  min-height: 100dvh;
}
.portal-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }

/* ------------------------------------------------------------- sidebar --- */

.portal-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--green-900), var(--green-950));
  color: rgba(255, 255, 255, 0.78);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: var(--z-drawer);
}
.portal-sidebar .brand { padding: 1.15rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.portal-sidebar .brand-name { color: #fff; font-size: 0.98rem; }
.portal-sidebar .brand-tag { color: var(--gold-400); }
.side-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) 0.75rem var(--space-5); scrollbar-width: thin; }
.side-group + .side-group { margin-top: var(--space-5); }
.side-group-title {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700;
  color: rgba(255, 255, 255, 0.42); padding: 0 0.7rem; margin-bottom: 0.5rem;
}
.side-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.62rem 0.7rem; border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  font-size: var(--text-base); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.side-link svg { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.side-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.side-link[aria-current='page'] {
  background: rgba(217, 174, 56, 0.16);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--gold-500);
}
.side-link[aria-current='page'] svg { opacity: 1; color: var(--gold-400); }
.side-count {
  margin-left: auto; min-width: 22px; height: 20px; padding-inline: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--gold-600); color: #201703;
  font-size: 0.7rem; font-weight: 800;
}
.side-foot { padding: var(--space-4) 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.side-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; min-width: 0; }
.side-user .who { min-width: 0; }
.side-user .name { color: #fff; font-weight: 650; font-size: var(--text-sm); }
.side-user .role { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.55); }

.sidebar-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: rgba(4, 25, 18, 0.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------- topbar --- */

.portal-main { display: flex; flex-direction: column; min-width: 0; }
.portal-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0.75rem clamp(1rem, 0.7rem + 1.4vw, 2rem);
  min-height: 68px;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.portal-title { min-width: 0; }
.portal-title h1 { font-size: var(--text-xl); line-height: 1.2; }
.portal-title p { font-size: var(--text-sm); color: var(--text-muted); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.sidebar-toggle { display: none; }

.icon-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700); border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--primary-strong); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger-700); border: 2px solid var(--ivory);
}

.portal-body { padding: clamp(1.1rem, 0.8rem + 1.4vw, 2rem); display: flex; flex-direction: column; gap: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); }

.dropdown { position: relative; }
.dropdown-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 50; overflow: hidden;
  animation: modal-in 180ms var(--ease-out);
}
.dropdown-panel[hidden] { display: none; }
.dropdown-head { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.dropdown-head h4 { font-family: var(--font-body); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.dropdown-list { max-height: 60dvh; overflow-y: auto; }
.dropdown-item { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover { background: var(--green-50); }
.dropdown-item .t { font-weight: 650; font-size: var(--text-base); }
.dropdown-item .m { font-size: var(--text-sm); color: var(--text-muted); }
.dropdown-item .when { font-size: var(--text-xs); color: var(--text-soft); margin-top: 0.2rem; }
.dropdown-item.is-unread { background: color-mix(in srgb, var(--gold-100) 55%, transparent); }
.dropdown-foot { padding: 0.6rem 1rem; background: var(--bg-alt); text-align: center; font-size: var(--text-sm); }

@media (max-width: 1024px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(84vw, var(--sidebar-w));
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .portal-sidebar { transform: none; }
  .sidebar-toggle { display: inline-flex; }
}

/* ---------------------------------------------------------- stat cards --- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: var(--space-4); }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 0.35rem; position: relative; overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--green-600), var(--green-800));
}
.stat-card.tone-gold::after { background: linear-gradient(180deg, var(--gold-500), var(--gold-700)); }
.stat-card.tone-danger::after { background: linear-gradient(180deg, #d9534a, var(--danger-700)); }
.stat-card.tone-info::after { background: linear-gradient(180deg, #4a80e0, var(--info-700)); }
.stat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; }
.stat-value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-note { font-size: var(--text-sm); color: var(--text-muted); }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat-head .icon-badge { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.stat-head .icon-badge svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- panel --- */

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.panel-head h2, .panel-head h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.005em; }
.panel-head p { font-size: var(--text-sm); color: var(--text-muted); }
.panel-body { padding: var(--space-5); }
.panel-body-flush { padding: 0; }
.panel-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--bg-alt); font-size: var(--text-sm); }
.panel-grid { display: grid; gap: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); }
.panel-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.panel-grid-sidebar { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .panel-grid-sidebar { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- toolbar ----- */

.toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); background: var(--bg-alt);
}
.toolbar .input, .toolbar .select { min-height: 40px; padding-block: 0.5rem; }
.search-field { position: relative; flex: 1 1 220px; max-width: 340px; }
.search-field .input { padding-left: 2.35rem; }
.search-field svg {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-soft); pointer-events: none;
}
.filter-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.result-count { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; }

/* --------------------------------------------------------- list rows ---- */

.list-rows { display: flex; flex-direction: column; }
.list-row {
  display: flex; gap: var(--space-4); align-items: center;
  padding: 0.9rem var(--space-5); border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-fast) var(--ease);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--green-50); }
.list-row .main { min-width: 0; flex: 1 1 auto; }
.list-row .title { font-weight: 650; }
.list-row .meta { font-size: var(--text-sm); color: var(--text-muted); }
.list-row .side { text-align: right; flex: none; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }

.kv { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 0.55rem 1.25rem; font-size: var(--text-base); }
.kv dt { color: var(--text-muted); font-weight: 600; }
.kv dd { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 0.15rem; } .kv dd { margin-bottom: 0.55rem; } }

/* ------------------------------------------------------------- charts --- */

.chart-wrap { position: relative; width: 100%; }
.chart-wrap svg { width: 100%; height: auto; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.chart-empty { padding: var(--space-7) var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }

.donut-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.donut-wrap svg { width: 148px; height: 148px; flex: none; }
.donut-center { font-family: var(--font-display); font-weight: 600; }

.bar-list { display: flex; flex-direction: column; gap: var(--space-4); }
.bar-item .bar-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); margin-bottom: 0.35rem; }
.bar-track { height: 9px; border-radius: var(--radius-pill); background: var(--ivory-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-600), var(--green-800)); }
.bar-fill.tone-gold { background: linear-gradient(90deg, var(--gold-500), var(--gold-700)); }
.bar-fill.tone-danger { background: linear-gradient(90deg, #d9534a, var(--danger-700)); }
.bar-fill.tone-info { background: linear-gradient(90deg, #5b8ce8, var(--info-700)); }

/* ---------------------------------------------------- attendance grid --- */

.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; }
.att-cell {
  aspect-ratio: 1; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: var(--text-soft);
  background: var(--ivory-2); border: 1px solid var(--border);
}
.att-cell.is-present { background: var(--success-100); color: var(--success-700); border-color: rgba(15, 122, 79, 0.3); }
.att-cell.is-absent { background: var(--danger-100); color: var(--danger-700); border-color: rgba(179, 38, 30, 0.3); }
.att-cell.is-late { background: var(--warning-100); color: var(--warning-700); border-color: rgba(163, 90, 6, 0.3); }
.att-cell.is-leave { background: var(--info-100); color: var(--info-700); border-color: rgba(26, 86, 196, 0.28); }

.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--ivory-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.seg button {
  padding: 0.32rem 0.75rem; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.seg button:hover { color: var(--ink-800); }
.seg button[aria-pressed='true'] { background: var(--surface); color: var(--primary-strong); box-shadow: var(--shadow-xs); }
.seg-att button[aria-pressed='true'][data-status='Present'] { background: var(--success-700); color: #fff; }
.seg-att button[aria-pressed='true'][data-status='Absent'] { background: var(--danger-700); color: #fff; }
.seg-att button[aria-pressed='true'][data-status='Late'] { background: var(--warning-700); color: #fff; }
.seg-att button[aria-pressed='true'][data-status='Leave'] { background: var(--info-700); color: #fff; }

/* ------------------------------------------------------------- class ---- */

.class-card {
  display: flex; gap: var(--space-4); align-items: center;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.class-when {
  flex: none; width: 62px; text-align: center;
  border-right: 1px solid var(--border); padding-right: var(--space-4);
}
.class-when .d { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.class-when .m { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; }
.class-live { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(20, 135, 92, 0.12); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0483c; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

.meet-frame {
  width: 100%; aspect-ratio: 16 / 9; min-height: 380px;
  border: 0; border-radius: var(--radius-md); background: #0c1512; display: block;
}
.meet-shell { border-radius: var(--radius-md); overflow: hidden; background: #0c1512; }

/* --------------------------------------------------------------- chat --- */

.chat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; height: calc(100dvh - 68px - 2 * clamp(1.1rem, 0.8rem + 1.4vw, 2rem)); }
.chat-aside { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.chat-people { overflow-y: auto; flex: 1 1 auto; }
.chat-person {
  display: flex; gap: 0.65rem; align-items: center; width: 100%; text-align: left;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer;
}
.chat-person:hover { background: var(--green-50); }
.chat-person.is-active { background: var(--green-100); box-shadow: inset 2px 0 0 var(--green-700); }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.7rem; }
.chat-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: 0.7rem; background: var(--bg-alt); }
.bubble {
  max-width: min(74%, 560px); padding: 0.6rem 0.9rem; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border); font-size: var(--text-base); line-height: 1.55;
  box-shadow: var(--shadow-xs); overflow-wrap: anywhere;
}
.bubble .when { font-size: 0.68rem; color: var(--text-soft); margin-top: 0.25rem; }
.bubble-mine { margin-left: auto; background: var(--green-800); color: #fff; border-color: var(--green-800); }
.bubble-mine .when { color: rgba(255, 255, 255, 0.6); }
.chat-day { align-self: center; font-size: var(--text-xs); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.15rem 0.7rem; }
.chat-compose { padding: 0.75rem 1rem; border-top: 1px solid var(--border); display: flex; gap: 0.6rem; align-items: flex-end; background: var(--surface); }
.chat-compose .textarea { min-height: 44px; max-height: 140px; resize: none; }
@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  .chat-aside { border-right: 0; border-bottom: 1px solid var(--border); max-height: 220px; }
  .chat-scroll { min-height: 45dvh; }
}

/* ------------------------------------------------------------ receipt --- */

.receipt {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); max-width: 720px; margin-inline: auto;
}
.receipt-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; padding-bottom: var(--space-4); border-bottom: 2px solid var(--green-800); flex-wrap: wrap; }
.receipt-no { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--green-800); }
.receipt-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px solid var(--green-800);
}
.receipt-total .amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--green-900); }
.receipt-stamp {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 2px solid var(--success-700); color: var(--success-700);
  border-radius: var(--radius-sm); padding: 0.3rem 0.7rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-xs);
  transform: rotate(-3deg);
}

/* -------------------------------------------------------- fee banner ---- */

.fee-banner {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface);
}
.fee-banner.tone-due { background: var(--warning-100); border-color: rgba(163, 90, 6, 0.3); }
.fee-banner.tone-grace { background: var(--warning-100); border-color: rgba(163, 90, 6, 0.45); }
.fee-banner.tone-suspended { background: var(--danger-100); border-color: rgba(179, 38, 30, 0.4); }
.fee-banner.tone-paid { background: var(--success-100); border-color: rgba(15, 122, 79, 0.3); }
.fee-banner .amount { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }

/* ------------------------------------------------------------- misc ----- */

.copy-field {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere;
}
.copy-field button { flex: none; }

.sortable { cursor: pointer; user-select: none; }
.sortable::after { content: '↕'; opacity: 0.35; margin-left: 0.3rem; font-size: 0.8em; }
.sortable[data-dir='asc']::after { content: '↑'; opacity: 1; }
.sortable[data-dir='desc']::after { content: '↓'; opacity: 1; }

.proof-thumb { width: 54px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); cursor: zoom-in; }
.proof-view img { max-height: 66dvh; width: auto; margin-inline: auto; border-radius: var(--radius-sm); }

.tag-input { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.hr-soft { height: 1px; background: var(--border); border: 0; margin-block: var(--space-4); }

.scroll-x { overflow-x: auto; }