/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}body{-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;min-height:100dvh}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-8{bottom:-2rem}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-10{top:2.5rem}.top-2{top:.5rem}.top-2\.5{top:.625rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[60\]{z-index:60}.col-span-1{grid-column:span 1/span 1}.col-span-full{grid-column:1/-1}.m-auto{margin:auto}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem}.mb-1,.my-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.line-clamp-1{-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-11{height:2.75rem;width:2.75rem}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-6{height:1.5rem;width:1.5rem}.size-8{height:2rem;width:2rem}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[300px\]{height:300px}.h-\[50px\]{height:50px}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\[80vh\]{max-height:80vh}.min-h-\[48px\]{min-height:48px}.min-h-screen{min-height:100vh}.w-1{width:.25rem}.w-10{width:2.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[15\%\]{width:15%}.w-\[160px\]{width:160px}.w-\[180px\]{width:180px}.w-\[20\%\]{width:20%}.w-\[240px\]{width:240px}.w-\[25\%\]{width:25%}.w-\[40\%\]{width:40%}.w-\[60px\]{width:60px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[140px\]{min-width:140px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[24px\]{min-width:24px}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-google,.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-bottom-right-radius:9999px;border-top-right-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.border-border{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgb(6 127 249/var(--tw-border-opacity))}.border-primary\/20{border-color:#067ff933}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-white\/40{border-color:#fff6}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity:1;background-color:rgb(248 249 250/var(--tw-bg-opacity))}.bg-black\/50{background-color:#00000080}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-50\/50{background-color:#eff6ff80}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-border{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-google-blue{--tw-bg-opacity:1;background-color:rgb(26 115 232/var(--tw-bg-opacity))}.bg-google-red{--tw-bg-opacity:1;background-color:rgb(217 48 37/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-50\/30{background-color:#f9fafb4d}.bg-gray-50\/50{background-color:#f9fafb80}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(6 127 249/var(--tw-bg-opacity))}.bg-primary\/20{background-color:#067ff933}.bg-primary\/5{background-color:#067ff90d}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-50\/50{background-color:#fef2f280}.bg-surface{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/20{background-color:#fff3}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-opacity-0{--tw-bg-opacity:0}.bg-cover{background-size:cover}.bg-center{background-position:50%}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-bottom:0;padding-top:0}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pb-1{padding-bottom:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-7{padding-left:1.75rem}.pr-4{padding-right:1rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:Inter,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[\#202124\]{--tw-text-opacity:1;color:rgb(32 33 36/var(--tw-text-opacity))}.text-\[\#3c4043\]{--tw-text-opacity:1;color:rgb(60 64 67/var(--tw-text-opacity))}.text-\[\#5f6368\]{--tw-text-opacity:1;color:rgb(95 99 104/var(--tw-text-opacity))}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-google-blue{--tw-text-opacity:1;color:rgb(26 115 232/var(--tw-text-opacity))}.text-google-green{--tw-text-opacity:1;color:rgb(30 142 62/var(--tw-text-opacity))}.text-google-red{--tw-text-opacity:1;color:rgb(217 48 37/var(--tw-text-opacity))}.text-google-yellow{--tw-text-opacity:1;color:rgb(249 171 0/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-orange-300{--tw-text-opacity:1;color:rgb(253 186 116/var(--tw-text-opacity))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(6 127 249/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity))}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-white\/50::-moz-placeholder{color:#ffffff80}.placeholder-white\/50::placeholder{color:#ffffff80}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-blue-200{--tw-shadow-color:#bfdbfe;--tw-shadow:var(--tw-shadow-colored)}.shadow-blue-500\/20{--tw-shadow-color:#3b82f633;--tw-shadow:var(--tw-shadow-colored)}.shadow-blue-500\/30{--tw-shadow-color:#3b82f64d;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid #0000;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-inset{--tw-ring-inset:inset}.ring-black\/5{--tw-ring-color:#0000000d}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.ring-blue-500\/20{--tw-ring-color:#3b82f633}.ring-blue-600{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.ring-primary{--tw-ring-opacity:1;--tw-ring-color:rgb(6 127 249/var(--tw-ring-opacity))}.ring-offset-2{--tw-ring-offset-width:2px}.ring-offset-background-light{--tw-ring-offset-color:#f5f7f8}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.invert{--tw-invert:invert(100%)}.invert,.sepia{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.calendar-day-active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(6 127 249/var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-ring-offset-color:#f5f7f8;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}:is(.dark .calendar-day-active){--tw-ring-offset-color:#0f1923}.hover\:-translate-y-0:hover{--tw-translate-y:-0px}.hover\:-translate-y-0:hover,.hover\:-translate-y-0\.5:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-blue-400:hover{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.hover\:border-primary\/20:hover{border-color:#067ff933}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-orange-100:hover{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity))}.hover\:bg-primary\/5:hover{background-color:#067ff90d}.hover\:bg-red-100:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\:text-google-red:hover{--tw-text-opacity:1;color:rgb(217 48 37/var(--tw-text-opacity))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(6 127 249/var(--tw-text-opacity))}.hover\:text-red-100:hover{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-sm:hover{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:brightness-95:hover{--tw-brightness:brightness(.95);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-solid:focus{border-style:solid}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.focus\:border-blue-600:focus{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.focus\:border-google-blue:focus{--tw-border-opacity:1;border-color:rgb(26 115 232/var(--tw-border-opacity))}.focus\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(6 127 249/var(--tw-border-opacity))}.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.focus\:bg-white\/20:focus{background-color:#fff3}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.focus\:ring-blue-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus\:ring-google-blue:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(26 115 232/var(--tw-ring-opacity))}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}.focus\:ring-primary\/20:focus{--tw-ring-color:#067ff933}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:cursor-grabbing:active{cursor:grabbing}.group\/row:hover .group-hover\/row\:bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.group:hover .group-hover\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group:hover .group-hover\:text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.group:hover .group-hover\:opacity-100,.group\/limit:hover .group-hover\/limit\:opacity-100{opacity:1}.peer:checked~.peer-checked\:border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.peer:checked~.peer-checked\:bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:block{display:block}.md\:w-96{width:24rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:w-72{width:18rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}}
/* ── Expense PWA Design System ─────────────────────────────────────── */
.expense-app {
    --exp-surface: #f7f9fc;
    --exp-surface-low: #f0f4f8;
    --exp-surface-lowest: #ffffff;
    --exp-surface-high: #e3e9ee;
    --exp-surface-highest: #dce3e9;
    --exp-primary: #0f57d0;
    --exp-primary-container: #4e83fe;
    --exp-on-surface: #2c3338;
    --exp-on-surface-variant: #596065;
    --exp-secondary-container: #d6e3fb;
    --exp-on-secondary-container: #465365;
    --exp-error-container: #fa746f;
    --exp-on-error-container: #6e0a12;
    --exp-outline-variant: #acb3b9;

    font-family: 'Inter', sans-serif;
    background-color: var(--exp-surface);
    color: var(--exp-on-surface);
    -webkit-tap-highlight-color: transparent;
    min-height: 100dvh;
}

.expense-app .font-manrope {
    font-family: 'Manrope', sans-serif;
}

.expense-app .editorial-headline {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.02em;
}

/* Gradient CTA */
.expense-app .exp-gradient-btn {
    background: linear-gradient(135deg, var(--exp-primary), var(--exp-primary-container));
    color: #f9f8ff;
    box-shadow: 0 8px 24px rgba(15, 87, 208, 0.15);
}

/* Ambient shadow */
.expense-app .exp-shadow {
    box-shadow: 0 8px 24px rgba(15, 87, 208, 0.06);
}

/* Ghost border for inputs */
.expense-app .exp-input {
    background-color: var(--exp-surface-lowest);
    border: 1px solid rgba(172, 179, 185, 0.2);
    transition: border-color 0.2s ease;
}
.expense-app .exp-input:focus {
    border-color: var(--exp-primary);
    outline: none;
}

/* Bottom nav glassmorphism */
.expense-app .exp-glass-nav {
    background: rgba(247, 249, 252, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Header glassmorphism */
.expense-app .exp-glass-header {
    background: rgba(247, 249, 252, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Category chips */
.expense-app .exp-chip {
    background-color: var(--exp-secondary-container);
    color: var(--exp-on-secondary-container);
}

/* Tonal surface cards */
.expense-app .exp-card {
    background-color: var(--exp-surface-lowest);
    border-radius: 0.75rem;
}
.expense-app .exp-card-low {
    background-color: var(--exp-surface-low);
    border-radius: 0.75rem;
}

/* Active nav item */
.expense-app .exp-nav-active {
    color: #1d4ed8;
    background-color: #eff6ff;
    border-radius: 0.75rem;
}

/* Safe area padding */
.expense-app .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.expense-app .pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
}

/* ═══════════════════════════════════════════════════════════════
   Timesheet grid — visual redesign
   ═══════════════════════════════════════════════════════════════ */

/* Hide number input spinners in timesheet cells */
#timesheet-grid-container input[type="number"]::-webkit-inner-spin-button,
#timesheet-grid-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#timesheet-grid-container input[type="number"] {
    -moz-appearance: textfield;
}

/* Timesheet cell pill styling */
#timesheet-grid-container td[data-cell-key] {
    padding: 2px;
}

#timesheet-grid-container td[data-cell-key] input {
    border-radius: 6px;
    transition: all 0.15s ease;
}

#timesheet-grid-container td[data-cell-key] input:not(:placeholder-shown),
#timesheet-grid-container td[data-cell-key] input.has-value {
    font-weight: 600;
}

/* Hover effect on data cells */
#timesheet-grid-container td[data-cell-key]:hover {
    z-index: 5;
}

/* Today column subtle highlight */
#timesheet-grid-container td.ts-today-col {
    background: rgba(59, 130, 246, 0.03);
}
.dark #timesheet-grid-container td.ts-today-col {
    background: rgba(59, 130, 246, 0.05);
}

/* Weekend cell subtle tint */
#timesheet-grid-container td.ts-weekend-col {
    background: rgba(239, 68, 68, 0.02);
}
.dark #timesheet-grid-container td.ts-weekend-col {
    background: rgba(239, 68, 68, 0.03);
}

/* Staff row hover */
#timesheet-grid-container tr.ts-staff-row:hover > td {
    background-color: rgba(59, 130, 246, 0.03);
}
.dark #timesheet-grid-container tr.ts-staff-row:hover > td {
    background-color: rgba(59, 130, 246, 0.05);
}
#timesheet-grid-container tr.ts-staff-row:hover > td.ts-staff-name-cell {
    background-color: #f8fafc;
}
.dark #timesheet-grid-container tr.ts-staff-row:hover > td.ts-staff-name-cell {
    background-color: rgba(255,255,255,0.05);
}

/* Section header softer look */
#timesheet-grid-container tr.ts-section-header td {
    border-bottom: 2px solid #e2e8f0;
}
.dark #timesheet-grid-container tr.ts-section-header td {
    border-bottom: 2px solid #334155;
}

/* Timesheet staff avatar */
.ts-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   Staff Portal PWA — Material Design 3 (Material You)
   Maroon primary (#47141d) tonal palette
   ═══════════════════════════════════════════════════════════════ */

/* ── MD3 Color Tokens ── */
.staff-portal {
    --md3-primary: #8C4A5E;
    --md3-on-primary: #FFFFFF;
    --md3-primary-container: #FFD9E3;
    --md3-on-primary-container: #3B071D;
    --md3-secondary: #74565F;
    --md3-on-secondary: #FFFFFF;
    --md3-secondary-container: #FFD9E3;
    --md3-on-secondary-container: #2B151C;
    --md3-surface: #FFF8F8;
    --md3-surface-dim: #E4D7D9;
    --md3-surface-container-lowest: #FFFFFF;
    --md3-surface-container-low: #FFF0F1;
    --md3-surface-container: #F5DEDE;
    --md3-surface-container-high: #EFDADB;
    --md3-surface-container-highest: #E9D4D6;
    --md3-on-surface: #22191C;
    --md3-on-surface-variant: #524347;
    --md3-outline: #847377;
    --md3-outline-variant: #D7C1C6;
    --md3-inverse-surface: #382E30;
    --md3-inverse-on-surface: #FAEEEF;
    --md3-error: #BA1A1A;
    --md3-on-error: #FFFFFF;
    --md3-error-container: #FFDAD6;

    background-color: var(--md3-surface);
    color: var(--md3-on-surface);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: "Roboto", system-ui, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* ── MD3 Dark Scheme ── */
.dark .staff-portal {
    --md3-primary: #FFB1C8;
    --md3-on-primary: #5B1031;
    --md3-primary-container: #73274B;
    --md3-on-primary-container: #FFD9E3;
    --md3-secondary: #E2BDC7;
    --md3-on-secondary: #422931;
    --md3-secondary-container: #5B3F48;
    --md3-on-secondary-container: #FFD9E3;
    --md3-surface: #1A1114;
    --md3-surface-dim: #1A1114;
    --md3-surface-container-lowest: #140C0F;
    --md3-surface-container-low: #241B1E;
    --md3-surface-container: #281F22;
    --md3-surface-container-high: #332A2C;
    --md3-surface-container-highest: #3E3537;
    --md3-on-surface: #F0DEE1;
    --md3-on-surface-variant: #D5C2C6;
    --md3-outline: #9E8C91;
    --md3-outline-variant: #524347;
    --md3-inverse-surface: #F0DEE1;
    --md3-inverse-on-surface: #382E30;
    --md3-error: #FFB4AB;
    --md3-on-error: #690005;
    --md3-error-container: #93000A;

    background-color: var(--md3-surface);
    color: var(--md3-on-surface);

    /* Override global tokens for compatibility */
    --color-bg: var(--md3-surface);
    --color-surface: var(--md3-surface-container);
    --color-border: var(--md3-outline-variant);
    --color-hover: rgba(255,255,255,0.08);
    --color-input-bg: var(--md3-surface-container-high);
    --color-input-border: var(--md3-outline-variant);
    --color-text: var(--md3-on-surface);
    --color-text-secondary: var(--md3-on-surface-variant);
}

/* ── MD3 Top App Bar ── */
.staff-portal .sp-glass-header {
    background: var(--md3-surface);
    padding-top: env(safe-area-inset-top, 0px);
    height: 64px;
    transition: background-color 0.2s ease;
}
.staff-portal .sp-glass-header.sp-header-elevated {
    background: var(--md3-surface-container);
}

/* ── MD3 Navigation Bar (Bottom) ── */
.staff-portal .sp-glass-nav {
    background: var(--md3-surface-container);
    border-top: none;
    height: 80px;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
    box-sizing: border-box;
}

.staff-portal .sp-nav-item {
    color: var(--md3-on-surface-variant);
    transition: color 0.2s;
    position: relative;
    min-width: 0;
}

.staff-portal .sp-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    transition: background-color 0.2s ease;
}

.staff-portal .sp-nav-active .sp-nav-icon-wrap {
    background: var(--md3-secondary-container);
}

.staff-portal .sp-nav-active {
    color: var(--md3-on-secondary-container);
}

/* ── "More" Popover ── */
.portal-more-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--md3-surface-container-high, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    padding: 6px;
    min-width: 160px;
    z-index: 100;
}
.dark .portal-more-popover {
    background: var(--md3-surface-container-high, #1e293b);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.portal-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--md3-on-surface, #374151);
    cursor: pointer;
    transition: background 0.15s;
}
.dark .portal-more-item {
    color: var(--md3-on-surface, #e2e8f0);
}
.portal-more-item:hover,
.portal-more-item:active {
    background: var(--md3-surface-container, #f3f4f6);
}
.dark .portal-more-item:hover,
.dark .portal-more-item:active {
    background: rgba(255,255,255,0.1);
}

.dark .staff-portal #sp-page-title {
    color: var(--md3-primary) !important;
}

/* ── MD3 dark overrides for Tailwind slate utilities ── */
.dark .staff-portal .border-slate-200 { border-color: var(--md3-outline-variant); }
.dark .staff-portal .border-slate-100 { border-color: var(--md3-outline-variant); }
.dark .staff-portal .border-slate-800 { border-color: var(--md3-outline-variant); }
.dark .staff-portal .border-slate-700 { border-color: var(--md3-outline-variant); }
.dark .staff-portal .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--md3-outline-variant); }
.dark .staff-portal .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--md3-outline-variant); }
.dark .staff-portal .bg-slate-800 { background-color: var(--md3-surface-container-high); }
.dark .staff-portal .bg-slate-700 { background-color: var(--md3-surface-container-highest); }
.dark .staff-portal .bg-slate-900 { background-color: var(--md3-surface-container-low); }
.dark .staff-portal .hover\:bg-slate-800:hover { background-color: var(--md3-surface-container-high); }
.dark .staff-portal .hover\:bg-slate-100:hover { background-color: var(--md3-surface-container); }
.dark .staff-portal .bg-slate-50 { background-color: var(--md3-surface-container); }
.dark .staff-portal .bg-white { background-color: var(--md3-surface-container); }
.dark .staff-portal .text-slate-900 { color: var(--md3-on-surface); }
.dark .staff-portal .text-slate-600 { color: var(--md3-on-surface-variant); }
.dark .staff-portal .text-slate-500 { color: var(--md3-on-surface-variant); }

.staff-portal .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.staff-portal .pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
}

.staff-portal .sp-main-content {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* ── MD3 Cards ── */
.staff-portal .sp-card {
    background: var(--md3-surface-container-low);
    border-radius: 12px;
    padding: 14px 16px;
    border: none;
    box-shadow: none;
}
.dark .staff-portal .sp-card {
    background: var(--md3-surface-container);
    border: none;
    box-shadow: none;
}
.staff-portal .sp-card-elevated {
    background: var(--md3-surface-container-low);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}

/* ── MD3 Buttons ── */
.staff-portal .sp-btn-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    background: var(--md3-primary);
    color: var(--md3-on-primary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s, opacity 0.2s;
    position: relative;
    overflow: hidden;
}
.staff-portal .sp-btn-filled:hover { box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3); }
.staff-portal .sp-btn-filled:active { opacity: 0.88; }

.staff-portal .sp-btn-filled-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    background: var(--md3-primary);
    color: var(--md3-on-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s, opacity 0.2s;
    position: relative;
    overflow: hidden;
}
.staff-portal .sp-btn-filled-lg:hover { box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3); }

.staff-portal .sp-btn-tonal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    background: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s, opacity 0.2s;
    position: relative;
    overflow: hidden;
}
.staff-portal .sp-btn-tonal:hover { box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3); }

.staff-portal .sp-btn-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    background: transparent;
    color: var(--md3-primary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    border: 1px solid var(--md3-outline);
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    overflow: hidden;
}
.staff-portal .sp-btn-outlined:hover { background: rgba(140,74,94,0.08); }
.dark .staff-portal .sp-btn-outlined:hover { background: rgba(255,177,200,0.08); }

.staff-portal .sp-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 20px;
    background: transparent;
    color: var(--md3-primary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.staff-portal .sp-btn-text:hover { background: rgba(140,74,94,0.08); }
.dark .staff-portal .sp-btn-text:hover { background: rgba(255,177,200,0.08); }

/* ── MD3 FAB ── */
.staff-portal .sp-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--md3-primary-container);
    color: var(--md3-on-primary-container);
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.staff-portal .sp-fab:hover {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
}
.staff-portal .sp-fab-small {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--md3-primary-container);
    color: var(--md3-on-primary-container);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
    transition: box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

/* ── MD3 Inputs ── */
.staff-portal .sp-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--md3-outline);
    background: transparent;
    color: var(--md3-on-surface);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.staff-portal .sp-input:focus {
    border-color: var(--md3-primary);
    border-width: 2px;
    padding: 11px 15px;
}
.dark .staff-portal .sp-input {
    background: transparent;
}

/* ── MD3 Chip (filter/input) ── */
.staff-portal .sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--md3-outline);
    background: transparent;
    color: var(--md3-on-surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.staff-portal .sp-chip-active {
    background: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
    border-color: transparent;
}

/* ── MD3 Ripple Effect ── */
.staff-portal .sp-ripple {
    position: relative;
    overflow: hidden;
}
.staff-portal .sp-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.12;
    transform: scale(0);
    animation: sp-ripple-anim 0.5s ease-out forwards;
    pointer-events: none;
}
@keyframes sp-ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── MD3 Bottom Sheet backdrop ── */
.staff-portal .sp-scrim {
    background: rgba(0,0,0,0.32);
}

.staff-portal .scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.staff-portal .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Story Constructor ── */
.sc-phone-frame {
    position: relative;
    border-radius: 28px;
    border: 3px solid #2a2a2e;
    background: #1a1a1e;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 140px);
    transition: width 0.25s ease, border-radius 0.25s ease;
}
.sc-phone-notch {
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a1a1e;
    flex-shrink: 0;
}
.sc-phone-notch-pill {
    width: 60px;
    height: 6px;
    background: #0d0e13;
    border-radius: 3px;
}
.sc-phone-screen {
    flex: 1;
    width: 100%;
    border: none;
    background: #0d0e13;
}
.sc-phone-home {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a1a1e;
    flex-shrink: 0;
}
.sc-phone-home-bar {
    width: 40px;
    height: 3px;
    background: #3a3a3e;
    border-radius: 2px;
}
.sc-block-item {
    -webkit-user-select: none;
    user-select: none;
}
.sc-block-item * {
    -webkit-user-select: none;
    user-select: none;
}

/* ── Sidebar Footer & Settings Popup ──────────────────────────────── */
.sidebar-footer {
    position: relative;
}


.sidebar-settings-popup {
    position: absolute;
    bottom: 100%;
    left: 4px;
    right: 4px;
    z-index: 50;
    background: var(--color-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 -4px 24px -4px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease;
    overflow: hidden;
}
.dark .sidebar-settings-popup {
    box-shadow: 0 -4px 24px -4px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
}
.sidebar-settings-popup.open {
    opacity: 1;
    transform: translateY(0);
}

.sidebar-theme-btn {
    border-color: transparent;
    color: var(--color-text-muted, #6b7280);
}
.sidebar-theme-btn-active {
    border-color: var(--color-primary, #1a73e8) !important;
    background: rgba(26, 115, 232, 0.06);
    color: var(--color-primary, #1a73e8);
}
.dark .sidebar-theme-btn-active {
    background: rgba(96, 165, 250, 0.1);
    border-color: #60a5fa !important;
    color: #60a5fa;
}
.sidebar-theme-btn-inactive {
    border-color: var(--color-border, #e5e7eb);
}
.sidebar-theme-btn-inactive:hover {
    background: rgba(0,0,0,.03);
    border-color: var(--color-border, #d1d5db);
}
.dark .sidebar-theme-btn-inactive {
    border-color: rgba(255,255,255,.1);
}
.dark .sidebar-theme-btn-inactive:hover {
    background: rgba(255,255,255,.05);
}

/* Venue Dropdown */
.venue-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-surface, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease;
    padding: 4px;
}
.dark .venue-dropdown {
    box-shadow: 0 8px 24px -4px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
}
.venue-dropdown.open {
    opacity: 1;
    transform: translateY(0);
}
.venue-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text, #3c4043);
    transition: background .1s;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
}
.venue-dropdown-item:hover {
    background: var(--color-hover, #f3f4f6);
}
.venue-dropdown-item-active {
    color: var(--color-accent, #47141d);
    font-weight: 600;
}
.venue-dropdown-item-active .ph {
    color: var(--color-accent, #47141d);
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08); border-radius: 4px; }
.dark .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }

.sidebar-devtools {
    background: rgba(239, 68, 68, 0.03);
}
.dark .sidebar-devtools {
    background: rgba(239, 68, 68, 0.05);
}

/* ── Notification Dropdown ─────────────────────────────────────────── */
.notification-dropdown {
    width: 400px;
    max-height: 70vh;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    transition: opacity .2s ease, transform .2s ease;
    background: var(--color-surface, #fff);
    display: flex;
    flex-direction: column;
}
.dark .notification-dropdown {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.notification-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.notification-dropdown-body::-webkit-scrollbar { width: 4px; }
.notification-dropdown-body::-webkit-scrollbar-track { background: transparent; }
.notification-dropdown-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }
.dark .notification-dropdown-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ── Notification Tabs ──────────────────────────────────────────────── */
.notif-tabs-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.notif-tabs-scroll::-webkit-scrollbar { display: none; }
.notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    background: transparent;
    border: 1px solid transparent;
    transition: all .15s ease;
    cursor: pointer;
}
.notif-tab:hover { background: rgba(0,0,0,.04); }
.dark .notif-tab:hover { background: rgba(255,255,255,.06); }
.notif-tab.active {
    background: rgba(59,130,246,.08);
    color: #2563eb;
    border-color: rgba(59,130,246,.15);
}
.dark .notif-tab.active {
    background: rgba(96,165,250,.12);
    color: #60a5fa;
    border-color: rgba(96,165,250,.2);
}
.notif-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    line-height: 1;
}

@media (max-width: 480px) {
    .notification-dropdown {
        width: calc(100vw - 24px);
        right: -8px;
    }
}

/* ── Staff Portal Notification Dropdown (MD3 Dialog) ──────────────── */
.sp-notif-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(400px, calc(100vw - 32px));
    max-height: 70vh;
    border-radius: 28px;
    box-shadow: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    transition: opacity .2s ease, transform .2s ease;
    background: var(--md3-surface-container-high, #EFDADB);
    display: flex;
    flex-direction: column;
    z-index: 100;
}
.dark .sp-notif-dropdown {
    background: var(--md3-surface-container-high, #312A2C);
    box-shadow: 0 8px 12px 6px rgba(0,0,0,0.3), 0 4px 4px rgba(0,0,0,0.5);
}
.sp-notif-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Global dark mode: neutral grays (override Tailwind slate-blue) ── */
.dark .border-slate-700 { border-color: #38383a; }
.dark .border-slate-600 { border-color: #38383a; }
.dark .bg-slate-900 { background-color: #1c1c1e; }
.dark .bg-slate-800 { background-color: #2c2c2e; }

/* Hide number input spinners (arrows) globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* ═══════════════════════════════════════════════════════════════
   CCTV Module — Video Surveillance UI
   Scope: .cctv-* classes
   Dark mode: .dark .cctv-* pattern (darkMode: 'class' strategy)
   ═══════════════════════════════════════════════════════════════ */

/* ── Camera Card ── */
.cctv-camera-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dark .cctv-camera-card {
    background: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.cctv-camera-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.dark .cctv-camera-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}
.cctv-camera-card:active {
    transform: scale(0.98);
}

/* 16:9 aspect ratio wrapper */
.cctv-snapshot-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9/16 */
    background: #cbd5e1;
    overflow: hidden;
}
.dark .cctv-snapshot-wrap {
    background: #0d1117;
}
.cctv-snapshot-wrap img,
.cctv-snapshot-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Camera card footer */
.cctv-camera-footer {
    padding: 8px 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.dark .cctv-camera-footer {
    background: #111827;
}

/* Camera name text in footer */
.cctv-camera-footer .cctv-camera-name {
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
    truncate: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.dark .cctv-camera-footer .cctv-camera-name {
    color: #e2e8f0;
}

/* Online/Offline dot */
.cctv-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cctv-status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    animation: cctv-pulse-green 2.5s ease-in-out infinite;
}
.cctv-status-dot.offline {
    background: #ef4444;
}

@keyframes cctv-pulse-green {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.08); }
}

/* Hover overlay with play icon */
.cctv-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
    pointer-events: none;
}
.cctv-camera-card:hover .cctv-play-overlay {
    background: rgba(0, 0, 0, 0.38);
}
.cctv-play-overlay .cctv-play-icon {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.18s ease, transform 0.18s ease;
    color: #fff;
    font-size: 48px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cctv-camera-card:hover .cctv-play-overlay .cctv-play-icon {
    opacity: 1;
    transform: scale(1);
}

/* ── Skeleton Loading ── */
.cctv-skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: cctv-shimmer 1.5s infinite;
    border-radius: 12px;
}
.dark .cctv-skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: cctv-shimmer 1.5s infinite;
}
@keyframes cctv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Group Section ── */
.cctv-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.dark .cctv-group-header {
    border-bottom-color: rgba(255,255,255,0.08);
}
.cctv-group-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.01em;
}
.dark .cctv-group-title {
    color: #f1f5f9;
}
.cctv-group-count {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    padding: 1px 7px;
    background: #f1f5f9;
    border-radius: 20px;
}
.dark .cctv-group-count {
    background: rgba(255,255,255,0.07);
    color: #94a3b8;
}

/* ── Camera Grid ── */
.cctv-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .cctv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cctv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .cctv-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Live Modal Overlay ── */
/* Modal backdrop и само видео-окно намеренно тёмные в обеих темах —
   это видеоплеер, тёмный фон технически необходим для просмотра. */
.cctv-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}
.cctv-modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

/* Modal box */
.cctv-modal {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    transform: scale(0.95) translateY(12px);
    transition: transform 0.22s ease;
    box-shadow: 0 32px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.06);
}
.dark .cctv-modal {
    background: #0f1117;
    box-shadow: 0 32px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}
.cctv-modal-backdrop.open .cctv-modal {
    transform: scale(1) translateY(0);
}

/* Modal header */
.cctv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    color: #1e293b;
}
.dark .cctv-modal-header {
    border-bottom-color: rgba(255,255,255,0.08);
    color: #f1f5f9;
}

/* Modal video area */
.cctv-modal-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #e2e8f0;
    flex-shrink: 0;
}
.dark .cctv-modal-video-wrap {
    background: #000;
}
.cctv-modal-video-wrap video,
.cctv-modal-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Stream status overlay (connecting / error) */
.cctv-stream-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(226,232,240,0.85);
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.dark .cctv-stream-status {
    background: rgba(0,0,0,0.72);
    color: #fff;
}
.cctv-stream-status.hidden-status {
    opacity: 0;
    pointer-events: none;
}

/* Countdown badge */
.cctv-countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0,0,0,0.07);
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.dark .cctv-countdown-badge {
    background: rgba(255,255,255,0.1);
    color: #94a3b8;
    border-color: rgba(255,255,255,0.08);
}
.cctv-countdown-badge.warning {
    background: rgba(234, 179, 8, 0.1);
    color: #b45309;
    border-color: rgba(234, 179, 8, 0.3);
}
.dark .cctv-countdown-badge.warning {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
    border-color: rgba(234, 179, 8, 0.25);
}

/* Live / Archive toggle pill */
.cctv-mode-toggle {
    display: inline-flex;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 3px;
    gap: 2px;
}
.dark .cctv-mode-toggle {
    background: rgba(255,255,255,0.07);
}
.cctv-mode-btn {
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.dark .cctv-mode-btn {
    color: #94a3b8;
}
.cctv-mode-btn.active {
    background: #dbeafe;
    color: #1d4ed8;
}
.dark .cctv-mode-btn.active {
    background: #1e3a5f;
    color: #60a5fa;
}

/* ── Archive / Timeline ── */
.cctv-archive-panel {
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.dark .cctv-archive-panel {
    border-top-color: rgba(255,255,255,0.06);
    background: #0c101a;
}

/* Date picker row */
.cctv-date-input {
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
    color-scheme: light;
}
.dark .cctv-date-input {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: #e2e8f0;
    color-scheme: dark;
}
.cctv-date-input:focus {
    border-color: #3b82f6;
}

/* Timeline bar container */
.cctv-timeline-wrap {
    position: relative;
    height: 36px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    margin-top: 10px;
}
.dark .cctv-timeline-wrap {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.07);
}

/* Timeline segments (recordings) */
.cctv-timeline-segment {
    position: absolute;
    top: 5px;
    height: calc(100% - 10px);
    border-radius: 3px;
    pointer-events: none;
    transition: filter 0.15s ease;
}
.cctv-timeline-segment.recording {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    opacity: 0.85;
}
.cctv-timeline-segment.motion {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    opacity: 0.8;
}

/* Playback cursor (red marker) */
.cctv-timeline-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    pointer-events: none;
    z-index: 2;
    transition: left 0.1s linear;
}
.cctv-timeline-cursor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

/* Timeline hover tooltip */
.cctv-timeline-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.dark .cctv-timeline-tooltip {
    background: #0f172a;
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}
.cctv-timeline-wrap:hover .cctv-timeline-tooltip {
    opacity: 1;
}

/* Timeline hour ticks */
.cctv-timeline-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
    pointer-events: none;
}
.dark .cctv-timeline-tick {
    background: rgba(255,255,255,0.08);
}
.cctv-timeline-tick-label {
    position: absolute;
    bottom: 2px;
    font-size: 9px;
    color: #94a3b8;
    transform: translateX(-50%);
    pointer-events: none;
    letter-spacing: 0.02em;
}
.dark .cctv-timeline-tick-label {
    color: #475569;
}

/* Playback time display */
.cctv-playback-time {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    letter-spacing: 0.03em;
}
.dark .cctv-playback-time {
    color: #94a3b8;
}
.cctv-playback-time.playing {
    color: #2563eb;
}
.dark .cctv-playback-time.playing {
    color: #60a5fa;
}

/* ── Admin Tabs ── */
.cctv-admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.cctv-admin-tab:hover {
    background: #f3f4f6;
    color: #374151;
}
.dark .cctv-admin-tab:hover {
    background: rgba(255,255,255,0.06);
    color: #d1d5db;
}
.cctv-admin-tab.active {
    background: #eff6ff;
    color: #2563eb;
}
.dark .cctv-admin-tab.active {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

/* ── Camera Table (Admin) ── */
.cctv-table {
    width: 100%;
    border-collapse: collapse;
}
.cctv-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
}
.dark .cctv-table th {
    color: #6b7280;
    border-bottom-color: rgba(255,255,255,0.07);
}
.cctv-table td {
    padding: 10px 12px;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.dark .cctv-table td {
    color: #d1d5db;
    border-bottom-color: rgba(255,255,255,0.04);
}
.cctv-table tr:hover td {
    background: #f9fafb;
}
.dark .cctv-table tr:hover td {
    background: rgba(255,255,255,0.03);
}
.cctv-table tr:last-child td {
    border-bottom: none;
}

/* Inline rename input */
.cctv-inline-input {
    background: #fff;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    width: 180px;
}
.dark .cctv-inline-input {
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
}

/* Enabled toggle */
.cctv-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.cctv-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.cctv-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #d1d5db;
    transition: background 0.2s ease;
    cursor: pointer;
}
.dark .cctv-toggle-track {
    background: #374151;
}
.cctv-toggle input:checked + .cctv-toggle-track {
    background: #2563eb;
}
.cctv-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cctv-toggle input:checked ~ .cctv-toggle-thumb {
    transform: translateX(16px);
}

/* ── Group Row (Admin) ── */
.cctv-group-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: background 0.15s ease;
}
.dark .cctv-group-row {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
.cctv-group-row:hover {
    background: #f3f4f6;
}
.dark .cctv-group-row:hover {
    background: rgba(255,255,255,0.05);
}
.cctv-drag-handle {
    color: #9ca3af;
    cursor: grab;
    padding-top: 2px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.dark .cctv-drag-handle {
    color: #4b5563;
}
.cctv-group-row:hover .cctv-drag-handle {
    color: #6b7280;
}
.cctv-drag-handle:active {
    cursor: grabbing;
}


/* ── Sync button spinner state ── */
.cctv-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dark .cctv-sync-btn {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.2);
}
.cctv-sync-btn:hover {
    background: #dbeafe;
}
.dark .cctv-sync-btn:hover {
    background: rgba(59, 130, 246, 0.2);
}
.cctv-sync-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.cctv-sync-btn .cctv-spin {
    animation: cctv-rotate 0.9s linear infinite;
}
@keyframes cctv-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Offline Camera overlay ── */
.cctv-offline-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
}
.cctv-offline-overlay .ph {
    font-size: 28px;
    color: #6b7280;
}

/* ── Responsive modal adjustments ── */
@media (max-width: 640px) {
    .cctv-modal {
        border-radius: 12px;
        max-height: calc(100dvh - 24px);
    }
    .cctv-modal-header {
        padding: 10px 12px;
    }
    .cctv-archive-panel {
        padding: 10px 12px;
    }
    .cctv-mode-btn {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* ── Tab content fade transition ── */
.cctv-tab-content {
    animation: cctv-fade-in 0.18s ease;
}
@keyframes cctv-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ── */
.cctv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: #6b7280;
    text-align: center;
}
.dark .cctv-empty {
    color: #4b5563;
}
.cctv-empty .ph {
    font-size: 48px;
    color: #9ca3af;
}
.dark .cctv-empty .ph {
    color: #374151;
}

/* ── Error state banner ── */
.cctv-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 13px;
}
.dark .cctv-error-banner {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ── Exports Panel (slide-over) ── */
.cctv-exports-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.cctv-exports-overlay.open {
    pointer-events: auto;
}
.cctv-exports-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}
.cctv-exports-overlay.open .cctv-exports-backdrop {
    background: rgba(0, 0, 0, 0.3);
}
.dark .cctv-exports-overlay.open .cctv-exports-backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.cctv-exports-panel {
    position: relative;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.dark .cctv-exports-panel {
    background: #111827;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}
.cctv-exports-overlay.open .cctv-exports-panel {
    transform: translateX(0);
}
.cctv-export-item {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.dark .cctv-export-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
.cctv-export-item:last-child {
    border-bottom: none;
}

/* ── Access Chips ── */
.cctv-access-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.dark .cctv-access-chip {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.1);
}
.cctv-access-chip:hover {
    background: #e5e7eb;
}
.dark .cctv-access-chip:hover {
    background: rgba(255, 255, 255, 0.1);
}
.cctv-access-chip.active {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}
.dark .cctv-access-chip.active {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}
.cctv-access-chip.active:hover {
    background: #bfdbfe;
}
.dark .cctv-access-chip.active:hover {
    background: rgba(59, 130, 246, 0.3);
}
.cctv-access-chip-static {
    cursor: default;
}
.cctv-access-chip-static:hover {
    background: #dbeafe;
}
.dark .cctv-access-chip-static:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* ── Zoom Badge ── */
.cctv-zoom-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: #e0e7ff;
    color: #4338ca;
    letter-spacing: 0.02em;
}
.dark .cctv-zoom-badge {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

/* ── Export Markers & Range ── */
.cctv-export-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #3b82f6;
    cursor: ew-resize;
    z-index: 10;
}
.cctv-export-marker::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.dark .cctv-export-marker::after {
    border-color: #1e293b;
}
.cctv-export-marker .cctv-export-marker-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 22px;
    cursor: ew-resize;
}
.cctv-export-range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.15);
    pointer-events: none;
    z-index: 5;
}
.dark .cctv-export-range {
    background: rgba(59, 130, 246, 0.2);
}

