/* Pejpr / PPR — obchody app shell
   Palette, typography, layout primitives shared across all 10 screens.
   Extracted from Pejpr Deals Flow v1.dc.html + design.md. */

:root {
  --ink-900:#14181D; --ink-800:#1C2128; --ink-700:#242A31;
  --paper-100:#EDEFF1; --paper-200:#E4E7EB; --white:#FFFFFF;
  --accent-300:#9CB4CC; --accent-700:#3D5876;
  --fill-100:#C9D6E2; --fill-050:#E1E9F0;
  --line-light:#DDE2E7; --line-dark:rgba(255,255,255,.09);
  --text:#14181D; --muted:#5A6674; --faint:#8590A0;
  --text-d:#EDEFF1; --muted-d:rgba(237,239,241,.66); --faint-d:rgba(237,239,241,.45);
  --shadow-active:0 12px 40px -24px rgba(61,88,118,.45);
  --ff:'Roboto Flex','Roboto',system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
  --ms:'Material Symbols Outlined';
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper-100);color:var(--text);font-family:var(--ff);-webkit-font-smoothing:antialiased}
body.dark{background:var(--ink-900);color:var(--text-d)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-700)}
body.dark a:hover{color:var(--accent-300)}
button{font-family:var(--ff)}
input,select,textarea{font-family:var(--ff)}

/* Utilities */
.ms{font-family:var(--ms);font-weight:300;font-size:20px;line-height:1;display:inline-block;vertical-align:middle}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-700)}
.eyebrow.d{color:var(--accent-300)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{text-wrap:pretty}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff);font-weight:600;font-size:14.5px;padding:10px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1;transition:background .22s ease,border-color .22s ease,color .22s ease}
.btn-primary{background:var(--fill-100);color:var(--ink-900);border-color:var(--fill-100)}
.btn-primary:hover{background:var(--fill-050);color:var(--ink-900)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-light)}
.btn-ghost:hover{border-color:var(--accent-700);color:var(--accent-700)}
body.dark .btn-ghost{color:var(--text-d);border-color:rgba(255,255,255,.18)}
body.dark .btn-ghost:hover{border-color:var(--accent-300);color:var(--accent-300)}
.btn-lg{padding:14px 22px;font-size:15.5px;border-radius:12px}

/* App header */
.app-hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:14px 28px;background:rgba(20,24,29,.96);color:var(--text-d);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(12px)}
.app-hdr .logo{display:inline-flex;align-items:center;gap:11px;color:var(--text-d)}
.app-hdr .logo .chev{width:9px;height:9px;display:block;border-top:2.5px solid var(--accent-300)}
.app-hdr .logo .chev.l{border-right:2.5px solid var(--accent-300);transform:rotate(45deg)}
.app-hdr .logo .chev.r{border-left:2.5px solid var(--accent-300);transform:rotate(-45deg)}
.app-hdr .logo b{font-weight:700;font-size:20px;letter-spacing:.06em}
.app-nav{display:flex;gap:4px;margin-left:24px}
.app-nav a{padding:8px 12px;border-radius:8px;color:rgba(237,239,241,.66);font-size:14.5px}
.app-nav a:hover{color:var(--text-d)}
.app-nav a.on{background:rgba(255,255,255,.06);color:var(--text-d)}
.app-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:99px;background:rgba(156,180,204,.18);color:var(--accent-300);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;font-weight:500;border:1px solid rgba(156,180,204,.35)}
.avatar.light{background:#E9EDF2;color:var(--accent-700);border-color:#D5DEE8}

/* Sidebar */
.side{background:var(--white);border-right:1px solid var(--line-light);padding:26px 22px}
.side h4{margin:0 0 12px;font-size:11.5px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.side .lnk{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--text);font-size:14.5px;margin:0 -12px}
.side .lnk .ms{color:var(--faint);font-size:18px}
.side .lnk:hover{background:#F4F6F8;color:var(--text)}
.side .lnk.on{background:rgba(61,88,118,.10);color:var(--accent-700);font-weight:600}
.side .lnk.on .ms{color:var(--accent-700)}
.side .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--faint)}
.side hr{border:0;border-top:1px solid var(--line-light);margin:20px 0}

/* Crumbs */
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;margin-bottom:12px}
.crumbs a:hover{color:var(--accent-700)}
.crumbs .ms{font-size:16px}

/* Cards */
.card{background:var(--white);border:1px solid var(--line-light);border-radius:18px;padding:26px}
.card.pad-sm{padding:20px}
.card.dark{background:var(--ink-800);border:1px solid var(--line-dark);color:var(--text-d);border-radius:20px;padding:24px}
.card.active{border-color:rgba(61,88,118,.42);box-shadow:var(--shadow-active)}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--line-light);color:var(--muted);background:var(--white)}
.pill.on{background:rgba(156,180,204,.18);border-color:rgba(61,88,118,.35);color:var(--accent-700)}
.pill.dark{background:rgba(156,180,204,.10);border-color:rgba(156,180,204,.28);color:var(--accent-300)}
.pill.faint{background:transparent;color:var(--faint);border-color:transparent}

/* Icon tiles */
.icontile{width:38px;height:38px;border-radius:11px;background:rgba(61,88,118,.10);border:1px solid rgba(61,88,118,.22);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent-700)}
.icontile.dark{background:rgba(156,180,204,.14);border-color:rgba(156,180,204,.32);color:var(--accent-300)}
.icontile.sm{width:32px;height:32px;border-radius:9px}
.icontile.sm .ms{font-size:18px}

