/*
 * shadcn/ui design layer for the server-rendered Twig application.
 * The tokens follow shadcn's CSS-variable model while retaining TAPV blue as
 * the brand primary. Existing backend forms and progressive enhancement stay
 * framework-independent.
 */
:root {
  --background: 210 40% 98%;
  --foreground: 215 28% 17%;
  --card: 0 0% 100%;
  --card-foreground: 215 28% 17%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 28% 17%;
  --primary: 209 82% 30%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 215 28% 17%;
  --muted-token: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 204 64% 94%;
  --accent-foreground: 209 82% 25%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --success-token: 151 55% 33%;
  --warning-token: 36 92% 43%;
  --border-token: 214 32% 91%;
  --input-token: 214 32% 91%;
  --ring: 209 82% 40%;
  --radius: 0.625rem;

  /* Compatibility aliases used by the existing templates. */
  --blue: hsl(var(--primary));
  --blue-dark: hsl(var(--accent-foreground));
  --ice: hsl(var(--accent));
  --ink: hsl(var(--foreground));
  --muted: hsl(var(--muted-foreground));
  --line: hsl(var(--border-token));
  --bg: hsl(var(--background));
  --white: hsl(var(--card));
  --danger: hsl(var(--destructive));
  --success: hsl(var(--success-token));
  --warning: hsl(var(--warning-token));
  --shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
}

* {
  border-color: hsl(var(--border-token));
}

html {
  color-scheme: light;
}

body[data-ui="shadcn"] {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
}

body[data-ui="shadcn"] h1,
body[data-ui="shadcn"] h2,
body[data-ui="shadcn"] h3 {
  color: hsl(var(--foreground));
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.025em;
}

body[data-ui="shadcn"] a {
  color: hsl(var(--primary));
}

body[data-ui="shadcn"] button,
body[data-ui="shadcn"] input,
body[data-ui="shadcn"] select,
body[data-ui="shadcn"] textarea {
  font: inherit;
}

body[data-ui="shadcn"] :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

body[data-ui="shadcn"] :is(input, select, textarea):disabled,
body[data-ui="shadcn"] button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Button */
body[data-ui="shadcn"] .button,
body[data-ui="shadcn"] .not-found-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms;
}

