/* ---------------------------------------------------------------------------
   SocialPilot
   Design language: clean cards, generous whitespace, calm palette, fast review.
   Light is the designed default; dark is a full token swap, not an inversion.
   --------------------------------------------------------------------------- */

:root {
  --bg: #FAFAFA;
  --card: #FFFFFF;
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-soft: #EEF2FF;
  --accent: #10B981;
  --accent-soft: #ECFDF5;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --warn: #D97706;
  --warn-soft: #FFFBEB;
  --text: #111827;
  --text-muted: #6B7280;
  --text-faint: #9CA3AF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.07);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --speed: 150ms;
}

[data-theme="dark"] {
  --bg: #0F1115;
  --card: #171A21;
  --primary: #818CF8;
  --primary-hover: #A5B4FC;
  --primary-soft: #1E2130;
  --accent: #34D399;
  --accent-soft: #0F2A22;
  --danger: #F87171;
  --danger-soft: #2A1618;
  --warn: #FBBF24;
  --warn-soft: #2A2113;
  --text: #F3F4F6;
  --text-muted: #9CA3AF;
  --text-faint: #6B7280;
  --border: #262B36;
  --border-strong: #363D4C;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--speed) ease-out, color var(--speed) ease-out;
}

h1, h2, h3, h4 { margin: 0 0 4px; font-weight: 600; letter-spacing: -0.011em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }
a { color: var(--primary); text-decoration: none; transition: color var(--speed) ease-out; }
a:hover { color: var(--primary-hover); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; overflow-x: auto; margin: 0;
}
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

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

.nav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 8px; height: 60px;
  flex-wrap: nowrap;
}
.brand {
  font-weight: 650; font-size: 15.5px; color: var(--text);
  display: flex; align-items: center; gap: 8px; margin-right: 12px;
}
.brand svg { color: var(--primary); }
/* One row always. Narrow screens scroll the links rather than pushing the
   nav to a second line and breaking its fixed height. */
