/* One stylesheet for the planning site. House style of mobilelocker.eu like the finance site: yellow #FDB813, near black
   #0E0D17, light grey #F5F5F5, Manrope (served by the site itself). Light by default, dark through prefers-color-scheme.
   Phase colours are tokens (--lead, --hot, --confirmed, --travel); the bars, the legend and the badges all use them.
   Every phase has a colour token, most with an ink (text on it): --lead, --hot, --confirmed, --travel, --dropoff, --pickup,
   --install, --overstay and --unavail (striped). The class of an element names its phase (ph-lead ...), the status of a request
   (st-requested ...) or the availability of a unit (avail free, options, busy); the scripts set those classes.
   Sections: controls, header, toolbars, the grid (timeline), split layout, tables, modal, login, forms, small screens. */
/* Manrope from the site itself (no outside font service, which the Content Security Policy would block): one file for
   Latin and one for the extended Latin of Polish and Croatian names, each loaded only when needed. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F; }

/* Light colours; the block under it replaces them in dark mode. */
:root {
  color-scheme: light;
  --lw: 190px; /* width of the label column of the grid (timeline.js reads it) */
  --bad-fill: #b3261e; /* background with white text: also dark enough in dark mode */
  --brand: #fdb813; --brand-ink: #0e0d17;
  --bg: #f5f5f5; --surface: #fff; --surface-2: #f2f2f2; --border: #e2e2e6; --control-border: #8a8993; --grid: #ececef;
  --text: #0e0d17; --text-2: #4b4a55; --text-3: #66656f; --brand-soft: #fff4d6;
  --good: #0f7b3f; --good-bg: #e3f3e8; --bad: #b3261e; --bad-bg: #fbe7e5; --warn-bg: #fff4d6;
  --lead: #f7d774; --lead-ink: #5a4300; --hot: #f08a3c; --hot-ink: #3d1c00; --confirmed: #2a78d6; --confirmed-ink: #fff;
  --travel: #6b5bd2; --travel-ink: #fff; --dropoff: #27b5c8; --dropoff-ink: #04252b; --pickup: #7fd4e0; --pickup-ink: #04252b; --install: #5aa83a; --install-ink: #07200a; --overstay: #a9d18e; --overstay-ink: #10260a; --unavail: #9a9aa5; --weekend: #f6f6f8; --today: rgba(253, 184, 19, .28);
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e0d17; --surface: #181725; --surface-2: #211f31; --border: #2d2b40; --control-border: #8b8a99; --grid: #25233a;
    --text: #f1f1f4; --text-2: #c2c1cc; --text-3: #a3a2b0; --brand-soft: #3a2f0b;
    --good: #5bd08c; --good-bg: #123322; --bad: #ff8f87; --bad-bg: #3b1613; --warn-bg: #3a2f0b;
    --lead: #bd9b2a; --lead-ink: #1b1400; --hot: #d9742a; --hot-ink: #170a00; --confirmed: #4a90e2; --confirmed-ink: #04152b;
    --travel: #8b7de6; --travel-ink: #0c0828; --dropoff: #2aa7b8; --dropoff-ink: #00181c; --pickup: #6bc0cc; --pickup-ink: #00181c; --install: #5da843; --install-ink: #07200a; --overstay: #8fb677; --overstay-ink: #0a1a06; --unavail: #6c6c78; --weekend: #1b1a2b; --today: rgba(253, 184, 19, .22);
  }
}
/* hidden must win over every display rule below (the scripts hide parts with el.hidden). */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Manrope", system-ui, sans-serif; background: var(--bg); color: var(--text); }
#app { min-height: 100%; display: flex; flex-direction: column; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 18px; } h3 { font-size: 15px; margin-bottom: 8px; }
small, .muted { color: var(--text-3); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* controls */
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); padding: 6px 12px; }
button:hover { background: var(--surface-2); }
button.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 700; }
button.primary:hover { filter: brightness(.95); }
button.danger { border-color: var(--bad); color: var(--bad); }
button.small { padding: 3px 8px; font-size: 12px; }
button.icon { border: 0; background: none; font-size: 22px; line-height: 1; padding: 0 6px; }
input, select, textarea { background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); padding: 6px 8px; min-width: 0; }
textarea { resize: vertical; width: 100%; }
.spacer { flex: 1; }
.hint { color: var(--text-3); font-size: 12px; margin: 10px 0 0; }
.empty { padding: 28px; text-align: center; color: var(--text-3); }
.form-error { color: var(--bad); background: var(--bad-bg); border-radius: var(--radius); padding: 0; }
.form-error:not(:empty) { padding: 8px 10px; margin-top: 8px; }

