/* =========================
   COMMELIO DESIGN SYSTEM
   ========================= */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --commelio-navy: #12263A;
  --commelio-mint: #5CC9B3;
  --commelio-background: #F7FAFC;
  --commelio-slate: #6B7A8C;
  --commelio-border: #E4EDF3;
  --commelio-white: #FFFFFF;
  --commelio-radius-sm: 8px;
  --commelio-radius-md: 12px;
  --commelio-radius-lg: 18px;
  --commelio-shadow-sm: 0 8px 22px rgba(18, 38, 58, 0.06);
  --commelio-shadow-md: 0 18px 46px rgba(18, 38, 58, 0.1);
  --ink: var(--commelio-navy);
  --muted: var(--commelio-slate);
  --subtle: rgba(92, 201, 179, 0.1);
  --line: var(--commelio-border);
  --panel: var(--commelio-white);
  --page: var(--commelio-background);
  --green: var(--commelio-navy);
  --green-dark: #0d1c2b;
  --teal: var(--commelio-mint);
  --blue: var(--commelio-navy);
  --amber: #8A6200;
  --red: #A6403A;
  --rose: #FFF0EF;
  --shadow: var(--commelio-shadow-sm);
  --radius: var(--commelio-radius-md);
  --font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--commelio-background);
  color: var(--commelio-navy);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

h1,
h2,
h3,
button,
.nav-button,
.municipal-lockup,
.metric strong {
  font-family: var(--font-heading);
}

input,
select,
textarea {
  font: inherit;
}

button {
  font-family: var(--font-heading);
}

input,
select,
textarea,
table {
  font-family: var(--font-body);
}

input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: var(--commelio-mint);
}

button {
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: var(--commelio-navy);
  font-weight: 600;
}

.app-shell {
  min-height: 100vh;
}

.loading-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--commelio-slate);
}

.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: var(--commelio-radius-lg);
  background: var(--commelio-white) url("/assets/commelio-mark.svg") center / 70% no-repeat;
  border: 1px solid var(--commelio-border);
  box-shadow: var(--commelio-shadow-sm);
  flex: 0 0 auto;
}

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
  background: var(--commelio-background);
}

.login-identity {
  background: var(--commelio-navy);
  color: var(--commelio-white);
  padding: 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.login-identity h1 {
  max-width: 560px;
  margin: 30px 0 12px;
  font-size: 42px;
  line-height: 1.08;
  font-weight: 700;
}

.login-identity p {
  max-width: 580px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  font-weight: 400;
}

.municipal-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
}

.municipal-lockup .brand-mark {
  width: 46px;
  height: 46px;
  box-shadow: none;
}

.login-meta {
  display: grid;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
}

.login-content {
  display: grid;
  align-content: center;
  padding: 42px;
}

.auth-panel {
  max-width: 520px;
  width: 100%;
  background: var(--commelio-white);
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  padding: 30px;
  box-shadow: var(--commelio-shadow-md);
}

.auth-panel h2,
.section-title h2,
.modal h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.auth-tabs,
.role-tabs,
.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.tab-button,
.nav-button,
.ghost-button,
.icon-button {
  border: 1px solid var(--commelio-border);
  background: var(--commelio-white);
  color: var(--commelio-navy);
  min-height: 40px;
  border-radius: var(--commelio-radius-md);
  padding: 9px 12px;
  font-weight: 600;
}

