:root {
  --bg: #f5f3ee; --card: #fff; --ink: #22302b; --soft: #69746f; --line: #e3dfd6;
  --accent: #1f7a5c; --accent-ink: #fff; --sun: #e8a33d; --danger: #c0392b;
  --off: #ece8df; --today: #fdf1da; --bar: #bfe3d3; --bar-done: #1f7a5c; --bar-ink: #16322a;
  --day-w: 46px; --label-w: 112px; --lane-h: 46px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161b19; --card: #20282a; --ink: #edf1ef; --soft: #a3aeaa; --line: #333d3c;
    --accent: #57c29a; --accent-ink: #10231c; --off: #1b2223; --today: #3a3220;
    --bar: #2f5a4c; --bar-done: #57c29a; --bar-ink: #eef7f3;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", Arial, sans-serif; display: flex; flex-direction: column; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 19px; margin: 0 0 4px; }
button, input, select { font: inherit; color: inherit; }
button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.danger { color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
label { display: block; font-size: 13px; color: var(--soft); margin-bottom: 10px; }

.topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }

#alerts:not(:empty) { margin: 10px 16px 0; padding: 9px 13px; border-radius: 10px; background: var(--today); border: 1px solid var(--sun); }
#alerts button { padding: 1px 8px; margin-inline-start: 6px; }

.gantt { flex: 1; min-height: 0; overflow: auto; margin: 12px 16px 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.row { display: flex; width: max-content; min-width: 100%; }
.row-head { position: sticky; top: 0; z-index: 3; background: var(--card); }
.crew-label { position: sticky; right: 0; z-index: 2; flex: none; width: var(--label-w); padding: 10px; font-weight: 600; background: var(--card); border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.row-head .crew-label { z-index: 4; }
.day { flex: none; width: var(--day-w); padding: 5px 0; border: 0; border-radius: 0; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; text-align: center; font-size: 12px; line-height: 1.3; color: var(--soft); }
.day b { display: block; font-size: 14px; color: var(--ink); }
.day.weekend, .day.off { background: var(--off); }
.day.off b { text-decoration: line-through; }
.day.today { background: var(--today); }
.day.today b { color: var(--accent); }

.track { position: relative; flex: none; display: flex; border-bottom: 1px solid var(--line); }
.cell { flex: none; width: var(--day-w); border-inline-end: 1px solid var(--line); }
.cell.weekend, .cell.off { background: var(--off); }
.cell.today { background: var(--today); }
.track.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

.bar { position: absolute; height: calc(var(--lane-h) - 8px); padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: var(--bar); color: var(--bar-ink); text-align: start; box-shadow: 0 1px 2px #0002; }
.bar:hover { outline: 2px solid var(--accent); }
.bar.draggable { cursor: grab; }
.bar.dragging { cursor: grabbing; opacity: .85; z-index: 5; box-shadow: 0 4px 12px #0004; }
.bar.done { opacity: .55; }
.bar.active { background: var(--bar); box-shadow: inset 0 0 0 2px var(--accent); }
.bar.conflict, .bar.overdue { box-shadow: inset 0 0 0 2px var(--danger); }
.bar-steps { position: absolute; inset: 0; display: flex; }
.bar-steps span { border-inline-end: 1px solid #0002; }
.bar-steps span.complete { background: var(--bar-done); opacity: .45; }
.bar-name { position: relative; display: block; padding: 0 9px; line-height: calc(var(--lane-h) - 8px); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hint { margin: 8px 16px 12px; color: var(--soft); font-size: 13px; }

dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); }
dialog::backdrop { background: #0006; }
.sub { color: var(--soft); margin: 0 0 12px; }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.fact span:first-child { color: var(--soft); }
.section-title { margin: 16px 0 6px; font-size: 13px; color: var(--soft); }
.steps label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 5px 0; color: var(--ink); font-size: 15px; }
.steps input { width: auto; }
.steps small { color: var(--soft); margin-inline-start: auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.link-box { direction: ltr; text-align: left; font-size: 12px; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.log small { display: block; color: var(--soft); }
.log .undone { text-decoration: line-through; opacity: .6; }
.crew-row { display: flex; gap: 6px; margin-bottom: 8px; }
.form-error { min-height: 1.4em; margin: 4px 0; color: var(--danger); font-size: 14px; }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 20px); padding: 9px 16px; border-radius: 99px; background: var(--ink); color: var(--bg); opacity: 0; pointer-events: none; transition: .2s; z-index: 20; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.worker .manager-only { display: none; }
.worker-view { display: none; }
.worker .worker-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 16px; max-width: 900px; width: 100%; margin: 0 auto; overflow: auto; }
.crew-jobs h2 { margin-bottom: 10px; }
.job { display: flex; flex-direction: column; padding: 13px 15px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.job.active { border-color: var(--accent); }
.job-tag { align-self: flex-start; padding: 0 9px; margin-bottom: 4px; border-radius: 99px; background: var(--today); font-size: 13px; font-weight: 600; }
.job-dates { color: var(--soft); font-size: 14px; }
.user-row { align-items: center; justify-content: space-between; }
.user-row small { color: var(--soft); }

.login-page { align-items: center; justify-content: center; padding: 16px; }
.login-card { width: min(340px, 100%); padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.login-card h1 { margin-bottom: 18px; text-align: center; }
.login-card button { width: 100%; }

@media (max-width: 640px) {
  :root { --label-w: 72px; --day-w: 40px; }
  .crew-label { padding: 8px 6px; font-size: 13px; }
  .gantt { margin-inline: 8px; }
  .actions button { padding: 6px 9px; font-size: 14px; }
}