/* Podaci o radniku: sve kućice u JEDNOM redu (bez wrapa) */
.fields .pad.row{ flex-wrap:nowrap; }

/* Red Poduzeće / Adresa / OIB / Lokacija rada – poravnaj cijelu širinu */
.employer .pad.row{
  display: flex;
  flex-wrap: nowrap;  /* sve u jednom redu */
  justify-content: space-between; /* rasporedi po širini */
  gap: 4px;           /* mali razmak između kućica */
}

/* Svaka kolona unutar reda zauzima proporcionalnu širinu */
.employer .col{
  flex: 1 1 0;
  min-width: 0;
}

/* Inputi popunjavaju svoje kolone */
.employer .input,
.employer select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* Pusti kolone da se ravnomjerno stisnu unutar A4,
   ignoriraj inline max-width:220px iz HTML-a */
.fields .col{
  flex:1 1 0;
  min-width:0;
  max-width:unset !important;
}

/* Neka input/select ispune svoju kolonu bez forsirane minimalne širine */
.fields .input, .fields select{
  min-width:0;
  width:100%;
}

:root{
  --bg:#ffffff; --card:#ffffff; --text:#242424; --muted:#6b7280;
  --line:#e6e9ef; --accent:#0ea5e9; --good:#10b981; --warn:#facc15;
}
*{box-sizing:border-box}
body{margin:16px;font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--text)}
/* crveno kad je pauza “problematična” */
#tbl input.brk.over-break{
  color: #c00;
  font-weight: 700;
}

/* opcionalno i okvir/pozadina */
#tbl input.brk.over-break{
  border-color: #c00;
  background: #fff0f0;
}
/* Fiksna širina na A4 */
.container{ width:min(100%,210mm); margin:0 auto; }

/* Top bar */
.topbar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.topbar h1{font-size:16px;font-weight:700;margin:0}
.topbar .spacer{flex:1}
.input, select{
  padding:5px 6px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:13px;color:#0f1724
}
.btn{padding:4px 4px;border:1px solid var(--line);border-radius:5px;background:#fff;color:#65878F;cursor:pointer;font-size:11px;transition:.2s}
.btn:hover{background:#f0f0f0;transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.print{background:#fff}
.row{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin:2px 0}

/* kartice */
.card{background:var(--card);border:1px solid var(--line);border-radius:5px;box-shadow:0 1px 2px rgba(2,6,23,.04);margin-bottom:6px}
.card .pad{padding:2px 6px}

/* Info red (radnik) */
.fields .input{min-width:150px}
.fields label,.employer label{display:none}

/* Tablica */
.table-wrap{overflow-x:auto}
table{
  width:100%;
   border-collapse:collapse;
  border-spacing:0 0.0px;
  font-size:10.5px;
  table-layout:fixed; /* fiksni raspored kolona */
}
thead th{
  background:#fafbfd;
  border-bottom:1px solid var(--line);
  color:#65878F;
  font-size:11px;
  text-align:left;
  white-space:nowrap;
  padding:4px 6px;   /* povećan padding */
  line-height:1.4;
  vertical-align:bottom;
  position:sticky;   /* da zaglavlje ostane iznad redova */
  top:0;
  z-index:2;
}
tbody tr{border:1px solid var(--line);border-radius:5px}
tbody td{padding:1px 2px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tbody td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
tbody td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;border:1px solid var(--line);font-size:11px;color:#65878F;background:#fff}
.weekend{background:#F0F5F7}

/* Kućice Od/Do i Pauza */
.time{
  width:15ch;  /* šire da se vidi cijeli unos vremena */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  padding:4px 6px;
}
.num{width:8ch} /* šire kućice za pauzu i sate */
.note{min-width:80px;width:100%}

/* Header predložak – inline */
th .tpl-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
  flex-wrap:nowrap;
  max-width:100%;
}
th .tpl-inline .time{width:9.5ch; padding:2px 4px; text-align:center;}
th .tpl-inline .num {width:8ch;   padding:2px 4px;}

/* Sumiranje */
.summary{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.summary .pill{padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:#0f1724}

/* Poslodavac blok */
.employer .input{min-width:140px}

@media print{
  @page { size: A4 portrait; margin: 12mm; }
  
  

  /* Nema dodatnih margina oko stranice */
  html, body{ margin: 0; padding: 0; }

  /* Tvrda gornja granica: stane unutar A4 korisne širine */
  .container{
    width: 184mm;          /* 186mm - 2mm buffer za Chrome */
    max-width: 184mm;
    margin: 0;             /* bez dodatnih margina */
  }

  /* Tablica i omotač ne smiju širiti preko containera */
  .table-wrap{ 
    overflow: visible;     /* da se ništa ne reže vodoravno */
    width: 100%;
    max-width: 100%;
  }
  #tbl{
    width: 100%;
    max-width: 100%;
    table-layout: fixed;   /* već imaš globalno, ali neka stoji u printu */
  }

  /* Sticky header zna proširiti u Chromeu – ugasi samo u printu */
  thead th{
    position: static !important;
    box-shadow: none !important;
  }

  /* Sitno smanji padding/visinu redova ako treba još zrno mjesta */
  #tbl th, #tbl td { padding-left: 2px; padding-right: 2px; }
}
#tbl td .date-short { display:none; }



thead th{
  position: sticky;
  top: 0;
  z-index: 50;                 /* veće od svega u tbody */
  background:#fafbfd;          /* neprozirna pozadina */
  box-shadow: 0 1px 0 var(--line); /* tanka crta ispod headera */
}
.signatures .sig-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
}
.signatures .sig{
  display:flex;
  align-items:center;     /* tekst i crta poravnati u isti red */
  gap:8px;
  min-width:220px;        /* širina zone potpisa */
}
.signatures .line{
  height:1px;
  background:var(--line);
  flex:1;                 /* da se crta rastegne */
}
.signatures .label{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}



/* -- A) Ćelije ne nameću minimalnu širinu -- */
#tbl th,
#tbl td{
  min-width: 0;                 /* bitno da se kolona smije stisnuti */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;          /* ostaje kompaktno; vidjet ćeš "…" */
}

/* -- B) Form kontrole u redovima neka se stisnu koliko kolona dopušta -- */
#tbl input,
#tbl select,
#tbl .time,
#tbl .num,
#tbl .note,
#tbl .badge{
  min-width: 0 !important;      /* pregazi intrinzične min-širine */
  max-width: 100% !important;   /* ne širi ćeliju */
  width: auto !important;       /* ne forsiraj 100% ako je ćelija uska */
  box-sizing: border-box;
}

/* -- C) Ukloni “tvrde” širine baš u #tbl (ostatak stranice ostaje isti) -- */
#tbl .time,
#tbl .num{ 
  width: auto !important; 
}

