* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; color: #222; background: #f5f5f3; }
nav { display: flex; flex-wrap: wrap; gap: 2px; background: #2d3e50; padding: 0 8px; }
nav a { color: #dde; padding: 10px; text-decoration: none; }
nav a.active, nav a:hover { background: #445a70; color: #fff; }
nav .who { margin-left: auto; color: #aab; padding: 10px; }
nav .who a { padding: 0; }
main { padding: 16px 20px; max-width: 1400px; }
h1 { margin: 0 0 12px; font-size: 1.5em; }
h2 { font-size: 1.15em; margin: 18px 0 8px; }
a { color: #1f5f9e; }
input, select, textarea, button { font: inherit; padding: 4px 6px; }
button, .button { background: #2d6ca2; color: #fff; border: 0; border-radius: 3px; padding: 5px 10px; cursor: pointer; text-decoration: none; }
button.danger { background: #b03a2e; }
button.link { background: none; color: #b03a2e; padding: 0 4px; }
.num { width: 4.5em; }
.year { width: 6em; }
.inline { display: inline; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 12px 16px; margin: 12px 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
label { display: block; }
label input, label select, label textarea { display: block; width: 100%; }
label.check { display: inline; margin-right: 12px; }
label.check input { display: inline; width: auto; }
fieldset { border: 0; padding: 0; margin: 0; }
.login { max-width: 320px; display: grid; gap: 10px; }
.flash { padding: 8px 12px; border-radius: 3px; margin: 4px 0; }
.flash.ok { background: #e3f3e3; }
.flash.warn { background: #fff3cd; }
.flash.error { background: #f8d7da; }
.muted { color: #777; }
.good { color: #2e7d32; }
.bad { color: #b03a2e; }
.stats { display: flex; flex-wrap: wrap; gap: 24px; font-size: 1.1em; }
.stats b { font-size: 1.4em; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
table { border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #ddd; padding: 4px 8px; text-align: left; vertical-align: top; }
th { background: #eef0f2; }
table.list tr:hover td { background: #f7f9fb; }
table.grid td { text-align: center; min-width: 90px; }
table.grid td.open { background: #fde2e0; }
table.grid td.full { background: #e3f3e3; }
table.history td { text-align: center; }
table.history td:first-child { text-align: left; }
.tabs a { display: inline-block; padding: 6px 10px; margin-right: 4px; background: #e4e7ea; text-decoration: none; border-radius: 3px; }
.tabs a.active { background: #2d6ca2; color: #fff; }
.area { background: #fff; border: 1px solid #ddd; padding: 8px 14px 14px; margin: 14px 0; }
table.plan { width: 100%; margin: 8px 0; }
td.spots { display: flex; flex-wrap: wrap; gap: 8px; }
.spot { border: 1px solid #ccd; border-radius: 3px; padding: 6px 8px; min-width: 190px; background: #fafbfc; }
.spot.open { border-color: #e0a09a; background: #fff6f5; }
.spot ul { margin: 4px 0; padding-left: 18px; }
.spot.add { background: none; border-style: dashed; }
li.conflict { color: #b03a2e; font-weight: bold; }
li.conflict::after { content: " ⚠"; }
.filters, .picker { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Schedule: screen and A4 landscape print */
.schedule .block { background: #fff; margin: 0 0 14px; break-inside: avoid; }
.schedule .block header { display: flex; gap: 24px; align-items: baseline; border-bottom: 3px solid #2d3e50; padding: 4px 0; }
.schedule .block header h2 { margin: 0; text-transform: uppercase; }
.schedule .block table { width: 100%; table-layout: fixed; }
.schedule .block th, .schedule .block td { border-color: #999; }
.schedule .block th.time, .schedule .block td.time { width: 9em; font-weight: bold; }
.schedule .block td div { padding: 1px 0; }
.schedule .block .empty { border-bottom: 1px dotted #999; height: 1.3em; }
.schedule .na { color: #bbb; }

@page { size: A4 landscape; margin: 8mm; }
@media print {
    body { background: #fff; font-size: 11pt; }
    nav, .no-print, h1 { display: none; }
    main { padding: 0; max-width: none; }
    .schedule .block.split { break-after: page; }
    th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}