/*
 * The admin dashboard's layout (PHASE_ADMIN A1). Every colour, radius, space
 * and type size is a design.css token — no local literals for those. Light only.
 *
 * Structure from the owner's reference photo (a Drive-style browser): a solid
 * money-green sidebar, a white panel with a big title, a row of six folder
 * cards (the open one green), then "All cases" as soft rows.
 */

[hidden] { display: none !important; }

body { padding: var(--ds-space-lg); }

button { font: inherit; cursor: pointer; }

.center { min-height: calc(100vh - 2 * var(--ds-space-lg)); display: grid; place-items: center; }

.panel {
  background: var(--ds-form-panel);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-space-xl);
}

/* Sign in */
.signin { width: 100%; max-width: 380px; display: grid; gap: var(--ds-space-lg); }
.signin p { margin: 0; }
.field { display: grid; gap: var(--ds-space-xs); font-size: var(--ds-text-label); font-weight: 600; color: var(--ds-label); }
.field input {
  font: inherit;
  font-size: var(--ds-text-body);
  color: var(--ds-ink);
  padding: var(--ds-space-md);
  border: 1px solid var(--ds-card-pressed);
  border-radius: var(--ds-radius-small);
  background: var(--ds-form-panel);
}
.field input:focus { outline: 2px solid var(--ds-accent); outline-offset: -1px; }
.primary, .secondary {
  border: 0;
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-md) var(--ds-space-xl);
  font-weight: 700;
}
.primary { background: var(--ds-home-balance); color: var(--ds-home-on-balance); }
.primary:disabled { opacity: 0.6; }
.secondary { background: var(--ds-card); color: var(--ds-ink); }
.error { margin: 0; color: var(--ds-danger); font-size: var(--ds-text-label); }

/* The frame: sidebar beside the panel, stacked on a narrow screen. */
.frame { display: grid; gap: var(--ds-space-lg); }
@media (min-width: 900px) {
  .frame { grid-template-columns: 248px minmax(0, 1fr); align-items: stretch; min-height: calc(100vh - 2 * var(--ds-space-lg)); }
}

/* Sidebar — HomeColors.balance, the manager's and promoter's sidebar */
.sidebar {
  background: var(--ds-home-balance);
  color: var(--ds-home-on-balance);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xl);
}
.side-top { display: grid; justify-items: start; gap: var(--ds-space-xs); padding: var(--ds-space-sm) var(--ds-space-sm) 0; }
.hello { color: var(--ds-home-on-balance-soft); font-size: var(--ds-text-body); }
.name { font-size: var(--ds-text-heading); font-weight: 700; }
.tag {
  margin-top: var(--ds-space-sm);
  background: var(--ds-home-tag-soft);
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-xs) var(--ds-space-md);
  font-size: var(--ds-text-pill);
  font-weight: 600;
}
.tag:empty { display: none; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-xs); flex-grow: 1; align-content: start; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-small);
  color: var(--ds-home-on-balance);
  text-decoration: none;
  font-weight: 500;
}
.nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.current { background: var(--ds-home-tag-soft); }
.nav-item.later { color: var(--ds-home-on-balance-soft); opacity: 0.7; cursor: default; }
.side-foot { display: grid; gap: var(--ds-space-sm); padding: 0 var(--ds-space-sm); }
.who { color: var(--ds-home-on-balance-soft); font-size: var(--ds-text-label); overflow-wrap: anywhere; }
.signout {
  justify-self: start;
  background: var(--ds-home-tag-soft);
  color: var(--ds-home-on-balance);
  border: 0;
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-sm) var(--ds-space-lg);
  font-weight: 600;
}

/* Main panel */
.main { display: grid; gap: var(--ds-space-xl); align-content: start; min-width: 0; }

/* Folder cards: a folder shape with a tab on its top edge. */
.folders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-xl) var(--ds-space-lg);
  padding-top: var(--ds-space-md);
}
/* Six in a row when they fit, else three — never five and an orphan. */
@media (min-width: 641px) { .folders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .folders { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.folder {
  position: relative;
  border: 0;
  text-align: left;
  background: var(--ds-card);
  color: var(--ds-ink);
  border-radius: 0 var(--ds-radius-card) var(--ds-radius-card) var(--ds-radius-card);
  padding: var(--ds-space-lg);
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-space-sm);
}
.folder::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--ds-space-md));
  width: 44%;
  height: calc(var(--ds-space-md) + 1px);
  background: inherit;
  border-radius: var(--ds-radius-small) var(--ds-radius-small) 0 0;
}
.folder:hover { background: var(--ds-card-pressed); }
.folder.open { background: var(--ds-home-balance); color: var(--ds-home-on-balance); }
.folder .count { font-size: var(--ds-text-title); font-weight: 800; letter-spacing: -0.02em; }
.folder .label { font-size: var(--ds-text-label); font-weight: 600; }
.folder:not(.open) .label { color: var(--ds-body); }

