:root {
    color-scheme: light;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #1f2937;
    background: #eef2f7;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { min-width: 320px; overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    color: #fff;
    background: linear-gradient(110deg, #164e75, #287aa3);
    border-bottom: 3px solid #d4a83d;
    box-shadow: 0 2px 8px #102b3b44;
}
.brand { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; }
.brand-logo-link { display: block; flex: 0 0 54px; line-height: 0; }
.brand-logo { width: 54px; height: 54px; flex: 0 0 54px; object-fit: cover; border: 1px solid #ffffff66; border-radius: 0; }
.brand-logo-link:focus-visible { outline: 2px solid #ffdf83; outline-offset: 3px; }
.brand-copy { min-width: 0; }
.brand-title { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.topbar h1 { margin: 0; font-size: 18px; line-height: 1.25; }
.region-label { margin: 0; color: #fff; font-size: calc(18px - 4pt); font-weight: 700; }
.summary-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.summary-links button, .summary-links a {
    border: 1px solid #ffffff88;
    border-radius: 4px;
    padding: 7px 9px;
    color: #fff;
    background: #ffffff12;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}
.summary-links button:hover, .summary-links a:hover { background: #ffffff2b; }

.workspace { display: flex; width: 100%; height: calc(100% - 72px); min-height: 0; }
.sidebar {
    z-index: 500;
    display: flex;
    flex: 0 0 306px;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    background: #f8fafc;
    border-right: 1px solid #cbd5e1;
}
.search-panel, .layer-panel { border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; }
.search-panel { padding: 11px; }
.search-panel h2, .panel-heading h2 { margin: 0; font-size: 14px; }
.search-row { display: flex; gap: 5px; margin-top: 8px; }
.search-row input { width: 100%; min-width: 0; padding: 8px; border: 1px solid #94a3b8; border-radius: 4px; font-size: 12px; }
.search-row button, #measure-result button { border: 0; border-radius: 4px; padding: 0 10px; color: #fff; background: #1e6289; cursor: pointer; }
.search-results { display: none; max-height: 170px; overflow: auto; }
.search-results:not(:empty) { display: block; margin-top: 5px; border-top: 1px solid #e2e8f0; }
.search-result { display: flex; width: 100%; justify-content: space-between; padding: 7px 5px; border: 0; border-bottom: 1px solid #e2e8f0; color: #1f2937; background: #fff; text-align: left; cursor: pointer; }
.search-result:hover { color: #164e75; background: #eff6ff; }
.search-result small { color: #64748b; }

.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 11px; color: #fff; background: #356f8d; border-radius: 4px 4px 0 0; }
.text-button { padding: 4px 6px; border: 1px solid #ffffff77; border-radius: 3px; color: #fff; background: transparent; font-size: 10px; cursor: pointer; }
.layer-panel details { padding: 0 10px 8px; border-bottom: 1px solid #e2e8f0; }
.layer-panel details:last-child { border-bottom: 0; }
.layer-panel summary { padding: 10px 0 6px; color: #334155; font-size: 12px; font-weight: 700; cursor: pointer; }
.layer-row { display: flex; min-height: 27px; align-items: center; gap: 7px; color: #334155; font-size: 11px; cursor: pointer; }
.layer-row input { flex: 0 0 auto; margin: 0; accent-color: #1e6289; }
.layer-row small { margin-left: auto; color: #64748b; font-size: 9px; }
.swatch { flex: 0 0 17px; width: 17px; height: 12px; display: inline-block; border: 1px solid #64748b; }
.swatch.boundary { border: 2px solid #8a2d51; }
.swatch.county { border: 1px solid #1480a8; }
.swatch.municipality { border: 1px solid #448b41; }
.swatch.settlement { width: 8px; height: 8px; flex-basis: 8px; border-radius: 50%; background: #b94c3a; }
.swatch.sheet-index { border: 1px solid #6180a1; }
.swatch.aggregate { border: 1px solid #8463ad; background: #8463ad55; }
.swatch.raster { border-color: #a0aab6; background: repeating-linear-gradient(135deg,#dae1e8,#dae1e8 3px,#f8fafc 3px,#f8fafc 6px); }
.year-layers, .raster-layers { padding-left: 8px; }
.raster-year-row { flex: 1 1 auto; min-width: 0; }
.raster-year-row small { margin-left: auto; }
.year-swatch { width: 16px; height: 12px; flex: 0 0 16px; border: 1px solid #596273; }
.year-swatch-hatched { background-image: repeating-linear-gradient(135deg, transparent 0 4px, #3d7084 4px 5px); }
.year-swatch-hatched-2019 { background-color: #fff !important; background-image: repeating-linear-gradient(135deg, transparent 0 4px, #69763a 4px 5px), repeating-linear-gradient(45deg, transparent 0 4px, #69763a 4px 5px); }
.leaflet-tooltip.sheet-label { padding: 1px 2px; border: 0; border-radius: 0; color: inherit; background: transparent; box-shadow: none; font-size: 16.2px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; }
.leaflet-tooltip.sheet-label::before { display: none; }
.sheet-label span { font-size: 16.2px; font-weight: 600; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.sheet-label .sheet-name { font-size: 13.5px; font-style: italic; }
.sheet-label .sheet-year { color: #dc2626; }
.leaflet-tooltip.sheet-label-settlement { font-size: 12px; color: #263746; }
.sheet-label-settlement span { font-size: 12px; font-weight: 500; }
.sheet-label-settlement .settlement-name { font-size: 12px; font-weight: 500; color: #263746; }
.sheet-label-major-city .settlement-name { font-size: 18px; font-weight: 700; color: #173b54; }
.raster-notice { margin: 2px 0 6px; padding: 7px; border-left: 3px solid #c98b16; background: #fff8e6; color: #69490d; font-size: 10px; line-height: 1.4; }
.data-status { margin: auto 0 0; padding: 8px; border-radius: 4px; color: #475569; background: #e8eef4; font-size: 10px; line-height: 1.4; }
.data-status.error { color: #7f1d1d; background: #fee2e2; }

.map-region { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; background: #e7edf1; }
#map { width: 100%; height: 100%; }
.toolbar {
    position: absolute;
    z-index: 700;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 24px);
    padding: 5px;
    border: 1px solid #9aa8b6;
    border-radius: 5px;
    background: #ffffffed;
    box-shadow: 0 2px 7px #0f172a2a;
}
.toolbar button {
    display: inline-flex;
    min-width: 58px;
    height: 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 5px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    color: #1e4e6d;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}
.toolbar button svg { width: 22px; height: 22px; flex: 0 0 22px; }
.toolbar button span { color: #334155; font-size: 9px; line-height: 1.1; white-space: nowrap; }
.toolbar button:hover, .toolbar button.active { background: #eaf3f8; border-color: #5083a1; }
.toolbar-separator { height: 23px; margin: 0 2px; border-left: 1px solid #cbd5e1; }
.leaflet-container { font: 12px "Segoe UI", Arial, sans-serif; }
.leaflet-popup-content { min-width: 180px; margin: 10px 12px; }
.popup-title { margin-bottom: 5px; color: #164e75; font-weight: 700; }
.popup-table { width: 100%; border-collapse: collapse; }
.popup-table th, .popup-table td { padding: 3px 2px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.popup-table th { color: #64748b; font-weight: 500; }
.popup-table td { font-weight: 600; }
.statusbar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 500; display: flex; gap: 18px; justify-content: space-between; padding: 5px 10px; color: #fff; background: #173b54e8; font-size: 10px; pointer-events: none; }
#map-message { margin-left: auto; }
dialog { width: min(760px, calc(100% - 30px)); max-height: 80vh; padding: 0; border: 1px solid #94a3b8; border-radius: 6px; box-shadow: 0 12px 35px #0f172a66; }
dialog::backdrop { background: #0f172a88; }
.dialog-heading { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: #fff; background: #1e6289; }
.dialog-heading h2 { margin: 0; font-size: 15px; }
.dialog-heading button { border: 0; color: #fff; background: transparent; font-size: 22px; cursor: pointer; }
.report-content { max-height: calc(80vh - 48px); overflow: auto; padding: 12px 14px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.report-table th, .report-table td { padding: 6px; border: 1px solid #dbe2e8; text-align: left; }
.report-table th { position: sticky; top: 0; background: #edf3f7; }
.report-table tbody tr:nth-child(even) { background: #f8fafc; }
.report-table button { padding: 0; border: 0; color: #155e87; background: none; text-decoration: underline; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

body.printing .sidebar, body.printing .topbar, body.printing .toolbar, body.printing .statusbar { display: none !important; }
body.printing .workspace, body.printing .map-region { width: 100%; height: 100%; }

@media (max-width: 800px) {
    .topbar { align-items: flex-start; flex-direction: column; gap: 7px; padding: 8px 10px; }
    .brand { gap: 9px; }
    .brand-logo-link { flex-basis: 46px; }
    .brand-logo { width: 46px; height: 46px; flex-basis: 46px; }
    .brand-title { align-items: center; flex-direction: column; gap: 2px; }
    .topbar h1 { font-size: 15px; }
    .region-label { font-size: 10px; }
    .summary-links { justify-content: flex-start; }
    .summary-links button, .summary-links a { padding: 5px 7px; font-size: 10px; }
    .workspace { height: calc(100% - 112px); }
    .sidebar { flex-basis: 245px; padding: 8px; }
    .toolbar { right: 10px; left: 10px; }
}
@media (max-width: 560px) {
    .workspace { position: relative; }
    .sidebar { position: absolute; top: 8px; right: 8px; bottom: 38px; width: min(270px, 78vw); max-height: 75%; background: #f8fafceF; box-shadow: 0 2px 8px #0f172a33; }
    .toolbar { top: auto; right: auto; bottom: 42px; left: 8px; max-width: calc(100% - 16px); }
    .toolbar button { min-width: 53px; height: 46px; }
    .toolbar button svg { width: 20px; height: 20px; flex-basis: 20px; }
    .toolbar button span { font-size: 8px; }
    .statusbar { font-size: 9px; }
}
@media print {
    @page { size: landscape; margin: 10mm; }
    body { overflow: visible; }
    body.printing .workspace, body.printing .map-region { height: 180mm; }
}

/* Znak WODGiK zachodzi na osobne tło tytułu; granat i złoty akcent pozostają. */
.topbar{min-height:112px;align-items:center}
.topbar>.brand{position:relative;flex:0 1 auto;width:max-content;max-width:min(100%,calc(100vw - 300px));min-width:0;padding:0}
.brand-logo-link{position:absolute;z-index:2;left:0;top:50%;transform:translateY(-50%);width:96px;height:96px;flex:none}
.brand-logo{width:96px;height:96px;object-fit:cover;border:0;border-radius:18px;box-shadow:0 4px 16px #10283b66}
.brand-copy{max-width:100%;margin-left:74px}
.brand-title{align-items:flex-start;text-align:left;width:fit-content;max-width:100%;padding:13px 20px 13px 36px;border:1px solid #ffffff66;border-radius:15px;background:linear-gradient(110deg,#164e75,#287aa3);box-shadow:0 2px 8px #102b3b44}
.topbar h1{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:800px){.topbar{min-height:90px}.topbar>.brand{max-width:100%}.brand-logo-link{width:72px;height:72px}.brand-logo{width:72px;height:72px;border-radius:15px}.brand-copy{margin-left:55px}.brand-title{padding:9px 12px 9px 28px}.topbar h1{font-size:14px}}/* Nie rozciągaj tła nagłówka poza tytuł; zestawienia zachowują granatowe przyciski. */
.topbar{background:transparent;border-bottom:0;box-shadow:none}
.brand-title{border:2px solid #d4a83d}
.summary-links button,.summary-links a{border-color:#287aa3;background:linear-gradient(110deg,#164e75,#287aa3);box-shadow:0 2px 7px #102b3b33}
.summary-links button:hover,.summary-links a:hover{background:#287aa3}
/* Nagłówek SOK: motyw fioletowy według ustalonej palety. */
.brand-title{background:linear-gradient(110deg,#594273,#71548a 65%,#987cab);border-color:#d8c7e4;box-shadow:0 4px 14px #32273f55}

/* Sekcje menu zachowuja wysokosc swojej zawartosci; przewijany jest caly panel. */
.sidebar > .search-panel, .sidebar > .layer-panel, .sidebar > .data-status { flex: 0 0 auto; }
.layer-panel details { display: block; height: auto; min-height: 0; }
.layer-panel details[open] { padding-bottom: 12px; }
.year-layers, .raster-layers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.year-layers .layer-row, .raster-layers .layer-row { min-width: 0; min-height: 28px; height: auto; }

.layer-panel summary input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: middle; accent-color: #1e6289; }

/* Skala i etykiety przegladow w granicach arkusza. */
.statusbar #scale{order:2;margin-left:auto;white-space:nowrap}.statusbar #map-message{margin-left:0}.map-region .leaflet-bottom.leaflet-right{bottom:30px}.leaflet-tooltip.sheet-label-annual{font-size:var(--annual-label-size,16px);line-height:1.12;white-space:nowrap}.sheet-label.sheet-label-annual span{font-size:var(--annual-label-size,16px)}

/* SOK: fioletowy motyw i prawidlowa wysokosc obszaru mapy. */
body{display:flex;flex-direction:column}.topbar{flex:0 0 auto}.workspace{height:auto;flex:1 1 auto;min-height:0}.map-region{min-height:0}
.sidebar{background:linear-gradient(180deg,#f4eff8,#e9e0f0);border-color:#bba9cb;box-shadow:3px 0 12px #38254633}
.search-panel,.layer-panel{border-color:#bca9cc;background:#fff;box-shadow:0 3px 10px #48325225}
.panel-heading,.dialog-heading{background:linear-gradient(110deg,#594273,#71548a 65%,#9279a8);box-shadow:0 3px 9px #39274933}
.summary-links button,.summary-links a{border-color:#c8b5d4;background:linear-gradient(110deg,#594273,#71548a 65%,#9279a8);box-shadow:0 3px 9px #39274944}.summary-links button:hover,.summary-links a:hover{background:#71548a}
.search-row button,#measure-result button{background:linear-gradient(110deg,#594273,#84699b);box-shadow:0 2px 6px #39274933}.layer-row input,.layer-panel summary input[type=checkbox]{accent-color:#71548a}
.toolbar{border-color:#bba9cb;box-shadow:0 4px 12px #38254644}.toolbar button:hover,.toolbar button.active{background:#eee7f4;border-color:#9279a8}.data-status{background:#eee8f3;color:#483557}
.statusbar{z-index:750;gap:8px 16px;align-items:center;background:linear-gradient(100deg,#49355f,#71548a);box-shadow:0 -3px 10px #30233e55}.statusbar #scale{flex:0 0 auto;order:2;margin-left:auto;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}.statusbar #map-message{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.map-region .leaflet-bottom.leaflet-right{bottom:36px}
@media(max-width:560px){.statusbar #coordinates,.statusbar #map-message{display:none}.statusbar #scale{font-size:11px}.map-region .leaflet-bottom.leaflet-right{bottom:42px}}

.popup-sheet-code { font-size: 1.2em; }
.popup-edition + .popup-edition { border-top: 2px solid #d8c8e3; margin-top: 7px; padding-top: 7px; }

/* Menu SOK: krótsze w pionie, z zachowaniem pierwotnej szerokości. */
.sidebar{flex-basis:306px;max-height:76vh;align-self:flex-start;margin:12px 0 12px 12px;gap:7px;padding:9px;overflow-y:auto;background:linear-gradient(155deg,#faf7fc 0%,#eee7f4 55%,#e4daec 100%);border-right:1px solid #b49fc4;border-radius:9px;box-shadow:inset -1px 0 #ffffffcc,5px 0 16px #38254644}
.search-panel,.layer-panel{border-color:#b49fc4;border-radius:8px;background:linear-gradient(145deg,#faf7fc 0%,#eee7f4 100%);box-shadow:0 4px 12px #38254630,inset 0 1px #ffffff}
.search-panel{padding:8px 9px}
.search-panel h2,.panel-heading h2{font-size:13px}
.search-row{gap:4px;margin-top:6px}
.search-row input{padding:6px 7px}
.panel-heading{padding:8px 9px}
.layer-panel details{padding:0 8px 5px}
.layer-panel details[open]{padding-bottom:7px}
.layer-panel summary{padding:7px 0 4px;font-size:11px}
.layer-row{min-height:23px;gap:6px;font-size:10px}
.year-layers .layer-row,.raster-layers .layer-row{min-height:23px}
.composition-disclaimer{margin:7px 0;font-size:11px}
.data-status{padding:6px;font-size:9px}
@media(max-width:800px){.sidebar{flex-basis:245px;max-height:calc(100% - 16px);margin:8px 0 8px 8px;padding:7px}}
@media(max-width:560px){.sidebar{width:min(270px,78vw);max-height:75%;margin:0;align-self:stretch;padding:8px;background:linear-gradient(155deg,#faf7fcf2,#e4daecef);box-shadow:0 5px 16px #38254655}}