/* Spletna stran za telefon – enake barve in pisave kot Mac aplikacija */
@font-face { font-family: 'Literata'; font-weight: 600; font-display: swap; src: url(literata-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Literata'; font-weight: 600; font-display: swap; src: url(literata-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --paper: #f2f4f3; --surface: #fff; --ink: #1e2b33; --muted: #5e6e77; --faint: #8b989f;
  --rule: #dce2e2; --rule-strong: #c6cfd0;
  --prevod: #2f6690; --prevod-soft: #e3edf5; --tolm: #6f4c95; --tolm-soft: #eee8f5;
  --u-zamujeno: #b3261e; --u-zamujeno-soft: #f8e1df; --u-kmalu: #c96a1b; --u-kmalu-soft: #fbe9d8;
  --u-teden: #a8860f; --u-teden-soft: #f7efcf; --u-kasneje: #3d7d55; --u-kasneje-soft: #e0efe5;
  --accent-new: #f28c28; --accent-new-hover: #e67b14;
  --serif: 'Literata', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.4 var(--sans); padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
small { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.late { color: var(--u-zamujeno); font-weight: 600; }
.error { color: var(--u-zamujeno); min-height: 1.2em; margin: 8px 0 0; }
.error:empty { display: none; }
.hint { color: var(--muted); font-size: 14px; margin: 6px 0 12px; }
.center { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }

button { cursor: pointer; }
.primary { background: var(--accent-new); border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 600; min-height: 46px; }
.primary:active { background: var(--accent-new-hover); }
.primary:disabled { opacity: .6; }
.link { background: none; border: 0; color: var(--prevod); padding: 10px 4px; min-height: 44px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--prevod); outline-offset: 2px; }

/* prijava */
.login { max-width: 360px; margin: 0 auto; padding: 12vh 20px 40px; text-align: center; }
.login img { border-radius: 14px; }
.login h1 { font-size: 28px; margin: 10px 0 24px; }
.login form { text-align: left; display: grid; gap: 14px; }

/* polja */
label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface); font-size: 16px; font-weight: 400; color: var(--ink); }
input:disabled { background: var(--paper); color: var(--faint); }
textarea { resize: vertical; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; }
input, select { min-width: 0; max-width: 100%; }
select { -webkit-appearance: none; appearance: none; padding-right: 30px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235e6e77' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 400; font-size: 16px; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--prevod); flex: none; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.two > label { min-width: 0; }
.two > label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* glava */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(242, 244, 243, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8px 16px; border-bottom: 1px solid var(--rule); min-height: 56px; }
.top h1 { font-size: 22px; margin: 0; }
.top h1.small { font-size: 18px; }
.top > span { min-width: 60px; }

/* filtri */
.filters { padding: 12px 16px 4px; display: grid; gap: 10px; }
.seg { display: flex; background: #e3e8e7; border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 8px 6px; font-weight: 600; color: var(--muted); min-height: 40px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg.small button { font-size: 14px; min-height: 36px; padding: 6px 4px; }
.seg.wide { margin-bottom: 4px; }
input[type=search] { -webkit-appearance: none; appearance: none; }

/* seznam */
.list { padding: 4px 16px calc(100px + var(--safe-b)); }
.list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.section { font-size: 16px; margin: 18px 0 8px; color: var(--ink); }
.section.opcije { color: var(--tolm); }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }
.job { width: 100%; display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; min-height: 60px; }
.job:active { background: #f7f9f8; }
.job.zamujeno { border-left-color: var(--u-zamujeno); }
.job.kmalu { border-left-color: var(--u-kmalu); }
.job.teden { border-left-color: var(--u-teden); }
.job.kasneje { border-left-color: var(--u-kasneje); }
.job .when b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.job .when small.note { color: var(--u-kmalu); font-weight: 600; }
.job.zamujeno .when small.note { color: var(--u-zamujeno); }
.job .when small { letter-spacing: -0.01em; }
.job .when small, .job .what small { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job .what { min-width: 0; }
.job .what b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.kind { float: left; width: 8px; height: 8px; border-radius: 50%; margin: 7px 6px 0 0; }
.kind.prevod { background: var(--prevod); }
.kind.tolm { background: var(--tolm); }
.pill { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 8px; white-space: nowrap; background: var(--paper); color: var(--muted); }
.pill.delo { background: var(--prevod-soft); color: var(--prevod); }
.pill.oddano { background: var(--u-kasneje-soft); color: var(--u-kasneje); }
.pill.racun { background: var(--u-teden-soft); color: #7a6208; }
.pill.placano { background: #e8ecec; color: var(--faint); }
.pill.opcija { background: var(--tolm-soft); color: var(--tolm); border: 1px dashed var(--tolm); }

.fab { position: fixed; right: 16px; bottom: calc(16px + var(--safe-b)); z-index: 6; background: var(--accent-new); border: 0; border-radius: 28px;
  padding: 0 22px; height: 54px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 14px rgba(30, 43, 51, .25); }
.fab:active { background: var(--accent-new-hover); }

/* podrobnosti */
.detail { padding: 8px 16px 40px; }
.detail h1 { font-size: 26px; margin: 8px 0 2px; }
.detail .sub { color: var(--muted); margin: 0 0 16px; }
.detail dl { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.kv { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--rule); }
.kv:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv a { color: var(--prevod); font-weight: 600; }
.banner { border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px; font-size: 14px; }
.banner.opcija { background: var(--tolm-soft); color: var(--tolm); border: 1px dashed var(--tolm); }

/* obrazec */
.form { padding: 12px 16px calc(110px + var(--safe-b)); display: grid; gap: 14px; }
fieldset { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; min-width: 0; }
legend { font-family: var(--serif); font-weight: 600; font-size: 16px; padding: 0 6px; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.choices button { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 10px; padding: 8px 4px; font-weight: 600; font-size: 13.5px; min-height: 56px; line-height: 1.2; }
.choices button small { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.choices button.on { border-color: var(--prevod); background: var(--prevod-soft); color: var(--prevod); }
.pages { color: var(--prevod); font-weight: 600; min-height: 1em; }
.person { display: grid; grid-template-columns: 1fr 104px 40px; gap: 6px; }
.person button { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 10px; font-size: 20px; color: var(--muted); }
.people { display: grid; gap: 6px; }
.opcija-box { background: var(--tolm-soft); border: 1px dashed var(--tolm); border-radius: 10px; padding: 6px 12px; }
.opcija-box input { accent-color: var(--tolm); }

/* prikaz polj glede na vrsto posla */
.form .tolm-only { display: none; }
.form.is-tolm .tolm-only { display: grid; }
.form.is-tolm label.tolm-only { display: flex; }
.form.is-tolm .prevod-only { display: none; }
.form .zunanji-only, .form .kit-only, .form .pk-only, .form .ure-only { display: none; }
.form.show-zunanji .zunanji-only, .form.show-kit .kit-only { display: grid; }
.form.show-pk .pk-only, .form.na-uro .ure-only { display: grid; }
.form:not(.na-uro) .ure-only + label { grid-column: 1 / -1; }

.total { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border-top: 1px solid var(--rule); padding: 10px 16px calc(10px + var(--safe-b)); box-shadow: 0 -2px 10px rgba(30, 43, 51, .06); }
.total small { display: block; font-size: 12px; }
.total b { font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums; }

.toast { position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%); background: var(--ink); color: #fff;
  border-radius: 20px; padding: 10px 18px; font-weight: 600; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,.2); }