.nav-links {
  display: flex; gap: 1px; align-items: center; flex: 1;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-link {
  padding: 7px 9px; border-radius: var(--radius-xs); color: var(--text-muted);
  font-weight: 500; display: flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: background var(--speed) ease-out, color var(--speed) ease-out;
}
.nav-link:hover { background: var(--bg); color: var(--text); }
.nav-link.active { background: var(--primary-soft); color: var(--primary); }
.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Ten items with labels need real width. Below that the icons carry the
   meaning, which is why every nav item has one. */
@media (max-width: 1180px) {
  .nav-link span.nav-label { display: none; }
  .nav-link { padding: 7px 8px; }
}

.container { max-width: 1160px; margin: 0 auto; padding: 28px 24px 72px; }
.container-narrow { max-width: 660px; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head .sub { color: var(--text-muted); margin: 0; }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  transition: box-shadow var(--speed) ease-out, border-color var(--speed) ease-out;
}
/* Stacked cards in a column want breathing room between them. */
.card + .card { margin-top: 16px; }
/* But not inside a grid: there the gap already spaces them, and a top margin
   on every card after the first pushes it down and shortens it, which is what
   made the dashboard rows look unlevel. Only direct grid children are
   exempted, so cards stacked inside a grid column keep their spacing. */
.grid > .card + .card { margin-top: 0; }
.card-hover:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.card-tight { padding: 14px 16px; }

.grid { display: grid; gap: 16px; align-items: stretch; }
/* Cards in a grid fill the row, so a taller neighbour lifts them all to match
   rather than leaving one short. */
.grid > .card { height: 100%; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stat { text-align: left; display: flex; flex-direction: column; }
.stat .value {
  font-size: 26px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2;
  display: flex; align-items: baseline; gap: 4px;
}
/* margin-top:auto pushes every label to the bottom of its card, so the row of
   labels sits on one line however tall the cards end up. */
.stat .label { color: var(--text-muted); font-size: 12.5px; margin-top: auto; padding-top: 6px; }
.stat .value.accent { color: var(--accent); }
.stat .value.primary { color: var(--primary); }
.stat .value.warn { color: var(--warn); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
  font-size: 13.5px; font-weight: 550; font-family: inherit; cursor: pointer;
  transition: background var(--speed) ease-out, border-color var(--speed) ease-out,
              color var(--speed) ease-out, transform var(--speed) ease-out;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg); border-color: var(--text-faint); color: var(--text); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-approve { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-approve:hover { filter: brightness(0.94); color: #fff; }
.btn-danger { color: var(--danger); border-color: var(--border-strong); background: var(--card); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-icon { padding: 7px; border-radius: var(--radius-xs); }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-row-end { justify-content: flex-end; }

/* ------------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 550; letter-spacing: 0.01em;
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; padding: 0; }

/* ------------------------------------------------------------------- forms */

label { display: block; font-weight: 550; font-size: 13px; margin-bottom: 5px; }
.hint { color: var(--text-muted); font-size: 12.5px; font-weight: 400; margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="datetime-local"], input[type="time"], select, textarea {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13.5px;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--speed) ease-out, box-shadow var(--speed) ease-out;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.field { margin-bottom: 16px; }
.field-row { display: flex; gap: 14px; }
.field-row > * { flex: 1; }
@media (max-width: 640px) { .field-row { flex-direction: column; gap: 0; } }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check input { width: auto; }

/* ------------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-faint);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--speed) ease-out; }
tbody tr:hover { background: var(--bg); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }

/* -------------------------------------------------------------------- flash */

.flash-stack { position: fixed; top: 74px; right: 24px; z-index: 60; width: min(400px, calc(100vw - 48px)); }
.flash {
  padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-lift); display: flex; gap: 10px; align-items: flex-start;
  animation: slide-in var(--speed) ease-out;
}
.flash-success { border-left: 3px solid var(--accent); }
.flash-error { border-left: 3px solid var(--danger); }
@keyframes slide-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- queue cards */

.draft-card { border-left: 3px solid var(--primary); }
.draft-source {
  font-size: 12.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 14px 0 0; flex-wrap: wrap; }
.tab {
  padding: 7px 12px; font-size: 13px; font-weight: 550; cursor: pointer;
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit; transition: color var(--speed) ease-out, border-color var(--speed) ease-out;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-body { padding: 14px 0 0; }

.post-preview {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; white-space: pre-wrap; word-break: break-word; line-height: 1.6;
  font-size: 13.5px;
}
.counter { font-size: 12px; font-weight: 550; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.counter.near { color: var(--warn); }
.counter.over { color: var(--danger); }

.affiliate-list { font-size: 12.5px; color: var(--text-muted); }
.affiliate-list li { margin-bottom: 3px; word-break: break-all; }

/* ----------------------------------------------------------------- calendar */

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-head {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); text-align: center; padding-bottom: 4px;
}
.cal-cell {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 92px; padding: 8px; transition: border-color var(--speed) ease-out;
}
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell.today { border-color: var(--primary); }
.cal-day { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.cal-cell.today .cal-day { color: var(--primary); }
.cal-post {
  font-size: 11.5px; padding: 3px 6px; border-radius: var(--radius-xs);
  background: var(--primary-soft); color: var(--primary); margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-post.published { background: var(--accent-soft); color: var(--accent); }
.cal-post.failed { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 720px) { .cal-cell { min-height: 62px; } .cal-post { display: none; } }

/* -------------------------------------------------------------------- chart */

.chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.chart-bar {
  width: 100%; background: var(--primary); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 3px; transition: background var(--speed) ease-out;
}
.chart-bar.zero { background: var(--border); }
.chart-label { font-size: 11px; color: var(--text-faint); }

/* ------------------------------------------------------------- empty states */

.empty { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.empty svg { color: var(--text-faint); margin-bottom: 10px; }
.empty h3 { color: var(--text); margin-bottom: 4px; }
.empty p { margin-bottom: 16px; }

/* ------------------------------------------------------------------ utility */

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.hidden { display: none; }

/* Centred single-purpose pages: login, change password. */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 22px; font-size: 19px; font-weight: 650; }
.auth-logo svg { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ draft media */

.media-row { display: flex; gap: 14px; align-items: flex-start; }
.media-thumb {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border); background: var(--bg);
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-empty {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; color: var(--text-faint);
}
.media-actions { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .media-row { flex-direction: column; }
  .media-thumb { width: 100%; height: 160px; }
}

/* Site logo preview sits on a chequerboard so transparency is visible. */
.logo-preview {
  border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 12px;
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, var(--bg) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.logo-preview img { max-width: 100%; max-height: 120px; display: block; margin: 0 auto; }

/* --------------------------------------------------- button pending state */

/* Generation takes seconds, sometimes tens of seconds. Without feedback the
   page looks dead and people click again. A calm progress sheen, not a
   spinner: the design language rules out bouncing loaders. */
.btn[data-pending] {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
  overflow: hidden;
}
.btn[data-pending]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: btn-sheen 1.1s ease-in-out infinite;
}
@keyframes btn-sheen {
  to { transform: translateX(100%); }
}
[data-theme="dark"] .btn[data-pending]::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
}

/* The whole form dims while it is working, so it reads as one busy unit. */
form[data-busy] { opacity: 0.7; transition: opacity var(--speed) ease-out; }
form[data-busy] input,
form[data-busy] select,
form[data-busy] textarea { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .btn[data-pending]::after { animation: none; opacity: 0.5; }
}

/* ------------------------------------------------------- image controls */

.image-controls { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.image-controls .field { margin-bottom: 10px; }
.image-controls label { font-size: 12px; }
.caption-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.caption-row .field { flex: 1; min-width: 200px; margin-bottom: 0; }

/* ------------------------------------------------------------- robot check */

.robot-check {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg);
  transition: border-color var(--speed) ease-out, background var(--speed) ease-out;
}
.robot-check:hover { border-color: var(--text-faint); }
.robot-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); }
.robot-check span { font-weight: 500; }

/* -------------------------------------------------- security check results */

.grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-weight: 650; font-size: 13px; text-decoration: none;
}
.grade-A { background: var(--accent-soft); color: var(--accent); }
.grade-B { background: var(--accent-soft); color: var(--accent); }
.grade-C { background: var(--warn-soft); color: var(--warn); }
.grade-D { background: var(--warn-soft); color: var(--warn); }
.grade-F { background: var(--danger-soft); color: var(--danger); }

.finding {
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg);
  padding: 11px 13px;
  margin-bottom: 8px;
}
.finding-high { border-left-color: var(--danger); }
.finding-medium { border-left-color: var(--warn); }
.finding-low { border-left-color: var(--border-strong); }
.finding code { word-break: break-word; }

/* An empty chart is a big blank box. Say why it is empty instead. */
.chart-empty {
  height: 96px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--text-muted); text-align: center;
}
.chart-empty svg { color: var(--text-faint); }

/* ---------------------------------------------------- show/hide password */

.password-field { position: relative; }
.password-field input { padding-right: 42px; }

.password-toggle {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--text-faint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--speed) ease-out;
}
.password-toggle:hover { color: var(--text-muted); }
.password-toggle:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px; color: var(--primary);
}
/* The icon is drawn from CSS so the markup stays a bare button and the
   template does not have to carry two inline SVGs per field. */
.password-toggle::before {
  content: ""; width: 17px; height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--eye-icon) center / contain no-repeat;
  mask: var(--eye-icon) center / contain no-repeat;
}
.password-toggle[aria-pressed="true"]::before { --eye-icon: var(--eye-off); }

:root {
  --eye-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a18 18 0 0 1-2.6 3.6M6.6 6.6A18 18 0 0 0 2 12s3.6 7 10 7a10.4 10.4 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E");
  --eye-icon: var(--eye-open);
}