/* All cases */
.cases { display: grid; gap: var(--ds-space-sm); }
.cases-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-md); }
.link { background: none; border: 0; color: var(--ds-link); font-weight: 600; padding: 0; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-sm); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ds-space-md);
  align-items: center;
  padding: var(--ds-space-md) var(--ds-space-lg);
}
.columns { font-size: var(--ds-text-label); color: var(--ds-label); font-weight: 600; padding-bottom: 0; }
.case { background: var(--ds-page); border-radius: var(--ds-radius-small); cursor: pointer; }
.case:hover { background: var(--ds-card); }
.case.selected { background: var(--ds-card-pressed); }
.case:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.who-cell, .when-cell { display: grid; gap: 2px; min-width: 0; }
.who-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-cell small, .when-cell small { color: var(--ds-body); font-size: var(--ds-text-label); }
.status { display: inline-flex; align-items: center; gap: var(--ds-space-sm); font-size: var(--ds-text-label); font-weight: 600; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: var(--ds-radius-full); background: currentColor; }
.dot-needs_action { color: var(--ds-danger); }
.dot-waiting { color: var(--ds-link); }
.dot-resolved { color: var(--ds-success); }
.empty { margin: var(--ds-space-md) 0; }
.more { justify-self: center; }

@media (max-width: 640px) {
  body { padding: var(--ds-space-sm); }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .columns { display: none; }
  .row > :nth-child(2), .row > :nth-child(3) { grid-column: 1; }
  .status { grid-row: 1; grid-column: 2; }
}

/* ── A4–A6: the case page, search and the account page ─────────────────── */
.view { display: grid; gap: var(--ds-space-xl); align-content: start; min-width: 0; }
.view-head { display: flex; justify-content: space-between; align-items: center; }
.nav-item:hover { background: var(--ds-home-tag-soft); }
.detail { display: grid; gap: var(--ds-space-lg); }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-md); }
.detail-head h1 { margin: 0; }
.pill {
  background: var(--ds-card);
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-xs) var(--ds-space-md);
  font-size: var(--ds-text-pill);
  font-weight: 600;
}
.card { background: var(--ds-page); border-radius: var(--ds-radius-card); padding: var(--ds-space-lg); display: grid; gap: var(--ds-space-md); }
.card-title { margin: 0; }
.card p { margin: 0; }
.pairs { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--ds-space-sm) var(--ds-space-lg); }
.pairs dt { color: var(--ds-label); font-size: var(--ds-text-label); font-weight: 600; }
.pairs dd { margin: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-md); }
.timeline li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--ds-space-xs) var(--ds-space-md); }
.timeline .when { color: var(--ds-body); font-size: var(--ds-text-label); }
.timeline .quote { grid-column: 2; color: var(--ds-body); }
.doc-title { margin: 0; font-size: var(--ds-text-label); color: var(--ds-label); }
.doc {
  margin: 0;
  padding: var(--ds-space-md);
  background: var(--ds-form-panel);
  border-radius: var(--ds-radius-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note, .field textarea {
  font: inherit;
  font-size: var(--ds-text-body);
  color: var(--ds-ink);
  padding: var(--ds-space-md);
  border: 1px solid var(--ds-card-pressed);
  border-radius: var(--ds-radius-small);
  background: var(--ds-form-panel);
  resize: vertical;
}
.buttons { display: flex; flex-wrap: wrap; gap: var(--ds-space-sm); }
.secondary.small { padding: var(--ds-space-sm) var(--ds-space-lg); }
.search { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ds-space-md); }
.grow { flex: 1 1 280px; }
.matched { color: var(--ds-body); font-size: var(--ds-text-label); }
.row.mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.row.item-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; background: var(--ds-form-panel); border-radius: var(--ds-radius-small); }

@media (max-width: 640px) {
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .timeline .quote { grid-column: 1; }
  .pairs { grid-template-columns: minmax(0, 1fr); }
  .row.item-row, .row.mini { grid-template-columns: minmax(0, 1fr) auto; }
}

/* A7: log an emailed notice */
.notice-form { display: grid; gap: var(--ds-space-md); }
.notice-form select, .notice-form input {
  font: inherit;
  font-size: var(--ds-text-body);
  color: var(--ds-ink);
  padding: var(--ds-space-md);
  border: 1px solid var(--ds-card-pressed);
  border-radius: var(--ds-radius-small);
  background: var(--ds-form-panel);
}
.notice-form .primary { justify-self: start; }

/* A11: the Money snapshot's four numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ds-space-md); }
.stat {
  display: grid;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  color: var(--ds-ink);
  text-decoration: none;
}
.stat:first-child { background: var(--ds-home-balance); color: var(--ds-home-on-balance); }
.stat:hover { background: var(--ds-card-pressed); }
.stat:first-child:hover { background: var(--ds-home-balance); opacity: 0.92; }
.stat-value { font-size: var(--ds-text-title); font-weight: 800; letter-spacing: -0.02em; }
.stat-label { font-size: var(--ds-text-label); font-weight: 600; }

/* A12: Site Health */
.row.health-row { grid-template-columns: minmax(0, 1fr) auto; background: var(--ds-form-panel); border-radius: var(--ds-radius-small); }
.row.count-row { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); padding: var(--ds-space-sm) 0; }