/* Kardelen behavior on the OkulPort theme. Demo role switch stays unused. */

[hidden] { display: none !important; }

html, body { max-width: 100%; }
main, .card, .table-wrap, .page-heading, .section-toolbar, .stats-grid, .staff-grid, .dashboard-grid, .stack {
  min-width: 0;
}

body.is-guest {
  background:
    radial-gradient(880px 420px at 12% -8%, #ec825038, transparent 58%),
    var(--nav);
}

.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.gate-card {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px #0c121c55;
}

.gate-aside {
  background: linear-gradient(165deg, #313a4c, #202632 58%);
  color: #c9d0db;
  padding: 48px 40px;
}

.gate-mark {
  width: 42px;
  height: 42px;
  color: var(--accent);
  margin-bottom: 28px;
}

.gate-mark svg { width: 42px; height: 42px; }

.gate-kicker {
  margin: 0 0 12px;
  color: #ec8250;
  letter-spacing: 0.2px;
  font-size: 13px;
  font-weight: 700;
}

.brand .brand-host {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  line-height: 0.95;
  letter-spacing: -0.7px;
}

.brand .brand-host .brand-light {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.2px;
  color: #b7c0ce;
}

.gate-aside h1 {
  color: #fff;
  font-size: 34px;
  letter-spacing: -1.1px;
  margin-bottom: 14px;
}

.gate-aside p { margin: 0; font-size: 14px; line-height: 1.7; color: #b7c0ce; }

.gate-fields { padding: 42px 36px; }
.gate-fields h2 {
  font-family: Manrope, sans-serif;
  font-size: 22px;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.gate-fields .lead { margin: 0 0 22px; color: #8b929e; font-size: 13px; line-height: 1.6; }

.gate .field input { height: 46px; font-size: 15px; }
.gate .btn { width: 100%; min-height: 46px; font-size: 14px; margin-top: 4px; }

.form-error { color: #b42318; min-height: 1.2em; font-size: 13px; margin: 10px 0 0; }
.form-ok { color: #319b7d; min-height: 1.2em; font-size: 13px; margin: 10px 0 0; }

.section-toolbar { flex-wrap: wrap; align-items: center; }
.toolbar-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.section-toolbar .search-box { flex: 1 1 220px; min-width: 0; }
.section-toolbar .search-box input,
.full-page-card .search-box input {
  width: 100%;
  font-size: 13px;
}
.filter-select { font-size: 13px; max-width: 100%; height: 36px; }
.tab { font-size: 12px; }

.full-page-card .school-cell strong { font-size: 13px; white-space: normal; }
.full-page-card td { font-size: 12px; }
.full-page-card th { font-size: 11px; }
.school-row { cursor: pointer; }
.school-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; }

.pager button { min-height: 32px; min-width: 32px; padding: 0 10px; }
.list-caption { font-size: 12px; }

.action-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 16px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card-actions .btn { flex: 1; }
.action-row .btn { white-space: normal; text-align: center; }

.assign-check { width: 16px; height: 16px; accent-color: var(--accent); }
.check-option input, .field input[type="checkbox"] { width: 16px; height: 16px; }

.field input, .field select, .field textarea { font-size: 14px; }
.detail-grid .wide { grid-column: 1 / -1; }
.detail-grid a { color: #a16c3b; }

.note-actions { display: flex; gap: 8px; margin-top: 8px; }
.note-actions .btn { min-height: 30px; font-size: 11px; }

button.meeting-card,
button.schedule-item,
button.workload-row,
button.notification-row {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
}
.meeting-card { cursor: pointer; }
.meeting-card h3 { font-size: 14px; }
.meeting-note { font-size: 13px; white-space: pre-wrap; }

.page-empty p { font-size: 14px; }
.is-loading { opacity: 0.55; }

.blocked-card { max-width: 520px; padding: 36px 32px; }
.blocked-card h1 { font-size: 28px; }
.blocked-card p { color: #8b929e; font-size: 14px; line-height: 1.7; }
.blocked-card .btn { margin-top: 8px; }

.workload-row button { width: 100%; text-align: left; }

@media (max-width: 800px) {
  .gate-card { grid-template-columns: 1fr; }
  .gate-aside { padding: 32px 24px; }
  .gate-fields { padding: 28px 22px; }
  .drawer { width: 100vw; }
  .detail-grid, .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .staff-grid { grid-template-columns: 1fr; }
  .top-actions .btn { padding: 8px 10px; }
}