/* Shell adapter for the Ateliér stylesheet (#207 split): the top bar, the menu, quick search, the start page when the
   CRM does not start, the version bar and the shared task tick. Screen layouts that used to live here are in
   web/screens.css; tokens are in web/tokens.css. */
/* #203: Inter as in the original, served from our own origin (the original used Google Fonts); SIL OFL, client/inter-OFL.txt. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/client/inter-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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/client/inter-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}

@layer components{
.topbar .search{min-width:0}
.grow{flex:1}
.me small{display:block;color:var(--muted);font-size:var(--fs-1)}
.search svg{flex:none}
.search input{margin:0}
.status:not(:empty){padding:var(--sp-10) var(--sp-14);background:var(--ok-bg);color:var(--ok);border-radius:var(--r-sm);margin-bottom:var(--sp-14)}
.status.error{color:var(--dng);background:var(--dng-bg)}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-12);white-space:pre-wrap;overflow-wrap:anywhere;max-height:350px;overflow:auto;font-size:var(--fs-2)}
.btn:disabled{opacity:.4;cursor:default}
.fchip:disabled{opacity:.55;cursor:default}
.empty{padding:var(--sp-16)}
.side nav{overflow:auto}
.nv span:last-child{flex:1}
.page{max-width:1440px}
footer{margin-top:var(--sp-20)}
@media (max-width:860px){#app:not([hidden]){display:block}.side{display:flex;position:static;width:100%;height:auto;padding:var(--sp-10) var(--sp-14)}.side .brand{padding-bottom:var(--sp-6)}.side .navgrp,.side .grow,.side .me{display:none}.side nav{display:flex;gap:var(--sp-6);overflow:auto;padding:var(--sp-6) 0}.side .nv{width:auto;white-space:nowrap}.topbar{padding:var(--sp-10) var(--sp-14)}.topbar .pill{font-size:var(--fs-1)}.cols{grid-template-columns:1fr}.kpis{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}.kpi{padding:var(--sp-10)}.kpi .v{font-size:var(--fs-10)}.kpi .k{font-size:var(--fs-1)}.kpi .s{font-size:var(--fs-1)}.page{padding:var(--sp-16) var(--sp-14) var(--sp-32)}}
@media (max-width:600px){.topbar{height:auto;min-height:52px;flex-wrap:wrap}.topbar .search{flex:1 1 120px}.topbar>.grow{display:none}.topbar .session-logout{margin:0;padding:var(--sp-8);font-size:var(--fs-4)}.ph .grow{display:none}}
.ph{flex-wrap:wrap}
.navtoggle{display:flex;align-items:center;gap:var(--sp-6);width:100%;text-align:left;font-size:var(--fs-1)}
.navtoggle:hover{color:var(--text-2)}
.navchev{display:grid;place-items:center;width:12px;height:12px}
.navchev svg{width:12px;height:12px;transition:transform .15s}
.navtoggle[aria-expanded="true"] .navchev svg{transform:rotate(90deg)}
.navsec-items{display:flex;flex-direction:column}
.form-status{margin:0 0 var(--sp-10);font-size:var(--fs-4);color:var(--ok);overflow-wrap:anywhere}
.form-status:empty{display:none}
.form-status.error{color:var(--dng)}
.form-status .btn{margin-left:var(--sp-6)}
@media (max-width:860px){.side .navsec,.side .navsec-items{display:contents}.side .navtoggle{display:flex;width:auto;white-space:nowrap;padding:var(--sp-8) var(--sp-10);border-radius:var(--r-sm);background:var(--surface-3)}.side nav>.navgrp:empty{display:none}}
.topbar:not(:has(>:not([hidden]):not(.grow))){display:none}
@media (min-width:861px){.side{overflow-y:auto;overscroll-behavior:contain}.side nav{overflow:visible;flex:none}}

/* #54 Hledání a telefon */
.quick-search-open{display:flex;align-items:center;gap:var(--sp-8);flex:0 1 240px;min-width:0;height:32px;padding:0 var(--sp-10);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--muted);font-size:var(--fs-6);cursor:text}
.quick-search-open:hover{border-color:var(--line-strong)}
.quick-search-open:focus-visible{outline:none;border-color:var(--acc);box-shadow:var(--focus)}
.quick-search-open>span:first-of-type{flex:1;text-align:left;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-search-open svg{flex:none}
.qs-backdrop{position:fixed;inset:0;z-index:100;background:var(--scrim);display:flex;justify-content:center;padding:12vh var(--sp-16) var(--sp-16)}
.qs-panel{width:100%;max-width:560px;height:fit-content;max-height:70vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lift);overflow:hidden}
.qs-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-12) var(--sp-14);border-bottom:1px solid var(--line);color:var(--muted)}
.qs-head input,.qs-head input:focus{flex:1;min-width:0;min-height:0;margin:0;padding:var(--sp-4) 0;border:0;border-radius:0;outline:none;box-shadow:none;background:none;color:inherit;font-size:var(--fs-9)}
.qs-esc{flex:none;display:inline-block}
.qs-row svg.ic{color:var(--muted)}
.qs-results{overflow:auto;overscroll-behavior:contain}
.qs-group{padding:var(--sp-10) var(--sp-14) var(--sp-4)}
.qs-row{display:flex;align-items:center;gap:var(--sp-10);width:100%;min-height:40px;padding:var(--sp-6) var(--sp-14);font-size:var(--fs-6);text-align:left}
.qs-row[aria-selected=true]{background:var(--surface-2)}
.qs-row .t{min-width:0}
.qs-shortcut{display:flex;gap:var(--sp-4);flex:none}
.qs-shortcut .kbd{display:inline-block}
.qs-status{margin:0;padding:0 var(--sp-14);font-size:var(--fs-4);color:var(--muted)}
.qs-status:not(:empty){padding:var(--sp-8) var(--sp-14);border-top:1px solid var(--line)}
.qs-help{padding:var(--sp-18) var(--sp-20);gap:var(--sp-12)}
.qs-help h2{margin:0;font-size:var(--fs-10)}
.qs-help-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.qs-keys{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-8) var(--sp-16);margin:0;font-size:var(--fs-6);overflow:auto}
.qs-keys dt{display:flex;gap:var(--sp-4)}
.qs-keys dd{margin:0}
.qs-keys .kbd{display:inline-block;font-size:var(--fs-2)}
.tabbar .tb{min-height:44px;min-width:0}
.tabbar .tb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){.quick-search-open{flex:1 1 140px;height:44px}.qs-backdrop{padding:var(--sp-16) var(--sp-12) calc(var(--tabbar) + var(--sp-12))}.qs-row{min-height:48px}.qs-close,.qs-help-close{width:44px;height:44px}.qs-esc{display:none}}