/* ── Export Info Bar ── */
.cctv-export-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-size: 12px;
}
.dark .cctv-export-info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}
.cctv-export-info.invalid {
    background: #fef2f2;
    border-color: #fecaca;
}
.dark .cctv-export-info.invalid {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ── Export Progress Bar ── */
.cctv-export-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    overflow: hidden;
    flex: 1;
}
.dark .cctv-export-progress-bar {
    background: rgba(255,255,255,0.08);
}
.cctv-export-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    transition: width 0.4s ease;
}

/* ── Export Done ── */
.cctv-export-done {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.dark .cctv-export-done {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
}

/* Timeline no-overflow in zoom mode (allow markers to extend) */
.cctv-timeline-wrap.zoomed {
    overflow: visible;
}

/* Export mode timeline prevents seek on click */
.cctv-timeline-wrap.export-mode {
    cursor: default;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — hub hero (Аналитика Frime + inline summary)
   ────────────────────────────────────────────────────────────────────── */

.reports-hero-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.reports-hero-title { min-width: 220px; flex: 0 0 auto; }
.reports-hero-heading {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--f-text);
}
.reports-hero-sub {
    font-size: 12px;
    color: var(--f-text-muted);
    margin-top: 2px;
}

.reports-hub-summary {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex: 1 1 auto;
    margin-left: auto;
    padding-left: 24px;
    border-left: 1px solid var(--f-divider);
    min-height: 56px;
}
.reports-hub-summary-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 110px;
}
.reports-hub-summary-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}
.reports-hub-summary-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: 2px;
}
.reports-hub-summary-delta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 14px;
}
.reports-hub-summary-extra {
    font-size: 11px;
    color: var(--f-text-subtle);
}
.reports-hub-summary-skel {
    width: 110px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--f-surface-alt) 0%, var(--f-surface-sunken) 50%, var(--f-surface-alt) 100%);
    background-size: 200% 100%;
    animation: reports-skel-shimmer 1.4s linear infinite;
}
@keyframes reports-skel-shimmer {
    to { background-position: -200% 0; }
}
.reports-hub-summary-err {
    color: var(--f-text-subtle);
    font-size: 12px;
}

@media (max-width: 900px) {
    .reports-hub-summary {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        flex-basis: 100%;
        gap: 20px;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — active filter chip
   ────────────────────────────────────────────────────────────────────── */

.f-chip[data-active="1"] {
    background: var(--f-accent-soft);
    border-color: var(--f-accent-soft);
    color: var(--f-accent);
}
.f-chip[data-active="1"] .f-chip-value { color: var(--f-accent); font-weight: 600; }
.f-chip[data-active="1"] .ph { color: var(--f-accent) !important; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — loading overlay (in-report refresh indicator)
   ────────────────────────────────────────────────────────────────────── */

.reports-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: color-mix(in srgb, var(--f-bg) 70%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 25;
    pointer-events: all;
    animation: reports-overlay-in .14s ease-out;
}
.reports-loading-overlay[data-variant="pill"] {
    /* плашка по центру сверху поверх контента — видно, но не скрывает
       данные снизу (пользователь сохраняет контекст) */
    inset: 12px auto auto 50%;
    transform: translateX(-50%);
    padding: 10px 18px 10px 14px;
    flex-direction: row;
    justify-content: center;
    height: fit-content;
    background: var(--f-surface);
    border: 1.5px solid var(--f-accent);
    border-radius: 999px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .18), 0 2px 6px -2px rgba(0, 0, 0, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 40;
    animation: reports-pill-in .18s cubic-bezier(.2,.9,.2,1);
}
.reports-loading-overlay[data-variant="pill"] .reports-loading-text {
    color: var(--f-text);
    font-weight: 500;
}
@keyframes reports-pill-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.reports-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--f-border);
    border-top-color: var(--f-accent);
    border-radius: 50%;
    animation: reports-spin .8s linear infinite;
}
.reports-loading-overlay[data-variant="pill"] .reports-loading-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
.reports-loading-text {
    color: var(--f-text-subtle);
    font-size: 13px;
    font-weight: 500;
}
@keyframes reports-spin {
    to { transform: rotate(360deg); }
}
@keyframes reports-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Пока отчёт обновляется — блокируем фильтр-кнопки, чтобы повторный
   клик не менял state и не рассинхронизировал UI с данными. */
[data-reports-loading="1"] .abc-controls,
[data-reports-loading="1"] .stock-search,
[data-reports-loading="1"] .abc-card-head .stock-search {
    pointer-events: none;
    opacity: .55;
    transition: opacity .15s;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — popover (venue picker, sections dropdown)
   ────────────────────────────────────────────────────────────────────── */

.reports-popover {
    position: absolute;
    min-width: 220px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    box-shadow: var(--f-shadow);
    padding: 8px;
    z-index: 40;
}
.reports-popover-wide { min-width: 280px; }
.reports-popover-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    padding: 4px 8px 6px;
}
.reports-popover-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.reports-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--f-text);
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.reports-popover-item:hover { background: var(--f-surface-alt); }
.reports-popover-item.active { background: var(--f-accent-soft); color: var(--f-accent); font-weight: 500; }
.reports-popover-sep {
    height: 1px;
    background: var(--f-divider);
    margin: 4px 2px;
}

/* Bounded popover: fixed height with an internal scroll area (for long option lists) */
.reports-popover-scroll {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    padding: 8px 8px 0;
}
.reports-popover-list-scroll {
    overflow-y: auto;
    max-height: 280px;
    padding-bottom: 8px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
}
.reports-popover-search {
    position: relative;
    padding: 2px 6px 8px;
}
.reports-popover-search input {
    width: 100%;
    font-family: inherit;
    font-size: 12px;
    padding: 6px 10px 6px 28px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface-alt);
    color: var(--f-text);
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.reports-popover-search input::placeholder { color: var(--f-text-placeholder); }
.reports-popover-search input:focus {
    outline: none;
    background: var(--f-surface);
    border-color: var(--f-accent);
    box-shadow: var(--f-ring);
}
.reports-popover-search .ph {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--f-text-subtle);
    pointer-events: none;
}
.reports-popover-empty {
    padding: 20px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--f-text-subtle);
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — hub grid
   ────────────────────────────────────────────────────────────────────── */

.reports-hub-grid {
    display: grid;
    gap: 1px;
    background: var(--f-divider);
}
.reports-hub-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--f-surface);
    text-decoration: none;
    color: var(--f-text);
    cursor: pointer;
    transition: background .15s;
}
.reports-hub-tile:hover { background: var(--f-surface-alt); }

/* ──────────────────────────────────────────────────────────────────────
   Reports — shared v2 primitives (KPI, badges, tables, tone colors)
   ────────────────────────────────────────────────────────────────────── */

.reports-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
/* В sub-report flex-column #reports-content gap уже даёт отступ — margin
   приводил к двойному 24px. */
#reports-content > .reports-kpi-row { margin-bottom: 0; }
@media (max-width: 900px) {
    .reports-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.reports-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    box-shadow: var(--f-shadow-sm);
}

/* Пилюля-фильтр (Гости: место приготовления и т.п.) */
.guests-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--f-border);
    border-radius: 999px;
    background: var(--f-surface);
    color: var(--f-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.guests-pill:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}
.guests-pill--active {
    background: var(--f-accent);
    color: var(--f-accent-on);
    border-color: var(--f-accent);
}
.guests-pill--active:hover {
    background: var(--f-accent-hover);
    color: var(--f-accent-on);
}
.guests-pills-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.reports-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--f-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reports-kpi-icon .ph { font-size: 18px; color: var(--f-text-subtle); }
.reports-kpi[data-tone="success"] .reports-kpi-icon .ph { color: var(--f-success); }
.reports-kpi[data-tone="warning"] .reports-kpi-icon .ph { color: var(--f-warning); }
.reports-kpi[data-tone="danger"]  .reports-kpi-icon .ph { color: var(--f-danger); }
.reports-kpi[data-tone="info"]    .reports-kpi-icon .ph { color: var(--f-info); }
.reports-kpi[data-tone="accent"]  .reports-kpi-icon .ph { color: var(--f-accent); }
.reports-kpi-label {
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 500;
}
.reports-kpi-value {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 2px;
}

/* Pill badge used in report tables (group labels AA / AB / …) */
.reports-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}
.reports-badge[data-tone="success"] { background: var(--f-success-soft); color: var(--f-success); }
.reports-badge[data-tone="warning"] { background: var(--f-warning-soft); color: var(--f-warning); }
.reports-badge[data-tone="danger"]  { background: var(--f-danger-soft);  color: var(--f-danger); }
.reports-badge[data-tone="info"]    { background: var(--f-info-soft);    color: var(--f-info); }
.reports-badge[data-tone="accent"]  { background: var(--f-accent-soft);  color: var(--f-accent); }

/* Compact v2 data table */
.reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.reports-table thead th {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 10px;
    color: var(--f-text-subtle);
    padding: 10px 10px;
    border-bottom: 1px solid var(--f-divider);
    background: var(--f-surface);
    position: sticky;
    top: 0;
    z-index: 1;
}
.reports-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text);
}
/* Hard guard: hidden attribute must always hide <tr>. Some UA/CSS combos lose
   this at the table-row level (особенно в Safari внутри max-height wrap). */
.reports-table tr[hidden],
.reports-table tbody tr[hidden] { display: none !important; }
.reports-table tbody tr:hover td { background: var(--f-surface-alt); }
.reports-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.reports-table .center { text-align: center; }
.reports-table .muted { color: var(--f-text-subtle); }
.reports-table .mono { font-variant-numeric: tabular-nums; }
.reports-table .nowrap-ellipsis {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.reports-table .tone-success { color: var(--f-success); font-weight: 600; }
.reports-table .tone-warning { color: var(--f-warning); font-weight: 600; }
.reports-table .tone-danger  { color: var(--f-danger); font-weight: 600; }

.reports-table a.abc-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--f-accent);
    background: transparent;
    text-decoration: none;
    transition: background .15s;
}
.reports-table a.abc-cat-link:hover { background: var(--f-accent-soft); }
.reports-table a.abc-cat-link .ph { font-size: 12px; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — ABC-specific controls + matrix
   ────────────────────────────────────────────────────────────────────── */

.abc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    box-shadow: var(--f-shadow-sm);
    margin-bottom: 12px;
}
.abc-ctrl-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.abc-ctrl-label {
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}

/* Segmented control (Type, Mode) */
.abc-seg {
    display: inline-flex;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--f-surface);
}
.abc-seg button {
    background: transparent;
    border: 0;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--f-text-muted);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    white-space: nowrap;
}
.abc-seg button + button { border-left: 1px solid var(--f-divider); }
.abc-seg button:hover { background: var(--f-surface-alt); color: var(--f-text); }
.abc-seg button.active {
    background: var(--f-accent-soft);
    color: var(--f-accent);
    font-weight: 600;
}
.abc-seg button .ph { font-size: 14px; }

/* v2 select trigger (used for Categories in ABC and similar) */
.abc-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    color: var(--f-text);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    height: 28px;
    min-width: 170px;
    max-width: 320px;
    transition: border-color .15s, background .15s;
}
.abc-select:hover { border-color: var(--f-border-strong); }
.abc-select .abc-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 500;
}
.abc-select .ph {
    font-size: 14px;
    color: var(--f-text-subtle);
    flex-shrink: 0;
}

/* Stacked bar chart (ABC simple mode, potentially reused) */
.abc-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.abc-bar-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.abc-bar-total-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
}
.abc-bar-total-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
}
.abc-bar {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
}
.abc-bar-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    min-width: 2px;
    transition: filter .15s;
}
.abc-bar-seg + .abc-bar-seg { border-left: 1px solid rgba(255, 255, 255, .4); }
.abc-bar-seg:hover { filter: brightness(1.06); }
.abc-bar-seg[data-tone="success"] { background: var(--f-success); }
.abc-bar-seg[data-tone="warning"] { background: var(--f-warning); }
.abc-bar-seg[data-tone="danger"]  { background: var(--f-danger); }
.abc-bar-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.abc-bar-legend-item {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--f-divider);
}
.abc-bar-legend-item:last-child { border-bottom: 0; }
.abc-bar-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    align-self: center;
}
.abc-bar-legend-item[data-tone="success"] .abc-bar-legend-dot { background: var(--f-success); }
.abc-bar-legend-item[data-tone="warning"] .abc-bar-legend-dot { background: var(--f-warning); }
.abc-bar-legend-item[data-tone="danger"]  .abc-bar-legend-dot { background: var(--f-danger); }
.abc-bar-legend-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    color: var(--f-text);
    font-weight: 500;
}
.abc-bar-legend-count { font-size: 11px; color: var(--f-text-subtle); font-weight: 400; }
.abc-bar-legend-value {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.abc-bar-legend-pct {
    font-size: 11px;
    color: var(--f-text-subtle);
    font-weight: 500;
}

/* Group-filter pills (Все / AA / AB / …) */
.abc-group-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.abc-group-btns button {
    background: transparent;
    border: 1px solid var(--f-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--f-text-muted);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: all .15s;
    height: 24px;
}
.abc-group-btns button:hover { background: var(--f-surface-alt); color: var(--f-text); }
.abc-group-btns button.active {
    background: var(--f-accent);
    color: var(--f-accent-on);
    border-color: var(--f-accent);
}

/* Two-column layout for matrix + table */
.abc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: start;
}
@media (max-width: 1100px) {
    .abc-layout { grid-template-columns: 1fr; }
}
.abc-card {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 12px;
    box-shadow: var(--f-shadow-sm);
    overflow: hidden;
}
.abc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-divider);
    position: relative;
}
.abc-card-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    letter-spacing: -0.1px;
}
.abc-card-body { padding: 14px; }
.abc-table-wrap { max-height: 500px; overflow: auto; }

.abc-icon-btn {
    background: transparent;
    border: 0;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--f-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.abc-icon-btn:hover { background: var(--f-surface-alt); color: var(--f-text); }
.abc-icon-btn .ph { font-size: 16px; }

.abc-threshold-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 14px;
    width: 240px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    box-shadow: var(--f-shadow);
    z-index: 30;
    overflow: hidden;
}
.abc-threshold-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--f-divider);
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}
.abc-threshold-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.abc-threshold-body label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--f-text-muted);
}
.abc-threshold-body input {
    font-family: inherit;
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface);
    color: var(--f-text);
}
.abc-threshold-body input:focus {
    outline: none;
    border-color: var(--f-accent);
    box-shadow: var(--f-ring);
}
.abc-threshold-body p { font-size: 10px; color: var(--f-text-subtle); margin: 0; }
.abc-threshold-actions { display: flex; gap: 6px; }
.abc-btn-primary, .abc-btn-ghost {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}
.abc-btn-primary { background: var(--f-accent); color: var(--f-accent-on); border-color: var(--f-accent); flex: 1; }
.abc-btn-primary:hover { background: var(--f-accent-hover); }
.abc-btn-ghost { background: transparent; color: var(--f-text-muted); border-color: var(--f-border); }
.abc-btn-ghost:hover { background: var(--f-surface-alt); color: var(--f-text); }

/* Matrix grid */
.abc-matrix-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 6px;
    min-width: 320px;
}
.abc-matrix-col-head {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    text-align: center;
    padding: 4px 0;
}
.abc-matrix-row-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    white-space: nowrap;
}
.abc-matrix-row-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--f-text-subtle);
    font-size: 10px;
}
.abc-matrix-cell {
    padding: 14px 8px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    border: 1px solid transparent;
    background: var(--f-surface-alt);
}
.abc-matrix-cell:hover {
    transform: translateY(-1px);
    box-shadow: var(--f-shadow-sm);
}
.abc-matrix-cell[data-tone="success"] { background: var(--f-success-soft); color: var(--f-success); }
.abc-matrix-cell[data-tone="warning"] { background: var(--f-warning-soft); color: var(--f-warning); }
.abc-matrix-cell[data-tone="danger"]  { background: var(--f-danger-soft);  color: var(--f-danger); }
.abc-matrix-cell.active { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.abc-matrix-cell-count { font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.abc-matrix-cell-label { font-size: 10px; font-weight: 500; color: var(--f-text-muted); margin-top: 3px; line-height: 1.2; }
.abc-matrix-cell[data-tone="success"] .abc-matrix-cell-label,
.abc-matrix-cell[data-tone="warning"] .abc-matrix-cell-label,
.abc-matrix-cell[data-tone="danger"]  .abc-matrix-cell-label { color: inherit; opacity: .85; }
.abc-matrix-hint { font-size: 10px; color: var(--f-text-subtle); margin: 10px 0 0; }
.abc-matrix-empty { font-size: 12px; color: var(--f-text-subtle); }

/* KPI sub-text (used when KPI has a secondary line under value) */
.reports-kpi-sub {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Stock Balance (Остатки)
   ────────────────────────────────────────────────────────────────────── */

/* "По всем складам" toggle (acts like a toggle chip) */
.stock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface);
    color: var(--f-text-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    height: 28px;
    transition: background .15s, border-color .15s, color .15s;
}
.stock-toggle:hover { border-color: var(--f-border-strong); color: var(--f-text); }
.stock-toggle.active {
    background: var(--f-accent-soft);
    border-color: color-mix(in srgb, var(--f-accent) 30%, transparent);
    color: var(--f-accent);
    font-weight: 600;
}
.stock-toggle .ph { font-size: 14px; }

.stock-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface);
    height: 28px;
    width: 240px;
    transition: border-color .15s, background .15s;
}
.stock-search:focus-within {
    border-color: var(--f-accent);
    box-shadow: var(--f-ring);
}
.stock-search .ph {
    font-size: 14px;
    color: var(--f-text-subtle);
    flex-shrink: 0;
}
.stock-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: var(--f-text);
}
.stock-search input::placeholder { color: var(--f-text-placeholder); }

/* Stock layout: fills the remaining vertical space so the items table owns the
   scroll. Needs `.reports-subreport--full` on the parent to take over full height. */
.stock-layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    min-height: 320px;
}
@media (max-width: 1100px) {
    .stock-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
}

/* Full-height subreport mode: the outer page stops scrolling, internal blocks scroll.
   Used by Остатки (stock). Cleared automatically on hashchange — the DOM is re-rendered. */
.reports-subreport--full {
    height: 100%;
    min-height: 0;
}
/* Базовый flex-column + gap для содержимого sub-report. Применяется и в
   обычном режиме (scroll) и в --full. Даёт равный 12px gap между
   KPI-row и карточками, независимо от их margin. */
#reports-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reports-subreport--full #reports-content {
    flex: 1 1 auto;
    min-height: 0;
}
.reports-subreport--full .reports-kpi-row,
.reports-subreport--full .abc-controls { flex-shrink: 0; }
.reports-subreport--full .stock-layout {
    flex: 1 1 auto;
    min-height: 0;
}
/* When a report (like Движения · per-product) puts .stock-items-card as a direct
   #reports-content child, make it own the remaining vertical space. */
.reports-subreport--full #reports-content > .stock-items-card {
    flex: 1 1 auto;
    min-height: 0;
}

.stock-groups-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.stock-items-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.stock-items-card .abc-card-head { flex-shrink: 0; }
.stock-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.stock-groups-total {
    font-size: 11px;
    color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.stock-groups-reset {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--f-accent);
    background: var(--f-accent-soft);
    cursor: pointer;
    user-select: none;
    margin-right: auto;
    margin-left: 8px;
}
.stock-groups-reset:hover { filter: brightness(0.97); }
.stock-groups-reset .ph { font-size: 12px; }
.stock-groups-reset[hidden] { display: none; }

.stock-groups-list {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.stock-group-row {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    border: 1px solid transparent;
}
.stock-group-row:hover { background: var(--f-surface-alt); }
.stock-group-row.active {
    background: var(--f-accent-soft);
    border-color: color-mix(in srgb, var(--f-accent) 30%, transparent);
}
.stock-group-row.active .stock-group-name { color: var(--f-accent); font-weight: 600; }
.stock-group-row.active .stock-group-bar-fill { background: var(--f-accent); }
.stock-group-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}
.stock-group-name { color: var(--f-text); }
.stock-group-row-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}
.stock-group-bar-track {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--f-surface-alt);
    overflow: hidden;
}
.stock-group-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--f-accent);
}
.stock-group-row-meta {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stock-legend {
    padding: 10px 14px;
    border-top: 1px solid var(--f-divider);
    background: var(--f-surface-alt);
    flex-shrink: 0;
}
.stock-legend-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    margin-bottom: 6px;
}
.stock-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
    font-size: 11px;
}
.stock-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.stock-legend-emoji { flex-shrink: 0; }
.stock-legend-label { font-weight: 500; }
.stock-legend-label[data-tone="success"] { color: var(--f-success); }
.stock-legend-label[data-tone="info"]    { color: var(--f-info); }
.stock-legend-label[data-tone="warning"] { color: var(--f-warning); }
.stock-legend-label[data-tone="danger"]  { color: var(--f-danger); }
.stock-legend-hint { color: var(--f-text-subtle); font-size: 10px; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — Динамика (Trend)
   ────────────────────────────────────────────────────────────────────── */

.trend-chart-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.trend-chart-card .abc-card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.reports-subreport--full #reports-content > .trend-chart-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Food Cost (categories)
   ────────────────────────────────────────────────────────────────────── */

.fc-places-card { flex-shrink: 0; }
.fc-places-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    padding: 12px 14px;
}
.fc-place-card {
    padding: 14px;
    border: 1px solid var(--f-border);
    border-radius: 12px;
    background: var(--f-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.fc-place-card:hover {
    border-color: var(--f-accent);
    box-shadow: var(--f-shadow-sm);
}
.fc-place-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fc-place-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fc-place-icon .ph { font-size: 20px; color: var(--f-accent); }
.fc-place-title { flex: 1; min-width: 0; }
.fc-place-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-place-sub { font-size: 10.5px; color: var(--f-text-subtle); margin-top: 1px; }
.fc-place-chevron { color: var(--f-text-subtle); font-size: 16px !important; flex-shrink: 0; }
.fc-place-card:hover .fc-place-chevron { color: var(--f-accent); }
.fc-place-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}
.fc-place-cost {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    height: 22px;
}
.fc-place-meta {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.fc-place-bar {
    height: 3px;
    background: var(--f-surface-alt);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 10px;
}
.fc-place-bar-fill { height: 100%; background: var(--f-accent); border-radius: 2px; }

.fc-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;  /* компактные card, не растягиваются */
}
@media (max-width: 1100px) {
    .fc-layout { grid-template-columns: 1fr; }
}
.fc-layout > .abc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.fc-layout > .stock-items-card {
    max-height: 640px;  /* детализация с прокруткой */
}

/* Horizontal bars — v2 style (accent color, compact height) */
.fc-chart-body {
    padding: 10px 14px 14px;
}
.fc-bars-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fc-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.fc-bar-label {
    color: var(--f-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-bar-track {
    position: relative;
    height: 20px;
    background: var(--f-surface-alt);
    border-radius: 6px;
    overflow: hidden;
}
.fc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--f-accent-soft) 0%, var(--f-accent) 100%);
    border-radius: 6px 0 0 6px;
    transition: width .25s ease;
}
.fc-bar-value {
    color: var(--f-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
    display: flex;
    align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Matrix (Матрица продуктов, v2)
   ────────────────────────────────────────────────────────────────────── */

.matrix-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    position: relative;
}

.matrix-filter-seg {
    display: flex;
    gap: 1px;
    padding: 3px;
    background: var(--f-surface-alt);
    border-radius: 8px;
}
.matrix-filter-seg button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--f-text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.matrix-filter-seg button:hover { color: var(--f-text); }
.matrix-filter-seg button.active {
    background: var(--f-surface);
    color: var(--f-accent);
    box-shadow: var(--f-shadow-sm);
}
.matrix-filter-seg button .ph { font-size: 13px; }

.matrix-groups-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--f-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-groups-popover {
    width: 280px;
    max-height: 400px;
}
.matrix-groups-popover .reports-popover-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.matrix-groups-reset {
    color: var(--f-accent);
    background: transparent;
    border: none;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.matrix-groups-popover .reports-popover-list {
    max-height: 320px;
    overflow: auto;
}
.matrix-groups-popover .reports-popover-item input[type="checkbox"] {
    accent-color: var(--f-accent);
    cursor: pointer;
}

.matrix-row td { padding: 8px 12px; }
.matrix-row-unused { background: var(--f-danger-soft); }
.matrix-row-unused:hover { background: color-mix(in oklch, var(--f-danger-soft) 80%, var(--f-danger) 20%); }

.matrix-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--f-accent);
    background: var(--f-accent-soft);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.matrix-expand-btn:hover { background: color-mix(in oklch, var(--f-accent-soft) 60%, var(--f-accent) 40%); color: #fff; }
.matrix-expand-btn .expand-arrow { font-size: 14px; }

.matrix-detail-row td { padding: 0; background: var(--f-surface-alt); }
.matrix-detail-wrap {
    padding: 12px 16px;
    border-top: 1px solid var(--f-divider);
}
.matrix-detail-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--f-text-subtle);
    margin-bottom: 8px;
}

.matrix-tree-node { display: flex; flex-direction: column; gap: 2px; }
.matrix-tree-line {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 11px;
}
.matrix-tree-connector { color: var(--f-text-subtle); margin-right: 2px; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — P&L (Прибыли и убытки, v2)
   ────────────────────────────────────────────────────────────────────── */

.pnl-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pnl-table-wrap {
    overflow: auto;
    max-height: 560px;
}
.pnl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.pnl-table thead th {
    position: sticky;
    top: 0;
    background: var(--f-surface);
    z-index: 2;
    padding: 10px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    border-bottom: 1px solid var(--f-divider);
    text-align: left;
    white-space: nowrap;
}
.pnl-table thead th.num { text-align: right; }
.pnl-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--f-divider-soft, var(--f-divider));
    color: var(--f-text);
    vertical-align: middle;
}
.pnl-table .pnl-section-name {
    position: sticky;
    left: 0;
    background: var(--f-surface);
    z-index: 1;
    font-weight: 600;
    min-width: 180px;
}

.pnl-section-row {
    cursor: pointer;
    transition: background .12s;
}
.pnl-section-row:hover td { background: var(--f-surface-alt); }
.pnl-section-row .pnl-section-name {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pnl-arrow {
    font-size: 16px !important;
    transition: transform .18s;
    color: var(--f-text-subtle);
}
.pnl-arrow-spacer { display: inline-block; width: 16px; }
.pnl-section-row.pnl-open .pnl-arrow {
    transform: rotate(90deg);
    color: var(--f-accent);
}

.pnl-item-row td {
    background: var(--f-surface-alt);
    font-size: 11.5px;
}
.pnl-item-row .pnl-section-name {
    padding-left: 36px;
    font-weight: 400;
    color: var(--f-text-muted);
    background: var(--f-surface-alt);
}

.pnl-total-row td {
    background: var(--f-surface-alt);
    border-top: 1px solid var(--f-border);
    border-bottom: 2px solid var(--f-border);
    font-weight: 600;
}
.pnl-total-row--big td {
    background: color-mix(in oklch, var(--f-surface-alt) 70%, var(--f-accent-soft) 30%);
    font-size: 13px;
}
.pnl-total-row .pnl-section-name {
    background: inherit;
}

.pnl-spacer td {
    padding: 2px 0;
    border: none;
    background: transparent;
}

.pnl-col-period { color: var(--f-text-muted); }
.pnl-col-budget { color: var(--f-info); background: color-mix(in oklch, var(--f-surface) 85%, var(--f-info-soft, var(--f-info)) 15%); }
.pnl-total { font-weight: 600; }

.pnl-table td.num, .pnl-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Margin indicators */
.pnl-margins-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.pnl-margin-card { padding: 14px 18px; text-align: center; }
.pnl-margin-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    font-weight: 600;
    margin-bottom: 4px;
}
.pnl-margin-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

/* By place */
.pnl-places-card { display: flex; flex-direction: column; overflow: hidden; }
.pnl-places-list { display: flex; flex-direction: column; gap: 12px; }
.pnl-place-row {}
.pnl-place-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.pnl-place-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--f-text);
}
.pnl-place-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
}
.pnl-place-bar {
    height: 22px;
    background: var(--f-surface-alt);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}
.pnl-place-bar-fill {
    height: 100%;
    background: var(--f-accent);
    border-radius: 6px 0 0 6px;
}
.pnl-place-fcbar {
    display: flex;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--f-surface-alt);
}
.pnl-place-fcbar-fc { background: var(--f-warning); }
.pnl-place-fcbar-margin { background: var(--f-success); }

/* ──────────────────────────────────────────────────────────────────────
   Reports — Waiters / Сервис (По официантам, v2)
   ────────────────────────────────────────────────────────────────────── */

.waiters-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}
@media (max-width: 1100px) {
    .waiters-layout { grid-template-columns: 1fr; }
}

.waiters-chart-card { overflow: hidden; }

.waiters-bars-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.waiters-bar-row {
    display: grid;
    grid-template-columns: 24px 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.waiters-bar-rank {
    text-align: center;
    font-size: 14px;
    line-height: 1;
}
.waiters-bar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    flex-shrink: 0;
}
.waiters-bar-avatar--sm { width: 24px; height: 24px; font-size: 10px; }

.waiters-bar-body { min-width: 0; }
.waiters-bar-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.waiters-bar-track {
    height: 8px;
    background: var(--f-surface-alt);
    border-radius: 4px;
    overflow: hidden;
}
.waiters-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--f-accent-soft) 0%, var(--f-accent) 100%);
    border-radius: 4px 0 0 4px;
    transition: width .25s ease;
}
.waiters-bar-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Heatmap / Тепловая карта (v2)
   ────────────────────────────────────────────────────────────────────── */

.hm-mode-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 !important;
}
@media (max-width: 800px) {
    .hm-mode-selector { grid-template-columns: 1fr; }
}
.hm-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-align: left;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-surface);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    min-width: 0;
}
.hm-mode-btn:hover { border-color: var(--f-border-strong); background: var(--f-surface-alt); }
.hm-mode-btn.active {
    border-color: var(--f-accent);
    background: var(--f-accent-soft);
}
.hm-mode-btn .ph { font-size: 18px; color: var(--f-text-subtle); flex-shrink: 0; }
.hm-mode-btn.active .ph { color: var(--f-accent); }
.hm-mode-label { min-width: 0; }
.hm-mode-title { font-size: 12px; font-weight: 600; color: var(--f-text); }
.hm-mode-btn.active .hm-mode-title { color: var(--f-accent); }
.hm-mode-desc { font-size: 10px; color: var(--f-text-subtle); margin-top: 1px; }

.hm-card { overflow: hidden; }
.hm-card-body { padding: 14px 16px; }

.hm-grid-wrap { overflow-x: auto; margin-bottom: 12px; }
.hm-grid {
    border-collapse: separate;
    border-spacing: 3px;
    margin: 0 auto;
}
.hm-grid th {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--f-text-subtle);
    padding-bottom: 4px;
    min-width: 32px;
}
.hm-grid th:first-child { width: 32px; min-width: 32px; }
.hm-grid .hm-day-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text-muted);
    padding-right: 8px;
    white-space: nowrap;
}
.hm-grid .hm-cell {
    min-width: 32px;
    width: 32px;
    height: 30px;
    border-radius: 5px;
    transition: transform .15s;
    cursor: default;
}
.hm-grid .hm-cell:hover { transform: scale(1.15); outline: 1px solid var(--f-accent); }

.hm-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    color: var(--f-text-subtle);
}
.hm-legend-scale {
    display: flex;
    gap: 2px;
}
.hm-legend-cell {
    width: 22px;
    height: 12px;
    border-radius: 3px;
}

/* Маска рабочих часов — закрытые и выходные */
.hm-cell--closed {
    background: var(--f-surface-alt) !important;
    opacity: 0.4;
    cursor: default;
}
.hm-cell--closed.hm-cell--has-data {
    /* Данные есть, но ячейка вне рабочих часов — слабый акцент с пунктирной рамкой */
    opacity: 0.6;
    outline: 1px dashed var(--f-warning, #f59e0b);
    outline-offset: -1px;
}
.hm-row--day-off .hm-cell {
    background: var(--f-surface-alt) !important;
    opacity: 0.35;
}
.hm-day-off-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 4px;
    margin-left: 4px;
    border-radius: 3px;
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    font-weight: 500;
    vertical-align: middle;
}

/* Баннер «Часы работы не настроены» */
.hm-default-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--f-warning-soft, color-mix(in srgb, var(--f-warning, #f59e0b) 12%, transparent));
    border: 1px solid var(--f-warning, #f59e0b);
    border-radius: 8px;
    font-size: 13px;
    color: var(--f-text);
    line-height: 1.4;
}
.hm-default-banner__icon {
    flex-shrink: 0;
    color: var(--f-warning, #f59e0b);
    display: flex;
    align-items: center;
}
.hm-default-banner__text {
    flex: 1;
    min-width: 0;
}
.hm-default-banner__link {
    color: var(--f-accent);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.hm-default-banner__link:hover { text-decoration: underline; }
.hm-default-banner__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--f-text-subtle);
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}
.hm-default-banner__close:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

/* Toggle «Показать все 24×7» */
.hm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--f-text-muted);
    white-space: nowrap;
}
.hm-toggle:hover { color: var(--f-text); }
.hm-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.hm-toggle__track {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
    border-radius: 9px;
    background: var(--f-border-strong, #cbd5e1);
    transition: background .18s;
    flex-shrink: 0;
}
.hm-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.hm-toggle__input:checked + .hm-toggle__track {
    background: var(--f-accent);
}
.hm-toggle__input:checked + .hm-toggle__track::after {
    transform: translateX(13px);
}
.hm-toggle__label {
    font-size: 12px;
    font-weight: 500;
}

/* abc-card-head-actions — обёртка для правой части шапки карточки */
.abc-card-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Segmentation / Сегментация гостей (v2)
   ────────────────────────────────────────────────────────────────────── */

.seg-layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}
@media (max-width: 1100px) {
    .seg-layout { grid-template-columns: 1fr; }
}

.seg-donut-card { overflow: hidden; }
.seg-donut-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
}
.seg-donut {
    padding: 14px;
}
.seg-donut-svg {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.seg-donut-hole {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--f-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.seg-donut-hole-label {
    font-size: 9px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.seg-donut-hole-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    text-align: center;
    padding: 0 4px;
}

.seg-donut-legend {
    margin-top: 14px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.seg-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.seg-donut-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.seg-donut-legend-label {
    flex: 1;
    min-width: 0;
    color: var(--f-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seg-donut-legend-value {
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}

.seg-name-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}
.seg-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--f-text-subtle);
    transition: background .15s;
    flex-shrink: 0;
}
.seg-toggle-btn:hover { background: var(--f-surface-alt); color: var(--f-text); }
.seg-toggle-btn .ph { font-size: 16px; }
.seg-toggle-spacer { display: inline-block; width: 20px; flex-shrink: 0; }

.seg-row-root td { background: color-mix(in srgb, var(--f-surface-alt) 50%, var(--f-surface)); }

.seg-share-cell {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    align-items: center;
    font-size: 11px;
}
.seg-share-label {
    font-size: 9px;
    color: var(--f-text-subtle);
    text-align: right;
    margin-top: 1px;
}
.seg-share-toggle {
    background: transparent;
    border: none;
    font-size: 9px;
    color: var(--f-accent);
    cursor: pointer;
    padding: 0;
    margin-top: 1px;
    text-align: right;
    width: 100%;
}
.seg-share-toggle:hover { text-decoration: underline; }

/* Segmentation config modal */
.seg-conf-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.seg-group-card {}
.seg-group-card-body {
    padding: 12px;
    background: var(--f-surface-alt);
    border-radius: 10px;
    border: 1px solid var(--f-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.seg-group-card--child .seg-group-card-body {
    background: var(--f-surface);
    border-left: 2px solid var(--f-accent);
}
.seg-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.seg-group-prefix { color: var(--f-text-subtle); font-size: 11px; }
.seg-conf-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--f-border);
    border-radius: 7px;
    background: var(--f-surface);
    color: var(--f-text);
    font-weight: 500;
    outline: none;
}
.seg-conf-input:focus { border-color: var(--f-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-accent) 15%, transparent); }
.seg-group-remove {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--f-text-subtle);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.seg-group-remove:hover { background: var(--f-danger-soft, rgba(192, 57, 43, .08)); color: var(--f-danger); }
.seg-group-remove .ph { font-size: 16px; }

.seg-slider-row { display: flex; flex-direction: column; gap: 6px; }
.seg-slider-minmax {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}
.seg-slider-values {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--f-text);
}
.seg-range-num {
    width: 70px;
    padding: 2px 6px;
    font-size: 11px;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    outline: none;
}
.seg-range-num:hover { border-color: var(--f-border); }
.seg-range-num:focus { border-color: var(--f-accent); background: var(--f-surface); }

