/* Hope Centar back office.
   Served through index.php as /uprava/?a=css&v=<content hash>, so a changed
   stylesheet always arrives under a new URL and can be cached forever.

   Colour carries exactly one meaning in this panel: state.
     gold     needs you       (nova porudzbina, zakazivanje na cekanju)
     espresso in flight       (u obradi, potvrdjeno)
     sage     done
     clay     cancelled
     grey     archived
   Nothing else is allowed to be colourful, so a coloured thing is always a
   thing you can act on. */

@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/italiana-sr.woff2) format('woff2')}
@font-face{font-family:'Mont';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/montserrat-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Mont';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mont';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/montserrat-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Mont';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/montserrat-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Mont';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mont';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/montserrat-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Mont';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/montserrat-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Mont';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mont';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/montserrat-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --esp:#2A1810; --esp-2:#1C0F08; --esp-3:#3D2517;
  --parch:#EFE7DA; --surf:#FDFBF7; --surf-2:#F7F1E7;
  --gold:#B08A47; --gold-ink:#7A5C24; --gold-lo:#F4E9D3;
  --sage:#4A6B58; --sage-lo:#E3EDE6;
  --clay:#A34A32; --clay-lo:#F8E6E0;
  --ink:#2A1810; --ink-2:rgba(42,24,16,.62); --ink-3:rgba(42,24,16,.42);
  --line:rgba(42,24,16,.13); --line-2:rgba(42,24,16,.07);
  --rail:232px;
  --sh:0 1px 2px rgba(42,24,16,.05),0 1px 10px rgba(42,24,16,.04);
  --sh-2:0 4px 14px rgba(42,24,16,.09),0 1px 3px rgba(42,24,16,.06);
  --r:11px; --r-2:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--parch); color:var(--ink);
  font:400 15px/1.55 'Mont',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;font-variant-numeric:tabular-nums;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ============================================================== shell */
/* The rail is sticky and therefore only one viewport tall, so its own
   background stops short on a long page. The espresso column is painted on the
   grid instead, which always spans the full document height. */
.app{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;
  background:linear-gradient(to right,var(--esp) 0,var(--esp) var(--rail),transparent var(--rail))}

.rail{
  color:#EDE3D4; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:22px 14px 16px;
}
.mark{
  font-family:'Italiana',Georgia,serif; font-size:1.5rem; line-height:1;
  letter-spacing:.02em; color:#F6EEE1; padding:0 10px 2px; display:block;
}
.mark small{
  display:block; font-family:'Mont',sans-serif; font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(237,227,212,.42); margin-top:7px;
}
.rail nav{display:flex;flex-direction:column;gap:2px;margin-top:26px}
.rail nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-2);
  font-size:.875rem; color:rgba(237,227,212,.68); transition:background .12s,color .12s;
}
.rail nav a svg{width:17px;height:17px;flex:none;stroke-width:1.6}
.rail nav a:hover{background:rgba(255,255,255,.06);color:#F6EEE1}
.rail nav a.on{background:rgba(255,255,255,.1);color:#FBF5EA;font-weight:500}
.rail nav a .n{
  margin-left:auto; font-size:.72rem; font-weight:600; min-width:20px; text-align:center;
  padding:1px 6px; border-radius:999px; background:var(--gold); color:#2A1810;
}
.rail nav a.on .n,.rail nav a:hover .n{background:var(--gold)}
.rail nav a .n.q{background:rgba(255,255,255,.14);color:rgba(237,227,212,.72)}
.rail-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.rail-foot .me{
  display:block;padding:0 11px;font-size:.8rem;color:#EDE3D4;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-foot .out{
  display:inline-block;margin:6px 0 0 11px;font-size:.76rem;color:rgba(237,227,212,.5)}
.rail-foot .out:hover{color:#F6EEE1}

.main{min-width:0;padding:0 clamp(18px,3.2vw,40px) 80px}
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:34px 0 20px}
.page-head h1{font-size:1.62rem;font-weight:600;letter-spacing:-.022em;line-height:1.15}
.page-head .lede{color:var(--ink-2);font-size:.86rem;margin-top:3px}
/* .when holds either a line of text (Danas) or the page's actions. Once an
   order page carries two buttons, one nowrap line runs straight off a 390px
   screen — so it is a wrapping row that stays right-aligned. */
.page-head .when{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  color:var(--ink-3);font-size:.8rem;letter-spacing:.04em;text-align:right;white-space:nowrap}

/* mobile tab bar, desktop-hidden */
.tabs{display:none}
.mhead{display:none}

/* ============================================================== controls */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border:1px solid transparent;border-radius:var(--r-2);
  background:var(--esp);color:#F6EEE1;font-size:.85rem;font-weight:500;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.btn:hover{background:var(--esp-2)}
.btn svg{width:15px;height:15px;stroke-width:1.8;flex:none}
.btn-line{background:var(--surf);color:var(--ink);border-color:var(--line)}
.btn-line:hover{background:var(--surf-2);border-color:var(--ink-3)}
.btn-ghost{background:transparent;color:var(--ink-2);padding:7px 10px}
.btn-ghost:hover{background:rgba(42,24,16,.055);color:var(--ink)}
.btn-sm{padding:5px 11px;font-size:.78rem;border-radius:7px}
.btn-gold{background:var(--gold);color:#231206}
.btn-gold:hover{background:var(--gold-ink);color:#FBF5EA}
.btn-sage{background:var(--sage);color:#F2F7F3}
.btn-sage:hover{background:#3B5747}
.btn[disabled]{opacity:.45;cursor:default}

input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],input[type=time],input[type=search],input[type=number],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surf);font-size:.9rem;transition:border-color .12s,box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,138,71,.16)}
textarea{resize:vertical;min-height:84px;line-height:1.5}
select{
  appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%232A1810' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px}
label.fld{display:block;margin-bottom:14px}
label.fld > span{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.hint{font-size:.76rem;color:var(--ink-3);margin-top:5px}

/* filter bar */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.seg{display:flex;gap:2px;background:rgba(42,24,16,.055);padding:3px;border-radius:9px}
.seg a{
  padding:6px 13px;border-radius:7px;font-size:.81rem;color:var(--ink-2);white-space:nowrap;
  transition:background .12s,color .12s}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--surf);color:var(--ink);font-weight:500;box-shadow:var(--sh)}
.seg a .c{font-size:.72rem;color:var(--ink-3);margin-left:5px}
.seg a.on .c{color:var(--gold-ink)}
.finder{position:relative;margin-left:auto;min-width:210px;flex:1;max-width:330px}
.finder svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--ink-3);stroke-width:1.8;fill:none;pointer-events:none}
.finder input{padding-left:33px}
.finder kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);font:500 .68rem 'Mont',sans-serif;
  color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--surf-2)}