/* #139: a client's name shown on a record opens the client page. */
.crm-client-name{margin:0;text-align:left;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;overflow-wrap:anywhere}
.crm-client-name:hover{color:var(--acc);text-decoration-color:currentColor}

/* #239 a menu count keeps its own width at the end of its entry; .nv span:last-child would stretch it. */
.nv span.cnt{flex:none}
/* #240 an unfolded product shows its views; the arrow folds it without leaving the screen. */
.navprod{display:flex;align-items:center}
.navprod .nv{flex:1;min-width:0}
.navarrow{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-left:var(--sp-4);border-radius:var(--r-xs);color:var(--muted);transition:transform .15s}
.navarrow svg{width:12px;height:12px}
.navarrow:hover{color:var(--text);background:var(--surface-3)}
.navprod.otevrena .navarrow{transform:rotate(90deg)}
/* The open product stays marked; while one of its views carries the highlight, the product shows it in bold text only. */
.navprod.vyber .nv.on{background:none;box-shadow:none}
.nv.pod{padding-left:var(--sp-28);gap:var(--sp-6)}
.nv.pod .cnt{flex:none}
@media (prefers-reduced-motion:reduce){.navarrow{transition:none}}
@media (max-width:860px){.side .navprod{flex:none}.side .nv.pod{padding-left:var(--sp-10)}}