.seg-slider-wrap {
    position: relative;
    height: 22px;
    display: flex;
    align-items: center;
}
.seg-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 3px;
}
.seg-slider-range {
    position: absolute;
    height: 4px;
    background: var(--f-accent);
    border-radius: 3px;
}
.seg-range-slider {
    position: absolute;
    width: 100%;
    height: 22px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    margin: 0;
}
.seg-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    background: var(--f-accent);
    border: 3px solid var(--f-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.seg-range-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    background: var(--f-accent);
    border: 3px solid var(--f-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.seg-add-sub-btn,
.seg-add-root-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--f-accent);
    background: transparent;
    border: 1px dashed var(--f-accent);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
}
.seg-add-sub-btn:hover,
.seg-add-root-btn:hover { background: var(--f-accent-soft); }
.seg-add-sub-btn .ph,
.seg-add-root-btn .ph { font-size: 14px; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — Fullness / Наполняемость (v2)
   ────────────────────────────────────────────────────────────────────── */

.fullness-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .fullness-layout { grid-template-columns: 1fr; }
}

.fullness-config-card {}
.fullness-targets {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fullness-target-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.fullness-rank-card { overflow: hidden; }
.fullness-rank-card .abc-table-wrap { max-height: 420px; overflow: auto; }

.fullness-orders-card {}
.fullness-orders-wrap {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fullness-day {
    border: 1px solid var(--f-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--f-surface);
}
.fullness-day-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-align: left;
    background: var(--f-surface-alt);
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.fullness-day-toggle:hover { background: color-mix(in srgb, var(--f-surface-alt) 70%, var(--f-accent-soft)); }
.fullness-day-toggle .ph { font-size: 14px; color: var(--f-text-subtle); }
.fullness-day-chevron { transition: transform .18s; }

.fullness-day-content { padding: 2px 0; }
.fullness-day-content[hidden] { display: none; }

.fullness-order {
    border-top: 1px solid var(--f-divider);
}
.fullness-order-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.fullness-order-toggle:hover { background: var(--f-surface-alt); }
.fullness-chevron {
    font-size: 14px;
    color: var(--f-text-subtle);
    transition: transform .18s;
}
.fullness-order-detail {
    padding: 10px 18px 12px;
    background: var(--f-surface-alt);
    border-top: 1px solid var(--f-divider);
}
.fullness-order-detail[hidden] { display: none; }

.fullness-place-block { margin-bottom: 8px; }
.fullness-place-block:last-child { margin-bottom: 0; }
.fullness-place-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.fullness-item-line {
    display: flex;
    justify-content: space-between;
    padding: 2px 0 2px 20px;
    font-size: 11px;
    color: var(--f-text-muted);
}
.fullness-order-total {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--f-border);
    font-size: 11px;
}

/* Fullness config modal — targets strip */
.fullness-targets-card {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--f-warning) 6%, var(--f-surface));
    border: 1px solid color-mix(in srgb, var(--f-warning) 25%, var(--f-border));
    border-radius: 10px;
    margin-bottom: 16px;
}
.fullness-targets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.fullness-targets-grid label {
    display: block;
    font-size: 10px;
    color: var(--f-text-subtle);
    margin-bottom: 3px;
    font-weight: 500;
}
.fullness-dish-subfield { padding-left: 8px; }
.fullness-dish-input--override { border-color: var(--f-accent) !important; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — По складам (Cross-venue heat map)
   ────────────────────────────────────────────────────────────────────── */

.cv-table { table-layout: auto; }
.cv-table .cv-sticky-col {
    position: sticky;
    left: 0;
    background: var(--f-surface);
    z-index: 2;
    min-width: 200px;
    max-width: 220px;
}
.cv-table tbody .cv-sticky-col {
    background: var(--f-surface);
}
.cv-table tbody tr:hover .cv-sticky-col { background: var(--f-surface-alt); }
.cv-cell {
    padding: 6px 8px !important;
    line-height: 1.15;
}
.cv-cell-qty {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text);
}
.cv-cell-sum {
    font-size: 10px;
    color: var(--f-text-muted);
    margin-top: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Supplier comparison modal
   ────────────────────────────────────────────────────────────────────── */

.sc-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: sc-fade-in 0.2s ease-out;
}
@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sc-dialog {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 14px;
    box-shadow: var(--f-shadow-lg, 0 16px 40px rgba(0,0,0,.15));
    width: 100%;
    max-width: 920px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sc-slide-up 0.25s ease-out;
}
@keyframes sc-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.sc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--f-divider);
    gap: 12px;
    flex-shrink: 0;
}
.sc-head-title { display: flex; align-items: center; gap: 10px; }
.sc-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-head-icon .ph { font-size: 20px; color: var(--f-accent); }
.sc-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--f-text);
}
.sc-head-sub { font-size: 11.5px; color: var(--f-text-subtle); margin-top: 1px; }
.sc-head-actions { display: flex; align-items: center; gap: 8px; }
.sc-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--f-text-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-close:hover { background: var(--f-surface-alt); color: var(--f-text); }
.sc-close .ph { font-size: 18px; }
.sc-body {
    padding: 12px 14px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--f-text-subtle);
}
.sc-empty .ph { font-size: 40px; color: var(--f-text-subtle); opacity: 0.6; display: block; margin-bottom: 6px; }

.sc-product-card {
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-surface);
    transition: border-color .15s, box-shadow .15s;
}
.sc-product-card:hover { border-color: var(--f-border-strong); box-shadow: var(--f-shadow-sm); }
.sc-product-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.sc-supplier-count {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.sc-product-info { flex: 1; min-width: 0; }
.sc-product-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-product-sub { font-size: 10.5px; color: var(--f-text-subtle); margin-top: 1px; }
.sc-best-price { text-align: right; flex-shrink: 0; }
.sc-best-price-label { font-size: 10px; color: var(--f-text-subtle); }
.sc-best-price-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-success);
    font-variant-numeric: tabular-nums;
}
.sc-arrow {
    color: var(--f-text-subtle);
    font-size: 16px !important;
    flex-shrink: 0;
}
.sc-product-detail { padding: 0 10px 10px; }
.sc-product-detail[hidden] { display: none; }
.sc-best-row td { background: var(--f-success-soft) !important; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — Списания (Writeoffs)
   ────────────────────────────────────────────────────────────────────── */

.writeoffs-reasons-card { flex-shrink: 0; }
.writeoffs-reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
    padding: 12px 14px;
}
.writeoffs-reason-card {
    padding: 10px 12px;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.writeoffs-reason-card:hover { border-color: var(--f-border-strong); background: var(--f-surface-alt); }
.writeoffs-reason-card.active {
    border-color: var(--f-danger);
    background: var(--f-danger-soft);
}
.writeoffs-reason-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.writeoffs-reason-sum {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-danger);
    font-variant-numeric: tabular-nums;
}
.writeoffs-reason-meta {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.writeoffs-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
.reports-subreport--full #reports-content > .writeoffs-layout {
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 1100px) {
    .writeoffs-layout { grid-template-columns: 1fr; }
}
.writeoffs-layout > .abc-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Закупки (Purchases)
   ────────────────────────────────────────────────────────────────────── */

.purchases-suppliers-card { flex-shrink: 0; }
.purchases-suppliers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 12px 14px;
}
.purchases-supplier-card {
    padding: 10px 12px;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    background: var(--f-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.purchases-supplier-card:hover { border-color: var(--f-border-strong); background: var(--f-surface-alt); }
.purchases-supplier-card.active {
    border-color: var(--f-accent);
    background: var(--f-accent-soft);
}
.purchases-supplier-card.active .purchases-supplier-sum { color: var(--f-accent); }
.purchases-supplier-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.purchases-supplier-sum {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}
.purchases-supplier-meta {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Details row under an invoice */
.purchases-inv-row { cursor: pointer; }
.purchases-inv-detail > td { background: var(--f-surface-alt); padding: 8px 14px 12px !important; }
.purchases-detail-wrap {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: hidden;
}
.purchases-detail-wrap .reports-table thead th {
    background: var(--f-surface-alt);
    font-size: 9.5px;
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Оборачиваемость (Turnover)
   ────────────────────────────────────────────────────────────────────── */

.turnover-chart-card { flex-shrink: 0; }
.turnover-chart-card .abc-card-head {
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.turnover-subtitle {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}
.turnover-legend {
    display: inline-flex;
    gap: 12px;
    font-size: 11px;
    color: var(--f-text-muted);
    flex-wrap: wrap;
}
.turnover-legend span { display: inline-flex; align-items: center; gap: 5px; }
.turnover-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.turnover-legend i[data-tone="success"] { background: var(--f-success); }
.turnover-legend i[data-tone="info"]    { background: var(--f-info); }
.turnover-legend i[data-tone="warning"] { background: var(--f-warning); }
.turnover-legend i[data-tone="danger"]  { background: var(--f-danger); }

.turnover-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.turnover-bar-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 60px 80px;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 6px;
    transition: background .15s;
}
.turnover-bar-row:hover { background: var(--f-surface-alt); }
.turnover-bar-row.active { background: var(--f-accent-soft); }
.turnover-bar-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.turnover-bar-track {
    position: relative;
    height: 22px;
    background: var(--f-surface-alt);
    border-radius: 6px;
    overflow: hidden;
}
.turnover-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    border-radius: 6px 0 0 6px;
}
.turnover-bar-fill[data-tone="success"] { background: var(--f-success); }
.turnover-bar-fill[data-tone="info"]    { background: var(--f-info); }
.turnover-bar-fill[data-tone="warning"] { background: var(--f-warning); }
.turnover-bar-fill[data-tone="danger"]  { background: var(--f-danger); }
.turnover-bar-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--f-text-subtle);
    opacity: 0.45;
    pointer-events: none;
}
.turnover-bar-meta {
    font-size: 11px;
    color: var(--f-text-subtle);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.turnover-bar-stock {
    font-size: 12px;
    font-weight: 600;
    color: var(--f-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.turnover-bar-label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.turnover-bar-chevron {
    color: var(--f-text-subtle);
    transition: transform .15s ease;
    flex-shrink: 0;
}
.turnover-bar-row.active .turnover-bar-chevron {
    transform: rotate(90deg);
    color: var(--f-accent);
}

.turnover-cat-detail {
    margin: 4px 0 8px 22px;
    border-left: 2px solid var(--f-accent);
    background: var(--f-surface-alt);
    border-radius: 0 8px 8px 0;
    animation: turnover-cat-slide .18s ease-out;
}
.turnover-cat-detail[hidden] { display: none; }
.turnover-cat-detail-body {
    padding: 4px 0;
    max-height: 360px;
    overflow: auto;
}
@keyframes turnover-cat-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────────────
   Reports — Product Movement (Движения товара)
   ────────────────────────────────────────────────────────────────────── */

.pm-hint {
    font-size: 11px;
    color: var(--f-text-subtle);
    font-style: italic;
}

/* Hero card — per-product header with big icon, name, metrics */
.pm-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 12px;
    box-shadow: var(--f-shadow-sm);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pm-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pm-hero-icon .ph { font-size: 28px; color: var(--f-accent); }
.pm-hero-title { flex: 1 1 200px; min-width: 0; }
.pm-hero-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}
.pm-hero-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--f-text);
    margin-top: 2px;
}
.pm-hero-meta {
    font-size: 11.5px;
    color: var(--f-text-muted);
    margin-top: 2px;
}
.pm-hero-metrics {
    display: flex;
    gap: 14px;
    padding-left: 16px;
    border-left: 1px solid var(--f-divider);
    flex-wrap: wrap;
}
.pm-metric { min-width: 80px; }
.pm-metric-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 500;
}
.pm-metric-value {
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.pm-metric[data-tone="success"] .pm-metric-value { color: var(--f-success); }
.pm-metric[data-tone="danger"]  .pm-metric-value { color: var(--f-danger); }
.pm-metric[data-tone="info"]    .pm-metric-value { color: var(--f-info); }
.pm-metric[data-tone="accent"]  .pm-metric-value { color: var(--f-accent); }

/* Chart card */
.pm-chart-card { flex-shrink: 0; }
.pm-chart-wrap {
    height: 220px;
    position: relative;
}
.pm-legend {
    display: inline-flex;
    gap: 14px;
    font-size: 11px;
    color: var(--f-text-muted);
    align-items: center;
}
.pm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pm-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.pm-legend i[data-tone="success"] { background: var(--f-success); }
.pm-legend i[data-tone="danger"]  { background: var(--f-danger); }
.pm-legend i[data-tone="info"]    { background: var(--f-info); }

/* Events list — timeline-ish rows */
.pm-events { padding: 2px 0; }
.pm-event {
    display: grid;
    grid-template-columns: 56px 28px minmax(0, 1fr) minmax(110px, auto) minmax(110px, auto);
    gap: 12px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--f-divider);
}
.pm-event:last-child { border-bottom: 0; }
.pm-event:hover { background: var(--f-surface-alt); }
.pm-event-date {
    font-size: 11px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}
.pm-event-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-event-icon[data-tone="success"] { background: var(--f-success-soft); color: var(--f-success); }
.pm-event-icon[data-tone="danger"]  { background: var(--f-danger-soft);  color: var(--f-danger); }
.pm-event-icon[data-tone="info"]    { background: var(--f-info-soft);    color: var(--f-info); }
.pm-event-icon .ph { font-size: 14px; }
.pm-event-body { min-width: 0; }
.pm-event-doc {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-event-doc .muted { color: var(--f-text-subtle); font-weight: 400; }
.pm-event-sub {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-event-qty {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.pm-event-qty.tone-success { color: var(--f-success); }
.pm-event-qty.tone-danger  { color: var(--f-danger); }
.pm-event-qty.tone-info    { color: var(--f-info); }
.pm-event-balance { text-align: right; }
.pm-event-balance-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}
.pm-event-balance-value {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--f-text);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

/* Inline product timeline row (click-to-expand under a stock table row) */
.stock-timeline-row > td {
    background: var(--f-surface-alt);
    border-bottom: 1px solid var(--f-divider) !important;
    padding: 12px 14px;
}
.stock-timeline-loading,
.stock-timeline-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--f-text-subtle);
}
.stock-timeline-loading .ph {
    animation: reports-spin 1s linear infinite;
    font-size: 14px;
}
.stock-timeline-empty.tone-danger { color: var(--f-danger); }
.stock-timeline-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--f-text-muted);
    margin-bottom: 8px;
}
.stock-timeline-head .ph {
    font-size: 14px;
    color: var(--f-accent);
}
.stock-timeline-canvas {
    height: 140px;
}

/* Menu analytics 2×2 matrix */
.ma-matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Insight callouts (menu analytics) */
.ma-insight {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--f-border);
    background: var(--f-surface);
}
.ma-insight[data-tone="warning"] { background: var(--f-warning-soft); border-color: color-mix(in srgb, var(--f-warning) 30%, transparent); }
.ma-insight[data-tone="accent"]  { background: var(--f-accent-soft);  border-color: color-mix(in srgb, var(--f-accent)  30%, transparent); }
.ma-insight-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.ma-insight-head h4 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: -0.1px; }
.ma-insight[data-tone="warning"] .ma-insight-head { color: var(--f-warning); }
.ma-insight[data-tone="accent"]  .ma-insight-head { color: var(--f-accent); }
.ma-insight-head .ph { font-size: 18px; }
.ma-insight p { margin: 0; font-size: 12px; color: var(--f-text-muted); line-height: 1.45; }
.ma-insight p strong { color: var(--f-text); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────
   Reports — sub-report shell v2 (breadcrumb-dropdown + recent)
   ────────────────────────────────────────────────────────────────────── */

.reports-subreport {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.reports-subnav-wrap { position: relative; }

.reports-subnav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.reports-subnav-dropdown { position: relative; }

.reports-subnav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    color: var(--f-text);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    height: 32px;
}
.reports-subnav-trigger:hover { border-color: var(--f-border-strong); }
.reports-subnav-dropdown.open .reports-subnav-trigger {
    background: var(--f-surface);
    border-color: var(--f-border-strong);
    box-shadow: var(--f-ring, 0 0 0 3px rgba(90, 26, 36, .12));
}
.reports-subnav-trigger-label { letter-spacing: -0.1px; }

.reports-subnav-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 12px;
    box-shadow: var(--f-shadow, 0 1px 3px rgba(26,24,21,.05), 0 4px 12px rgba(26,24,21,.04));
    padding: 10px;
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: 72vh;
    overflow-y: auto;
    z-index: 30;
}

.reports-subnav-group + .reports-subnav-group { margin-top: 8px; }
.reports-subnav-gtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--f-text-subtle);
    padding: 4px 8px;
    font-weight: 600;
}
.reports-subnav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}
.reports-subnav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--f-text);
    text-decoration: none;
}
.reports-subnav-item:hover { background: var(--f-surface-alt); }
.reports-subnav-item.active {
    background: var(--f-accent-soft);
    color: var(--f-accent);
    font-weight: 500;
}
.reports-subnav-item .ph { color: var(--f-text-subtle); }
.reports-subnav-item.active .ph { color: var(--f-accent); }

.reports-subnav-recent {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.reports-subnav-recent-label {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-right: 2px;
}
.reports-subnav-recent-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 7px;
    background: transparent;
    color: var(--f-text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: background .15s;
    height: 28px;
}
.reports-subnav-recent-item:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

.reports-stock-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.reports-pay-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.reports-pay-filter:empty { display: none; }

.reports-content { min-height: 400px; }

.reports-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 240px;
    color: var(--f-text-subtle);
    font-size: 12px;
}
.reports-loading .ph {
    animation: reports-spin 1s linear infinite;
}
@keyframes reports-spin { to { transform: rotate(360deg); } }

/* ── Drawer ───────────────────────────────────────────────────────────── */
.f-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 60;
    opacity: 1;
    transition: opacity 220ms ease-out;
}
.f-drawer-backdrop--entering,
.f-drawer-backdrop--leaving {
    opacity: 0;
}

.f-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 100vw;
    background: var(--f-surface);
    color: var(--f-text);
    border-left: 1px solid var(--f-border);
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
    z-index: 61;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 220ms ease-out;
}
.f-drawer--entering,
.f-drawer--leaving {
    transform: translateX(100%);
}

.f-drawer-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--f-border);
    flex-shrink: 0;
}
.f-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}
.f-drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--f-border);
    background: var(--f-surface-alt);
    flex-shrink: 0;
}

/* ── Bottom Sheet (mobile-first) ─────────────────────────────────────── */
.f-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 70;
    opacity: 1;
    transition: opacity 240ms ease-out;
}
.f-sheet-backdrop--entering,
.f-sheet-backdrop--leaving {
    opacity: 0;
}

.f-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    background: var(--f-surface);
    color: var(--f-text);
    border-top-left-radius: var(--f-radius-lg, 18px);
    border-top-right-radius: var(--f-radius-lg, 18px);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.22);
    z-index: 71;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 240ms ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.f-sheet--entering,
.f-sheet--leaving {
    transform: translateY(100%);
}

.f-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--f-border);
    margin: 8px auto 6px;
    flex-shrink: 0;
}

.f-sheet-header {
    padding: 6px 20px 12px;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--f-text);
    touch-action: none;
}
.f-sheet-header:empty {
    display: none;
}

.f-sheet-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 16px 16px;
    -webkit-overflow-scrolling: touch;
}

/* ── Staff Portal: notification prefs sheet ──────────────────────────── */
.sp-notif-list {
    display: flex;
    flex-direction: column;
}
.sp-notif-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--f-border);
}
.sp-notif-row:last-child {
    border-bottom: none;
}
.sp-notif-row__icon {
    flex-shrink: 0;
    width: 28px;
    color: var(--f-text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sp-notif-row__label {
    flex: 1;
    font-size: 15px;
    color: var(--f-text);
}
.sp-notif-toggle {
    flex-shrink: 0;
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: var(--f-border);
    border: none;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: background-color 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
.sp-notif-toggle.is-on {
    background: var(--f-accent, #4f46e5);
}
.sp-notif-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 180ms ease;
}
.sp-notif-toggle.is-on .sp-notif-toggle__thumb {
    transform: translateX(20px);
}

/* ── Checklists v2 ────────────────────────────────────────────────────── */
.cl-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--f-bg);
    color: var(--f-text);
}
.cl-v2-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Today split-view */
.cl-split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
}
@media (max-width: 900px) {
    .cl-split { grid-template-columns: 300px 1fr; }
}

.cl-list-pane {
    border-right: 1px solid var(--f-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--f-surface);
}
.cl-list-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.cl-list-header .cl-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
}
.cl-list-scroll {
    flex: 1;
    overflow: auto;
}

.cl-card {
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-divider);
    cursor: pointer;
    border-left: 3px solid transparent;
    background: transparent;
    transition: background 120ms ease-out;
}
.cl-card:hover { background: var(--f-surface-alt); }
.cl-card.is-active {
    background: var(--f-accent-soft);
    border-left-color: var(--f-accent);
}
.cl-card.is-active .cl-card-title { color: var(--f-accent-text); }

.cl-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.cl-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    line-height: 1.25;
}
.cl-card-time {
    font-size: 11px;
    color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.cl-card-sub {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-bottom: 6px;
}
.cl-card-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.cl-card-progress-track {
    flex: 1;
    height: 4px;
    background: var(--f-surface-sunken);
    border-radius: 2px;
    overflow: hidden;
}
.cl-card-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--f-text-subtle);
    transition: width 200ms ease-out;
}
.cl-card-progress-fill.tone-success { background: var(--f-success); }
.cl-card-progress-fill.tone-warning { background: var(--f-warning); }
.cl-card-progress-fill.tone-danger  { background: var(--f-danger); }
.cl-card-progress-fill.tone-neutral { background: var(--f-text-subtle); }
.cl-card-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
}

/* Right detail pane */
.cl-detail-pane {
    overflow: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cl-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--f-text-subtle);
    padding: 40px;
    text-align: center;
    gap: 6px;
}
.cl-detail-empty .ph { font-size: 42px; opacity: 0.6; }

.cl-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.cl-detail-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--f-text);
}
.cl-detail-sub {
    font-size: 12px;
    color: var(--f-text-muted);
    margin-top: 4px;
}
.cl-detail-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.cl-progress-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cl-progress-track {
    flex: 1;
    height: 8px;
    background: var(--f-surface-sunken);
    border-radius: 4px;
    overflow: hidden;
}
.cl-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--f-text-subtle);
}
.cl-progress-fill.tone-success { background: var(--f-success); }
.cl-progress-fill.tone-warning { background: var(--f-warning); }
.cl-progress-fill.tone-danger  { background: var(--f-danger); }
.cl-progress-fill.tone-neutral { background: var(--f-text-subtle); }
.cl-progress-text {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.cl-progress-hint {
    font-size: 11px;
    color: var(--f-text-subtle);
}

/* Group heading + card */
.cl-group-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    padding: 0 2px;
}
.cl-card-box {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.cl-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--f-divider);
}
.cl-item-row:last-child { border-bottom: none; }
.cl-item-row.is-critical { background: var(--f-warning-soft); }
.cl-item-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--f-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.cl-item-check.is-done {
    background: var(--f-success);
    border-color: var(--f-success);
}
.cl-item-check.is-fail {
    background: var(--f-danger);
    border-color: var(--f-danger);
}
.cl-item-check .ph {
    font-size: 14px;
    color: #fff;
}
.cl-item-text {
    flex: 1;
    font-size: 12.5px;
    color: var(--f-text);
    line-height: 1.4;
}
.cl-item-text.is-done {
    color: var(--f-text-muted);
    text-decoration: line-through;
}
.cl-item-comment {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 3px;
    line-height: 1.4;
    text-decoration: none;
    font-style: italic;
}
.cl-item-photo-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--f-accent-text);
    font-weight: 500;
    flex-shrink: 0;
}
.cl-item-photo-pill .ph { font-size: 13px; }
.cl-item-ts {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Photos grid */
.cl-photos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 900px) { .cl-photos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cl-photos-grid { grid-template-columns: repeat(2, 1fr); } }

.cl-photo-tile {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    border: 1px solid var(--f-border);
    background: var(--f-surface-sunken);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}
.cl-photo-tile-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 8px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.cl-photo-tile-label {
    font-size: 10.5px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cl-photo-tile-ts {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    flex-shrink: 0;
}
.cl-photo-tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    color: var(--f-text-subtle);
    border: 1.5px dashed var(--f-border);
    background: var(--f-surface-sunken);
    border-radius: 8px;
    font-size: 10.5px;
}
.cl-photo-tile-placeholder .ph { font-size: 22px; }
.cl-photo-more {
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}

/* Comments */
.cl-comment-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--f-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-comment-row:last-child { border-bottom: none; }
.cl-comment-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
}
.cl-comment-item-title {
    font-weight: 600;
    color: var(--f-text);
}
.cl-comment-body {
    font-size: 12px;
    color: var(--f-text-muted);
    line-height: 1.4;
}

/* History tab */
.cl-history-list {
    padding: 20px 24px;
    overflow: auto;
    flex: 1;
}
.cl-history-table {
    width: 100%;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: hidden;
    font-size: 12px;
    border-collapse: collapse;
}
.cl-history-table thead th {
    text-align: left;
    padding: 10px 14px;
    background: var(--f-surface-alt);
    color: var(--f-text-subtle);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--f-border);
}
.cl-history-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text);
    vertical-align: middle;
}
.cl-history-table tbody tr:last-child td { border-bottom: none; }
.cl-history-table tbody tr { cursor: pointer; }
.cl-history-table tbody tr:hover td { background: var(--f-surface-alt); }
.cl-history-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Templates grid */
.cl-tpl-grid {
    padding: 20px 24px;
    overflow: auto;
    flex: 1;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-content: start;
}
.cl-tpl-card {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.cl-tpl-card:hover {
    border-color: var(--f-border-strong);
    box-shadow: var(--f-shadow-sm);
}
.cl-tpl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.cl-tpl-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    line-height: 1.3;
}
.cl-tpl-head-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.cl-tpl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cl-tpl-desc {
    font-size: 11.5px;
    color: var(--f-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-tpl-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--f-divider);
    font-size: 11px;
    color: var(--f-text-subtle);
}

/* Drawer editor questions */
.cl-drw-section { margin-bottom: 18px; }
.cl-drw-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    margin-bottom: 6px;
}
.cl-drw-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    background: var(--f-surface);
    color: var(--f-text);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.cl-drw-input:focus {
    border-color: var(--f-accent);
    box-shadow: var(--f-ring);
}
textarea.cl-drw-input {
    resize: vertical;
    min-height: 56px;
    line-height: 1.4;
}
.cl-drw-radio-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.cl-drw-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--f-text);
    cursor: pointer;
}
.cl-drw-radio input { accent-color: var(--f-accent); }
.cl-drw-questions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cl-drw-qrow {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 10px;
}
.cl-drw-qdrag {
    color: var(--f-text-subtle);
    padding-top: 6px;
    cursor: grab;
    flex-shrink: 0;
}
.cl-drw-qdrag .ph { font-size: 16px; }
.cl-drw-qbody {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl-drw-qphoto-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.cl-drw-qphoto-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--f-text-muted);
    cursor: pointer;
}
.cl-drw-qphoto-check input { accent-color: var(--f-accent); }
.cl-drw-qphoto-check input:disabled + span { color: var(--f-text-subtle); opacity: 0.6; }
.cl-drw-qdel {
    flex-shrink: 0;
    margin-top: 2px;
}

.cl-drw-section-settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cl-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--f-text-subtle);
    font-size: 13px;
}
.cl-empty .ph { font-size: 44px; opacity: 0.6; display: block; margin-bottom: 8px; }
.cl-empty-title { font-size: 15px; font-weight: 600; color: var(--f-text-muted); margin-bottom: 4px; }

/* Прикреплённые фото в ответе чек-листа */
.ans-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ans-photos .photo-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--f-border-subtle);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ans-photos .photo-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Photo lightbox (reused) */
.cl-photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cl-photo-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    object-fit: contain;
}

/* ── MultiSelect v2 reskin ──────────────────────────────────────
 * Применяется автоматически внутри .f-drawer (legacy) И при
 * opt-in через v2:true (класс .f-ms-v2). Покрывает обе зоны:
 * wrapper в anchor И floating-popup в body (`.ms-floating.f-ms-v2`).
 *
 * !important нужен, потому что MultiSelect рендерится с Tailwind
 * utility-классами (bg-white, border-gray-200 и т.п.), которые
 * грузятся после components.css.
 */
.f-drawer .ms-trigger,
.f-ms-v2 .ms-trigger {
    background: var(--f-surface) !important;
    border-color: var(--f-border) !important;
    color: var(--f-text) !important;
    border-radius: var(--r-sm);
    padding: 7px 10px;
    min-height: 34px;
    font-size: 12.5px;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.f-drawer .ms-trigger:hover,
.f-ms-v2 .ms-trigger:hover { border-color: var(--f-border-strong) !important; }
.f-drawer .ms-trigger:focus,
.f-ms-v2 .ms-trigger:focus { outline: none; box-shadow: var(--f-ring); border-color: var(--f-accent) !important; }
.f-drawer .ms-trigger .ph,
.f-ms-v2 .ms-trigger .ph { color: var(--f-text-subtle); }
.f-drawer .ms-trigger > span.text-gray-400,
.f-ms-v2 .ms-trigger > span.text-gray-400 { color: var(--f-text-subtle) !important; }

.f-drawer .ms-chip,
.f-ms-v2 .ms-chip {
    background: var(--f-accent-soft) !important;
    color: var(--f-accent-text) !important;
    border-radius: var(--r-sm);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    max-width: 140px;
}
.f-drawer .ms-chip .ms-chip-x,
.f-ms-v2 .ms-chip .ms-chip-x { color: var(--f-accent-text); opacity: 0.7; }
.f-drawer .ms-chip .ms-chip-x:hover,
.f-ms-v2 .ms-chip .ms-chip-x:hover { opacity: 1; color: var(--f-accent-text) !important; }

.f-drawer .ms-dropdown,
.f-ms-v2 .ms-dropdown,
.ms-floating.f-ms-v2 .ms-dropdown {
    background: var(--f-surface) !important;
    border-color: var(--f-border) !important;
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    color: var(--f-text);
}
.f-drawer .ms-dropdown .ms-search,
.f-ms-v2 .ms-dropdown .ms-search,
.ms-floating.f-ms-v2 .ms-dropdown .ms-search {
    background: var(--f-surface-alt) !important;
    color: var(--f-text) !important;
    border-radius: var(--r-sm);
}
.f-drawer .ms-dropdown .ms-search::placeholder,
.f-ms-v2 .ms-dropdown .ms-search::placeholder,
.ms-floating.f-ms-v2 .ms-dropdown .ms-search::placeholder { color: var(--f-text-subtle); }
.f-drawer .ms-dropdown .ms-toggle-all,
.f-ms-v2 .ms-dropdown .ms-toggle-all,
.ms-floating.f-ms-v2 .ms-dropdown .ms-toggle-all { color: var(--f-accent-text) !important; }
.f-drawer .ms-dropdown .ms-clear,
.f-ms-v2 .ms-dropdown .ms-clear,
.ms-floating.f-ms-v2 .ms-dropdown .ms-clear { color: var(--f-text-subtle) !important; }
.f-drawer .ms-dropdown .ms-clear:hover,
.f-ms-v2 .ms-dropdown .ms-clear:hover,
.ms-floating.f-ms-v2 .ms-dropdown .ms-clear:hover { color: var(--f-text-muted) !important; }

.f-drawer .ms-option,
.f-ms-v2 .ms-option,
.ms-floating.f-ms-v2 .ms-option { color: var(--f-text); }
.f-drawer .ms-option:hover,
.f-ms-v2 .ms-option:hover,
.ms-floating.f-ms-v2 .ms-option:hover { background: var(--f-surface-alt) !important; }
.f-drawer .ms-option.bg-blue-50\/50,
.f-ms-v2 .ms-option.bg-blue-50\/50,
.ms-floating.f-ms-v2 .ms-option.bg-blue-50\/50 { background: var(--f-accent-soft) !important; }
.f-drawer .ms-option span.flex-1,
.f-ms-v2 .ms-option span.flex-1,
.ms-floating.f-ms-v2 .ms-option span.flex-1 { color: var(--f-text) !important; }
.f-drawer .ms-option span.flex-shrink-0.w-4,
.f-ms-v2 .ms-option span.flex-shrink-0.w-4,
.ms-floating.f-ms-v2 .ms-option span.flex-shrink-0.w-4 {
    border-color: var(--f-border-strong) !important;
    background: var(--f-surface) !important;
}
.f-drawer .ms-option span.bg-blue-600,
.f-ms-v2 .ms-option span.bg-blue-600,
.ms-floating.f-ms-v2 .ms-option span.bg-blue-600 {
    background: var(--f-accent) !important;
    border-color: var(--f-accent) !important;
    color: var(--f-accent-on) !important;
}


/* ── Month Picker (Frime v2 popup) ────────────────────────────── */
.f-monthpicker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: transparent;
}
.f-monthpicker {
    position: absolute;
    width: 240px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 10px;
    color: var(--f-text);
    animation: f-mp-in .12s ease-out;
    max-width: calc(100vw - 32px);
}
@keyframes f-mp-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.f-monthpicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 8px;
    gap: 4px;
}
.f-monthpicker-year {
    font-size: 14px;
    font-weight: 700;
    color: var(--f-text);
    flex: 1;
    text-align: center;
    user-select: none;
}
.f-monthpicker-nav {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--f-text-subtle);
    transition: background-color .1s, color .1s;
}
.f-monthpicker-nav:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}
.f-monthpicker-nav .ph { font-size: 18px; }
.f-monthpicker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 32px;
    gap: 4px;
}
.f-monthpicker-item {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color .1s, color .1s, border-color .1s;
    user-select: none;
}
.f-monthpicker-item:hover {
    background: var(--f-surface-alt);
}
.f-monthpicker-item.is-today {
    border: 1px dashed var(--f-accent);
}
.f-monthpicker-item.is-selected {
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
    border: 1px solid var(--f-accent);
    font-weight: 600;
}

/* ── Schedule chip popup menu (Frime v2) ─────────────────────── */
.f-sched-chip-menu {
    position: fixed;
    z-index: 70;
    min-width: 220px;
    max-width: 320px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 6px;
    color: var(--f-text);
    animation: f-mp-in .12s ease-out;
}
.f-sched-chip-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow: auto;
}
.f-sched-chip-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--f-text);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background-color .1s, color .1s;
}
.f-sched-chip-menu-item:hover {
    background: var(--f-surface-alt);
}
.f-sched-chip-menu-item-label { flex: 1; min-width: 0; }
.f-sched-chip-menu-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--f-text-subtle);
    font-size: 10px;
}
.f-sched-chip-menu-item-check {
    flex-shrink: 0;
    color: var(--f-accent);
    display: none;
}
.f-sched-chip-menu-item-check .ph { font-size: 16px; }
.f-sched-chip-menu-item--active {
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
    font-weight: 500;
}
.f-sched-chip-menu-item--active:hover {
    background: var(--f-accent-soft-hover, var(--f-accent-soft));
}
.f-sched-chip-menu-item--active .f-sched-chip-menu-item-check { display: inline-flex; }