.tab-button[aria-pressed="true"],
.tab-button.active,
.view-tabs button.active {
  background: rgba(92, 201, 179, 0.14);
  border-color: rgba(92, 201, 179, 0.4);
  color: var(--commelio-navy);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

label,
.label {
  color: var(--commelio-navy);
  font-size: 13px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  min-height: 44px;
  padding: 10px 12px;
  background: var(--commelio-white);
  color: var(--commelio-navy);
  font-weight: 400;
}

input::placeholder,
textarea::placeholder {
  color: var(--commelio-slate);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(92, 201, 179, 0.24);
  outline-offset: 2px;
  border-color: var(--commelio-mint);
}

.primary-button,
.danger-button,
.pay-button {
  border: 0;
  min-height: 44px;
  border-radius: var(--commelio-radius-md);
  padding: 10px 15px;
  color: var(--commelio-white);
  font-family: var(--font-heading);
  font-weight: 600;
}

.primary-button {
  background: var(--commelio-navy);
}

.primary-button:hover,
.pay-button:hover {
  background: #0d1c2b;
}

.pay-button {
  background: var(--commelio-navy);
}

.danger-button {
  background: var(--red);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.hint,
.muted,
.empty-state {
  color: var(--commelio-slate);
}

.hint {
  font-size: 13px;
}

.portal {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--commelio-white);
  color: var(--commelio-navy);
  border-right: 1px solid var(--commelio-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sidebar .municipal-lockup {
  align-items: flex-start;
}

.sidebar small {
  display: block;
  color: var(--commelio-slate);
  font-weight: 500;
  margin-top: 2px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-button {
  position: relative;
  text-align: left;
  background: transparent;
  color: var(--commelio-slate);
  border-color: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-button:hover {
  background: rgba(92, 201, 179, 0.1);
  color: var(--commelio-navy);
}

.nav-button.active {
  background: rgba(92, 201, 179, 0.14);
  color: var(--commelio-navy);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--commelio-navy);
}

.nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button.active .nav-icon {
  color: #07826f;
}

.nav-button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--commelio-mint);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 12px;
}

.user-box {
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  padding: 12px;
  background: var(--commelio-background);
}

.content {
  min-width: 0;
  padding: 30px 32px 48px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.topbar h1 {
  margin: 0 0 4px;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 700;
}

.top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.section {
  display: grid;
  gap: 18px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric,
.panel,
.item-card,
.table-panel {
  background: var(--commelio-white);
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  box-shadow: var(--commelio-shadow-sm);
}

.metric {
  padding: 18px;
}

.metric-button {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.metric-button:hover,
.metric-button:focus-visible {
  border-color: rgba(92, 201, 179, 0.7);
  box-shadow: var(--commelio-shadow-md);
  transform: translateY(-1px);
  outline: none;
}

.metric strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 5px;
  font-weight: 700;
}

.metric small {
  color: var(--commelio-slate);
  font-size: 13px;
}

.admin-dashboard {
  gap: 16px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 4px;
}

.dashboard-header h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.16;
}

.dashboard-header p {
  margin: 6px 0 2px;
  color: var(--commelio-navy);
  font-size: 16px;
}

.dashboard-header-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon-label-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-label-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-kpis {
  gap: 12px;
}

.dashboard-kpi-copy {
  display: grid;
  gap: 2px;
}

.dashboard-kpi-copy strong {
  font-size: 30px;
  margin: 0;
}

.dashboard-kpi-copy span {
  font-family: var(--font-heading);
  font-weight: 700;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.panel {
  padding: 20px;
}

.panel > h3,
.item-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.item-card {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.item-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.item-card h3 {
  margin: 0;
}

.documents-page {
  gap: 14px;
}

.documents-page-header {
  margin-bottom: 2px;
}

.documents-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.documents-summary button {
  appearance: none;
  display: grid;
  gap: 2px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius);
  background: var(--commelio-white);
  color: var(--commelio-navy);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--commelio-shadow-sm);
}

.documents-summary button.active,
.documents-summary button:hover,
.documents-summary button:focus-visible {
  border-color: rgba(92, 201, 179, 0.75);
  background: rgba(92, 201, 179, 0.1);
  outline: none;
}

.documents-summary strong {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1;
}

.documents-summary span {
  color: var(--commelio-slate);
  font-weight: 700;
}

.documents-controls {
  padding: 14px;
}

.documents-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.documents-reminder-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.documents-reminder-bar > div {
  display: grid;
  gap: 2px;
}

.documents-list {
  display: grid;
  gap: 8px;
}

.document-line {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 0.7fr) minmax(110px, auto) minmax(260px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius);
  background: var(--commelio-white);
  box-shadow: var(--commelio-shadow-sm);
}

.document-line.missing {
  background: rgba(92, 201, 179, 0.06);
}

.document-line-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.document-line-main strong,
.document-line-main span,
.document-line-main small,
.document-line-date {
  overflow-wrap: anywhere;
}

.document-line-main strong {
  font-family: var(--font-heading);
  font-size: 15px;
}

.document-line-main span,
.document-line-main small,
.document-line-date {
  color: var(--commelio-slate);
  font-size: 13px;
}

.document-line-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.document-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.4fr);
  gap: 18px;
}

.document-preview-box {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius);
  background: var(--commelio-cloud);
  overflow: hidden;
}

.document-preview-label {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  color: var(--commelio-slate);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0;
}

.document-preview-frame,
.document-preview-media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  object-fit: contain;
}

.document-preview-info {
  display: grid;
  align-content: start;
  gap: 14px;
}

.documents-reminder-groups {
  display: grid;
  gap: 12px;
}

.documents-reminder-groups ul {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--commelio-slate);
}

.item-card dl,
.summary-list {
  margin: 0;
  display: grid;
  gap: 8px;
}

.item-card dl div,
.summary-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
}

dt,
.summary-row span:first-child {
  color: var(--commelio-slate);
  font-weight: 500;
}

dd {
  margin: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  white-space: nowrap;
}

.status.validated,
.status.valid,
.status.paid,
.status.confirmed,
.status.published,
.status.present {
  color: var(--commelio-navy);
  background: rgba(92, 201, 179, 0.2);
}

.status.submitted,
.status.received,
.status.in_review,
.status.pending,
.status.draft {
  color: var(--commelio-navy);
  background: rgba(18, 38, 58, 0.08);
}