/* header */
.top { display: flex; align-items: center; gap: 14px; padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; flex-wrap: wrap; }
.brand .logo { height: 26px; display: block; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .brand .logo-light { display: none; } .brand .logo-dark { display: block; } }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 7px 12px; border-radius: var(--radius); font-weight: 600; color: var(--text-2); }
.nav a:hover { background: var(--surface-2); }
.nav a.on { background: var(--brand); color: var(--brand-ink); }
.count { background: var(--bad-fill); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 7px; margin-left: 6px; }
.langs { display: flex; border: 1px solid var(--control-border); border-radius: var(--radius); overflow: hidden; }
.langs button { border: 0; border-radius: 0; padding: 4px 9px; font-size: 12px; font-weight: 700; }
.langs button.on { background: var(--text); color: var(--bg); }
.me { font-weight: 600; } .me small { font-weight: 400; }
main { padding: 16px 18px 40px; flex: 1; min-width: 0; }

/* toolbars and segmented buttons */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar.col { flex-direction: column; align-items: stretch; }
.segs { display: inline-flex; }
.seg { border-radius: 0; margin-left: -1px; padding: 6px 12px; }
.segs .seg:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.segs .seg:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.cal-title { font-size: 16px; min-width: 180px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; color: var(--text-2); align-items: center; }
.lg { display: inline-flex; align-items: center; gap: 4px; }
.lg.ph-lead::before, .lg.ph-hot::before, .lg.ph-confirmed::before, .lg.ph-travel::before, .lg.ph-dropoff::before, .lg.ph-pickup::before, .lg.ph-install::before, .lg.ph-overstay::before, .lg.ph-unavailable::before, .lg.sw::before { content: ""; width: 14px; height: 10px; border-radius: 2px; display: inline-block; order: 1; }
/* The legend: a colour square before each phase name (::before), the checkbox shows or hides that phase. */
.lg input { order: 0; }
.lg.ph-lead::before { background: var(--lead); } .lg.ph-hot::before { background: var(--hot); } .lg.ph-confirmed::before { background: var(--confirmed); }
.lg.ph-travel::before { background: var(--travel); } .lg.ph-dropoff::before { background: var(--dropoff); } .lg.ph-pickup::before { background: var(--pickup); }
.lg.ph-install::before { background: var(--install); } .lg.ph-overstay::before { background: var(--overstay); }
.lg.ph-unavailable::before { background: repeating-linear-gradient(45deg, var(--unavail) 0 3px, transparent 3px 6px); border: 1px solid var(--unavail); }

/* the grid */
/* the grid (timeline.js): a header that sticks to the top, a body as high as all rows, rows placed absolutely so only
   the rows in view exist; the label column (190px, LABEL_W in timeline.js) sticks to the left. Grid lines are one
   background on the body. */