/* ── Schedule grid (Frime v2 colors) ─────────────────────────── */
.f-sched-card {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: visible;
    /* Not visual card: kept minimal so grid keeps its own layout */
}
.f-sched-grid-wrap {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--f-surface);
}
.f-sched-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
    color: var(--f-text);
}
.f-sched-table thead {
    background: var(--f-surface-alt);
    color: var(--f-text-subtle);
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 var(--f-divider);
    line-height: 1.1;
}
.f-sched-table thead th {
    border-right: 1px solid var(--f-divider);
    border-bottom: 1px solid var(--f-divider);
    text-align: center;
    height: 40px;
    color: var(--f-text-subtle);
}
.f-sched-th-staff {
    position: sticky;
    left: 0;
    z-index: 30;
    background: var(--f-surface-alt);
    width: 160px;
    padding: 8px;
    text-align: left !important;
    color: var(--f-text-muted) !important;
    font-weight: 600;
}
.f-sched-th-hours {
    position: sticky;
    right: 0;
    z-index: 30;
    background: var(--f-surface-alt);
    width: 60px;
    padding: 6px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--f-text-subtle);
    border-left: 1px solid var(--f-divider);
}
.f-sched-th-day {
    color: var(--f-text-muted);
}
.f-sched-th-day .f-sched-dow {
    font-size: 9px;
    text-transform: uppercase;
    opacity: .7;
    display: block;
}
.f-sched-th-day .f-sched-daynum {
    font-size: 12px;
    font-weight: 700;
    display: block;
}
.f-sched-th-day.is-weekend {
    background: color-mix(in oklch, var(--f-danger) 10%, transparent);
    color: var(--f-danger);
}
.f-sched-th-day.is-weekend .f-sched-dow,
.f-sched-th-day.is-weekend .f-sched-daynum {
    color: var(--f-danger);
    opacity: 1;
}
.dark .f-sched-th-day.is-weekend {
    background: color-mix(in oklch, var(--f-danger) 14%, transparent);
}
.f-sched-th-day.is-today {
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
}
.f-sched-th-day.is-today .f-sched-dow,
.f-sched-th-day.is-today .f-sched-daynum { opacity: 1; font-weight: 700; }
.f-sched-section-row {
    background: var(--f-surface-sunken);
    font-weight: 600;
    color: var(--f-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.f-sched-section-row td {
    border-bottom: 1px solid var(--f-divider);
}
.f-sched-section-title-cell {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--f-surface-sunken);
    border-right: 1px solid var(--f-divider);
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f-sched-section-limit {
    font-size: 9px;
    background: var(--f-surface-alt);
    color: var(--f-text-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.f-sched-section-count {
    background: var(--f-surface-alt);
    border-right: 1px solid var(--f-divider);
    border-bottom: 1px solid var(--f-divider);
    text-align: center;
    font-size: 10px;
    padding: 2px;
    color: var(--f-text-muted);
}
.f-sched-section-count.is-weekend { background: color-mix(in oklch, var(--f-danger) 4%, transparent); }
.dark .f-sched-section-count.is-weekend { background: color-mix(in oklch, var(--f-danger) 6%, transparent); }
.f-sched-section-count .count-ok { color: var(--f-success, #10b981); font-weight: 700; }
.f-sched-section-count .count-under { color: var(--f-warning, #f97316); font-weight: 700; }
.f-sched-section-count .count-over { color: var(--f-danger, #dc2626); font-weight: 700; }
.f-sched-section-count .count-muted { color: var(--f-text-subtle); }
.f-sched-section-count .count-limit { font-size: 9px; color: var(--f-text-subtle); }

.f-sched-row:hover {
    background: var(--f-surface-alt);
}
.f-sched-staff-cell {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--f-surface);
    border-right: 1px solid var(--f-divider);
    border-bottom: 1px solid var(--f-divider);
    padding: 8px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .1s;
}
.f-sched-row:hover .f-sched-staff-cell { background: var(--f-surface-alt); }
.f-sched-staff-name {
    font-weight: 500;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-sched-staff-position {
    font-size: 10px;
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-sched-staff-avatar {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background-color: var(--f-surface-alt);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--f-divider);
}
.f-sched-cell {
    border-right: 1px solid var(--f-divider);
    border-bottom: 1px solid var(--f-divider);
    padding: 0;
    position: relative;
    vertical-align: top;
    height: 40px;
    cursor: pointer;
    transition: filter .08s;
}
.f-sched-cell:hover { filter: brightness(.96); }
.dark .f-sched-cell:hover { filter: brightness(1.1); }
.f-sched-cell.is-weekend {
    background: color-mix(in oklch, var(--f-danger) 4%, transparent);
}
.dark .f-sched-cell.is-weekend {
    background: color-mix(in oklch, var(--f-danger) 6%, transparent);
}
.f-sched-cell.is-selected {
    box-shadow: inset 0 0 0 2px var(--f-accent);
    z-index: 10;
}
.f-sched-cell.has-request {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f-warning, #f97316) 40%, transparent);
    background: color-mix(in srgb, var(--f-warning, #f97316) 8%, transparent);
}
.f-sched-cell.is-blocked {
    cursor: not-allowed;
    background: repeating-linear-gradient(135deg, transparent, transparent 3px,
        color-mix(in srgb, var(--f-text-subtle) 25%, transparent) 3px,
        color-mix(in srgb, var(--f-text-subtle) 25%, transparent) 4px);
}

/* ──────────────────────────────────────────────────────────────────────────
   К5 · Подложка часов работы заведения (open / closed)
   ────────────────────────────────────────────────────────────────────────── */
/* Закрытый день: лёгкий диагональный паттерн поверх любых базовых фонов.
   Через ::before чтобы не перебивать inline-style смены и .is-weekend. */
.f-sched-cell--venue-closed::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg,
        transparent, transparent 4px,
        color-mix(in srgb, var(--f-text-subtle) 14%, transparent) 4px,
        color-mix(in srgb, var(--f-text-subtle) 14%, transparent) 5px);
    z-index: 0;
}
.dark .f-sched-cell--venue-closed::before {
    background: repeating-linear-gradient(135deg,
        transparent, transparent 4px,
        color-mix(in srgb, var(--f-text-subtle) 22%, transparent) 4px,
        color-mix(in srgb, var(--f-text-subtle) 22%, transparent) 5px);
}
/* Контент смены и hover/selected рамки должны быть выше паттерна */
.f-sched-cell--venue-closed > * { position: relative; z-index: 1; }

/* Рабочий день: тонкая полоска снизу ячейки в акцентном цвете заведения. */
.f-sched-cell--venue-open::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    background: color-mix(in srgb, var(--f-accent) 55%, transparent);
    z-index: 1;
}
.dark .f-sched-cell--venue-open::after {
    background: color-mix(in srgb, var(--f-accent) 70%, transparent);
}

/* Шапка дня — то же поведение для подсказки на «закрытый день». */
.f-sched-th-day.f-sched-th-day--venue-closed {
    background: repeating-linear-gradient(135deg,
        transparent, transparent 4px,
        color-mix(in srgb, var(--f-text-subtle) 12%, transparent) 4px,
        color-mix(in srgb, var(--f-text-subtle) 12%, transparent) 5px);
}
.dark .f-sched-th-day.f-sched-th-day--venue-closed {
    background: repeating-linear-gradient(135deg,
        transparent, transparent 4px,
        color-mix(in srgb, var(--f-text-subtle) 20%, transparent) 4px,
        color-mix(in srgb, var(--f-text-subtle) 20%, transparent) 5px);
}
.f-sched-th-day.f-sched-th-day--venue-open {
    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--f-accent) 55%, transparent);
}
.dark .f-sched-th-day.f-sched-th-day--venue-open {
    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--f-accent) 70%, transparent);
}

/* Section-count row — повторяем индикатор, чтобы колонка была визуально единой. */
.f-sched-section-count.f-sched-section-count--venue-closed {
    background-image: repeating-linear-gradient(135deg,
        transparent, transparent 4px,
        color-mix(in srgb, var(--f-text-subtle) 10%, transparent) 4px,
        color-mix(in srgb, var(--f-text-subtle) 10%, transparent) 5px);
}
.dark .f-sched-section-count.f-sched-section-count--venue-closed {
    background-image: repeating-linear-gradient(135deg,
        transparent, transparent 4px,
        color-mix(in srgb, var(--f-text-subtle) 18%, transparent) 4px,
        color-mix(in srgb, var(--f-text-subtle) 18%, transparent) 5px);
}

.f-sched-hours-cell {
    position: sticky;
    right: 0;
    z-index: 10;
    background: var(--f-surface);
    border-left: 1px solid var(--f-divider);
    border-bottom: 1px solid var(--f-divider);
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--f-text-muted);
    transition: background-color .1s;
}
.f-sched-row:hover .f-sched-hours-cell { background: var(--f-surface-alt); }
.f-sched-hours-badge {
    background: var(--f-surface-alt);
    color: var(--f-text);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Frime v2 · Schedule modals (Shift / Review)
   ────────────────────────────────────────────────────────────────────────── */
.f-sched-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .16s ease-out;
    backdrop-filter: blur(3px);
}
.f-sched-modal-overlay.is-open { opacity: 1; }
.f-sched-modal-overlay.hidden { display: none; }
.f-sched-modal {
    width: 100%;
    max-width: 440px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 14px);
    box-shadow: var(--f-shadow-lg, 0 18px 40px -12px rgba(0, 0, 0, .28));
    overflow: hidden;
    transform: translateY(6px) scale(.98);
    opacity: 0;
    transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out;
}
.f-sched-modal--sm { max-width: 380px; }
.f-sched-modal-overlay.is-open .f-sched-modal { transform: translateY(0) scale(1); opacity: 1; }

.f-sched-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px 16px;
    border-bottom: 1px solid var(--f-divider);
}
.f-sched-modal-head-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--f-warning-soft);
    color: var(--f-warning);
    flex-shrink: 0;
}
.f-sched-modal-head-text {
    flex: 1;
    min-width: 0;
}
.f-sched-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--f-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f-sched-modal-subtitle {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f-sched-modal-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    color: var(--f-text-subtle);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .12s, color .12s;
    flex-shrink: 0;
}
.f-sched-modal-close:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

.f-sched-modal-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.f-sched-modal-section { display: flex; flex-direction: column; gap: 6px; }
.f-sched-modal-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.f-sched-modal-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}
.f-sched-modal-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--f-border);
    border-radius: 7px;
    background: var(--f-surface);
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.f-sched-modal-input:focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-accent) 15%, transparent);
}
.f-sched-modal-textarea {
    resize: vertical;
    min-height: 52px;
    line-height: 1.4;
    font-variant-numeric: normal;
    text-align: left;
}

.f-sched-modal-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.f-sched-preset-chip {
    display: grid;
    grid-template-columns: 10px auto 1fr auto;
    align-items: center;
    column-gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--f-border);
    border-radius: 7px;
    background: var(--f-surface);
    color: var(--f-text);
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
    text-align: left;
    min-width: 0;
}
.f-sched-preset-chip:hover {
    border-color: var(--f-border-strong, var(--f-border));
    background: var(--f-surface-alt);
}
.f-sched-preset-chip.is-selected {
    border-color: var(--f-accent);
    background: var(--f-accent-soft);
}
.f-sched-preset-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.f-sched-preset-chip-code {
    font-size: 11px;
    font-weight: 700;
    color: var(--f-text);
}
.f-sched-preset-chip-title {
    font-size: 10.5px;
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.f-sched-preset-chip-time {
    font-size: 10px;
    color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums;
}

.f-sched-modal-note {
    background: var(--f-surface-alt);
    border: 1px solid var(--f-divider);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--f-text-muted);
    font-style: italic;
    line-height: 1.4;
}
.f-sched-modal-note.is-empty { color: var(--f-text-subtle); }

.f-sched-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--f-divider);
    background: var(--f-surface-sunken);
}
.f-sched-modal-foot-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}
.f-sched-modal-danger,
.f-sched-modal-danger:hover {
    color: var(--f-danger) !important;
}
.f-sched-modal-danger:hover {
    background: var(--f-danger-soft) !important;
}

/* ── Staff v2 ──────────────────────────────────────────────────────────── */
.f-staff-section-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-divider);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--f-text-subtle);
    font-weight: 700;
}
.f-staff-section-count {
    color: var(--f-text-subtle);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0;
}

.f-staff-row {
    min-height: 64px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 110px 110px 120px 120px 32px;
    align-items: center;
    column-gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--f-divider);
    cursor: pointer;
    transition: background-color .1s;
}
.f-staff-row:hover {
    background: var(--f-surface-alt);
}
.f-staff-row.is-last {
    border-bottom: none;
}

.f-staff-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
    user-select: none;
    letter-spacing: 0.3px;
}
img.f-staff-avatar,
.f-staff-avatar--img {
    object-fit: cover;
    background: var(--f-surface-alt);
}

.f-staff-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.f-staff-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    min-width: 0;
}
.f-staff-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-staff-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.f-staff-row-sub {
    font-size: 11px;
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* В grid-layout .f-staff-row-stats больше не нужен как flex-обёртка —
   stats размещаются прямо в grid. Оставляем класс как пустой wrapper. */
.f-staff-row-stats {
    display: contents;
}
.f-staff-stat {
    text-align: right;
    min-width: 0;
}
.f-staff-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--f-text-subtle);
    font-weight: 600;
}
.f-staff-stat-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.f-staff-row-badge {
    flex-shrink: 0;
}
.f-staff-row-kebab {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity .15s;
}
.f-staff-row:hover .f-staff-row-kebab {
    opacity: 1;
}

@media (max-width: 1024px) {
    .f-staff-row {
        grid-template-columns: 40px minmax(0, 1fr) 100px 32px;
    }
    .f-staff-row-stats .f-staff-stat:nth-child(n+2) { display: none; }
}
@media (max-width: 768px) {
    .f-staff-row {
        grid-template-columns: 40px minmax(0, 1fr) 32px;
    }
    .f-staff-row-stats { display: none; }
    .f-staff-row-badge { display: none; }
}

/* Multi-select popover для chip "Секция" (staff) */
.f-staff-section-menu {
    position: fixed;
    z-index: 70;
    min-width: 240px;
    max-width: 320px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 6px;
    color: var(--f-text);
    animation: f-mp-in .12s ease-out;
}
.f-staff-section-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow: auto;
}
.f-staff-section-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--f-text);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background-color .1s;
}
.f-staff-section-menu-item:hover {
    background: var(--f-surface-alt);
}
.f-staff-section-menu-item.is-active {
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
    font-weight: 500;
}
.f-staff-section-menu-item.is-active:hover {
    background: var(--f-accent-soft-hover, var(--f-accent-soft));
}
.f-staff-section-menu-check {
    flex-shrink: 0;
    color: var(--f-text-subtle);
    font-size: 18px;
}
.f-staff-section-menu-item.is-active .f-staff-section-menu-check {
    color: var(--f-accent);
}
.f-staff-section-menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-staff-section-menu-count {
    flex-shrink: 0;
    color: var(--f-text-subtle);
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: right;
}
.f-staff-section-menu-sep {
    height: 1px;
    background: var(--f-divider);
    margin: 4px 0;
}

/* ── Staff Detail v2 ─────────────────────────────────────────────────── */

.f-staff-detail-root {
    /* Нет внешнего padding — TopBar и sub-tabs идут до краёв на полную ширину.
       padding живёт у #staff-detail-body (см. ниже). */
    max-width: 1280px;
    margin: 0 auto;
}
#staff-detail-body {
    padding: 16px 20px 24px;
}

/* ── Staff Detail Tabs ── */
/* Sub-tabs — подстрока хедера, как в макете screen-staff.jsx:24.
   Не pill-контейнер, а низкий ряд с нижней границей под topbar. */
.f-staff-detail-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 16px;
    background: var(--f-surface);
    border-bottom: 1px solid var(--f-border);
    overflow-x: auto;
}
.f-staff-detail-tab {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s, color .1s;
    font-family: inherit;
}
.f-staff-detail-tab:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}
.f-staff-detail-tab--active {
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
    font-weight: 600;
}

.f-staff-detail-empty {
    padding: 60px 16px;
    text-align: center;
    color: var(--f-text-subtle);
}
.f-staff-detail-empty-icon {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 12px;
}
.f-staff-detail-empty-icon .ph {
    font-size: 48px !important;
}
.f-staff-detail-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--f-text-muted);
    margin-bottom: 4px;
}
.f-staff-detail-empty-text {
    font-size: 12px;
    color: var(--f-text-subtle);
}

.f-staff-detail-loading {
    padding: 40px 16px;
    text-align: center;
    color: var(--f-text-subtle);
    font-size: 12px;
}
.f-staff-detail-error {
    padding: 28px 16px;
    text-align: center;
    color: var(--f-danger);
    font-size: 13px;
}

/* Hero */
.f-staff-detail-hero {
    display: flex;
    gap: 20px;
    padding: 20px 22px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg);
    box-shadow: var(--f-shadow-sm);
    margin-bottom: 16px;
    align-items: stretch;
}
.f-staff-detail-hero-avatar-wrap {
    flex-shrink: 0;
}
.f-staff-detail-hero-avatar,
.f-staff-detail-hero-avatar-img {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    overflow: hidden;
    object-fit: cover;
}
.f-staff-detail-hero-avatar-img {
    background: var(--f-surface-alt);
}
.f-staff-detail-hero-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.f-staff-detail-hero-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--f-text);
    line-height: 1.15;
}
.f-staff-detail-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.f-staff-detail-hero-meta {
    font-size: 12px;
    color: var(--f-text-muted);
    line-height: 1.4;
}
.f-staff-detail-hero-contacts {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--f-text-muted);
    flex-wrap: wrap;
}
.f-staff-detail-hero-contacts a {
    color: var(--f-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.f-staff-detail-hero-contacts a:hover {
    color: var(--f-accent);
    text-decoration: underline;
}
.f-staff-detail-hero-kpis {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
.f-staff-detail-kpi {
    padding: 0 18px;
    border-left: 1px solid var(--f-divider);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 92px;
}
.f-staff-detail-kpi:first-child {
    padding-left: 0;
    border-left: none;
}
.f-staff-detail-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--f-text-subtle);
    letter-spacing: 0.4px;
    font-weight: 700;
}
.f-staff-detail-kpi-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
    margin-top: 4px;
    line-height: 1.15;
}

/* KV cards grid */
.f-staff-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.f-staff-detail-card {
    padding: 16px 18px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg);
    box-shadow: var(--f-shadow-sm);
}
.f-staff-detail-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--f-text-subtle);
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}
.f-staff-detail-card a {
    color: var(--f-accent);
    text-decoration: none;
}
.f-staff-detail-card a:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .f-staff-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .f-staff-detail-hero { flex-wrap: wrap; }
    .f-staff-detail-hero-kpis { width: 100%; padding-top: 14px; border-top: 1px solid var(--f-divider); }
    .f-staff-detail-kpi:first-child { padding-left: 0; }
}
@media (max-width: 640px) {
    .f-staff-detail-grid { grid-template-columns: 1fr; }
    .f-staff-detail-hero-kpis { flex-wrap: wrap; gap: 10px; }
    .f-staff-detail-kpi {
        border-left: none;
        padding: 0;
        min-width: 46%;
    }
}

/* Summary-карточка «Оплата труда» в табе «Профиль» — кликабельна, ведёт в таб «Зарплата» */
.f-staff-detail-card--link {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.f-staff-detail-card--link:hover {
    background: var(--f-surface-hover, var(--f-surface));
    border-color: var(--f-border-strong, var(--f-border));
}
.f-staff-detail-card--link:active {
    transform: translateY(1px);
}
.f-staff-detail-card-link-icon {
    font-size: 16px !important;
    vertical-align: -3px;
    margin-left: 4px;
    color: var(--f-text-subtle);
}

/* Должность — кликабельный триггер модалки смены должности с датой */
.f-sd-position-trigger {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, border-color .12s ease;
}
.f-sd-position-trigger:hover {
    background: var(--f-surface-hover, var(--f-surface));
    border-color: var(--f-border, transparent);
}
.f-sd-position-trigger:focus-visible {
    outline: none;
    border-color: var(--f-accent, var(--f-border-strong));
}

/* Sub-actions внутри карточек (Интеграции, Контакты): «Сбросить пароль», «Сбросить PIN», «Заблокировать» */
.f-sd-int-subaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--f-border, rgba(0,0,0,.12));
    border-radius: 6px;
    background: transparent;
    color: var(--f-text, inherit);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.f-sd-int-subaction + .f-sd-int-subaction {
    margin-left: 6px;
}
.f-sd-int-subaction:hover {
    background: var(--f-surface-hover, var(--f-surface));
    border-color: var(--f-border-strong, var(--f-border));
}
.f-sd-int-subaction .material-symbols-rounded,
.f-sd-int-subaction .material-symbols-outlined,
.f-sd-int-subaction .ph {
    font-size: 14px;
}
.f-sd-int-subaction--danger {
    color: var(--f-danger, #c53030);
}
.f-sd-int-subaction--danger:hover {
    background: var(--f-danger-soft, rgba(197, 48, 48, .08));
    border-color: var(--f-danger, #c53030);
}

/* ── Модалка карточки сотрудника (смена должности, пароль) ─────────────── */
.f-sd-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.f-sd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}
.f-sd-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--f-surface);
    color: var(--f-text);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 14px);
    box-shadow: var(--f-shadow-lg, 0 18px 40px -12px rgba(0,0,0,.28));
    padding: 18px 18px 16px;
}
.f-sd-modal-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
}
.f-sd-modal-body { display: flex; flex-direction: column; gap: 12px; }
.f-sd-modal-row { display: flex; flex-direction: column; gap: 6px; }
.f-sd-modal-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--f-text-subtle);
}
.f-sd-modal-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-md, 8px);
    background: var(--f-surface-sunken, var(--f-surface));
    color: var(--f-text);
    font: inherit;
    font-size: 13px;
}
.f-sd-modal-input:focus {
    outline: none;
    border-color: var(--f-accent, var(--f-border-strong));
    box-shadow: 0 0 0 3px var(--f-accent-soft, rgba(99,102,241,.15));
}
.f-sd-modal-hint {
    font-size: 12px;
    color: var(--f-text-subtle);
    background: var(--f-surface-sunken, var(--f-bg));
    border: 1px solid var(--f-border);
    border-radius: var(--r-md, 8px);
    padding: 8px 10px;
}
.f-sd-modal-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.f-sd-modal-checkbox input { margin: 0; }
.f-sd-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.f-sd-pwd-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.f-sd-pwd-row .f-sd-modal-input { flex: 1; }
.f-sd-modal-danger-link {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md, 8px);
    padding: 6px 8px;
    color: var(--f-danger, #c53030);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    transition: background .12s ease, border-color .12s ease;
}
.f-sd-modal-danger-link:hover {
    background: var(--f-danger-soft, rgba(197,48,48,.08));
    border-color: var(--f-danger, #c53030);
}
.f-sd-modal-danger-link .ph { font-size: 14px; }
.f-sd-date-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-md, 8px);
    background: var(--f-surface-sunken, var(--f-surface));
    color: var(--f-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.f-sd-date-trigger:hover { border-color: var(--f-border-strong, var(--f-border)); }
.f-sd-date-trigger:focus-visible {
    outline: none;
    border-color: var(--f-accent, var(--f-border-strong));
    box-shadow: 0 0 0 3px var(--f-accent-soft, rgba(99,102,241,.15));
}
.f-sd-date-trigger .ph { font-size: 16px; color: var(--f-accent, var(--f-text-subtle)); }

/* ── Таб «Зарплата» ──────────────────────────────────────────────────── */
.f-staff-detail-salary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.f-staff-detail-salary-rates { grid-column: span 1; }
.f-staff-detail-salary-advance { grid-column: span 1; }
.f-staff-detail-salary-contract { grid-column: span 2; }

@media (max-width: 1024px) {
    .f-staff-detail-salary { grid-template-columns: 1fr; }
    .f-staff-detail-salary-rates,
    .f-staff-detail-salary-advance,
    .f-staff-detail-salary-contract { grid-column: span 1; }
}

/* Блок вычисления ставок */
.f-sd-rates-box {
    background: var(--f-surface-sunken, var(--f-bg));
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.f-sd-rates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
.f-sd-rate-col {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: 1px dashed transparent;
}
.f-sd-rate-col--active {
    background: var(--f-surface);
    border: 1px solid var(--f-accent, var(--f-border-strong, var(--f-border)));
}
.f-sd-rate-label {
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.f-sd-rate-value {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.f-sd-rates-current {
    border-top: 1px solid var(--f-divider, var(--f-border));
    padding-top: 8px;
    margin-top: 4px;
}
.f-sd-rates-current-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.f-sd-rates-current-row + .f-sd-rates-current-row {
    margin-top: 6px;
}
.f-sd-rates-current-label {
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.f-sd-rates-current-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}
.f-sd-rate-mult {
    font-size: 12px;
    color: var(--f-text-subtle);
}
.f-sd-rate-source {
    font-size: 12px;
    color: var(--f-text-subtle);
}
.f-sd-rates-hint {
    font-size: 12px;
    color: var(--f-text-subtle);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--f-border);
}

/* Редактируемые поля в табе «Зарплата» */
.f-sd-salary-fields {
    display: flex;
    flex-direction: column;
}
.f-kv-note {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin: -4px 0 10px 0;
    line-height: 1.4;
}
.f-sd-readonly-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--f-border);
}
.f-sd-help-icon {
    font-size: 12px !important;
    vertical-align: -2px;
    margin-left: 4px;
    color: var(--f-text-subtle);
    cursor: help;
}

/* ── InlineEdit ───────────────────────────────────────────────────────
 * Per-field click-to-edit (Notion/Linear стиль). Используется в карточке
 * сотрудника; универсален — применим к любым KV-таблицам.
 */
.f-ie-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.1s;
    min-width: 0;
    max-width: 100%;
}
.f-ie-value[data-editable="1"] { cursor: pointer; }
.f-ie-value[data-editable="1"]:hover { background: var(--f-surface-alt); }
.f-ie-value .f-ie-display {
    min-width: 0;
    /* Разрешаем перенос вместо ellipsis — даты/имена/телефоны не режутся. */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}
.f-ie-pencil {
    opacity: 0;
    font-size: 12px !important;
    color: var(--f-text-subtle);
    transition: opacity 0.1s;
    flex-shrink: 0;
}
.f-ie-value[data-editable="1"]:hover .f-ie-pencil { opacity: 1; }

.f-ie-input {
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 4px 6px;
    font-size: 13px;
    color: var(--f-text);
    background: var(--f-surface);
    width: 100%;
    min-width: 120px;
    outline: none;
    font-family: inherit;
    line-height: 1.3;
}
.f-ie-input:focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--f-accent) 15%, transparent);
}
.f-ie-input--error {
    border-color: var(--f-danger);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--f-danger) 15%, transparent);
}
.f-ie-input:disabled { opacity: 0.6; cursor: wait; }

.f-ie-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
    flex-shrink: 0;
}
.f-ie-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
}
.f-ie-btn:disabled { opacity: 0.5; cursor: wait; }
.f-ie-btn--save { color: var(--f-success); }
.f-ie-btn--save:hover:not(:disabled) { background: var(--f-success-soft); }
.f-ie-btn--cancel { color: var(--f-text-subtle); }
.f-ie-btn--cancel:hover:not(:disabled) { background: var(--f-surface-alt); }

/* ── InlineEdit · Popover (для type='select') ─────────────────────── */
.f-ie-popover {
    position: fixed;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 4px;
    min-width: 200px;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1000;
}
.f-ie-popover-search-wrap {
    padding: 4px;
    border-bottom: 1px solid var(--f-divider);
    margin-bottom: 4px;
    position: sticky;
    top: 0;
    background: var(--f-surface);
    z-index: 1;
}
.f-ie-popover-search {
    width: 100%;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    font-size: 12px;
    color: var(--f-text);
    background: var(--f-surface-alt);
    outline: none;
    font-family: inherit;
}
.f-ie-popover-search:focus {
    border-color: var(--f-accent);
    background: var(--f-surface);
}
.f-ie-popover-list { display: flex; flex-direction: column; gap: 0; }
.f-ie-popover-item {
    padding: 6px 10px;
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--f-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f-ie-popover-item:hover { background: var(--f-surface-alt); }
.f-ie-popover-item--active {
    background: var(--f-accent-soft);
    color: var(--f-accent-text, var(--f-accent));
    font-weight: 500;
}
.f-ie-popover-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--f-text-subtle);
}

/* Date-input UX: курсор на индикаторе + нормализация высоты */
.f-ie-input[type="date"] {
    min-height: 28px;
}
.f-ie-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
}
.f-ie-input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ── InlinePickerWithSearch ────────────────────────────────────────────
 * Display-mode: единый click-target (hover → pencil справа).
 * Popover: 320px × max-height 360px с поиском + kebab + group-заголовками.
 */
.f-ip-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.1s;
    min-width: 0;
    max-width: 100%;
}
.f-ip-value[data-editable="1"] { cursor: pointer; }
.f-ip-value[data-editable="1"]:hover { background: var(--f-surface-alt); }
.f-ip-value .f-ip-display {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.f-ip-placeholder { color: var(--f-text-subtle); }
.f-ip-pencil {
    opacity: 0;
    font-size: 12px !important;
    color: var(--f-text-subtle);
    transition: opacity 0.1s;
    flex-shrink: 0;
}
.f-ip-value[data-editable="1"]:hover .f-ip-pencil { opacity: 1; }

.f-ip-popover {
    position: fixed;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    width: 320px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}
.f-ip-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--f-divider);
    background: var(--f-surface);
    flex-shrink: 0;
}
.f-ip-search {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 5px 8px;
    font-size: 13px;
    color: var(--f-text);
    background: var(--f-surface-alt);
    outline: none;
    font-family: inherit;
}
.f-ip-search:focus {
    border-color: var(--f-accent);
    background: var(--f-surface);
}
.f-ip-kebab,
.f-ip-close {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--f-text-subtle);
    cursor: pointer;
    border-radius: var(--r-sm);
    padding: 0;
}
.f-ip-kebab:hover,
.f-ip-close:hover { background: var(--f-surface-alt); color: var(--f-text); }
.f-ip-kebab .ph,
.f-ip-close .ph { font-size: 18px; }

.f-ip-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.f-ip-group-title {
    padding: 8px 8px 4px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--f-text-subtle);
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--f-surface);
    z-index: 1;
}
.f-ip-item {
    padding: 7px 10px;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--f-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.3;
}
.f-ip-item:hover:not(.f-ip-item--disabled) { background: var(--f-surface-alt); }
.f-ip-item--active {
    background: var(--f-accent-soft);
    color: var(--f-accent-text, var(--f-accent));
    font-weight: 500;
}
.f-ip-item--disabled {
    color: var(--f-text-subtle);
    cursor: not-allowed;
    opacity: 0.55;
}
.f-ip-item--clear {
    color: var(--f-text-subtle);
    font-style: italic;
    border-bottom: 1px solid var(--f-divider);
    margin-bottom: 2px;
    padding-bottom: 8px;
}
.f-ip-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-ip-item-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--f-text-subtle);
    font-weight: normal;
}
.f-ip-empty,
.f-ip-error {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--f-text-subtle);
}
.f-ip-error { color: var(--f-danger, #c33); }

/* Kebab menu (popup рядом с popover-кебабом) */
.f-ip-kebab-menu {
    position: fixed;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 4px;
    min-width: 220px;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.f-ip-kebab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--f-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.f-ip-kebab-item:hover { background: var(--f-surface-alt); }
.f-ip-kebab-item .ph {
    font-size: 16px;
    color: var(--f-text-subtle);
}

/* ── Staff Documents (Шаг 4) ───────────────────────────────────────────── */
.f-staff-docs-section { }
.f-staff-docs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.f-staff-docs-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--f-text);
}
.f-staff-docs-list { display: flex; flex-direction: column; gap: 18px; }
.f-staff-docs-group-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--f-text-subtle);
    font-weight: 700;
    margin-bottom: 8px;
}
.f-staff-docs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}
.f-staff-doc-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    transition: border-color .1s;
}
.f-staff-doc-card:hover { border-color: var(--f-border-strong); }
.f-staff-doc-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.f-staff-doc-icon .ph { font-size: 20px !important; }
.f-staff-doc-main {
    flex: 1;
    min-width: 0;
}
.f-staff-doc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-staff-doc-meta {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 3px;
    line-height: 1.4;
}
.f-staff-doc-note {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 4px;
    font-style: italic;
}
.f-staff-doc-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.f-staff-doc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.f-staff-doc-form-row label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--f-text-subtle);
    font-weight: 700;
    margin-bottom: 5px;
}

/* ── MiniDatePicker ────────────────────────────────────────────────────── */
.f-mdp {
    position: absolute;
    z-index: 1200;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 10px;
    width: 252px;
    min-width: 252px;
    user-select: none;
    font-family: inherit;
}
.f-mdp-typed-wrap {
    margin-bottom: 8px;
}
.f-mdp-typed {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    background: var(--f-bg, var(--f-surface));
    color: var(--f-text);
    font-size: 13px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    text-align: center;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.f-mdp-typed::placeholder {
    color: var(--f-text-subtle);
    letter-spacing: 0.5px;
}
.f-mdp-typed:focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 2px var(--f-accent-soft, rgba(99, 102, 241, 0.18));
}
.f-mdp-typed.is-invalid {
    border-color: var(--f-danger);
    box-shadow: 0 0 0 2px var(--f-danger-soft, rgba(239, 68, 68, 0.18));
}
.f-mdp-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.f-mdp-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    text-transform: capitalize;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-family: inherit;
    transition: background .1s;
}
.f-mdp-title:hover {
    background: var(--f-surface-alt);
}
.f-mdp-title--static {
    cursor: default;
    padding: 4px 0;
}
.f-mdp-title--static:hover {
    background: transparent;
}
.f-mdp-title-caret {
    color: var(--f-text-muted);
    opacity: 0.7;
}
.f-mdp-nav {
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    color: var(--f-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, color .1s;
}
.f-mdp-nav:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}
.f-mdp-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.f-mdp-dow-cell {
    text-align: center;
    font-size: 10px;
    color: var(--f-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 0;
}
.f-mdp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.f-mdp-day {
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--f-text);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transition: background .1s, color .1s;
    font-family: inherit;
    padding: 0;
}
.f-mdp-day:hover:not(.f-mdp-day--disabled) {
    background: var(--f-surface-alt);
}
.f-mdp-day--other { color: var(--f-text-subtle); }
.f-mdp-day--today {
    box-shadow: inset 0 0 0 1px var(--f-accent);
    font-weight: 600;
}
.f-mdp-day--selected {
    background: var(--f-accent);
    color: var(--f-accent-on, #fff);
    font-weight: 600;
}
.f-mdp-day--selected:hover { background: var(--f-accent-hover, var(--f-accent)); }
.f-mdp-day--disabled {
    color: var(--f-text-subtle);
    opacity: 0.4;
    cursor: not-allowed;
}
.f-mdp-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--f-divider);
}
.f-mdp-action {
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--f-text-muted);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: background .1s, color .1s;
}
.f-mdp-action:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

/* MiniDatePicker — drilldown сетки месяцев и лет */
.f-mdp-grid-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px 0;
}
.f-mdp-grid-years {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px 0;
}
.f-mdp-grid-item {
    border: none;
    background: transparent;
    color: var(--f-text);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    padding: 10px 4px;
    text-align: center;
    text-transform: capitalize;
    transition: background .1s, color .1s;
}
.f-mdp-grid-item:hover:not(.is-disabled):not(.is-selected) {
    background: var(--f-surface-alt);
}
.f-mdp-grid-item.is-today {
    box-shadow: inset 0 0 0 1px var(--f-accent);
    font-weight: 600;
}
.f-mdp-grid-item.is-selected {
    background: var(--f-accent);
    color: var(--f-accent-on, #fff);
    font-weight: 600;
}
.f-mdp-grid-item.is-selected:hover {
    background: var(--f-accent-hover, var(--f-accent));
}
.f-mdp-grid-item.is-disabled {
    color: var(--f-text-subtle);
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
 * Dish card (/menu/nomenclature/dish/:id) — Фаза 3
 *
 * Read-only страница: breadcrumbs + шапка + табы + контент + sidebar.
 * Все цвета через var(--f-*) — никакого Tailwind-хардкода.
 * ════════════════════════════════════════════════════════════════════ */

/* Layout root */
.dish-card-root {
    background: var(--f-bg);
    color: var(--f-text);
    min-height: 100%;
    font-size: 12px;
    font-family: inherit;
}

.dish-card-page {
    display: flex;
    min-height: calc(100vh - 52px);
    align-items: stretch;
}

.dish-card-main {
    flex: 1;
    min-width: 0;
    padding: 20px 28px 60px;
    overflow-x: auto;
}

.dish-sidebar {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid var(--f-border);
    background: var(--f-surface);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: stretch;
}

/* DishCard page title block (большой заголовок + meta под TopBar) */
.dish-page-title-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 0 20px;
    margin-bottom: 4px;
}

.dish-page-title-main {
    flex: 1;
    min-width: 0;
}

.dish-page-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--f-text);
    line-height: 1.25;
    margin: 0 0 8px;
}

.dish-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--f-text-muted);
}

.dish-page-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}

.dish-page-meta-link {
    color: var(--f-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color .12s ease-out;
}

.dish-page-meta-link:hover {
    color: var(--f-text);
    text-decoration: underline;
}

.dish-page-meta-sep {
    color: var(--f-border-strong);
}

.dish-page-meta-tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dish-page-title-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

/* DishCard TopBar meta (filtersRow под title) */
.dish-topbar-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--f-text-muted);
}

.dish-topbar-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.dish-topbar-meta-tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Tab bar */
.dish-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--f-border);
    margin-bottom: 22px;
}

/* Tabs внутри TopBar — убираем двойной border-bottom и нижний margin */
.f-topbar-tabs .dish-tabs {
    border-bottom: 0;
    margin-bottom: 0;
}

.dish-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--f-text-muted);
    border: 0;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .12s;
    font-family: inherit;
}

.dish-tab:hover {
    color: var(--f-text);
}