.finder input:focus ~ kbd{display:none}

/* ============================================================== state pills */
.st{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;
  letter-spacing:.03em;padding:3px 10px 3px 8px;border-radius:999px;white-space:nowrap}
.st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-new,.st-pending{background:var(--gold-lo);color:var(--gold-ink)}
.st-processing,.st-confirmed{background:rgba(42,24,16,.08);color:var(--esp)}
/* Shipped is still "in flight" — with the courier rather than on the packing
   table — so it stays in the espresso family, one shade deeper than
   processing. No new colour: the palette's meanings are the whole point. */
.st-shipped{background:rgba(42,24,16,.14);color:var(--esp)}
.st-completed{background:var(--sage-lo);color:var(--sage)}
.st-cancelled{background:var(--clay-lo);color:var(--clay)}
.st-trash{background:rgba(42,24,16,.06);color:var(--ink-3)}

/* ============================================================== cards */
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card + .card{margin-top:14px}
.card-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line-2)}
/* more than one action in a head: group them, or space-between pushes the
   first one against the title and the second against the edge */
.card-h .acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.card-h h2{
  font-size:.71rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.card-h .more{
  font:inherit;font-size:.79rem;color:var(--gold-ink);font-weight:500;
  background:none;border:0;padding:0;cursor:pointer}
.card-h .more:hover{text-decoration:underline}
.card-b{padding:18px}
.empty{padding:34px 18px;text-align:center;color:var(--ink-3);font-size:.86rem}
.empty b{display:block;color:var(--ink-2);font-weight:500;font-size:.94rem;margin-bottom:4px}

/* ============================================================== list rows */
.list{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.lrow{
  display:grid;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--line-2);position:relative;transition:background .1s}
.list .lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--surf-2)}
.lrow .lk::after{content:'';position:absolute;inset:0}
.lrow .act{position:relative;z-index:1;display:flex;gap:6px;justify-content:flex-end}
/* The transparent side borders match .list's own 1px border, without which
   every column heading sits exactly one pixel left of the data under it.
   align-items:end keeps a heading that wraps to two lines sitting on the same
   baseline as its single-line neighbours. */
