/* Strnadi Design System — see /docs/design-system.md for rationale.
   Shared by auth pages (Razor Pages) and the future admin panel (Blazor). */

:root {
  /* Surfaces */
  --color-bg: #FAF8F3;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1EDE3;
  --color-border: #E3DDCB;

  /* Text */
  --color-text: #211F1A;
  --color-text-muted: #6B6558;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent: #211F1A;

  /* Brand */
  --color-primary: #1F4D3D;
  --color-primary-hover: #17392D;
  --color-primary-subtle: #E7EFEA;
  --color-accent: #D4930A;
  --color-accent-hover: #B87C08;

  /* Semantic */
  --color-success: #2F7D4F;
  --color-success-subtle: #E6F3EA;
  --color-warning: #C2660C;
  --color-warning-subtle: #FBEEDD;
  --color-danger: #B3261E;
  --color-danger-subtle: #FBE9E8;
  --color-info: #2563A8;
  --color-info-subtle: #E8F0F9;

  /* Typography */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* Radius & shadow */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(33, 31, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(33, 31, 26, 0.10);
  --shadow-lg: 0 12px 32px rgba(33, 31, 26, 0.14);

  --sidebar-width: 240px;
  --topbar-height: var(--space-10);
}

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

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3 {
  margin: 0 0 var(--space-2);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}

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

/* ---------- Buttons ---------- */

.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ss-btn--sm {
  width: auto;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.ss-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.ss-btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.ss-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.ss-btn--secondary:hover {
  background: var(--color-surface-alt);
}

.ss-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
}
.ss-btn--ghost:hover {
  background: var(--color-surface-alt);
}

.ss-btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-on-primary);
}
.ss-btn--danger:hover {
  background: #952019;
  border-color: #952019;
}

/* Branded external-login buttons follow each provider's guidelines */

.ss-btn--google {
  background: #FFFFFF;
  border-color: #DADCE0;
  color: #3C4043;
}
.ss-btn--google:hover {
  background: #F7F8F8;
  box-shadow: var(--shadow-sm);
}

.ss-btn--apple {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}
.ss-btn--apple:hover {
  background: #1a1a1a;
}

.ss-btn__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* ---------- Form fields ---------- */

.ss-field {
  margin-bottom: var(--space-4);
}

.ss-field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.ss-field__input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(212, 147, 10, 0.35);
}

.ss-field--invalid .ss-field__input {
  border-color: var(--color-danger);
}

.ss-field__hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ss-field__error {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

/* Pairs two or more .ss-field side by side to shorten tall forms (e.g. first/last name,
   password/confirm) instead of stacking every field full-width. Collapses back to a single
   column on narrow viewports. */
.ss-field-row {
  display: flex;
  gap: var(--space-4);
}
.ss-field-row > .ss-field {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .ss-field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ---------- Checkbox list (e.g. document consent on Register) ---------- */

.ss-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ss-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.ss-checkbox__input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.ss-checkbox__label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.ss-checkbox__label a {
  font-weight: var(--font-weight-medium);
}

/* ---------- Prose (long-form rendered content, e.g. a document's Markdown) ---------- */

.ss-prose {
  color: var(--color-text);
  line-height: var(--line-height-normal);
}
.ss-prose h1, .ss-prose h2, .ss-prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.ss-prose h1:first-child, .ss-prose h2:first-child, .ss-prose h3:first-child {
  margin-top: 0;
}
.ss-prose p, .ss-prose ul, .ss-prose ol, .ss-prose blockquote, .ss-prose table {
  margin: 0 0 var(--space-4);
}
.ss-prose a {
  color: var(--color-primary);
}
.ss-prose code {
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}
.ss-prose blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-4);
  color: var(--color-text-muted);
}
.ss-prose table {
  border-collapse: collapse;
  width: 100%;
}
.ss-prose th, .ss-prose td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--font-size-sm);
}

/* ---------- Alerts ---------- */

.ss-alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  background: var(--color-info-subtle);
  color: var(--color-info);
  font-size: var(--font-size-sm);
}
.ss-alert ul {
  margin: 0;
  padding-left: var(--space-4);
}
.ss-alert--success { border-color: var(--color-success); background: var(--color-success-subtle); color: var(--color-success); }
.ss-alert--warning { border-color: var(--color-warning); background: var(--color-warning-subtle); color: var(--color-warning); }
.ss-alert--danger  { border-color: var(--color-danger);  background: var(--color-danger-subtle);  color: var(--color-danger); }
.ss-alert:empty { display: none; }
.validation-summary-valid { display: none; }

/* ---------- Cards ---------- */

.ss-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
@media (max-width: 480px) {
  .ss-card {
    padding: var(--space-4);
  }
}

/* A card heading followed by a form or list needs more room than the default h1-h3 margin
   (--space-2) gives it - that default is tuned for body copy, not a section header sitting
   directly above dense form fields. */
.ss-section-heading {
  margin-bottom: var(--space-4);
}

/* ---------- Badges ---------- */