.status.needs_more,
.status.unpaid,
.status.excused,
.status.exceptional {
  color: #6B5000;
  background: #FFF7DF;
}

.status.refused,
.status.expired,
.status.cancelled,
.status.absent,
.status.disabled {
  color: #8F302B;
  background: #FFF0EF;
}

.status.to_validate {
  color: var(--commelio-navy);
  background: rgba(18, 38, 58, 0.08);
}

.status.completed {
  color: var(--commelio-slate);
  background: var(--commelio-background);
}

.table-panel {
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 13px;
  border-bottom: 1px solid var(--commelio-border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--commelio-background);
  color: var(--commelio-navy);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
}

td.actions {
  white-space: nowrap;
}

.stack {
  display: grid;
  gap: 12px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ghost-button,
.icon-button {
  min-height: 38px;
  padding: 8px 10px;
}

.ghost-button:hover,
.icon-button:hover {
  background: rgba(92, 201, 179, 0.1);
  border-color: rgba(92, 201, 179, 0.38);
}

.icon-button {
  min-width: 38px;
}

.notice {
  border-left: 4px solid var(--commelio-mint);
  background: rgba(92, 201, 179, 0.09);
  padding: 12px 14px;
  border-radius: var(--commelio-radius-md);
}

.mairie-hero {
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  background: var(--commelio-white);
  box-shadow: var(--commelio-shadow-sm);
  padding: 24px;
  display: grid;
  gap: 10px;
}

.mairie-hero h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
}

.mairie-hero p {
  margin: 0;
  color: var(--commelio-slate);
}

.mairie-hero-compact {
  padding: 18px 20px;
  gap: 6px;
}

.mairie-hero-compact h2 {
  font-size: 26px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.dashboard-right-rail {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.dashboard-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(228, 237, 243, 0.92);
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(18, 38, 58, 0.07);
  padding: 18px;
}

.dashboard-card h3,
.dashboard-quick-panel h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.dashboard-actions-panel,
.dashboard-today-panel,
.dashboard-canteen-panel,
.dashboard-quick-panel {
  display: grid;
  gap: 14px;
}

.dashboard-action-row,
.action-row,
.attendance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-white);
  padding: 14px;
}

.dashboard-action-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  padding: 10px 12px;
  border-color: rgba(228, 237, 243, 0.88);
  box-shadow: none;
}

.action-row strong,
.attendance-row strong,
.booking-card strong {
  font-family: var(--font-heading);
}

.dashboard-action-body {
  display: grid;
  gap: 4px;
}

.dashboard-action-body strong,
.today-service-body strong {
  font-family: var(--font-heading);
  font-size: 15px;
}

.dashboard-action-body span:not(.action-type),
.dashboard-action-body small,
.today-service-body span,
.today-service-body small,
.dashboard-muted-note {
  color: var(--commelio-slate);
}

.dashboard-action-body small,
.today-service-body small {
  font-size: 13px;
}

.action-type {
  width: fit-content;
  color: var(--commelio-navy) !important;
  background: rgba(92, 201, 179, 0.14);
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-row-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--commelio-navy);
  background: rgba(92, 201, 179, 0.14);
}

.dashboard-row-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-row-icon.mint {
  color: #07826f;
  background: rgba(92, 201, 179, 0.16);
}

.dashboard-row-icon.blue {
  color: #1d5fd1;
  background: rgba(66, 133, 244, 0.11);
}

.dashboard-row-icon.slate {
  color: var(--commelio-navy);
  background: rgba(18, 38, 58, 0.08);
}

.dashboard-row-icon.violet {
  color: #6354c7;
  background: rgba(116, 99, 223, 0.12);
}

.section-heading-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-heading-with-icon h3,
.section-heading-with-icon small {
  display: block;
}

.section-heading-with-icon small {
  color: var(--commelio-slate);
  margin-top: 3px;
}

.today-service-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--commelio-border);
  padding: 12px 0;
}

.today-service-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.today-service-body {
  display: grid;
  gap: 3px;
}

.dashboard-mini-count {
  appearance: none;
  display: grid;
  min-width: 74px;
  border: 0;
  border-radius: 999px;
  background: rgba(92, 201, 179, 0.12);
  color: var(--commelio-navy);
  padding: 7px 10px;
  text-align: center;
}

.dashboard-mini-count:hover,
.dashboard-mini-count:focus-visible {
  background: rgba(92, 201, 179, 0.2);
  outline: none;
}

.dashboard-mini-count strong {
  font-size: 17px;
  line-height: 1;
}

.dashboard-mini-count span {
  color: var(--commelio-slate);
  font-size: 11px;
}

.dashboard-empty p {
  margin: 4px 0;
  color: var(--commelio-slate);
}

.dashboard-today-panel .dashboard-empty {
  padding: 12px;
}

