/*
 * SameFrame Admin Dashboard — component styles.
 * Implements docs/brandbook.md §5 (component direction), §6 (voice is
 * applied in templates, not here), §7 (layout/spacing/RTL).
 *
 * Logical CSS properties are used throughout (margin-inline-*,
 * padding-inline-*, inset-inline-*, text-align follows `dir`) per
 * brandbook §7.4, so RTL campaigns/locales work via `dir="rtl"` alone.
 */

/* ---------- Reset & base ---------- */

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sf-font-ui);
  font-weight: var(--sf-font-regular);
  font-size: var(--sf-text-base);
  line-height: var(--sf-text-base-lh);
  color: var(--sf-neutral-900);
  background: var(--sf-neutral-100);
}

h1, h2, h3, h4 {
  font-weight: var(--sf-font-bold);
  color: var(--sf-primary-900);
  margin-block: 0 var(--sf-space-4);
  line-height: 1.25;
}

h1 { font-size: var(--sf-text-2xl); line-height: var(--sf-text-2xl-lh); }
h2 { font-size: var(--sf-text-xl); line-height: var(--sf-text-xl-lh); }
h3 { font-size: var(--sf-text-lg); line-height: var(--sf-text-lg-lh); font-weight: var(--sf-font-semibold); }

p { margin-block: 0 var(--sf-space-4); }

a {
  color: var(--sf-primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--sf-primary-500); }

/* Never remove focus outlines (brandbook §5.3) */
:focus-visible {
  outline: 2px solid var(--sf-primary-500);
  outline-offset: 2px;
}

small, .sf-text-xs { font-size: var(--sf-text-xs); line-height: var(--sf-text-xs-lh); }
.sf-text-sm { font-size: var(--sf-text-sm); line-height: var(--sf-text-sm-lh); color: var(--sf-neutral-700); }
.sf-mono { font-family: var(--sf-font-mono); }

/* ---------- App shell / nav ---------- */

.sf-app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sf-topnav {
  background: var(--sf-primary-900);
  color: var(--sf-neutral-0);
  display: flex;
  align-items: center;
  gap: var(--sf-space-6);
  padding-inline: var(--sf-space-6);
  padding-block: var(--sf-space-3);
}

.sf-topnav__brand {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  font-weight: var(--sf-font-extrabold);
  font-size: var(--sf-text-lg);
  color: var(--sf-neutral-0);
  text-decoration: none;
  margin-inline-end: auto;
}

.sf-topnav__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-secondary-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-font-bold);
  flex-shrink: 0;
}

.sf-topnav__links {
  display: flex;
  gap: var(--sf-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-topnav__links a {
  color: var(--sf-primary-100);
  text-decoration: none;
  font-weight: var(--sf-font-medium);
  font-size: var(--sf-text-sm);
  padding-block: var(--sf-space-1);
  border-block-end: 2px solid transparent;
}

.sf-topnav__links a:hover,
.sf-topnav__links a[aria-current="page"] {
  color: var(--sf-neutral-0);
  border-block-end-color: var(--sf-secondary-500);
}

.sf-topnav__meta {
  font-size: var(--sf-text-sm);
  color: var(--sf-primary-300);
}

.sf-topnav__meta form {
  display: inline;
}

.sf-topnav__meta button {
  background: none;
  border: none;
  color: var(--sf-primary-300);
  text-decoration: underline;
  font-size: var(--sf-text-sm);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.sf-topnav__meta button:hover { color: var(--sf-neutral-0); }

/* ---------- Grid / content container ---------- */

.sf-container {
  max-width: var(--sf-content-max-width);
  margin-inline: auto;
  padding-inline: var(--sf-space-6);
  padding-block: var(--sf-space-8);
  width: 100%;
}

.sf-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sf-grid-gutter);
}

/* Utility column spans for the 12-col admin grid */
.sf-col-4 { grid-column: span 4; }
.sf-col-6 { grid-column: span 6; }
.sf-col-8 { grid-column: span 8; }
.sf-col-12 { grid-column: span 12; }

@media (max-width: 767px) {
  .sf-col-4, .sf-col-6, .sf-col-8 { grid-column: span 12; }
}

.sf-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sf-space-4);
  margin-block-end: var(--sf-space-6);
  flex-wrap: wrap;
}

