/* Palete — utilitaren vmesnik za eno sobo. Barve: brušen apnenec kot ozadje, oranžna
   stranke (accent2 E97132 iz registra) za enote, ki potrebujejo človeka. */
:root {
  --ground: #eef0eb; --paper: #fbfbf9; --ink: #1e2622; --ink-2: #4b564f;
  --line: #d3d9d1; --accent: #e97132; --accent-soft: #f6c6ad; --ok: #3d7a5a; --ok-soft: #dcebe1; --off: #b7791f;
  --tile: #ffffff;
}
* { box-sizing: border-box; }
/* atribut hidden mora premagati vsako pravilo display, tudi #id { display: flex } */
[hidden] { display: none !important; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.45 system-ui, "Segoe UI", sans-serif; }
header.top { display: flex; align-items: baseline; gap: 1rem; padding: .7rem 1.25rem; background: var(--tile); border-bottom: 2px solid var(--accent); }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.sub { color: var(--ink-2); font-size: .9rem; }
.actions { margin-left: auto; display: flex; gap: 1rem; font-size: .9rem; }
main { max-width: 90rem; margin: 0 auto; padding: 1.25rem; display: grid; gap: 1.25rem; }
/* #job-body je en otrok main-a, zato razmik med karticama znotraj njega nastavi sam */
#job-body { display: grid; gap: 2rem; }
h1 { margin: 0; font-size: 1.5rem; } h2 { margin: 0 0 .75rem; font-size: 1.1rem; } h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.muted { color: var(--ink-2); font-weight: 400; } .small { font-size: .82rem; }
.card { background: var(--paper); border: 1px solid var(--line); padding: 1rem 1.25rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; }
.row label { display: grid; gap: .2rem; font-size: .85rem; color: var(--ink-2); }
.row .grow { flex: 1 1 14rem; }
input, select, button { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 3px; background: var(--tile); color: var(--ink); }
input.short { width: 4.5rem; }
input.pos { width: 3.5rem; }  /* pozicija je kratka: 25, NN1 — daljših ne pričakujemo */
td input[type=number] { width: 6.5rem; text-align: right; }
button { background: var(--ink); color: #fff; border-color: var(--ink); cursor: pointer; }
button.secondary { background: var(--tile); color: var(--ink); border-color: var(--line); }
button.small { padding: .2rem .5rem; font-size: .82rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--ink-2); font-weight: 600; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.low td { background: var(--accent-soft); }
tr.skipped td { color: var(--ink-2); }
td.note { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { display: inline-block; min-width: 6.5rem; text-align: center; white-space: nowrap; padding: .05rem .5rem; border-radius: 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--ink-2); color: var(--ink-2); }
.kind-floor { border-color: #6c7f73; } .kind-wall { border-color: #3d5a7a; color: #3d5a7a; } .kind-vanity, .kind-cabinet { border-color: var(--off); color: var(--off); }
.tag { font-size: .72rem; border: 1px solid var(--line); padding: 0 .3rem; border-radius: 2px; color: var(--ink-2); }
.delta .ok { color: var(--ok); } .delta .off { color: var(--accent); font-weight: 600; }
.lines { padding-left: 1.25rem; } .lines li { margin: .25rem 0; } code { font-size: .85rem; background: var(--tile); border: 1px solid var(--line); padding: .1rem .35rem; }
details.warn { background: #fff7e6; border: 1px solid #f0d9a8; padding: .5rem .9rem; } details.warn ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
details.add { margin-top: 1rem; } details.add summary { cursor: pointer; color: var(--ink-2); }
.tools { justify-content: space-between; }
@media (max-width: 900px) { td.note { max-width: 10rem; } }

/* --- zložljive palete --- */
.row.between { justify-content: space-between; align-items: center; }
.toggle, .row .toggle { font-size: .85rem; color: var(--ink-2); display: flex; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; gap: .4rem; align-items: center; cursor: pointer; }
details.pallet { border: 1px solid var(--line); background: var(--tile); margin: .5rem 0; }
details.pallet > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 7.5rem 1fr auto auto; gap: 1rem; align-items: center; padding: .55rem .9rem; }
details.pallet > summary::-webkit-details-marker { display: none; }
details.pallet > summary::before { content: "▸"; color: var(--ink-2); position: absolute; margin-left: -.9rem; }
details.pallet[open] > summary::before { content: "▾"; }
details.pallet > summary { position: relative; padding-left: 1.6rem; }
details.pallet[open] > summary { border-bottom: 1px solid var(--line); background: var(--paper); }
details.pallet .dns { color: var(--ink-2); font-size: .9rem; }
details.pallet .dims { white-space: nowrap; }
details.pallet .count { white-space: nowrap; font-size: .85rem; color: var(--ink-2); }
details.pallet table { font-size: .85rem; }
details.pallet th, details.pallet td { padding: .25rem .45rem; }
details.pallet td input[type=number] { width: 5.5rem; padding: .2rem .35rem; }
details.pallet select { padding: .2rem .3rem; }
details.skipped > summary { color: var(--ink-2); }
.orange { color: var(--accent); }
.only-low tr.ok { display: none; }
.only-low details.pallet:not(:has(tr.low)) { display: none; }
h2.inline { display: inline; margin: 0; }
section.card > details > summary { cursor: pointer; }
@media (max-width: 1100px) { details.pallet > summary { grid-template-columns: 7.5rem 1fr; } }

/* --- seznam sob, nova soba, preimenovanje --- */
a.button, .button { display: inline-block; text-decoration: none; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 3px; padding: .35rem .7rem; font-size: .9rem; }
.button.secondary { background: var(--tile); color: var(--ink); border-color: var(--line); }
.card.narrow { max-width: 40rem; }
.stack { display: grid; gap: .9rem; }
.stack label { display: grid; gap: .25rem; font-size: .85rem; color: var(--ink-2); }
table.rooms td, table.rooms th { padding: .5rem .6rem; }
table.rooms td a { color: var(--ink); }
.right { text-align: right; }
.actions-cell a, .actions-cell form { margin-left: 1rem; white-space: nowrap; display: inline; }
button.linklike { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: inherit; }
button.danger-text { color: #a32626; }
.st { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; white-space: nowrap; border: 1px solid; }
.st-potrjeno { color: var(--ok); border-color: var(--ok); background: #eef6f1; }
.st-pregled { color: #9a4a12; border-color: var(--accent-soft); background: #fdece1; }
.st-prazno { color: var(--ink-2); border-color: var(--line); background: var(--tile); }
.titlebar { margin-bottom: .25rem; }
h1 .icon { background: none; border: none; color: var(--ink-2); cursor: pointer; font-size: 1rem; padding: .1rem .3rem; }
h1 .icon:hover { color: var(--accent); }
form.rename { display: flex; gap: .5rem; align-items: center; }
form.rename input { font-size: 1.3rem; padding: .2rem .4rem; min-width: 20rem; }

/* --- kartica z risbami --- */
details.drawings > summary { cursor: pointer; }
ul.filelist { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .3rem; }
ul.filelist li { display: flex; gap: .75rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
ul.filelist li a:first-child { flex: 1; }

/* --- ročno potrjena vrstica --- */
tr.edited td { background: var(--ok-soft); }

/* --- vrstice za register --- */
table.proposals th { white-space: nowrap; }
table.proposals thead tr.sub th { font-weight: 500; text-transform: none; letter-spacing: 0; padding-top: 0; }
table.proposals td.desc { font-size: .85rem; }
table.proposals td.num { font-variant-numeric: tabular-nums; }

/* --- logotip stranke (neobvezen: $PALETE_DATA/logo.svg|png|webp|jpg) --- */
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand .logo { height: 1.9rem; width: auto; display: block; }
table.rooms th { white-space: nowrap; }
table.rooms th.num, table.rooms td.num { width: 9.5rem; }
table.rooms th:nth-child(4), table.rooms td:nth-child(4) { width: 12rem; }
table.rooms th:last-child, table.rooms td:last-child { width: 14rem; }

/* --- risbe v dveh stolpcih --- */
ul.filelist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 800px) { ul.filelist { grid-template-columns: 1fr; } }

/* --- glava kartice: naslov levo, gumb desno v isti višini --- */
.row.tight { gap: .75rem; align-items: baseline; }
.cardhead { align-items: center; margin-bottom: .75rem; }
.cardhead h2 { margin: 0; }

/* --- števec ročno potrjenih enot (ista zelena kot vrstice) --- */
.green { color: var(--ok); }
ul.filelist a { color: var(--ink); text-decoration-color: var(--line); }
ul.filelist a:hover { text-decoration-color: var(--accent); }
ul.filelist form { display: flex; }
button.remove { background: none; border: none; color: var(--ink-2); cursor: pointer; padding: 0 .3rem; line-height: 1; font-size: .9rem; }
button.remove:hover { color: var(--accent); }

/* --- cona za povlek risb --- */
.dropzone { position: relative; display: grid; gap: .3rem; justify-items: center; text-align: center;
  padding: 1.1rem 1rem; border: 2px dashed var(--line); border-radius: 4px; background: var(--tile);
  cursor: pointer; color: var(--ink-2); transition: border-color .12s, background .12s; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone .dz-main { color: var(--ink); font-size: .95rem; }
.dropzone:hover { border-color: var(--ink-2); }
.dropzone.over { border-color: var(--accent); background: #fdf2ea; }
.dropzone.bad { border-color: var(--accent); }
.dropzone.bad .dz-note { color: var(--accent); }
.dropzone.busy { border-style: solid; border-color: var(--ok); background: var(--ok-soft); cursor: progress; }
.dropzone.busy input[type="file"] { pointer-events: none; }
.addfiles { border-top: 1px dashed var(--line); padding-top: .9rem; margin-top: .3rem; }

/* --- vrtavka in prekrivalo za dejanja, ki trajajo --- */
.spinner { display: inline-block; width: 1.05rem; height: 1.05rem; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -.2em; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
#busy { position: fixed; inset: 0; background: rgba(238, 240, 235, .75); display: flex;
  align-items: center; justify-content: center; z-index: 50; }
.busy-box { display: flex; gap: .75rem; align-items: center; background: var(--tile);
  border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 1rem 1.5rem;
  box-shadow: 0 6px 24px rgba(30, 38, 34, .12); font-size: .95rem; }
.busy-box .spinner { width: 1.3rem; height: 1.3rem; }
/* v gumbu: vidna samo med pošiljanjem (HTMX doda .htmx-request na obrazec) */
.small-spinner { width: .8rem; height: .8rem; border-width: 2px; border-top-color: #fff;
  border-color: rgba(255, 255, 255, .35); border-top-color: #fff; margin-left: .3rem; display: none; }
.htmx-request .small-spinner { display: inline-block; }
button[disabled] { opacity: .7; cursor: progress; }
.st-potrditev { color: #3d5a7a; border-color: #9db4cc; background: #eef3f8; }
.titlebar form { margin: 0; }

/* nastavitve */
.settings fieldset { border: 1px solid var(--line); padding: .75rem 1rem 1rem; display: grid; gap: .6rem; }
.settings legend { font-weight: 600; padding: 0 .4rem; }
.setting { display: grid; grid-template-columns: 11rem 9rem 1fr; gap: .6rem; align-items: center; }
.setting label { font-size: .9rem; }
.setting .value { display: flex; align-items: center; gap: .35rem; }
.setting .value input { width: 6rem; text-align: right; }
.setting input.changed { border-color: var(--accent, #e97132); }
.setting .unit { color: var(--ink-2); font-size: .85rem; }
.ok-note { color: #2c7a3d; }
.error { color: #a32626; }
button.danger { background: var(--tile); color: #a32626; border-color: #a32626; }
.push-right { margin-left: auto; }

/* analitika */
.tiles { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.tile { border: 1px solid var(--line); padding: .6rem .9rem; min-width: 7rem; display: grid; }
.tile b { font-size: 1.5rem; }
.tile span { color: var(--ink-2); font-size: .8rem; }
.tile.bad b { color: #a32626; }
table.bars td.bar { width: 60%; }
table.bars td.bar span { display: block; height: .8rem; background: var(--ink); opacity: .7; min-width: 1px; }
.row.cols { align-items: flex-start; gap: 1rem; }
.row.cols .grow { flex: 1 1 18rem; }
.actions a.current { font-weight: 700; }

/* nadstropja sobe */
.shelves-row { align-items: center; flex-wrap: wrap; gap: 1rem; }
.shelves { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.shelves .lbl { font-size: .85rem; color: var(--ink-2); }
.shelves select.police { font-size: .95rem; font-weight: 600; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--tile); color: var(--ink); }
.shelves label.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-2); margin: 0; }
.shelves label.check input { margin: 0; }
/* opozorilo na kartici palete: svetlo modro, čez vso širino — ločeno od oranžne (pregled) in zelene (popravljeno) */
details.pallet > summary form.tall { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-2); }
details.pallet > summary form.tall label.check { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; }
details.pallet > summary form.tall .gain b { color: var(--ink); }
details.pallet > summary .notice { flex: 1 1 100%; display: block; background: #dbeafe; color: #1e3a5f; border: 1px solid #93c5fd; padding: .3rem .6rem; border-radius: 2px; font-size: .85rem; }

/* številke palet, združevanje */
.kind .pno { margin-right: .3rem; }
details.pallet > summary form.merge { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ink-2); }
details.pallet > summary form.merge select { max-width: 32rem; font-size: .85rem; padding: .2rem .4rem; }
details.pallet > summary .notice.manual { flex: 1 1 auto; }
/* opozorilo stoji neposredno v mreži naslova (ne v obrazcu), zato mora čez vse stolpce samo */
details.pallet > summary .notice.warn { grid-column: 1 / -1; background: #fef3c7; color: #78350f; border-color: #fcd34d; }
select.pallet-pick { width: 5.2rem; padding: .2rem .3rem; }

/* skupinski premik kosov */
td.pick, th.pick { width: 1.4rem; padding-right: 0; }
td.pick input { margin: 0; }
form.bulk { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-top: 1px solid var(--line); font-size: .85rem; }
form.bulk label.check { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; color: var(--ink-2); }
form.bulk button[disabled] { opacity: .5; cursor: default; }

/* navodila (Markdown) */
.prose { max-width: 52rem; line-height: 1.55; }
.prose h1 { margin-top: 0; }
.prose h2 { margin-top: 1.8rem; border-bottom: 1px solid var(--line); padding-bottom: .2rem; }
.prose table { border-collapse: collapse; margin: .6rem 0 1rem; font-size: .9rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .3rem .6rem; text-align: left; vertical-align: top; }
.prose th { background: var(--tile); }
.prose code { background: var(--tile); padding: 0 .25rem; border-radius: 2px; }
.prose pre { background: var(--tile); border: 1px solid var(--line); border-radius: 4px; padding: .6rem .8rem; overflow-x: auto; font-size: .85rem; line-height: 1.4; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose li { margin: .2rem 0; }
.prose details.fold { border: 1px solid var(--line); border-radius: 4px; margin: .6rem 0; background: var(--paper); }
.prose details.fold > summary { cursor: pointer; padding: .45rem .8rem; list-style: none; display: flex; align-items: center; gap: .5rem; }
.prose details.fold > summary::-webkit-details-marker { display: none; }
.prose details.fold > summary::before { content: "▸"; color: var(--ink-2); }
.prose details.fold[open] > summary::before { content: "▾"; }
.prose details.fold > summary h3 { margin: 0; font-size: 1rem; }
.prose details.fold > .fold-body { padding: 0 .9rem .5rem; border-top: 1px solid var(--line); }

details.skipped details.sub { margin: .5rem .75rem; }
details.skipped details.sub > summary { font-size: .85rem; color: var(--ink-2); cursor: pointer; }

/* prijava */
.login { max-width: 26rem; margin: 3rem auto; }
.login-form { display: flex; flex-direction: column; gap: .8rem; }
.login-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--ink-2); }
.login-form input { font-size: 1rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 4px; }
.login .error { color: #9a1b1b; background: #fde8e8; border: 1px solid #f5b5b5; padding: .4rem .6rem; border-radius: 4px; }
nav.actions form.inline { display: inline; }
nav.actions button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }