/* Krynica Vitamin - portal dostawcow. Paleta i typografia wg brandu:
   kobalt #1a3bad + cyan #00a6ec (www), navy #003a5b (logo), Roboto + Oswald. */

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/roboto-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/roboto-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+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: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/roboto-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/roboto-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+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: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/roboto-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/roboto-700-latin.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: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/oswald-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/oswald-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { color-scheme: light;
  --brand: #1a3bad; --brand-dark: #14309a; --cyan: #00a6ec; --navy: #003a5b;
  --grad: linear-gradient(90deg, #1a3bad 0%, #00a6ec 100%);
  --page: #f8f8f8; --surface: #ffffff; --ink: #242c3c; --ink2: #454545; --mut: #8a8f99;
  --grid: #e5e7ea; --axis: #d9dbde; --border: rgba(36, 44, 60, 0.10);
  --cyan-bg: #e8f7fe; --brand-bg: #eef1fb;
  --good: #0ca30c; --warn: #f0a500; --crit: #d62426; }
* { box-sizing: border-box; margin: 0; }
body { font: 14px/1.55 'Roboto', system-ui, Arial, sans-serif; background: var(--page); color: var(--ink); }
#surveyForm { padding-bottom: 104px; }  /* miejsce na dolny pasek nawigacji ankiety */
h1, h2, h3, .brand-sub, .crumb { font-family: 'Oswald', 'Roboto', sans-serif; font-weight: 500; }

.top { background: var(--surface); border-bottom: 1px solid var(--grid); padding: 0 22px; height: 60px;
  display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 5; }
.top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad); }
.logo { height: 34px; display: block; }
.brand-sub { color: var(--navy); font-size: 13px; line-height: 1; letter-spacing: 2.5px; text-transform: uppercase;
  border-left: 1px solid var(--axis); padding-left: 16px; align-self: center; position: relative; top: 3px; }

.layout { display: flex; align-items: stretch; min-height: calc(100vh - 60px); }
.wrap { max-width: 880px; margin: 0 auto; padding: 22px 20px; flex: 1; min-width: 0; }
.wrap-wide { max-width: 1400px; }
.sidenav { width: 224px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--grid);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; }
.sidenav > nav { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 2px; }
.sidenav nav a { display: block; padding: 9px 14px; border-radius: 8px; text-decoration: none;
  color: var(--ink2); font-size: 13.5px; }
.sidenav nav a:hover { background: var(--page); color: var(--ink); }
.sidenav nav a.on { background: var(--brand-bg); color: var(--brand); font-weight: 500; }
.sidenav-sep { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mut); margin: 14px 14px 4px; }
.sidenav-user { margin-top: auto; position: sticky; bottom: 16px; padding: 12px 14px;
  border-top: 1px solid var(--grid); font-size: 12.5px; }
