/* Sweetfish admin — brand-compliant styles per docs/branding/sweetfish_brand_v1.md.
   Inter Tight (headings) + Manrope (body). Teal/Mint/Orchid palette. WCAG AA. */

:root {
  --black:        #0B0B0B;
  --teal:         #005C57;
  --teal-hover:   #004744;
  --mint:         #10F5A9;
  --orchid:       #8F29A4;
  --lavender:     #EFE8EF;
  --grey:         #F0F0F0;
  --grey-border:  #E2E2E2;
  --white:        #FAFAFA;
  --grey-mid:     #8A8A8A;
  --teal-light:   #00E0D5;
  --orchid-soft:  #BC9FBC;
  --amber:        #d97706;
  --amber-soft:   rgba(217, 119, 6, 0.08);

  /* Spacing scale */
  --sp-4:  4px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* Card chrome */
  --card-radius:   8px;
  --card-shadow:   0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 2px 6px rgba(0,0,0,0.09), 0 8px 20px rgba(0,0,0,0.07);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--grey);
  color: var(--black);
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter Tight", "Manrope", sans-serif;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Issue #9 — page h1 should be 28px+ */
h1 { font-size: 30px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

a { color: var(--teal); text-decoration: underline; }
a:hover { color: var(--black); }

code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}

/* ─── Layout: sidebar + main ─────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  height: 100vh;
}

/* ─── Sidebar ─────────────────────────────────────────────
   Issues #1: nav-group labels cramped; buttons taller;
              active state clearly highlighted; better hover */

.sidebar {
  background: #0B0B0B;
  color: var(--white);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar .brand {
  padding: var(--sp-20) var(--sp-24) var(--sp-20);
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.sidebar .brand .accent { color: var(--mint); }

.sidebar .brand small {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--mint);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) 0 var(--sp-16);
  flex: 1;
}

/* Issue #1 — nav group spacing */
.nav-group {
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-16);
}

.nav-group:first-child { padding-top: var(--sp-8); }

.nav-label {
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239, 232, 239, 0.45);
  padding: 0 var(--sp-20) var(--sp-4);
}

/* Issue #1 — nav buttons taller with better hover */
.sidebar nav button {
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: rgba(250,250,250,0.75);
  text-align: left;
  padding: 11px var(--sp-20) 11px 21px;   /* 3px left border eats 3px, so 21px gives 24px visual */
  font-family: "Manrope", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out),
              border-left-color 140ms var(--ease-out);
  line-height: 1.4;
}

.sidebar nav button:hover {
  background: rgba(255,255,255,0.07);
  color: var(--white);
  border-left-color: rgba(255,255,255,0.2);
}

/* Issue #1 — active button clearly highlighted */
.sidebar nav button.active {
  background: rgba(16, 245, 169, 0.11);
  color: var(--mint);
  border-left-color: var(--mint);
  font-weight: 600;
}

.sidebar nav button.active:hover {
  background: rgba(16, 245, 169, 0.16);
}

/* Issue #1 — visible focus for keyboard nav (WCAG AA) */
.sidebar nav button:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

.sidebar .footer {
  margin-top: auto;
  padding: var(--sp-16) var(--sp-24);
  font-size: 11px;
  color: rgba(173,173,173,0.7);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  line-height: 1.7;
}

/* ─── Main content area ───────────────────────────────────
   Issue #10 — more padding on main content area          */

.main {
  overflow-y: auto;
  padding: var(--sp-32) var(--sp-40) var(--sp-48);
}

/* ─── Page headers ────────────────────────────────────────
   Issue #9 — eyebrow + h1 vertical spacing; h1 bigger    */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-32);
  gap: var(--sp-24);
}

.page-header > div { flex: 1 1 auto; }

.page-header .eyebrow {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-8);
  opacity: 0.85;
}

.page-header h1 {
  line-height: 1.15;
}

/* ─── Client selector in page headers ────────────────────
   Issue #2 — full-width prominent dropdown with label    */

.page-header .client-selector {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-self: flex-start;
}

.page-header .client-selector label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin: 0;
}

/* Issue #2 — make all selects inside page-header prominent */
.page-header select,
.page-header .client-selector select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Manrope", sans-serif;
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 6px;
  color: var(--black);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005C57' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  transition: border-color 150ms, box-shadow 150ms;
}

.page-header select:focus,
.page-header .client-selector select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 92, 87, 0.15);
}

/* ─── Cards ───────────────────────────────────────────────
   Issue #4 — more padding, shadow, margin between cards   */

.card {
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--card-radius);
  padding: var(--sp-24);
  margin-bottom: var(--sp-20);
  box-shadow: var(--card-shadow);
  transition: box-shadow 200ms var(--ease-out);
}

.card.ghost {
  background: var(--lavender);
  border-color: transparent;
  box-shadow: none;
}