.dashboard-empty small {
  color: var(--commelio-slate);
}

.dashboard-muted-note {
  font-size: 13px;
}

.dashboard-canteen-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.dashboard-canteen-stats > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border-right: 1px solid var(--commelio-border);
  padding-right: 8px;
  align-content: center;
}

.dashboard-canteen-stats > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.dashboard-canteen-stats strong {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1;
}

.dashboard-canteen-stats span {
  color: var(--commelio-slate);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.dashboard-quick-link {
  appearance: none;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 7px;
  min-height: 78px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(228, 237, 243, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--commelio-navy);
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  box-shadow: 0 8px 22px rgba(18, 38, 58, 0.045);
}

.dashboard-quick-link > span:last-child {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.dashboard-quick-link .dashboard-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.dashboard-quick-link .dashboard-row-icon svg {
  width: 19px;
  height: 19px;
}

.dashboard-quick-link:hover,
.dashboard-quick-link:focus-visible {
  border-color: rgba(92, 201, 179, 0.58);
  box-shadow: 0 12px 28px rgba(18, 38, 58, 0.075);
  outline: none;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.registrations-page {
  display: grid;
  gap: 16px;
}

.registrations-controls {
  gap: 16px;
}

.registrations-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.filters-panel {
  border-top: 1px solid var(--commelio-border);
  padding-top: 14px;
}

.filters-reset-field {
  align-self: end;
}

.registration-success-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.registration-list {
  display: grid;
  gap: 10px;
}

.booking-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-white);
  padding: 12px 14px;
}

.registration-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.registration-card.highlighted {
  border-color: rgba(92, 201, 179, 0.72);
  background: rgba(92, 201, 179, 0.12);
  box-shadow: 0 12px 24px rgba(92, 201, 179, 0.14);
}

.booking-card header,
.attendance-row header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.registration-card header {
  grid-column: 1 / -1;
}

.registration-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.registration-card-main span,
.registration-card-content span {
  color: var(--commelio-slate);
}

.registration-card-content {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.registration-card-main h3,
.registration-card-content strong,
.registration-card-content span {
  overflow-wrap: anywhere;
}

.registration-card-actions {
  justify-self: end;
}

.attendance-list,
.menu-days-editor {
  display: grid;
  gap: 12px;
}

.rule-card,
.menu-day-editor {
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-sm);
  background: var(--commelio-background);
  padding: 14px;
}

.rule-card h4,
.menu-day-editor h4 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 15px;
}

.canteen-page {
  gap: 16px;
}

.canteen-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 0;
}

.canteen-page-header h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.16;
}

.canteen-page-header p {
  margin: 6px 0 0;
  color: var(--commelio-navy);
  font-size: 16px;
}

.canteen-nav-panel {
  padding-bottom: 16px;
}

.canteen-main-tabs {
  width: fit-content;
  max-width: 100%;
  margin-top: -4px;
}

.canteen-section-heading,
.canteen-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.canteen-section-heading h3 {
  margin: 0;
  font-size: 20px;
}

.canteen-toolbar {
  padding: 8px 2px;
}

.canteen-toolbar > strong {
  font-family: var(--font-heading);
  font-size: 18px;
}

.canteen-date-actions {
  align-items: center;
}

.compact-date-input {
  min-height: 36px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-sm);
  padding: 7px 9px;
  font: inherit;
  color: var(--commelio-navy);
  background: var(--commelio-white);
}

.canteen-control-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, auto);
  gap: 14px;
  align-items: end;
}

.compact-tabs {
  align-self: end;
}

.canteen-kpis .metric small {
  text-transform: none;
}

.canteen-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-border);
  box-shadow: var(--commelio-shadow-sm);
}

.canteen-summary-bar div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--commelio-white);
}

.canteen-summary-bar strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  font-family: var(--font-heading);
}

.canteen-summary-bar span {
  display: block;
  margin-top: 4px;
  color: var(--commelio-slate);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.canteen-empty-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  padding: 12px 14px;
  background: var(--commelio-white);
  box-shadow: var(--commelio-shadow-sm);
}

.canteen-empty-day span {
  color: var(--commelio-slate);
  font-size: 13px;
}

.canteen-today-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 35%);
  gap: 14px;
  align-items: start;
}

.canteen-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.45fr) minmax(140px, 0.55fr) auto;
  gap: 12px;
  align-items: end;
}

.canteen-filters .field label {
  font-size: 12px;
}

.canteen-filters input,
.canteen-filters select {
  min-height: 38px;
  padding: 8px 10px;
}

.canteen-food-toggle {
  min-height: 38px;
  align-items: center;
  font-size: 13px;
}

.canteen-children-list {
  display: grid;
  gap: 10px;
}

.canteen-child-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, 0.7fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-sm);
  padding: 12px;
  background: var(--commelio-white);
}

