/* Zajednički stilovi za stranice alata (predlošci) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tool{max-width:1480px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutter) 80px}
.tool-head h1{font-size:clamp(32px,4vw,52px);max-width:22ch}
.tool-head .sub{max-width:70ch}
.privacy{margin:24px 0 16px;padding:12px 18px;border-left:4px solid var(--river);background:#fff;font-size:15px;border-radius:0 12px 12px 0}
.linklike{border:0;background:none;padding:0;font:inherit;color:var(--navy);text-decoration:underline;cursor:pointer}
.howto{margin:0 0 20px;background:var(--sky-l);border-radius:18px;padding:4px 20px}
.howto summary{cursor:pointer;font:700 15px var(--body);padding:12px 0;color:var(--navy)}
.howto ul{margin:0 0 16px;padding-left:20px;display:grid;gap:4px;font-size:15px}

.toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.toolbar-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar-group.right{margin-left:auto}
.inline{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;white-space:nowrap}
.inline select{width:auto;min-height:40px;padding:8px 12px;border:2px solid var(--line);font-size:15px}
.filebtn{cursor:pointer}
.btn.danger{color:#a3361b;border-color:#a3361b}
.btn.danger:hover{background:#a3361b;color:#fff}
.status{min-height:1.4em;margin:6px 0 14px;font-size:14px;color:var(--muted)}
.status.ok::before{content:"✓ ";color:var(--river-d);font-weight:700}

.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.stat{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600}
.stat b{font:800 20px/1 var(--display);margin-right:6px;color:var(--navy)}
.stat.late{border-color:#e4a58d;background:#fdeee8}
.stat.late b{color:#a3361b}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
.grid{width:100%;min-width:1340px;border-collapse:separate;border-spacing:0}
.grid th{position:sticky;top:0;background:var(--navy);color:#fff;font:700 13px/1.25 var(--body);text-align:left;padding:12px 10px;letter-spacing:.02em}
.grid th:first-child{border-top-left-radius:16px}
.grid th:last-child{border-top-right-radius:16px}
.grid td{padding:0;border-top:1px solid var(--line);vertical-align:top}
.grid tbody tr:nth-child(even) td{background:#fafaf6}
.grid .c-n{width:56px}
.grid .c-date{width:128px}
.grid .c-status{width:140px}
.grid .c-act{width:48px}
.grid .c-wide{min-width:200px}
.grid td.n{padding:14px 10px;font:800 20px/1 var(--display);color:var(--muted);text-align:center}
.grid textarea,.grid input,.grid select{width:100%;min-height:48px;border:2px solid transparent;border-radius:0;background:transparent;padding:12px 10px;font:400 15px/1.4 var(--body);color:var(--ink);resize:none;overflow:hidden;display:block}
.grid textarea:hover,.grid input:hover,.grid select:hover{background:var(--sky-l)}
.grid textarea:focus,.grid input:focus,.grid select:focus{outline:none;border-color:var(--navy);background:#fff;position:relative}
.grid select{cursor:pointer;font-weight:600;-webkit-appearance:none;appearance:none;padding-right:26px;background-repeat:no-repeat;background-position:right 8px center;background-size:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314305e' stroke-width='1.6'/%3E%3C/svg%3E")}
tr[data-status="otvoreno"] select{color:#8a5a00}
tr[data-status="u tijeku"] select{color:#1d5d99}
tr[data-status="dovršeno"] select{color:var(--river-d)}
tr[data-status="dovršeno"] td:not(.n):not(.act) textarea{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
tr.late input[type=date]{color:#a3361b;font-weight:700;background:#fdeee8}
.late-flag{display:none}
tr.late .late-flag{display:block;padding:0 10px 8px;font-size:12px;font-weight:700;color:#a3361b}
.grid td.act{text-align:center;padding-top:6px}
.icon-btn{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.icon-btn:hover{background:#fdeee8;color:#a3361b}
.empty{padding:28px;text-align:center;color:var(--muted)}
.tool-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.tool-foot .muted{flex:1 1 320px;margin:0}

/* mobitel / uska širina: svaki redak postaje kartica */
@media (max-width:900px){
  .table-wrap{border:0;background:transparent;overflow:visible}
  .grid{min-width:0;display:block}
  .grid thead{display:none}
  .grid tbody{display:grid;gap:14px}
  .grid tr{display:grid;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}
  .grid tbody tr:nth-child(even) td{background:transparent}
  .grid td{border-top:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr}
  .grid td::before{content:attr(data-label);padding:14px 10px;font:700 12px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .grid td.n{display:block;background:var(--navy);color:#fff;text-align:left;padding:10px 16px}
  .grid td.n::before{content:none}
  .grid td.act{position:absolute;top:2px;right:6px;display:block;border:0;padding:0}
  .grid td.act::before{content:none}
  .icon-btn{color:#fff}
  .icon-btn:hover{background:rgba(255,255,255,.2);color:#fff}
  .toolbar-group.right{margin-left:0}
}

@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;font-size:11px}
  .nav,.skip,.toolbar,.privacy,.tool-foot,.status,.act,.c-act,.late-flag,.howto summary{display:none!important}
  .howto{display:block;background:none;padding:0;margin:0 0 10px}
  .howto:not([open]) ul{display:grid}
  .howto ul{font-size:10px;columns:2;display:block}
  .tool{padding:0;max-width:none}
  .tool-head h1{font-size:22px}
  .table-wrap{border:0;overflow:visible}
  .grid{min-width:0;font-size:10px}
  .grid th{position:static;background:#14305e!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:9px;padding:6px}
  .grid textarea,.grid input,.grid select{padding:5px 6px;min-height:0;font-size:10px;border:0;background:transparent!important}
  .grid select{background-image:none}
  .grid tr{break-inside:avoid}
  .stats{margin-bottom:8px}
}

.prose h2{font-size:clamp(24px,2.4vw,32px);max-width:none;margin:28px 0 8px}
.prose p,.prose li{max-width:72ch}
.prose ul{padding-left:20px;display:grid;gap:6px}