/* Header šablon ima fiksne širine koje dižu min-content → omekšaj ih samo u #tbl */
#tbl th .tpl-inline .time,
#tbl th .tpl-inline .num{
  width: auto !important;
  min-width: 0 !important;
}

/* -- D) Ako neka kolona treba smjeti lomiti (npr. bilješka), dozvoli samo tamo -- */
#tbl .note{
  white-space: normal;           /* smije u više linija, pa red lakše “stane” */
  overflow-wrap: anywhere;
}

/* -- E) Safety net: eksplicitno skini inline-min širine (i18n friendly) -- */
#tbl th, #tbl td, 
#tbl input, #tbl select, 
#tbl .time, #tbl .num, #tbl .note{
  min-inline-size: 0;
}

/* === Chrome/Edge: zategni unutarnji razmak u #tbl inputima === */
@supports (-webkit-appearance: none) {
  /* Manji L/R padding samo u velikoj tablici */
  #tbl input,
  #tbl select {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Posebno za time input – skini interni padding Chromea */
  #tbl input[type="time"]::-webkit-datetime-edit {
    padding: 0 !important;
  }

  /* (opcionalno) skini i unutarnje margine brojčanih kontrola */
  #tbl input[type="number"]::-webkit-outer-spin-button,
  #tbl input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
}
/* 1) Ukloni okvir oko velike tablice (kartice) */
.card:has(#tbl) {
  border: none !important;
  box-shadow: none !important;
}

/* 2) Ukloni pravokutne rubove između redova */
#tbl tbody tr {
  border: none !important;
}
/* Ujednači tipografiju unutar tablice */
#tbl, 
#tbl th, 
#tbl td, 
#tbl input, 
#tbl select, 
#tbl .time, 
#tbl .num, 
#tbl .note {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif !important;
  font-size: 12px;      /* odaberi jednu vrijednost */
  line-height: 1.2;     /* ujednači visinu retka */
}

/* Makni monospace s .time (trenutno ti kvari konzistenciju) */
.time{
  font-family: inherit !important;
}
/* === Chrome/Edge (Blink): smanji vertikalni prostor u <input type="time"> === */
@supports (-webkit-appearance: none) {
  #tbl input[type="time"],
  #tbl input[type="number"],
  #tbl input[type="text"],
  #tbl select {
    height: 22px !important;      /* ujednači s Firefoxom */
    line-height: 1.2 !important;  /* zategni unutarnji tekst */
    padding-top: 0 !important;    /* makni višak odozgo */
    padding-bottom: 0 !important; /* makni višak odozdo */
  }

  /* Chrome interno dodaje dodatni razmak unutar edit polja – ovo ga skida */
  #tbl input[type="time"]::-webkit-datetime-edit {
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
}

/* ===============================
   DRUGI RED ZAGLAVLJA – 50% VISINE
   =============================== */
.card.template .input,
.card.template select,
.card.template .btn {
  height: 20px !important;        /* ≈ 50% */
  min-height: 20px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.card.template span {
  font-size: 11px !important;
}

.card.template .pad.row {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}