.dish-tab--active {
    color: var(--f-accent-text);
    border-bottom-color: var(--f-accent);
}

.dish-tab-body {
    min-height: 200px;
}

.dish-tab-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    color: var(--f-text-muted);
}

.dish-tab-placeholder-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--f-text);
    margin-bottom: 4px;
}

.dish-tab-placeholder-text {
    font-size: 12px;
    color: var(--f-text-subtle);
}

/* ── Overview tab ─────────────────────────────────────────── */

.dish-overview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dish-hero {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.dish-hero-photo {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--f-border);
    overflow: hidden;
    background: linear-gradient(135deg, var(--f-accent-soft), var(--f-surface-sunken));
}

.dish-hero-photo--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--f-accent-text);
}

.dish-hero-photo-caption {
    font-size: 11px;
    opacity: .6;
}

.dish-hero-kpi {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.dish-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
}

.dish-kpi-card {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: var(--f-shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dish-kpi-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.dish-kpi-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}

.dish-kpi-value--compact {
    font-size: 19px;
}

.dish-kpi-stars {
    font-size: 13px;
    color: #d97706;
}

.dish-kpi-delta-row {
    margin-top: 6px;
    min-height: 18px;
}

.dish-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: var(--r-pill);
}

.dish-kpi-delta--pos {
    color: var(--f-success);
    background: var(--f-success-soft);
}

.dish-kpi-delta--neg {
    color: var(--f-danger);
    background: var(--f-danger-soft);
}

.dish-kpi-delta--zero {
    color: var(--f-text-muted);
    background: var(--f-surface-alt);
}

.dish-kpi-sub {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 6px;
}

/* Card section helpers inside tab body */
.dish-card-section {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    box-shadow: var(--f-shadow-sm);
}

.dish-card-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
    margin-bottom: 12px;
}

/* Bar chart (sales 14d) */
.dish-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 60px;
}

.dish-bar-col {
    flex: 1;
    background: var(--f-accent);
    border-radius: 3px 3px 0 0;
    opacity: .72;
    min-height: 2px;
    transition: opacity .12s;
}

.dish-bar-col:hover {
    opacity: 1;
}

/* Hour rows (peak hours) */
.dish-hour-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.dish-hour-row:last-child {
    margin-bottom: 0;
}

.dish-hour-label {
    font-size: 11px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    width: 80px;
    flex-shrink: 0;
}

.dish-hour-track {
    flex: 1;
    height: 8px;
    background: var(--f-surface-alt);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.dish-hour-fill {
    height: 100%;
    background: var(--f-accent);
    border-radius: var(--r-pill);
    opacity: .75;
}

.dish-hour-val {
    font-size: 11px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    width: 28px;
    text-align: right;
}

.dish-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    color: var(--f-text-muted);
    font-size: 12px;
}

/* ── Composition tab ──────────────────────────────────────── */

.dish-composition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dish-composition-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--f-text);
}

.dish-composition-actions {
    display: flex;
    gap: 8px;
}

/* Revision chip */
.dish-rev-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    color: var(--f-text);
    font-size: 11.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

.dish-rev-chip:hover {
    background: var(--f-surface-alt);
}

.dish-rev-chip[data-open="1"] {
    background: var(--f-accent-soft);
    border-color: var(--f-accent-soft);
    color: var(--f-accent-text);
}

.dish-rev-popover {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: var(--f-shadow-lg);
    padding: 4px;
    max-height: 360px;
    overflow-y: auto;
}

.dish-rev-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s;
}

.dish-rev-item:hover {
    background: var(--f-surface-alt);
}

.dish-rev-item--active {
    background: var(--f-accent-soft);
}

.dish-rev-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dish-rev-item-title {
    font-size: 12px;
    color: var(--f-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Archive badge */
.dish-archive-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin-bottom: 14px;
    background: var(--f-warning-soft);
    border: 1px solid var(--f-warning-soft);
    border-radius: var(--r-md);
    color: var(--f-warning);
    font-size: 12px;
    line-height: 1.4;
}

/* Margin calc block (3 columns) */
.dish-calc-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg);
    box-shadow: var(--f-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.dish-calc-col {
    padding: 16px 20px;
    border-left: 1px solid var(--f-border);
}

.dish-calc-col:first-child {
    border-left: none;
}

.dish-calc-col--margin {
    background: var(--f-success-soft);
}

.dish-calc-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
    margin-bottom: 8px;
}

.dish-calc-col--margin .dish-calc-label {
    color: var(--f-success);
}

.dish-calc-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dish-calc-value--muted {
    color: var(--f-text-muted);
}

.dish-calc-value--success {
    color: var(--f-success);
}

.dish-calc-sub {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 6px;
}

.dish-calc-sub--success {
    color: var(--f-success);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Ingredient table */
.dish-composition-table-wrap {
    margin-bottom: 14px;
}

.dish-composition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    /* table-layout:fixed нужен чтобы колонки не «прыгали» при
       раскрытии sub-items; ширины заданы в <colgroup>. */
    table-layout: fixed;
}

.dish-composition-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
    border-bottom: 1px solid var(--f-border);
    background: var(--f-surface-sunken);
    white-space: nowrap;
}

.dish-th-num {
    text-align: right;
}

.dish-composition-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--f-divider);
    vertical-align: middle;
    color: var(--f-text);
}

.dish-composition-table tr:last-child td {
    border-bottom: none;
}

.dish-composition-table tbody tr:not(.dish-total-row):not(.dish-subitems-row):hover td {
    background: var(--f-surface-alt);
}

.dish-row--warn td {
    background: var(--f-warning-soft);
}

.dish-row--warn:hover td {
    background: var(--f-warning-soft) !important;
    filter: brightness(.98);
}

.dish-row--danger td {
    background: var(--f-danger-soft);
}

.dish-row--danger:hover td {
    background: var(--f-danger-soft) !important;
    filter: brightness(.98);
}

.dish-row-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.dish-row-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--f-text-subtle);
    padding: 0;
    transition: background-color .12s, color .12s;
}

.dish-row-chevron:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

.dish-row-chevron-spacer {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.dish-row-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dish-row-num--strong {
    font-weight: 500;
}

.dish-row-num--accent {
    color: var(--f-accent-text);
}

.dish-row-supplier {
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dish-row-unit {
    color: var(--f-text-muted);
    font-size: 11px;
    text-align: center;
}

/* Sub-rows (вложенные ingredient-ы полуфабриката).
   Все строки в одной <table class="dish-composition-table">;
   глубина отображается через padding-left на первой ячейке
   (style="padding-left:XXpx" в inline), фон — более приглушённый. */
.dish-composition-table tr[data-depth]:not([data-depth="0"]) td {
    background: var(--f-surface-sunken);
    color: var(--f-text-muted);
    font-size: 11.5px;
}

.dish-composition-table tr[data-depth]:not([data-depth="0"]):hover td {
    background: var(--f-surface-alt);
}

.dish-row-name--sub {
    font-weight: 400;
    color: var(--f-text-muted);
}

.dish-row-name--muted {
    color: var(--f-text-subtle);
    font-style: italic;
}

.dish-sub-muted {
    color: var(--f-text-subtle);
    font-style: italic;
    font-size: 11px;
}

.dish-row--truncated td {
    background: var(--f-surface-sunken);
}

/* Total row */
.dish-total-row td {
    background: var(--f-surface-sunken);
    border-top: 1px solid var(--f-border);
    font-size: 12px;
}

.dish-total-summary {
    font-size: 11px;
    color: var(--f-text-muted);
}

.dish-total-diff-note {
    font-size: 10px;
    font-weight: 400;
    color: var(--f-text-subtle);
    margin-top: 2px;
    cursor: help;
}

/* Stock badges */
.dish-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.dish-stock--ok {
    color: var(--f-success);
}

.dish-stock--warn {
    color: var(--f-warning);
}

.dish-stock--empty {
    color: var(--f-danger);
}

.dish-stock--muted {
    color: var(--f-text-subtle);
}

/* Warning panel */
.dish-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--f-warning-soft);
    border: 1px solid var(--f-warning-soft);
    border-radius: var(--r-md);
    color: var(--f-warning);
    font-size: 12px;
    line-height: 1.5;
}

.dish-warning--danger {
    background: var(--f-danger-soft);
    border-color: var(--f-danger-soft);
    color: var(--f-danger);
}

/* ── Composition skeleton ─────────────────────────────────── */

@keyframes dish-skel-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: .25; }
}

.dish-composition-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dish-composition-skeleton-head {
    height: 88px;
    background: var(--f-surface-alt);
    border-radius: var(--r-lg);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

.dish-composition-skeleton-table {
    height: 280px;
    background: var(--f-surface-alt);
    border-radius: var(--r-lg);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

/* ── Page skeleton ────────────────────────────────────────── */

.dish-card-skel {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dish-card-skel > div {
    background: var(--f-surface-alt);
    border-radius: var(--r-md);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

.dish-card-skel-crumbs {
    height: 14px;
    width: 240px;
}

.dish-card-skel-title {
    height: 28px;
    width: 360px;
}

.dish-card-skel-tabs {
    height: 36px;
    width: 100%;
    max-width: 540px;
}

.dish-card-skel-hero {
    display: flex;
    gap: 20px;
    background: transparent !important;
    animation: none !important;
}

.dish-card-skel-photo {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: var(--r-lg) !important;
}

.dish-card-skel-kpi-grid {
    flex: 1;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: transparent !important;
    animation: none !important;
    border-radius: 0 !important;
}

.dish-card-skel-kpi {
    height: 88px;
    border-radius: var(--r-md);
}

.dish-card-skel-block {
    height: 240px;
}

/* ── Error + 404 states ───────────────────────────────────── */

.dish-error-state,
.dish-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    gap: 8px;
}

.dish-error-title,
.dish-404-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--f-text);
}

.dish-error-text,
.dish-404-text {
    font-size: 12px;
    color: var(--f-text-muted);
    margin-bottom: 8px;
}

/* ── Sidebar ──────────────────────────────────────────────── */

.dish-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dish-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--f-text-subtle);
    margin-bottom: 10px;
}

.dish-sidebar-empty {
    font-size: 11.5px;
    color: var(--f-text-subtle);
    padding: 8px 0;
    font-style: italic;
}

.dish-sidebar-section--alert {
    background: var(--f-danger-soft);
    border: 1px solid var(--f-danger-soft);
    border-radius: var(--r-md);
    padding: 10px 12px;
}

.dish-sidebar-stop {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.dish-sidebar-stop-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--f-danger);
}

.dish-sidebar-stop-ts {
    font-size: 11px;
    color: var(--f-danger);
    opacity: .8;
    margin-top: 1px;
}

.dish-pub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--f-divider);
    font-size: 12px;
}

.dish-pub-item:last-child {
    border-bottom: none;
}

.dish-pub-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--f-border-strong);
}

.dish-pub-dot--ok {
    background: var(--f-success);
}

.dish-pub-dot--draft {
    background: var(--f-warning);
}

.dish-pub-dot--off {
    background: var(--f-border-strong);
}

.dish-pub-name {
    flex: 1;
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dish-pub-muted {
    font-size: 11px;
    color: var(--f-text-subtle);
}

/* Sync row */
.dish-sync-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--f-surface-sunken);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
}

.dish-sync-icon {
    font-size: 16px !important;
    color: var(--f-info);
}

.dish-sync-info {
    flex: 1;
    min-width: 0;
}

.dish-sync-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
}

.dish-sync-time {
    font-size: 10px;
    color: var(--f-text-subtle);
    margin-top: 1px;
}

.dish-sync-status--ok {
    font-size: 15px !important;
    color: var(--f-success);
}

.dish-sync-status--off {
    font-size: 15px !important;
    color: var(--f-text-subtle);
}

/* History timeline in sidebar */
.dish-history-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 0;
    border-bottom: 1px solid var(--f-divider);
}

.dish-history-item:last-child {
    border-bottom: none;
}

.dish-history-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.dish-history-body {
    flex: 1;
    min-width: 0;
}

.dish-history-text {
    font-size: 11px;
    color: var(--f-text-muted);
    line-height: 1.5;
}

.dish-history-text strong {
    color: var(--f-text);
    font-weight: 500;
}

.dish-history-time {
    font-size: 10px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Dish Card · Phase 4 · Таб «Модификаторы»
   ══════════════════════════════════════════════════════════════════════ */

.dish-modifiers {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dish-modifiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .dish-modifiers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .dish-modifiers-grid {
        grid-template-columns: 1fr;
    }
}

.modifier-group-card {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.modifier-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--f-divider);
}

.modifier-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
}

.modifier-group-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.modifier-group-range {
    font-size: 11px;
    color: var(--f-text-muted);
}

.modifier-group-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modifier-empty-items {
    font-size: 11px;
    color: var(--f-text-subtle);
    font-style: italic;
    padding: 4px 0;
}

.modifier-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 36px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    background: transparent;
}

.modifier-item--hit {
    background: var(--f-accent-soft);
}

.modifier-item-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modifier-item--hit .modifier-item-name {
    color: var(--f-accent);
    font-weight: 500;
}

.modifier-item-delta {
    display: inline-block;
    padding: 1px 6px;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: 999px;
    font-size: 10px;
    color: var(--f-text-muted);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.modifier-bar {
    height: 6px;
    background: var(--f-surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}

.modifier-bar-fill {
    height: 100%;
    background: var(--f-border-strong);
    border-radius: inherit;
    transition: width .35s ease;
}

.modifier-item--hit .modifier-bar-fill {
    background: var(--f-accent);
    opacity: .85;
}

.modifier-item-pct {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--f-text-muted);
    text-align: right;
}

.modifier-item--hit .modifier-item-pct {
    color: var(--f-accent);
    font-weight: 600;
}

/* ── Insight panels (top-combo / candidates) ─────────────────────────── */

.dish-insights-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 800px) {
    .dish-insights-row {
        grid-template-columns: 1fr;
    }
}

.dish-insight-panel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
}

.dish-insight-panel--success {
    background: var(--f-success-soft);
    border-color: var(--f-success-soft);
    color: var(--f-success);
}

.dish-insight-panel--warning {
    background: var(--f-warning-soft);
    border-color: var(--f-warning-soft);
    color: var(--f-warning);
}

.dish-insight-icon {
    flex-shrink: 0;
    font-size: 20px !important;
}

.dish-insight-body {
    flex: 1;
    min-width: 0;
}

.dish-insight-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}

.dish-insight-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--f-text);
}

.dish-insight-muted {
    color: var(--f-text-muted);
    font-weight: 400;
}

.dish-insight-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    font-size: 12px;
    color: var(--f-text);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dish-insight-list li {
    line-height: 1.5;
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */

.dish-modifiers-skeleton {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dish-modifiers-skel-card {
    height: 200px;
    background: var(--f-surface-alt);
    border-radius: var(--r-lg);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .dish-modifiers-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .dish-modifiers-skeleton {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Dish Card · Phase 4 · Таб «Продажи»
   ══════════════════════════════════════════════════════════════════════ */

.dish-sales {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Period chips */
.dish-period-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.dish-period-chips-label {
    font-size: 12px;
    color: var(--f-text-muted);
    margin-right: 6px;
}

.dish-period-chip {
    padding: 5px 12px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--f-text-muted);
    cursor: pointer;
    transition: all .15s ease;
}

.dish-period-chip:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

.dish-period-chip--active {
    background: var(--f-accent);
    border-color: var(--f-accent);
    color: #fff;
    font-weight: 500;
}

/* KPI row (внутри chart card) */
.dish-sales-chart-card {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dish-sales-kpi-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--f-divider);
}

.dish-sales-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dish-sales-kpi-val {
    font-size: 20px;
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.dish-sales-kpi-lbl {
    font-size: 11px;
    color: var(--f-text-muted);
}

.dish-sales-kpi-div {
    width: 1px;
    align-self: stretch;
    background: var(--f-divider);
    margin: 2px 0;
}

/* SVG chart */
.dish-sales-chart {
    width: 100%;
    min-height: 120px;
    position: relative;
}

.dish-chart-hit {
    cursor: crosshair;
}

.dish-chart-guide,
.dish-chart-marker {
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.dish-chart-tooltip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: var(--f-surface-elevated, #fff);
    color: var(--f-text, #1a1a1a);
    border: 1px solid var(--f-border, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    font-size: 12px;
    line-height: 1.25;
    min-width: 88px;
    opacity: 0;
    transition: opacity 120ms ease-out, left 80ms linear, top 80ms linear;
    white-space: nowrap;
}

.dish-chart-tooltip-date {
    color: var(--f-text-muted, #666);
    font-size: 11px;
    margin-bottom: 2px;
}

.dish-chart-tooltip-value {
    font-weight: 600;
    font-size: 14px;
}

.dish-chart-tooltip-value span {
    font-weight: 400;
    font-size: 11px;
    color: var(--f-text-muted, #666);
}

/* Two-col (heatmap + order types) */
.dish-sales-two-col {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 14px;
}

@media (max-width: 900px) {
    .dish-sales-two-col {
        grid-template-columns: 1fr;
    }
}

.dish-sales-col-card {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dish-sales-divider {
    border: none;
    border-top: 1px solid var(--f-divider);
    margin: 12px 0;
}

/* Heatmap */
.dish-sales-heatmap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dish-heatmap-header {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 3px;
    align-items: center;
    margin-bottom: 4px;
}

.dish-heatmap-hours {
    display: grid;
    gap: 3px;
    font-size: 10px;
    color: var(--f-text-subtle);
    text-align: center;
}

.dish-heatmap-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 3px;
    align-items: center;
}

.dish-heatmap-row-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    line-height: 14px;
}

.dish-heatmap-row-cells {
    display: grid;
    gap: 3px;
}

.dish-heatmap-cell {
    height: 14px;
    border-radius: 2px;
    background: var(--f-accent);
}

.dish-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--f-text-subtle);
}

.dish-heatmap-legend-bar {
    display: flex;
    gap: 2px;
}

.dish-heatmap-legend-cell {
    width: 12px;
    height: 8px;
    border-radius: 2px;
    background: var(--f-accent);
}

/* Order types */
.dish-order-types {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dish-order-type-row {
    display: grid;
    grid-template-columns: 80px 1fr 44px;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}

.dish-order-type-label {
    font-size: 12px;
    color: var(--f-text);
}

.dish-order-type-track {
    height: 8px;
    background: var(--f-surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}

.dish-order-type-fill {
    height: 100%;
    background: var(--f-accent);
    opacity: .85;
    border-radius: inherit;
    transition: width .35s ease;
}

.dish-order-type-pct {
    font-size: 11px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 500;
}

/* Top waiters */
.dish-top-waiters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dish-waiter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
}

.dish-waiter-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dish-waiter-name {
    flex: 1;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dish-waiter-sales {
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}

.dish-waiter-avg {
    font-size: 11px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Pairing */
.dish-pairing-card {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dish-pairing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .dish-pairing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 500px) {
    .dish-pairing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dish-pairing-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: var(--f-surface-sunken);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    text-align: center;
}

.dish-pairing-emoji {
    font-size: 26px;
    line-height: 1.1;
}

.dish-pairing-name {
    font-size: 11px;
    color: var(--f-text);
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dish-pairing-pct {
    font-size: 11px;
    color: var(--f-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dish-placeholder-sm {
    font-size: 11px;
    color: var(--f-text-subtle);
    font-style: italic;
    padding: 8px 0;
    text-align: center;
}

/* Skeleton */
.dish-sales-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dish-sales-skel-chips {
    height: 28px;
    width: 280px;
    background: var(--f-surface-alt);
    border-radius: 999px;
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

.dish-sales-skel-kpi {
    height: 60px;
    background: var(--f-surface-alt);
    border-radius: var(--r-lg);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

.dish-sales-skel-chart {
    height: 160px;
    background: var(--f-surface-alt);
    border-radius: var(--r-lg);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

.dish-sales-skel-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dish-sales-skel-col {
    height: 260px;
    background: var(--f-surface-alt);
    border-radius: var(--r-lg);
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════════════════
   Dish Card · Phase 5 · Таб «История»
   ══════════════════════════════════════════════════════════════════════ */

.dish-history {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Фильтры (chips) */
.dish-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dish-history-chip {
    padding: 6px 14px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--f-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1.2;
}

.dish-history-chip:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
}

.dish-history-chip--active {
    background: var(--f-accent);
    border-color: var(--f-accent);
    color: #fff;
    font-weight: 500;
}

/* Поиск */
.dish-history-search {
    position: relative;
    max-width: 320px;
}

.dish-history-search .ph {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--f-text-subtle);
    pointer-events: none;
}

.dish-history-search input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--f-text);
    outline: none;
    transition: border-color .15s ease;
}

.dish-history-search input::placeholder {
    color: var(--f-text-subtle);
}

.dish-history-search input:focus {
    border-color: var(--f-accent);
}

/* Body (ленту рендерим сюда) */
.dish-history-body {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    min-height: 160px;
}

/* Timeline */
.dish-history-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dish-history-event {
    display: grid;
    grid-template-columns: 14px 1fr;
    column-gap: 12px;
    align-items: start;
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--f-divider);
}

.dish-history-event:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dish-history-event[data-expandable="1"] {
    cursor: pointer;
}

.dish-history-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    justify-self: center;
    box-shadow: 0 0 0 3px var(--f-surface);
}

.dish-history-event-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dish-history-event-meta {
    font-size: 11px;
    color: var(--f-text-subtle);
}

.dish-history-event-title {
    font-size: 13px;
    color: var(--f-text);
    line-height: 1.4;
    word-break: break-word;
}

.dish-history-event-author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 12px;
    color: var(--f-text-muted);
}

.dish-history-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--f-accent-soft);
    color: var(--f-accent);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.dish-history-badge {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    border: 1px solid var(--f-border);
    text-transform: lowercase;
    line-height: 1.4;
}

.dish-history-badge[data-type="price_changed"] {
    background: color-mix(in srgb, var(--f-danger) 12%, transparent);
    color: var(--f-danger);
    border-color: color-mix(in srgb, var(--f-danger) 30%, transparent);
}

.dish-history-badge[data-type="composition_changed"] {
    background: color-mix(in srgb, var(--f-warning) 12%, transparent);
    color: var(--f-warning);
    border-color: color-mix(in srgb, var(--f-warning) 30%, transparent);
}

.dish-history-badge[data-type="modifier_added"],
.dish-history-badge[data-type="modifier_removed"] {
    background: color-mix(in srgb, var(--f-info) 12%, transparent);
    color: var(--f-info);
    border-color: color-mix(in srgb, var(--f-info) 30%, transparent);
}

.dish-history-badge[data-type="published"],
.dish-history-badge[data-type="unpublished"] {
    background: color-mix(in srgb, var(--f-success) 12%, transparent);
    color: var(--f-success);
    border-color: color-mix(in srgb, var(--f-success) 30%, transparent);
}

.dish-history-badge[data-type="content_updated"] {
    background: var(--f-accent-soft);
    color: var(--f-accent);
    border-color: color-mix(in srgb, var(--f-accent) 30%, transparent);
}

/* Кнопка «Подробнее» */
.dish-history-expand-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--f-text-subtle);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all .15s ease;
}

.dish-history-expand-btn:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
    border-color: var(--f-border);
}

/* Diff-блок (раскрываемый) */
.dish-history-diff {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dish-history-diff-old {
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}

.dish-history-diff-new {
    color: var(--f-success);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.dish-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.dish-history-empty-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--f-text);
    margin-bottom: 4px;
}

.dish-history-empty-text {
    font-size: 12px;
    color: var(--f-text-muted);
}

/* Error state */
.dish-history-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--f-danger) 6%, var(--f-surface));
    border: 1px solid color-mix(in srgb, var(--f-danger) 25%, var(--f-border));
    border-radius: var(--r-md);
}

.dish-history-error-body {
    flex: 1;
    min-width: 0;
}

.dish-history-error-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--f-text);
}

.dish-history-error-text {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 2px;
}

/* Skeleton */
.dish-history-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dish-history-skel-row {
    display: grid;
    grid-template-columns: 14px 1fr;
    column-gap: 12px;
}

.dish-history-skel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--f-surface-alt);
    margin-top: 6px;
    justify-self: center;
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

.dish-history-skel-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dish-history-skel-line {
    height: 10px;
    background: var(--f-surface-alt);
    border-radius: 4px;
    animation: dish-skel-pulse 1.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
 * CCTV Player — native iOS style
 * Dark-always canvas. systemGray glass controls. SF font stack.
 * Все controls (topbar + bottom bar) — overlay поверх <video>.
 * Префикс cctv- на все классы и id (наша конвенция).
 * ═══════════════════════════════════════════════════════════════════ */

:root {
    --cctv-ios-blue:   #0A84FF;
    --cctv-ios-red:    #FF453A;
    --cctv-ios-green:  #30D158;
    --cctv-ios-orange: #FF9F0A;
    --cctv-ios-yellow: #FFD60A;
    --cctv-ios-indigo: #5E5CE6;

    --cctv-glass-thin:  rgba(120, 120, 128, 0.26);
    --cctv-glass-thick: rgba(120, 120, 128, 0.38);
    --cctv-glass-blur:  saturate(180%) blur(24px);

    --cctv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* ── Modal backdrop (override базовый padding) ── */
.cctv-modal-backdrop {
    background: rgba(0, 0, 0, 0.92);
    padding: 20px;
}

/* ── Modal container = player root ── */
.cctv-modal-backdrop.open .cctv-modal {
    background: #000;
    color: #fff;
    font-family: var(--cctv-font);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 1200px;
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    isolation: isolate;
    transform: scale(1) translateY(0);
}

/* На узких экранах — fullscreen */
@media (max-width: 768px) {
    .cctv-modal-backdrop { padding: 0; }
    .cctv-modal-backdrop.open .cctv-modal {
        max-width: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }
}

/* ── Player (video + overlays) ── */
.cctv-player {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: calc(100vh - 40px);
    background: #000;
    overflow: hidden;
    cursor: default;
}
.cctv-player.controls-hidden { cursor: none; }

.cctv-player video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

/* ── Topbar overlay ── */
.cctv-topbar {
    position: absolute; left: 0; right: 0; top: 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 40px;
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: var(--cctv-font);
}
.cctv-player.controls-hidden .cctv-topbar {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

/* iOS-style glass round button */
.cctv-icon-btn {
    width: 32px; height: 32px;
    border-radius: 50%; border: 0;
    background: var(--cctv-glass-thin);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    color: #fff;
    cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding: 0;
}
.cctv-icon-btn:hover { background: var(--cctv-glass-thick); }
.cctv-icon-btn:active { transform: scale(0.92); }
.cctv-icon-btn .ph,
.cctv-icon-btn .ph {
    font-size: 17px;
    color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'opsz' 24;
}

/* Date pill — label-обёртка с прозрачным native input */
.cctv-date-pill { position: relative; overflow: hidden; }
.cctv-date-pill input[type="date"] {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer;
    width: 100%; height: 100%;
    -webkit-appearance: none;
    font-size: 16px;
    border: 0; padding: 0; background: transparent;
}

/* Title block (центр topbar) */
.cctv-title {
    flex: 1; min-width: 0; padding: 0 4px;
    text-align: center;
}
.cctv-title .name {
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.22px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.cctv-title .sub {
    font-size: 11px; font-weight: 400;
    color: rgba(255,255,255,0.72);
    margin-top: 1px;
    letter-spacing: -0.08px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.cctv-icons-right { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Bottom bar overlay ── */
.cctv-bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 52px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 100%);
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: var(--cctv-font);
}
.cctv-player.controls-hidden .cctv-bottom {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}

.cctv-bb-row {
    display: flex; align-items: center; gap: 10px;
}

/* Play/Pause button — компактный glass glyph */
.cctv-play-btn {
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: var(--cctv-glass-thin);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    color: #fff; cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.cctv-play-btn:hover { background: var(--cctv-glass-thick); }
.cctv-play-btn:active { transform: scale(0.92); }
.cctv-play-btn .ph,
.cctv-play-btn .ph {
    font-size: 20px;
    color: #fff;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 24;
}

/* LIVE pill */
.cctv-live-pill {
    height: 28px; padding: 0 10px 0 8px;
    border: 0; border-radius: 100px;
    background: var(--cctv-ios-red); color: #fff;
    font-family: var(--cctv-font);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.cctv-live-pill.dimmed {
    background: var(--cctv-glass-thin);
    color: rgba(255,255,255,0.9);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
}
.cctv-live-pill:active { transform: scale(0.96); }
.cctv-live-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: cctv-pulse 1.4s ease-in-out infinite;
}
.cctv-live-pill.dimmed .cctv-live-dot {
    background: rgba(255,255,255,0.55);
    animation: none;
}
@keyframes cctv-pulse {
    0%, 100% { opacity: 1 }
    50%      { opacity: 0.35 }
}
@media (prefers-reduced-motion: reduce) {
    .cctv-live-dot { animation: none }
}

/* ── Zoom button + popover ── */
.cctv-zoom-wrap { position: relative; flex-shrink: 0; }
.cctv-zoom-btn {
    height: 28px; padding: 0 6px 0 11px;
    border: 0; border-radius: 100px;
    background: var(--cctv-glass-thin);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    color: #fff; font-family: var(--cctv-font);
    font-size: 12px; font-weight: 600;
    letter-spacing: -0.08px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 1px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.cctv-zoom-btn:hover { background: var(--cctv-glass-thick); }
.cctv-zoom-btn .ph,
.cctv-zoom-btn .ph {
    font-size: 16px; color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

.cctv-zoom-popover {
    position: absolute; bottom: calc(100% + 8px); right: 0;
    background: rgba(44, 44, 46, 0.72);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    border-radius: 13px; padding: 0;
    min-width: 124px;
    display: none; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    border: 0.5px solid rgba(255,255,255,0.12);
    z-index: 20; overflow: hidden;
}
.cctv-zoom-popover.open { display: flex; }
.cctv-zoom-popover button {
    background: transparent; border: 0;
    padding: 10px 14px;
    color: #fff; font-family: var(--cctv-font);
    font-size: 14px; font-weight: 400;
    letter-spacing: -0.15px;
    text-align: left; cursor: pointer; border-radius: 0;
    display: flex; align-items: center; justify-content: space-between;
    transition: background 0.1s;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.cctv-zoom-popover button:last-child { border-bottom: 0; }
.cctv-zoom-popover button:hover { background: rgba(255,255,255,0.08); }
.cctv-zoom-popover button.active { font-weight: 500; }
.cctv-zoom-popover button.active::after {
    content: "check";
    font-family: "Material Symbols Rounded";
    font-size: 16px;
    color: var(--cctv-ios-blue);
    font-variation-settings: 'FILL' 0, 'wght' 600;
}

/* ── Timeline (thin iOS style) ── */
.cctv-tl-wrap {
    flex: 1; min-width: 0;
    position: relative;
    display: flex; align-items: center; gap: 8px;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cctv-tl-time-edge {
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,0.65);
    letter-spacing: -0.08px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    flex-shrink: 0; min-width: 36px;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.cctv-tl-time-edge.right { text-align: right; }

/* Drag target */
.cctv-tl-grab {
    flex: 1; min-width: 0;
    position: relative;
    padding: 14px 0 8px;
    cursor: grab;
    touch-action: none;
}
.cctv-tl-grab.dragging { cursor: grabbing; }

/* Event markers row поверх трека */
.cctv-tl-events-row {
    position: absolute; left: 0; right: 0; top: 4px;
    height: 8px;
    pointer-events: none;
}
.cctv-tl-events-row > span { pointer-events: auto; }
.cctv-tl-event {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    cursor: pointer;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.9));
    color: #fff;
}
.cctv-tl-event .ph,
.cctv-tl-event .ph {
    font-size: 10px;
    font-variation-settings: 'FILL' 1, 'wght' 700;
}
.cctv-tl-event.motion  { color: var(--cctv-ios-green); }
.cctv-tl-event.human   { color: #fff; }
.cctv-tl-event.vehicle { color: var(--cctv-ios-blue); }
.cctv-tl-event.alert   { color: var(--cctv-ios-orange); }

/* Track — thin (3px) */
.cctv-tl-track {
    position: relative; height: 3px;
    background: rgba(255,255,255,0.22);
    border-radius: 1.5px;
    overflow: visible;
}
.cctv-tl-segment {
    position: absolute; top: 0; bottom: 0;
    background: rgba(255,255,255,0.55);
    border-radius: 1.5px;
}

/* Playhead — small white circle thumb */
.cctv-tl-playhead {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,0,0,0.2);
    z-index: 3; pointer-events: none;
    transition: opacity 0.15s;
}

/* Off-screen playhead indicator */
.cctv-tl-off-indicator {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 20px; padding: 0 8px 0 4px;
    border-radius: 100px; border: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    color: #fff; font-family: var(--cctv-font);
    font-size: 10px; font-weight: 600;
    letter-spacing: -0.08px;
    display: none; align-items: center; gap: 1px;
    cursor: pointer; z-index: 4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cctv-tl-off-indicator.show { display: inline-flex; }
.cctv-tl-off-indicator.left  { left: 4px; padding: 0 6px 0 2px; }
.cctv-tl-off-indicator.right { right: 4px; padding: 0 2px 0 6px; }
.cctv-tl-off-indicator .ph,
.cctv-tl-off-indicator .ph {
    font-size: 14px;
    font-variation-settings: 'FILL' 0, 'wght' 600;
}

/* Zoom hint toast (показывается при wheel/pinch) */
.cctv-zoom-hint {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    color: #fff; font-size: 12px; font-weight: 600;
    padding: 4px 11px; border-radius: 100px; z-index: 15;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.cctv-zoom-hint.show { opacity: 1; }

/* Hover tooltip (показывает время в позиции курсора) */
.cctv-tl-hover-tooltip {
    position: absolute; bottom: 18px; left: 0;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.82);
    backdrop-filter: var(--cctv-glass-blur);
    -webkit-backdrop-filter: var(--cctv-glass-blur);
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 3px 7px; border-radius: 5px;
    pointer-events: none; white-space: nowrap;
    opacity: 0; transition: opacity 0.12s;
    z-index: 5;
    font-variant-numeric: tabular-nums;
    border: 0.5px solid rgba(255,255,255,0.12);
}
.cctv-tl-hover-tooltip.show { opacity: 1; }

/* Stream status overlay (spinner) — переопределяет более ранние правила */
.cctv-player .cctv-stream-status {
    position: absolute; inset: 0;
    z-index: 5;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    font-family: var(--cctv-font);
    font-size: 14px; gap: 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
.cctv-player .cctv-stream-status.hidden-status { display: none; }



/* ═════════════════════════════════════════════════════════════════════════
   Menu Item page (коммит 2/8 v2-миграции карточки позиции публичного меню)
   Страница /menu/:menuId/editor/item/:itemId. Переиспользует токены и
   паттерны от DishCardView (классы .dish-*). Здесь только rename/aliases.
   ═════════════════════════════════════════════════════════════════════════ */

.menu-item-root {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.menu-item-page {
    display: flex;
    min-height: calc(100vh - 52px);
    align-items: stretch;
}

.menu-item-main {
    flex: 1;
    min-width: 0;
    padding: 20px 28px 60px;
    overflow-x: auto;
}

.menu-item-sidebar {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid var(--f-border);
    background: var(--f-surface);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
}

/* Title block (название + мета + цена справа) */
.menu-item-page-title-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 0 20px;
    margin-bottom: 4px;
}
.menu-item-page-title-main { flex: 1; min-width: 0; }
.menu-item-page-title {
    font-size: 22px; font-weight: 600; letter-spacing: -0.4px;
    color: var(--f-text); line-height: 1.25; margin: 0 0 8px;
}
.menu-item-page-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    font-size: 12px; color: var(--f-text-muted);
}
.menu-item-page-meta-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-variant-numeric: tabular-nums;
}
.menu-item-page-title-side {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding-top: 2px;
}
.menu-item-page-price {
    font-size: 22px; font-weight: 700; color: var(--f-text);
    font-variant-numeric: tabular-nums;
}

/* Tabs bar */
.menu-item-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--f-border);
    margin-bottom: 22px;
}
.f-topbar-tabs .menu-item-tabs { border-bottom: 0; margin-bottom: 0; }
.menu-item-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px 9px;
    font-size: 13px; font-weight: 500; color: var(--f-text-muted);
    border: 0; background: transparent;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; transition: color .12s; font-family: inherit;
}
.menu-item-tab:hover { color: var(--f-text); }
.menu-item-tab--active {
    color: var(--f-accent-text);
    border-bottom-color: var(--f-accent);
}

.menu-item-tab-body { min-height: 200px; }
.menu-item-tab-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 40px; text-align: center; color: var(--f-text-muted);
}
.menu-item-tab-placeholder-title {
    font-size: 15px; font-weight: 600; color: var(--f-text); margin-bottom: 4px;
}
.menu-item-tab-placeholder-text { font-size: 12px; color: var(--f-text-subtle); }

/* Sidebar sections */
.menu-item-side-section {
    display: flex; flex-direction: column; gap: 10px;
    padding-bottom: 16px; border-bottom: 1px solid var(--f-divider);
}
.menu-item-side-section:last-child { border-bottom: 0; padding-bottom: 0; }
.menu-item-side-section-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--f-text-subtle);
}
.menu-item-side-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
}
.menu-item-side-row-content { min-width: 0; flex: 1; }
.menu-item-side-row-title {
    font-size: 13px; font-weight: 500; color: var(--f-text);
    line-height: 1.3;
}
.menu-item-side-row-sub {
    font-size: 11.5px; color: var(--f-text-subtle);
    margin-top: 2px; line-height: 1.4;
}

