:root {
    --ink: #14213d;
    --muted: #667085;
    --line: #e4e7ec;
    --surface: #ffffff;
    --background: #f5f7fa;
    --brand: #1664d9;
    --weekend: #f8fafc;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); }
button { font: inherit; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; background: #0d1f3c; color: white; }
.eyebrow { margin: 0 0 3px; color: #9bc2ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: 26px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .secondary-button { border: 1px solid #42628f; border-radius: 7px; color: white; background: #17345f; cursor: pointer; }
.icon-button { width: 38px; height: 38px; font-size: 24px; }
.secondary-button { height: 38px; padding: 0 16px; font-weight: 650; }
.date-range { min-width: 205px; margin-left: 8px; font-weight: 650; }
main { padding: 22px 30px 36px; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.summary article { padding: 15px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; }
.summary strong { display: block; margin-top: 7px; font-size: 25px; }
.summary .warning strong { color: #d92d20; }
.legend { display: flex; align-items: center; gap: 18px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px 10px 0 0; background: white; color: #475467; font-size: 13px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .hint { margin-left: auto; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.quoted { background: #2e90fa; }.won { background: #f79009; }.planned { background: #7a5af8; }.production { background: #12b76a; }.invoice { background: #06aed4; }
.board-shell { overflow: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: white; }
.board { min-width: 1250px; }
.board-row { display: grid; grid-template-columns: 190px repeat(10, minmax(105px, 1fr)); min-height: 104px; border-top: 1px solid var(--line); }
.board-row:first-child { min-height: auto; border-top: 0; position: sticky; top: 0; z-index: 3; }
.resource-cell, .day-cell { padding: 11px; border-right: 1px solid var(--line); }
.resource-cell { position: sticky; left: 0; z-index: 2; background: white; }
.header-cell { background: #f9fafb; color: #475467; font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; }
.header-resource { z-index: 4; text-align: left; }
.header-cell strong { display: block; margin-top: 4px; color: var(--ink); font-size: 17px; }
.resource-name { font-weight: 750; }
.resource-role { margin-top: 4px; color: var(--muted); font-size: 12px; }
.resource-load { margin-top: 10px; height: 5px; border-radius: 3px; background: #eaecf0; overflow: hidden; }
.resource-load span { display: block; height: 100%; background: var(--brand); }
.day-cell { min-height: 104px; background: white; transition: background .15s; }
.day-cell.weekend { background: var(--weekend); }
.day-cell.drag-over { background: #eaf2ff; box-shadow: inset 0 0 0 2px #5794ec; }
.job-card { margin-bottom: 7px; padding: 9px 9px 8px; border-left: 4px solid var(--brand); border-radius: 6px; background: #f4f8ff; box-shadow: 0 1px 2px rgba(16,24,40,.08); cursor: grab; font-size: 12px; }
.job-card:active { cursor: grabbing; }
.job-card.production { border-color: #12b76a; background: #ecfdf3; }.job-card.planned { border-color: #7a5af8; background: #f4f3ff; }.job-card.won { border-color: #f79009; background: #fffaeb; }.job-card.quoted { border-color: #2e90fa; }.job-card.invoice { border-color: #06aed4; background: #ecfdff; }
.job-number { font-weight: 800; }.job-title { display: block; margin-top: 3px; color: #344054; line-height: 1.3; }.job-hours { display: block; margin-top: 6px; color: var(--muted); }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 16px; border-radius: 8px; background: #101828; color: white; opacity: 0; transform: translateY(10px); transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
.error { padding: 30px; color: #b42318; }
@media (max-width: 850px) { .summary { grid-template-columns: repeat(2, 1fr); }.topbar { align-items: flex-start; gap: 16px; }.date-range { display: none; } }