/* Shared standalone page skin (non-base templates) */
:root {
  --ux-surface: #ffffff;
  --ux-surface-soft: #f8fafc;
  --ux-text: #1f2937;
  --ux-muted: #64748b;
  --ux-border: #dbe3ee;
  --ux-accent: #2563eb;
  --ux-radius: 12px;
}

html[data-bs-theme="dark"],
.dark,
body.dark {
  --ux-surface: #0f1e34;
  --ux-surface-soft: #122844;
  --ux-text: #e5edf8;
  --ux-muted: #9fb0c8;
  --ux-border: #2b3d56;
  --ux-accent: #60a5fa;
}

body {
  color: var(--ux-text) !important;
}

h1, h2, h3, h4, h5, h6, label, .form-label {
  color: var(--ux-text) !important;
}

small, .small, .text-muted {
  color: var(--ux-muted) !important;
}

.container,
.card,
.panel,
.paper,
.auth-card,
.form-card {
  border: 1px solid var(--ux-border) !important;
  border-radius: var(--ux-radius) !important;
}

.card-header,
.panel-heading {
  border-bottom: 1px solid var(--ux-border) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ux-accent) 22%, transparent), color-mix(in srgb, var(--ux-accent) 8%, transparent)) !important;
}

html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .panel-heading,
.dark .card-header,
.dark .panel-heading,
body.dark .card-header,
body.dark .panel-heading {
  background: linear-gradient(135deg, #1a3a66 0%, #132c4d 100%) !important;
}

input,
select,
textarea,
.form-control,
.form-select {
  background: var(--ux-surface-soft) !important;
  color: var(--ux-text) !important;
  border: 1px solid var(--ux-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ux-muted) !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--ux-accent) !important;
  box-shadow: 0 0 0 0.16rem rgba(37, 99, 235, 0.2) !important;
}

table,
.table {
  color: var(--ux-text) !important;
  border-color: var(--ux-border) !important;
}

thead th,
.table thead th {
  background: var(--ux-surface-soft) !important;
  color: var(--ux-text) !important;
}

.btn {
  border-radius: 10px !important;
  font-weight: 600;
}

.btn-primary,
.btn-falcon-primary {
  border-color: color-mix(in srgb, var(--ux-accent) 78%, #0f172a) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ux-accent) 24%, transparent) !important;
}

.table-responsive {
  border: 1px solid var(--ux-border) !important;
  border-radius: 10px !important;
  background: var(--ux-surface) !important;
}