.tl { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: calc(100vh - 250px); min-height: 160px; }
.tl-small .tl { max-height: 60vh; min-height: 0; }
.tl-inner { min-width: 900px; position: relative; }
.tl-inner.month { min-width: 760px; }
.tl-inner.year { min-width: 1500px; }
.tl-inner.span { min-width: 1000px; }
.tl-row { display: grid; grid-template-columns: var(--lw) 1fr; border-bottom: 1px solid var(--grid); }
.tl-body { position: relative; background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px); background-size: calc((100% - var(--lw)) / var(--days, 30)) 100%; background-position: var(--lw) 0; background-repeat: repeat-x; }
.tl-inner.year .tl-body { background-image: none; }
.tl-body > .tl-row { position: absolute; left: 0; right: 0; }
.tl-label { position: sticky; left: 0; z-index: 4; background: var(--surface); padding: 3px 8px; border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.tl-head { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); }
.tl-head .tl-label { z-index: 7; }
.tl-group { background: var(--surface-2); cursor: pointer; font-weight: 700; z-index: 3; }
.tl-group .tl-label { background: var(--surface-2); }
.caret { font-size: 10px; color: var(--text-3); }
.tl-track { position: relative; }
.tl-track.selectable { cursor: cell; }
.tl-htrack { height: 34px; }
.tl-h { position: absolute; top: 0; bottom: 0; text-align: center; font-size: 11px; line-height: 1.15; padding-top: 3px; border-left: 1px solid var(--grid); color: var(--text-2); overflow: hidden; }
.tl-h.we { background: var(--weekend); } .tl-h.mon { border-left-color: var(--control-border); }
.tl-h i { display: block; font-style: normal; font-size: 9px; color: var(--text-3); }
.tl-h.month { font-weight: 700; padding-top: 9px; border-left-color: var(--control-border); }
.tl-inner.span .tl-h.month { bottom: auto; height: 17px; padding-top: 2px; }
.tl-h.small { top: 17px; padding-top: 1px; font-size: 10px; }
/* today as a column over all rows; the selection while dragging over empty days; bars that can be dragged. */
.tl-today { position: absolute; top: 0; bottom: 0; background: var(--today); pointer-events: none; z-index: 1; }
.tl-row.inactive { opacity: .55; }
.tl-sel { position: absolute; top: 2px; bottom: 2px; background: var(--brand); opacity: .45; border-radius: 3px; pointer-events: none; }
.bar.drag { cursor: grab; }
.bar.dragging { opacity: .85; cursor: grabbing; box-shadow: 0 0 0 2px var(--brand); z-index: 3; }
.bar { position: absolute; border: 0; border-radius: 3px; padding: 0 4px; font-size: 11px; line-height: 1; text-align: left; overflow: hidden; white-space: nowrap; min-width: 3px; display: flex; align-items: center; }
.bar span { overflow: hidden; text-overflow: ellipsis; }
.tl-inner.year .bar { font-size: 9px; padding: 0 1px; }
/* One colour per phase for the bars of the grid and the badges in tables and forms. */
.bar.ph-lead, .badge.ph-lead { background: var(--lead); color: var(--lead-ink); }
.bar.ph-hot, .badge.ph-hot { background: var(--hot); color: var(--hot-ink); }
.bar.ph-confirmed, .badge.ph-confirmed { background: var(--confirmed); color: var(--confirmed-ink); }
.bar.ph-travel, .badge.ph-travel { background: var(--travel); color: var(--travel-ink); }
.bar.ph-dropoff, .badge.ph-dropoff { background: var(--dropoff); color: var(--dropoff-ink); }
.bar.ph-pickup, .badge.ph-pickup { background: var(--pickup); color: var(--pickup-ink); }
.bar.ph-install, .badge.ph-install { background: var(--install); color: var(--install-ink); }
.bar.ph-overstay, .badge.ph-overstay { background: var(--overstay); color: var(--overstay-ink); }
.bar.ph-unavailable, .badge.ph-unavailable { background: repeating-linear-gradient(45deg, var(--unavail) 0 4px, var(--surface) 4px 8px); color: var(--text); border: 1px solid var(--unavail); }
.bar:hover, .bar:focus-visible { opacity: 1; z-index: 2; box-shadow: 0 0 0 2px var(--text); }