/* Money & progress */
.money{font-family:var(--mono);font-weight:500}
.steps{display:flex;gap:5px;align-items:center;width:100%;height:6px}
.steps .b{display:block!important;height:6px!important;max-height:6px!important;flex:1 1 0!important;min-width:0!important;border-radius:99px;background:rgba(0,0,0,.08);box-sizing:border-box}
.steps.dark .b{background:rgba(255,255,255,.08)}
.steps .b.done{background:var(--accent-700)}
.steps.dark .b.done{background:var(--accent-300)}
.steps .b.on{background:var(--accent-700);animation:pulse 1.8s ease-in-out infinite}
.steps.dark .b.on{background:var(--accent-300)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Rows */
.row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 18px}
.row.light{background:#F5F7F9;border:1px solid #E7EBEF;color:var(--text)}

/* Form fields */
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.input,.select,.textarea{width:100%;padding:14px 16px;border:1px solid var(--line-light);border-radius:11px;font-family:var(--ff);font-size:16px;background:var(--white);color:var(--text);outline:none;transition:border-color .22s ease}
.input.mono{font-family:var(--mono);letter-spacing:.02em}
.input.big{font-size:22px;font-weight:600;padding:16px 18px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent-700)}
.textarea{min-height:120px;resize:vertical;line-height:1.55}
.helper{font-size:12.5px;color:var(--faint);margin-top:6px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

/* Timeline row — three-state colour system:
   done   = sage green   (past step)
   active = warm amber   (current step — waiting for action)
   locked = accent blue  (future step — not open yet) */
.tl-row{display:grid;grid-template-columns:52px 1fr auto;gap:14px;padding:16px 18px;border:1px solid var(--line-light);border-radius:14px;background:var(--white);margin-bottom:8px;align-items:center}

.tl-row.done{background:#EEF3EF;border-color:#D9E4DD}
.tl-row.done .n{background:rgba(122,150,131,.18);color:#5F8570}
.tl-row.done .ts{color:#5F8570}

.tl-row.active{background:#FBF7EE;border-color:rgba(199,162,92,.42);box-shadow:0 12px 40px -24px rgba(180,140,60,.40)}
.tl-row.active .n{background:#C7A25C;color:#fff}
.tl-row.active .ts{color:#8E6D2E;font-weight:500}

.tl-row.locked{background:#F0F3F7;border-color:rgba(61,88,118,.16)}
.tl-row.locked .n{background:rgba(61,88,118,.14);color:var(--accent-700)}
.tl-row.locked .ts{color:var(--accent-700);opacity:.7}

.tl-row .n{width:36px;height:36px;border-radius:11px;background:#EAEDF0;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:13.5px}
.tl-row .h{font-weight:600;font-size:15.5px}
.tl-row .m{font-size:13.5px;color:var(--muted);margin-top:2px}
.tl-row .ts{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* Docs list */
.doc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #D9DEE4;border-radius:12px;background:var(--white);margin-bottom:8px}
.doc .n{flex:1}
.doc .n .h{font-weight:500;font-size:14px}
.doc .n .s{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.doc .ms{color:var(--accent-700)}

/* Key-value */
.kv{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px dashed #DCE0E5}
.kv:last-child{border:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-family:var(--mono)}

/* Checklist */
.chk{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border:1px solid var(--line-light);border-radius:14px;background:var(--white);margin-bottom:10px}
.chk .box{width:26px;height:26px;border-radius:8px;border:1.5px solid #C7CDD4;flex:none;display:flex;align-items:center;justify-content:center;background:var(--white)}
.chk .box .ms{font-size:18px;color:transparent}
.chk.done .box{background:var(--accent-700);border-color:var(--accent-700)}
.chk.done .box .ms{color:#fff}
.chk.doing{border-color:rgba(61,88,118,.42);box-shadow:var(--shadow-active)}
.chk.doing .box{border-color:var(--accent-700)}
.chk .txt{flex:1}
.chk .h{font-weight:600;font-size:15.5px}
.chk .m{font-size:13.5px;color:var(--muted);margin-top:2px}
.chk .ts{font-family:var(--mono);font-size:12px;color:var(--faint)}
.chk.doing .ts{color:var(--accent-700)}

/* Upload zone */
.upload{margin-top:18px;padding:26px;border:1.5px dashed #B9C2CC;border-radius:14px;background:#F4F7FA;text-align:center}
.upload .ms{font-size:32px;color:var(--accent-700)}
.upload .h{font-weight:600;margin-top:8px;font-size:15.5px}
.upload .m{font-size:13.5px;color:var(--muted);margin-top:4px}

/* Tabs (segmented) */
.tabs{display:flex;gap:2px;padding:4px;background:#EAEDF0;border-radius:12px;width:max-content}
.tabs button,.tabs a{background:transparent;border:0;padding:8px 14px;border-radius:9px;font-family:var(--ff);font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;text-decoration:none}
.tabs button.on,.tabs a.on{background:var(--white);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Layout: sidebar + main */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 64px)}
.layout .main{padding:28px 32px}

/* Layout: split (form + aside) */
.split{display:grid;grid-template-columns:1fr 380px;min-height:calc(100vh - 64px)}
.split .form-col{padding:34px 40px}
.split .aside-col{background:var(--paper-200);border-left:1px solid var(--line-light);padding:34px 32px}

@media (max-width:900px){
  .layout,.split{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line-light)}
  .split .aside-col{border-left:0;border-top:1px solid var(--line-light)}
  .app-nav{display:none}
}