/* Admin App styling - deliberately its own small stylesheet rather than a
   shared/reused file across servers (same project-separation reasoning as
   TemplateEngineUnit being its own copy per project), but the palette,
   .form-field/.btn-primary/.review-form/.login-card shapes are lifted
   straight from the consumer app's styles.css so both apps read as the
   same product family. */

:root {
  --color-bg: #f5f6f7;
  --color-surface: #ffffff;
  --color-border: #e0e2e5;
  --color-text: #1c1f23;
  --color-text-muted: #63696f;
  /* Exact-matched to the public website's palette (Website\styles.css'
     --glow-dark-green/--glow-amber), same as the consumer app - kept in
     sync deliberately, see that file's own comment. */
  --color-accent: #1f6b3f;
  --color-accent-contrast: #ffffff;
  --color-warm: #e8b34d;
  --color-warm-contrast: #3a2a05;
  /* Same tokens/values as the consumer app's pane-detail/pane-context
     depth-cue tints - reused here for data-table row striping instead
     (see .data-table below), so a long table's rows don't read as one
     continuous block of text, the table equivalent of that app's
     list-pane card-wash treatment. */
  --color-pane-detail: #f0f7f3;
  --color-pane-context: #e5f1ea;
  --header-height: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

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

.empty-state { color: var(--color-text-muted); }

/* ---- App header ---- */

.admin-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.admin-header-title a {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--color-text);
}

/* Desktop-only by design (confirmed with Mike - staff use this at a desk;
   occasional mobile access is just "checking something", so no responsive
   collapse is built for this nav, unlike the consumer app's sidebar). */
.admin-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  margin: 0 24px;
}

.admin-nav a,
.admin-nav .nav-disabled {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.admin-nav a {
  color: var(--color-text-muted);
}

.admin-nav a:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.admin-nav a.nav-active {
  color: var(--color-accent);
  background: var(--color-bg);
}

.admin-nav .nav-disabled {
  color: var(--color-border);
  cursor: default;
}

.admin-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-header-user a {
  color: inherit;
  text-decoration: none;
}

.admin-header-user a:hover {
  color: var(--color-accent);
}

.inline-form { display: inline; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.filter-bar select,
.filter-bar input[type="text"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.filter-bar input[type="text"] { min-width: 220px; }

.filter-bar .btn-primary { padding: 8px 20px; font-size: 0.9rem; }

.filter-bar a { font-size: 0.85rem; }

.data-table th a {
  color: inherit;
  text-decoration: none;
}

.data-table th a:hover { color: var(--color-accent); }

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Full available width, not a centered narrow column - this is a
   desktop-only back-office tool with wide tables (Providers already has 8
   columns), not a prose/reading surface. Forms stay comfortably narrow on
   their own via .review-form's own max-width, so this doesn't make the
   Add/Edit provider pages sprawl - only the table benefits. */
.admin-main {
  padding: 24px;
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

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

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.data-table th, .data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.data-table th {
  background: var(--color-bg);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.data-table tr:last-child td { border-bottom: none; }

/* Zebra striping - the table equivalent of the consumer app's list-pane
   card-wash: a long table of same-shaped rows can be misread as one
   continuous block, so alternating rows get a light tint. Full "card per
   row" (like the consumer app's list-row) doesn't suit a dense
   multi-column table, so this reuses the same tint tokens in the
   simpler, table-appropriate striped form instead. */
.data-table tbody tr:nth-child(even) td { background: var(--color-pane-detail); }

.data-table tbody tr:hover td { background: var(--color-pane-context); }

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-none { background: var(--color-bg); color: var(--color-text-muted); }
.status-pending { background: #fff4d6; color: #8a6100; }
.status-active { background: #e0f2e9; color: var(--color-accent); }

/* ---- Forms (shared shape with the consumer app) ---- */

.review-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  max-width: 480px;
}

.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.form-field select,
.form-field textarea,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font: inherit;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
}

.form-field select,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="password"] { height: 44px; }
.form-field textarea { resize: vertical; min-height: 90px; }

.form-field select:focus,
.form-field textarea:focus,
.form-field input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.btn-primary {
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.btn-primary:hover { opacity: 0.9; }

/* ---- Login card ---- */

/* ---- Gradient mesh - ported from the public website (Website\styles.css's
   .gradient-mesh/.hero) and kept identical to the consumer app's copy, for
   real family resemblance across all three apps, not a similar effect
   invented separately per project. ---- */

.gradient-mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.gradient-mesh::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 25%, rgba(79, 174, 108, 0.55), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(232, 179, 77, 0.4), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(31, 107, 63, 0.55), transparent 50%);
  background-color: #112318;
  filter: blur(40px);
  animation: meshDrift 18s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -2%) scale(1.08); }
  100% { transform: translate(-3%, 2%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-mesh::before { animation: none; }
}

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px;
}

.login-card h1 {
  font-size: 1.3rem;
  margin: 0 0 20px;
}

.login-card .review-form {
  max-width: none;
  padding: 0;
  border: none;
}