.canteen-child-row.has-alert {
  border-color: rgba(92, 201, 179, 0.65);
  background: rgba(92, 201, 179, 0.08);
}

.canteen-child-row strong,
.canteen-child-row span {
  min-width: 0;
}

.canteen-child-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.canteen-child-row > div:first-child span,
.canteen-food-alerts span {
  color: var(--commelio-slate);
  font-size: 13px;
}

.canteen-food-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.canteen-food-alerts span:not(.muted) {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(92, 201, 179, 0.16);
  color: var(--commelio-navy);
  font-weight: 700;
}

.canteen-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
}

.canteen-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.canteen-table th,
.canteen-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--commelio-border);
  text-align: left;
  vertical-align: top;
}

.canteen-table th {
  color: var(--commelio-slate);
  font-size: 12px;
  font-weight: 700;
}

.canteen-table tbody tr:last-child td {
  border-bottom: 0;
}

.canteen-table tbody tr[data-action] {
  cursor: pointer;
}

.canteen-table tbody tr[data-action]:hover,
.canteen-table tbody tr.is-today {
  background: rgba(92, 201, 179, 0.09);
}

.canteen-children-table td:first-child {
  display: grid;
  gap: 2px;
}

.canteen-children-table td:first-child span {
  color: var(--commelio-slate);
  font-size: 12px;
}

.canteen-food-cell {
  color: var(--commelio-slate);
}

.canteen-food-cell span {
  display: inline-flex;
  margin: 0 5px 5px 0;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(92, 201, 179, 0.16);
  color: var(--commelio-navy);
  font-weight: 700;
  font-size: 12px;
}

.compact-panel {
  padding: 16px;
}

.canteen-menu-content {
  display: grid;
  gap: 7px;
  margin: 0;
}

.canteen-menu-content div {
  display: grid;
  gap: 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--commelio-border);
}

.canteen-menu-content div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.canteen-menu-content dt {
  color: var(--commelio-slate);
  font-size: 12px;
}

.canteen-menu-content dd {
  margin: 0;
  font-weight: 700;
}

.canteen-menu-panel {
  padding: 16px;
}

.canteen-menu-planning {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--commelio-border);
}

.canteen-menu-line {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--commelio-border);
}

.canteen-menu-line:last-child {
  border-bottom: 0;
}

.canteen-menu-line header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.canteen-menu-line h4 {
  margin: 0;
  font-size: 15px;
  font-family: var(--font-heading);
}

.canteen-week-panel {
  overflow-x: auto;
}

.canteen-week-grid,
.canteen-menu-week,
.canteen-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.canteen-week-day dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.canteen-week-day dt {
  font-size: 24px;
}

.canteen-config-card p {
  margin: 0;
  color: var(--commelio-slate);
  line-height: 1.55;
}

.canteen-config-list {
  gap: 0;
}

.canteen-config-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--commelio-border);
}

.canteen-config-section:first-child {
  padding-top: 0;
}

.canteen-config-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.canteen-config-section h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.canteen-config-section p {
  margin: 0 0 4px;
  color: var(--commelio-slate);
}

.canteen-deadlines {
  display: grid;
  gap: 7px;
  margin: 0;
}

.canteen-deadlines div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}

.canteen-deadlines dt {
  color: var(--commelio-slate);
}

.canteen-deadlines dd {
  margin: 0;
  font-weight: 700;
}

.compact-list {
  gap: 6px;
}

.empty-state.compact {
  padding: 12px;
  border-radius: var(--commelio-radius-sm);
}

.warning {
  border-left-color: var(--amber);
  background: #FFF8E8;
}

.error {
  border-left-color: var(--red);
  background: var(--rose);
  color: #7f2823;
}

.empty-state {
  border: 1px dashed var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  padding: 18px;
  background: var(--commelio-white);
}

.parent-hero,
.assistant-placeholder {
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  background: var(--commelio-white);
  box-shadow: var(--commelio-shadow-sm);
  padding: 24px;
}

.parent-hero h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
}

.parent-hero p {
  margin: 6px 0;
  color: var(--commelio-slate);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--commelio-slate);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.quick-action,
.choice-card,
.date-card,
.choice-chip {
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-white);
  color: var(--commelio-navy);
  text-align: left;
  box-shadow: var(--commelio-shadow-sm);
}

.quick-action {
  min-height: 86px;
  padding: 18px;
  font-size: 16px;
}

.choice-card,
.date-card {
  display: grid;
  gap: 7px;
  min-height: 108px;
  padding: 16px;
}

.choice-card span,
.date-card span,
.compact-card span,
.compact-card small {
  color: var(--commelio-slate);
}

.choice-card.selected,
.date-card.selected,
.choice-chip.selected {
  border-color: rgba(92, 201, 179, 0.66);
  background: rgba(92, 201, 179, 0.12);
}

.choice-chip {
  min-height: 42px;
  padding: 9px 13px;
  font-weight: 700;
}

