/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #070b08 #28322a #f6f4ee #2f5238 #3d6b4a #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #f6f4ee;
  --surface: #fbfaf7;
  --surface-2: #eae8e3;
  --border: #d5d3ce;
  --border-strong: #aeaea9;
  --ink: #28322a;
  --muted: #676d65;
  --accent: #2f5238;
  --accent-hover: #284630;
  --accent-ink: #ffffff;
  --accent-text: #3d6b4a;
  --accent-strong: #2f5238;
  --accent-soft: #daddd5;
  --accent-border: #9cab9c;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe6d9;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eee1d3;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efdad5;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * GroundControl — app.css
 * Landscape operations command center: crisp, dense, data-forward, with an
 * earthy green accent used sparingly (primary actions, active nav, the one
 * hero band). Everything else stays ink/muted/surfaces so the accent means
 * something when it appears.
 * ==================================================================== */

:root {
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 4%, transparent);
  --shadow-raised: 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ---- Hero band on the dashboard --------------------------------------- */
.hero-band {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ink) 15%));
  color: var(--accent-ink);
  border-radius: var(--radius-lg);
  padding: var(--s-8) var(--s-8);
  box-shadow: var(--shadow-raised);
  position: relative;
  overflow: hidden;
}
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    color-mix(in srgb, var(--accent-ink) 18%, transparent) 0,
    color-mix(in srgb, var(--accent-ink) 18%, transparent) 2px,
    transparent 2px,
    transparent 26px
  );
  pointer-events: none;
}

/* ---- Crew capacity bars ------------------------------------------------ */
.cap-row {
  display: grid;
  grid-template-columns: 120px 1fr 48px;
  align-items: center;
  gap: var(--s-3);
}
.cap-label { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cap-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cap-fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-2) var(--ease-out); }
.cap-fill-success { background: var(--success); }
.cap-fill-warning { background: var(--warning); }
.cap-fill-danger { background: var(--danger); }
.cap-fill-accent { background: var(--accent); }
.cap-pct { text-align: right; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--muted); }

/* ---- Alerts / recommendations / activity ------------------------------- */
.alert-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-1) var(--ease);
}
.alert-row:hover { background: var(--surface-2); }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.alert-dot-danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.alert-dot-warning { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.alert-dot-accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.rec-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--accent-border);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius);
}

.activity-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.activity-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: 0 0 auto; }

/* ---- Schedule board ----------------------------------------------------- */
.board-wrap { overflow-x: auto; padding-bottom: var(--s-2); }
.board {
  display: grid;
  grid-template-columns: 140px repeat(5, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 1180px;
}
.board-row { display: contents; }
.board-head .board-corner,
.board-head .board-daylabel {
  background: var(--surface-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--muted);
}
.board-crewlabel {
  background: var(--surface);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.board-crewlabel > * + * { margin-top: 2px; }
.board-cell {
  background: var(--surface);
  padding: var(--s-2);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  transition: background var(--dur-1) var(--ease);
}
.board-cell > * + * { margin-top: var(--s-2); }
.board-cell.is-dragover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
  cursor: grab;
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.job-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.job-card.is-dragging { opacity: 0.4; }
.job-card:active { cursor: grabbing; }

/* ---- Daily Operations ---------------------------------------------------- */
.daily-property + .daily-property { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.job-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.dot-scheduled { background: var(--muted); }
.dot-in_progress { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dot-completed { background: var(--success); }
.dot-absent { background: var(--danger); }
.dot-delayed { background: var(--warning); }

/* ---- Misc ---------------------------------------------------------------- */
.uppercase { text-transform: uppercase; }

@media (max-width: 720px) {
  .cap-row { grid-template-columns: 90px 1fr 40px; }
}