/* 404 + error */
.menu-item-404, .menu-item-error-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 40px; text-align: center; color: var(--f-text-muted);
    gap: 8px;
}
.menu-item-404-title, .menu-item-error-title {
    font-size: 15px; font-weight: 600; color: var(--f-text);
}
.menu-item-404-text, .menu-item-error-text {
    font-size: 12px; color: var(--f-text-subtle); max-width: 360px;
}

/* Skeleton */
.menu-item-skel {
    padding: 20px 28px;
    display: flex; flex-direction: column; gap: 12px;
}
.menu-item-skel-crumbs, .menu-item-skel-title,
.menu-item-skel-tabs, .menu-item-skel-block {
    background: var(--f-surface-alt);
    border-radius: var(--r-sm, 6px);
    animation: menu-item-skel-pulse 1.2s ease-in-out infinite;
}
.menu-item-skel-crumbs { height: 14px; width: 320px; }
.menu-item-skel-title  { height: 28px; width: 40%; min-width: 200px; }
.menu-item-skel-tabs   { height: 36px; width: 100%; }
.menu-item-skel-block  { height: 180px; width: 100%; }
@keyframes menu-item-skel-pulse {
    0%,100% { opacity: 0.6; }
    50%     { opacity: 1; }
}

/* Mobile */
@media (max-width: 860px) {
    .menu-item-page { flex-direction: column; }
    .menu-item-sidebar {
        width: 100%;
        border-left: 0;
        border-top: 1px solid var(--f-border);
    }
    .menu-item-main { padding: 16px 16px 40px; }
}



/* ═════════════════════════════════════════════════════════════════════════
   Menu Item — Таб Обзор (коммит 3/8)
   ═════════════════════════════════════════════════════════════════════════ */

.menu-item-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.menu-item-ov-hero {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--f-divider);
}

.menu-item-ov-photo {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--f-surface-alt);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-item-ov-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Для бар/вина — портретное соотношение + contain, чтобы бутылка целиком */
.menu-item-ov-photo--portrait {
    width: 180px;
    height: 240px;
    background: linear-gradient(135deg, var(--f-surface-alt), var(--f-surface-sunken));
}
.menu-item-ov-photo--portrait img {
    object-fit: contain;
    padding: 12px;
}
.menu-item-ov-photo-emoji {
    font-size: 64px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}
.menu-item-ov-photo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
}

.menu-item-ov-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.menu-item-ov-kpi {
    padding: 12px 14px;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface);
}
.menu-item-ov-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
    font-weight: 600;
    margin-bottom: 4px;
}
.menu-item-ov-kpi-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.menu-item-ov-kpi-sub {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 4px;
    line-height: 1.3;
}

/* Секции таба «Обзор» */
.menu-item-ov-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-item-ov-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
    margin-bottom: 4px;
}
.menu-item-ov-section--accent {
    background: var(--f-accent-soft);
    border: 1px solid var(--f-accent-soft-hover);
    border-radius: 8px;
    padding: 12px 14px;
}

.menu-item-ov-desc-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--f-text);
    margin: 0;
    white-space: pre-wrap;
}
.menu-item-ov-desc-empty {
    color: var(--f-text-subtle);
    font-style: italic;
}

.menu-item-ov-attr-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed var(--f-divider);
    font-size: 12.5px;
}
.menu-item-ov-attr-row:last-child { border-bottom: 0; }
.menu-item-ov-attr-label {
    color: var(--f-text-subtle);
}
.menu-item-ov-attr-value {
    color: var(--f-text);
    font-weight: 500;
    text-align: right;
}
.menu-item-ov-attr-value--empty {
    color: var(--f-text-subtle);
    font-weight: 400;
}

.menu-item-ov-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.menu-item-ov-mods {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-item-ov-mod-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    font-size: 12.5px;
}
.menu-item-ov-mod-name { color: var(--f-text); font-weight: 500; }
.menu-item-ov-mod-count {
    color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums;
}
.menu-item-ov-mod-more {
    text-align: center;
    color: var(--f-text-subtle);
    font-size: 12px;
    padding: 4px;
}

/* ═════════════════════════════════════════════════════════════════════════
   Menu Item — Таб Контент (коммит 3/8)
   ═════════════════════════════════════════════════════════════════════════ */

.menu-item-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 80px; /* место для sticky actions */
}
.menu-item-cnt-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-item-cnt-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
}
.menu-item-cnt-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.menu-item-cnt-image-block {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.menu-item-cnt-img-preview {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-item-cnt-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Portrait preview (бар/вино) — бутылка целиком, 3/4 + contain */
.menu-item-cnt-img-preview--portrait {
    width: 140px;
    height: 190px;
    background: linear-gradient(135deg, var(--f-surface-alt), var(--f-surface-sunken));
}
.menu-item-cnt-img-preview--portrait img {
    object-fit: contain;
    padding: 10px;
}
.menu-item-cnt-img-placeholder {
    color: var(--f-text-subtle);
    font-size: 32px;
}
.menu-item-cnt-img-placeholder .ph { font-size: 32px; }
.menu-item-cnt-img-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
}

.menu-item-cnt-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.menu-item-cnt-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface);
    font-size: 13px;
    color: var(--f-text);
    font-family: inherit;
    transition: border-color .12s;
}
.menu-item-cnt-input:focus {
    outline: none;
    border-color: var(--f-accent);
}
.menu-item-cnt-input--sm { width: 120px; }

.menu-item-cnt-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface);
    font-size: 13px;
    color: var(--f-text);
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color .12s;
}
.menu-item-cnt-textarea:focus {
    outline: none;
    border-color: var(--f-accent);
}

.menu-item-cnt-select {
    padding: 8px 10px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface);
    font-size: 13px;
    color: var(--f-text);
    font-family: inherit;
    cursor: pointer;
}

.menu-item-cnt-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.menu-item-cnt-weight-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.menu-item-cnt-hint {
    font-size: 11px;
    color: var(--f-text-subtle);
    line-height: 1.4;
}
.menu-item-cnt-hint--right { text-align: right; }
.menu-item-cnt-hint--inline { margin-left: 6px; }

.menu-item-cnt-actions {
    position: sticky;
    bottom: 0;
    margin: 20px -28px -60px; /* компенсируем padding main */
    padding: 12px 28px;
    background: var(--f-surface);
    border-top: 1px solid var(--f-divider);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.menu-item-cnt-actions-status {
    flex: 1;
}



/* ═════════════════════════════════════════════════════════════════════════
   Menu Item — Таб Характеристики (коммиты 4-5/8)
   ═════════════════════════════════════════════════════════════════════════ */

.menu-item-chars {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.menu-item-chars-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.menu-item-chars-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--f-text-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
}
.menu-item-chars-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    letter-spacing: normal;
    text-transform: none;
}
.menu-item-chars-tag--danger {
    background: var(--f-danger-soft);
    color: var(--f-danger);
}
.menu-item-chars-empty {
    font-size: 12px;
    color: var(--f-text-subtle);
    font-style: italic;
    padding: 8px 0;
}

/* КБЖУ */
.menu-item-chars-bju-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.menu-item-chars-bju-cell {
    padding: 10px 12px;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface);
    text-align: center;
}
.menu-item-chars-bju-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.menu-item-chars-bju-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--f-text);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* Modifiers */
.menu-item-chars-mods {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-item-chars-mod-row {
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--f-surface);
}
.menu-item-chars-mod-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.menu-item-chars-mod-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--f-text);
}
.menu-item-chars-mod-badges {
    display: inline-flex;
    gap: 4px;
}
.menu-item-chars-mod-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.menu-item-chars-mod-variant {
    font-size: 11.5px;
    padding: 2px 8px;
    background: var(--f-surface-alt);
    border-radius: 10px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}
.menu-item-chars-mod-variant--muted {
    background: transparent;
    color: var(--f-text-subtle);
    font-style: italic;
}

/* Hero */
.menu-item-chars-hero-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface);
}
.menu-item-chars-hero-fields {
    padding: 12px 14px;
    background: var(--f-accent-soft);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.menu-item-chars-hero-actions {
    display: flex;
    justify-content: flex-end;
}

/* Merged variants table */
.menu-item-merged-head {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 70px;
    gap: 10px;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--f-text-subtle);
    border-bottom: 1px solid var(--f-border);
}
.menu-item-merged-variants {
    display: flex;
    flex-direction: column;
}
.menu-item-merged-variant {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 70px;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--f-divider);
    align-items: center;
    font-size: 13px;
}
.menu-item-merged-variant:last-child { border-bottom: 0; }
.menu-item-merged-variant-main { min-width: 0; }
.menu-item-merged-variant-label {
    color: var(--f-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-item-merged-variant-orig {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}
.menu-item-merged-variant-price {
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.menu-item-merged-variant-weight {
    color: var(--f-text-muted);
    font-size: 12px;
}
.menu-item-merged-variant-status {
    display: flex;
    justify-content: flex-end;
}

.menu-item-merged-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}



/* Wine/Spirit/Bar characteristics grid (коммит 5/8) */
.menu-item-wine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.menu-item-wine-grid--single {
    grid-template-columns: 1fr;
}
.menu-item-wine-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-item-wine-field--full { grid-column: 1 / -1; }
.menu-item-wine-field-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--f-text-subtle);
}



/* ═════════════════════════════════════════════════════════════════════════
   Menu Item — Таб История (коммит 6/8)
   ═════════════════════════════════════════════════════════════════════════ */

.menu-item-history {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.menu-item-hist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--f-divider);
}
.menu-item-hist-chip {
    padding: 5px 12px;
    border: 1px solid var(--f-border);
    border-radius: 14px;
    background: var(--f-surface);
    font-size: 12px;
    color: var(--f-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color .12s, background .12s;
}
.menu-item-hist-chip:hover {
    color: var(--f-text);
    background: var(--f-surface-alt);
}
.menu-item-hist-chip.is-active {
    color: var(--f-accent-text);
    background: var(--f-accent-soft);
    border-color: var(--f-accent);
}

.menu-item-hist-body {
    display: flex;
    flex-direction: column;
}
.menu-item-hist-loading, .menu-item-hist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    color: var(--f-text-subtle);
    text-align: center;
    font-size: 12.5px;
}
.menu-item-hist-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--f-divider);
}
.menu-item-hist-row:last-child { border-bottom: 0; }
.menu-item-hist-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.menu-item-hist-main { flex: 1; min-width: 0; }
.menu-item-hist-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--f-text);
    line-height: 1.35;
}
.menu-item-hist-meta {
    font-size: 11.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    display: flex;
    gap: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════
   Menu Item — Таб Интеграции (коммит 6/8)
   ═════════════════════════════════════════════════════════════════════════ */

.menu-item-integrations {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.menu-item-ig-intro {
    font-size: 12.5px;
    color: var(--f-text-muted);
    padding: 12px 14px;
    background: var(--f-surface-alt);
    border-radius: 8px;
    border-left: 3px solid var(--f-accent);
}
.menu-item-ig-block {
    border: 1px solid var(--f-border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--f-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.menu-item-ig-block--winestyle { border-top: 3px solid #a44a6a; }
.menu-item-ig-block--luding    { border-top: 3px solid #7a4fd0; }
.menu-item-ig-block--joia      { border-top: 3px solid #b33a3a; }

.menu-item-ig-header { display: flex; flex-direction: column; gap: 2px; }
.menu-item-ig-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--f-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.menu-item-ig-logo { font-size: 16px; }
.menu-item-ig-link {
    font-size: 11.5px;
    color: var(--f-accent);
    text-decoration: none;
    margin-left: auto;
}
.menu-item-ig-link:hover { text-decoration: underline; }
.menu-item-ig-sub {
    font-size: 11.5px;
    color: var(--f-text-subtle);
}
.menu-item-ig-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.menu-item-ig-row .menu-item-cnt-input,
.menu-item-ig-row .menu-item-cnt-textarea { flex: 1; }
.menu-item-ig-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}
.menu-item-ig-fallback {
    margin-top: 4px;
    font-size: 12px;
}
.menu-item-ig-fallback > summary {
    cursor: pointer;
    color: var(--f-text-subtle);
    font-size: 11.5px;
    padding: 4px 0;
}
.menu-item-ig-fallback[open] > summary {
    color: var(--f-text-muted);
}
.menu-item-ig-fallback > .menu-item-ig-row {
    margin-top: 8px;
}



/* Sidebar quick actions (коммит 7/8) */
.menu-item-side-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-item-side-action {
    width: 100%;
}
.menu-item-side-action .f-btn {
    width: 100%;
    justify-content: flex-start;
}
.menu-item-side-section--actions-stub { display: none; }

/* ── DDS · Sub-tabs row (под TopBar) ───────────────────────────────────── */
.f-dds-subtabs-row {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--f-surface);
    border-bottom: 1px solid var(--f-border);
    overflow-x: auto;
    flex-shrink: 0;
}

/* ── DDS · Overview dashboard (Frime v2) ──────────────────────────────── */
.f-dds-overview { /* wrapper sizing handled by parent .max-w-6xl */ }

.f-dds-ov-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* KPI row */
.f-dds-ov-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 1100px) {
    .f-dds-ov-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .f-dds-ov-kpis { grid-template-columns: 1fr; }
}

.f-dds-ov-kpi {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.f-dds-ov-kpi__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.f-dds-ov-kpi__label {
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.f-dds-ov-kpi__icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.f-dds-ov-kpi__icon .ph {
    font-size: 16px;
}
.f-dds-ov-kpi__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--f-text);
    word-break: break-word;
}
.f-dds-ov-kpi__delta {
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 2px;
}

/* Two main rows: chart+safes (1.7fr 1fr), cats+recent (1fr 1.7fr) */
.f-dds-ov-row {
    display: grid;
    gap: 12px;
}
.f-dds-ov-row--chart-safes { grid-template-columns: 1.7fr 1fr; }
.f-dds-ov-row--cats-recent { grid-template-columns: 1fr 1.7fr; }
@media (max-width: 1100px) {
    .f-dds-ov-row--chart-safes,
    .f-dds-ov-row--cats-recent { grid-template-columns: 1fr; }
}

/* Блок «По сейфам» — приход/расход за период по каждому сейфу */
.f-dds-ov-bysafe { display: flex; flex-direction: column; }
.f-dds-ov-bysafe__scroll { overflow-x: auto; }
.f-dds-ov-bysafe__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.f-dds-ov-bysafe__table thead th {
    text-align: left;
    font-weight: 500;
    font-size: 11px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--f-divider);
    background: var(--f-surface-alt);
}
.f-dds-ov-bysafe__table thead th.f-dds-ov-bysafe__amount-th {
    text-align: right;
    white-space: nowrap;
}
.f-dds-ov-bysafe__table tbody tr {
    border-bottom: 1px solid var(--f-divider);
    transition: background 0.1s;
}
.f-dds-ov-bysafe__table tbody tr:last-child { border-bottom: none; }
.f-dds-ov-bysafe__table tbody tr:hover { background: var(--f-surface-alt); }
.f-dds-ov-bysafe__table td {
    padding: 10px 14px;
    vertical-align: middle;
}
.f-dds-ov-bysafe__name { color: var(--f-text); }
.f-dds-ov-bysafe__type { margin-top: 4px; }
.f-dds-ov-bysafe__amount {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.f-dds-ov-bysafe__amount.tx-amount--positive { color: var(--f-success); }
.f-dds-ov-bysafe__amount.tx-amount--negative { color: var(--f-danger); }

/* Card wrapper */
.f-dds-ov-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.f-dds-ov-card__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.f-dds-ov-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
}
.f-dds-ov-card__subtitle {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}

.f-dds-ov-iconbtn {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: 1px solid var(--f-border);
    background: var(--f-surface);
    color: var(--f-text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.f-dds-ov-iconbtn:hover {
    background: var(--f-surface-alt);
    color: var(--f-text);
    border-color: var(--f-border-strong);
}
.f-dds-ov-iconbtn .ph { font-size: 16px; }

.f-dds-ov-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--f-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-family: inherit;
    transition: color .12s, background .12s;
}
.f-dds-ov-link:hover {
    color: var(--f-accent-text);
    background: var(--f-surface-alt);
}
.f-dds-ov-link .ph { font-size: 14px; }

/* Chart */
.f-dds-ov-legend {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--f-text-muted);
}
.f-dds-ov-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.f-dds-ov-legend__dot {
    width: 10px; height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.f-dds-ov-chart {
    position: relative;
    height: 220px;
    padding: 14px 16px 24px;
}
.f-dds-ov-chart-grid {
    position: absolute;
    inset: 14px 16px 28px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.f-dds-ov-chart-grid > div {
    border-top: 1px solid var(--f-divider);
    height: 0;
}
.f-dds-ov-chart-bars {
    position: absolute;
    inset: 14px 16px 24px 16px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.f-dds-ov-bar-slot {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}
.f-dds-ov-bar-pair {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    min-height: 0;
}
.f-dds-ov-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 0;
}
.f-dds-ov-bar--inc { background: var(--f-success); opacity: 0.85; }
.f-dds-ov-bar--exp { background: var(--f-danger);  opacity: 0.78; }
.f-dds-ov-bar-label {
    position: absolute;
    bottom: -18px;
    left: 0; right: 0;
    text-align: center;
    font-size: 9.5px;
    color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Safes block */
.f-dds-ov-safes {
    flex: 1;
    overflow: auto;
}
.f-dds-ov-safe {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--f-divider);
    transition: background .12s;
}
.f-dds-ov-safe:hover { background: var(--f-surface-alt); }
.f-dds-ov-safe__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.f-dds-ov-safe__icon .ph { font-size: 18px; }
.f-dds-ov-safe__main {
    flex: 1;
    min-width: 0;
}
.f-dds-ov-safe__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-ov-safe__sub {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-ov-safe__amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-accent-text);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.f-dds-ov-safes__more {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    border-top: 1px solid var(--f-divider);
    background: transparent;
    color: var(--f-text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.f-dds-ov-safes__more:hover {
    background: var(--f-surface-alt);
    color: var(--f-accent-text);
}
.f-dds-ov-safes__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 14px;
    color: var(--f-text-subtle);
    font-size: 12px;
    text-align: center;
}
.f-dds-ov-safes__empty .ph { font-size: 28px; }
.f-dds-ov-safes__create {
    margin-top: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--f-border);
    background: var(--f-surface);
    color: var(--f-text);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.f-dds-ov-safes__create:hover {
    background: var(--f-surface-alt);
    border-color: var(--f-border-strong);
}

/* Categories list */
.f-dds-ov-cats {
    padding: 8px 14px 4px;
}
.f-dds-ov-catrow {
    padding: 7px 0;
    border-bottom: 1px solid var(--f-divider);
}
.f-dds-ov-catrow__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.f-dds-ov-catrow__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.f-dds-ov-catrow__amount {
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.f-dds-ov-catrow__bar {
    height: 4px;
    background: var(--f-surface-alt);
    border-radius: 2px;
    overflow: hidden;
}
.f-dds-ov-catrow__bar-fill {
    height: 100%;
    border-radius: 2px;
    opacity: 0.8;
}

/* Recent operations */
.f-dds-ov-txs { /* container */ }
.f-dds-ov-tx {
    display: grid;
    grid-template-columns: 60px 30px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--f-divider);
    transition: background .12s;
}
.f-dds-ov-tx:hover { background: var(--f-surface-alt); }
.f-dds-ov-tx__date {
    font-size: 11px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f-dds-ov-tx__icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.f-dds-ov-tx__icon .ph { font-size: 14px; }
.f-dds-ov-tx__main {
    min-width: 0;
}
.f-dds-ov-tx__title {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.f-dds-ov-tx__desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.f-dds-ov-tx__sub {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-ov-tx__amount {
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Empty state inside cards */
.f-dds-ov-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 14px;
    color: var(--f-text-subtle);
    font-size: 12px;
}
.f-dds-ov-empty .ph { font-size: 28px; }

/* Entries-only filter chips (видны только когда _switchTab('entries')) */
.f-dds-chip-entries-only {
    display: none;
}

/* ── DDS · Entries (Операции) — таблица + sticky-футер (Frime v2) ──────── */
.f-dds-entries-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.f-dds-entries-table-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.f-dds-entries-scroll {
    max-height: 680px;
    overflow-y: auto;
}

.f-dds-entries-thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-border);
}

.f-dds-entries-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--f-surface);
    border-top: 1px solid var(--f-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
    font-size: 12px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}

.f-dds-entries-footer__count {
    font-size: 11.5px;
    color: var(--f-text-subtle);
}
.f-dds-entries-footer__count b {
    color: var(--f-text);
    font-weight: 600;
}

.f-dds-entries-footer__sep {
    flex: 1;
}

.f-dds-entries-footer__sep--vertical {
    flex: 0 0 auto;
    width: 1px;
    height: 16px;
    background: var(--f-border);
    margin: 0 4px;
}

.f-dds-entries-footer__metric {
    font-size: 12px;
    color: var(--f-text-muted);
}

.f-dds-entries-footer__net {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-text);
}

@media (max-width: 720px) {
    .f-dds-entries-footer {
        gap: 10px;
        padding: 10px 12px;
    }
    .f-dds-entries-footer__sep { display: none; }
    .f-dds-entries-footer__sep--vertical { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Safes (Балансы) — KPI + grid карточек (Frime v2)                 */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-safe-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* KPI strip — 3 карточки сверху */
.f-dds-safe-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 900px) {
    .f-dds-safe-kpis { grid-template-columns: 1fr; }
}

.f-dds-safe-kpi {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.f-dds-safe-kpi__icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.f-dds-safe-kpi__icon .ph { font-size: 18px; }
.f-dds-safe-kpi__main {
    min-width: 0;
    flex: 1;
}
.f-dds-safe-kpi__label {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.f-dds-safe-kpi__value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin-top: 2px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}
.f-dds-safe-kpi__sub {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 1px;
}

/* Action bar — кнопки над gridом */
.f-dds-safe-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Grid карточек */
.f-dds-safe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) {
    .f-dds-safe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .f-dds-safe-grid { grid-template-columns: 1fr; }
}

/* Карточка сейфа */
.f-dds-safe-card {
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.f-dds-safe-card:hover {
    border-color: var(--f-accent);
    box-shadow: var(--f-shadow);
    transform: scale(1.005);
}
.f-dds-safe-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.f-dds-safe-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.f-dds-safe-card__icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.f-dds-safe-card__icon .ph { font-size: 17px; }
.f-dds-safe-card__name-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.f-dds-safe-card__name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-safe-card__sub {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-safe-card__badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
}
.f-dds-safe-card__balance-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.f-dds-safe-card__balance-label {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.f-dds-safe-card__balance {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.f-dds-safe-card__balance--positive { color: var(--f-text); }
.f-dds-safe-card__balance--negative { color: var(--f-danger); }

.f-dds-safe-card__footer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--f-text-subtle);
    padding-top: 8px;
    border-top: 1px solid var(--f-divider);
}
.f-dds-safe-card__footer .ph {
    font-size: 13px;
    color: var(--f-text-subtle);
}

.f-dds-safe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--f-text-subtle);
    font-size: 13px;
    text-align: center;
}
.f-dds-safe-empty .ph { font-size: 36px; }

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Safe Detail — детальный экран сейфа (Frime v2)                    */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.f-dds-detail__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.f-dds-detail__title-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.f-dds-detail__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-detail__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.f-dds-detail__balance {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    flex-shrink: 0;
}
.f-dds-detail__balance--positive { color: var(--f-text); }
.f-dds-detail__balance--negative { color: var(--f-danger); }
.f-dds-detail__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Revenue split: Принято / Не принято */
.f-dds-detail__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.f-dds-detail__split-cell {
    padding: 10px 14px;
    border-radius: 10px;
}
.f-dds-detail__split-cell--accepted {
    background: var(--f-success-soft);
    color: var(--f-success);
}
.f-dds-detail__split-cell--unaccepted {
    background: var(--f-warning-soft);
    color: var(--f-warning);
}
.f-dds-detail__split-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 4px;
}
.f-dds-detail__split-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}

/* Card head с заголовком и кнопкой добавления */
.f-dds-detail__card-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.f-dds-detail__card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
}
.f-dds-detail__card-subtitle {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}

/* Список ответственных */
.f-dds-detail__staff-list {
    display: flex;
    flex-direction: column;
}
.f-dds-detail__staff-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--f-divider);
}
.f-dds-detail__staff-row:last-child { border-bottom: none; }
.f-dds-detail__staff-name {
    flex: 1;
    font-size: 12.5px;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-detail__staff-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--f-text-subtle);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.f-dds-detail__staff-remove:hover {
    background: var(--f-danger-soft);
    color: var(--f-danger);
}
.f-dds-detail__staff-remove .ph { font-size: 16px; }

.f-dds-detail__empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--f-text-subtle);
    font-style: italic;
}

/* Таблица транзакций */
.f-dds-detail__tx-scroll {
    max-height: 520px;
    overflow-y: auto;
}
.f-dds-detail__tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.f-dds-detail__tx-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-border);
}
.f-dds-detail__tx-table th {
    text-align: left;
    padding: 9px 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.f-dds-detail__tx-table th.tx-num { text-align: right; }
.f-dds-detail__tx-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text);
    vertical-align: middle;
}
.f-dds-detail__tx-table tr:last-child td { border-bottom: none; }
.f-dds-detail__tx-table .tx-date {
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 11px;
}
.f-dds-detail__tx-table .tx-desc {
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    white-space: nowrap;
}
.f-dds-detail__tx-table .tx-who {
    color: var(--f-text-subtle);
    font-size: 11px;
}
.f-dds-detail__tx-table .tx-amount {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f-dds-detail__tx-table .tx-amount--positive { color: var(--f-success); }
.f-dds-detail__tx-table .tx-amount--negative { color: var(--f-danger); }

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Cash Shifts (Z/X-отчёты) — таблица + sticky bottom bar (v2)       */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-shift-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#dds-shifts-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* KPI strip — 3 карточки */
.f-dds-shift-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 900px) {
    .f-dds-shift-kpis { grid-template-columns: 1fr; }
}

.f-dds-shift-kpi {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.f-dds-shift-kpi__icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.f-dds-shift-kpi__icon .ph { font-size: 18px; }
.f-dds-shift-kpi__label {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.f-dds-shift-kpi__value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin-top: 2px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}
.f-dds-shift-kpi__sub {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 1px;
}

/* Таблица смен */
.f-dds-shift-table-card {
    overflow: hidden;
    padding: 0;
}
.f-dds-shift-table-scroll {
    max-height: 600px;
    overflow: auto;
}
.f-dds-shift-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.f-dds-shift-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-border);
}
.f-dds-shift-table th {
    text-align: left;
    padding: 9px 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.f-dds-shift-table th.num,
.f-dds-shift-table th.amount { text-align: right; }
.f-dds-shift-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text);
    vertical-align: middle;
}
.f-dds-shift-table tr:last-child td { border-bottom: none; }
.f-dds-shift-table tbody tr {
    cursor: pointer;
    transition: background .12s;
}
.f-dds-shift-table tbody tr:hover { background: var(--f-surface-alt); }
.f-dds-shift-table tbody tr.is-accepted { background: var(--f-success-soft); }
.f-dds-shift-table tbody tr.is-open { opacity: 0.7; }

.f-dds-shift-table .col-cb {
    width: 32px;
    text-align: center;
}
.f-dds-shift-table .col-cb input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--f-accent);
}
.f-dds-shift-table .col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--f-text-muted);
    white-space: nowrap;
}
.f-dds-shift-table .col-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f-dds-shift-table .col-date__main {
    color: var(--f-text);
    font-weight: 500;
}
.f-dds-shift-table .col-date__sub {
    color: var(--f-text-subtle);
    font-size: 10.5px;
    margin-top: 1px;
}
.f-dds-shift-table .col-cashier {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.f-dds-shift-table .col-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f-dds-shift-table .col-amount--cash { color: var(--f-success); font-weight: 600; }
.f-dds-shift-table .col-amount--card { color: var(--f-info); }
.f-dds-shift-table .col-amount--total { font-weight: 700; color: var(--f-text); }
.f-dds-shift-table .col-amount--writeoff { color: var(--f-danger); }
.f-dds-shift-table .col-amount--muted { color: var(--f-text-subtle); }

/* Sticky bottom action bar — для bulk-приёма */
.f-dds-shift-bulkbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.f-dds-shift-bulkbar__info {
    font-size: 12px;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}
.f-dds-shift-bulkbar__info b {
    color: var(--f-text);
    font-weight: 600;
}
.f-dds-shift-bulkbar__sep {
    flex: 1;
}

.f-dds-shift-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--f-text-subtle);
    font-size: 13px;
    text-align: center;
}
.f-dds-shift-empty .ph { font-size: 36px; }

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Transfers History (История перемещений) — Frime v2                */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-transfers-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.f-dds-transfers-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.f-dds-transfers-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--f-text);
}
.f-dds-transfers-header__right {
    margin-left: auto;
}

.f-dds-transfers-table-card {
    overflow: hidden;
    padding: 0;
}
.f-dds-transfers-table-scroll {
    max-height: 600px;
    overflow-y: auto;
}
.f-dds-transfers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.f-dds-transfers-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-border);
}
.f-dds-transfers-table th {
    text-align: left;
    padding: 9px 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.f-dds-transfers-table th.amount { text-align: right; }
.f-dds-transfers-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text);
    vertical-align: middle;
}
.f-dds-transfers-table tr:last-child td { border-bottom: none; }
.f-dds-transfers-table .arrow {
    text-align: center;
    color: var(--f-info);
}
.f-dds-transfers-table .arrow .ph { font-size: 14px; }
.f-dds-transfers-table .amount {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--f-info);
}
.f-dds-transfers-table .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    white-space: nowrap;
    color: var(--f-text-muted);
}
.f-dds-transfers-table .who {
    color: var(--f-text-subtle);
    font-size: 11px;
    white-space: nowrap;
}
.f-dds-transfers-table .date {
    font-variant-numeric: tabular-nums;
    color: var(--f-text-muted);
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Categories (Категории) — дерево + бейджи (Frime v2)              */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-cat-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.f-dds-cat-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.f-dds-cat-actions__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Segmented (Все / Наши) */
.f-dds-cat-seg {
    display: inline-flex;
    background: var(--f-surface-sunken);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.f-dds-cat-seg__btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.f-dds-cat-seg__btn:hover {
    color: var(--f-text);
}
.f-dds-cat-seg__btn.is-active {
    background: var(--f-surface);
    color: var(--f-text);
    box-shadow: var(--f-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
    font-weight: 600;
}

/* Список карточек */
.f-dds-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.f-dds-cat-card {
    padding: 0;
    overflow: hidden;
}

/* Root row */
.f-dds-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.f-dds-cat-row.has-children {
    border-bottom: 1px solid var(--f-divider);
}
.f-dds-cat-row__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.f-dds-cat-row__icon .ph { font-size: 17px; }
.f-dds-cat-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.f-dds-cat-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-cat-row__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.f-dds-cat-row__count {
    font-size: 11px;
    color: var(--f-text-subtle);
}
.f-dds-cat-row__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s;
}
.f-dds-cat-card:hover .f-dds-cat-row__actions { opacity: 1; }
.f-dds-cat-card:focus-within .f-dds-cat-row__actions { opacity: 1; }
.f-dds-cat-row__actions .f-btn[data-danger="1"]:hover {
    color: var(--f-danger);
    background: var(--f-danger-soft);
}
.f-dds-cat-row__spacer {
    flex: 1;
}

/* Link area (для СБИС/iiko категорий — связь с «нашей») */
.f-dds-cat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.f-dds-cat-link__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--f-success-soft);
    color: var(--f-success);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f-dds-cat-link__badge .ph {
    font-size: 14px;
}

/* Children */
.f-dds-cat-children {
    padding-left: 52px;
}
.f-dds-cat-child {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 0;
    border-bottom: 1px solid var(--f-divider);
}
.f-dds-cat-child.is-last {
    border-bottom: none;
}
.f-dds-cat-child__bullet {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--f-text-subtle);
    flex-shrink: 0;
}
.f-dds-cat-child__name {
    font-size: 12px;
    color: var(--f-text);
}

/* Empty state */
.f-dds-cat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
}
.f-dds-cat-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--f-surface-alt);
    color: var(--f-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.f-dds-cat-empty__icon .ph { font-size: 30px; }
.f-dds-cat-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--f-text);
}
.f-dds-cat-empty__sub {
    font-size: 12.5px;
    color: var(--f-text-subtle);
    max-width: 360px;
    line-height: 1.4;
}
.f-dds-cat-empty__cta {
    margin-top: 6px;
}

@media (max-width: 720px) {
    .f-dds-cat-children { padding-left: 28px; }
    .f-dds-cat-row__actions { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Sync (Синхронизация СБИС) — Frime v2                             */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-sync-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Hero card */
.f-dds-sync-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    flex-wrap: wrap;
}
.f-dds-sync-hero__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--f-info-soft);
    color: var(--f-info);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.f-dds-sync-hero__icon .ph { font-size: 30px; }

.f-dds-sync-hero__main {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.f-dds-sync-hero__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--f-text);
}
.f-dds-sync-hero__sub {
    font-size: 12px;
    color: var(--f-text-subtle);
}
.f-dds-sync-hero__sub b {
    color: var(--f-text-muted);
    font-weight: 600;
}
.f-dds-sync-hero__period {
    margin-top: 4px;
}
.f-dds-sync-hero__cta {
    flex-shrink: 0;
}

/* Period chip */
.f-dds-sync-period {
    appearance: none;
    background: var(--f-surface-sunken);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--f-text);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-variant-numeric: tabular-nums;
}
.f-dds-sync-period:hover {
    border-color: var(--f-accent);
    background: var(--f-surface);
}
.f-dds-sync-period .ph {
    font-size: 15px;
    color: var(--f-text-subtle);
}
.f-dds-sync-period__label {
    font-weight: 500;
}

/* Sync result block */
.f-dds-sync-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.f-dds-sync-result:empty { display: none; }

.f-dds-sync-result__card {
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid transparent;
}
.f-dds-sync-result__card--ok {
    background: var(--f-success-soft);
    color: var(--f-success);
    border-color: color-mix(in oklab, var(--f-success) 25%, transparent);
}
.f-dds-sync-result__card--err {
    background: var(--f-danger-soft);
    color: var(--f-danger);
    border-color: color-mix(in oklab, var(--f-danger) 25%, transparent);
}
.f-dds-sync-result__card .ph {
    font-size: 22px;
    flex-shrink: 0;
}
.f-dds-sync-result__main {
    flex: 1;
    min-width: 0;
}
.f-dds-sync-result__title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}
.f-dds-sync-result__sub {
    font-size: 12px;
    opacity: 0.85;
}
.f-dds-sync-result__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--f-text-muted);
}
.f-dds-sync-result__stats b {
    color: var(--f-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Spinner inside button */
.f-dds-sync-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: f-dds-sync-spin 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}
@keyframes f-dds-sync-spin {
    to { transform: rotate(360deg); }
}

/* Mapping card */
.f-dds-sync-map-card {
    padding: 0;
    overflow: hidden;
}
.f-dds-sync-map__head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--f-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.f-dds-sync-map__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
}
.f-dds-sync-map__sub {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}

.f-dds-sync-map__table-wrap {
    overflow-x: auto;
}
.f-dds-sync-map__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.f-dds-sync-map__table thead th {
    text-align: left;
    padding: 9px 16px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
}
.f-dds-sync-map__table thead th.actions { width: 48px; }

.f-dds-sync-map__table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text);
    vertical-align: middle;
}
.f-dds-sync-map__table tbody tr:last-child td { border-bottom: none; }

.f-dds-sync-map__dept {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.f-dds-sync-map__dept-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--f-warning-soft);
    color: var(--f-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.f-dds-sync-map__dept-icon .ph { font-size: 15px; }
.f-dds-sync-map__dept-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f-dds-sync-map__safe-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px dashed var(--f-border);
    border-radius: 7px;
    font-size: 11px;
    color: var(--f-text-subtle);
}
.f-dds-sync-map__safe-placeholder .ph { font-size: 13px; }

.f-dds-sync-map__act {
    text-align: right;
    width: 48px;
}
.f-dds-sync-map__act .f-btn[data-danger="1"]:hover {
    color: var(--f-danger);
    background: var(--f-danger-soft);
}

/* Empty state inside table */
.f-dds-sync-map__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
    color: var(--f-text-subtle);
    font-size: 12px;
}
.f-dds-sync-map__empty .ph {
    font-size: 28px;
    color: var(--f-text-subtle);
    opacity: 0.7;
}
.f-dds-sync-map__empty-sub {
    font-size: 11px;
    color: var(--f-text-subtle);
    opacity: 0.85;
}

/* Inline-add row */
.f-dds-sync-map__add-row td {
    background: var(--f-surface-sunken);
    border-top: 1px solid var(--f-border);
}
.f-dds-sync-map__add {
    display: flex;
    align-items: center;
    gap: 8px;
}
.f-dds-sync-map__input {
    flex: 1;
    appearance: none;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--f-text);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.f-dds-sync-map__input:focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--f-accent) 18%, transparent);
}