.week-picker,
.calendar-grid,
.parent-list {
  display: grid;
  gap: 12px;
}

.week-picker {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-card:disabled {
  box-shadow: none;
}

.parent-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-white);
  padding: 16px;
}

.parent-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.parent-card h3 {
  margin: 0;
}

.parent-card dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.parent-card dl div {
  display: grid;
  grid-template-columns: minmax(94px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
}

.compact-card {
  gap: 5px;
}

.exception-box,
.child-sections {
  border-top: 1px solid var(--commelio-border);
  padding-top: 12px;
}

.child-sections {
  display: grid;
  gap: 6px;
  color: var(--commelio-slate);
}

.menu-preview {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
}

.menu-day p,
.assistant-placeholder p {
  margin: 0;
  color: var(--commelio-slate);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 38, 58, 0.54);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 50;
}

.modal {
  width: min(760px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  background: var(--commelio-white);
  border-radius: var(--commelio-radius-lg);
  box-shadow: var(--commelio-shadow-md);
  border: 1px solid var(--commelio-border);
  padding: 24px;
}

.modal header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--commelio-navy);
  color: var(--commelio-white);
  padding: 12px 14px;
  border-radius: var(--commelio-radius-md);
  box-shadow: var(--commelio-shadow-md);
  z-index: 60;
  max-width: min(420px, calc(100vw - 40px));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1080px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-actions,
  .calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .canteen-today-layout,
  .canteen-control-row {
    grid-template-columns: 1fr;
  }

  .canteen-control-row .inline-actions {
    justify-content: flex-start;
  }

  .canteen-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .login-page,
  .portal {
    grid-template-columns: 1fr;
  }

  .login-identity {
    min-height: auto;
    padding: 28px;
  }

  .login-identity h1 {
    font-size: 32px;
  }

  .login-meta {
    margin-top: 26px;
  }

  .login-content {
    padding: 22px;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .content {
    padding: 22px 16px 36px;
  }

  .topbar,
  .section-title,
  .canteen-page-header {
    display: grid;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .dashboard-header {
    display: grid;
  }

  .dashboard-header-side {
    justify-content: flex-start;
  }

  .document-line,
  .document-preview-layout {
    grid-template-columns: 1fr;
  }

  .document-line-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 14px;
  }

  .field-grid,
  .quick-actions,
  .calendar-grid,
  .filters-grid,
  .registrations-search-row,
  .documents-search-row,
  .registration-card,
  .action-row,
  .attendance-row {
    grid-template-columns: 1fr;
  }

  .documents-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .documents-reminder-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .document-line {
    align-items: stretch;
    gap: 10px;
  }

  .document-line-actions .ghost-button,
  .document-line-actions .primary-button {
    flex: 1 1 100%;
  }

  .registration-card-actions {
    justify-self: stretch;
  }

  .registration-card-actions .ghost-button {
    width: 100%;
  }

  .registration-success-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-button {
    grid-template-columns: 1fr;
  }

  .dashboard-action-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-action-row .ghost-button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .today-service-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-mini-count {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-quick-link {
    justify-content: flex-start;
  }

  .canteen-filters,
  .canteen-child-row,
  .canteen-config-section {
    grid-template-columns: 1fr;
  }

  .canteen-food-alerts {
    justify-content: flex-start;
  }

  .canteen-toolbar {
    align-items: stretch;
  }

  .canteen-main-tabs,
  .canteen-toolbar .view-tabs {
    width: 100%;
  }

  .canteen-date-actions,
  .canteen-section-heading,
  .canteen-menu-heading .inline-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .canteen-summary-bar {
    grid-template-columns: 1fr;
  }

  .canteen-table {
    min-width: 0;
  }

  .canteen-table thead {
    display: none;
  }

  .canteen-table tr {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--commelio-border);
  }

  .canteen-table tr:last-child {
    border-bottom: 0;
  }

  .canteen-table td {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 0;
    border: 0;
  }

  .canteen-table td::before {
    content: attr(data-label);
    color: var(--commelio-slate);
    font-size: 12px;
    font-weight: 700;
  }

  .canteen-children-table td:first-child {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .auth-panel,
  .modal {
    padding: 18px;
  }

  .item-card dl div,
  .parent-card dl div,
  .summary-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .table-panel {
    overflow-x: auto;
  }

  table {
    min-width: 680px;
  }
}

.platform-admin .topbar h1 {
  color: var(--commelio-navy);
}

.platform-admin .compact {
  min-height: 34px;
  padding: 8px 10px;
}

.status.active {
  color: var(--commelio-navy);
  background: rgba(92, 201, 179, 0.16);
  border-color: rgba(92, 201, 179, 0.34);
}

.status.inactive {
  color: var(--commelio-slate);
  background: var(--commelio-background);
  border-color: var(--commelio-border);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-sm);
  background: var(--commelio-background);
  color: var(--commelio-navy);
  font-size: 13px;
  font-weight: 600;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.config-block {
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-sm);
  background: var(--commelio-background);
  padding: 12px;
}

