:root {
  --color-ink: #0b0d10;
  --color-ink-2: #24272d;
  --color-muted: #6f747c;
  --color-line: #e1e3e6;
  --color-panel: #ffffff;
  --color-canvas: #f2f2f3;
  --color-sidebar: #07090c;
  --color-sidebar-2: #111419;
  --color-red: #c71f25;
  --color-red-dark: #99171b;
  --color-red-soft: #fff1f1;
  --color-gold: #9b6a19;
  --color-gold-soft: #fff7e8;
  --color-green: #1f7a4d;
  --color-green-soft: #e8f6ee;
  --color-neutral-soft: #f3f4f5;
  --space-1: .35rem;
  --space-2: .6rem;
  --space-3: 1rem;
  --space-4: 1.35rem;
  --space-5: 1.8rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 9px;
  --shadow-sm: none;
  --shadow-md: 0 10px 24px rgba(0, 0, 0, .08);
  --sidebar-width: 284px;
  --control-height: 42px;
  --text-xs: .75rem;
  --text-sm: .88rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.55rem;
}

html { font-size: 15px; }
body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--color-red); }
.btn { min-height: var(--control-height); border-radius: var(--radius-sm); font-weight: 700; padding-inline: 1rem; }
.btn-sm { min-height: 32px; }
.btn-dark { background: var(--color-ink); border-color: var(--color-ink); }
.btn-primary { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.btn-primary:hover { background: var(--color-red-dark); border-color: var(--color-red-dark); color: #fff; }
.btn-secondary { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.btn-secondary:hover { background: #000; border-color: #000; }
.btn-tertiary { background: #fff; border-color: var(--color-line); color: var(--color-ink); }
.btn-tertiary:hover { background: #eceeef; color: var(--color-ink); }
.btn-ghost { background: #fff; border-color: var(--color-line); color: var(--color-ink); }
.btn-ghost:hover { background: #f0f1f2; color: var(--color-ink); }
.btn-danger { background: var(--color-red); border-color: var(--color-red); }
.btn-danger:hover { background: var(--color-red-dark); border-color: var(--color-red-dark); }
.form-control, .form-select {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  border-color: var(--color-line);
}
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 .2rem rgba(185, 28, 28, .16);
}

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-sidebar);
  color: #fff;
  padding: 1.15rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  color: #fff;
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  padding-bottom: 1.15rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand:hover { color: #fff; }
.brand-copy { display: grid; gap: .1rem; }
.brand-copy strong { font-size: 1.22rem; line-height: 1; font-weight: 800; }
.brand-copy small { color: #c0c4ca; font-size: .78rem; text-transform: none; letter-spacing: .02em; }

.logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-sidebar);
  font-weight: 900;
  flex: 0 0 auto;
}
.logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.brand-logo {
  width: 64px;
  height: 64px;
  background: #050505;
  border: 1px solid rgba(199, 31, 37, .95);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.brand-logo img { padding: 0; display: block; object-fit: cover; object-position: center; }
.logo-sm { width: 38px; height: 38px; }
.logo-md { width: 74px; height: 74px; }
.logo-lg { width: 64px; height: 64px; }
.logo-xl { width: 96px; height: 96px; }
.brand-placeholder, .discipline-placeholder { display: contents; }
.logo-mark, .logo-thumb { object-fit: contain; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; padding: 5px; }
.logo-mark { width: 58px; height: 58px; }
.logo-thumb { width: 40px; height: 40px; }

.side-nav { display: grid; gap: .2rem; }
.nav-group {
  color: #8c929b;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin: 1rem 0 .35rem;
}
.side-nav a {
  color: #d8dce1;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: .68rem .72rem;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: .7rem;
  border: 0;
}
.nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #aeb4bd;
  font-style: normal;
}
.nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-nav a strong { font-size: .95rem; font-weight: 650; }
.side-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav a.active {
  background: var(--color-sidebar-2);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--color-red);
}
.side-nav a.active .nav-icon { color: var(--color-red); }

.main-panel { flex: 1; min-width: 0; }
.topbar {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--color-line);
  padding: .95rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 4;
}
.topbar h1 { font-size: 1.42rem; margin: 0; font-weight: 760; letter-spacing: 0; }
.topbar p { color: var(--color-muted); margin: .2rem 0 0; }
.topbar-actions, .page-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.eyebrow { color: var(--color-muted); font-size: .82rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.content { padding: var(--space-4); }
.mobile-menu { display: none; }

.dashboard-header {
  display: grid;
  gap: .85rem;
  align-items: start;
  padding-bottom: 1.15rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-line);
}
.dashboard-heading { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.dashboard-header h2 { font-size: 1.9rem; font-weight: 780; margin: 0; }
.dashboard-header span { color: var(--color-muted); }
.page-kicker { color: var(--color-muted); margin: 0; font-size: .9rem; flex-basis: 100%; }
.dashboard-controls { display: flex; gap: var(--space-2); justify-content: space-between; align-items: center; flex-wrap: wrap; }
.period-toolbar, .dashboard-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.period-toolbar { align-items: center; }
.period-fields { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.segmented-control {
  display: inline-flex;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.segmented-control label {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .85rem;
  font-weight: 750;
  cursor: pointer;
}
.segmented-control label:has(input:checked) { background: var(--color-ink); color: #fff; }
.segmented-control input { accent-color: var(--color-red); }
.period-errors { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; }
.period-errors span { color: var(--color-red); background: var(--color-red-soft); border: 1px solid #ffd0d0; border-radius: var(--radius-sm); padding: .4rem .6rem; font-size: var(--text-sm); font-weight: 700; }
.period-toolbar .form-select { width: 92px; }
.period-toolbar .form-control { width: 96px; }

.section-title { display: flex; justify-content: space-between; gap: var(--space-3); align-items: end; margin: var(--space-4) 0 var(--space-2); }
.section-title.clean { margin-top: 0; }
.section-title h2 { font-size: 1.05rem; margin: 0; font-weight: 750; }
.section-title p { color: var(--color-muted); margin: .2rem 0 0; }
.panel-card, .stat-card, .empty-state, .metric-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-card { padding: var(--space-4); }
.empty-state { padding: var(--space-5); text-align: center; color: var(--color-muted); }

.metric-grid { display: grid; gap: .8rem; margin-bottom: 1rem; }
.metric-grid-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.metric-grid-six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.metric-card {
  color: var(--color-ink);
  text-decoration: none;
  padding: 1.05rem 1.1rem;
  display: grid;
  gap: .28rem;
  position: relative;
  overflow: hidden;
}
.metric-card:hover { color: var(--color-ink); border-color: #c9ccd1; }
.metric-card strong { font-size: 1.55rem; line-height: 1.1; font-weight: 780; }
.metric-card small { color: var(--color-muted); min-height: 2.2em; }
.metric-card.compact { padding: 1rem; }
.metric-card.compact strong { font-size: 1.35rem; }
.metric-label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 650; }
.metric-profit strong { color: var(--color-green); }
.metric-loss strong { color: var(--color-red); }
.metric-expense strong { color: var(--color-ink); }
.operational-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  margin-bottom: 1.2rem;
}
.operational-item {
  color: var(--color-ink);
  text-decoration: none;
  padding: .85rem 1rem;
  border-right: 1px solid var(--color-line);
}
.operational-item:last-child { border-right: 0; }
.operational-item:hover { background: #f7f7f8; color: var(--color-ink); }
.operational-item span { display: block; color: var(--color-muted); font-size: .84rem; }
.operational-item strong { font-size: 1.15rem; font-weight: 760; }

.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--space-3); }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.chart-panel { min-height: 390px; }
.chart-canvas-wrap { height: 315px; min-height: 315px; }
.chart-canvas-wrap canvas, .doughnut-wrap canvas { width: 100% !important; height: 100% !important; }
.finance-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  min-height: 235px;
  align-items: end;
  padding-top: var(--space-3);
}
.chart-month { display: grid; gap: .5rem; text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.chart-bars { height: 205px; display: flex; align-items: end; justify-content: center; gap: .25rem; border-bottom: 1px solid var(--color-line); background: linear-gradient(to top, transparent 24%, #f2f2f3 25%, transparent 26%, transparent 49%, #f2f2f3 50%, transparent 51%, transparent 74%, #f2f2f3 75%, transparent 76%); }
.chart-bar {
  width: 18px;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  height: var(--bar-height, 0%);
}
.chart-bar.income { background: var(--color-ink); }
.chart-bar.expense { background: #a6a9ae; }
.chart-bar.net { background: var(--color-red); }
.chart-bar.net.negative { background: var(--color-red); }
.chart-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-income { background: var(--color-ink); }
.legend-expense { background: #a6a9ae; }
.legend-net { background: var(--color-red); }

.doughnut-panel { display: grid; gap: var(--space-3); }
.doughnut-wrap { height: 240px; min-height: 240px; }
.distribution-doughnut .doughnut-wrap { height: 220px; min-height: 220px; }
.doughnut-legend { display: grid; gap: .7rem; }
.doughnut-legend-item {
  display: grid;
  grid-template-columns: 10px 38px 1fr;
  align-items: center;
  gap: .65rem;
}
.doughnut-legend-item.no-logo { grid-template-columns: 10px 1fr; }
.legend-swatch { width: 10px; height: 34px; border-radius: 999px; }
.legend-logo {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.legend-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.doughnut-legend-item strong, .doughnut-legend-item small { display: block; }
.doughnut-legend-item small { color: var(--color-muted); }

.distribution-list { display: grid; gap: var(--space-3); }
.distribution-row { display: grid; grid-template-columns: 1fr; gap: .45rem; }
.distribution-row div:first-child { display: flex; justify-content: space-between; gap: var(--space-2); }
.distribution-row strong { font-size: var(--text-sm); }
.distribution-row span, .distribution-row small { color: var(--color-muted); }
.bar-track { height: 10px; background: #eceeef; border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--bar-width, 0%); background: var(--color-red); border-radius: 999px; }

.discipline-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.discipline-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.discipline-tile {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}
.discipline-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: start; }
.discipline-head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.discipline-head span { font-weight: 900; color: var(--color-red); }
.discipline-body p { color: var(--color-muted); margin: .35rem 0; }
.discipline-stats { display: flex; gap: .35rem; flex-wrap: wrap; margin: .5rem 0; }
.discipline-stats span { background: #f1f1f2; border-radius: var(--radius-sm); padding: .25rem .55rem; font-size: .78rem; font-weight: 800; color: var(--color-ink-2); }
.plans-line { font-size: var(--text-sm); }

.table { margin: 0; }
.table th { color: var(--color-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; white-space: nowrap; }
.table td { vertical-align: middle; }
.sticky-table thead th { position: sticky; top: 0; background: var(--color-panel); z-index: 1; }
.critical-row { background: #fff7f7; }
.badge-soft {
  border-radius: var(--radius-sm);
  padding: .28rem .55rem;
  font-size: .78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-ok { color: var(--color-green); background: var(--color-green-soft); }
.status-warning { color: var(--color-gold); background: var(--color-gold-soft); }
.status-danger { color: #b42318; background: var(--color-red-soft); }
.status-muted { color: #52606d; background: #eef2f6; }
.status-info { color: var(--color-ink-2); background: #f0f1f2; border-color: #d9dce0; }

.student-cell { display: flex; align-items: center; gap: .7rem; min-width: 190px; }
.student-cell small { display: block; color: var(--color-muted); }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sidebar);
  color: #fff;
  font-weight: 900;
  flex: 0 0 auto;
}
.actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.small-muted { color: var(--color-muted); font-size: var(--text-sm); }
.enrollment-list { display: grid; gap: .75rem; }
.enrollment-item {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: var(--space-3);
  align-items: center;
  padding: .9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fafafa;
}
.enrollment-actions {
  display: flex;
  gap: .45rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.enrollment-actions form { margin: 0; }

.movement-list { display: grid; gap: .7rem; }
.movement-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding: .85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.movement-item span { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.movement-icon {
  display: inline-flex !important;
  color: var(--color-ink) !important;
  background: #eef0f2;
  border-radius: var(--radius-sm);
  padding: .12rem .35rem;
  margin-right: .35rem;
  font-size: .72rem !important;
}
.movement-amount { text-align: right; }
.movement-item.income .movement-amount strong { color: var(--color-green); }
.movement-item.class .movement-amount strong, .movement-item.sale .movement-amount strong { color: var(--color-green); }
.movement-item.expense .movement-amount strong { color: var(--color-red); }
.section-link {
  display: inline-flex;
  margin-top: .65rem;
  color: var(--color-ink);
  font-weight: 750;
  text-decoration: none;
}
.section-link:hover { color: var(--color-red); }

.form-card { max-width: 1120px; }
.form-shell { display: grid; gap: var(--space-3); }
.form-section {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.form-section h2 { font-size: 1.08rem; font-weight: 900; margin-bottom: .25rem; }
.form-section p { color: var(--color-muted); margin-bottom: var(--space-3); }
.form-disabled { opacity: .55; }
.form-sticky-actions {
  position: sticky;
  bottom: 0;
  background: rgba(244,246,248,.96);
  padding: var(--space-3) 0 0;
  z-index: 2;
}
.plan-summary {
  background: #f7f9fb;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--color-muted);
}

.report-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.report-brand { display: flex; align-items: center; gap: var(--space-3); }
.report-brand h2 { margin: .1rem 0; font-size: 1.45rem; font-weight: 800; }
.report-brand p { margin: 0; color: var(--color-muted); }
.report-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.report-period { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.report-period-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-2); }
.report-period-grid span { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: .7rem .8rem; background: #fff; color: var(--color-muted); }
.report-period-grid strong { display: block; color: var(--color-ink); }
.report-list { margin: 0; padding-left: 1.1rem; color: var(--color-ink-2); }
.report-list li { margin: .35rem 0; }
.report-table { margin-top: var(--space-3); }

@media (max-width: 1280px) {
  .metric-grid-four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric-grid-six { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .span-4, .span-8 { grid-column: span 12; }
  .discipline-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .sidebar { display: none; }
  .mobile-menu { display: inline-flex; }
  .topbar { align-items: flex-start; }
  .topbar-actions { display: none; }
  .content { padding: var(--space-3); }
  .dashboard-controls { display: grid; grid-template-columns: 1fr; }
  .period-toolbar, .dashboard-actions { justify-content: flex-start; }
  .period-fields { width: 100%; }
  .metric-grid-four, .metric-grid-six { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .operational-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operational-item { border-right: 0; border-bottom: 1px solid var(--color-line); }
  .enrollment-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enrollment-actions { justify-content: flex-start; }
  .discipline-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .metric-grid-four, .metric-grid-six { grid-template-columns: 1fr; }
  .finance-chart { gap: .5rem; }
  .chart-bar { width: 12px; }
  .dashboard-header h2 { font-size: 1.55rem; }
  .period-toolbar .form-select, .period-toolbar .form-control { width: 100%; }
  .segmented-control, .period-toolbar, .period-fields { width: 100%; }
  .segmented-control label { flex: 1; justify-content: center; }
  .dashboard-actions .btn { width: 100%; }
  .operational-strip { grid-template-columns: 1fr; }
  .movement-item, .discipline-tile { grid-template-columns: 1fr; }
  .enrollment-item { grid-template-columns: 1fr; }
  .movement-item { align-items: flex-start; }
  .movement-amount { text-align: left; }
  .table-responsive { font-size: .92rem; }
  .report-header, .report-brand { align-items: flex-start; }
  .report-header { display: grid; }
  .report-period-grid { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sidebar, .topbar, .mobile-menu, .offcanvas, .no-print, .report-actions { display: none !important; }
  .app-shell, .main-panel, .content { display: block; padding: 0; min-height: auto; width: 100%; }
  .panel-card, .metric-card, .empty-state {
    border: 1px solid #d5d5d5;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .dashboard-grid, .metric-grid, .report-period-grid { display: block; }
  .dashboard-grid > *, .metric-card, .report-table { margin-bottom: 10mm; }
  .chart-canvas-wrap, .doughnut-wrap { break-inside: avoid; page-break-inside: avoid; }
  .table { font-size: 9pt; }
  .badge-soft { border: 1px solid #bbb; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
}