@media (max-width: 720px) {
    .f-dds-sync-hero { padding: 14px; }
    .f-dds-sync-hero__cta { width: 100%; }
    .f-dds-sync-hero__cta .f-btn { width: 100%; justify-content: center; }
    .f-dds-sync-map__table thead { display: none; }
    .f-dds-sync-map__table tbody td { padding: 10px 12px; }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Modals (Frime v2) — общая обёртка и поля                          */
/* ─────────────────────────────────────────────────────────────────────── */

/* Overlay (общий backdrop) */
.f-dds-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.f-dds-modal.is-open {
    display: flex;
}
.f-dds-modal--top {
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
}

/* Карточка модалки */
.f-dds-modal__card {
    background: var(--f-surface);
    color: var(--f-text);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: f-dds-modal-in .18s ease-out;
}
.f-dds-modal__card--md { max-width: 480px; }
.f-dds-modal__card--lg { max-width: 600px; }
.f-dds-modal__card--xl { max-width: 680px; }

@keyframes f-dds-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.f-dds-modal__head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--f-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.f-dds-modal__head--gradient-danger {
    background: linear-gradient(135deg, var(--f-danger-soft) 0%, var(--f-surface) 100%);
}
.f-dds-modal__head--gradient-success {
    background: linear-gradient(135deg, var(--f-success-soft) 0%, var(--f-surface) 100%);
}
.f-dds-modal__head-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.f-dds-modal__head-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.f-dds-modal__head-icon .ph { font-size: 20px; }
.f-dds-modal__head-text { min-width: 0; }
.f-dds-modal__overline {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
}
.f-dds-modal__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
}
.f-dds-modal__subtitle {
    font-size: 12px;
    color: var(--f-text-muted);
    margin-top: 3px;
}
.f-dds-modal__head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Сегмент типа в шапке */
.f-dds-modal__type-seg {
    display: inline-flex;
    background: var(--f-surface-alt);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.f-dds-modal__type-btn {
    appearance: none;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--f-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s;
}
.f-dds-modal__type-btn .ph { font-size: 12px; }
.f-dds-modal__type-btn:hover { color: var(--f-text); }
.f-dds-modal__type-btn.is-active[data-type="expense"] {
    background: var(--f-danger-soft);
    color: var(--f-danger);
    font-weight: 600;
}
.f-dds-modal__type-btn.is-active[data-type="income"] {
    background: var(--f-success-soft);
    color: var(--f-success);
    font-weight: 600;
}
.f-dds-modal__type-btn.is-active[data-type="transfer"] {
    background: var(--f-info-soft);
    color: var(--f-info);
    font-weight: 600;
}

/* Body */
.f-dds-modal__body {
    flex: 1;
    overflow: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Footer */
.f-dds-modal__foot {
    padding: 12px 22px;
    border-top: 1px solid var(--f-border);
    background: var(--f-surface-alt);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.f-dds-modal__foot-hint {
    font-size: 11px;
    color: var(--f-text-subtle);
    display: flex;
    align-items: center;
    gap: 4px;
}
.f-dds-modal__foot-hint .ph { font-size: 12px; }
.f-dds-modal__foot-actions {
    display: flex;
    gap: 6px;
}

/* Поле формы */
.f-dds-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.f-dds-field__label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text-muted);
    text-transform: none;
    letter-spacing: normal;
}
.f-dds-field__label-required {
    color: var(--f-danger);
    font-size: 10px;
}
.f-dds-field__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Унифицированный input/textarea */
.f-dds-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface);
    color: var(--f-text);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .12s, box-shadow .12s;
}
.f-dds-input:focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--f-accent) 18%, transparent);
}
.f-dds-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--f-surface-alt);
}
textarea.f-dds-input {
    resize: vertical;
    line-height: 1.5;
    min-height: 56px;
}

/* Кнопка-триггер v2-датапикера (вместо native input[type="date"]) */
button.f-dds-date-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
    color: var(--f-text);
}
button.f-dds-date-trigger .ph {
    font-size: 16px;
    color: var(--f-text-muted);
    flex-shrink: 0;
}
button.f-dds-date-trigger:hover:not(:disabled) {
    border-color: var(--f-border-strong);
}
button.f-dds-date-trigger .f-dds-date-trigger__value {
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
button.f-dds-date-trigger .f-dds-date-trigger__value.is-placeholder {
    color: var(--f-text-subtle);
}

/* Поле «Сумма» с валютой */
.f-dds-amount {
    position: relative;
}
.f-dds-amount__currency {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 700;
    color: var(--f-text-subtle);
    pointer-events: none;
}
.f-dds-amount__input {
    width: 100%;
    padding: 10px 12px 10px 32px;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    border: 2px solid var(--f-accent);
    border-radius: 10px;
    background: var(--f-surface);
    color: var(--f-text);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.f-dds-amount__input:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--f-accent) 18%, transparent);
}

/* Drop-zone для чека / файла */
.f-dds-dropzone {
    position: relative;
    padding: 16px 14px;
    border: 1.5px dashed var(--f-border);
    border-radius: 10px;
    background: var(--f-surface-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    text-align: center;
}
.f-dds-dropzone:hover {
    border-color: var(--f-accent);
    background: color-mix(in oklab, var(--f-accent-soft) 60%, var(--f-surface-alt));
}
.f-dds-dropzone.is-dragover {
    border-color: var(--f-accent);
    background: var(--f-accent-soft);
}
.f-dds-dropzone__hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.f-dds-dropzone__icon {
    font-size: 24px !important;
    color: var(--f-text-subtle);
}
.f-dds-dropzone__text {
    font-size: 12.5px;
    color: var(--f-text-muted);
}
.f-dds-dropzone__text b { color: var(--f-accent-text); font-weight: 600; }
.f-dds-dropzone__hint {
    font-size: 10.5px;
    color: var(--f-text-subtle);
}

/* OCR success card */
.f-dds-ocr-card {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--f-success);
    background: var(--f-success-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}
.f-dds-ocr-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--f-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.f-dds-ocr-card__icon .ph { font-size: 18px; }
.f-dds-ocr-card__main { flex: 1; min-width: 0; }
.f-dds-ocr-card__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--f-success);
}
.f-dds-ocr-card__sub {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 1px;
}
.f-dds-ocr-card__sub b { color: var(--f-text); font-weight: 600; }

/* OCR scanning state */
.f-dds-ocr-scan {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px dashed var(--f-info);
    background: var(--f-info-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--f-info);
    font-size: 12px;
    font-weight: 500;
}
.f-dds-ocr-scan .ph {
    font-size: 16px;
    animation: f-dds-spin 1s linear infinite;
}
@keyframes f-dds-spin {
    to { transform: rotate(360deg); }
}

/* File preview (выбранный файл) */
.f-dds-file-preview {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--f-border);
    background: var(--f-surface-alt);
    display: flex;
    align-items: center;
    gap: 10px;
}
.f-dds-file-preview__thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--f-info-soft);
    color: var(--f-info);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.f-dds-file-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.f-dds-file-preview__thumb .ph { font-size: 18px; }
.f-dds-file-preview__main { flex: 1; min-width: 0; }
.f-dds-file-preview__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-file-preview__meta {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Entry Detail Modal — Frime v2                                     */
/* ─────────────────────────────────────────────────────────────────────── */

/* Сводка сверху */
.f-dds-detail-modal__summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.f-dds-detail-modal__amount {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.8px;
    color: var(--f-text);
}
.f-dds-detail-modal__amount--expense { color: var(--f-danger); }
.f-dds-detail-modal__amount--income { color: var(--f-success); }
.f-dds-detail-modal__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--f-text-subtle);
}
.f-dds-detail-modal__meta b { color: var(--f-text); font-weight: 500; }

/* Секция (Файлы / История / Позиции чека) */
.f-dds-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.f-dds-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.f-dds-section__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.f-dds-section__title .ph { font-size: 14px; }

/* Файлы — grid превью */
.f-dds-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.f-dds-file-tile {
    position: relative;
    border: 1px solid var(--f-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--f-surface-alt);
    aspect-ratio: 1.4;
    display: flex;
    flex-direction: column;
}
.f-dds-file-tile__media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--f-surface-sunken);
}
.f-dds-file-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform .12s;
}
.f-dds-file-tile__media img:hover { transform: scale(1.04); }
.f-dds-file-tile__media .ph {
    font-size: 32px;
    color: var(--f-danger);
}
.f-dds-file-tile__name {
    padding: 6px 8px;
    font-size: 10.5px;
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-file-tile__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    appearance: none;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s, background .12s;
}
.f-dds-file-tile:hover .f-dds-file-tile__remove { opacity: 1; }
.f-dds-file-tile__remove:hover { background: var(--f-danger); }
.f-dds-file-tile__remove .ph {
    font-size: 14px;
    color: #fff;
}

/* Drop-zone компактный */
.f-dds-dropzone--compact {
    padding: 8px 12px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}
.f-dds-dropzone--compact .f-dds-dropzone__icon { font-size: 16px !important; }

/* История изменений timeline */
.f-dds-timeline {
    border: 1px solid var(--f-border);
    border-radius: 10px;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}
.f-dds-timeline__row {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-divider);
}
.f-dds-timeline__row:last-child { border-bottom: none; }
.f-dds-timeline__bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--f-accent);
    margin-top: 6px;
    flex-shrink: 0;
}
.f-dds-timeline__bullet--danger { background: var(--f-danger); }
.f-dds-timeline__main { flex: 1; min-width: 0; }
.f-dds-timeline__action {
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text);
}
.f-dds-timeline__diff {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 2px;
}
.f-dds-timeline__diff .old {
    text-decoration: line-through;
    color: var(--f-text-subtle);
}
.f-dds-timeline__diff .new {
    color: var(--f-accent-text);
    font-weight: 500;
}
.f-dds-timeline__when {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Позиции чека */
.f-dds-receipt-items {
    border: 1px solid var(--f-border);
    border-radius: 10px;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.f-dds-receipt-items table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.f-dds-receipt-items th {
    text-align: left;
    padding: 7px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--f-surface-sunken);
    border-bottom: 1px solid var(--f-border);
    position: sticky;
    top: 0;
}
.f-dds-receipt-items th.num { text-align: right; }
.f-dds-receipt-items td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--f-divider);
}
.f-dds-receipt-items tr:last-child td { border-bottom: none; }
.f-dds-receipt-items td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f-dds-receipt-items td.sum {
    font-weight: 600;
}
.f-dds-receipt-items__note {
    padding: 8px 12px;
    background: var(--f-warning-soft);
    color: var(--f-warning);
    font-size: 11px;
    border-top: 1px solid var(--f-divider);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Transfer Modal — Frime v2                                         */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-tr-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4px 0;
}
.f-dds-tr-swap__line {
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px solid var(--f-divider);
}
.f-dds-tr-swap__btn {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--f-text-muted);
    box-shadow: var(--f-shadow);
    transition: border-color .12s, color .12s, transform .15s;
}
.f-dds-tr-swap__btn:hover {
    border-color: var(--f-accent);
    color: var(--f-accent);
    transform: rotate(180deg);
}
.f-dds-tr-swap__btn .ph { font-size: 18px; }

.f-dds-tr-preview {
    padding: 10px 12px;
    background: var(--f-surface-alt);
    border-radius: 10px;
    border: 1px solid var(--f-border);
}
.f-dds-tr-preview__title {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.f-dds-tr-preview__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
}
.f-dds-tr-preview__row + .f-dds-tr-preview__row {
    border-top: 1px dashed var(--f-divider);
}
.f-dds-tr-preview__label {
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-tr-preview__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--f-text);
    white-space: nowrap;
}
.f-dds-tr-preview__value--danger { color: var(--f-danger); }

.f-dds-tr-warn {
    font-size: 11px;
    color: var(--f-danger);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.f-dds-tr-warn .ph { font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Create Safe Modal — Frime v2 (radio-cards)                        */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-cs-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.f-dds-cs-type {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--f-border);
    background: var(--f-surface);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: border-color .12s, background .12s;
    text-align: left;
}
.f-dds-cs-type:hover {
    border-color: var(--f-accent);
}
.f-dds-cs-type.is-selected {
    border: 2px solid var(--f-accent);
    background: var(--f-accent-soft);
    padding: 9px 11px;
}
.f-dds-cs-type__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--f-surface-alt);
    color: var(--f-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.f-dds-cs-type__icon .ph { font-size: 16px; }
.f-dds-cs-type.is-selected .f-dds-cs-type__icon {
    background: var(--f-accent);
    color: #fff;
}
.f-dds-cs-type__main { min-width: 0; }
.f-dds-cs-type__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--f-text);
}
.f-dds-cs-type.is-selected .f-dds-cs-type__label { color: var(--f-accent-text); }
.f-dds-cs-type__desc {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
    line-height: 1.4;
}

/* Сегменты (текущее заведение / все) */
.f-dds-cs-scope {
    display: flex;
    gap: 6px;
}
.f-dds-cs-scope__btn {
    flex: 1;
    appearance: none;
    border: 1px solid var(--f-border);
    background: var(--f-surface);
    color: var(--f-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color .12s, background .12s, color .12s;
}
.f-dds-cs-scope__btn:hover { border-color: var(--f-accent); }
.f-dds-cs-scope__btn .ph { font-size: 14px; }
.f-dds-cs-scope__btn.is-active {
    border: 2px solid var(--f-accent);
    padding: 7px 11px;
    background: var(--f-accent-soft);
    color: var(--f-accent-text);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* DDS · Accept Shifts Modal — Frime v2                                    */
/* ─────────────────────────────────────────────────────────────────────── */

.f-dds-accept-list {
    border: 1px solid var(--f-border);
    border-radius: 10px;
    overflow: hidden;
}
.f-dds-accept-row {
    display: grid;
    grid-template-columns: 30px 60px 1fr 100px 100px 110px;
    gap: 8px;
    padding: 9px 12px;
    align-items: center;
    border-top: 1px solid var(--f-divider);
    font-size: 12px;
}
.f-dds-accept-row:first-child { border-top: none; }
.f-dds-accept-row--head {
    background: var(--f-surface-sunken);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.f-dds-accept-row__num {
    font-weight: 600;
    color: var(--f-text-muted);
    font-variant-numeric: tabular-nums;
}
.f-dds-accept-row__date {
    font-size: 12px;
}
.f-dds-accept-row__cashier {
    font-size: 11px;
    color: var(--f-text-subtle);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-dds-accept-row__cash {
    text-align: right;
    font-weight: 700;
    color: var(--f-success);
    font-variant-numeric: tabular-nums;
}
.f-dds-accept-row__card {
    text-align: right;
    color: var(--f-info);
    font-variant-numeric: tabular-nums;
}
.f-dds-accept-row__total {
    text-align: right;
    font-weight: 700;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
}
.f-dds-accept-row__cb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.f-dds-accept-row__cb input { accent-color: var(--f-accent); cursor: pointer; }

.f-dds-accept-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 12px 14px;
    background: var(--f-success-soft);
    border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--f-success) 25%, transparent);
}
.f-dds-accept-summary__cell-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--f-text-subtle);
}
.f-dds-accept-summary__cell-label--success { color: var(--f-success); }
.f-dds-accept-summary__cell-value {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.4px;
    margin-top: 3px;
    color: var(--f-text);
}
.f-dds-accept-summary__cell-value--success { color: var(--f-success); }
.f-dds-accept-summary__cell-value--info { color: var(--f-info); }
.f-dds-accept-summary__cell-target {
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--f-text);
}
.f-dds-accept-summary__cell-target .ph {
    font-size: 14px;
    color: var(--f-text-subtle);
}

/* Чекбокс «Подтверждено» в шапке таблицы */
.f-dds-accept-confirm-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .f-dds-accept-row {
        grid-template-columns: 28px 1fr 90px;
        gap: 6px;
    }
    .f-dds-accept-row__num,
    .f-dds-accept-row__card,
    .f-dds-accept-row__total { display: none; }
    .f-dds-accept-summary { grid-template-columns: 1fr; }
    .f-dds-cs-types { grid-template-columns: 1fr; }
}

/* ============================================================
   v2 · Checklists (Journal / Templates / Editor)
   ============================================================ */

.cl-v2 { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.cl-empty { padding: 48px 16px; text-align: center; color: var(--f-text-muted); }
.cl-empty-title { font-size: 15px; font-weight: 600; color: var(--f-text); margin-bottom: 4px; }

/* ── Editor layout ───────────────────────────────────────────── */
.cl-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    padding: 16px 24px 48px;
    overflow: auto;
}
.cl-editor-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cl-editor-aside {
    position: sticky; top: 16px; align-self: start;
    display: flex; flex-direction: column; gap: 16px;
    max-height: calc(100vh - 32px); overflow: auto;
}
.cl-editor-aside-block {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-md); padding: 12px 14px;
}
.cl-editor-aside-title {
    font-size: 12px; font-weight: 600; color: var(--f-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px;
}

@media (max-width: 1100px) {
    .cl-editor-layout { grid-template-columns: 1fr; }
    .cl-editor-aside { position: static; max-height: none; }
}

/* ── Accordion sections ─────────────────────────────────────── */
.cl-acc {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-md); overflow: hidden;
}
.cl-acc-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; user-select: none;
}
.cl-acc-head:hover { background: var(--f-surface-alt); }
.cl-acc-head-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--r-sm);
    background: var(--f-accent-soft); color: var(--f-accent-text);
}
.cl-acc-title { font-size: 14px; font-weight: 600; color: var(--f-text); flex: 1; }
.cl-acc-count {
    font-size: 11px; font-weight: 500; color: var(--f-text-muted);
    padding: 2px 8px; border-radius: var(--r-pill); background: var(--f-surface-sunken);
}
.cl-acc-chevron { color: var(--f-text-muted); transition: transform .2s; }
.cl-acc.open .cl-acc-chevron { transform: rotate(180deg); }
.cl-acc-body { padding: 4px 14px 14px; display: none; }
.cl-acc.open .cl-acc-body { display: block; }

/* ── Drawer-style form bits (inherited from older UI) ────────── */
.cl-drw-section { margin-bottom: 12px; }
.cl-drw-label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--f-text-muted); margin-bottom: 6px;
}
.cl-drw-input {
    width: 100%; padding: 8px 10px;
    background: var(--f-surface); color: var(--f-text);
    border: 1px solid var(--f-border); border-radius: var(--r-sm);
    font: inherit; transition: border-color .15s, box-shadow .15s;
}
.cl-drw-input:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); }
.cl-drw-input--sm { max-width: 96px; }
.cl-drw-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-drw-radio {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border: 1px solid var(--f-border);
    border-radius: var(--r-pill); cursor: pointer; background: var(--f-surface);
    font-size: 13px;
}
.cl-drw-radio:has(input:checked) {
    border-color: var(--f-accent); background: var(--f-accent-soft); color: var(--f-accent-text);
}
.cl-drw-radio input { accent-color: var(--f-accent); }
.cl-drw-hint { font-size: 12px; color: var(--f-text-subtle); }

/* ── Day-of-week chips ──────────────────────────────────────── */
.cl-dow-wrap { display: flex; flex-direction: column; gap: 10px; }
.cl-dow-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-dow-chip {
    min-width: 42px; padding: 8px 10px; font-size: 13px; font-weight: 500;
    background: var(--f-surface); color: var(--f-text-muted);
    border: 1px solid var(--f-border); border-radius: var(--r-sm);
    cursor: pointer; transition: all .15s;
}
.cl-dow-chip:hover { background: var(--f-surface-alt); color: var(--f-text); }
.cl-dow-chip.cl-dow-chip--active {
    background: var(--f-accent-soft); color: var(--f-accent-text);
    border-color: var(--f-accent);
}
.cl-dow-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-dow-preset {
    padding: 4px 10px; font-size: 12px; color: var(--f-text-muted);
    background: transparent; border: 1px dashed var(--f-border);
    border-radius: var(--r-pill); cursor: pointer;
}
.cl-dow-preset:hover { color: var(--f-accent-text); border-color: var(--f-accent); background: var(--f-accent-soft); }

/* ── Recurrence picker ─────────────────────────────────────── */
.cl-rec { display: flex; flex-direction: column; gap: 12px; }
.cl-rec-seg-holder .f-seg { display: inline-flex; }
.cl-rec-body { padding: 4px 0; }
.cl-rec-summary {
    font-size: 12px; color: var(--f-text-muted);
    padding: 6px 10px; background: var(--f-surface-sunken); border-radius: var(--r-sm);
}
.cl-rec-hint { font-size: 13px; color: var(--f-text-muted); padding: 6px 0; }
.cl-rec-rule { display: flex; flex-direction: column; gap: 12px; }
.cl-rec-rule-sel { max-width: 320px; }
.cl-rec-rule-sub { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.cl-rec-sub-row { display: flex; align-items: center; gap: 12px; }
.cl-rec-sub-row .cl-drw-label { margin: 0; min-width: 88px; }
.cl-rec-wd-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-rec-period { border: 1px dashed var(--f-border); border-radius: var(--r-sm); }
.cl-rec-period-sum {
    padding: 8px 10px; font-size: 13px; color: var(--f-text-muted); cursor: pointer;
}
.cl-rec-period[open] .cl-rec-period-sum { color: var(--f-text); font-weight: 500; }
.cl-rec-period-body { display: flex; gap: 12px; padding: 8px 10px 12px; flex-wrap: wrap; }
.cl-rec-date { display: flex; flex-direction: column; gap: 4px; }
.cl-rec-date-lbl { font-size: 12px; color: var(--f-text-muted); }

/* ── Schedule preview ─────────────────────────────────────── */
.cl-schedule-preview { font-size: 13px; color: var(--f-text); }
.cl-sp-loading, .cl-sp-error, .cl-sp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px; text-align: center; color: var(--f-text-muted);
}
.cl-sp-error { color: var(--f-danger); }
.cl-sp-empty-title { font-weight: 600; color: var(--f-text); }
.cl-sp-empty-hint { font-size: 12px; }
.cl-sp-btn {
    margin-top: 6px; padding: 4px 10px; font-size: 12px;
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-sm); color: var(--f-text); cursor: pointer;
}
.cl-sp-month { margin-bottom: 12px; }
.cl-sp-month-title {
    font-size: 12px; font-weight: 600; color: var(--f-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.cl-sp-list { list-style: none; margin: 0; padding: 0; }
.cl-sp-row {
    display: grid; grid-template-columns: 28px 30px 1fr;
    gap: 8px; padding: 4px 0; font-variant-numeric: tabular-nums;
}
.cl-sp-dnum { color: var(--f-text); font-weight: 600; text-align: right; }
.cl-sp-dow { color: var(--f-text-muted); text-transform: lowercase; }
.cl-sp-win { color: var(--f-text-muted); font-size: 12px; }
.cl-sp-meta { font-size: 12px; color: var(--f-text-subtle); }

/* ── Phone preview ────────────────────────────────────────── */
.cl-phone-mockup {
    background: var(--f-surface-alt); border-radius: var(--r-lg);
    padding: 10px; display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--f-border);
}
.cl-phone-status { font-size: 10px; color: var(--f-text-subtle); text-transform: uppercase; }
.cl-phone-title { font-size: 15px; font-weight: 700; color: var(--f-text); }
.cl-phone-meta { font-size: 12px; color: var(--f-text-muted); }
.cl-phone-q {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-sm); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.cl-phone-q-text { font-size: 13px; color: var(--f-text); }
.cl-phone-q-btns { display: flex; gap: 6px; }
.cl-phone-q-btn {
    flex: 1; padding: 5px 8px; text-align: center; font-size: 12px;
    border-radius: var(--r-sm); border: 1px solid var(--f-border);
}
.cl-phone-q-btn.ok { color: var(--f-success); background: var(--f-success-soft); border-color: transparent; }
.cl-phone-q-btn.nok { color: var(--f-danger); background: var(--f-danger-soft); border-color: transparent; }
.cl-phone-finish {
    text-align: center; padding: 8px; background: var(--f-accent);
    color: var(--f-accent-on); border-radius: var(--r-sm); font-weight: 600; font-size: 13px;
}

/* ── Questions editor ─────────────────────────────────────── */
.cl-drw-questions { display: flex; flex-direction: column; gap: 8px; }
.cl-drw-qrow {
    display: grid; grid-template-columns: 20px 1fr 32px; gap: 8px;
    align-items: start; padding: 8px; border: 1px solid var(--f-border);
    border-radius: var(--r-sm); background: var(--f-surface);
}
.cl-drw-qdrag { color: var(--f-text-subtle); cursor: grab; padding-top: 8px; }
.cl-drw-qbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-drw-qphoto-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cl-drw-qphoto-check {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--f-text-muted); cursor: pointer;
}
.cl-drw-qphoto-check.is-dim { color: var(--f-text-subtle); }
.cl-drw-qphoto-check input { accent-color: var(--f-accent); }
.cl-drw-qdel { display: flex; align-items: start; }
.cl-add-q-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; margin-top: 4px;
    background: transparent; border: 1px dashed var(--f-border);
    border-radius: var(--r-sm); color: var(--f-text-muted); cursor: pointer;
    font: inherit;
}
.cl-add-q-btn:hover { color: var(--f-accent-text); border-color: var(--f-accent); }

/* ── Payroll section grouping ─────────────────────────────────────────── */
.payroll-section-header {
    background: var(--f-surface-alt);
    border-top: 1px solid var(--f-divider);
    border-bottom: 1px solid var(--f-divider);
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease;
}
.payroll-section-header:hover { background: var(--f-surface-sunken, var(--f-surface-alt)); }
.payroll-section-title {
    padding: 10px 16px;
    font-weight: 600;
    color: var(--f-text);
    text-align: left;
}
.payroll-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.payroll-section-chevron {
    color: var(--f-text-subtle);
    transition: transform 160ms ease;
    transform: rotate(0deg);
    font-size: 18px;
}
.payroll-section-header.collapsed .payroll-section-chevron {
    transform: rotate(-90deg);
}
.payroll-section-name {
    font-weight: 600;
    color: var(--f-text);
}
.payroll-section-count {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--f-text-subtle);
    padding: 2px 8px;
    background: var(--f-surface);
    border: 1px solid var(--f-divider);
    border-radius: 999px;
}
.payroll-section-cell {
    padding: 10px 16px;
}
.payroll-section-cell-num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.payroll-row-hidden {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
 * JournalView v2 (route: /journal-v2) — scaffold (commit 8)
 * Реальная стилизация контента — в коммитах 9-11.
 * ───────────────────────────────────────────────────────────── */
.jv2 {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0; background: var(--f-bg);
}
.jv2-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 16px 20px;
}

/* Tabs (Сегодня / По дням / По сотруднику) */
.jv2-tabs {
    display: inline-flex; gap: 2px; padding: 2px;
    background: var(--f-surface-2, var(--f-surface));
    border: 1px solid var(--f-border);
    border-radius: var(--r-md, 8px);
}
.jv2-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 13px; font-weight: 500;
    color: var(--f-text-muted); background: transparent; border: 0;
    border-radius: var(--r-sm, 6px); cursor: pointer;
    transition: background-color .12s, color .12s;
}
.jv2-tab:hover { color: var(--f-text); background: var(--f-hover, rgba(0,0,0,.04)); }
.jv2-tab.is-active {
    color: var(--f-text);
    background: var(--f-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Mode panels */
.jv2-mode-panel { width: 100%; }
.jv2-mode-panel.hidden { display: none !important; }

/* Empty state placeholder (заглушка для коммита 8) */
.jv2-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 64px 16px; text-align: center;
    color: var(--f-text-muted);
}
.jv2-empty-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--f-surface-2, var(--f-surface));
    color: var(--f-text-subtle);
}
.jv2-empty-title { font-size: 15px; font-weight: 600; color: var(--f-text); }
.jv2-empty-hint { font-size: 13px; color: var(--f-text-subtle); max-width: 420px; }

/* ───────────────────────────────────────────────────────────────
 * JournalView v2 · режим «Сегодня» (commit 9)
 * KPI cards + Attention list + Live Feed + дата-навигация
 * ─────────────────────────────────────────────────────────────── */

/* Date navigation в TopBar (для режима «Сегодня») */
.jv2-date-nav {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-md, 8px); padding: 2px;
}
.jv2-date-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 0; background: transparent;
    color: var(--f-text-muted); border-radius: var(--r-sm, 6px); cursor: pointer;
    transition: background-color .12s, color .12s;
}
.jv2-date-nav-btn:hover { background: var(--f-surface-alt); color: var(--f-text); }
.jv2-date-nav-label {
    font-size: 13px; font-weight: 500; color: var(--f-text);
    padding: 0 10px; white-space: nowrap;
}

/* Алерт-бейдж в actions с пульсом */
.jv2-alerts-badge-wrap {
    display: inline-flex; align-items: center; gap: 6px;
}
.jv2-pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--f-danger); position: relative;
    flex-shrink: 0;
}
.jv2-pulse-dot::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: var(--f-danger); opacity: .35;
    animation: jv2Pulse 2s ease-in-out infinite;
}
@keyframes jv2Pulse {
    0%, 100% { transform: scale(1); opacity: .35; }
    50% { transform: scale(1.6); opacity: 0; }
}

/* Today panel layout */
.jv2-today {
    display: flex; flex-direction: column; gap: 16px;
}

/* KPI grid */
.jv2-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.jv2-kpi-card {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 12px); padding: 16px;
    box-shadow: var(--f-shadow-sm); cursor: pointer;
    transition: box-shadow .12s, border-color .12s, transform .12s;
    text-align: left; font-family: inherit;
    border-left-width: 3px;
}
.jv2-kpi-card:hover {
    box-shadow: var(--f-shadow);
    border-color: var(--f-border-strong);
    transform: translateY(-1px);
}
.jv2-kpi-card.is-active {
    border-color: var(--f-accent);
    background: var(--f-accent-soft, var(--f-surface-alt));
}
.jv2-kpi-success  { border-left-color: var(--f-success); }
.jv2-kpi-warning  { border-left-color: var(--f-warning-strong, var(--f-warning, #c08400)); }
.jv2-kpi-danger   { border-left-color: var(--f-danger); }
.jv2-kpi-neutral  { border-left-color: var(--f-text-subtle); }

.jv2-kpi-label {
    font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--f-text-muted); margin-bottom: 6px;
}
.jv2-kpi-value {
    font-size: 28px; font-weight: 700; letter-spacing: -.03em;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.jv2-kpi-value-success { color: var(--f-success); }
.jv2-kpi-value-warning { color: var(--f-warning-strong, var(--f-warning, #c08400)); }
.jv2-kpi-value-danger  { color: var(--f-danger); }
.jv2-kpi-value-neutral { color: var(--f-text); }
.jv2-kpi-sub {
    font-size: 12px; color: var(--f-text-subtle); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Two-column layout */
.jv2-two-col {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px; align-items: start;
}
@media (max-width: 1100px) {
    .jv2-two-col { grid-template-columns: 1fr; }
}

/* Section head */
.jv2-section-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--f-text-muted);
    padding-bottom: 8px;
}
.jv2-section-count {
    padding: 1px 7px; border-radius: var(--r-pill, 999px);
    background: var(--f-danger-soft); color: var(--f-danger);
    font-size: 11px; font-weight: 700;
}

/* Alert cards */
.jv2-alert-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px;
}
.jv2-alert-card {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 12px); box-shadow: var(--f-shadow-sm);
    overflow: hidden;
    transition: box-shadow .12s;
}
.jv2-alert-card:hover { box-shadow: var(--f-shadow); }
.jv2-alert-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-left: 3px solid transparent;
}
.jv2-alert-danger  .jv2-alert-head { border-left-color: var(--f-danger); background: rgba(180,32,44,.03); }
.jv2-alert-warning .jv2-alert-head { border-left-color: var(--f-warning-strong, var(--f-warning, #c08400)); background: rgba(138,95,0,.03); }
.dark .jv2-alert-danger  .jv2-alert-head { background: rgba(228,119,129,.05); }
.dark .jv2-alert-warning .jv2-alert-head { background: rgba(217,168,74,.05); }

.jv2-alert-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.jv2-alert-dot-danger  { background: var(--f-danger); }
.jv2-alert-dot-warning { background: var(--f-warning-strong, var(--f-warning, #c08400)); }
.jv2-alert-name-block { flex: 1; min-width: 0; }
.jv2-alert-name { font-size: 13.5px; font-weight: 600; color: var(--f-text); }
.jv2-alert-meta {
    font-size: 11.5px; color: var(--f-text-subtle);
    display: flex; align-items: center; gap: 6px; margin-top: 2px;
    flex-wrap: wrap;
}
.jv2-alert-type-danger  { color: var(--f-danger); font-weight: 600; }
.jv2-alert-type-warning { color: var(--f-warning-strong, var(--f-warning, #c08400)); font-weight: 600; }
.jv2-alert-open { padding: 4px !important; }
.jv2-alert-body {
    padding: 10px 14px 12px; border-top: 1px solid var(--f-divider);
}
.jv2-alert-plan { font-size: 12px; color: var(--f-text-muted); }
.jv2-alert-plan b { color: var(--f-text); font-weight: 500; }

/* Inline-резолв алертов (коммит 10) */
.jv2-alert-resolve {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--f-divider);
}
.jv2-reason-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
}
.jv2-reason-row-label {
    font-size: 11.5px; color: var(--f-text-subtle);
    margin-right: 4px;
}
.jv2-reason-chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--f-border); background: var(--f-surface);
    color: var(--f-text-muted); font-size: 12px; font-weight: 500;
    cursor: pointer; user-select: none;
    font-family: inherit;
    transition: background-color .1s, border-color .1s, color .1s;
}
.jv2-reason-chip:hover {
    background: var(--f-surface-alt);
    border-color: var(--f-border-strong, var(--f-border));
}
.jv2-reason-chip.is-active {
    background: rgba(180,32,44,.08);
    border-color: var(--f-warning-strong, var(--f-warning, #c08400));
    color: var(--f-warning-strong, var(--f-warning, #c08400));
}
.dark .jv2-reason-chip.is-active {
    background: rgba(217,168,74,.12);
    color: var(--f-warning-strong, var(--f-warning, #c08400));
}
.jv2-action-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
}

.jv2-section-badge {
    display: inline-block; padding: 2px 7px; border-radius: var(--r-sm, 6px);
    font-size: 11px; font-weight: 600;
    background: var(--f-surface-alt); color: var(--f-text-muted);
}

.jv2-empty-mini {
    display: flex; align-items: center; gap: 8px;
    padding: 16px; border-radius: var(--r-lg, 12px);
    background: var(--f-surface); border: 1px solid var(--f-border);
    color: var(--f-text-muted); font-size: 13px;
}

/* Collapse «В норме» */
.jv2-collapse {
    border: 1px solid var(--f-border); border-radius: var(--r-lg, 12px);
    background: var(--f-surface); overflow: hidden; margin-bottom: 12px;
}
.jv2-collapse-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: pointer; user-select: none;
    background: transparent; border: 0; width: 100%;
    font-family: inherit; transition: background-color .1s;
    color: var(--f-text-muted);
}
.jv2-collapse-head:hover { background: var(--f-surface-alt); }
.jv2-collapse-label { flex: 1; text-align: left; font-size: 13px; font-weight: 500; color: var(--f-text-muted); }
.jv2-collapse-count { font-size: 12px; color: var(--f-text-subtle); margin-right: 4px; }
.jv2-collapse-body {
    border-top: 1px solid var(--f-divider); padding: 4px 0;
    display: flex; flex-direction: column;
}
.jv2-collapse-body.hidden { display: none; }

.jv2-normal-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid var(--f-divider);
    font-size: 13px;
}
.jv2-normal-row:last-child { border-bottom: 0; }
.jv2-normal-time {
    font-size: 11px; color: var(--f-text-subtle);
    width: 44px; font-variant-numeric: tabular-nums;
}
.jv2-normal-name { flex: 1; font-weight: 500; color: var(--f-text); }

/* Bulk bar */
.jv2-bulk-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 12px);
    background: var(--f-surface-alt);
}

/* Live feed */
.jv2-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--f-success); position: relative; flex-shrink: 0;
}
.jv2-live-dot::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: var(--f-success); opacity: .3;
    animation: jv2Pulse 2s ease-in-out infinite;
}
.jv2-live-feed {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 12px); box-shadow: var(--f-shadow-sm);
    display: flex; flex-direction: column; overflow: hidden;
}
.jv2-live-feed-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--f-divider);
    font-size: 13px; font-weight: 600; color: var(--f-text);
}
.jv2-live-feed-meta {
    margin-left: auto; font-size: 11.5px; font-weight: 400;
    color: var(--f-text-subtle);
}
.jv2-feed-list {
    overflow-y: auto; max-height: 480px;
}
.jv2-feed-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 28px 14px; color: var(--f-text-subtle); font-size: 13px;
}
.jv2-feed-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--f-divider);
    transition: background-color .1s;
}
.jv2-feed-item:last-child { border-bottom: 0; }
.jv2-feed-item:hover { background: var(--f-surface-alt); }
.jv2-feed-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.jv2-feed-icon-alert { background: var(--f-danger-soft); color: var(--f-danger); }
.jv2-feed-icon-warn  { background: var(--f-warning-soft, rgba(217,168,74,.18)); color: var(--f-warning-strong, var(--f-warning, #c08400)); }
.jv2-feed-icon-ok    { background: var(--f-success-soft); color: var(--f-success); }
.jv2-feed-body { flex: 1; min-width: 0; }
.jv2-feed-name { font-size: 12.5px; font-weight: 600; color: var(--f-text); }
.jv2-feed-desc { font-size: 12px; color: var(--f-text-muted); margin-top: 1px; }
.jv2-feed-action {
    font-size: 11px; color: var(--f-accent-text, var(--f-accent));
    cursor: pointer; margin-top: 3px; font-weight: 500;
    display: inline-block;
}
.jv2-feed-action:hover { text-decoration: underline; }
.jv2-feed-time {
    font-size: 11px; color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
    padding-top: 2px;
}

/* Skeleton */
.jv2-skel {
    background: linear-gradient(90deg,
        var(--f-surface-alt) 0%,
        var(--f-surface) 50%,
        var(--f-surface-alt) 100%);
    background-size: 200% 100%;
    animation: jv2SkelShimmer 1.4s ease-in-out infinite;
    min-height: 96px;
    border: 1px solid var(--f-border);
}
@keyframes jv2SkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error state */
.jv2-error-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 64px 16px; text-align: center;
}
.jv2-error-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--f-danger-soft); color: var(--f-danger);
}
.jv2-error-title { font-size: 15px; font-weight: 600; color: var(--f-text); }
.jv2-error-hint  { font-size: 13px; color: var(--f-text-subtle); max-width: 480px; }