.sf-page-header h1 { margin-block-end: var(--sf-space-1); }

.sf-page-header__eyebrow {
  font-size: var(--sf-text-sm);
  color: var(--sf-neutral-500);
  margin-block-end: var(--sf-space-1);
}

.sf-page-header__actions {
  display: flex;
  gap: var(--sf-space-3);
  flex-shrink: 0;
}

.sf-plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sf-space-2); }
.sf-stack { display: flex; flex-direction: column; gap: var(--sf-space-4); }
.sf-stack-6 { display: flex; flex-direction: column; gap: var(--sf-space-6); }
.sf-row { display: flex; align-items: center; gap: var(--sf-space-3); }
.sf-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-3); }

/* ---------- Cards (brandbook §5.4) ---------- */

.sf-card {
  background: var(--sf-neutral-0);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-sm);
  padding: var(--sf-space-6);
}

.sf-card--interactive {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.15s ease;
}
.sf-card--interactive:hover { box-shadow: var(--sf-shadow-md); }

.sf-card__title {
  font-size: var(--sf-text-xl);
  font-weight: var(--sf-font-semibold);
  color: var(--sf-primary-900);
  margin: 0 0 var(--sf-space-1);
}

.sf-card__meta {
  font-size: var(--sf-text-sm);
  color: var(--sf-neutral-500);
}

.sf-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-space-6);
}
@media (max-width: 1023px) {
  .sf-card-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sf-card-list { grid-template-columns: 1fr; }
}

/* ---------- Buttons (brandbook §5.2) ---------- */

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  font-family: var(--sf-font-ui);
  font-weight: var(--sf-font-semibold);
  font-size: var(--sf-text-base);
  border-radius: var(--sf-radius-md);
  padding-inline: var(--sf-space-6);
  padding-block: var(--sf-space-3);
  min-height: 44px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.sf-btn--primary {
  background: var(--sf-primary-500);
  color: var(--sf-neutral-0);
}
.sf-btn--primary:hover { background: var(--sf-primary-700); }

.sf-btn--secondary {
  background: transparent;
  border-color: var(--sf-primary-500);
  color: var(--sf-primary-500);
}
.sf-btn--secondary:hover { background: var(--sf-primary-100); }

.sf-btn--ghost {
  background: transparent;
  color: var(--sf-primary-700);
  text-decoration: underline;
  padding-inline: var(--sf-space-2);
}
.sf-btn--ghost:hover { color: var(--sf-primary-500); }

.sf-btn--destructive {
  background: var(--sf-error-500);
  color: var(--sf-neutral-0);
}
.sf-btn--destructive:hover { background: var(--sf-error-500); filter: brightness(0.85); }

.sf-btn--sm {
  padding-inline: var(--sf-space-4);
  padding-block: var(--sf-space-2);
  font-size: var(--sf-text-sm);
  min-height: 36px;
}

.sf-btn:disabled,
.sf-btn[aria-disabled="true"] {
  background: var(--sf-neutral-300);
  border-color: var(--sf-neutral-300);
  color: var(--sf-neutral-500);
  cursor: not-allowed;
}

/* ---------- Forms (brandbook §5.3) ---------- */

.sf-field {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
  margin-block-end: var(--sf-space-4);
}

.sf-field label,
.sf-field legend {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-font-medium);
  color: var(--sf-neutral-900);
}

.sf-field__required {
  font-weight: var(--sf-font-regular);
  color: var(--sf-neutral-500);
}

.sf-field__hint {
  font-size: var(--sf-text-sm);
  color: var(--sf-neutral-500);
}

.sf-field__error {
  font-size: var(--sf-text-sm);
  color: var(--sf-error-500);
}

.sf-input,
.sf-select,
.sf-textarea {
  font-family: var(--sf-font-ui);
  font-size: var(--sf-text-base);
  color: var(--sf-neutral-900);
  background: var(--sf-neutral-0);
  border: 1px solid var(--sf-neutral-300);
  border-radius: var(--sf-radius-sm);
  padding-inline: var(--sf-space-3);
  padding-block: var(--sf-space-2);
  min-height: 44px;
  width: 100%;
}

