*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background: var(--color-background);
  color: var(--color-on-surface);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
}

h1, h2, h3, p, figure { margin: 0; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

a { color: inherit; }

img { max-width: 100%; display: block; }

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

:focus-visible {
  outline: 2px solid var(--color-secondary-container);
  outline-offset: 2px;
}

/* --- Typography utility classes, matching the DESIGN.md type scale --- */
.text-headline-lg { font-size: var(--headline-lg-size); font-weight: var(--headline-lg-weight); line-height: var(--headline-lg-lh); }
.text-headline-md { font-size: var(--headline-md-size); font-weight: var(--headline-md-weight); line-height: var(--headline-md-lh); }
.text-headline-sm { font-size: var(--headline-sm-size); font-weight: var(--headline-sm-weight); line-height: var(--headline-sm-lh); }
.text-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.text-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--color-on-surface-variant); }
.text-label-md {
  font-size: var(--label-md-size); font-weight: var(--label-md-weight);
  line-height: var(--label-md-lh); letter-spacing: var(--label-md-tracking);
  color: var(--color-on-surface-variant);
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  border: none; border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: var(--body-md-size); font-weight: 600;
  cursor: pointer;
  text-decoration: none; /* some pages use <a class="btn"> for buttons that navigate - without this they'd show a browser-default underline */
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 2px 6px rgba(21, 72, 103, 0.18); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(21, 72, 103, 0.24); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.btn-secondary { background: var(--color-secondary-container); color: var(--color-primary); }
.btn-secondary:hover:not(:disabled) { background: #b3d9ef; transform: translateY(-1px); }
.btn-danger { background: var(--color-error-container); color: var(--color-on-error-container); }
.btn-danger:hover:not(:disabled) { background: #ffc7c1; transform: translateY(-1px); }
.btn-block { width: 100%; }

/* --- Inputs --- */
.field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.field input, .field select, .field textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  color: var(--color-on-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-secondary-container);
  box-shadow: 0 0 0 3px rgba(197, 226, 246, 0.6);
}
.field-error { color: var(--color-error); font-size: var(--body-sm-size); }

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* --- Chips --- */
.chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--label-md-size); font-weight: 600;
}
.chip-scheduled { background: rgba(197, 226, 246, 0.6); color: var(--color-primary); }
.chip-completed { background: var(--color-success-container); color: var(--color-success); }
.chip-cancelled { background: var(--color-error-container); color: var(--color-on-error-container); }

/* --- Layout --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }

.banner {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-size: var(--body-sm-size);
  border-left: 4px solid transparent;
}
.banner-error { background: var(--color-error-container); color: var(--color-on-error-container); border-left-color: var(--color-error); }
.banner-success { background: var(--color-success-container); color: var(--color-success); border-left-color: var(--color-success); }
.hidden { display: none !important; }

/* --- Pagination (assets/js/pagination.js renders this into a page's
   own container after any list that can grow long) --- */
.pagination-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--space-lg);
  padding: var(--space-lg) 0 var(--space-sm);
}
.pagination-status { color: var(--color-on-surface-variant); white-space: nowrap; }

/* --- Language switcher (assets/js/i18n.js's initLanguageSwitcher()
   inserts this into .topbar-actions, or a page's own
   [data-i18n-switcher-slot], on every page that calls it) --- */
.lang-switch { display: inline-flex; background: var(--color-surface-container); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.lang-switch-btn { border: none; background: none; padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--label-md-size); font-weight: 700; color: var(--color-on-surface-variant); cursor: pointer; }
.lang-switch-btn.active { background: var(--color-primary); color: white; }

/* --- Global footer (assets/js/branding.js inserts this on every page
   except the print-only documents) --- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-secondary-container);
  margin-top: auto; /* on shell pages: pins to the bottom of .main instead of riding up under short content */
  padding: var(--space-xl) var(--space-lg);
}
.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.site-footer-logo { height: 34px; width: auto; margin-bottom: var(--space-sm); }
.site-footer-tagline { font-size: var(--body-sm-size); color: #FFFFFF; font-weight: 600; }
.site-footer-copy { font-size: var(--label-md-size); color: var(--color-secondary-container); }