.ss-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}
.ss-badge--success { background: var(--color-success-subtle); color: var(--color-success); }
.ss-badge--warning  { background: var(--color-warning-subtle); color: var(--color-warning); }
.ss-badge--danger   { background: var(--color-danger-subtle); color: var(--color-danger); }

/* ---------- Consent list (e.g. document acceptance status on the account page) ---------- */

.ss-consent-list {
  display: flex;
  flex-direction: column;
}
.ss-consent-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.ss-consent-item:first-child {
  padding-top: 0;
}
.ss-consent-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.ss-consent-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ---------- Data table ---------- */

/* A table with enough columns (e.g. Users with the confidential columns shown) can need more
   width than its card has - without this, the table pushes past the card's right edge instead of
   shrinking, and the last column (usually a row action button) reads as cut off. Always wrap
   .ss-table in this so it scrolls horizontally inside the card instead. */
.ss-table-wrapper {
  overflow-x: auto;
}

.ss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.ss-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.ss-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* A sortable <ss-th> column header - same muted/uppercase look as a plain <th>, just clickable. */
.ss-table__sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}
.ss-table__sort-link:hover {
  color: var(--color-text);
}
.ss-table__sort-link--active {
  color: var(--color-primary);
}
.ss-table__sort-arrow {
  font-size: 0.6em;
}
.ss-table tbody tr:hover {
  background: var(--color-primary-subtle);
}

/* Optional search/filter bar sitting above a .ss-table, inside the same card. */
.ss-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ss-table-toolbar__search {
  flex: 1 1 200px;
  max-width: 280px;
}
/* Used when the toolbar only holds a single trailing item (the <ss-table> create-href button) -
   space-between would otherwise collapse it against the left edge with nothing to space against. */
.ss-table-toolbar--end {
  justify-content: flex-end;
}

/* The <ss-table search-*> form: optional column-select + search input + submit button, grouped
   so they wrap together as one unit inside .ss-table-toolbar instead of the select and input
   wrapping onto separate lines independently. */
.ss-table-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ss-table-search__field {
  width: auto;
  flex: 0 0 auto;
}

/* ---------- Stack ---------- */

.ss-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- Dashboard grid ---------- */

/* Splits the account/overview page into a wider main column and a narrower side column instead
   of one long stack of same-width cards. Collapses to a single column at the same breakpoint the
   admin shell itself collapses at, since the side column needs real width to read as a column at
   all. */
.ss-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 768px) {
  .ss-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Profile header ---------- */

/* Identity banner above the account page's cards - avatar initials + name + at-a-glance badges,
   so the page opens with something other than a form. */
.ss-profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ss-profile-header__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}
.ss-profile-header__meta h1 {
  margin-bottom: var(--space-1);
}
.ss-profile-header__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.ss-profile-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ---------- Admin panel shell ---------- */

.ss-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-primary);
  overflow-y: auto;
  z-index: 20;
}
.ss-sidebar__brand {
  padding: var(--space-5) var(--space-4);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.ss-sidebar__nav {
  display: flex;
  flex-direction: column;
}
.ss-sidebar__link {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.ss-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-primary);
}
.ss-sidebar__link--active {
  border-left-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-primary);
}

.ss-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 10;
}
.ss-topbar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.ss-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}
.ss-topbar__user form {
  margin: 0;
}
.ss-topbar__langs {
  display: flex;
  gap: var(--space-2);
}

.ss-admin-content {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  background: var(--color-bg);
}
.ss-admin-content__inner {
  max-width: 1440px;
  padding: var(--space-6);
}

@media (max-width: 768px) {
  .ss-sidebar {
    position: static;
    width: 100%;
    height: auto;
    overflow-x: auto;
  }
  .ss-sidebar__nav {
    flex-direction: row;
  }
  .ss-sidebar__link {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .ss-sidebar__link--active {
    border-left-color: transparent;
    border-bottom-color: var(--color-accent);
  }
  .ss-topbar {
    position: static;
    left: 0;
    height: auto;
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
  }
  .ss-admin-content {
    margin-left: 0;
    padding-top: 0;
  }
  .ss-admin-content__inner {
    padding: var(--space-4);
  }
}

/* ---------- Language switch ---------- */

.ss-lang-switch {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 10;
}
.ss-lang-switch__item {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
}
.ss-lang-switch__item:hover {
  background: var(--color-surface-alt);
}
.ss-lang-switch__item--active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
@media (max-width: 480px) {
  .ss-lang-switch {
    top: var(--space-2);
    right: var(--space-2);
  }
}

/* ---------- Auth layout ---------- */

.ss-auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
}
@media (max-width: 480px) {
  .ss-auth-shell {
    padding: var(--space-4);
    gap: var(--space-4);
  }
}

.ss-auth-wordmark {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.ss-auth-card {
  width: 100%;
  max-width: 420px;
}

/* For forms with more fields than a plain login (e.g. Register) - gives .ss-field-row pairs
   enough room without cramming each input. */
.ss-auth-card--wide {
  max-width: 560px;
}

.ss-auth-card h1 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-5);
}
@media (max-width: 480px) {
  .ss-auth-card h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
  }
}

.ss-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.ss-auth-divider::before,
.ss-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.ss-auth-providers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ss-auth-footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}