.sf-textarea { min-height: 96px; padding-block: var(--sf-space-2); }

.sf-input:focus-visible,
.sf-select:focus-visible,
.sf-textarea:focus-visible {
  outline: 2px solid var(--sf-primary-500);
  outline-offset: 1px;
  border-color: var(--sf-primary-500);
}

.sf-input--error,
.sf-textarea--error {
  border-color: var(--sf-error-500);
}

.sf-field--color {
  flex-direction: row;
  align-items: center;
  gap: var(--sf-space-3);
}

.sf-color-input {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--sf-neutral-300);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-neutral-0);
  cursor: pointer;
  flex-shrink: 0;
}

.sf-color-swatch-row {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
}

.sf-color-hex {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-sm);
  max-width: 120px;
}

.sf-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-space-2);
}
.sf-checkbox-row input[type="checkbox"] {
  margin-block-start: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

fieldset {
  border: 1px solid var(--sf-neutral-300);
  border-radius: var(--sf-radius-md);
  padding: var(--sf-space-4);
  margin: 0 0 var(--sf-space-4);
}

/* ---------- Contrast preview swatch (campaign branding form) ---------
   Live, client-side-only preview of the primary_color brand slot
   against white button text, per brandbook §8.8 / §8.3 rule 2. This is
   a UX nicety, not the real WCAG AA pass/fail validation §8.3 rule 2
   requires — that belongs in a WTForms validator (backend scope). */

.sf-contrast-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sf-space-2);
  margin-block-end: var(--sf-space-2);
}

.sf-contrast-preview__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--sf-space-6);
  border-radius: var(--sf-radius-md);
  font-weight: var(--sf-font-semibold);
  color: var(--sf-neutral-0);
  background: var(--sf-primary-500);
  border: 1px solid var(--sf-neutral-300);
}

.sf-contrast-preview__warning {
  font-size: var(--sf-text-sm);
  color: var(--sf-warning-500);
}

.sf-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sf-space-3);
}
@media (max-width: 767px) {
  .sf-checkbox-grid { grid-template-columns: 1fr; }
}

.sf-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-space-3);
  border: 1px solid var(--sf-neutral-300);
  border-radius: var(--sf-radius-sm);
  padding: var(--sf-space-3);
}
.sf-checkbox-card:has(input:checked) {
  border-color: var(--sf-primary-500);
  background: var(--sf-primary-100);
}
.sf-checkbox-card input { margin-block-start: 3px; flex-shrink: 0; }
.sf-checkbox-card__title { font-weight: var(--sf-font-medium); }
.sf-checkbox-card__meta { font-size: var(--sf-text-sm); color: var(--sf-neutral-500); }

/* ---------- Upload / logo preview (brandbook §5.5, adapted for admin) --- */

.sf-dropzone {
  border: 2px dashed var(--sf-neutral-300);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-8);
  text-align: center;
  background: var(--sf-neutral-100);
}

.sf-dropzone:has(input:focus-visible) {
  border-color: var(--sf-primary-500);
  background: var(--sf-primary-100);
}

.sf-logo-preview {
  display: flex;
  align-items: center;
  gap: var(--sf-space-4);
  margin-block-end: var(--sf-space-3);
}

.sf-logo-preview__img {
  max-height: 64px;
  max-width: 160px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-neutral-0);
  border: 1px solid var(--sf-neutral-300);
  padding: var(--sf-space-2);
  object-fit: contain;
}

.sf-logo-preview__empty {
  height: 64px;
  width: 160px;
  border-radius: var(--sf-radius-sm);
  border: 1px dashed var(--sf-neutral-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-neutral-500);
  font-size: var(--sf-text-xs);
}

/* ---------- Status badges (brandbook §5.6) ---------- */

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-1);
  border-radius: 999px;
  padding-inline: var(--sf-space-3);
  padding-block: var(--sf-space-1);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-font-semibold);
  line-height: var(--sf-text-xs-lh);
  white-space: nowrap;
}

