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

html { font-family: var(--font-sans); font-size: 16px; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

h1, h2, h3 { margin-block: 0 var(--space-3); line-height: 1.25; }

a { color: var(--color-primary); }

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

/* Buttons */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 2.25rem;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.app-btn:hover:not(:disabled) { background: var(--color-surface-2); }
.app-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.app-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.app-btn--primary:hover:not(:disabled) { background: var(--color-primary); filter: brightness(1.1); }
.app-btn--icon { min-inline-size: 2.25rem; padding-inline: 0; }

/* Form field */
.app-field { display: flex; flex-direction: column; gap: var(--space-1); margin-block-end: var(--space-4); }
.app-field__label { font-weight: 600; }
.app-field__required { color: var(--color-danger); margin-inline-start: var(--space-1); }
.app-field__error { color: var(--color-danger); font-size: 0.875rem; }
.app-field--invalid input, .app-field--invalid select { border-color: var(--color-danger); }

input, select, textarea {
  min-block-size: 2.25rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

/* Pager */
.app-pager { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; text-align: center; }
.app-pager__info { min-inline-size: 8rem; }

/* Modal (native dialog) */
.app-modal {
  inline-size: min(36rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow);
}
.app-modal::backdrop { background: rgb(0 0 0 / 0.5); }
.app-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-block-end: 1px solid var(--color-border); }
.app-modal__title { margin: 0; font-size: 1.125rem; }
.app-modal__body { padding: var(--space-4); }
.app-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4); border-block-start: 1px solid var(--color-border); }

/* Shell */
.app-shell { min-block-size: 100vh; display: flex; flex-direction: column; }
.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--header-height);
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}
.app-header__brand { font-weight: 700; margin-inline-end: auto; }
.app-main { flex: 1; padding: var(--space-6) var(--space-4); max-inline-size: 75rem; inline-size: 100%; margin-inline: auto; }
.app-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow); }
.app-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-danger); color: var(--color-danger); margin-block-end: var(--space-4); }
.app-muted { color: var(--color-text-muted); }
.app-office-switch { display: flex; align-items: center; gap: var(--space-2); }

.login-page { min-block-size: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.login-card { inline-size: min(26rem, 100%); }

#blazor-error-ui {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning);
  color: var(--color-bg);
  z-index: 1000;
}

@media (max-width: 480px) {
  .app-header { flex-wrap: wrap; padding-block: var(--space-2); }
}

/* Grid (AppDataGrid) */
.app-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.app-grid__toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.app-grid__scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
.app-grid__state { text-align: center; margin: 0; }
.app-grid__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.app-table { inline-size: 100%; border-collapse: collapse; background: var(--color-surface); }
.app-table th, .app-table td { padding: var(--space-2) var(--space-3); text-align: center; border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.app-table th { background: var(--color-surface-2); font-weight: 600; white-space: nowrap; }
.app-table tbody tr:last-child td { border-block-end: 0; }
.app-checks { display: grid; gap: var(--space-2); }
.app-check { display: flex; align-items: center; gap: var(--space-2); }
.app-header__nav { display: flex; gap: var(--space-3); }
.app-pre { white-space: pre-wrap; word-break: break-word; text-align: start; direction: ltr; margin: 0; }