.lhead{
  display:grid;gap:14px;padding:9px 18px;background:var(--surf-2);align-items:end;
  border:1px solid transparent;border-bottom:1px solid var(--line);
  font-size:.68rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.g-ord{grid-template-columns:78px 116px minmax(130px,1.3fr) minmax(150px,1.4fr) 108px 96px 122px}
.g-pat{grid-template-columns:minmax(140px,1.6fr) minmax(150px,1.5fr) 108px 92px}
.g-upt{grid-template-columns:104px minmax(140px,1.5fr) minmax(150px,1.4fr) 74px 150px}
.num{font-weight:600;font-size:.88rem}
.nm{font-weight:500;font-size:.9rem;line-height:1.3}
/* break-word, NOT anywhere. `anywhere` also drops the element's min-content
   width to one character, which lets a grid track collapse to nothing and
   renders "Higijenski tretman" as a vertical column of single letters — that
   is what happened to the agenda and to the order emails between 1000 and
   1250px. `break-word` still breaks a word too long for its box; it just
   refuses to let the box become narrower than one word in the first place. */
.sub{color:var(--ink-3);font-size:.78rem;line-height:1.35;overflow-wrap:break-word;min-width:0}
.amt{text-align:right;font-weight:600;font-size:.9rem;white-space:nowrap}
.dim{color:var(--ink-2);font-size:.83rem}
.tel{position:relative;z-index:1;font-size:.83rem}
.tel:hover{color:var(--gold-ink)}

/* ============================================================== the day rail
   Bookings are not a table, they are a day. A continuous hairline runs down the
   agenda with a node at every appointment, so a four-appointment Tuesday and a
   one-appointment Wednesday look different before you read a word, and an empty
   afternoon reads as an empty afternoon. */
/* One gutter measurement for the whole agenda. The day heading, the hairline
   and every node are positioned from --gut and --railx, so the heading starts
   on the same vertical as the cards under it and a node sits ON its own line
   rather than two pixels beside it. Change the gutter here and nowhere else. */
.agenda{position:relative;--gut:26px;--railx:5.5px;--node:13px}
.day{margin-bottom:6px}
.day-h{
  position:sticky;top:0;z-index:3;display:flex;align-items:baseline;gap:10px;
  padding:13px 0 9px var(--gut);background:linear-gradient(var(--parch) 72%,rgba(239,231,218,0));
  backdrop-filter:blur(2px)}
.day-h b{font-size:.94rem;font-weight:600;letter-spacing:-.01em}
.day-h .dow{
  font-size:.71rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.day-h .cnt{margin-left:auto;font-size:.76rem;color:var(--ink-3)}
.day-h.today b{color:var(--gold-ink)}
.day-h.today .dow{color:var(--gold)}

.slots{position:relative;padding-left:var(--gut)}
.slots::before{
  content:'';position:absolute;left:calc(var(--railx) - .5px);top:16px;bottom:16px;width:1px;
  background:linear-gradient(var(--line),var(--line) 60%,transparent)}
/* A day with a single appointment has nothing to connect, and the stub of a
   line hanging under a lone node reads as a rendering fault. */
.slots:has(> .slot:only-child)::before{display:none}

/* The row wraps instead of crushing. The action cluster is one flex item, so
   when the row runs out of width the pill and its buttons drop to a line of
   their own together — they never squeeze the treatment name down to nothing,
   which is what the old fixed `auto` action column did to every viewport under
   ~1250px and to the dashboard column at every width. */
.slot{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:12px 16px;margin-bottom:7px;
  transition:box-shadow .13s,border-color .13s,transform .13s}
.slot:hover{box-shadow:var(--sh-2);border-color:rgba(42,24,16,.2)}
.slot .c-t{flex:0 0 auto;min-width:52px}
.slot .c-n{flex:1 1 190px;min-width:0}
.slot .c-s{flex:1 1 210px;min-width:0}
/* Fixed widths here are what keep a column of rows aligned: the pill starts at
   the same x whether the row offers one button or two, because the button
   block below always reserves the same width. */
.slot .c-a{
  flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:10px;
  position:relative;z-index:1}
/* Measured against the real strings, with a little slack: widest pill is
   "Na čekanju" at 100.2px, widest button pair "Završeno"+"Otkažite" at 165.2.
   Fixing both means the cluster is the same width on every row, so the pill
   column and the button column each land on one vertical down the whole list
   instead of stepping left and right with the number of buttons a row offers. */
.slot .c-a .st{flex:0 0 102px}
.slot .act{min-width:166px}
.slot::before{
  content:'';position:absolute;left:calc(var(--railx) - var(--gut) - var(--node) / 2);
  top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--surf);
  border:2px solid var(--ink-3);z-index:1}
.slot.s-pending::before{border-color:var(--gold);background:var(--gold)}
.slot.s-confirmed::before{border-color:var(--esp);background:var(--esp)}
.slot.s-completed::before{border-color:var(--sage);background:var(--sage)}
.slot.s-cancelled::before{border-color:var(--clay);background:var(--surf)}
.slot.s-cancelled{opacity:.6}
.slot.s-cancelled .t{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.slot .t{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.slot .lk::after{content:'';position:absolute;inset:0}
.slot .act{position:relative;z-index:1;display:flex;gap:6px;align-items:center;justify-content:flex-end}
.gap{
  position:relative;height:1px;margin:0 0 7px calc(0px - var(--gut));padding-left:var(--gut)}

/* ============================================================== dashboard */
/* The agenda column gets a floor. Given minmax(0,…) it was free to shrink to
   whatever was left over, and on a 1150px laptop that left the day's only
   appointment rendered as a 570px tall column of single letters. */
.dash{display:grid;grid-template-columns:minmax(400px,1.45fr) minmax(280px,.85fr);gap:16px;align-items:start}
/* With nothing in the diary there is no left column worth reserving room for. */
.dash.solo{grid-template-columns:minmax(0,1fr);max-width:620px}
.todo{display:flex;flex-direction:column;gap:9px}
.todo a{
  display:flex;align-items:center;gap:13px;padding:14px 16px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  transition:box-shadow .13s,border-color .13s}
.todo a:hover{box-shadow:var(--sh-2);border-color:rgba(42,24,16,.2)}
.todo .k{
  font-size:1.32rem;font-weight:600;letter-spacing:-.03em;min-width:34px;line-height:1}
.todo .l{font-size:.87rem;font-weight:500;line-height:1.3}
.todo .l small{display:block;font-weight:400;font-size:.77rem;color:var(--ink-3);margin-top:2px}
.todo .go{margin-left:auto;color:var(--ink-3);flex:none}
.todo .go svg{width:16px;height:16px;stroke-width:1.8;fill:none}
.todo a:hover .go{color:var(--gold-ink)}
.todo .hot .k{color:var(--gold-ink)}
.todo .calm .k{color:var(--ink-3)}
.quiet{
  padding:28px 18px;text-align:center;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);color:var(--ink-2);font-size:.88rem}
.quiet b{display:block;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:5px}

.mini{display:flex;flex-direction:column}
.mini .r{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.mini .r:last-child{border-bottom:0;padding-bottom:0}
.mini .r:first-child{padding-top:0}
.mini .r .t{font-weight:600;font-size:.86rem;min-width:46px}
.mini .r .n{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .r .s{margin-left:auto;flex:none}

/* ============================================================== money */
/* What each order status is worth, on the orders screen. Same colour vocabulary
   as the pills — gold needs you, espresso in flight, sage done, clay cancelled
   — carried by a dot, exactly like the status picker, so the tile's border can
   stay free to mark which one you are looking at. auto-fit rather than five
   fixed tracks: the strip reflows from five across to two on a phone with no
   breakpoint of its own. The 140px floor is measured, not chosen — at 158px the
   strip broke to 4+1 through the whole 1075-1200 band, where the rail is back
   but the window is not yet wide; 140 keeps all five on one line there and
   still gives a 320px screen one tile per row. */
.money{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
  margin:0 0 16px}
.money a{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surf);
  box-shadow:var(--sh);transition:border-color .12s,background .12s}
.money a:hover{border-color:var(--ink-3);background:var(--surf-2)}
.money a.on{border-color:var(--esp);background:rgba(42,24,16,.05)}
.money .k{
  display:flex;align-items:center;gap:7px;
  font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.money .k .dot{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.money .m-new .dot{color:var(--gold)}
.money .m-processing .dot,.money .m-shipped .dot{color:var(--esp)}
.money .m-completed .dot{color:var(--sage)}
.money .m-cancelled .dot{color:var(--clay)}
.money .v{font-size:1.12rem;font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.money .v i{font-style:normal;font-size:.7rem;font-weight:500;color:var(--ink-3);margin-left:4px}
.money .n{font-size:.76rem;color:var(--ink-2)}
/* An empty status is still worth showing — a stable strip you can read at a
   glance beats one that reshuffles every time a status empties out — but it
   recedes. */
.money a.zero{box-shadow:none;background:transparent}
.money a.zero .v,.money a.zero .n,.money a.zero .dot{color:var(--ink-3)}

/* ============================================================== detail */
.detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:16px;align-items:start}
.back{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-3);
  padding:24px 0 0}
.back:hover{color:var(--ink)}
.back svg{width:14px;height:14px;stroke-width:1.9;fill:none}
.kv{display:flex;flex-direction:column}
.kv > div{
  display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--line-2)}
.kv > div:last-child{border-bottom:0;padding-bottom:0}
.kv > div:first-child{padding-top:0}
.kv dt{color:var(--ink-3);font-size:.81rem;flex:none}
.kv dd{font-size:.86rem;font-weight:500;text-align:right;overflow-wrap:anywhere}
.kv dd a:hover{color:var(--gold-ink);text-decoration:underline}
.big{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.big .u{font-size:.9rem;font-weight:400;color:var(--ink-3);letter-spacing:0}

.items{width:100%;border-collapse:collapse}
.items th{
  text-align:left;font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:0 0 9px;border-bottom:1px solid var(--line)}
.items td{padding:11px 0;border-bottom:1px solid var(--line-2);font-size:.87rem;vertical-align:top}
.items tr:last-child td{border-bottom:0}
.items .r{text-align:right;white-space:nowrap;padding-left:12px}
.items .q{text-align:center;color:var(--ink-2);padding-left:10px;padding-right:10px}
/* The three number columns carry their own gutter: with a photo column added,
   a 390px screen ran "CENA" straight into "UKUPNO".
   Product photo on an order line — the same object on the same cream square as
   the Artikli thumbnail (.p-thumb), one size up because here it is what you
   check the parcel against. The cell is a fixed track and the box is ALWAYS
   drawn: 8 home articles still have no photo, and an absent box would step
   every title in the table one column left. */
.items .im{width:58px;padding-right:14px}
.items th.im{padding-right:14px}
.i-thumb{width:58px;height:58px;object-fit:contain;background:var(--surf-2);
  border:1px solid var(--line-2);border-radius:var(--r-2);display:block}
.i-thumb.none{display:flex;align-items:center;justify-content:center}
.i-thumb.none svg{width:22px;height:22px;stroke-width:1.4;fill:none;color:var(--ink-3);opacity:.6}
/* The unit price has a column of its own everywhere it fits; the in-cell copy
   is the narrow-screen half of the same number, never both at once. */
.items .pu-in{display:none}
@media (max-width:560px){
  .items .pu{display:none}
  .items .pu-in{display:block}
  .items .r{padding-left:9px}
  .items .q{padding-left:7px;padding-right:7px}
}
.sum{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.sum .lab{font-size:.82rem;color:var(--ink-2)}
.sum .val{font-size:1.28rem;font-weight:600;letter-spacing:-.025em}

.pick{display:flex;flex-direction:column;gap:7px}
.pick button{
  display:flex;align-items:center;gap:9px;width:100%;padding:10px 13px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surf);
  font-size:.85rem;cursor:pointer;transition:border-color .12s,background .12s}
.pick button:hover{border-color:var(--ink-3);background:var(--surf-2)}
.pick button.on{border-color:var(--esp);background:rgba(42,24,16,.05);font-weight:600}
.pick button .dot{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.pick .p-new .dot,.pick .p-pending .dot{color:var(--gold)}
.pick .p-processing .dot,.pick .p-confirmed .dot,.pick .p-shipped .dot{color:var(--esp)}
.pick .p-completed .dot{color:var(--sage)}
.pick .p-cancelled .dot{color:var(--clay)}
.pick .p-trash .dot{color:var(--ink-3)}
.pick button .now{margin-left:auto;font-size:.7rem;color:var(--ink-3);font-weight:500}

/* ============================================================== score */
.score{display:flex;flex-direction:column;gap:11px}
.score .b{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.score .b .n{font-size:.85rem;font-weight:500}
.score .b .v{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.score .b .t{grid-column:1/-1;height:5px;border-radius:3px;background:rgba(42,24,16,.08);overflow:hidden}
.score .b .t i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.score .b.hi .t i{background:var(--clay)}
.score .b.lo .t i{background:var(--sage)}
.qa{display:flex;flex-direction:column;gap:1px}
.qa .q{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.84rem;
  border-bottom:1px solid var(--line-2)}
.qa .q:last-child{border-bottom:0}
.qa .q.z{color:var(--ink-3)}
.qa .q .v{font-weight:600;flex:none;min-width:16px;text-align:right}
.qa .q.z .v{font-weight:400}
.gauge{text-align:center;padding:4px 0 2px}
.gauge .n{font-size:2.9rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.gauge .l{font-size:.88rem;font-weight:600;margin-top:5px}
.gauge .m{font-size:.76rem;color:var(--ink-3);margin-top:7px}

/* ============================================================== login */
.gate{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1100px 520px at 50% -10%,rgba(176,138,71,.16),transparent 62%),
    var(--parch)}
.gate-box{width:100%;max-width:372px}
.gate .mark{color:var(--esp);text-align:center;font-size:2rem;padding:0}
.gate .mark small{color:var(--ink-3);letter-spacing:.24em}
.gate form{
  margin-top:26px;background:var(--surf);border:1px solid var(--line);
  border-radius:14px;padding:26px 24px;box-shadow:var(--sh-2)}
.gate .btn{width:100%;margin-top:4px;padding:11px}
.gate .keep{margin-top:14px;font-size:.78rem;color:var(--ink-3);text-align:center;line-height:1.45}
/* The Turnstile widget renders in an iframe of its own; reserve its height so
   the submit button does not jump down the moment the script finishes. */
.cf{min-height:65px;margin-bottom:14px}
.cf iframe{max-width:100%}

.err{
  display:flex;gap:9px;background:var(--clay-lo);color:var(--clay);
  border:1px solid rgba(163,74,50,.22);padding:10px 13px;border-radius:var(--r-2);
  font-size:.83rem;margin-bottom:16px}
.err svg{width:16px;height:16px;flex:none;margin-top:1px;stroke-width:1.8;fill:none}

/* ============================================================== toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:50;
  display:flex;align-items:center;gap:14px;background:var(--esp);color:#F6EEE1;
  padding:11px 14px 11px 18px;border-radius:11px;box-shadow:0 8px 30px rgba(42,24,16,.3);
  font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.up{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast form{display:inline}
.toast button{
  background:none;border:0;color:var(--gold);font-size:.82rem;font-weight:600;cursor:pointer;
  padding:3px 4px}
.toast button:hover{color:#F6EEE1}

/* ============================================================== print */
@media print{
  .rail,.tabs,.mhead,.bar,.back,.act,.pick,.money,.toast,.no-print{display:none !important}
  .app{display:block}
  body{background:#fff;font-size:11pt}
  .main{padding:0}
  .card,.list,.slot{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .detail,.dash{grid-template-columns:1fr;gap:12px}
  a[href^="tel"],a[href^="mailto"]{color:#000}
}

/* ============================================================== responsive */
/* A laptop is not a phone. Between 1000 and 1240 the old rule kept all seven
   order columns and simply deleted the one-click action, so the narrowest
   screen with a mouse was the one screen where you could not act on a row —
   while the name wrapped to three lines and the email broke mid-word. Drop the
   two secondary lines instead (the minute of the order, and the email, both of
   which are on the order page) and keep the button. */
@media (max-width:1240px){
  /* Every width below is the measured content, not a guess: phone 120,
     status pill 90, action button 84. At the narrowest this tier ever gets
     (1000px viewport, 666px of grid) they sum to 540 with the gaps, which
     leaves the customer column its 116px floor. Widen any of them and the
     action button starts clipping off the right edge of the list. */
  .lrow,.lhead{gap:10px}
  .g-ord{grid-template-columns:50px 80px minmax(116px,1.4fr) 120px 90px 56px 84px}
  .g-ord > .c2 .sub,.g-ord > .c4 .sub{display:none}
  .lhead.g-ord span:nth-child(7){display:none}
  /* The questionnaire list keeps its email — you answer a questionnaire by
     writing, not by calling — so the room comes out of the date, the score and
     the verdict instead, leaving the contact column enough to hold an address
     on one line rather than snapping it after "hotma". */
  /* Measured: date 88, longest name 150, longest email 202, "Umerena
     toksičnost" 137, and the REZULTAT heading itself is 66 wide — a 60px
     track let it overrun into PROCENA so the two headings read as one.
     All of those together do not fit a 1024px laptop, so the email is the one
     that gives: it truncates on one line instead of wrapping. A clipped
     address still reads as "there is an address here", the full one is on the
     record, and every row keeps the same height. The name never wraps. */
  .g-upt{grid-template-columns:88px minmax(150px,1.1fr) minmax(150px,1.4fr) 66px 140px}
  .g-upt > .c3 .sub,.g-pat > .c2 .sub{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Below about 1075 the customer column is down to ~133px while the longest
   name wants 162, so a name wraps and its row grows a line taller than its
   neighbours — a list of 18 orders ended up with three different row heights.
   Every other column here is already at its measured minimum, so there is no
   width left to give: the name clips on one line instead. The row stays
   clickable and the full name is on the order itself. */
@media (max-width:1075px){
  .g-ord > .c3 .nm,.g-ord > .c3 .sub{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:1000px){
  :root{--rail:0px}
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}

  /* Compact sticky header carries the wordmark and the page title so the
     bottom bar can stay pure navigation. */
  .mhead{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:20;background:var(--esp);color:#F6EEE1;
    padding:11px 16px calc(11px) 16px}
  .mhead .mark{font-size:1.15rem;padding:0}
  .mhead .mark small{display:none}
  .mhead .out{font-size:.78rem;color:rgba(237,227,212,.6)}
  .main{padding:0 14px 92px}
  .page-head{padding:20px 0 15px}
  .page-head h1{font-size:1.34rem}
  .page-head .when{text-align:left;justify-content:flex-start}

  /* Thumb-reachable navigation that cannot overflow: five fixed-width tabs.
     The old top nav pushed "Upitnici" and "Odjava" off a 390px screen, so on a
     phone there was no way to open the questionnaires or sign out at all. */
  /* auto-flow columns rather than repeat(5,1fr): the shop role's tab bar has
     one entry, and a fixed five-track grid would park it in a fifth of the
     width with four empty tracks beside it. Full role still gets five equal
     tabs — each item takes one 1fr track either way. */
  .tabs{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:30;background:rgba(253,251,247,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabs a{
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;
    font-size:.63rem;letter-spacing:.02em;color:var(--ink-3);position:relative}
  .tabs a svg{width:20px;height:20px;stroke-width:1.7;fill:none}
  .tabs a.on{color:var(--esp);font-weight:600}
  .tabs a.on svg{stroke-width:2}
  .tabs a .n{
    position:absolute;top:4px;left:calc(50% + 6px);min-width:15px;padding:0 4px;
    font-size:.6rem;font-weight:700;line-height:15px;text-align:center;border-radius:999px;
    background:var(--gold);color:#231206}

  .dash,.detail{grid-template-columns:minmax(0,1fr)}

  /* Rows become cards. The old panel stacked six labelled rows per order, so
     one order filled one phone screen and eighteen orders meant eighteen
     screens of scrolling. Each list gets the arrangement its own columns
     deserve rather than one generic stack. */
  .lhead{display:none}
  .lrow{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:13px 15px}
  .lrow > *{min-width:0}

  /* Four lines per order, not six. The email is dropped here — it is on the
     order page, and what you do from a phone is call, not write. */
  .g-ord{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:'id dt amt' 'nm nm st' 'ct ct ct' 'ac ac ac'}
  /* The narrow-desktop economies above are measured against a seven-column
     table. This is a card: every field has a full row, so the time comes back
     and nothing needs clipping to keep a row height uniform. */
  .g-ord > .c2 .sub{display:inline}
  .g-ord > .c3 .nm,.g-ord > .c3 .sub,
  .g-upt > .c3 .sub,.g-pat > .c2 .sub{
    white-space:normal;overflow:visible;text-overflow:clip}

  .g-ord > .c1{grid-area:id}
  .g-ord > .c2{grid-area:dt;font-size:.78rem;align-self:baseline;text-align:right}
  .g-ord > .c3{grid-area:nm}
  .g-ord > .c4{grid-area:ct;font-size:.83rem}
  .g-ord > .c4 .sub{display:none}
  .g-ord > .c5{grid-area:st;justify-self:end;align-self:center}
  .g-ord > .c6{grid-area:amt;align-self:baseline}
  /* The 1180px rule above hides this on narrow desktops; a phone is exactly
     where the one-tap action matters most, so it comes back here. */
  .g-ord > .act{grid-area:ac;display:flex;justify-content:flex-start;margin-top:9px}

  .g-pat{grid-template-areas:'nm qn' 'ct ct' 'lv lv'}
  .g-pat > .c1{grid-area:nm}
  .g-pat > .c2{grid-area:ct}
  .g-pat > .c3{grid-area:lv;font-size:.78rem}
  .g-pat > .c4{grid-area:qn;align-self:center}

  .g-upt{grid-template-areas:'nm tot' 'ct ct' 'dt pr'}
  .g-upt > .c1{grid-area:dt;font-size:.78rem;align-self:center}
  .g-upt > .c2{grid-area:nm}
  .g-upt > .c3{grid-area:ct}
  .g-upt > .c4{grid-area:tot;align-self:center}
  .g-upt > .c5{grid-area:pr;text-align:right;align-self:center}
  .amt{text-align:right}

  /* The time keeps its own column and everything else indents under the name,
     so the card reads top-down as time → who → what → what you can do. */
  .slot{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:'t n' '. s' '. a';gap:3px 12px;align-items:start}
  .slot .c-t{grid-area:t;min-width:0}
  .slot .c-n{grid-area:n}
  .slot .c-s{grid-area:s}
  .slot .c-a{grid-area:a;margin:9px 0 0;flex-wrap:wrap}
  .slot .act,.slot .c-a{justify-content:flex-start}
  /* No reserved columns on a phone — the cluster is on its own line with
     nothing to line up against, so pill and buttons just hug their text. */
  .slot .act{min-width:0}
  .slot .c-a .st{flex:0 0 auto}
  .agenda{--gut:22px}
  .day-h{top:44px}

  .finder{margin-left:0;max-width:none;order:-1;width:100%;flex-basis:100%}
  .finder kbd{display:none}
  /* The filters and the CSV button share one line rather than taking two of
     the four bands of chrome that stood between the top of a phone screen and
     the first appointment. */
  .seg{overflow-x:auto;max-width:100%;scrollbar-width:none;flex:1 1 auto;min-width:0}
  .seg::-webkit-scrollbar{display:none}
  .bar > .btn{flex:none}
  .fld-row{grid-template-columns:1fr}
  .toast{left:14px;right:14px;bottom:82px;transform:translateY(14px)}
  .toast.up{transform:translateY(0)}
}
@media (max-width:420px){
  /* 320px: the photo yields before the numbers do. */
  .items .im,.items th.im{width:42px;padding-right:10px}
  .i-thumb{width:42px;height:42px}
  .i-thumb.none svg{width:18px;height:18px}

  .page-head{align-items:flex-start;flex-direction:column;gap:2px}
  .page-head .when{font-size:.76rem}
  .gauge .n{font-size:2.4rem}
  /* Four filters fit a 390px screen at this size, so the segmented control
     stops being a thing you have to discover you can scroll. */
  .seg a{padding:6px 9px;font-size:.78rem}
  .seg a .c{margin-left:4px}
  .slot{padding:12px 14px}
  .slot .c-a{gap:8px}
}

/* ------------------------------------------------------------------ obrisano */
/* Soft-deleted rows in the Obrisani filter: present, quiet, one way back. */
.slot.s-deleted{opacity:.65}
.slot.s-deleted::before{border-color:var(--ink-3);background:var(--surf)}
/* Delete is the only clay-coloured button in the panel — the colour already
   means "cancelled/gone", so it reads as what it is before the label does. */
.btn-del{color:var(--clay)}
.btn-del:hover{background:var(--clay-lo);color:var(--clay)}

/* ------------------------------------------------------------------ kalendar */
/* The month grid. Pills reuse the state palette 1:1 — gold waits on you,
   espresso is agreed, sage happened, clay did not. */
.cal-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cal-arrow{padding:5px 8px}
.cal-arrow svg{width:14px;height:14px}
.cal-title{margin-left:8px;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.cal{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  background:var(--surf-2);border-bottom:1px solid var(--line)}
.cal-dow{padding:8px 6px;text-align:center;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cal-body{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-cell{min-height:108px;min-width:0;padding:6px;display:flex;flex-direction:column;gap:5px;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cal-cell:nth-child(7n){border-right:0}
/* lead + days + trail is always a multiple of seven, so the last seven cells
   are exactly the last row and its bottom border would double the frame's */
.cal-body .cal-cell:nth-last-child(-n+7){border-bottom:0}
.cal-cell.blank{background:var(--surf-2)}
.cal-cell.we{background:#FBF7EF}
.cal-cell.is-past{opacity:.55}
.cal-cell.is-today{box-shadow:inset 0 0 0 2px var(--gold)}
.cal-d{display:flex;align-items:center;gap:6px;min-height:20px}
.cal-d .d{font-size:.82rem;font-weight:600}
.is-today .cal-d .d{color:var(--gold-ink)}
.cal-d .cnt{min-width:17px;text-align:center;font-size:.64rem;font-weight:700;line-height:15px;
  padding:0 4px;border-radius:999px;background:rgba(42,24,16,.08);color:var(--ink-2)}
.is-today .cal-d .cnt{background:var(--gold);color:#231206}
.cal-d .add{margin-left:auto;width:20px;height:20px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:6px;color:var(--ink-3);opacity:0;
  transition:opacity .12s,background .12s}
.cal-d .add svg{width:13px;height:13px;stroke-width:2;fill:none}
.cal-cell:hover .cal-d .add,.cal-d .add:focus-visible{opacity:1}
.cal-d .add:hover{background:rgba(42,24,16,.08);color:var(--ink)}
/* No hover on a touch screen: the plus has to simply be there. */
@media (hover:none){.cal-d .add{opacity:.55}}
.cal-list{display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-p{display:flex;align-items:baseline;gap:5px;min-width:0;padding:3px 6px;border-radius:6px;
  border-left:3px solid var(--line);background:var(--surf-2);font-size:.72rem;line-height:1.35;
  transition:box-shadow .12s,transform .12s}
.cal-p:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.cal-p .t{font-weight:700;flex:none}
.cal-p .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-p.p-pending{background:var(--gold-lo);border-left-color:var(--gold)}
.cal-p.p-confirmed{background:rgba(42,24,16,.07);border-left-color:var(--esp)}
.cal-p.p-completed{background:var(--sage-lo);border-left-color:var(--sage)}
.cal-p.p-cancelled{background:var(--clay-lo);border-left-color:var(--clay);opacity:.65;
  text-decoration:line-through;text-decoration-color:var(--ink-3)}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;
  font-size:.76rem;color:var(--ink-2)}
.cal-legend .i{display:inline-flex;align-items:center;gap:6px}
.cal-legend .dot{width:9px;height:9px;border-radius:3px;flex:none}
.cal-legend .dot.p-pending{background:var(--gold)}
.cal-legend .dot.p-confirmed{background:var(--esp)}
.cal-legend .dot.p-completed{background:var(--sage)}
.cal-legend .dot.p-cancelled{background:var(--clay)}
@media (max-width:700px){
  /* The month keeps its seven columns on the phone; the name is what gets
     dropped, never the time — same trade the mirenmedic calendar makes. */
  .cal-cell{min-height:72px;padding:3px;gap:3px}
  .cal-d{min-height:16px}
  .cal-d .d{font-size:.74rem}
  .cal-d .cnt{min-width:14px;font-size:.58rem;line-height:13px;padding:0 3px}
  /* Too small to tap between pills — new bookings go through the button above. */
  .cal-d .add{display:none}
  .cal-dow{padding:6px 2px;font-size:.58rem;letter-spacing:.06em}
  .cal-p{padding:2px 4px;gap:3px;font-size:.66rem}
  .cal-p .n{display:none}
}

/* ------------------------------------------------------------------ artikli */
.g-prod{grid-template-columns:56px minmax(180px,1.6fr) 92px 100px 210px 130px 150px}
/* Code chips: every code wears its own label, so "KRXH-03" and "1060" can
   never be mistaken for one another. The label sits in a tinted cap on the
   left of the chip; the value keeps tabular figures so codes align. */
.codes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.code{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 2px;
  border:1px solid var(--line);border-radius:6px;background:var(--surf);
  font-size:.74rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.code b{font-size:.58rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(42,24,16,.06);border-radius:4px;padding:2px 6px;line-height:1.3}
/* Missing accounting code: visibly a hole, not an ordinary chip. */
.code.miss{border-style:dashed;background:transparent;color:var(--ink-3)}
.p-thumb{width:44px;height:44px;object-fit:contain;background:var(--paper,#f6f2ec);border-radius:8px;display:block}
/* The ± pair replaces the native number spinner (hidden below): that one is a
   12px mouse target and does not exist on a touch screen at all. The input
   flexes between them so the trio always fills its 210px desktop track. */
.stock-f{display:flex;gap:6px;align-items:center}
.stp{width:28px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surf);
  font-size:1rem;font-weight:600;line-height:1;color:var(--ink-2);cursor:pointer;
  transition:background .1s,border-color .1s}
.stp:hover{background:var(--surf-2);border-color:var(--ink-3)}
.stp:active{background:var(--gold-lo);border-color:var(--gold)}
.stock-qty{flex:1 1 auto;width:100%;min-width:0;text-align:center;padding:7px 4px;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surf);
  font-size:.9rem;font-variant-numeric:tabular-nums}
/* "ne prati se" has to fit the ~66px the desktop track leaves the input. */
.stock-qty::placeholder{font-size:.72rem;color:var(--ink-3)}
.stock-qty::-webkit-outer-spin-button,.stock-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stock-qty[type=number]{-moz-appearance:textfield;appearance:textfield}
.stock-f .save{flex:none}
/* An edited-but-unsaved quantity turns Sačuvaj gold, so a thumb halfway out
   the door can see there is still something to press. */
.stock-f.dirty .save{background:var(--gold);border-color:var(--gold);color:#231206}
.stock-f.dirty .save:hover{background:var(--gold-ink);color:#FBF5EA}
/* The saved row answers back: one short pulse where the reload used to be. */
.lrow.flash{animation:rowflash .8s ease-out}
@keyframes rowflash{from{background:var(--gold-lo)}to{background:transparent}}
/* Below 1300 the artikli list is a card — the seven fixed tracks above sum
   past 1000px and were clipping the toggle clean off the row on narrow
   desktops, and the old rule for phones simply hid the qty column, so a
   phone could flip availability but never type what was counted on the
   shelf. Thumb and name up top, price and status on their own line, then
   the stepper and the toggle rows, every target 44px tall where a thumb can
   hit it. The two control rows cap at 430px so a tablet-width card does not
   stretch a Sačuvaj across the whole screen. */
@media (max-width:1300px){
  .lhead.g-prod{display:none}
  .g-prod{grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:'im nm nm' 'pr pr st' 'qt qt qt' 'ac ac ac';gap:10px 12px}
  .g-prod > .c1{grid-area:im}
  .g-prod > .c2{grid-area:nm}
  .g-prod > .c3{grid-area:pr;text-align:left;align-self:center}
  .g-prod > .c4{grid-area:st;align-self:center;justify-self:end}
  .g-prod > .c5{grid-area:qt;max-width:430px}
  .g-prod > .c6{display:none}
  .g-prod > .act{grid-area:ac;justify-content:flex-start}
  .g-prod > .act form{width:100%;max-width:430px}
  .g-prod > .act .btn{width:100%;min-height:44px}
  .stock-f{gap:8px}
  .stp{width:48px;height:44px;font-size:1.2rem;border-radius:10px}
  .stock-qty{height:44px;font-size:1rem}
  .stock-qty::placeholder{font-size:.9rem}
  .stock-f .save{min-height:44px;padding:0 18px}
}