/* Canonical mapping — do not introduce ad hoc colors here. */
.sf-badge--pending  { background: var(--sf-pending-100);  color: var(--sf-pending-500); }
.sf-badge--success  { background: var(--sf-success-100);  color: var(--sf-success-500); }
.sf-badge--error    { background: var(--sf-error-100);    color: var(--sf-error-500); }
.sf-badge--warning  { background: var(--sf-warning-100);  color: var(--sf-warning-500); }
/* Neutral badge for DRAFT/CLOSED — non-active, non-alarming states that
   don't map cleanly to the 4 canonical semantic states (see brandbook
   note in the admin campaign-status mapping section below). */
.sf-badge--neutral  { background: var(--sf-neutral-100); color: var(--sf-neutral-700); border: 1px solid var(--sf-neutral-300); }

.sf-badge__icon { width: 12px; height: 12px; flex-shrink: 0; }

/* ---------- Alerts / flash messages ---------- */

.sf-alert {
  border-radius: var(--sf-radius-sm);
  padding: var(--sf-space-4);
  font-size: var(--sf-text-sm);
  margin-block-end: var(--sf-space-4);
  border-inline-start: 4px solid transparent;
}
.sf-alert--error   { background: var(--sf-error-100);   color: var(--sf-error-500);   border-inline-start-color: var(--sf-error-500); }
.sf-alert--success { background: var(--sf-success-100); color: var(--sf-success-500); border-inline-start-color: var(--sf-success-500); }
.sf-alert--warning { background: var(--sf-warning-100); color: var(--sf-warning-500); border-inline-start-color: var(--sf-warning-500); }
.sf-alert--info     { background: var(--sf-primary-100); color: var(--sf-primary-900); border-inline-start-color: var(--sf-primary-500); }

/* ---------- Tables (employee links list) ---------- */

.sf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sf-neutral-0);
  border-radius: var(--sf-radius-md);
  overflow: hidden;
}

.sf-table th,
.sf-table td {
  text-align: start;
  padding-inline: var(--sf-space-4);
  padding-block: var(--sf-space-3);
  border-block-end: 1px solid var(--sf-neutral-300);
  font-size: var(--sf-text-sm);
}

.sf-table th {
  background: var(--sf-neutral-100);
  color: var(--sf-neutral-700);
  font-weight: var(--sf-font-semibold);
  text-transform: uppercase;
  font-size: var(--sf-text-xs);
  letter-spacing: 0.02em;
}

.sf-table tbody tr:last-child td { border-block-end: none; }
.sf-table tbody tr:hover { background: var(--sf-neutral-100); }

/* ---------- Link/token display ---------- */

.sf-link-box {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  background: var(--sf-neutral-100);
  border: 1px solid var(--sf-neutral-300);
  border-radius: var(--sf-radius-sm);
  padding-inline: var(--sf-space-3);
  padding-block: var(--sf-space-2);
}

.sf-link-box input {
  border: none;
  background: transparent;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-sm);
  color: var(--sf-neutral-700);
  flex: 1;
  min-height: auto;
  padding: 0;
}
.sf-link-box input:focus-visible { outline: none; }

/* ---------- Empty states ---------- */

.sf-empty-state {
  text-align: center;
  padding-block: var(--sf-space-16);
  color: var(--sf-neutral-500);
}
.sf-empty-state h3 { color: var(--sf-neutral-700); }

/* ---------- Login page ---------- */

.sf-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-neutral-100);
  padding: var(--sf-space-6);
}

.sf-auth-card {
  width: 100%;
  max-width: 400px;
}

.sf-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  justify-content: center;
  margin-block-end: var(--sf-space-6);
  font-weight: var(--sf-font-extrabold);
  font-size: var(--sf-text-xl);
  color: var(--sf-primary-900);
}

/* ---------- Section divider / helper text ---------- */

.sf-section-intro {
  color: var(--sf-neutral-700);
  font-size: var(--sf-text-sm);
  margin-block-end: var(--sf-space-4);
}

.sf-divider {
  border: none;
  border-block-end: 1px solid var(--sf-neutral-300);
  margin-block: var(--sf-space-6);
}