/* #242: the start page when the CRM does not start, a screen that failed, the version bar and the offline mark. */
body[data-boot-failed]>:not(#boot-failure){display:none!important}
.boot-failure{max-width:640px;margin:var(--sp-48) auto;padding:0 var(--sp-16);font-family:var(--font)}
.boot-failure h1{font-size:var(--fs-14);margin:0 0 var(--sp-12)}
.boot-failure p{line-height:1.5}
.boot-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin:var(--sp-16) 0}
#boot-copied{font-size:var(--fs-4);color:var(--muted)}
.screen-fault{padding:var(--sp-16);margin:0 0 var(--sp-14);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);overflow-wrap:anywhere}
.screen-fault h2{font-size:var(--fs-9);margin:0 0 var(--sp-6)}
.screen-fault p{margin:0 0 var(--sp-10);font-size:var(--fs-6);color:var(--muted)}
.page[data-fault-shown]>:not(.ph):not(#status):not(.screen-fault):not(#client-return){display:none!important}
.load-retry{margin:var(--sp-6) 0 0}
.version-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16);background:var(--info-bg);color:var(--info);font-size:var(--fs-6)}
.version-bar span{flex:1;min-width:0}
.offline-badge{padding:var(--sp-4) var(--sp-10);border-radius:var(--pill);background:var(--dng-bg);color:var(--dng);font-size:var(--fs-4);font-weight:500;white-space:nowrap}

/* The shared task tick, on the board, the client page and a deal's tasks. */
.crm-task-card-head input[type=checkbox],.crm-client-task input[type=checkbox],.product-deal-task input[type=checkbox]{appearance:none;width:20px;height:20px;border:1.5px solid var(--muted);border-radius:50%;background:var(--surface);display:inline-grid;place-content:center;cursor:pointer;flex:none}
.crm-task-card-head input[type=checkbox]:checked,.crm-client-task input[type=checkbox]:checked,.product-deal-task input[type=checkbox]:checked{background:var(--info);border-color:var(--info)}
.crm-task-card-head input[type=checkbox]:checked:after,.crm-client-task input[type=checkbox]:checked:after,.product-deal-task input[type=checkbox]:checked:after{content:'✓';color:var(--on-status);font-size:var(--fs-8);line-height:1}
.crm-task-card-head input[type=checkbox]:focus-visible,.crm-client-task input[type=checkbox]:focus-visible,.product-deal-task input[type=checkbox]:focus-visible{outline:2px solid var(--info);outline-offset:3px}
.crm-task-card-head input[type=checkbox]:disabled,.crm-client-task input[type=checkbox]:disabled,.product-deal-task input[type=checkbox]:disabled{opacity:.55;cursor:wait}

/* #204: the shared icons (web/icons.js). Icon-only buttons are atelier's .iconbtn. The top bar holds Zpět and the
   light/dark switch as in the original; the way-back bar's arrow and every icon follow the text colour. */
.iconbtn{flex:none;cursor:pointer}
.iconbtn:disabled{opacity:.4;cursor:default}
.iconbtn:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
svg.ic{flex:none}
.btn svg.ic{width:14px;height:14px}
.client-return-mark{display:inline-grid;place-items:center}
.version-bar .iconbtn{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){.navchev svg{transition:none}}
.crm-file-attachment-drop,.crm-document-drop{display:flex;align-items:center;gap:var(--sp-8)}
.crm-file-attachment-drop svg.ic,.crm-document-drop svg.ic{opacity:.65}
.crm-file-attachment-open,.crm-document-open{display:inline-flex;align-items:center;gap:var(--sp-6)}
.crm-file-attachment-open svg.ic,.crm-document-open svg.ic{color:var(--muted)}
.crm-pipeline-mark{display:inline-grid;place-items:center}
.crm-pipeline-missing,.product-step-missing{display:inline-flex;align-items:center;gap:var(--sp-4)}
}