body[data-ui="shadcn"] :is(.button.primary, .button-primary, .not-found-action) {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

body[data-ui="shadcn"] :is(.button.primary, .button-primary, .not-found-action):hover {
  background: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
  transform: none;
}

body[data-ui="shadcn"] .button.secondary {
  border-color: hsl(var(--input-token));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

body[data-ui="shadcn"] .button.secondary:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

body[data-ui="shadcn"] .button.danger {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

body[data-ui="shadcn"] .text-button {
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  color: hsl(var(--primary));
  font-size: 0.8125rem;
  font-weight: 500;
}

body[data-ui="shadcn"] .text-button:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Card */
body[data-ui="shadcn"] :is(
  .panel,
  .auth-card,
  .program-card,
  .form-management-card,
  .application-form-card,
  .form-url-card,
  .closed-card,
  .reference-card,
  .editor-publish-bar
) {
  border: 1px solid hsl(var(--border-token));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

body[data-ui="shadcn"] .panel-heading {
  padding: 1.5rem 1.5rem 1rem;
}

body[data-ui="shadcn"] .panel-heading h2,
body[data-ui="shadcn"] .panel > h2 {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

body[data-ui="shadcn"] .panel-heading p,
body[data-ui="shadcn"] .panel.compact > p {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

/* Input, textarea and select */
body[data-ui="shadcn"] :is(
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .field textarea,
  .field select,
  .stack-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .stack-form select,
  .stack-form textarea,
  .filter-bar input,
  .filter-bar select,
  .inline-form input,
  .inline-form select,
  .inline-add input,
  .editor-copy input,
  .editor-copy textarea,
  .editor-grid input,
  .editor-grid select,
  .editor-grid textarea,
  .condition-row input,
  .condition-row select,
  .form-settings-grid input,
  .form-settings-grid textarea,
  .form-settings-grid select,
  .form-url-field input,
  .form-recipient-add input,
  .password-form input
) {
  min-height: 2.5rem;
  border: 1px solid hsl(var(--input-token));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
  outline: none;
}

body[data-ui="shadcn"] :is(
  .field input,
  .field textarea,
  .field select,
  .stack-form input,
  .stack-form select,
  .stack-form textarea,
  .filter-bar input,
  .filter-bar select,
  .inline-form input,
  .inline-form select,
  .inline-add input,
  .editor-copy input,
  .editor-copy textarea,
  .editor-grid input,
  .editor-grid select,
  .editor-grid textarea,
  .condition-row input,
  .condition-row select,
  .form-settings-grid input,
  .form-settings-grid textarea,
  .form-settings-grid select,
  .form-url-field input,
  .form-recipient-add input,
  .password-form input
):focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.16);
  outline: none;
}

body[data-ui="shadcn"] textarea {
  resize: vertical;
}

body[data-ui="shadcn"] ::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.85;
}

body[data-ui="shadcn"] :is(.field > label, .choice-group > legend, .stack-form label) {
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
}

body[data-ui="shadcn"] .field-help {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

body[data-ui="shadcn"] .field-error {
  color: hsl(var(--destructive));
  font-size: 0.8125rem;
  font-weight: 500;
}

body[data-ui="shadcn"] .has-error :is(input, textarea, select) {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 1px hsl(var(--destructive) / 0.08);
}

/* Badge */
body[data-ui="shadcn"] :is(.status, .mail-status, .program-state, .access-badge, .recipient-count, .form-version-badge, .form-image-state, .self-badge) {
  min-height: 1.375rem;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
}

body[data-ui="shadcn"] :is(.status-new, .mail-sending, .access-badge, .recipient-count) {
  border-color: hsl(var(--primary) / 0.18);
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

body[data-ui="shadcn"] :is(.status-approved, .mail-sent, .program-state.is-open, .form-version-badge.is-live, .form-image-state.has-image) {
  border-color: hsl(var(--success-token) / 0.2);
  background: hsl(var(--success-token) / 0.09);
  color: hsl(var(--success-token));
}

body[data-ui="shadcn"] :is(.status-reviewing, .mail-pending, .mail-retry, .program-state.is-closed, .form-version-badge.is-draft) {
  border-color: hsl(var(--warning-token) / 0.2);
  background: hsl(var(--warning-token) / 0.09);
  color: hsl(var(--warning-token));
}

body[data-ui="shadcn"] :is(.status-rejected, .mail-failed) {
  border-color: hsl(var(--destructive) / 0.2);
  background: hsl(var(--destructive) / 0.08);
  color: hsl(var(--destructive));
}

/* Alert */
body[data-ui="shadcn"] .alert {
  position: relative;
  padding: 0.875rem 1rem;
  border: 1px solid hsl(var(--border-token));
  border-left-width: 1px;
  border-radius: var(--radius);
  background: hsl(var(--card));
  font-size: 0.875rem;
}

body[data-ui="shadcn"] .alert-success {
  border-color: hsl(var(--success-token) / 0.25);
  background: hsl(var(--success-token) / 0.06);
  color: hsl(var(--success-token));
}

body[data-ui="shadcn"] .alert-error {
  border-color: hsl(var(--destructive) / 0.25);
  background: hsl(var(--destructive) / 0.05);
  color: hsl(var(--destructive));
}

/* Public application surfaces */
body.public-page[data-ui="shadcn"] {
  background: hsl(var(--background));
}

body.public-page[data-ui="shadcn"] .public-header {
  max-width: 72rem;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid hsl(var(--border-token));
  background: hsl(var(--card));
}

body.public-page[data-ui="shadcn"] .tapv-logo {
  width: 8.5rem;
}

body.public-page[data-ui="shadcn"] .program-tag,
body[data-ui="shadcn"] .eyebrow {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

body.public-page[data-ui="shadcn"] :is(.form-shell, .program-shell) {
  max-width: 58rem;
  padding: 4rem 2rem 6rem;
}

body.public-page[data-ui="shadcn"] .program-shell {
  max-width: 72rem;
}

body.public-page[data-ui="shadcn"] :is(.form-intro, .program-intro) {
  max-width: 48rem;
  margin-bottom: 2rem;
}

body.public-page[data-ui="shadcn"] :is(.form-intro h1, .program-intro h1, .success-shell h1) {
  color: hsl(var(--foreground));
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

body.public-page[data-ui="shadcn"] :is(.form-intro p, .program-intro p) {
  max-width: 44rem;
  margin-top: 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1.7;
}

body.public-page[data-ui="shadcn"] .application-form {
  padding: 2rem;
  border: 1px solid hsl(var(--border-token));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

body.public-page[data-ui="shadcn"] .form-fields {
  display: grid;
  gap: 1.5rem;
}

body.public-page[data-ui="shadcn"] .form-fields > .field {
  margin: 0;
}

body.public-page[data-ui="shadcn"] .field-heading {
  margin: 0.75rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid hsl(var(--border-token));
}

body.public-page[data-ui="shadcn"] .field-heading h2 {
  font-size: 1.125rem;
}

body.public-page[data-ui="shadcn"] .field-divider {
  margin: 0.5rem 0;
}

body.public-page[data-ui="shadcn"] .choice span {
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  border-color: hsl(var(--input-token));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  font-size: 0.875rem;
}

body.public-page[data-ui="shadcn"] .choice input:checked + span {
  border-color: hsl(var(--primary));
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-weight: 500;
}

body.public-page[data-ui="shadcn"] .check-line input {
  accent-color: hsl(var(--primary));
}

body.public-page[data-ui="shadcn"] .submit-row {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

body.public-page[data-ui="shadcn"] .program-list {
  gap: 1rem;
}

body.public-page[data-ui="shadcn"] .program-card {
  min-height: 15rem;
  padding: 1.5rem;
}

body.public-page[data-ui="shadcn"] .program-card:hover {
  border-color: hsl(var(--primary) / 0.35);
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.05);
}

body.public-page[data-ui="shadcn"] .program-link {
  color: hsl(var(--primary));
  font-size: 0.875rem;
  font-weight: 500;
}

body.public-page[data-ui="shadcn"] .turnstile-security,
body.public-page[data-ui="shadcn"] .field input[type="file"] {
  border-color: hsl(var(--input-token));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--muted-token));
}

body.public-page[data-ui="shadcn"] .site-footer {
  background: hsl(var(--foreground));
}

/* Admin application shell */
body.admin-page[data-ui="shadcn"] {
  background: hsl(var(--background));
}

body.admin-page[data-ui="shadcn"] .sidebar {
  width: 16rem;
  padding: 1.25rem 0.875rem;
  border-color: hsl(var(--border-token));
  background: hsl(var(--card));
}

body.admin-page[data-ui="shadcn"] .admin-main {
  margin-left: 16rem;
}

body.admin-page[data-ui="shadcn"] .admin-brand {
  padding: 0.25rem 0.75rem 1.25rem;
  color: hsl(var(--foreground));
  font-weight: 600;
}

body.admin-page[data-ui="shadcn"] .sidebar nav {
  gap: 0.125rem;
}

body.admin-page[data-ui="shadcn"] .sidebar nav a {
  padding: 0.625rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  font-weight: 500;
}

body.admin-page[data-ui="shadcn"] .sidebar nav a:hover,
body.admin-page[data-ui="shadcn"] .sidebar nav a.active {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

body.admin-page[data-ui="shadcn"] .avatar {
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
}

body.admin-page[data-ui="shadcn"] .topbar {
  height: 3.75rem;
  padding: 0 2rem;
  border-color: hsl(var(--border-token));
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(10px);
}

body.admin-page[data-ui="shadcn"] .content {
  padding: 2rem 2rem 5rem;
}

body.admin-page[data-ui="shadcn"] :is(.page-heading, .detail-heading) {
  margin-bottom: 1.5rem;
}

body.admin-page[data-ui="shadcn"] :is(.page-heading h1, .detail-heading h1) {
  color: hsl(var(--foreground));
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.2;
}

body.admin-page[data-ui="shadcn"] .stat-grid {
  gap: 1rem;
}

body.admin-page[data-ui="shadcn"] .stat-card {
  min-height: 8rem;
  padding: 1.25rem;
  border: 1px solid hsl(var(--border-token));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

body.admin-page[data-ui="shadcn"] .stat-card strong {
  color: hsl(var(--foreground));
  font-size: 2rem;
  font-weight: 600;
}

body.admin-page[data-ui="shadcn"] .stat-card.featured {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

body.admin-page[data-ui="shadcn"] .filter-bar {
  border-color: hsl(var(--border-token));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

body.admin-page[data-ui="shadcn"] table {
  font-size: 0.8125rem;
}

body.admin-page[data-ui="shadcn"] th {
  background: hsl(var(--muted-token) / 0.65);
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

body.admin-page[data-ui="shadcn"] th,
body.admin-page[data-ui="shadcn"] td {
  padding: 0.75rem 1rem;
  border-color: hsl(var(--border-token));
}

body.admin-page[data-ui="shadcn"] tbody tr:hover {
  background: hsl(var(--muted-token) / 0.5);
}

body.admin-page[data-ui="shadcn"] :is(.field-editor-card, .form-permission-list, .form-permission-list label, .danger-zone) {
  border-color: hsl(var(--border-token));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

body.admin-page[data-ui="shadcn"] .field-card-head {
  border-radius: var(--radius);
  background: hsl(var(--muted-token) / 0.6);
}

body.admin-page[data-ui="shadcn"] .field-actions button,
body.admin-page[data-ui="shadcn"] .subheading button,
body.admin-page[data-ui="shadcn"] .condition-row button,
body.admin-page[data-ui="shadcn"] .field-type-chip,
body.admin-page[data-ui="shadcn"] .dialog-close {
  border-color: hsl(var(--input-token));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

body.admin-page[data-ui="shadcn"] .field-type-chip:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

body.admin-page[data-ui="shadcn"] .toggle-card,
body.admin-page[data-ui="shadcn"] .form-recipient-add,
body.admin-page[data-ui="shadcn"] .field-list-empty,
body.admin-page[data-ui="shadcn"] .permission-note,
body.admin-page[data-ui="shadcn"] .password-security-note {
  border: 1px solid hsl(var(--border-token));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--muted-token) / 0.65);
}

body.admin-page[data-ui="shadcn"] :is(.password-dialog, .permission-dialog) {
  border: 1px solid hsl(var(--border-token));
  border-radius: var(--radius);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
}

body.admin-page[data-ui="shadcn"] :is(.password-dialog, .permission-dialog)::backdrop {
  background: rgb(15 23 42 / 0.5);
  backdrop-filter: blur(2px);
}

/* Auth */
body.auth-page[data-ui="shadcn"] {
  min-height: 100vh;
  padding: 2rem;
  background: hsl(var(--background));
}

body.auth-page[data-ui="shadcn"] .auth-logo {
  color: hsl(var(--foreground));
  font-weight: 600;
}

body.auth-page[data-ui="shadcn"] .auth-card {
  padding: 2rem;
}

body.auth-page[data-ui="shadcn"] .auth-card h1 {
  color: hsl(var(--foreground));
  font-size: 1.75rem;
  font-weight: 650;
}

body.auth-page[data-ui="shadcn"] .auth-card > p {
  color: hsl(var(--muted-foreground));
}

/* Mobile */
@media (max-width: 760px) {
  body.admin-page[data-ui="shadcn"] .sidebar {
    width: min(18rem, calc(100vw - 3rem));
  }

  body.admin-page[data-ui="shadcn"] .admin-main {
    margin-left: 0;
  }

  body.admin-page[data-ui="shadcn"] .content {
    padding: 1.5rem 1rem 4rem;
  }

  body.public-page[data-ui="shadcn"] .public-header {
    padding: 1rem 1.25rem;
  }

  body.public-page[data-ui="shadcn"] :is(.form-shell, .program-shell) {
    padding: 2.5rem 1rem 4.5rem;
  }

  body.public-page[data-ui="shadcn"] .application-form {
    padding: 1.25rem;
  }

  body.public-page[data-ui="shadcn"] :is(.form-intro h1, .program-intro h1, .success-shell h1) {
    font-size: clamp(1.75rem, 9vw, 2.375rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="shadcn"] *,
  body[data-ui="shadcn"] *::before,
  body[data-ui="shadcn"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}