/* R3, R4 a A4a redizajn V6.2 (3D_V3/PLAN-DALSIA-FAZA/REDIZAJN-V6-2/PLAN.md časť 5): kostra tímu (úzky panel, horná lišta), kostra zákazníka (horná lišta) a záložky Výroby v lište.
   Súbor založil a v web/index.html pripojil R1 iba s touto hlavičkou; pravidlá píše vlastník balíka, tokeny sú v tokens-v62.css. */

/* R3 kostra tímu: platí iba pod body[data-role="admin"] (admin, operátor, financie); zákaznícka kostra sa nemení (R4).
   Zdroj: prototyp OTVORIT-PROTOTYP-V6.2.html .nav2, .ni, .nsep (riadky 594 až 604), snimky/v62-06. Farby panela sú tóny design.css a admin-v7.css. */

/* Skupiny a podpoložky na každej šírke: v zásuvke riadky, v úzkom paneli dlaždice. Čiara skupiny má tón okraja prepínača roly
   z design.css (prototyp .nsep #20374d); podpoložka v zásuvke ostáva 44 px vysoká (design.css). */
body[data-role="admin"] .nav-sep{display:block;flex:0 0 auto;height:1px;margin:3px 10px;background:#ffffff1f}
body[data-role="admin"] .nav-item.nav-sub{padding-left:34px;font-size:var(--text-sm)}
body[data-role="admin"] .nav-item.nav-sub .icon{width:16px;height:16px}
body[data-role="admin"] .nav-item.nav-in{background:var(--navy-raised);color:#fff}

/* PR-86 (O-152): znak je logo kocka so sloganom z prihlásenia (web/views-auth.js:12, PNG 600 × 200 px na bielom, kocka x 25 až 127, y 45 až 147).
   Obal logo oreže od širokého bieleho okraja: celé logo je okno x 10 až 590 a y 30 až 165 (obal 172 × 40 px, obrázok 59 px vysoký, posun 3 a 9 px),
   v tmavej zásuvke na bielej podložke s oblým rohom. Úzky panel tímu a lišta zákazníka do 1439 px nižšie ukážu iba kocku (okno 150 × 150 px). */
body[data-role="admin"] .product-brand-logo,body[data-role="customer"] .product-brand-logo{position:relative;display:block;flex:0 0 auto;width:172px;height:40px;overflow:hidden;border-radius:8px;background:#fff}
body[data-role="admin"] .product-brand-logo>img,body[data-role="customer"] .product-brand-logo>img{position:absolute;top:-9px;left:-3px;width:auto;max-width:none;height:59px}

/* Úzky panel 84 px od 700 px: znak, dlaždica 74 × 54 px s ikonou nad popisom 12 px, dole Pomoc, Môj profil a Odhlásiť sa.
   Panel nemá bočné odsadenie (prototyp .nav2): 10 px rezervy nesie klasický posuvník nízkeho okna, vodorovne sa nič neposúva. */
@media(min-width:700px){
 body[data-role="admin"]{--sidebar:84px}
 body[data-role="admin"] .portal-sidebar{align-items:center;padding:10px 0 0;color:#a9bfd7}
 body[data-role="admin"] .portal-sidebar .product-brand{justify-content:center;width:100%;height:auto;padding:2px 0 10px}
 body[data-role="admin"] .portal-sidebar .product-brand-logo{width:36px;height:36px;border-radius:9px}
 body[data-role="admin"] .portal-sidebar .product-brand-logo>img{top:-5px;left:0;height:48px}
 body[data-role="admin"] .sidebar-help button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body[data-role="admin"] .role-switch,body[data-role="admin"] .nav-caption{display:none}
 body[data-role="admin"] .portal-sidebar nav{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff1f transparent}
 body[data-role="admin"] .nav-item{flex:0 0 auto;flex-direction:column;justify-content:center;gap:4px;width:74px;max-width:100%;min-height:54px;padding:6px 2px;border-radius:9px;color:#a9bfd7;font-size:var(--text-xs);font-weight:600;line-height:14px;text-align:center}
 body[data-role="admin"] .nav-item>span{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body[data-role="admin"] .nav-item .icon{width:20px;height:20px;color:inherit}
 body[data-role="admin"] .nav-item.active{color:#fff}
 body[data-role="admin"] .nav-item.nav-sub{min-height:40px;gap:2px;padding:4px 2px;font-size:var(--text-xs)}
 body[data-role="admin"] .nav-sep{width:44px;margin:6px 0}
 body[data-role="admin"] .sidebar-bottom{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding-top:var(--space-2)}
 body[data-role="admin"] .sidebar-help button{justify-content:center;width:40px;min-height:40px;padding:0;border-color:transparent;background:transparent;color:#a9bfd7}
 body[data-role="admin"] .sidebar-help .icon{color:inherit}
 body[data-role="admin"] .sidebar-profile{justify-content:center;width:100%;margin:var(--space-2) 0 0;padding:var(--space-2) 0}
 body[data-role="admin"] .sidebar-profile>.avatar,body[data-role="admin"] .sidebar-profile>div{display:none}
 body[data-role="admin"] .sidebar-profile .icon-btn{margin:0}
}

/* R3b lišta tímu V6.2 (prototyp .topbar, .search, .bell, .ubtn, riadky 102 až 110 a 613 až 626) a odznaky počtov v paneli. */
/* Odznak: číslo z atribútu data-nav-count, text odkazu ostáva popisom; v zásuvke vpravo v riadku, Notifikácie (zablokované e-maily) červené. */
body[data-role="admin"] .nav-item[data-nav-count]::after{content:attr(data-nav-count);min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:var(--text-xs);font-weight:700;line-height:18px;text-align:center}
body[data-role="admin"] .nav-item.active[data-nav-count]::after{background:#fff;color:var(--accent)}
body[data-role="admin"] .nav-item[href="#admin/notifications"][data-nav-count]::after{background:var(--red);color:#fff}
body[data-role="admin"] .staff-bell-count{background:var(--red)}
/* Menu používateľa: okno popup.js (pod 700 px spodný panel, tlačidlo je vtedy skryté a profil s odhlásením má zásuvka). */
body[data-role="admin"] .staff-user{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:2px 6px 2px 2px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
body[data-role="admin"] .staff-user:hover,body[data-role="admin"] .staff-user[aria-expanded="true"]{background:var(--background)}
body[data-role="admin"] .staff-user>.avatar{border:0;background:var(--navy-raised);color:#fff}
body[data-role="admin"] .staff-user-name{display:grid;max-width:160px}
body[data-role="admin"] .staff-user-name>strong{overflow:hidden;font-size:var(--text-sm);font-weight:600;line-height:16px;text-overflow:ellipsis;white-space:nowrap}
body[data-role="admin"] .staff-user-name>small{color:var(--muted);line-height:15px;white-space:nowrap}
body[data-role="admin"] .staff-user>.icon{width:14px;height:14px;color:var(--muted)}
body[data-role="admin"] .staff-user-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
body[data-role="admin"] .staff-user-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:7px 10px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
body[data-role="admin"] .staff-user-item:hover{background:var(--background)}
/* PR-50m (Marek O-138 variant A, 06-Ulohy/PR-50m/K2.md): pod 700 px je menu používateľa avatar 36 px bez mena a šípky (meno pre
   čítačku ostáva ako pri 700 až 1279 px); otvorí to isté okno ako na počítači: rola, oprávnenia, Môj profil, Odhlásiť sa. */
@media(max-width:699px){
 body[data-role="admin"] .staff-user{min-width:36px;padding:2px}
 body[data-role="admin"] .staff-user>.icon{display:none}
 body[data-role="admin"] .staff-user-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Od 700 px: Hľadať ako pole 280 px (zúži sa na 150 px), ostatné nástroje sa nezužujú; odznak v rohu dlaždice panela. */
@media(min-width:700px){
 body[data-role="admin"] .topbar-tools{flex:0 1 auto;min-width:0}
 body[data-role="admin"] .topbar-tools>*{flex-shrink:0}
 body[data-role="admin"] .topbar-tools>.staff-search-button{flex:0 1 280px;justify-content:flex-start;gap:8px;min-width:150px;min-height:32px;height:32px;padding:0 10px;border-color:var(--line);background:var(--surface);color:var(--muted);font-weight:400}
 body[data-role="admin"] .topbar-tools>.staff-search-button:hover{border-color:var(--accent-line);background:var(--surface);color:var(--ink-2)}
 body[data-role="admin"] .staff-search-button>.btn-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body[data-role="admin"] .nav-item[data-nav-count]::after{position:absolute;top:4px;right:9px;margin:0;box-shadow:0 0 0 2px var(--navy)}
 body[data-role="admin"] .nav-item.active[data-nav-count]::after{box-shadow:none}
}
/* Od 1280 px má pole Hľadať plných 280 px; užšie pole má šírku podľa textu, aby sa cesta skrátila až po ňom. */
@media(min-width:1280px){
 body[data-role="admin"] .topbar-tools>.staff-search-button{width:280px}
}
/* 700 až 1279 px: Sprievodca, Obnoviť a meno používateľa iba ikonou a avatarom, aby cesta detailu (číslo objednávky) ostala celá;
   meno pre čítačku ostáva. */
@media(min-width:700px) and (max-width:1279px){
 body[data-role="admin"] .product-tour-button>.btn-label,body[data-role="admin"] .topbar-tools>[data-action="refresh"]>.btn-label,body[data-role="admin"] .staff-user-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* A4a Výroba ako sekcia so záložkami v lište (staff-topbar.js; prototyp .crumb.vyt a .vtabs riadky 631 až 635 a 1041, VY_TABS 1376, snimky/v62-09 a v62-10).
   Na trasách Výroba a Kalendár záložky nahradia cestu: sú prvé v nástrojoch lišty a nástroje ostávajú vpravo. Od 700 px majú záložky
   prednosť pred poľom Hľadať (150 px, z voľného miesta najviac 280 px); keď miesto nestačí, popisy záložiek sa skrátia trojbodkou a ikony
   ostanú všetky viditeľné (najmenšia záložka je ikona 15 px s odsadením). Pod 700 px sa zoznam posúva vo vnútri, stránka nie. */
body[data-role="admin"] .portal-topbar:has(.production-tabs) .topbar-context>:not(.mobile-toggle){display:none}
body[data-role="admin"] .topbar-tools>.production-tabs{display:flex;flex:0 1 auto;align-items:center;gap:10px;min-width:0;order:-1;margin-right:auto}
body[data-role="admin"] .production-tabs-title{display:flex;flex:0 0 auto;align-items:center;gap:8px;color:var(--ink);font-size:var(--text-sm);font-weight:600;white-space:nowrap}
body[data-role="admin"] .production-tabs-list{position:relative;display:flex;gap:2px;min-width:0;padding:2px;overflow-x:auto;border-radius:9px;background:var(--gray-bg);scrollbar-width:none}
body[data-role="admin"] .production-tabs-list::-webkit-scrollbar{display:none}
body[data-role="admin"] .production-tab{display:inline-flex;flex:0 1 auto;align-items:center;gap:6px;min-width:37px;min-height:30px;padding:0 11px;border-radius:7px;color:var(--ink-2);font-size:var(--text-sm);font-weight:600;line-height:18px;white-space:nowrap;text-decoration:none}
body[data-role="admin"] .production-tab .icon{flex:0 0 auto;width:15px;height:15px;color:inherit}
body[data-role="admin"] .production-tab>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
body[data-role="admin"] .production-tab:hover{background:#e3e9f0;color:var(--ink)}
body[data-role="admin"] .production-tab[aria-current]{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px #1b4fb71f}
body[data-role="admin"] .production-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(min-width:700px){
 body[data-role="admin"] .topbar-tools:has(.production-tabs){flex:1 1 auto}
 body[data-role="admin"] .topbar-tools:has(.production-tabs)>.staff-search-button{flex:1 0 150px;max-width:280px}
}
/* 700 až 1439 px bez nadpisu Výroba (panel ho má zvýraznený) a s užšími záložkami; 700 až 1279 px má popis iba aktuálna záložka, ostatné
   ikonu s popisom v title. Skrytý popis záložky ostáva čítačke. */
@media(min-width:700px) and (max-width:1439px){
 body[data-role="admin"] .production-tabs-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body[data-role="admin"] .production-tab{min-width:31px;padding:0 8px}
}
@media(min-width:700px) and (max-width:1279px){
 body[data-role="admin"] .production-tab:not([aria-current])>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Pod 700 px: záložky v druhom riadku lišty na celú šírku (prototyp .crumb.vyt flex-basis 100 %) s plným popisom a dotykovou výškou 44 px
   ako tlačidlá lišty (design.css), nadpis skrytý; nástroje majú medzi sebou 4 px ako na iných trasách. Lepkavá lišta má potom 109 px
   (6 + 44 + 4 + 48 + 6 + 1 px okraj, meranie A4a pri 375 px), preto ciele posunu v obsahu (sprievodca 68 px z product-tour.css, ovládacie
   prvky 90 px z design.css) majú horný odstup 118 px, aby začiatok cieľa nebol pod lištou (qa/v2-smoke/sprievodca.mjs, krok Výroba). */
@media(max-width:699px){
 body[data-role="admin"] .portal-topbar:has(.production-tabs)+.workspace *{scroll-margin-top:118px}
 body[data-role="admin"] .portal-topbar:has(.production-tabs){flex-wrap:wrap;gap:4px}
 body[data-role="admin"] .topbar-tools:has(.production-tabs){display:contents}
 body[data-role="admin"] .topbar-tools>.production-tabs{flex:1 0 100%;order:1;margin:0}
 body[data-role="admin"] .production-tabs-title{display:none}
 body[data-role="admin"] .production-tabs-list{flex:1 1 auto}
 body[data-role="admin"] .production-tab{flex-shrink:0;min-height:44px}
}

/* R4 kostra zákazníka V6.2: platí iba pod body[data-role="customer"]; kostra tímu z R3 vyššie sa nemení.
   Zdroj: prototyp OTVORIT-PROTOTYP-V6.2.html .ctop, .brand, .cnav, .cacct (riadky 242 až 252), .btn.p (41), .avatar (108), snimky/v62-02.
   Farby sú tokeny a tóny design.css; pozadie zákazníka je biele (customer.css), preto prechod myšou má tón #eef3f9 z design.css. */
/* Zásuvka pod 699 px (design.css): Profil a prihlásenia za čiarou skupiny ako v paneli tímu. */
body[data-role="customer"] .nav-sep{display:block;flex:0 0 auto;height:1px;margin:3px 10px;background:#ffffff1f}
/* R4b počet: číslo z atribútu data-nav-count (prototyp .cnt), text odkazu ostáva popisom; v zásuvke vpravo v riadku. */
body[data-role="customer"] .nav-item[data-nav-count]::after{content:attr(data-nav-count);box-sizing:border-box;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-size:var(--text-xs);font-weight:700;line-height:20px;text-align:center}
body[data-role="customer"] .nav-item.active[data-nav-count]::after{background:#fff;color:var(--accent)}
/* Menu používateľa: tlačidlo v lište a okno popup.js (iba od 700 px; pod 699 px má profil, prihlásenia a odhlásenie zásuvka). */
body[data-role="customer"] .customer-user{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:2px 6px 2px 2px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
body[data-role="customer"] .customer-user:hover,body[data-role="customer"] .customer-user[aria-expanded="true"]{background:#eef3f9}
body[data-role="customer"] .customer-user>.avatar{border:0;background:var(--navy-raised);color:#fff}
body[data-role="customer"] .customer-user-name{display:grid;max-width:180px}
body[data-role="customer"] .customer-user-name>strong{overflow:hidden;font-size:var(--text-sm);font-weight:600;line-height:16px;text-overflow:ellipsis;white-space:nowrap}
body[data-role="customer"] .customer-user-name>small{overflow:hidden;color:var(--muted);font-size:var(--text-xs);line-height:15px;text-overflow:ellipsis;white-space:nowrap}
body[data-role="customer"] .customer-user>.icon{width:14px;height:14px;color:var(--muted)}
body[data-role="customer"] .customer-user-company{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--text-sm)}
body[data-role="customer"] .customer-user-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
body[data-role="customer"] .customer-user-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:7px 10px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
body[data-role="customer"] .customer-user-item:hover{background:#eef3f9}
@media(max-width:699px){
 body[data-role="customer"] .customer-user,body[data-role="customer"] .topbar-help{display:none}
}
/* Od 700 px je #portal-sidebar ľavá časť hornej lišty (znak, položky, Nová objednávka) a #portal-topbar jej pravý koniec v tom istom
   riadku: rámec obsahu je display:contents a telo riadok so zalomením, obe časti sú lepkavé navrchu. Lišta má 56 px (--topbar-height,
   podľa nej sa lepia súhrn nacenenia a ďalšie lepkavé prvky), obsah ide pod ňu.
   Šírka ľavej časti je podľa obsahu: sprievodca pri 768 px ukáže panel vpravo od nej (qa/v2-smoke/sprievodca.mjs). Štítok Načítavam
   ostáva iba čítačke, inak by pri načítaní zalomil lištu a posunul obsah; obrys fokusu na bielej lište má farbu akcentu (kontrast). */
@media(min-width:700px){
 body[data-role="customer"]{--sidebar:0px;--topbar-height:56px;display:flex;flex-wrap:wrap;align-items:flex-start}
 body[data-role="customer"] .app-frame{display:contents}
 body[data-role="customer"] .workspace{flex:1 0 100%}
 body[data-role="customer"] .portal-sidebar{position:sticky;top:0;right:auto;bottom:auto;left:auto;z-index:31;flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--space-4);width:auto;height:var(--topbar-height);padding:0 0 0 var(--gutter);border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink)}
 body[data-role="customer"] .portal-topbar{flex:1 0 auto;justify-content:flex-end;padding:0 var(--gutter) 0 var(--space-4)}
 body[data-role="customer"] .portal-sidebar .product-brand{height:auto;gap:10px;padding:0}
 body[data-role="customer"] .role-switch,body[data-role="customer"] .nav-caption,body[data-role="customer"] .sidebar-bottom,body[data-role="customer"] .nav-sep,body[data-role="customer"] .nav-item.nav-account,body[data-role="customer"] .topbar-context{display:none}
 body[data-role="customer"] .portal-sidebar nav{display:flex;align-items:center;gap:2px;overflow:visible}
 body[data-role="customer"] .nav-item{flex:0 0 auto;gap:7px;min-height:38px;padding:0 12px;color:var(--ink-2);font-size:var(--text-md);font-weight:600;line-height:20px;white-space:nowrap}
 body[data-role="customer"] .nav-item .icon,body[data-role="customer"] .nav-item.active .icon{width:16px;height:16px;color:inherit}
 body[data-role="customer"] .nav-item:hover:not(.active){background:#eef3f9;color:var(--ink)}
 body[data-role="customer"] .nav-item.active{background:var(--accent-soft);color:var(--accent);box-shadow:none}
 body[data-role="customer"] .nav-item.nav-new{margin-left:var(--space-3);min-height:36px;background:var(--accent);color:#fff;font-size:var(--text-sm)}
 body[data-role="customer"] .nav-item.nav-new:hover:not(.active){background:var(--accent-hover);color:#fff}
 body[data-role="customer"] .nav-item.nav-new.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
 body[data-role="customer"] .topbar-tools{gap:var(--space-2)}
 body[data-role="customer"] .nav-item[data-nav-count]::after{margin-left:0}
 body[data-role="customer"] .nav-item.active[data-nav-count]::after{background:var(--accent);color:#fff}
 body[data-role="customer"] .topbar-tools .customer-locale-switch>span,body[data-role="customer"] .topbar-tools>.prototype-badge{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body[data-role="customer"] .portal-sidebar :focus-visible,body[data-role="customer"] .portal-topbar :focus-visible{outline-color:var(--accent)}
 body[data-role="customer"] .nav-item:focus-visible{outline-offset:2px}
}
/* 700 až 1279 px: znak a položky iba ikonou (popis v title a pre čítačku ostáva), aby lišta bez zalomenia mala miesto pre pravý koniec. */
@media(min-width:700px) and (max-width:1279px){
 body[data-role="customer"] .nav-item>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body[data-role="customer"] .nav-item{justify-content:center;width:40px;min-height:40px;padding:0}
 body[data-role="customer"] .nav-item .icon,body[data-role="customer"] .nav-item.active .icon{width:20px;height:20px}
 body[data-role="customer"] .nav-item.nav-new{margin-left:var(--space-2);min-height:40px}
 body[data-role="customer"] .nav-item[data-nav-count]::after{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 5px;line-height:18px;box-shadow:0 0 0 2px var(--surface)}
}
/* Popisy položiek a počty majú prednosť (meranie sk, en, de s počtami 12, 3 a 99): z loga iba kocka do 1439 px (PR-86), menu používateľa iba avatarom
   do 1599 px, Sprievodca a Obnoviť iba ikonou do 1799 px. Skrytý text ostáva čítačke. */
@media(min-width:700px) and (max-width:1439px){
 body[data-role="customer"] .product-brand-logo{width:36px;height:36px;border-radius:0}
 body[data-role="customer"] .product-brand-logo>img{top:-5px;left:0;height:48px}
}
@media(min-width:700px) and (max-width:1599px){
 body[data-role="customer"] .customer-user-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(min-width:700px) and (max-width:1799px){
 body[data-role="customer"] .product-tour-button>.btn-label,body[data-role="customer"] .topbar-tools>[data-action="refresh"]>.btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* PR-84b (O-145): pás náhľadu portálu firmy (web/customer-view.js) nad lištou zákazníka, v toku stránky, nie lepkavý, aby lepkavé prvky
   lišty (--topbar-height) ostali bez zmeny; od 700 px je to vlastný riadok zalomenej lišty. Farby sú tóny upozornenia z design.css. */
body[data-role="customer"] .customer-view-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px var(--gutter);border-bottom:1px solid var(--amber);
 background:var(--amber-bg);color:var(--ink)}
body[data-role="customer"] .customer-view-banner>.icon{flex:none;color:var(--amber)}
body[data-role="customer"] .customer-view-text{flex:1 1 220px;margin:0;line-height:1.35}
body[data-role="customer"] .customer-view-left{font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-role="customer"] .customer-view-end{flex:none}
@media(min-width:700px){
 body[data-role="customer"] #portal-view-banner{flex:1 0 100%}
}

/* R4c výzva skontrolovať údaje v profile (customer-profile-notice.js, kit R5 notice): v toku stránky hneď pod lištou, zarovnané s obsahom; nič
   nezakrýva. Prázdna lišta (overenie relácie v app.js) ho skryje; pod 699 px ho nemá nacenenie, aby cena a Vybrať súbor ostali na prvej
   obrazovke 812 px (qa/v2-smoke/quick-price.mjs). */
body[data-role="customer"] .customer-profile-notice:not([hidden]){display:block;max-width:var(--content-max);margin:var(--space-3) auto 0;padding:0 var(--gutter)}
body[data-role="customer"] .customer-profile-notice .v62-notice{margin:0}
body[data-role="customer"] .customer-profile-notice .v62-notice-text{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px 12px}
body[data-role="customer"] .customer-profile-notice-link{font-weight:600}
body[data-role="customer"] .customer-profile-notice-close{flex-shrink:0;margin-left:auto}
body[data-role="customer"] .customer-profile-notice :focus-visible{outline-color:var(--accent)}
body[data-role="customer"] #portal-topbar:empty+.customer-profile-notice{display:none}
@media(min-width:700px){
 body[data-role="customer"] .customer-profile-notice{flex:1 0 100%}
}
@media(max-width:699px){
 body[data-role="customer"] .customer-profile-notice[data-route="calculator"]{display:none}
}