.card h2 { margin-bottom: var(--sp-16); }
.card h3 { margin-bottom: var(--sp-12); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-20); }
@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-4 { grid-template-columns: 1fr 1fr; } }

/* ─── Explainer cards ─────────────────────────────────────
   Issue #5 — text less dense, more line-height, chips     */

.explainer {
  background: var(--black);
  color: var(--white);
  border-radius: 10px;
  padding: var(--sp-20) var(--sp-24);
  margin-bottom: var(--sp-24);
  border-left: 4px solid var(--mint);
}

.explainer h3 {
  margin: 0 0 var(--sp-12);
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  color: var(--mint);
  letter-spacing: -0.01em;
}

.explainer p {
  margin: 0 0 var(--sp-8);
  font-size: 13.5px;
  line-height: 1.7;
  opacity: 0.9;
}

.explainer p:last-child { margin-bottom: 0; }

.explainer strong { color: var(--mint); font-weight: 600; }

.explainer .chips { margin-top: var(--sp-12); display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* Issue #5 — chips slightly larger */
.explainer .chips .chip {
  display: inline-flex;
  align-items: center;
  background: rgba(16, 245, 169, 0.14);
  color: var(--mint);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(16, 245, 169, 0.25);
  white-space: nowrap;
}

/* ─── KPI tiles ───────────────────────────────────────────
   Issue #6 — number prominent, eyebrow contrast, border   */

.kpi-tile {
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--card-radius);
  padding: var(--sp-20) var(--sp-24);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--teal);
  opacity: 0.75;
}

/* Issue #6 — KPI number much larger */
.kpi {
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--black);
}

.kpi-hint {
  font-size: 12px;
  color: var(--grey-mid);
  padding-top: var(--sp-8);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--grey-border);
  line-height: 1.5;
}

/* ─── Tooltips ────────────────────────────────────────────── */

.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  border: 1px solid var(--grey-border);
  transition: background 120ms;
}

.tip:hover { background: var(--mint); border-color: var(--mint); }
th .tip { opacity: 0.55; }
th:hover .tip { opacity: 1; }

/* ─── Buttons ─────────────────────────────────────────────
   Issue #7 — more padding, ghost has visible border, larger */

.btn {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px var(--sp-24);
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  white-space: nowrap;
  line-height: 1;
}

.btn:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--black);
  color: var(--mint);
  border-color: var(--black);
}

.btn-primary:hover {
  background: var(--teal);
  color: var(--mint);
  border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 92, 87, 0.3);
}

