/* ============================================================ ORBITEL (.Orbitel / MobilStation) — Design System "Ink & Ember". Světlý základ + tmavá vrstva (aktivace: ). Generováno přes Claude Design, integrováno do FastAPI/Jinja appky. Všechny původní názvy tříd/id zachovány — markup i JS fungují beze změn. Pořadí: fonty -> tokeny -> semantic role -> komponenty -> dark override. ============================================================ */ /* ---- Inter, self-hosted subset (čeština vč. ů) -------------- */ @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/Inter-Regular.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/Inter-Medium.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/Inter-SemiBold.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/Inter-Bold.woff2") format("woff2");} /* ============================================================ COLORS — světlá paleta (dark ji přemapuje níže) ============================================================ */ :root{ --white:#FFFFFF; --stone-50:#FAFAF9; --stone-100:#F5F5F4; --stone-200:#E7E5E4; --stone-300:#D6D3D1; --stone-400:#A8A29E; --stone-500:#78716C; --stone-600:#57534E; --stone-700:#44403C; --stone-800:#292524; --stone-900:#1C1917; --brand-50:#FEF1EB; --brand-100:#FDDCCE; --brand-200:#FBBDA1; --brand-500:#FA6432; --brand-600:#E24E1B; --brand-700:#B93C12; --ok-text:#15803D; --ok-fill:#16A34A; --ok-bg:#ECFDF3; --warn-text:#B45309; --warn-fill:#F59E0B; --warn-bg:#FEF6E7; --err-text:#C81E1E; --err-fill:#DC2626; --err-bg:#FEF0F0; --info-text:#1D4ED8; --info-fill:#2563EB; --info-bg:#EFF4FF; --on-warn:#1C1917; --on-ok:#FFFFFF; --st-prijato-txt:#1E40AF; --st-prijato-bg:#DBE7FE; --st-rozpracovano-txt:#9A3D08; --st-rozpracovano-bg:#FBEBCE; --st-hotovo-txt:#0F6E33; --st-hotovo-bg:#D6F3E0; --st-predano-txt:#7E22CE; --st-predano-bg:#EFE0FE; --st-dokonceno-txt:#475569; --st-dokonceno-bg:#E2E8F0; --st-storno-txt:#BC1C1C; --st-storno-bg:#FCE1E1; } /* ============================================================ TYPOGRAPHY — Inter, jedna škála ============================================================ */ :root{ --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --text-xs-size:12px; --text-xs-lh:16px; --text-xs-weight:500; --text-sm-size:13px; --text-sm-lh:18px; --text-sm-weight:400; --text-base-size:15px; --text-base-lh:22px; --text-base-weight:400; --text-md-size:17px; --text-md-lh:24px; --text-md-weight:600; --text-lg-size:19px; --text-lg-lh:26px; --text-lg-weight:600; --text-xl-size:24px; --text-xl-lh:30px; --text-xl-weight:700; --text-2xl-size:32px; --text-2xl-lh:38px; --text-2xl-weight:700; --leading-body:1.5; } .num,.tnum{font-variant-numeric:tabular-nums;} .t-xs{font-size:var(--text-xs-size);line-height:var(--text-xs-lh);font-weight:var(--text-xs-weight);} .t-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-lh);font-weight:var(--text-sm-weight);} .t-base{font-size:var(--text-base-size);line-height:var(--text-base-lh);font-weight:var(--text-base-weight);} .t-md{font-size:var(--text-md-size);line-height:var(--text-md-lh);font-weight:var(--text-md-weight);} .t-lg{font-size:var(--text-lg-size);line-height:var(--text-lg-lh);font-weight:var(--text-lg-weight);} .t-xl{font-size:var(--text-xl-size);line-height:var(--text-xl-lh);font-weight:var(--text-xl-weight);} .t-2xl{font-size:var(--text-2xl-size);line-height:var(--text-2xl-lh);font-weight:var(--text-2xl-weight);} /* ============================================================ SPACING (4px), RADIUS, ELEVATION ============================================================ */ :root{ --space-0:0; --space-0-5:2px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --radius-sm:7px; --radius-md:10px; --radius-lg:12px; --radius-pill:999px; --radius:var(--radius-lg); --shadow-sm:0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.09); --shadow-md:0 4px 12px rgba(28,25,23,.10); --shadow-lg:0 12px 32px rgba(28,25,23,.16); --touch-min:44px; } /* ============================================================ SEMANTIC ROLES + BACK-COMPAT ALIASY ============================================================ */ :root{ --surface:#FFFFFF; --surface-sunken:var(--stone-100); --sidebar:#FFFFFF; --bg:#FFFFFF; --ink:var(--stone-900); --text:var(--stone-900); --text-secondary:var(--stone-600); --text-muted:var(--stone-500); --text-on-ink:#FFFFFF; --border:var(--stone-200); --border-strong:var(--stone-300); --focus-ring:var(--brand-600); --focus-ring-shadow:0 0 0 3px rgba(226,78,27,.28); --selection-bg:var(--brand-50); --link:var(--brand-700); --link-hover:var(--brand-600); /* Legacy aliasy — původní style.css / inline JS názvy proměnných */ --primary:var(--ink); --primary-d:var(--stone-800); --line:var(--border); --card:var(--surface); --card2:var(--surface-sunken); --side:var(--sidebar); --muted:var(--text-muted); --ok:var(--ok-fill); --warn:var(--warn-fill); --err:var(--err-fill); --danger:var(--err-fill); } ::selection{background:var(--selection-bg);} /* ============================================================ KOMPONENTY ============================================================ */ *{box-sizing:border-box;} [hidden]{display:none!important;} html,body{height:100%;max-width:100%;overflow-x:clip;} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-sans); font-size:var(--text-base-size);line-height:var(--leading-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } .muted{color:var(--text-muted);} .spacer{flex:1;} a{color:var(--link);text-decoration:none;} a:hover{color:var(--link-hover);text-decoration:underline;} .link{background:none;border:none;color:var(--link);cursor:pointer;font:inherit;font-size:var(--text-sm-size);padding:0;} .link:hover{color:var(--link-hover);text-decoration:underline;} /* --- ikony: inline Lucide, 1.5px currentColor ---------------- */ .icon,.ico svg,svg.icon{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;} .ico{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;flex:none;} /* ---------- layout: sidebar + main ------------------------- */ .app{display:flex;min-height:100vh;} .sidebar{ width:236px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border); display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;z-index:40; } .sidebar .brand{padding:6px 10px 18px;display:flex;align-items:center;gap:8px;} .sidebar .brand img{height:26px;width:auto;display:block;} .sidebar .brand .wordmark{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--ink);} .sidebar .brand .wordmark .em{color:var(--brand-500);} .sidebar nav{display:flex;flex-direction:column;gap:2px;} .sidebar nav a{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-md); color:var(--text-secondary);font-weight:var(--fw-medium);font-size:14.5px;white-space:nowrap; border-left:3px solid transparent;position:relative; } .sidebar nav a .ico{color:var(--text-muted);} .sidebar nav a:hover{background:var(--stone-50);color:var(--ink);} .sidebar nav a:hover .ico{color:var(--ink);} .sidebar nav a.on{background:var(--brand-50);color:var(--ink);font-weight:var(--fw-semibold);border-left-color:var(--brand-500);border-radius:0 var(--radius-md) var(--radius-md) 0;} .sidebar nav a.on .ico{color:var(--brand-700);} .side-foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm-size);} .ghost-dot{align-self:flex-end;color:var(--bg);font-size:20px;line-height:.4;text-decoration:none;padding:2px 8px;} .ghost-dot:hover{color:var(--text-muted);} .main{flex:1;min-width:0;display:flex;flex-direction:column;} /* hamburger + scrim (off-canvas drawer na malých displejích) */ .hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-md);cursor:pointer;color:var(--ink);} .scrim{display:none;position:fixed;inset:0;background:rgba(28,25,23,.4);z-index:39;} /* ---------- page header ------------------------------------ */ .page-head{ display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--border); position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);z-index:20; } .page-head h1{font-size:var(--text-lg-size);line-height:var(--text-lg-lh);margin:0;font-weight:var(--fw-semibold);display:flex;align-items:center;gap:10px;} .page-head h1 .icon{width:22px;height:22px;color:var(--brand-700);} .page-body{padding:22px 24px;max-width:1180px;width:100%;} /* ---------- tlačítka --------------------------------------- */ .btn,.btn-primary,.btn-ghost,.btn-sm,.btn-xs{ display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer; font-family:inherit;font-weight:var(--fw-semibold);white-space:nowrap;border:1px solid transparent; transition:background .12s ease,border-color .12s ease,color .12s ease; } .btn-primary{background:var(--ink);color:var(--text-on-ink);border-radius:var(--radius-md);padding:10px 16px;font-size:var(--text-base-size);} .btn-primary:hover{background:var(--stone-800);} .btn-primary:active{background:var(--stone-700);} .btn-primary:disabled{background:var(--stone-300);color:var(--white);cursor:not-allowed;} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong);border-radius:var(--radius-md);padding:10px 16px;font-size:var(--text-base-size);} .btn-ghost:hover{background:var(--stone-50);border-color:var(--stone-400);} .btn-sm{background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px 13px;font-size:var(--text-sm-size);} .btn-sm:hover{background:var(--stone-50);border-color:var(--stone-400);} .btn-xs{background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:5px 10px;font-size:var(--text-xs-size);font-weight:var(--fw-medium);} .btn-xs:hover{background:var(--stone-50);border-color:var(--stone-400);} .primary{background:var(--ink);color:var(--text-on-ink);border:none;border-radius:var(--radius-md);font-weight:var(--fw-semibold);cursor:pointer;font-family:inherit;} .primary:hover{background:var(--stone-800);} button:disabled{cursor:not-allowed;opacity:.55;} :focus-visible{outline:none;border-color:var(--focus-ring);box-shadow:var(--focus-ring-shadow);} a:focus-visible,.sidebar nav a:focus-visible{box-shadow:var(--focus-ring-shadow);} /* ---------- karty ------------------------------------------ */ .card{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);} .card h3{margin:0 0 6px;font-size:var(--text-md-size);line-height:var(--text-md-lh);font-weight:var(--fw-semibold);display:flex;align-items:center;gap:8px;} .card h3 .muted{font-weight:var(--fw-regular);font-size:var(--text-sm-size);} /* ---------- inputy ----------------------------------------- */ label.fld{display:block;font-size:var(--text-xs-size);color:var(--text-secondary);margin:14px 0 5px;font-weight:var(--fw-medium);} input,textarea,select{ width:100%;padding:10px 12px;background:var(--surface-sunken);color:var(--ink); border:1px solid var(--border-strong);border-radius:var(--radius-md); font-size:var(--text-base-size);font-family:inherit;line-height:1.4; } input::placeholder,textarea::placeholder{color:var(--stone-400);} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--focus-ring-shadow);background:var(--surface);} textarea{resize:vertical;} input:disabled,select:disabled{color:var(--text-muted);background:var(--stone-100);cursor:not-allowed;} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .chk{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:var(--text-base-size);} .chk input{width:auto;accent-color:var(--ink);width:18px;height:18px;} .seg{display:inline-flex;background:var(--surface-sunken);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:3px;gap:2px;} .seg label{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base-size);color:var(--text-secondary);font-weight:var(--fw-medium);} .seg input{display:none;} .seg label:has(input:checked){background:var(--ink);color:var(--text-on-ink);} .input-group{display:flex;align-items:stretch;gap:8px;} .input-group select{max-width:92px;} .price-input{display:flex;align-items:center;gap:8px;position:relative;} .price-input input{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);} .price-input .suffix{color:var(--text-muted);font-weight:var(--fw-medium);flex:none;} /* ---------- tabulky ---------------------------------------- */ .tablecard{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);} .tablecard--scroll{overflow-x:auto;} table.grid{width:100%;border-collapse:collapse;} table.grid th{text-align:left;padding:11px 14px;font-size:var(--text-xs-size);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);font-weight:var(--fw-semibold);border-bottom:1px solid var(--border);background:var(--surface-sunken);white-space:nowrap;} table.grid td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:var(--text-base-size);vertical-align:middle;} table.grid tr:last-child td{border-bottom:none;} table.grid tr.clickable{cursor:pointer;} table.grid tr.clickable:hover td{background:var(--stone-50);} table.grid tr.urgent td:first-child,table.grid tr.missing-part td:first-child{box-shadow:inset 3px 0 0 var(--err-fill);} td.cut{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} td.right,th.right{text-align:right;} td.num,td.right{font-variant-numeric:tabular-nums;} /* ---------- stavový slovník (JEDEN systém) ----------------- */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-pill);font-size:var(--text-xs-size);font-weight:var(--fw-semibold);white-space:nowrap;line-height:1.2;} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;} .badge.s-prijato{background:var(--st-prijato-bg);color:var(--st-prijato-txt);} .badge.s-rozpracovano{background:var(--st-rozpracovano-bg);color:var(--st-rozpracovano-txt);} .badge.s-hotovo{background:var(--st-hotovo-bg);color:var(--st-hotovo-txt);} .badge.s-predano{background:var(--st-predano-bg);color:var(--st-predano-txt);} .badge.s-dokonceno{background:var(--st-dokonceno-bg);color:var(--st-dokonceno-txt);} .badge.s-storno{background:var(--st-storno-bg);color:var(--st-storno-txt);} .badge.ok{background:var(--ok-bg);color:var(--ok-text);} .badge.warn{background:var(--warn-bg);color:var(--warn-text);} .badge.err{background:var(--err-bg);color:var(--err-text);} .badge.info{background:var(--info-bg);color:var(--info-text);} .badge.ok::before,.badge.warn::before,.badge.err::before,.badge.info::before{display:none;} .warn-part{color:var(--err-text);font-size:var(--text-xs-size);font-weight:var(--fw-semibold);margin-top:4px;display:flex;align-items:center;gap:4px;} .msg{font-size:var(--text-sm-size);} .msg.ok{color:var(--ok-text);} .msg.err{color:var(--err-text);} .error{color:var(--err-text);margin:6px 0 0;font-size:var(--text-sm-size);} .status{min-height:22px;margin-top:12px;font-size:var(--text-base-size);} .status.ok,.status.err,.status.warn,.status.info{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius-md); font-size:var(--text-md-size);font-weight:var(--fw-semibold);border:1px solid transparent; } .status.ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-fill);} .status.err{background:var(--err-bg);color:var(--err-text);border-color:var(--err-fill);} .status.warn{background:var(--warn-bg);color:var(--on-warn);border-color:var(--warn-fill);} .status.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-fill);} .status .icon{width:22px;height:22px;} .banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-md);font-size:var(--text-base-size);border:1px solid transparent;} .banner .icon{margin-top:1px;} .banner.warn{background:var(--warn-bg);color:var(--on-warn);border-color:var(--warn-fill);} .banner.err{background:var(--err-bg);color:var(--err-text);border-color:var(--err-fill);} .banner.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-fill);} .banner.ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-fill);} /* ---------- KPI / stat ------------------------------------- */ .stat{display:flex;flex-direction:column;gap:2px;} .stat .stat-label{font-size:var(--text-xs-size);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);font-weight:var(--fw-semibold);} .stat .stat-value{font-size:var(--text-xl-size);line-height:var(--text-xl-lh);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;} .stat .stat-detail{font-size:var(--text-sm-size);color:var(--text-muted);} /* ---------- toolbar ---------------------------------------- */ .toolbar{display:flex;gap:12px;margin-bottom:16px;} .toolbar input{flex:1;} .toolbar select{width:auto;min-width:170px;} /* ---------- taby ------------------------------------------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;} .tab{background:none;border:none;padding:10px 14px;font-size:var(--text-base-size);font-weight:var(--fw-medium);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;} .tab:hover{color:var(--ink);} .tab.active{color:var(--ink);font-weight:var(--fw-semibold);border-bottom-color:var(--ink);} /* ---------- autocomplete ----------------------------------- */ .ac{position:relative;} .ac-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);max-height:260px;overflow:auto;box-shadow:var(--shadow-lg);} .ac-item{padding:10px 12px;cursor:pointer;font-size:var(--text-base-size);border-bottom:1px solid var(--border);} .ac-item:last-child{border-bottom:none;} .ac-item:hover,.ac-item.active{background:var(--brand-50);color:var(--ink);} .ac-item:hover .muted{color:var(--text-secondary);} /* ---------- form grid (zakázka) ---------------------------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;} .form-grid .span2{grid-column:1 / -1;} /* ---------- items / parts ---------------------------------- */ table.items{width:100%;border-collapse:collapse;margin-bottom:10px;} table.items th{text-align:left;font-size:var(--text-xs-size);color:var(--text-secondary);padding:6px;font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:.03em;} table.items td{padding:6px;border-bottom:1px solid var(--border);} table.items input{padding:8px 10px;width:92px;} table.items .i-name{width:100%;} table.items .x{background:none;border:none;color:var(--err-text);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:var(--radius-sm);} table.items .x:hover{background:var(--err-bg);} .totals{display:flex;gap:28px;margin-top:10px;font-size:var(--text-base-size);} .totals strong{color:var(--ink);font-variant-numeric:tabular-nums;} .loglist{list-style:none;margin:0;padding:0;} .loglist li{padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--text-base-size);} .loglist li:last-child{border-bottom:none;} .parts-subrow>td{background:var(--surface-sunken);padding:8px 14px!important;} .parts-subrow .muted{font-size:var(--text-xs-size);margin-bottom:4px;} .fk-part-btn{margin-left:4px;} /* ---------- action bar ------------------------------------- */ .actionbar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:14px 24px;background:var(--surface);border-top:1px solid var(--border);flex-wrap:wrap;box-shadow:0 -1px 2px rgba(28,25,23,.05);} /* ---------- scanner (naskladňovač) ------------------------- */ .scan-wrap{max-width:900px;margin:0 auto;padding:24px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);width:100%;} #ean{font-size:var(--text-2xl-size);line-height:1.1;padding:18px;text-align:center;letter-spacing:2px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;} .product-main{display:flex;justify-content:space-between;gap:12px;} .p-name{font-size:var(--text-lg-size);font-weight:var(--fw-semibold);} .p-price{font-size:var(--text-md-size);font-weight:var(--fw-bold);white-space:nowrap;font-variant-numeric:tabular-nums;} .price-row{margin-top:16px;} .price-input input{height:50px;font-size:22px;} .qty-row{display:flex;align-items:center;gap:8px;margin-top:16px;} .qty-btn{width:46px;height:46px;font-size:22px;padding:0;} #qty{width:84px;height:46px;text-align:center;font-size:20px;font-variant-numeric:tabular-nums;} .scan-wrap .primary,#confirm{margin-left:auto;height:46px;padding:0 24px;} .candidate-list,.history{list-style:none;margin:8px 0 0;padding:0;} .candidate-list li{padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);margin-bottom:8px;cursor:pointer;} .candidate-list li:hover{border-color:var(--brand-600);background:var(--brand-50);} .history li{padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--text-base-size);display:flex;justify-content:space-between;gap:10px;} .history li.err{color:var(--err-text);} .hist-head{display:flex;justify-content:space-between;align-items:center;gap:8px;} /* ---------- modal ------------------------------------------ */ .modal{position:fixed;inset:0;background:rgba(28,25,23,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;backdrop-filter:blur(2px);} .modal-card{width:100%;max-width:540px;max-height:92vh;overflow:auto;} .modal-card.sm{max-width:420px;} .modal-card.md{max-width:480px;} .modal-card.lg{max-width:720px;} .modal-card.xl{max-width:1000px;} .modal-card h2,.modal-card h3{margin-top:0;} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;} /* category picker */ .cat-picker{border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px;} .cat-selected{padding:8px 10px;background:var(--surface-sunken);border-radius:var(--radius-sm);margin-bottom:8px;} .cat-tree,.cat-results{max-height:220px;overflow:auto;margin-top:6px;} .cat-node{display:flex;align-items:center;gap:6px;padding:3px 0;} .cat-toggle{width:18px;text-align:center;color:var(--text-muted);user-select:none;} .cat-toggle.clickable{cursor:pointer;color:var(--ink);} .cat-name{cursor:pointer;padding:3px 8px;border-radius:var(--radius-sm);} .cat-name:hover{background:var(--brand-50);color:var(--ink);} .cat-children{margin-left:18px;border-left:1px solid var(--border);padding-left:6px;} .cat-result{padding:9px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;} .cat-result:hover{border-color:var(--brand-600);background:var(--brand-50);} .grid-add{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end;} /* ---------- login ------------------------------------------ */ .login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--stone-50);} .login-card{width:100%;max-width:360px;display:grid;gap:12px;} .login-card h1{margin:0;font-size:var(--text-xl-size);font-weight:var(--fw-bold);} .login-card button{padding:12px;background:var(--ink);color:var(--text-on-ink);border:none;border-radius:var(--radius-md);font-weight:var(--fw-semibold);cursor:pointer;font-size:var(--text-base-size);font-family:inherit;} .login-card button:hover{background:var(--stone-800);} /* ---------- naskladněné faktury ---------------------------- */ .fkt-card{background:var(--surface-sunken);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:12px 13px;} .fkt-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;} .fkt-card-head strong{font-size:var(--text-sm-size);} .fkt-chip{font-size:var(--text-xs-size);font-weight:var(--fw-semibold);padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;} .fkt-chip-ok{background:var(--ok-bg);color:var(--ok-text);} .fkt-chip-muted{background:var(--surface);color:var(--text-muted);border:1px solid var(--border);} .fkt-sub{font-size:var(--text-xs-size);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 6px;color:var(--text-secondary);} .fkt-empty{font-size:var(--text-sm-size);padding:6px 0;color:var(--text-muted);} .fkt-inv-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--border);font-size:var(--text-sm-size);} .fkt-inv-row:first-of-type{border-top:none;} .fkt-inv-l{min-width:0;} .fkt-inv-r{font-size:var(--text-xs-size);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;} .fkt-more{display:inline-block;margin-top:8px;font-size:var(--text-sm-size);} .fkt-older .fkt-inv-row:first-of-type{border-top:1px solid var(--border);} input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} input[type=number]{-moz-appearance:textfield;appearance:textfield;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:900px){ .hamburger{display:inline-flex;} .sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);} .app.drawer-open .sidebar{transform:translateX(0);} .app.drawer-open .scrim{display:block;} .page-body{padding:18px 16px;} .page-head{padding-left:60px;} .form-grid{grid-template-columns:1fr;} } @media (max-width:640px){ .page-head{padding:14px 16px 14px 60px;} .grid2,.row2{grid-template-columns:1fr;} .grid-add{grid-template-columns:1fr 1fr;} .tablecard.stack table.grid thead{display:none;} .tablecard.stack table.grid,.tablecard.stack tbody,.tablecard.stack tr,.tablecard.stack td{display:block;width:100%;} .tablecard.stack tr{border-bottom:1px solid var(--border);padding:8px 4px;} .tablecard.stack td{border:none;padding:5px 14px;display:flex;justify-content:space-between;gap:12px;} .tablecard.stack td::before{content:attr(data-label);color:var(--text-secondary);font-size:var(--text-xs-size);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.03em;} .tablecard.stack td.cut{max-width:none;white-space:normal;text-align:right;} } @media (pointer:coarse){ .btn-xs,.btn-sm{min-height:var(--touch-min);} .sidebar nav a,.tab,.ac-item,.seg label{min-height:var(--touch-min);} table.grid td{padding-top:14px;padding-bottom:14px;} } /* ============================================================ ORBITEL — DARK THEME OVERRIDE (lokální vrstva, DS se nemění) Aktivace: třída .theme-dark na . Přemapovává tokeny; komponentové CSS zůstává beze změny. ============================================================ */ html.theme-dark{color-scheme:dark;} html.theme-dark:root{ /* --- neutrální rampa (teplý stone, invertováno) --- */ --stone-50:#26221F; /* hover wash */ --stone-100:#151210; /* sunken: inputy, th */ --stone-200:#332E2A; /* border */ --stone-300:#453F3A; /* border-strong */ --stone-400:#6E6660; /* placeholder, disabled */ --stone-500:#8F8781; /* muted */ --stone-600:#B3ABA4; /* secondary */ --stone-700:#CFC8C2; /* primary btn :active */ --stone-800:#DFD9D4; /* primary btn :hover */ --stone-900:#F0EDEA; /* ink (světlý text) */ /* --- povrchy --- */ --bg:#141110; --surface:#1F1B18; --surface-sunken:#151210; --sidebar:#191512; --text-on-ink:#171412; /* --- ember na tmavé --- */ --brand-50:#3B1F10; /* aktivní nav / selection wash */ --brand-100:#4A2716; /* hover wash */ --brand-200:#6B3A1E; --brand-600:#FA6432; /* focus ring, UI strokes */ --brand-700:#FF9A6B; /* oranžový text/odkazy/ikony */ --focus-ring:#FA6432; --focus-ring-shadow:0 0 0 3px rgba(250,100,50,.32); /* --- stavové barvy (tmavé varianty) --- */ --ok-text:#57D98A; --ok-fill:#22A854; --ok-bg:#132A1B; --warn-text:#F5B83D; --warn-fill:#D98B06; --warn-bg:#2E2310; --err-text:#FF7B70; --err-fill:#E5484D; --err-bg:#331515; --info-text:#7AAEFF; --info-fill:#3B82F6; --info-bg:#152238; --on-warn:#F6C453; /* --- badge stavů oprav --- */ --st-prijato-txt:#9DB9FF; --st-prijato-bg:#1D2A4D; --st-rozpracovano-txt:#F0A868; --st-rozpracovano-bg:#3A2812; --st-hotovo-txt:#63D592; --st-hotovo-bg:#123320; --st-predano-txt:#CFA3F9; --st-predano-bg:#301D4C; --st-dokonceno-txt:#AAB7C4; --st-dokonceno-bg:#262F3A; --st-storno-txt:#FF8A85; --st-storno-bg:#3D1918; /* --- elevace (hlubší stíny na tmavé) --- */ --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45); --shadow-lg:0 12px 32px rgba(0,0,0,.55); } /* komponenty s natvrdo zapsanou barvou v základním CSS */ html.theme-dark .page-head{background:rgba(20,17,14,.88);} html.theme-dark .modal{background:rgba(0,0,0,.6);} html.theme-dark .scrim{background:rgba(0,0,0,.5);} html.theme-dark .actionbar{box-shadow:0 -1px 2px rgba(0,0,0,.4);} html.theme-dark .login-body{background:var(--bg);} /* --- detail použitého kusu (stránka /pouzite/{id}) --- */ .ud-wrap{max-width:1100px;display:flex;flex-direction:column;gap:16px;} .ud-pill{display:inline-block;padding:4px 13px;border-radius:999px; font-size:.72rem;font-weight:var(--fw-semibold);letter-spacing:.01em;} .ud-pill.prep{background:var(--st-rozpracovano-bg,#3A2812);color:var(--st-rozpracovano-txt,#F0A868);} .ud-pill.stock{background:var(--st-hotovo-bg,#123320);color:var(--st-hotovo-txt,#63D592);} .ud-pill.sold{background:var(--st-dokonceno-bg,#262F3A);color:var(--st-dokonceno-txt,#AAB7C4);} .ud-card-title{font-size:1.05rem;font-weight:var(--fw-semibold);margin-bottom:2px;} .ud-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px;} .ud-stats .lbl{font-size:.68rem;font-weight:var(--fw-semibold);text-transform:uppercase; letter-spacing:.08em;color:var(--muted);margin-bottom:4px;} .ud-stats .val{font-size:1.02em;font-weight:var(--fw-medium);overflow-wrap:anywhere;} .ud-stats .sub{font-size:.82em;color:var(--muted);margin-top:2px;} @media (max-width:760px){.ud-stats{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.ud-stats{grid-template-columns:1fr;}} .ud-sell{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;} .ud-sell .btn-primary{height:50px;padding:0 26px;flex:none;} /* --- badge počtu nových online objednávek v menu --- */ .nav-badge{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px; background:var(--err-fill,#e5534b);color:#fff;font-size:.7rem;font-weight:700; display:inline-flex;align-items:center;justify-content:center;line-height:1;}