/* split layout (per unit) */
.split { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }
.side { position: sticky; top: 64px; }
.main { min-width: 0; }
.pick { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 220px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pick button { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--grid); border-radius: 0; background: none; padding: 7px 10px; }
.pick button.on { background: var(--brand-soft); box-shadow: inset 3px 0 var(--brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.card b { font-size: 20px; } .card.big b { font-size: 26px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.detail { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }

/* tables */
.scroll-y { max-height: calc(100vh - 260px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; }
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
.grid th { text-align: left; font-size: 12px; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-2); z-index: 1; white-space: nowrap; }
.grid th.sortable { cursor: pointer; }
.grid td { padding: 6px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.grid tr.click { cursor: pointer; } .grid tr.click:hover, .grid tr.on { background: var(--brand-soft); }
.grid tr.inactive td { color: var(--text-3); }
.grid.num td.n, .grid.num th:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.actions { white-space: nowrap; display: flex; gap: 6px; }
.barcell { min-width: 110px; }
/* The usage bar of the reports and the chart per month: busy in the confirmed colour, options in the hot colour. */
.ubar { display: flex; height: 10px; width: 110px; background: var(--grid); border-radius: 5px; overflow: hidden; }
.u-busy { background: var(--confirmed); } .u-hot, .u-open { background: var(--hot); } .u-lead { background: var(--lead); }
.reason { color: var(--text-2); font-style: italic; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Status of a request. */
.badge.st-requested { background: var(--warn-bg); color: var(--text); border: 1px solid var(--brand); }
.badge.st-approved { background: var(--good-bg); color: var(--good); }
.badge.st-rejected { background: var(--bad-bg); color: var(--bad); }
.chart { width: 100%; max-width: 900px; height: auto; }
.chart .gridline { stroke: var(--grid); } .chart .axis { fill: var(--text-3); font-size: 10px; } .chart .val { fill: var(--text); font-size: 10px; font-weight: 700; }
.chart rect.u-busy { fill: var(--confirmed); } .chart rect.u-hot, .chart rect.u-open { fill: var(--hot); } .chart rect.u-lead { fill: var(--lead); }
.lg.sw.u-busy::before { background: var(--confirmed); } .lg.sw.u-hot::before, .lg.sw.u-open::before { background: var(--hot); } .lg.sw.u-lead::before { background: var(--lead); }
.lg.sw { background: none !important; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(14, 13, 23, .5); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px; overflow: auto; }
.modal { background: var(--surface); border-radius: 10px; width: 100%; max-width: 520px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 4px; }
.modal-body { padding: 8px 18px 4px; }
.modal-actions { display: flex; gap: 8px; padding: 14px 18px 18px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field > span { font-size: 12px; font-weight: 700; color: var(--text-2); }
.field small { font-size: 11px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 6px; }
dl.info { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; } dl.info dt { color: var(--text-3); } dl.info dd { margin: 0; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); z-index: 200; max-width: 90vw; }
.toast.bad { background: var(--bad-fill); color: #fff; }

/* login */
.login { margin: 8vh auto; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.login .logo { height: 34px; }
.gbtn { min-height: 44px; }
.devbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px dashed var(--control-border); padding: 8px; border-radius: var(--radius); }

/* forms: unit picker, phases of a festival, free units bar, help on a collision, history */
button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
button.linklike { border: 0; background: none; padding: 0; color: var(--text-2); text-decoration: underline; align-self: flex-start; }
.freebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 10px; padding: 8px 10px; background: var(--brand-soft); border-radius: var(--radius); }
.picker { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.picker .toolbar { margin-bottom: 6px; }
.picker-list { max-height: 240px; overflow: auto; display: flex; flex-direction: column; }
.pick-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid var(--grid); }
.pick-row small { flex: 1; }
.pick-row.st-busy { opacity: .55; }
.avail { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 8px; }
.avail.free { background: var(--good-bg); color: var(--good); } .avail.options { background: var(--warn-bg); color: var(--text); } .avail.busy { background: var(--bad-bg); color: var(--bad); }
.parts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.part { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
fieldset.quick { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px 10px; }
fieldset.quick legend { font-size: 12px; font-weight: 700; color: var(--text-2); }
.row4 { display: grid; grid-template-columns: 1fr 1fr 1fr 90px 90px; gap: 8px; }
input.num { width: 80px; }
.help { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.conflicts { margin: 8px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; }
details.history { font-size: 12px; } details.history ul { margin: 6px 0 0; padding-left: 16px; } details.history li { margin-bottom: 4px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; margin: 0 6px 6px 0; }
.hubtotals { margin-bottom: 8px; }
.form-error .help, .form-error .conflicts { color: var(--text); }

/* Keyboard focus on the elements that act as buttons (core.js clicks them on Enter or space). */
.tl-group:focus-visible, tr.click:focus-visible, th.sortable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Small screens: a phone gets a narrower label column (timeline.js reads --lw when it makes a grid) and a shorter header. */
@media (max-width: 600px) {
  :root { --lw: 112px; }
  .top > strong, .me small { display: none; }
  .top { gap: 6px; padding: 6px 8px; }
  .nav a { padding: 6px 8px; font-size: 13px; }
  .tl-label { padding: 2px 4px; font-size: 12px; }
  .tl-label small { display: none; }
  .legend { gap: 8px; }
}

/* A tablet: the list of units above the unit, form fields under each other. */
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; } .side { position: static; } .pick { max-height: 200px; }
  main { padding: 12px 10px 30px; }
  .row2, .row4 { grid-template-columns: 1fr; } .top { gap: 8px; padding: 8px 10px; }
}
/* Print: only the planning, at full length. */
@media print { .top, .toolbar, .legend, .hint { display: none; } .tl { max-height: none; overflow: visible; } }

/* user form: the hubs of a person as boxes to tick */
.hubboxes { display: flex; flex-wrap: wrap; gap: 6px 14px; }