.config-block pre {
  max-height: 220px;
  overflow: auto;
  margin: 10px 0 0;
  color: var(--commelio-slate);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

@media (max-width: 980px) {
  .config-grid {
    grid-template-columns: 1fr;
  }
}

.attendance-page {
  gap: 16px;
}

.attendance-period-bar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
}

.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-white);
  box-shadow: var(--commelio-shadow-sm);
}

.segmented-control button {
  min-height: 36px;
  border: 0;
  border-radius: var(--commelio-radius-sm);
  background: transparent;
  color: var(--commelio-slate);
  padding: 8px 12px;
  font-weight: 700;
}

.segmented-control button.active {
  background: rgba(92, 201, 179, 0.16);
  color: var(--commelio-navy);
}

.field.compact {
  min-width: 190px;
}

.field.compact input {
  min-height: 38px;
}

.attendance-week-nav,
.attendance-day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

.attendance-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.attendance-service-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--commelio-shadow-sm);
}

.attendance-service-card.light {
  align-content: start;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.attendance-service-card.zero {
  gap: 12px;
  padding: 16px;
}

.attendance-service-card header {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.attendance-service-card h3,
.attendance-row-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.attendance-service-card p,
.attendance-row-card p {
  margin: 3px 0 0;
  color: var(--commelio-slate);
  font-size: 13px;
}

.attendance-card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.attendance-card-body.zero {
  display: block;
}

.attendance-donut {
  --present: 0;
  --absent: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at center, var(--commelio-white) 0 56%, transparent 57%),
    conic-gradient(
      var(--commelio-mint) 0 calc(var(--present) * 1%),
      #A6403A calc(var(--present) * 1%) calc((var(--present) + var(--absent)) * 1%),
      var(--commelio-border) 0
    );
  color: var(--commelio-navy);
}

.attendance-donut strong {
  font-family: var(--font-heading);
  font-size: 23px;
  line-height: 1;
}

.attendance-donut span {
  color: var(--commelio-slate);
  font-size: 11px;
  font-weight: 600;
}

.attendance-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.attendance-stats.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-stats.today-zero {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-stats div {
  min-width: 0;
  padding: 10px;
  border-radius: var(--commelio-radius-sm);
  background: var(--commelio-background);
}

.attendance-stats dt {
  color: var(--commelio-navy);
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.attendance-stats dd {
  margin-top: 4px;
  color: var(--commelio-slate);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.attendance-segments {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--commelio-border);
}

.attendance-segments span {
  min-width: 0;
}

.attendance-segments .present {
  background: var(--commelio-mint);
}

.attendance-segments .absent {
  background: #A6403A;
}

.attendance-segments .exceptional {
  background: #EAB64B;
}

.attendance-segments .pending {
  background: var(--commelio-border);
}

.attendance-empty-line {
  color: var(--commelio-slate);
  font-weight: 600;
}

.attendance-quiet-services {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.attendance-quiet-services strong {
  font-family: var(--font-heading);
  font-size: 15px;
}

.attendance-week-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.attendance-week-day {
  appearance: none;
  display: grid;
  grid-template-rows: 76px auto auto auto;
  gap: 5px;
  justify-items: center;
  align-items: end;
  min-width: 0;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-sm);
  background: var(--commelio-white);
  color: var(--commelio-navy);
  padding: 8px 4px;
}

.attendance-week-bar-pair {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 76px;
}

.attendance-week-day .bar {
  width: 13px;
  min-height: 8px;
  border-radius: 999px 999px 4px 4px;
}

.attendance-week-day .bar.planned {
  background: var(--commelio-border);
}

.attendance-week-day .bar.present {
  background: linear-gradient(180deg, var(--commelio-mint), #299985);
}

.attendance-week-day strong {
  font-family: var(--font-heading);
  font-size: 15px;
  white-space: nowrap;
}

.attendance-week-day small {
  color: var(--commelio-slate);
  font-size: 11px;
  text-transform: capitalize;
}

.attendance-week-day em {
  min-height: 14px;
  color: #6B5000;
  font-size: 10px;
  font-style: normal;
}

.attendance-week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--commelio-slate);
  font-size: 12px;
}

.attendance-week-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.attendance-week-legend i {
  width: 18px;
  height: 8px;
  border-radius: 999px;
}

.attendance-week-legend i.planned {
  background: var(--commelio-border);
}

.attendance-week-legend i.present {
  background: var(--commelio-mint);
}

.attendance-detail-header {
  display: grid;
  gap: 14px;
}

.attendance-detail-header .section-title {
  align-items: start;
}

.attendance-detail-controls {
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 0.9fr) minmax(240px, 1.4fr);
}

.attendance-list.redesigned {
  display: grid;
  gap: 10px;
}

.attendance-row-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: var(--commelio-white);
  box-shadow: var(--commelio-shadow-sm);
}