.btn-secondary {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

.btn-secondary:hover {
  background: var(--teal-hover);
  border-color: var(--teal-hover);
  box-shadow: 0 2px 8px rgba(0, 92, 87, 0.3);
}

/* Issue #7 — ghost button has visible border */
.btn-ghost {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}

.btn-ghost:hover {
  background: var(--lavender);
  border-color: var(--black);
}

.btn-danger {
  background: var(--orchid);
  color: var(--white);
  border-color: var(--orchid);
}

.btn-danger:hover {
  background: #7a2190;
  border-color: #7a2190;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Badges ──────────────────────────────────────────────
   Issue #11 — slightly larger with more padding            */

.badge {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1;
}

.badge-llm-ml    { background: var(--black); color: var(--mint); }
.badge-ml        { background: var(--teal);  color: var(--white); }
.badge-llm       { background: var(--lavender); color: var(--black); border: 1px solid rgba(0,0,0,0.25); }
.badge-contradicted { background: var(--orchid); color: var(--white); }

.badge-active    { background: var(--mint);     color: var(--black); }
.badge-candidate { background: var(--lavender); color: var(--black); border: 1px solid var(--orchid); }
.badge-suspended { background: var(--orchid);   color: var(--white); }
.badge-info      { background: var(--teal);     color: var(--white); }
.badge-warn      { background: #E07000;         color: var(--white); }

/* Provenance badges */
.prov-system      { background: var(--black); color: var(--mint); }
.prov-promoted    { background: var(--mint);  color: var(--black); }
.prov-client_only { background: var(--teal);  color: var(--white); }
.prov-candidate   { background: var(--lavender); color: var(--black); border: 1px dashed var(--orchid); }

/* ─── Tables ──────────────────────────────────────────────
   Issues #3 — alternating rows, hover, padding,
               solid header background, max column widths   */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

/* Issue #3 — solid header background */
thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

th {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
  background: #F5F3F5;
  padding: 11px var(--sp-16);
  text-align: left;
  border-bottom: 2px solid var(--grey-border);
  white-space: nowrap;
}

th:first-child { border-radius: 6px 0 0 0; }
th:last-child  { border-radius: 0 6px 0 0; }

/* Issue #3 — more cell padding */
td {
  text-align: left;
  padding: 11px var(--sp-16);
  border-bottom: 1px solid var(--grey-border);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}

td a { position: relative; z-index: 1; }
td:last-child { overflow: visible; white-space: normal; }

/* Issue #3 — alternating row backgrounds */
tbody tr:nth-child(even) { background: #FAFAFA; }
tbody tr:nth-child(odd)  { background: var(--white); }

/* Issue #3 — row hover highlight */
tbody tr:hover {
  background: #EEF7F6 !important;
  cursor: default;
}

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Forms ───────────────────────────────────────────────
   Issue #12 — taller inputs, consistent radius, focus     */

label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 5px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Issue #12 — 40px height for all inputs */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid #C8C8C8;
  border-radius: 6px;
  font-family: "Manrope", inherit;
  font-size: 14px;
  font-weight: 500;
  background: var(--white);
  color: var(--black);
  transition: border-color 150ms, box-shadow 150ms;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
  cursor: pointer;
}

textarea {
  padding: 10px 12px;
  min-height: 80px;
  resize: vertical;
}

/* Issue #12 — clear focus state */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 92, 87, 0.12);
}

input::placeholder,
textarea::placeholder { color: #AAAAAA; font-weight: 400; }

.field         { margin-bottom: var(--sp-16); }
.field-row     { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }

/* ─── Drop zone ───────────────────────────────────────────
   Issue #8 — thicker dashed border, bigger icon, more padding */

.drop-zone {
  border: 3px dashed #BBBBBB;
  background: #FDFCFD;
  padding: var(--sp-48) var(--sp-32);
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.drop-zone:hover {
  background: var(--lavender);
  border-color: var(--teal);
}

.drop-zone.dragover {
  background: rgba(0, 92, 87, 0.06);
  border-color: var(--teal);
  border-style: solid;
  box-shadow: inset 0 0 0 2px rgba(0,92,87,0.1);
}

/* Issue #8 — bigger icon */
.drop-zone .icon {
  font-size: 52px;
  color: var(--teal);
  margin-bottom: var(--sp-16);
  opacity: 0.8;
  display: block;
}

.drop-zone h3 {
  font-size: 17px;
  margin-bottom: var(--sp-8);
  color: var(--black);
}

.drop-zone p { font-size: 14px; margin: var(--sp-4) 0; }

.drop-zone .hint {
  color: var(--grey-mid);
  font-size: 12.5px;
  margin-top: var(--sp-12);
}

.drop-zone input[type="file"] { display: none; }

/* ─── Toast / notifications ─────────────────────────────── */

#toast-stack {
  position: fixed;
  top: var(--sp-20);
  right: var(--sp-20);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 380px;
}

.toast {
  padding: var(--sp-12) var(--sp-16);
  border-radius: 6px;
  background: var(--black);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  animation: slideIn 220ms var(--ease-out);
  border-left: 4px solid rgba(255,255,255,0.2);
}

.toast.success { background: var(--teal); color: var(--white); border-left-color: var(--mint); }
.toast.error   { background: var(--orchid); color: var(--white); border-left-color: rgba(255,255,255,0.3); }

@keyframes slideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Misc utilities ─────────────────────────────────────── */

.muted { color: var(--grey-mid); font-size: 12px; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--lavender);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.pre-output {
  background: #1A1A1A;
  color: #C8FAE6;
  padding: var(--sp-16);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
  border: 1px solid rgba(16,245,169,0.12);
  margin-top: var(--sp-16);
}

.hidden { display: none !important; }

.tag {
  display: inline-block;
  background: var(--lavender);
  color: var(--black);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  margin-right: var(--sp-4);
  font-family: ui-monospace, monospace;
  border: 1px solid var(--grey-border);
}

/* ─── Section dividers ───────────────────────────────────── */

.section-title {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-mid);
  margin: var(--sp-24) 0 var(--sp-12);
}

/* ─── Empty states ───────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--sp-48) var(--sp-32);
  color: var(--grey-mid);
}

.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: var(--sp-16);
  opacity: 0.4;
}

.empty-state h3 {
  color: var(--black);
  margin-bottom: var(--sp-8);
}

.empty-state p {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
}

/* ─── Scrollbar styling ──────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #AAAAAA; }

.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* ─── Reduced motion ─────────────────────────────────────── */

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Concept model pane ─────────────────────────────────────
   concept-l1-header: the collapsible L1 category row
   concept-l2-card: each individual L2 concept block
   concept-l2-header: the always-visible summary line inside an L2 card  */

.concept-l1-header {
  transition: background 120ms var(--ease-out);
}
.concept-l1-header:hover {
  background: var(--grey) !important;
}

.concept-l2-card {
  transition: box-shadow 120ms var(--ease-out);
}
.concept-l2-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.concept-l2-header {
  transition: background 120ms var(--ease-out);
}
.concept-l2-header:hover {
  background: var(--grey);
}

/* Concept search input — clear button on webkit */
#concept-search::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Modal overlay flex centering */
#concept-propose-modal[style*="flex"] {
  display: flex !important;
}