/* ──────────────────────────────────────────────────────────────────────────
   Journal v2 — by_day mode (таблица + bulk-bar)
   ────────────────────────────────────────────────────────────────────────── */
.jv2-byday {
    display: flex; flex-direction: column; gap: 12px;
}
.jv2-byday-empty {
    padding: 48px 16px; text-align: center;
    color: var(--f-text-subtle); font-size: 13px;
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 12px);
}

.jv2-tbl-wrap {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-lg, 12px); box-shadow: var(--f-shadow-sm);
    overflow: hidden;
}
.jv2-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.jv2-tbl thead th {
    text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--f-text-subtle);
    padding: 10px 14px; background: var(--f-surface-alt);
    border-bottom: 1px solid var(--f-divider); white-space: nowrap;
}
.jv2-tbl thead th:first-child { width: 36px; padding: 10px 10px 10px 14px; }
.jv2-tbl thead th.jv2-th-actions { text-align: right; width: 90px; }
.jv2-tbl tbody td {
    padding: 10px 14px; border-bottom: 1px solid var(--f-divider);
    vertical-align: middle;
}
.jv2-tbl tbody tr:last-child > td:not(.jv2-expand-td) { border-bottom: 0; }
.jv2-tbl tbody tr.jv2-row { transition: background-color .1s; }
.jv2-tbl tbody tr.jv2-row:hover > td { background: var(--f-surface-alt); }
.jv2-tbl tbody tr.jv2-row.is-expanded > td { background: var(--f-surface-alt); }
.jv2-tbl tbody tr.jv2-row.is-warning > td  { background: color-mix(in oklch, var(--f-surface) 92%, var(--f-warning-soft, #fff4d8) 8%); }
.jv2-tbl tbody tr.jv2-row.is-danger  > td  { background: color-mix(in oklch, var(--f-surface) 92%, var(--f-danger-soft,  #ffe1e1) 8%); }
.jv2-tbl tbody tr.jv2-row.is-warning:hover > td { background: var(--f-warning-soft, #fff4d8); }
.jv2-tbl tbody tr.jv2-row.is-danger:hover  > td { background: var(--f-danger-soft, #ffe1e1); }

.jv2-row-cb { width: 16px; height: 16px; cursor: pointer; }
.jv2-row-name { font-weight: 500; color: var(--f-text); }
.jv2-row-name-sub { font-size: 11.5px; color: var(--f-text-subtle); margin-top: 1px; }
.jv2-row-time {
    font-variant-numeric: tabular-nums;
    color: var(--f-text);
}
.jv2-row-time-muted { color: var(--f-text-subtle); }
.jv2-row-hours {
    font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--f-text);
}

/* 24h shift bar (план/факт визуально) */
.jv2-bar-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.jv2-bar-track {
    position: relative; width: 100%; height: 6px; min-width: 80px;
    background: var(--f-border); border-radius: 999px; overflow: hidden;
}
.jv2-bar-seg {
    position: absolute; top: 0; bottom: 0; border-radius: 999px;
}
.jv2-bar-label {
    font-size: 11px; font-variant-numeric: tabular-nums;
    color: var(--f-text-muted); white-space: nowrap;
}

.jv2-row-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--f-text-subtle);
    transition: background-color .1s, transform .15s;
}
.jv2-row-chevron:hover { background: var(--f-surface-alt); color: var(--f-text); }
.jv2-row-chevron.is-open { transform: rotate(90deg); }

.jv2-row-edit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--f-text-subtle); margin-left: 4px;
    transition: background-color .1s, color .1s;
}
.jv2-row-edit:hover { background: var(--f-surface-alt); color: var(--f-accent, var(--f-text)); }

.jv2-expand-row > td { padding: 0 !important; background: var(--f-surface-alt) !important; }
.jv2-expand-content {
    padding: 14px; display: grid;
    grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: start;
}
.jv2-expand-block { display: flex; flex-direction: column; gap: 8px; }
.jv2-expand-block-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--f-text-subtle); margin-bottom: 2px;
}
.jv2-expand-entry {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: var(--r-md, 8px); font-size: 12.5px;
}
.jv2-expand-entry-label { color: var(--f-text-muted); font-size: 11.5px; min-width: 70px; }
.jv2-expand-entry-val   { font-weight: 500; color: var(--f-text); font-variant-numeric: tabular-nums; }
.jv2-expand-entry-delta {
    margin-left: auto; font-size: 11.5px; padding: 1px 6px; border-radius: 999px;
}
.jv2-expand-entry-delta.is-late {
    background: var(--f-warning-soft, rgba(217,168,74,.18));
    color: var(--f-warning-strong, var(--f-warning, #c08400));
}
.jv2-expand-entry-delta.is-ok {
    background: var(--f-success-soft); color: var(--f-success);
}
.jv2-expand-actions {
    display: flex; flex-direction: column; gap: 6px; min-width: 140px;
}

/* По дням — sticky bulk-bar */
.jv2-sticky-bulk {
    position: sticky; bottom: 0; z-index: 12;
    background: var(--f-surface); border-top: 1px solid var(--f-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 12px 16px;
    display: flex; align-items: center; gap: 8px;
    border-radius: 0 0 var(--r-lg, 12px) var(--r-lg, 12px);
    transform: translateY(120%); transition: transform 200ms ease;
}
.jv2-sticky-bulk.is-visible { transform: translateY(0); }
.jv2-sticky-spacer { flex: 1; }
.jv2-bulk-selected {
    font-size: 13px; font-weight: 500;
    padding: 5px 12px; border-radius: 999px;
    background: var(--f-accent-soft, var(--f-surface-alt));
    color: var(--f-accent-text, var(--f-text));
}

.jv2-byday-error {
    padding: 16px; border-radius: var(--r-lg, 12px);
    background: var(--f-danger-soft); color: var(--f-danger);
    border: 1px solid var(--f-danger);
    font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Journal v2 — Override Side-sheet (component)
   ────────────────────────────────────────────────────────────────────────── */
.jvss-overlay {
    position: fixed; inset: 0; z-index: 1450;
    background: rgba(15,14,12,.35);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms ease;
}
.jvss-overlay.is-open { opacity: 1; pointer-events: auto; }
.jvss-sheet {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    z-index: 1460;
    background: var(--f-surface); border-left: 1px solid var(--f-border);
    box-shadow: var(--f-shadow-lg, 0 12px 36px rgba(0,0,0,0.18));
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 220ms ease;
    color: var(--f-text);
}
.jvss-sheet.is-open { transform: translateX(0); }

.jvss-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--f-border);
}
.jvss-title-block { flex: 1; min-width: 0; }
.jvss-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.jvss-sub   { font-size: 12px; color: var(--f-text-muted); margin-top: 2px; }
.jvss-close {
    width: 30px; height: 30px; border-radius: 6px;
    background: transparent; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--f-text-muted); transition: background-color .1s;
}
.jvss-close:hover { background: var(--f-surface-alt); color: var(--f-text); }

.jvss-body { flex: 1; overflow-y: auto; padding: 16px; }
.jvss-footer {
    padding: 12px 16px; border-top: 1px solid var(--f-border);
    display: flex; align-items: center; gap: 8px;
}
.jvss-footer-spacer { flex: 1; }
.jvss-btn-delete { color: var(--f-danger); }
.jvss-btn-delete:hover { background: var(--f-danger-soft); }

.jvss-form-group {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.jvss-label {
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--f-text-muted);
}
.jvss-time-row { display: flex; align-items: center; gap: 6px; }
.jvss-time {
    flex: 1; padding: 8px 11px;
    border: 1px solid var(--f-border); border-radius: var(--r-md, 8px);
    font: inherit; font-size: 15px;
    font-variant-numeric: tabular-nums; font-weight: 500;
    color: var(--f-text); background: var(--f-surface);
    outline: 0; transition: border-color .12s, box-shadow .12s;
}
.jvss-time:focus { border-color: var(--f-accent); box-shadow: var(--f-ring); }
.jvss-step {
    width: 32px; height: 28px;
    border: 1px solid var(--f-border); border-radius: var(--r-sm, 6px);
    background: var(--f-surface); color: var(--f-text-muted);
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background-color .1s, color .1s, border-color .1s;
}
.jvss-step:hover {
    background: var(--f-surface-alt); color: var(--f-text);
    border-color: var(--f-border-strong, var(--f-border));
}
.jvss-hint {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: var(--f-text-subtle); margin-top: 2px;
}
.jvss-hint-warn { color: var(--f-warning-strong, var(--f-warning, #c08400)); }
.jvss-hint-ok   { color: var(--f-success); }

.jvss-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.jvss-chip {
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--f-border); background: var(--f-surface);
    color: var(--f-text-muted); font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer; user-select: none;
    transition: background-color .1s, color .1s, border-color .1s;
}
.jvss-chip:hover {
    background: var(--f-surface-alt);
    border-color: var(--f-border-strong, var(--f-border));
}
.jvss-chip.is-active {
    background: rgba(180,32,44,.08);
    border-color: var(--f-warning-strong, var(--f-warning, #c08400));
    color: var(--f-warning-strong, var(--f-warning, #c08400));
}
.dark .jvss-chip.is-active {
    background: rgba(217,168,74,.12);
    color: var(--f-warning-strong, var(--f-warning, #c08400));
}

.jvss-textarea {
    width: 100%; min-height: 64px; resize: vertical;
    padding: 8px 11px;
    border: 1px solid var(--f-border); border-radius: var(--r-md, 8px);
    font: inherit; font-size: 13px; line-height: 1.4;
    color: var(--f-text); background: var(--f-surface);
    outline: 0; transition: border-color .12s, box-shadow .12s;
}
.jvss-textarea:focus { border-color: var(--f-accent); box-shadow: var(--f-ring); }

.jvss-check-row {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px;
    cursor: pointer;
}
.jvss-check-row input[type="checkbox"] { margin-top: 2px; cursor: pointer; }
.jvss-check-text { display: flex; flex-direction: column; gap: 1px; }
.jvss-check-title { font-size: 13px; font-weight: 500; color: var(--f-text); }
.jvss-check-hint  { font-size: 11.5px; color: var(--f-text-subtle); }

.jvss-history-block {
    border: 1px solid var(--f-border); border-radius: var(--r-md, 8px);
    background: var(--f-surface-alt); overflow: hidden;
}
.jvss-history-head {
    padding: 8px 12px; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--f-text-muted);
    border-bottom: 1px solid var(--f-divider);
}
.jvss-history-body { padding: 4px 12px; max-height: 200px; overflow-y: auto; }
.jvss-hist-empty {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 0; color: var(--f-text-subtle); font-size: 12px;
}
.jvss-hist-item {
    padding: 8px 0; border-bottom: 1px solid var(--f-divider);
    font-size: 12px;
}
.jvss-hist-item:last-child { border-bottom: 0; }
.jvss-hist-meta {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--f-text-muted);
}
.jvss-hist-time {
    font-size: 11px; color: var(--f-text-subtle);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.jvss-hist-author { font-weight: 500; }
.jvss-hist-text { margin-top: 3px; color: var(--f-text); font-size: 12px; }

.jvss-error {
    padding: 10px 12px; border-radius: var(--r-md, 8px);
    background: var(--f-danger-soft); color: var(--f-danger);
    border: 1px solid var(--f-danger);
    font-size: 12.5px; margin-top: 10px;
}

/* Integrations v2 */
.f-int-logo--cctv { background: #1565c0; }

/* Каждая секция — отдельный «контейнер настроек» с лёгкой подложкой,
   чтобы визуально отделять Авторизацию / Подразделение / Синхронизацию.
   Раньше border-top: 1px solid var(--f-divider) терялся на белом фоне. */
.f-int-section {
    margin-top: 16px;
    padding: 16px;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
}
.f-int-section:first-of-type { margin-top: 16px; }
.f-int-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--f-text-muted);
    margin-bottom: 12px;
}
.f-int-section-title .f-icon { font-size: 15px; color: var(--f-text-subtle); }

.f-int-field { margin-bottom: 12px; }
.f-int-field:last-child { margin-bottom: 0; }
.f-int-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--f-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.f-int-field-hint {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 3px;
    line-height: 1.4;
}

.f-int-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    background: var(--f-surface);
    color: var(--f-text);
    font-size: 13px;
    box-shadow: var(--f-shadow-sm);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    box-sizing: border-box;
}
.f-int-input:focus { border-color: var(--f-accent); box-shadow: var(--f-ring); }

.f-int-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    background: var(--f-surface);
    color: var(--f-text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}
.f-int-select:focus { border-color: var(--f-accent); box-shadow: var(--f-ring); }

/* Copyable field */
.f-copy-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.f-copy-field-value {
    flex: 1;
    padding: 7px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--f-text);
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    user-select: all;
}
.f-copy-btn {
    flex-shrink: 0;
    padding: 6px;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
}
.f-copy-btn:hover { background: var(--f-surface); border-color: var(--f-border-strong); }
.f-copy-btn .f-icon { font-size: 16px; color: var(--f-text-muted); }

/* Dropzone for .key file — единый flex-блок без распадения на куски. */
.f-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--f-border);
    border-radius: var(--r-md);
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .14s, background .14s;
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    font-size: 12.5px;
}
.f-dropzone:hover, .f-dropzone.dragover {
    border-color: var(--f-accent);
    background: var(--f-accent-soft);
    color: var(--f-accent-text, var(--f-accent));
}
.f-dropzone .f-icon { font-size: 22px; display: block; margin-bottom: 4px; color: var(--f-text-subtle); }

/* Toggle (общий, используется в интеграциях) */
.f-int-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--f-divider);
    margin-bottom: 16px;
}
.f-int-toggle-label { font-size: 13.5px; font-weight: 500; color: var(--f-text); }
.f-int-toggle-helper { font-size: 11px; color: var(--f-text-subtle); margin-top: 1px; }

/* HDD progress bars */
.f-hdd-bar {
    height: 5px;
    background: var(--f-surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.f-hdd-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--f-success);
    transition: width .3s;
}
.f-hdd-fill.medium { background: var(--f-warning); }
.f-hdd-fill.high { background: var(--f-danger); }

/* Danger zone */
.f-danger-zone {
    margin-top: 20px;
    padding: 14px 16px;
    border-top: 1px solid var(--f-divider);
    background: var(--f-danger-soft);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.f-danger-zone-label { font-size: 12.5px; font-weight: 600; color: var(--f-danger); }
.f-danger-zone-hint { font-size: 11px; color: var(--f-danger); opacity: .75; margin-top: 2px; }

/* Segmented control for auth method */
.f-seg-control {
    display: flex;
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 14px;
}
.f-seg-btn {
    flex: 1;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background: var(--f-surface-alt);
    color: var(--f-text-muted);
    border: none;
    border-right: 1px solid var(--f-border);
    transition: background .12s, color .12s;
}
.f-seg-btn:last-child { border-right: none; }
/* iOS-style: активный — белый «pill» поверх серой подложки, не яркий fill. */
.f-seg-btn.active {
    background: var(--f-surface);
    color: var(--f-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 15, 15, .12);
}

/* Updated-at timestamp for integration headers */
.f-int-updated {
    font-size: 10.5px;
    color: var(--f-text-subtle);
    margin-top: 2px;
}

/* === Integrations v2 redesign === */
.f-int-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.f-int-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}
.f-int-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.f-int-hero-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
/* Hero-icon с реальным брендовым лого — белая подложка, img вписана. */
.f-int-hero-icon.f-int-hero-icon--img {
    background: #fff;
    border: 1px solid var(--f-border);
    padding: 6px;
}
.f-int-hero-icon.f-int-hero-icon--img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.f-int-hero-name { font-size: 17px; font-weight: 700; color: var(--f-text); }
.f-int-hero-sub { font-size: 12.5px; color: var(--f-text-muted); margin-top: 2px; }
.f-int-hero-right { text-align: right; flex-shrink: 0; }

.f-int-status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    background: var(--f-surface-alt);
    border: 1px solid var(--f-border);
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 600;
    color: var(--f-text);
}
.f-int-status-pill .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--f-text-subtle);
}
.f-int-status-pill.is-active .dot { background: var(--f-success); box-shadow: 0 0 0 3px var(--f-success-soft); }
.f-int-status-pill.is-offline .dot { background: var(--f-danger); }
.f-int-hero-meta { font-size: 11px; color: var(--f-text-subtle); margin-top: 6px; }

/* Один stat не должен растягиваться во всю ширину — ограничиваем колонку. */
.f-int-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.f-int-stat {
    flex: 0 1 240px;
    min-width: 180px;
    padding: 14px 18px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(15, 15, 15, .04);
}
.f-int-stat-value { font-size: 20px; font-weight: 700; color: var(--f-text); line-height: 1.2; word-break: break-word; }
.f-int-stat-label { font-size: 10.5px; color: var(--f-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; font-weight: 600; }

.f-int-tabs {
    display: flex; gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--f-border);
    overflow-x: auto;
}
.f-int-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 600; color: var(--f-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
}
.f-int-tab:hover { color: var(--f-text); }
.f-int-tab.active { color: var(--f-text); border-bottom-color: var(--f-text); }

.f-int-tab-panel { display: none; }
.f-int-tab-panel.active { display: block; }

.f-int-2col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
@media (max-width: 900px) {
    .f-int-2col { grid-template-columns: 1fr; }
}

.f-int-info-panel {
    padding: 16px;
    background: var(--f-info-soft);
    border: 1px solid var(--f-info);
    border-radius: var(--r-md);
    font-size: 12.5px;
    color: var(--f-text);
    line-height: 1.5;
}
.f-int-info-panel h4 { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--f-info); }
.f-int-info-panel ul { margin: 0; padding-left: 18px; }
.f-int-info-panel li { margin-bottom: 4px; }

/* Training: soft-deleted collection card */
.training-collection--deleted {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.training-collection--deleted:hover {
    opacity: 0.75;
    filter: grayscale(0.2);
}

/* ── qr-codes view ─────────────────────────────────────────────────────── */

/* Layout */
.qr-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.qr-content {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

/* Filter slots in TopBar */
.qr-filter-slot {
    min-width: 140px;
}
.qr-archived-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--f-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.qr-archived-toggle input[type="checkbox"] {
    accent-color: var(--f-primary);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}
.qr-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.qr-search-wrap .f-icon {
    position: absolute;
    left: 8px;
    pointer-events: none;
}
.qr-search-input {
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    background: var(--f-bg);
    color: var(--f-text);
    font-size: 13px;
    padding: 5px 10px 5px 28px;
    width: 200px;
    outline: none;
    transition: border-color 0.15s;
}
.qr-search-input:focus {
    border-color: var(--f-primary);
}
.qr-search-input::placeholder {
    color: var(--f-text-muted);
}

/* Table */
.qr-table-wrap {
    overflow-x: auto;
}
.qr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.qr-table thead tr {
    border-bottom: 1px solid var(--f-border);
}
.qr-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--f-text-muted);
    white-space: nowrap;
}
.qr-table-row {
    border-bottom: 1px solid var(--f-border);
    transition: background 0.1s;
}
.qr-table-row:hover {
    background: var(--f-bg-soft);
}
.qr-table td {
    padding: 10px 10px;
    vertical-align: middle;
}

/* Columns */
.qr-col-qr { width: 60px; }
.qr-col-label { min-width: 160px; }
.qr-col-context { width: 110px; }
.qr-col-placement { width: 120px; }
.qr-col-utm { width: 160px; }
.qr-col-stats { width: 180px; }
.qr-col-actions { width: 40px; text-align: center; }

/* QR image preview button */
.qr-preview-btn {
    background: none;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qr-preview-btn:hover {
    border-color: var(--f-primary);
    box-shadow: 0 0 0 2px var(--f-primary-alpha, rgba(99,102,241,0.15));
}
.qr-preview-btn img {
    width: 40px;
    height: 40px;
    display: block;
}
.qr-img-fallback {
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--f-text-muted);
}

/* Label cell */
.qr-label-main {
    font-weight: 600;
    color: var(--f-text);
    line-height: 1.3;
}
.qr-label-code {
    font-family: ui-monospace, 'Menlo', monospace;
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 2px;
}
.qr-label-venue {
    font-size: 11px;
    color: var(--f-text-subtle, var(--f-text-muted));
    margin-top: 2px;
}

/* UTM */
.qr-utm-text {
    font-size: 11px;
    color: var(--f-text-muted);
    word-break: break-all;
}

/* Stats */
.qr-stat-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--f-text);
    line-height: 1.6;
}
.qr-no-stats {
    font-size: 12px;
    color: var(--f-text-muted);
}

/* Menu button */
.qr-menu-btn {
    opacity: 0.5;
    transition: opacity 0.15s;
}
.qr-table-row:hover .qr-menu-btn {
    opacity: 1;
}

/* Loader */
.qr-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--f-text-muted);
}
.qr-spinner {
    animation: spin 0.8s linear infinite;
}

/* Empty state */
.qr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}
.qr-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--f-text);
    margin-bottom: 6px;
}
.qr-empty-sub {
    font-size: 13px;
    color: var(--f-text-muted);
    max-width: 340px;
}

/* Pagination */
.qr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    font-size: 13px;
    color: var(--f-text-muted);
}

/* ── Modals ─────────────────────────────────────────────────────────────── */

.qr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.qr-modal {
    background: var(--f-bg);
    border-radius: var(--r-lg, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 480px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.15s ease;
}
.qr-modal--wide {
    width: 560px;
}
@keyframes slideUp {
    from { transform: translateY(12px); opacity: 0.5; }
    to   { transform: translateY(0);    opacity: 1; }
}
.qr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--f-border);
    flex-shrink: 0;
}
.qr-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--f-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.qr-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.qr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--f-border);
    flex-shrink: 0;
}

/* Preview modal specifics */
.qr-preview-img-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.qr-preview-img {
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    padding: 8px;
    background: #fff;
}
.qr-preview-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.qr-preview-link-label {
    color: var(--f-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.qr-preview-link-val {
    color: var(--f-text);
    word-break: break-all;
    flex: 1;
}
.qr-preview-link-small {
    font-size: 11px;
    color: var(--f-text-muted);
}

/* Create/Edit form */
.qr-form-row {
    margin-bottom: 16px;
}
.qr-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--f-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.qr-form-hint {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 4px;
}
.qr-form-hint-inline {
    font-size: 11px;
    color: var(--f-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.qr-req {
    color: var(--f-danger);
}
.qr-form-control {
    /* host for createCustomSelect */
}
.qr-text-input {
    width: 100%;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    background: var(--f-bg);
    color: var(--f-text);
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.qr-text-input:focus {
    border-color: var(--f-primary);
    box-shadow: 0 0 0 2px var(--f-primary-alpha, rgba(99,102,241,0.12));
}

/* Context segment in create modal */
.qr-context-seg {
    display: flex;
    gap: 8px;
}
.qr-ctx-btn {
    flex: 1;
    border: 1px solid var(--f-border) !important;
    background: var(--f-bg-soft) !important;
    color: var(--f-text-muted) !important;
    transition: all 0.15s;
}
.qr-ctx-btn--active {
    border-color: var(--f-primary) !important;
    background: var(--f-primary-soft, rgba(99,102,241,0.08)) !important;
    color: var(--f-primary) !important;
    font-weight: 600 !important;
}

/* UTM details */
.qr-utm-details {
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.qr-utm-summary {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--f-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    user-select: none;
    background: var(--f-bg-soft);
}
.qr-utm-summary::-webkit-details-marker { display: none; }
.qr-utm-details[open] .qr-utm-summary {
    border-bottom: 1px solid var(--f-border);
}
.qr-utm-grid {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

/* Readonly fields in edit modal */
.qr-readonly-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: var(--f-bg-soft);
    border-radius: var(--r-sm);
    border: 1px solid var(--f-border);
}
.qr-readonly-val {
    font-size: 13px;
    color: var(--f-text-muted);
    font-family: ui-monospace, monospace;
}

/* Bulk result modal */
.qr-bulk-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--f-bg-soft);
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--f-text);
}
.qr-bulk-stat--warn {
    background: color-mix(in srgb, var(--f-warning) 10%, transparent);
}

/* ── Preview style switcher ─────────────────────────────────────────────── */
.qr-style-seg {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    justify-content: center;
}
.qr-style-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    background: var(--f-bg-soft);
    color: var(--f-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.qr-style-btn:hover {
    border-color: var(--f-primary);
    color: var(--f-primary);
}
.qr-style-btn--active {
    border-color: var(--f-primary) !important;
    background: var(--f-primary-soft, rgba(99,102,241,0.08)) !important;
    color: var(--f-primary) !important;
    font-weight: 600;
}

/* Color controls — для превью QR и архива */
.qr-color-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--f-bg-soft);
    border-radius: var(--r-sm);
    font-size: 13px;
}
.qr-color-label {
    color: var(--f-text-muted);
    font-weight: 500;
    margin: 0;
}
.qr-color-input {
    width: 32px;
    height: 32px;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 2px;
    background: var(--f-bg);
    cursor: pointer;
}
.qr-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.qr-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.qr-color-preset {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--f-border);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.15s;
}
.qr-color-preset:hover {
    transform: scale(1.12);
    border-color: var(--f-primary);
}
.qr-color-preset--white {
    background: #fff;
    /* На светлом фоне белый кружок не виден — добавим заметную обводку */
    border-color: var(--f-text-muted);
}
.qr-transparent-cb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--f-text);
    cursor: pointer;
    user-select: none;
}
.qr-transparent-cb input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Архив-модалка — color row */
.qr-archive-color-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}
.qr-archive-color-row .qr-form-label {
    margin: 0 4px 0 0;
    color: var(--f-text-muted);
    font-weight: 500;
    font-size: 13px;
}
.qr-archive-color-row .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    color: var(--f-text);
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}

/* ── Custom code validation error ───────────────────────────────────────── */
.qr-custom-code-error {
    margin-top: 4px;
    font-size: 11px;
    color: var(--f-danger);
    font-weight: 500;
}

/* ── Bulk sections modal ────────────────────────────────────────────────── */
.qr-bulk-sections-wrap {
    border: 1px solid var(--f-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 14px;
}
.qr-bulk-section-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--f-border);
}
.qr-bulk-section-row:last-child {
    border-bottom: none;
}
.qr-bulk-section-row:hover {
    background: var(--f-bg-soft);
}
.qr-bulk-section-row--checked {
    background: var(--f-primary-soft, rgba(99,102,241,0.05));
}
.qr-bulk-section-row input[type="checkbox"] {
    accent-color: var(--f-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.qr-bulk-section-info {
    flex: 1;
    min-width: 0;
}
.qr-bulk-section-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-text);
}
.qr-bulk-section-meta {
    font-size: 11px;
    color: var(--f-text-muted);
    margin-top: 2px;
}
.qr-bulk-sections-empty,
.qr-bulk-sections-loading {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--f-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.qr-bulk-total-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--f-text);
    padding: 8px 12px;
    background: var(--f-bg-soft);
    border-radius: var(--r-sm);
    border: 1px solid var(--f-border);
}

/* ── Download archive modal ─────────────────────────────────────────────── */
.qr-modal-wide,
.qr-modal--wide.qr-modal-archive {
    width: 720px;
    max-width: 92vw;
}
.qr-archive-params {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.qr-archive-seg {
    display: inline-flex;
    background: var(--f-surface-muted, var(--f-bg-soft));
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    padding: 2px;
    gap: 2px;
}
.qr-archive-seg-btn {
    background: transparent !important;
    border: none !important;
    color: var(--f-text-muted) !important;
    box-shadow: none !important;
}
.qr-archive-seg-btn--active {
    background: var(--f-surface) !important;
    color: var(--f-text) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.qr-archive-quick-select {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 8px 0;
    padding: 8px 0;
    border-top: 1px dashed var(--f-border);
    border-bottom: 1px dashed var(--f-border);
}
.qr-archive-list-wrap {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--f-border);
    border-radius: var(--r-sm);
    background: var(--f-surface);
    margin-bottom: 12px;
}
.qr-archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.qr-archive-item {
    border-bottom: 1px solid var(--f-border-soft, var(--f-border));
}
.qr-archive-item:last-child {
    border-bottom: none;
}
.qr-archive-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(120px, 2fr);
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}
.qr-archive-row:hover {
    background: var(--f-surface-hover, var(--f-bg-soft));
}
.qr-archive-row--checked {
    background: var(--f-accent-soft, rgba(99, 102, 241, 0.08));
}
.qr-archive-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--f-accent, var(--f-primary));
    cursor: pointer;
}
.qr-archive-fname {
    font-size: 12px;
    color: var(--f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qr-archive-fname code {
    background: var(--f-surface-muted, var(--f-bg-soft));
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--f-font-mono, monospace);
    font-size: 11px;
}
.qr-archive-meta {
    font-size: 11px;
    color: var(--f-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qr-archive-summary {
    padding: 10px 12px;
    background: var(--f-bg-soft);
    border-radius: var(--r-sm);
    border: 1px solid var(--f-border);
    font-size: 13px;
    color: var(--f-text);
}
.qr-archive-summary code {
    background: var(--f-surface);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--f-font-mono, monospace);
    font-size: 11px;
    color: var(--f-text-muted);
}

/* ── UTM edit hint in table row ─────────────────────────────────────────── */
.qr-utm-edit-hint {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--f-text-muted);
    margin-top: 3px;
    opacity: 0.7;
}
.qr-table-row:hover .qr-utm-edit-hint {
    opacity: 1;
    color: var(--f-primary);
}

/* ── UTM editable hint in edit modal ────────────────────────────────────── */
.qr-utm-editable-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--f-primary);
    background: var(--f-primary-soft, rgba(99,102,241,0.07));
    border: 1px solid var(--f-primary-alpha, rgba(99,102,241,0.2));
    border-radius: var(--r-sm);
    padding: 7px 10px;
    margin-bottom: 14px;
}

/* Dark mode tweaks */
.dark .qr-preview-img {
    background: #1a1a2e;
    border-color: var(--f-border);
}

/* ── Marketing view: skeleton, error, warnings ─────────────────────────── */

@keyframes marketing-skel-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.marketing-skel-line {
    background: var(--f-surface-sunken, #f0f2f5);
    border-radius: 4px;
    animation: marketing-skel-pulse 1.4s ease-in-out infinite;
}

.dark .marketing-skel-line {
    background: var(--f-surface-high, #2a2d35);
}

.marketing-skel-kpi {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Error block */
.marketing-error-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--f-danger-soft, #fff1f2);
    border: 1px solid var(--f-danger-alpha, rgba(220,38,38,0.2));
    border-radius: var(--r-md, 10px);
    color: var(--f-danger, #dc2626);
}

.dark .marketing-error-block {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

/* Warnings (yellow info) block */
.marketing-warnings-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--f-warning-soft, #fffbeb);
    border: 1px solid var(--f-warning-alpha, rgba(245,158,11,0.25));
    border-radius: var(--r-md, 10px);
    color: var(--f-warning-text, #92400e);
    font-size: 12px;
    line-height: 1.5;
}

.dark .marketing-warnings-block {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--f-warning, #f59e0b);
}

/* Sortable th hover */
.mkt-th-sort {
    transition: color 0.12s ease;
}

.mkt-th-sort:hover {
    color: var(--f-accent, #6366f1) !important;
}

.mkt-th-sort-active {
    color: var(--f-accent, #6366f1) !important;
}

/* Campaigns table row hover */
.mkt-campaigns-table tbody tr:hover {
    background: var(--f-surface-hover, rgba(0,0,0,0.025));
}

/* ── Marketing Hub: hero + summary + grid + tiles ──────────────────────── */

.mkt-hub-hero-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.mkt-hub-hero-title {
    min-width: 200px;
    flex: 0 0 auto;
}

.mkt-hub-hero-heading {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--f-text);
}

.mkt-hub-hero-sub {
    font-size: 12px;
    color: var(--f-text-muted);
    margin-top: 2px;
}

/* Hero KPI summary strip */
.mkt-hub-summary {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 auto;
    margin-left: auto;
    padding-left: 24px;
    border-left: 1px solid var(--f-divider);
    min-height: 56px;
    flex-wrap: wrap;
}

.mkt-hub-summary-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}

.mkt-hub-summary-label {
    font-size: 10px;
    color: var(--f-text-subtle);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}

.mkt-hub-summary-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--f-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-top: 2px;
}

.mkt-hub-summary-value--good {
    color: var(--f-success);
}

.mkt-hub-summary-delta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 14px;
}

/* Skeleton cell inside summary */
@keyframes mkt-hub-skel-shimmer {
    to { background-position: -200% 0; }
}

.mkt-hub-skel-cell {
    width: 90px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--f-surface-alt) 0%,
        var(--f-surface-sunken) 50%,
        var(--f-surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: mkt-hub-skel-shimmer 1.4s linear infinite;
}

/* Tile grid inside group cards */
.mkt-hub-grid {
    display: grid;
    gap: 1px;
    background: var(--f-divider);
}

.mkt-hub-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--f-surface);
    text-decoration: none;
    color: var(--f-text);
    cursor: pointer;
    transition: background .15s;
}

.mkt-hub-tile:hover {
    background: var(--f-surface-alt);
}

/* Responsive: collapse summary on narrow screens */
@media (max-width: 900px) {
    .mkt-hub-summary {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--f-divider);
        padding-top: 16px;
        width: 100%;
    }
}

/* ── Attribution tab ─────────────────────────────────────────────────────── */

.mkt-attr-table tbody tr.mkt-attr-row:hover {
    background: var(--f-surface-hover, rgba(0,0,0,0.025));
}

/* ── Метрика-вкладки: Sources / Funnel / Geo / Devices / Search ─────────── */

/* Sources: топ-3 сетка */
.mkt-sources-top3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Sources: hover строк таблицы */
.mkt-sources-table tbody tr:hover {
    background: var(--f-surface-hover, rgba(0,0,0,0.025));
}

/* Funnel: ступень + стрелка */
.mkt-funnel-step + .mkt-funnel-step {
    margin-top: 0;
}

/* Devices: KPI-сетка (3 плитки) */
.mkt-devices-kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Search: hover строк таблицы */
.mkt-search-table tbody tr:hover {
    background: var(--f-surface-hover, rgba(0,0,0,0.025));
}

/* Responsive: схлопываем сетки на узких экранах */
@media (max-width: 700px) {
    .mkt-sources-top3,
    .mkt-devices-kpi {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .mkt-sources-top3,
    .mkt-devices-kpi {
        grid-template-columns: repeat(2, 1fr);
    }

    #dev-tables-grid {
        grid-template-columns: 1fr !important;
    }
}

.mkt-attr-row--expanded {
    background: var(--f-surface-alt) !important;
}

.mkt-attr-drill-row td {
    padding: 0;
}

.mkt-attr-drill-container {
    background: var(--f-surface-sunken);
    border-left: 3px solid var(--f-accent);
}

.mkt-attr-drill-inner {
    /* Inner content of expanded drill row */
}

/* Responsive KPI grid */
@media (max-width: 900px) {
    #attr-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #attr-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── QR Campaigns tab ────────────────────────────────────────────────────── */

.mkt-qrc-table tbody tr.mkt-qrc-row:hover {
    background: var(--f-surface-hover, rgba(0,0,0,0.025));
}

.mkt-qrc-row--expanded {
    background: var(--f-surface-alt) !important;
}

.mkt-qrc-drill-row td {
    padding: 0;
}

.mkt-qrc-drill-container {
    background: var(--f-surface-sunken);
    border-left: 3px solid var(--f-success);
}

.mkt-qrc-url-block {
    background: var(--f-surface);
    border: 1px solid var(--f-divider);
    border-radius: 8px;
    padding: 12px 14px;
}

@media (max-width: 900px) {
    #qrc-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #qrc-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}