.attendance-row-card.exceptional {
  border-color: rgba(92, 201, 179, 0.55);
  background: rgba(92, 201, 179, 0.08);
}

.attendance-row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 8px;
}

.attendance-row-actions .primary-button,
.attendance-row-actions .ghost-button,
.ghost-button.small {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}

@media (max-width: 1080px) {
  .attendance-service-grid {
    grid-template-columns: 1fr;
  }

  .attendance-row-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .attendance-row-status,
  .attendance-row-actions {
    justify-self: stretch;
  }
}

@media (max-width: 720px) {
  .attendance-period-bar {
    display: grid;
  }

  .segmented-control,
  .attendance-week-nav,
  .attendance-day-nav,
  .field.compact {
    width: 100%;
  }

  .segmented-control button {
    flex: 1 1 130px;
  }

  .attendance-card-body,
  .attendance-detail-controls,
  .attendance-stats,
  .attendance-stats.today-zero,
  .attendance-stats.compact {
    grid-template-columns: 1fr;
  }

  .attendance-week-bars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .attendance-row-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.families-page {
  display: grid;
  gap: 16px;
}

.families-title {
  align-items: center;
}

.family-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.family-summary-strip button {
  appearance: none;
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: rgba(255, 255, 255, 0.92);
  color: var(--commelio-navy);
  padding: 12px 14px;
  text-align: left;
  box-shadow: var(--commelio-shadow-sm);
}

.family-summary-strip strong {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1;
}

.family-summary-strip span {
  color: var(--commelio-slate);
  font-size: 13px;
  font-weight: 700;
}

.families-toolbar {
  display: grid;
  gap: 12px;
}

.compact-tabs {
  justify-content: flex-start;
}

.family-search-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(180px, 220px);
  gap: 10px;
  align-items: end;
}

.family-search-field,
.sort-field {
  min-width: 0;
}

.families-filters {
  align-items: end;
  padding-top: 8px;
  border-top: 1px solid var(--commelio-border);
}

.check-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  color: var(--commelio-navy);
  font-weight: 700;
}

.families-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.family-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--commelio-shadow-sm);
}

.family-card header,
.family-card-footer,
.family-detail-hero,
.family-detail-actions,
.family-detail-block header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.family-card h3,
.family-detail-hero h2,
.family-detail-block h3 {
  margin: 0;
  color: var(--commelio-navy);
  font-family: var(--font-heading);
}

.family-card p,
.family-detail-hero p {
  margin: 4px 0 0;
  color: var(--commelio-slate);
  font-size: 13px;
}

.family-status,
.family-alert {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.family-status.valid,
.family-alert.valid {
  background: rgba(92, 201, 179, 0.18);
  color: #126B5E;
}

.family-status.warning,
.family-alert.warning {
  background: rgba(234, 182, 75, 0.18);
  color: #6B5000;
}

.family-status.danger,
.family-alert.danger {
  background: rgba(166, 64, 58, 0.12);
  color: #A6403A;
}

.family-children-list,
.family-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.family-children-list span {
  border: 1px solid rgba(18, 38, 58, 0.08);
  border-radius: var(--commelio-radius-sm);
  background: var(--commelio-background);
  color: var(--commelio-navy);
  padding: 7px 9px;
  font-weight: 800;
}

.family-contact {
  display: grid;
  gap: 3px;
  color: var(--commelio-slate);
}

.family-contact strong {
  color: var(--commelio-navy);
}

.family-contact a {
  color: var(--commelio-navy);
  text-decoration: none;
  font-weight: 700;
}

.family-card-footer {
  align-items: center;
  margin-top: auto;
  color: var(--commelio-slate);
  font-size: 12px;
}

.family-detail-page {
  display: grid;
  gap: 14px;
}

.family-detail-hero {
  align-items: center;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  padding: 16px 18px;
  box-shadow: var(--commelio-shadow-sm);
}

.family-back-link {
  appearance: none;
  display: inline-flex;
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--commelio-slate);
  padding: 0 0 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.family-back-link:hover {
  color: var(--commelio-navy);
}

.family-detail-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.family-detail-tabs {
  justify-content: flex-start;
}

.family-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.family-detail-block {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--commelio-border);
  border-radius: var(--commelio-radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

.family-detail-block .empty-state {
  min-height: 0;
  padding: 10px;
}

.family-mini-list {
  display: grid;
  gap: 8px;
}

.internal-note {
  margin: 0;
  color: var(--commelio-navy);
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .families-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .family-summary-strip,
  .family-detail-grid,
  .family-search-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .families-grid {
    grid-template-columns: 1fr;
  }

  .family-card header,
  .family-card-footer,
  .family-detail-hero {
    display: grid;
  }
}