.sidenav-user .linklike { padding: 2px 0; color: var(--brand); }
@media (max-width: 900px) {
  .layout { flex-direction: column; min-height: 0; }
  .sidenav { width: 100%; border-right: 0; border-bottom: 1px solid var(--grid); padding: 10px 20px; }
  .sidenav > nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidenav-sep { display: none; }
  .sidenav-user { margin: 0; border: 0; padding: 4px 0 0; position: static; }
}
.wrap-wide table { font-size: 13.5px; }
.wrap-wide th, .wrap-wide td { padding: 10px 12px; }
.wrap-wide .lnk { max-width: 460px; }
.wrap-wide .linkcell { max-width: none; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; margin-top: 16px; box-shadow: 0 1px 3px rgba(26, 59, 173, 0.06); }
.card h1 { font-size: 21px; margin-bottom: 6px; color: var(--navy); }
.card h2 { font-size: 17px; margin-bottom: 6px; color: var(--navy); letter-spacing: 0.3px; }
.survey-title { font-size: 19px; margin: 22px 4px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--navy); }
.sec-h { font-size: 13.5px; margin: 16px 0 6px; color: var(--brand); letter-spacing: 0.5px; text-transform: uppercase; }
.crumb { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.note, .mut { color: var(--mut); font-size: 12.5px; }
.hint { font-size: 12px; color: var(--mut); margin-top: 10px; }
.center { text-align: center; }

/* strona powitalna (index) */
.landing { max-width: 620px; margin: 56px auto 0; padding: 40px 44px 34px; }
.landing h1, .landing h2 { margin-bottom: 14px; }
.landing p { margin: 0 0 10px; line-height: 1.6; }
.landing .mut { font-size: 13px; }
.landing hr { border: 0; border-top: 2px solid var(--cyan-bg); width: 88px; margin: 28px auto; }

.q { padding: 14px 0; border-top: 1px solid var(--grid); }
.q:first-of-type { border-top: 0; }
.q .qt { font-weight: 500; margin-bottom: 8px; }
.q-err { background: #fdf3f3; outline: 2px solid var(--crit); outline-offset: -2px; border-radius: 10px; padding: 14px 12px; margin: 12px 0; border-top: 0; }
.q-miss { background: #fff8ec; outline: 2px solid var(--warn); outline-offset: -2px; border-radius: 10px; padding: 14px 12px; margin: 12px 0; border-top: 0; }
.q-err::before, .q-miss::before { content: attr(data-req-label); display: block; font-size: 11.5px;
  font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
.q-miss::before { color: #9a6b00; }
.q-err::before { color: var(--crit); }
.q-err + .q, .q-miss + .q { border-top: 0; }
.miss-info { color: #9a6b00; font-size: 12.5px; margin-right: 4px; }
label.opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
label.opt:hover { background: var(--brand-bg); }
label.opt input { margin-top: 3px; accent-color: var(--brand); }
label.opt .p { color: var(--mut); font-size: 12px; white-space: nowrap; margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.rodo { font-size: 12px; color: var(--ink2); background: var(--cyan-bg); border-left: 3px solid var(--cyan); padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 8px 0; }
.infobox { font-size: 12.5px; color: var(--navy); background: var(--cyan-bg); border-radius: 10px; padding: 10px 14px; margin-top: 16px; }
.cmt { margin-top: 6px; }

.firma, .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13.5px; }
.firma .l, .meta .l { display: block; color: var(--mut); font-size: 11.5px; }
input[type=text], input[type=email], input[type=password], textarea {
  border: 1px solid var(--axis); border-radius: 8px; padding: 7px 10px; font: inherit; width: 100%; background: #fff; }
input:focus, textarea:focus { outline: 2px solid rgba(0, 166, 236, 0.45); border-color: var(--cyan); }
.fld { display: block; margin: 10px 0; }
.fld span { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 4px; }

.fixbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--grid); padding: 11px 22px; display: flex; align-items: center; gap: 12px; z-index: 5; justify-content: flex-end; }
.fixbar .score { margin-right: auto; font-size: 13px; color: var(--ink2); }
.fixbar .score b { font-size: 17px; color: var(--navy); }
.btn { border: 0; border-radius: 8px; padding: 10px 22px; font: inherit; font-weight: 500; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:focus-visible { outline: 3px solid rgba(0, 166, 236, 0.5); }
.btn-main { background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(26, 59, 173, 0.30); }
.btn-main:hover { background: var(--brand-dark); }
.btn-ghost { background: var(--surface); color: var(--brand); border: 1px solid var(--axis); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-good { background: var(--good); color: #fff; }
.btn-crit { background: #fff; color: var(--crit); border: 1px solid var(--crit); }
.wide { width: 100%; }

.alert { border-radius: 10px; padding: 10px 14px; margin-top: 14px; font-size: 13px; border: 1px solid; }
.alert.err { border-color: var(--crit); background: #fdf3f3; }
.alert.ok { border-color: var(--good); background: #f1faf1; }
.alert.warn { border-color: var(--warn); background: #fff8ec; }
.login { max-width: 380px; margin: 60px auto; }

.langs, .usernav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.langs a, .usernav a { padding: 6px 13px; border-radius: 8px; text-decoration: none; color: var(--ink2); font-size: 13px; }
.langs a.on, .usernav a.on { background: var(--brand-bg); color: var(--brand); font-weight: 500; }
.linklike { border: 0; background: none; color: var(--ink2); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 10px; }
.inline { display: inline; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--navy); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.row-c { cursor: pointer; }
tr.row-c:hover td { background: var(--brand-bg); }

.st { font-size: 11.5px; font-weight: 500; border-radius: 5px; padding: 2px 9px; white-space: nowrap; }
.st-created, .st-opened { color: var(--ink2); background: var(--grid); }
.st-submitted { color: var(--brand); background: var(--brand-bg); outline: 1px solid #c8d2f2; }
.st-approved { color: #0a6b0a; background: #e2f5e2; }
.st-rejected { color: var(--crit); background: #fdeaea; }
.st-imported { color: var(--navy); background: var(--cyan-bg); outline: 1px solid #a8e0f7; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(26, 59, 173, 0.06); }
.stat .sv { display: block; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 24px; color: var(--navy); }
.stat .sl { font-size: 11.5px; color: var(--mut); }
.expired { color: var(--crit); font-weight: 500; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.linkcell { max-width: 340px; }
.lnk { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; margin-right: 6px; }
.st-lnk-ok { color: #0a6b0a; background: #e2f5e2; }
.st-lnk-warn { color: #9a6b00; background: #fff3d6; }
.st-lnk-exp { color: var(--crit); background: #fdeaea; }
.chip-dl { margin-left: auto; border-style: dashed; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip { font-size: 12.5px; padding: 5px 13px; border: 1px solid var(--axis); border-radius: 999px; text-decoration: none; color: var(--ink2); background: var(--surface); }
.chip.on { border-color: var(--brand); color: var(--brand); font-weight: 500; background: var(--brand-bg); }

.kv { font-size: 13px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--grid); }
.kv .k { color: var(--ink2); max-width: 60%; }
.map .k { font-family: Consolas, monospace; font-size: 12px; color: var(--brand); }
.files { margin: 8px 0 0 18px; font-size: 13px; }
.files a { color: var(--brand); }
.actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.checks { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.sel { border: 1px solid var(--axis); border-radius: 8px; padding: 7px 10px; font: inherit; background: #fff; width: 100%; }
.sel-sm { width: auto; padding: 4px 8px; font-size: 12.5px; }
.role-form { display: inline-flex; gap: 6px; align-items: center; }
.login-sep { text-align: center; color: var(--mut); font-size: 12px; margin: 14px 0 6px; }
.json-edit { min-height: 480px; white-space: pre; overflow-x: auto; }
.actions-cell { white-space: nowrap; }
.actions-cell form, .actions-cell button { margin-right: 4px; }
.single-grid { display: grid; grid-template-columns: 200px 1fr 80px 200px; gap: 12px; }
.bulk-details { margin: 8px 0 4px; font-size: 13px; }
.bulk-details summary { color: var(--brand); cursor: pointer; padding: 4px 0; }
@media (max-width: 700px) { .single-grid { grid-template-columns: 1fr; } }
.se-root { margin-top: 10px; }
.se-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.se-top { background: var(--page); border-radius: 10px; padding: 10px 12px; }
.se-lbl { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.se-in { flex: 1; min-width: 160px; border: 1px solid var(--axis); border-radius: 8px; padding: 6px 9px; font: inherit; background: #fff; }
.se-num { width: 70px; border: 1px solid var(--axis); border-radius: 8px; padding: 6px 8px; font: inherit; background: #fff; }
.se-cb { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink2); white-space: nowrap; cursor: pointer; }
.se-sec { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: var(--surface); }
.se-sec-head { cursor: pointer; display: flex; gap: 12px; align-items: baseline; }
.se-sec-title { font-family: 'Oswald', sans-serif; font-weight: 500; color: var(--navy); font-size: 15px; }
.se-q { border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: #fff; }
.se-id { font-family: Consolas, monospace; font-size: 11px; color: var(--mut); background: var(--page); border-radius: 4px; padding: 2px 6px; }
.se-spacer { flex: 1; }
.se-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.se-opts { margin: 8px 0 6px; }
.se-opt { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.se-extra { margin-top: 8px; font-size: 12.5px; }
.se-extra summary { color: var(--brand); cursor: pointer; }
@media (max-width: 700px) { .se-grid2 { grid-template-columns: 1fr; } }
.csv { font-family: Consolas, monospace; font-size: 12px; }
.done .ok-ico { width: 46px; height: 46px; color: var(--good); }
.dropzone { position: relative; border: 2px dashed var(--axis); border-radius: 12px; padding: 24px 16px;
  text-align: center; background: var(--page); margin-top: 10px; transition: border-color .15s, background .15s; }
.dropzone.dz-over { border-color: var(--cyan); background: var(--cyan-bg); }
.dz-ico { width: 30px; height: 30px; color: var(--brand); display: block; margin: 0 auto 6px; }
.dz-text { display: block; font-weight: 500; color: var(--navy); }
.dz-hint { display: block; font-size: 12px; color: var(--mut); margin-top: 4px; }
.dz-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-list { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; position: relative; z-index: 1; pointer-events: none; }
.dz-list li { font-size: 12.5px; color: var(--ink2); padding: 3px 0 3px 22px; position: relative; }
.dz-list li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--cyan); }
.tiles-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 2px; }
.tile-survey { display: flex; flex-direction: column; }
.tile-survey h2 { font-size: 16px; margin-bottom: 2px; }
.tile-survey .mut { margin-bottom: 10px; }
.tile-survey .actions { margin-top: auto; align-items: center; }
.tile-survey > .st { margin-top: auto; align-self: flex-start; }
.backbar { margin: 14px 4px 0; }
.backbar a { color: var(--brand); text-decoration: none; font-size: 13px; }
.backbar a:hover { text-decoration: underline; }
.pts-summary { margin-top: 12px; display: flex; gap: 18px; justify-content: center; color: var(--ink2); font-size: 13px; }

.step-off { display: none; }
.q-hidden { display: none; }
.nav-off { display: none; }
.progressline { position: fixed; bottom: 59px; left: 0; right: 0; height: 4px; background: var(--grid); z-index: 5; }
.progressline i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .25s; }

@media (max-width: 640px) { .firma, .meta { grid-template-columns: 1fr; } .logo { height: 28px; } }