/* iService CRM - app_style.css (single consolidated stylesheet) */
/* Built: 2026-07-19 21:47 UTC */
/* Rebuild: python3 tests/tools/build_app_assets.py */

/* ================================================================== */
/* Reset / Vendor / Bootstrap */
/* Source: design/vendor/bootstrap.min_core.css */
/* ================================================================== */
@charset "UTF-8";/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"- "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:var(--bs-secondary-color)}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(var(--bs-border-width) * 2) solid currentcolor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:var(--bs-secondary-color)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-clip:padding-box;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::-moz-placeholder{color:var(--bs-secondary-color);opacity:1}.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:var(--bs-body-color);background-color:transparent;border:solid transparent;border-width:var(--bs-border-width) 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));padding:.5rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}textarea.form-control-sm{min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-control-color{width:3rem;height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0!important;border-radius:var(--bs-border-radius)}.form-control-color::-webkit-color-swatch{border:0!important;border-radius:var(--bs-border-radius)}.form-control-color.form-control-sm{height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}.form-control-color.form-control-lg{height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:var(--bs-secondary-bg)}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse{padding-right:1.5em;padding-left:0;text-align:right}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");width:2em;margin-left:-2.5em;background-image:var(--bs-form-switch-bg);background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-switch.form-check-reverse{padding-right:2.5em;padding-left:0}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}.form-range{width:100%;height:1.5rem;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;-webkit-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;-moz-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:var(--bs-secondary-color)}.form-range:disabled::-moz-range-thumb{background-color:var(--bs-secondary-color)}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:calc(3.5rem + calc(var(--bs-border-width) * 2));min-height:calc(3.5rem + calc(var(--bs-border-width) * 2));line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:1rem .75rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:1rem .75rem}.form-floating>.form-control-plaintext::-moz-placeholder,.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control-plaintext::placeholder,.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control-plaintext:not(:-moz-placeholder-shown),.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:-webkit-autofill,.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control-plaintext~label,.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.form-floating>.form-control-plaintext~label::after,.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.form-floating>.form-control:-webkit-autofill~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control-plaintext~label{border-width:var(--bs-border-width) 0}.form-floating>.form-control:disabled~label,.form-floating>:disabled~label{color:#6c757d}.form-floating>.form-control:disabled~label::after,.form-floating>:disabled~label::after{background-color:var(--bs-secondary-bg)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-valid-color)}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-success);border-radius:var(--bs-border-radius)}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:var(--bs-form-valid-border-color)}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-control-color.is-valid,.was-validated .form-control-color:valid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:var(--bs-form-valid-border-color)}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:var(--bs-form-valid-color)}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:var(--bs-form-valid-color)}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-invalid-color)}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-danger);border-radius:var(--bs-border-radius)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:var(--bs-form-invalid-border-color)}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-control-color.is-invalid,.was-validated .form-control-color:invalid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked:focus-visible+.btn{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:var(--bs-box-shadow);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius,0)}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:var(--bs-border-radius)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(var(--bs-border-width) * -1)}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(var(--bs-border-width) * -1)}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--bs-nav-tabs-border-width:var(--bs-border-width);--bs-nav-tabs-border-color:var(--bs-border-color);--bs-nav-tabs-border-radius:var(--bs-border-radius);--bs-nav-tabs-link-hover-border-color:var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);--bs-nav-tabs-link-active-color:var(--bs-emphasis-color);--bs-nav-tabs-link-active-bg:var(--bs-body-bg);--bs-nav-tabs-link-active-border-color:var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0d6efd}.nav-pills .nav-link{border-radius:var(--bs-nav-pills-border-radius)}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}.nav-underline{--bs-nav-underline-gap:1rem;--bs-nav-underline-border-width:0.125rem;--bs-nav-underline-link-active-color:var(--bs-emphasis-color);gap:var(--bs-nav-underline-gap)}.nav-underline .nav-link{padding-right:0;padding-left:0;border-bottom:var(--bs-nav-underline-border-width) solid transparent}.nav-underline .nav-link:focus,.nav-underline .nav-link:hover{border-bottom-color:currentcolor}.nav-underline .nav-link.active,.nav-underline .show>.nav-link{font-weight:700;color:var(--bs-nav-underline-link-active-color);border-bottom-color:currentcolor}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-sm .offcanvas .offcanvas-header{display:none}.navbar-expand-sm .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-md .offcanvas .offcanvas-header{display:none}.navbar-expand-md .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xl .offcanvas .offcanvas-header{display:none}.navbar-expand-xl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xxl .offcanvas .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand .offcanvas .offcanvas-header{display:none}.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-dark,.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text-emphasis);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush>.accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush>.accordion-item:first-child{border-top:0}.accordion-flush>.accordion-item:last-child{border-bottom:0}.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{border-radius:0}.accordion-flush>.accordion-item>.accordion-collapse{border-radius:0}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x:1.5rem;--bs-pagination-padding-y:0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius:var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x:0.5rem;--bs-pagination-padding-y:0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius:var(--bs-border-radius-sm)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-heading{color:inherit}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{--bs-alert-color:var(--bs-primary-text-emphasis);--bs-alert-bg:var(--bs-primary-bg-subtle);--bs-alert-border-color:var(--bs-primary-border-subtle);--bs-alert-link-color:var(--bs-primary-text-emphasis)}.alert-secondary{--bs-alert-color:var(--bs-secondary-text-emphasis);--bs-alert-bg:var(--bs-secondary-bg-subtle);--bs-alert-border-color:var(--bs-secondary-border-subtle);--bs-alert-link-color:var(--bs-secondary-text-emphasis)}.alert-success{--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text-emphasis)}.alert-info{--bs-alert-color:var(--bs-info-text-emphasis);--bs-alert-bg:var(--bs-info-bg-subtle);--bs-alert-border-color:var(--bs-info-border-subtle);--bs-alert-link-color:var(--bs-info-text-emphasis)}.alert-warning{--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-border-color:var(--bs-warning-border-subtle);--bs-alert-link-color:var(--bs-warning-text-emphasis)}.alert-danger{--bs-alert-color:var(--bs-danger-text-emphasis);--bs-alert-bg:var(--bs-danger-bg-subtle);--bs-alert-border-color:var(--bs-danger-border-subtle);--bs-alert-link-color:var(--bs-danger-text-emphasis)}.alert-light{--bs-alert-color:var(--bs-light-text-emphasis);--bs-alert-bg:var(--bs-light-bg-subtle);--bs-alert-border-color:var(--bs-light-border-subtle);--bs-alert-link-color:var(--bs-light-text-emphasis)}.alert-dark{--bs-alert-color:var(--bs-dark-text-emphasis);--bs-alert-bg:var(--bs-dark-bg-subtle);--bs-alert-border-color:var(--bs-dark-border-subtle);--bs-alert-link-color:var(--bs-dark-text-emphasis)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress,.progress-stacked{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--bs-progress-bar-color);text-align:center;white-space:nowrap;background-color:var(--bs-progress-bar-bg);transition:var(--bs-progress-bar-transition)}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:var(--bs-progress-height) var(--bs-progress-height)}.progress-stacked>.progress{overflow:visible}.progress-stacked>.progress>.progress-bar{width:100%}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{--bs-list-group-color:var(--bs-primary-text-emphasis);--bs-list-group-bg:var(--bs-primary-bg-subtle);--bs-list-group-border-color:var(--bs-primary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-primary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-primary-border-subtle);--bs-list-group-active-color:var(--bs-primary-bg-subtle);--bs-list-group-active-bg:var(--bs-primary-text-emphasis);--bs-list-group-active-border-color:var(--bs-primary-text-emphasis)}.list-group-item-secondary{--bs-list-group-color:var(--bs-secondary-text-emphasis);--bs-list-group-bg:var(--bs-secondary-bg-subtle);--bs-list-group-border-color:var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-secondary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-secondary-border-subtle);--bs-list-group-active-color:var(--bs-secondary-bg-subtle);--bs-list-group-active-bg:var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color:var(--bs-secondary-text-emphasis)}.list-group-item-success{--bs-list-group-color:var(--bs-success-text-emphasis);--bs-list-group-bg:var(--bs-success-bg-subtle);--bs-list-group-border-color:var(--bs-success-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-success-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-success-border-subtle);--bs-list-group-active-color:var(--bs-success-bg-subtle);--bs-list-group-active-bg:var(--bs-success-text-emphasis);--bs-list-group-active-border-color:var(--bs-success-text-emphasis)}.list-group-item-info{--bs-list-group-color:var(--bs-info-text-emphasis);--bs-list-group-bg:var(--bs-info-bg-subtle);--bs-list-group-border-color:var(--bs-info-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-info-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-info-border-subtle);--bs-list-group-active-color:var(--bs-info-bg-subtle);--bs-list-group-active-bg:var(--bs-info-text-emphasis);--bs-list-group-active-border-color:var(--bs-info-text-emphasis)}.list-group-item-warning{--bs-list-group-color:var(--bs-warning-text-emphasis);--bs-list-group-bg:var(--bs-warning-bg-subtle);--bs-list-group-border-color:var(--bs-warning-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-warning-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-warning-border-subtle);--bs-list-group-active-color:var(--bs-warning-bg-subtle);--bs-list-group-active-bg:var(--bs-warning-text-emphasis);--bs-list-group-active-border-color:var(--bs-warning-text-emphasis)}.list-group-item-danger{--bs-list-group-color:var(--bs-danger-text-emphasis);--bs-list-group-bg:var(--bs-danger-bg-subtle);--bs-list-group-border-color:var(--bs-danger-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-danger-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-danger-border-subtle);--bs-list-group-active-color:var(--bs-danger-bg-subtle);--bs-list-group-active-bg:var(--bs-danger-text-emphasis);--bs-list-group-active-border-color:var(--bs-danger-text-emphasis)}.list-group-item-light{--bs-list-group-color:var(--bs-light-text-emphasis);--bs-list-group-bg:var(--bs-light-bg-subtle);--bs-list-group-border-color:var(--bs-light-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-light-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-light-border-subtle);--bs-list-group-active-color:var(--bs-light-bg-subtle);--bs-list-group-active-bg:var(--bs-light-text-emphasis);--bs-list-group-active-border-color:var(--bs-light-text-emphasis)}.list-group-item-dark{--bs-list-group-color:var(--bs-dark-text-emphasis);--bs-list-group-bg:var(--bs-dark-bg-subtle);--bs-list-group-border-color:var(--bs-dark-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-dark-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-dark-border-subtle);--bs-list-group-active-color:var(--bs-dark-bg-subtle);--bs-list-group-active-bg:var(--bs-dark-text-emphasis);--bs-list-group-active-border-color:var(--bs-dark-text-emphasis)}.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");--bs-btn-close-opacity:0.5;--bs-btn-close-hover-opacity:0.75;--bs-btn-close-focus-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-btn-close-focus-opacity:1;--bs-btn-close-disabled-opacity:0.25;--bs-btn-close-white-filter:invert(1) grayscale(100%) brightness(200%);box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;border:0;border-radius:.375rem;opacity:var(--bs-btn-close-opacity)}.btn-close:hover{color:var(--bs-btn-close-color);text-decoration:none;opacity:var(--bs-btn-close-hover-opacity)}.btn-close:focus{outline:0;box-shadow:var(--bs-btn-close-focus-shadow);opacity:var(--bs-btn-close-focus-opacity)}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--bs-btn-close-disabled-opacity)}.btn-close-white{filter:var(--bs-btn-close-white-filter)}[data-bs-theme=dark] .btn-close{filter:var(--bs-btn-close-white-filter)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-border-width:var(--bs-border-width);--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:var(--bs-border-radius);--bs-toast-box-shadow:var(--bs-box-shadow);--bs-toast-header-color:var(--bs-secondary-color);--bs-toast-header-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-header-border-color:var(--bs-border-color-translucent);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{--bs-toast-zindex:1090;position:absolute;z-index:var(--bs-toast-zindex);width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))}.toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)}.toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--bs-box-shadow-sm);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin:calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--bs-box-shadow)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:var(--bs-body-bg);--bs-tooltip-bg:var(--bs-emphasis-color);--bs-tooltip-border-radius:var(--bs-border-radius);--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:var(--bs-body-bg);--bs-popover-border-width:var(--bs-border-width);--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:var(--bs-border-radius-lg);--bs-popover-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width));--bs-popover-box-shadow:var(--bs-box-shadow);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color:inherit;--bs-popover-header-bg:var(--bs-secondary-bg);--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:var(--bs-body-color);--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-next-icon,.carousel-dark .carousel-control-prev-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}.spinner-border,.spinner-grow{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm,.offcanvas-xl,.offcanvas-xxl{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-border-width:var(--bs-border-width);--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:var(--bs-box-shadow-sm);--bs-offcanvas-transition:transform 0.3s ease-in-out;--bs-offcanvas-title-line-height:1.5}@media (max-width:575.98px){.offcanvas-sm{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:575.98px) and (prefers-reduced-motion:reduce){.offcanvas-sm{transition:none}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-sm.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-sm.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-sm.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-sm.show:not(.hiding),.offcanvas-sm.showing{transform:none}.offcanvas-sm.hiding,.offcanvas-sm.show,.offcanvas-sm.showing{visibility:visible}}@media (min-width:576px){.offcanvas-sm{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-sm .offcanvas-header{display:none}.offcanvas-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:767.98px){.offcanvas-md{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.offcanvas-md{transition:none}}@media (max-width:767.98px){.offcanvas-md.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-md.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-md.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-md.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-md.show:not(.hiding),.offcanvas-md.showing{transform:none}.offcanvas-md.hiding,.offcanvas-md.show,.offcanvas-md.showing{visibility:visible}}@media (min-width:768px){.offcanvas-md{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-md .offcanvas-header{display:none}.offcanvas-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:991.98px){.offcanvas-lg{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:991.98px) and (prefers-reduced-motion:reduce){.offcanvas-lg{transition:none}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-lg.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-lg.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-lg.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-lg.show:not(.hiding),.offcanvas-lg.showing{transform:none}.offcanvas-lg.hiding,.offcanvas-lg.show,.offcanvas-lg.showing{visibility:visible}}@media (min-width:992px){.offcanvas-lg{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-lg .offcanvas-header{display:none}.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1199.98px){.offcanvas-xl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){.offcanvas-xl{transition:none}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xl.show:not(.hiding),.offcanvas-xl.showing{transform:none}.offcanvas-xl.hiding,.offcanvas-xl.show,.offcanvas-xl.showing{visibility:visible}}@media (min-width:1200px){.offcanvas-xl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xl .offcanvas-header{display:none}.offcanvas-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1399.98px){.offcanvas-xxl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1399.98px) and (prefers-reduced-motion:reduce){.offcanvas-xxl{transition:none}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xxl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xxl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xxl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xxl.show:not(.hiding),.offcanvas-xxl.showing{transform:none}.offcanvas-xxl.hiding,.offcanvas-xxl.show,.offcanvas-xxl.showing{visibility:visible}}@media (min-width:1400px){.offcanvas-xxl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xxl .offcanvas-header{display:none}.offcanvas-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-header .btn-close{padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);margin:calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{animation:placeholder-glow 2s ease-in-out infinite}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.text-bg-primary{color:#fff!important;background-color:RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-secondary{color:#fff!important;background-color:RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-success{color:#fff!important;background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important}.text-bg-info{color:#000!important;background-color:RGBA(var(--bs-info-rgb),var(--bs-bg-opacity,1))!important}.text-bg-warning{color:#000!important;background-color:RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important}.text-bg-danger{color:#fff!important;background-color:RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1))!important}.text-bg-light{color:#000!important;background-color:RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1))!important}.text-bg-dark{color:#fff!important;background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important}.link-primary{color:RGBA(var(--bs-primary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important}.link-primary:focus,.link-primary:hover{color:RGBA(10,88,202,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important}.link-secondary{color:RGBA(var(--bs-secondary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important}.link-secondary:focus,.link-secondary:hover{color:RGBA(86,94,100,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important}.link-success{color:RGBA(var(--bs-success-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important}.link-success:focus,.link-success:hover{color:RGBA(20,108,67,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important}.link-info{color:RGBA(var(--bs-info-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important}.link-info:focus,.link-info:hover{color:RGBA(61,213,243,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important}.link-warning{color:RGBA(var(--bs-warning-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important}.link-warning:focus,.link-warning:hover{color:RGBA(255,205,57,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important}.link-danger{color:RGBA(var(--bs-danger-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important}.link-danger:focus,.link-danger:hover{color:RGBA(176,42,55,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important}.link-light{color:RGBA(var(--bs-light-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important}.link-light:focus,.link-light:hover{color:RGBA(249,250,251,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important}.link-dark{color:RGBA(var(--bs-dark-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important}.link-dark:focus,.link-dark:hover{color:RGBA(26,30,33,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important}.link-body-emphasis{color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-body-emphasis:focus,.link-body-emphasis:hover{color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,.75))!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important}.focus-ring:focus{outline:0;box-shadow:var(--bs-focus-ring-x,0) var(--bs-focus-ring-y,0) var(--bs-focus-ring-blur,0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:.375rem;align-items:center;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-underline-offset:0.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:.2s ease-in-out transform}@media (prefers-reduced-motion:reduce){.icon-link>.bi{transition:none}}.icon-link-hover:focus-visible>.bi,.icon-link-hover:hover>.bi{transform:var(--bs-icon-link-transform,translate3d(.25em,0,0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.object-fit-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-none{-o-object-fit:none!important;object-fit:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.overflow-x-auto{overflow-x:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.overflow-x-visible{overflow-x:visible!important}.overflow-x-scroll{overflow-x:scroll!important}.overflow-y-auto{overflow-y:auto!important}.overflow-y-hidden{overflow-y:hidden!important}.overflow-y-visible{overflow-y:visible!important}.overflow-y-scroll{overflow-y:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:var(--bs-box-shadow)!important}.shadow-sm{box-shadow:var(--bs-box-shadow-sm)!important}.shadow-lg{box-shadow:var(--bs-box-shadow-lg)!important}.shadow-none{box-shadow:none!important}.focus-ring-primary{--bs-focus-ring-color:rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-secondary{--bs-focus-ring-color:rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-success{--bs-focus-ring-color:rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))}.focus-ring-info{--bs-focus-ring-color:rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))}.focus-ring-warning{--bs-focus-ring-color:rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))}.focus-ring-danger{--bs-focus-ring-color:rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))}.focus-ring-light{--bs-focus-ring-color:rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))}.focus-ring-dark{--bs-focus-ring-color:rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top-0{border-top:0!important}.border-end{border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start-0{border-left:0!important}.border-primary{--bs-border-opacity:1;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}.border-secondary{--bs-border-opacity:1;border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important}.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}.border-info{--bs-border-opacity:1;border-color:rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important}.border-warning{--bs-border-opacity:1;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}.border-danger{--bs-border-opacity:1;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}.border-light{--bs-border-opacity:1;border-color:rgba(var(--bs-light-rgb),var(--bs-border-opacity))!important}.border-dark{--bs-border-opacity:1;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important}.border-black{--bs-border-opacity:1;border-color:rgba(var(--bs-black-rgb),var(--bs-border-opacity))!important}.border-white{--bs-border-opacity:1;border-color:rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important}.border-primary-subtle{border-color:var(--bs-primary-border-subtle)!important}.border-secondary-subtle{border-color:var(--bs-secondary-border-subtle)!important}.border-success-subtle{border-color:var(--bs-success-border-subtle)!important}.border-info-subtle{border-color:var(--bs-info-border-subtle)!important}.border-warning-subtle{border-color:var(--bs-warning-border-subtle)!important}.border-danger-subtle{border-color:var(--bs-danger-border-subtle)!important}.border-light-subtle{border-color:var(--bs-light-border-subtle)!important}.border-dark-subtle{border-color:var(--bs-dark-border-subtle)!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-opacity-10{--bs-border-opacity:0.1}.border-opacity-25{--bs-border-opacity:0.25}.border-opacity-50{--bs-border-opacity:0.5}.border-opacity-75{--bs-border-opacity:0.75}.border-opacity-100{--bs-border-opacity:1}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}.column-gap-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-lighter{font-weight:lighter!important}.fw-light{font-weight:300!important}.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:var(--bs-secondary-color)!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-body-secondary{--bs-text-opacity:1;color:var(--bs-secondary-color)!important}.text-body-tertiary{--bs-text-opacity:1;color:var(--bs-tertiary-color)!important}.text-body-emphasis{--bs-text-opacity:1;color:var(--bs-emphasis-color)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.text-primary-emphasis{color:var(--bs-primary-text-emphasis)!important}.text-secondary-emphasis{color:var(--bs-secondary-text-emphasis)!important}.text-success-emphasis{color:var(--bs-success-text-emphasis)!important}.text-info-emphasis{color:var(--bs-info-text-emphasis)!important}.text-warning-emphasis{color:var(--bs-warning-text-emphasis)!important}.text-danger-emphasis{color:var(--bs-danger-text-emphasis)!important}.text-light-emphasis{color:var(--bs-light-text-emphasis)!important}.text-dark-emphasis{color:var(--bs-dark-text-emphasis)!important}.link-opacity-10{--bs-link-opacity:0.1}.link-opacity-10-hover:hover{--bs-link-opacity:0.1}.link-opacity-25{--bs-link-opacity:0.25}.link-opacity-25-hover:hover{--bs-link-opacity:0.25}.link-opacity-50{--bs-link-opacity:0.5}.link-opacity-50-hover:hover{--bs-link-opacity:0.5}.link-opacity-75{--bs-link-opacity:0.75}.link-opacity-75-hover:hover{--bs-link-opacity:0.75}.link-opacity-100{--bs-link-opacity:1}.link-opacity-100-hover:hover{--bs-link-opacity:1}.link-offset-1{text-underline-offset:0.125em!important}.link-offset-1-hover:hover{text-underline-offset:0.125em!important}.link-offset-2{text-underline-offset:0.25em!important}.link-offset-2-hover:hover{text-underline-offset:0.25em!important}.link-offset-3{text-underline-offset:0.375em!important}.link-offset-3-hover:hover{text-underline-offset:0.375em!important}.link-underline-primary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-secondary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-success{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important}.link-underline-info{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important}.link-underline-warning{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important}.link-underline-danger{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important}.link-underline-light{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important}.link-underline-dark{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important}.link-underline{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-underline-opacity-0{--bs-link-underline-opacity:0}.link-underline-opacity-0-hover:hover{--bs-link-underline-opacity:0}.link-underline-opacity-10{--bs-link-underline-opacity:0.1}.link-underline-opacity-10-hover:hover{--bs-link-underline-opacity:0.1}.link-underline-opacity-25{--bs-link-underline-opacity:0.25}.link-underline-opacity-25-hover:hover{--bs-link-underline-opacity:0.25}.link-underline-opacity-50{--bs-link-underline-opacity:0.5}.link-underline-opacity-50-hover:hover{--bs-link-underline-opacity:0.5}.link-underline-opacity-75{--bs-link-underline-opacity:0.75}.link-underline-opacity-75-hover:hover{--bs-link-underline-opacity:0.75}.link-underline-opacity-100{--bs-link-underline-opacity:1}.link-underline-opacity-100-hover:hover{--bs-link-underline-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-body-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-bg-rgb),var(--bs-bg-opacity))!important}.bg-body-tertiary{--bs-bg-opacity:1;background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-primary-subtle{background-color:var(--bs-primary-bg-subtle)!important}.bg-secondary-subtle{background-color:var(--bs-secondary-bg-subtle)!important}.bg-success-subtle{background-color:var(--bs-success-bg-subtle)!important}.bg-info-subtle{background-color:var(--bs-info-bg-subtle)!important}.bg-warning-subtle{background-color:var(--bs-warning-bg-subtle)!important}.bg-danger-subtle{background-color:var(--bs-danger-bg-subtle)!important}.bg-light-subtle{background-color:var(--bs-light-bg-subtle)!important}.bg-dark-subtle{background-color:var(--bs-dark-bg-subtle)!important}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:var(--bs-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:var(--bs-border-radius-sm)!important}.rounded-2{border-radius:var(--bs-border-radius)!important}.rounded-3{border-radius:var(--bs-border-radius-lg)!important}.rounded-4{border-radius:var(--bs-border-radius-xl)!important}.rounded-5{border-radius:var(--bs-border-radius-xxl)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:var(--bs-border-radius-pill)!important}.rounded-top{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-0{border-top-left-radius:0!important;border-top-right-radius:0!important}.rounded-top-1{border-top-left-radius:var(--bs-border-radius-sm)!important;border-top-right-radius:var(--bs-border-radius-sm)!important}.rounded-top-2{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-3{border-top-left-radius:var(--bs-border-radius-lg)!important;border-top-right-radius:var(--bs-border-radius-lg)!important}.rounded-top-4{border-top-left-radius:var(--bs-border-radius-xl)!important;border-top-right-radius:var(--bs-border-radius-xl)!important}.rounded-top-5{border-top-left-radius:var(--bs-border-radius-xxl)!important;border-top-right-radius:var(--bs-border-radius-xxl)!important}.rounded-top-circle{border-top-left-radius:50%!important;border-top-right-radius:50%!important}.rounded-top-pill{border-top-left-radius:var(--bs-border-radius-pill)!important;border-top-right-radius:var(--bs-border-radius-pill)!important}.rounded-end{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-0{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-end-1{border-top-right-radius:var(--bs-border-radius-sm)!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important}.rounded-end-2{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-3{border-top-right-radius:var(--bs-border-radius-lg)!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important}.rounded-end-4{border-top-right-radius:var(--bs-border-radius-xl)!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important}.rounded-end-5{border-top-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important}.rounded-end-circle{border-top-right-radius:50%!important;border-bottom-right-radius:50%!important}.rounded-end-pill{border-top-right-radius:var(--bs-border-radius-pill)!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important}.rounded-bottom{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-0{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.rounded-bottom-1{border-bottom-right-radius:var(--bs-border-radius-sm)!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important}.rounded-bottom-2{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-3{border-bottom-right-radius:var(--bs-border-radius-lg)!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important}.rounded-bottom-4{border-bottom-right-radius:var(--bs-border-radius-xl)!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important}.rounded-bottom-5{border-bottom-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important}.rounded-bottom-circle{border-bottom-right-radius:50%!important;border-bottom-left-radius:50%!important}.rounded-bottom-pill{border-bottom-right-radius:var(--bs-border-radius-pill)!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important}.rounded-start{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-0{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.rounded-start-1{border-bottom-left-radius:var(--bs-border-radius-sm)!important;border-top-left-radius:var(--bs-border-radius-sm)!important}.rounded-start-2{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-3{border-bottom-left-radius:var(--bs-border-radius-lg)!important;border-top-left-radius:var(--bs-border-radius-lg)!important}.rounded-start-4{border-bottom-left-radius:var(--bs-border-radius-xl)!important;border-top-left-radius:var(--bs-border-radius-xl)!important}.rounded-start-5{border-bottom-left-radius:var(--bs-border-radius-xxl)!important;border-top-left-radius:var(--bs-border-radius-xxl)!important}.rounded-start-circle{border-bottom-left-radius:50%!important;border-top-left-radius:50%!important}.rounded-start-pill{border-bottom-left-radius:var(--bs-border-radius-pill)!important;border-top-left-radius:var(--bs-border-radius-pill)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-n1{z-index:-1!important}.z-0{z-index:0!important}.z-1{z-index:1!important}.z-2{z-index:2!important}.z-3{z-index:3!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.object-fit-sm-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-sm-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-sm-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-sm-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-sm-none{-o-object-fit:none!important;object-fit:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.row-gap-sm-0{row-gap:0!important}.row-gap-sm-1{row-gap:.25rem!important}.row-gap-sm-2{row-gap:.5rem!important}.row-gap-sm-3{row-gap:1rem!important}.row-gap-sm-4{row-gap:1.5rem!important}.row-gap-sm-5{row-gap:3rem!important}.column-gap-sm-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-sm-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-sm-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-sm-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-sm-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-sm-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.object-fit-md-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-md-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-md-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-md-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-md-none{-o-object-fit:none!important;object-fit:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.row-gap-md-0{row-gap:0!important}.row-gap-md-1{row-gap:.25rem!important}.row-gap-md-2{row-gap:.5rem!important}.row-gap-md-3{row-gap:1rem!important}.row-gap-md-4{row-gap:1.5rem!important}.row-gap-md-5{row-gap:3rem!important}.column-gap-md-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-md-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-md-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-md-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-md-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-md-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.object-fit-lg-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-lg-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-lg-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-lg-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-lg-none{-o-object-fit:none!important;object-fit:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.row-gap-lg-0{row-gap:0!important}.row-gap-lg-1{row-gap:.25rem!important}.row-gap-lg-2{row-gap:.5rem!important}.row-gap-lg-3{row-gap:1rem!important}.row-gap-lg-4{row-gap:1.5rem!important}.row-gap-lg-5{row-gap:3rem!important}.column-gap-lg-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-lg-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-lg-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-lg-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-lg-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-lg-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.object-fit-xl-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-xl-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-xl-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-xl-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-xl-none{-o-object-fit:none!important;object-fit:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.row-gap-xl-0{row-gap:0!important}.row-gap-xl-1{row-gap:.25rem!important}.row-gap-xl-2{row-gap:.5rem!important}.row-gap-xl-3{row-gap:1rem!important}.row-gap-xl-4{row-gap:1.5rem!important}.row-gap-xl-5{row-gap:3rem!important}.column-gap-xl-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-xl-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-xl-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-xl-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-xl-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-xl-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.object-fit-xxl-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-xxl-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-xxl-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-xxl-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-xxl-none{-o-object-fit:none!important;object-fit:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.row-gap-xxl-0{row-gap:0!important}.row-gap-xxl-1{row-gap:.25rem!important}.row-gap-xxl-2{row-gap:.5rem!important}.row-gap-xxl-3{row-gap:1rem!important}.row-gap-xxl-4{row-gap:1.5rem!important}.row-gap-xxl-5{row-gap:3rem!important}.column-gap-xxl-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-xxl-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-xxl-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-xxl-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-xxl-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-xxl-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */

/* ================================================================== */
/* Variables / Theme - color */
/* Source: design/color_theme.css */
/* ================================================================== */
/* ============================================
   iService CRM - Studio Calm Palette v4
   Minimal palette: 1 accent + 4 semantic + neutrals
   No #FFF canvas · no #000 dark · long-session comfort
   Single source of truth - use ONLY these CSS variables
   ============================================ */

:root {
	/* === PRIMARY (muted slate-blue - calm, professional) === */
	--primary: #4A6275;
	--primary-hover: #3F5566;
	--primary-dark: #344958;
	--primary-light: #627A8E;
	--primary-rgb: 74, 98, 117;

	/* === NEUTRAL GRAYS (warm-neutral, low saturation) === */
	--navy: #1E2329;
	--navy-light: #5F6775;
	--navy-dark: #14171C;

	--white: #FAFBFC;
	--gray-50: #F7F8FA;
	--gray-100: #EEF0F4;
	--gray-200: #E4E7EC;
	--gray-300: #D8DCE3;
	--gray-400: #B4BAC4;
	--gray-500: #8A919D;
	--gray-600: #5F6775;
	--gray-700: #454C58;
	--gray-800: #2E343E;
	--gray-900: #1E2329;

	/* === SEMANTIC (calm status colors) === */
	--success: #458A66;
	--success-hover: #3B7858;
	--success-rgb: 69, 138, 102;
	--success-light: rgba(69, 138, 102, 0.1);

	--danger: #B85C5C;
	--danger-hover: #A34F4F;
	--danger-rgb: 184, 92, 92;
	--danger-light: rgba(184, 92, 92, 0.1);

	--warning: #B8893A;
	--warning-hover: #A57832;
	--warning-rgb: 184, 137, 58;
	--warning-light: rgba(184, 137, 58, 0.1);

	--info: #4F8499;
	--info-hover: #457388;
	--info-rgb: 79, 132, 153;
	--info-light: rgba(79, 132, 153, 0.1);

	/* === STATUS (s1–s7 - workflow palette, WCAG-friendly on white text) === */
	--status-on-solid: #FFFFFF;

	--s1: #C58B00;
	--s1-rgb: 197, 139, 0;
	--s1-light: rgba(197, 139, 0, 0.12);
	--s1-bg: rgba(197, 139, 0, 0.08);

	--s2: #D97706;
	--s2-rgb: 217, 119, 6;
	--s2-light: rgba(217, 119, 6, 0.12);
	--s2-bg: rgba(217, 119, 6, 0.08);

	--s3: #DC2626;
	--s3-rgb: 220, 38, 38;
	--s3-light: rgba(220, 38, 38, 0.12);
	--s3-bg: rgba(220, 38, 38, 0.08);

	--s4: #2563EB;
	--s4-rgb: 37, 99, 235;
	--s4-light: rgba(37, 99, 235, 0.12);
	--s4-bg: rgba(37, 99, 235, 0.08);

	--s5: #7C3AED;
	--s5-rgb: 124, 58, 237;
	--s5-light: rgba(124, 58, 237, 0.12);
	--s5-bg: rgba(124, 58, 237, 0.08);

	--s6: #059669;
	--s6-rgb: 5, 150, 105;
	--s6-light: rgba(5, 150, 105, 0.12);
	--s6-bg: rgba(5, 150, 105, 0.08);

	--s7: #4B5563;
	--s7-rgb: 75, 85, 99;
	--s7-light: rgba(75, 85, 99, 0.15);
	--s7-bg: rgba(75, 85, 99, 0.12);

	/* === SURFACES (soft light - never #FFFFFF canvas) === */
	--background: #EBEEF2;
	--surface: #F4F5F7;
	--surface-secondary: #ECEEF2;
	--surface-elevated: #F8F9FA;

	--bg-body: var(--background);
	--bg-sidebar: var(--surface);
	--bg-header: var(--surface);
	--bg-card: var(--surface);
	--bg-card-hover: var(--surface-secondary);
	--bg-main: var(--background);
	--bg-overlay: rgba(20, 23, 28, 0.42);
	--overlay-bg: rgba(20, 23, 28, 0.32);

	/* === TEXT === */
	--text-primary: #1E2329;
	--text-secondary: #5F6775;
	--text-muted: #8A919D;
	--text-light: #B4BAC4;
	--text-white: #F7F8FA;
	--text-link: var(--primary);
	--text-link-hover: var(--primary-hover);
	--text-main: var(--text-primary);
	--text-heading: #14171C;
	--text-white-rgb: 247, 248, 250;
	--text-black: #14171C;
	--text-black-rgb: 20, 23, 28;

	/* === BORDERS === */
	--border-color: #D4D8E0;
	--border-light: #E2E5EB;
	--border-hover: #BFC5CE;
	--border-focus: var(--primary);
	--border-subtle: var(--border-light);
	--border: var(--border-color);
	--ds-border: var(--border-color);

	/* === SPACING === */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;

	/* === RADIUS === */
	--radius-sm: 5px;
	--radius-md: 5px;
	--radius-lg: 5px;
	--radius-xl: 5px;
	--radius-full: 9999px;
	--radius: 5px;

	/* === SHADOWS (minimal - flat UI) === */
	--shadow-xs: 0 1px 2px rgba(20, 23, 28, 0.04);
	--shadow-sm: 0 1px 3px rgba(20, 23, 28, 0.06);
	--shadow-md: 0 2px 8px rgba(20, 23, 28, 0.07);
	--shadow-lg: 0 4px 16px rgba(20, 23, 28, 0.08);
	--shadow-xl: 0 8px 24px rgba(20, 23, 28, 0.1);
	--shadow-2xl: 0 12px 32px rgba(20, 23, 28, 0.12);
	--shadow-primary: 0 2px 8px rgba(var(--primary-rgb), 0.18);
	--shadow-primary-lg: 0 4px 12px rgba(var(--primary-rgb), 0.22);
	--shadow-success: 0 2px 8px rgba(var(--success-rgb), 0.15);
	--shadow-danger: 0 2px 8px rgba(var(--danger-rgb), 0.15);

	/* === TYPOGRAPHY === */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* === LAYOUT === */
	--sidebar-width: 260px;
	--sidebar-collapsed-width: 72px;
	--header-height: 52px;
	--input-height: 40px;
	--input-bg: var(--surface-elevated);
	--input-focus-bg: var(--surface-elevated);
	--input-border: var(--border-color);
	--input-radius: var(--radius-sm);
	--form-height: 40px;
	--form-height-touch: 40px;
	--form-pad-x: 12px;
	--form-focus-ring: none;
	--form-state-transition: 200ms ease;
	--form-focus-outline: none;
	--form-hover-border: var(--border-hover);
	--form-error-border: var(--danger);
	--form-success-border: var(--success);
	--form-disabled-opacity: 0.55;
	--form-readonly-bg: var(--gray-50);
	--form-error-bg: var(--danger-light);
	--form-success-bg: var(--success-light);
	--form-focus-bg: rgba(var(--primary-rgb), 0.04);

	/* === TRANSITIONS === */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;
	--transition: var(--transition-base);

	/* === Z-INDEX === */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* === SOCIAL (brand - isolated, not UI accent) === */
	--viber: #7360F2;
	--viber-light: rgba(115, 96, 242, 0.1);
	--telegram: #0088CC;
	--telegram-light: rgba(0, 136, 204, 0.1);
	--whatsapp: #25D366;
	--whatsapp-light: rgba(37, 211, 102, 0.1);

	--status-bg-alpha: 0.06;
	--card-gradient-mix: var(--surface-secondary);
	--note-bg: rgba(237, 239, 242, 0.75);

	/* === DESIGN TOKENS === */
	--gap: 14px;
	--content-max: 1440px;
	--border-rgb: 216, 220, 227;
	--bg-glass: rgba(247, 248, 250, 0.94);
	--glass-border: rgba(216, 220, 227, 0.9);
	--overlay-glass: rgba(20, 23, 28, 0.03);
	--primary-gradient: var(--primary);
	--primary-gradient-hover: var(--primary-hover);
	--list-row-radius: 5px;
	--card-radius: 5px;
	--list-row-pad-y: 10px;
	--list-row-pad-x: 14px;
	--font-display: clamp(1.2rem, 2vw, 1.5rem);
	--font-title: 1rem;
	--font-body: 0.9375rem;
	--font-caption: 0.8125rem;
	--font-micro: 0.75rem;
	--dash-trend-bg: rgba(var(--primary-rgb), 0.07);

	--nav-active-bg: rgba(var(--primary-rgb), 0.09);
	--nav-active-text: var(--primary);

	--client-header-bg: var(--gray-800);
}

/* === RESOLVED THEME === */
html[data-theme-resolved='light'] {
	color-scheme: light;
}

html[data-theme-resolved='dark'] {
	color-scheme: dark;
}

[data-theme-resolved='light'] {
	--background: #EBEEF2;
	--surface: #F4F5F7;
	--surface-secondary: #ECEEF2;
	--surface-elevated: #F8F9FA;

	--bg-body: var(--background);
	--bg-sidebar: var(--surface);
	--bg-header: var(--surface);
	--bg-card: var(--surface);
	--bg-card-hover: var(--surface-secondary);
	--bg-main: var(--background);
	--bg-overlay: rgba(20, 23, 28, 0.42);
	--overlay-bg: rgba(20, 23, 28, 0.32);

	--text-primary: #1E2329;
	--text-secondary: #5F6775;
	--text-muted: #8A919D;
	--text-light: #B4BAC4;
	--text-link: var(--primary);
	--text-link-hover: var(--primary-hover);
	--text-main: var(--text-primary);
	--text-heading: #14171C;

	--border-color: #D4D8E0;
	--border-light: #E2E5EB;
	--border-hover: #BFC5CE;
	--border-subtle: var(--border-light);
	--border-rgb: 216, 220, 227;

	--input-bg: var(--surface-elevated);
	--input-focus-bg: var(--surface-elevated);

	--card-gradient-mix: var(--surface-secondary);
	--note-bg: rgba(237, 239, 242, 0.75);
	--nav-active-bg: rgba(var(--primary-rgb), 0.09);
	--dash-trend-bg: rgba(var(--primary-rgb), 0.07);

	--client-header-bg: var(--gray-800);

	--s1-bg: rgba(197, 139, 0, 0.08);
	--s2-bg: rgba(217, 119, 6, 0.08);
	--s3-bg: rgba(220, 38, 38, 0.08);
	--s4-bg: rgba(37, 99, 235, 0.08);
	--s5-bg: rgba(124, 58, 237, 0.08);
	--s6-bg: rgba(5, 150, 105, 0.08);
	--s7-bg: rgba(75, 85, 99, 0.12);
}

[data-theme-resolved='dark'] {
	--primary: #7694B0;
	--primary-hover: #86A4C0;
	--primary-light: #96B4D0;
	--primary-dark: #6684A0;
	--primary-rgb: 118, 148, 176;

	--background: #12151A;
	--surface: #1A1E24;
	--surface-secondary: #22262E;
	--surface-elevated: #262B33;

	--bg-body: var(--background);
	--bg-sidebar: var(--surface);
	--bg-header: var(--surface);
	--bg-card: var(--surface);
	--bg-card-hover: var(--surface-secondary);
	--bg-main: var(--background);
	--bg-overlay: rgba(0, 0, 0, 0.62);
	--overlay-bg: rgba(0, 0, 0, 0.48);

	--text-primary: #E5E8ED;
	--text-secondary: #A8AEB8;
	--text-muted: #7A828E;
	--text-light: #636A76;
	--text-link: var(--primary);
	--text-link-hover: var(--primary-hover);
	--text-main: var(--text-primary);
	--text-heading: #F0F2F5;

	--border-color: #2E333D;
	--border-light: #262B34;
	--border-hover: #3A404C;
	--border-focus: var(--primary);
	--border-subtle: var(--border-light);
	--border-rgb: 46, 51, 61;

	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
	--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
	--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.55);

	--input-bg: var(--surface-secondary);
	--input-focus-bg: var(--surface-elevated);

	--card-gradient-mix: var(--surface);
	--note-bg: rgba(255, 255, 255, 0.04);
	--status-bg-alpha: 0.1;
	--bg-glass: rgba(26, 30, 38, 0.94);
	--glass-border: rgba(46, 51, 61, 0.9);
	--overlay-glass: rgba(255, 255, 255, 0.03);

	--nav-active-bg: rgba(var(--primary-rgb), 0.14);
	--nav-active-text: var(--primary-light);
	--dash-trend-bg: rgba(var(--primary-rgb), 0.12);

	--client-header-bg: var(--surface-secondary);

	--gray-50: #1A1E26;
	--gray-100: #222833;
	--gray-200: #2E333D;
	--gray-300: #3A404C;
	--gray-400: #636A76;
	--gray-500: #7A828E;
	--gray-600: #A8AEB8;
	--gray-700: #C4C9D1;
	--gray-800: #E5E8ED;
	--gray-900: #F0F2F5;

	--success: #5A9E78;
	--success-hover: #6AAD88;
	--success-light: rgba(90, 158, 120, 0.14);

	--danger: #C87070;
	--danger-hover: #D48080;
	--danger-light: rgba(200, 112, 112, 0.14);

	--warning: #C9A04E;
	--warning-hover: #D4AD5E;
	--warning-light: rgba(201, 160, 78, 0.14);

	--info: #6A9DB2;
	--info-hover: #7AADC2;
	--info-light: rgba(106, 157, 178, 0.14);

	--s1-bg: rgba(197, 139, 0, 0.14);
	--s2-bg: rgba(217, 119, 6, 0.12);
	--s3-bg: rgba(220, 38, 38, 0.14);
	--s4-bg: rgba(37, 99, 235, 0.14);
	--s5-bg: rgba(124, 58, 237, 0.12);
	--s6-bg: rgba(5, 150, 105, 0.14);
	--s7-bg: rgba(75, 85, 99, 0.14);

	--s1: #C58B00;
	--s1-rgb: 197, 139, 0;
	--s2: #D97706;
	--s2-rgb: 217, 119, 6;
	--s3: #DC2626;
	--s3-rgb: 220, 38, 38;
	--s4: #2563EB;
	--s4-rgb: 37, 99, 235;
	--s5: #7C3AED;
	--s5-rgb: 124, 58, 237;
	--s6: #059669;
	--s6-rgb: 5, 150, 105;
	--s7: #4B5563;
	--s7-rgb: 75, 85, 99;

	--s1-light: rgba(197, 139, 0, 0.16);
	--s2-light: rgba(217, 119, 6, 0.16);
	--s3-light: rgba(220, 38, 38, 0.16);
	--s4-light: rgba(37, 99, 235, 0.16);
	--s5-light: rgba(124, 58, 237, 0.16);
	--s6-light: rgba(5, 150, 105, 0.16);
	--s7-light: rgba(75, 85, 99, 0.18);
}

[data-theme='light'] {
	color-scheme: light;
}

[data-theme='dark'] {
	color-scheme: dark;
}


/* ================================================================== */
/* Variables / Theme - bootstrap bridge */
/* Source: design/bootstrap_theme.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Bootstrap 5.3 Theme
   MIT-licensed Bootstrap mapped to CRM design tokens (color.css)
   Load after: bootstrap.min.css + color.css
   ========================================================================== */

:root,
[data-theme-resolved='light'] {
	--bs-blue: var(--primary);
	--bs-indigo: var(--primary-dark);
	--bs-purple: var(--primary);
	--bs-pink: var(--danger);
	--bs-red: var(--danger);
	--bs-orange: var(--warning);
	--bs-yellow: var(--warning);
	--bs-green: var(--success);
	--bs-teal: var(--info);
	--bs-cyan: var(--info);
	--bs-black: var(--text-black);
	--bs-white: var(--white);

	--bs-primary: var(--primary);
	--bs-primary-rgb: var(--primary-rgb);
	--bs-secondary: var(--gray-600);
	--bs-secondary-rgb: 95, 103, 117;
	--bs-success: var(--success);
	--bs-success-rgb: var(--success-rgb);
	--bs-info: var(--info);
	--bs-info-rgb: var(--info-rgb);
	--bs-warning: var(--warning);
	--bs-warning-rgb: var(--warning-rgb);
	--bs-danger: var(--danger);
	--bs-danger-rgb: var(--danger-rgb);
	--bs-light: var(--surface-secondary);
	--bs-light-rgb: 236, 238, 242;
	--bs-dark: var(--gray-800);
	--bs-dark-rgb: 46, 52, 62;

	--bs-primary-text-emphasis: var(--primary-dark);
	--bs-secondary-text-emphasis: var(--text-secondary);
	--bs-success-text-emphasis: var(--success-hover);
	--bs-info-text-emphasis: var(--info-hover);
	--bs-warning-text-emphasis: var(--warning-hover);
	--bs-danger-text-emphasis: var(--danger-hover);
	--bs-light-text-emphasis: var(--text-secondary);
	--bs-dark-text-emphasis: var(--text-heading);

	--bs-primary-bg-subtle: rgba(var(--primary-rgb), 0.08);
	--bs-secondary-bg-subtle: var(--surface-secondary);
	--bs-success-bg-subtle: var(--success-light);
	--bs-info-bg-subtle: var(--info-light);
	--bs-warning-bg-subtle: var(--warning-light);
	--bs-danger-bg-subtle: var(--danger-light);
	--bs-light-bg-subtle: var(--surface-secondary);
	--bs-dark-bg-subtle: var(--gray-100);

	--bs-primary-border-subtle: rgba(var(--primary-rgb), 0.22);
	--bs-secondary-border-subtle: var(--border-light);
	--bs-success-border-subtle: rgba(var(--success-rgb), 0.22);
	--bs-info-border-subtle: rgba(var(--info-rgb), 0.22);
	--bs-warning-border-subtle: rgba(var(--warning-rgb), 0.22);
	--bs-danger-border-subtle: rgba(var(--danger-rgb), 0.22);
	--bs-light-border-subtle: var(--border-light);
	--bs-dark-border-subtle: var(--border-color);

	--bs-body-font-family: var(--font-sans);
	--bs-body-font-size: 0.9375rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.5;
	--bs-body-color: var(--text-main);
	--bs-body-color-rgb: 54, 59, 68;
	--bs-body-bg: var(--bg-body);
	--bs-body-bg-rgb: 240, 240, 240;

	--bs-emphasis-color: var(--text-heading);
	--bs-emphasis-color-rgb: 46, 54, 64;
	--bs-secondary-color: var(--text-muted);
	--bs-secondary-color-rgb: 146, 152, 155;
	--bs-secondary-bg: var(--bg-card);
	--bs-secondary-bg-rgb: 255, 255, 255;
	--bs-tertiary-color: var(--text-light);
	--bs-tertiary-color-rgb: 176, 184, 191;
	--bs-tertiary-bg: var(--gray-100);
	--bs-tertiary-bg-rgb: 245, 245, 245;

	--bs-heading-color: var(--text-heading);
	--bs-link-color: var(--primary);
	--bs-link-color-rgb: var(--primary-rgb);
	--bs-link-hover-color: var(--primary-hover);
	--bs-link-hover-color-rgb: var(--primary-rgb);
	--bs-link-decoration: none;

	--bs-border-width: 1px;
	--bs-border-style: solid;
	--bs-border-color: var(--border-color);
	--bs-border-color-translucent: rgba(0, 0, 0, 0.08);
	--bs-border-radius: var(--radius-sm);
	--bs-border-radius-sm: 5px;
	--bs-border-radius-lg: var(--radius-lg);
	--bs-border-radius-xl: var(--radius-xl);
	--bs-border-radius-xxl: 5px;
	--bs-border-radius-pill: 9999px;

	--bs-box-shadow: var(--shadow-sm);
	--bs-box-shadow-sm: var(--shadow-xs);
	--bs-box-shadow-lg: var(--shadow-lg);
	--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);

	--bs-focus-ring-width: 2px;
	--bs-focus-ring-opacity: 0.12;
	--bs-focus-ring-color: rgba(var(--primary-rgb), 0.12);

	--bs-form-valid-color: var(--success);
	--bs-form-valid-border-color: var(--success);
	--bs-form-invalid-color: var(--danger);
	--bs-form-invalid-border-color: var(--danger);

	--bs-btn-font-weight: 600;
	--bs-btn-border-radius: var(--radius-sm);
	--bs-btn-box-shadow: none;
	--bs-btn-focus-box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

[data-theme-resolved='dark'] {
	--bs-body-color: var(--text-main);
	--bs-body-color-rgb: 232, 232, 232;
	--bs-body-bg: var(--bg-body);
	--bs-body-bg-rgb: 18, 18, 18;

	--bs-emphasis-color: var(--text-heading);
	--bs-emphasis-color-rgb: 240, 240, 240;
	--bs-secondary-color: var(--text-muted);
	--bs-secondary-color-rgb: 138, 138, 138;
	--bs-secondary-bg: var(--bg-card);
	--bs-secondary-bg-rgb: 30, 30, 30;
	--bs-tertiary-color: var(--text-light);
	--bs-tertiary-color-rgb: 110, 110, 110;
	--bs-tertiary-bg: var(--gray-100);
	--bs-tertiary-bg-rgb: 37, 37, 37;

	--bs-primary-text-emphasis: #8BB8F9;
	--bs-secondary-text-emphasis: #C0C0C0;
	--bs-success-text-emphasis: #8FD98F;
	--bs-info-text-emphasis: #8BB8E8;
	--bs-warning-text-emphasis: #F0C060;
	--bs-danger-text-emphasis: #F0A0A0;
	--bs-light-text-emphasis: #E8E8E8;
	--bs-dark-text-emphasis: var(--background);

	--bs-primary-bg-subtle: rgba(76, 139, 245, 0.15);
	--bs-secondary-bg-subtle: rgba(255, 255, 255, 0.04);
	--bs-success-bg-subtle: rgba(92, 184, 92, 0.18);
	--bs-info-bg-subtle: rgba(91, 155, 213, 0.18);
	--bs-warning-bg-subtle: rgba(232, 168, 56, 0.18);
	--bs-danger-bg-subtle: rgba(229, 115, 115, 0.18);
	--bs-light-bg-subtle: #252525;
	--bs-dark-bg-subtle: #2E2E2E;

	--bs-primary-border-subtle: rgba(76, 139, 245, 0.35);
	--bs-secondary-border-subtle: #3A3A3A;
	--bs-success-border-subtle: rgba(92, 184, 92, 0.35);
	--bs-info-border-subtle: rgba(91, 155, 213, 0.35);
	--bs-warning-border-subtle: rgba(232, 168, 56, 0.35);
	--bs-danger-border-subtle: rgba(229, 115, 115, 0.35);
	--bs-light-border-subtle: #2E2E2E;
	--bs-dark-border-subtle: #6E6E6E;

	--bs-border-color: var(--border-color);
	--bs-border-color-translucent: rgba(255, 255, 255, 0.08);

	--bs-link-color: var(--text-link);
	--bs-link-hover-color: var(--text-link-hover);
}

/* Sync Bootstrap color mode with CRM theme resolver */
html[data-theme-resolved='light'] {
	color-scheme: light;
	--bs-body-bg: var(--background);
}

html[data-theme-resolved='dark'] {
	color-scheme: dark;
	--bs-body-bg: var(--background);
}

/* Bootstrap base tweaks for CRM flat style */
.btn {
	box-shadow: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	font-size: var(--font-caption);
}

.btn:hover,
.btn:focus,
.btn:active {
	box-shadow: none;
	transform: none;
}

.btn-primary {
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary-hover);
	--bs-btn-hover-border-color: var(--primary-hover);
	--bs-btn-active-bg: var(--primary-dark);
	--bs-btn-active-border-color: var(--primary-dark);
}

.btn-secondary {
	--bs-btn-bg: var(--bg-card);
	--bs-btn-border-color: var(--border-color);
	--bs-btn-color: var(--text-main);
	--bs-btn-hover-bg: var(--gray-100);
	--bs-btn-hover-border-color: var(--border-color);
	--bs-btn-hover-color: var(--text-main);
	--bs-btn-active-bg: var(--bg-card-hover);
	--bs-btn-active-border-color: var(--border-color);
}

[data-theme-resolved='dark'] .btn-secondary {
	--bs-btn-hover-bg: var(--bg-card-hover);
}

.btn-success {
	--bs-btn-bg: var(--success);
	--bs-btn-border-color: var(--success);
	--bs-btn-hover-bg: var(--success-hover);
	--bs-btn-hover-border-color: var(--success-hover);
}

.btn-danger {
	--bs-btn-bg: var(--danger);
	--bs-btn-border-color: var(--danger);
	--bs-btn-hover-bg: var(--danger-hover);
	--bs-btn-hover-border-color: var(--danger-hover);
}

.btn-warning {
	--bs-btn-bg: var(--warning);
	--bs-btn-border-color: var(--warning);
	--bs-btn-hover-bg: var(--warning-hover);
	--bs-btn-hover-border-color: var(--warning-hover);
	--bs-btn-color: var(--text-white);
	--bs-btn-hover-color: var(--text-white);
}

.btn-sm {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.625rem;
	--bs-btn-font-size: var(--font-micro);
	min-height: 30px;
}

.btn-lg {
	--bs-btn-padding-y: 0.5rem;
	--bs-btn-padding-x: 1.125rem;
	min-height: 42px;
}

.form-control,
.form-select {
	font-size: var(--font-caption);
	font-weight: 500;
	min-height: var(--form-height, 36px);
	border-radius: var(--input-radius, var(--radius-sm));
	background-color: var(--input-bg);
	border-color: var(--input-border, var(--border-color));
	color: var(--text-main);
	box-shadow: none;
}

.form-control:focus,
.form-select:focus {
	background-color: var(--input-focus-bg);
	border-color: var(--border-focus);
	box-shadow: var(--form-focus-ring);
	color: var(--text-main);
}

.form-label {
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.card {
	border-radius: var(--card-radius);
	border-color: var(--border-color);
	background: var(--bg-card);
	box-shadow: var(--shadow-xs);
}

.table {
	--bs-table-bg: var(--bg-card);
	--bs-table-color: var(--text-main);
	--bs-table-border-color: var(--border-color);
	--bs-table-striped-bg: var(--gray-50);
	--bs-table-hover-bg: var(--bg-card-hover);
	font-size: var(--font-caption);
}

.breadcrumb {
	--bs-breadcrumb-divider: '/';
	font-size: var(--font-micro);
	margin-bottom: 0;
}

.breadcrumb-item a {
	color: var(--text-muted);
	text-decoration: none;
	font-weight: 600;
}

.breadcrumb-item a:hover {
	color: var(--primary);
}

.breadcrumb-item.active {
	color: var(--text-main);
	font-weight: 700;
}

.badge {
	font-weight: 700;
	font-size: var(--font-micro);
}

.alert {
	border-radius: var(--radius-sm);
	font-size: var(--font-caption);
}

.modal-content {
	background: var(--bg-card);
	border-color: var(--border-color);
	border-radius: var(--radius-lg);
}

.modal-header,
.modal-footer {
	border-color: var(--border-color);
}

.dropdown-menu {
	background: var(--bg-card);
	border-color: var(--border-color);
	box-shadow: var(--shadow-lg);
}

.dropdown-item {
	color: var(--text-main);
	font-size: var(--font-caption);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--bg-card-hover);
	color: var(--text-main);
}

.pagination {
	--bs-pagination-bg: var(--bg-card);
	--bs-pagination-border-color: var(--border-color);
	--bs-pagination-color: var(--text-main);
	--bs-pagination-hover-bg: var(--bg-card-hover);
	--bs-pagination-hover-border-color: var(--border-color);
	--bs-pagination-active-bg: var(--primary);
	--bs-pagination-active-border-color: var(--primary);
	font-size: var(--font-caption);
}

.nav-pills .nav-link {
	font-size: var(--font-caption);
	font-weight: 700;
	border-radius: var(--radius-md);
	color: var(--text-muted);
}

.nav-pills .nav-link.active {
	background: var(--bg-card);
	color: var(--primary);
	box-shadow: var(--shadow-xs);
}

.offcanvas {
	background: var(--bg-sidebar);
	border-color: var(--border-color);
}

.list-group-item {
	background: var(--bg-card);
	border-color: var(--border-color);
	color: var(--text-main);
}

.input-group-text {
	background: var(--bg-card);
	border-color: var(--border-color);
	color: var(--text-muted);
	font-size: var(--font-caption);
}


/* ================================================================== */
/* Variables / Theme - tokens (ui) */
/* Source: design/ui/design_tokens.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Color Tokens (aliases)
   Source of truth: design/color_theme.css (Studio Calm v4)
   Modules MUST use these variables - never raw hex in new code.
   ========================================================================== */

:root {
	/* === Core palette === */
	--ds-primary: var(--primary);
	--ds-primary-hover: var(--primary-hover);
	--ds-secondary: var(--gray-600);
	--ds-success: var(--success);
	--ds-warning: var(--warning);
	--ds-danger: var(--danger);
	--ds-info: var(--info);

	/* === Surfaces === */
	--ds-background: var(--background);
	--ds-surface: var(--surface);
	--ds-surface-secondary: var(--surface-secondary);
	--ds-surface-elevated: var(--surface-elevated);
	--ds-surface-hover: var(--surface-secondary);

	/* === Borders === */
	--ds-border: var(--border-color);
	--ds-border-light: var(--border-light);
	--ds-border-hover: var(--border-hover);
	--ds-border-focus: var(--border-focus);

	/* === Text === */
	--ds-text-primary: var(--text-primary);
	--ds-text-secondary: var(--text-secondary);
	--ds-text-muted: var(--text-muted);
	--ds-text-light: var(--text-light);

	/* === Status tints (semantic only) === */
	--ds-success-bg: var(--success-light);
	--ds-warning-bg: var(--warning-light);
	--ds-danger-bg: var(--danger-light);
	--ds-info-bg: var(--info-light);

	/* === Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) === */
	--space-4: var(--space-xs);
	--space-8: var(--space-sm);
	--space-12: 12px;
	--space-16: var(--space-md);
	--space-24: var(--space-lg);
	--space-32: var(--space-xl);
	--space-48: var(--space-2xl);

	/* === Component sizing === */
	--ds-btn-height: var(--form-height);
	--ds-btn-height-sm: 30px;
	--ds-btn-height-xs: 28px;
	--ds-btn-height-lg: 42px;
	--ds-btn-radius: var(--radius-sm);
	--ds-input-height: var(--form-height);
	--ds-input-radius: var(--input-radius);

	/* === Typography aliases (Flat 2026) === */
	--ds-font-h1: var(--font-display);
	--ds-font-h2: var(--font-title);
	--ds-font-h3: var(--font-body);
	--ds-font-h4: var(--font-caption);
	--ds-font-body: var(--font-body);
	--ds-font-small: var(--font-size-sm);
	--ds-font-caption: var(--font-caption);

	/* === Layout rhythm === */
	--ds-page-gap: var(--space-24);
	--ds-section-gap: var(--space-16);
	--ds-block-gap: var(--space-12);

	/* === Animation === */
	--ds-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ds-duration-fast: 120ms;
	--ds-duration-base: 160ms;
	--ds-duration-slow: 220ms;

	/* === Z-index === */
	--ds-z-dropdown: var(--z-dropdown);
	--ds-z-modal: var(--z-modal);
	--ds-z-tooltip: var(--z-tooltip);

	/* === Breakpoints (canonical - use in @media) ===
	   Desktop wide:  min-width 1400px
	   Laptop:        992px – 1399px
	   Tablet:        768px – 991px  (sidebar drawer)
	   Mobile:        max-width 767px
	   Mobile sm:     max-width 575px
	*/
	--bp-desktop: 1400px;
	--bp-laptop: 992px;
	--bp-tablet: 768px;
	--bp-mobile: 767px;
	--bp-mobile-sm: 575px;

	/* === Touch & responsive rhythm === */
	--touch-target-min: 44px;
	--responsive-page-pad: var(--space-16);
	--responsive-section-gap: var(--space-12);
}


/* ================================================================== */
/* Variables / Theme - shell tokens */
/* Source: system/shell/css/design_tokens.css */
/* ================================================================== */
/**
 * Shell design tokens - header, menu, content.
 */
.app_frame {
	/* Іконки */
	--shell_icon: 18px;
	--shell_icon_sm: 15px;
	--shell_icon_box: 22px;

	/* Рядки / кнопки */
	--shell_row: 34px;
	--shell_row_lg: 38px;
	--shell_btn: 34px;
	--shell_btn_sm: 28px;

	/* Відступи - єдиний крок 10px */
	--shell_pad_x: 10px;
	--shell_pad_panel: 10px;
	--shell_pad_inset: 4px;
	--shell_gap_icon: 10px;
	--shell_gap_block: 10px;
	--shell_gap_nav: 3px;
	--shell_gap_stat: 8px;
	--shell_gap_tight: 2px;

	/* Типографіка */
	--shell_nav_text: 0.8125rem;
	--shell_text: var(--shell_nav_text);
	--shell_text_sm: 0.75rem;
	--shell_text_xs: 0.6875rem;
	--shell_weight: 500;
	--shell_weight_active: 600;
	--shell_weight_bold: 800;

	/* Форма */
	--shell_radius: 5px;
	--shell_radius_pill: 9999px;

	/* Layout */
	--sidebar-width: 240px;
	--sidebar-collapsed-width: 60px;
	--header-height: 40px;
	--shell-header-height: 40px;

	/* Z-index */
	--shell_z_header: 1030;
	--shell_z_backdrop: 1040;
	--shell_z_sidebar: 1045;
	--shell_z_drawer_backdrop: 10990;
	--shell_z_drawer: 11000;

	/* Вузька панель (collapsed) */
	--shell_pad_narrow: 6px;
}

@media (max-width: 991px) {
	.app_frame {
		--shell_row: 38px;
		--shell_btn: 36px;
	}
}

@media (max-width: 575px) {
	.app_frame {
		--shell_icon: 17px;
		--shell_icon_box: 24px;
		--shell_row: 40px;
		--shell_btn: 34px;
		--shell_gap_stat: 6px;
	}
}

/* Sidebar nav labels */
.side_nav_label,
.side_text,
.side_btn_text,
.side_shop_name,
.side_shop_label {
	font-size: var(--shell_nav_text);
	font-weight: var(--shell_weight);
	line-height: 1.25;
	letter-spacing: normal;
}

.side_link.link_active .side_text,
.side_shop_item.link_active .side_shop_label {
	font-weight: var(--shell_weight_active);
}

.side_btn_primary .side_btn_text {
	font-weight: var(--shell_weight_active);
}

/* Active state (header user link, nav items) */
.app_frame .link_active {
	font-weight: var(--shell_weight_active);
}


/* ================================================================== */
/* Variables / Theme - dashboard tokens */
/* Source: modules/dashboard/styles/design_tokens.css */
/* ================================================================== */
/**
 * Dashboard - додаткові токени (графіки).
 * Базові KPI-токени: stats_shared.css
 */
#dashboard.dash_page {
	--dash_chart_h: 360px;
	--dash-chart-label-h: 28px;
}

@media (max-width: 768px) {
	#dashboard.dash_page {
		--dash_chart_h: 280px;
		--dash-chart-label-h: 26px;
	}
}

@media (max-width: 480px) {
	#dashboard.dash_page {
		--dash_chart_h: 240px;
		--dash-chart-label-h: 24px;
	}
}


/* ================================================================== */
/* Variables / Theme - my_cash tokens */
/* Source: modules/my_cash/styles/design_tokens.css */
/* ================================================================== */
/**
 * My Cash - додаткові токени (якщо потрібні).
 * Базові KPI-токени: modules/dashboard/styles/stats_shared.css
 */


/* ================================================================== */
/* Legacy layers - default */
/* Source: design/style_default.css */
/* ================================================================== */
/* =========================================
   ISERVICE CRM - DEFAULT LAYOUT & BASE
   ========================================= */

body.logged-in {
	background: var(--bg-body);
}

/* --- Base & Typography --- */
html {
	box-sizing: border-box;
	font-size: 16px;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background-color: var(--bg-main);
	color: var(--text-main);
	font-family: var(--font-sans);
	margin: 0;
	line-height: 1.5;
	font-size: 0.9375rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography Standards */
h1,
.h1 {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: var(--text-main);
}

h2,
.h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	color: var(--text-main);
}

h3,
.h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
	color: var(--text-main);
}

h4,
.h4 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
}

p {
	margin: 0 0 1rem 0;
	font-size: 0.95rem;
}

small,
.text-small {
	font-size: 0.875rem;
}

.text-muted {
	color: var(--text-muted);
}

@media (max-width: 360px) {
	html {
		font-size: 14px;
	}

	h1,
	.h1 {
		font-size: 1.5rem;
	}

	h2,
	.h2 {
		font-size: 1.3rem;
	}

	h3,
	.h3 {
		font-size: 1.15rem;
	}
}

/* Layout shell - shell/design/ (system/shell/php/shell_frame.php) */


/* ================================================================== */
/* Legacy layers - modern */
/* Source: design/style_modern.css */
/* ================================================================== */
/* --- CRM Component System --- */


/* --- 5. Components: Cards (Unified) --- */
.card,
.dash-card {
	display: flex;
	flex-direction: column;
	padding: 15px;
	border-radius: var(--radius);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.card:hover,
.dash-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gap);
	margin-bottom: var(--gap);
}

/* Card Typography */
.card-head,
.dash-card-head {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	gap: 12px;
}

.card-title,
.dash-card h3 {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.card-body,
.dash-big-num {
	flex: 1;
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--text-main);
	line-height: 1;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	letter-spacing: -0.04em;
}

.dash-big-num small {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-muted);
}

.desc-small {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
	line-height: 1.5;
}

/* Icons */
.dash-icon {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dash-icon .material-icons {
	font-size: 22px;
}

/* Specific Card Variants */
.dash-card.revenue .dash-icon {
	background: var(--success-light);
	color: var(--success);
}

.dash-card.costs .dash-icon {
	background: var(--danger-light);
	color: var(--danger);
}

.dash-card.profit-main {
	background: var(--surface), 0.1), transparent);
	border-color: rgba(var(--primary-rgb), 0.2);
}

/* Trend Indicators */
.trend-indicator {
	padding: 4px 10px !important;
	font-size: 0.75rem !important;
	border-radius: 100px!important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}



input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-control {
	width: 100%;
	min-height: var(--ds-input-h, var(--form-height, 36px));
	height: var(--ds-input-h, var(--form-height, 36px));
	padding: 0 var(--form-pad-x, 12px);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius, var(--input-radius, 5px));
	color: var(--text-main);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	transition:
		border-color var(--form-state-transition, 200ms ease),
		background-color var(--form-state-transition, 200ms ease),
		outline-color var(--form-state-transition, 200ms ease);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

/* Mobile-specific input improvements */
@media (max-width: 768px) {

	input[type="text"],
	input[type="number"],
	input[type="date"],
	input[type="tel"],
	input[type="password"],
	input[type="email"],
	input[type="search"],
	input[type="url"],
	select,
	.form-control {
		font-size: 16px;
		/* Prevents zoom on iOS */
		min-height: var(--form-height-touch, 44px);
		height: var(--form-height-touch, 44px);
	}
}

textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

/* Select chevron: canonical styles in selects_core.css */

input:hover,
select:hover,
textarea:hover,
.form-control:hover {
	border-color: var(--form-hover-border, rgba(var(--primary-rgb), 0.3));
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
	border-color: var(--primary);
	background: var(--form-focus-bg, var(--input-focus-bg));
	outline: var(--form-focus-outline, 2px solid rgba(var(--primary-rgb), 0.22));
	outline-offset: 0;
	box-shadow: none;
	transform: none;
}

.form-group,
.form_item {
	margin-bottom: 20px;
	position: relative;
}

.form-group label,
.form_item label {
	display: block;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
	letter-spacing: 0.05em;
	transition: color 0.2s ease;
}

.form-group:focus-within label,
.form_item:focus-within label {
	color: var(--primary);
}

/* Validation States */
.is-valid {
	border-color: var(--success) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 15px center !important;
	background-size: 18px !important;
	padding-right: 45px !important;
}

.is-invalid {
	border-color: var(--danger) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 15px center !important;
	background-size: 18px !important;
	padding-right: 45px !important;
}

.is-warning {
	border-color: var(--warning) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 15px center !important;
	background-size: 18px !important;
	padding-right: 45px !important;
}

/* Custom Checkbox/Radio Polish */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	cursor: pointer;
	border: 2px solid var(--border-color);
	background: var(--bg-card);
	border-radius: 5px;
	position: relative;
	transition: all 0.2s ease;
	vertical-align: middle;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
	border-color: rgba(var(--primary-rgb), 0.5);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--primary);
	border-color: var(--primary);
}

input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 12px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}


/* Client Mini Box in Sidebar */
.client-mini-box {
	background: var(--bg-body);
	border-radius: var(--radius-sm);
	padding: 15px;
	margin-bottom: 15px;
	border: 1px solid var(--border-color);
}

.cmb-header {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-bottom: 15px;
}

.cmb-avatar {
	width: 48px;
	height: 48px;
	background: var(--surface), var(--primary-hover));
	color: var(--text-white);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.25rem;
	box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
}

.cmb-info {
	flex: 1;
}

.cmb-name {
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 0.15rem;
}

.cmb-name a {
	color: var(--text-main);
	text-decoration: none;
}

.cmb-name a:hover {
	color: var(--primary);
}

.cmb-source {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.cmb-source::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--primary);
	border-radius: 50%;
}

.cmb-contact-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--border-color);
	margin-top: 15px;
	padding-top: 15px;
	flex-wrap: wrap;
	gap: 10px;
}

.cmb-tel-link {
	font-weight: 800;
	color: var(--primary);
	font-size: 1.2rem;
	text-decoration: none;
	letter-spacing: -0.01em;
}

.cmb-tel-link:hover {
	text-decoration: underline;
}

.client-mini-box .c-actions {
	gap: 0.4rem;
}

.client-mini-box .c-btn {
	width: 32px;
	height: 32px;
	border-radius: 5px;
}

/* Device ID Sidebar Header */
.device-id-sidebar-header {
	background: var(--bg-card);
	padding: 15px;
	border-radius: var(--radius);
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--border-color);
}

.device-id-sidebar-header h1 {
	color: var(--sidebar-text-active) !important;
	margin: 0;
	font-size: 1.6rem;
}

.c-status-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.device-info-aside .chip {
	padding: 0.25rem 0.65rem;
	font-size: 0.7rem;
	border-radius: 5px;
}

/* Elite Device Profile (#device) */
#device {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.device-header {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 15px;
	color: var(--text-main);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-color);
}

.device-header::after {
	content: '';
	position: absolute;
	right: -50px;
	top: -50px;
	width: 200px;
	height: 200px;
	background: var(--primary);
	filter: blur(100px);
	opacity: 0.15;
}

.device-title-box h1 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	color: var(--text-white);
	z-index: 1;
	position: relative;
}

.device-main-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 15px;
	align-items: flex-start;
}

@media (max-width: 1024px) {
	.device-main-layout {
		grid-template-columns: 1fr;
	}
}

/* Sidebar Info Card */
.info-card {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 15px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

.info-item {
	display: flex;
	justify-content: space-between;
	padding: 0.65rem 0;
	border-bottom: 1px dashed var(--border);
	font-size: 0.85rem;
}

.info-item:last-child {
	border: none;
}

.info-item .label {
	color: var(--text-muted);
	font-weight: 500;
}

.info-item .value {
	font-weight: 700;
	color: var(--text-main);
	text-align: right;
}

/* Print Actions */
.print-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 30px;
}

.btn-print {
	width: 100%;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: var(--bg-card);
	border: 2px solid var(--border);
	border-radius: 5px;
	color: var(--text-main);
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s;
}

.btn-print:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
	transform: translateY(-2px);
}

.btn-print span {
	font-size: 1.4rem;
}

/* Status Controls */
.status-workflow {
	background: var(--bg-glass);
	backdrop-filter: blur(10px);
	padding: 15px;
	border-radius: var(--radius);
	margin-top: 15px;
	border: 1px solid var(--border-color);
}

.status-btns-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.status-btn {
	width: 100%;
	padding: 15px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-main);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-s1:hover {
	background: var(--s1);
	color: var(--text-white);
	border-color: var(--s1);
}

.btn-s2:hover {
	background: var(--s2);
	color: var(--text-white);
	border-color: var(--s2);
}

.btn-s3:hover {
	background: var(--s3);
	color: var(--text-white);
	border-color: var(--s3);
}

.btn-s4:hover {
	background: var(--s4);
	color: var(--text-white);
	border-color: var(--s4);
}

.btn-s5:hover {
	background: var(--s5);
	color: var(--text-white);
	border-color: var(--s5);
}

.btn-s6:hover {
	background: var(--s6);
	color: var(--text-white);
	border-color: var(--s6);
}

.btn-s7:hover {
	background: var(--s7);
	color: var(--text-white);
	border-color: var(--s7);
}

.status-btns-grid .btn-white-link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-radius: var(--radius-sm);
	background: var(--primary);
	color: var(--text-white);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	transition: all 0.2s;
}


.status-btns-grid .btn-white-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	filter: brightness(1.1);
}

/* Comments Section */
.comment-list-scroll {
	max-height: 500px;
	overflow-y: auto;
	padding-right: 15px;
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.comment-list-scroll::-webkit-scrollbar {
	width: 6px;
}

.comment-list-scroll::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 5px;
}

.comment-list-scroll::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 5px;
}

/* System Logs (Status History) */
.system-log-item {
	display: flex;
	gap: 15px;
	padding: 10px 0;
	border-left: 2px solid var(--border-color);
	margin-left: 15px;
	/* Indent to create timeline effect */
	padding-left: 20px;
	position: relative;
}

.system-log-item::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 15px;
	width: 10px;
	height: 10px;
	background: var(--border-color);
	border-radius: 50%;
	border: 2px solid var(--surface-elevated);
}

.system-log-item .sys-icon {
	width: 32px;
	height: 32px;
	background: var(--surface-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	flex-shrink: 0;
}

.system-log-item .sys-icon .material-icons {
	font-size: 16px;
}

.system-log-item .sys-content {
	flex: 1;
}

.system-log-item .sys-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-bottom: 4px;
}

.system-log-item .sys-author {
	font-weight: 700;
	color: var(--text-muted);
}

.system-log-item .sys-text {
	font-size: 0.85rem;
	color: var(--text-secondary);
	line-height: 1.4;
}

.system-log-item .sys-text b,
.system-log-item .sys-text strong {
	font-weight: 700;
	color: var(--primary);
}

/* Standard Comments */
.comment-item {
	background: var(--bg-body);
	padding: 15px;
	border-radius: var(--radius-sm);
	position: relative;
	border-left: 4px solid var(--text-muted);
}

.comment-item.recent {
	border-left-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.04);
}

.comment-item .meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
	padding-right: 2rem;
}

.comment-item .author {
	font-weight: 800;
	color: var(--text-main);
}

.comment-item .date {
	color: var(--text-muted);
}

.comment-item .text {
	line-height: 1.7;
	color: var(--text-main);
}

/* Compact & Cool Delete Button */
.comment-delete-wrap {
	position: absolute;
	top: 1rem;
	right: 1rem;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.comment-item:hover .comment-delete-wrap {
	opacity: 1;
	transform: scale(1);
}

.btn-delete-comment {
	width: 32px;
	height: 32px;
	border-radius: 5px;
	border: 1px solid var(--border);
	background: var(--text-white);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
}

.btn-delete-comment:hover {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--s3-rgb), 0.2);
	box-shadow: 0 4px 6px -1px rgba(var(--s3-rgb), 0.1);
}

.btn-delete-comment .material-icons {
	font-size: 1.1rem;
}

/* Section Headers with Actions */
.section-title-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.section-title {
	font-size: 1.25rem;
	font-weight: 800;
	margin-bottom: 0 !important;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-main);
}

.btn-add-section {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: var(--primary-light);
	color: var(--primary);
	border-radius: 5px;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	transition: all 0.2s;
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.btn-add-section:hover {
	background: var(--primary);
	color: var(--text-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.btn-add-section span {
	font-size: 1.1rem;
}

/* Base Layout redundant block removed */

.location-selector-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	margin-top: 10px;
	padding: 0;
}

.location-selector-inline li a {
	font-size: 0.85rem;
	color: var(--text-muted);
	text-decoration: none;
	font-weight: 600;
	transition: var(--transition);
	border-bottom: 2px solid transparent;
	padding-bottom: 0.15rem;
	position: relative;
	display: inline-block;
}

.location-selector-inline li.active a {
	color: var(--primary);
	border-color: var(--primary);
	font-weight: 800;
}

.location-selector-inline li a:hover {
	color: var(--text-main);
}

/* --- 4. Status Filter Bar (Compact & Minimal) --- */
/* --- 4. Unified Header System (Pixel-Perfect Alignment) --- */
.dash-header,
.device-header-row,
.unified-page-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 20px !important;
	margin-top: 0 !important;
	margin-bottom: 30px !important;
	/* Unified 30px gap to content */
	width: 100% !important;
	min-height: 42px !important;
	padding: 0 !important;
}

.dash-header h1,
.device-header-row h1,
.unified-page-title {
	font-size: 1.6rem !important;
	font-weight: 950 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.0 !important;
	/* Strict baseline control */
	color: var(--text-main) !important;
	white-space: nowrap !important;
	letter-spacing: -0.02em !important;
	display: flex !important;
	align-items: center !important;
}

#status {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	list-style: none !important;
	padding: 4px 6px !important;
	margin: 0 !important;
	background: var(--bg-card) !important;
	border-radius: 100px!important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--shadow-sm) !important;
	min-width: 280px !important;
	overflow-x: hidden !important;
	/* Changed from auto to hidden for strict fill */
	flex-wrap: nowrap !important;
	scrollbar-width: none;
	/* Hide scrollbar for cleaner look */
	transition: width 0.3s ease;
}

@media (max-width: 768px) {
	.device-header-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 15px !important;
	}

	#status {
		width: 100% !important;
		min-width: 0 !important;
	}

	#status li.active {
		flex: 1 !important;
		/* Stretch only active label on mobile */
	}
}

#status::-webkit-scrollbar {
	display: none;
}

#status li {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
}

@media (max-width: 768px) {
	#status li.active {
		flex: 1 !important;
		/* Stretch only active label on mobile */
	}
}

#status li a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 26px;
	height: 26px;
	border-radius: 50%!important;
	text-decoration: none !important;
	font-weight: 800 !important;
	font-size: 0.7rem !important;
	color: var(--text-muted) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	background: transparent !important;
	border: none !important;
}

#status li a:hover {
	background: var(--border-subtle) !important;
	color: var(--text-main) !important;
}

#status li.active a {
	width: auto !important;
	flex: 1 !important;
	/* Allow stretch */
	padding: 0 12px !important;
	border-radius: 100px!important;
	color: var(--text-white) !important;
	font-size: 0.7rem !important;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	justify-content: center !important;
}

#status li a::before,
#status li a::after {
	display: none !important;
}

/* Status Specific Colors (Both active and inactive circles) */
#status li.s0 a {
	background: var(--text-muted) !important;
	color: var(--text-white) !important;
}

#status li.s1 a {
	background: var(--s1) !important;
	color: var(--text-white) !important;
}

#status li.s2 a {
	background: var(--s2) !important;
	color: var(--text-white) !important;
}

#status li.s3 a {
	background: var(--s3) !important;
	color: var(--text-white) !important;
}

#status li.s4 a {
	background: var(--s4) !important;
	color: var(--text-white) !important;
}

#status li.s5 a {
	background: var(--s5) !important;
	color: var(--text-white) !important;
}

#status li.s6 a {
	background: var(--s6) !important;
	color: var(--text-white) !important;
}

#status li.s7 a {
	background: var(--s7) !important;
	color: var(--text-white) !important;
}

/* Inactive Hover Scale */
#status li:not(.active) a:hover {
	transform: scale(1.15);
	box-shadow: 0 3px 8px rgba(var(--text-black-rgb), 0.15) !important;
	opacity: 0.9;
}

/* Sidebar Status Indicators */
.sidebar-status-list li.s1 a {
	background: var(--s1);
}

.sidebar-status-list li.s2 a {
	background: var(--s2);
}

.sidebar-status-list li.s3 a {
	background: var(--s3);
}

.sidebar-status-list li.s4 a {
	background: var(--s4);
}

.sidebar-status-list li.s5 a {
	background: var(--s5);
}

.sidebar-status-list li.s6 a {
	background: var(--s6);
}

.sidebar-status-list li.s7 a {
	background: var(--s7);
}

.sidebar-status-list li.s0 a {
	background: var(--text-muted);
}

/* Status Dot Colors */
.status-dot {
	background: var(--text-muted);
}

.status-dot.s1 {
	background: var(--s1);
}

.status-dot.s2 {
	background: var(--s2);
}

.status-dot.s3 {
	background: var(--s3);
}

.status-dot.s4 {
	background: var(--s4);
}

.status-dot.s5 {
	background: var(--s5);
}

.status-dot.s6 {
	background: var(--s6);
}

.status-dot.s7 {
	background: var(--s7);
}

/* Sidebar Status List Container */
.sidebar-status-list {
	display: flex;
	gap: 0.35rem;
	list-style: none;
	margin-bottom: 1.5rem;
	padding: 0;
	flex-wrap: wrap;
}

.sidebar-status-list li a {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	display: block;
	border: 1px solid var(--overlay-glass);
	transition: all 0.2s;
}

/* Sidebar Status List colors */
.sidebar-status-list li.s1 a {
	background: var(--s1);
}

.sidebar-status-list li.s2 a {
	background: var(--s2);
}

.sidebar-status-list li.s3 a {
	background: var(--s3);
}

.sidebar-status-list li.s4 a {
	background: var(--s4);
}

.sidebar-status-list li.s5 a {
	background: var(--s5);
}

.sidebar-status-list li.s6 a {
	background: var(--s6);
}

.sidebar-status-list li.s7 a {
	background: var(--s7);
}

.sidebar-status-list li.s0 a {
	background: var(--text-muted);
}

.sidebar-status-list li.active a {
	transform: scale(1.2);
	border: 2px solid var(--text-white);
	box-shadow: 0 0 10px rgba(var(--text-black-rgb), 0.5);
}

.sidebar-status-list li a:hover {
	transform: scale(1.1);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
	display: none;
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 1001;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	color: var(--text-main);
	cursor: pointer;
	box-shadow: var(--shadow-md);
}

/* Common Components */
.card {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 15px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-color);
	margin-bottom: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-main);
	margin-bottom: 15px;
	font-weight: 700;
}

.b {
	font-weight: 700;
}

/* --- PREMIUM BUTTON SYSTEM --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 5px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	gap: 8px;
	text-decoration: none;
	height: 48px;
	position: relative;
	overflow: hidden;
}

.btn:active {
	transform: scale(0.96) !important;
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--surface), transparent);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.btn:hover::before {
	opacity: 1;
}

.btn-primary {
	background: var(--primary-gradient);
	color: var(--text-white);
	box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
	background: var(--primary-gradient-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-primary-lg);
}

/* --- KANBAN DRAG-AND-DROP STYLES --- */
.kanban-mode .device-row {
	cursor: grab;
	transition: all var(--transition-base);
}

.kanban-mode .device-row:active {
	cursor: grabbing;
}

.kanban-mode .device-row.dragging {
	opacity: 0.5;
	transform: scale(0.95);
	box-shadow: var(--shadow-xl);
}

.kanban-col.drag-over {
	background: rgba(var(--primary-rgb), 0.05);
	border: 2px dashed var(--primary);
	border-radius: var(--radius);
}

.device-row.updating {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}

.device-row.updating::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.6s linear infinite;
}

.device-row.status-updated {
	animation: statusUpdateSuccess 0.5s ease;
}

.device-row.status-error {
	animation: statusUpdateError 0.5s ease;
	border: 2px solid var(--danger);
}

@keyframes statusUpdateSuccess {
	0% {
		background: rgba(var(--success-rgb), 0.2);
	}

	100% {
		background: transparent;
	}
}

@keyframes statusUpdateError {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-10px);
	}

	75% {
		transform: translateX(10px);
	}
}

/* List Mode Styles */
.list-mode .device_list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.list-mode .kanban-col {
	width: 100%;
}

/* Grid & Utilities */
.col {
	display: grid;
	gap: 15px;
}

.xs1 {
	grid-template-columns: 1fr;
}

.xs2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Gaps */
.xs-cg1 {
	grid-column-gap: 15px;
}

.xs-cg2 {
	grid-column-gap: 30px;
}

.s-cg1 {
	grid-column-gap: 15px;
}

.s-cg2 {
	grid-column-gap: 30px;
}

.m-cg1 {
	grid-column-gap: 15px;
}

.m-cg2 {
	grid-column-gap: 30px;
}

.l-cg1 {
	grid-column-gap: 15px;
}

.l-cg2 {
	grid-column-gap: 30px;
}

/* Alignments */
.it {
	align-items: flex-start;
}

.ic {
	align-items: center;
}

.ib {
	align-items: flex-end;
}

@media (min-width: 640px) {
	.s1 {
		grid-template-columns: 1fr;
	}

	.s2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.s3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.l1 {
		grid-template-columns: 1fr;
	}

	.l2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.l3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.xl4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1280px) {
	.xxl5 {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Spacing Utilities */
[class*="pt-"] {
	padding-top: 1rem;
}

.pt9 {
	padding-top: 30px !important;
}

.pt10 {
	padding-top: 30px !important;
}

.pb9 {
	padding-bottom: 30px !important;
}

.mb9 {
	margin-bottom: 30px !important;
}

.mb12 {
	margin-bottom: 30px !important;
}

.mt12 {
	margin-top: 30px !important;
}


/* Device Group Headers */
.device-group-header {
	grid-column: 1 / -1;
	margin: 2.5rem 0 1.25rem 0;
	padding: 1rem 1.5rem;
	background: var(--bg-card);
	border-radius: 5px;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 1rem;
	font-weight: 800;
	color: var(--text-main);
	box-shadow: var(--shadow-sm);
}

.device-group-header::before {
	content: '';
	width: 4px;
	height: 1.5rem;
	background: var(--primary);
	border-radius: 5px;
}

/* Status-based Group Header Colors */
.device-group-header.status-s1::before {
	background: var(--status-new);
}

.device-group-header.status-s2::before {
	background: var(--status-waiting);
}

.device-group-header.status-s3::before {
	background: var(--status-repair);
}

.device-group-header.status-s4::before {
	background: var(--status-ready);
}

.device-group-header.status-s5::before {
	background: var(--status-declined);
}

.device-group-header.status-s6::before {
	background: var(--status-issued);
}

.device-group-header.status-s7::before {
	background: var(--status-archive);
}

.device-group-header span {
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 600;
	background: var(--bg-main);
	padding: 0.2rem 0.6rem;
	border-radius: 5px;
	margin-left: auto;
}

/* Unified List Architecture */
.device_list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	padding: 0;
}

/* Client Date */
.c-date {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted);
	white-space: nowrap;
}

/* Client Actions - Force Single Line */
.c-actions {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

.c-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 800;
	font-size: 0.85rem;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.c-btn .material-icons {
	font-size: 1rem;
}

.c-btn.call {
	background: var(--success);
	color: var(--text-white);
}

/* --- Clients List System (Compact Table-like Layout) --- */
.client_list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	overflow: hidden;
}

.client-row {
	background: transparent;
	border-bottom: 1px solid var(--border-subtle);
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	display: grid;
	grid-template-columns: 50px 2fr 1.5fr 1fr auto;
	align-items: center;
	gap: 15px;
	padding: 10px 15px;
	cursor: pointer;
}

.client-row:last-child {
	border-bottom: none;
}

.client-row:hover {
	background: rgba(var(--primary-rgb), 0.03);
}

.c-name {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--text-main);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.c-name:hover {
	text-decoration: underline;
}

.c-phone {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 600;
}

.c-date-text {
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 500;
}

.c-orders {
	padding: 4px 10px;
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--bg-body);
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--border-color);
}

.c-orders.active {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.c-orders.zero {
	opacity: 0.4;
	font-weight: 400;
}

.c-orders .l-text {
	font-weight: 400;
	opacity: 0.7;
}

.c-date-text {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 500;
}

.c-col-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	justify-content: flex-end;
}

.c-btn {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-btn .material-icons {
	font-size: 20px;
}

.c-btn.call {
	background: var(--success-light);
	color: var(--success);
}

.c-btn.viber {
	background: var(--viber-light);
	color: var(--viber);
}

.c-btn.telegram {
	background: var(--telegram-light);
	color: var(--telegram);
}

.c-btn:hover {
	transform: scale(1.1);
	filter: brightness(0.95);
}

/* Responsiveness */
@media (max-width: 900px) {
	.client-row {
		grid-template-columns: 50px 1.5fr 1fr auto;
	}

	.c-col-date,
	.c-date-text,
	.c-orders .l-text {
		display: none;
	}
}

@media (max-width: 600px) {
	.client-row {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			"avatar name"
			"avatar phone"
			"avatar date"
			"avatar actions";
		gap: 6px 15px;
		padding: 15px;
	}

	.c-col-avatar {
		grid-area: avatar;
		align-self: start;
		padding-top: 5px;
	}

	.c-col-name {
		grid-area: name;
	}

	.c-col-phone {
		grid-area: phone;
	}

	.c-col-date {
		grid-area: date;
		display: block;
		/* Reactivate on mobile */
	}

	.c-date-text {
		display: block;
	}

	.c-col-actions {
		grid-area: actions;
		justify-content: flex-start;
		margin-top: 8px;
	}

	.c-avatar {
		width: 44px;
		height: 44px;
		background: var(--surface), var(--primary-hover));
		color: var(--text-white);
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 800;
		font-size: 1.1rem;
		box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
	}

	.c-name {
		font-size: 1.1rem;
	}
}

/* Dark Theme Adjustments */
[data-theme-resolved='dark'] .client_list {
	background: var(--bg-card);
	border-color: rgba(255, 255, 255, 0.08);
}

[data-theme-resolved='dark'] .client-row:hover {
	background: rgba(var(--primary-rgb), 0.1);
}

[data-theme-resolved='dark'] .c-orders {
	background: rgba(255, 255, 255, 0.05);
}


/* Order Note Badge - Legacy (can be removed) */
.order-note-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--warning);
	color: var(--text-white);
	border-radius: 50%;
	cursor: help;
	transition: var(--transition);
}

.order-note-badge:hover {
	background: var(--danger);
	transform: scale(1.1);
}

.order-note-badge .material-icons {
	font-size: 0.95rem;
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--border);
	margin-bottom: 0.25rem;
}

.status-dot.warning {
	background: var(--danger);
	box-shadow: 0 0 0 2px rgba(var(--s3-rgb), 0.2);
}

.d-user {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 0.1rem;
}

.d-arrow-col {
	color: var(--border);
	transition: color 0.2s;
}


/* Group Headers */
.device-group-header {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 900;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	background: var(--bg-card);
	border-radius: 5px;
	border: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 10;
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-sm);
}

.device-group-header::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 5px;
}

.device-group-header.s1 {
	background: var(--info);
	color: var(--text-white);
	border-color: var(--info);
}

.device-group-header.s2 {
	background: var(--warning);
	color: var(--text-white);
	border-color: var(--warning);
}

.device-group-header.s3 {
	background: var(--danger);
	color: var(--text-white);
	border-color: var(--danger);
}

.device-group-header.s4 {
	background: var(--success);
	color: var(--text-white);
	border-color: var(--success);
}

.device-group-header.s5 {
	background: var(--purple);
	color: var(--text-white);
	border-color: var(--purple);
}

.device-group-header.s6 {
	background: var(--pink);
	color: var(--text-white);
	border-color: var(--pink);
}

.device-group-header.s7 {
	background: var(--s7);
	color: var(--text-white);
	border-color: var(--s7);
}

.device-group-header::before {
	display: none;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
	.device-link {
		gap: 0.75rem;
		padding: 0.6rem 0.75rem;
	}

	.d-client-col,
	.d-master-col {
		padding-left: 0.75rem;
	}

	.d-arrow-col {
		display: none;
	}
}


/* Client List Inner Elements */
.c-main {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.c-avatar {
	width: 36px;
	height: 36px;
	background: var(--primary);
	color: var(--text-white);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
}

.c-name a {
	font-weight: 700;
	color: var(--text-main);
	text-decoration: none;
	font-size: 0.95rem;
}

.c-source {
	font-size: 0.7rem;
	color: var(--text-muted);
	background: var(--bg-main);
	padding: 0.1rem 0.4rem;
	border-radius: 5px;
}

.c-contact {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.c-tel {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--text-main);
	min-width: 130px;
}

.c-actions {
	display: flex;
	gap: 0.4rem;
}

.c-btn {
	width: 28px;
	height: 28px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 800;
	transition: all 0.2s;
}

.c-btn span {
	font-size: 1rem;
}

.c-btn.call {
	background: var(--success-light);
	color: var(--success);
}


/* Forms Modernization - Consolidated with Section 2 Base Styles */
.form_item.button {
	margin-top: 5px;
}

.form_item.button input[type="submit"],
.btn-block {
	width: 100% !important;
}

/* Cash Chart Styling */
.fdg-chart-container {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

.fdg-chart {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	height: 300px;
	margin-bottom: 30px;
	overflow-x: auto;
	padding-bottom: 1rem;
}

.fdg-bar {
	width: 12px;
	border-radius: 5px;
}

.fdg-bar-total {
	background: var(--primary);
	opacity: 0.3;
}

.fdg-bar-expense {
	background: var(--danger);
	opacity: 0.3;
}

.fdg-bar-net {
	background: var(--success);
}

.dkjvnskjdf {
	background: var(--bg-card);
	border-radius: 5px;
	border: 1px solid var(--border-color);
	overflow: hidden;
	margin-top: 15px;
	/* Normalized */
}

.dkjvnskjdf li {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
	padding: 8px 15px;
	/* Compact */
	border-bottom: 1px solid var(--border-color);
	font-size: 0.8rem;
	/* Reduced for detail */
}

.dkjvnskjdf li:first-child {
	background: var(--bg-main);
	font-weight: 700;
}

.dkjvnskjdf .summ {
	text-align: right;
}

.dkjvnskjdf .my {
	color: var(--success);
	font-weight: 700;
}

.dkjvnskjdf .det {
	color: var(--danger);
}

/* Unified Typography System */
.xs-t1 {
	font-size: 0.75rem;
}

.xs-t2 {
	font-size: 0.85rem;
}

.xs-t3 {
	font-size: 0.95rem;
}

.xs-t4 {
	font-size: 1.15rem;
}

/* Responsive Heading Classes Map */
.xh1,
.xs-h1,
.s-h1,
.xl-h1 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
}

.xh2,
.xs-h2,
.s-h2,
.xl-h2 {
	font-size: 1.5rem !important;
	font-weight: 800 !important;
}

.xh3,
.xs-h3,
.s-h3,
.xl-h3 {
	font-size: 1.75rem !important;
	font-weight: 800 !important;
}

.xh4,
.xs-h4,
.s-h4,
.xl-h4 {
	font-size: 2rem !important;
	font-weight: 800 !important;
}

.xh5,
.xs-h5,
.s-h5,
.xl-h5 {
	font-size: 2.25rem !important;
	font-weight: 800 !important;
}

.xh6,
.xs-h6,
.s-h6,
.xl-h6 {
	font-size: 2.5rem !important;
	font-weight: 800 !important;
}

.xh7,
.xs-h7,
.xl-h7 {
	font-size: 2.75rem !important;
	font-weight: 800 !important;
}

/* Text Utility */
.b {
	font-weight: 800;
}

.text-muted {
	color: var(--text-muted);
}

.text-main {
	color: var(--text-main);
}

.text-success {
	color: var(--success);
}

.text-warning {
	color: var(--warning);
}

.text-danger {
	color: var(--danger);
}

@media (max-width: 768px) {

	.xh4,
	.xs-h4,
	.xh5,
	.xs-h5,
	.xh6,
	.xs-h6,
	.xh7,
	.xs-h7 {
		font-size: 1.5rem !important;
	}
}

/* Visibility Utilities */
@media (max-width: 640px) {
	.mob-h {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.tab-h {
		display: none !important;
	}
}

/* Icons compatibility */
icon,
.material-icons {
	font-family: 'Material Icons';
	vertical-align: middle;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
}

/* Modals: system/dialog/design/dialog_core.css - legacy .modal-overlay видалено */

/* Modern Segmented Control (Location Switches) */
.location_list {
	display: inline-flex;
	background: var(--bg-card);
	padding: 0.4rem;
	border-radius: 5px;
	border: 1px solid var(--border);
	list-style: none;
	margin-bottom: 30px;
	gap: 0.25rem;
	box-shadow: var(--shadow-sm);
}

.location_list li {
	display: flex;
}

.location_list li a {
	padding: 0.6rem 1.25rem;
	border-radius: 5px;
	text-decoration: none;
	color: var(--text-muted);
	font-weight: 700;
	font-size: 0.85rem;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.location_list li:hover a {
	color: var(--text-main);
	background: var(--bg-main);
}

.location_list li.active a {
	background: var(--primary);
	color: white;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

/* Premium Pagination */
.pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 6px !important;
	list-style: none !important;
	margin: 30px auto !important;
	/* Unified 30px gap top and bottom */
	padding: 5px !important;
	/* Compact padding */
	background: var(--bg-card) !important;
	width: fit-content !important;
	border-radius: 100px!important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--shadow-sm) !important;
}

.pagination li {
	display: flex !important;
}

.pagination li a {
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 5px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50%!important;
	text-decoration: none !important;
	color: var(--text-muted) !important;
	font-weight: 800 !important;
	font-size: 0.8rem !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	background: transparent;
}

.pagination li:hover a {
	background: rgba(var(--primary-rgb), 0.1) !important;
	color: var(--primary) !important;
	transform: scale(1.1);
}

.pagination li.active a {
	background: var(--primary) !important;
	color: white !important;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4) !important;
	transform: scale(1.05);
}

.pagination li.disabled a {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Typography Unified */
h1,
h2,
h3,
h4,
.xh1,
.xh2,
.xh3,
.xh4 {
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.b,
strong {
	font-weight: 700;
}

/* Fix for existing container classes */
.container.xlr {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Login specific styling adjustment */
#login {
	max-width: 400px;
	margin: 4rem auto;
	padding: 2.5rem;
	background: var(--bg-card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}

#login h1 {
	text-align: center;
	margin-bottom: 2rem;
	color: var(--primary);
}

/* Device Page (#device) */
#device {
	display: block;
}

.device-main-layout {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 350px 1fr;
	align-items: flex-start;
}

@media (max-width: 1024px) {
	.device-main-layout {
		grid-template-columns: 1fr;
	}
}

.device-info-aside {
	position: relative;
}

#device .info {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#device .info>* {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.875rem;
}

#device .info span:first-child {
	color: var(--text-muted);
	font-weight: 500;
}

#device .info span:last-child {
	font-weight: 600;
	text-align: right;
}

#device .tel {
	flex-direction: column;
	gap: 0.5rem;
}

#device .tel ul {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin-top: 0.5rem;
}

#device .tel li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 5px;
	background: var(--bg-main);
	color: var(--text-main);
	text-decoration: none;
	transition: all 0.2s;
}

#device .tel li.call a {
	width: auto;
	padding: 0 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	background: var(--success);
	color: white;
}

#device .tel li.viber a {
	color: var(--viber);
}

#device .tel li.telegram a {
	color: var(--telegram);
}

#device main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Price List in Details */
.price_list {
	list-style: none;
	margin-bottom: 1.5rem;
}

.price_list li {
	padding: 1rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 5px;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price_list .summ {
	font-weight: 700;
	color: var(--primary);
}

/* Comments */
.comment_list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.comment_list li {
	padding: 1.25rem;
	background: var(--bg-main);
	border-radius: 5px;
	position: relative;
}

.comment_list .author {
	font-weight: 700;
	font-size: 0.8rem;
	margin-top: 0.5rem;
	color: var(--primary);
}

.comment_list .date {
	font-size: 0.7rem;
	color: var(--text-muted);
}

/* Soft Glass Cushion Admin Dock (#admin_panel) */
#admin_panel {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5000;
	transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 1 !important;
	/* Constant visibility */
}

#admin_panel .container {
	background: rgba(255, 255, 255, 0.4);
	/* Matte Light Glass */
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	padding: 12px 20px;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow:
		0 15px 35px rgba(0, 0, 0, 0.1),
		inset 0 0 15px rgba(255, 255, 255, 0.2);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Ultra-Premium 3D Morphing Admin Dock (#admin_panel) */
#admin_panel a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	/* Initial state: Circle */
	background: var(--surface) !important;
	color: var(--border-light) !important;
	/* Tinted White Icon */
	text-decoration: none;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow:
		0 8px 16px rgba(0, 0, 0, 0.3),
		inset 0 2px 3px rgba(255, 255, 255, 0.15),
		inset 0 -3px 6px rgba(0, 0, 0, 0.4);
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.3);
}

[data-theme-resolved='dark'] #admin_panel .container {
	background: rgba(0, 0, 0, 0.4);
	border-color: rgba(255, 255, 255, 0.15);
}

[data-theme-resolved='dark'] #admin_panel a {
	background: var(--surface), #e6ecf2) !important;
	color: var(--text-secondary) !important;
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.2),
		inset 0 2px 4px rgba(255, 255, 255, 1),
		inset 0 -4px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.8);
}

#admin_panel ul {
	display: flex;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
}

#admin_panel icon {
	font-size: 1.6rem;
	transition: all 0.3s ease;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
	/* Icon depth */
}

/* Morphing Effect on Hover */
#admin_panel a:hover {
	transform: scale(1.1) translateY(-8px);
	border-radius: 35% 65% 65% 35% / 49% 51% 49% 51%;
	/* Organic blob morph */
	box-shadow:
		0 15px 30px rgba(0, 0, 0, 0.25),
		inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

#admin_panel a:hover icon {
	transform: scale(1.1);
	color: inherit;
}

/* Deep press effect */
#admin_panel a:active {
	transform: scale(0.85) translateY(2px);
	border-radius: 50%;
	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.2),
		inset 0 4px 10px rgba(0, 0, 0, 0.4);
	transition: all 0.1s ease;
}

/* Unique Icon Tints for Depth */
#admin_panel a[href*="device"] icon {
	color: var(--primary) !important;
	filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.4));
}

#admin_panel a[href*="client"] icon {
	color: var(--success) !important;
	filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.4));
}

#admin_panel a.nav-settings icon {
	color: var(--warning) !important;
	filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.4));
}

#admin_panel a.logout icon {
	color: var(--danger) !important;
	filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.4));
}

@media (min-width: 992px) {
	#admin_panel {
		left: auto;
		right: 40px;
		bottom: 40px;
		transform: none;
	}
}

@media (max-width: 768px) {
	#admin_panel {
		bottom: 20px;
	}

	#admin_panel .container {
		padding: 8px 14px;
	}

	#admin_panel a {
		width: 44px;
		height: 44px;
	}
}

/* Tooltip Labels */
#admin_panel a::after {
	content: attr(title);
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--gray-800);
	color: var(--surface-elevated);
	padding: 6px 14px;
	border-radius: 5px;
	font-size: 0.8rem;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#admin_panel a:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Dashboard (Settings) */
.dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin-top: 2rem;
}

.dashboard li a {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem;
	background: var(--bg-card);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	transition: all 0.2s;
	text-decoration: none;
	color: var(--text-main);
}

.dashboard li a:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--primary);
}

.dashboard li a icon {
	font-size: 2.5rem;
	color: var(--primary);
}

.dashboard .title {
	color: var(--text-main);
	margin-bottom: 0.25rem;
}

.dashboard .desc {
	color: var(--text-muted);
}

/* Content Header refinement */
.content-header {
	background: var(--bg-card);
	padding: 1.25rem 2rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
	margin-bottom: 30px !important;
}

/* Messages & Alerts (msg from PHP) */
.msg-ok,
.msg-error {
	padding: 1rem 1.5rem;
	border-radius: 5px;
	margin-bottom: 1.5rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.msg-ok {
	background: var(--success-light);
	color: var(--success);
	border: 1px solid rgba(var(--s6-rgb), 0.2);
}

.msg-error {
	background: var(--danger-light);
	color: var(--danger);
	border: 1px solid rgba(var(--s3-rgb), 0.2);
}

/* Button Refinement */
.btn {
	white-space: nowrap;
	outline: none;
}

.btn-primary {
	background: var(--surface), var(--primary-hover));
}

/* Standard Table Styling (for dashboard-like lists) */
.data-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--bg-card);
	border-radius: 5px;
	border: 1px solid var(--border-color);
	overflow: hidden;
}

.data-table th {
	padding: 8px 15px;
	text-align: left;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-color);
}

.data-table td {
	padding: 10px 15px;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
	font-size: 0.85rem;
	color: var(--text-main);
}

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

.data-table tr:hover td {
	background: rgba(var(--s2-rgb), 0.02);
}

/* Blocked / Access Denied Page */
#blocked {
	text-align: center;
	max-width: 700px;
	margin: 5rem auto;
	padding: 3rem;
	background: var(--bg-card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}

#blocked h1 {
	color: var(--danger);
	margin-bottom: 1.5rem;
}

#blocked p {
	color: var(--text-muted);
	line-height: 1.8;
}

/* Global Transitions & Micro-interactions */
a,
button,
.btn,
.nav-link,
.card,
li {
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glassmorphism for specific elements if needed */
.glass {
	background: rgba(var(--text-white-rgb), 0.7) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

[data-theme-resolved='dark'] .glass {
	background: rgba(var(--text-black-rgb), 0.7) !important;
}

/* Elite Client Profile (#client) */
#client {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.client-header-box {
	background: var(--surface) 0%, var(--navy-dark) 100%);
	border-radius: 5px;
	padding: 3rem;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.client-header-box::after {
	content: '';
	position: absolute;
	right: -50px;
	top: -50px;
	width: 200px;
	height: 200px;
	background: var(--primary);
	filter: blur(100px);
	opacity: 0.2;
}

.client-header-info {
	display: flex;
	align-items: center;
	gap: 2rem;
	z-index: 1;
}

.client-big-avatar {
	width: 100px;
	height: 100px;
	background: var(--primary);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: 800;
	box-shadow: 0 10px 25px rgba(var(--s2-rgb), 0.4);
}

.client-header-text h1 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	color: white;
}

.client-header-text .c-status-tags {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
	align-items: center;
}

.client-header-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	z-index: 1;
}

.client-quick-actions {
	display: flex;
	gap: 0.75rem;
}

.client-quick-actions a {
	padding: 0.75rem 1.5rem;
	border-radius: 5px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
	transition: all 0.2s;
}

.client-quick-actions .q-call {
	background: var(--success);
	color: white;
}

.client-quick-actions .q-viber {
	background: var(--viber);
	color: white;
}

.client-quick-actions .q-telegram {
	background: var(--telegram);
	color: white;
}

.client-quick-actions a:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(var(--text-black-rgb), 0.3);
}

/* Stats Row */
.client-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}

.stat-card {
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.stat-card .label {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stat-card .value {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--text-main);
}

.stat-card .icon {
	color: var(--primary);
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
}

/* Content sections */
.client-content-layout {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 2.5rem;
}

@media (max-width: 1100px) {
	.client-content-layout {
		grid-template-columns: 1fr;
	}

	.client-header-box {
		flex-direction: column;
		text-align: center;
		gap: 2rem;
	}

	.client-header-info {
		flex-direction: column;
	}
}

.client-main-area {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.client-info-aside .card-title {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.client-details-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.client-details-list .item {
	display: flex;
	justify-content: space-between;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--border);
	font-size: 0.9rem;
}

.client-details-list .item .label {
	color: var(--text-muted);
}

.client-details-list .item .value {
	font-weight: 700;
}

/* Tags & Chips */
.tags {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	flex-wrap: wrap;
}

.tags li,
.chip {
	padding: 0.35rem 0.85rem;
	background: var(--overlay-glass);
	color: var(--text-white);
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 700;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(var(--text-white-rgb), 0.2);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.chip.danger {
	background: rgba(var(--s3-rgb), 0.2);
	color: var(--s3);
	border-color: rgba(var(--s3-rgb), 0.3);
}

/* Light mode tags inside cards */
.card .tags li {
	background: var(--bg-main);
	color: var(--text-muted);
	border: 1px solid var(--border);
}

.link {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
	font-size: 0.875rem;
}

/* --- 6. DASHBOARD ANALYTICS (Refined & Fixed) --- */
/* Dashboard Analytics Grid */

/* Smart wrapping disabled as requested to keep on one level */

.dash-header:first-child,
section:first-child .dash-header {
	margin-top: 0;
	/* No huge gap at the very top */
}

.dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 15px;
	/* Perfect 15px symmetry for both directions */
	margin-bottom: 15px;
	/* Unified 15px gap below the grid */
}

.dash-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: 15px;
	/* Gold Standard Padding */
	display: flex;
	flex-direction: column;
	min-height: 110px;
	/* Even more compact */
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	will-change: transform;
	position: relative;
	overflow: hidden;
}

.dash-card:hover {
	border-color: var(--primary);
	background: var(--warning-light);
	box-shadow: 0 10px 25px -5px var(--overlay-bg);
}

.dash-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
	/* Minimal gap between header and number */
}

.dash-card h3 {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin: 0;
}

.dash-icon {
	width: 32px;
	height: 32px;
	background: rgba(var(--s2-rgb), 0.1);
	color: var(--primary);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dash-icon .material-icons {
	font-size: 18px;
}

.dash-big-num {
	font-size: 1.75rem;
	/* Reduced for better proportions */
	font-weight: 800;
	color: var(--text-main);
	display: flex;
	align-items: baseline;
	gap: 8px;
	line-height: 1;
	margin: 0 0 auto 0;
	/* Removed top margin for maximum compactness */
}

.dash-big-num small {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 500;
}

.trend-indicator {
	font-size: 0.6rem !important;
	padding: 2px 6px !important;
	border-radius: 5px!important;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	margin-left: 6px;
	vertical-align: middle;
	line-height: normal;
}

.trend-indicator .material-icons {
	font-size: 10px !important;
	margin-right: 1px;
}

.desc-small {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin: 12px 0 0 0;
	line-height: 1.4;
	padding-top: 10px;
	border-top: 1px dashed var(--border-color);
}

/* Financial Tables - Dashboard Specific */
.fin-table-container {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 15px;
	/* Normalized to 15px */
}

@media (max-width: 640px) {
	.dash-grid {
		grid-template-columns: 1fr;
	}
}

/* MY CASH PAGE */
#my_cash .dash-header {
	margin-top: 30px;
	/* Standardized to 30px */
}

#my_cash .dash-header:first-child {
	margin-top: 0;
}

.dash-stats-big {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.big-val {
	font-size: 2.25rem;
	/* Matched to dash-big-num */
	font-weight: 800;
	line-height: 1;
	margin-bottom: 10px;
	color: var(--success);
}

.big-val span {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-muted);
}

.cash-list-container {
	background: var(--bg-card);
	border-radius: 5px;
	border: 1px solid var(--border-color);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin-top: 15px;
}

.cash-list-header {
	display: flex;
	padding: 10px 15px;
	/* Unified padding */
	border-bottom: 1px solid var(--border-color);
	list-style: none;
	font-weight: 800;
	font-size: 0.7rem;
	/* Unified small headers */
	text-transform: uppercase;
	color: var(--text-muted);
	letter-spacing: 0.05em;
}

.c-l-h-item.text {
	flex: 1;
}

.c-l-h-item.summ {
	width: 120px;
	text-align: right;
}

.c-l-h-item.my {
	width: 120px;
	text-align: right;
}

.cash-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cash-item-row {
	display: flex;
	padding: 10px 15px;
	/* Compact padding */
	border-bottom: 1px solid var(--border-color);
	transition: background 0.2s;
	align-items: center;
}

.cash-item-row:hover {
	background: rgba(var(--s2-rgb), 0.02);
}

.cash-item-row:last-child {
	border: none;
}

.c-i-info {
	flex: 1;
}

.c-i-title {
	font-weight: 700;
	font-size: 0.85rem;
	/* Compact detail */
	margin-bottom: 2px;
	color: var(--text-main);
}

.c-i-meta {
	font-size: 0.7rem;
	color: var(--text-muted);
}

.c-i-vals {
	width: 240px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.c-i-sum {
	font-weight: 700;
	font-size: 0.9rem;
	width: 120px;
	text-align: right;
	color: var(--primary);
}

.c-i-profit {
	font-weight: 800;
	font-size: 0.9rem;
	width: 120px;
	text-align: right;
	color: var(--success);
	/* Green by default for profit */
}

.c-i-profit strong {
	color: var(--success);
}

.c-i-profit.plus {
	color: var(--success) !important;
}

.c-i-profit.minus {
	color: var(--danger) !important;
}

@media (max-width: 768px) {

	.c-l-h-item.my,
	.c-i-profit {
		display: none;
	}

	.c-i-vals {
		width: auto;
	}
}

/* Dashboard Financial Table & Big Numbers */
.dash-big-num {
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--text-main);
	margin-top: 1rem;
}

.dash-big-num small {
	font-size: 0.85rem;
	color: var(--text-muted);
}

.fin-table-container {
	background: var(--bg-card);
	border-radius: 5px;
	border: 1px solid var(--border-color);
	overflow-x: auto;
	box-shadow: var(--shadow-sm);
	margin-bottom: 15px;
}

/* Dashboard Sections */
.dash-section {
	margin-top: 30px;
	margin-bottom: 15px;
}

.dash-section:first-child {
	margin-top: 0;
}

.dash-section h2 {
	font-size: 1.1rem !important;
	/* Slightly smaller headers */
	font-weight: 800 !important;
	color: var(--text-main);
	margin-bottom: 10px;
	line-height: 1.3;
}

/* Financial Table Standardization */
.fin-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 900px;
	/* Calculated: 300px (names) + 5*120px (metrics) */
	table-layout: fixed;
}

.fin-table th,
.fin-table td {
	padding: 10px 15px;
	/* Compact 15px horizontal padding */
	text-align: left;
	vertical-align: middle;
}

/* Column Widths - Metrics are fixed 120px, Name is fixed 300px min */
.fin-table th:nth-child(1),
.fin-table td:nth-child(1) {
	width: 300px;
	/* Enforced 300px minimum */
}

.fin-table th:nth-child(2),
.fin-table td:nth-child(2),
.fin-table th:nth-child(3),
.fin-table td:nth-child(3),
.fin-table th:nth-child(4),
.fin-table td:nth-child(4),
.fin-table th:nth-child(5),
.fin-table td:nth-child(5),
.fin-table th:nth-child(6),
.fin-table td:nth-child(6) {
	width: 120px;
}

.fin-table-container {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 15px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
	overflow-x: auto;
}

.fin-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.fin-table th {
	padding: 12px 15px;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	border-bottom: 2px solid var(--border-color);
}

.fin-table td {
	padding: 15px;
	border-bottom: 1px solid var(--border-color);
	font-size: 0.9375rem;
	vertical-align: middle;
}

.fin-table tr:hover td {
	background: rgba(var(--primary-rgb), 0.02);
}

.fin-table .text-success {
	color: var(--success) !important;
	font-weight: 700;
}

.fin-table .text-danger {
	color: var(--danger) !important;
	font-weight: 700;
}

.fin-table .text-warning {
	color: var(--warning) !important;
	font-weight: 700;
}

/* Mobile responsive tables */
@media (max-width: 768px) {
	.fin-table-container {
		padding: 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Smooth scrolling on iOS */
	}

	.fin-table {
		min-width: 600px;
		/* Ensure table doesn't collapse too much */
	}

	.fin-table th,
	.fin-table td {
		padding: 10px 12px;
		font-size: 0.875rem;
	}

	.fin-table th {
		font-size: 0.6875rem;
	}
}


/* --- 6.5. PREDICTIVE ANALYTICS CHART & FORECAST --- */
.dash-analytical-section {
	margin-top: 30px;
	margin-bottom: 30px;
}

.analytical-card {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 15px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.line-history {
	stroke: var(--primary);
	filter: drop-shadow(0 8px 16px rgba(var(--primary-rgb), 0.4));
}

.line-forecast {
	stroke: var(--text-muted);
	stroke-dasharray: 8 8;
	opacity: 0.6;
}

.chart-point.point-history {
	fill: var(--primary);
	stroke: white;
	stroke-width: 2;
}

.chart-point.point-forecast {
	fill: white;
	stroke: var(--text-muted);
	stroke-width: 2;
}



.chart-point {
	fill: var(--bg-card);
	stroke-width: 3;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: help;
}

.point-history {
	stroke: var(--primary);
}

.point-forecast {
	stroke: var(--info);
}

.chart-point:hover {
	r: 8;
	fill: var(--text-white);
}

.axis-label {
	font-size: 11px;
	fill: var(--text-muted);
	font-weight: 700;
}

.grid-line {
	stroke: var(--border-color);
	stroke-width: 1;
	stroke-dasharray: 4 4;
}

.prediction-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Force 3 columns */
	gap: 15px;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid var(--border-color);
}

.prediction-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	/* Allow text truncation */
}

.prediction-item label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

.prediction-item .value {
	font-size: 1.3rem;
	font-weight: 900;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	word-break: break-word;
	line-height: 1.2;
}



.trend-badge {
	font-size: 0.8rem;
	padding: 4px 10px;
	border-radius: 5px;
	font-weight: 700;
}

.trend-up {
	background: rgba(var(--s6-rgb), 0.1);
	color: var(--success);
}

.trend-down {
	background: rgba(var(--s3-rgb), 0.1);
	color: var(--danger);
}

@media (max-width: 1024px) {
	.prediction-summary {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 10px;
	}

	.prediction-item {
		flex: 1;
		min-width: 0;
	}

	.prediction-item label {
		font-size: 0.65rem;
	}

	.prediction-item .value {
		font-size: 1rem;
		gap: 4px;
	}

	.prediction-item .value .material-icons {
		font-size: 16px !important;
	}

	.chart-viewport {
		height: 280px;
	}
}

@media (max-width: 768px) {
	.chart-viewport {
		height: 250px;
	}

	.analytical-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.status-badge {
		padding: 4px 10px;
		font-size: 0.65rem;
	}

	.prediction-item label {
		font-size: 0.6rem;
	}

	.prediction-item .value {
		font-size: 0.9rem;
		gap: 3px;
	}

	.analytical-footer p {
		font-size: 0.65rem;
	}
}

/* --- Unified Magic Date Filter --- */
.dash-filter-container {
	position: relative;
	display: inline-block;
}

.filter-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--text-muted);
	box-shadow: var(--shadow-sm);
}

.filter-trigger:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
}

.dash-filter-container.active .filter-trigger {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
	box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}

.filter-trigger .material-icons {
	font-size: 1.25rem;
}

.filter-trigger .active-label,
.filter-trigger .arrow {
	display: none;
	/* Icon-only as requested */
}

.dash-filter-container.active .filter-trigger .arrow {
	transform: rotate(180deg);
}

/* The Popover Window - Premium Glassmorphism */
.date-filter-popover {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 240px;
	background: var(--bg-card);
	backdrop-filter: blur(15px) saturate(150%);
	-webkit-backdrop-filter: blur(15px) saturate(150%);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	box-shadow: 0 15px 35px rgba(var(--text-black-rgb), 0.1), 0 5px 15px rgba(var(--text-black-rgb), 0.05);
	padding: 15px;
	z-index: 1000;
	display: none;
	flex-direction: column;
	gap: 20px;
	/* Stronger separation between sections */
	animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.date-filter-popover.active {
	display: flex;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.rotate-anim {
	animation: rotate 1s linear infinite;
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.popover-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pop-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-muted);
	margin-bottom: 6px;
	display: block;
	text-transform: none;
	/* Sentence case from PHP */
}

/* Beautiful inner elements - Clean & High Contrast */
.date-filter-popover .dash-period-switcher {
	width: 100%;
	height: 40px;
	/* Unified height */
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	border-radius: 5px;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.date-filter-popover .dash-period-switcher:hover,
.date-filter-popover .dash-period-switcher:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 5px rgba(var(--s2-rgb), 0.2);
}

.date-filter-popover .period-select-mobile {
	width: 100%;
	height: 100%;
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	text-align-last: center;
	padding: 0 25px 0 15px;
	color: var(--text-main);
	background: transparent;
	border: none;
	outline: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 24 24' width='18' fill='%23f39c12'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.date-filter-popover .custom-range-form {
	width: 100%;
	height: auto;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.date-filter-popover .range-inputs {
	flex-direction: column;
	gap: 12px;
	/* Increased gap to prevent 'sticking' */
	width: 100%;
}

.date-filter-popover .input-group {
	width: 100%;
	height: 40px;
	/* Matches period switcher exactly */
	margin-bottom: 5px;
	/* Only bottom margin as requested */
	background: var(--bg-body);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: 0 15px;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 10px;
}

.date-filter-popover .input-group:hover {
	border-color: var(--primary);
}

.date-filter-popover .input-group:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 5px rgba(var(--s2-rgb), 0.2);
}

.date-filter-popover .input-group label {
	flex: 0 0 25px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--primary);
	display: flex;
	align-items: center;
	height: 100%;
	/* Vertical centering */
	margin: 0;
	line-height: 1;
}

.date-filter-popover .range-inputs input[type="date"] {
	flex: 1;
	background: transparent;
	height: 100%;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-main);
	border: none;
	text-align: center;
	outline: none;
	display: flex;
	align-items: center;
	/* WebKit vertical center */
	line-height: 38px;
	/* Safe fallback */
}

.date-filter-popover .btn-show-range {
	width: 100%;
	height: 44px;
	margin-top: 15px;
	border-radius: 5px;
	background: var(--primary);
	color: var(--text-white);
	font-size: 0.95rem;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(var(--s2-rgb), 0.3);
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: none;
	cursor: pointer;
}

.date-filter-popover .btn-show-range:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(var(--s2-rgb), 0.4);
}

.date-filter-popover .btn-show-range:active {
	transform: translateY(0);
}

/* Legacy control blocks hidden but kept for logic if needed elsewhere */
.period-btn {
	display: none !important;
}


.btn-show-range:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(var(--s2-rgb), 0.3);
}

.btn-show-range .material-icons {
	font-size: 1.1rem;
}

.active-period-indicator {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin-bottom: 30px !important;
	/* Unified 30px gap to content */
}

.active-period-indicator .chip {
	background: rgba(var(--s2-rgb), 0.08);
	color: var(--primary);
	font-weight: 800;
	border: 1px solid rgba(var(--s2-rgb), 0.2);
	padding: 0.4rem 1rem;
	font-size: 0.9rem;
}

/* Responsive refinements handled in individual blocks above */

@media (max-width: 640px) {

	.dash-period-switcher,
	.custom-range-form {
		width: 100%;
		flex: none;
		/* Stacks and stretches */
		justify-content: center;
	}
}

/* --- Dynamic Comments & Contact Buttons --- */
.section-title {
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-main);
}

.section-title .material-icons {
	color: var(--primary);
}

.c-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.c-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.8rem;
	transition: var(--transition);
	color: white;
	border: none;
}

.c-btn .btn-label {
	display: inline-block;
}

.c-btn.call {
	background: var(--viber);
	color: var(--text-white);
}

.c-btn.whatsapp {
	background: var(--whatsapp);
	color: var(--text-white);
}

.c-btn.telegram {
	background: var(--telegram);
	color: var(--text-white);
}

.fin-table-viber {
	background: var(--viber);
}

.fin-table-telegram {
	background: var(--telegram);
}

.c-btn:hover {
	transform: translateY(-2px);
	opacity: 0.95;
	box-shadow: var(--shadow-sm);
}

.viber-icon {
	font-style: italic;
	font-weight: 900;
	font-family: sans-serif;
	font-size: 1.1rem;
}

/* Comments Chat Style */
.comment-section-box {
	margin-top: 2rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}

.comment-list-scroll {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 400px;
	overflow-y: auto;
	padding-right: 0.5rem;
}

.comment-item {
	background: var(--bg-main);
	padding: 1rem;
	border-radius: 5px;
	border: 1px solid var(--border);
	position: relative;
}

.comment-item .meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
}

.comment-item .author {
	font-weight: 800;
	color: var(--primary);
}

.comment-item .date {
	color: var(--text-muted);
}

.comment-item.recent {
	border-left: 3px solid var(--primary);
}

.comment-item .text {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-main);
}

/* --- Minimalist & Compact App Header --- */
/* Legacy .app-header removed */

.header-left,
.header-center,
.header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-center {
	flex: 1;
	justify-content: center;
	/* Center the location switcher */
}

/* Sidebar Toggle (Minimal) */
.sidebar-toggle {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0.4rem;
	border-radius: 5px;
	transition: var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-toggle:hover {
	color: var(--primary);
	background: var(--border-subtle);
}

.sidebar-toggle .material-icons {
	font-size: 1.4rem;
}

/* Dashboard Section Description */
.section-desc {
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
	max-width: 800px;
	/* Readable line length */
}

/* Slim Location Switcher */
.location-switcher {
	display: inline-flex;
	gap: 0.25rem;
	background: var(--bg-main);
	padding: 0.2rem;
	border-radius: 5px;
	border: 1px solid var(--border);
}

.loc-link {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-muted);
	border-radius: 5px;
	transition: var(--transition);
}

.loc-link:hover {
	color: var(--text-main);
}

.loc-link.active {
	background: var(--bg-card);
	color: var(--primary);
	box-shadow: var(--shadow-sm);
}

/* Compact User Profile */
.header-user-profile {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	cursor: default;
}

.user-name-small {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-main);
}

.user-avatar-tiny {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary-light);
	color: var(--primary);
	font-weight: 700;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {

	/* Mobile Specific Adjustments for header components */
	.location-switcher {
		overflow-x: auto;
		max-width: 200px;
		white-space: nowrap;
		background: transparent;
		border: none;
		padding: 0;
	}

	.loc-link.active {
		box-shadow: none;
		background: var(--primary-light);
	}

	.header-center {
		justify-content: flex-end;
		margin-right: 0.5rem;
	}
}

/* Sidebar Collapsed State Logic (Desktop only) */
/* Legacy sidebar-collapsed media query removed to prevent padding conflicts */

@media (max-width: 1024px) {
	.main-layout {
		margin-top: 0;
	}

	.header-right-actions {
		display: none;
		/* Simplify header on mobile */
	}

	.sidebar-toggle {
		display: block;
		/* Ensure visible */
	}
}



/* ==========================================================================
   DEVICE ORDER CARDS & KANBAN LAYOUT (Modern System - Optimized)
   ========================================================================== */

/* ==========================================================================
   DEVICE ORDER CARDS & KANBAN LAYOUT (Premium Redesign)
   ========================================================================== */

/* 1. Base Container (Horizontal Scrollable Kanban) */
/* 1. Base Container (Responsive Grid Layout) */
.device_list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
	gap: 20px !important;
	padding: 0 0 30px 0 !important;
	background: transparent !important;
	overflow-x: visible !important;
	/* Reset flex/scroll props */
	flex-wrap: wrap !important;
	align-items: stretch !important;
}

.device_list::-webkit-scrollbar {
	height: 6px;
}

.device_list::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 5px;
}

/* 2. Kanban Columns (Glassmorphism) */
.device_list .kanban-col {
	flex: 0 0 320px;
	width: 320px;
	display: flex;
	flex-direction: column;
	background: var(--bg-glass);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 5px;
	padding: 15px;
	min-height: calc(100vh - 160px);
	scroll-snap-align: center;
	box-shadow: var(--shadow-sm);
}

.device_list .device-group-header {
	font-weight: 800;
	font-size: 0.75rem;
	text-transform: uppercase;
	margin-bottom: 20px;
	padding: 10px 15px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	letter-spacing: 0.1em;
	color: var(--text-white);
	box-shadow: var(--shadow-sm);
}

/* Status-specific headers with colors from color.css */
/* Status-specific headers with colors from color.css variables */
.device-group-header.s0 {
	background: var(--primary);
}

.device-group-header.s1 {
	background: var(--s1);
}

.device-group-header.s2 {
	background: var(--s2);
}

.device-group-header.s3 {
	background: var(--s3);
}

.device-group-header.s4 {
	background: var(--s4);
}

.device-group-header.s5 {
	background: var(--s5);
}

.device-group-header.s6 {
	background: var(--s6);
}

.device-group-header.s7 {
	background: var(--s7);
}

.device_list .device-group-header .count-badge {
	background: rgba(255, 255, 255, 0.2);
	padding: 2px 10px;
	border-radius: 100px;
	font-size: 0.75rem;
	color: var(--text-white);
}

.device_list .kanban-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 3. Card Base Styling (Premium High-End) */
.device_list .device-row {
	background: var(--bg-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 5px!important;
	padding: 0 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: block !important;
	position: relative;
	overflow: hidden;
}

.device_list .device-row:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), var(--shadow-lg);
}

/* 3. Card Base Styling (Compact) */
.device-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	padding: 16px;
	/* Reduced from 22px */
	height: 100%;
}

/* Checklist Styling */
.device-checklist-container {
	padding-top: 10px;
}

.cl-columns {
	display: flex;
	gap: 20px;
}

.cl-col {
	flex: 1;
}

.cl-head {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--border-subtle);
}

.checklist-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px dashed var(--border-subtle);
}

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

.cl-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-main);
}

.cl-actions {
	display: flex;
	gap: 6px;
}

.cl-btn {
	width: 32px;
	height: 32px;
	border-radius: 5px;
	border: 1px solid var(--border-subtle);
	background: var(--bg-body);
	color: var(--text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.cl-btn:hover {
	background: var(--bg-card);
	border-color: var(--primary);
}

.cl-btn.cl-check.active {
	background: var(--success);
	border-color: var(--success);
	color: var(--surface-elevated);
}

.cl-btn.cl-close.active {
	background: var(--danger);
	border-color: var(--danger);
	color: var(--surface-elevated);
}

.cl-footer {
	margin-top: 20px;
	text-align: right;
	padding-top: 15px;
	border-top: 1px solid var(--border-subtle);
}

@media (max-width: 768px) {
	.cl-columns {
		flex-direction: column;
	}
}

/* 4. Status Gradients (Premium Immersive) */
/* 4. Status Gradients (Vibrant & Distinct) */
/* Page Background Modes (Immersive Status) */
.device_list .device-row.s1 {
	--card-theme: var(--s1);
	--card-border: var(--s1-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s1-rgb), 0.1) 100%) !important;
	border-color: var(--s1-light) !important;
}

.device_list .device-row.s2 {
	--card-theme: var(--s2);
	--card-border: var(--s2-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s2-rgb), 0.1) 100%) !important;
	border-color: var(--s2-light) !important;
}

.device_list .device-row.s3 {
	--card-theme: var(--s3);
	--card-border: var(--s3-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s3-rgb), 0.1) 100%) !important;
	border-color: var(--s3-light) !important;
}

.device_list .device-row.s4 {
	--card-theme: var(--s4);
	--card-border: var(--s4-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s4-rgb), 0.1) 100%) !important;
	border-color: var(--s4-light) !important;
}

.device_list .device-row.s5 {
	--card-theme: var(--s5);
	--card-border: var(--s5-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s5-rgb), 0.1) 100%) !important;
	border-color: var(--s5-light) !important;
}

.device_list .device-row.s6 {
	--card-theme: var(--s6);
	--card-border: var(--s6-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s6-rgb), 0.1) 100%) !important;
	border-color: var(--s6-light) !important;
}

.device_list .device-row.s7 {
	--card-theme: var(--s7);
	--card-border: var(--s7-light);
	background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--s7-rgb), 0.1) 100%) !important;
	border-color: var(--s7-light) !important;
}

/* Page Background Modes (Immersive Status) */
.status-mode-0-1-2-3-4-5 .main-layout {
	background-color: rgba(var(--primary-rgb), var(--status-bg-alpha));
	transition: background-color 0.5s ease;
}

.status-mode-1 .main-layout,
.status-mode-2 .main-layout,
.status-mode-3 .main-layout,
.status-mode-4 .main-layout,
.status-mode-5 .main-layout,
.status-mode-6 .main-layout,
.status-mode-7 .main-layout {
	transition: background-color 0.5s ease;
}

.status-mode-1 .main-layout {
	background-color: rgba(234, 179, 8, var(--status-bg-alpha));
}

.status-mode-2 .main-layout {
	background-color: rgba(249, 115, 22, var(--status-bg-alpha));
}

.status-mode-3 .main-layout {
	background-color: rgba(239, 68, 68, var(--status-bg-alpha));
}

.status-mode-4 .main-layout {
	background-color: rgba(59, 130, 246, var(--status-bg-alpha));
}

.status-mode-5 .main-layout {
	background-color: rgba(139, 92, 246, var(--status-bg-alpha));
}

.status-mode-6 .main-layout {
	background-color: rgba(16, 185, 129, var(--status-bg-alpha));
}

.status-mode-7 .main-layout {
	background-color: rgba(100, 116, 139, var(--status-bg-alpha));
}

/* 4. Card Internal Sections */
.device_list .card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
	/* Reduced from 12px */
	gap: 8px;
}

.device_list .card-client {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 3px;
}

.device_list .d-name {
	font-weight: 850;
	font-size: 0.95rem;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.device_list .d-phone {
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 500;
}

/* Vibrant Icon Circle */
/* Vibrant Icon Circle (Unified Colors) */
/* Vibrant Icon Circle (Dynamic Colors) */
/* Enhanced Icon Glow - Inverted */
.d-icon-circle {
	width: 32px;
	height: 32px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card-theme, var(--s6));
	/* Solid status color */
	color: var(--surface-elevated);
	/* White icon */
	flex-shrink: 0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.d-icon-circle:hover,
.device-link:hover .d-icon-circle {
	box-shadow: 0 0 12px var(--card-border);
	/* Glow on hover */
}

.d-icon-circle .material-icons {
	font-size: 1.1rem;
}

.d-icon-circle .material-icons {
	font-size: 1.25rem;
}

.device_list .card-main {
	margin-bottom: 10px;
	/* Reduced from 15px */
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.device_list .d-model {
	font-size: 1.05rem;
	font-weight: 850;
	color: var(--text-main);
	line-height: 1.3;
}

.device_list .d-defect {
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.4;
	font-weight: 500;
}

.device_list .d-note {
	font-size: 0.8rem;
	background: var(--note-bg);
	padding: 6px 10px;
	border-radius: 5px;
	color: var(--text-muted);
	border-left: 2px solid var(--card-theme, var(--primary));
	/* Dynamic note border */
}


/* Footer Reform: Price Only (Compact) */
.device_list .card-foot {
	margin-top: auto;
	padding-top: 10px;
	/* Reduced from 15px */
	border-top: 1px dashed var(--card-border, var(--border-subtle));
	display: flex;
	justify-content: flex-end;
	/* Align price to right */
	align-items: center;
}

/* Header Redesign: Top Meta (Compact & Detailed) */
.device_list .d-meta-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--card-border, var(--border-subtle));
}

.device_list .meta-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.device_list .d-id {
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--card-theme, var(--primary));
	line-height: 1;
	letter-spacing: -0.02em;
	/* # Removed via pseudoelement logic update */
}

.device_list .d-status-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--card-border);
	color: var(--card-theme);
	letter-spacing: 0.05em;
}

/* Removed leading # from ID as requested */
.device_list .d-id::before {
	content: '';
	display: none;
}

.device_list .d-date {
	font-size: 0.85rem;
	color: var(--text-muted);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--border-subtle);
	padding: 4px 8px;
	border-radius: 5px;
}

.device_list .d-price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.device_list .d-total {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--text-light);
	/* Default greyish */
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Green override when price > 0 (applied via has-price class in PHP) */
.device_list .d-total.has-price {
	color: var(--success);
	/* Vibrant Green */
}

.device_list .d-total small {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
}

.device_list .d-estimated {
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 500;
	margin-top: 2px;
}

/* Old Device Indicator (Text Only) */
.old-ribbon {
	position: absolute;
	top: 15px;
	right: 15px;
	background: transparent;
	color: var(--danger);
	padding: 0;
	border: none;
	box-shadow: none;
	z-index: 10;
}

.old-ribbon span {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Responsiveness (Single column on Mobile) */
@media (max-width: 991px) {
	.device_list {
		display: grid !important;
		grid-template-columns: 1fr !important;
		/* Single column on small screens */
		gap: 15px !important;
		padding: 10px 15px 30px 15px !important;
		overflow-x: visible !important;
	}

	.device_list .kanban-col {
		flex: 0 0 280px !important;
		width: 280px !important;
		min-width: 280px !important;
		max-width: 280px !important;
		padding: 12px !important;
		min-height: calc(100vh - 180px) !important;
	}

	.device_list .kanban-items {
		gap: 12px !important;
	}

	.device_list .device-group-header {
		margin-bottom: 12px;
		border-radius: 5px;
	}
}

/* Chart Container (From chart-bars.css) */
.chart-container {
	width: 100%;
	height: 400px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 0;
	padding-top: 40px;
	background: var(--border-subtle);
	border-radius: var(--radius);
	overflow: visible;
}

.chart-header-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 15px;
}

.chart-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--surface), var(--primary-hover));
	color: var(--text-white);
	border-radius: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.chart-bars {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	gap: 0;
	position: relative;
	z-index: 2;
}

.chart-bar {
	width: 100%;
	max-width: 7px;
	height: 0;
	border-radius: 5px;
	position: relative;
	transition: background 0.3s ease;
	cursor: pointer;
	margin: 0 auto;
}

.bar-history {
	background: var(--surface), var(--primary-hover));
}

.bar-forecast {
	background: var(--surface), var(--info-light));
}

/* Print Styles (From style.css) */
@media print {
	#admin_panel {
		display: none;
	}

	html,
	body {
		width: 210mm !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html,
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	a {
		background-color: var(--text-white);
		color: var(--text-black);
	}

	#print,
	#print .cnt {
		padding: 0 !important;
		margin: 0 !important;
	}
}

.print_container {
	display: block;
	margin: 0 auto;
	max-width: 210mm !important;
}

#print {
	overflow-x: scroll;
	display: block;
}

#print * {
	background-color: var(--text-white);
	color: var(--text-black);
}

/* --- Order Detail Redesign --- */
.d-id-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.d-days-badge {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 0.85rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
}

.d-days-badge .material-icons {
	font-size: 1rem;
}

.status-chip {
	padding: 6px 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.75rem !important;
}

.status-chip.s1 {
	background: var(--s1);
	color: var(--status-on-solid, #ffffff);
}

.status-chip.s2 {
	background: var(--s2);
	color: var(--status-on-solid, #ffffff);
}

.status-chip.s3 {
	background: var(--s3);
	color: var(--status-on-solid, #ffffff);
}

.status-chip.s4 {
	background: var(--s4);
	color: var(--status-on-solid, #ffffff);
}

.status-chip.s5 {
	background: var(--s5);
	color: var(--status-on-solid, #ffffff);
}

.status-chip.s6 {
	background: var(--s6);
	color: var(--status-on-solid, #ffffff);
}

.status-chip.s7 {
	background: var(--s7);
	color: var(--status-on-solid, #ffffff);
}

.analytics-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 15px;
}

.a-item {
	display: flex;
	flex-direction: column;
}

.a-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 800;
	margin-bottom: 2px;
}

.a-val {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--text-main);
}

.a-val.highlight {
	color: var(--primary);
}

.top-action-bar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 30px;
}

.status-workflow-pills {
	background: var(--bg-card);
	border: 1px solid var(--border);
	padding: 15px;
	border-radius: var(--radius);
}

.price_list li {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 15px;
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.2s;
}

.price_list li:hover {
	border-color: var(--primary);
	transform: translateX(4px);
}

.p-item-info {
	flex: 1;
}

.p-item-info .title {
	font-weight: 800;
	font-size: 1rem;
	margin-bottom: 6px !important;
	color: var(--text-main);
}

.p-meta {
	display: flex;
	gap: 15px;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 600;
}

.p-meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.p-meta .material-icons {
	font-size: 0.95rem;
}

.p-item-price {
	text-align: right;
}

.p-item-price .summ {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--text-main);
	margin: 0 !important;
}

.p-item-price .profit {
	font-size: 0.75rem;
	font-weight: 800;
	margin-top: 2px;
}

.p-item-price .profit.plus {
	color: var(--success);
}

.p-item-price .profit.minus {
	color: var(--danger);
}

.p-edit-btn {
	margin-left: 15px;
	color: var(--text-muted);
	transition: color 0.2s;
}

.p-edit-btn:hover {
	color: var(--primary);
}

/* ==========================================================================
   PREMIUM OVERHAUL: ORDER DETAIL PAGE
   ========================================================================== */

:root {
	--glass-bg: rgba(var(--bg-card-rgb), 0.7);
	--glass-border: rgba(var(--border-rgb), 0.3);
	--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	--premium-radius: 5px;
	--card-gap: 20px;
}

.premium-layout {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 1. Header Hero Banner */
.order-hero-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px;
	background: var(--surface) 0%, var(--bg-body) 100%);
	border-radius: var(--premium-radius);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	position: relative;
	overflow: hidden;
}

.order-hero-banner::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -10%;
	width: 400px;
	height: 400px;
	background: var(--surface), 0.1) 0%, transparent 70%);
	z-index: 0;
}

.hero-left,
.hero-right {
	position: relative;
	z-index: 1;
}

.order-id-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	background: var(--primary);
	color: var(--white);
	padding: 6px 16px;
	border-radius: 100px;
	margin-bottom: 12px;
}

.order-id-badge .label {
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 800;
	opacity: 0.8;
}

.order-id-badge .value {
	font-size: 1.1rem;
	font-weight: 900;
}

.device-main-title h1 {
	font-size: 2.2rem;
	font-weight: 950;
	margin: 0;
	letter-spacing: -0.03em;
	color: var(--text-main);
}

.sn-text {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 600;
	margin-top: 4px;
}

.sn-text span {
	color: var(--text-main);
}

.hero-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 15px;
}

.status-glass-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 24px;
	border-radius: 100px;
	background: rgba(var(--primary-rgb), 0.1);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
	color: var(--primary);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.status-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 rgba(var(--primary-rgb), 0.4);
	animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
	}
}

.timing-glass-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
}

.timing-glass-badge .material-icons {
	color: var(--primary);
	font-size: 1.4rem;
}

.timing-glass-badge .time-val {
	font-size: 1.6rem;
	color: var(--text-main);
	line-height: 1;
}

.timing-glass-badge .time-label {
	color: var(--text-muted);
	font-size: 0.85rem;
	margin-top: 4px;
}

/* 2. Grid Layout */
.overhaul-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: var(--card-gap);
}

@media (max-width: 1024px) {
	.overhaul-grid {
		grid-template-columns: 1fr;
	}
}

/* 3. Cards & Sidebar */
.premium-card {
	background: var(--bg-card);
	border-radius: var(--premium-radius);
	padding: 24px;
	border: 1px solid var(--glass-border);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-bottom: var(--card-gap);
}

.premium-card.glass {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.premium-card:hover {
	border-color: rgba(var(--primary-rgb), 0.3);
	transform: translateY(-4px);
}

.card-header-iconic {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	color: var(--text-muted);
}

.card-header-iconic .material-icons {
	font-size: 1.4rem;
	color: var(--primary);
}

.card-header-iconic h3 {
	font-size: 0.9rem;
	text-transform: uppercase;
	font-weight: 800;
	margin: 0;
	letter-spacing: 0.05em;
}

.client-profile-box {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-bottom: 20px;
}

.p-avatar {
	width: 64px;
	height: 64px;
	background: var(--surface) 0%, var(--primary-hover) 100%);
	color: var(--white);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	font-weight: 900;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.p-data .p-name {
	display: block;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text-main);
	text-decoration: none;
	line-height: 1.2;
	margin-bottom: 4px;
}

.p-data .p-name:hover {
	color: var(--primary);
}

.p-data .p-source {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.client-contact-grid {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--bg-body);
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.2s;
	border: 1px solid var(--border);
}

.contact-pill:hover {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
}

.contact-pill.tel {
	color: var(--primary);
	font-weight: 800;
	font-size: 1.1rem;
}

.contact-pill .material-icons {
	font-size: 1.2rem;
}

.social-actions-mini {
	display: flex;
	gap: 10px;
}

.social-actions-mini .s-btn {
	flex: 1;
	height: 48px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	text-decoration: none;
	transition: transform 0.2s;
}

.s-btn.viber {
	background: #7360f2;
	color: var(--white);
}

.s-btn.telegram {
	background: #0088cc;
	color: var(--white);
}

.s-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

.specs-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spec-item {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--border);
}

.spec-item:last-child {
	border: none;
}

.spec-item .s-label {
	color: var(--text-muted);
	font-weight: 600;
}

.spec-item .s-val {
	color: var(--text-main);
	font-weight: 800;
	text-align: right;
}

.spec-item .s-val.highlight {
	color: var(--primary);
}

.glass-gradient {
	background: var(--surface), 0.15) 0%, rgba(var(--bg-card-rgb), 0.8) 100%);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.metrics-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.m-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.m-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
}

.m-val {
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--text-main);
}

.m-val.profit {
	font-size: 1.8rem;
	color: var(--primary);
	letter-spacing: -0.04em;
}

.margin-bar-container {
	margin: 5px 0;
}

.m-bar-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.m-progress-bg {
	height: 10px;
	background: rgba(var(--text-muted-rgb), 0.1);
	border-radius: 100px;
	overflow: hidden;
}

.m-progress-fill {
	height: 100%;
	background: var(--primary);
	border-radius: 100px;
	transition: width 1s ease-out;
}

.date-stamps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.stamp {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 8px;
}

.stamp.success {
	color: var(--success);
}

.stamp .material-icons {
	font-size: 1rem;
}

/* 4. Action Hub */
.action-hub-glass {
	display: flex;
	align-items: stretch;
	background: var(--glass-bg);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-top: 1px solid var(--glass-border);
	border-left: 1px solid var(--glass-border);
	border-bottom: 2px solid var(--glass-border);
	border-right: 2px solid var(--glass-border);
	border-radius: var(--premium-radius);
	padding: 20px;
	margin-bottom: 30px;
	gap: 30px;
}

.hub-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hub-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	font-weight: 900;
	color: var(--text-muted);
	letter-spacing: 0.1em;
}

.hub-divider {
	width: 1px;
	background: var(--border);
	margin: 10px 0;
}

.hub-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hub-actions form {
	display: block;
	flex: 1;
	min-width: 140px;
}

.hub-actions .btn-print,
.hub-actions .status-btn,
.hub-actions .btn-white-link {
	width: 100% !important;
	height: 48px !important;
	border-radius: 5px!important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	cursor: pointer;
	transition: all 0.2s;
	border: 1px solid var(--border) !important;
	background: var(--bg-card) !important;
}

.hub-actions .btn-print:hover {
	background: var(--primary) !important;
	color: var(--white) !important;
	border-color: var(--primary) !important;
}

/* 5. Services & Comments Content Area */
.premium-section-title {
	font-size: 1.4rem;
	font-weight: 900;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-main);
}

.premium-section-title .material-icons {
	font-size: 1.8rem;
	color: var(--primary);
}

.section-top-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.premium-btn-add {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--primary);
	color: var(--white);
	border-radius: 5px;
	text-decoration: none;
	font-weight: 800;
	font-size: 0.9rem;
	box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2);
	transition: all 0.2s;
}

.premium-btn-add:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
}

/* Service Cards */
.overhaul-price-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.p-item-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	transition: all 0.2s;
}

.p-item-card:hover {
	border-color: var(--primary);
	box-shadow: var(--shadow-sm);
	transform: translateX(5px);
}

.p-item-main {
	display: flex;
	gap: 15px;
	align-items: center;
	flex: 1;
	overflow: hidden;
}

.p-item-icon {
	width: 44px;
	height: 44px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-item-info {
	flex: 1;
	overflow: hidden;
}

.p-item-info .title {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--text-main);
	margin: 0 0 6px 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.p-item-meta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.p-badge {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted);
	background: var(--bg-body);
	padding: 2px 10px;
	border-radius: 5px;
	border: 1px solid var(--border);
}

.p-badge .material-icons {
	font-size: 0.9rem;
}

.p-badge.warranty {
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.2);
}

.p-item-side {
	display: flex;
	align-items: center;
	gap: 20px;
}

.p-item-pricing {
	text-align: right;
}

.p-item-pricing .summ {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--text-main);
	margin: 0 !important;
}

.profit-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 5px;
	margin-top: 4px;
}

.profit-tag.plus {
	background: rgba(var(--success-rgb), 0.15);
	color: var(--success);
}

.profit-tag.minus {
	background: rgba(var(--danger-rgb), 0.15);
	color: var(--danger);
}

.p-action-btn {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	transition: all 0.2s;
	text-decoration: none;
}

.p-action-btn:hover {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/* Total Summary Glass */
.total-summary-glass {
	margin-top: 30px;
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	border-radius: var(--premium-radius);
	padding: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--glass-border);
}

.summary-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s-row {
	font-size: 0.9rem;
	color: var(--text-muted);
	display: flex;
	gap: 10px;
}

.s-row b {
	color: var(--text-main);
	font-weight: 800;
}

.s-row b.sale {
	color: var(--danger);
}

.summary-final {
	text-align: right;
}

.f-label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 900;
	color: var(--primary);
	letter-spacing: 0.1em;
}

.f-val {
	font-size: 2.5rem;
	font-weight: 950;
	color: var(--text-main);
	line-height: 1;
	letter-spacing: -0.05em;
}

.f-val small {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-muted);
}

/* Comments */
.premium-comment-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.premium-comment-card {
	display: flex;
	gap: 20px;
}

.c-avatar-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 5px;
}

.c-avatar {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: var(--primary);
	font-size: 1.1rem;
}

.c-line {
	flex: 1;
	width: 2px;
	background: var(--border);
	margin: 5px 0;
}

.premium-comment-card:last-child .c-line {
	display: none;
}

.c-content-box {
	flex: 1;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 15px 20px;
	position: relative;
	margin-bottom: 20px;
	transition: all 0.2s;
}

.premium-comment-card.is-recent .c-content-box {
	border-left: 4px solid var(--primary);
	background: rgba(var(--primary-rgb), 0.03);
}

.c-content-box:hover {
	border-color: var(--primary);
}

.c-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 0.85rem;
}

.c-author {
	font-weight: 800;
	color: var(--text-main);
}

.c-date {
	color: var(--text-muted);
	font-weight: 600;
}

.c-body {
	line-height: 1.6;
	color: var(--text-main);
	font-size: 0.95rem;
}

@media (max-width: 768px) {
	.order-hero-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.hero-right {
		align-items: flex-start;
	}

	.action-hub-glass {
		flex-direction: column;
	}

	.hub-divider {
		height: 1px;
		width: 100%;
	}

	.f-val {
		font-size: 2rem;
	}

	.p-item-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.p-item-side {
		width: 100%;
		justify-content: space-between;
		border-top: 1px solid var(--border);
		padding-top: 15px;
	}
}

/* ==========================================================================
   ULTRA-PRO REFRESH: COMMAND CENTER THEME
   ========================================================================== */

:root {
	--accent-indigo: var(--primary);
	--accent-indigo-glow: rgba(99, 102, 241, 0.4);
	--deep-slate: var(--gray-800);
	--success-glow: rgba(34, 197, 94, 0.3);
	--warning-glow: rgba(234, 179, 8, 0.3);
	--danger-glow: rgba(239, 68, 68, 0.3);

	/* Depth System */
	--shadow-layered:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06),
		0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

#order-overhaul {
	background: var(--surface), 0.05), transparent 40%);
}

.order-hero-banner {
	border-left: 5px solid var(--primary);
	background: var(--bg-card);
	box-shadow: var(--shadow-layered);
}

.order-id-badge {
	background: var(--deep-slate);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.status-glass-pill {
	background: var(--bg-body);
	border: 2px solid var(--glass-border);
	box-shadow: 0 0 15px var(--accent-indigo-glow);
	color: var(--text-main);
}

.status-glass-pill.s4,
.status-glass-pill.s6 {
	box-shadow: 0 0 20px var(--success-glow);
	border-color: var(--success);
}

.premium-card {
	box-shadow: var(--shadow-layered);
	border: 1px solid var(--glass-border);
}

.premium-card:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	border-color: var(--primary);
}

.p-avatar {
	background: var(--deep-slate);
	color: var(--primary);
	border: 2px solid var(--primary);
}

.contact-pill:hover {
	background: var(--primary);
	color: var(--white) !important;
	transform: scale(1.02);
}

.glass-gradient {
	background: var(--surface) 0%, var(--navy-dark) 100%);
}

.analytics-module .m-label {
	color: rgba(255, 255, 255, 0.6);
}

.analytics-module .m-val {
	color: var(--white);
}

.analytics-module .m-val.profit {
	text-shadow: 0 0 10px var(--accent-indigo-glow);
}

/* Interactive Margin Bar */
.m-progress-bg {
	background: rgba(255, 255, 255, 0.1);
}

.m-progress-fill {
	background: var(--surface) 0%, var(--warning) 50%, var(--success) 100%);
	box-shadow: 0 0 10px var(--success-glow);
}

/* Action Hub Refinement */
.action-hub-glass {
	border: 1px solid var(--primary);
	background: var(--surface), 0.05) 0%, transparent 100%);
	box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb), 0.2);
}

.hub-actions .btn-print:hover {
	background: var(--deep-slate) !important;
	color: var(--primary) !important;
	transform: translateY(-3px);
}

/* Service List Visual depth */
.p-item-card {
	border-left: 4px solid transparent;
}

.p-item-card:hover {
	border-left-color: var(--primary);
}

.p-item-icon {
	background: var(--deep-slate);
	color: var(--primary);
	box-shadow: inset 0 0 10px rgba(var(--primary-rgb), 0.2);
}

.p-item-pricing .summ {
	color: var(--primary);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Total Summary Command look */
.total-summary-glass {
	background: var(--deep-slate);
	color: var(--gray-200);
	border: 1px solid var(--primary);
}

.summary-details .s-row b {
	color: var(--white);
}

.summary-final .f-val {
	color: var(--primary);
	text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4);
}

/* Comment Timeline visuals */
.c-avatar {
	background: var(--deep-slate);
	color: var(--primary);
	border-color: var(--primary);
}

.c-avatar-wrap .c-line {
	background: var(--surface), transparent);
}

/* ==========================================================================
   BENTO GRID SYSTEM: HARDENED VERSION
   ========================================================================== */

:root {
	--b-gap: 1.5rem;
	--b-radius: 5px;
	--b-border: rgba(0, 0, 0, 0.1);
	--b-bg: var(--surface-elevated);
	--b-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
	--slate-900: var(--navy-dark);
	--slate-800: var(--gray-800);
	--indigo-500: var(--primary);
}

#bento-order-page {
	display: grid !important;
	grid-template-areas:
		"hero hero hero actions"
		"client device stats stats"
		"content content content content"
		"comments comments comments comments" !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--b-gap) !important;
	padding: var(--b-gap);
	max-width: 1400px;
	margin: 0 auto;
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--slate-800);
}

.bento-box {
	background: var(--b-bg) !important;
	border-radius: var(--b-radius)!important;
	border: 1px solid var(--b-border) !important;
	padding: 1.5rem !important;
	box-shadow: var(--b-shadow) !important;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.bento-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.12);
	border-color: var(--indigo-500) !important;
}

.bento-hero {
	grid-area: hero;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.bento-actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}

.bento-client {
	grid-area: client;
}

.bento-device {
	grid-area: device;
}

.bento-stats {
	grid-area: stats;
}

.bento-content {
	grid-area: content;
}

.bento-comments {
	grid-area: comments;
}

/* Fixed Colors for Internal Elements */
.bento-stats {
	background: var(--slate-900) !important;
	color: var(--white) !important;
}

.bento-stats .bento-label {
	color: rgba(255, 255, 255, 0.5) !important;
}

#bento-order-page.status-ready .bento-hero {
	border-color: var(--success) !important;
	background: var(--surface) 0%, transparent 100%) !important;
}

.bento-hero h1 {
	margin: 0;
	font-size: 2rem;
	font-weight: 800;
	color: var(--slate-900);
}

.bento-hero .order-num {
	color: var(--indigo-500);
	font-weight: 700;
	font-size: 1.1rem;
}

.bento-label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
	display: block;
}

.client-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--slate-900);
	display: block;
	margin-bottom: 0.25rem;
}

.client-tel {
	font-size: 1rem;
	color: var(--indigo-500);
	text-decoration: none;
	font-weight: 600;
}

.quick-action-btn {
	width: 52px;
	height: 52px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-body);
	border: 1px solid var(--b-border);
	color: var(--slate-800);
	transition: all 0.2s;
}

.quick-action-btn:hover {
	background: var(--indigo-500);
	color: var(--white);
	border-color: var(--indigo-500);
}

@media (max-width: 1200px) {
	#bento-order-page {
		grid-template-areas:
			"hero hero hero hero"
			"client client device device"
			"stats stats stats stats"
			"actions actions actions actions"
			"content content content content"
			"comments comments comments comments" !important;
	}
}

@media (max-width: 768px) {
	#bento-order-page {
		grid-template-areas:
			"hero"
			"client"
			"device"
			"stats"
			"actions"
			"content"
			"comments" !important;
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   BENTO EXPANSION: ANALYTICS & POLISH
   ========================================================================== */

.bento-insight-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: rgba(99, 102, 241, 0.08);
	border-radius: 5px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--indigo-500);
	margin-top: 1rem;
}

.bento-timeline {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
	position: relative;
	padding-bottom: 2rem;
}

.bento-timeline::before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--b-border);
	z-index: 1;
}

.t-step {
	position: relative;
	z-index: 2;
	background: var(--b-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.t-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--b-bg);
	border: 2px solid var(--b-border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.t-step.active .t-dot {
	border-color: var(--indigo-500);
	background: var(--indigo-500);
	color: var(--white);
	box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}

.t-step.completed .t-dot {
	border-color: var(--success);
	background: var(--success);
	color: var(--white);
}

.t-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
}

/* Financial Stack Chart */
.fin-stack {
	display: flex;
	height: 40px;
	border-radius: 5px;
	overflow: hidden;
	margin-top: 1.5rem;
	background: rgba(255, 255, 255, 0.05);
}

.f-part {
	height: 100%;
	transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.f-cost {
	background: var(--danger);
}

.f-profit {
	background: var(--success);
}

.fin-legend {
	display: flex;
	gap: 1.5rem;
	margin-top: 0.75rem;
	font-size: 0.75rem;
}

.l-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: rgba(255, 255, 255, 0.6);
}

.l-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

/* Shimmer Loading Effect */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}

	100% {
		background-position: 1000px 0;
	}
}

.bento-box.is-loading::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--surface), transparent);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite linear;
}

/* Multi-Layered Shadows for Pro Depth */
.bento-box {
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.05),
		0 10px 15px -3px rgba(0, 0, 0, 0.03),
		0 20px 25px -5px rgba(0, 0, 0, 0.02) !important;
}


/* ==========================================================================
   BENTO ULTIMATE: HUB EXPANSION
   ========================================================================== */

.bento-personnel {
	grid-area: personnel;
}

.bento-timing {
	grid-area: timing;
}

#bento-order-page {
	grid-template-areas:
		"hero hero hero actions"
		"client device specs stats"
		"personnel timing timing stats"
		"content content content content"
		"comments comments comments comments" !important;
}

.personnel-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.p-avatar {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: var(--surface-secondary);
	color: var(--slate-900);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.9rem;
	border: 1px solid var(--b-border);
}

.p-info {
	display: flex;
	flex-direction: column;
}

.p-role {
	font-size: 0.65rem;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
}

.p-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--slate-900);
}

.timing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.time-box {
	padding: 1rem;
	background: var(--bg-body);
	border-radius: 5px;
	border: 1px solid var(--b-border);
}

.t-val {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--slate-900);
	display: block;
	margin-top: 0.25rem;
}

/* Malfunction Block */
.malfunction-box {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: rgba(239, 68, 68, 0.04);
	border-radius: 5px;
	border: 1px solid rgba(239, 68, 68, 0.08);
}

.m-desc {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--slate-800);
	margin-top: 0.5rem;
}

/* Mini Icons for labels */
.bento-label i {
	font-size: 1rem;
	vertical-align: middle;
	margin-right: 0.25rem;
	color: var(--indigo-500);
}

@media (max-width: 1400px) {
	#bento-order-page {
		grid-template-areas:
			"hero hero hero actions"
			"client client device device"
			"personnel personnel specs specs"
			"timing timing stats stats"
			"content content content content"
			"comments comments comments comments" !important;
	}
}


/* ==========================================================================
   AURORA ELITE COMPACT: 15px PRECISION GRID
   ========================================================================== */

:root {
	--aurora-bg: var(--surface-secondary);
	--glass-bg: rgba(255, 255, 255, 0.7);
	--glass-border: rgba(0, 0, 0, 0.05);
	--glass-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.08);
	--accent-aurora: var(--surface) 0%, var(--primary) 100%);
	--p-gap: 10px;
	/* Precision Gap */
	--p-pad: 10px;
	/* Precision Padding */
}

/* Fluid Typography for 280-1600px */
html {
	font-size: clamp(12px, 0.8rem + 0.4vw, 16px);
}

#aurora-canvas {
	max-width: 1400px;
	margin: var(--p-gap) auto;
	padding: 0 var(--p-gap);
	display: flex;
	gap: var(--p-gap);
	position: relative;
	box-sizing: border-box;
}

.aurora-main {
	flex: 1;
	background: var(--glass-bg);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 5px;
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	padding: var(--p-pad);
	display: flex;
	flex-direction: column;
	gap: var(--p-gap);
	min-width: 0;
}

.canvas-section {
	position: relative;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	padding: var(--p-pad);
	border: 1px solid rgba(0, 0, 0, 0.02);
}

.canvas-label {
	font-size: 0.65rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--indigo-500);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.canvas-label .material-icons {
	font-size: 0.9rem;
}

/* 15px Precision Info Grid */
.info-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--p-gap);
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.info-item .label {
	font-size: 0.7rem;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
}

.info-item .val {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--slate-900);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sidebar Precision */
.aurora-sidebar {
	width: 300px;
	display: flex;
	flex-direction: column;
	gap: var(--p-gap);
}

.sticky-hub {
	position: sticky;
	top: var(--p-gap);
	background: var(--glass-bg);
	backdrop-filter: blur(24px);
	border-radius: 5px;
	border: 1px solid var(--glass-border);
	padding: var(--p-pad);
	box-shadow: var(--glass-shadow);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hub-title {
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--slate-800);
	text-align: center;
	margin: 0;
}

.hub-action-btn {
	width: 100%;
	padding: 12px;
	border-radius: 5px;
	background: var(--surface-elevated);
	color: var(--slate-900);
	font-weight: 800;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.2s;
	text-decoration: none;
}

.hub-action-btn:hover {
	background: var(--bg-body);
	transform: translateY(-1px);
	border-color: var(--indigo-500);
}

.hub-action-btn.primary {
	background: var(--slate-900);
	color: var(--white);
	border: none;
}

/* Dynamic Status Auras */
[class*="status-aura-"]::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60vh;
	z-index: -2;
	background: var(--surface)) 0%, transparent 100%);
	opacity: 0.18;
	/* Increased vividness */
	pointer-events: none;
}

.status-aura-1 {
	--status-color: var(--primary);
}

.status-aura-2 {
	--status-color: var(--warning);
}

.status-aura-3 {
	--status-color: var(--danger);
}

.status-aura-4 {
	--status-color: var(--success);
}

.status-aura-5 {
	--status-color: var(--text-muted);
}

.status-aura-6 {
	--status-color: #06b6d4;
}

.status-aura-7 {
	--status-color: #f43f5e;
}

/* Global Radial Gauges (Fix for Desktop) */
.radial-wrap {
	width: 140px;
	height: 140px;
	position: relative;
	margin: 0 auto;
}

.radial-svg {
	transform: rotate(-90deg);
}

.radial-bg {
	fill: none;
	stroke: rgba(0, 0, 0, 0.05);
	stroke-width: 10;
}

.radial-progress {
	fill: none;
	stroke: var(--indigo-500);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s ease-out;
}

.radial-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Synergized Aurora Blobs */
[class*="status-aura-"] .blob-1 {
	background: var(--status-color);
	opacity: 0.12;
	filter: blur(120px);
}

[class*="status-aura-"] .blob-2 {
	background: var(--status-color);
	opacity: 0.08;
	filter: blur(100px);
}

/* Small Display Protection (280px) */
@media (max-width: 480px) {
	#aurora-canvas {
		padding: 8px;
		gap: 10px;
		margin: 0;
	}

	.aurora-main {
		border-radius: 5px;
		padding: 12px;
		gap: 12px;
	}

	.canvas-section {
		padding: 12px;
	}

	.info-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.val {
		font-size: 0.9rem !important;
	}

	.aurora-sidebar {
		width: 100%;
		order: -1;
	}

	.sticky-hub {
		position: relative;
		top: 0;
		border-radius: 5px;
	}

	h1 {
		font-size: 2rem !important;
	}
}

@media (max-width: 320px) {
	#aurora-canvas {
		padding: 5px;
	}

	.aurora-main,
	.canvas-section,
	.sticky-hub {
		padding: 10px;
		border-radius: 5px;
	}

	.val {
		white-space: normal;
		word-break: break-all;
	}
}

/* Aurora Blobs Fix */
.aurora-blob {
	position: fixed;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	filter: blur(80px);
	z-index: -1;
	opacity: 0.1;
	pointer-events: none;
}

.blob-1 {
	background: var(--primary);
	top: 0;
	left: 0;
}

.blob-2 {
	background: var(--primary);
	bottom: 0;
	right: 0;
}

/* --- BENTO GRID LAYOUT --- */
.layout-bento-grid {
	display: grid;
	grid-template-columns: 280px 1fr 340px;
	gap: 24px;
	align-items: start;
	margin-bottom: 60px;
}

@media (max-width: 1560px) {
	.layout-bento-grid {
		grid-template-columns: 260px 1fr 280px;
		gap: 20px;
	}
}

@media (max-width: 1280px) {
	.layout-bento-grid {
		grid-template-columns: 260px 1fr;
	}

	.layout-bento-grid>.bento-col:nth-child(3) {
		grid-column: span 2;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

@media (max-width: 900px) {
	.layout-bento-grid {
		display: flex;
		flex-direction: column;
	}

	.layout-bento-grid>.bento-col:nth-child(3) {
		display: flex;
		flex-direction: column;
	}
}

.bento-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bento-card {
	background: var(--surface-elevated);
	border-radius: 5px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
	border: 1px solid #eef2f6;
	padding: 24px;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento-card:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
	transform: translateY(-2px);
	border-color: var(--border-light);
}

/* Card Headers */
.bento-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px dashed var(--border-light);
}

.bento-title {
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.bento-title .material-icons {
	font-size: 20px;
	color: var(--primary);
}

/* --- TIMELINE STYLES --- */
.timeline-wrap {
	padding: 10px 0;
	position: relative;
}

.timeline-list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

/* The Line */
.timeline-list::before {
	content: '';
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 21px;
	width: 2px;
	background: var(--border-color);
	z-index: 0;
}

.tl-item {
	position: relative;
	padding-left: 64px;
	margin-bottom: 28px;
	z-index: 1;
}

.tl-item:last-child {
	margin-bottom: 0;
}

.tl-icon,
.tl-avatar {
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: var(--shadow-sm);
	background: var(--bg-card);
	border: 4px solid var(--bg-card);
}

.tl-item.is-system .tl-icon {
	background: var(--success-light);
	color: var(--primary);
}

.tl-item.is-system .tl-icon .material-icons {
	font-size: 20px;
}

.tl-item.is-comment .tl-avatar {
	background: var(--surface) 0%, var(--primary-dark) 100%);
	color: var(--surface-elevated);
	font-weight: 700;
	font-size: 16px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tl-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: 18px;
	position: relative;
	box-shadow: var(--shadow-xs);
	transition: all 0.2s;
}

.tl-item.is-comment .tl-card {
	border-top-left-radius: 5px;
	background: var(--bg-body);
	border-color: var(--border-color);
}

.tl-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.tl-header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--text-muted);
}

.tl-author {
	font-weight: 700;
	color: var(--text-main);
	margin-right: 6px;
}

.tl-date {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-light);
	margin-left: auto;
	background: var(--bg-body);
	padding: 2px 8px;
	border-radius: 5px;
}

.tl-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
}

.tl-status-change {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--bg-body);
	padding: 10px 14px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.st-old {
	background: rgba(226, 232, 240, 0.4);
	padding: 4px 10px;
	border-radius: 5px;
	border: 1px solid rgba(226, 232, 240, 0.8);
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
}

.st-new {
	background: rgba(79, 70, 229, 0.08);
	color: var(--primary);
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	border: 1px solid rgba(79, 70, 229, 0.2);
	box-shadow: 0 1px 2px rgba(79, 70, 229, 0.05);
}

.material-icons.ar {
	font-size: 16px;
	color: var(--text-light);
}

.tl-btn-delete {
	margin-left: 8px;
	padding: 4px;
	border-radius: 5px;
	color: var(--border-color);
	transition: all 0.2s;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
}

.tl-btn-delete:hover {
	color: var(--danger);
	background: #fef2f2;
}

.tl-btn-delete .material-icons {
	font-size: 16px;
}

/* --- STATUS BUTTONS --- */
.status-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bento-status-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 5px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s;
	background: var(--surface-secondary);
	color: var(--text-secondary);
	width: 100%;
}

.bento-status-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bento-status-btn .bs-icon {
	width: 32px;
	height: 32px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-elevated);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bento-status-btn .bs-icon .material-icons {
	font-size: 18px;
}

.bento-status-btn .bs-text {
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Status Colors */
.bento-status-btn.s2 {
	/* Waiting */
	background: var(--surface-elevated) beb;
	border-color: #fcd34d;
	color: var(--warning-hover);
}

.bento-status-btn.s2 .bs-icon {
	color: var(--warning-hover);
}

.bento-status-btn.s3 {
	/* In Work */
	background: var(--success-light);
	border-color: #bfdbfe;
	color: #1e40af;
}

.bento-status-btn.s3 .bs-icon {
	color: var(--primary);
}

.bento-status-btn.s4 {
	/* Ready */
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
}

.bento-status-btn.s4 .bs-icon {
	color: var(--success);
}

.bento-status-btn.s5 {
	/* Refusal */
	background: #fef2f2;
	border-color: #fecaca;
	color: var(--danger);
}

.bento-status-btn.s5 .bs-icon {
	color: var(--danger);
}

.bento-status-btn.s7 {
	/* Archive */
	background: var(--surface-secondary);
	border-color: var(--border-light);
	color: var(--text-muted);
}

/* Action Links (Start, Pay, Return) */
.bento-status-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
	border-radius: 5px;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.bento-status-action.start {
	background: var(--primary);
	color: var(--surface-elevated);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.bento-status-action.start:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
}

.bento-status-action.pay {
	background: var(--success);
	color: var(--surface-elevated);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bento-status-action.pay:hover {
	background: #059669;
	transform: translateY(-2px);
}

.bento-status-action.return {
	background: var(--surface-secondary);
	color: var(--text-muted);
	border: 1px dashed var(--border-color);
	box-shadow: none;
}

.bento-status-action.return:hover {
	border-color: var(--text-muted);
	color: var(--text-secondary);
}

/* --- COMPACT HIGH-DENSITY DASHBOARD --- */
.layout-compact-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 16px;
	align-items: start;
	margin-bottom: 40px;
}

@media (max-width: 900px) {
	.layout-compact-grid {
		display: flex;
		flex-direction: column;
	}
}

/* Side Column */
.compact-col-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.compact-col-main {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Compact Card */
.compact-card {
	background: var(--surface-elevated);
	border-radius: 5px;
	border: 1px solid var(--border-light);
	padding: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	position: relative;
	font-size: 13px;
}

.compact-card.bg-highlight {
	background: var(--surface-secondary);
	border-color: var(--surface-secondary);
}

/* Client Mini Profile */
.cc-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.cc-label {
	font-size: 10px;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
	letter-spacing: 0.5px;
}

.cc-link {
	color: var(--border-color);
	text-decoration: none;
	transition: color 0.2s;
}

.cc-link:hover {
	color: var(--primary);
}

.cc-client-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--text-secondary);
	line-height: 1.2;
	margin-bottom: 4px;
}

.cc-client-phone {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cc-client-phone .material-icons {
	font-size: 14px;
}

.cc-alert {
	margin-top: 8px;
	font-size: 11px;
	padding: 6px;
	background: var(--surface-elevated)1f2;
	color: #be123c;
	border-radius: 5px;
	line-height: 1.3;
}

/* Mini Action Buttons */
.mini-actions-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}

.btn-icon-square {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 5px;
	background: var(--surface-secondary);
	color: var(--text-muted);
	border: 1px solid transparent;
	transition: all 0.2s;
	text-decoration: none;
}

.btn-icon-square:hover {
	background: var(--border-light);
	color: var(--text-secondary);
}

.btn-icon-square .material-icons {
	font-size: 18px;
}

/* Device Info Block (Unified) */
.full-device-info {
	padding: 16px;
	border-left: 4px solid var(--primary);
}

.di-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
	border-bottom: 1px dashed var(--border-light);
	padding-bottom: 12px;
}

.div-title-block .di-id {
	display: inline-block;
	background: #e0e7ff;
	color: #4338ca;
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 800;
	margin-bottom: 4px;
}

.di-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--gray-800);
	margin: 0;
	line-height: 1.2;
}

.di-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.dm-item {
	font-size: 11px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 4px;
}

.dm-item .material-icons {
	font-size: 14px;
	color: var(--border-color);
}

.di-specs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

@media (max-width: 1200px) {
	.di-specs-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.ds-item {
	display: flex;
	flex-direction: column;
}

.ds-label {
	font-size: 10px;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
	margin-bottom: 2px;
}

.ds-val {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	word-break: break-all;
}

.ds-val.monospace {
	font-family: monospace;
	letter-spacing: -0.5px;
	background: var(--surface-secondary);
	padding: 2px 4px;
	border-radius: 5px;
	align-self: flex-start;
}

.di-problem {
	background: var(--surface-secondary);
	padding: 10px;
	border-radius: 5px;
	border: 1px solid var(--surface-secondary);
}

.problem-text {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-top: 2px;
	font-weight: 500;
}

/* Finance Mini */
.cc-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 4px;
	color: var(--text-muted);
}

.cc-divider {
	height: 1px;
	background: var(--border-light);
	margin: 8px 0;
}

.cc-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cc-total span {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--text-secondary);
}

.cc-total .val {
	font-size: 16px;
	font-weight: 900;
	color: var(--navy-dark);
}

/* Left/Right Split (Work | History) */
.work-history-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 1300px) {
	.work-history-grid {
		grid-template-columns: 1fr;
	}
}

.cc-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--text-secondary);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cc-title .material-icons {
	font-size: 16px;
	color: var(--border-color);
}

.btn-micro-add {
	width: 20px;
	height: 20px;
	background: var(--primary);
	color: var(--surface-elevated);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.btn-micro-add .material-icons {
	font-size: 14px;
}

.work-list-scroll,
.timeline-scroll {
	max-height: 300px;
	overflow-y: auto;
	padding-right: 4px;
}

/* Scrollbar styling */
.work-list-scroll::-webkit-scrollbar,
.timeline-scroll::-webkit-scrollbar {
	width: 4px;
}

.work-list-scroll::-webkit-scrollbar-thumb,
.timeline-scroll::-webkit-scrollbar-thumb {
	background: var(--border-light);
	border-radius: 5px;
}

/* Micro Comment Form */
.micro-comment-form {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.micro-comment-form input {
	flex: 1;
	border: 1px solid var(--border-light);
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 5px;
	outline: none;
	transition: border 0.2s;
}

.micro-comment-form input:focus {
	border-color: var(--primary);
}

.micro-comment-form button {
	background: var(--surface-secondary);
	border: none;
	color: var(--text-muted);
	width: 30px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.micro-comment-form button:hover {
	background: var(--primary);
	color: var(--surface-elevated);
}

.micro-comment-form button .material-icons {
	font-size: 16px;
}


/* Status Backdrop (Dynamic Gradient) */
.status-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
	height: 100vh;
	width: 100vw;
	background: var(--bg-body);
	transition: background 0.5s ease;
}

.status-backdrop.s1 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

.status-backdrop.s2 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

.status-backdrop.s3 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

.status-backdrop.s4 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

.status-backdrop.s5 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

.status-backdrop.s6 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

.status-backdrop.s7 {
	background: var(--surface) 0%, transparent 100%);
	opacity: var(--status-bg-alpha);
}

/* Archive */

/* --- PRO DASHBOARD (Technician Focus) --- */

.layout-pro-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	/* Main Area | Sidebar */
	gap: 15px;
	/* User requested 15px */
	align-items: start;
	margin-bottom: 60px;
}

@media (max-width: 1000px) {
	.layout-pro-grid {
		display: flex;
		flex-direction: column;
	}

	.layout-pro-grid>div {
		width: 100%;
	}
}

/* Card Foundations */
.pro-card {
	background: var(--bg-card);
	border-radius: 5px;
	/* Slightly reduced radius for tighter look */
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-color);
	padding: 10px;
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
}

/* Header Section */
.pro-header-card {
	background: var(--bg-card);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ph-title-group h1 {
	font-size: 24px;
	font-weight: 800;
	color: var(--text-main);
	margin: 0 0 4px 0;
	line-height: 1.2;
}

.ph-meta {
	font-size: 13px;
	color: var(--text-muted);
	display: flex;
	gap: 16px;
	align-items: center;
}

.ph-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

.ph-meta .material-icons {
	font-size: 16px;
	color: var(--text-light);
}

.status-badge-lg {
	padding: 8px 16px;
	border-radius: 5px;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.status-badge-lg.s1 {
	background: var(--s1);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s1-rgb), 0.35);
}

.status-badge-lg.s2 {
	background: var(--s2);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s2-rgb), 0.35);
}

.status-badge-lg.s3 {
	background: var(--s3);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s3-rgb), 0.35);
}

.status-badge-lg.s4 {
	background: var(--s4);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s4-rgb), 0.35);
	box-shadow: 0 4px 12px rgba(var(--s4-rgb), 0.2);
}

.status-badge-lg.s5 {
	background: var(--s5);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s5-rgb), 0.35);
}

.status-badge-lg.s6 {
	background: var(--s6);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s6-rgb), 0.35);
}

.status-badge-lg.s7 {
	background: var(--s7);
	color: var(--status-on-solid, #ffffff);
	border: 1px solid rgba(var(--s7-rgb), 0.35);
}

/* CRITICAL INFO BLOCK (Defect & Specs) */
.tech-info-grid {
	display: block;
	/* Full width as requested */
}

@media (max-width: 800px) {
	.tech-info-grid {
		display: flex;
		flex-direction: column-reverse;
	}
}

.defect-box {
	background: var(--bg-card);
	border-left: 4px solid var(--warning);
	/* Amber warning color */
	padding: 5px 0;
	/* Minimal vertical padding inside */
}

.defect-label {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 800;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.defect-content {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.5;
	font-weight: 600;
}

/* Security / Specs Box */
.security-box {
	background: var(--bg-body);
	border-radius: 5px;
	padding: 16px;
	border: 1px solid var(--border-color);
}

.sb-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

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

.sb-label {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 700;
	text-transform: uppercase;
}

.sb-val {
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	color: var(--text-secondary);
	background: var(--bg-card);
	padding: 4px 8px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
}

.sb-val.password {
	color: #be123c;
	background: var(--surface-elevated)1f2;
	border-color: #fecaca;
	font-weight: 700;
	font-size: 15px;
}

/* Sidebar Elements */
.sidebar-section-title {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 800;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Status Control Grid */
.status-control-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

/* Redesigned Status Buttons */
.pro-status-btn {
	display: flex;
	align-items: center;
	padding: 14px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.pro-status-btn::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--border-color);
}

.pro-status-btn:hover {
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pro-status-btn .ps-icon {
	margin-right: 12px;
	color: var(--text-muted);
	display: flex;
}

.pro-status-btn .ps-text {
	font-weight: 800;
	font-size: 14px;
	color: var(--text-main);
	text-transform: uppercase;
}

/* Status Specific Styles */
.pro-status-btn.s3::before {
	background: var(--primary);
}

/* Work */
.pro-status-btn.s3:hover {
	border-color: #bfdbfe;
	background: var(--success-light);
}

.pro-status-btn.s3 .ps-icon {
	color: var(--primary);
}

.pro-status-btn.s4::before {
	background: var(--success);
}

/* Ready */
.pro-status-btn.s4:hover {
	border-color: #a7f3d0;
	background: #ecfdf5;
}

.pro-status-btn.s4 .ps-icon {
	color: var(--success);
}

.pro-status-btn.s5::before {
	background: var(--danger);
}

/* Refusal */
.pro-status-btn.s5:hover {
	border-color: #fca5a5;
	background: #fef2f2;
}

.pro-status-btn.s5 .ps-icon {
	color: var(--danger);
}

/* Team List */
.team-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--surface-secondary);
}

.team-avatar {
	width: 32px;
	height: 32px;
	background: var(--surface-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted);
}

.team-info {
	display: flex;
	flex-direction: column;
}

.team-role {
	font-size: 10px;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
}

.team-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
}

/* Doc Links */
.doc-links-row {
	display: flex;
	gap: 8px;
}

.doc-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: var(--surface-secondary);
	border: 1px solid var(--border-light);
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.2s;
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
}

.doc-link:hover {
	background: var(--surface-elevated);
	border-color: var(--border-color);
	color: var(--text-secondary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.doc-link .material-icons {
	font-size: 20px;
	margin-bottom: 4px;
	color: var(--text-muted);
}

.doc-link:hover .material-icons {
	color: var(--primary);
}


/* --- BLOG-STYLE ORDER LIST --- */

.device_list_DISABLED {
	display: flex !important;
	flex-direction: column !important;
	gap: 30px !important;
	padding: 15px;
	max-width: 100%;
	margin: 0 auto;
}

/* Groups (Status Blocks) */
.kanban-col {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.kanban-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
	/* Spacing between cards */
}

/* Headers */
.device-group-header {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 15px;
	letter-spacing: 1px;
	padding-left: 5px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.device-group-header .count-badge {
	background: var(--border-light);
	color: var(--text-secondary);
	padding: 2px 8px;
	border-radius: 5px;
	font-size: 11px;
}

/* CARD DESIGN (The "Blog Post" look) */
.device-row-DISABLED {
	background: var(--surface-elevated);
	border-radius: 5px;
	border: 1px solid var(--surface-secondary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
	transition: all 0.2s ease;
	margin: 0 !important;
	width: 100% !important;
	position: relative;
	overflow: hidden;
}

.device-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
	border-color: var(--border-color);
	z-index: 2;
}

/* Card Content Grid */
.device-link-DISABLED {
	display: grid !important;
	grid-template-columns: 200px 1fr 200px !important;
	/* Client | Main Info | Meta */
	gap: 24px !important;
	padding: 20px !important;
	text-decoration: none !important;
	color: var(--text-secondary) !important;
	align-items: center !important;
}

/* Column 1: Client & Avatar/Icon */
.card-head {
	display: flex;
	align-items: center;
	gap: 15px;
}

.d-icon-circle {
	width: 48px;
	height: 48px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
	/* Styles are inline or status-based */
}

/* Icon Colors based on Status */
.d-icon-circle.s1 {
	background: var(--success-light);
	color: var(--primary);
}

/* New */
.d-icon-circle.s2 {
	background: var(--surface-elevated)beb;
	color: var(--warning);
}

/* Waiting */
.d-icon-circle.s3 {
	background: #eef2ff;
	color: var(--primary);
}

/* Working */
.d-icon-circle.s4 {
	background: #ecfdf5;
	color: var(--success);
}

/* Ready */
.d-icon-circle.s5 {
	background: #fef2f2;
	color: var(--danger);
}

/* Refusal */
.d-icon-circle.s6 {
	background: #f0fdfa;
	color: #14b8a6;
}

/* Issued */
.d-icon-circle.s7 {
	background: var(--surface-secondary);
	color: var(--text-muted);
}

/* Archive */

.card-client {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.d-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--gray-800);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.d-phone {
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 500;
	margin-top: 2px;
}

/* Column 2: Main Info (Model, Defect, Note) */
.card-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.d-model {
	font-size: 18px;
	font-weight: 800;
	color: var(--navy-dark);
}

.d-defect {
	font-size: 14px;
	color: var(--danger);
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.d-note {
	font-size: 13px;
	color: var(--text-muted);
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Column 3: Meta (ID, Date, Price) */
.card-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
	justify-content: center;
}

.d-id {
	background: var(--surface-secondary);
	color: var(--text-muted);
	font-family: monospace;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 5px;
}

.d-date {
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 500;
}

.d-total {
	font-size: 18px;
	font-weight: 900;
	color: var(--navy-dark);
}

.d-estimated {
	display: none;
}

/* Hide estimated price in list view for cleaner look, or show it small */

/* Left Border Indicator */
.device-row.s1 {
	border-left: 4px solid var(--s1);
}

.device-row.s2 {
	border-left: 4px solid var(--s2);
}

.device-row.s3 {
	border-left: 4px solid var(--s3);
}

.device-row.s4 {
	border-left: 4px solid var(--s4);
}

.device-row.s5 {
	border-left: 4px solid var(--s5);
}

.device-row.s6 {
	border-left: 4px solid var(--s6);
}

.device-row.s7 {
	border-left: 4px solid var(--s7);
}

/* Old Ribbon */
.old-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	overflow: hidden;
	pointer-events: none;
}

.old-ribbon span {
	position: absolute;
	top: 12px;
	right: -20px;
	width: 80px;
	transform: rotate(45deg);
	background: var(--danger);
	color: var(--surface-elevated);
	font-size: 10px;
	font-weight: 800;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 2px 0;
}

/* RESPONSIVENESS */
@media (max-width: 900px) {
	.device-link-DISABLED {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto auto;
		gap: 15px !important;
		padding: 15px !important;
	}

	.card-head {
		margin-bottom: 5px;
	}

	.card-foot {
		align-items: flex-start;
		text-align: left;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px dashed var(--border-light);
		width: 100%;
	}

	.d-total {
		font-size: 16px;
	}
}

/* --- RBAC Utilities --- */
.checkbox-item {
    display: flex;
    align-items: center;
    transition: background 0.2s;
}
.checkbox-item:hover {
    background: rgba(89, 75, 241, 0.05); /* Based on primary color */
}
.avatar-sm {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.hover-bg-light:hover { background: var(--bg-body); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.items-start { align-items: flex-start; }
.gap2 { gap: 0.5rem; }
.gap3 { gap: 0.75rem; }
.mb4 { margin-bottom: 1rem; }
.p0 { padding: 0 !important; }
.overflow-hidden { overflow: hidden; }
.block { display: block; }

/* ================================================================== */
/* Legacy layers - used module */
/* Source: design/style_used.css */
/* ================================================================== */
/* Used Device Detail Card Styles */
#used-detail {
	padding: 0;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.ud-header-panel {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 24px;
}

.ud-header-main {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
}

.ud-title-wrap {
	flex: 1;
	min-width: 300px;
}

.ud-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 20px;
	padding: 0;
	align-items: start;
}

@media(max-width:992px) {
	.ud-grid {
		grid-template-columns: 1fr;
	}
}

.ud-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	padding: 16px;
	margin-bottom: var(--gap);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}

/* Product Display Area (Image + Title) */
.ud-product-display {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

@media(max-width:768px) {
	.ud-product-display {
		flex-direction: column;
	}
}

.ud-image-wrap {
	width: 180px;
	height: 180px;
	border-radius: 5px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.02);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

html[data-theme-resolved="dark"] .ud-image-wrap {
	background: rgba(255, 255, 255, 0.02);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ud-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
}

.ud-image-wrap .material-icons {
	font-size: 64px;
	opacity: 0.1;
}

.ud-card-title {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}

.ud-card-title i {
	font-size: 18px;
	color: var(--primary);
}

.ud-field {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
	gap: 16px;
}

html[data-theme-resolved="dark"] .ud-field {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.ud-field.col-flow {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-bottom: none;
}

.ud-field:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ud-field:first-of-type {
	padding-top: 0;
}

.ud-label {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 500;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ud-label i {
	font-size: 18px;
	opacity: 0.6;
}

.ud-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-main);
	text-align: right;
}

.ud-value.mono {
	font-family: monospace;
	font-size: 0.95rem;
	background: rgba(0, 0, 0, 0.04);
	padding: 4px 8px;
	border-radius: 5px;
}

html[data-theme-resolved="dark"] .ud-value.mono {
	background: rgba(255, 255, 255, 0.05);
}

.ud-value.big {
	font-size: 1.4rem;
	font-weight: 900;
}

.ud-value.green {
	color: var(--success);
}

.ud-value.primary {
	color: var(--primary);
}

/* Description Formatting */
.ud-description-content {
	background: rgba(0, 0, 0, 0.02);
	padding: 20px;
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
	color: var(--text-main);
	border: 1px solid rgba(0, 0, 0, 0.04);
	line-height: 1.6;
	font-size: 0.95rem;
}

html[data-theme-resolved="dark"] .ud-description-content {
	background: rgba(255, 255, 255, 0.02);
	border-color: rgba(255, 255, 255, 0.03);
}

.ud-description-content * {
	max-width: 100%;
}

.ud-description-content b,
.ud-description-content strong {
	font-weight: 700;
	color: var(--text-main);
}

.ud-description-content i,
.ud-description-content em {
	font-style: italic;
}

.ud-description-content u {
	text-decoration: underline;
}

.ud-description-content s {
	text-decoration: line-through;
	opacity: 0.6;
}

.ud-status-hero {
	background: linear-gradient(135deg, var(--bg-card), rgba(var(--primary-rgb), 0.05));
	border: 2px solid var(--primary);
	border-radius: 5px;
	padding: 24px;
	margin-bottom: 20px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
	position: relative;
	overflow: hidden;
}

.ud-status-hero::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--primary);
}

.ud-status-icon {
	font-size: 48px;
	margin-bottom: 8px;
}

.ud-status-label {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 4px;
}

.ud-status-name {
	font-size: 1.4rem;
	font-weight: 900;
	color: var(--text-main);
}

.ud-meta-badge {
	font-size: 13px;
	font-weight: 800;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 6px;
}

.ud-title {
	font-size: 1.8rem;
	font-weight: 900;
	margin-bottom: 12px;
	color: var(--text-main);
	line-height: 1.2;
}

.ud-sub {
	font-size: 0.9rem;
	color: var(--text-muted);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.ud-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 5px;
	font-size: 0.85rem;
	font-weight: 700;
}

.ud-chip.s1 {
	background: rgba(245, 158, 11, 0.12);
	color: var(--warning);
	border: 1px solid rgba(245, 158, 11, 0.2);
}

.ud-chip.s2 {
	background: rgba(34, 197, 94, 0.12);
	color: var(--success);
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.ud-chip.s3 {
	background: rgba(100, 116, 139, 0.1);
	color: var(--text-muted);
	border: 1px solid rgba(100, 116, 139, 0.2);
}

.ud-chip.s4 {
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

/* Mega Status Badge */
.ud-mega-status {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
	min-width: 250px;
}

@media(max-width:768px) {
	.ud-mega-status {
		width: 100%;
	}
}

.ud-ms-icon {
	width: 48px;
	height: 48px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.ud-ms-text {
	flex: 1;
}

.ud-ms-label {
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-muted);
	margin-bottom: 2px;
}

.ud-ms-value {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--text-main);
	line-height: 1.2;
}

/* State 1: Придбано (Warning/Orange) */
.ud-mega-status.s1 {
	background: var(--surface-elevated)beb;
	border-color: #fde68a;
	box-shadow: 0 8px 24px rgba(245, 158, 11, 0.1);
}

html[data-theme-resolved="dark"] .ud-mega-status.s1 {
	background: rgba(245, 158, 11, 0.05);
	border-color: rgba(245, 158, 11, 0.2);
	box-shadow: none;
}

.ud-mega-status.s1 .ud-ms-icon {
	background: var(--warning);
	color: var(--surface-elevated);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

html[data-theme-resolved="dark"] .ud-mega-status.s1 .ud-ms-icon {
	background: rgba(245, 158, 11, 0.8);
}

.ud-mega-status.s1 .ud-ms-value {
	color: var(--warning-hover);
}

html[data-theme-resolved="dark"] .ud-mega-status.s1 .ud-ms-value {
	color: #fbbf24;
}

/* State 2: В наявності (Success/Green) */
.ud-mega-status.s2 {
	background: #f0fdf4;
	border-color: #bbf7d0;
	box-shadow: 0 8px 24px rgba(34, 197, 94, 0.1);
}

html[data-theme-resolved="dark"] .ud-mega-status.s2 {
	background: rgba(34, 197, 94, 0.05);
	border-color: rgba(34, 197, 94, 0.2);
	box-shadow: none;
}

.ud-mega-status.s2 .ud-ms-icon {
	background: var(--success);
	color: var(--surface-elevated);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

html[data-theme-resolved="dark"] .ud-mega-status.s2 .ud-ms-icon {
	background: rgba(34, 197, 94, 0.8);
}

.ud-mega-status.s2 .ud-ms-value {
	color: var(--success);
}

html[data-theme-resolved="dark"] .ud-mega-status.s2 .ud-ms-value {
	color: #4ade80;
}

/* State 3: Продано (Muted/Slate) */
.ud-mega-status.s3 {
	background: var(--surface-secondary);
	border-color: var(--border-light);
	box-shadow: 0 8px 24px rgba(100, 116, 139, 0.1);
}

html[data-theme-resolved="dark"] .ud-mega-status.s3 {
	background: rgba(100, 116, 139, 0.05);
	border-color: rgba(100, 116, 139, 0.2);
	box-shadow: none;
}

.ud-mega-status.s3 .ud-ms-icon {
	background: var(--text-muted);
	color: var(--surface-elevated);
	box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

html[data-theme-resolved="dark"] .ud-mega-status.s3 .ud-ms-icon {
	background: rgba(100, 116, 139, 0.8);
}

.ud-mega-status.s3 .ud-ms-value {
	color: var(--text-secondary);
}

html[data-theme-resolved="dark"] .ud-mega-status.s3 .ud-ms-value {
	color: var(--text-muted);
}

/* State 4: Заброньовано (Primary/Blue) */
.ud-mega-status.s4 {
	background: var(--success-light);
	border-color: #bfdbfe;
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1);
}

html[data-theme-resolved="dark"] .ud-mega-status.s4 {
	background: rgba(59, 130, 246, 0.05);
	border-color: rgba(59, 130, 246, 0.2);
	box-shadow: none;
}

.ud-mega-status.s4 .ud-ms-icon {
	background: var(--primary);
	color: var(--surface-elevated);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

html[data-theme-resolved="dark"] .ud-mega-status.s4 .ud-ms-icon {
	background: rgba(59, 130, 246, 0.8);
}

.ud-mega-status.s4 .ud-ms-value {
	color: #1d4ed8;
}

html[data-theme-resolved="dark"] .ud-mega-status.s4 .ud-ms-value {
	color: #60a5fa;
}

/* Reservation Hero Style */
.ud-reserved-banner {
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: 5px;
	padding: 20px 24px;
	margin: 0 0 24px 0;
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

html[data-theme-resolved="dark"] .ud-reserved-banner {
	background: rgba(245, 158, 11, 0.1);
	border-color: rgba(245, 158, 11, 0.2);
}

.ud-reserved-banner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--warning);
}

.ud-rb-icon {
	width: 56px;
	height: 56px;
	background: var(--warning);
	color: var(--surface-elevated);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

html[data-theme-resolved="dark"] .ud-rb-icon {
	background: rgba(245, 158, 11, 0.8);
}

.ud-rb-content {
	flex: 1;
}

.ud-rb-label {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--warning-hover);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 2px;
}

.ud-rb-phone {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--text-main);
	line-height: 1.2;
}

.ud-rb-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-secondary);
	margin-top: 4px;
}

/* ================================================================== */
/* Legacy layers - design system */
/* Source: design/design_system.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Unified Design System (v1)
   Layout modes: data-layout="linear" | data-layout="card"
   Themes: data-theme user pref + data-theme-resolved (light|dark)
   ========================================================================== */

/* --- 0. Status utility tokens (all surfaces) --- */
:root {
	--status-1: var(--s1);
	--status-2: var(--s2);
	--status-3: var(--s3);
	--status-4: var(--s4);
	--status-5: var(--s5);
	--status-6: var(--s6);
	--status-7: var(--s7);
}

/* Status mixin classes */
.status-accent-s1, .device-row.s1, .kanban-col.s1 { --row-accent: var(--s1); --row-accent-soft: var(--s1-light); --row-accent-bg: var(--s1-bg); }
.status-accent-s2, .device-row.s2, .kanban-col.s2 { --row-accent: var(--s2); --row-accent-soft: var(--s2-light); --row-accent-bg: var(--s2-bg); }
.status-accent-s3, .device-row.s3, .kanban-col.s3 { --row-accent: var(--s3); --row-accent-soft: var(--s3-light); --row-accent-bg: var(--s3-bg); }
.status-accent-s4, .device-row.s4, .kanban-col.s4 { --row-accent: var(--s4); --row-accent-soft: var(--s4-light); --row-accent-bg: var(--s4-bg); }
.status-accent-s5, .device-row.s5, .kanban-col.s5 { --row-accent: var(--s5); --row-accent-soft: var(--s5-light); --row-accent-bg: var(--s5-bg); }
.status-accent-s6, .device-row.s6, .kanban-col.s6 { --row-accent: var(--s6); --row-accent-soft: var(--s6-light); --row-accent-bg: var(--s6-bg); }
.status-accent-s7, .device-row.s7, .kanban-col.s7 { --row-accent: var(--s7); --row-accent-soft: var(--s7-light); --row-accent-bg: var(--s7-bg); }

/* --- 0b. Global theme surfaces --- */
html,
body,
button,
input,
select,
textarea,
optgroup {
	font-family: var(--font-sans);
}

body.logged-in {
	background-color: var(--bg-body);
	color: var(--text-main);
}

.sidebar,
.app-header,
.main-layout,
#content {
	color: var(--text-main);
}

.material-icons {
	font-family: 'Material Icons';
	font-feature-settings: 'liga';
}

/* --- 1. Page shell & typography --- */
#content {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	min-width: 0;
	box-sizing: border-box;
}

main.pt9,
main.pb9,
#clients,
#devices,
#client,
#dashboard,
#accounting,
#debts,
#setting,
#location,
#stock-page,
#stock-item-page,
#wiki-page,
#wiki-post-view,
#tasks,
#my_cash,
#used-page,
#used-detail {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.unified-page-header,
.device-header-row,
.dash-header,
.dash-module-header,
.mc-module-header {
	align-items: center !important;
	gap: var(--gap) !important;
	margin-bottom: calc(var(--gap) * 1.5) !important;
}

.unified-page-title {
	font-size: var(--font-display) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	color: var(--text-main) !important;
}

.unified-page-header__left {
	display: flex;
	align-items: center;
	gap: calc(var(--gap) * 1.25);
	flex-wrap: wrap;
	min-width: 0;
}

.unified-page-header__left .unified-page-title {
	margin: 0 !important;
}

.unified-section-title {
	font-size: var(--font-title);
	font-weight: 800;
	color: var(--text-main);
	margin: 0 0 var(--space-sm);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.unified-section-title--spaced {
	margin-top: calc(var(--gap) * 2);
}

.module-subnav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--bg-body);
	padding: 4px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	flex-shrink: 0;
}

.module-subnav__tab,
.module-subnav .loc-tab {
	padding: 6px 14px;
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: var(--font-caption);
	text-decoration: none;
	color: var(--text-muted);
	transition: background var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
	background: transparent;
}

.module-subnav__tab:hover:not(.is-active):not(.active),
.module-subnav .loc-tab:not(.is-active):not(.active):hover {
	color: var(--primary);
}

.module-subnav__tab.is-active,
.module-subnav__tab.active,
.module-subnav .loc-tab.is-active,
.module-subnav .loc-tab.active {
	background: var(--primary);
	color: var(--text-white);
}

.period-comparison-hint {
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.crm-flash-alert,
.tasks-flash-alert,
.debt-flash-alert {
	margin: 0 0 var(--space-md);
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background: rgba(var(--danger-rgb), 0.1);
	border: 1px solid rgba(var(--danger-rgb), 0.22);
	color: var(--danger);
	font-size: var(--font-caption);
	font-weight: 600;
}

.trend-indicator {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 8px;
	font-weight: 600;
	font-size: 0.5em;
	padding: 3px 8px;
	border-radius: var(--radius-full);
}

.trend-indicator .material-icons {
	font-size: 10px;
	margin-right: 2px;
}

.trend-indicator--neutral {
	font-size: 0.6em;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	background: var(--border-subtle);
	color: var(--text-muted);
}

.trend-indicator--up {
	background: rgba(var(--success-rgb), 0.1);
	color: var(--success);
}

.trend-indicator--down {
	background: rgba(var(--danger-rgb), 0.1);
	color: var(--danger);
}

.page-back-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
	margin-bottom: var(--space-sm);
}

.page-back-link:hover {
	color: var(--primary);
}

.page-back-link .material-icons {
	font-size: 18px;
}

#setting .settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: calc(var(--gap) * 1.5);
	list-style: none;
	margin: 0;
	padding: 0;
}

#setting .settings-grid li a {
	display: flex;
	align-items: center;
	gap: calc(var(--gap) * 1.25);
	padding: calc(var(--gap) * 1.25);
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
	text-decoration: none;
	color: var(--text-main);
}

#setting .settings-grid li a:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary);
}

#setting .settings-grid li a icon,
#setting .settings-grid li a .material-icons {
	font-size: 2rem;
	color: var(--primary);
	flex-shrink: 0;
}

#setting .settings-grid .settings-card__title {
	font-size: var(--font-body);
	font-weight: 700;
	color: var(--text-main);
	margin: 0 0 4px;
}

#setting .settings-grid .settings-card__desc {
	font-size: var(--font-caption);
	color: var(--text-muted);
	margin: 0;
}

.acc-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: calc(var(--gap) * 1.25);
}

.acc-sum-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: calc(var(--gap) * 1.25);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.acc-sum-card__icon {
	position: absolute;
	right: -10px;
	bottom: -10px;
	opacity: 0.1;
	transform: rotate(15deg);
	pointer-events: none;
}

.acc-sum-card__icon .material-icons {
	font-size: 80px;
}

.acc-sum-card__body {
	position: relative;
	z-index: 1;
}

.acc-sum-card__label {
	display: block;
	font-size: var(--font-caption);
	color: var(--text-muted);
	font-weight: 600;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.acc-sum-card__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
}

.acc-sum-card--income .acc-sum-card__value { color: var(--success); }
.acc-sum-card--income .acc-sum-card__icon .material-icons { color: var(--success); }

.acc-sum-card--expense .acc-sum-card__icon { transform: rotate(-15deg); }
.acc-sum-card--expense .acc-sum-card__value { color: var(--danger); }
.acc-sum-card--expense .acc-sum-card__icon .material-icons { color: var(--danger); }

.acc-sum-card--balance {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(var(--primary-rgb), 0.05) 100%);
	border: 2px solid var(--primary);
	box-shadow: var(--shadow-md);
}

.acc-sum-card--balance .acc-sum-card__label {
	color: var(--primary);
	font-weight: 700;
	letter-spacing: 1px;
}

.acc-sum-card--balance .acc-sum-card__value {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -0.5px;
}

.acc-sum-card--balance .acc-sum-card__icon .material-icons {
	font-size: 90px;
	color: var(--primary);
	opacity: 0.08;
}

.acc-sum-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 4px;
}

#dashboard .active-period-indicator,
#my_cash .active-period-indicator {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: calc(var(--gap) * 1.25);
}

#dashboard .chip,
#my_cash .chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
	font-weight: 700;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

#dashboard .chip.danger,
#my_cash .chip.danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

#dashboard .dash-section,
#my_cash .dash-section {
	margin-top: calc(var(--gap) * 2);
}

#dashboard .section-desc,
#my_cash .section-desc {
	font-size: var(--font-caption);
	line-height: 1.45;
	margin-bottom: 10px;
	color: var(--text-muted);
}

.acc-summary-block {
	margin-bottom: calc(var(--gap) * 2);
}

.accounting-content {
	margin-top: calc(var(--gap) * 1.25);
}

.location-parts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--gap) * 1.75);
}

.location-empty-state {
	text-align: center;
	padding: 60px 20px;
	background: var(--bg-card);
	border-radius: var(--radius-xl);
	border: 1px dashed var(--border-color);
}

.location-empty-state__icon {
	width: 80px;
	height: 80px;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.location-empty-state__icon .material-icons {
	font-size: 40px;
}

.location-empty-state__title {
	font-size: var(--font-title);
	font-weight: 800;
	color: var(--text-main);
	margin-bottom: 16px;
}

.location-empty-state__desc {
	color: var(--text-muted);
	max-width: 500px;
	margin: 0 auto 32px;
	line-height: 1.6;
}

.dash-big-num.text-info {
	color: var(--info);
}

/* Global link reset (replaces Tailwind CDN base layer) */
a {
	color: inherit;
	text-decoration: inherit;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Form spacing utilities */
.form-group--spaced-top-sm { margin-top: 12px; }
.form-group--spaced-top { margin-top: 16px; }
.form-group--spaced-top-lg { margin-top: 24px; }

.form-row--spaced-top { margin-top: 14px; }
.form-row--spaced-top-md { margin-top: 16px; }

.crm-table-link,
.fin-table-link {
	text-decoration: underline;
	color: var(--primary);
}

.crm-table-link:hover,
.fin-table-link:hover {
	color: var(--primary-hover, var(--primary));
}

.acc-sum-card__value--negative {
	color: var(--danger);
}

.cs-val--positive { color: var(--success); }
.cs-val--negative { color: var(--danger); }

.crm-empty-notice {
	padding: calc(var(--gap) * 2);
	text-align: center;
}

.alert-box {
	border-radius: var(--radius-md);
	padding: 14px;
	margin-bottom: 20px;
	font-size: var(--font-caption);
}

.alert-box--danger {
	background: rgba(var(--danger-rgb), 0.06);
	border: 1px solid rgba(var(--danger-rgb), 0.15);
	color: var(--danger);
}

.alert-box--warning {
	background: rgba(var(--warning-rgb), 0.08);
	border: 1px solid rgba(var(--warning-rgb), 0.2);
	color: var(--warning);
}

/* Header controls - system/shell/design/page_header.css */


/* --- 3. Status filter bar (#status) --- */
.device-header-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--gap) !important;
}

.device-header-row .unified-page-title {
	flex: 0 0 auto;
}

#status {
	display: inline-flex !important;
	align-items: center !important;
	width: max-content !important;
	max-width: 100%;
	flex: 0 0 auto !important;
	gap: 6px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 6px !important;
	background: var(--bg-card) !important;
	border-radius: 100px!important;
	border: none !important;
	box-shadow: none !important;
	flex-wrap: nowrap !important;
	overflow: hidden !important;
	min-width: 0 !important;
}

#status li {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex: 0 0 auto;
}

#status li.active {
	flex: 0 0 auto !important;
}

#status li a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px;
	width: 28px;
	height: 28px;
	padding: 0 !important;
	border-radius: 100px!important;
	text-decoration: none !important;
	font-weight: 800 !important;
	font-size: var(--font-micro) !important;
	color: var(--text-white) !important;
	background: transparent !important;
	border: none !important;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast) !important;
	white-space: nowrap;
}

#status li:not(.active) a:hover {
	transform: scale(1.08);
	opacity: 0.92;
}

#status li.active a {
	width: auto !important;
	min-width: 28px;
	height: 28px !important;
	flex: 0 0 auto !important;
	padding: 0 14px !important;
	border-radius: 100px!important;
	font-size: var(--font-micro) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	justify-content: center !important;
}

#status li a::before,
#status li a::after {
	display: none !important;
}

@media (max-width: 991px) {
	.device-header-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	#status {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#status::-webkit-scrollbar {
		display: none;
	}

	#status li.active {
		flex: 1 1 auto !important;
		min-width: 0;
	}

	#status li.active a {
		flex: 1 1 auto !important;
		width: 100% !important;
		min-width: 0;
	}
}

/* --- 4. Shared list container --- */
.client_list,
.device_list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* --- 5. LINEAR layout (table-like rows) --- */
[data-layout="linear"] .client_list {
	display: flex;
	flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

[data-layout="linear"] .client_list .client-row {
	display: grid;
	grid-template-columns: 48px minmax(120px, 2fr) minmax(100px, 1.5fr) minmax(80px, 1fr) auto;
	align-items: center;
	gap: var(--gap);
	padding: var(--list-row-pad-y) var(--list-row-pad-x);
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-card);
	cursor: pointer;
	transition: background var(--transition-fast);
	position: relative;
}

[data-layout="linear"] .client_list .client-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: transparent;
	transition: background var(--transition-fast);
}

[data-layout="linear"] .client_list .client-row.warning::before {
	background: var(--warning);
}

[data-layout="linear"] .client_list .client-row:hover {
	background: var(--bg-card-hover);
}

[data-layout="linear"] .client_list .client-row:last-child {
	border-bottom: none;
}

[data-layout="linear"] .device_list {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	grid-template-columns: unset !important;
	padding: 0 !important;
}

[data-layout="linear"] .device_list .kanban-col {
	width: 100% !important;
	flex: none !important;
	min-width: 0 !important;
	max-width: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	backdrop-filter: none !important;
}

[data-layout="linear"] .device_list .device-group-header {
	margin: 1rem 0 0.5rem;
	border-radius: var(--radius-sm);
	position: static;
}

[data-layout="linear"] .device_list .kanban-items {
	gap: 8px !important;
}

[data-layout="linear"] .device_list .device-row {
	border-radius: var(--radius-sm)!important;
	border: none !important;
	box-shadow: none !important;
}

[data-layout="linear"] .device_list .device-row:hover {
	transform: none !important;
	box-shadow: none !important;
	filter: brightness(0.98);
}

[data-theme-resolved='dark'] [data-layout="linear"] .device_list .device-row:hover {
	filter: brightness(1.07);
}

/* --- 6. CARD layout (grid / bound blocks) --- */
[data-layout="card"] .client_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--gap);
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: visible;
}

[data-layout="card"] .client-row {
	display: grid;
	grid-template-columns: 48px 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"avatar name"
		"avatar phone"
		"meta meta";
	gap: 6px 14px;
	padding: 18px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
	position: relative;
	overflow: hidden;
}

[data-layout="card"] .client-row::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 55%, rgba(var(--primary-rgb), 0.04));
	pointer-events: none;
}

[data-layout="card"] .client-row.warning {
	border-color: rgba(var(--warning-rgb), 0.45);
	box-shadow: 0 0 0 1px rgba(var(--warning-rgb), 0.12), var(--shadow-sm);
}

[data-layout="card"] .client-row:hover {
	box-shadow: var(--shadow-lg);
	border-color: rgba(var(--primary-rgb), 0.25);
}

[data-layout="card"] .c-col-avatar { grid-area: avatar; align-self: start; }
[data-layout="card"] .c-col-name { grid-area: name; min-width: 0; }
[data-layout="card"] .c-col-phone { grid-area: phone; }
[data-layout="card"] .c-col-date,
[data-layout="card"] .c-col-actions {
	grid-area: meta;
}

[data-layout="card"] .c-col-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

[data-layout="card"] .c-col-actions {
	justify-content: flex-start;
	margin-top: 2px;
}

[data-layout="card"] .device_list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
	gap: var(--gap) !important;
	align-items: stretch !important;
}

[data-layout="card"] .device_list.kanban-mode {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	gap: 16px !important;
	padding-bottom: 12px !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

[data-layout="card"] .device_list.kanban-mode .kanban-col {
	flex: 0 0 min(320px, 85vw);
	scroll-snap-align: start;
}

[data-layout="card"] .device_list .device-row {
	height: 100%;
}

[data-layout="card"] .device-link {
	height: 100%;
	min-height: 0;
}

/* --- 7. Client row elements (both layouts) --- */
.c-avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--primary);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9375rem;
	flex-shrink: 0;
	box-shadow: none;
}

.client-row.warning .c-avatar {
	background: var(--warning);
	box-shadow: none;
}

.c-name {
	font-size: var(--font-title);
	font-weight: 700;
	color: var(--text-main);
	text-decoration: none;
	line-height: 1.3;
}

.c-phone {
	font-size: var(--font-caption);
	color: var(--text-muted);
	font-weight: 600;
}

.c-date-text {
	font-size: var(--font-micro);
	color: var(--text-muted);
	font-weight: 500;
}

.c-col-actions a {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
	border: 1px solid transparent;
	background: var(--bg-body);
	color: var(--text-main);
}

.c-col-actions a:hover {
	transform: none;
}

/* --- 8. Device cards - flat status tint background --- */
.device_list .device-row {
	--card-theme: var(--row-accent, var(--primary));
	--card-border: var(--row-accent-soft, rgba(var(--primary-rgb), 0.2));
	border: none;
	background: var(--bg-card);
	background-image: none;
}

.device_list .device-row.s1 { background: var(--s1-bg); }
.device_list .device-row.s2 { background: var(--s2-bg); }
.device_list .device-row.s3 { background: var(--s3-bg); }
.device_list .device-row.s4 { background: var(--s4-bg); }
.device_list .device-row.s5 { background: var(--s5-bg); }
.device_list .device-row.s6 { background: var(--s6-bg); }
.device_list .device-row.s7 { background: var(--s7-bg); }


.d-icon-circle {
	background: var(--card-theme, var(--primary)) !important;
	color: var(--surface-elevated) !important;
}

.device_list .d-status-label {
	background: var(--card-border, var(--border-subtle));
	color: var(--card-theme, var(--primary));
}

.device_list .d-id {
	color: var(--card-theme, var(--primary));
}

.device_list .d-total.has-price {
	color: var(--success) !important;
}

.device-group-header.s1 { background: var(--s1); }
.device-group-header.s2 { background: var(--s2); }
.device-group-header.s3 { background: var(--s3); }
.device-group-header.s4 { background: var(--s4); }
.device-group-header.s5 { background: var(--s5); }
.device-group-header.s6 { background: var(--s6); }
.device-group-header.s7 { background: var(--s7); }

/* Immersive page tint by active status filter */
.status-mode-1 .main-layout { background-color: rgba(var(--s1-rgb), var(--status-bg-alpha)); }
.status-mode-2 .main-layout { background-color: rgba(var(--s2-rgb), var(--status-bg-alpha)); }
.status-mode-3 .main-layout { background-color: rgba(var(--s3-rgb), var(--status-bg-alpha)); }
.status-mode-4 .main-layout { background-color: rgba(var(--s4-rgb), var(--status-bg-alpha)); }
.status-mode-5 .main-layout { background-color: rgba(var(--s5-rgb), var(--status-bg-alpha)); }
.status-mode-6 .main-layout { background-color: rgba(var(--s6-rgb), var(--status-bg-alpha)); }
.status-mode-7 .main-layout { background-color: rgba(var(--s7-rgb), var(--status-bg-alpha)); }

/* --- 9. Client profile page --- */
#client {
	gap: calc(var(--gap) * 1.5);
}

.client-header-box {
	background: var(--client-header-bg, var(--gray-800));
	border-radius: var(--card-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	color: var(--text-white);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

[data-theme-resolved='dark'] .client-header-box {
	background: var(--client-header-bg, #252525);
}

.client-header-text h1 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	color: var(--text-white);
	margin: 0 0 0.5rem;
}

.client-big-avatar {
	width: clamp(72px, 12vw, 96px);
	height: clamp(72px, 12vw, 96px);
	border-radius: 5px;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.2);
	box-shadow: none;
}

.client-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: var(--gap);
}

.stat-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 1rem 1.15rem;
	box-shadow: var(--shadow-xs);
}

.stat-card .value {
	font-size: clamp(1.15rem, 2.5vw, 1.5rem);
	font-weight: 800;
}

.stat-card .value.success {
	color: var(--success);
}

.client-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: calc(var(--gap) * 1.5);
	align-items: start;
}

.msg-error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--danger-light);
	border: 1px solid rgba(var(--danger-rgb), 0.25);
	color: var(--danger);
	font-size: var(--font-caption);
	font-weight: 600;
}

/* Tags & chips - readable in both themes */
.tags li,
.chip {
	background: var(--bg-body);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	font-size: var(--font-micro);
	font-weight: 700;
	backdrop-filter: none;
}

.client-header-box .tags li,
.client-header-box .chip {
	background: rgba(255, 255, 255, 0.12);
	color: var(--text-white);
	border-color: rgba(255, 255, 255, 0.2);
}

.chip.danger {
	background: rgba(var(--danger-rgb), 0.12);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

.card .tags li {
	background: var(--bg-body);
	color: var(--text-muted);
}

/* --- 10. Shared cards, tables, pagination --- */
.card {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	box-shadow: var(--shadow-xs);
}

.card-title {
	font-size: var(--font-caption);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

/* CRM tables - див. блок «CRM data tables» нижче */

/* Pagination */
.pagination,
.paginator {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: calc(var(--gap) * 1.5);
}

.pagination a,
.paginator a {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-main);
	font-size: var(--font-caption);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.pagination a:hover,
.paginator a:hover,
.pagination a.active,
.paginator a.active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--text-white);
}

/* --- 11. Mobile responsive --- */
@media (max-width: 900px) {
	[data-layout="linear"] .client_list .client-row {
		grid-template-columns: 44px 1fr auto;
	}

	[data-layout="linear"] .c-col-date {
		display: none;
	}

	.client-content-layout {
		grid-template-columns: 1fr;
	}

	.client-header-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.client-header-info {
		flex-direction: row;
		width: 100%;
	}

	.device-header-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}
}

@media (max-width: 600px) {
	[data-layout="linear"] .client_list .client-row {
		grid-template-columns: 40px 1fr;
		grid-template-areas:
			"avatar name"
			"avatar phone"
			"actions actions";
	}

	[data-layout="linear"] .c-col-avatar { grid-area: avatar; }
	[data-layout="linear"] .c-col-name { grid-area: name; }
	[data-layout="linear"] .c-col-phone { grid-area: phone; }
	[data-layout="linear"] .c-col-actions {
		grid-area: actions;
		justify-content: flex-start;
		margin-top: 4px;
	}

	[data-layout="card"] .client_list,
	[data-layout="card"] .device_list {
		grid-template-columns: 1fr !important;
	}

	[data-layout="card"] .device_list.kanban-mode .kanban-col {
		flex-basis: min(280px, 92vw);
	}

	.c-name {
		font-size: 1rem;
	}

	.header-controls {
		gap: 6px;
	}
}

@media (max-width: 767px) {
	.header-right {
		gap: 8px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.header-today-stats {
		display: none !important;
	}
}

/* --- 12. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	[data-layout="card"] .client-row:hover,
	.device_list .device-row:hover {
		transform: none !important;
	}
}

@media (max-width: 380px) {
	.control-group {
		padding: 2px;
	}

	.unified-page-title {
		font-size: 1.2rem !important;
	}
}

/* --- 13. Status chips (detail pages) --- */
.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
}

.status-chip.s1 { background: var(--s1); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s1-rgb), 0.35); }
.status-chip.s2 { background: var(--s2); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s2-rgb), 0.35); }
.status-chip.s3 { background: var(--s3); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s3-rgb), 0.35); }
.status-chip.s4 { background: var(--s4); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s4-rgb), 0.35); }
.status-chip.s5 { background: var(--s5); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s5-rgb), 0.35); }
.status-chip.s6 { background: var(--s6); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s6-rgb), 0.35); }
.status-chip.s7 { background: var(--s7); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s7-rgb), 0.35); }

.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* ==========================================================================
   14. DASHBOARD - KPI, filters, forecast chart
   ========================================================================== */

#dashboard .dash-section {
	margin-top: calc(var(--gap) * 2);
}

#dashboard .active-period-indicator {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: calc(var(--gap) * 1.25);
}

#dashboard .chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
	font-weight: 700;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

#dashboard .chip.danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

#dashboard .crm-table--metrics th,
#dashboard .crm-table--metrics td,
#dashboard .fin-table th,
#dashboard .fin-table td {
	padding: 9px 12px;
}

#dashboard .crm-table--metrics th,
#dashboard .fin-table th {
	font-size: 0.6875rem;
	padding: 8px 12px;
}

#dashboard .crm-table--metrics td,
#dashboard .fin-table td {
	font-size: 0.8125rem;
}

#dashboard .section-desc {
	font-size: 0.8125rem;
	line-height: 1.45;
	margin-bottom: 10px;
}

/* Forecast chart - bar animation (was missing) */
.dash-analytical-section {
	margin-top: calc(var(--gap) * 2);
	margin-bottom: calc(var(--gap) * 2);
}

.analytical-card {
	background: var(--bg-card);
	border-radius: var(--card-radius);
	padding: var(--gap);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

.chart-header-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--gap);
	padding-bottom: var(--gap);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--gap);
}

.chart-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chart-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--primary-gradient);
	color: var(--text-white);
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
	font-weight: 700;
}

.chart-badge.secondary {
	background: var(--bg-body);
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	box-shadow: none;
}

.chart-badge .material-icons {
	font-size: 16px;
}

.chart-stats-mini {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.chart-stats-mini .stat-item strong {
	color: var(--text-main);
	font-weight: 800;
}

.chart-container {
	width: 100%;
	height: 360px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 48px 8px 8px;
	background: var(--bg-body);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	overflow: hidden;
}

.chart-overlay-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(var(--primary-rgb), 0.04) 100%);
	pointer-events: none;
	z-index: 1;
}

.chart-grid {
	position: absolute;
	inset: 48px 8px 56px;
	pointer-events: none;
	z-index: 0;
}

.chart-grid .grid-line.horizontal {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border-color);
	opacity: 0.45;
}

.chart-average-line {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 0;
	border-top: 2px dashed var(--warning);
	z-index: 2;
	pointer-events: none;
	opacity: 0.85;
}

.chart-average-line .avg-label {
	position: absolute;
	right: 0;
	top: -22px;
	font-size: 10px;
	font-weight: 700;
	color: var(--warning);
	background: var(--bg-card);
	padding: 2px 8px;
	border-radius: 5px;
	border: 1px solid rgba(var(--warning-rgb), 0.25);
	white-space: nowrap;
}

.chart-bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	gap: 4px;
	position: relative;
	z-index: 3;
	padding-bottom: 4px;
}

.chart-bar-wrapper {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 6px;
}

.chart-bar {
	width: 100%;
	max-width: 28px;
	min-height: 4px;
	height: 0;
	border-radius: 5px 5px 5px 5px;
	position: relative;
	cursor: help;
	transition: filter var(--transition-fast), transform var(--transition-fast);
}

.bar-history {
	background: linear-gradient(to top, var(--primary), var(--primary-light));
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

.bar-forecast {
	background: linear-gradient(to top, var(--info), #93c5fd);
	box-shadow: 0 4px 12px rgba(var(--info-rgb), 0.2);
	opacity: 0.92;
}

.animate-chart .chart-bar.main-bar {
	animation: dashBarGrow 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes dashBarGrow {
	from {
		height: 0;
		opacity: 0.3;
	}
	to {
		height: var(--bar-height);
		opacity: 1;
	}
}

.chart-bar:hover {
	filter: brightness(1.08);
	transform: scaleY(1.02);
	transform-origin: bottom;
}

.chart-bar-value {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 800;
	color: var(--text-muted);
	white-space: nowrap;
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

.chart-bar:hover .chart-bar-value {
	opacity: 1;
}

.chart-month-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted);
	text-align: center;
	line-height: 1.1;
	white-space: nowrap;
}

.chart-forecast-mark {
	color: var(--info);
	font-weight: 900;
}

.value-marker {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.value-marker .material-icons {
	font-size: 14px;
}

.min-marker {
	background: var(--danger-light);
	color: var(--danger);
}

.max-marker {
	background: var(--success-light);
	color: var(--success);
}

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--font-micro);
	color: var(--text-muted);
	font-weight: 600;
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	display: inline-block;
}

.legend-dot.history {
	background: linear-gradient(to top, var(--primary), var(--primary-light));
}

.legend-dot.forecast {
	background: linear-gradient(to top, var(--info), #93c5fd);
}

/* Dashboard KPI card accents */
#dashboard .dash-card.orders .dash-icon { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); }
#dashboard .dash-card.clients .dash-icon { background: var(--info-light); color: var(--info); }
#dashboard .dash-card.efficiency .dash-icon { background: var(--success-light); color: var(--success); }
#dashboard .dash-card.refusals .dash-icon { background: var(--danger-light); color: var(--danger); }
#dashboard .dash-card.time .dash-icon { background: rgba(var(--s2-rgb), 0.15); color: var(--s2); }
#dashboard .dash-card.revenue .dash-icon { background: var(--success-light); color: var(--success); }
#dashboard .dash-card.costs .dash-icon { background: var(--danger-light); color: var(--danger); }
#dashboard .dash-card.profit-main {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent);
	border-color: rgba(var(--primary-rgb), 0.2);
}

@media (max-width: 768px) {
	.chart-container {
		height: 280px;
		padding-top: 40px;
	}

	.chart-bar {
		max-width: 18px;
	}

	.chart-month-label {
		font-size: 9px;
	}

	.chart-bar-value {
		display: none;
	}

	.chart-stats-mini {
		width: 100%;
	}

	#dashboard .crm-table-wrap,
	#dashboard .fin-table-container {
		padding: 8px;
		border-radius: var(--radius-sm);
	}

	#dashboard .crm-table--metrics th,
	#dashboard .crm-table--metrics td,
	#dashboard .fin-table th,
	#dashboard .fin-table td,
	#my_cash .crm-table--metrics th,
	#my_cash .crm-table--metrics td,
	.crm-table.stats_table .stats_col_main,
	.crm-table.stats_table .stats_col_num {
		padding: 7px 10px;
	}

	#dashboard .crm-table--metrics th,
	#dashboard .fin-table th,
	#my_cash .crm-table--metrics th,
	.crm-table.stats_table th.stats_col_num {
		font-size: 0.625rem;
	}

	#dashboard .crm-table--metrics td,
	#dashboard .fin-table td,
	#my_cash .crm-table--metrics td,
	.crm-table.stats_table td {
		font-size: 0.75rem;
	}

	.crm-table :is(th, td).stats_col_main,
	.crm-table th:first-child:not(.stats_col_num),
	.crm-table td:first-child:not(.stats_col_num),
	.fin-table th:first-child:not(.stats_col_num),
	.fin-table td:first-child:not(.stats_col_num),
	.acc-table th:first-child:not(.stats_col_num),
	.acc-table td:first-child:not(.stats_col_num),
	.stock-table th:first-child:not(.stats_col_num),
	.stock-table td:first-child:not(.stats_col_num) {
		min-width: 250px !important;
		width: auto !important;
		max-width: none !important;
	}

	.crm-table :is(th, td).stats_col_num,
	.crm-table th:nth-child(n + 2):not(.stats_col_main):not(.col-actions),
	.crm-table td:nth-child(n + 2):not(.stats_col_main):not(.col-actions),
	.fin-table th:nth-child(n + 2):not(.stats_col_main),
	.fin-table td:nth-child(n + 2):not(.stats_col_main) {
		width: 150px !important;
		min-width: 100px !important;
		max-width: 150px !important;
	}

	.stats_table_period_hint {
		font-size: 0.7rem;
	}

	#dashboard .dash-section h2 {
		font-size: 1rem !important;
		margin-bottom: 8px;
	}

	#dashboard .active-period-indicator small {
		font-size: 0.75rem;
	}
}

@media (max-width: 480px) {
	.chart-container {
		height: 240px;
	}

	.chart-month-label {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: 8px;
		max-height: 36px;
		overflow: hidden;
	}
}

/* Shell layout - shell/design/ */


/* Chart - flat bars */
.bar-history {
	background: var(--primary) !important;
	box-shadow: none !important;
}

.bar-forecast {
	background: var(--info) !important;
	opacity: 0.75;
	box-shadow: none !important;
}

.chart-badge {
	background: var(--primary);
	border-radius: var(--radius-sm);
	box-shadow: none;
}

#dashboard .dash-card.profit-main {
	background: var(--bg-card);
	border-color: var(--border-color);
}

/* Immersive status page tint - very subtle gray, not colored flood */
.status-mode-1 .main-layout,
.status-mode-2 .main-layout,
.status-mode-3 .main-layout,
.status-mode-4 .main-layout,
.status-mode-5 .main-layout,
.status-mode-6 .main-layout,
.status-mode-7 .main-layout,
.status-mode-0-1-2-3-4-5 .main-layout {
	background-color: var(--bg-main) !important;
}

/* ============================================================
   16. Client table - always row list (ignores layout toggle)
   ============================================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.crm-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-caption);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
}

#clients .crm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 4px;
}

#clients .client-table.stats_table {
	table-layout: fixed;
	width: 100%;
	min-width: min(100%, 600px) !important;
}

#clients .client-table col.client-col-avatar-w {
	width: 44px;
	min-width: 44px;
	max-width: 44px;
}

#clients .client-table :is(th, td).client-col-avatar {
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	padding: 8px 6px !important;
	text-align: center !important;
	vertical-align: middle !important;
	white-space: nowrap;
}

#clients .client-table :is(th, td).stats_col_main {
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
	vertical-align: middle !important;
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: anywhere;
}

#clients .client-table :is(th, td).client-col-phone {
	width: 132px !important;
	min-width: 116px !important;
	max-width: 148px !important;
	text-align: left !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

#clients .client-table :is(th, td).client-col-date {
	width: 104px !important;
	min-width: 96px !important;
	max-width: 112px !important;
	text-align: right !important;
	white-space: nowrap;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

#clients .client-table :is(th, td).col-actions {
	width: 148px !important;
	min-width: 132px !important;
	max-width: 160px !important;
	text-align: right !important;
	white-space: nowrap;
	vertical-align: middle;
}

#clients .client-table thead th {
	padding: 8px 12px;
	font-size: 0.6875rem;
}

#clients .client-table td {
	padding: 9px 12px;
	font-size: 0.8125rem;
}

/* One compact row per client - table display enforced */
#clients .client-table tbody tr.client-table-row {
	cursor: pointer;
	transition: background var(--transition-fast);
}

#clients .client-table tbody tr.client-table-row::before,
#clients .client-table tbody tr.client-table-row::after {
	display: none !important;
	content: none !important;
}

#clients .client-table tbody tr.client-table-row:hover {
	background: var(--bg-card-hover) !important;
}

#clients .client-table tbody tr.client-table-row.warning {
	background: var(--warning-light) !important;
}

#clients .client-table tbody tr.client-table-row.warning:hover {
	background: rgba(var(--warning-rgb), 0.18) !important;
}

#clients .client-table .c-name {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-main);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	line-height: 1.35;
}

#clients .client-table .c-name:hover {
	color: var(--primary);
	text-decoration: none;
}

#clients .client-table .c-phone,
#clients .client-table .c-date-text {
	font-size: 0.8125rem;
	color: var(--text-muted);
	font-weight: 500;
}

#clients .client-table .client-avatar {
	width: 32px;
	height: 32px;
	font-size: 0.8125rem;
}

#clients .client-table .c-col-actions {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

#clients .client-table .c-btn,
#clients .client-table .btn-social {
	width: 28px;
	height: 28px;
	min-width: 28px;
}

#clients .client-table .c-btn .material-icons,
#clients .client-table .btn-social .material-icons {
	font-size: 16px;
}

#clients .pagination {
	margin-top: 1rem;
}

@media (max-width: 900px) {
	#clients .client-table :is(th, td).client-col-date,
	#clients .client-table col.client-col-date-w {
		display: none !important;
	}
}

@media (max-width: 768px) {
	#clients .crm-table-wrap {
		padding: 8px;
		border-radius: var(--radius-sm);
	}

	#clients .client-table.stats_table {
		min-width: 420px !important;
	}

	#clients .client-table :is(th, td) {
		padding: 7px 8px !important;
		font-size: 0.75rem;
	}

	#clients .client-table :is(th, td).client-col-avatar {
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		padding: 7px 4px !important;
	}

	#clients .client-table .client-avatar {
		width: 28px;
		height: 28px;
		font-size: 0.75rem;
	}

	#clients .client-table :is(th, td).client-col-phone {
		min-width: 100px !important;
		max-width: 128px !important;
	}

	#clients .client-table :is(th, td).col-actions {
		min-width: 116px !important;
		max-width: 132px !important;
	}
}

@media (max-width: 640px) {
	#clients .client-table :is(th, td).client-col-phone,
	#clients .client-table col.client-col-phone-w {
		display: none !important;
	}

	#clients .client-table.stats_table {
		min-width: 320px !important;
	}

	#clients .client-table .c-btn,
	#clients .client-table .btn-social {
		width: 26px;
		height: 26px;
		min-width: 26px;
	}
}

/* ============================================================
   17. Unified UI components (amoCRM standard)
   ============================================================ */

/* Typography scale */
body,
.main-layout,
.app-content {
	font-family: var(--font-sans);
	font-size: var(--font-body, 0.9375rem);
	color: var(--text-main);
	line-height: 1.5;
}

h1, .unified-page-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--text-main);
	line-height: 1.3;
}

h2, h3, h4 {
	font-weight: 600;
	color: var(--text-main);
}

/* Buttons & forms - Bootstrap 5.3 (bootstrap-theme.css + crm-bootstrap-bridge.css) */

.date-filter-popover .btn-popover-submit {
	width: 100%;
	margin-top: 12px;
	height: 42px;
}

/* Legacy aliases (поступова міграція) */
.task-btn,
.d-row-btn,
.btn-show-range:not(.btn) {
	/* стилі нижче в модулях або замініть на .btn … */
}

.stock-hdr-btn--icon {
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	min-width: 30px !important;
}

.modal-body .form-group.button .btn,
.modal-body .form_item.button .btn,
.modal-body .btn-block,
.dlg_body .form-group.button .btn,
.dlg_body .form_item.button .btn,
.dlg_body .btn-block {
	min-height: var(--form-height, 36px);
}

/* --- Modals: system/dialog/design/dialog_core.css (dlg_*) - legacy modal-overlay видалено --- */

/* Modal & page forms share labels */
.modal-body label,
.dlg_body label {
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: none;
	letter-spacing: normal;
}

/* Auth page - same field standard as CRM */
.auth-form .form-control,
.auth-form-panel .form-control {
	height: var(--form-height-touch, 40px) !important;
	min-height: var(--form-height-touch, 40px) !important;
	border-width: 1px !important;
	border-radius: var(--radius-sm)!important;
	font-size: var(--font-caption) !important;
	box-shadow: none !important;
	transform: none !important;
}

.auth-form .form-control:focus,
.auth-form-panel .form-control:focus {
	outline: var(--form-focus-outline) !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

/* Auth inputs with leading icon - design-system symmetric padding must not overlap icon */
.auth-form .input-with-icon,
.auth-form-panel .input-with-icon {
	position: relative;
	display: block;
}

.auth-form .input-with-icon .material-icons,
.auth-form-panel .input-with-icon .material-icons {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--text-muted);
	font-size: 20px;
	z-index: 1;
	line-height: 1;
}

.auth-form .input-with-icon .form-control,
.auth-form-panel .input-with-icon .form-control {
	padding-left: 42px !important;
	padding-right: var(--form-pad-x, 12px) !important;
}

.auth-form .input-with-icon .form-control:focus + .material-icons,
.auth-form-panel .input-with-icon .form-control:focus + .material-icons,
.auth-form .input-with-icon .form-control:not(:placeholder-shown) + .material-icons,
.auth-form-panel .input-with-icon .form-control:not(:placeholder-shown) + .material-icons {
	color: var(--primary);
}

.auth-form .btn-primary,
.auth-form-panel .btn-primary {
	width: 100%;
	min-height: var(--form-height-touch, 44px);
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	border-radius: var(--radius-sm);
	font-size: var(--font-body);
	font-weight: 600;
	transform: none !important;
}

.auth-form-footer--muted {
	margin-top: 24px;
	text-align: center;
}

.auth-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
}

.auth-back-link .material-icons {
	font-size: 16px;
}

.auth-form label,
.auth-form-panel label {
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-secondary);
}

/* Links - inherit by default; blue only in prose/content */
a {
	color: inherit;
	text-decoration: inherit;
}

.link-text,
:is(.wiki-article-body, .wiki-lead, .prose, .text-content, .auth-form-footer) a:not(
	.btn, .nav-link, .control-btn, .c-btn, .c-name, .sidebar-btn-add,
	.wiki-cat-tab, .client-feed-add, .task-btn,
	.device-link, .used-link, .device-client-card__phone, .client-dossier__phone
) {
	color: var(--text-link);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.link-text:hover,
:is(.wiki-article-body, .wiki-lead, .prose, .text-content, .auth-form-footer) a:not(
	.btn, .nav-link, .control-btn, .c-btn, .c-name, .sidebar-btn-add,
	.wiki-cat-tab, .client-feed-add, .task-btn,
	.device-link, .used-link, .device-client-card__phone, .client-dossier__phone
):hover {
	color: var(--text-link-hover);
}

.main-layout a:not(.btn):not(.nav-link):not(.c-name):not(.c-btn):not(.paginator a):not(.pagination a) {
	text-decoration: none;
}

/* Block / card anchors - never underline (whole area is clickable) */
:where(
	.device-link,
	.used-link,
	.nav-link,
	.sidebar-loc-link,
	.control-btn,
	.c-btn,
	.sidebar-btn-add,
	.btn,
	.loc-link,
	.wiki-cat-tab, .client-feed-add, .task-btn,
	.task-btn,
	.task-badge--link,
	.stock-side-link,
	.device-info-link,
	.wiki-breadcrumb-link
),
:where(
	.device-link,
	.used-link,
	.nav-link,
	.sidebar-loc-link,
	.control-btn,
	.c-btn,
	.sidebar-btn-add,
	.btn,
	.loc-link,
	.wiki-cat-tab, .client-feed-add, .task-btn,
	.task-btn,
	.task-badge--link,
	.stock-side-link,
	.device-info-link,
	.wiki-breadcrumb-link
):hover,
:where(.device-link, .used-link):hover *,
.device-link,
.device-link:hover,
.device-link *,
.device-link:hover * {
	text-decoration: none !important;
}

/* Inline text links only - underline on hover */
.main-layout :is(.wiki-article-body, .wiki-lead, .prose, .text-content) a:not(.btn):not(.nav-link):hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Filled / primary controls - readable text on hover in all themes */
:where(a, button).btn-primary,
.btn-primary,
.sidebar-btn-add,
.control-btn.is-active {
	color: var(--text-white) !important;
	border-color: transparent;
}

:where(a, button).btn-primary:hover,
:where(a, button).btn-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.sidebar-btn-add:hover,
.sidebar-btn-add:focus-visible,
.control-btn.is-active:hover,
.control-btn.is-active:focus-visible {
	color: var(--text-white) !important;
	background: var(--primary-hover) !important;
}

:where(a, button).btn-danger,
.btn-danger {
	color: var(--text-white) !important;
}

:where(a, button).btn-danger:hover,
:where(a, button).btn-danger:focus-visible,
.btn-danger:hover,
.btn-danger:focus-visible {
	color: var(--text-white) !important;
}

.btn-secondary,
.btn-outline,
:where(a, button).btn-secondary,
:where(a, button).btn-outline {
	color: var(--text-main) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
:where(a, button).btn-secondary:hover,
:where(a, button).btn-outline:hover {
	color: var(--text-main) !important;
}

.control-btn {
	color: var(--text-muted) !important;
}

.control-btn:hover {
	color: var(--text-main) !important;
	background: var(--border-subtle) !important;
}

/* Contact action buttons */
.c-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	flex-shrink: 0;
}

.c-btn .material-icons {
	font-size: 18px;
}

.c-btn:hover {
	transform: none !important;
	filter: none !important;
}

.c-btn.call {
	background: var(--success-light, rgba(var(--success-rgb), 0.12));
	color: var(--success);
}

.c-btn.call:hover {
	background: var(--success);
	color: var(--text-white);
}

.c-btn.viber {
	background: var(--viber-light);
	color: var(--viber);
}

.c-btn.viber:hover {
	background: var(--viber);
	color: var(--text-white);
}

.c-btn.telegram {
	background: var(--telegram-light);
	color: var(--telegram);
}

.c-btn.telegram:hover {
	background: var(--telegram);
	color: var(--text-white);
}

.c-btn.whatsapp {
	background: var(--whatsapp-light);
	color: var(--whatsapp);
}

.c-btn.whatsapp:hover {
	background: var(--whatsapp);
	color: var(--text-white);
}

/* Chips / tags */
.tags li,
.chip,
.badge {
	font-size: var(--font-micro);
	font-weight: 600;
	border-radius: var(--radius-sm);
}

/* Pagination - amo flat */
.pagination {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
}

.pagination li {
	margin: 0;
}

.pagination a {
	min-width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-main);
	font-size: var(--font-caption);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pagination a:hover {
	background: var(--gray-100);
	border-color: var(--border-color);
	color: var(--primary);
}

.pagination li.active a,
.pagination a.active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--text-white);
}

[data-theme-resolved='dark'] .pagination a:hover {
	background: var(--bg-card-hover);
}

/* ============================================================
   CRM data tables - єдиний стандарт для всіх модулів
   Розмітка:
   <div class="crm-table-wrap">
     <table class="crm-table">
       <thead><tr><th>...</th></tr></thead>
       <tbody>...</tbody>
     </table>
   </div>
   Модифікатори: --metrics (широкі фін. колонки), --inset (всередині картки)
   ============================================================ */

.crm-table-wrap,
.fin-table-container,
.stock-table-wrap,
.movement-table-wrap,
.capital-table-wrap,
.batch-table-wrap,
.wiki-table-wrap {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.crm-table-wrap--inset,
.crm-table-wrap--flush {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.crm-table,
.fin-table,
.acc-table,
.stock-table,
.movement-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	border-spacing: 0;
}

.crm-table--metrics,
.fin-table {
	min-width: 720px;
}

/* ── Стандарт колонок таблиць CRM (усі модулі) ──
   .stats_col_main - резиновий, min 250px (будь-яка позиція).
   .stats_col_num  - min 100px, max 150px.
   1-й без класу - fallback як main; 2-й+ без класу - fallback як num.
   --stats-main-cols / --stats-num-cols на <table> (colgroup). */
.crm-table,
.fin-table,
.acc-table,
.stock-table,
.movement-table {
	table-layout: auto;
}

.crm-table.stats_table,
.crm-table--metrics.stats_table,
.crm-table.acc-table {
	width: 100%;
	border-collapse: collapse;
	min-width: max(
		720px,
		calc(var(--stats-main-cols, 1) * 250px + var(--stats-num-cols, 3) * 100px)
	) !important;
}

.crm-table col.stats_col_main,
.fin-table col.stats_col_main,
.acc-table col.stats_col_main {
	width: auto;
	min-width: 250px;
}

.crm-table col.stats_col_num,
.fin-table col.stats_col_num,
.acc-table col.stats_col_num {
	width: 150px;
	min-width: 100px;
	max-width: 150px;
}

:is(.crm-table, .fin-table, .acc-table, .stock-table, .movement-table) :is(th, td).stats_col_main,
:is(.crm-table, .fin-table, .acc-table, .stock-table, .movement-table) :is(th, td).crm_col_main,
.crm-table th:first-child:not(.stats_col_num):not(.col-actions),
.crm-table td:first-child:not(.stats_col_num):not(.col-actions),
.fin-table th:first-child:not(.stats_col_num),
.fin-table td:first-child:not(.stats_col_num),
.acc-table th:first-child:not(.stats_col_num):not(.col-actions),
.acc-table td:first-child:not(.stats_col_num):not(.col-actions),
.stock-table th:first-child:not(.stats_col_num):not(.stock-col-go),
.stock-table td:first-child:not(.stats_col_num):not(.stock-col-go),
.movement-table th:first-child:not(.stats_col_num),
.movement-table td:first-child:not(.stats_col_num) {
	width: auto !important;
	min-width: 250px !important;
	max-width: none !important;
	text-align: left;
	vertical-align: top;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

:is(.crm-table, .fin-table, .acc-table, .stock-table, .movement-table) :is(th, td).stats_col_num,
.crm-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.col-actions),
.crm-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.col-actions),
.fin-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main),
.fin-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main),
.acc-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.col-actions),
.acc-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.col-actions),
.stock-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.stock-col-go),
.stock-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.stock-col-go),
.movement-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main),
.movement-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main) {
	width: 150px !important;
	min-width: 100px !important;
	max-width: 150px !important;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}

.crm-table.stats_table th.stats_col_num,
.crm-table--metrics.stats_table th.stats_col_num,
.crm-table th:nth-child(n + 2) {
	text-align: right;
}

/* Колонка дій / кнопок - вузька, не під стандарт metrics */
.crm-table th.col-actions,
.crm-table td.col-actions,
.crm-table th:last-child.col-actions,
.crm-table td:last-child.col-actions {
	width: auto;
	min-width: 72px;
	max-width: 120px;
	text-align: center;
	white-space: nowrap;
}

.stats_table_period_hint {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--text-muted);
}

.crm-table th,
.fin-table th,
.acc-table th {
	padding: 10px 16px;
	text-align: left;
	font-size: var(--font-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	background: var(--gray-100);
	border-bottom: 1px solid var(--border-color);
	white-space: nowrap;
	vertical-align: middle;
}

.crm-table td,
.fin-table td,
.acc-table td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--border-subtle);
	font-size: var(--font-caption);
	color: var(--text-main);
	vertical-align: middle;
}

/* Повтор після базових th/td - класи мають пріоритет над nowrap */
:is(.crm-table, .fin-table, .acc-table, .stock-table, .movement-table) :is(th, td).stats_col_main,
:is(.crm-table, .fin-table, .acc-table, .stock-table, .movement-table) :is(th, td).crm_col_main,
.crm-table th:first-child:not(.stats_col_num),
.crm-table td:first-child:not(.stats_col_num),
.fin-table th:first-child:not(.stats_col_num),
.fin-table td:first-child:not(.stats_col_num),
.acc-table th:first-child:not(.stats_col_num),
.acc-table td:first-child:not(.stats_col_num),
.stock-table th:first-child:not(.stats_col_num),
.stock-table td:first-child:not(.stats_col_num) {
	min-width: 250px !important;
	width: auto !important;
	max-width: none !important;
	white-space: normal;
	text-align: left;
}

:is(.crm-table, .fin-table, .acc-table, .stock-table, .movement-table) :is(th, td).stats_col_num,
.crm-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.col-actions),
.crm-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main):not(.col-actions),
.fin-table th:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main),
.fin-table td:nth-child(n + 2):not(.stats_col_main):not(.crm_col_main) {
	width: 150px !important;
	min-width: 100px !important;
	max-width: 150px !important;
	text-align: right;
	white-space: nowrap;
}

.crm-table tbody tr:last-child td,
.fin-table tbody tr:last-child td,
.acc-table tbody tr:last-child td {
	border-bottom: none;
}

.crm-table tbody tr:hover td,
.fin-table tbody tr:hover td,
.acc-table tbody tr:hover td,
.crm-table-row:hover td {
	background: var(--bg-card-hover);
}

.crm-table tbody tr.crm-table-row,
.fin-table tbody tr.crm-table-row {
	cursor: pointer;
}

.crm-table .crm-empty,
.crm-table .crm-empty-notice {
	border: none;
	background: transparent;
	padding: 1.5rem 1rem;
}

.crm-table .col-num,
.crm-table .col-amount,
.crm-table .col-actions,
.crm-table th.col-actions,
.crm-table td.col-actions {
	text-align: right;
}

[data-theme-resolved='dark'] .crm-table th,
[data-theme-resolved='dark'] .fin-table th,
[data-theme-resolved='dark'] .acc-table th {
	background: var(--bg-card-hover);
}

/* Бухгалтерія - групи записів */
.acc-group {
	margin-top: 24px;
	background: var(--bg-card);
	border-radius: var(--card-radius);
	border: 1px solid var(--border-color);
	overflow: hidden;
}

#accounting .acc-group:first-child {
	margin-top: 0;
}

#my_cash .crm-table--metrics th,
#my_cash .crm-table--metrics td {
	padding: 9px 12px;
}

#my_cash .crm-table--metrics th {
	font-size: 0.6875rem;
	padding: 8px 12px;
}

#my_cash .crm-table--metrics td {
	font-size: 0.8125rem;
}

.acc-group-header {
	padding: 12px 16px;
	background: var(--gray-100);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

[data-theme-resolved='dark'] .acc-group-header {
	background: var(--bg-card-hover);
}

.acc-group-title {
	font-weight: 700;
	font-size: var(--font-caption);
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-main);
}

.acc-group-badge {
	background: var(--primary);
	color: var(--text-white, var(--surface-elevated));
	font-size: var(--font-micro);
	padding: 2px 8px;
	border-radius: 5px;
	font-weight: 700;
}

.acc-group-total {
	font-weight: 800;
	font-size: 1rem;
	white-space: nowrap;
}

.acc-group-total.income,
.text-income {
	color: var(--success);
}

.acc-group-total.expense,
.text-expense {
	color: var(--danger);
}

.acc-records-meta {
	margin: 0 0 14px;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.acc-records-meta strong {
	color: var(--text-main);
}

.acc-table .col-date {
	color: var(--text-muted);
	white-space: nowrap;
}

.acc-table .col-desc.stats_col_main {
	text-align: left;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.acc-table .col-user {
	color: var(--text-muted);
}

.acc-table .col-amount {
	font-weight: 700;
}

.acc-table .col-action {
	text-align: center;
}

/* Cards - unified hover */
.card,
.dash-card,
.analytical-card {
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover,
.dash-card:hover,
.analytical-card:hover {
	border-color: var(--border-color);
}

/* Override legacy client list card grid when old markup remains elsewhere */
[data-layout="card"] #clients .client_list {
	display: none;
}

/* ============================================================
   18. Device order cards - compact dense layout
   ============================================================ */

.device_list {
	grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)) !important;
	gap: 10px !important;
	padding: 0 0 16px !important;
}

.device_list.kanban-mode {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	align-items: flex-start !important;
	gap: 8px !important;
	grid-template-columns: unset !important;
	padding: 0 0 16px !important;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

[data-layout="linear"] .device_list.kanban-mode {
	flex-direction: row !important;
}

.device_list.kanban-mode > .kanban-col {
	flex: 1 1 0;
	min-width: 192px;
	max-width: 240px;
	list-style: none;
	margin: 0;
	padding: 8px !important;
}

.device_list.kanban-mode .device-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 800;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 8px;
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
	color: var(--text-white);
}

.device_list.kanban-mode .device-group-header.s1 { background: var(--s1); }
.device_list.kanban-mode .device-group-header.s2 { background: var(--s2); }
.device_list.kanban-mode .device-group-header.s3 { background: var(--s3); }
.device_list.kanban-mode .device-group-header.s4 { background: var(--s4); }
.device_list.kanban-mode .device-group-header.s5 { background: var(--s5); }

.device_list.kanban-mode .device-group-header .count-badge {
	background: rgba(255, 255, 255, 0.22);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
}

.device_list.kanban-mode .kanban-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.device_list.kanban-mode .device-link {
	padding: 9px 11px !important;
	gap: 6px !important;
}

.device_list.kanban-mode .d-card-top {
	padding-bottom: 6px;
	gap: 8px;
}

.device_list.kanban-mode .d-card-body {
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 0 8px;
}

.device_list.kanban-mode .d-icon-circle {
	width: 28px !important;
	height: 28px !important;
}

.device_list.kanban-mode .d-icon-circle .material-icons {
	font-size: 16px !important;
}

.device_list.kanban-mode .d-model {
	font-size: 0.8125rem !important;
	line-height: 1.25 !important;
}

.device_list.kanban-mode .d-defect,
.device_list.kanban-mode .d-desc {
	font-size: 0.6875rem !important;
	line-height: 1.35 !important;
}

.device_list.kanban-mode .d-defect {
	font-weight: 700 !important;
	color: var(--warning) !important;
}

.device_list.kanban-mode .d-name {
	font-size: 0.75rem !important;
}

.device_list.kanban-mode .d-phone {
	font-size: 0.6875rem !important;
}

.device_list.kanban-mode .d-total {
	font-size: 0.8125rem !important;
}

.device_list.kanban-mode .d-estimated {
	font-size: 0.625rem !important;
}

.device_list.list-mode {
	display: grid !important;
}

.device_list .kanban-col {
	padding: 10px !important;
	border-radius: var(--radius-sm)!important;
	min-height: 0 !important;
	background: var(--bg-card) !important;
	border: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.device_list .device-group-header {
	margin-bottom: 8px !important;
	padding: 6px 10px !important;
	font-size: 0.6875rem !important;
	border-radius: var(--radius-sm)!important;
	letter-spacing: 0.06em !important;
	box-shadow: none !important;
	border: none !important;
}

.device_list .kanban-items {
	gap: 8px !important;
}

/* Flat card - light status tint, no border */
.device_list .device-row {
	position: relative;
	border-radius: var(--radius-sm)!important;
	overflow: hidden;
	background: var(--bg-card) !important;
	border: none !important;
	box-shadow: none !important;
	transition: filter var(--transition-fast);
}

.device_list .device-row::before,
.device_list .device-row::after {
	display: none !important;
	content: none !important;
}

.device_list .device-row.s1 { background: var(--s1-bg) !important; background-image: none !important; }
.device_list .device-row.s2 { background: var(--s2-bg) !important; background-image: none !important; }
.device_list .device-row.s3 { background: var(--s3-bg) !important; background-image: none !important; }
.device_list .device-row.s4 { background: var(--s4-bg) !important; background-image: none !important; }
.device_list .device-row.s5 { background: var(--s5-bg) !important; background-image: none !important; }
.device_list .device-row.s6 { background: var(--s6-bg) !important; background-image: none !important; }
.device_list .device-row.s7 { background: var(--s7-bg) !important; background-image: none !important; }

.device_list .device-row.is-old {
	outline: none !important;
}

.device_list .device-row:hover {
	transform: none !important;
	box-shadow: none !important;
	filter: brightness(0.98);
}

[data-theme-resolved='dark'] .device_list .device-row:hover {
	filter: brightness(1.07);
}

.device_list .device-link {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 9px 11px !important;
	min-height: 0 !important;
	height: auto !important;
}

[data-layout="card"] .device_list .device-link,
[data-layout="linear"] .device_list .device-link {
	min-height: 0 !important;
}

/* Top meta bar: ID + status | date + age */
.device_list .d-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-subtle);
}

.device_list .d-card-badges {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	flex-wrap: wrap;
}

.device_list .d-card-top-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Shared meta typography: #, status, date, days in repair */
.device_list .d-card-top .d-id,
.device_list .d-card-top .d-status-label,
.device_list .d-card-top .d-date,
.device_list .d-card-top .d-old-badge {
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.03em !important;
	padding: 2px 6px !important;
	border: none !important;
}

.device_list .d-status-label {
	border-radius: var(--radius-sm)!important;
	background: var(--card-border, var(--gray-100)) !important;
	color: var(--card-theme, var(--primary)) !important;
	text-transform: none !important;
}

.device_list .d-date {
	border-radius: var(--radius-sm)!important;
	background: var(--gray-100) !important;
	color: var(--text-muted) !important;
	text-transform: none !important;
}

[data-theme-resolved='dark'] .device_list .d-date {
	background: var(--bg-card-hover) !important;
}

.device_list .d-old-badge {
	color: var(--danger) !important;
	text-transform: none !important;
	white-space: nowrap;
	border-radius: var(--radius-sm)!important;
	background: var(--danger-light) !important;
}

/* Main body: icon | info | price */
.device_list .d-card-body {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	grid-template-areas: "icon info price";
	gap: 0 8px;
	align-items: start;
}

.device_list .d-icon-circle {
	grid-area: icon;
	width: 28px !important;
	height: 28px !important;
	border-radius: var(--radius-sm)!important;
	box-shadow: none !important;
	margin-top: 1px;
}

.device_list .d-icon-circle .material-icons {
	font-size: 16px !important;
}

.device_list .d-card-info {
	grid-area: info;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.device_list .d-model {
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--text-main);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.device_list .d-defect,
.device_list .d-desc {
	font-size: 0.6875rem !important;
	line-height: 1.35 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.device_list .d-defect {
	font-weight: 700 !important;
	color: var(--warning) !important;
}

.device_list .d-desc {
	font-weight: 400 !important;
	color: var(--text-secondary);
}

.device_list .d-contact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	margin-top: 2px;
	padding-top: 4px;
	border-top: 1px solid var(--border-subtle);
}

.device_list .d-contact__name {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.device_list .d-contact__name .client-mood {
	flex-shrink: 0;
}

.device_list .d-name {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: var(--text-main);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.device_list .d-contact__phone {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	min-width: 0;
}

.device_list .d-phone {
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	color: var(--text-muted);
	white-space: nowrap;
}

.device_list .d-phone--extra {
	font-size: 0.625rem !important;
	opacity: 0.85;
}

/* Без content:'+' - crm_phone_format уже дає +38… (інакше виходить ++) */
.device_list .d-phone--extra::before {
	content: none;
}

.device_list .d-call-ind {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	vertical-align: middle;
}

.device_list .d-call-ind .material-icons {
	font-size: 14px;
	line-height: 1;
}

.device_list .d-call-ind--idle {
	color: rgba(120, 122, 127, 0.35);
}

.device_list .d-call-ind--fail {
	color: var(--danger);
	filter: drop-shadow(0 0 4px rgba(var(--danger-rgb), 0.65));
}

.device_list .d-call-ind--ok {
	color: var(--success);
	filter: drop-shadow(0 0 4px rgba(var(--success-rgb), 0.55));
}

.device_list .d-note {
	font-size: 0.6875rem !important;
	line-height: 1.3 !important;
	padding: 4px 6px !important;
	border-radius: var(--radius-sm)!important;
	margin-top: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	background: var(--gray-100) !important;
	border: 1px solid var(--border-color) !important;
	border-left: 2px solid var(--card-theme, var(--primary)) !important;
	color: var(--text-muted);
}

[data-theme-resolved='dark'] .device_list .d-note {
	background: var(--bg-card-hover) !important;
}

.device_list .d-price-block {
	grid-area: price;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 0;
	padding-left: 6px;
	flex-shrink: 0;
}

.device_list .d-total {
	font-size: 0.8125rem !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	color: var(--text-muted);
	white-space: nowrap;
}

.device_list .d-total.has-price {
	color: var(--success) !important;
}

.device_list .d-total small {
	font-size: 0.5625rem !important;
	font-weight: 600 !important;
}

.device_list .d-estimated {
	font-size: 0.625rem !important;
	font-weight: 500 !important;
	margin-top: 1px !important;
	color: var(--text-muted);
	opacity: 0.85;
	white-space: nowrap;
}

/* List mode - denser vertical stack */
.list-mode.device_list,
.device_list.list-mode {
	gap: 8px !important;
}

/* Client profile - same card grid as main device list */
.client-page .device_list,
[data-layout="linear"] .client-page .device_list,
[data-layout="card"] .client-page .device_list {
	display: grid !important;
	flex-direction: unset !important;
	grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)) !important;
	gap: 8px !important;
	padding: 0 !important;
}

/* Unified device card - all layouts, statuses, kanban/list */
:is(
	.device_list,
	.client-page .device_list,
	[data-layout="linear"] .device_list,
	[data-layout="card"] .device_list
) .device-row {
	border: none !important;
	box-shadow: none !important;
	background-image: none !important;
}

:is(
	.device_list,
	.client-page .device_list,
	[data-layout="linear"] .device_list,
	[data-layout="card"] .device_list
) .device-row:hover {
	transform: none !important;
	box-shadow: none !important;
}

:is(
	.device_list,
	.client-page .device_list,
	[data-layout="linear"] .device_list,
	[data-layout="card"] .device_list
) .device-link {
	padding: 9px 11px !important;
	min-height: 0 !important;
	gap: 6px !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-icon-circle {
	width: 28px !important;
	height: 28px !important;
	border-radius: var(--radius-sm)!important;
	box-shadow: none !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-icon-circle .material-icons {
	font-size: 16px !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-model {
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-defect,
:is(
	.device_list,
	.client-page .device_list
) .d-desc {
	font-size: 0.6875rem !important;
	line-height: 1.35 !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-defect {
	font-weight: 700 !important;
	color: var(--warning) !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-desc {
	font-weight: 400 !important;
	color: var(--text-secondary) !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-name {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-phone {
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-total {
	font-size: 0.8125rem !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-estimated {
	font-size: 0.625rem !important;
}

:is(
	.device_list,
	.client-page .device_list
) .d-call-ind .material-icons {
	font-size: 14px !important;
}

@media (max-width: 991px) {
	.device_list {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
		padding: 0 0 12px !important;
	}

	.client-page .device_list,
	[data-layout="linear"] .client-page .device_list {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 560px) {
	.client-page .device_list,
	[data-layout="linear"] .client-page .device_list {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 420px) {
	.device_list .d-card-body {
		grid-template-columns: 28px minmax(0, 1fr);
		grid-template-areas:
			"icon info"
			"price price";
	}

	.device_list .d-price-block {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
		padding: 6px 0 0;
		margin-top: 4px;
		border-top: 1px solid var(--border-subtle);
	}

	.device_list .d-name {
		max-width: 100%;
	}
}

/* ============================================================
   20. Wiki / Knowledge base - compact flat layout
   ============================================================ */

#wiki-page,
#wiki-post-view {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

#wiki-page .unified-page-header,
#wiki-post-view .unified-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--gap) !important;
	flex-wrap: wrap;
}

#wiki-page .header-left,
#wiki-post-view .header-left {
	min-width: 0;
	flex: 1 1 auto;
}

#wiki-page .header-actions,
#wiki-post-view .header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.wiki-table--no-cat .wiki-col-cat,
.wiki-table--no-cat td.wiki-col-cat,
.wiki-table--no-cat th.wiki-col-cat,
.wiki-table--no-cat col.wiki-col-cat-w {
	display: none !important;
}

.wiki-badge--draft {
	background: var(--gray-100);
	color: var(--text-muted);
}

.wiki-form .form-group + .form-group {
	margin-top: 0;
}

.wiki-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.wiki-form-divider {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--border-subtle);
}

.wiki-form-note {
	margin: 16px 0 0;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: var(--gray-100);
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.4;
}

@media (max-width: 640px) {
	.wiki-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Category tabs - same scroll pattern as stock-view-tabs */
#wiki-page .wiki-cat-tabs.tasks-tabs {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0 0 var(--gap);
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--border-color) transparent;
}

.wiki-cat-tabs.tasks-tabs::-webkit-scrollbar {
	height: 6px;
}

.wiki-cat-tabs.tasks-tabs::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 999px;
}

.wiki-cat-tab {
	flex: 0 0 auto;
	gap: 6px;
	max-width: none;
	white-space: nowrap;
}

.wiki-cat-tab .material-icons {
	font-size: 18px;
	flex-shrink: 0;
}

.wiki-cat-tab.is-active .material-icons {
	color: var(--nav-active-text);
}

.wiki-cat-tab__label {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

/* Wiki list table - той самий стандарт, що Dashboard / My Cash */
#wiki-page .crm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 4px;
}

#wiki-page .wiki-table.stats_table {
	table-layout: fixed;
	width: 100%;
	min-width: min(100%, 560px) !important;
}

#wiki-page .wiki-table col.wiki-col-icon-w {
	width: 44px;
	min-width: 44px;
	max-width: 44px;
}

#wiki-page .wiki-table :is(th, td).wiki-col-icon {
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	padding: 8px 6px !important;
	text-align: center !important;
	vertical-align: middle !important;
	white-space: nowrap;
}

#wiki-page .wiki-table :is(th, td).stats_col_main {
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
	vertical-align: middle !important;
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: anywhere;
}

#wiki-page .wiki-table :is(th, td).wiki-col-cat {
	width: 18% !important;
	min-width: 96px !important;
	max-width: 140px !important;
	text-align: left !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

#wiki-page .wiki-table :is(th, td).wiki-col-date {
	width: 96px !important;
	min-width: 88px !important;
	max-width: 104px !important;
	text-align: right !important;
	white-space: nowrap;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

#wiki-page .wiki-table :is(th, td).wiki-col-status {
	width: 88px !important;
	min-width: 72px !important;
	max-width: 96px !important;
	text-align: right !important;
	white-space: nowrap;
	vertical-align: middle;
}

#wiki-page .wiki-table th {
	padding: 8px 12px;
	font-size: 0.6875rem;
}

#wiki-page .wiki-table td {
	padding: 9px 12px;
	font-size: 0.8125rem;
}

.wiki-table tbody tr.wiki-table-row {
	cursor: pointer;
	transition: background var(--transition-fast);
}

.wiki-table tbody tr.wiki-table-row:hover {
	background: var(--bg-card-hover) !important;
}

.wiki-table tbody tr.wiki-table-empty td {
	padding: 0;
	border: none;
}

.wiki-table tbody tr.wiki-table-empty .crm-empty {
	border: none;
	border-radius: 0;
}

.wiki-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	flex-shrink: 0;
}

.wiki-icon .material-icons {
	font-size: 18px;
}

.wiki-icon--lg {
	width: 40px;
	height: 40px;
}

.wiki-icon--lg .material-icons {
	font-size: 22px;
}

.wiki-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-main);
	line-height: 1.35;
	white-space: normal;
	word-break: break-word;
}

.wiki-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 3px;
	font-size: 0.75rem;
	color: var(--text-muted);
	line-height: 1.35;
	white-space: normal;
}

.wiki-cat-label,
.wiki-date {
	font-size: 0.8125rem;
	color: var(--text-muted);
	font-weight: 500;
}

.wiki-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.wiki-badge--new {
	background: var(--success-light);
	color: var(--success);
}

.wiki-badge--updated {
	background: var(--warning-light);
	color: var(--warning);
}

/* Wiki article view */
.wiki-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: var(--font-caption);
	color: var(--text-muted);
	overflow: hidden;
}

.wiki-breadcrumb-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--text-main);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.wiki-breadcrumb-link:hover {
	color: var(--primary);
	text-decoration: none;
}

.wiki-breadcrumb-link .material-icons {
	font-size: 16px;
}

.wiki-breadcrumb-sep {
	color: var(--text-light);
}

.wiki-article {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	overflow: hidden;
}

.wiki-article-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border-subtle);
	background: var(--gray-100);
}

[data-theme-resolved='dark'] .wiki-article-header {
	background: var(--bg-card-hover);
}

.wiki-article-head-main {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	flex: 1;
}

.wiki-article-head-text {
	min-width: 0;
	flex: 1;
}

.wiki-article-title {
	margin: 0 0 6px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-main);
}

.wiki-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wiki-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-muted);
}

.wiki-meta-item .material-icons {
	font-size: 14px;
}

.wiki-edit-btn {
	flex-shrink: 0;
	height: 34px;
	padding: 0 12px;
	font-size: var(--font-micro);
}

.wiki-edit-btn .material-icons {
	font-size: 16px;
}

.wiki-article-body {
	padding: 16px;
}

.wiki-lead {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid var(--primary);
	background: var(--gray-100);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--font-caption);
	font-weight: 500;
	color: var(--text-secondary);
	line-height: 1.45;
}

[data-theme-resolved='dark'] .wiki-lead {
	background: var(--bg-card-hover);
}

.wiki-content-block {
	font-size: var(--font-caption);
	color: var(--text-main);
}

.wiki-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wiki-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	background: var(--bg-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	line-height: 1.45;
}

.wiki-step-marker {
	font-size: 18px;
	color: var(--success);
	flex-shrink: 0;
	margin-top: 1px;
}

.wiki-step-text {
	flex: 1;
	min-width: 0;
	color: var(--text-main);
}

@media (max-width: 991px) {
	#wiki-page .wiki-cat-tab__label {
		max-width: 160px;
	}
}

@media (max-width: 768px) {
	#wiki-page .crm-table-wrap {
		padding: 8px;
		border-radius: var(--radius-sm);
	}

	#wiki-page .wiki-table.stats_table {
		min-width: 480px !important;
	}

	#wiki-page .wiki-table :is(th, td) {
		padding: 7px 8px !important;
		font-size: 0.75rem;
	}

	#wiki-page .wiki-table :is(th, td).wiki-col-icon {
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		padding: 7px 4px !important;
	}

	#wiki-page .wiki-icon {
		width: 28px;
		height: 28px;
	}

	#wiki-page .wiki-icon .material-icons {
		font-size: 16px;
	}

	#wiki-page .wiki-table :is(th, td).wiki-col-cat {
		min-width: 80px !important;
		max-width: 110px !important;
	}

	#wiki-page .wiki-table :is(th, td).wiki-col-date {
		min-width: 76px !important;
		max-width: 88px !important;
	}

	#wiki-page .wiki-table :is(th, td).wiki-col-status {
		min-width: 64px !important;
		max-width: 80px !important;
	}

	#wiki-page .wiki-cat-tab {
		min-height: 44px;
		padding-left: 12px;
		padding-right: 12px;
	}

	#wiki-page .wiki-cat-tab__label {
		max-width: 120px;
	}

	#wiki-post-view .wiki-article-header {
		flex-direction: column;
	}

	#wiki-post-view .wiki-breadcrumb {
		flex-wrap: wrap;
	}

	#wiki-post-view .wiki-article-title {
		font-size: 1rem;
	}

	#wiki-post-view .wiki-article-body {
		padding: 12px;
	}

	#wiki-post-view .wiki-step {
		padding: 10px;
	}
}

@media (max-width: 540px) {
	#wiki-page .wiki-cat-tabs.tasks-tabs {
		padding: 3px;
		gap: 4px;
	}
}

/* ============================================================
   21. Tasks - compact flat layout
   ============================================================ */

.tasks-page-subtitle {
	margin: 0.25rem 0 0;
	font-size: var(--font-caption);
	color: var(--text-muted);
	font-weight: 500;
}

.tasks-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 4px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	width: 100%;
	max-width: 100%;
}

.tasks-tab {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: var(--radius-sm);
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.tasks-tab:hover {
	background: var(--gray-100);
	color: var(--text-main);
	text-decoration: none;
}

.tasks-tab.is-active {
	background: var(--nav-active-bg);
	color: var(--nav-active-text);
}

.tasks-live-root--done .task-group-count {
	background: var(--success, #22a06b);
}

.tasks-live-root--failed .task-group-count {
	background: var(--danger, #de350b);
}

.task-group--closed {
	margin-bottom: 18px;
}

.task-closed-block {
	margin-top: 4px;
}

.task-closed-block--ok .task-card--completed {
	border-left: 3px solid var(--success, #22a06b);
}

.task-closed-block--fail .task-card--cancelled {
	border-left: 3px solid var(--danger, #de350b);
}

[data-theme-resolved='dark'] .tasks-tab:hover {
	background: var(--bg-card-hover);
}

.task-group--section {
	margin-bottom: 22px;
}

.task-group--section .task-group-title {
	font-size: 1rem;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-color);
}

.task-group--team {
	margin-top: 4px;
}

.task-group {
	margin-bottom: 18px;
}

.task-group-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-main);
}

.task-group-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--primary);
	color: var(--text-white);
	font-size: var(--font-micro);
	font-weight: 700;
}

.task-legend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: var(--font-micro);
	font-weight: 700;
}

.task-legend .material-icons {
	font-size: 12px;
}

.task-legend--success {
	background: var(--success-light);
	color: var(--success);
}

.task-legend--danger {
	background: var(--danger-light);
	color: var(--danger);
}

.tasks-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.task-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: background var(--transition-fast);
}

.task-card--active {
	background: var(--bg-card);
}

.task-card--system {
	background: var(--gray-50);
	border-color: var(--gray-200);
}

[data-theme-resolved='dark'] .task-card--system {
	background: rgba(255, 255, 255, 0.03);
	border-color: var(--border-color);
}

.task-card--overdue {
	background: var(--danger-light);
}

.task-card--completed {
	background: var(--success-light);
	opacity: 0.95;
}

.task-card--cancelled {
	background: var(--danger-light);
	border-color: rgba(var(--danger-rgb), 0.35);
	opacity: 1;
}

.task-archive-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--font-micro);
	font-weight: 700;
	line-height: 1.2;
}

.task-archive-status .material-icons {
	font-size: 14px;
}

.task-archive-status--fail {
	background: var(--danger);
	color: var(--text-white);
}

.task-archive-status--ok {
	background: var(--success);
	color: var(--text-white);
}

.task-group--archive {
	margin-bottom: 0;
}

.task-archive-page {
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-muted);
}

.task-archive-block {
	margin-top: 12px;
}

.task-archive-block-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 0.875rem;
	font-weight: 700;
}

.task-archive-block-title .material-icons {
	font-size: 18px;
}

.task-archive-block--fail .task-archive-block-title {
	color: var(--danger);
}

.task-archive-block--fail .task-card--cancelled {
	border-left: 3px solid var(--danger);
	box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.12);
}

.task-archive-block--ok .task-archive-block-title {
	color: var(--success);
}

.task-archive-block--ok .task-card--completed {
	border-left: 3px solid var(--success);
}

.task-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.task-title {
	margin: 0;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-main);
	line-height: 1.35;
	flex: 1;
	min-width: 0;
}

.task-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
	flex-shrink: 0;
	max-width: 100%;
}

.task-form-inline {
	margin: 0;
	display: inline-flex;
}

.task-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 8px;
	min-height: 28px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-size: var(--font-micro);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	background: var(--gray-100);
	color: var(--text-main);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}

.task-btn .material-icons {
	font-size: 16px;
}

.task-btn:hover {
	filter: brightness(0.97);
	text-decoration: none;
}

.task-btn--primary {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.task-btn--success {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.25);
}

.task-btn--danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

.task-btn--warning {
	background: var(--warning-light);
	color: var(--warning);
	border-color: rgba(var(--warning-rgb), 0.25);
}

.task-btn--muted {
	background: var(--gray-100);
	color: var(--text-muted);
	border-color: var(--border-color);
}

.task-btn--delete {
	background: var(--gray-100);
	color: var(--danger);
	border-color: var(--border-color);
	padding: 4px 6px;
}

.task-btn--delete:hover {
	background: var(--danger);
	color: var(--text-white);
	border-color: var(--danger);
}

[data-theme-resolved='dark'] .task-btn {
	background: var(--bg-card-hover);
}

[data-theme-resolved='dark'] .task-btn--muted,
[data-theme-resolved='dark'] .task-btn--delete {
	background: var(--bg-card-hover);
}

.task-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.task-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-muted);
	background: var(--gray-100);
	border: 1px solid var(--border-color);
	max-width: 100%;
}

.task-badge .material-icons {
	font-size: 14px;
	flex-shrink: 0;
}

[data-theme-resolved='dark'] .task-badge {
	background: var(--bg-card-hover);
}

.task-badge--system {
	background: var(--gray-100);
	color: var(--text-muted);
	border-color: var(--gray-200);
}

[data-theme-resolved='dark'] .task-badge--system {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}

.task-badge--success {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.22);
}

.task-badge--danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.22);
}

.task-badge--overdue {
	background: var(--danger);
	color: var(--text-white);
	border-color: var(--danger);
}

.task-badge--deadline-urgent {
	background: var(--warning-light);
	color: var(--warning);
	border-color: rgba(var(--warning-rgb), 0.25);
}

.task-badge--deadline-ok {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.22);
}

.task-badge--link {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.2);
	text-decoration: none;
	font-weight: 700;
}

.task-badge--link:hover {
	color: var(--primary-hover);
	text-decoration: none;
}

.task-report {
	background: var(--gray-100);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
}

[data-theme-resolved='dark'] .task-report {
	background: var(--bg-card-hover);
}

.task-report--danger {
	background: var(--danger-light);
	border-color: rgba(var(--danger-rgb), 0.22);
}

.task-report-title {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
	font-size: var(--font-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--success);
}

.task-report--danger .task-report-title {
	color: var(--danger);
}

.task-report-title .material-icons {
	font-size: 14px;
}

.task-report-text {
	font-size: var(--font-caption);
	color: var(--text-main);
	line-height: 1.45;
}

#tasks .crm-empty {
	margin-top: 8px;
}

#tasks .pagination {
	margin-top: 1rem;
}

@media (max-width: 768px) {
	.task-header {
		flex-direction: column;
		align-items: stretch;
	}

	.task-actions {
		justify-content: flex-start;
	}

	.task-btn {
		flex: 0 1 auto;
	}
}

@media (max-width: 480px) {
	.task-actions {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
		width: 100%;
	}

	.task-btn {
		width: 100%;
		justify-content: center;
	}
}

/* --- Device order page (single order view) --- */

.device-order-page,
.client-page {
	--device-block-gap: 10px;
	--device-block-pad: 14px;
	--device-block-radius: 5px;
}

.device-order-page {
	position: relative;
	margin-bottom: 48px;
}

.client-page {
	position: relative;
	margin-bottom: 48px;
	min-width: 0;
	max-width: 100%;
}

#stock-page {
	min-width: 0;
	max-width: 100%;
}

#stock-item-page {
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

.device-order-page .pro-card,
.device-order-page .device-order-hero,
.client-page .pro-card,
.client-page .client-feed-section {
	padding: var(--device-block-pad) !important;
	margin-bottom: 0 !important;
	border-radius: var(--device-block-radius);
}

.device-order-page .device-side-card__title,
.device-order-page .sidebar-section-title,
.client-page .sidebar-section-title,
.client-page .client-dossier__section-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin-bottom: 12px;
}

.device-order-page .sidebar-section-title .material-icons,
.device-order-page .device-side-card__title .material-icons,
.client-page .sidebar-section-title .material-icons,
.client-page .client-dossier__section-title .material-icons {
	font-size: 15px;
	opacity: 0.85;
}

/* Status controls + call bar → modules/orders/styles/order_detail.css (.device-order-page) */

.device-order-call-form {
	margin: 0;
}

.device-order-call-btn {
	width: 30px;
	height: 30px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-body);
	color: var(--text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: 0.15s ease;
}

.device-order-call-btn .material-icons {
	font-size: 16px;
}

.device-order-call-btn--miss:hover {
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.35);
	background: var(--danger-light);
}

.device-order-call-btn--ok {
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.35);
	background: rgba(var(--success-rgb), 0.08);
}

.device-order-call-btn--ok:hover {
	background: rgba(var(--success-rgb), 0.16);
}

.device-order-call-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(var(--success-rgb), 0.12);
	color: var(--success);
	font-size: 11px;
	font-weight: 700;
}

.device-order-call-badge .material-icons {
	font-size: 15px;
}

.device-order-call-hint {
	font-size: 10px;
	font-weight: 700;
	color: var(--danger);
}

.device-order-body {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: var(--device-block-gap, 10px);
	align-items: start;
}

.device-order-info {
	display: flex;
	flex-direction: column;
	gap: var(--device-block-gap, 10px);
	min-width: 0;
	max-width: 300px;
	width: 100%;
}

.device-order-feed {
	display: flex;
	flex-direction: column;
	gap: var(--device-block-gap, 10px);
	min-width: 0;
	position: sticky;
	top: 12px;
}

/* Hero: order number + single status */
.device-order-hero {
	padding: var(--device-block-pad, 14px);
	border-radius: var(--device-block-radius, 5px);
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	box-shadow: var(--shadow-sm);
}

.device-order-hero.s1 { background: var(--s1-bg); border-color: rgba(var(--s1-rgb), 0.35); }
.device-order-hero.s2 { background: var(--s2-bg); border-color: rgba(var(--s2-rgb), 0.35); }
.device-order-hero.s3 { background: var(--s3-bg); border-color: rgba(var(--s3-rgb), 0.35); }
.device-order-hero.s4 { background: var(--s4-bg); border-color: rgba(var(--s4-rgb), 0.35); }
.device-order-hero.s5 { background: var(--s5-bg); border-color: rgba(var(--s5-rgb), 0.35); }
.device-order-hero.s6 { background: var(--s6-bg); border-color: rgba(var(--s6-rgb), 0.35); }
.device-order-hero.s7 { background: var(--s7-bg); border-color: rgba(var(--s7-rgb), 0.35); }

.device-order-hero__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.device-order-hero__num {
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	color: var(--text-heading);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.device-order-hero.s1 .device-order-hero__num { color: var(--s1); }
.device-order-hero.s2 .device-order-hero__num { color: var(--s2); }
.device-order-hero.s3 .device-order-hero__num { color: var(--s3); }
.device-order-hero.s4 .device-order-hero__num { color: var(--s4); }
.device-order-hero.s5 .device-order-hero__num { color: var(--s5); }
.device-order-hero.s6 .device-order-hero__num { color: var(--s6); }
.device-order-hero.s7 .device-order-hero__num { color: var(--s7); }

.device-order-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.device-order-hero__stats > span,
.device-hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
}

.device-order-hero__stats .material-icons,
.device-hero-chip .material-icons {
	font-size: 12px;
}

.device-order-hero__days.is-warn {
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.3);
	background: var(--danger-light);
}

.device-hero-chip--ok {
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.3);
	background: rgba(var(--success-rgb), 0.1);
}

.device-hero-chip--warn {
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.3);
	background: var(--danger-light);
}

.device-order-hero__dates {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	margin-bottom: 12px;
	border-top: 1px solid var(--border-color);
}

.device-order-hero__date-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 5px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	font-size: 11px;
	line-height: 1.35;
}

.device-order-hero__date-label {
	color: var(--text-muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
	font-size: 10px;
}

.device-order-hero__date-value {
	color: var(--text-main);
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.device-status-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
}

.device-status-chip.s1 { background: var(--s1); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s1-rgb), 0.35); }
.device-status-chip.s2 { background: var(--s2); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s2-rgb), 0.35); }
.device-status-chip.s3 { background: var(--s3); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s3-rgb), 0.35); }
.device-status-chip.s4 { background: var(--s4); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s4-rgb), 0.35); }
.device-status-chip.s5 { background: var(--s5); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s5-rgb), 0.35); }
.device-status-chip.s6 { background: var(--s6); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s6-rgb), 0.35); }
.device-status-chip.s7 { background: var(--s7); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s7-rgb), 0.35); }

/* Client card (left sidebar) */
.device-client-card {
	padding: var(--device-block-pad, 14px) !important;
}

.device-client-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 10px;
}

.device-client-card__head .device-side-card__title {
	margin-bottom: 0;
}

.device-client-card__profile {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.device-client-card__profile .client-avatar {
	flex-shrink: 0;
}

.device-client-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.12);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	flex-shrink: 0;
}

.device-client-card__info {
	min-width: 0;
	flex: 1;
}

.device-client-card__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--text-heading);
	line-height: 1.25;
	margin-bottom: 2px;
	word-break: break-word;
}

.device-client-card__phones {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.device-client-card__phone-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.device-client-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted) !important;
	text-decoration: none;
}

.device-client-card__phone-num {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.device-client-card__phone .material-icons {
	font-size: 14px;
	color: var(--primary);
	flex-shrink: 0;
}

.device-client-card__phone:hover {
	color: var(--primary) !important;
}

.device-client-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.device-client-card__action {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 22px;
	min-width: 30px;
	padding: 0;
	border-radius: 5px;
	background: var(--bg-body);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	text-decoration: none;
	transition: 0.15s ease;
}

.device-client-card__action .material-icons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.device-client-card__action:hover {
	border-color: var(--border-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.device-client-card__action.is-viber {
	color: var(--viber);
	background: var(--viber-light);
	border-color: rgba(var(--viber-rgb, 115, 96, 223), 0.2);
}

.device-client-card__action.is-tg {
	color: var(--telegram);
	background: var(--telegram-light);
	border-color: rgba(var(--telegram-rgb, 0, 136, 204), 0.2);
}

.device-client-card__action.is-wa {
	color: var(--whatsapp);
	background: var(--whatsapp-light);
	border-color: rgba(var(--whatsapp-rgb, 37, 211, 102), 0.2);
}

.device-client-card__greeting {
	margin-top: 8px;
}

.device-client-card__greeting-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 30px;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.device-client-card__greeting-btn .material-icons {
	font-size: 15px;
}

.device-client-card__greeting-btn.is-wa {
	color: var(--whatsapp);
	background: var(--whatsapp-light);
	border-color: rgba(var(--whatsapp-rgb, 37, 211, 102), 0.25);
}

.device-client-card__greeting-btn.is-wa:hover {
	color: #fff;
	background: var(--whatsapp);
	border-color: var(--whatsapp);
	text-decoration: none;
}

.device-client-card__note {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 5px;
	background: var(--note-bg, var(--bg-body));
	border: 1px solid var(--border-color);
	font-size: 11px;
	line-height: 1.45;
	color: var(--text-secondary);
}

.device-client-card__warning {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 5px;
	background: var(--danger-light);
	border: 1px solid rgba(var(--danger-rgb), 0.2);
	font-size: 11px;
	line-height: 1.45;
	color: var(--danger);
	font-weight: 600;
}

/* Compact left sidebar cards */
.device-side-card {
	padding: var(--device-block-pad, 14px) !important;
	margin-bottom: 0 !important;
}

.device-side-card__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin-bottom: 12px;
}

.device-side-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.device-side-card__head .device-side-card__title {
	margin-bottom: 0;
}

.device-side-card__title .material-icons {
	font-size: 15px;
	opacity: 0.85;
}

.device-side-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.device-side-row {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-subtle);
	align-items: start;
}

.device-side-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.device-side-row:first-child {
	padding-top: 0;
}

.device-side-row__k {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-light);
	line-height: 1.3;
}

.device-side-row__k .material-icons {
	font-size: 12px;
	flex-shrink: 0;
}

.device-side-row__v {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-main);
	line-height: 1.4;
	word-break: break-word;
}

.device-side-row__v--mono {
	font-family: var(--font-mono);
	font-size: 10px;
}

.device-side-row--pass .device-side-row__v {
	color: var(--danger);
	font-weight: 800;
}

.device-defect-mini {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	margin: 0;
}

.device-defect-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--warning-light);
	color: var(--warning);
	border: 1px solid rgba(var(--warning-rgb), 0.25);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
}

.device-defect-tag--empty {
	background: var(--bg-body);
	color: var(--text-muted);
	border: 1px dashed var(--border-color);
}

.device-defect-cost {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.1);
	color: var(--primary);
	border: 1px solid rgba(var(--primary-rgb, 76, 139, 245), 0.2);
	font-size: 11px;
	font-weight: 700;
}

.device-defect-text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-secondary);
	max-height: 96px;
	overflow: auto;
}

.device-defect-text p {
	margin: 0;
}

.device-defect-empty {
	color: var(--text-light);
	font-style: italic;
}

.device-info-link {
	color: var(--text-light);
	text-decoration: none;
	display: inline-flex;
}

.device-info-link .material-icons {
	font-size: 15px;
}

/* --- Device fault picker (text chips) --- */
.device-pick-section__label {
	display: block;
	margin-bottom: 10px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.device-fatal-pick {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5px;
}

.device-fatal-chip {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 0 !important;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	color: var(--text-secondary);
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none !important;
	letter-spacing: normal;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.device-fatal-chip input[type="checkbox"],
.device-pick-chip__input {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.device-fatal-chip input[type="checkbox"]::after,
.device-fatal-chip input[type="checkbox"]:checked::after {
	content: none;
	display: none;
}

.device-pick-chip__text {
	line-height: 1.25;
	text-transform: none;
	font-weight: inherit;
}

.device-fatal-chip.is-active {
	border-color: rgba(var(--primary-rgb), 0.45);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}

.device-fatal-chip:hover {
	border-color: var(--border-hover);
	color: var(--text-main);
}

.device-pick-empty {
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border: 1px dashed var(--border-color);
	color: var(--text-muted);
	font-size: 12px;
}

.device-finance-card {
	background: var(--bg-card);
}

.device-finance-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 10px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	overflow: hidden;
	background: var(--bg-body);
}

.device-finance-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	font-size: 11px;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-subtle);
}

.device-finance-row:last-child {
	border-bottom: none;
}

.device-finance-row span {
	font-weight: 600;
}

.device-finance-row strong {
	color: var(--text-main);
	font-weight: 800;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.device-finance-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.08);
	border: 1px solid rgba(var(--primary-rgb, 76, 139, 245), 0.18);
}

.device-finance-total span {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
}

.device-finance-total strong {
	font-size: 18px;
	font-weight: 900;
	color: var(--text-heading);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.device-finance-row strong small {
	font-size: 10px;
	font-weight: 600;
	color: var(--text-light);
}

.device-finance-total strong small {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-light);
}

.device-feed-section {
	margin-bottom: 0 !important;
}

.device-feed-docs {
	padding: 12px 14px !important;
}

.device-docs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.device-doc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 8px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	text-decoration: none;
	color: var(--text-muted);
	transition: 0.15s ease;
	min-height: 72px;
}

.device-doc-card .material-icons {
	font-size: 22px;
	color: var(--text-light);
}

.device-doc-card__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	line-height: 1.2;
}

.device-doc-card:hover {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.06);
	color: var(--primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.device-doc-card:hover .material-icons {
	color: var(--primary);
}

button.device-doc-card {
	cursor: pointer;
	font: inherit;
	width: 100%;
}

button.device-doc-card--share .material-icons {
	color: var(--primary);
}

.device-feed-works,
.device-feed-history,
.client-feed-history {
	padding: var(--device-block-pad, 14px) !important;
}

.compact-work-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.device-work-item {
	padding: 12px;
	border-radius: 5px;
	background: var(--bg-body);
	border: 1px solid var(--border-color);
}

.device-work-item__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.device-work-item__icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.1);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.device-work-item__icon .material-icons {
	font-size: 18px;
}

.device-work-item__body {
	flex: 1;
	min-width: 0;
}

.device-work-item__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-main);
	line-height: 1.3;
	margin-bottom: 6px;
}

.device-work-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.device-warranty-badge,
.device-work-cost-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-muted);
}

.device-warranty-badge .material-icons,
.device-work-cost-badge .material-icons {
	font-size: 12px;
}

.device-warranty-badge.is-expired {
	color: var(--danger);
	background: rgba(var(--danger-rgb), 0.1);
	border-color: rgba(var(--danger-rgb), 0.22);
}

.device-work-item__price-wrap {
	text-align: right;
	flex-shrink: 0;
}

.device-work-item__price {
	font-size: 14px;
	font-weight: 800;
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.device-work-item__price span {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-light);
}

.device-work-item__profit {
	margin-top: 2px;
	font-size: 10px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.device-work-item__profit.is-positive {
	color: var(--success);
}

.device-work-item__profit.is-negative {
	color: var(--danger);
}

.device-work-item__edit {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-muted);
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.device-work-item__edit .material-icons {
	font-size: 15px;
}

.device-work-item__edit:hover {
	border-color: rgba(var(--primary-rgb), 0.35);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.device-work-item.is-stock .device-work-item__icon {
	background: rgba(16, 185, 129, 0.12);
	color: var(--success);
}

.device-discount-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 5px;
	background: rgba(245, 158, 11, 0.12);
	color: var(--warning-hover);
}

.device-work-item__price-old {
	font-size: 0.72rem;
	color: var(--text-muted);
	text-decoration: line-through;
	text-align: right;
	margin-top: 2px;
}

.device-price-edit-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.06);
	border: 1px solid rgba(var(--primary-rgb), 0.12);
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.45;
}

.device-price-edit-note .material-icons {
	font-size: 18px;
	color: var(--primary);
	flex-shrink: 0;
}

.device-warranty-edit-row {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 200px;
}

.device-warranty-edit-row .form-control {
	flex: 1;
}

.form-control.is-readonly,
.form-control[readonly] {
	background: var(--bg-body);
	color: var(--text-muted);
	cursor: not-allowed;
	opacity: 0.85;
}

.device-warranty-edit-suffix {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text-muted);
	white-space: nowrap;
}

.device-price-edit-topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border-color);
}

.device-price-mini-form {
	margin: 0;
}

.device-price-mini-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	white-space: nowrap;
}

.device-price-mini-btn--delete {
	background: var(--bg-body);
	border-color: var(--border-color);
	color: var(--text-muted);
}

.device-price-mini-btn--delete:hover {
	border-color: rgba(239, 68, 68, 0.35);
	color: var(--danger);
	background: rgba(239, 68, 68, 0.06);
}

.device-price-mini-btn--defect {
	background: rgba(239, 68, 68, 0.08);
	border-color: rgba(239, 68, 68, 0.25);
	color: var(--danger);
}

.device-price-mini-btn--defect:hover {
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.4);
}

.device-price-form {
	width: 100%;
	min-width: 0;
}

.device-price-form .form-group {
	margin-bottom: 14px;
	min-width: 0;
}

.device-price-form .form-group:last-child {
	margin-bottom: 0;
}

.device-price-fields-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.device-price-fields-row .form-group {
	margin-bottom: 0;
}

.device-price-fields-row .form-control {
	width: 100%;
}

.device-price-form__executor select.form-control {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.device-price-form__warranty {
	width: 100%;
}

.device-price-form .device-warranty-edit-row {
	max-width: none;
	width: 100%;
}

.device-price-form .form-group.button {
	margin-top: 18px;
}

.device-price-form .btn-block {
	width: 100%;
	min-height: 40px;
	font-weight: 700;
}

@media (max-width: 560px) {
	.device-price-fields-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

.compact-work-list > li {
	margin-bottom: 0 !important;
	border-radius: 5px!important;
}

.device-feed-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.device-feed-section__head .sidebar-section-title {
	margin-bottom: 0;
}

.device-feed-add-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.device-feed-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	color: var(--text-muted);
	text-decoration: none;
}

.device-feed-add .material-icons {
	font-size: 18px;
}

.device-feed-add--stock {
	border-color: rgba(var(--primary-rgb), 0.35);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	width: auto;
	height: auto;
	min-height: 34px;
	padding: 6px 10px;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.device-feed-add--stock .material-icons {
	font-size: 18px;
}

.device-feed-add__label {
	line-height: 1;
}

.device-feed-add--stock:hover {
	background: rgba(var(--primary-rgb), 0.16);
	border-color: var(--primary);
}

.device-feed-add--manual {
	width: 26px;
	height: 26px;
	opacity: 0.55;
}

.device-feed-add--manual .material-icons {
	font-size: 16px;
}

.device-feed-add--manual:hover {
	opacity: 1;
	color: var(--text-main);
	border-color: var(--border-color);
}

.device-feed-empty {
	padding: 16px 12px;
	text-align: center;
	border: 1px dashed var(--border-color);
	border-radius: 5px;
	color: var(--text-light);
	font-size: 12px;
}

.device-feed-empty--mini {
	padding: 10px;
}

.device-feed-comment-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
	padding: 10px;
	background: var(--bg-body);
	border: 1px solid var(--border-color);
	border-radius: 5px;
}

.device-feed-comment-form textarea {
	width: 100%;
	min-height: 80px;
	padding: 10px 12px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-main);
	font-size: 13px;
	line-height: 1.5;
	resize: vertical;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.device-feed-comment-form textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 76, 139, 245), 0.12);
}

.device-feed-comment-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-radius: 5px;
	background: var(--primary);
	color: var(--surface-elevated);
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	transition: 0.15s ease;
	box-shadow: var(--shadow-primary, 0 2px 8px rgba(76, 139, 245, 0.25));
}

.device-feed-comment-submit .material-icons {
	font-size: 17px;
}

.device-feed-comment-submit:hover {
	background: var(--primary-hover, var(--primary));
	transform: translateY(-1px);
}

.device-feed-comment-submit:active {
	transform: translateY(0);
}

.device-feed-timeline {
	max-height: min(60vh, 640px);
	overflow: auto;
	padding-right: 4px;
}

.device-feed-history .timeline-wrap,
.client-feed-history .timeline-wrap {
	padding: 4px 0;
}

:is(.device-feed-history, .client-feed-history) .timeline-list::before {
	left: 13px;
	top: 10px;
	bottom: 10px;
}

:is(.device-feed-history, .client-feed-history) .tl-item {
	padding-left: 38px;
	margin-bottom: 10px;
}

:is(.device-feed-history, .client-feed-history) .tl-icon,
:is(.device-feed-history, .client-feed-history) .tl-avatar {
	width: 26px;
	height: 26px;
	border-width: 2px;
	font-size: 11px;
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-system .tl-icon .material-icons {
	font-size: 15px;
}

:is(.device-feed-history, .client-feed-history) .tl-card {
	padding: 8px 10px;
	border-radius: 5px;
	box-shadow: none;
}

:is(.device-feed-history, .client-feed-history) .tl-card:hover {
	transform: none;
	box-shadow: none;
}

:is(.device-feed-history, .client-feed-history) .tl-header {
	margin-bottom: 4px;
	font-size: 11px;
	flex-wrap: wrap;
	gap: 4px;
}

:is(.device-feed-history, .client-feed-history) .tl-type {
	display: inline-flex;
	padding: 1px 6px;
	border-radius: 5px;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

:is(.device-feed-history, .client-feed-history) .tl-type--system {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.12);
	color: var(--primary);
}

:is(.device-feed-history, .client-feed-history) .tl-type--comment {
	background: rgba(var(--warning-rgb), 0.14);
	color: var(--warning);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-system .tl-card {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.04);
	border: 1px solid rgba(var(--primary-rgb, 76, 139, 245), 0.15);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-comment .tl-card {
	background: rgba(var(--warning-rgb), 0.08);
	border: 1px solid rgba(var(--warning-rgb), 0.22);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-comment .tl-avatar {
	background: linear-gradient(135deg, var(--warning) 0%, #d99724 100%);
}

:is(.device-feed-history, .client-feed-history) .tl-date {
	font-size: 10px;
	padding: 1px 6px;
}

:is(.device-feed-history, .client-feed-history) .tl-body {
	font-size: 12px;
	line-height: 1.45;
}

:is(.device-feed-history, .client-feed-history) .tl-body > :last-child {
	margin-bottom: 0;
}

:is(.device-feed-history, .client-feed-history) .tl-event-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 1.45;
}

:is(.device-feed-history, .client-feed-history) .tl-event-line__text {
	color: var(--text-secondary);
	font-weight: 400;
	white-space: pre-wrap;
}

:is(.device-feed-history, .client-feed-history) .tl-event-line__text--primary {
	color: var(--text-main);
	font-weight: 600;
}

:is(.device-feed-history, .client-feed-history) .tl-event-line--comment p {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-secondary);
}

:is(.device-feed-history, .client-feed-history) .tl-event-line--comment p + p {
	margin-top: 4px;
}

:is(.device-feed-history, .client-feed-history) .tl-status-tag {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
	line-height: 1.35;
}

:is(.device-feed-history, .client-feed-history) .tl-status-tag.s1 { background: var(--s1); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s1-rgb), 0.35); }
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s2 { background: var(--s2); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s2-rgb), 0.35); }
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s3 { background: var(--s3); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s3-rgb), 0.35); }
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s4 { background: var(--s4); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s4-rgb), 0.35); }
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s5 { background: var(--s5); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s5-rgb), 0.35); }
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s6 { background: var(--s6); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s6-rgb), 0.35); }
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s7 { background: var(--s7); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s7-rgb), 0.35); }

:is(.device-feed-history, .client-feed-history) .tl-status-tag--plain {
	background: var(--bg-body);
	color: var(--text-muted);
	border-color: var(--border-color);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-status-log .tl-icon.tl-icon--status {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.12);
	color: var(--primary);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-call-log .tl-icon.tl-icon--call-fail {
	background: rgba(var(--danger-rgb), 0.12);
	color: var(--danger);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-call-log .tl-icon.tl-icon--call-ok {
	background: rgba(var(--success-rgb), 0.12);
	color: var(--success);
}

:is(.device-feed-history, .client-feed-history) .tl-item.is-call-log .tl-icon.tl-icon--call-reset {
	background: rgba(120, 122, 127, 0.1);
	color: var(--text-muted);
}

.device-status-modal-hint {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-muted);
}

.device-flash-alert {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: rgba(var(--danger-rgb), 0.1);
	border: 1px solid rgba(var(--danger-rgb), 0.25);
	color: var(--danger);
	font-size: 12px;
	font-weight: 600;
}

/* --- Device issue / payment picker --- */
.device-pay-form {
	margin: 0;
}

.device-pay-summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-bottom: 18px;
	padding: 14px 12px;
	border-radius: var(--radius-md);
	background: rgba(var(--primary-rgb), 0.08);
	border: 1px solid rgba(var(--primary-rgb), 0.15);
	text-align: center;
}

.device-pay-summary__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.device-pay-summary__amount {
	font-size: 28px;
	font-weight: 900;
	color: var(--text-heading);
	line-height: 1;
}

.device-pay-summary__amount small {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-light);
}

.device-pay-section {
	margin-bottom: 16px;
}

.device-pay-section__label {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.device-pay-pick {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
}

.device-pay-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 78px;
	padding: 10px 8px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
	text-align: center;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.device-pay-chip input[type="radio"],
.device-pay-chip__input {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.device-pay-chip input[type="radio"]::after,
.device-pay-chip input[type="radio"]:checked::after {
	content: none;
	display: none;
}

.device-pay-chip__icon {
	font-size: 22px !important;
	line-height: 1;
	color: var(--text-light);
	transition: color 0.15s;
}

.device-pay-chip__text {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
}

.device-pay-chip:hover {
	border-color: var(--border-hover);
	color: var(--text-main);
	transform: translateY(-1px);
}

.device-pay-chip.is-active {
	border-color: rgba(var(--primary-rgb), 0.45);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}

.device-pay-chip.is-active .device-pay-chip__icon {
	color: var(--primary);
}

.device-pay-submit {
	margin-top: 8px;
	margin-bottom: 0;
}

.device-pay-submit__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

:is(.device-feed-history, .client-feed-history) .material-icons.ar {
	font-size: 12px;
	color: var(--text-light);
	flex-shrink: 0;
}

:is(.device-feed-history, .client-feed-history) .tl-btn-delete {
	margin-left: 4px;
	padding: 0;
}

:is(.device-feed-history, .client-feed-history) .tl-btn-delete .material-icons {
	font-size: 14px;
}

@media (max-width: 1100px) {
	.device-order-body {
		grid-template-columns: 1fr;
	}

	.device-order-info {
		max-width: none;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 8px;
	}

	.device-order-hero {
		grid-column: 1 / -1;
	}

	.device-order-feed {
		position: static;
	}
}

@media (max-width: 640px) {
	.device-order-info {
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 360px) {
	.device-client-card__actions {
		gap: 8px;
	}
}

/* --- Client mood indicators --- */
.client-mood {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 999px;
	line-height: 1;
}

.client-mood .material-icons {
	font-size: inherit;
	line-height: 1;
}

.client-mood--sm { width: 20px; height: 20px; font-size: 14px; }
.client-mood--md { width: 24px; height: 24px; font-size: 16px; }
.client-mood--lg { width: 30px; height: 30px; font-size: 20px; }

.client-mood.is-ok { color: var(--success); background: rgba(22, 163, 74, 0.12); }
.client-mood.is-warn { color: var(--warning-hover); background: rgba(217, 119, 6, 0.12); }
.client-mood.is-great { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
.client-mood.is-bad { color: var(--danger); background: rgba(220, 38, 38, 0.12); }

[data-theme-resolved='dark'] .client-mood.is-ok { background: rgba(22, 163, 74, 0.18); }
[data-theme-resolved='dark'] .client-mood.is-warn { background: rgba(217, 119, 6, 0.18); }
[data-theme-resolved='dark'] .client-mood.is-great { background: rgba(37, 99, 235, 0.18); }
[data-theme-resolved='dark'] .client-mood.is-bad { background: rgba(220, 38, 38, 0.18); }

.client-mood-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.client-mood-pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-body);
	cursor: pointer;
	text-align: center;
	font-size: 11px;
	line-height: 1.25;
	color: var(--text-muted);
	transition: border-color 0.15s, background 0.15s;
}

.client-mood-pick input { display: none; }

.client-mood-pick .material-icons { font-size: 22px; }

.client-mood-pick.is-ok .material-icons { color: var(--success); }
.client-mood-pick.is-warn .material-icons { color: var(--warning-hover); }
.client-mood-pick.is-great .material-icons { color: #2563eb; }
.client-mood-pick.is-bad .material-icons { color: var(--danger); }

.client-mood-pick.is-ok:has(input:checked) {
	border-color: rgba(22, 163, 74, 0.45);
	background: rgba(22, 163, 74, 0.08);
}

.client-mood-pick.is-warn:has(input:checked) {
	border-color: rgba(217, 119, 6, 0.45);
	background: rgba(217, 119, 6, 0.08);
}

.client-mood-pick.is-great:has(input:checked) {
	border-color: rgba(37, 99, 235, 0.45);
	background: rgba(37, 99, 235, 0.08);
}

.client-mood-pick.is-bad:has(input:checked) {
	border-color: rgba(220, 38, 38, 0.45);
	background: rgba(220, 38, 38, 0.08);
}

#clients .client-table .c-name-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* --- Client avatar (letter + mood badge) --- */
.client-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.12);
	border: 1px solid rgba(var(--primary-rgb), 0.16);
	color: var(--primary);
}

.client-avatar--sm {
	width: 40px;
	height: 40px;
	border-radius: 5px;
}

.client-avatar--md {
	width: 48px;
	height: 48px;
}

.client-avatar--lg {
	width: 52px;
	height: 52px;
}

.client-avatar--is-ok {
	background: rgba(22, 163, 74, 0.12);
	border-color: rgba(22, 163, 74, 0.18);
	color: var(--success);
}

.client-avatar--is-warn {
	background: rgba(217, 119, 6, 0.12);
	border-color: rgba(217, 119, 6, 0.18);
	color: var(--warning-hover);
}

.client-avatar--is-great {
	background: rgba(37, 99, 235, 0.12);
	border-color: rgba(37, 99, 235, 0.18);
	color: #2563eb;
}

.client-avatar--is-bad {
	background: rgba(220, 38, 38, 0.1);
	border-color: rgba(220, 38, 38, 0.18);
	color: var(--danger);
}

.client-avatar__letter {
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.client-avatar--sm .client-avatar__letter { font-size: 16px; }
.client-avatar--md .client-avatar__letter { font-size: 18px; }
.client-avatar--lg .client-avatar__letter { font-size: 22px; }

.client-avatar__mood {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid var(--bg-card);
	box-shadow: var(--shadow-xs);
}

.client-avatar--sm .client-avatar__mood {
	width: 16px;
	height: 16px;
	right: -2px;
	bottom: -2px;
}

.client-avatar--lg .client-avatar__mood {
	width: 20px;
	height: 20px;
	right: -4px;
	bottom: -4px;
}

.client-avatar__mood .material-icons {
	font-size: 12px;
	line-height: 1;
}

.client-avatar--sm .client-avatar__mood .material-icons { font-size: 11px; }
.client-avatar--lg .client-avatar__mood .material-icons { font-size: 13px; }

.client-avatar__mood.is-ok {
	color: var(--surface-elevated);
	background: var(--success);
}

.client-avatar__mood.is-warn {
	color: var(--surface-elevated);
	background: var(--warning-hover);
}

.client-avatar__mood.is-great {
	color: var(--surface-elevated);
	background: #2563eb;
}

.client-avatar__mood.is-bad {
	color: var(--surface-elevated);
	background: var(--danger);
}

.client-dossier .client-avatar {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.client-table .client-col-avatar .client-avatar {
	vertical-align: middle;
}

.client-social-actions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.client-social-actions__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	color: var(--text-main);
	text-decoration: none;
	transition: transform 0.15s, background 0.15s;
}

.client-social-actions__btn:hover { transform: translateY(-1px); }
.client-social-actions__btn.is-viber { color: var(--viber); background: var(--viber-light); border-color: transparent; }
.client-social-actions__btn.is-tg { color: var(--telegram); background: var(--telegram-light); border-color: transparent; }
.client-social-actions__btn.is-wa { color: var(--whatsapp); background: var(--whatsapp-light); border-color: transparent; }

/* --- Client profile dossier --- */
.client-page-body {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: var(--device-block-gap, 10px);
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

.client-page-info {
	display: flex;
	flex-direction: column;
	gap: var(--device-block-gap, 10px);
	min-width: 0;
	max-width: 300px;
	width: 100%;
	position: sticky;
	top: 12px;
}

.client-page-feed {
	display: flex;
	flex-direction: column;
	gap: var(--device-block-gap, 10px);
	min-width: 0;
	position: sticky;
	top: 12px;
}

.client-page-feed .pro-card,
.client-feed-section {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

.client-dossier {
	--dossier-accent: var(--primary);
	--dossier-accent-rgb: var(--primary-rgb);
	--dossier-hero-bg: linear-gradient(145deg, rgba(var(--primary-rgb), 0.08) 0%, transparent 55%);
	--dossier-kpi-bg: var(--bg-body);
	--dossier-inset-bg: var(--bg-body);
	--dossier-inset-border: var(--border-color);
	border-radius: var(--device-block-radius, 5px);
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.client-dossier--is-ok {
	--dossier-accent: var(--success);
	--dossier-accent-rgb: var(--success-rgb);
	--dossier-hero-bg: linear-gradient(145deg, rgba(var(--success-rgb), 0.12) 0%, transparent 55%);
}

.client-dossier--is-warn {
	--dossier-accent: var(--warning);
	--dossier-accent-rgb: var(--warning-rgb);
	--dossier-hero-bg: linear-gradient(145deg, rgba(var(--warning-rgb), 0.12) 0%, transparent 55%);
}

.client-dossier--is-bad {
	--dossier-accent: var(--danger);
	--dossier-accent-rgb: var(--danger-rgb);
	--dossier-hero-bg: linear-gradient(145deg, rgba(var(--danger-rgb), 0.12) 0%, transparent 55%);
}

.client-dossier--is-great {
	--dossier-accent: var(--info);
	--dossier-accent-rgb: var(--info-rgb);
	--dossier-hero-bg: linear-gradient(145deg, rgba(var(--info-rgb), 0.12) 0%, transparent 55%);
}

.client-dossier__hero {
	padding: var(--device-block-pad, 14px);
	background: var(--dossier-hero-bg);
	border-bottom: 1px solid var(--border-color);
}

.client-dossier__head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}

.client-dossier__identity {
	flex: 1;
	min-width: 0;
}

.client-dossier__identity h1 {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--text-heading);
	letter-spacing: -0.02em;
}

.client-dossier__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
}

.client-dossier-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--dossier-inset-bg);
	border: 1px solid var(--dossier-inset-border);
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary);
	line-height: 1.3;
}

.client-dossier-chip--mood {
	color: var(--dossier-accent);
	background: rgba(var(--dossier-accent-rgb), 0.1);
	border-color: rgba(var(--dossier-accent-rgb), 0.22);
}

.client-dossier__phone-block {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}

.client-dossier__phones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}

.client-dossier__phone-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.client-dossier__phone.is-extra {
	font-size: 14px;
	font-weight: 700;
}

.client-dossier__phone-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	margin-bottom: 4px;
}

.client-dossier__phone-label .material-icons {
	font-size: 13px;
	color: var(--dossier-accent);
}

.client-dossier__phone {
	display: block;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--text-main) !important;
	text-decoration: none;
	letter-spacing: -0.01em;
}

.client-dossier__phone:hover {
	color: var(--primary) !important;
}

.client-dossier .device-client-card__actions {
	margin-bottom: 12px;
}

.client-dossier__quick {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--border-color);
	border-radius: 5px;
	overflow: hidden;
	background: var(--dossier-kpi-bg);
	margin-top: 12px;
}

.client-kpi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	min-height: 44px;
	padding: 6px 4px;
	border-right: 1px solid var(--border-subtle);
	text-align: center;
}

.client-kpi:last-child {
	border-right: none;
}

.client-kpi__value {
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.client-kpi__label {
	font-size: 0.5625rem;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	font-weight: 600;
}

.client-dossier__section {
	padding: var(--device-block-pad, 14px);
	border-top: 1px solid var(--border-color);
	background: var(--bg-card);
}

.client-dossier__section-title {
	margin-bottom: 12px;
}

.client-dossier__section-title .material-icons {
	color: var(--text-muted);
	opacity: 0.85;
}

.client-dossier__visit-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 10px;
	align-items: stretch;
}

.client-dossier__visit-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.client-visit-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-radius: 5px;
	background: var(--bg-body);
	border: 1px solid var(--border-color);
	min-height: 82px;
}

.client-visit-card__date {
	font-size: 12px;
	font-weight: 800;
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
	margin-bottom: 5px;
}

.client-visit-card__device {
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-secondary);
	margin-bottom: auto;
	padding-bottom: 6px;
	word-break: break-word;
}

.client-visit-card__meta {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: auto;
}

.client-visit-card__meta strong {
	color: var(--text-main);
	font-weight: 700;
}

.client-visit-card__note {
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--text-muted);
}

.client-dossier__visit-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.client-dossier__facts {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	overflow: hidden;
	background: var(--bg-body);
}

.client-dossier-fact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-subtle);
	font-size: 11px;
}

.client-dossier-fact:last-child {
	border-bottom: none;
}

.client-dossier-fact span {
	color: var(--text-muted);
	flex-shrink: 0;
	font-weight: 600;
}

.client-dossier-fact strong {
	color: var(--text-main);
	text-align: right;
	font-weight: 800;
	font-size: 12px;
}

.client-inline-count {
	font-size: 10px;
	color: var(--text-muted);
	font-weight: 700;
}

.client-order-pills {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.client-order-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 58px;
	padding: 10px 8px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
}

.client-order-pill span {
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
}

.client-order-pill small {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	font-weight: 600;
}

.client-finance-hero {
	padding: 10px 12px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.08);
	border: 1px solid rgba(var(--primary-rgb, 76, 139, 245), 0.18);
	margin-bottom: 10px;
}

.client-finance-hero__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 800;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.client-finance-hero__value {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.1;
	color: var(--text-heading);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.client-finance-hero__value small {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-light);
}

.client-finance-hero__sub {
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.45;
	color: var(--text-secondary);
}

.client-finance-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	overflow: hidden;
	background: var(--bg-body);
}

.client-finance-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	min-height: auto;
	padding: 9px 10px;
	border-radius: 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-subtle);
}

.client-finance-item:last-child {
	border-bottom: none;
}

.client-finance-item span {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	font-weight: 600;
}

.client-finance-item strong {
	font-size: 12px;
	font-weight: 800;
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
}

.client-finance-item.is-accent {
	background: var(--s4-bg);
}

.client-finance-item.is-profit {
	background: rgba(var(--success-rgb), 0.08);
}

.client-finance-item.is-profit strong {
	color: var(--success);
}

.client-order-pill.is-active {
	background: var(--s4-bg);
	border-color: rgba(var(--s4-rgb), 0.22);
}
.client-order-pill.is-active span { color: var(--s4); }

.client-order-pill.is-done {
	background: var(--s6-bg);
	border-color: rgba(var(--s6-rgb), 0.22);
}
.client-order-pill.is-done span { color: var(--s6); }

.client-order-pill.is-archive {
	background: var(--s7-bg);
	border-color: rgba(var(--s7-rgb), 0.22);
}
.client-order-pill.is-archive span { color: var(--s7); }

.client-order-pill.is-refused {
	background: var(--s5-bg);
	border-color: rgba(var(--s5-rgb), 0.22);
}
.client-order-pill.is-refused span { color: var(--s5); }

.client-dossier__profile-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	overflow: hidden;
	background: var(--bg-body);
	margin-bottom: 10px;
}

.client-dossier-profile-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	font-size: 11px;
	border-bottom: 1px solid var(--border-subtle);
}

.client-dossier-profile-row:last-child {
	border-bottom: none;
}

.client-dossier-profile-row span {
	color: var(--text-muted);
	flex-shrink: 0;
	font-weight: 600;
}

.client-dossier-profile-row strong {
	color: var(--text-main);
	text-align: right;
	font-weight: 800;
	font-size: 12px;
}

.client-dossier-alert {
	margin-top: 0;
	padding: 9px 10px;
	border-radius: 5px;
	font-size: 11px;
	line-height: 1.45;
}

.client-dossier-alert + .client-dossier-alert {
	margin-top: 8px;
}

.client-dossier-alert--note {
	background: var(--note-bg);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
}

.client-dossier-alert--warn {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	background: var(--danger-light);
	border: 1px solid rgba(var(--danger-rgb), 0.22);
	color: var(--danger);
}

.client-dossier-alert--warn .material-icons {
	font-size: 16px;
	flex-shrink: 0;
}

.client-dossier-alert__label {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 3px;
}

[data-theme-resolved='dark'] .client-dossier {
	box-shadow: var(--shadow-md);
}

[data-theme-resolved='dark'] .client-dossier__hero {
	background: var(--dossier-hero-bg), var(--bg-card);
}

[data-theme-resolved='dark'] .client-order-pill.is-active span {
	color: var(--info);
}

[data-theme-resolved='dark'] .client-order-pill.is-done span {
	color: var(--success);
}

[data-theme-resolved='dark'] .client-order-pill.is-archive span {
	color: var(--text-secondary);
}

[data-theme-resolved='dark'] .client-order-pill.is-refused span {
	color: var(--s5);
}

[data-theme-resolved='dark'] .client-finance-item.is-profit strong {
	color: var(--success);
}

[data-theme-resolved='dark'] .client-dossier-alert--warn {
	color: var(--danger);
}

.client-feed-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.client-feed-section__head .sidebar-section-title {
	margin-bottom: 0;
}

.client-feed-add {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	border-radius: 5px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	color: var(--primary);
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.client-feed-add .material-icons {
	font-size: 14px;
}

.client-feed-add:hover {
	border-color: rgba(var(--primary-rgb), 0.35);
	background: rgba(var(--primary-rgb), 0.06);
}

.client-feed-empty {
	padding: 16px 12px;
	text-align: center;
	border: 1px dashed var(--border-color);
	border-radius: 5px;
	color: var(--text-light);
	font-size: 12px;
}

/* На картці клієнта настрій уже в досьє - не дублюємо в списках замовлень */
.client-page .device_list .d-contact .client-mood {
	display: none;
}

@media (max-width: 960px) {
	.client-page-body { grid-template-columns: 1fr; }
	.client-page-info {
		position: static;
		top: auto;
		max-width: none;
		width: 100%;
	}
	.client-page-feed {
		position: static;
		top: auto;
	}
}

@media (max-width: 640px) {
	.client-dossier__identity h1 {
		word-break: break-word;
		overflow-wrap: anywhere;
		font-size: 1.35rem;
	}
	.client-social-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.client-dossier__phones {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 520px) {
	.client-mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.client-dossier__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.client-kpi { min-height: 40px; padding: 5px 3px; }
	.client-dossier__visit-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Stock module - unified CRM design
   ============================================================ */

#stock-page .unified-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--gap) !important;
	flex-wrap: wrap;
}

#stock-page .header-left {
	min-width: 0;
	flex: 1 1 auto;
}

#stock-page .header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

#stock-page .stock-view-tabs {
	margin: 0 0 var(--gap);
	width: 100%;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#stock-page .stock-view-tabs::-webkit-scrollbar {
	display: none;
}

#stock-page .stock-view-tab {
	flex-shrink: 0;
	gap: 6px;
	white-space: nowrap;
}

#stock-page .stock-view-tab--danger:not(.is-active) {
	color: var(--danger);
}

#stock-page .stock-tab-count,
#stock-page .stock-tab-meta {
	font-size: var(--font-micro);
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.07);
	line-height: 1.3;
}

#stock-page .tasks-tab.is-active .stock-tab-count {
	background: rgba(255, 255, 255, 0.22);
}

#stock-page .stock-tab-meta {
	max-width: 88px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#stock-page .stock-search-top {
	margin-bottom: var(--gap);
}

#stock-page .stock-search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 4px 4px 4px 12px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-xs);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#stock-page .stock-search-form:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

#stock-page .stock-search-form > .material-icons {
	font-size: 20px;
	color: var(--text-muted);
	flex-shrink: 0;
}

#stock-page .stock-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 8px 0;
	font-size: var(--font-caption);
	color: var(--text-main);
	outline: none;
}

#stock-page .stock-search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	text-decoration: none;
	flex-shrink: 0;
	transition: background var(--transition-fast), color var(--transition-fast);
}

#stock-page .stock-search-clear:hover {
	background: var(--gray-100);
	color: var(--text-main);
}

#stock-page .stock-search-submit {
	flex-shrink: 0;
	height: 32px !important;
	min-height: 32px !important;
	padding: 0 12px !important;
}

#stock-page .stock-breadcrumb,
#stock-item-page .stock-breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	font-size: var(--font-micro);
	margin-bottom: calc(var(--gap) * 0.75);
	color: var(--text-muted);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: 100%;
}

#stock-page .stock-breadcrumb::-webkit-scrollbar,
#stock-item-page .stock-breadcrumb::-webkit-scrollbar {
	display: none;
}

#stock-page .stock-breadcrumb a,
#stock-item-page .stock-breadcrumb a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
	flex-shrink: 0;
}

#stock-page .stock-breadcrumb a:hover,
#stock-item-page .stock-breadcrumb a:hover {
	color: var(--primary);
}

#stock-page .bc-sep,
#stock-item-page .bc-sep {
	opacity: 0.4;
	flex-shrink: 0;
	font-size: 0.85em;
}

#stock-page .bc-current,
#stock-item-page .bc-current {
	color: var(--text-main);
	font-weight: 600;
	flex-shrink: 0;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#stock-page .stock-flash-alert {
	margin-bottom: var(--gap);
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: rgba(var(--primary-rgb), 0.08);
	border: 1px solid rgba(var(--primary-rgb), 0.18);
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-main);
}

#stock-page .stock-main-content {
	min-width: 0;
	width: 100%;
}

#stock-page .btn-icon.btn-sm,
#stock-item-page .btn-icon.btn-sm,
#wiki-page .btn-icon.btn-sm,
#wiki-post-view .btn-icon.btn-sm,
#stock-page .stock-hdr-btn--icon,
#stock-item-page .stock-hdr-btn--icon,
#wiki-page .stock-hdr-btn--icon,
#wiki-post-view .stock-hdr-btn--icon {
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	min-width: 30px !important;
}

#stock-page .btn-icon.btn-sm .material-icons,
#stock-item-page .btn-icon.btn-sm .material-icons,
#wiki-page .btn-icon.btn-sm .material-icons,
#wiki-post-view .btn-icon.btn-sm .material-icons,
#stock-page .stock-hdr-btn--icon .material-icons,
#stock-item-page .stock-hdr-btn--icon .material-icons,
#wiki-page .stock-hdr-btn--icon .material-icons,
#wiki-post-view .stock-hdr-btn--icon .material-icons {
	font-size: 18px;
}

#stock-page .stock-hdr-btn--disabled,
#stock-item-page .stock-hdr-btn--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

#stock-page .stock-scope-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

#wiki-page .stock-scope-actions,
#wiki-post-view .stock-scope-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

#stock-page .stock-scope-actions .btn-sm .material-icons {
	font-size: 16px;
}

#stock-page .btn-danger-soft,
#wiki-page .btn-danger-soft,
#wiki-post-view .btn-danger-soft,
#stock-page .stock-hdr-btn--danger,
#wiki-page .stock-hdr-btn--danger,
#wiki-post-view .stock-hdr-btn--danger {
	color: var(--danger) !important;
	border-color: rgba(239, 68, 68, 0.35) !important;
}

#stock-page .btn-danger-soft:hover,
#wiki-page .btn-danger-soft:hover,
#wiki-post-view .btn-danger-soft:hover,
#stock-page .stock-hdr-btn--danger:hover,
#wiki-page .stock-hdr-btn--danger:hover,
#wiki-post-view .stock-hdr-btn--danger:hover {
	background: rgba(239, 68, 68, 0.08) !important;
	color: var(--danger) !important;
}

#stock-page .stock-hdr-del-form {
	display: inline;
	margin: 0;
}

#wiki-page .stock-hdr-del-form,
#wiki-post-view .stock-hdr-del-form {
	display: inline;
	margin: 0;
}

#stock-page .stock-hub {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

#stock-page .stock-hub-block {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	padding: 12px;
	box-shadow: var(--shadow-xs);
}

#stock-page .stock-hub-block .crm-table-wrap {
	border: none;
	box-shadow: none;
	background: transparent;
	border-radius: 0;
}

#stock-page .stock-quick-filters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: var(--gap);
}

#stock-page .stock-quick-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 10px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-xs);
	text-decoration: none;
	color: var(--text-main);
	min-width: 0;
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#stock-page .stock-quick-filter:hover {
	background: var(--bg-card-hover);
	border-color: var(--border-color);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
}

#stock-page .stock-quick-filter.is-active {
	border-color: rgba(var(--primary-rgb), 0.45);
	background: rgba(var(--primary-rgb), 0.05);
	box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}

#stock-page .stock-quick-filter--success {
	border-left: 3px solid var(--success);
}

#stock-page .stock-quick-filter--danger {
	border-left: 3px solid var(--danger);
}

#stock-page .stock-quick-filter--warn {
	border-left: 3px solid var(--warning-hover);
}

#stock-page .stock-quick-filter--primary {
	border-left: 3px solid var(--primary);
}

#stock-page .stock-quick-filter-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

#stock-page .stock-quick-filter-icon .material-icons {
	font-size: 18px;
}

#stock-page .stock-quick-filter--success .stock-quick-filter-icon {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success);
}

#stock-page .stock-quick-filter--danger .stock-quick-filter-icon {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger);
}

#stock-page .stock-quick-filter--warn .stock-quick-filter-icon {
	background: rgba(245, 158, 11, 0.1);
	color: var(--warning-hover);
}

#stock-page .stock-quick-filter--primary .stock-quick-filter-icon {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

#stock-page .stock-quick-filter-label {
	flex: 1;
	min-width: 0;
	font-size: var(--font-micro);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-main);
}

#stock-page .stock-quick-filter-label-short {
	display: none;
}

#stock-page .stock-quick-filter-count {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.06);
	color: var(--text-main);
	font-size: var(--font-micro);
	font-weight: 800;
	line-height: 1;
}

#stock-page .stock-quick-filter--success .stock-quick-filter-count {
	background: rgba(16, 185, 129, 0.12);
	color: var(--success);
}

#stock-page .stock-quick-filter--danger .stock-quick-filter-count {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger);
}

#stock-page .stock-quick-filter--warn .stock-quick-filter-count {
	background: rgba(245, 158, 11, 0.12);
	color: var(--warning-hover);
}

#stock-page .stock-quick-filter--primary .stock-quick-filter-count {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

#stock-page .stock-cat-row,
#stock-page .stock-items-table .stock-table-row,
#stock-page .movement-table .crm-table-row {
	cursor: pointer;
}

#stock-page .stock-cat-title,
#stock-page .st-name-text {
	font-weight: 600;
}

#stock-page .stock-cat-num {
	color: var(--text-muted);
	font-weight: 600;
	white-space: nowrap;
}

#stock-page .stock-cat-go {
	font-size: 18px;
	color: var(--text-muted);
	opacity: 0.45;
	vertical-align: middle;
}

#stock-page .stock-cat-row:hover .stock-cat-go {
	opacity: 1;
	color: var(--primary);
}

#stock-page .crm-table .col-go {
	width: 44px;
	text-align: center;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* Stock tables - column sizing (name 250px+, data 100px+, full width stretch) */
#stock-page .stock-table-layout,
#stock-item-page .stock-table-layout {
	width: 100%;
	min-width: 100%;
	table-layout: auto;
}

#stock-page .stock-col-name,
#stock-item-page .stock-col-name {
	min-width: 250px !important;
	width: auto !important;
	max-width: none !important;
}

#stock-page .stock-col-n,
#stock-item-page .stock-col-n {
	width: 150px !important;
	min-width: 100px !important;
	max-width: 150px !important;
}

#stock-page .stock-col-go,
#stock-item-page .stock-col-go {
	min-width: 44px;
	width: 44px;
	max-width: 44px;
	padding-left: 8px !important;
	padding-right: 8px !important;
	text-align: center;
}

#stock-page .stock-table-layout .st-name-text,
#stock-item-page .stock-table-layout .st-name-text,
#stock-page .stock-cat-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

#stock-page .stock-table-foot td {
	background: var(--gray-100);
	border-top: 1px solid var(--border-color);
	font-size: var(--font-caption);
}

[data-theme-resolved='dark'] #stock-page .stock-table-foot td {
	background: var(--bg-card-hover);
}

#stock-page .stock-back-btn,
#stock-item-page .stock-back-btn {
	width: auto;
	flex-shrink: 0;
	min-height: 30px !important;
	height: 30px !important;
	padding: 0 10px !important;
	margin: 0;
	gap: 4px;
	white-space: nowrap;
}

#stock-page .stock-back-btn .material-icons,
#stock-item-page .stock-back-btn .material-icons {
	font-size: 18px;
}

#stock-page .stock-ctx-header,
#stock-item-page .stock-ctx-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: var(--gap);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-xs);
	min-width: 0;
}

#stock-page .stock-ctx-header--filter-in_stock {
	border-left: 3px solid var(--success);
}

#stock-page .stock-ctx-header--filter-out_of_stock {
	border-left: 3px solid var(--danger);
}

#stock-page .stock-ctx-header--filter-low_stock {
	border-left: 3px solid var(--warning-hover);
}

#stock-page .stock-ctx-header--filter-services,
#stock-page .stock-ctx-header--search {
	border-left: 3px solid var(--primary);
}

#stock-page .stock-ctx-header--main,
#stock-page .stock-ctx-header--sub {
	border-left: 3px solid var(--border-color);
}

#stock-page .stock-ctx-header-main,
#stock-item-page .stock-ctx-header-main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

#stock-page .stock-ctx-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

#stock-page .stock-ctx-icon .material-icons {
	font-size: 20px;
}

#stock-page .stock-ctx-icon--success {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success);
}

#stock-page .stock-ctx-icon--danger {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger);
}

#stock-page .stock-ctx-icon--warn {
	background: rgba(245, 158, 11, 0.1);
	color: var(--warning-hover);
}

#stock-page .stock-ctx-icon--primary {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

#stock-page .stock-ctx-text {
	flex: 1;
	min-width: 0;
}

#stock-page .stock-ctx-title,
#stock-item-page .stock-ctx-title {
	margin: 0;
	font-size: var(--font-caption) !important;
	font-weight: 800;
	color: var(--text-main);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#stock-page .stock-ctx-desc {
	margin: 2px 0 0;
	font-size: var(--font-micro);
	color: var(--text-muted);
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#stock-page .stock-list-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

#stock-page .stock-list-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	font-size: var(--font-micro);
	font-weight: 700;
}

#stock-page .stock-list-range {
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-muted);
}

#stock-page .stock-list-toolbar {
	margin-bottom: var(--gap);
}

#stock-page .stock-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#stock-page .stock-list-title {
	margin: 0;
	font-size: var(--font-caption);
	font-weight: 800;
	color: var(--text-main);
}

#stock-page .st-cat-link {
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--font-caption);
}

#stock-page .st-cat-link:hover {
	color: var(--primary);
	text-decoration: underline;
}

#stock-page .st-type {
	display: inline-block;
	font-size: var(--font-micro);
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
}

#stock-page .st-type-0 {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success);
}

#stock-page .st-type-1 {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

#stock-page .st-price {
	font-weight: 700;
	color: var(--success);
	white-space: nowrap;
}

#stock-page .st-qty {
	font-weight: 600;
	white-space: nowrap;
}

#stock-page .st-qty small {
	font-weight: 500;
	color: var(--text-muted);
}

#stock-page .text-orange {
	color: var(--warning-hover);
}

#stock-page .stock-badge {
	font-size: var(--font-micro);
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 5px;
	white-space: nowrap;
	display: inline-block;
}

#stock-page .stock-badge.success {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success);
}

#stock-page .stock-badge.warning {
	background: rgba(245, 158, 11, 0.1);
	color: var(--warning-hover);
}

#stock-page .stock-badge.danger {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger);
}

#stock-page .journal-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--gap);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-subtle);
}

#stock-page .movement-table {
	min-width: 100%;
}

#stock-page .capital-summary-card .cs-val {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--primary);
	margin-top: 4px;
	line-height: 1.2;
}

#stock-page .capital-summary-card .cs-val--sm {
	font-size: var(--font-caption) !important;
	color: var(--text-main) !important;
}

#stock-page .capital-summary-card .cs-val--sm small {
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-muted);
}

#stock-page .capital-summary-card--warn {
	border-color: rgba(239, 68, 68, 0.3);
}

#stock-page .capital-summary-card--warn .cs-val {
	color: var(--danger);
}

#stock-page .move-date {
	color: var(--text-muted);
	font-size: var(--font-caption);
	white-space: nowrap;
}

#stock-page .move-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: var(--font-micro);
	text-transform: uppercase;
	white-space: nowrap;
}

#stock-page .move-type-badge .material-icons {
	font-size: 14px;
}

#stock-page .move-item a {
	font-weight: 600;
	color: var(--text-main);
	text-decoration: none;
}

#stock-page .move-item a:hover {
	color: var(--primary);
}

#stock-page .move-note {
	font-size: var(--font-micro);
	color: var(--text-muted);
	margin-top: 2px;
}

#stock-page .move-qty {
	font-weight: 700;
}

#stock-page .move-price .mp-val {
	font-weight: 600;
}

#stock-page .move-price .mp-cost {
	font-size: var(--font-micro);
	color: var(--text-muted);
}

#stock-page .move-order-link {
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}

#stock-page .move-user {
	color: var(--text-muted);
	font-size: var(--font-caption);
}

#stock-page .stock-move-writeoff-btn {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--font-micro);
	font-weight: 700;
	cursor: pointer;
	border: 1px solid rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.08);
	color: var(--danger);
}

#stock-page .capital-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--gap);
	margin-bottom: var(--gap);
}

#stock-page .capital-summary-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	padding: 14px 16px;
	box-shadow: var(--shadow-xs);
}

#stock-page .capital-summary-card .cs-label {
	font-size: var(--font-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

#stock-page .capital-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: var(--gap);
}

#stock-page .capital-toolbar-form {
	display: inline-flex;
	margin: 0;
}

#stock-page .capital-reset-form {
	margin-left: auto;
}

#stock-page .capital-toolbar .btn-sm .material-icons {
	font-size: 18px;
}

#stock-page .capital-toolbar .stock-hdr-btn--icon {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	padding: 0 !important;
}

#stock-page .stock-hub-empty--inline {
	border: none;
	background: transparent;
	padding: 24px 12px;
}

/* ============================================================
   Stock item card page
   ============================================================ */

#stock-item-page .stock-item-page-header {
	margin-bottom: calc(var(--gap) * 0.5) !important;
}

#stock-item-page .stock-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 5px;
	font-size: var(--font-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

#stock-item-page .stock-type-badge--1 {
	background: rgba(16, 185, 129, 0.12);
	color: var(--success);
}

#stock-item-page .stock-flash-alert {
	margin-bottom: var(--gap);
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: rgba(var(--primary-rgb), 0.08);
	border: 1px solid rgba(var(--primary-rgb), 0.18);
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-main);
}

#stock-item-page .stock-ctx-header--item {
	border-left: 3px solid var(--primary);
}

#stock-item-page .stock-item-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

#stock-item-page .stock-item-actions .btn-sm .material-icons {
	font-size: 16px;
}

#stock-item-page .sip-act-label {
	white-space: nowrap;
}

#stock-item-page .sip-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin-bottom: var(--gap);
}

#stock-item-page .sip-metric {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	font-size: var(--font-caption);
	box-shadow: var(--shadow-xs);
	min-width: 0;
}

#stock-item-page .sip-metric .material-icons {
	font-size: 18px;
	color: var(--text-muted);
	flex-shrink: 0;
}

#stock-item-page .sip-metric small {
	display: block;
	font-size: var(--font-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	line-height: 1;
	margin-bottom: 2px;
}

#stock-item-page .sip-metric strong {
	font-size: var(--font-caption);
	font-weight: 800;
	color: var(--text-main);
}

#stock-item-page .sip-metric--green strong {
	color: var(--success);
}

#stock-item-page .sip-metric--orange strong,
#stock-item-page .sip-metric--warn strong {
	color: var(--warning-hover);
}

#stock-item-page .sip-fifo {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: var(--gap);
	padding: 10px 12px;
	border-radius: var(--card-radius);
	background: rgba(var(--primary-rgb), 0.05);
	border: 1px solid rgba(var(--primary-rgb), 0.12);
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: 1.4;
}

#stock-item-page .sip-fifo .material-icons {
	font-size: 18px;
	color: var(--primary);
	flex-shrink: 0;
	margin-top: 1px;
}

#stock-item-page .stock-item-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--gap);
	min-width: 0;
}

#stock-item-page .sip-panel {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	padding: 14px 16px;
	box-shadow: var(--shadow-xs);
	min-width: 0;
}

#stock-item-page .sip-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

#stock-item-page .sip-panel-title {
	margin: 0;
	font-size: var(--font-caption);
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-main);
}

#stock-item-page .sip-panel-title .material-icons {
	font-size: 18px;
	color: var(--primary);
}

#stock-item-page .sip-panel--history .sip-panel-title {
	margin-bottom: 12px;
}

#stock-item-page .batch-table-wrap {
	max-width: 100%;
}

#stock-item-page .batch-table {
	min-width: 100%;
}

#stock-item-page .batch-row--empty {
	opacity: 0.45;
}

#stock-item-page .batch-supplier {
	font-weight: 700;
}

#stock-item-page .batch-date {
	color: var(--text-muted);
	font-size: var(--font-micro);
	white-space: nowrap;
}

#stock-item-page .batch-bar {
	width: 56px;
	height: 5px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 99px;
	overflow: hidden;
}

#stock-item-page .batch-bar span {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 99px;
}

#stock-item-page .sip-empty {
	text-align: center;
	padding: 36px 16px;
	color: var(--text-muted);
}

#stock-item-page .sip-empty .material-icons {
	font-size: 36px;
	opacity: 0.2;
	display: block;
	margin-bottom: 8px;
}

#stock-item-page .sip-empty p {
	margin: 0 0 12px;
	font-size: var(--font-caption);
}

#stock-item-page .movement-log {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 480px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#stock-item-page .m-row {
	display: flex;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	font-size: var(--font-caption);
}

#stock-item-page .m-icon {
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

#stock-item-page .m-info {
	flex: 1;
	min-width: 0;
}

#stock-item-page .m-header {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 2px;
}

#stock-item-page .m-type {
	font-size: var(--font-micro);
	font-weight: 800;
	text-transform: uppercase;
}

#stock-item-page .m-date {
	font-size: var(--font-micro);
	color: var(--text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

#stock-item-page .m-body {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: var(--font-micro);
}

#stock-item-page .m-qty {
	font-weight: 800;
	padding: 1px 5px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.04);
}

#stock-item-page .m-order-link {
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
}

#stock-item-page .m-in .m-icon,
#stock-item-page .m-in .m-type {
	color: var(--success);
}

#stock-item-page .m-res .m-icon,
#stock-item-page .m-res .m-type {
	color: var(--warning-hover);
}

#stock-item-page .m-out .m-icon,
#stock-item-page .m-out .m-type,
#stock-item-page .m-def .m-icon,
#stock-item-page .m-def .m-type {
	color: var(--danger);
}

#stock-item-page .m-ret .m-icon,
#stock-item-page .m-ret .m-type {
	color: var(--primary);
}

.supply-modal-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 14px;
	border-radius: var(--radius-sm);
	background: rgba(var(--primary-rgb), 0.06);
	border: 1px solid rgba(var(--primary-rgb), 0.12);
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.supply-modal-hint .material-icons {
	font-size: 18px;
	color: var(--primary);
	flex-shrink: 0;
}

.supply-modal-note {
	margin: 12px 0 0;
	font-size: var(--font-micro);
	color: var(--text-muted);
}

[data-theme-resolved='dark'] #stock-page .stock-search-clear:hover {
	background: var(--bg-card-hover);
}

@media (max-width: 992px) {
	#stock-page .stock-search-submit-text {
		display: none;
	}

	#stock-page .stock-search-submit {
		width: 32px !important;
		padding: 0 !important;
	}

	#stock-page .stock-quick-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
}

@media (max-width: 520px) {
	#stock-page .stock-quick-filter {
		min-height: 38px;
		padding: 6px 8px;
		gap: 6px;
	}

	#stock-page .stock-quick-filter-icon {
		width: 26px;
		height: 26px;
	}

	#stock-page .stock-quick-filter-icon .material-icons {
		font-size: 16px;
	}

	#stock-page .stock-quick-filter-label-full {
		display: none;
	}

	#stock-page .stock-quick-filter-label-short {
		display: inline;
	}
}

@media (max-width: 360px) {
	#stock-page .stock-quick-filters {
		grid-template-columns: 1fr 1fr;
	}
}

/* Stock tables - horizontal scroll on narrow screens */
.stock-table-wrap,
.movement-table-wrap,
.capital-table-wrap,
.batch-table-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.stock-table,
.movement-table {
	min-width: 720px;
}

#stock-page .stock-table-layout,
#stock-item-page .stock-table-layout {
	min-width: 100% !important;
}

@media (max-width: 992px) {
	.stock-search-wrap,
	.stock-search-form {
		min-width: 0;
		max-width: 100%;
		width: 100%;
		flex: none;
	}
	.stock-list-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.stock-list-head {
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.stock-filter-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.stock-filter-tabs::-webkit-scrollbar {
		display: none;
	}
	.stock-filter-tab {
		white-space: nowrap;
		flex-shrink: 0;
	}
	#stock-page .unified-page-header {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}
	#stock-page .header-left,
	#stock-page .header-actions {
		width: 100%;
		min-width: 0;
	}
	#stock-page .header-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	#stock-page .stock-hdr-btn {
		min-height: 44px;
		padding: 10px 14px;
	}
	.cat-row {
		flex-wrap: wrap;
	}
	.cat-row-main {
		min-width: 0;
		flex: 1 1 calc(100% - 88px);
	}
	.cat-row-actions {
		padding: 0 8px 8px;
		margin-left: auto;
	}
	.cat-row-actions .cat-act {
		width: 44px;
		height: 44px;
	}
	#stock-page .defect-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	#stock-page .stock-search-clear {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.stock-cat-sub-actions {
		flex-direction: column;
	}
	.stock-cat-sub-actions .stock-hdr-btn {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}
	#stock-page .capital-summary {
		grid-template-columns: 1fr 1fr;
	}
	#stock-page .capital-toolbar {
		justify-content: flex-start;
	}
	#stock-page .capital-toolbar-form {
		width: auto;
	}
	#stock-page .capital-reset-form {
		margin-left: 0;
	}
	#stock-page .movement-table {
		min-width: 100%;
	}
	#stock-page .stock-items-table,
	#stock-page .stock-cat-table {
		min-width: 100%;
	}
	#stock-page .pagination {
		overflow-x: auto;
		flex-wrap: nowrap;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.unified-page-title {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

@media (min-width: 993px) {
	#stock-page .stock-list-toolbar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	#stock-page .stock-search-form {
		flex: 0 1 400px;
		max-width: 400px;
		width: auto;
	}
	.stock-hub-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 16px;
	}
}

@media (max-width: 1100px) {
	#stock-item-page .stock-item-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	#stock-page .stock-back-btn span:not(.material-icons),
	#stock-item-page .stock-back-btn span:not(.material-icons) {
		display: none;
	}
	#stock-page .stock-back-btn,
	#stock-item-page .stock-back-btn {
		width: 30px !important;
		min-width: 30px !important;
		padding: 0 !important;
		justify-content: center;
	}
	#stock-page .capital-summary {
		grid-template-columns: 1fr;
	}
	#stock-page .stock-tab-meta {
		display: none;
	}
	#stock-page .stock-ctx-desc {
		display: none;
	}
	#stock-item-page .sip-act-label {
		display: none;
	}
	#stock-item-page .sip-metrics {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	#stock-item-page .stock-ctx-header {
		padding: 8px 10px;
		gap: 8px;
	}
	#stock-item-page .stock-item-actions {
		gap: 4px;
	}
	#stock-item-page .batch-table {
		min-width: 100%;
	}
	#stock-page .stock-table th,
	#stock-page .stock-table td,
	#stock-page .movement-table th,
	#stock-page .movement-table td,
	#stock-item-page .batch-table th,
	#stock-item-page .batch-table td {
		padding: 10px 12px;
		font-size: var(--font-micro);
	}
	#stock-item-page .sip-empty {
		padding: 36px 20px;
	}
	#stock-item-page .stock-col-name,
	#stock-page .stock-col-name {
		min-width: 250px;
	}
	#stock-item-page .stock-col-n,
	#stock-page .stock-col-n {
		min-width: 80px;
	}
	#stock-item-page .stock-breadcrumb .bc-current {
		max-width: 120px;
	}
}

/* ============================================================
   18. App shell - sidebar, header, footer, responsive layout
   ============================================================ */

html {
	font-family: var(--font-sans);
	-webkit-text-size-adjust: 100%;
}

body.logged-in {
	font-family: var(--font-sans);
	font-size: var(--font-body, 0.9375rem);
	overflow-x: clip;
}

button,
input,
select,
textarea {
	font: inherit;
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

.sidebar .material-icons,
.app-header .material-icons {
	font-size: 18px;
}

/* App shell - shell/design/ */


#devices-live-root.is-syncing {
	contain: layout style;
}

#devices-live-root.is-syncing .device_list {
	will-change: contents;
}

/* --- Utilities --- */
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Phone / meta - muted, not link-blue (all themes) */
.c-phone,
.device_list .d-phone,
a.d-row-phone {
	color: var(--text-muted) !important;
}

a.d-row-phone:hover {
	color: var(--primary) !important;
}

/* Legacy modern.css hardcoded slate - force tokens inside cards */
.device_list .d-name,
.device_list .d-phone,
.device_list .d-model,
.device_list .d-defect,
.device_list .d-desc,
.device_list .d-note,
.device_list .d-id {
	font-family: var(--font-sans) !important;
}

.device_list .d-name {
	color: var(--text-main) !important;
}

.device_list .d-model {
	color: var(--text-main) !important;
}

.device_list .d-defect {
	color: var(--warning) !important;
}

.device_list .d-desc,
.device_list .d-note {
	color: var(--text-secondary) !important;
}

/* ============================================================
   User management module - unified CRM design
   ============================================================ */

.user-module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.user-module__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
}

.user-module__header .header-left {
	min-width: 0;
	flex: 1 1 auto;
}

.user-module__header .header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.user-module__subtitle {
	margin: 4px 0 0;
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: 1.45;
}

/* Sub-navigation: Співробітники | Ролі */
.um-subnav {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin: 0 0 var(--gap);
	padding: 4px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.um-subnav::-webkit-scrollbar {
	display: none;
}

.um-subnav__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 5px;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.um-subnav__item:hover {
	color: var(--text-main);
	background: var(--bg-card-hover);
}

.um-subnav__item.is-active {
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.1);
}

.um-subnav__item icon,
.um-subnav__item .material-icons {
	font-size: 18px;
}

/* Stats row on list page */
.um-stats-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: var(--gap);
}

.um-stat-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
}

.um-stat-card__value {
	font-size: var(--font-display);
	font-weight: 800;
	line-height: 1.1;
	color: var(--text-main);
	letter-spacing: -0.03em;
}

.um-stat-card__label {
	font-size: var(--font-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.um-stat-card--success .um-stat-card__value { color: var(--success); }
.um-stat-card--warning .um-stat-card__value { color: var(--warning); }
.um-stat-card--danger .um-stat-card__value { color: var(--danger); }

/* Profile hero (edit + profile pages) */
.user-profile-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	margin-bottom: var(--gap);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
}

.user-profile-hero--compact {
	margin-bottom: calc(var(--gap) * 1.25);
}

.user-profile-hero__name {
	margin: 0 0 4px;
	font-size: var(--font-title);
	font-weight: 800;
	color: var(--text-main);
	line-height: 1.2;
}

.user-profile-hero__meta {
	margin: 0 0 10px;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.user-profile-hero__badges,
.user-profile-hero__roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.user-profile-hero__badges {
	margin-bottom: 8px;
}

.user-avatar--xl {
	width: 64px;
	height: 64px;
	font-size: 1.5rem;
}

.user-badge--neutral {
	background: var(--gray-100);
	color: var(--text-secondary);
	border-color: var(--border-color);
}

[data-theme-resolved='dark'] .user-badge--neutral {
	background: var(--bg-card-hover);
}

.user-back-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 8px;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.user-back-link:hover {
	color: var(--primary);
}

.user-panel-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	padding: 20px;
	margin-bottom: var(--gap);
}

.user-panel-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}

.user-panel-card__head--split {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.user-panel-card__head-main {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	flex: 1 1 240px;
}

.user-panel-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.user-panel-card__icon icon,
.user-panel-card__icon .material-icons {
	font-size: 20px;
}

.user-panel-card__icon--primary {
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
}

.user-panel-card__icon--info {
	background: rgba(var(--info-rgb, 13, 110, 253), 0.12);
	color: var(--info, var(--primary));
}

.user-panel-card__icon--warning {
	background: rgba(var(--warning-rgb, 232, 168, 56), 0.14);
	color: var(--warning);
}

.user-panel-card__title {
	margin: 0;
	font-size: var(--font-body);
	font-weight: 700;
	color: var(--text-main);
	line-height: 1.3;
}

.user-panel-card__hint {
	margin: 4px 0 0;
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.4;
}

.user-form .form-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--font-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.user-form .form-hint {
	margin: 6px 0 0;
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.4;
}

.user-form .form-group {
	margin-bottom: 16px;
}

.user-form .form-group:last-child {
	margin-bottom: 0;
}

.user-form .form-control.is-readonly,
.user-form .form-control[readonly] {
	background: var(--gray-100);
	cursor: not-allowed;
}

[data-theme-resolved='dark'] .user-form .form-control.is-readonly,
[data-theme-resolved='dark'] .user-form .form-control[readonly] {
	background: var(--bg-card-hover);
}

.user-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.user-form-actions {
	margin-top: 4px;
}

.user-edit-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: var(--gap);
	align-items: start;
}

.user-edit-primary .user-form > .user-panel-card:last-of-type {
	margin-bottom: 0;
}

.user-profile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	align-items: start;
}

.role-edit-layout {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}

.role-edit-meta {
	position: sticky;
	top: calc(var(--header-height, 56px) + 12px);
}

#role_edit .rbac-perms-card {
	padding: 14px 16px 18px;
}

#role_edit .rbac-perms-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

#role_edit .rbac-perms-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 1rem;
	background: var(--primary);
	color: var(--surface-elevated);
	box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.22);
}

.user-avatar--icon {
	background: var(--gray-100);
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	box-shadow: none;
}

.user-avatar--primary {
	background: var(--primary);
	color: var(--surface-elevated);
	border-color: transparent;
}

.user-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--font-micro);
	font-weight: 700;
	line-height: 1.3;
	border: 1px solid transparent;
	white-space: nowrap;
}

.user-badge--success {
	background: rgba(var(--success-rgb, 40, 167, 69), 0.12);
	color: var(--success);
	border-color: rgba(var(--success-rgb, 40, 167, 69), 0.35);
}

.user-badge--danger {
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.35);
}

.user-badge--warning {
	background: rgba(var(--warning-rgb, 232, 168, 56), 0.14);
	color: var(--warning);
	border-color: rgba(var(--warning-rgb, 232, 168, 56), 0.35);
}

.user-badge--info {
	background: rgba(var(--info-rgb, 13, 110, 253), 0.12);
	color: var(--info, var(--primary));
	border-color: rgba(var(--info-rgb, 13, 110, 253), 0.3);
}

.um-user-cell {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.um-user-cell__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.um-user-name {
	font-weight: 700;
	font-size: var(--font-caption);
	color: var(--text-main);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.um-user-name:hover {
	color: var(--primary);
}

.um-user-name--plain {
	text-decoration: none;
	cursor: default;
}

.um-user-id {
	font-size: var(--font-micro);
	color: var(--text-muted);
}

.um-muted {
	color: var(--text-muted);
	font-size: var(--font-caption);
}

.um-mono {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: var(--font-caption);
}

.um-code {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 5px;
	font-size: var(--font-micro);
	background: var(--gray-100);
	border: 1px solid var(--border-color);
	color: var(--text-muted);
}

.um-col-actions {
	width: 72px;
	text-align: right;
	white-space: nowrap;
}

.um-icon-btn:hover {
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.08);
}

.um-icon-btn--danger:hover {
	color: var(--danger);
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.1);
}

.um-action-group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	justify-content: flex-end;
}

.um-inline-form {
	display: inline;
	margin: 0;
}

.um-desktop-table {
	display: block;
}

.um-mobile-list {
	display: none;
	flex-direction: column;
	gap: 10px;
}

.um-mobile-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	padding: 14px;
}

.um-mobile-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.um-mobile-card__rows {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
}

.um-mobile-card__rows > div {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
}

.um-mobile-card__rows dt {
	margin: 0;
	font-size: var(--font-micro);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
}

.um-mobile-card__rows dd {
	margin: 0;
	font-size: var(--font-caption);
	color: var(--text-main);
	word-break: break-word;
}

.um-mobile-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.um-mobile-card__action {
	margin-top: 4px;
}

.user-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 48px 20px;
	text-align: center;
	background: var(--bg-card);
	border: 1px dashed var(--border-color);
	border-radius: var(--card-radius);
	color: var(--text-muted);
}

.user-empty-state icon,
.user-empty-state .material-icons {
	font-size: 42px;
	opacity: 0.55;
}

.um-role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}

.um-role-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-body);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
	user-select: none;
}

.um-role-chip:hover {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.03);
}

.um-role-chip.is-active {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.um-role-chip__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--border-color);
	flex-shrink: 0;
	transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.um-role-chip.is-active .um-role-chip__dot {
	background: var(--primary);
	border-color: var(--primary);
	transform: scale(1.15);
}

.um-role-chip__label {
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-main);
}

.um-info-callout {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 5px;
	background: rgba(var(--info-rgb, 13, 110, 253), 0.08);
	border: 1px solid rgba(var(--info-rgb, 13, 110, 253), 0.18);
	color: var(--text-secondary);
	font-size: var(--font-caption);
	line-height: 1.45;
	margin-bottom: var(--gap);
}

.um-info-callout icon,
.um-info-callout .material-icons {
	color: var(--info, var(--primary));
	font-size: 22px;
	flex-shrink: 0;
}

.um-info-callout p {
	margin: 0;
}

.um-info-callout--compact {
	margin-bottom: 16px;
}

.um-help-list {
	margin: 0;
	padding-left: 18px;
	font-size: var(--font-caption);
	color: var(--text-secondary);
	line-height: 1.5;
}

.um-help-list li + li {
	margin-top: 8px;
}

.user-edit-aside {
	position: sticky;
	top: calc(var(--header-height, 56px) + 12px);
}

.user-edit-aside .user-panel-card:last-child {
	margin-bottom: 0;
}

.um-table-row {
	cursor: pointer;
}

.um-table-row:hover td {
	background: var(--bg-card-hover);
}

.um-sticky-save {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

#user_edit {
	padding-bottom: calc(var(--gap) * 2);
}

.user-form-actions .btn-lg {
	min-height: 44px;
	padding-left: 24px;
	padding-right: 24px;
}

.rbac-perms-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.rbac-perms-toolbar:not(:first-child) {
	margin-top: 0;
}

.user-panel-card__head--split .rbac-perms-toolbar {
	margin-bottom: 0;
}

.rbac-enforce-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-body);
	cursor: pointer;
	font-size: var(--font-caption);
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
}

.rbac-enforce-toggle input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--primary);
}

.rbac-perm-group {
	margin-bottom: 8px;
}

.rbac-perm-group__title {
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-subtle);
	font-size: var(--font-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.rbac-stock-presets {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px dashed var(--border-color);
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.03);
}

.rbac-stock-presets__label {
	margin: 0 0 8px;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.rbac-stock-presets__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rbac-perm-group--stock .rbac-perm-group__title,
.rbac-perm-group--wiki .rbac-perm-group__title {
	margin-bottom: 12px;
}

.rbac-stock-panel {
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-card);
	overflow: hidden;
}

.rbac-stock-panel .rbac-stock-presets {
	margin: 0;
	border: none;
	border-bottom: 1px dashed var(--border-subtle);
	border-radius: 0;
	background: rgba(var(--primary-rgb), 0.02);
}

.rbac-stock-access {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-subtle);
	background: rgba(var(--primary-rgb), 0.04);
}

.rbac-stock-access__check {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	cursor: pointer;
	background: var(--bg-body);
}

.rbac-stock-access__check:has(input:checked) {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.rbac-stock-access__icon {
	color: var(--primary);
	font-size: 22px;
}

.rbac-stock-access__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rbac-stock-access__text strong {
	font-size: var(--font-caption);
}

.rbac-stock-access__text small {
	font-size: var(--font-micro);
	color: var(--text-muted);
}

.rbac-stock-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-body);
}

.rbac-stock-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted);
	font-size: var(--font-micro);
	font-weight: 700;
	cursor: pointer;
	transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.rbac-stock-tab .material-icons {
	font-size: 16px;
}

.rbac-stock-tab:hover {
	color: var(--text-main);
	background: rgba(var(--primary-rgb), 0.05);
}

.rbac-stock-tab.is-active {
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.35);
	background: rgba(var(--primary-rgb), 0.1);
}

.rbac-stock-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--border-subtle);
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.rbac-stock-tab__count.has-items {
	background: var(--primary);
	color: var(--surface-elevated);
}

.rbac-stock-panes {
	padding: 14px;
}

.rbac-stock-pane {
	display: none;
}

.rbac-stock-pane.is-active {
	display: block;
}

.rbac-stock-pane__hint {
	margin: 0 0 10px;
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.45;
}

.rbac-stock-pane__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.rbac-stock-pane__toolbar .btn-xs {
	padding: 4px 10px;
	font-size: var(--font-micro);
	line-height: 1.2;
}

/* База знань - панель дозволів (дзеркало складу) */
.rbac-wiki-presets {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px dashed var(--border-color);
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.03);
}

.rbac-wiki-presets__label {
	margin: 0 0 8px;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.rbac-wiki-presets__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rbac-wiki-panel {
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-card);
	overflow: hidden;
}

.rbac-wiki-panel .rbac-wiki-presets {
	margin: 0;
	border: none;
	border-bottom: 1px dashed var(--border-subtle);
	border-radius: 0;
	background: rgba(var(--primary-rgb), 0.02);
}

.rbac-wiki-access {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-subtle);
	background: rgba(var(--primary-rgb), 0.04);
}

.rbac-wiki-access__check {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	cursor: pointer;
	background: var(--bg-body);
}

.rbac-wiki-access__check:has(input:checked) {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.rbac-wiki-access__icon {
	color: var(--primary);
	font-size: 22px;
}

.rbac-wiki-access__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rbac-wiki-access__text strong {
	font-size: var(--font-caption);
}

.rbac-wiki-access__text small {
	font-size: var(--font-micro);
	color: var(--text-muted);
}

.rbac-wiki-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-body);
}

.rbac-wiki-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted);
	font-size: var(--font-micro);
	font-weight: 700;
	cursor: pointer;
	transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.rbac-wiki-tab .material-icons {
	font-size: 16px;
}

.rbac-wiki-tab:hover {
	color: var(--text-main);
	background: rgba(var(--primary-rgb), 0.05);
}

.rbac-wiki-tab.is-active {
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.35);
	background: rgba(var(--primary-rgb), 0.1);
}

.rbac-wiki-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--border-subtle);
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.rbac-wiki-tab__count.has-items {
	background: var(--primary);
	color: var(--surface-elevated);
}

.rbac-wiki-panes {
	padding: 14px;
}

.rbac-wiki-pane {
	display: none;
}

.rbac-wiki-pane.is-active {
	display: block;
}

.rbac-wiki-pane__hint {
	margin: 0 0 10px;
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.45;
}

.rbac-wiki-pane__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.rbac-wiki-pane__toolbar .btn-xs {
	padding: 4px 10px;
	font-size: var(--font-micro);
	line-height: 1.2;
}

/* Універсальна панель дозволів (усі модулі) - компактний accordion */
.rbac-module-panel.rbac-perm-accordion {
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-card);
	overflow: hidden;
}

.rbac-module-panel.rbac-perm-accordion > summary {
	list-style: none;
	cursor: pointer;
}

.rbac-module-panel.rbac-perm-accordion > summary::-webkit-details-marker {
	display: none;
}

.rbac-module-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 10px;
	border-bottom: 1px solid transparent;
	background: var(--bg-body);
	user-select: none;
}

.rbac-perm-accordion[open] > .rbac-module-topbar {
	border-bottom-color: var(--border-subtle);
}

.rbac-module-topbar__chevron {
	flex-shrink: 0;
	font-size: 18px;
	color: var(--text-muted);
	transition: transform var(--transition-fast);
}

.rbac-perm-accordion:not([open]) .rbac-module-topbar__chevron {
	transform: rotate(-90deg);
}

.rbac-module-topbar__icon {
	flex-shrink: 0;
	font-size: 18px;
	color: var(--primary);
}

.rbac-module-topbar__title {
	flex: 1;
	min-width: 0;
	font-size: var(--font-caption);
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rbac-module-topbar__toggles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 10px;
	margin-left: auto;
}

.rbac-module-enable-wrap {
	display: inline-flex;
	align-items: center;
}

.rbac-module-gate-inputs {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rbac-module-panel:not(.is-module-on) .rbac-module-body {
	opacity: 0.42;
	pointer-events: none;
	filter: grayscale(0.15);
}

.rbac-module-panel.is-module-on .rbac-module-body {
	opacity: 1;
	pointer-events: auto;
	filter: none;
}

.rbac-inline-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	white-space: nowrap;
}

.rbac-inline-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.rbac-inline-toggle__track {
	position: relative;
	flex-shrink: 0;
	width: 30px;
	height: 16px;
	border-radius: 999px;
	background: var(--border-subtle);
	transition: background var(--transition-fast);
}

.rbac-inline-toggle__track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--surface-elevated);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	transition: transform var(--transition-fast);
}

.rbac-inline-toggle:has(input:checked) .rbac-inline-toggle__track {
	background: var(--primary);
}

.rbac-inline-toggle:has(input:checked) .rbac-inline-toggle__track::after {
	transform: translateX(14px);
}

.rbac-inline-toggle:has(input:checked) .rbac-inline-toggle__label {
	color: var(--text-main);
}

.rbac-inline-toggle--role {
	opacity: 0.85;
}

.rbac-module-body {
	padding: 0;
}

.rbac-module-presets--compact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 6px 10px;
	border-bottom: 1px dashed var(--border-subtle);
	background: rgba(var(--primary-rgb), 0.02);
}

.rbac-module-presets--compact .rbac-module-presets__label {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.rbac-module-presets--compact .rbac-module-presets__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.rbac-module-preset-btn {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	background: var(--bg-body);
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.rbac-module-preset-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.rbac-module-panel .rbac-module-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-body);
}

.rbac-module-panel .rbac-module-tab {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.rbac-module-panel .rbac-module-tab .material-icons {
	font-size: 14px;
}

.rbac-module-panel .rbac-module-tab:hover {
	color: var(--text-main);
	background: rgba(var(--primary-rgb), 0.05);
}

.rbac-module-panel .rbac-module-tab.is-active {
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.35);
	background: rgba(var(--primary-rgb), 0.1);
}

.rbac-module-panel .rbac-module-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--border-subtle);
	color: var(--text-muted);
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
}

.rbac-module-panel .rbac-module-tab__count.has-items {
	background: var(--primary);
	color: var(--surface-elevated);
}

.rbac-module-panel .rbac-module-panes {
	padding: 8px 10px 10px;
}

.rbac-module-panel .rbac-module-pane {
	display: none;
}

.rbac-module-panel .rbac-module-pane.is-active {
	display: block;
}

.rbac-module-pane__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.rbac-module-pane__hint {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 10px;
	color: var(--text-muted);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rbac-module-pane__quick {
	display: inline-flex;
	gap: 6px;
	flex-shrink: 0;
}

.rbac-module-section-toggle {
	padding: 0;
	border: none;
	background: none;
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rbac-module-section-toggle:hover {
	color: var(--primary);
}


.rbac-perm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.rbac-perm-grid--tags {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 6px;
}

.rbac-perm-tag,
.rbac-perm-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 5px 11px;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--text-muted);
	background: var(--bg-body);
	transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
	user-select: none;
}

.rbac-perm-tag input,
.rbac-perm-chip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.rbac-perm-tag:hover,
.rbac-perm-chip:hover {
	border-color: rgba(var(--primary-rgb), 0.5);
	color: var(--text-main);
}

.rbac-perm-tag:has(input:checked),
.rbac-perm-chip:has(input:checked) {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
	box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.15);
}

.rbac-perm-tag--role,
.rbac-perm-chip--role {
	border-style: dashed;
}

.rbac-perm-tag__text,
.rbac-perm-chip__text {
	white-space: nowrap;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rbac-perm-tag:has(input:checked) .rbac-perm-role-hint,
.rbac-perm-chip:has(input:checked) .rbac-perm-role-hint {
	color: rgba(var(--primary-rgb), 0.75);
}

.rbac-perm-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	cursor: pointer;
	font-size: var(--font-caption);
	line-height: 1.35;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.rbac-perm-check:hover {
	border-color: var(--primary);
}

.rbac-perm-check:has(input:checked) {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
}

.rbac-perm-check--role {
	border-style: dashed;
}

.rbac-perm-role-hint {
	font-style: normal;
	font-size: var(--font-micro);
	color: var(--text-muted);
}

.rbac-perms-card .is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

.rbac-masked-phone {
	color: var(--text-muted);
	font-family: var(--font-mono, ui-monospace, monospace);
	letter-spacing: 0.06em;
	user-select: none;
}

.rbac-status-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
	.rbac-status-grid {
		grid-template-columns: 1fr;
	}
}

.rbac-scope-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 1024px) {
	.user-edit-shell,
	.role-edit-layout {
		grid-template-columns: 1fr;
	}

	.user-edit-aside,
	.role-edit-meta {
		position: static;
	}

	.um-stats-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.user-module__header {
		flex-direction: column;
		align-items: stretch;
	}

	.user-module__header .header-actions {
		width: 100%;
	}

	.user-module__header .header-actions .btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.user-form-grid,
	.user-profile-grid,
	.rbac-perm-grid,
	.rbac-scope-grid {
		grid-template-columns: 1fr;
	}

	.rbac-perm-tag__text,
	.rbac-perm-chip__text {
		max-width: 160px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	#role_edit .rbac-perms-toolbar .btn {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		justify-content: center;
	}

	.rbac-module-topbar {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.rbac-module-topbar__toggles {
		width: 100%;
		justify-content: flex-start;
		margin-left: 26px;
	}

	.rbac-module-panel .rbac-module-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.rbac-module-panel .rbac-module-tabs::-webkit-scrollbar {
		display: none;
	}

	.rbac-stock-tabs,
	.rbac-wiki-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}

	.rbac-stock-tab,
	.rbac-wiki-tab {
		flex-shrink: 0;
	}

	.um-desktop-table {
		display: none;
	}

	.um-mobile-list {
		display: flex;
	}

	.um-col-hide-sm {
		display: none;
	}

	.user-panel-card {
		padding: 16px;
	}

	.user-panel-card__head--split {
		flex-direction: column;
		align-items: stretch;
	}

	.rbac-perms-toolbar {
		width: 100%;
	}

	.rbac-perms-toolbar .btn {
		flex: 1 1 auto;
	}

	#user_edit {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	.um-sticky-save {
		display: block;
	}

	.user-form-actions {
		display: none;
	}

	.user-profile-hero {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.um-stats-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.um-col-hide-md {
		display: none;
	}
}

@media (min-width: 768px) {
	.user-btn-label {
		display: inline;
	}
}

/* ============================================================
   USED module - unified CRM design
   ============================================================ */

#used-page .unified-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--gap) !important;
	flex-wrap: wrap;
}

#used-page .used-tabs {
	margin-bottom: calc(var(--gap) * 1.25);
	overflow-x: auto;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#used-page .used-tabs::-webkit-scrollbar {
	display: none;
}

#used-page .used-tab {
	flex-shrink: 0;
	gap: 6px;
	white-space: nowrap;
}

#used-page .used-tab-count {
	font-size: var(--font-micro);
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.07);
	line-height: 1.3;
}

#used-page .used-tab.is-active .used-tab-count {
	background: rgba(255, 255, 255, 0.22);
}

.used-empty-state {
	padding: 48px 24px;
	text-align: center;
	border: 1px dashed var(--border-color);
	border-radius: var(--card-radius);
	color: var(--text-muted);
	background: var(--bg-card);
}

.used-empty-state .material-icons {
	font-size: 48px;
	display: block;
	margin: 0 auto 12px;
	opacity: 0.35;
}

.used-empty-state__title {
	margin: 0;
	font-size: var(--font-body);
	font-weight: 600;
	color: var(--text-main);
}

.used-empty-state__hint {
	margin: 8px 0 0;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.used-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--gap);
	list-style: none;
	padding: 0;
	margin: 0;
}

.used-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	overflow: hidden;
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.used-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: var(--border-hover);
}

.used-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.used-card-header {
	padding: 12px 16px;
	background: var(--gray-100);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

[data-theme-resolved='dark'] .used-card-header {
	background: var(--bg-card-hover);
}

.used-id {
	font-size: var(--font-micro);
	font-weight: 700;
	color: var(--text-muted);
}

.used-status-badge {
	font-size: var(--font-micro);
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.used-status-badge.s1 { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.used-status-badge.s2 { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.used-status-badge.s3 { background: rgba(0, 0, 0, 0.06); color: var(--text-muted); }
.used-status-badge.s4 { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); }

.used-card.is-reserved {
	border-color: rgba(245, 158, 11, 0.45);
}

.used-card-body {
	padding: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.used-card-top {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.used-card-thumb {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-subtle);
	background: var(--bg-body);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.used-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}

.used-card-thumb__icon {
	opacity: 0.15;
	font-size: 28px;
}

.used-card-top__meta {
	flex: 1;
	min-width: 0;
}

.used-model {
	font-size: var(--font-body);
	font-weight: 800;
	color: var(--text-main);
	line-height: 1.3;
	margin: 0 0 4px;
}

.used-date {
	font-size: var(--font-micro);
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.used-date .material-icons {
	font-size: 14px;
	opacity: 0.7;
}

.used-features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.used-feature-tag {
	background: var(--bg-body);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-secondary);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.used-feature-tag .material-icons {
	font-size: 14px;
	color: var(--primary);
	opacity: 0.85;
}

.used-repair-note {
	background: rgba(var(--primary-rgb), 0.04);
	border-left: 3px solid var(--primary);
	padding: 10px 12px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--font-micro);
	color: var(--text-secondary);
	line-height: 1.5;
	font-style: italic;
}

.used-reserve-phone {
	font-size: var(--font-micro);
	color: var(--primary);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.used-reserve-phone .material-icons {
	font-size: 14px;
}

.used-card-meta-info {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--border-subtle);
}

.used-card-footer {
	padding: 12px 16px;
	background: var(--gray-100);
	border-top: 1px solid var(--border-color);
	margin-top: auto;
}

[data-theme-resolved='dark'] .used-card-footer {
	background: var(--bg-card-hover);
}

.used-prices {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.used-sell-price {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--primary);
	line-height: 1.1;
}

.used-sell-price.sold {
	color: var(--success);
}

.used-sell-price small {
	font-size: var(--font-micro);
	display: block;
	text-transform: uppercase;
	margin-bottom: 2px;
	color: var(--text-muted);
	font-weight: 600;
}

.used-warranty,
.used-stock-days {
	font-size: var(--font-micro);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.used-warranty.active { color: var(--success); }
.used-warranty.expired { color: var(--danger); }
.used-stock-days { color: var(--text-muted); }

.used-card-action {
	white-space: nowrap;
}

.used-card-action .material-icons {
	font-size: 16px;
}

#used-detail .ud-sub-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

#used-detail .ud-sub-item .material-icons {
	font-size: 16px;
	opacity: 0.7;
}

#used-detail .ud-rb-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

#used-detail .ud-rb-timer {
	text-align: right;
}

#used-detail .ud-rb-timer__left {
	font-size: var(--font-body);
	font-weight: 800;
	color: var(--warning);
}

#used-detail .ud-rb-timer__until {
	font-size: var(--font-micro);
	color: var(--warning);
	font-weight: 700;
}

@media (max-width: 768px) {
	.used-grid {
		grid-template-columns: 1fr;
	}
}


/* ================================================================== */
/* Layout / Framework */
/* Source: design/crm_framework.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - UI Framework (crm-*)
   Єдиний стандарт: заголовки, дії, форми, секції, контекст, навігація.
   PHP-хелпери: system/ui/ui_framework.php
   Зворотна сумісність: unified-*, header-left, stock-ctx-*, tasks-page-subtitle
   ========================================================================== */

/* --- 1. Сторінка --- */
.crm-page {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* --- 2. Шапка сторінки (заголовок + дії) --- */
.crm-page-header,
.crm-page-header.unified-page-header,
.unified-page-header:not(.device-header-row):not(.dash-header):not(.dash-module-header):not(.mc-module-header) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start !important;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: calc(var(--gap) * 1.5);
}

.crm-page-header__start,
.crm-page-header__left,
.unified-page-header__left,
.unified-page-header .header-left,
.user-module__header .header-left,
#wiki-page .header-left,
#wiki-post-view .header-left,
#tasks .crm-page-header__start,
#tasks .header-left,
#stock-page .header-left,
#stock-item-page .header-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.crm-page-header__titles {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	width: 100%;
}

.crm-page-title,
.unified-page-title {
	margin: 0 !important;
	font-size: var(--font-display) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	color: var(--text-main) !important;
	line-height: 1.15;
}

.crm-page-subtitle,
.tasks-page-subtitle,
.user-module__subtitle {
	margin: 0;
	font-size: var(--font-caption);
	font-weight: 500;
	color: var(--text-muted);
	line-height: 1.45;
}

.crm-page-header__actions,
.crm-page-header .header-actions,
.unified-page-header .header-actions,
.user-module__header .header-actions,
#wiki-page .header-actions,
#wiki-post-view .header-actions,
#tasks .crm-page-header__actions,
#tasks .header-actions,
#stock-page .header-actions,
#stock-item-page .header-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

/* Однакова висота кнопок у шапці */
.crm-page-header__actions .btn,
.crm-toolbar .btn,
.stock-scope-actions .btn,
.header-actions .btn {
	flex-shrink: 0;
}

.crm-page-header__actions .btn:not(.btn-icon),
.crm-toolbar .btn:not(.btn-icon),
.stock-scope-actions .btn:not(.btn-icon) {
	min-height: 30px;
}

/* --- 3. Панель дій (редагувати / видалити / додати) --- */
.crm-toolbar,
.stock-scope-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.crm-toolbar form,
.stock-scope-actions form,
.stock-hdr-del-form {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

/* --- 4. Назад + хлібні крихти --- */
.crm-back,
.crm-back-link,
.user-back-link,
.stock-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	text-decoration: none;
	white-space: nowrap;
}

.crm-back--text,
.user-back-link {
	margin-bottom: 8px;
	padding: 0;
	height: auto;
	min-height: 0;
	border: none;
	background: transparent !important;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
	box-shadow: none !important;
}

.crm-back--text:hover,
.user-back-link:hover {
	color: var(--primary);
	background: transparent !important;
}

.crm-back .material-icons,
.crm-back-link .material-icons,
.user-back-link .material-icons,
.stock-back-btn .material-icons {
	font-size: 18px;
}

.crm-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	font-size: var(--font-micro);
	font-weight: 600;
	color: var(--text-muted);
}

.crm-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.crm-breadcrumb__item a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.crm-breadcrumb__item a:hover {
	color: var(--primary);
}

.crm-breadcrumb__item.is-current,
.crm-breadcrumb__item.is-current span {
	color: var(--text-main);
}

.crm-breadcrumb__sep {
	color: var(--border-color);
	user-select: none;
	font-weight: 700;
}

/* --- 5. Контекстний заголовок (підсторінка / фільтр / пошук) --- */
.crm-ctx-header,
.stock-ctx-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: var(--gap);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-xs);
	min-width: 0;
}

.crm-ctx-header__body,
.stock-ctx-header-main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

.crm-ctx-header__body--plain .crm-ctx-header__icon,
.stock-ctx-header-main--plain .stock-ctx-icon {
	display: none;
}

.crm-ctx-header__icon,
.stock-ctx-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.crm-ctx-header__icon .material-icons,
.stock-ctx-icon .material-icons {
	font-size: 20px;
}

.crm-ctx-header__icon--primary,
.stock-ctx-icon--primary {
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
}

.crm-ctx-header__icon--success,
.stock-ctx-icon--success {
	background: var(--success-light);
	color: var(--success);
}

.crm-ctx-header__icon--danger,
.stock-ctx-icon--danger {
	background: var(--danger-light);
	color: var(--danger);
}

.crm-ctx-header__icon--warning,
.crm-ctx-header__icon--warn,
.stock-ctx-icon--warning,
.stock-ctx-icon--warn {
	background: rgba(217, 119, 6, 0.12);
	color: #d97706;
}

.crm-ctx-header__text,
.stock-ctx-text {
	min-width: 0;
}

.crm-ctx-header__title,
.stock-ctx-title {
	margin: 0;
	font-size: var(--font-title);
	font-weight: 800;
	color: var(--text-main);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.crm-ctx-header__desc,
.stock-ctx-desc {
	margin: 2px 0 0;
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: 1.4;
}

.crm-ctx-header__meta,
.stock-ctx-meta,
.crm-ctx-header > .stock-list-meta,
.stock-ctx-header > .stock-list-meta,
.stock-ctx-header > .stock-item-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
}

/* Акцент лівої межі */
.crm-ctx-header--tone-success,
.stock-ctx-header--filter-in_stock {
	border-left: 3px solid var(--success);
}

.crm-ctx-header--tone-danger,
.stock-ctx-header--filter-out_of_stock {
	border-left: 3px solid var(--danger);
}

.crm-ctx-header--tone-warning,
.stock-ctx-header--filter-low_stock {
	border-left: 3px solid #d97706;
}

.crm-ctx-header--tone-primary,
.stock-ctx-header--filter-services,
.stock-ctx-header--search {
	border-left: 3px solid var(--primary);
}

.crm-ctx-header--tone-neutral,
.stock-ctx-header--main,
.stock-ctx-header--sub,
.stock-ctx-header--item {
	border-left: 3px solid var(--border-color);
}

/* --- 6. Секція контенту --- */
.crm-section {
	margin-bottom: calc(var(--gap) * 1.5);
}

.crm-section__head {
	margin-bottom: var(--space-sm);
}

.crm-section__title,
.unified-section-title {
	font-size: var(--font-title);
	font-weight: 800;
	color: var(--text-main);
	margin: 0 0 var(--space-sm);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.crm-section__title--spaced,
.unified-section-title--spaced {
	margin-top: calc(var(--gap) * 2);
}

.crm-section__desc,
.section-desc {
	margin: 0 0 var(--space-md);
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: 1.45;
}

/* --- 7. Форми (аліаси до design-system) --- */
.crm-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.crm-field,
.crm-form .form-group {
	margin: 0;
}

.crm-label,
.crm-form .form-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-main);
}

.crm-label--required::after,
.crm-form .form-label--required::after {
	content: ' *';
	color: var(--danger);
}

.crm-input,
.crm-form .form-control {
	width: 100%;
}

.crm-hint,
.crm-form .form-text {
	margin-top: 4px;
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.4;
}

.crm-field-error,
.crm-form .invalid-feedback {
	margin-top: 4px;
	font-size: var(--font-micro);
	color: var(--danger);
}

.crm-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 640px) {
	.crm-form-grid {
		grid-template-columns: 1fr;
	}
}

/* --- 8. Іконки --- */
.crm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: 1;
}

.crm-icon .material-icons,
.crm-icon icon {
	font-size: inherit;
}

.crm-icon--sm .material-icons {
	font-size: 16px;
}

.crm-icon--md .material-icons {
	font-size: 20px;
}

.crm-icon--lg .material-icons {
	font-size: 24px;
}

/* --- 9. Порожній стан і сповіщення --- */
.crm-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-caption);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
}

.crm-flash,
.crm-flash-alert,
.tasks-flash-alert,
.debt-flash-alert {
	margin: 0 0 var(--space-md);
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background: rgba(var(--danger-rgb), 0.1);
	border: 1px solid rgba(var(--danger-rgb), 0.22);
	color: var(--danger);
	font-size: var(--font-caption);
	font-weight: 600;
}

.crm-flash--success {
	background: rgba(var(--success-rgb), 0.1);
	border-color: rgba(var(--success-rgb), 0.22);
	color: var(--success);
}

.crm-flash--info {
	background: rgba(var(--primary-rgb), 0.08);
	border-color: rgba(var(--primary-rgb), 0.2);
	color: var(--primary);
}

/* --- 10. Адаптив --- */
@media (max-width: 768px) {
	.crm-page-header:not(.dash-module-header):not(.mc-module-header),
	.unified-page-header:not(.dash-module-header):not(.mc-module-header) {
		flex-direction: column;
		align-items: stretch;
	}

	.crm-page-header:not(.dash-module-header):not(.mc-module-header) .header-actions,
	.crm-page-header:not(.dash-module-header):not(.mc-module-header) .crm-page-header__actions,
	.unified-page-header:not(.dash-module-header):not(.mc-module-header) .header-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.crm-ctx-header,
	.stock-ctx-header {
		flex-wrap: wrap;
	}

	.crm-ctx-header__meta,
	.stock-ctx-meta {
		width: 100%;
		margin-left: 0;
	}
}


/* ================================================================== */
/* Layout / Framework - bootstrap bridge */
/* Source: design/crm_bootstrap.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Bootstrap Bridge
   CRM-specific components on top of Bootstrap 5.3
   Load last (after design-system.css) for extensions only
   ========================================================================== */

/* --- CRM button extensions (not in Bootstrap) --- */

.btn-outline {
	--bs-btn-bg: var(--bg-card);
	--bs-btn-border-color: var(--border-color);
	--bs-btn-color: var(--text-main);
	--bs-btn-hover-bg: var(--gray-100);
	--bs-btn-hover-border-color: var(--border-color);
	--bs-btn-hover-color: var(--text-main);
}

[data-theme-resolved='dark'] .btn-outline {
	--bs-btn-hover-bg: var(--bg-card-hover);
}

.btn-ghost,
.btn-link.crm-btn-ghost {
	background: transparent;
	color: var(--primary);
	border-color: transparent;
	box-shadow: none;
}

.btn-ghost:hover,
.btn-link.crm-btn-ghost:hover {
	background: var(--nav-active-bg);
	color: var(--primary-hover);
	border-color: transparent;
}

.btn-xs {
	--bs-btn-padding-y: 0.125rem;
	--bs-btn-padding-x: 0.5rem;
	--bs-btn-font-size: var(--font-micro);
	min-height: 28px;
	gap: 4px;
}

.btn-xs .material-icons {
	font-size: 16px;
}

.btn-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	padding: 0;
	gap: 0;
}

.btn-icon.btn-sm {
	width: 30px;
	height: 30px;
	min-width: 30px;
}

.btn-icon.btn-xs {
	width: 28px;
	height: 28px;
	min-width: 28px;
}

.btn-icon .material-icons {
	font-size: 18px;
}

.btn-icon.btn-xs .material-icons {
	font-size: 16px;
}

.btn-soft-primary {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.btn-soft-primary:hover {
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
}

.btn-soft-success {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.25);
}

.btn-soft-success:hover {
	background: rgba(var(--success-rgb), 0.16);
	color: var(--success);
}

.btn-soft-danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

.btn-soft-danger:hover {
	background: rgba(var(--danger-rgb), 0.14);
	color: var(--danger);
}

.btn-soft-warning {
	background: var(--warning-light);
	color: var(--warning);
	border-color: rgba(var(--warning-rgb), 0.25);
}

.btn-soft-warning:hover {
	background: rgba(var(--warning-rgb), 0.16);
	color: var(--warning);
}

.btn-soft-muted {
	background: var(--gray-100);
	color: var(--text-muted);
	border-color: var(--border-color);
}

.btn-soft-muted:hover {
	background: var(--bg-card-hover);
	color: var(--text-main);
}

.btn-danger-soft {
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.35);
}

.btn-danger-soft:hover {
	background: rgba(var(--danger-rgb), 0.08);
	color: var(--danger);
}

.btn-hover-success:hover {
	background: var(--success);
	color: var(--text-white);
	border-color: var(--success);
}

.btn-hover-primary:hover {
	background: var(--primary);
	color: var(--text-white);
	border-color: var(--primary);
}

.btn-hover-warning:hover {
	background: var(--warning);
	color: var(--text-white);
	border-color: var(--warning);
}

.btn-hover-danger:hover {
	background: var(--danger);
	color: var(--text-white);
	border-color: var(--danger);
}

.btn.is-disabled,
.btn-disabled {
	opacity: 0.45;
	pointer-events: none;
	cursor: not-allowed;
}

.btn-social {
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-muted);
}

.btn-social .material-icons {
	font-size: 16px;
}

.btn-social--call:hover {
	background: var(--success);
	border-color: var(--success);
	color: var(--text-white);
}

.btn-social--viber:hover {
	background: #7360f2;
	border-color: #7360f2;
	color: var(--text-white);
}

.btn-social--telegram:hover {
	background: #229ed9;
	border-color: #229ed9;
	color: var(--text-white);
}

.btn-social--whatsapp:hover {
	background: #25d366;
	border-color: #25d366;
	color: var(--text-white);
}

input[type='submit'].btn,
button.btn {
	font-family: var(--font-sans);
}

/* --- CRM form layout (Bootstrap form-control base from bootstrap-theme) --- */

.form-group,
.form_item {
	margin-bottom: 14px;
	position: relative;
}

.form-group:last-child,
.form_item:last-child {
	margin-bottom: 0;
}

.form-group.button,
.form_item.button {
	margin-top: 16px;
	margin-bottom: 0;
}

.form-row {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 10px;
}

.form-row .form-group,
.form-row .form_item {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 12px;
}

.form-grid .form-group,
.form-grid .form_item {
	margin-bottom: 0;
}

.form-hint {
	display: block;
	margin-top: 4px;
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.35;
}

.form-alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	font-size: var(--font-caption);
	color: var(--text-secondary);
	line-height: 1.45;
}

.form-alert .material-icons {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

.form-alert--success {
	border-color: rgba(var(--success-rgb), 0.25);
	background: var(--success-light);
	color: var(--success);
}

.form-alert--warning {
	border-color: rgba(var(--warning-rgb), 0.25);
	background: var(--warning-light);
	color: var(--warning-hover);
}

.form-alert--danger {
	border-color: rgba(var(--danger-rgb), 0.25);
	background: var(--danger-light);
	color: var(--danger);
}

.form-group > label:not(.device-fatal-chip),
.form_item > label:not(.device-fatal-chip) {
	display: block;
	margin-bottom: 6px;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-secondary);
}

.form-group:focus-within > label:not(.device-fatal-chip),
.form_item:focus-within > label:not(.device-fatal-chip) {
	color: var(--primary);
}

.form-label--required::after,
label.required::after {
	content: ' *';
	color: var(--danger);
}

textarea.form-control {
	min-height: 88px;
	height: auto;
}

.form-control.is-warning {
	border-color: var(--warning);
}

.input-group.crm-input-group {
	gap: 8px;
}

.input-group.crm-input-group > .form-control {
	flex: 1 1 auto;
	min-width: 0;
}

.input-group.crm-input-group > .btn {
	flex-shrink: 0;
}

/* CRM input-group (gap layout) - overrides Bootstrap flex-wrap default */
.input-group:not(.has-validation):not(.dropdown) {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 8px;
}

.input-group:not(.has-validation):not(.dropdown) > .form-control,
.input-group:not(.has-validation):not(.dropdown) > input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.input-group:not(.has-validation):not(.dropdown) > .btn {
	flex-shrink: 0;
	width: auto;
}

input[type="tel"].form-control,
input[type="tel"] {
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.form-select,
select.form-control {
	cursor: pointer;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392989B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
}

[data-theme-resolved='dark'] .form-select,
[data-theme-resolved='dark'] select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* CRM custom checkbox/radio (non-Bootstrap form-check-input) */
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	border: 1px solid var(--border-color);
	background: var(--input-bg);
	border-radius: 5px;
	vertical-align: middle;
}

input[type="radio"]:not(.form-check-input) {
	border-radius: 50%;
}

input[type="checkbox"]:not(.form-check-input):hover,
input[type="radio"]:not(.form-check-input):hover {
	border-color: var(--primary);
}

input[type="checkbox"]:not(.form-check-input):checked,
input[type="radio"]:not(.form-check-input):checked {
	background: var(--primary);
	border-color: var(--primary);
}

input[type="checkbox"]:not(.form-check-input):checked::after {
	content: '';
	display: block;
	width: 5px;
	height: 9px;
	margin: 2px auto 0;
	border: solid var(--text-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="radio"]:not(.form-check-input):checked::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	margin: 4px auto 0;
	border-radius: 50%;
	background: var(--text-white);
}

.form-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-caption);
	color: var(--text-main);
	cursor: pointer;
}

.form-radio label {
	margin-bottom: 0;
	font-weight: 500;
	cursor: pointer;
}

.modal-body .form-group.button .btn,
.modal-body .form_item.button .btn,
.modal-body .btn-block,
.dlg_body .form-group.button .btn,
.dlg_body .form_item.button .btn,
.dlg_body .btn-block {
	min-height: var(--form-height, 36px);
}

.date-filter-popover .btn-popover-submit {
	width: 100%;
	margin-top: 12px;
	height: 42px;
}

.stock-hdr-btn--icon {
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	min-width: 30px !important;
}


/* --- CRM page framework on Bootstrap flex --- */

.crm-page-header,
.crm-page-header.unified-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: calc(var(--gap) * 1.5);
}

.crm-breadcrumb.breadcrumb {
	padding: 0;
	background: transparent;
}

.crm-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: var(--text-light);
}

.crm-toolbar {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.crm-back--text {
	padding: 0;
	border: none;
	background: transparent;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
	box-shadow: none;
	min-height: 0;
	height: auto;
}

.crm-back--text:hover {
	color: var(--primary);
	background: transparent;
}

/* --- CRM tables --- */

.crm-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border-color);
	border-radius: var(--card-radius);
	background: var(--bg-card);
}

.crm-table {
	width: 100%;
	margin-bottom: 0;
}

.crm-table thead th {
	font-size: var(--font-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	background: var(--gray-50);
	border-bottom: 1px solid var(--border-color);
	white-space: nowrap;
}

[data-theme-resolved='dark'] .crm-table thead th {
	background: var(--gray-100);
}

/* --- Bootstrap + CRM card integration --- */

.card.crm-card,
.dash-card {
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-xs);
}

.card.crm-card:hover,
.dash-card:hover {
	box-shadow: var(--shadow-sm);
	transform: none;
}

/* --- Module subnav as Bootstrap nav-pills --- */

.module-subnav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--bg-body);
	padding: 4px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
}

.module-subnav__tab,
.module-subnav .loc-tab,
.module-subnav .nav-link {
	padding: 6px 14px;
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: var(--font-caption);
	text-decoration: none;
	color: var(--text-muted);
	white-space: nowrap;
	background: transparent;
	border: none;
}

.module-subnav__tab.active,
.module-subnav__tab.is-active,
.module-subnav .loc-tab.active,
.module-subnav .nav-link.active {
	background: var(--bg-card);
	color: var(--primary);
	box-shadow: var(--shadow-xs);
}

/* --- Status filter pills --- */

#status {
	border-radius: 100px;
	border: none;
	box-shadow: none;
}

#status li a,
#status li.active a {
	border-radius: 100px;
}


/* ================================================================== */
/* Typography */
/* Source: design/ui/typography_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Typography
   HIG-aligned: Page Title · Section · Block · Body · Caption
   Final scale applied in hig-theme.css (last layer)
   ========================================================================== */

.ds-h1,
.crm-page-title,
.unified-page-title {
	font-family: var(--font-sans);
	font-size: var(--font-display);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--text-heading);
	letter-spacing: -0.025em;
	margin: 0;
}

.ds-h2,
.crm-section__title,
.unified-section-title,
.crm-ctx-header__title {
	font-family: var(--font-sans);
	font-size: var(--font-title);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	color: var(--text-heading);
	letter-spacing: -0.015em;
}

.ds-h3 {
	font-family: var(--font-sans);
	font-size: var(--font-body);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	color: var(--text-main);
}

.ds-h4 {
	font-family: var(--font-sans);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ds-body,
.main_area {
	font-family: var(--font-sans);
	font-size: var(--font-body);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--text-main);
}

.ds-small {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--text-secondary);
}

.ds-caption,
.crm-page-subtitle,
.form-hint {
	font-family: var(--font-sans);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-relaxed);
	color: var(--text-muted);
}

.ds-micro {
	font-family: var(--font-sans);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	color: var(--text-muted);
}

.crm-page-subtitle,
.tasks-page-subtitle,
.user-module__subtitle {
	font-size: var(--font-caption);
	color: var(--text-muted);
	font-weight: var(--font-weight-normal);
}


/* ================================================================== */
/* Buttons */
/* Source: design/ui/buttons_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Buttons
   Primary | Secondary | Success | Warning | Danger | Info | Ghost | Icon
   ========================================================================== */

/* --- Base --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-height: var(--ds-btn-height);
	padding: 0 var(--space-md);
	border-radius: var(--ds-btn-radius);
	font-family: var(--font-sans);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		border-color var(--ds-duration-base) var(--ds-ease),
		color var(--ds-duration-base) var(--ds-ease),
		opacity var(--ds-duration-base) var(--ds-ease);
}

.btn:focus-visible {
	outline: none;
	outline-offset: 0;
	box-shadow: none;
	border-color: var(--primary);
}

.btn:active:not(:disabled):not(.is-disabled):not(.disabled) {
	opacity: 0.88;
}

.btn:disabled,
.btn.is-disabled,
.btn.disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Info variant --- */
.btn-info {
	--bs-btn-bg: var(--info);
	--bs-btn-border-color: var(--info);
	--bs-btn-color: var(--text-white);
	--bs-btn-hover-bg: var(--info-hover);
	--bs-btn-hover-border-color: var(--info-hover);
	--bs-btn-hover-color: var(--text-white);
	--bs-btn-active-bg: var(--info-hover);
	--bs-btn-active-border-color: var(--info-hover);
}

/* --- Ghost --- */
.btn-ghost {
	background: transparent;
	color: var(--primary);
	border-color: transparent;
	box-shadow: none;
}

.btn-ghost:hover:not(:disabled):not(.is-disabled) {
	background: var(--nav-active-bg);
	color: var(--primary-hover);
	border-color: transparent;
}

.btn-ghost:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 0;
	box-shadow: none;
}

/* --- Soft variants (toolbar / secondary actions) --- */
.btn-soft-primary {
	background: var(--nav-active-bg);
	color: var(--primary);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.btn-soft-primary:hover:not(:disabled) {
	background: rgba(var(--primary-rgb), 0.16);
	color: var(--primary-hover);
	border-color: rgba(var(--primary-rgb), 0.35);
}

.btn-soft-success {
	background: var(--success-light);
	color: var(--success);
	border: 1px solid rgba(var(--success-rgb), 0.25);
}

.btn-soft-success:hover:not(:disabled) {
	background: rgba(var(--success-rgb), 0.18);
	color: var(--success-hover);
}

.btn-soft-danger,
.btn-danger-soft {
	background: var(--danger-light);
	color: var(--danger);
	border: 1px solid rgba(var(--danger-rgb), 0.25);
}

.btn-soft-danger:hover:not(:disabled),
.btn-danger-soft:hover:not(:disabled) {
	background: rgba(var(--danger-rgb), 0.16);
	color: var(--danger-hover);
}

.btn-soft-warning {
	background: var(--warning-light);
	color: var(--warning-hover);
	border: 1px solid rgba(var(--warning-rgb), 0.25);
}

.btn-soft-warning:hover:not(:disabled) {
	background: rgba(var(--warning-rgb), 0.18);
}

.btn-soft-muted {
	background: var(--gray-100);
	color: var(--text-secondary);
	border: 1px solid var(--ds-border);
}

.btn-soft-muted:hover:not(:disabled) {
	background: var(--gray-200);
	color: var(--text-main);
}

/* --- Loading state --- */
.btn.is-loading,
.btn--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.btn.is-loading::after,
.btn--loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ds-spin 0.6s linear infinite;
	color: var(--text-white);
}

.btn-secondary.is-loading::after,
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after,
.btn-soft-muted.is-loading::after {
	color: var(--text-muted);
}

/* --- Sizes (canonical: Small | Medium | Large) --- */
.btn-sm,
.btn-xs {
	min-height: var(--ds-btn-h-sm, 32px);
	padding: 0 12px;
	font-size: var(--hig-footnote, 0.8125rem);
	font-weight: 500;
}

.btn-xs {
	padding: 0 10px;
}

.btn:not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.btn-icon) {
	min-height: var(--ds-btn-h-md, 40px);
	height: var(--ds-btn-h-md, 40px);
}

.btn-lg {
	min-height: var(--ds-btn-h-lg, 44px);
	padding: 0 20px;
	font-size: var(--hig-callout, 1rem);
	font-weight: 600;
}

.btn-block {
	display: flex;
	width: 100%;
}

/* --- Icon button --- */
.btn-icon {
	width: var(--ds-btn-h-md, 40px);
	height: var(--ds-btn-h-md, 40px);
	min-width: var(--ds-btn-h-md, 40px);
	min-height: var(--ds-btn-h-md, 40px);
	padding: 0;
	gap: 0;
}

.btn-icon.btn-sm,
.btn-icon.btn-xs {
	width: var(--ds-btn-h-sm, 32px);
	height: var(--ds-btn-h-sm, 32px);
	min-width: var(--ds-btn-h-sm, 32px);
	min-height: var(--ds-btn-h-sm, 32px);
}

.btn-icon.btn-lg {
	width: var(--ds-btn-h-lg, 44px);
	height: var(--ds-btn-h-lg, 44px);
	min-width: var(--ds-btn-h-lg, 44px);
	min-height: var(--ds-btn-h-lg, 44px);
}

.btn .material-icons,
.btn-icon .material-icons {
	font-size: 17px;
	width: 17px;
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.btn-sm .material-icons,
.btn-xs .material-icons,
.btn-icon.btn-sm .material-icons,
.btn-icon.btn-xs .material-icons {
	font-size: 17px;
	width: 17px;
	height: 17px;
}

.btn-lg .material-icons,
.btn-icon.btn-lg .material-icons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* --- Standard semantic action buttons (Додати / Зберегти / Редагувати / Видалити) --- */
.btn-action-add {
	/* inherits btn-primary when used with ui_action_add */
}

.btn-action-save {
	/* inherits btn-primary when used with ui_action_save */
}

.btn-action-edit {
	/* icon-only secondary - unified via ui_action_edit */
}

.btn-action-edit:hover:not(:disabled) {
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.35);
	background: var(--nav-active-bg);
}

.btn-action-delete,
.btn-action-delete.btn-danger-soft {
	color: var(--danger);
}

.btn-action-delete:hover:not(:disabled) {
	background: var(--danger-light);
	color: var(--danger-hover);
	border-color: rgba(var(--danger-rgb), 0.35);
}

.btn-action-search:hover:not(:disabled) {
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.25);
	background: var(--nav-active-bg);
}

.btn-action-settings:hover:not(:disabled) {
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.25);
	background: var(--nav-active-bg);
}

.btn-action-add .material-icons,
.btn-action-save .material-icons,
.btn-action-delete .material-icons,
.btn-action-edit .material-icons,
.btn-action-search .material-icons,
.btn-action-settings .material-icons {
	font-size: inherit;
}

.crm-btn__label {
	line-height: 1.2;
}


/* ================================================================== */
/* Buttons - bridge */
/* Source: design/ui/button_bridge.css */
/* ================================================================== */


/* ================================================================== */
/* Buttons - copy (subtle 20px) */
/* Source: design/ui/copy_button.css */
/* ================================================================== */
/**
 * UI Copy Button - єдиний стандарт кнопок «Копіювати».
 *
 * Геометрія: 20×20, circle, icon 12px.
 * Вигляд: subtle (opacity), light/dark через --text-muted / --order-text-muted.
 * Відступ: margin-left 10px; вертикаль - батько з align-items: center.
 *
 * Клас: .ui-copy-btn
 * Аліаси (legacy markup): .device-client-card__phone-copy, .device-doc-card__copy
 */

.ui-copy-btn,
.device-client-card__phone-copy,
.device-doc-card__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	max-width: 20px;
	max-height: 20px;
	padding: 0;
	margin-left: 10px;
	margin-top: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--text-muted, var(--order-text-muted, #6b7280));
	opacity: 0.5;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	vertical-align: middle;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ui-copy-btn .material-icons,
.ui-copy-btn .ui-icon,
.device-client-card__phone-copy .material-icons,
.device-doc-card__copy .material-icons {
	display: block;
	font-size: 12px !important;
	width: 12px;
	height: 12px;
	line-height: 12px;
	speak: none;
}

.ui-copy-btn:hover,
.ui-copy-btn:focus-visible,
.device-client-card__phone-copy:hover,
.device-client-card__phone-copy:focus-visible,
.device-doc-card__copy:hover,
.device-doc-card__copy:focus-visible {
	opacity: 1;
	color: var(--text-heading, var(--order-text-main, #111827));
	background: rgba(127, 127, 127, 0.12);
	outline: none;
}

.ui-copy-btn:focus-visible,
.device-client-card__phone-copy:focus-visible,
.device-doc-card__copy:focus-visible {
	box-shadow: 0 0 0 2px rgba(127, 127, 127, 0.25);
}

.ui-copy-btn.is-copied,
.device-client-card__phone-copy.is-copied,
.device-doc-card__copy.is-copied {
	opacity: 1;
	color: var(--success, #16a34a);
	background: rgba(var(--success-rgb, 34, 197, 94), 0.12);
}

.ui-copy-btn.is-loading,
.device-doc-card__copy.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

/* Модифікатор: додатковий верхній відступ, лише коли верстка дозволяє */
.ui-copy-btn--spaced {
	margin-top: 10px;
}

/* Батьківські рядки - вертикальне центрування з текстом */
.device-client-card__phone-row,
.device-doc-row {
	align-items: center;
}

/* Темна тема: трохи світліший hover без акцентного «крику» */
html[data-theme="dark"] .ui-copy-btn:hover,
html[data-theme="dark"] .ui-copy-btn:focus-visible,
html[data-theme="dark"] .device-client-card__phone-copy:hover,
html[data-theme="dark"] .device-client-card__phone-copy:focus-visible,
html[data-theme="dark"] .device-doc-card__copy:hover,
html[data-theme="dark"] .device-doc-card__copy:focus-visible,
body.theme-dark .ui-copy-btn:hover,
body.theme-dark .device-client-card__phone-copy:hover,
body.theme-dark .device-doc-card__copy:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-heading, #f3f4f6);
}


/* ================================================================== */
/* Forms */
/* Source: design/ui/forms_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Forms & Inputs
   Flat 2026 - canonical form states (single source of truth)
   ========================================================================== */

.form-control,
.form-select {
	min-height: var(--ds-input-h, var(--form-height, 40px));
	height: var(--ds-input-h, var(--form-height, 40px));
	padding: 0 var(--ds-input-pad-x, var(--form-pad-x, 12px));
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius, var(--input-radius));
	background-color: var(--input-bg);
	font-family: var(--font-sans);
	font-size: var(--ds-input-font, var(--font-caption));
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-main);
	box-shadow: none;
	transition:
		border-color var(--form-state-transition),
		background-color var(--form-state-transition),
		outline-color var(--form-state-transition),
		opacity var(--form-state-transition);
}

.form-control::placeholder {
	color: var(--text-light);
	opacity: 1;
}

/* Default / hover - border color only */
.form-control:hover:not(:disabled):not([readonly]):not(.is-invalid),
.form-select:hover:not(:disabled):not(.is-invalid) {
	border-color: var(--form-hover-border);
}

/* Focus / active - border color only */
.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
	border-color: var(--border-focus, var(--primary));
	background-color: var(--input-bg);
	outline: none;
	outline-offset: 0;
	box-shadow: none;
	transform: none;
}

/* Filled - value present */
.form-control:not(:placeholder-shown):not(:focus):not(.is-invalid):not(.is-valid),
.form-select:not([value=""]):not(:focus):not(.is-invalid):not(.is-valid),
.form-control.is-filled:not(:focus):not(.is-invalid):not(.is-valid) {
	border-color: var(--input-border);
}

/* Error */
.form-control.is-invalid,
.form-control:invalid:not(:placeholder-shown),
.form-select.is-invalid,
.form-group.has-error .form-control,
.form_item.has-error .form-control,
.form-group.error .form-control,
.form_item.error .form-control {
	border-color: var(--form-error-border);
}

.form-control.is-invalid:focus,
.form-control.is-invalid:focus-visible,
.form-select.is-invalid:focus,
.form-select.is-invalid:focus-visible,
.form-group.has-error .form-control:focus,
.form_item.has-error .form-control:focus,
.form-group.error .form-control:focus,
.form_item.error .form-control:focus {
	outline: none;
	box-shadow: none;
	border-color: var(--form-error-border);
	background-color: var(--input-bg);
}

.form-group.has-error > label,
.form_item.has-error > label,
.form-group.error > label,
.form_item.error > label {
	color: var(--danger);
}

/* Success */
.form-control.is-valid,
.form-select.is-valid {
	border-color: var(--form-success-border);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
	outline: none;
	box-shadow: none;
	border-color: var(--form-success-border);
	background-color: var(--input-bg);
}

/* Disabled */
.form-control:disabled,
.form-select:disabled {
	opacity: var(--form-disabled-opacity);
	cursor: not-allowed;
	background-color: var(--gray-100);
}

/* Readonly */
.form-control[readonly],
.form-control.is-readonly {
	opacity: 1;
	cursor: default;
	background: var(--form-readonly-bg);
	border-color: var(--input-border);
}

.form-control[readonly]:focus,
.form-control.is-readonly:focus {
	outline: none;
	background: var(--form-readonly-bg);
}

/* Loading */
.form-control.is-loading,
.form-select.is-loading {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A919D' stroke-width='2.5'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 36px;
	pointer-events: none;
}

.form-group.error .msg,
.form_item.error .msg,
.form-group.has-error .msg,
.form_item.has-error .msg {
	display: block;
	margin: var(--space-xs) 0 0;
	font-size: var(--font-micro);
	color: var(--danger);
	line-height: 1.35;
}

.form-error {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--font-micro);
	color: var(--danger);
	line-height: 1.35;
}

.form-hint {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: 1.4;
}

.form-group,
.form_item {
	margin-bottom: var(--space-md);
}

.form-group > label,
.form_item > label,
.form-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
	transition: color var(--form-state-transition);
}

.form-group:focus-within > label,
.form_item:focus-within > label {
	color: var(--primary);
}

textarea.form-control {
	min-height: 88px;
	height: auto;
	padding: 10px var(--ds-input-pad-x, var(--form-pad-x, 12px));
	line-height: var(--line-height-normal, 1.5);
	resize: vertical;
}

/* All input types - explicit DS coverage */
input.form-control[type="search"],
input.form-control[type="date"],
input.form-control[type="datetime-local"],
input.form-control[type="time"],
input.form-control[type="email"],
input.form-control[type="tel"],
input.form-control[type="url"],
input.form-control[type="number"],
input.form-control[type="password"] {
	min-height: var(--ds-input-h, var(--form-height, 40px));
	height: var(--ds-input-h, var(--form-height, 40px));
}

.form-control-sm {
	min-height: var(--ds-input-h, var(--form-height, 40px));
	height: var(--ds-input-h, var(--form-height, 40px));
	font-size: var(--ds-input-font, var(--font-caption));
}

.form-label--required::after {
	content: ' *';
	color: var(--danger);
	font-weight: 600;
}

@media (max-width: 768px) {
	.form-control,
	.form-select,
	input.form-control[type="search"],
	input.form-control[type="date"],
	input.form-control[type="email"],
	input.form-control[type="tel"],
	input.form-control[type="password"],
	input.form-control[type="number"] {
		font-size: 16px;
		min-height: var(--form-height-touch, 40px);
		height: var(--form-height-touch, 40px);
	}
}


/* ================================================================== */
/* Forms - bridge */
/* Source: design/ui/form_bridge.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Form Bridge
   Maps ALL legacy inputs, labels, text, lists → DS (no HTML changes)
   Single input height: 36px | Single focus ring | Unified typography
   ========================================================================== */

:root {
	--ds-input-h: 40px;
	--ds-input-pad-x: 12px;
	--ds-input-font: var(--hig-body, 0.9375rem);
	--ds-input-radius: var(--ds-input-radius, 5px);
	--ds-label-font: var(--hig-footnote, 0.8125rem);
	--ds-label-gap: 8px;
	--ds-field-gap: var(--space-md, 16px);
	--ds-check-size: 18px;
	--ds-switch-w: 44px;
	--ds-switch-h: 26px;
	--ds-switch-knob: 22px;
}

/* ── Canonical field mixin target ── */
.form-control,
.form-select,
select.form-control,
textarea.form-control,
.main_area input[type="text"]:not([type="hidden"]):not(.form-check-input):not(.rbac-inline-toggle input),
.main_area input[type="number"]:not(.form-check-input),
.main_area input[type="email"]:not(.form-check-input),
.main_area input[type="password"]:not(.form-check-input),
.main_area input[type="tel"]:not(.form-check-input),
.main_area input[type="url"]:not(.form-check-input),
.main_area input[type="search"]:not(.stock-search-input):not(.form-check-input),
.main_area input[type="date"]:not(.form-check-input),
.main_area input[type="datetime-local"]:not(.form-check-input),
.main_area input[type="time"]:not(.form-check-input),
.main_area input[type="month"]:not(.form-check-input),
.main_area input[type="week"]:not(.form-check-input),
.date-filter-popover input[type="date"],
.date-filter-popover .range-inputs input,
.dash-period-switcher select,
.phone-mask {
	box-sizing: border-box;
	font-family: var(--font-sans);
	font-size: var(--ds-input-font);
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-main);
}

/* ── Single height for all single-line inputs ── */
.form-control:not(textarea),
.form-select,
select.form-control,
.main_area input[type="text"]:not([type="hidden"]):not(.form-check-input),
.main_area input[type="number"]:not(.form-check-input),
.main_area input[type="email"]:not(.form-check-input),
.main_area input[type="password"]:not(.form-check-input),
.main_area input[type="tel"]:not(.form-check-input),
.main_area input[type="url"]:not(.form-check-input),
.main_area input[type="search"]:not(.stock-search-input):not(.form-check-input),
.main_area input[type="date"]:not(.form-check-input),
.main_area input[type="datetime-local"]:not(.form-check-input),
.main_area input[type="time"]:not(.form-check-input),
.date-filter-popover input[type="date"],
.dash-period-switcher select {
	min-height: var(--ds-input-h);
	height: var(--ds-input-h);
}

/* form-control-sm → same canonical height (no random sizes) */
.form-control-sm {
	min-height: var(--ds-input-h) !important;
	height: var(--ds-input-h) !important;
	padding: 0 var(--ds-input-pad-x) !important;
	font-size: var(--ds-input-font) !important;
	border-radius: var(--ds-input-radius)!important;
}

/* Neutralize inline height on inputs */
.main_area .form-control[style*="height"]:not(textarea),
.main_area input.form-control[style*="height"] {
	height: var(--ds-input-h) !important;
	min-height: var(--ds-input-h) !important;
}

/* ── Textarea ── */
textarea.form-control,
.main_area textarea:not(.form-check-input) {
	min-height: 88px;
	height: auto;
	padding: 10px var(--ds-input-pad-x);
	line-height: var(--line-height-normal, 1.5);
	resize: vertical;
}

textarea.form-control[style*="min-height"],
textarea.form-control[style*="height"] {
	min-height: 88px !important;
	height: auto !important;
}

/* ── Placeholder ── */
.form-control::placeholder,
.form-select::placeholder,
.main_area input::placeholder,
.main_area textarea::placeholder,
.stock-search-input::placeholder {
	color: var(--text-light);
	opacity: 1;
	font-size: inherit;
	font-weight: 400;
}

/* ── Labels ── */
.form-group > label,
.form_item > label,
.form-label,
.main_area .form-group label:not(.form-check-label):not(.form-radio label):not(.rbac-inline-toggle),
.dlg_body label:not(.form-check-label):not(.rbac-inline-toggle) {
	display: block;
	margin-bottom: var(--ds-label-gap);
	font-family: var(--font-sans);
	font-size: var(--ds-label-font);
	font-weight: 500;
	line-height: 1.3;
	color: var(--text-secondary);
	letter-spacing: -0.006em;
}

.form-label--required::after {
	content: ' *';
	color: var(--danger);
	font-weight: 600;
}

/* ── Form groups spacing ── */
.form-group,
.form_item {
	margin-bottom: var(--ds-field-gap);
}

.form-group.button,
.form_item.button {
	margin-top: var(--ds-field-gap);
	margin-bottom: 0;
}

.form-group:last-child,
.form_item:last-child {
	margin-bottom: 0;
}

/* ── Hints & errors ── */
.form-hint,
.form-help,
.field-hint {
	display: block;
	margin-top: 6px;
	font-family: var(--font-sans);
	font-size: var(--hig-caption, 0.75rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--text-muted);
}

.form-error,
.field-error,
.invalid-feedback {
	display: block;
	margin-top: 6px;
	font-family: var(--font-sans);
	font-size: var(--hig-caption, 0.75rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--danger);
}

.form-group.has-error .form-control,
.form_item.has-error .form-control,
.form-control.is-invalid,
.form-select.is-invalid {
	border-color: var(--danger);
	background: var(--danger-light);
}

/* ── Focus / hover - border color only (no outline, no shadow) ── */
.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus,
.main_area input[type="text"]:focus,
.main_area input[type="number"]:focus,
.main_area input[type="email"]:focus,
.main_area input[type="password"]:focus,
.main_area input[type="tel"]:focus,
.main_area input[type="search"]:focus,
.main_area input[type="date"]:focus,
.date-filter-popover input[type="date"]:focus,
.phone-mask:focus,
.form-control:focus-visible,
.form-select:focus-visible,
select.form-control:focus-visible {
	border-color: var(--primary);
	outline: none;
	outline-offset: 0;
	box-shadow: none;
	background-color: var(--input-bg);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled),
select.form-control:hover:not(:disabled) {
	border-color: var(--border-hover);
}

/* ── Disabled ── */
.form-control:disabled,
.form-select:disabled,
.main_area input:disabled:not(.form-check-input),
.main_area textarea:disabled,
.main_area select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--gray-100);
	color: var(--text-muted);
}

/* ── Select without form-select class ── */
.main_area select:not(.form-select):not([multiple]) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0 var(--ds-input-pad-x);
	padding-right: 36px;
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--input-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392989B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	cursor: pointer;
}

.main_area select:not(.form-select):not([multiple]):focus,
.main_area select:not(.form-select):not([multiple]):focus-visible {
	outline: none;
	box-shadow: none;
	border-color: var(--primary);
	background-color: var(--input-bg);
}

/* ── Checkbox & Radio (raw inputs without Bootstrap class) ── */
.main_area input[type="checkbox"]:not(.form-check-input),
.main_area input[type="radio"]:not(.form-check-input) {
	width: var(--ds-check-size);
	height: var(--ds-check-size);
	min-width: var(--ds-check-size);
	margin: 0;
	vertical-align: middle;
	accent-color: var(--primary);
}

.form-check {
	display: flex;
	align-items: center;
	gap: var(--space-sm, 8px);
	min-height: var(--ds-check-size);
	margin-bottom: var(--space-sm, 8px);
}

.form-check-input {
	width: var(--ds-check-size);
	height: var(--ds-check-size);
	flex-shrink: 0;
}

.form-check-label,
.form-radio label {
	margin-bottom: 0;
	font-size: var(--ds-input-font);
	font-weight: 400;
	color: var(--text-main);
	line-height: 1.3;
}

.form-radio {
	display: flex;
	align-items: center;
	gap: var(--space-sm, 8px);
	margin-bottom: var(--space-sm, 8px);
}

/* ── Switch (RBAC + any .form-switch) ── */
.rbac-inline-toggle,
.form-switch,
.ds-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	font-size: var(--ds-label-font);
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
}

.rbac-inline-toggle input,
.form-switch input,
.ds-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.rbac-inline-toggle__track,
.form-switch__track,
.ds-switch__track {
	position: relative;
	flex-shrink: 0;
	width: var(--ds-switch-w);
	height: var(--ds-switch-h);
	border-radius: 999px;
	background: rgba(120, 120, 128, 0.32);
	transition: background var(--ds-duration-base, 200ms) var(--ds-ease);
}

.rbac-inline-toggle__track::after,
.form-switch__track::after,
.ds-switch__track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(var(--ds-switch-knob));
	height: calc(var(--ds-switch-knob));
	border-radius: 50%;
	background: var(--surface-elevated);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: transform var(--ds-duration-base, 200ms) var(--ds-ease);
}

.rbac-inline-toggle:has(input:checked) .rbac-inline-toggle__track,
.form-switch:has(input:checked) .form-switch__track,
.ds-switch:has(input:checked) .ds-switch__track {
	background: var(--primary);
}

.rbac-inline-toggle:has(input:checked) .rbac-inline-toggle__track::after,
.form-switch:has(input:checked) .form-switch__track::after,
.ds-switch:has(input:checked) .ds-switch__track::after {
	transform: translateX(calc(var(--ds-switch-w) - var(--ds-switch-knob) - 4px));
}

.rbac-inline-toggle:has(input:focus-visible) .rbac-inline-toggle__track,
.form-switch:has(input:focus-visible) .form-switch__track,
.ds-switch:has(input:focus-visible) .ds-switch__track {
	outline: 2px solid rgba(var(--primary-rgb), 0.35);
	outline-offset: 2px;
}

.rbac-inline-toggle:has(input:checked) .rbac-inline-toggle__label,
.form-switch:has(input:checked) .form-switch__label,
.ds-switch:has(input:checked) .ds-switch__label {
	color: var(--text-main);
}

.ds-switch__label,
.form-switch__label {
	font-size: var(--ds-label-font);
	font-weight: 500;
}

/* ── Stock search bar (composite field - same typography) ── */
.stock-search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ds-input-h);
	padding: 0 12px;
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--input-bg);
	transition: border-color var(--ds-duration-base) var(--ds-ease);
}

.stock-search-form:focus-within {
	border-color: var(--primary);
	outline: 2px solid rgba(var(--primary-rgb), 0.35);
	outline-offset: 0;
}

.stock-search-form .material-icons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--text-muted);
	flex-shrink: 0;
}

.stock-search-input {
	flex: 1;
	min-width: 0;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	min-height: auto !important;
	height: auto !important;
	font-family: var(--font-sans);
	font-size: var(--ds-input-font);
	color: var(--text-main);
	outline: none !important;
	box-shadow: none !important;
}

/* ── Date filter popover fields ── */
.date-filter-popover .input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.date-filter-popover .input-group label {
	font-size: var(--hig-caption);
	font-weight: 500;
	color: var(--text-muted);
	margin-bottom: 0;
}

.date-filter-popover .range-inputs {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.date-filter-popover input[type="date"] {
	width: 100%;
	padding: 0 var(--ds-input-pad-x);
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--input-bg);
}

/* ── Validation alerts in forms ── */
.form-alert {
	font-size: var(--ds-input-font);
	line-height: 1.45;
}

/* ── Headings in content (H1–H4 scale) ── */
.main_area h1:not([class*="material"]),
.main_area .h1,
.main_area .ds-h1 {
	font-family: var(--font-sans);
	font-size: var(--font-display, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--text-heading);
	letter-spacing: -0.025em;
	margin: 0 0 var(--space-md);
}

.main_area h2:not([class*="material"]),
.main_area .h2,
.main_area .ds-h2 {
	font-family: var(--font-sans);
	font-size: var(--font-title, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--text-heading);
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-12, 12px);
}

.main_area h3:not([class*="material"]),
.main_area .h3,
.main_area .ds-h3 {
	font-family: var(--font-sans);
	font-size: var(--font-body, 0.9375rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--text-main);
	margin: 0 0 var(--space-sm);
}

.main_area h4:not([class*="material"]),
.main_area .h4,
.main_area .ds-h4 {
	font-family: var(--font-sans);
	font-size: var(--hig-footnote, 0.8125rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--space-xs);
}

/* ── Body text helpers ── */
.main_area p,
.main_area .ds-body {
	font-size: var(--font-body);
	line-height: var(--line-height-normal, 1.5);
	color: var(--text-main);
}

.main_area small,
.main_area .ds-small,
.main_area .text-muted {
	font-size: var(--hig-footnote);
	color: var(--text-secondary);
	line-height: 1.45;
}

.main_area .ds-caption,
.main_area .text-caption {
	font-size: var(--hig-caption);
	color: var(--text-muted);
	line-height: 1.45;
}

/* ── Lists ── */
.main_area ul:not([class]),
.main_area ol:not([class]),
.main_area .ds-list,
.main_area ul.form-list,
.main_area ol.form-list {
	margin: 0 0 var(--space-md);
	padding-left: 1.25rem;
	font-size: var(--font-body);
	line-height: var(--line-height-normal, 1.5);
	color: var(--text-main);
}

.main_area ul:not([class]) li,
.main_area ol:not([class]) li,
.main_area .ds-list li {
	margin-bottom: 4px;
}

.main_area ul:not([class]) li::marker {
	color: var(--text-muted);
}

.main_area ol:not([class]) li::marker {
	color: var(--text-secondary);
	font-weight: 600;
}

/* Filter / nav lists */
.main_area ul.pagination,
.main_area ul.nav,
.main_area .crm-tabs,
.main_area .module-subnav {
	list-style: none;
	padding-left: 0;
}

/* ── Modal / dialog forms ── */
.dlg_body .form-group,
.dlg_body .form_item,
.modal-body .form-group {
	margin-bottom: var(--ds-field-gap);
}

.dlg_body .form-control,
.modal-body .form-control {
	width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIP CHECKBOX / RADIO (orders device picker, pay type)
   ══════════════════════════════════════════════════════════════════════════ */

.device-fatal-chip,
.device-pick-chip,
.device-pay-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--ds-input-h);
	padding: 0 12px;
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--input-bg);
	font-family: var(--font-sans);
	font-size: var(--ds-input-font);
	font-weight: 500;
	line-height: 1.2;
	color: var(--text-secondary);
	cursor: pointer;
	transition:
		border-color var(--ds-duration-base, 220ms) var(--ds-ease),
		background-color var(--ds-duration-base, 220ms) var(--ds-ease),
		color var(--ds-duration-fast, 180ms) var(--ds-ease);
}

.device-fatal-chip:hover,
.device-pick-chip:hover,
.device-pay-chip:hover {
	border-color: var(--border-hover);
	color: var(--text-main);
}

.device-fatal-chip.is-active,
.device-pick-chip.is-active,
.device-pay-chip.is-active {
	border-color: rgba(var(--primary-rgb), 0.35);
	background: var(--ds-focus-bg-strong);
	color: var(--primary);
}

.device-fatal-chip input,
.device-pick-chip__input,
.device-pay-chip__input,
.device-pay-chip input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.device-fatal-chip span,
.device-pick-chip__text,
.device-pay-chip__text {
	font-size: var(--ds-input-font);
	font-weight: 500;
	line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════════
   READONLY FIELDS
   ══════════════════════════════════════════════════════════════════════════ */

.form-control.is-readonly,
.form-control[readonly],
.main_area input[readonly]:not(.form-check-input) {
	background: var(--gray-50);
	border-color: var(--border-subtle);
	color: var(--text-secondary);
	cursor: default;
}

.form-control.is-readonly:focus,
.form-control[readonly]:focus {
	outline: none;
	border-color: var(--border-subtle);
	background: var(--gray-50);
}

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD / ACCOUNTING DATE RANGE INPUTS
   ══════════════════════════════════════════════════════════════════════════ */

.range-inputs input[type="date"],
.dash_range_inputs input[type="date"],
.period-select-mobile,
.dash-period-switcher select {
	width: 100%;
	min-height: var(--ds-input-h);
	padding: 0 var(--ds-input-pad-x);
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--input-bg);
	font-family: var(--font-sans);
	font-size: var(--ds-input-font);
	color: var(--text-main);
}

/* ══════════════════════════════════════════════════════════════════════════
   SWITCH - flat knob (no shadow)
   ══════════════════════════════════════════════════════════════════════════ */

.rbac-inline-toggle__track::after,
.form-switch__track::after,
.ds-switch__track::after {
	box-shadow: none;
	border: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM RADIO - raw inputs in .form-radio
   ══════════════════════════════════════════════════════════════════════════ */

.form-radio input[type="radio"] {
	width: var(--ds-check-size);
	height: var(--ds-check-size);
	min-width: var(--ds-check-size);
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   FINAL ENFORCEMENT - single Input standard (wins over legacy CSS)
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .form-control:not(textarea),
.main_area .form-select,
.dlg_portal .form-control:not(textarea),
.dlg_portal .form-select,
.shell_content .form-control:not(textarea) {
	min-height: var(--ds-input-h) !important;
	height: var(--ds-input-h) !important;
	padding: 0 var(--ds-input-pad-x) !important;
	border: 1px solid var(--input-border) !important;
	border-radius: var(--ds-input-radius, 5px)!important;
	background-color: var(--input-bg) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--ds-input-font) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--text-main) !important;
	box-shadow: none !important;
}

.main_area textarea.form-control,
.dlg_portal textarea.form-control {
	min-height: 88px !important;
	height: auto !important;
	padding: 10px var(--ds-input-pad-x) !important;
	line-height: var(--line-height-normal, 1.47) !important;
	border-radius: var(--ds-input-radius, 5px)!important;
}

.main_area .form-control:hover:not(:disabled):not([readonly]),
.main_area .form-select:hover:not(:disabled) {
	border-color: var(--border-hover) !important;
}

.main_area .form-control:focus,
.main_area .form-select:focus,
.main_area select.form-control:focus,
.dlg_portal .form-control:focus,
.dlg_portal .form-select:focus,
.main_area .form-control:focus-visible,
.main_area .form-select:focus-visible,
.dlg_portal .form-control:focus-visible,
.dlg_portal .form-select:focus-visible {
	border-color: var(--primary) !important;
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	background-color: var(--input-bg) !important;
}

.main_area .form-control.is-invalid:focus,
.main_area .form-group.has-error .form-control:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--danger) !important;
}

.main_area .form-group > label,
.main_area .form_item > label,
.main_area .form-label,
.dlg_body .form-label {
	font-size: var(--ds-label-font) !important;
	font-weight: 500 !important;
	margin-bottom: var(--ds-label-gap) !important;
	color: var(--text-secondary) !important;
}

.main_area .form-hint,
.dlg_body .form-hint {
	font-size: var(--hig-caption, 0.75rem) !important;
	color: var(--text-muted) !important;
}

.main_area .form-error,
.dlg_body .form-error {
	font-size: var(--hig-caption, 0.75rem) !important;
	font-weight: 500 !important;
	color: var(--danger) !important;
}

.main_area .form-check-input,
.main_area input[type="checkbox"]:not(.device-pick-chip__input):not(.device-pay-chip__input),
.main_area input[type="radio"]:not(.device-pay-chip__input) {
	width: var(--ds-check-size) !important;
	height: var(--ds-check-size) !important;
	min-width: var(--ds-check-size) !important;
	accent-color: var(--primary);
}

.main_area .form-check,
.main_area .form-radio {
	gap: 8px !important;
	align-items: center !important;
}

.main_area .form-check-label,
.main_area .form-radio label {
	font-size: var(--ds-input-font) !important;
	font-weight: 400 !important;
	margin-bottom: 0 !important;
}

/* Select chevron - unified (no native mac stripes / focus artifacts) */
.main_area .form-select,
.main_area select.form-control,
.dlg_portal .form-select,
.dlg_portal select.form-control {
	padding-right: 36px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-color: var(--input-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392989B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 16px !important;
}

.main_area .form-select:focus,
.main_area select.form-control:focus,
.dlg_portal .form-select:focus,
.dlg_portal select.form-control:focus,
.main_area .form-select:focus-visible,
.main_area select.form-control:focus-visible,
.dlg_portal .form-select:focus-visible,
.dlg_portal select.form-control:focus-visible {
	background-color: var(--input-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234C8BF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 16px !important;
}

/* Composite search - inner field inherits typography */
.stock-search-input {
	font-size: var(--ds-input-font) !important;
}

/* Headings enforcement */
.main_area .crm-page-title,
.main_area .unified-page-title {
	font-size: var(--font-display) !important;
	font-weight: 700 !important;
	line-height: 1.21 !important;
}

.main_area .crm-section__title,
.main_area .unified-section-title,
.main_area .pro-card__title {
	font-size: var(--font-title) !important;
	font-weight: 600 !important;
}

/* Animation timing - unified */
.main_area .form-control,
.main_area .form-select,
.main_area .form-check-input,
.main_area .rbac-inline-toggle__track,
.main_area .ds-switch__track,
.main_area .device-fatal-chip {
	transition-duration: var(--ds-duration-base, 220ms) !important;
	transition-timing-function: var(--ds-ease, cubic-bezier(0.32, 0.72, 0, 1)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM FLAT FOCUS + 40px CANONICAL HEIGHT (wins over all legacy layers)
   Border color only on hover/focus - no outline rings, no glow shadows
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .form-group:focus-within,
.main_area .form_item:focus-within,
.dlg_portal .form-group:focus-within,
.dlg_portal .form_item:focus-within,
.main_area .stock-search-form:focus-within,
.main_area .crm-search-form:focus-within,
.main_area .filter-bar:focus-within,
.date-filter-popover .dash-period-switcher:focus-within,
.date-filter-popover .input-group:focus-within {
	outline: none !important;
	box-shadow: none !important;
}

.main_area .form-group.button .btn,
.main_area .form_item.button .btn,
.dlg_portal .form-group.button .btn,
.main_area .form-group .btn-block,
.dlg_portal .form-group .btn-block,
.main_area form .btn:not(.btn-xs):not(.btn-sm):not(.btn-icon),
.dlg_portal form .btn:not(.btn-xs):not(.btn-sm):not(.btn-icon) {
	min-height: var(--ds-input-h) !important;
	height: var(--ds-input-h) !important;
}

.main_area .phone-mask,
.main_area input[type="tel"].form-control,
.main_area input[type="email"].form-control,
.main_area input[type="number"].form-control,
.main_area input[type="password"].form-control,
.main_area input[type="search"].form-control,
.main_area input[type="date"].form-control,
.main_area input[type="time"].form-control,
.dash-period-switcher select,
.date-filter-popover input[type="date"] {
	min-height: var(--ds-input-h) !important;
	height: var(--ds-input-h) !important;
}

.main_area select:focus,
.main_area select:focus-visible,
.dlg_portal select:focus,
.dlg_portal select:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}


/* ================================================================== */
/* Forms - selects */
/* Source: design/ui/selects_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Selects
   ========================================================================== */

.form-select,
select.form-control {
	cursor: pointer;
	padding-right: 36px;
	appearance: none;
	-webkit-appearance: none;
	transition:
		border-color var(--ds-duration-base) var(--ds-ease),
		background-color var(--ds-duration-base) var(--ds-ease),
		outline-color 150ms var(--ds-ease);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392989B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
}

[data-theme-resolved='dark'] .form-select,
[data-theme-resolved='dark'] select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.form-select:focus,
select.form-control:focus,
.form-select:focus-visible,
select.form-control:focus-visible {
	border-color: var(--primary);
	background-color: var(--input-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234C8BF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	outline: none;
	box-shadow: none;
}

[data-theme-resolved='dark'] .form-select:focus,
[data-theme-resolved='dark'] select.form-control:focus,
[data-theme-resolved='dark'] .form-select:focus-visible,
[data-theme-resolved='dark'] select.form-control:focus-visible {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236BA3F7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
}


/* ================================================================== */
/* Forms - checkboxes */
/* Source: design/ui/checkboxes_core.css */
/* ================================================================== */
/* ── CRM checklist - row selection without checkbox UI ───────────────────
   PHP: crm_checklist_render() in system/ui/ui_checklist.php
   No layout shift: inset box-shadow reserved in all states, no transitions.
   ─────────────────────────────────────────────────────────────────────── */

.crm-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.crm-checklist__item {
	margin-bottom: 4px;
}

.crm-checklist__item:last-child {
	margin-bottom: 0;
}

.crm-checklist__label {
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	font-size: var(--font-caption);
	line-height: 1.45;
	color: var(--text-secondary);
	margin: 0;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	border: none;
	background: transparent;
	box-shadow: inset 0 0 0 1px transparent;
}

.crm-checklist__label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: calc(100% - 16px);
	border-radius: 0 5px 5px 0;
	background: var(--primary);
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
}

.crm-checklist__label:hover:not(:has(.crm-checklist__input:checked)) {
	background: rgba(var(--primary-rgb), 0.03);
	box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.06);
}

.crm-checklist__label:has(.crm-checklist__input:checked) {
	background: linear-gradient(
		90deg,
		rgba(var(--primary-rgb), 0.1) 0%,
		rgba(var(--primary-rgb), 0.03) 55%,
		transparent 100%
	);
	color: var(--text-main);
	box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.14);
}

.crm-checklist__label:has(.crm-checklist__input:checked)::before {
	opacity: 1;
}

.crm-checklist__label:has(.crm-checklist__input:checked) .crm-checklist__text strong {
	color: var(--primary);
}

.crm-checklist__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.crm-checklist__label:has(.crm-checklist__input:focus-visible) {
	box-shadow:
		inset 0 0 0 1px rgba(var(--primary-rgb), 0.14),
		inset 0 0 0 3px rgba(var(--primary-rgb), 0.2);
	outline: none;
}

.crm-checklist__text {
	display: block;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.crm-checklist__text strong {
	color: var(--text-main);
	font-weight: var(--font-weight-semibold);
	line-height: inherit;
}


/* ================================================================== */
/* Forms - name autocomplete */
/* Source: system/ui/css/name_autocomplete.css */
/* ================================================================== */
/* Name autocomplete (Ukrainian first names) */

.name-ac {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

.name-ac .form-control {
	width: 100%;
}

.name-ac__list {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	max-height: 240px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e5e7eb);
	border-radius: var(--radius-md, 5px);
	box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
}

.name-ac__option {
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--text-main, #111827);
	cursor: pointer;
}

.name-ac__option:hover,
.name-ac__option.is-active {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.1);
	color: var(--primary, #4c8bf5);
}

[data-theme-resolved='dark'] .name-ac__list {
	background: var(--bg-card);
	border-color: var(--border-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}


/* ================================================================== */
/* Tables */
/* Source: design/ui/tables_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Tables
   ========================================================================== */

.crm-table-wrap,
.fin-table-wrap,
.acc-table-wrap,
.stock-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--ds-border);
	border-radius: var(--card-radius);
	background: var(--ds-surface);
}

.crm-table,
.fin-table,
.acc-table,
.stock-table,
.client-table,
.stats_table,
.table {
	width: 100%;
	margin-bottom: 0;
	border-collapse: collapse;
	font-size: var(--font-caption);
	color: var(--text-main);
}

.crm-table thead th,
.fin-table thead th,
.acc-table thead th,
.stock-table thead th,
.client-table thead th,
.stats_table thead th,
.table thead th {
	padding: var(--space-sm) var(--list-row-pad-x);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	background: var(--gray-50);
	border-bottom: 1px solid var(--ds-border);
	white-space: nowrap;
}

[data-theme-resolved='dark'] .crm-table thead th,
[data-theme-resolved='dark'] .fin-table thead th,
[data-theme-resolved='dark'] .acc-table thead th,
[data-theme-resolved='dark'] .stock-table thead th,
[data-theme-resolved='dark'] .client-table thead th,
[data-theme-resolved='dark'] .stats_table thead th,
[data-theme-resolved='dark'] .table thead th {
	background: var(--gray-100);
}

.crm-table tbody td,
.fin-table tbody td,
.acc-table tbody td,
.stock-table tbody td,
.client-table tbody td,
.stats_table tbody td,
.table tbody td {
	padding: var(--list-row-pad-y) var(--list-row-pad-x);
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: middle;
}

.crm-table tbody tr:last-child td,
.fin-table tbody tr:last-child td,
.acc-table tbody tr:last-child td,
.stock-table tbody tr:last-child td,
.client-table tbody tr:last-child td,
.stats_table tbody tr:last-child td,
.table tbody tbody tr:last-child td {
	border-bottom: none;
}

.crm-table tbody tr:hover,
.fin-table tbody tr:hover,
.acc-table tbody tr:hover,
.stock-table tbody tr:hover,
.client-table tbody tr:hover,
.stats_table tbody tr:hover,
.table tbody tr:hover {
	background: var(--ds-surface-hover);
}

.col-actions,
.crm-table .col-actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.crm-table .col-actions .btn,
.col-actions .btn {
	margin-left: var(--space-xs);
}

/* --- Pagination (unified across all modules) --- */
.pagination,
.paginator ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.pagination li,
.paginator li {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.pagination a,
.paginator a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ds-btn-height-sm);
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-sm);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-btn-radius);
	background: var(--ds-surface);
	color: var(--text-secondary);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition:
		background-color var(--ds-duration-fast) var(--ds-ease),
		border-color var(--ds-duration-fast) var(--ds-ease),
		color var(--ds-duration-fast) var(--ds-ease);
}

.pagination a:hover,
.paginator a:hover {
	background: var(--ds-surface-hover);
	border-color: var(--border-hover);
	color: var(--primary);
	text-decoration: none;
}

.pagination li.active a,
.pagination a.active,
.paginator li.active a {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--text-white);
}

.pagination li.disabled a,
.paginator li.disabled a {
	opacity: 0.45;
	pointer-events: none;
}

/* Sortable column headers */
.crm-table th.sortable,
.fin-table th.sortable,
.acc-table th.sortable,
.stock-table th.sortable {
	cursor: pointer;
	user-select: none;
}

.crm-table th.sortable:hover,
.fin-table th.sortable:hover,
.acc-table th.sortable:hover,
.stock-table th.sortable:hover {
	color: var(--primary);
}

.crm-table th.sortable.is-sorted,
.fin-table th.sortable.is-sorted {
	color: var(--primary);
}

/* Striped rows (optional) */
.crm-table--striped tbody tr:nth-child(even),
.table--striped tbody tr:nth-child(even) {
	background: var(--gray-50);
}

/* Responsive table scroll (all viewports) */
.crm-table-wrap,
.fin-table-wrap,
.acc-table-wrap,
.stock-table-wrap {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

@media (max-width: 991px) {
	.crm-table,
	.fin-table,
	.acc-table,
	.stock-table,
	.client-table,
	.stats_table {
		min-width: min(100%, 560px);
	}
}

@media (max-width: 767px) {
	.crm-table-wrap,
	.fin-table-wrap,
	.acc-table-wrap,
	.stock-table-wrap {
		border-radius: var(--radius-md);
		box-shadow: inset -8px 0 8px -8px rgba(0, 0, 0, 0.06);
	}
}


/* ================================================================== */
/* Cards */
/* Source: design/ui/cards_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Cards
   Flat 2026 - border + spacing, no shadows
   ========================================================================== */

.pro-card,
.card.crm-card,
.dash-card,
.dash_card,
.mc_card,
.acc-sum-card,
.task-card {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
	box-shadow: none;
	transition:
		border-color var(--ds-duration-base) var(--ds-ease),
		background-color var(--ds-duration-base) var(--ds-ease);
}

.pro-card {
	padding: var(--space-md);
}

.pro-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-12);
	font-size: var(--font-title);
	font-weight: var(--font-weight-semibold);
	color: var(--text-heading);
}

.pro-card__title .material-icons {
	font-size: 20px;
	color: var(--primary);
}

.card.crm-card:hover,
.dash-card:hover,
.dash_card:hover,
.mc_card:hover {
	border-color: var(--border-hover);
	background: var(--ds-surface-hover);
	transform: none;
	box-shadow: none;
}

/* KPI / summary cards */
.acc-sum-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-md);
}

.acc-sum-card__label {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.acc-sum-card__value {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
	line-height: 1.2;
}

.acc-sum-card__value--negative {
	color: var(--danger);
}

.acc-sum-card--income {
	border-left: 3px solid var(--success);
}

.acc-sum-card--expense {
	border-left: 3px solid var(--danger);
}

.acc-sum-card--balance {
	border-left: 3px solid var(--primary);
}


/* ================================================================== */
/* Badges */
/* Source: design/ui/badges_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Badges & Chips
   ========================================================================== */

:root {
	--ds-tag-height: 30px;
	--ds-tag-pad-x: 10px;
	--ds-tag-gap: 4px;
	--ds-tag-radius: var(--radius-full);
	--ds-tag-font: var(--font-micro);
	--ds-tag-weight: var(--font-weight-semibold);
}

.chip,
.badge,
.crm-badge,
.user-badge,
.dc-tag,
.device-fatal-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-tag-gap);
	min-height: var(--ds-tag-height);
	padding: 0 var(--ds-tag-pad-x);
	border-radius: var(--ds-tag-radius);
	font-size: var(--ds-tag-font);
	font-weight: var(--ds-tag-weight);
	line-height: 1.35;
	white-space: nowrap;
}

.chip,
.crm-badge {
	background: var(--gray-100);
	color: var(--text-secondary);
	border: 1px solid var(--border-subtle);
}

.chip.primary,
.crm-badge--primary {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.chip.success,
.crm-badge--success {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.25);
}

.chip.warning,
.crm-badge--warning {
	background: var(--warning-light);
	color: var(--warning-hover);
	border-color: rgba(var(--warning-rgb), 0.25);
}

.chip.danger,
.crm-badge--danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

.chip.info,
.crm-badge--info {
	background: var(--info-light);
	color: var(--info);
	border-color: rgba(var(--info-rgb), 0.25);
}

/* Module-specific badges - unified with crm-badge */
.stock-badge,
.debt-badge,
.task-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
	border: 1px solid transparent;
}

.stock-badge.success,
.debt-badge-success { background: var(--success-light); color: var(--success); border-color: rgba(var(--success-rgb), 0.25); }
.stock-badge.warning,
.debt-badge-warning { background: var(--warning-light); color: var(--warning-hover); border-color: rgba(var(--warning-rgb), 0.25); }
.stock-badge.danger,
.debt-badge-danger  { background: var(--danger-light); color: var(--danger); border-color: rgba(var(--danger-rgb), 0.25); }
.stock-badge--service { background: var(--nav-active-bg); color: var(--primary); border-color: rgba(var(--primary-rgb), 0.2); }

.side_count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-full);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	background: var(--primary);
	color: #fff;
}

/* Status badges s1–s7 */
.status-accent-s1 { background: var(--s1-bg); color: var(--s1); }
.status-accent-s2 { background: var(--s2-bg); color: var(--s2); }
.status-accent-s3 { background: var(--s3-bg); color: var(--s3); }
.status-accent-s4 { background: var(--s4-bg); color: var(--s4); }
.status-accent-s5 { background: var(--s5-bg); color: var(--s5); }
.status-accent-s6 { background: var(--s6-bg); color: var(--s6); }
.status-accent-s7 { background: var(--s7-bg); color: var(--s7); }


/* ================================================================== */
/* Alerts / Notifications */
/* Source: design/ui/alerts_core.css */
/* ================================================================== */


/* ================================================================== */
/* Modals */
/* Source: design/ui/modals_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Modals & Dialogs
   Flat 2026
   ========================================================================== */

.dlg_root::backdrop {
	background: rgba(30, 34, 40, 0.52);
	animation: ds-fade-in var(--ds-duration-base) var(--ds-ease);
}

.dlg_root[open] .dlg_panel {
	animation: ds-modal-in var(--ds-duration-slow) var(--ds-ease);
}

.dlg_panel {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
	box-shadow: none;
}

.dlg_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md);
	border-bottom: 1px solid var(--border-subtle);
	min-height: var(--dlg_head_h, 52px);
	background: var(--ds-surface);
}

.dlg_title {
	font-size: var(--font-title);
	font-weight: var(--font-weight-semibold);
	color: var(--text-heading);
	margin: 0;
	letter-spacing: -0.015em;
}

.dlg_body,
.modal-body {
	padding: var(--space-md);
}

.dlg_foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-sm);
	padding: var(--space-12) var(--space-md);
	border-top: 1px solid var(--border-subtle);
	background: var(--gray-50);
}

.modal:target,
[id^="edit_"]:target {
	animation: ds-fade-in var(--ds-duration-base) var(--ds-ease);
}

.modal:target .modal-content,
[id^="edit_"]:target > form,
[id^="edit_"]:target > .pro-card {
	box-shadow: none;
	border: 1px solid var(--ds-border);
}

.date-filter-popover {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-md);
	background: var(--ds-surface);
	box-shadow: none;
	animation: ds-dropdown-in var(--ds-duration-base) var(--ds-ease);
}

@media (max-width: 767px) {
	.dlg_root[open] .dlg_panel {
		animation: ds-modal-in var(--ds-duration-slow) var(--ds-ease);
		max-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 16px);
	}

	.dlg_panel {
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}

	.dlg_foot .btn {
		min-height: var(--touch-target-min, 44px);
	}
}


/* ================================================================== */
/* Modals - dialog */
/* Source: system/dialog/css/dialog_core.css */
/* ================================================================== */
/**
 * Dialog module - HTML5 <dialog>, чистий overlay.
 * Без анімацій. Відступи 10px. radius 10px.
 */

/* ── Tokens ── */
:root {
	--dlg_max_w: 520px;
	--dlg_pad: 16px;
	--dlg_gutter: 10px;
	--dlg_radius: 5px;
	--dlg_head_h: 52px;
	--dlg_z: 10100;
	--dlg_viewport_h: 100dvh;
	--dlg_viewport_top: 0px;
}

/* ── Portal - повний екран, не clip ── */
.dlg_portal {
	position: fixed;
	inset: 0;
	z-index: var(--dlg_z);
	pointer-events: none;
	overflow: visible;
}

.dlg_portal .dlg_root {
	pointer-events: auto;
}

/* ── Без анімацій панелі; backdrop - короткий fade ── */
dialog.dlg_root,
dialog.dlg_root[open],
.dlg_panel,
.dlg_close {
	animation: none !important;
	transition: none !important;
}

dialog.dlg_root::backdrop {
	animation: none !important;
	transition: opacity 0.16s ease !important;
}

dialog.dlg_root:not([open]) {
	display: none !important;
}

dialog.dlg_root[open] {
	display: block !important;
	position: fixed !important;
	z-index: calc(var(--dlg_z) + 1) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: inherit;
	box-sizing: border-box;
	overflow: visible !important;
	width: auto !important;
	height: auto !important;
	max-height: calc(
		var(--dlg_viewport_h, 100dvh) - (var(--dlg_gutter) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
	) !important;
}

/* Планшет + desktop - по центру екрана */
@media (min-width: 768px) {
	dialog.dlg_root[open] {
		top: 50% !important;
		bottom: auto !important;
		left: 50% !important;
		right: auto !important;
		width: min(
			var(--dlg_max_w, 520px),
			calc(100vw - (var(--dlg_gutter) * 2) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
		) !important;
		max-width: min(
			var(--dlg_max_w, 520px),
			calc(100vw - (var(--dlg_gutter) * 2) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
		) !important;
		transform: translate(-50%, -50%) !important;
	}
}

/* Mobile - знизу екрана (bottom sheet), 10px відступи */
@media (max-width: 767px) {
	dialog.dlg_root[open] {
		top: auto !important;
		bottom: calc(
			100dvh - var(--dlg_viewport_top, 0px) - var(--dlg_viewport_h, 100dvh) + var(--dlg_gutter) + env(safe-area-inset-bottom, 0px)
		) !important;
		left: calc(var(--dlg_gutter) + env(safe-area-inset-left, 0px)) !important;
		right: calc(var(--dlg_gutter) + env(safe-area-inset-right, 0px)) !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
	}
}

dialog.dlg_root::backdrop {
	background: var(--overlay-bg, rgba(15, 23, 42, 0.45));
}

/* ── Sizes ── */
.dlg_sm { --dlg_max_w: 400px; }
.dlg_md { --dlg_max_w: 520px; }
.dlg_lg { --dlg_max_w: 720px; }
.dlg_xl { --dlg_max_w: 960px; }
.dlg_full {
	--dlg_max_w: calc(
		100vw - (var(--dlg_gutter) * 2) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
	);
}

/* ── Panel ── */
.dlg_panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--dlg_radius);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
	box-sizing: border-box;
	max-height: calc(
		var(--dlg_viewport_h, 100dvh) - (var(--dlg_gutter) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
	);
}

/* ── Header ── */
.dlg_head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--dlg_head_h);
	padding: 12px var(--dlg_pad);
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-card);
	box-sizing: border-box;
}

.dlg_title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-main);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.dlg_title_empty {
	padding: 0;
	min-height: 0;
}

.dlg_title_icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

/* ── Close ── */
.dlg_close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--dlg_radius);
	background: var(--bg-body);
	color: var(--text-muted);
	text-decoration: none;
	cursor: pointer;
}

.dlg_close .material-icons {
	font-size: 18px;
	line-height: 1;
}

.dlg_close:hover {
	background: var(--danger-light);
	border-color: rgba(var(--danger-rgb), 0.35);
	color: var(--danger);
	text-decoration: none;
}

.dlg_close:focus,
.dlg_close:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ── Body / footer ── */
.dlg_body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--dlg_pad);
	font-family: var(--font-sans);
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

/* Вкладені списки в модалці (напр. stock-picker) - окрема прокрутка на touch */
.dlg_body .dlg_nested_scroll,
.dlg_body .stock-picker-list {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.dlg_body label {
	font-size: var(--font-caption, 0.8125rem);
	font-weight: 600;
	color: var(--text-secondary);
}

.dlg_body .form-group.button {
	margin-bottom: 0;
}

.dlg_foot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px var(--dlg_pad);
	padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--border-color);
	background: var(--bg-card);
	box-sizing: border-box;
}

.dlg_foot .btn {
	min-width: 96px;
}

/* ── Scroll lock: фон заморожений, прокрутка в .dlg_body та вкладених scroll-контейнерах ── */
html.dlg_open,
body.dlg_open {
	overflow: hidden !important;
	overscroll-behavior: none !important;
}

body.dlg_open {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	touch-action: none;
}

@media (max-width: 767px) {
	.dlg_foot {
		flex-direction: column;
	}

	.dlg_foot .btn {
		width: 100%;
		min-width: 0;
	}
}

/* ── Legacy aliases ── */
.modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--dlg_pad, 16px);
}

.dlg_body.modal-body {
	padding: var(--dlg_pad);
}


/* ================================================================== */
/* Tabs */
/* Source: design/ui/tabs_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Tabs
   Flat 2026
   ========================================================================== */

.module-subnav,
.crm-tabs {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--gray-100);
	padding: var(--space-xs);
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
}

.module-subnav__tab,
.module-subnav .loc-tab,
.module-subnav .nav-link,
.crm-tabs__tab {
	padding: 6px var(--space-12);
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-caption);
	text-decoration: none;
	color: var(--text-muted);
	white-space: nowrap;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color 200ms var(--ds-ease),
		color 200ms var(--ds-ease),
		border-color 200ms var(--ds-ease);
}

.module-subnav__tab:hover,
.module-subnav .loc-tab:hover,
.crm-tabs__tab:hover {
	color: var(--text-main);
	background: var(--ds-surface);
}

.module-subnav__tab.active,
.module-subnav__tab.is-active,
.module-subnav .loc-tab.active,
.module-subnav .nav-link.active,
.crm-tabs__tab.active,
.crm-tabs__tab.is-active {
	background: var(--ds-surface);
	color: var(--primary);
	border-color: var(--ds-border);
	box-shadow: none;
}

#status {
	border-radius: var(--radius-full);
	border: 1px solid var(--ds-border);
	box-shadow: none;
	background: var(--gray-100);
}

#status li a,
#status li.active a {
	border-radius: var(--radius-full);
	transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

/* ── Content head - CRM page standard (title + subtitle + tabs) ───────────
   PHP: crm_content_head() in system/ui/ui_framework.php
   Tabs: crm_tabs_nav() in system/ui/ui_tabs.php
   Reference pages: instruction, used_devices
   ─────────────────────────────────────────────────────────────────────── */

.crm-page.pt9:has(> .crm-content-head) {
	padding-top: var(--space-sm);
}

.crm-content-head {
	margin-bottom: 0;
}

.crm-content-head .crm-content-head__header.unified-page-header,
.crm-content-head .unified-page-header,
.crm-content-head .crm-page-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	margin-top: 0;
	margin-bottom: 0 !important;
	flex-wrap: nowrap;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.crm-content-head .crm-page-header__start {
	flex: 1 1 0;
	min-width: 0;
}

.crm-content-head .crm-page-header__titles {
	width: 100%;
	min-width: 0;
	gap: var(--space-md);
}

.crm-content-head .crm-page-title,
.crm-content-head .unified-page-title {
	width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.crm-content-head .crm-page-subtitle {
	width: 100%;
	max-width: 720px;
	line-height: 1.55;
	margin: 0 0 var(--space-md);
}

.crm-content-head .crm-page-header__actions,
.crm-content-head .crm-page-header__actions.header-actions,
.crm-content-head .header-actions {
	display: inline-flex;
	align-items: flex-start;
	align-self: flex-start;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-left: 0;
}

/* Toolbar у шапці - єдиний стандарт (еталон: Чек-лист) */
.crm-content-head .crm-toolbar,
.crm-content-head .crm-header-actions,
.crm-content-head .inst-header-actions,
.crm-content-head .stats-header-actions {
	display: inline-flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: var(--space-xs);
	min-height: 30px;
	width: auto;
}

@media (max-width: 991px) {
	.crm-content-head .crm-page-header,
	.crm-content-head .crm-page-header.unified-page-header,
	.crm-content-head header.crm-page-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		gap: 15px !important;
	}

	.crm-content-head .crm-page-header__start {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}

	.crm-content-head .crm-page-header__actions,
	.crm-content-head .crm-page-header__actions.header-actions,
	.crm-content-head .header-actions {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		align-self: flex-start !important;
		align-items: flex-start !important;
	}
}

@media (max-width: 480px) {
	.crm-content-head .crm-toolbar,
	.crm-content-head .crm-header-actions,
	.crm-content-head .inst-header-actions,
	.crm-content-head .stats-header-actions {
		width: auto;
		justify-content: flex-end;
	}
}

.crm-content-head .used-tabs {
	margin-top: 0;
	margin-bottom: calc(var(--gap) * 1.25);
	overflow-x: auto;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.crm-content-head .used-tabs::-webkit-scrollbar {
	display: none;
}

.crm-content-head .used-tab {
	flex-shrink: 0;
	gap: 6px;
	white-space: nowrap;
}

.crm-content-head .used-tab-count {
	font-size: var(--font-micro);
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.07);
	line-height: 1.3;
}

.crm-content-head .used-tab.is-active .used-tab-count {
	background: rgba(255, 255, 255, 0.22);
}

button.tasks-tab.used-tab {
	border: none;
	background: transparent;
	font: inherit;
	color: var(--text-muted);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button.tasks-tab.used-tab:hover:not(.is-active) {
	background: var(--gray-100);
	color: var(--text-main);
	text-decoration: none;
}

.crm-content-head .tasks-tab.used-tab.is-active,
button.tasks-tab.used-tab.is-active {
	background: var(--nav-active-bg) !important;
	color: var(--nav-active-text) !important;
	font-weight: 700;
}

[data-theme-resolved='dark'] button.tasks-tab.used-tab:hover:not(.is-active) {
	background: var(--bg-card-hover);
}

.crm-tab-panels {
	display: grid;
	grid-template: 1fr / 1fr;
	width: 100%;
}

.crm-tab-panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 220ms var(--ds-ease, ease),
		visibility 220ms var(--ds-ease, ease);
}

.crm-tab-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.crm-tab-panel[hidden] {
	display: block;
}


/* ================================================================== */
/* Dropdowns */
/* Source: design/ui/dropdowns_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Dropdowns & Popovers
   Flat 2026
   ========================================================================== */

.dash-filter-container,
.crm-dropdown {
	position: relative;
	display: inline-flex;
}

.filter-trigger,
.crm-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ds-btn-height);
	height: var(--ds-btn-height);
	min-width: var(--ds-btn-height);
	padding: 0;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-btn-radius);
	background: var(--ds-surface);
	color: var(--text-muted);
	cursor: pointer;
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		border-color var(--ds-duration-base) var(--ds-ease),
		color var(--ds-duration-base) var(--ds-ease);
}

.filter-trigger:hover,
.crm-dropdown__trigger:hover,
.dash-filter-container.active .filter-trigger {
	background: var(--gray-100);
	color: var(--primary);
	border-color: var(--border-hover);
}

.filter-trigger .material-icons,
.crm-dropdown__trigger .material-icons {
	font-size: 18px;
}

.date-filter-popover,
.crm-dropdown__panel {
	position: absolute;
	top: calc(100% + var(--space-sm));
	right: 0;
	z-index: var(--ds-z-dropdown);
	min-width: 260px;
	padding: var(--space-md);
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-md);
	background: var(--ds-surface);
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transform-origin: top right;
	transition:
		opacity var(--form-state-transition, 200ms ease),
		transform var(--form-state-transition, 200ms ease),
		visibility var(--form-state-transition, 200ms ease);
	pointer-events: none;
}

.date-filter-popover.active,
.crm-dropdown__panel.is-open,
.crm-dropdown.is-open .crm-dropdown__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.popover-section {
	margin-bottom: var(--space-md);
}

.popover-section:last-child {
	margin-bottom: 0;
}

.pop-label,
.crm-dropdown__label {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.period-select-mobile,
.dash-period-switcher select.form-control,
.dash-period-switcher select.form-select {
	width: 100%;
	min-height: var(--ds-input-height);
}

@media (max-width: 768px) {
	.date-filter-popover,
	.crm-dropdown__panel {
		position: fixed;
		left: var(--space-md);
		right: var(--space-md);
		top: auto;
		bottom: var(--space-md);
		max-width: none;
	}
}


/* ================================================================== */
/* Tooltips */
/* Source: design/ui/tooltips_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Global UI Tooltip (#global-ui-tooltip)
   Один DOM-елемент + JS (system/ui/global_ui_tooltip.js)
   Показ після ~500 мс; без нативних title-віконець.
   ========================================================================== */

#global-ui-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	box-sizing: border-box;
	max-width: min(280px, calc(100vw - 16px));
	padding: 6px 10px;
	border-radius: 5px;
	background: #111827;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.01em;
	white-space: pre-wrap;
	word-break: break-word;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

#global-ui-tooltip.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#global-ui-tooltip.is-above:not(.is-active) {
	transform: translateY(-4px);
}

#global-ui-tooltip.is-below:not(.is-active) {
	transform: translateY(4px);
}

#global-ui-tooltip.is-above.is-active,
#global-ui-tooltip.is-below.is-active {
	transform: translateY(0);
}

[data-theme-resolved='dark'] #global-ui-tooltip {
	background: #1f2937;
	color: #f9fafb;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	#global-ui-tooltip {
		transition: none;
	}
}


/* ================================================================== */
/* Icons */
/* Source: design/ui/ui_icons.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Icons
   Material Icons - unified sizing
   ========================================================================== */

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.crm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

.crm-icon .material-icons {
	font-size: 20px;
}

.crm-icon--sm .material-icons {
	font-size: 16px;
}

.crm-icon--md .material-icons {
	font-size: 20px;
}

.crm-icon--lg .material-icons {
	font-size: 24px;
}

.btn .material-icons {
	font-size: 18px;
}

.btn-sm .material-icons {
	font-size: 16px;
}

.btn-lg .material-icons {
	font-size: 22px;
}

/* Icon in table actions */
.col-actions .material-icons {
	font-size: 16px;
}


/* ================================================================== */
/* Animations */
/* Source: design/ui/animations_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Animations
   Flat 2026: opacity-only, fast, non-distracting
   ========================================================================== */

@keyframes ds-spin {
	to { transform: rotate(360deg); }
}

@keyframes ds-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ds-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes ds-modal-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ds-sheet-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ds-dropdown-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ds-toast-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ds-toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ================================================================== */
/* Layout - core */
/* Source: design/ui/layout_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Layout & Spacing
   ========================================================================== */

.crm-page {
	max-width: var(--content-max);
}

/* Spacing utilities (use only DS scale) */
.gap-xs  { gap: var(--space-xs) !important; }
.gap-sm  { gap: var(--space-sm) !important; }
.gap-12  { gap: var(--space-12) !important; }
.gap-md  { gap: var(--space-md) !important; }
.gap-lg  { gap: var(--space-lg) !important; }
.gap-xl  { gap: var(--space-xl) !important; }
.gap-2xl { gap: var(--space-2xl) !important; }

.p-xs  { padding: var(--space-xs) !important; }
.p-sm  { padding: var(--space-sm) !important; }
.p-12  { padding: var(--space-12) !important; }
.p-md  { padding: var(--space-md) !important; }
.p-lg  { padding: var(--space-lg) !important; }
.p-xl  { padding: var(--space-xl) !important; }

.m-xs  { margin: var(--space-xs) !important; }
.m-sm  { margin: var(--space-sm) !important; }
.m-12  { margin: var(--space-12) !important; }
.m-md  { margin: var(--space-md) !important; }
.m-lg  { margin: var(--space-lg) !important; }
.m-xl  { margin: var(--space-xl) !important; }

.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }

/* Page vertical padding (existing pt9/pb9 preserved) */
.pt9 { padding-top: var(--space-2xl); }
.pb9 { padding-bottom: var(--space-2xl); }

@media (max-width: 767px) {
	.pt9 { padding-top: var(--space-lg); }
	.pb9 { padding-bottom: var(--space-lg); }
}

/* Responsive table scroll hint */
@media (max-width: 767px) {
	.crm-table-wrap,
	.fin-table-wrap,
	.acc-table-wrap,
	.stock-table-wrap {
		-webkit-overflow-scrolling: touch;
	}
}

/* Touch-friendly form height on mobile */
@media (max-width: 767px) {
	.form-control,
	.form-select,
	.btn:not(.btn-xs):not(.btn-icon) {
		min-height: var(--form-height-touch);
	}
}


/* ================================================================== */
/* Layout - shell frame */
/* Source: system/shell/css/shell_frame.css */
/* ================================================================== */
/* App frame - backdrop and shell helpers (layout enforced in app_shell.css) */

.app-sidebar-backdrop,
.side_back {
	position: fixed;
	top: var(--frame_offset_top, 0);
	left: 0;
	right: 0;
	height: var(--frame_height, 100dvh);
	background: var(--overlay-bg);
	backdrop-filter: blur(4px);
	z-index: var(--shell_z_backdrop, 1040);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.app-sidebar-backdrop.back_show,
.side_back.back_show {
	opacity: 1;
	visibility: visible;
}


/* ================================================================== */
/* Layout - shell theme */
/* Source: system/shell/css/shell_theme.css */
/* ================================================================== */
/* Shell Bootstrap theme - CRM tokens */
:root {
	--bs-primary: var(--primary);
	--bs-body-font-family: var(--font-sans);
	--bs-body-bg: var(--bg-body);
	--bs-body-color: var(--text-main);
	--bs-border-color: var(--border-color);
	--bs-border-radius: 5px;
}

[data-theme-resolved='dark'] {
	--bs-body-bg: var(--bg-body);
	--bs-body-color: var(--text-main);
	--bs-border-color: var(--border-color);
}

.btn {
	box-shadow: none !important;
	font-weight: 600;
	background-image: none;
}

.side_panel,
.top_bar {
	box-shadow: none !important;
}


/* ================================================================== */
/* Header */
/* Source: system/shell/css/page_header.css */
/* ================================================================== */
/* App header - internal components (40px row, 28px controls) */

:root {
	--app-header-control-height: 28px;
	--app-header-gap: 10px;
	--app-header-stat-size: 22px;
	--app-header-surface: color-mix(in srgb, var(--text-main) 6%, var(--bg-header));
	--app-header-transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme-resolved='dark'] {
	--app-header-surface: color-mix(in srgb, var(--bg-card) 88%, #fff 12%);
}

html[data-theme-resolved='dark'] .app-header,
html[data-theme-resolved='dark'] .top_bar {
	color-scheme: dark;
}

html.theme-switching .app-header,
html.theme-switching .app-header *,
html.theme-switching .top_bar,
html.theme-switching .top_bar * {
	transition: var(--app-header-transition) !important;
}

.app-header,
.top_bar {
	background: var(--bg-header);
	border-bottom: 1px solid var(--border-color);
	transition: var(--app-header-transition);
}

.app-header__inner,
.top_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--app-header-gap);
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	max-height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.app-header__left,
.app-header__center,
.app-header__right,
.top_left,
.top_center,
.top_right {
	display: flex;
	align-items: center;
	min-width: 0;
	height: var(--app-header-control-height);
	max-height: var(--app-header-control-height);
	margin: 0;
}

.app-header__left,
.top_left {
	gap: var(--app-header-gap);
	flex: 0 0 auto;
}

.app-header__center,
.top_center {
	flex: 1 1 auto;
	justify-content: center;
	overflow: visible;
	padding: 0;
	gap: var(--app-header-gap);
}

.app-header__right,
.top_right {
	flex: 0 0 auto;
	justify-content: flex-end;
	gap: var(--app-header-gap);
}

/* Hamburger */
.app-header__toggle,
.top_toggle {
	position: relative;
	width: var(--app-header-control-height);
	height: var(--app-header-control-height);
	min-width: var(--app-header-control-height);
	min-height: var(--app-header-control-height);
	max-width: var(--app-header-control-height);
	max-height: var(--app-header-control-height);
	margin: 0;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--shell_radius);
	background: var(--bg-card);
	color: var(--text-main);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: var(--app-header-transition);
}

.app-header__toggle:hover,
.top_toggle:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.app-header__toggle .material-icons,
.top_toggle .material-icons {
	font-size: 16px;
	line-height: 1;
}

/* Червона крапка: лише mobile + меню закрите + є проблемні дзвінки */
.mobile-menu-indicator {
	display: none;
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--danger, #dc3545);
	box-shadow: 0 0 0 1.5px var(--bg-card, #fff);
	pointer-events: none;
	z-index: 1;
}

@media (max-width: 768px) {
	.mobile-menu-indicator.is-active {
		display: block;
	}

	body.side_open .mobile-menu-indicator,
	body.side_open .mobile-menu-indicator.is-active {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.mobile-menu-indicator {
		display: none !important;
	}
}

/* Profile: аватар + ім'я в одній «капсулі», без зазору між ними */
.app-header__user,
.top_user {
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: var(--app-header-control-height);
	max-height: var(--app-header-control-height);
	max-width: min(42vw, 220px);
	margin: 0;
	padding: 0 10px 0 0;
	border: none;
	border-radius: 9999px;
	background: var(--app-header-surface);
	text-decoration: none;
	color: var(--text-main);
	flex-shrink: 0;
	box-sizing: border-box;
	overflow: hidden;
	transition: var(--app-header-transition);
}

.app-header__user:hover,
.top_user:hover {
	background: var(--nav-active-bg);
}

.app-header__user.link_active,
.top_user.link_active {
	background: var(--nav-active-bg);
	color: var(--primary);
}

.app-header__avatar,
.top_avatar {
	width: var(--app-header-control-height);
	height: var(--app-header-control-height);
	min-width: var(--app-header-control-height);
	min-height: var(--app-header-control-height);
	max-width: var(--app-header-control-height);
	max-height: var(--app-header-control-height);
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-size: var(--shell_text_sm);
	font-weight: var(--shell_weight_bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	overflow: hidden;
	box-sizing: border-box;
}

.app-header__avatar img,
.top_avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.app-header__name,
.top_name {
	display: inline-flex;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0 0 0 6px;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 0.6875rem;
	font-weight: var(--shell_weight_active);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	line-height: 1.2;
	box-sizing: border-box;
}

/* Stats - лише цифри, чіпи 22×22px, gap 3px */
.app-header__stats,
.top_stats {
	display: inline-flex;
	align-items: center;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	gap: 3px;
	flex-wrap: nowrap;
	flex-shrink: 0;
	max-width: 100%;
	overflow: visible;
	box-sizing: border-box;
}

.app-header__stat,
.top_stat--num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: var(--app-header-stat-size);
	min-width: var(--app-header-stat-size);
	max-height: var(--app-header-stat-size);
	margin: 0;
	padding: 0 5px;
	border: none;
	border-radius: 9999px;
	background: var(--app-header-surface);
	box-sizing: border-box;
	transition: var(--app-header-transition);
}

.top_stat--num strong {
	font-weight: var(--shell_weight_bold);
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
	font-size: 0.625rem;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
}

/* Лише desktop (≥992px) */
@media (max-width: 991px) {
	.app-header__stats,
	.top_stats {
		display: none !important;
	}
}

/* Theme toggle - без рамки, легкий фон як у профілю */
.app-header__theme,
.top_theme {
	display: inline-flex;
	align-items: center;
	height: var(--app-header-control-height);
	max-height: var(--app-header-control-height);
	margin: 0;
	padding: 2px;
	gap: 0;
	border: none;
	border-radius: 9999px;
	background: var(--app-header-surface);
	flex-shrink: 0;
	box-sizing: border-box;
	overflow: hidden;
	transition: var(--app-header-transition);
}

.app-header__theme-btn,
.top_mode {
	width: calc(var(--app-header-control-height) - 4px);
	height: calc(var(--app-header-control-height) - 4px);
	min-width: calc(var(--app-header-control-height) - 4px);
	min-height: calc(var(--app-header-control-height) - 4px);
	max-width: calc(var(--app-header-control-height) - 4px);
	max-height: calc(var(--app-header-control-height) - 4px);
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-sizing: border-box;
	transition: var(--app-header-transition);
}

.app-header__theme-btn .material-icons,
.top_mode .material-icons {
	font-size: 16px;
	line-height: 1;
}

.app-header__theme-btn:hover,
.top_mode:hover {
	background: var(--nav-active-bg);
	color: var(--text-main);
}

.app-header__theme-btn.mode_active,
.top_mode.mode_active {
	background: var(--primary);
	color: #fff;
}

@media (max-width: 767px) {
	.app-header__name,
	.top_name { display: none; }

	.app-header__user,
	.top_user {
		width: auto;
		min-width: 0;
		max-width: none;
		padding: 0 !important;
		gap: 0 !important;
		justify-content: flex-start;
		border: none !important;
		border-radius: 50%!important;
		background: transparent !important;
		overflow: visible !important;
	}

	.app-header__theme .app-header__theme-btn[data-theme-mode="system"],
	.top_theme .top_mode[data-theme-mode="system"] {
		display: none;
	}
}

@media (max-width: 575px) {
	.app-header__inner,
	.top_inner {
		gap: var(--app-header-gap);
	}
}

[data-theme-resolved='dark'] .app-header,
[data-theme-resolved='dark'] .top_bar {
	border-color: var(--border-color);
}


/* ================================================================== */
/* Header - global search */
/* Source: system/shell/css/global_search.css */
/* ================================================================== */
/* Global smart search - header bar (theme-aware) */

.top_bar,
.top_inner,
.top_center {
	overflow: visible;
}

.top_center {
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	min-height: 0;
}

.global-search {
	position: relative;
	flex: 1 1 100px;
	max-width: 440px;
	min-width: 100px;
	z-index: 20;
}

.global-search__field {
	position: relative;
	display: flex;
	align-items: center;
	height: 28px;
	min-height: 28px;
	max-height: 28px;
	box-sizing: border-box;
	border: 1px solid var(--border-color);
	border-radius: 9999px;
	background: var(--bg-header);
	color: var(--text-main);
	transition: var(--app-header-transition, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease);
}

.global-search__field:hover {
	border-color: var(--border-color);
}

.global-search__field:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}

.global-search__icon {
	position: absolute;
	left: 11px;
	z-index: 1;
	font-size: 16px;
	line-height: 1;
	color: var(--text-muted);
	pointer-events: none;
	transition: color 0.2s ease;
}

.global-search__field:focus-within .global-search__icon {
	color: var(--primary);
}

.global-search .global-search__input,
.global-search__field input.global-search__input {
	width: 100%;
	height: 28px;
	min-height: 28px;
	max-height: 28px;
	margin: 0;
	padding: 0 28px 0 30px;
	box-sizing: border-box;
	border: none;
	border-radius: 9999px;
	background: transparent;
	color: var(--text-main);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 28px;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	caret-color: var(--primary);
	transition: color 0.2s ease;
}

.global-search .global-search__input:focus,
.global-search__field input.global-search__input:focus {
	outline: none;
	border: none;
	background: transparent;
	box-shadow: none;
}

.global-search__input::placeholder {
	color: var(--text-muted);
	font-weight: 400;
	font-size: 13px;
	opacity: 1;
}

.global-search__input::-webkit-search-decoration,
.global-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.global-search__input:-webkit-autofill,
.global-search__input:-webkit-autofill:hover,
.global-search__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-main);
	-webkit-box-shadow: 0 0 0 1000px var(--bg-header) inset;
	transition: background-color 9999s ease-out 0s;
}

.global-search__clear {
	position: absolute;
	right: 4px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 9999px;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.global-search__clear:hover {
	background: var(--nav-active-bg);
	color: var(--text-main);
}

.global-search__clear .material-icons {
	font-size: 16px;
	line-height: 1;
}

.global-search__dropdown {
	position: fixed;
	z-index: 1200;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-card);
	color: var(--text-main);
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.14));
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html[data-theme-resolved='dark'] .global-search__dropdown {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.global-search__serial-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	font-size: 11px;
	line-height: 1.35;
	color: var(--text-main);
	background: rgba(var(--primary-rgb), 0.08);
	border-bottom: 1px solid var(--border-color);
}

.global-search__serial-banner .material-icons {
	font-size: 16px;
	color: var(--primary);
	flex-shrink: 0;
}

.global-search__serial-banner strong {
	font-weight: 700;
}

.global-search__section {
	padding: 4px 0;
}

.global-search__section + .global-search__section {
	border-top: 1px solid var(--border-color);
}

.global-search__section-title {
	padding: 4px 10px 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.global-search__item {
	display: flex;
	align-items: flex-start;
	width: 100%;
	padding: 7px 10px;
	box-sizing: border-box;
	border: none;
	background: transparent;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease;
}

.global-search__item:hover,
.global-search__item:focus-visible {
	outline: none;
	background: rgba(var(--primary-rgb), 0.08);
}

.global-search__item.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.global-search__item-main {
	flex: 1;
	min-width: 0;
}

.global-search__item-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-bottom: 1px;
}

.global-search__item-id {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-main);
}

.global-search__item-meta {
	font-size: 11px;
	line-height: 1.35;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.global-search__mark {
	padding: 0 1px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb), 0.18);
	color: inherit;
	font-weight: 700;
}

.global-search__item .device-status-chip {
	font-size: 9px;
	padding: 1px 6px;
	border-radius: 9999px;
	line-height: 1.25;
}

.global-search__empty,
.global-search__loading {
	padding: 12px 10px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--text-muted);
	text-align: center;
}

.global-search__loading .material-icons {
	display: inline-block;
	font-size: 16px;
	vertical-align: -3px;
	margin-right: 4px;
	animation: global-search-spin 0.8s linear infinite;
}

@keyframes global-search-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 991px) and (min-width: 768px) {
	.top_center {
		flex-wrap: wrap;
		align-items: center;
	}

	.global-search {
		flex: 1 1 100%;
		max-width: none;
		min-width: 0;
		order: 3;
	}
}

@media (max-width: 767px) {
	.top_center {
		gap: 10px;
	}

	.global-search .global-search__input,
	.global-search__field input.global-search__input {
		height: 28px;
		min-height: 28px;
		max-height: 28px;
		font-size: 16px;
		line-height: 28px;
	}

	.global-search__input::placeholder {
		font-size: 14px;
	}

	.global-search__item-meta {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

@media (max-width: 480px) {
	.top_name {
		display: none;
	}
}


/* ================================================================== */
/* Sidebar */
/* Source: system/shell/css/shell_sidebar.css */
/* ================================================================== */
/* Sidebar - internal components (layout enforced in app_shell.css) */

.app-sidebar,
.side_panel {
	background: var(--bg-sidebar);
	border-right: 1px solid var(--border-color);
	padding: 10px;
	box-sizing: border-box;
}

.side_inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	min-height: 0;
	gap: var(--shell_gap_block);
}

/* ── «Нове замовлення» ── */
.side_head {
	flex-shrink: 0;
	width: 100%;
}

/* ── Єдиний стандарт кнопок (100% ширини) ── */
.side_btn {
	display: flex;
	align-items: center;
	gap: var(--shell_gap_icon);
	width: 100%;
	min-height: var(--shell_row_lg);
	height: var(--shell_row_lg);
	padding: 0 var(--shell_pad_x);
	border-radius: var(--shell_radius);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: var(--shell_nav_text);
	font-weight: var(--shell_weight_active);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.side_btn_icon,
.side_btn .material-icons.side_btn_icon {
	width: var(--shell_icon_box);
	min-width: var(--shell_icon_box);
	height: var(--shell_icon_box);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: var(--shell_icon);
	line-height: 1;
}

.side_btn_text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.25;
}

.side_btn_primary {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	box-shadow: none;
}

.side_btn_primary:hover {
	background: color-mix(in srgb, var(--primary) 88%, #000);
	border-color: color-mix(in srgb, var(--primary) 88%, #000);
	color: #fff;
}

/* ── Навігація ── */
.side_nav {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--shell_gap_nav);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: var(--shell_gap_tight) 0;
}

.side_row { display: block; width: 100%; }

.side_link {
	display: flex;
	align-items: center;
	gap: var(--shell_gap_icon);
	width: 100%;
	height: var(--shell_row);
	min-height: var(--shell_row);
	padding: 0 var(--shell_pad_x);
	border-radius: var(--shell_radius);
	color: var(--text-secondary);
	font-size: var(--shell_nav_text);
	font-weight: var(--shell_weight);
	text-decoration: none;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease;
}

.side_icon,
.side_link > .material-icons.side_icon {
	width: var(--shell_icon_box);
	min-width: var(--shell_icon_box);
	height: var(--shell_icon_box);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: var(--shell_icon);
	line-height: 1;
}

.side_text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1;
}

.side_link:hover {
	background: var(--gray-100);
	color: var(--text-main);
}

.side_link.link_active,
.side_link[aria-current="page"] {
	background: var(--nav-active-bg);
	color: var(--nav-active-text);
	font-weight: var(--shell_weight_active);
}

.side_count {
	margin-left: auto;
	flex-shrink: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--shell_radius_pill);
	background: var(--danger);
	color: #fff;
	font-size: var(--shell_text_xs);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.side_count.count_warn { background: var(--warning); }
.side_count.count_danger { background: var(--danger, #dc3545); color: #fff; }

.side_count.count_hide { display: none !important; }

/* ── Низ: майстерня → вийти + налаштування ── */
.side_foot {
	flex-shrink: 0;
	margin-top: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--shell_gap_block);
	padding-top: var(--shell_gap_block);
}

.side_shop { position: relative; width: 100%; }

.side_shop_btn {
	width: 100%;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: var(--shell_nav_text);
	font-weight: var(--shell_weight);
	cursor: pointer;
	text-align: left;
	padding: 0 var(--shell_pad_x);
	color: var(--text-secondary);
}

.side_shop_btn:hover,
.side_shop.shop_open .side_shop_btn {
	background: var(--gray-100);
	color: var(--text-main);
}

.side_shop_icon { color: var(--text-secondary); }

.side_shop_btn:hover .side_shop_icon,
.side_shop.shop_open .side_shop_btn .side_shop_icon {
	color: var(--text-main);
}

.side_shop_more {
	margin-left: auto;
	font-size: var(--shell_icon_sm);
	width: var(--shell_icon_box);
	min-width: var(--shell_icon_box);
	height: var(--shell_icon_box);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	flex-shrink: 0;
	transition: transform 0.15s ease, color 0.15s ease;
}

.side_shop.shop_open .side_shop_more {
	transform: rotate(180deg);
	color: var(--text-secondary);
}

.side_shop_list {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + var(--shell_gap_nav));
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: var(--shell_gap_tight);
	max-height: min(220px, 38vh);
	overflow-y: auto;
	padding: var(--shell_pad_inset);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--shell_radius);
	box-shadow: var(--shadow-lg);
}

.side_shop_list[hidden] { display: none !important; }

.side_shop_item {
	display: flex;
	align-items: center;
	gap: var(--shell_gap_icon);
	min-height: var(--shell_row);
	padding: 0 var(--shell_pad_x);
	border-radius: var(--shell_radius, 5px);
	text-decoration: none;
	color: var(--text-main);
	font-size: var(--shell_nav_text);
	font-weight: var(--shell_weight);
	transition: background 0.15s ease, color 0.15s ease;
}

.side_shop_item:hover { background: var(--gray-100); }

.side_shop_item.link_active {
	background: var(--nav-active-bg);
	color: var(--primary);
	font-weight: var(--shell_weight_active);
}

.side_shop_item .side_icon {
	color: var(--text-muted);
}

.side_shop_item.link_active .side_icon {
	color: var(--primary);
}

.side_shop_label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.side_shop_check {
	margin-left: auto;
	font-size: var(--shell_icon_sm);
	width: var(--shell_icon_box);
	min-width: var(--shell_icon_box);
	height: var(--shell_icon_box);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	color: var(--primary);
	flex-shrink: 0;
}

.side_shop_item.link_active .side_shop_check { opacity: 1; }

.side_tools {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--shell_gap_nav);
	width: 100%;
}

.side_gear {
	flex: 0 0 var(--shell_row);
	width: var(--shell_row);
	min-width: var(--shell_row);
	padding: 0;
	justify-content: center;
	order: 2;
}

.side_exit {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	order: 1;
	color: color-mix(in srgb, var(--danger) 42%, var(--text-secondary));
}

.side_exit .side_icon {
	color: color-mix(in srgb, var(--danger) 55%, var(--text-muted));
}

.side_exit:hover {
	background: var(--danger-light);
	color: color-mix(in srgb, var(--danger) 75%, var(--text-main));
}

.side_exit:hover .side_icon {
	color: var(--danger);
}

[data-theme-resolved='dark'] .side_link:hover,
[data-theme-resolved='dark'] .side_shop_btn:hover,
[data-theme-resolved='dark'] .side_shop_item:hover {
	background: var(--bg-card-hover);
}

[data-theme-resolved='dark'] .side_shop_btn:hover,
[data-theme-resolved='dark'] .side_shop.shop_open .side_shop_btn {
	color: var(--text-main);
}

@media (max-width: 768px) {
	.side_inner {
		gap: var(--shell_gap_block);
	}

	.side_nav {
		padding-bottom: var(--shell_gap_block);
	}

	.side_foot {
		padding-top: var(--shell_gap_block);
		gap: var(--shell_gap_block);
	}

	.side_tools {
		gap: var(--shell_gap_nav);
	}
}

@media (min-width: 769px) {
	body.side_collapsed .app-sidebar,
	body.side_collapsed .side_panel {
		padding: 10px 6px;
		overflow: hidden;
	}

	body.side_collapsed .app-sidebar:has(.side_shop.shop_open),
	body.side_collapsed .side_panel:has(.side_shop.shop_open),
	body.side_collapsed .side_inner:has(.side_shop.shop_open),
	body.side_collapsed .side_foot:has(.side_shop.shop_open) {
		overflow: visible;
	}

	body.side_collapsed .side_nav .side_text,
	body.side_collapsed .side_btn_text,
	body.side_collapsed .side_shop_btn .side_text,
	body.side_collapsed .side_exit .side_text,
	body.side_collapsed .side_shop_more {
		display: none !important;
		width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		position: absolute !important;
		pointer-events: none !important;
	}

	body.side_collapsed .side_order,
	body.side_collapsed .side_link,
	body.side_collapsed .side_shop_btn {
		justify-content: center;
		align-items: center;
		width: var(--shell_btn);
		min-width: var(--shell_btn);
		max-width: var(--shell_btn);
		height: var(--shell_btn);
		min-height: var(--shell_btn);
		padding: 0;
		margin: 0 auto;
		gap: 0;
	}

	body.side_collapsed .side_head,
	body.side_collapsed .side_shop,
	body.side_collapsed .side_tools,
	body.side_collapsed .side_row {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	body.side_collapsed .side_tools {
		flex-direction: column;
		align-items: center;
		gap: var(--shell_gap_nav);
	}

	body.side_collapsed .side_gear,
	body.side_collapsed .side_exit {
		flex: 0 0 var(--shell_btn);
		width: var(--shell_btn);
		min-width: var(--shell_btn);
		order: unset;
	}

	body.side_collapsed .side_count {
		position: absolute;
		top: 1px;
		right: 1px;
		min-width: 15px;
		height: 15px;
		padding: 0 4px;
		font-size: 9px;
		margin: 0;
	}

	body.side_collapsed .side_nav {
		align-items: center;
		gap: var(--shell_gap_nav);
	}

	body.side_collapsed .side_shop_list {
		left: calc(100% + var(--shell_gap_stat));
		right: auto;
		bottom: 0;
		top: auto;
		width: max(196px, 15rem);
		min-width: 180px;
		z-index: calc(var(--shell_z_sidebar, 1045) + 5);
	}

	body.side_collapsed .side_shop.shop_open {
		z-index: calc(var(--shell_z_sidebar, 1045) + 1);
	}
}


/* ================================================================== */
/* Content */
/* Source: system/shell/css/content_core.css */
/* ================================================================== */
/* Main content area - layout enforced in app_shell.css */


/* ================================================================== */
/* Content - stability */
/* Source: system/shell/css/stability_core.css */
/* ================================================================== */
/**
 * Shell - стабільність контенту в main_area.
 * Без layout-shift на hover: тільки тінь/бордер, без translateY/scale.
 */

.main_area .dash_card,
.main_area .mc_card,
#content .dash_card,
#content .mc_card {
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.main_area .dash_card:hover,
.main_area .mc_card:hover,
#content .dash_card:hover,
#content .mc_card:hover {
	transform: none !important;
}

.main_area .client-row,
.main_area .device-row,
#content .client-row,
#content .device-row {
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.main_area .client-row:hover,
.main_area .device-row:hover,
#content .client-row:hover,
#content .device-row:hover,
.main_area [data-layout='card'] .client-row:hover,
#content [data-layout='card'] .client-row:hover {
	transform: none !important;
}

.main_area .crm-card,
.main_area .card.crm-card,
#content .crm-card,
#content .card.crm-card {
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.main_area .crm-card:hover,
.main_area .card.crm-card:hover,
#content .crm-card:hover,
#content .card.crm-card:hover {
	transform: none !important;
}

/* Під час діалогу - без стрибка ширини при поверненні скролбару */
body.dlg_open .app-main-wrapper,
body.dlg_open .app_main,
body.dlg_open .side_panel,
body.dlg_open .app-sidebar,
body.dlg_open .top_bar,
body.dlg_open .app-header {
	transition: margin-left 0.28s ease, width 0.28s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}


/* ================================================================== */
/* App Shell - standard enforcement */
/* Source: system/shell/css/app_shell.css */
/* ================================================================== */
/**
 * APP SHELL - canonical layout (single 10px spacing standard).
 * Classes: .app-sidebar, .app-main-wrapper, .app-header, .app-content
 * Legacy:  .side_panel, .app_main, .top_bar, .main_area
 */

:root {
	--app-shell-sidebar-width: 240px;
	--app-shell-sidebar-collapsed: 60px;
	--app-shell-header-height: 40px;
	--app-shell-padding: 10px;
	--app-shell-content-gap: 10px;
	--app-shell-mobile-max: 768px;
}

/* ── Viewport lock: scroll ONLY inside .app-content ── */
html,
body {
	height: 100dvh;
	margin: 0;
	padding: 0;
}

html {
	scrollbar-gutter: stable;
}

html:has(body.logged-in),
html:has(body.logged-in.app-shell) {
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
}

body.logged-in,
body.logged-in.app-shell {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

body.auth-page {
	overflow: auto;
	min-height: 100dvh;
	height: auto;
}

/* ── Shell root (sidebar + main) ── */
.app-shell-root,
.app_frame {
	display: flex;
	flex: 1 1 auto;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	position: relative;
	background: var(--bg-body);
	box-sizing: border-box;
}

/* ── Sidebar ── */
.app-sidebar,
.side_panel {
	flex: 0 0 var(--app-shell-sidebar-width);
	width: var(--app-shell-sidebar-width);
	min-width: var(--app-shell-sidebar-width);
	max-width: var(--app-shell-sidebar-width);
	height: 100dvh;
	max-height: 100dvh;
	position: relative;
	top: auto;
	left: auto;
	z-index: var(--shell_z_sidebar, 1045);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
	transition: width 0.28s ease, min-width 0.28s ease, max-width 0.28s ease, transform 0.28s ease;
}

/* ── Main column ── */
.app-main-wrapper,
.app_main {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	max-width: 100%;
	margin-left: 0 !important;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	box-sizing: border-box;
}

/* ── Header (40px) ── */
.app-header,
.top_bar {
	flex: 0 0 var(--app-shell-header-height);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--app-shell-header-height);
	min-height: var(--app-shell-header-height);
	max-height: var(--app-shell-header-height);
	padding: 0 var(--app-shell-padding);
	box-sizing: border-box;
	position: relative;
	z-index: var(--shell_z_header, 1030);
	overflow: visible;
}

/* ── Content (10px inset, sole scroll region) ── */
.app-content,
.main_area,
.main-content {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	height: calc(100dvh - var(--app-shell-header-height));
	max-height: calc(100dvh - var(--app-shell-header-height));
	margin: 0 !important;
	padding: var(--app-shell-padding) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--app-shell-content-gap) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* ── Desktop collapsed sidebar (60px) ── */
@media (min-width: 769px) {
	body.side_collapsed .app-sidebar,
	body.side_collapsed .side_panel {
		flex: 0 0 var(--app-shell-sidebar-collapsed);
		width: var(--app-shell-sidebar-collapsed);
		min-width: var(--app-shell-sidebar-collapsed);
		max-width: var(--app-shell-sidebar-collapsed);
	}
}

/* ── Mobile drawer (≤768px) ── */
@media (max-width: 768px) {
	.app-sidebar,
	.side_panel {
		position: fixed;
		top: var(--frame_offset_top, 0);
		left: 0;
		bottom: 0;
		flex: none;
		width: min(100%, var(--app-shell-sidebar-width));
		min-width: 0;
		max-width: var(--app-shell-sidebar-width);
		height: var(--frame_height, 100dvh);
		max-height: var(--frame_height, 100dvh);
		transform: translateX(-100%);
		z-index: 1000;
		box-shadow: var(--shadow-xl);
		padding-top: calc(var(--app-shell-padding) + env(safe-area-inset-top, 0));
		padding-right: max(var(--app-shell-padding), env(safe-area-inset-right, 0));
		padding-bottom: calc(var(--app-shell-padding) + env(safe-area-inset-bottom, 0));
		padding-left: max(var(--app-shell-padding), env(safe-area-inset-left, 0));
	}

	.app-sidebar.panel_open,
	.side_panel.panel_open {
		transform: translateX(0);
	}

	.app-main-wrapper,
	.app_main {
		width: 100% !important;
		margin-left: 0 !important;
	}

	body.side_open .app-sidebar,
	body.side_open .side_panel {
		z-index: var(--shell_z_drawer, 11000);
		isolation: isolate;
	}

	body.side_open .app-sidebar-backdrop,
	body.side_open .side_back {
		z-index: var(--shell_z_drawer_backdrop, 10990);
	}

	body.side_open #admin_panel,
	body.side_open .um-sticky-save {
		visibility: hidden !important;
		pointer-events: none !important;
		opacity: 0 !important;
	}
}

body.side_open {
	overflow: hidden;
	height: 100dvh;
	max-height: 100dvh;
}

/* Status tint targets */
.status_mode_1 .app-main-wrapper,
.status_mode_1 .app_main { background-color: rgba(var(--s1-rgb), var(--status-bg-alpha)); }
.status_mode_2 .app-main-wrapper,
.status_mode_2 .app_main { background-color: rgba(var(--s2-rgb), var(--status-bg-alpha)); }
.status_mode_3 .app-main-wrapper,
.status_mode_3 .app_main { background-color: rgba(var(--s3-rgb), var(--status-bg-alpha)); }
.status_mode_4 .app-main-wrapper,
.status_mode_4 .app_main { background-color: rgba(var(--s4-rgb), var(--status-bg-alpha)); }
.status_mode_5 .app-main-wrapper,
.status_mode_5 .app_main { background-color: rgba(var(--s5-rgb), var(--status-bg-alpha)); }
.status_mode_6 .app-main-wrapper,
.status_mode_6 .app_main { background-color: rgba(var(--s6-rgb), var(--status-bg-alpha)); }
.status_mode_7 .app-main-wrapper,
.status_mode_7 .app_main { background-color: rgba(var(--s7-rgb), var(--status-bg-alpha)); }

.status-mode-1 .app-main-wrapper,
.status-mode-1 .app_main,
.status-mode-1 .main-layout { background-color: rgba(var(--s1-rgb), var(--status-bg-alpha)); }
.status-mode-2 .app-main-wrapper,
.status-mode-2 .app_main,
.status-mode-2 .main-layout { background-color: rgba(var(--s2-rgb), var(--status-bg-alpha)); }
.status-mode-3 .app-main-wrapper,
.status-mode-3 .app_main,
.status-mode-3 .main-layout { background-color: rgba(var(--s3-rgb), var(--status-bg-alpha)); }
.status-mode-4 .app-main-wrapper,
.status-mode-4 .app_main,
.status-mode-4 .main-layout { background-color: rgba(var(--s4-rgb), var(--status-bg-alpha)); }
.status-mode-5 .app-main-wrapper,
.status-mode-5 .app_main,
.status-mode-5 .main-layout { background-color: rgba(var(--s5-rgb), var(--status-bg-alpha)); }
.status-mode-6 .app-main-wrapper,
.status-mode-6 .app_main,
.status-mode-6 .main-layout { background-color: rgba(var(--s6-rgb), var(--status-bg-alpha)); }
.status-mode-7 .app-main-wrapper,
.status-mode-7 .app_main,
.status-mode-7 .main-layout { background-color: rgba(var(--s7-rgb), var(--status-bg-alpha)); }


/* ================================================================== */
/* Utilities */
/* Source: design/ui/utilities_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Utilities
   Spacing, callouts, form grids, modal patterns (structure unchanged)
   ========================================================================== */

/* --- Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48) --- */
.mt-16 { margin-top: var(--space-md) !important; }
.mt-24 { margin-top: var(--space-24) !important; }
.mt-32 { margin-top: var(--space-xl) !important; }
.mb-16 { margin-bottom: var(--space-md) !important; }
.mb-20 { margin-bottom: var(--space-lg) !important; }
.mb-24 { margin-bottom: var(--space-24) !important; }

/* --- Typography helpers --- */
.ds-text-intro {
	margin-bottom: var(--space-lg);
	color: var(--text-secondary);
	line-height: 1.5;
}

.ds-text-intro-sm {
	margin-bottom: var(--space-md);
	color: var(--text-secondary);
	line-height: 1.5;
}

.ds-text-muted-sm {
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.ds-text-muted-sm small,
.ds-text-intro small {
	opacity: 0.85;
}

/* --- Form layout --- */
.ds-form-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.ds-col-full {
	grid-column: 1 / -1;
}

.ds-form-actions {
	margin-top: var(--space-24);
}

.ds-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin-top: var(--space-24);
}

@media (max-width: 576px) {
	.ds-form-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* --- Callouts (modal / alert blocks) --- */
.ds-callout {
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-lg);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface-secondary);
}

.ds-callout__title {
	font-weight: var(--font-weight-bold);
	color: var(--text-main);
	margin-bottom: var(--space-xs);
}

.ds-callout__meta {
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: 1.45;
}

.ds-callout--primary {
	background: rgba(var(--primary-rgb), 0.06);
	border-color: rgba(var(--primary-rgb), 0.2);
}

.ds-callout--success {
	background: rgba(var(--success-rgb), 0.06);
	border-color: rgba(var(--success-rgb), 0.2);
}

.ds-callout--danger {
	background: rgba(var(--danger-rgb), 0.06);
	border-color: rgba(var(--danger-rgb), 0.15);
	color: var(--danger);
	font-size: var(--font-caption);
	line-height: 1.45;
}

.ds-callout--warning {
	background: rgba(var(--warning-rgb), 0.08);
	border-color: rgba(var(--warning-rgb), 0.2);
	color: var(--warning-hover);
}

/* --- Inline icons --- */
.ds-icon-inline {
	vertical-align: middle;
	font-size: 18px;
	line-height: 1;
}

.ds-icon-inline--sm {
	font-size: 16px;
}

/* --- Modal / dialog body (unify without moving markup) --- */
.dlg_body .form-group.button,
.modal .form-group.button,
.modal-content .form-group.button {
	margin-top: var(--space-24);
}

.dlg_body > p:first-child:not(.ds-callout p),
.modal-body > p:first-child:not(.ds-callout p) {
	margin-bottom: var(--space-lg);
	color: var(--text-secondary);
}

.dlg_body .form-group.mb6,
.modal .form-group.mb6 {
	margin-bottom: var(--space-24);
}

.dlg_body select option.ds-opt-bold,
.modal select option.ds-opt-bold {
	font-weight: var(--font-weight-bold);
	color: var(--primary);
}

/* --- Visibility --- */
.ds-hidden {
	display: none !important;
}

.ds-visible-block {
	display: block;
}

.ds-text-danger {
	color: var(--danger);
}

.ds-text-success {
	color: var(--success);
}

.ds-link-plain {
	text-decoration: none;
}

.ds-link-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.mt-40 {
	margin-top: 40px;
}

.ds-mb-12 {
	margin-bottom: var(--space-12);
}

.text-warning-color {
	color: var(--warning);
}

/* --- Forms / layout helpers --- */
.form-group.button {
	margin-top: var(--space-24);
}

.form-group.button.ds-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.form-group.button.mt-20 {
	margin-top: var(--space-lg);
}

.form-group.mt-16,
#client_fields.mt-16 {
	margin-top: var(--space-md);
}

.row.mt-16 {
	margin-top: var(--space-md);
}

.row.mt-14 {
	margin-top: 14px;
}

.ds-inline-form {
	display: inline;
	margin: 0;
}

.ds-inline-form + .ds-inline-form {
	margin-left: 4px;
}

.ds-form-reset {
	margin: 0;
}

.ds-text-right-mt {
	margin-top: var(--space-sm);
	text-align: right;
}

/* --- Typography / opacity --- */
.ds-opacity-soft {
	opacity: 0.7;
}

.ds-opacity-muted {
	opacity: 0.85;
}

.fw-bold {
	font-weight: var(--font-weight-bold);
}

.fw-extrabold {
	font-weight: var(--font-weight-extrabold);
}

.form-control.ds-textarea {
	height: auto;
	min-height: 80px;
}

.device-status-modal-hint {
	margin-top: -4px;
}

.device-status-modal-hint.ds-hint-spaced {
	margin-top: var(--space-12);
	opacity: 0.85;
}

/* --- Icon sizes (Material Icons) --- */
.material-icons.ds-icon-14 { font-size: 14px; }
.material-icons.ds-icon-16 { font-size: 16px; }
.material-icons.ds-icon-18 { font-size: 18px; vertical-align: middle; }
.material-icons.ds-icon-32 { font-size: 32px; }
.material-icons.ds-icon-muted { opacity: 0.5; }

/* --- Stock / finance numeric columns --- */
.st-margin-positive {
	font-weight: var(--font-weight-bold);
	color: var(--success);
}

.st-margin-negative {
	font-weight: var(--font-weight-bold);
	color: var(--danger);
}

.st-margin-total-positive {
	font-weight: var(--font-weight-extrabold);
	color: var(--success);
}

.st-margin-total-negative {
	font-weight: var(--font-weight-extrabold);
	color: var(--danger);
}

/* --- Chips / badges --- */
.chip.danger-solid {
	background: rgba(var(--danger-rgb), 0.2);
	color: var(--danger);
	border: 1px solid rgba(var(--danger-rgb), 0.3);
}

/* --- Dynamic badge color via CSS variable --- */
.move-type-badge {
	color: var(--badge-color, var(--text-secondary));
	background: color-mix(in srgb, var(--badge-color, var(--text-secondary)) 10%, transparent);
}

/* --- Delete icon buttons in tags --- */
.ds-tag-delete {
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: var(--danger);
	display: flex;
	align-items: center;
	opacity: 0.6;
	transition: opacity var(--ds-duration-fast) var(--ds-ease);
}

.part-entry:hover .ds-tag-delete,
.ds-tag-delete:hover {
	opacity: 1;
}

.ds-row-delete-btn {
	background: none;
	border: none;
	color: var(--danger);
	opacity: 0.4;
	cursor: pointer;
	padding: 0;
}

.ds-row-delete-btn:hover {
	opacity: 1;
}

/* --- RBAC / scope notices --- */
.rbac-scope-notice {
	grid-column: 1 / -1;
	margin-bottom: var(--space-md);
	padding: var(--space-12) var(--space-md);
	border-radius: var(--radius-md);
	background: rgba(var(--primary-rgb), 0.06);
	border: 1px solid rgba(var(--primary-rgb), 0.15);
	font-size: var(--font-caption);
}

/* --- Pro layout container --- */
.layout-pro-container.ds-pro-layout {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-24);
}


/* ================================================================== */
/* Theme - legacy bridge */
/* Source: design/ui/legacy_bridge.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Legacy Bridge
   Maps legacy module classes to DS standards WITHOUT changing HTML
   ========================================================================== */

/* --- Legacy icon buttons → DS icon button --- */
.um-icon-btn,
.stock-hdr-btn--icon,
.btn-icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-width: 30px;
	padding: 0;
	border-radius: var(--ds-btn-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	color: var(--text-muted);
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		border-color var(--ds-duration-base) var(--ds-ease),
		color var(--ds-duration-base) var(--ds-ease);
}

.um-icon-btn:hover,
.stock-hdr-btn--icon:hover,
.btn-icon-square:hover {
	background: var(--ds-surface-hover);
	color: var(--text-main);
	border-color: var(--border-hover);
}

.um-icon-btn--danger:hover {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.35);
}

/* Stock header text buttons */
.stock-hdr-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-12);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	color: var(--text-secondary);
	transition: background-color var(--ds-duration-base) var(--ds-ease);
}

.stock-hdr-btn:hover {
	background: var(--ds-surface-hover);
	color: var(--text-main);
	border-color: var(--border-hover);
}

/* Legacy task buttons → DS soft buttons */
.task-btn,
.client-feed-add {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: var(--ds-btn-height-xs);
	padding: 0 var(--space-sm);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	border: 1px solid var(--ds-border);
	background: var(--gray-100);
	color: var(--text-secondary);
	text-decoration: none;
	transition: background-color var(--ds-duration-base) var(--ds-ease);
}

.task-btn--muted {
	background: var(--gray-100);
	color: var(--text-muted);
}

.task-btn--delete {
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
	background: var(--danger-light);
}

.task-btn--delete:hover {
	background: rgba(var(--danger-rgb), 0.16);
}

.client-feed-add:hover {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.25);
	text-decoration: none;
}

/* Legacy c-btn (contact actions) */
.c-btn {
	border-radius: var(--ds-btn-radius);
}

/* Legacy print button */
.btn-print {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

/* Control buttons (filters, toggles) */
.control-btn {
	border-radius: var(--ds-btn-radius);
	min-height: var(--ds-btn-height-sm);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		color var(--ds-duration-base) var(--ds-ease);
}

/* RBAC module quick-action buttons */
.rbac-module-preset-btn,
.rbac-module-section-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ds-btn-height-xs);
	padding: 0 var(--space-sm);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	border: 1px solid var(--ds-border);
	background: var(--gray-100);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.rbac-module-preset-btn:hover,
.rbac-module-section-toggle:hover {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.25);
}

/* Unified page header aliases */
.unified-page-header,
.crm-page-header {
	gap: var(--gap);
	margin-bottom: calc(var(--gap) * 1.5);
}

.unified-page-title,
.crm-page-title {
	font-size: var(--font-display);
	font-weight: var(--font-weight-extrabold);
	color: var(--text-heading);
}

.unified-section-title,
.crm-section__title {
	font-size: var(--font-title);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

/* Neutralize conflicting hover transforms from modern.css in main area */
.main_area .btn:hover,
.main_area .pro-card:hover,
.main_area .dash-card:hover,
.main_area .mc_card:hover {
	transform: none;
}

/* Debts / module action chips → DS soft buttons */
.btn-soft-primary,
.btn-soft-success,
.btn-soft-danger,
.btn-soft-warning,
.btn-soft-muted {
	min-height: var(--ds-btn-height-xs);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
}

/* Standard toolbar icon actions */
.col-actions .btn-icon,
.crm-toolbar .btn-icon,
.stock-scope-actions .btn-icon {
	border-radius: var(--ds-btn-radius);
}

/* Hash-target modals (:target) */
.modal:target .modal-content,
[id^="edit_"]:target > form,
[id^="edit_"]:target > .pro-card {
	border-radius: var(--radius-xl);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

/* Kanban status columns */
.kanban-col,
#status li a {
	border-radius: var(--radius-sm);
}

/* Dashboard / my_cash stat cards */
.dash-card,
.dash_card,
.mc_card {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
}

.dash_trend,
.mc_trend {
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
}

.dash_trend--up,
.mc_trend--up {
	color: var(--success);
}

.dash_trend--down,
.mc_trend--down {
	color: var(--danger);
}

.dash_trend--neutral,
.mc_trend--neutral {
	color: var(--text-muted);
}

/* Client / device list rows */
.device-row,
.client-row {
	border-radius: var(--list-row-radius);
}

/* Wiki / stock search inputs in headers */
.stock-search-submit,
.crm-ctx-header input.form-control,
.wiki-form .form-control,
.wiki-form select.form-control {
	min-height: var(--ds-input-height);
	border-radius: var(--ds-input-radius);
}

/* User panel cards (settings, RBAC, users) */
.user-panel-card,
.rbac-perms-card {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
}

.rbac-perm-tag {
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
}

.rbac-perm-group__title {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

/* Accounting group headers */
.acc-group {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
	margin-bottom: var(--space-md);
	overflow: hidden;
}

.acc-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-12) var(--space-md);
	background: var(--gray-50);
	border-bottom: 1px solid var(--border-subtle);
}

.acc-group-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-sm);
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	background: var(--gray-100);
	color: var(--text-secondary);
}

/* Form validation feedback (auth + modules) */
.feedback.invalid,
.form-feedback.invalid,
.auth-msg.invalid {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-xs);
	font-size: var(--font-micro);
	color: var(--danger);
}

.feedback.invalid .material-icons,
.form-feedback.invalid .material-icons {
	font-size: 14px;
}

/* Debts page - typography via tokens (no layout change) */
.debts-page-wrap .d-row-name {
	font-weight: var(--font-weight-bold);
	color: var(--text-main) !important;
}

.debts-page-wrap .d-row-phone {
	font-size: var(--font-caption);
	color: var(--text-muted) !important;
}

.debts-page-wrap .d-total {
	font-weight: var(--font-weight-extrabold);
}

/* Wiki category tabs */
.wiki-cat-tab {
	border-radius: var(--radius-full);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

/* Tasks live root */
.tasks-live-root {
	border-radius: var(--radius-xl);
}

/* Responsive: stack page header actions on narrow screens */
@media (max-width: 768px) {
	.crm-page-header,
	.unified-page-header {
		flex-direction: column;
		align-items: stretch;
	}

	.crm-page-header__actions,
	.unified-page-header .header-actions {
		justify-content: flex-start;
		width: 100%;
	}
}

@media (max-width: 576px) {
	.crm-page-header__actions .btn:not(.btn-icon),
	.header-actions .btn:not(.btn-icon) {
		flex: 1 1 auto;
	}
}


/* ================================================================== */
/* Theme - module bridge */
/* Source: design/ui/module_bridge.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Module Bridge
   Module-specific styles moved from inline <style> / style= attributes.
   Layout and structure unchanged - tokens only.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   DEBTS MODULE
   ══════════════════════════════════════════════════════════════════════════ */

.debts-page-wrap {
	width: 100%;
	color: var(--text-main);
}

.debt-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.debt-sum-card {
	background: var(--ds-surface);
	border-radius: var(--radius-xl);
	padding: var(--space-md) var(--space-md);
	border: 1px solid var(--ds-border);
	box-shadow: none;
	position: relative;
	overflow: hidden;
}

.debt-sum-card .bg-icon {
	position: absolute;
	right: -8px;
	bottom: -8px;
	opacity: 0.07;
}

.debt-sum-card .bg-icon .material-icons {
	font-size: 70px;
}

.debt-sum-card--in .bg-icon .material-icons,
.debt-sum-card--in .debt-sum-value {
	color: var(--success);
}

.debt-sum-card--out .bg-icon .material-icons,
.debt-sum-card--out .debt-sum-value {
	color: var(--danger);
}

.debt-sum-card--balance {
	border-color: var(--primary);
	border-left-width: 3px;
	background: var(--ds-surface);
}

.debt-sum-card--balance .bg-icon .material-icons,
.debt-sum-card--balance .debt-sum-label {
	color: var(--primary);
}

.debt-sum-card--balance-positive .debt-sum-value {
	color: var(--success);
}

.debt-sum-card--balance-negative .debt-sum-value {
	color: var(--danger);
}

.debt-sum-label {
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.debt-sum-value {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -0.02em;
}

.debt-sum-value small {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
}

.debt-sum-count {
	font-size: var(--font-micro);
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

.debt-sum-count .text-danger {
	color: var(--danger);
}

.debt-tabs {
	display: flex;
	gap: var(--space-xs);
	background: var(--ds-background);
	border-radius: var(--radius-xl);
	padding: var(--space-xs);
	margin-bottom: var(--space-lg);
	border: 1px solid var(--ds-border);
}

.debt-tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px var(--space-12);
	border-radius: var(--radius-md);
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--text-muted);
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		color var(--ds-duration-base) var(--ds-ease),
		box-shadow var(--ds-duration-base) var(--ds-ease);
	text-decoration: none;
	white-space: nowrap;
}

.debt-tab:hover {
	background: rgba(var(--primary-rgb), 0.05);
	color: var(--primary);
}

.debt-tab.active {
	background: var(--primary);
	color: var(--text-white);
	box-shadow: none;
}

.debt-tab .ct-badge {
	background: rgba(var(--text-white-rgb), 0.25);
	color: var(--text-white);
	border-radius: var(--radius-full);
	padding: 1px 7px;
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	min-width: 20px;
	text-align: center;
}

.debt-tab:not(.active) .ct-badge {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

.debt-tab .material-icons {
	font-size: 17px;
}

.debt-overdue-indicator {
	background: var(--danger);
	color: var(--text-white) !important;
	border-radius: var(--radius-full);
	padding: 1px 6px;
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.debt-tab-panel {
	display: none;
}

.debt-tab-panel.active {
	display: block;
}

.debt-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.debt-row-item {
	background: var(--ds-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
	padding: var(--space-sm) var(--space-12);
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		border-color var(--ds-duration-base) var(--ds-ease);
	box-shadow: none;
	color: var(--text-main);
}

.debt-row-item:hover {
	border-color: var(--border-hover);
	background: var(--ds-surface-hover);
	transform: none;
	box-shadow: none;
}

.debt-row-active {
	border-left: 4px solid var(--primary);
}

.debt-closed {
	border-left: 4px solid var(--success);
	opacity: 0.85;
}

.debt-overdue {
	border-left: 4px solid var(--danger) !important;
	background: rgba(var(--danger-rgb), 0.08) !important;
}

.d-row-main {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.d-row-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.d-row-contact {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.debts-page-wrap .d-row-name {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-bold);
	color: var(--text-main) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.debts-page-wrap .d-row-phone {
	font-size: var(--font-caption);
	color: var(--text-muted) !important;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.debts-page-wrap .d-row-phone:hover {
	color: var(--primary) !important;
	text-decoration: none;
}

.debts-page-wrap .d-row-comment {
	font-size: var(--font-caption);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 300px;
}

.d-row-meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.debt-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	padding: 2px var(--space-sm);
	border-radius: var(--radius-full);
	background: var(--ds-background);
	border: 1px solid var(--ds-border);
	color: var(--text-secondary);
}

.debt-badge .material-icons {
	font-size: 14px;
}

.debt-badge-danger {
	background: var(--danger-light);
	border-color: rgba(var(--danger-rgb), 0.2);
	color: var(--danger);
}

.debt-badge-warning {
	background: var(--warning-light);
	border-color: rgba(var(--warning-rgb), 0.28);
	color: var(--warning-hover);
}

.debt-badge-success {
	background: var(--success-light);
	border-color: rgba(var(--success-rgb), 0.2);
	color: var(--success);
}

.debts-page-wrap .d-row-amount {
	text-align: right;
	min-width: 100px;
	flex-shrink: 0;
}

.debts-page-wrap .d-total {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -0.02em;
	color: inherit !important;
}

.debts-page-wrap .d-total small {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	color: inherit !important;
	opacity: 0.85;
}

.debts-page-wrap .d-orig {
	font-size: var(--font-micro);
	color: var(--text-muted);
	margin-top: -2px;
}

.debt-payments-mini {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-xs);
}

.debt-pay-chip {
	font-size: var(--font-micro);
	color: var(--text-secondary);
	background: var(--ds-background);
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-full);
	padding: 2px var(--space-sm);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.debt-flash-alert {
	margin-bottom: var(--space-md);
	padding: var(--space-12) var(--space-12);
	border-radius: var(--radius-md);
	background: var(--danger-light);
	border: 1px solid rgba(var(--danger-rgb), 0.2);
	color: var(--danger);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
}

.debt-row-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	align-items: center;
}

.debt-empty {
	text-align: center;
	padding: var(--space-2xl) var(--space-lg);
	color: var(--text-muted);
	border: 2px dashed var(--ds-border);
	border-radius: var(--radius-xl);
	width: 100%;
}

.debt-empty .material-icons {
	font-size: 48px;
	opacity: 0.35;
	display: block;
	margin-bottom: var(--space-sm);
	color: var(--text-muted);
}

.debt-empty p {
	font-size: var(--font-caption);
	margin: 0;
	color: var(--text-secondary);
}

.debt-amount-display {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-extrabold);
	color: var(--primary);
	padding: var(--space-xs) 0;
}

.debt-btn {
	min-height: var(--ds-btn-height-sm);
	border-radius: var(--ds-btn-radius);
}

.dlg_body .btn-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.dlg_title_icon--success {
	color: var(--success);
}

.dlg_title_icon--danger {
	color: var(--danger);
}

.dlg_title_icon--primary {
	color: var(--primary);
}

.dlg_title_icon--warning {
	color: var(--warning-hover);
}

@media (max-width: 640px) {
	.debt-summary {
		grid-template-columns: 1fr 1fr;
	}

	.debt-tabs {
		flex-direction: column;
	}

	.debt-tab {
		justify-content: flex-start;
	}

	.debt-card-header {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.debt-card-right {
		text-align: left;
	}

	.debt-actions {
		flex-direction: column;
	}

	.debt-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   USED DEVICES MODULE
   ══════════════════════════════════════════════════════════════════════════ */

.ud-card {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
	box-shadow: none;
}

.ud-card-title {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-extrabold);
	color: var(--text-heading);
}

.ud-field {
	border-color: var(--border-subtle);
}

.ud-label {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
}

.ud-label .material-icons {
	font-size: 16px;
	color: var(--text-muted);
}

.ud-title-wrap--padded {
	padding-top: var(--space-sm);
}

.ud-meta-line {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.ud-meta-line .material-icons {
	font-size: 16px;
	opacity: 0.7;
}

.ud-task-wrap {
	margin-top: var(--space-sm);
}

.ud-task-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-12);
	border-radius: var(--radius-md);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.ud-task-link .material-icons {
	font-size: 16px;
}

.ud-task-link--pending {
	background: var(--warning-light);
	border: 1px solid rgba(var(--warning-rgb), 0.25);
	color: var(--warning-hover);
}

.ud-task-link--done {
	background: var(--success-light);
	border: 1px solid rgba(var(--success-rgb), 0.2);
	color: var(--success);
}

.ud-rb-timer-col {
	text-align: right;
}

.ud-rb-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.ud-rb-timer {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-extrabold);
	color: var(--warning-hover);
}

.ud-rb-date {
	font-size: var(--font-caption);
	color: var(--warning);
	font-weight: var(--font-weight-bold);
}

.ud-card--highlight {
	background: rgba(var(--primary-rgb), 0.01);
	border-color: rgba(var(--primary-rgb), 0.15);
}

.ud-label--danger {
	color: var(--danger);
	font-weight: var(--font-weight-bold);
}

.ud-label--danger .material-icons {
	color: var(--danger);
}

.ud-value--danger {
	color: var(--danger);
}

.ud-label--success {
	color: var(--success);
	font-weight: var(--font-weight-bold);
}

.ud-label--success .material-icons {
	color: var(--success);
}

.ud-value--success {
	color: var(--success);
}

.ud-field--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.ud-field--link-border {
	border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.ud-field--no-border {
	border: none;
}

.ud-field--link .material-icons.icon-muted {
	opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE CATALOG
   ══════════════════════════════════════════════════════════════════════════ */

.dc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ds-btn-height-sm);
	height: var(--ds-btn-height-sm);
	min-width: var(--ds-btn-height-sm);
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ds-btn-radius);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition:
		background-color var(--ds-duration-fast) var(--ds-ease),
		color var(--ds-duration-fast) var(--ds-ease),
		border-color var(--ds-duration-fast) var(--ds-ease);
}

.dc-icon-btn:hover {
	background: var(--nav-active-bg);
	color: var(--primary);
	border-color: rgba(var(--primary-rgb), 0.15);
}

.dc-icon-btn--danger:hover {
	color: var(--danger);
	background: var(--danger-light);
	border-color: rgba(var(--danger-rgb), 0.2);
}

.dc-sidebar,
.dc-panel {
	border-radius: var(--radius-xl);
	border-color: var(--ds-border);
}

.dc-type-item,
.dc-sort-item,
.dc-fault-group {
	border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   INVENTORY / STOCK
   ══════════════════════════════════════════════════════════════════════════ */

.stock-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-sm);
	border-radius: var(--radius-full);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	white-space: nowrap;
}

.stock-badge.success {
	background: var(--success-light);
	color: var(--success);
	border: 1px solid rgba(var(--success-rgb), 0.25);
}

.stock-badge.warning {
	background: var(--warning-light);
	color: var(--warning-hover);
	border: 1px solid rgba(var(--warning-rgb), 0.25);
}

.stock-badge.danger {
	background: var(--danger-light);
	color: var(--danger);
	border: 1px solid rgba(var(--danger-rgb), 0.25);
}

.stock-badge--service {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.stock-move-writeoff-btn {
	min-height: var(--ds-btn-height-xs);
	border-radius: var(--ds-btn-radius);
}

.info-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	padding: var(--space-12);
	border-radius: var(--radius-md);
	font-size: var(--font-caption);
	background: rgba(var(--primary-rgb), 0.05);
	border: 1px solid rgba(var(--primary-rgb), 0.1);
	color: var(--text-muted);
	line-height: 1.45;
}

.info-alert .material-icons {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

.form-group--submit-top {
	margin-top: var(--space-lg);
}

.form-section--hidden {
	display: none;
	margin-top: var(--space-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   SOCIAL / CONTACT BUTTONS (global, not #clients scoped)
   ══════════════════════════════════════════════════════════════════════════ */

.btn-social {
	border-radius: var(--ds-btn-radius);
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		color var(--ds-duration-base) var(--ds-ease),
		border-color var(--ds-duration-base) var(--ds-ease);
}

.btn-social .material-icons {
	font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR CTA
   ══════════════════════════════════════════════════════════════════════════ */

.side_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-md);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	transition: background-color var(--ds-duration-base) var(--ds-ease);
}

.side_btn_primary {
	background: var(--primary);
	color: var(--text-white);
}

.side_btn_primary:hover {
	background: var(--primary-hover);
	color: var(--text-white);
}

/* ══════════════════════════════════════════════════════════════════════════
   TASKS MODULE
   ══════════════════════════════════════════════════════════════════════════ */

.task-card,
.tasks-row {
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	transition:
		background-color var(--ds-duration-base) var(--ds-ease),
		border-color var(--ds-duration-base) var(--ds-ease);
}

.task-card:hover,
.tasks-row:hover {
	border-color: var(--border-hover);
	background: var(--ds-surface-hover);
}

.task-btn,
.task-action-btn {
	min-height: var(--ds-btn-height-sm);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
}

.task-priority-high {
	color: var(--danger);
}

.task-priority-normal {
	color: var(--warning-hover);
}

.task-priority-low {
	color: var(--text-muted);
}

.task-deadline-overdue {
	color: var(--danger);
	font-weight: var(--font-weight-bold);
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS / LOCATION
   ══════════════════════════════════════════════════════════════════════════ */

.settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-md);
}

.settings-card__title {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

.settings-card__desc {
	font-size: var(--font-micro);
	color: var(--text-muted);
	margin: 0;
}

.loc-row {
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDERS / CLIENTS - detail cards (visual only)
   ══════════════════════════════════════════════════════════════════════════ */

.device-side-card,
.client-side-card,
.pro-card {
	border-radius: var(--radius-lg);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

.unified-page-header .unified-page-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-extrabold);
	color: var(--text-heading);
	letter-spacing: -0.02em;
}

.section-desc {
	color: var(--text-secondary);
	font-size: var(--font-caption);
	line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS - LOCATION CARDS & DIRECTORY
   ══════════════════════════════════════════════════════════════════════════ */

.location-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-24);
}

.location-card {
	background: var(--ds-surface);
	border-radius: var(--radius-xl);
	border: 1px solid var(--ds-border);
	box-shadow: none;
	transition:
		border-color var(--ds-duration-base) var(--ds-ease),
		background-color var(--ds-duration-base) var(--ds-ease);
	position: relative;
	overflow: hidden;
}

.location-card:hover {
	border-color: var(--primary);
	background: var(--ds-surface-hover);
}

.location-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
	padding: var(--space-24);
}

.location-card__inner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.location-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.location-card__title {
	display: block;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-main);
}

.location-card__desc {
	display: block;
	font-size: var(--font-caption);
	color: var(--text-muted);
}

.location-card .card-hover-indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--primary);
	transform: scaleX(0);
	transition: transform var(--ds-duration-base) var(--ds-ease);
}

.location-card:hover .card-hover-indicator {
	transform: scaleX(1);
}

.directory-section {
	margin-bottom: var(--space-xl);
	background: var(--ds-surface-secondary);
	padding: var(--space-lg);
	border-radius: var(--radius-xl);
	border: 1px solid var(--ds-border);
}

.directory-section h2 {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-extrabold);
	color: var(--text-main);
	margin-bottom: var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.directory-section h2 .material-icons {
	font-size: 18px;
	color: var(--primary);
}

.part-items-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.part-add-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	border: 2px dashed var(--ds-border);
	color: var(--text-muted);
	cursor: pointer;
	transition:
		border-color var(--ds-duration-fast) var(--ds-ease),
		color var(--ds-duration-fast) var(--ds-ease),
		background-color var(--ds-duration-fast) var(--ds-ease);
}

.part-add-item:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
}

.part-add-item a {
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.part-entry {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--ds-surface);
	padding: 6px var(--space-12);
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-medium);
	color: var(--text-main);
	position: relative;
	transition:
		border-color var(--ds-duration-fast) var(--ds-ease),
		box-shadow var(--ds-duration-fast) var(--ds-ease);
}

.part-entry:hover {
	border-color: var(--primary);
	box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   INSTRUCTION MODULE - PRODUCTION STANDARD (v1)
   Page: #instruction-page
   PHP: modules/instruction/views/page_home.php
        crm_content_head() + crm_tabs_panels() + instruction_render_sections()
   Tabs JS: global [data-crm-tabs] in app_script.js (NOT module-local JS)
   Spacing tokens:
     shell padding  → .main_area (clamp 12–18px)
     tabs → grid    → var(--space-md) 16px
     grid gap       → var(--space-md) desktop / var(--space-sm) mobile
     card padding   → var(--space-sm) 8px all sides (symmetric)
   ══════════════════════════════════════════════════════════════════════════ */

#instruction-page .instruction-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
	align-items: start;
}

#instruction-page .inst-card {
	--inst-icon-size: 36px;
	display: grid;
	grid-template-columns: var(--inst-icon-size) 1fr;
	column-gap: var(--space-sm);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-lg);
	padding: var(--space-sm);
	box-shadow: none;
	transition:
		border-color var(--ds-duration-base) var(--ds-ease),
		background-color var(--ds-duration-base) var(--ds-ease);
}

#instruction-page .inst-card .crm-checklist {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}

#instruction-page .inst-card .crm-checklist__label {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: var(--inst-icon-size) 1fr;
	column-gap: var(--space-sm);
	align-items: center;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
	border-radius: var(--radius-sm);
	border: none;
	box-shadow: inset 0 0 0 1px transparent;
}

#instruction-page .inst-card .crm-checklist__label::before {
	left: calc((var(--inst-icon-size) - 3px) / 2);
	width: 3px;
	height: calc(100% - 16px);
	opacity: 0;
}

#instruction-page .inst-card .crm-checklist__label:has(.crm-checklist__input:checked)::before {
	opacity: 1;
}

#instruction-page .inst-card .crm-checklist__label:hover:not(:has(.crm-checklist__input:checked)) {
	box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.06);
}

#instruction-page .inst-card .crm-checklist__label:has(.crm-checklist__input:checked) {
	box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.14);
}

#instruction-page .inst-card .crm-checklist__text {
	grid-column: 2;
	padding: 0;
	margin: 0;
}

#instruction-page .inst-card:hover {
	border-color: var(--border-hover);
	background: var(--ds-surface-hover);
}

#instruction-page .inst-card-header {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: var(--inst-icon-size) 1fr;
	column-gap: var(--space-sm);
	align-items: center;
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}

#instruction-page .inst-card-icon {
	grid-column: 1;
	width: var(--inst-icon-size);
	height: var(--inst-icon-size);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.08);
	flex-shrink: 0;
}

#instruction-page .inst-card-icon .material-icons {
	font-size: 20px;
}

#instruction-page .inst-card-title {
	grid-column: 2;
	font-size: var(--font-body);
	font-weight: var(--font-weight-bold);
	color: var(--text-main);
	line-height: 1.25;
	margin: 0;
	min-width: 0;
}

#instruction-page .crm-content-head .used-tabs {
	margin-bottom: var(--space-md);
}

#instruction-page .crm-tab-panels {
	margin-top: 0;
}

/* -- Edit mode (super-admin): admin list + SortableJS -- */
#instruction-page.is-editing {
	--inst-admin-handle: 28px;
	--inst-admin-btn: 32px;
	--inst-admin-action-gap: 2px;
	--inst-edit-body-inset: calc(var(--inst-admin-handle) + var(--space-sm) + var(--inst-icon-size) + var(--space-sm));
}

#instruction-page.is-exiting-edit #instruction_panels,
#instruction-page.is-exiting-edit .crm-content-head__tabs {
	transition: none;
}

#instruction-page.is-exiting-edit .inst-edit-toolbar,
#instruction-page.is-exiting-edit #instructionEditToggle {
	transition: none;
}

#instruction-page.is-editing .inst-empty-state {
	display: none;
}

#instruction-page .inst-edit-tabs-slot {
	margin-bottom: var(--space-md);
}

#instruction-page:not(.is-editing) .inst-edit-tabs-slot {
	display: none;
}

#instruction-page.is-editing .inst-edit-tabs-slot {
	display: block;
}

#instruction-page.is-editing .inst-edit-tabs-slot .inst-admin-tabs-nav {
	margin-bottom: 0;
}

#instruction-page .inst-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	min-height: 12rem;
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	background: var(--ds-surface);
	border: 1px dashed var(--ds-border);
	border-radius: var(--radius-lg);
}

#instruction-page .inst-empty-state__icon {
	font-size: 2.5rem;
	color: var(--text-muted, #6b7280);
	opacity: 0.7;
}

#instruction-page .inst-empty-state__text {
	max-width: 28rem;
	margin: 0;
	font-size: var(--font-body, 0.9375rem);
	color: var(--text-muted, #6b7280);
	line-height: 1.5;
}

#instruction-page .crm-content-head .crm-page-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 15px;
}

#instruction-page .crm-content-head .crm-page-header__start {
	flex: 1 1 0;
	min-width: 0;
}

#instruction-page .crm-content-head .crm-page-header__titles {
	width: 100%;
	min-width: 0;
}

#instruction-page .crm-content-head .crm-page-title {
	width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

#instruction-page .crm-content-head .crm-page-subtitle {
	width: 100%;
	max-width: none;
}

#instruction-page .crm-content-head .crm-page-header__actions,
#instruction-page .crm-content-head .crm-page-header__actions.header-actions,
#instruction-page .crm-content-head .header-actions {
	display: inline-flex;
	align-items: flex-start;
	align-self: flex-start;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-left: 0;
}

#instruction-page .inst-header-actions {
	display: inline-flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: var(--space-xs);
	min-height: 30px;
	width: auto;
}

#instruction-page .inst-edit-toolbar {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--space-xs);
	height: 30px;
	min-height: 30px;
}

#instruction-page .inst-header-actions .btn-icon,
#instruction-page .inst-header-actions #instructionEditToggle,
#instruction-page .inst-header-actions #instructionFillBtn,
#instruction-page .inst-header-actions #instructionCancelBtn {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
}

#instruction-page .inst-header-actions .btn-icon .material-icons {
	font-size: 18px;
	line-height: 1;
}

#instruction-page .inst-save-status {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 5.5rem;
	height: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;
	font-size: var(--font-caption, 0.75rem);
	line-height: 1;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
	flex-shrink: 0;
	box-sizing: border-box;
}

#instruction-page .inst-save-status[data-state="saving"] {
	color: var(--primary, #2563eb);
}

#instruction-page .inst-save-status[data-state="ok"] {
	color: var(--success, #16a34a);
}

#instruction-page .inst-save-status[data-state="error"] {
	color: var(--danger, #dc2626);
}

/* Unified icon buttons in edit mode */
#instruction-page.is-editing .inst-admin-action.dc-icon-btn {
	width: var(--inst-admin-btn);
	height: var(--inst-admin-btn);
	min-width: var(--inst-admin-btn);
	padding: 0;
	flex-shrink: 0;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 2;
}

#instruction-page.is-editing .inst-admin-action.dc-icon-btn .material-icons {
	font-size: 18px;
}

#instruction-page.is-editing .inst-admin-action.btn-icon {
	width: var(--inst-admin-btn);
	height: var(--inst-admin-btn);
	min-width: var(--inst-admin-btn);
	padding: 0;
}

#instruction-page.is-editing .inst-admin-action.btn-icon .material-icons {
	font-size: 18px;
}

#instruction-page.is-editing .inst-admin-actions,
#instruction-page.is-editing .inst-card-edit-actions,
#instruction-page.is-editing .inst-edit-item__actions,
#instruction-page.is-editing .inst-admin-tab__actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--inst-admin-action-gap);
	flex-shrink: 0;
}

#instruction-page.is-editing .inst-admin-drag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--inst-admin-handle);
	height: var(--inst-admin-btn);
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	cursor: grab;
	color: var(--text-muted);
	font-size: 18px;
	user-select: none;
	touch-action: none;
	border-radius: var(--radius-sm);
}

#instruction-page.is-editing .inst-admin-drag:active {
	cursor: grabbing;
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

/* Tabs row - edit mode: unified 32px chips (label + edit btn) */
#instruction-page.is-editing .crm-content-head .inst-admin-tabs-nav.tasks-tabs,
#instruction-page.is-editing .inst-admin-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs);
	margin-top: 0;
	margin-bottom: var(--space-md);
	width: 100%;
	box-sizing: border-box;
}

#instruction-page .inst-admin-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	flex: 1;
	min-width: 0;
}

#instruction-page .inst-admin-tab {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	height: var(--inst-admin-btn);
	min-height: var(--inst-admin-btn);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	background: rgba(var(--primary-rgb), 0.02);
	box-sizing: border-box;
	overflow: hidden;
}

#instruction-page .inst-admin-tab:hover {
	border-color: rgba(var(--primary-rgb), 0.12);
	background: rgba(var(--primary-rgb), 0.04);
}

#instruction-page .inst-admin-tab:has(.inst-admin-tab__btn.is-active) {
	border-color: rgba(var(--primary-rgb), 0.2);
	background: rgba(var(--primary-rgb), 0.03);
}

#instruction-page .inst-admin-tab__btn {
	margin: 0;
	padding: 0 var(--space-sm);
	height: auto;
	min-height: 0;
	align-self: stretch;
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
	border: none;
	background: transparent;
	border-radius: 0;
	text-align: left;
	min-width: 0;
	cursor: grab;
	user-select: none;
	touch-action: none;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
}

#instruction-page.is-editing .inst-admin-tab__btn:active {
	cursor: grabbing;
}

#instruction-page.is-editing .inst-admin-tab__btn.tasks-tab {
	padding: 0 var(--space-sm);
	justify-content: flex-start;
}

#instruction-page.is-editing .inst-admin-tab__btn.tasks-tab:hover:not(.is-active) {
	background: rgba(var(--primary-rgb), 0.06);
	color: var(--text-main);
}

#instruction-page.is-editing .inst-admin-tab__btn.tasks-tab.is-active {
	background: var(--nav-active-bg) !important;
	color: var(--nav-active-text) !important;
	font-weight: 700;
}

#instruction-page.is-editing .inst-admin-tab .inst-admin-action.dc-icon-btn {
	width: var(--inst-admin-btn);
	min-width: var(--inst-admin-btn);
	height: auto;
	min-height: 0;
	align-self: stretch;
	border-radius: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid rgba(var(--primary-rgb), 0.08);
}

#instruction-page.is-editing .inst-admin-tab:has(.inst-admin-tab__btn.is-active) .inst-admin-action.dc-icon-btn {
	border-left-color: rgba(var(--primary-rgb), 0.14);
}

#instruction-page .inst-admin-add-tab {
	flex-shrink: 0;
	align-self: center;
}

#instruction-page .inst-admin-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

/* Edit cards */
#instruction-page .inst-card--edit {
	display: block;
	padding: var(--space-sm);
}

#instruction-page .inst-card--edit .inst-card-header--edit {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0 0 var(--space-sm);
	padding: 0 0 var(--space-sm);
	border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}

#instruction-page .inst-card--edit .inst-card-icon {
	flex-shrink: 0;
	width: var(--inst-icon-size);
	height: var(--inst-icon-size);
}

#instruction-page .inst-card--edit .inst-card-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: var(--font-body);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
}

#instruction-page .inst-card--edit .inst-card-header--edit > .inst-admin-action {
	margin-left: auto;
	flex-shrink: 0;
}

#instruction-page .inst-card-add-item {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(var(--primary-rgb), 0.06);
}

#instruction-page .inst-add-item-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	width: 100%;
}

#instruction-page.is-editing .inst-card--edit {
	border-color: var(--ds-border);
	background: var(--ds-surface);
}

#instruction-page.is-editing .inst-card--edit:hover {
	border-color: rgba(var(--primary-rgb), 0.18);
	background: var(--ds-surface);
}

#instruction-page .inst-edit-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#instruction-page.is-editing .inst-card--edit .inst-edit-checklist {
	padding-left: var(--inst-edit-body-inset);
}

#instruction-page.is-editing .inst-card--edit .inst-card-add-item {
	padding-left: var(--inst-edit-body-inset);
}

#instruction-page .inst-edit-item {
	margin: 0 0 var(--space-xs);
	border-radius: var(--radius-sm);
	border: 1px solid rgba(var(--primary-rgb), 0.06);
	background: rgba(var(--primary-rgb), 0.02);
	transition:
		border-color var(--ds-duration-fast) var(--ds-ease),
		background-color var(--ds-duration-fast) var(--ds-ease);
}

#instruction-page .inst-edit-item:last-child {
	margin-bottom: 0;
}

#instruction-page .inst-edit-item:hover {
	border-color: rgba(var(--primary-rgb), 0.12);
	background: rgba(var(--primary-rgb), 0.04);
}

#instruction-page .inst-edit-item__wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm);
}

#instruction-page .inst-edit-item__text {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: var(--font-caption);
	line-height: 1.45;
	color: var(--text-secondary);
	cursor: grab;
	user-select: none;
	touch-action: none;
}

#instruction-page .inst-edit-item__text:active {
	cursor: grabbing;
}

#instruction-page .inst-edit-item__text strong {
	color: var(--text-main);
	font-weight: var(--font-weight-semibold);
	line-height: inherit;
}

#instruction-page .inst-edit-item__wrap > .inst-admin-action {
	flex-shrink: 0;
	margin-left: auto;
	align-self: flex-start;
}

#instruction-page .inst-edit-item__empty {
	font-style: italic;
	opacity: 0.75;
}

.inst-edit-modal__foot {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.inst-edit-modal__foot .btn-primary {
	flex: 1;
	min-width: 0;
}

.inst-edit-modal__foot .btn-danger-soft.is-delete-confirm {
	background: var(--danger, #dc2626);
	border-color: var(--danger, #dc2626);
	color: #fff;
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.inst-edit-modal__foot .btn-danger-soft.is-delete-confirm .material-icons {
	color: #fff;
}

#instruction-page .inst-edit-checklist__empty {
	padding: var(--space-sm);
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-caption);
	border: 1px dashed rgba(var(--primary-rgb), 0.12);
	border-radius: var(--radius-md);
	background: rgba(var(--primary-rgb), 0.02);
	list-style: none;
}

#instruction-page .inst-admin-panel__foot {
	display: flex;
	justify-content: flex-start;
	padding-top: var(--space-xs);
}

#instruction-page .inst-admin-panel__foot .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

#instruction-page .inst-admin-empty {
	padding: var(--space-lg);
	text-align: center;
	color: var(--text-muted);
	border: 1px dashed var(--ds-border);
	border-radius: var(--radius-lg);
	background: rgba(var(--primary-rgb), 0.02);
}

#instruction-page .inst-admin-empty--inline {
	margin-bottom: var(--space-sm);
}

#instruction-page .inst-admin-empty__text {
	margin: 0;
	font-size: var(--font-caption);
}

#instruction-page .inst-sortable-ghost {
	opacity: 0.45;
	background: rgba(var(--primary-rgb), 0.06);
	border: 1px dashed rgba(var(--primary-rgb), 0.35);
	border-radius: var(--radius-md);
}

#instruction-page .inst-sortable-ghost > * {
	visibility: hidden;
}

#instruction-page .inst-sortable-chosen {
	opacity: 1;
	box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.08);
}

#instruction-page .inst-admin-tab.inst-sortable-chosen,
#instruction-page .inst-card--edit.inst-sortable-chosen,
#instruction-page .inst-edit-item.inst-sortable-chosen {
	z-index: 2;
}

@media (max-width: 768px) {
	#instruction-page.is-editing {
		--inst-admin-handle: 24px;
		--inst-admin-btn: 36px;
	}

	#instruction-page .instruction-grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	#instruction-page.is-editing .inst-admin-tabs-nav {
		flex-direction: column;
		align-items: stretch;
	}

	#instruction-page.is-editing .inst-admin-tabs {
		width: 100%;
	}

	#instruction-page.is-editing .inst-admin-tab {
		width: auto;
		max-width: 100%;
		padding: 0;
	}

	#instruction-page.is-editing .inst-admin-add-tab {
		align-self: flex-start;
	}

	#instruction-page .inst-edit-item__wrap {
		padding: var(--space-sm);
	}
}

@media (max-width: 991px) {
	#instruction-page .crm-content-head .crm-page-header,
	#instruction-page .crm-content-head .crm-page-header.unified-page-header,
	#instruction-page .crm-content-head header.crm-page-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		gap: 15px !important;
	}

	#instruction-page .crm-content-head .crm-page-header__start {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}

	#instruction-page .crm-content-head .crm-page-header__actions,
	#instruction-page .crm-content-head .crm-page-header__actions.header-actions,
	#instruction-page .crm-content-head .header-actions {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		align-self: flex-start !important;
	}
}

@media (max-width: 767px) {
	#instruction-page .crm-content-head .crm-page-header__actions .btn,
	#instruction-page .crm-content-head .crm-page-header__actions .btn-icon {
		flex: 0 0 30px !important;
		min-width: 30px !important;
		width: 30px !important;
		max-width: 30px !important;
		justify-content: center !important;
	}
}

@media (max-width: 480px) {
	#instruction-page .inst-header-actions {
		width: auto;
		justify-content: flex-end;
	}

	#instruction-page .inst-edit-toolbar {
		flex-wrap: nowrap;
		justify-content: flex-end;
		height: 30px;
		min-height: 30px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCOUNTING - EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */

.acc-empty-state {
	padding: 40px;
	border: 2px dashed var(--ds-border);
	border-radius: var(--radius-md);
	margin-top: var(--space-lg);
	text-align: center;
	color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   USED DEVICES - RESERVATION BANNER ICON
   ══════════════════════════════════════════════════════════════════════════ */

.ud-rb-icon .material-icons {
	font-size: 32px;
}

.ud-label.ds-mb-6 {
	margin-bottom: 6px;
}

.ud-field.ud-field--empty-note .ud-label {
	color: var(--text-light);
}

.ud-field.ud-field--price-footer {
	border: none;
	padding-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STOCK PICKER (orders modal)
   ══════════════════════════════════════════════════════════════════════════ */

.stock-picker {
	display: flex;
	flex-direction: column;
	min-height: 200px;
	max-height: min(480px, calc(var(--dlg_viewport_h, 100dvh) - 180px));
}

.stock-picker-bc {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-12);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	color: var(--text-muted);
}

.sp-bc-item {
	color: var(--text-muted);
}

.sp-bc-item.active {
	color: var(--primary);
}

.sp-bc-sep {
	opacity: 0.4;
}

.stock-picker-toolbar {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-12);
	min-height: 32px;
}

.sp-back-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	border: none;
	background: var(--bg-body);
	color: var(--text-main);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-bold);
	padding: 6px var(--space-sm);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--ds-duration-fast, 120ms) ease;
}

.sp-back-btn:hover {
	background: var(--gray-100);
}

.sp-back-btn .material-icons {
	font-size: 18px;
}

.sp-step-label {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-extrabold);
	color: var(--text-main);
}

.stock-picker-list {
	flex: 1 1 auto;
	min-height: 140px;
	max-height: 340px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-card);
}

.sp-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-12);
	padding: 13px var(--space-12);
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: background-color var(--ds-duration-fast, 120ms) ease;
	text-align: left;
	width: 100%;
	min-width: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	background: transparent;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}

.sp-row:last-child {
	border-bottom: none;
}

.sp-row:hover:not(.is-disabled) {
	background: rgba(var(--primary-rgb), 0.06);
}

.sp-row.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sp-row-main {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	min-width: 0;
	flex: 1 1 auto;
}

.sp-row-main .material-icons {
	font-size: 20px;
	color: var(--primary);
	flex-shrink: 0;
	margin-top: 1px;
}

.sp-row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-row-title {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-caption);
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.sp-row-meta {
	font-size: var(--font-micro);
	color: var(--text-muted);
	margin-top: 2px;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.sp-row-badge {
	font-size: var(--font-micro);
	font-weight: var(--font-weight-extrabold);
	padding: 4px 9px;
	border-radius: var(--radius-full);
	white-space: nowrap;
	flex: 0 0 auto;
	align-self: center;
	max-width: 38%;
	box-sizing: border-box;
	text-align: center;
}

.sp-row-badge.ok {
	background: var(--success-light);
	color: var(--success);
}

.sp-row-badge.no {
	background: var(--danger-light);
	color: var(--danger);
}

.sp-row-badge.svc {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

.sp-loading,
.stock-picker-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 40px var(--space-md);
	color: var(--text-muted);
	font-size: var(--font-caption);
}

.sp-empty {
	padding: 36px var(--space-md);
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-caption);
}

.spin {
	animation: spSpin 0.8s linear infinite;
}

@keyframes spSpin {
	to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT LOG (settings)
   ══════════════════════════════════════════════════════════════════════════ */

.audit-log-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-caption);
}

.audit-log-table th,
.audit-log-table td {
	padding: var(--space-sm) var(--space-sm);
	border-bottom: 1px solid var(--border-subtle);
	text-align: left;
	vertical-align: top;
}

.audit-log-table th {
	background: var(--gray-50);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.audit-log-table tbody tr:hover {
	background: var(--ds-surface-hover);
}

.audit-ctx {
	font-size: var(--font-micro);
	word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE - price form row, modal hints
   ══════════════════════════════════════════════════════════════════════════ */

.device-price-fields-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.device-price-fields-row .form-group {
	flex: 1 1 120px;
	margin-bottom: 0;
}

.device-status-modal-hint {
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: var(--line-height-relaxed);
	margin: 0 0 var(--space-sm);
}

.user-panel-card__hint--spaced {
	margin: 0 0 var(--space-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD - CHART GRID LINES
   ══════════════════════════════════════════════════════════════════════════ */

.dash_chart_grid_line--25 { bottom: 25%; }
.dash_chart_grid_line--50 { bottom: 50%; }
.dash_chart_grid_line--75 { bottom: 75%; }

.stats_col_main_w { min-width: 250px; }
.stats_col_actions_w { width: 72px; min-width: 72px; max-width: 120px; }
.stats_col_num_w { width: 150px; min-width: 100px; max-width: 150px; }

/* ══════════════════════════════════════════════════════════════════════════
   INVENTORY - BATCH PROGRESS BAR (CSS variable width)
   ══════════════════════════════════════════════════════════════════════════ */

.batch-bar span {
	display: block;
	height: 100%;
	width: var(--batch-pct, 0%);
	background: var(--primary);
	border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE FATAL CHIPS - grouped picker (catalog mode)
   ══════════════════════════════════════════════════════════════════════════ */

.device-fatal-group__body .device-fatal-pick,
.device-fatal-group__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px;
}

.device-catalog-faults-host .device-fatal-chip,
.device-fatal-groups .device-fatal-chip {
	margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE CATALOG - types page (еталон: #instruction-page)
   Page: #device-catalog-page
   ══════════════════════════════════════════════════════════════════════════ */

#device-catalog-page {
	--dc-tag-h: 30px;
	--dc-tag-gap: 5px;
	--dc-tag-pad-x: 8px;
	--dc-tag-action: 24px;
}

/* Два блоки на вкладці типу: Моделі → Несправності, кожен на всю ширину (без колонок). */
#device-catalog-page .instruction-grid.dc-type-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	align-items: stretch;
}

#device-catalog-page .instruction-grid.dc-type-panel > .inst-card {
	width: 100%;
	box-sizing: border-box;
}

#device-catalog-page .inst-card {
	--inst-icon-size: 36px;
	display: grid;
	grid-template-columns: var(--inst-icon-size) 1fr;
	column-gap: var(--space-sm);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-lg);
	padding: var(--space-sm);
	box-shadow: none;
	transition:
		border-color var(--ds-duration-base) var(--ds-ease),
		background-color var(--ds-duration-base) var(--ds-ease);
}

#device-catalog-page .inst-card:hover {
	border-color: var(--border-hover);
	background: var(--ds-surface-hover);
}

#device-catalog-page .inst-card-header {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: var(--inst-icon-size) 1fr;
	column-gap: var(--space-sm);
	align-items: center;
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}

#device-catalog-page .inst-card-icon {
	grid-column: 1;
	width: var(--inst-icon-size);
	height: var(--inst-icon-size);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.08);
	flex-shrink: 0;
}

#device-catalog-page .inst-card-icon .material-icons {
	font-size: 20px;
}

#device-catalog-page .inst-card-title {
	grid-column: 2;
	margin: 0;
	font-size: var(--font-body);
	font-weight: var(--font-weight-bold);
	color: var(--text-main);
	line-height: 1.25;
	min-width: 0;
}

#device-catalog-page .dc-tags-wrap {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding-left: calc(var(--inst-icon-size, 36px) + var(--space-sm));
}

#device-catalog-page .dc-tags,
#device-catalog-page.is-editing .dc-tags--edit {
	gap: var(--dc-tag-gap);
	min-height: 0;
	align-items: center;
}

#device-catalog-page .dc-tag {
	box-sizing: border-box;
	height: var(--dc-tag-h);
	min-height: var(--dc-tag-h);
	max-height: var(--dc-tag-h);
	padding: 0 var(--dc-tag-pad-x);
	gap: 4px;
	line-height: 1.25;
	overflow: hidden;
}

#device-catalog-page .dc-tag__view,
#device-catalog-page .dc-tag__edit-form {
	display: inline-flex;
	align-items: center;
	height: 100%;
	max-height: 100%;
	padding: 0;
	margin: 0;
	gap: 4px;
	min-width: 0;
}

#device-catalog-page .dc-tag__edit-form {
	flex: 1 1 auto;
}

#device-catalog-page .dc-tag .dc-icon-btn {
	width: var(--dc-tag-action);
	min-width: var(--dc-tag-action);
	height: var(--dc-tag-action);
	min-height: var(--dc-tag-action);
	max-height: var(--dc-tag-action);
	padding: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	border: none;
	background: transparent;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

#device-catalog-page .dc-tag .dc-icon-btn:hover {
	background: rgba(var(--primary-rgb), 0.08);
}

#device-catalog-page .dc-tag .dc-icon-btn .material-icons {
	font-size: 14px;
	line-height: 1;
	pointer-events: none;
}
#device-catalog-page .dc-tag .form-control-sm.dc-tag__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 72px;
	max-width: 140px;
	height: var(--dc-tag-action) !important;
	min-height: var(--dc-tag-action) !important;
	max-height: var(--dc-tag-action) !important;
	padding: 0 6px !important;
	font-size: var(--font-micro) !important;
	line-height: 1.2 !important;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}

#device-catalog-page .dc-tag__label {
	line-height: 1.25;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#device-catalog-page .dc-tag__actions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 2px;
	flex-shrink: 0;
	height: 100%;
	position: relative;
	z-index: 3;
}

#device-catalog-page .dc-tag .dc-tag__input,
	grid-column: 1 / -1;
	margin: 0;
	padding-left: calc(var(--inst-icon-size, 36px) + var(--space-sm));
	font-size: var(--font-caption);
	color: var(--text-muted);
}

#device-catalog-page .crm-tab-panels {
	margin-top: 0;
}

#device-catalog-page .crm-content-head .used-tabs {
	margin-bottom: var(--space-md);
}

#device-catalog-page .crm-content-head .crm-page-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 15px;
}

#device-catalog-page .crm-content-head .crm-page-header__start {
	flex: 1 1 0;
	min-width: 0;
}

#device-catalog-page .crm-content-head .crm-page-header__titles {
	width: 100%;
	min-width: 0;
}

#device-catalog-page .crm-content-head .crm-page-title {
	width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

#device-catalog-page .crm-content-head .crm-page-subtitle {
	width: 100%;
	max-width: none;
}

#device-catalog-page .crm-content-head .crm-page-header__actions,
#device-catalog-page .crm-content-head .crm-page-header__actions.header-actions,
#device-catalog-page .crm-content-head .header-actions {
	display: inline-flex;
	align-items: flex-start;
	align-self: flex-start;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-left: 0;
}

#device-catalog-page:not(.is-editing) .dc-tag__actions,
#device-catalog-page:not(.is-editing) .dc-add-tag-row {
	display: none !important;
}

#device-catalog-page.is-editing .dc-tag__drag {
	cursor: grab;
	touch-action: none;
	color: var(--text-muted);
	font-size: 16px;
	flex-shrink: 0;
	width: 16px;
	min-width: 16px;
	line-height: 1;
	user-select: none;
	-webkit-user-select: none;
}

#device-catalog-page.is-editing .dc-tag__drag:active {
	cursor: grabbing;
}

/* Компактні кнопки 24px; невидима зона tap для iOS - через ::before */
#device-catalog-page.is-editing .dc-tag__actions .dc-icon-btn,
#device-catalog-page.is-editing .dc-tag__edit-form .dc-icon-btn {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

#device-catalog-page.is-editing .dc-tag__actions .dc-icon-btn::before,
#device-catalog-page.is-editing .dc-tag__edit-form .dc-icon-btn::before {
	content: "";
	position: absolute;
	inset: -10px;
	z-index: -1;
}

#device-catalog-page.is-editing .dc-tag__delete-btn.is-delete-confirm {
	background: var(--danger, #dc2626);
	border-color: var(--danger, #dc2626);
	color: #fff;
}

#device-catalog-page.is-editing {
	--inst-admin-handle: 28px;
	--inst-admin-btn: 32px;
	--inst-admin-action-gap: 2px;
	--inst-edit-body-inset: calc(var(--inst-icon-size, 36px) + var(--space-sm));
}

#device-catalog-page.is-editing .inst-empty-state {
	display: none;
}

#device-catalog-page .inst-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	min-height: 12rem;
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	background: var(--ds-surface);
	border: 1px dashed var(--ds-border);
	border-radius: var(--radius-lg);
}

#device-catalog-page .inst-edit-tabs-slot {
	margin-bottom: var(--space-md);
}

#device-catalog-page:not(.is-editing) .inst-edit-tabs-slot {
	display: none;
}

#device-catalog-page.is-editing .inst-edit-tabs-slot {
	display: block;
}

#device-catalog-page.is-editing .inst-edit-tabs-slot .inst-admin-tabs-nav {
	margin-bottom: 0;
}

#device-catalog-page .inst-card--edit {
	display: block;
	padding: var(--space-sm);
}

#device-catalog-page .inst-card--edit .inst-card-header {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0 0 var(--space-sm);
	padding: 0 0 var(--space-sm);
	border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
	grid-template-columns: unset;
}

#device-catalog-page .inst-card--edit .inst-card-icon {
	flex-shrink: 0;
	width: var(--inst-icon-size);
	height: var(--inst-icon-size);
}

#device-catalog-page .inst-card--edit .inst-card-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: var(--font-body);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
}

#device-catalog-page.is-editing .inst-card--edit {
	border-color: var(--ds-border);
	background: var(--ds-surface);
}

#device-catalog-page.is-editing .inst-card--edit:hover {
	border-color: rgba(var(--primary-rgb), 0.18);
	background: var(--ds-surface);
}

#device-catalog-page.is-editing .dc-add-tag-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(var(--primary-rgb), 0.06);
}

#device-catalog-page.is-editing .dc-tags-wrap {
	padding-left: var(--inst-edit-body-inset);
}

#device-catalog-page.is-editing .dc-add-tag-input {
	flex: 1;
	min-width: 140px;
	max-width: 280px;
}

#device-catalog-page.is-editing .dc-add-tag-row .dc-tag--add {
	margin-top: 0;
	align-self: center;
	flex-shrink: 0;
	width: var(--ds-input-h);
	min-width: var(--ds-input-h);
	height: var(--ds-input-h);
	min-height: var(--ds-input-h);
}

#device-catalog-page.is-editing .inst-edit-tag .dc-tag__label {
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
}

#device-catalog-page.is-editing .inst-edit-tag.is-tag-editing .dc-tag__label {
	cursor: default;
}

#device-catalog-page.is-editing .inst-edit-tag .dc-tag__label:active {
	cursor: default;
}

#device-catalog-page.is-editing .inst-edit-tag.is-tag-editing .dc-tag__label:active {
	cursor: default;
}

#device-catalog-page .inst-header-actions {
	display: inline-flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: var(--space-xs);
	min-height: 30px;
	width: auto;
}

#device-catalog-page .inst-edit-toolbar {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--space-xs);
	height: 30px;
	min-height: 30px;
}

#device-catalog-page .inst-header-actions .btn-icon,
#device-catalog-page .inst-header-actions #dcEditToggle,
#device-catalog-page .inst-header-actions #dcCancelBtn {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
}

#device-catalog-page .inst-header-actions .btn-icon .material-icons {
	font-size: 18px;
	line-height: 1;
}

#device-catalog-page .inst-save-status {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 5.5rem;
	height: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;
	font-size: var(--font-caption, 0.75rem);
	line-height: 1;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
	flex-shrink: 0;
	box-sizing: border-box;
}

#device-catalog-page .inst-save-status[data-state="saving"] {
	color: var(--primary, #2563eb);
}

#device-catalog-page .inst-save-status[data-state="ok"] {
	color: var(--success, #16a34a);
}

#device-catalog-page .inst-save-status[data-state="error"] {
	color: var(--danger, #dc2626);
}

#device-catalog-page.is-editing .crm-content-head .inst-admin-tabs-nav.tasks-tabs,
#device-catalog-page.is-editing .inst-admin-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs);
	margin-top: 0;
	margin-bottom: var(--space-md);
	width: 100%;
	box-sizing: border-box;
}

#device-catalog-page .inst-admin-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	flex: 1;
	min-width: 0;
}

#device-catalog-page .inst-admin-tab {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	height: var(--inst-admin-btn);
	min-height: var(--inst-admin-btn);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	background: rgba(var(--primary-rgb), 0.02);
	box-sizing: border-box;
	overflow: hidden;
}

#device-catalog-page .inst-admin-tab:hover {
	border-color: rgba(var(--primary-rgb), 0.12);
	background: rgba(var(--primary-rgb), 0.04);
}

#device-catalog-page .inst-admin-tab:has(.inst-admin-tab__btn.is-active) {
	border-color: rgba(var(--primary-rgb), 0.2);
	background: rgba(var(--primary-rgb), 0.03);
}

#device-catalog-page .inst-admin-tab__btn {
	margin: 0;
	padding: 0 var(--space-sm);
	height: auto;
	min-height: 0;
	align-self: stretch;
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
	border: none;
	background: transparent;
	border-radius: 0;
	text-align: left;
	min-width: 0;
	cursor: grab;
	user-select: none;
	touch-action: none;
	font-size: var(--font-caption);
	font-weight: 600;
	color: var(--text-muted);
}

#device-catalog-page.is-editing .inst-admin-tab__btn.tasks-tab {
	padding: 0 var(--space-sm);
	justify-content: flex-start;
}

#device-catalog-page.is-editing .inst-admin-tab__btn.tasks-tab:hover:not(.is-active) {
	background: rgba(var(--primary-rgb), 0.06);
	color: var(--text-main);
}

#device-catalog-page.is-editing .inst-admin-tab__btn:active {
	cursor: grabbing;
}

#device-catalog-page.is-editing .inst-admin-tab__btn.tasks-tab.is-active {
	background: var(--nav-active-bg) !important;
	color: var(--nav-active-text) !important;
	font-weight: 700;
}

#device-catalog-page.is-editing .inst-admin-tab .inst-admin-action.dc-icon-btn {
	width: var(--inst-admin-btn);
	min-width: var(--inst-admin-btn);
	height: auto;
	min-height: 0;
	align-self: stretch;
	border-radius: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid rgba(var(--primary-rgb), 0.08);
}

#device-catalog-page.is-editing .inst-admin-tab:has(.inst-admin-tab__btn.is-active) .inst-admin-action.dc-icon-btn {
	border-left-color: rgba(var(--primary-rgb), 0.14);
}

#device-catalog-page .inst-admin-add-tab {
	flex-shrink: 0;
	align-self: center;
}

#device-catalog-page.is-editing .inst-admin-action.dc-icon-btn {
	width: var(--inst-admin-btn);
	height: var(--inst-admin-btn);
	min-width: var(--inst-admin-btn);
	padding: 0;
	flex-shrink: 0;
}

#device-catalog-page.is-editing .inst-admin-action.dc-icon-btn .material-icons {
	font-size: 18px;
}

#device-catalog-page .inst-admin-empty {
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	color: var(--text-muted);
}

#device-catalog-page .inst-sortable-ghost {
	opacity: 0.45;
}

#device-catalog-page .inst-sortable-chosen {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* ================================================================== */
/* Theme - dark */
/* Source: design/ui/dark_theme.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Dark theme component fixes
   ========================================================================== */

[data-theme-resolved='dark'] .auth-simple__card {
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .crm-table thead th,
[data-theme-resolved='dark'] .fin-table thead th,
[data-theme-resolved='dark'] .acc-table thead th,
[data-theme-resolved='dark'] .stock-table thead th,
[data-theme-resolved='dark'] .client-table thead th,
[data-theme-resolved='dark'] .stats_table thead th,
[data-theme-resolved='dark'] .table thead th {
	background: var(--gray-100);
	color: var(--text-muted);
}

[data-theme-resolved='dark'] .pro-card,
[data-theme-resolved='dark'] .dash-card,
[data-theme-resolved='dark'] .dash_card,
[data-theme-resolved='dark'] .mc_card,
[data-theme-resolved='dark'] .acc-sum-card,
[data-theme-resolved='dark'] .user-panel-card,
[data-theme-resolved='dark'] .acc-group {
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .acc-group-header {
	background: var(--gray-100);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .form-control,
[data-theme-resolved='dark'] .form-select {
	background-color: var(--input-bg);
	border-color: var(--input-border);
	color: var(--text-main);
}

[data-theme-resolved='dark'] .date-filter-popover,
[data-theme-resolved='dark'] .crm-dropdown__panel {
	background: var(--ds-surface);
	border-color: var(--ds-border);
	box-shadow: var(--shadow-lg);
}

[data-theme-resolved='dark'] .module-subnav,
[data-theme-resolved='dark'] .crm-tabs {
	background: var(--gray-100);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .module-subnav__tab.active,
[data-theme-resolved='dark'] .crm-tabs__tab.active {
	background: var(--ds-surface);
	color: var(--primary);
}

[data-theme-resolved='dark'] .um-icon-btn,
[data-theme-resolved='dark'] .stock-hdr-btn--icon,
[data-theme-resolved='dark'] .btn-icon-square,
[data-theme-resolved='dark'] .stock-hdr-btn {
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .task-btn,
[data-theme-resolved='dark'] .client-feed-add,
[data-theme-resolved='dark'] .rbac-module-preset-btn,
[data-theme-resolved='dark'] .rbac-module-section-toggle {
	background: var(--gray-100);
	border-color: var(--ds-border);
	color: var(--text-secondary);
}

[data-theme-resolved='dark'] .pagination a,
[data-theme-resolved='dark'] .paginator a {
	background: var(--ds-surface);
	border-color: var(--ds-border);
	color: var(--text-secondary);
}

[data-theme-resolved='dark'] .pagination a:hover,
[data-theme-resolved='dark'] .paginator a:hover {
	background: var(--ds-surface-hover);
	color: var(--primary);
}

[data-theme-resolved='dark'] .pagination li.active a,
[data-theme-resolved='dark'] .paginator li.active a {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--text-white);
}

[data-theme-resolved='dark'] .crm-toast {
	background: var(--ds-surface);
	border-color: var(--ds-border);
	color: var(--text-main);
}

[data-theme-resolved='dark'] .form-alert,
[data-theme-resolved='dark'] .crm-alert,
[data-theme-resolved='dark'] .ui-alert {
	background: var(--gray-100);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .dlg_panel {
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .debt-sum-card,
[data-theme-resolved='dark'] .debt-row-item,
[data-theme-resolved='dark'] .ud-card {
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] .debt-tab:not(.active) {
	color: var(--text-muted);
}

[data-theme-resolved='dark'] .info-alert {
	background: rgba(var(--primary-rgb), 0.08);
	border-color: rgba(var(--primary-rgb), 0.15);
}

[data-theme-resolved='dark'] .ud-task-link--pending {
	background: var(--warning-light);
	border-color: rgba(var(--warning-rgb), 0.25);
}

[data-theme-resolved='dark'] .dc-sidebar,
[data-theme-resolved='dark'] .dc-panel {
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

[data-theme-resolved='dark'] [data-tooltip]::after {
	background: var(--gray-800);
	color: var(--text-white);
}


/* ================================================================== */
/* Theme - global overrides */
/* Source: design/ui/global_overrides.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM Design System - Global Overrides
   Final layer: neutralize legacy conflicts (modern.css, design-system.css).
   Does NOT change layout - only visual consistency.
   ========================================================================== */

/* Typography: enforce Inter + DS scale in main content */
.main_area,
.main_area input,
.main_area select,
.main_area textarea,
.main_area button,
.main_area .btn {
	font-family: var(--font-sans);
}

.main_area h1,
.main_area .crm-page-title,
.main_area .unified-page-title {
	font-size: var(--font-display);
	font-weight: var(--font-weight-extrabold);
	color: var(--text-heading);
	line-height: var(--line-height-tight);
}

.main_area h2,
.main_area .crm-section__title,
.main_area .pro-card__title {
	font-size: var(--font-title);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

/* Neutralize modern.css hover lifts globally in content area */
.main_area .btn:hover,
.main_area .btn:focus-visible,
.main_area .card:hover,
.main_area .pro-card:hover,
.main_area .dash-card:hover,
.main_area .dash_card:hover,
.main_area .mc_card:hover,
.main_area .ud-card:hover,
.main_area .debt-row-item:hover,
.main_area .debt-sum-card:hover,
.main_area .acc-sum-card:hover,
.main_area .user-panel-card:hover,
.main_area .dc-sidebar:hover,
.main_area .dc-panel:hover {
	transform: none !important;
	filter: none !important;
}

/* Unified button height in toolbars and headers */
.main_area .crm-page-header__actions .btn,
.main_area .header-actions .btn,
.main_area .crm-toolbar .btn {
	min-height: var(--ds-btn-height-sm);
}

/* Raw tables without DS class - minimal unification */
.main_area table:not(.crm-table):not(.stats_table):not(.acc-table):not(.stock-table):not(.client-table):not(.fin-table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-caption);
	color: var(--text-main);
}

.main_area table:not([class]) thead th,
.main_area table:not(.crm-table):not(.stats_table) thead th {
	padding: var(--space-sm) var(--list-row-pad-x);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	background: var(--gray-50);
	border-bottom: 1px solid var(--ds-border);
}

.main_area table:not([class]) tbody td,
.main_area table:not(.crm-table):not(.stats_table) tbody td {
	padding: var(--list-row-pad-y) var(--list-row-pad-x);
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: middle;
}

.main_area table:not([class]) tbody tr:hover,
.main_area table:not(.crm-table):not(.stats_table) tbody tr:hover {
	background: var(--ds-surface-hover);
}

/* All inputs in main area without explicit class still get base styling */
.main_area input[type="text"]:not([class]),
.main_area input[type="email"]:not([class]),
.main_area input[type="password"]:not([class]),
.main_area input[type="number"]:not([class]),
.main_area input[type="tel"]:not([class]),
.main_area input[type="search"]:not([class]),
.main_area textarea:not([class]),
.main_area select:not([class]) {
	height: var(--ds-input-height);
	padding: 0 var(--form-pad-x);
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background: var(--input-bg);
	font-size: var(--font-caption);
	color: var(--text-main);
}

.main_area input[type="text"]:not([class]):focus,
.main_area input[type="email"]:not([class]):focus,
.main_area input[type="password"]:not([class]):focus,
.main_area input[type="number"]:not([class]):focus,
.main_area textarea:not([class]):focus,
.main_area select:not([class]):focus {
	border-color: var(--border-focus);
	outline: 2px solid var(--primary);
	outline-offset: 0;
	box-shadow: none;
}

/* Pro-card full token bridge */
.main_area .pro-card {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
	background: var(--ds-surface);
	padding: var(--space-md);
	box-shadow: none;
}

.main_area .pro-card__title {
	font-size: var(--font-title);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
}

.main_area .kanban-card:hover,
.main_area #kanban .card:hover {
	transform: none !important;
	box-shadow: none !important;
	border-color: var(--border-hover);
}

[data-theme-resolved='dark'] .main_area table:not([class]) thead th,
[data-theme-resolved='dark'] .main_area table:not(.crm-table):not(.stats_table) thead th {
	background: var(--gray-100);
}

/* Modal form actions - unified spacing without inline margin-top */
.main_area .dlg_body .form-group.button,
.main_area .modal .form-group.button,
.main_area .modal-content .form-group.button {
	margin-top: var(--space-24);
}

.main_area .dlg_body .form-group.button.ds-btn-row,
.main_area .modal .form-group.button.ds-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

/* Chips - token-based danger variant */
.main_area .chip.danger-solid {
	background: rgba(var(--danger-rgb), 0.2);
	color: var(--danger);
	border: 1px solid rgba(var(--danger-rgb), 0.3);
}

/* Pagination - unify legacy markup */
.main_area .pagination,
.main_area .crm-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.main_area .pagination a,
.main_area .pagination span,
.main_area .crm-pagination a,
.main_area .crm-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ds-btn-height-sm);
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-sm);
	border-radius: var(--ds-btn-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	color: var(--text-secondary);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition:
		background-color var(--ds-duration-fast) var(--ds-ease),
		border-color var(--ds-duration-fast) var(--ds-ease),
		color var(--ds-duration-fast) var(--ds-ease);
}

.main_area .pagination a:hover,
.main_area .crm-pagination a:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
}

.main_area .pagination .active,
.main_area .pagination .current,
.main_area .crm-pagination .active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--text-white);
}

/* Input groups (shell quick-order modal, filters) */
.main_area .input-group {
	display: flex;
	align-items: stretch;
	gap: var(--space-sm);
}

.main_area .input-group .form-control {
	flex: 1;
	min-width: 0;
}

.main_area .input-group .btn {
	flex-shrink: 0;
	min-height: var(--ds-input-height);
}

/* Kanban / device list cards */
.main_area .kanban-card,
.main_area #kanban .card {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-lg);
	background: var(--ds-surface);
}

/* Wiki / knowledge base tabs */
.main_area .wiki-cat-tab {
	min-height: var(--ds-btn-height-sm);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
}

/* Dropdown menus (legacy) */
.main_area .dropdown-menu,
.main_area .popover-menu {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-md);
	background: var(--ds-surface);
	box-shadow: none;
	font-size: var(--font-caption);
}

/* Auth 404 variant */
.auth-side-panel--warning {
	background: var(--warning) !important;
	border-right-color: var(--warning-hover);
}


/* ================================================================== */
/* Theme - flat */
/* Source: design/ui/flat_theme.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Flat Design 2026
   Professional flat UI: no shadows, no gradients, no blur, no 3D effects.
   Loaded last - overrides legacy modern.css / design-system.css visually.
   Layout and structure unchanged.
   ========================================================================== */

:root {
	/* Neutralize shadow tokens globally - flat calm UI */
	--shadow-xs: none;
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
	--shadow-xl: none;
	--shadow-2xl: none;
	--shadow-primary: none;
	--shadow-primary-lg: none;
	--shadow-success: none;
	--shadow-danger: none;
	--form-focus-ring: 0 0 0 2px rgba(var(--primary-rgb), 0.14);

	/* Flat focus - border only */
	--ds-focus-border: var(--primary);

	/* Canvas from central palette (no override hex) */
	--bg-body: var(--background);
	--bg-main: var(--background);

	/* Crisp geometry */
	--radius-sm: 5px;
	--radius-md: 5px;
	--radius-lg: 5px;
	--radius-xl: 5px;
	--ds-btn-radius: 5px;
	--ds-input-radius: 5px;
	--card-radius: 5px;

	/* Fast, subtle motion */
	--ds-duration-fast: 120ms;
	--ds-duration-base: 160ms;
	--ds-duration-slow: 220ms;
	--ds-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

	/* Typography - professional weights */
	--font-display: 1.375rem;
	--font-title: 1.0625rem;
	--font-body: 0.9375rem;
	--font-caption: 0.8125rem;
	--font-micro: 0.75rem;
}

[data-theme-resolved='dark'] {
	--bg-body: var(--background);
	--bg-main: var(--background);
}

/* ── Global flat reset (content + shell) ── */
.main_area,
.main_layout,
.shell_content,
.dlg_portal {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.main_area .pro-card,
.main_area .dash-card,
.main_area .dash_card,
.main_area .mc_card,
.main_area .ud-card,
.main_area .acc-sum-card,
.main_area .acc-group,
.main_area .user-panel-card,
.main_area .debt-sum-card,
.main_area .debt-row-item,
.main_area .task-card,
.main_area .card,
.main_area .crm-card,
.main_area .dc-sidebar,
.main_area .dc-panel,
.dlg_panel,
.modal-content,
.crm-toast,
.date-filter-popover,
.crm-dropdown__panel,
.crm-table-wrap,
.fin-table-wrap,
.acc-table-wrap,
.stock-table-wrap,
.info-alert,
.form-alert,
.crm-alert {
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* No decorative gradients */
.main_area .debt-sum-card--balance,
.debt-sum-card--balance {
	background: var(--ds-surface) !important;
	border-color: var(--primary) !important;
	border-width: 1px;
	border-left-width: 3px;
}

/* Flat active tabs - border accent, not shadow */
.module-subnav__tab.active,
.module-subnav__tab.is-active,
.crm-tabs__tab.active,
.crm-tabs__tab.is-active,
.debt-tab.active {
	box-shadow: none !important;
	border: 1px solid transparent;
}

.crm-tabs__tab.active,
.crm-tabs__tab.is-active {
	border-color: var(--ds-border);
	font-weight: var(--font-weight-semibold);
}

/* Flat buttons - no hover lift; active press handled in micro-interactions.css */
.btn {
	box-shadow: none !important;
}

.btn:hover,
.btn:focus-visible {
	box-shadow: none !important;
	transform: none !important;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
	border: 1px solid transparent;
}

.btn-secondary,
.btn-outline,
.btn-soft-muted {
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

.btn-secondary:hover,
.btn-outline:hover {
	background: var(--gray-100);
	border-color: var(--border-hover);
}

/* Flat focus ring */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.filter-trigger:focus-visible,
.crm-dropdown__trigger:focus-visible {
	outline: 2px solid var(--ds-focus-border);
	outline-offset: 0;
	box-shadow: none !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
	box-shadow: none !important;
	outline: 2px solid var(--danger);
	outline-offset: 0;
}

/* Tables - clean flat rows */
.crm-table tbody tr,
.fin-table tbody tr,
.acc-table tbody tr,
.stock-table tbody tr,
.client-table tbody tr,
.stats_table tbody tr,
.table tbody tr {
	transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.crm-table thead th,
.fin-table thead th,
.acc-table thead th,
.stock-table thead th {
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.06em;
	border-bottom-width: 2px;
}

.crm-table tbody tr:hover,
.table tbody tr:hover {
	background: var(--gray-100);
}

/* Modals - flat panel, solid backdrop */
.dlg_root::backdrop {
	background: rgba(30, 34, 40, 0.52);
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.dlg_panel {
	border: 1px solid var(--ds-border);
}

.dlg_head {
	background: var(--ds-surface);
}

/* Dropdowns - border definition instead of shadow */
.date-filter-popover,
.crm-dropdown__panel {
	border: 1px solid var(--ds-border);
}

/* Toast - flat with left accent */
.crm-toast {
	border-left: 3px solid var(--primary);
}

.crm-toast--success { border-left-color: var(--success); }
.crm-toast--warning { border-left-color: var(--warning); }
.crm-toast--danger  { border-left-color: var(--danger); }
.crm-toast--info    { border-left-color: var(--info); }

/* Cards hover - background shift only */
.pro-card:hover,
.dash-card:hover,
.dash_card:hover,
.mc_card:hover,
.acc-sum-card:hover,
.debt-row-item:hover {
	box-shadow: none !important;
	transform: none !important;
	background: var(--ds-surface-hover);
}

/* Pagination flat active */
.pagination li.active a,
.paginator li.active a {
	font-weight: var(--font-weight-bold);
}

/* Sidebar / shell flat (when loaded) */
.shell_sidebar,
.shell_header,
.sidebar,
.app-sidebar {
	box-shadow: none !important;
	border-color: var(--ds-border);
}

/* Kill legacy modern.css effects in main content */
.main_area [class*="card"]:hover,
.main_area .kanban-card,
.main_area #kanban .card {
	box-shadow: none !important;
	transform: none !important;
}

.main_area img,
.main_area .ud-image-wrap {
	box-shadow: none !important;
}

/* Text shadows forbidden */
.main_area * {
	text-shadow: none !important;
}

/* Performance: prefer opacity/color transitions */
.main_area .btn,
.main_area .form-control,
.main_area .debt-tab,
.main_area .crm-tabs__tab,
.main_area .pagination a {
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.dlg_root[open] .dlg_panel,
	.modal:target .modal-content,
	.crm-toast {
		animation: none !important;
		transition: none !important;
	}
}


/* ================================================================== */
/* Theme - micro interactions */
/* Source: design/ui/micro_interactions.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Micro-interactions (Phase 2)
   Delicate 150–250ms polish: focus, hover, active, transitions.
   No layout changes. Loaded after flat-theme.css.
   ========================================================================== */

:root {
	--ds-duration-micro: 150ms;
	--ds-duration-hover: 200ms;
	--ds-duration-enter: 220ms;
	--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ds-focus-bg: rgba(var(--primary-rgb), 0.04);
	--ds-focus-bg-strong: rgba(var(--primary-rgb), 0.07);
}

/* Forms: canonical states in forms_core.css - animation only below */

.form-error {
	animation: ds-fade-in var(--ds-duration-enter) var(--ds-ease-out);
}

.form-hint {
	transition: opacity var(--ds-duration-micro) var(--ds-ease-out);
}

.form-group:focus-within .form-hint,
.form_item:focus-within .form-hint {
	opacity: 0.85;
}

.stock-search-form,
.rbac-inline-toggle__track,
.ds-switch__track {
	transition:
		border-color var(--ds-duration-hover) var(--ds-ease-in-out),
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		transform var(--ds-duration-micro) var(--ds-ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS - hover, active press, focus, loading
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		border-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-micro) var(--ds-ease-out),
		opacity var(--ds-duration-micro) var(--ds-ease-out),
		transform var(--ds-duration-micro) var(--ds-ease-out);
}

.btn:hover:not(:disabled):not(.is-disabled) {
	filter: none;
}

.btn:active:not(:disabled):not(.is-disabled):not(.disabled) {
	transform: translateY(1px) !important;
	opacity: 1;
}

.btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.btn.is-loading,
.btn--loading {
	opacity: 0.75;
}

.btn.is-loading::after,
.btn--loading::after {
	animation: ds-spin 0.65s linear infinite;
}

/* Icon buttons - subtle bg on hover */
.btn-icon:hover:not(:disabled),
.um-icon-btn:hover:not(:disabled),
.dc-icon-btn:hover:not(:disabled),
.stock-hdr-btn--icon:hover:not(:disabled) {
	background: var(--gray-100);
	border-color: var(--border-hover);
}

/* Legacy button types - same interaction as .btn */
.task-btn,
.client-feed-add,
.control-btn,
.stock-hdr-btn,
.side_btn,
.rbac-module-preset-btn,
.rbac-module-section-toggle,
.debt-btn {
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		border-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-micro) var(--ds-ease-out),
		opacity var(--ds-duration-micro) var(--ds-ease-out),
		transform var(--ds-duration-micro) var(--ds-ease-out);
}

.task-btn:active:not(:disabled),
.client-feed-add:active,
.control-btn:active:not(:disabled),
.stock-hdr-btn:active,
.side_btn:active,
.rbac-module-preset-btn:active,
.rbac-module-section-toggle:active,
.debt-btn:active,
.um-icon-btn:active,
.dc-icon-btn:active {
	transform: translateY(1px);
}

.task-btn:focus-visible,
.client-feed-add:focus-visible,
.control-btn:focus-visible,
.stock-hdr-btn:focus-visible,
.side_btn:focus-visible,
.rbac-module-preset-btn:focus-visible,
.rbac-module-section-toggle:focus-visible,
.um-icon-btn:focus-visible,
.dc-icon-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS - unified hover
   ══════════════════════════════════════════════════════════════════════════ */

.pro-card,
.dash-card,
.dash_card,
.mc_card,
.acc-sum-card,
.ud-card,
.user-panel-card,
.debt-sum-card,
.acc-group,
.task-card {
	transition:
		border-color var(--ds-duration-hover) var(--ds-ease-in-out),
		background-color var(--ds-duration-hover) var(--ds-ease-in-out);
}

.pro-card:hover,
.dash-card:hover,
.dash_card:hover,
.mc_card:hover,
.acc-sum-card:hover {
	border-color: var(--border-hover);
}

.pro-card__title {
	transition: color var(--ds-duration-micro) var(--ds-ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS - active indicator + smooth switch
   ══════════════════════════════════════════════════════════════════════════ */

.crm-tabs__tab,
.module-subnav__tab,
.module-subnav .loc-tab,
.debt-tab {
	position: relative;
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-hover) var(--ds-ease-in-out),
		border-color var(--ds-duration-hover) var(--ds-ease-in-out);
}

.crm-tabs__tab.active::after,
.crm-tabs__tab.is-active::after,
.module-subnav__tab.active::after,
.module-subnav__tab.is-active::after {
	content: '';
	position: absolute;
	left: var(--space-sm);
	right: var(--space-sm);
	bottom: 3px;
	height: 2px;
	border-radius: 5px;
	background: var(--primary);
	animation: ds-tab-indicator var(--ds-duration-enter) var(--ds-ease-out);
}

.debt-tab.active::after {
	content: none;
}

#status li a {
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-hover) var(--ds-ease-in-out);
}

#status li.active a {
	font-weight: var(--font-weight-semibold);
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES & STATUS - unified indicators
   ══════════════════════════════════════════════════════════════════════════ */

.chip,
.badge,
.crm-badge,
.user-badge,
.stock-badge,
.debt-badge,
.task-badge,
.side_count {
	transition:
		background-color var(--ds-duration-micro) var(--ds-ease-out),
		border-color var(--ds-duration-micro) var(--ds-ease-out),
		color var(--ds-duration-micro) var(--ds-ease-out),
		transform var(--ds-duration-micro) var(--ds-ease-out);
}

.chip,
.crm-badge,
.stock-badge,
.debt-badge {
	border: 1px solid transparent;
}

.status-accent-s1,
.status-accent-s2,
.status-accent-s3,
.status-accent-s4,
.status-accent-s5,
.status-accent-s6,
.status-accent-s7 {
	border: 1px solid rgba(var(--primary-rgb), 0.08);
}

.side_count {
	animation: ds-fade-in var(--ds-duration-enter) var(--ds-ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALS - enter / backdrop
   ══════════════════════════════════════════════════════════════════════════ */

.dlg_root::backdrop {
	transition: opacity var(--ds-duration-enter) var(--ds-ease-out);
}

.dlg_root[open] .dlg_panel {
	animation: ds-modal-enter var(--ds-duration-enter) var(--ds-ease-out);
}

.modal:target .modal-content,
[id^="edit_"]:target > .pro-card,
[id^="edit_"]:target > form {
	animation: ds-modal-enter var(--ds-duration-enter) var(--ds-ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS & TOASTS
   ══════════════════════════════════════════════════════════════════════════ */

.form-alert,
.crm-alert,
.ui-alert,
.info-alert,
.debt-flash-alert {
	animation: ds-alert-in var(--ds-duration-enter) var(--ds-ease-out);
}

.form-alert .material-icons,
.crm-alert .material-icons,
.ui-alert .material-icons {
	transition: transform var(--ds-duration-micro) var(--ds-ease-out);
}

.form-alert:hover .material-icons,
.crm-alert:hover .material-icons {
	transform: scale(1.05);
}

.crm-toast {
	animation: ds-toast-in var(--ds-duration-enter) var(--ds-ease-out);
}

/* Left accent by type */
.form-alert--success,
.crm-alert--success { border-left: 3px solid var(--success); }
.form-alert--warning,
.crm-alert--warning { border-left: 3px solid var(--warning); }
.form-alert--danger,
.crm-alert--danger  { border-left: 3px solid var(--danger); }
.form-alert--info,
.crm-alert--info    { border-left: 3px solid var(--info); }

/* ══════════════════════════════════════════════════════════════════════════
   ICONS - consistent sizing & weight
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .material-icons,
.dlg_portal .material-icons {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.btn .material-icons,
.col-actions .material-icons,
.crm-toolbar .material-icons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.btn-sm .material-icons,
.btn-xs .material-icons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.pro-card__title .material-icons,
.dlg_title .material-icons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.side_icon,
.side_link > .material-icons.side_icon {
	transition: color var(--ds-duration-micro) var(--ds-ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION - sidebar active / hover
   ══════════════════════════════════════════════════════════════════════════ */

.side_link {
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-hover) var(--ds-ease-in-out);
}

.side_link.link_active,
.side_link[aria-current="page"] {
	border-left: 3px solid var(--primary);
	padding-left: calc(var(--shell_pad_x) - 3px);
}

.side_link:hover {
	background: var(--gray-100);
}

.side_btn {
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		border-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-hover) var(--ds-ease-in-out),
		transform var(--ds-duration-micro) var(--ds-ease-out);
}

.side_btn:active {
	transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES - row hover, selection, pagination, sort
   ══════════════════════════════════════════════════════════════════════════ */

.crm-table tbody tr,
.table tbody tr,
.debt-row-item {
	transition: background-color var(--ds-duration-micro) var(--ds-ease-out);
}

.crm-table tbody tr:active,
.table tbody tr:active {
	background: var(--ds-focus-bg);
}

.crm-table tbody tr.is-selected,
.table tbody tr.is-selected,
.crm-table tbody tr.selected {
	background: var(--ds-focus-bg-strong);
	outline: 1px solid rgba(var(--primary-rgb), 0.2);
	outline-offset: -1px;
}

.crm-table th.sortable::after {
	content: 'unfold_more';
	font-family: 'Material Icons';
	font-size: 14px;
	margin-left: 4px;
	vertical-align: middle;
	opacity: 0.35;
	transition: opacity var(--ds-duration-micro) var(--ds-ease-out);
}

.crm-table th.sortable:hover::after {
	opacity: 0.7;
}

.crm-table th.sortable.is-sorted::after {
	content: 'expand_less';
	opacity: 1;
	color: var(--primary);
}

.pagination a,
.paginator a {
	transition:
		background-color var(--ds-duration-micro) var(--ds-ease-out),
		border-color var(--ds-duration-micro) var(--ds-ease-out),
		color var(--ds-duration-micro) var(--ds-ease-out),
		transform var(--ds-duration-micro) var(--ds-ease-out);
}

.pagination a:active,
.paginator a:active {
	transform: scale(0.96);
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWNS & POPOVERS
   ══════════════════════════════════════════════════════════════════════════ */

.date-filter-popover,
.crm-dropdown__panel {
	transition:
		opacity var(--ds-duration-enter) var(--ds-ease-out),
		transform var(--ds-duration-enter) var(--ds-ease-out),
		visibility var(--ds-duration-enter) var(--ds-ease-out);
	transform: translateY(-6px);
}

.date-filter-popover.active,
.crm-dropdown__panel.is-open,
.crm-dropdown.is-open .crm-dropdown__panel {
	transform: translateY(0);
}

.filter-trigger,
.crm-dropdown__trigger {
	transition:
		background-color var(--ds-duration-hover) var(--ds-ease-in-out),
		border-color var(--ds-duration-hover) var(--ds-ease-in-out),
		color var(--ds-duration-micro) var(--ds-ease-out);
}

.filter-trigger:active,
.crm-dropdown__trigger:active {
	transform: scale(0.96);
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes ds-tab-indicator {
	from {
		opacity: 0;
		transform: scaleX(0.6);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes ds-modal-enter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ds-alert-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn:active,
	.side_btn:active,
	.pagination a:active {
		transform: none !important;
	}

	.form-alert,
	.crm-alert,
	.dlg_root[open] .dlg_panel {
		animation: none !important;
	}
}


/* ================================================================== */
/* Theme - pro core */
/* Source: design/ui/pro_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Professional Flat UI 2026
   Final polish layer: calm palette, crisp geometry, zero decorative effects.
   Layout, structure, and element order unchanged - appearance only.
   ========================================================================== */

:root {
	/* Professional 2026 canvas */
	--ds-page-gap: var(--space-24);
	--ds-section-gap: var(--space-16);
	--ds-block-gap: var(--space-12);
	--ds-content-pad: var(--space-16);

	/* Refined typography scale */
	--font-display: 1.375rem;
	--font-title: 1.0625rem;
	--font-body: 0.9375rem;
	--font-caption: 0.8125rem;
	--font-micro: 0.75rem;
	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.6;

	/* Surfaces → color.css */
	--input-focus-bg: rgba(var(--primary-rgb), 0.04);
}

[data-theme-resolved='dark'] {
	--input-focus-bg: rgba(var(--primary-rgb), 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL FLAT RESET - neutralize modern.css / design-system.css effects
   ══════════════════════════════════════════════════════════════════════════ */

.main_area,
.shell_content,
.side_panel,
.top_bar,
.dlg_portal,
.auth-page-modern {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.main_area .card,
.main_area .dash-card,
.main_area .dash_card,
.main_area .pro-card,
.main_area .mc_card,
.main_area .ud-card,
.main_area .acc-sum-card,
.main_area .debt-sum-card,
.main_area .debt-row-item,
.main_area .task-card,
.main_area .user-panel-card,
.main_area .kanban-card,
.main_area .crm-card,
.main_area .dc-sidebar,
.main_area .dc-panel,
.main_area .cmb-avatar,
.main_area .modal-content,
.main_area .info-alert,
.main_area .form-alert,
.main_area .crm-alert,
.main_area .crm-toast,
.main_area .date-filter-popover,
.main_area .crm-dropdown__panel,
.main_area .pagination a,
.main_area .paginator a,
.side_panel,
.top_bar,
.dlg_panel,
.dlg_root::backdrop {
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	text-shadow: none !important;
}

.main_area .card:hover,
.main_area .dash-card:hover,
.main_area .dash_card:hover,
.main_area .pro-card:hover,
.main_area .mc_card:hover,
.main_area .btn:hover,
.main_area .btn:focus-visible,
.main_area .btn:active {
	box-shadow: none !important;
	transform: none !important;
}

/* Flat solid fills - kill legacy gradients */
.main_area .btn-primary,
.main_area .btn-success,
.main_area .btn-danger,
.main_area .btn-warning,
.main_area .btn-info,
.side_btn_primary,
.auth-side-panel,
.auth-side-panel--warning {
	background-image: none !important;
}

.main_area .btn-primary,
.side_btn_primary {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
}

.main_area .btn-primary:hover:not(:disabled),
.side_btn_primary:hover {
	background: var(--primary-hover) !important;
	border-color: var(--primary-hover) !important;
}

.main_area .cmb-avatar,
.main_area .user-avatar,
.main_area .client-avatar {
	background: var(--primary) !important;
	border: 1px solid var(--primary-dark);
	border-radius: var(--radius-md);
}

.main_area .batch-bar span {
	background: var(--primary) !important;
	background-image: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADERS - premium typography, flat separator
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-page-title,
.main_area .unified-page-title,
.main_area h1.crm-page-title {
	font-size: var(--font-display);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.025em;
	color: var(--text-heading);
	line-height: var(--line-height-tight);
}

.main_area .crm-page-subtitle,
.main_area .unified-page-subtitle {
	font-size: var(--font-caption);
	color: var(--text-muted);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-relaxed);
}

.main_area .unified-page-header,
.main_area .crm-page-header,
.main_area .device-header-row,
.main_area .dash-header {
	border-bottom: 1px solid var(--border-subtle);
	padding-bottom: var(--space-12);
}

.main_area .unified-section-title,
.main_area .crm-section__title,
.main_area .pro-card__title {
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.015em;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOOLBARS, FILTERS, SEARCH - flat bordered controls
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-toolbar,
.main_area .crm-page-header__actions,
.main_area .header-actions {
	gap: var(--space-sm);
}

.main_area .stock-search-form,
.main_area .crm-search-form,
.main_area .filter-bar,
.main_area .date-filter-wrap {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-md);
	background: var(--ds-surface);
}

.main_area .stock-search-form:focus-within,
.main_area .crm-search-form:focus-within,
.main_area .filter-bar:focus-within {
	border-color: var(--primary);
	outline: none;
	box-shadow: none;
}

.main_area .filter-trigger,
.main_area .crm-dropdown__trigger,
.main_area .stock-search-submit,
.main_area .date-filter-btn {
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-btn-radius);
	background: var(--ds-surface);
	min-height: var(--ds-btn-height-sm);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
}

.main_area .filter-trigger:hover,
.main_area .crm-dropdown__trigger:hover,
.main_area .stock-search-submit:hover {
	background: var(--gray-100);
	border-color: var(--border-hover);
	color: var(--text-main);
}

.main_area .filter-trigger.is-active,
.main_area .filter-trigger.active,
.main_area .crm-dropdown__trigger[aria-expanded='true'] {
	background: rgba(var(--primary-rgb), 0.08);
	border-color: var(--primary);
	color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES - readability without layout change
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-table-wrap,
.main_area .fin-table-wrap,
.main_area .acc-table-wrap,
.main_area .stock-table-wrap {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-lg);
	background: var(--ds-surface);
}

.main_area .crm-table thead th,
.main_area .fin-table thead th,
.main_area .acc-table thead th,
.main_area .stock-table thead th,
.main_area .client-table thead th,
.main_area .stats_table thead th,
.main_area .table thead th {
	background: var(--gray-50);
	border-bottom: 2px solid var(--ds-border);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
}

.main_area .crm-table tbody tr:nth-child(even),
.main_area .fin-table tbody tr:nth-child(even),
.main_area .acc-table tbody tr:nth-child(even),
.main_area .stock-table tbody tr:nth-child(even),
.main_area .client-table tbody tr:nth-child(even),
.main_area .stats_table tbody tr:nth-child(even) {
	background: rgba(var(--primary-rgb), 0.02);
}

[data-theme-resolved='dark'] .main_area .crm-table tbody tr:nth-child(even),
[data-theme-resolved='dark'] .main_area .fin-table tbody tr:nth-child(even),
[data-theme-resolved='dark'] .main_area .acc-table tbody tr:nth-child(even),
[data-theme-resolved='dark'] .main_area .stock-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

.main_area .crm-table tbody tr:hover,
.main_area .fin-table tbody tr:hover,
.main_area .acc-table tbody tr:hover,
.main_area .stock-table tbody tr:hover,
.main_area .table tbody tr:hover {
	background: var(--gray-100);
}

.main_area .crm-table tbody td,
.main_area .fin-table tbody td,
.main_area .acc-table tbody td,
.main_area .stock-table tbody td {
	padding: 10px var(--list-row-pad-x);
}

/* ══════════════════════════════════════════════════════════════════════════
   STATUS, BADGES, CHIPS - calm semantic colors
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .badge,
.main_area .crm-badge,
.main_area .stock-badge,
.main_area .debt-badge,
.main_area .task-badge,
.main_area .chip,
.main_area .user-badge {
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	box-shadow: none;
}

.main_area .stock-badge.success,
.main_area .badge-success,
.main_area .crm-badge--success {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.2);
}

.main_area .stock-badge.warning,
.main_area .badge-warning,
.main_area .crm-badge--warning {
	background: var(--warning-light);
	color: var(--warning-hover);
	border-color: rgba(var(--warning-rgb), 0.2);
}

.main_area .stock-badge.danger,
.main_area .badge-danger,
.main_area .crm-badge--danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   SHELL - sidebar & header flat
   ══════════════════════════════════════════════════════════════════════════ */

.side_panel {
	border-right: 1px solid var(--ds-border);
	background: var(--bg-sidebar);
}

.top_bar {
	border-bottom: 1px solid var(--ds-border);
	background: var(--bg-header);
}

.side_link.link_active,
.side_link[aria-current='page'] {
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--primary);
	border-left: 3px solid var(--primary);
}

.side_count {
	background: var(--primary);
	color: #fff;
	border: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTH - flat split-pane (login / 404)
   ══════════════════════════════════════════════════════════════════════════ */

.auth-side-panel {
	background: var(--primary) !important;
}

.auth-side-panel--warning {
	background: var(--warning) !important;
}

.auth-side-panel::before {
	display: none !important;
}

.auth-form-panel .btn-primary {
	background: var(--primary);
	border-color: var(--primary);
}

.feature-item .material-icons {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-md);
	box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALS - flat panel, crisp footer
   ══════════════════════════════════════════════════════════════════════════ */

.dlg_root::backdrop {
	background: rgba(30, 34, 40, 0.55);
}

.dlg_panel,
.modal-content {
	border: 1px solid var(--ds-border);
	border-radius: var(--radius-xl);
}

.dlg_head {
	border-bottom: 1px solid var(--border-subtle);
}

.dlg_foot {
	border-top: 1px solid var(--border-subtle);
	background: var(--gray-50);
}

/* ══════════════════════════════════════════════════════════════════════════
   SPACING - consistent gaps between blocks (no repositioning)
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .pro-card + .pro-card,
.main_area .dash-card + .dash-card,
.main_area .crm-section + .crm-section {
	margin-top: var(--ds-section-gap);
}

.main_area .form-group:last-child,
.main_area .form_item:last-child {
	margin-bottom: 0;
}

/* Performance: lightweight transitions only */
.main_area .btn,
.main_area .form-control,
.main_area .crm-tabs__tab,
.main_area .side_link,
.main_area .pagination a {
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.main_area *,
	.side_panel *,
	.dlg_portal * {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}


/* ================================================================== */
/* Theme - ux polish */
/* Source: design/ui/ux_polish.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - UX Polish (Phase 2)
   Delicate micro-interactions 150–250ms. Visual only - no layout changes.
   ========================================================================== */

:root {
	--ds-ux-fast: 150ms;
	--ds-ux-base: 200ms;
	--ds-ux-slow: 250ms;
	--ds-ux-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ds-ux-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ds-focus-ring: rgba(var(--primary-rgb), 0.22);
	--ds-focus-bg: rgba(var(--primary-rgb), 0.05);
	--ds-focus-bg-strong: rgba(var(--primary-rgb), 0.08);
}

/* Forms: canonical states in forms_core.css - error feedback animation only */

.form-error {
	animation: ds-ux-error-in var(--ds-ux-slow) var(--ds-ux-ease-out);
}

.form-group.has-error .form-control,
.form_item.has-error .form-control {
	animation: ds-ux-shake 0.35s var(--ds-ux-ease);
}

@keyframes ds-ux-error-in {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-ux-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

.date-filter-popover.active,
.crm-dropdown__panel.is-open,
.crm-dropdown.is-open .crm-dropdown__panel {
	transform: translateY(0) scale(1);
}

.date-filter-popover a,
.crm-dropdown__panel a,
.dropdown-menu a,
.dropdown-menu li > a {
	transition:
		background-color var(--ds-ux-fast) var(--ds-ux-ease),
		color var(--ds-ux-fast) var(--ds-ux-ease);
	border-radius: var(--radius-sm);
}

.date-filter-popover a:hover,
.crm-dropdown__panel a:hover,
.dropdown-menu a:hover,
.dropdown-menu li > a:hover {
	background: var(--gray-100);
	color: var(--primary);
}

.filter-trigger,
.crm-dropdown__trigger {
	transition:
		background-color var(--ds-ux-base) var(--ds-ux-ease),
		border-color var(--ds-ux-base) var(--ds-ux-ease),
		color var(--ds-ux-fast) var(--ds-ux-ease),
		transform var(--ds-ux-fast) var(--ds-ux-ease);
}

.filter-trigger:active,
.crm-dropdown__trigger:active {
	transform: scale(0.96);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS - hover, active press, focus, loading
   ══════════════════════════════════════════════════════════════════════════ */

.btn,
.task-btn,
.client-feed-add,
.control-btn,
.stock-hdr-btn,
.side_btn,
.debt-btn,
.um-icon-btn,
.dc-icon-btn {
	transition:
		background-color var(--ds-ux-base) var(--ds-ux-ease),
		border-color var(--ds-ux-base) var(--ds-ux-ease),
		color var(--ds-ux-fast) var(--ds-ux-ease),
		opacity var(--ds-ux-fast) var(--ds-ux-ease),
		transform var(--ds-ux-fast) var(--ds-ux-ease-out) !important;
}

.btn:hover:not(:disabled):not(.is-disabled),
.task-btn:hover:not(:disabled),
.control-btn:hover:not(:disabled),
.stock-hdr-btn:hover,
.debt-btn:hover:not(:disabled) {
	filter: none;
}

.btn:active:not(:disabled):not(.is-disabled),
.task-btn:active:not(:disabled),
.control-btn:active:not(:disabled),
.stock-hdr-btn:active,
.debt-btn:active,
.side_btn:active {
	transform: translateY(1px) !important;
}

.btn:focus-visible,
.task-btn:focus-visible,
.control-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.btn.is-loading::after,
.btn--loading::after {
	animation: ds-spin 0.55s linear infinite;
	border-width: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS - unified borders, padding rhythm, hover
   ══════════════════════════════════════════════════════════════════════════ */

.pro-card,
.dash-card,
.dash_card,
.mc_card,
.acc-sum-card,
.acc-group,
.task-card,
.user-panel-card,
.debt-sum-card,
.ud-card,
.dc-sidebar,
.dc-panel {
	transition:
		border-color var(--ds-ux-base) var(--ds-ux-ease),
		background-color var(--ds-ux-base) var(--ds-ux-ease);
}

.pro-card__title,
.dash-card__title,
.acc-sum-card__label {
	transition: color var(--ds-ux-fast) var(--ds-ux-ease);
}

.pro-card:hover,
.dash-card:hover,
.mc_card:hover,
.acc-sum-card:hover,
.task-card:hover {
	border-color: var(--border-hover);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS - active indicator, hover, switch
   ══════════════════════════════════════════════════════════════════════════ */

.crm-tabs__tab,
.module-subnav__tab,
.module-subnav .loc-tab,
.debt-tab,
.wiki-cat-tab {
	transition:
		background-color var(--ds-ux-base) var(--ds-ux-ease),
		color var(--ds-ux-base) var(--ds-ux-ease),
		border-color var(--ds-ux-base) var(--ds-ux-ease);
}

.crm-tabs__tab.active,
.crm-tabs__tab.is-active,
.module-subnav__tab.active,
.module-subnav__tab.is-active,
.debt-tab.active {
	animation: ds-ux-tab-on var(--ds-ux-slow) var(--ds-ux-ease-out);
}

@keyframes ds-ux-tab-on {
	from { background-color: transparent; }
	to   { background-color: var(--ds-surface); }
}

.crm-tabs__tab.active::after,
.crm-tabs__tab.is-active::after,
.module-subnav__tab.active::after,
.module-subnav__tab.is-active::after {
	animation: ds-ux-tab-line var(--ds-ux-slow) var(--ds-ux-ease-out);
}

@keyframes ds-ux-tab-line {
	from { opacity: 0; transform: scaleX(0.5); }
	to   { opacity: 1; transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES, STATUS, COUNTERS - one product language
   ══════════════════════════════════════════════════════════════════════════ */

.chip,
.badge,
.crm-badge,
.user-badge,
.stock-badge,
.debt-badge,
.task-badge,
.side_count {
	transition:
		background-color var(--ds-ux-fast) var(--ds-ux-ease),
		border-color var(--ds-ux-fast) var(--ds-ux-ease),
		color var(--ds-ux-fast) var(--ds-ux-ease),
		transform var(--ds-ux-fast) var(--ds-ux-ease);
}

.stock-badge,
.debt-badge,
.task-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
	border: 1px solid transparent;
}

.side_count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-full);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	background: var(--primary);
	color: #fff;
	animation: ds-ux-badge-pop var(--ds-ux-slow) var(--ds-ux-ease-out);
}

@keyframes ds-ux-badge-pop {
	from { transform: scale(0.85); opacity: 0.6; }
	to   { transform: scale(1); opacity: 1; }
}

.status-accent-s1,
.status-accent-s2,
.status-accent-s3,
.status-accent-s4,
.status-accent-s5,
.status-accent-s6,
.status-accent-s7 {
	border: 1px solid rgba(var(--primary-rgb), 0.08);
	border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALS - smooth enter, backdrop, footer buttons
   ══════════════════════════════════════════════════════════════════════════ */

.dlg_root::backdrop {
	transition: opacity var(--ds-ux-slow) var(--ds-ux-ease-out);
}

.dlg_root[open]::backdrop {
	animation: ds-ux-backdrop-in var(--ds-ux-slow) var(--ds-ux-ease-out);
}

.dlg_root[open] .dlg_panel,
.modal:target .modal-content,
[id^="edit_"]:target > form,
[id^="edit_"]:target > .pro-card {
	animation: ds-ux-modal-in var(--ds-ux-slow) var(--ds-ux-ease-out);
}

@keyframes ds-ux-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ds-ux-modal-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dlg_foot .btn,
.modal-footer .btn {
	min-height: var(--ds-btn-height-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS & TOASTS - unified success / warning / danger / info
   ══════════════════════════════════════════════════════════════════════════ */

.form-alert,
.crm-alert,
.ui-alert,
.info-alert,
.debt-flash-alert {
	animation: ds-ux-alert-in var(--ds-ux-slow) var(--ds-ux-ease-out);
	border-left-width: 3px;
	border-left-style: solid;
}

.info-alert {
	border-left-color: var(--info);
}

.form-alert--success,
.crm-alert--success { border-left-color: var(--success); }
.form-alert--warning,
.crm-alert--warning { border-left-color: var(--warning); }
.form-alert--danger,
.crm-alert--danger  { border-left-color: var(--danger); }
.form-alert--info,
.crm-alert--info    { border-left-color: var(--info); }

@keyframes ds-ux-alert-in {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.crm-toast {
	animation: ds-ux-toast-in var(--ds-ux-slow) var(--ds-ux-ease-out);
}

@keyframes ds-ux-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONS - Material Icons unified weight & sizes
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .material-icons,
.shell_content .material-icons,
.side_panel .material-icons,
.dlg_portal .material-icons,
.auth-page-modern .material-icons {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	transition: color var(--ds-ux-fast) var(--ds-ux-ease);
}

.btn .material-icons { font-size: 18px; width: 18px; height: 18px; }
.btn-sm .material-icons,
.btn-xs .material-icons { font-size: 16px; width: 16px; height: 16px; }
.btn-lg .material-icons { font-size: 20px; width: 20px; height: 20px; }
.col-actions .material-icons { font-size: 16px; }
.pro-card__title .material-icons,
.dlg_title .material-icons { font-size: 20px; width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION - active, hover (structure unchanged)
   ══════════════════════════════════════════════════════════════════════════ */

.side_link {
	transition:
		background-color var(--ds-ux-base) var(--ds-ux-ease),
		color var(--ds-ux-base) var(--ds-ux-ease),
		border-color var(--ds-ux-fast) var(--ds-ux-ease);
}

.side_link:hover {
	background: var(--gray-100);
	color: var(--text-main);
}

.side_link.link_active,
.side_link[aria-current="page"] {
	background: var(--ds-focus-bg-strong);
	color: var(--primary);
	font-weight: var(--font-weight-semibold);
}

.side_icon {
	transition: color var(--ds-ux-fast) var(--ds-ux-ease);
}

.side_link.link_active .side_icon,
.side_link[aria-current="page"] .side_icon {
	color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES - row hover, selection, sort, pagination
   ══════════════════════════════════════════════════════════════════════════ */

.crm-table tbody tr,
.fin-table tbody tr,
.acc-table tbody tr,
.stock-table tbody tr,
.client-table tbody tr,
.stats_table tbody tr,
.table tbody tr {
	transition: background-color var(--ds-ux-fast) var(--ds-ux-ease);
}

.crm-table tbody tr.is-selected,
.crm-table tbody tr.selected,
.table tbody tr.is-selected {
	background: var(--ds-focus-bg-strong);
	outline: 1px solid var(--ds-focus-ring);
	outline-offset: -1px;
}

.crm-table th.sortable,
.fin-table th.sortable,
.acc-table th.sortable,
.stock-table th.sortable {
	transition: color var(--ds-ux-fast) var(--ds-ux-ease);
}

.crm-table th.sortable::after,
.fin-table th.sortable::after {
	transition: opacity var(--ds-ux-fast) var(--ds-ux-ease), color var(--ds-ux-fast) var(--ds-ux-ease);
}

.pagination a,
.paginator a {
	transition:
		background-color var(--ds-ux-fast) var(--ds-ux-ease),
		border-color var(--ds-ux-fast) var(--ds-ux-ease),
		color var(--ds-ux-fast) var(--ds-ux-ease),
		transform var(--ds-ux-fast) var(--ds-ux-ease);
}

.pagination li.active a,
.paginator li.active a {
	font-weight: var(--font-weight-bold);
}

.pagination a:active,
.paginator a:active {
	transform: scale(0.96);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKBOX / RADIO / SWITCH - focus & toggle feel
   ══════════════════════════════════════════════════════════════════════════ */

.form-check-input,
input[type="checkbox"],
input[type="radio"] {
	transition:
		border-color var(--ds-ux-fast) var(--ds-ux-ease),
		background-color var(--ds-ux-fast) var(--ds-ux-ease),
		box-shadow var(--ds-ux-fast) var(--ds-ux-ease);
}

.form-check-input:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--ds-focus-ring);
	outline-offset: 2px;
	box-shadow: none;
}

.ds-switch__track,
.rbac-inline-toggle__track {
	transition:
		background-color var(--ds-ux-base) var(--ds-ux-ease),
		border-color var(--ds-ux-base) var(--ds-ux-ease);
}

.device-fatal-chip {
	transition:
		background-color var(--ds-ux-fast) var(--ds-ux-ease),
		border-color var(--ds-ux-fast) var(--ds-ux-ease),
		color var(--ds-ux-fast) var(--ds-ux-ease);
}

.device-fatal-chip:hover {
	border-color: var(--border-hover);
}

.device-fatal-chip.is-active {
	animation: ds-ux-chip-on var(--ds-ux-fast) var(--ds-ux-ease-out);
}

@keyframes ds-ux-chip-on {
	from { background-color: var(--gray-100); }
	to   { background-color: var(--nav-active-bg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.form-group.has-error .form-control,
	.crm-toast,
	.form-alert,
	.dlg_root[open] .dlg_panel,
	.side_count,
	.device-fatal-chip.is-active {
		animation: none !important;
	}

	.btn:active,
	.pagination a:hover,
	.filter-trigger:active {
		transform: none !important;
	}
}


/* ================================================================== */
/* Theme - HIG */
/* Source: design/ui/hig_theme.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Apple HIG Design Principles
   Clarity · Deference · Depth (subtle) · Minimal chrome
   Principles only - not a literal Apple UI clone.
   Layout, structure, and behavior unchanged.
   ========================================================================== */

:root {
	/* ── System typography (SF Pro stack + Inter fallback) ── */
	--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
		'Helvetica Neue', 'Inter', system-ui, sans-serif;

	/* HIG type scale - Clarity through hierarchy */
	--hig-large-title: 1.75rem;    /* Page Title */
	--hig-title-2: 1.375rem;       /* Section Title */
	--hig-title-3: 1.0625rem;      /* Block Title */
	--hig-body: 0.9375rem;         /* Body */
	--hig-callout: 1rem;
	--hig-subhead: 0.875rem;
	--hig-footnote: 0.8125rem;
	--hig-caption: 0.75rem;        /* Caption */

	--font-display: var(--hig-large-title);
	--font-title: var(--hig-title-2);
	--font-body: var(--hig-body);
	--font-caption: var(--hig-footnote);
	--font-micro: var(--hig-caption);

	--line-height-tight: 1.21;
	--line-height-normal: 1.47;
	--line-height-relaxed: 1.55;

	/* Colors → design/color_theme.css (Calm Pro v3) - do NOT override palette here */
	--ds-background: var(--background);
	--ds-surface: var(--surface);
	--ds-surface-hover: var(--surface-secondary);
	--ds-border: var(--border-color);
	--ds-focus-bg: rgba(var(--primary-rgb), 0.05);
	--ds-focus-bg-strong: rgba(var(--primary-rgb), 0.09);
	--ds-focus-ring: rgba(var(--primary-rgb), 0.28);

	/* ── Unified radius (continuous corners) ── */
	--radius-sm: 5px;
	--radius-md: 5px;
	--radius-lg: 5px;
	--radius-xl: 5px;
	--radius-full: 9999px;
	--card-radius: 5px;
	--ds-btn-radius: 5px;
	--ds-input-radius: 5px;

	/* ── HIG spacing grid (4 / 8 / 12 / 16 / 20 / 28 / 32) ── */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-12: 12px;
	--space-md: 16px;
	--space-16: 16px;
	--space-20: 20px;
	--space-lg: 24px;
	--space-24: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--gap: 16px;
	--hig-space-element: 12px;
	--hig-space-block: 20px;
	--hig-space-section: 28px;
	--hig-space-page: 32px;
	--list-row-pad-y: 13px;
	--list-row-pad-x: 16px;
	--ds-page-gap: var(--hig-space-section);
	--ds-section-gap: var(--hig-space-block);
	--ds-block-gap: var(--hig-space-element);

	/* ── Natural motion (HIG spring-like easing) ── */
	--ds-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--ds-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
	--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ds-duration-fast: 180ms;
	--ds-duration-base: 220ms;
	--ds-duration-slow: 280ms;
	--ds-duration-micro: 180ms;
	--ds-duration-hover: 220ms;
	--ds-duration-enter: 280ms;
	--ds-ux-fast: 180ms;
	--ds-ux-base: 220ms;
	--ds-ux-slow: 280ms;
	--ds-ux-ease: var(--ds-ease);
	--ds-ux-ease-out: var(--ds-ease-out);

	/* Flat - no decorative shadows */
	--shadow-xs: none;
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
	--shadow-xl: none;
}

/* Dark palette → design/color_theme.css [data-theme-resolved='dark'] */

/* Dark palette → design/color_theme.css [data-theme-resolved='dark'] */

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY - hierarchy through type, not decoration
   ══════════════════════════════════════════════════════════════════════════ */

.main_area,
.shell_content {
	font-family: var(--font-sans);
	font-size: var(--hig-body);
	line-height: var(--line-height-normal);
	color: var(--text-main);
	letter-spacing: -0.011em;
}

/* Page Title */
.crm-page-title,
.unified-page-title,
.ds-h1 {
	font-size: var(--hig-large-title);
	font-weight: 700;
	line-height: 1.21;
	letter-spacing: -0.028em;
	color: var(--text-heading);
}

/* Section Title */
.crm-section__title,
.unified-section-title,
.crm-ctx-header__title,
.pro-card__title,
.dlg_title,
.ds-h2 {
	font-size: var(--hig-title-2);
	font-weight: 600;
	line-height: 1.27;
	letter-spacing: -0.022em;
	color: var(--text-heading);
}

/* Block Title */
.ds-h3,
.acc-sum-card__label,
.acc-group-header,
.ud-card-title {
	font-size: var(--hig-title-3);
	font-weight: 600;
	line-height: 1.29;
	letter-spacing: -0.018em;
	color: var(--text-main);
}

/* Caption / secondary */
.crm-page-subtitle,
.form-hint,
.ds-caption,
.debt-sum-label {
	font-size: var(--hig-footnote);
	line-height: 1.38;
	color: var(--text-muted);
	font-weight: 400;
}

.ds-h4 {
	font-size: var(--hig-caption);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS - light, clear, ecosystem
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
	min-height: 36px;
	padding: 0 16px;
	border-radius: var(--ds-btn-radius);
	font-size: var(--hig-subhead);
	font-weight: 500;
	letter-spacing: -0.01em;
	border-width: 1px;
	border-style: solid;
}

.btn-sm {
	min-height: 32px;
	padding: 0 12px;
	font-size: var(--hig-footnote);
	border-radius: 5px;
}

.btn-lg {
	min-height: 44px;
	padding: 0 20px;
	font-size: var(--hig-callout);
	border-radius: 5px;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
	border-color: transparent;
	font-weight: 600;
}

.btn-secondary,
.btn-outline {
	background: rgba(120, 120, 128, 0.12);
	border-color: transparent;
	color: var(--text-main);
	font-weight: 500;
}

[data-theme-resolved='dark'] .btn-secondary,
[data-theme-resolved='dark'] .btn-outline {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-main);
}

.btn-secondary:hover,
.btn-outline:hover {
	background: rgba(120, 120, 128, 0.18);
	border-color: transparent;
}

.btn-ghost {
	color: var(--primary);
	font-weight: 500;
}

.btn:focus-visible {
	outline: 3px solid rgba(var(--primary-rgb), 0.35);
	outline-offset: 1px;
}

.btn:disabled,
.btn.is-disabled {
	opacity: 0.4;
}

.btn-icon {
	border-radius: 5px;
	border: none;
	background: transparent;
}

.btn-icon:hover {
	background: rgba(120, 120, 128, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMS - readability first
   ══════════════════════════════════════════════════════════════════════════ */

.form-control,
.form-select,
textarea.form-control {
	min-height: 36px;
	padding: 0 12px;
	font-size: var(--hig-body);
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--input-bg);
	color: var(--text-main);
}

textarea.form-control {
	padding: 10px 12px;
	line-height: var(--line-height-normal);
}

.form-group > label,
.form_item > label,
.form-label {
	font-size: var(--hig-footnote);
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 8px;
	letter-spacing: -0.006em;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--primary);
	background-color: var(--input-bg);
	outline: 3px solid rgba(var(--primary-rgb), 0.28);
	outline-offset: 0;
}

.form-control::placeholder {
	color: var(--text-light);
}

.form-error {
	font-size: var(--hig-caption);
	color: var(--danger);
}

.form-group,
.form_item {
	margin-bottom: var(--space-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECT
   ══════════════════════════════════════════════════════════════════════════ */

.form-select,
select.form-control {
	font-size: var(--hig-body);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS - grouped content, breathing room
   ══════════════════════════════════════════════════════════════════════════ */

.pro-card,
.dash-card,
.dash_card,
.mc_card,
.acc-sum-card,
.ud-card,
.user-panel-card,
.debt-sum-card,
.acc-group,
.task-card {
	border: 1px solid var(--border-subtle);
	border-radius: var(--card-radius);
	background: var(--ds-surface);
	padding: var(--space-md);
	box-shadow: none;
}

.pro-card__title {
	margin-bottom: var(--space-12);
	font-size: var(--hig-title-3);
	font-weight: 600;
}

.pro-card__title .material-icons {
	color: var(--primary);
	opacity: 0.9;
}

.crm-page-header,
.unified-page-header {
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES - comfortable scanning
   ══════════════════════════════════════════════════════════════════════════ */

.crm-table-wrap,
.fin-table-wrap,
.acc-table-wrap,
.stock-table-wrap {
	border: 1px solid var(--border-subtle);
	border-radius: var(--card-radius);
	background: var(--ds-surface);
	overflow: hidden;
}

.crm-table thead th,
.fin-table thead th,
.acc-table thead th,
.stock-table thead th,
.table thead th {
	padding: 10px var(--list-row-pad-x);
	font-size: var(--hig-caption);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	background: var(--bg-body);
	border-bottom: 1px solid var(--border-subtle);
}

.crm-table tbody td,
.table tbody td {
	padding: var(--list-row-pad-y) var(--list-row-pad-x);
	border-bottom: 1px solid var(--border-subtle);
	font-size: var(--hig-body);
}

.crm-table tbody tr:hover,
.table tbody tr:hover {
	background: rgba(120, 120, 128, 0.06);
}

[data-theme-resolved='dark'] .crm-table tbody tr:hover,
[data-theme-resolved='dark'] .table tbody tr:hover {
	background: rgba(255, 255, 255, 0.04);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS - segmented control (HIG pattern)
   ══════════════════════════════════════════════════════════════════════════ */

.module-subnav,
.crm-tabs {
	background: rgba(120, 120, 128, 0.12);
	border: none;
	border-radius: 5px;
	padding: 3px;
	gap: 2px;
}

[data-theme-resolved='dark'] .module-subnav,
[data-theme-resolved='dark'] .crm-tabs {
	background: rgba(255, 255, 255, 0.08);
}

.crm-tabs__tab,
.module-subnav__tab,
.module-subnav .loc-tab,
.debt-tab {
	border-radius: 5px;
	font-size: var(--hig-footnote);
	font-weight: 500;
	color: var(--text-secondary);
	border: none;
	padding: 7px 14px;
}

.crm-tabs__tab.active,
.crm-tabs__tab.is-active,
.module-subnav__tab.active,
.debt-tab.active {
	background: var(--ds-surface);
	color: var(--text-main);
	font-weight: 600;
	box-shadow: none;
	border: none;
}

.crm-tabs__tab.active::after,
.module-subnav__tab.active::after {
	display: none;
}

.debt-tabs {
	background: rgba(120, 120, 128, 0.12);
	border: none;
}

.debt-tab.active {
	background: var(--primary);
	color: var(--text-white);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════════════════ */

.dlg_panel {
	border-radius: 5px;
	border: 1px solid var(--border-subtle);
	overflow: hidden;
}

.dlg_head {
	padding: 18px var(--space-md);
	border-bottom: 1px solid var(--border-subtle);
}

.dlg_title {
	font-size: var(--hig-title-3);
	font-weight: 600;
}

.dlg_body {
	padding: var(--space-md);
}

.dlg_foot {
	padding: 14px var(--space-md);
	background: var(--bg-body);
	border-top: 1px solid var(--border-subtle);
}

.dlg_root::backdrop {
	background: var(--bg-overlay);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS - subtle, informative
   ══════════════════════════════════════════════════════════════════════════ */

.form-alert,
.crm-alert,
.ui-alert,
.info-alert {
	border-radius: 5px;
	padding: 12px 14px;
	font-size: var(--hig-footnote);
	border-width: 1px;
}

.form-alert--danger,
.crm-alert--danger {
	color: var(--danger);
	background: var(--danger-light);
	border-color: rgba(var(--danger-rgb), 0.22);
}

.form-alert--success,
.crm-alert--success {
	color: var(--success);
	background: var(--success-light);
	border-color: rgba(var(--success-rgb), 0.22);
}

.form-alert--warning,
.crm-alert--warning {
	color: var(--warning-hover);
	background: var(--warning-light);
	border-color: rgba(var(--warning-rgb), 0.22);
}

.form-alert--info,
.crm-alert--info {
	color: var(--primary);
	background: var(--ds-focus-bg);
	border-color: rgba(var(--primary-rgb), 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES - quiet indicators
   ══════════════════════════════════════════════════════════════════════════ */

.chip,
.crm-badge,
.stock-badge,
.debt-badge {
	font-size: var(--hig-caption);
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 5px;
	border: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONS - SF Symbol-like clarity (Material Icons tuned)
   ══════════════════════════════════════════════════════════════════════════ */

.material-icons {
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}

.btn .material-icons,
.col-actions .material-icons {
	font-size: 17px;
	opacity: 0.92;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION - sidebar
   ══════════════════════════════════════════════════════════════════════════ */

.side_link {
	border-radius: 5px;
	font-size: var(--hig-subhead);
	font-weight: 400;
	color: var(--text-secondary);
}

.side_link:hover {
	background: rgba(120, 120, 128, 0.1);
	color: var(--text-main);
}

.side_link.link_active,
.side_link[aria-current="page"] {
	background: var(--nav-active-bg);
	color: var(--primary);
	font-weight: 600;
	border-left: none;
	padding-left: var(--shell_pad_x);
}

.side_btn_primary {
	border-radius: 5px;
	font-weight: 600;
}

.side_panel {
	border-right: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWNS
   ══════════════════════════════════════════════════════════════════════════ */

.date-filter-popover,
.crm-dropdown__panel {
	border-radius: 5px;
	border: 1px solid var(--border-subtle);
	padding: var(--space-md);
}

.filter-trigger,
.crm-dropdown__trigger {
	border-radius: 5px;
	border: 1px solid var(--input-border);
	background: var(--ds-surface);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */

.pagination a,
.paginator a {
	border-radius: 5px;
	border: 1px solid var(--border-subtle);
	font-size: var(--hig-footnote);
	font-weight: 500;
	min-height: 32px;
}

.pagination li.active a {
	background: var(--primary);
	border-color: var(--primary);
	font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCE VISUAL NOISE - Deference: content first
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .btn:hover,
.main_area .pro-card:hover,
.main_area .debt-row-item:hover,
.main_area .card:hover,
.main_area .dash-card:hover {
	transform: none !important;
	filter: none !important;
	box-shadow: none !important;
}

.debt-row-item,
.debt-sum-card,
.dc-sidebar,
.dc-panel,
.kanban-card {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}

.main_area .unified-page-header,
.main_area .crm-page-header,
.main_area .device-header-row {
	border-bottom: 1px solid var(--border-subtle);
	padding-bottom: var(--space-12);
	margin-bottom: var(--hig-space-section);
}

.main_area .pro-card + .pro-card,
.main_area .crm-section + .crm-section {
	margin-top: var(--hig-space-block);
}

/* HIG focus - soft ring, not harsh outline */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.filter-trigger:focus-visible,
.crm-dropdown__trigger:focus-visible {
	border-color: var(--primary);
	background-color: var(--input-bg);
	outline: none;
	outline-offset: 0;
	box-shadow: none;
}

.form-group:focus-within > label,
.form_item:focus-within > label {
	color: var(--text-secondary);
	font-weight: 500;
}

/* Segmented tabs - hide underline indicators from earlier layers */
.crm-tabs__tab.active::after,
.crm-tabs__tab.is-active::after,
.module-subnav__tab.active::after,
.module-subnav__tab.is-active::after,
.debt-tab.active::after {
	display: none !important;
}

/* Checkbox / radio - rounded HIG feel */
.form-check-input {
	border-radius: 5px;
	border-color: var(--input-border);
}

input[type="radio"]:not(.form-check-input) {
	border-radius: 50%;
}

.device-fatal-chip {
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-subtle);
	font-size: var(--hig-footnote);
	font-weight: 500;
}

.device-fatal-chip.is-active {
	background: var(--ds-focus-bg-strong);
	border-color: rgba(var(--primary-rgb), 0.25);
	color: var(--primary);
}

/* Search / filter - grouped field style */
.main_area .stock-search-form,
.main_area .crm-search-form {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--ds-surface);
}

.main_area .stock-search-form:focus-within,
.main_area .crm-search-form:focus-within {
	border-color: var(--primary);
	outline: none;
	box-shadow: none;
}

/* Toolbar - airy spacing */
.main_area .crm-toolbar,
.main_area .crm-page-header__actions {
	gap: var(--space-sm);
}

/* Toast - quiet, informative */
.crm-toast {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	font-size: var(--hig-footnote);
}

/* Top bar - minimal chrome */
.top_bar {
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-header);
}

.top_toggle {
	border-color: var(--border-subtle);
	border-radius: var(--radius-sm);
}

/* Modal enter - natural deceleration */
.dlg_root[open] .dlg_panel,
.modal:target .modal-content {
	animation: hig-modal-in var(--ds-duration-enter) var(--ds-ease) !important;
}

.dlg_root::backdrop {
	animation: hig-fade-in var(--ds-duration-enter) var(--ds-ease) !important;
}

@keyframes hig-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hig-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Table zebra - whisper-quiet */
.main_area .crm-table tbody tr:nth-child(even),
.main_area .fin-table tbody tr:nth-child(even),
.main_area .acc-table tbody tr:nth-child(even),
.main_area .stock-table tbody tr:nth-child(even) {
	background: rgba(120, 120, 128, 0.03);
}

[data-theme-resolved='dark'] .main_area .crm-table tbody tr:nth-child(even),
[data-theme-resolved='dark'] .main_area .fin-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

/* Icons - light line weight */
.main_area .material-icons,
.shell_content .material-icons,
.side_panel .material-icons,
.dlg_portal .material-icons {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	opacity: 0.94;
}

.btn .material-icons,
.side_btn .material-icons {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	opacity: 1;
}

/* Loading - subtle spinner */
.btn.is-loading::after,
.btn--loading::after {
	border-width: 2px;
	opacity: 0.85;
}

/* Auth - HIG split pane when DS loaded */
.auth-side-panel {
	background: var(--primary) !important;
	border-right: none;
}

.auth-form-panel {
	background: var(--bg-main);
}

.auth-branding h2 {
	font-weight: 700;
	letter-spacing: -0.03em;
}

/* Shell primary CTA */
.side_btn_primary {
	background: var(--primary);
	border-color: transparent;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.side_count {
	background: var(--primary);
	font-size: 11px;
	font-weight: 600;
}

@media (max-width: 576px) {
	.form-control,
	.form-select,
	.btn:not(.btn-xs):not(.btn-icon) {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ================================================================== */
/* Theme - palette bridge */
/* Source: design/ui/palette_bridge.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Palette Bridge (Calm Pro v3)
   Neutralizes legacy hardcoded colors → color.css tokens (no HTML changes)
   FINAL layer in crm-ui.css - wins over modern.css / design-system.css
   ========================================================================== */

/* ── Re-bind Bootstrap to CRM palette (legacy components) ── */
:root,
[data-theme-resolved='light'],
[data-theme-resolved='dark'] {
	--bs-primary: var(--primary);
	--bs-success: var(--success);
	--bs-danger: var(--danger);
	--bs-warning: var(--warning);
	--bs-info: var(--info);
	--bs-body-bg: var(--background);
	--bs-body-color: var(--text-main);
	--bs-border-color: var(--border-color);
	--bs-link-color: var(--text-link);
	--bs-link-hover-color: var(--text-link-hover);
}

/* ── Canvas & shell ── */
body,
.shell_content,
.main_area,
.app-shell__main {
	background: var(--background);
	color: var(--text-main);
}

/* ── Surfaces ── */
.pro-card,
.dash-card,
.dash_card,
.mc_card,
.acc-sum-card,
.ud-card,
.user-panel-card,
.debt-sum-card,
.acc-group,
.dlg_panel,
.modal-content,
.auth-simple__card {
	background: var(--surface);
	border-color: var(--border-color);
	color: var(--text-main);
}

/* ── Tables - structure over color ── */
.crm-table thead th,
.fin-table thead th,
.acc-table thead th,
.stock-table thead th,
.client-table thead th,
.table thead th {
	background: var(--surface-secondary);
	color: var(--text-secondary);
	border-color: var(--border-light);
}

.crm-table tbody tr:hover,
.table tbody tr:hover {
	background: var(--surface-secondary);
}

/* ── Legacy bright blues → primary ── */
.main_area a[style*="color:#4C8BF5"],
.main_area a[style*="color: #4C8BF5"],
.main_area a[style*="color:#007AFF"],
.main_area a[style*="color: #007AFF"],
.main_area span[style*="color:#4C8BF5"],
.main_area span[style*="color:#007AFF"] {
	color: var(--primary) !important;
}

/* ── Legacy tailwind-like status colors → semantic ── */
.main_area [style*="color:#ef4444"],
.main_area [style*="color: #ef4444"],
.main_area [style*="color:#E57373"] {
	color: var(--danger) !important;
}

.main_area [style*="color:#22c55e"],
.main_area [style*="color: #22c55e"],
.main_area [style*="color:#5CB85C"] {
	color: var(--success) !important;
}

.main_area [style*="background:#fff"],
.main_area [style*="background: #fff"],
.main_area [style*="background:#ffffff"],
.main_area [style*="background: #ffffff"],
.main_area [style*="background-color:#fff"],
.main_area [style*="background-color: #fff"] {
	background: var(--surface) !important;
}

.main_area [style*="background: rgba(239, 68, 68"],
.main_area [style*="background:rgba(239, 68, 68"] {
	background: var(--danger-light) !important;
}

.main_area [style*="background: rgba(34, 197, 94"],
.main_area [style*="background:rgba(34, 197, 94"] {
	background: var(--success-light) !important;
}

.main_area [style*="background: rgba(var(--primary-rgb)"],
.main_area [style*="border-color: rgba(var(--primary-rgb)"] {
	/* keep - already token-based */
}

/* ── Bootstrap overrides ── */
.main_area .btn-primary {
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary-hover);
	--bs-btn-hover-border-color: var(--primary-hover);
	--bs-btn-active-bg: var(--primary-dark);
	--bs-btn-active-border-color: var(--primary-dark);
}

.main_area .btn-success {
	--bs-btn-bg: var(--success);
	--bs-btn-border-color: var(--success);
	--bs-btn-hover-bg: var(--success-hover);
}

.main_area .btn-danger {
	--bs-btn-bg: var(--danger);
	--bs-btn-border-color: var(--danger);
	--bs-btn-hover-bg: var(--danger-hover);
}

.main_area .btn-warning {
	--bs-btn-bg: var(--warning);
	--bs-btn-border-color: var(--warning);
	--bs-btn-hover-bg: var(--warning-hover);
}

.main_area .btn-info {
	--bs-btn-bg: var(--info);
	--bs-btn-border-color: var(--info);
	--bs-btn-hover-bg: var(--info-hover);
}

.main_area .text-primary { color: var(--primary) !important; }
.main_area .text-success { color: var(--success) !important; }
.main_area .text-danger { color: var(--danger) !important; }
.main_area .text-warning { color: var(--warning) !important; }
.main_area .text-muted { color: var(--text-muted) !important; }

.main_area .bg-primary { background-color: var(--primary) !important; }
.main_area .bg-light { background-color: var(--surface-secondary) !important; }

/* ── Links ── */
.main_area a:not(.btn):not(.side_btn):not(.crm-tabs__tab):not(.nav-link) {
	color: var(--text-link);
}

.main_area a:not(.btn):hover {
	color: var(--text-link-hover);
}

/* ── Sidebar / header ── */
.sidebar,
.shell_sidebar,
.app-header {
	background: var(--surface);
	border-color: var(--border-light);
}

/* ── Status chips in orders ── */
.chip.danger,
.chip[style*="ef4444"] {
	background: var(--danger-light) !important;
	color: var(--danger) !important;
	border-color: rgba(var(--danger-rgb), 0.22) !important;
}

.chip.success {
	background: var(--success-light) !important;
	color: var(--success) !important;
}

/* ── Debt / accounting accent cards ── */
.debt-sum-card--in,
.debt-sum-card--out,
.debt-sum-card--balance {
	border-color: var(--border-color);
}

/* ── Form error legacy red ── */
.form-error,
.field-error {
	color: var(--danger);
}

/* ── Order status s1–s7 → semantic palette ── */
.bento-status-btn.s1, .status-accent-s1 { color: var(--status-on-solid, #ffffff); background: var(--s1); border-color: rgba(var(--s1-rgb), 0.35); }
.bento-status-btn.s2, .status-accent-s2 { color: var(--status-on-solid, #ffffff); background: var(--s2); border-color: rgba(var(--s2-rgb), 0.35); }
.bento-status-btn.s3, .status-accent-s3 { color: var(--status-on-solid, #ffffff); background: var(--s3); border-color: rgba(var(--s3-rgb), 0.35); }
.bento-status-btn.s4, .status-accent-s4 { color: var(--status-on-solid, #ffffff); background: var(--s4); border-color: rgba(var(--s4-rgb), 0.35); }
.bento-status-btn.s5, .status-accent-s5 { color: var(--status-on-solid, #ffffff); background: var(--s5); border-color: rgba(var(--s5-rgb), 0.35); }
.bento-status-btn.s6, .status-accent-s6 { color: var(--status-on-solid, #ffffff); background: var(--s6); border-color: rgba(var(--s6-rgb), 0.35); }
.bento-status-btn.s7, .status-accent-s7 { color: var(--status-on-solid, #ffffff); background: var(--s7); border-color: rgba(var(--s7-rgb), 0.35); }

.bento-status-btn.s1 .bs-icon,
.bento-status-btn.s2 .bs-icon,
.bento-status-btn.s3 .bs-icon,
.bento-status-btn.s4 .bs-icon,
.bento-status-btn.s5 .bs-icon,
.bento-status-btn.s6 .bs-icon,
.bento-status-btn.s7 .bs-icon,
.bento-status-btn.s1 .bs-icon .material-icons,
.bento-status-btn.s2 .bs-icon .material-icons,
.bento-status-btn.s3 .bs-icon .material-icons,
.bento-status-btn.s4 .bs-icon .material-icons,
.bento-status-btn.s5 .bs-icon .material-icons,
.bento-status-btn.s6 .bs-icon .material-icons,
.bento-status-btn.s7 .bs-icon .material-icons {
	color: var(--status-on-solid, #ffffff);
	background: rgba(255, 255, 255, 0.16);
}

/* ── Alerts / badges - semantic only ── */
.form-alert--success, .crm-alert--success, .ui-alert--success,
.crm-toast--success, .stock-badge.success, .chip.success {
	color: var(--success) !important;
	background: var(--success-light) !important;
	border-color: rgba(var(--success-rgb), 0.22) !important;
}

.form-alert--warning, .crm-alert--warning, .ui-alert--warning,
.crm-toast--warning, .stock-badge.warning, .chip.warning {
	color: var(--warning-hover) !important;
	background: var(--warning-light) !important;
	border-color: rgba(var(--warning-rgb), 0.22) !important;
}

.form-alert--danger, .crm-alert--danger, .ui-alert--danger,
.crm-toast--danger, .stock-badge.danger, .chip.danger {
	color: var(--danger) !important;
	background: var(--danger-light) !important;
	border-color: rgba(var(--danger-rgb), 0.22) !important;
}

.form-alert--info, .crm-alert--info, .ui-alert--info,
.crm-toast--info, .info-alert {
	color: var(--info) !important;
	background: var(--info-light) !important;
	border-color: rgba(var(--info-rgb), 0.22) !important;
}

/* ── Buttons - restrained accent ── */
.main_area .btn-primary,
.side_btn_primary,
.shell_content .btn-primary {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--text-white) !important;
}

.main_area .btn-primary:hover:not(:disabled),
.side_btn_primary:hover {
	background: var(--primary-hover) !important;
	border-color: var(--primary-hover) !important;
}

.main_area .btn-success { background: var(--success) !important; border-color: var(--success) !important; }
.main_area .btn-danger  { background: var(--danger) !important; border-color: var(--danger) !important; }
.main_area .btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: var(--text-white) !important; }
.main_area .btn-info    { background: var(--info) !important; border-color: var(--info) !important; }

/* ── Inputs - neutral surfaces (background-color only - never background: shorthand on selects) ── */
.main_area .form-control,
.dlg_portal .form-control {
	background-color: var(--input-bg) !important;
	border-color: var(--input-border, var(--border-color)) !important;
	color: var(--text-main) !important;
}

.main_area .form-select,
.main_area select.form-control,
.dlg_portal .form-select,
.dlg_portal select.form-control {
	background-color: var(--input-bg) !important;
	border-color: var(--input-border, var(--border-color)) !important;
	color: var(--text-main) !important;
}

/* ── More legacy inline hex overrides ── */
.main_area [style*="#4C8BF5"],
.main_area [style*="#4c8bf5"],
.main_area [style*="#007AFF"],
.main_area [style*="#007aff"],
.main_area [style*="#2196F3"],
.main_area [style*="#3b82f6"] {
	color: var(--primary) !important;
}

.main_area [style*="background:#4C8BF5"],
.main_area [style*="background: #4C8BF5"],
.main_area [style*="background-color:#4C8BF5"] {
	background: var(--primary) !important;
}

.main_area [style*="#10b981"],
.main_area [style*="#22c55e"],
.main_area [style*="#5CB85C"] {
	color: var(--success) !important;
}

.main_area [style*="#f59e0b"],
.main_area [style*="#E8A838"] {
	color: var(--warning) !important;
}

/* ── Social brand colors (isolated - not UI accent) ── */
.btn-social--viber, .btn-viber { color: var(--viber) !important; background: var(--viber-light) !important; }
.btn-social--telegram, .btn-telegram { color: var(--telegram) !important; background: var(--telegram-light) !important; }
.btn-social--whatsapp, .btn-whatsapp { color: var(--whatsapp) !important; background: var(--whatsapp-light) !important; }

/* ── Canvas enforcement ── */
body,
.shell_content,
.main_area,
.app-shell__main,
.auth-form-panel {
	background: var(--background) !important;
	color: var(--text-main);
}

.side_panel,
.top_bar,
.dlg_panel,
.pro-card,
.crm-table-wrap {
	background: var(--surface);
	border-color: var(--border-color);
}

/* ── Print pages excluded ── */
@media print {
	.main_area [style] {
		color: inherit !important;
		background: transparent !important;
	}
}


/* ================================================================== */
/* Theme - color enforcement v4 */
/* Source: design/ui/color_enforcement.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Color Enforcement (Studio Calm v4)
   Neutralizes legacy theme blocks (aurora, command-center, gradients).
   Layout unchanged - colors only. Load after palette_bridge / flat_theme.
   ========================================================================== */

/* ── Legacy theme variable blocks → semantic tokens ── */
:root {
	--accent-indigo: var(--primary);
	--accent-indigo-glow: rgba(var(--primary-rgb), 0.12);
	--deep-slate: var(--gray-800);
	--success-glow: rgba(var(--success-rgb), 0.12);
	--warning-glow: rgba(var(--warning-rgb), 0.12);
	--danger-glow: rgba(var(--danger-rgb), 0.12);
	--shadow-layered: none;
	--accent-aurora: var(--primary);
	--b-bg: var(--surface);
	--slate-900: var(--navy-dark);
	--slate-800: var(--gray-800);
	--indigo-500: var(--primary);
	--aurora-bg: var(--background);
}

/* ── Order / device detail legacy blocks ── */
.main_area #order-overhaul {
	background: var(--background) !important;
}

.main_area .order-hero-banner,
.main_area .premium-card,
.main_area .order-id-badge {
	box-shadow: none !important;
	border-color: var(--border-color) !important;
}

.main_area .glass-gradient,
.main_area .analytics-module,
.main_area .client-dossier {
	background: var(--surface) !important;
	color: var(--text-main) !important;
}

.main_area .m-progress-fill {
	background: var(--primary) !important;
	box-shadow: none !important;
}

.main_area .m-progress-bg {
	background: var(--surface-secondary) !important;
}

.main_area .status-glass-pill {
	background: var(--surface-secondary) !important;
	border-color: var(--border-color) !important;
	box-shadow: none !important;
	color: var(--text-main) !important;
}

.main_area .status-glass-pill.s4,
.main_area .status-glass-pill.s6 {
	border-color: var(--success) !important;
	box-shadow: none !important;
}

.main_area .p-avatar {
	background: var(--surface-secondary) !important;
	color: var(--primary) !important;
	border-color: var(--border-color) !important;
}

.main_area .analytics-module .m-label {
	color: var(--text-muted) !important;
}

.main_area .analytics-module .m-val {
	color: var(--text-main) !important;
	text-shadow: none !important;
}

/* ── Kill neon gradients in content area ── */
.main_area [style*="linear-gradient"],
.main_area [style*="radial-gradient"] {
	background: var(--surface) !important;
}

/* ── Debt / accounting KPI cards - neutral surfaces ── */
.main_area .debt-sum-card,
.main_area .acc-sum-card,
.main_area .dash-kpi,
.main_area .mc-kpi {
	border-color: var(--border-color) !important;
	box-shadow: none !important;
}

/* ── Kanban / bento - semantic status only ── */
.main_area .bento-status-btn,
.main_area .device-status-chip {
	box-shadow: none !important;
}

/* ── Tables: structure over color ── */
.main_area .crm-table tbody tr:nth-child(even),
.main_area .stats_table tbody tr:nth-child(even) {
	background: transparent;
}

.main_area .crm-table tbody tr:hover,
.main_area .stats_table tbody tr:hover {
	background: var(--surface-secondary) !important;
}

/* ── Dark theme parity ── */
[data-theme-resolved='dark'] .main_area .glass-gradient,
[data-theme-resolved='dark'] .main_area .analytics-module {
	background: var(--surface) !important;
}

[data-theme-resolved='dark'] .main_area .order-id-badge,
[data-theme-resolved='dark'] .main_area .p-avatar {
	background: var(--surface-secondary) !important;
}


/* ================================================================== */
/* Dashboard */
/* Source: modules/dashboard/styles/stats_shared.css */
/* ================================================================== */
/**
 * Спільний дизайн-стандарт для Dashboard та «Моя каса».
 * KPI-сітка, картки, період, фільтр дат, секції, таблиці, тренди.
 */

/* ── Tokens (єдині для обох модулів) ── */
#dashboard.dash_page,
#my_cash.mc_page,
#analytics.analytics_page {
	--stats_gap: 10px;
	--stats_card_radius: 5px;
	--stats_card_pad: 10px;
	--stats_icon: 32px;
	--stats_icon_font: 18px;
	--stats_value: 1.75rem;
	--stats_filter_btn: 30px;
	--stats_popover_w: 280px;
	--stats_z_filter: 1000;
}

#dashboard.dash_page {
	--dash_gap: var(--stats_gap);
	--dash_card_radius: var(--stats_card_radius);
	--dash_card_pad: var(--stats_card_pad);
	--dash_icon: var(--stats_icon);
	--dash_icon_font: var(--stats_icon_font);
	--dash_value: var(--stats_value);
	--dash_filter_btn: var(--stats_filter_btn);
	--dash_popover_w: var(--stats_popover_w);
	--dash_z_filter: var(--stats_z_filter);
}

#my_cash.mc_page {
	--mc_gap: var(--stats_gap);
	--mc_card_radius: var(--stats_card_radius);
	--mc_card_pad: var(--stats_card_pad);
	--mc_icon: var(--stats_icon);
	--mc_icon_font: var(--stats_icon_font);
	--mc_value: var(--stats_value);
	--mc_filter_btn: var(--stats_filter_btn);
	--mc_popover_w: var(--stats_popover_w);
	--mc_z_filter: var(--stats_z_filter);
}

@media (max-width: 768px) {
	#dashboard.dash_page,
	#my_cash.mc_page {
		--stats_value: 1.5rem;
	}
}

/* ── Page shell ── */
#dashboard.dash_page,
#my_cash.mc_page,
#analytics.analytics_page {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* ── Period label (plain text, не chip) ── */
.stats-period-text,
#dashboard .dash_period_chip, #analytics .dash_period_chip,
#my_cash .mc_period_chip, #analytics .mc_period_chip {
	font-size: var(--font-caption, 0.8125rem);
	font-weight: var(--font-weight-medium, 500);
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	border-radius: 0;
	display: inline;
}

.stats-period-text--danger,
#dashboard .dash_period_chip--danger, #analytics .dash_period_chip--danger,
#my_cash .mc_period_chip--danger, #analytics .mc_period_chip--danger {
	color: var(--danger);
	font-weight: var(--font-weight-medium, 500);
}

.stats-period-hint,
#dashboard .dash_period_hint, #analytics .dash_period_hint,
#my_cash .mc_period_hint, #analytics .mc_period_hint {
	font-size: var(--font-caption, 0.8125rem);
	color: var(--text-muted);
	line-height: 1.5;
	font-weight: var(--font-weight-normal, 400);
}

/* Legacy period bar (не використовується після crm_content_head) */
#dashboard .dash_period_bar, #analytics .dash_period_bar,
#my_cash .mc_period_bar, #analytics .mc_period_bar {
	display: none;
}

/* ── KPI grid ── */
#dashboard .dash_grid, #analytics .dash_grid,
#my_cash .mc_grid, #analytics .mc_grid,
#analytics .dash_grid,
#analytics .mc_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--stats_gap);
	margin-bottom: var(--stats_gap);
}

/* ── KPI cards (base) ── */
#dashboard .dash_card, #analytics .dash_card,
#my_cash .mc_card, #analytics .mc_card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--stats_card_radius);
	padding: var(--stats_card_pad);
	display: flex;
	flex-direction: column;
	min-height: 118px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
	overflow: hidden;
}

#dashboard .dash_card:hover, #analytics .dash_card:hover,
#my_cash .mc_card:hover, #analytics .mc_card:hover {
	border-color: var(--primary);
	box-shadow: 0 10px 25px -5px var(--overlay-bg, rgba(0, 0, 0, 0.08));
}

#dashboard .dash_card_head, #analytics .dash_card_head,
#my_cash .mc_card_head, #analytics .mc_card_head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

#dashboard .dash_card_title, #analytics .dash_card_title,
#my_cash .mc_card_title, #analytics .mc_card_title {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin: 0;
	line-height: 1.2;
}

#dashboard .dash_card_icon, #analytics .dash_card_icon,
#my_cash .mc_card_icon, #analytics .mc_card_icon {
	width: var(--stats_icon);
	height: var(--stats_icon);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#dashboard .dash_card_icon, #analytics .dash_card_icon .material-icons,
#my_cash .mc_card_icon, #analytics .mc_card_icon .material-icons {
	font-size: var(--stats_icon_font);
}

#dashboard .dash_card_value, #analytics .dash_card_value,
#my_cash .mc_card_value, #analytics .mc_card_value {
	font-size: var(--stats_value);
	font-weight: 800;
	color: var(--text-main);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1.1;
	margin: 0 0 auto 0;
}

#dashboard .dash_card_value, #analytics .dash_card_value small,
#my_cash .mc_card_value, #analytics .mc_card_value small {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 500;
}

#dashboard .dash_card_desc, #analytics .dash_card_desc,
#my_cash .mc_card_desc, #analytics .mc_card_desc {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin: 12px 0 0 0;
	line-height: 1.45;
	padding-top: 10px;
	border-top: 1px dashed var(--border-color);
}

/* Семантичні кольори KPI (спільні) */
#dashboard .dash_card--revenue, #analytics .dash_card--revenue .dash_card_icon,
#my_cash .mc_card--revenue, #analytics .mc_card--revenue .mc_card_icon {
	background: var(--success-light);
	color: var(--success);
}

#dashboard .dash_card--costs, #analytics .dash_card--costs .dash_card_icon,
#my_cash .mc_card--costs, #analytics .mc_card--costs .mc_card_icon {
	background: var(--danger-light);
	color: var(--danger);
}

#dashboard .dash_card--discounts, #analytics .dash_card--discounts .dash_card_icon,
#my_cash .mc_card--discounts, #analytics .mc_card--discounts .mc_card_icon {
	background: var(--warning-light, rgba(var(--warning-rgb), 0.15));
	color: var(--warning);
}

#dashboard .dash_card--profit, #analytics .dash_card--profit .dash_card_icon,
#my_cash .mc_card--profit, #analytics .mc_card--profit .mc_card_icon,
#dashboard .dash_card--margin, #analytics .dash_card--margin .dash_card_icon,
#my_cash .mc_card--margin, #analytics .mc_card--margin .mc_card_icon {
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
}

#dashboard .dash_card--profit, #analytics .dash_card--profit,
#my_cash .mc_card--profit, #analytics .mc_card--profit,
#my_cash .mc_card--owner, #analytics .mc_card--owner,
#my_cash .mc_card--development, #analytics .mc_card--development {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent);
	border-color: rgba(var(--primary-rgb), 0.2);
}

#dashboard .dash_card--aov, #analytics .dash_card--aov .dash_card_icon,
#my_cash .mc_card--aov, #analytics .mc_card--aov .mc_card_icon {
	background: rgba(var(--s2-rgb), 0.12);
	color: var(--s2);
}

#my_cash .mc_card--pay_cash, #analytics .mc_card--pay_cash .mc_card_icon,
#dashboard .dash_card--pay_cash, #analytics .dash_card--pay_cash .dash_card_icon {
	background: var(--success-light);
	color: var(--success);
}

#my_cash .mc_card--pay_card, #analytics .mc_card--pay_card .mc_card_icon {
	background: var(--info-light);
	color: var(--info);
}

#my_cash .mc_card--pay_terminal, #analytics .mc_card--pay_terminal .mc_card_icon {
	background: rgba(var(--s2-rgb), 0.15);
	color: var(--s2);
}

/* ── Trend badges ── */
#dashboard .dash_trend, #analytics .dash_trend,
#my_cash .mc_trend, #analytics .mc_trend {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 6px;
	font-weight: 700;
	font-size: 0.6rem;
	padding: 2px 6px;
	border-radius: 5px;
	gap: 2px;
}

#dashboard .dash_trend, #analytics .dash_trend .material-icons,
#my_cash .mc_trend, #analytics .mc_trend .material-icons {
	font-size: 10px;
}

#dashboard .dash_trend--neutral, #analytics .dash_trend--neutral,
#my_cash .mc_trend--neutral, #analytics .mc_trend--neutral {
	background: var(--border-subtle);
	color: var(--text-muted);
}

#dashboard .dash_trend--up, #analytics .dash_trend--up,
#my_cash .mc_trend--up, #analytics .mc_trend--up {
	background: rgba(var(--success-rgb), 0.1);
	color: var(--success);
}

#dashboard .dash_trend--down, #analytics .dash_trend--down,
#my_cash .mc_trend--down, #analytics .mc_trend--down {
	background: rgba(var(--danger-rgb), 0.1);
	color: var(--danger);
}

/* Date filter → design/ui/crm_date_filter.css (.crm-date-filter) */

/* ── Sections & tables ── */
#dashboard .dash_section, #analytics .dash_section,
#my_cash .mc_section, #analytics .mc_section {
	margin-top: calc(var(--gap) * 2);
}

#dashboard .dash_section_desc, #analytics .dash_section_desc,
#my_cash .mc_section_desc, #analytics .mc_section_desc {
	font-size: 0.8125rem;
	line-height: 1.45;
	margin: 0 0 12px 0;
	color: var(--text-muted);
}

#dashboard .crm-table-wrap,
#my_cash .crm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 4px;
}

/* Metrics tables: колонки - глобальний стандарт у design-system.css (.stats_col_main / .stats_col_num) */
#dashboard .dash_table, #analytics .dash_table.stats_table td strong,
#my_cash .mc_table, #analytics .mc_table.stats_table td strong {
	font-weight: 700;
	color: var(--text-main);
}

/* ── Responsive (KPI / tables; шапка → tabs_core.css) ── */
@media (max-width: 768px) {
	#dashboard .crm-content-head .crm-page-title,
	#my_cash .crm-content-head .crm-page-title {
		font-size: var(--font-title, 1.25rem) !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#dashboard .dash_grid, #analytics .dash_grid,
	#my_cash .mc_grid, #analytics .mc_grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	#dashboard .dash_card, #analytics .dash_card,
	#my_cash .mc_card, #analytics .mc_card {
		min-height: 108px;
	}

	#dashboard .dash_period_hint, #analytics .dash_period_hint,
	#my_cash .mc_period_hint, #analytics .mc_period_hint {
		font-size: 0.75rem;
		width: 100%;
	}
}

@media (max-width: 480px) {
	#dashboard .dash_grid, #analytics .dash_grid,
	#my_cash .mc_grid, #analytics .mc_grid {
		gap: 10px;
	}
}


/* ================================================================== */
/* Dashboard - core */
/* Source: modules/dashboard/styles/dashboard_core.css */
/* ================================================================== */
/**
 * Dashboard module - специфічні стилі (аналітика, графіки).
 * Спільний стандарт KPI/таблиць/фільтра: css/stats_shared.css
 */

#dashboard .dash_grid--analytics, #analytics .dash_grid--analytics {
	margin-top: var(--dash_gap);
}

#dashboard .dash_card_value--accent, #analytics .dash_card_value--accent {
	color: var(--primary);
}

#dashboard .dash_card_value--conf-high, #analytics .dash_card_value--conf-high { color: var(--success); }
#dashboard .dash_card_value--conf-mid, #analytics .dash_card_value--conf-mid { color: var(--warning); }
#dashboard .dash_card_value--conf-low, #analytics .dash_card_value--conf-low { color: var(--danger); }

#dashboard .dash_card--orders .dash_card_icon, #analytics .dash_card--orders .dash_card_icon { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); }
#dashboard .dash_card--clients .dash_card_icon, #analytics .dash_card--clients .dash_card_icon { background: var(--info-light); color: var(--info); }
#dashboard .dash_card--efficiency .dash_card_icon, #analytics .dash_card--efficiency .dash_card_icon { background: var(--success-light); color: var(--success); }
#dashboard .dash_card--refusals .dash_card_icon, #analytics .dash_card--refusals .dash_card_icon { background: var(--danger-light); color: var(--danger); }
#dashboard .dash_card--time .dash_card_icon, #analytics .dash_card--time .dash_card_icon { background: rgba(var(--s2-rgb), 0.15); color: var(--s2); }

/* ── Analytics & chart ── */
#dashboard .dash_analytics, #analytics .dash_analytics {
	margin-top: calc(var(--gap) * 2);
	margin-bottom: calc(var(--gap) * 2);
}

#dashboard .dash_chart_card, #analytics .dash_chart_card {
	background: var(--bg-card);
	border-radius: var(--card-radius, 5px);
	padding: var(--gap);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

#dashboard .dash_chart_head, #analytics .dash_chart_head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--gap);
	padding-bottom: var(--gap);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--gap);
}

#dashboard .dash_chart_meta, #analytics .dash_chart_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#dashboard .dash_chart_badge, #analytics .dash_chart_badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--primary-gradient, var(--primary));
	color: var(--text-white, #fff);
	border-radius: var(--radius-full, 9999px);
	font-size: var(--font-micro, 0.75rem);
	font-weight: 700;
}

#dashboard .dash_chart_badge--muted, #analytics .dash_chart_badge--muted {
	background: var(--bg-body);
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	box-shadow: none;
}

#dashboard .dash_chart_badge .material-icons, #analytics .dash_chart_badge .material-icons {
	font-size: 16px;
}

#dashboard .dash_chart_stats, #analytics .dash_chart_stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	font-size: var(--font-caption, 0.8125rem);
	color: var(--text-muted);
}

#dashboard .dash_chart_stat strong, #analytics .dash_chart_stat strong {
	color: var(--text-main);
	font-weight: 800;
}

#dashboard .dash_chart_box, #analytics .dash_chart_box {
	width: 100%;
	height: var(--dash_chart_h);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 48px 8px 8px;
	background: var(--bg-body);
	border-radius: var(--radius-md, 5px);
	border: 1px solid var(--border-subtle);
	overflow: hidden;
}

#dashboard .dash_chart_gradient, #analytics .dash_chart_gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(var(--primary-rgb), 0.04) 100%);
	pointer-events: none;
	z-index: 1;
}

#dashboard .dash_chart_grid, #analytics .dash_chart_grid {
	position: absolute;
	inset: 48px 8px calc(var(--dash-chart-label-h, 28px) + 12px);
	pointer-events: none;
	z-index: 0;
}

#dashboard .dash_chart_grid_line, #analytics .dash_chart_grid_line {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border-color);
	opacity: 0.45;
}

#dashboard .dash_chart_avg_line, #analytics .dash_chart_avg_line {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 0;
	border-top: 2px dashed var(--warning);
	z-index: 2;
	pointer-events: none;
	opacity: 0.85;
	bottom: var(--avg-line-bottom, 0%);
}

#dashboard .dash_chart_avg_label, #analytics .dash_chart_avg_label {
	position: absolute;
	right: 0;
	top: -22px;
	font-size: 10px;
	font-weight: 700;
	color: var(--warning);
	background: var(--bg-card);
	padding: 2px 8px;
	border-radius: 5px;
	border: 1px solid rgba(var(--warning-rgb), 0.25);
	white-space: nowrap;
}

#dashboard .dash_chart_bars, #analytics .dash_chart_bars {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	gap: 4px;
	position: relative;
	z-index: 3;
	padding-bottom: 0;
}

#dashboard .dash_chart_col, #analytics .dash_chart_col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	height: 100%;
	min-height: 0;
	gap: 0;
}

#dashboard .dash_chart_col_plot, #analytics .dash_chart_col_plot {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	position: relative;
}

#dashboard .dash_chart_bar, #analytics .dash_chart_bar {
	width: 100%;
	max-width: 28px;
	min-height: 4px;
	height: 0;
	border-radius: 5px 5px 5px 5px;
	position: relative;
	cursor: help;
	flex-shrink: 0;
	transition: filter 0.15s ease, transform 0.15s ease;
}

#dashboard .dash_chart_bar--history, #analytics .dash_chart_bar--history {
	background: linear-gradient(to top, var(--primary), var(--primary-light, var(--primary)));
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

#dashboard .dash_chart_bar--forecast, #analytics .dash_chart_bar--forecast {
	background: linear-gradient(to top, var(--info), #93c5fd);
	box-shadow: 0 4px 12px rgba(var(--info-rgb), 0.2);
	opacity: 0.92;
}

#dashboard.dash_chart_ready .dash_chart_bar--main,
#analytics.dash_chart_ready .dash_chart_bar--main {
	animation: dashBarGrow 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
	animation-delay: calc(var(--stagger-index, 0) * 0.04s);
}

#dashboard .dash_chart_month--sparse,
#analytics .dash_chart_month--sparse {
	visibility: hidden;
}

@keyframes dashBarGrow {
	from { height: 0; opacity: 0.3; }
	to { height: var(--bar-height); opacity: 1; }
}

#dashboard .dash_chart_bar:hover,
#analytics .dash_chart_bar:hover {
	filter: brightness(1.08);
	transform: scaleY(1.02);
	transform-origin: bottom;
}

#dashboard .dash_chart_bar_value, #analytics .dash_chart_bar_value {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 800;
	color: var(--text-muted);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

#dashboard .dash_chart_bar:hover .dash_chart_bar_value,
#analytics .dash_chart_bar:hover .dash_chart_bar_value {
	opacity: 1;
}

#dashboard .dash_chart_month, #analytics .dash_chart_month {
	flex: 0 0 var(--dash-chart-label-h, 28px);
	height: var(--dash-chart-label-h, 28px);
	min-height: var(--dash-chart-label-h, 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted);
	text-align: center;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#dashboard .dash_chart_legend, #analytics .dash_chart_legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	flex: 0 0 auto;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--font-micro, 0.75rem);
	color: var(--text-muted);
	font-weight: 600;
}

#dashboard .dash_chart_forecast_mark, #analytics .dash_chart_forecast_mark {
	color: var(--info);
	font-weight: 900;
}

#dashboard .dash_chart_marker, #analytics .dash_chart_marker {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#dashboard .dash_chart_marker .material-icons, #analytics .dash_chart_marker .material-icons {
	font-size: 14px;
}

#dashboard .dash_chart_marker--min, #analytics .dash_chart_marker--min {
	background: var(--danger-light);
	color: var(--danger);
}

#dashboard .dash_chart_marker--max, #analytics .dash_chart_marker--max {
	background: var(--success-light);
	color: var(--success);
}

#dashboard .dash_chart_legend_item, #analytics .dash_chart_legend_item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#dashboard .dash_chart_dot, #analytics .dash_chart_dot {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	display: inline-block;
}

#dashboard .dash_chart_dot--history, #analytics .dash_chart_dot--history {
	background: linear-gradient(to top, var(--primary), var(--primary-light, var(--primary)));
}

#dashboard .dash_chart_dot--forecast, #analytics .dash_chart_dot--forecast {
	background: linear-gradient(to top, var(--info), #93c5fd);
}

/* ── Responsive (лише графіки) ── */
@media (max-width: 768px) {
	#dashboard .dash_chart_bar, #analytics .dash_chart_bar {
		max-width: 18px;
	}

	#dashboard .dash_chart_month, #analytics .dash_chart_month {
		font-size: 9px;
	}

	#dashboard .dash_chart_bar_value, #analytics .dash_chart_bar_value {
		display: none;
	}

	#dashboard .dash_chart_stats, #analytics .dash_chart_stats {
		width: 100%;
	}
}

@media (max-width: 480px) {
	#dashboard .dash_chart_month, #analytics .dash_chart_month {
		font-size: 8px;
	}
}

/* ------------------------------------------------------------------ */
/* Client interaction tracking widget                                  */
/* ------------------------------------------------------------------ */

#dashboard .dash_track_widget, #analytics .dash_track_widget {
	margin: 20px 0 28px;
	padding: 18px 18px 16px;
	border: 1px solid var(--border-subtle);
	border-radius: 5px;
	background: var(--ds-surface);
	box-shadow: var(--shadow-xs);
}

#dashboard .dash_track_widget__head, #analytics .dash_track_widget__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

#dashboard .dash_track_widget__title, #analytics .dash_track_widget__title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-heading);
}

#dashboard .dash_track_widget__title .material-icons, #analytics .dash_track_widget__title .material-icons {
	font-size: 20px;
	opacity: 0.8;
	color: var(--text-muted);
}

#dashboard .dash_track_widget__period, #analytics .dash_track_widget__period {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 9999px;
	background: var(--surface-secondary);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

#dashboard .dash_track_grid, #analytics .dash_track_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

#dashboard .dash_track_grid--4, #analytics .dash_track_grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

#dashboard .dash_track_card, #analytics .dash_track_card {
	padding: 14px 14px 12px;
	border: 1px solid var(--border-subtle);
	border-radius: 5px;
	background: var(--surface-secondary);
}

#dashboard .dash_track_card__label, #analytics .dash_track_card__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
}

#dashboard .dash_track_card__label .material-icons, #analytics .dash_track_card__label .material-icons {
	font-size: 16px;
	color: var(--text-muted);
}

#dashboard .dash_track_card__value, #analytics .dash_track_card__value {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-heading);
}

@media (max-width: 1100px) {
	#dashboard .dash_track_grid--4, #analytics .dash_track_grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	#dashboard .dash_track_grid, #analytics .dash_track_grid,
	#dashboard .dash_track_grid--4, #analytics .dash_track_grid--4 {
		grid-template-columns: 1fr;
	}
}

/* Order card: client interaction stats */
.device-track-card .device-side-card__title {
	margin-bottom: 12px;
}

.device-track-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.device-track-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 10px;
	border: 1px solid var(--border-subtle);
	border-radius: 5px;
	background: var(--surface-secondary);
	min-width: 0;
}

.device-track-item__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: var(--surface-elevated);
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary);
}

.device-track-item__icon .material-icons {
	font-size: 18px;
	line-height: 1;
}

.device-track-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.device-track-item__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-muted);
	text-transform: none;
	letter-spacing: 0;
	word-break: break-word;
}

.device-track-item__value {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-main);
	word-break: break-word;
}

.device-track-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
	text-align: left;
}

.device-track-badge--ok {
	background: var(--success-light);
	color: var(--success);
}

.device-track-badge--muted {
	background: var(--gray-100);
	color: var(--text-muted);
}


/* ================================================================== */
/* Analytics / Top-10 */
/* Source: modules/top10/styles/top10.css */
/* ================================================================== */
/* Top-10 Analytics - premium responsive flex cards (scoped #top10) */

#top10.top10_page, #analytics.analytics_page {
	--top10-gap: 10px;
	--top10-card-pad: 10px;
	--top10-card-radius: 5px;
	--top10-card-border: #e5e7eb;
	--top10-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	--top10-title-color: #111827;
	--top10-row-border: #f3f4f6;
	--top10-money-color: #059669;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* ── Grid: 3 / 2 / 1 columns ── */
#top10 .top10_grid, #analytics .top10_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--top10-gap);
	margin-top: var(--top10-gap);
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

#top10 .top10-panel--wide, #analytics .top10-panel--wide {
	grid-column: 1 / -1;
}

/* ── Weekly load - compact bar chart ── */
#top10 .top10-weekly--compact .top10-panel__head, #analytics .top10-weekly--compact .top10-panel__head {
	margin-bottom: 10px;
}

#top10 .top10-weekly-compact, #analytics .top10-weekly-compact {
	width: 100%;
	min-width: 0;
}

#top10 .top10-weekly-compact__bars, #analytics .top10-weekly-compact__bars {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	align-items: end;
	min-height: 88px;
}

#top10 .top10-weekly-compact__col, #analytics .top10-weekly-compact__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

#top10 .top10-weekly-compact__val, #analytics .top10-weekly-compact__val {
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
}

#top10 .top10-weekly-compact__col--peak .top10-weekly-compact__val, #analytics .top10-weekly-compact__col--peak .top10-weekly-compact__val {
	color: var(--primary, #4c8bf5);
}

#top10 .top10-weekly-compact__bar-wrap, #analytics .top10-weekly-compact__bar-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 2px;
}

#top10 .top10-weekly-compact__bar, #analytics .top10-weekly-compact__bar {
	width: 100%;
	max-width: 28px;
	min-height: 4px;
	border-radius: 5px 5px 5px 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.35);
	transition: height 0.2s ease;
}

#top10 .top10-weekly-compact__col--peak .top10-weekly-compact__bar, #analytics .top10-weekly-compact__col--peak .top10-weekly-compact__bar {
	background: var(--primary, #4c8bf5);
}

#top10 .top10-weekly-compact__day, #analytics .top10-weekly-compact__day {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--text-secondary, #4b5563);
}

#top10 .top10-weekly-compact__col--peak .top10-weekly-compact__day, #analytics .top10-weekly-compact__col--peak .top10-weekly-compact__day {
	color: var(--primary, #4c8bf5);
}

/* ── Card shell ── */
#top10 .top10-panel, #analytics .top10-panel {
	margin-top: 0;
	background: var(--bg-card, #fff);
	border: 1px solid var(--top10-card-border);
	border-radius: var(--top10-card-radius);
	padding: var(--top10-card-pad);
	box-shadow: var(--top10-card-shadow);
	min-width: 0;
	box-sizing: border-box;
}

#top10 .top10-panel__head,
#analytics .top10-panel__head {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--top10-gap, 10px);
	margin-bottom: var(--top10-gap, 10px);
	min-width: 0;
}

#top10 .top10-panel__icon, #analytics .top10-panel__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.1);
	color: var(--primary, #4c8bf5);
	font-size: 22px;
}

#top10 .top10-panel__title, #analytics .top10-panel__title,
#top10 .top10-panel, #analytics .top10-panel .unified-section-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--top10-title-color);
	text-transform: none;
	letter-spacing: -0.01em;
}

#top10 .top10-panel__desc, #analytics .top10-panel__desc,
#top10 .top10-panel, #analytics .top10-panel .dash_section_desc {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-muted, #6b7280);
}

/* ── Flex list rows ── */
#top10 .top10-list, #analytics .top10-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#top10 .top10-list__item,
#analytics .top10-list__item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--top10-gap, 10px);
	padding: 10px 0;
	border-bottom: 1px solid var(--top10-row-border);
	min-width: 0;
}

#top10 .top10-list__item:last-child,
#analytics .top10-list__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

#top10 .top10-list__item:first-child,
#analytics .top10-list__item:first-child {
	padding-top: 0;
}

#top10 .top10-list__item--empty, #analytics .top10-list__item--empty {
	justify-content: center;
	padding: 24px 0;
	border-bottom: none;
	color: var(--text-muted, #6b7280);
	font-size: 14px;
}

#top10 .top10-list__item--checks, #analytics .top10-list__item--checks {
	align-items: flex-start;
}

/* ── Rank badges ── */
#top10 .top10-rank, #analytics .top10-rank {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #6b7280;
	background: #f3f4f6;
}

#top10 .top10-rank--gold, #analytics .top10-rank--gold {
	color: #854d0e;
	background: #fef08a;
}

#top10 .top10-rank--silver, #analytics .top10-rank--silver {
	color: #374151;
	background: #e5e7eb;
}

#top10 .top10-rank--bronze, #analytics .top10-rank--bronze {
	color: #9a3412;
	background: #fed7aa;
}

/* ── Name / value ── */
#top10 .top10-list__main,
#analytics .top10-list__main {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

#top10 .top10-list__name, #analytics .top10-list__name,
#top10 .top10-list__link, #analytics .top10-list__link {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-main, #111827);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

#top10 .top10-list__link, #analytics .top10-list__link:hover {
	color: var(--primary, #4c8bf5);
	text-decoration: underline;
}

#top10 .top10-list__value, #analytics .top10-list__value {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-main, #111827);
	text-align: right;
	white-space: nowrap;
}

#top10 .top10-list__value--money, #analytics .top10-list__value--money {
	font-weight: 600;
	color: var(--top10-money-color);
}

#top10 .top10-list__value, #analytics .top10-list__value small {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.85;
}

/* ── Record checks row ── */
#top10 .top10-list__main--checks,
#analytics .top10-list__main--checks {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
}

#top10 .top10-list__checks-order,
#analytics .top10-list__checks-order {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
}

#top10 .top10-list__checks-meta, #analytics .top10-list__checks-meta {
	font-size: 13px;
	line-height: 1.35;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#top10 .top10-list__checks-model, #analytics .top10-list__checks-model {
	color: var(--text-secondary, #4b5563);
}

#top10 .top10-list__sep, #analytics .top10-list__sep {
	opacity: 0.5;
	user-select: none;
}

#top10 .device-status-chip, #analytics .device-status-chip {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 9999px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	#top10.top10_page,
	#analytics.analytics_page {
		--top10-card-pad: 10px;
		--top10-gap: 10px;
	}

	#top10 .top10_grid,
	#analytics .top10_grid {
		grid-template-columns: 1fr;
	}

	#top10 .top10-list__item,
	#analytics .top10-list__item {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}

	#top10 .top10-list__item--checks,
	#analytics .top10-list__item--checks {
		align-items: center;
	}

	#top10 .top10-list__value,
	#analytics .top10-list__value {
		font-size: 14px;
		flex: 0 0 auto;
		width: auto;
	}

	#top10 .top10-list__value--money,
	#analytics .top10-list__value--money {
		font-weight: 700;
	}
}

/* ================================================================== */
/* Analytics - theme tokens */
/* Source: modules/analytics/styles/analytics_theme.css */
/* ================================================================== */
/**
 * Analytics - theme tokens (Light / Dark).
 * Resolved via global crm_theme_mode → html[data-theme-resolved].
 * Hardcoded palette values live ONLY in this file.
 */

[data-theme-resolved='light'] #analytics.analytics_page,
[data-theme-resolved='light'] #accounting.accounting_page, 
[data-theme-resolved='light'] #wiki.wiki_page {
	--analytics-bg-main: #F3F4F6;
	--analytics-bg-block: #FFFFFF;
	--analytics-bg-subtle: #F9FAFB;
	--analytics-bg-muted: #F3F4F6;
	--analytics-bg-elevated: #FFFFFF;
	--analytics-text-main: #111827;
	--analytics-text-strong: #000000;
	--analytics-text-muted: #6B7280;
	--analytics-text-subtle: #9CA3AF;
	--analytics-text-inverse: #FFFFFF;
	--analytics-border: #E5E7EB;
	--analytics-border-strong: #D1D5DB;
	--analytics-border-row: #F3F4F6;
	--analytics-accent: #059669;
	--analytics-hover: #F9FAFB;
	--analytics-shadow-hover: rgba(0, 0, 0, 0.05);
	--analytics-tab-active-bg: #111827;
	--analytics-tab-active-border: #111827;
	--analytics-profit: #166534;
	--analytics-discount: #991B1B;
	--analytics-cogs: #92400E;
	--analytics-currency: #6B7280;
	--analytics-currency-muted: #9CA3AF;
	--analytics-trend-positive: #059669;
	--analytics-trend-positive-bg: #D1FAE5;
	--analytics-trend-negative: #DC2626;
	--analytics-trend-negative-bg: #FEE2E2;
	--analytics-trend-neutral: #6B7280;
	--analytics-trend-neutral-bg: #F3F4F6;
	--analytics-icon-muted: #4B5563;
	--analytics-chart-bg: #FFFFFF;
	--analytics-chart-grid: #E5E7EB;
	--analytics-chart-label: #6B7280;
	--analytics-chart-empty: #9CA3AF;
	--analytics-chart-bar: #4C8BF5;
	--analytics-chart-bar-hover: #2563EB;
	--analytics-pay-bg: #F9FAFB;
	--analytics-pay-text: #4B5563;
	--analytics-pay-border: #E5E7EB;
	--analytics-pay-cash-bg: #F7FAF8;
	--analytics-pay-cash-text: #3F5F4A;
	--analytics-pay-cash-border: #D9E8DF;
	--analytics-pay-terminal-bg: #F8FAFC;
	--analytics-pay-terminal-text: #475569;
	--analytics-pay-terminal-border: #E2E8F0;
	--analytics-pay-card-bg: #FAF9FC;
	--analytics-pay-card-text: #5C5568;
	--analytics-pay-card-border: #E8E4EF;
}

[data-theme-resolved='dark'] #analytics.analytics_page,
[data-theme-resolved='dark'] #accounting.accounting_page, 
[data-theme-resolved='dark'] #wiki.wiki_page {
	--analytics-bg-main: #111827;
	--analytics-bg-block: #1F2937;
	--analytics-bg-subtle: #1F2937;
	--analytics-bg-muted: #374151;
	--analytics-bg-elevated: #263040;
	--analytics-text-main: #F9FAFB;
	--analytics-text-strong: #FFFFFF;
	--analytics-text-muted: #9CA3AF;
	--analytics-text-subtle: #6B7280;
	--analytics-text-inverse: #111827;
	--analytics-border: #374151;
	--analytics-border-strong: #4B5563;
	--analytics-border-row: #2D3748;
	--analytics-accent: #10B981;
	--analytics-hover: #374151;
	--analytics-shadow-hover: rgba(0, 0, 0, 0.25);
	--analytics-tab-active-bg: #F9FAFB;
	--analytics-tab-active-border: #F9FAFB;
	--analytics-profit: #10B981;
	--analytics-discount: #F87171;
	--analytics-cogs: #FBBF24;
	--analytics-currency: #9CA3AF;
	--analytics-currency-muted: #6B7280;
	--analytics-trend-positive: #34D399;
	--analytics-trend-positive-bg: rgba(16, 185, 129, 0.15);
	--analytics-trend-negative: #F87171;
	--analytics-trend-negative-bg: rgba(248, 113, 113, 0.15);
	--analytics-trend-neutral: #9CA3AF;
	--analytics-trend-neutral-bg: #374151;
	--analytics-icon-muted: #9CA3AF;
	--analytics-chart-bg: #1F2937;
	--analytics-chart-grid: #374151;
	--analytics-chart-label: #9CA3AF;
	--analytics-chart-empty: #6B7280;
	--analytics-chart-bar: #60A5FA;
	--analytics-chart-bar-hover: #93C5FD;
	--analytics-pay-bg: #263040;
	--analytics-pay-text: #D1D5DB;
	--analytics-pay-border: #374151;
	--analytics-pay-cash-bg: rgba(16, 185, 129, 0.12);
	--analytics-pay-cash-text: #6EE7B7;
	--analytics-pay-cash-border: rgba(16, 185, 129, 0.25);
	--analytics-pay-terminal-bg: rgba(96, 165, 250, 0.12);
	--analytics-pay-terminal-text: #93C5FD;
	--analytics-pay-terminal-border: rgba(96, 165, 250, 0.25);
	--analytics-pay-card-bg: rgba(167, 139, 250, 0.12);
	--analytics-pay-card-text: #C4B5FD;
	--analytics-pay-card-border: rgba(167, 139, 250, 0.25);
}

/* Semantic aliases (analytics scope) */
#analytics.analytics_page, #accounting.accounting_page, #wiki.wiki_page {
	--bg-main: var(--analytics-bg-main);
	--bg-block: var(--analytics-bg-block);
	--text-main: var(--analytics-text-main);
	--text-muted: var(--analytics-text-muted);
	--border-color: var(--analytics-border);
	--accent-color: var(--analytics-accent);
	--hover-color: var(--analytics-hover);
	color: var(--analytics-text-main);
	transition: background-color 0.3s ease, color 0.3s ease;
}

#analytics.analytics_page .ui-block, #accounting.accounting_page .ui-block, #wiki.wiki_page .ui-block,
#analytics.analytics_page .analytics-ui-block, #accounting.accounting_page .analytics-ui-block, #wiki.wiki_page .analytics-ui-block{
	background-color: var(--analytics-bg-block);
	border-color: var(--analytics-border);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#analytics.analytics_page .ui-table th, #accounting.accounting_page .ui-table th, #wiki.wiki_page .ui-table th,
#analytics.analytics_page table.crm-table th, #accounting.accounting_page table.crm-table th, #wiki.wiki_page table.crm-table th,
#analytics.analytics_page table.stats_table th, #accounting.accounting_page table.stats_table th, #wiki.wiki_page table.stats_table th{
	color: var(--analytics-text-muted);
	border-bottom-color: var(--analytics-border);
}

#analytics.analytics_page .ui-table td, #accounting.accounting_page .ui-table td, #wiki.wiki_page .ui-table td,
#analytics.analytics_page table.crm-table td, #accounting.accounting_page table.crm-table td, #wiki.wiki_page table.crm-table td,
#analytics.analytics_page table.stats_table td, #accounting.accounting_page table.stats_table td, #wiki.wiki_page table.stats_table td{
	border-bottom-color: var(--analytics-border-row);
}

#analytics.analytics_page .ui-block-header, #accounting.accounting_page .ui-block-header, #wiki.wiki_page .ui-block-header{
	border-bottom-color: var(--analytics-border);
}


/* ================================================================== */
/* Analytics - unified page */
/* Source: modules/analytics/styles/analytics_core.css */
/* ================================================================== */
/**
 * Analytics page - unified Dashboard + My Cash + Top 10.
 * UI standard: Total 10px rule - padding, gap, margin between blocks.
 */

#analytics.analytics_page, #accounting.accounting_page, #wiki.wiki_page {
	--analytics-gap: 10px;
	--analytics-block-pad: 10px;
	--dash_chart_h: 100%;
	--dash-chart-label-h: 28px;
	--analytics-chart-h: 300px;
	--analytics-dow-chart-h: 300px;
	--stats_gap: 10px;
	--stats_card_radius: 5px;
	--stats_card_pad: 10px;
	--stats_icon: 32px;
	--stats_icon_font: 18px;
	--stats_value: 1.75rem;
	--stats_filter_btn: 30px;
	--stats_popover_w: 280px;
	--stats_z_filter: 1000;
	--dash_gap: var(--stats_gap);
	--dash_card_radius: var(--stats_card_radius);
	--dash_card_pad: var(--stats_card_pad);
	--dash_icon: var(--stats_icon);
	--dash_icon_font: var(--stats_icon_font);
	--dash_value: var(--stats_value);
	--dash_filter_btn: var(--stats_filter_btn);
	--dash_popover_w: var(--stats_popover_w);
	--dash_z_filter: var(--stats_z_filter);
	--mc_gap: var(--stats_gap);
	--mc_card_radius: var(--stats_card_radius);
	--mc_card_pad: var(--stats_card_pad);
	--mc_icon: var(--stats_icon);
	--mc_icon_font: var(--stats_icon_font);
	--mc_value: var(--stats_value);
	--mc_filter_btn: var(--stats_filter_btn);
	--mc_popover_w: var(--stats_popover_w);
	--mc_z_filter: var(--stats_z_filter);
	--top10-gap: 10px;
	--top10-card-pad: 10px;
	--top10-card-radius: 5px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap);
	box-sizing: border-box;
}

/* ── Section headings ── */
#analytics .analytics-section-heading, #accounting .analytics-section-heading, #wiki .analytics-section-heading{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	min-height: 30px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--text-main);
}

#analytics .analytics-section, #accounting .analytics-section, #wiki .analytics-section{
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap);
	width: 100%;
	min-width: 0;
}

#analytics .analytics-section-toolbar, #accounting .analytics-section-toolbar, #wiki .analytics-section-toolbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

#analytics .analytics-section-subtitle, #accounting .analytics-section-subtitle, #wiki .analytics-section-subtitle{
	flex: 1 1 auto;
	min-width: 0;
}

#analytics .analytics-section-actions, #accounting .analytics-section-actions, #wiki .analytics-section-actions{
	flex: 0 0 auto;
}

/* ── UI block standard ── */
#analytics .ui-block, #accounting .ui-block, #wiki .ui-block,
#analytics .analytics-ui-block, #accounting .analytics-ui-block, #wiki .analytics-ui-block{
	background: var(--analytics-bg-block);
	border: 1px solid var(--analytics-border);
	border-radius: var(--stats_card_radius, 5px);
	padding: var(--analytics-block-pad);
	margin: 0;
	box-sizing: border-box;
	box-shadow: var(--shadow-sm);
}

/* Відступи між блоками - лише через gap батьківських flex/grid контейнерів */
#analytics.analytics_page > .ui-block, #accounting.accounting_page > .ui-block, #wiki.wiki_page > .ui-block,
#analytics.analytics_page > .analytics-ui-block, #accounting.accounting_page > .analytics-ui-block, #wiki.wiki_page > .analytics-ui-block,
#analytics.analytics_page > .analytics-section, #accounting.accounting_page > .analytics-section, #wiki.wiki_page > .analytics-section,
#analytics .analytics-section > .ui-block, #accounting .analytics-section > .ui-block, #wiki .analytics-section > .ui-block,
#analytics .analytics-section > .analytics-ui-block, #accounting .analytics-section > .analytics-ui-block, #wiki .analytics-section > .analytics-ui-block,
#analytics .analytics-section > .ui-top-grid, #accounting .analytics-section > .ui-top-grid, #wiki .analytics-section > .ui-top-grid{
	margin-bottom: 0 !important;
}

#analytics .ui-block-content, #accounting .ui-block-content, #wiki .ui-block-content{
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap);
	min-width: 0;
}

#analytics .ui-block-header, #accounting .ui-block-header, #wiki .ui-block-header{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--analytics-gap, 10px);
	padding-bottom: var(--analytics-block-pad, 10px);
	border-bottom: 1px solid var(--analytics-border);
	margin-bottom: var(--analytics-block-pad, 10px);
	box-sizing: border-box;
	min-width: 0;
}

#analytics .ui-block-header__main, #accounting .ui-block-header__main, #wiki .ui-block-header__main{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

#analytics .ui-block-title, #accounting .ui-block-title, #wiki .ui-block-title{
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--analytics-text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#analytics .ui-block-header .ui-icon, #accounting .ui-block-header .ui-icon, #wiki .ui-block-header .ui-icon,
#analytics .ui-block-header .material-icons, #accounting .ui-block-header .material-icons, #wiki .ui-block-header .material-icons{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	color: var(--analytics-text-muted);
}

#analytics .ui-heading, #accounting .ui-heading, #wiki .ui-heading{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--text-main);
}

/* ── Top 10 rankings - 1 col (mobile) / 3 col (desktop) ── */
#analytics .ui-top-grid, #accounting .ui-top-grid, #wiki .ui-top-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
	width: 100%;
	min-width: 0;
}

#analytics .ui-top-grid .ui-block, #accounting .ui-top-grid .ui-block, #wiki .ui-top-grid .ui-block,
#analytics .ui-top-grid .analytics-ui-block, #accounting .ui-top-grid .analytics-ui-block, #wiki .ui-top-grid .analytics-ui-block{
	margin-bottom: 0 !important;
	height: 100%;
}

@media (min-width: 992px) {
	#analytics .ui-top-grid, #accounting .ui-top-grid, #wiki .ui-top-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Legacy top10_grid (standalone top10 page) - mobile-first */
#analytics .top10_grid, #accounting .top10_grid, #wiki .top10_grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--top10-gap);
	margin: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

@media (min-width: 768px) {
	#analytics .top10_grid, #accounting .top10_grid, #wiki .top10_grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	#analytics .top10_grid, #accounting .top10_grid, #wiki .top10_grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

#analytics .top10-panel--wide, #accounting .top10-panel--wide, #wiki .top10-panel--wide{
	grid-column: 1 / -1;
}

#analytics .dash_section, #accounting .dash_section, #wiki .dash_section,
#analytics .mc_section, #accounting .mc_section, #wiki .mc_section{
	margin-top: 0;
}

#analytics .dash_grid, #accounting .dash_grid, #wiki .dash_grid,
#analytics .mc_grid, #accounting .mc_grid, #wiki .mc_grid{
	margin-bottom: 0;
}

/* ── KPI metrics - ui-stat design standard ── */
#analytics .ui-stats-grid, #accounting .ui-stats-grid, #wiki .ui-stats-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	width: 100%;
	min-width: 0;
}

#analytics .ui-stat-card, #accounting .ui-stat-card, #wiki .ui-stat-card{
	padding: 10px;
	background: var(--analytics-bg-subtle);
	border: 1px solid var(--analytics-border);
	border-radius: 5px;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	min-width: 0;
}

#analytics .ui-stat-card:hover, #accounting .ui-stat-card:hover, #wiki .ui-stat-card:hover{
	background: var(--analytics-bg-elevated);
	border-color: var(--analytics-border-strong);
	box-shadow: 0 4px 12px var(--analytics-shadow-hover);
	transform: translateY(-1px);
}

#analytics .ui-stat-header, #accounting .ui-stat-header, #wiki .ui-stat-header{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--analytics-gap, 10px);
	padding-bottom: var(--analytics-block-pad, 10px);
	border-bottom: 1px solid var(--analytics-border);
	margin-bottom: var(--analytics-block-pad, 10px);
	min-width: 0;
}

#analytics .ui-stat-icon-large, #accounting .ui-stat-icon-large, #wiki .ui-stat-icon-large{
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background: var(--analytics-bg-muted);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#analytics .ui-stat-icon-large i, #accounting .ui-stat-icon-large i, #wiki .ui-stat-icon-large i,
#analytics .ui-stat-icon-large svg, #accounting .ui-stat-icon-large svg, #wiki .ui-stat-icon-large svg,
#analytics .ui-stat-icon-large img, #accounting .ui-stat-icon-large img, #wiki .ui-stat-icon-large img,
#analytics .ui-stat-icon-large .material-icons, #accounting .ui-stat-icon-large .material-icons, #wiki .ui-stat-icon-large .material-icons{
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
	color: var(--analytics-icon-muted);
}

#analytics .ui-stat-label, #accounting .ui-stat-label, #wiki .ui-stat-label{
	font-size: 10px;
	color: var(--analytics-text-muted);
	text-transform: uppercase;
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
	letter-spacing: 0.2px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#analytics .ui-stat-body, #accounting .ui-stat-body, #wiki .ui-stat-body{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: var(--analytics-gap, 10px);
	margin-bottom: 0;
	min-width: 0;
}

#analytics .ui-stat-value, #accounting .ui-stat-value, #wiki .ui-stat-value{
	font-size: 22px;
	font-weight: 800;
	color: var(--analytics-text-strong);
	line-height: 1.1;
	letter-spacing: -0.5px;
	min-width: 0;
	flex: 0 1 auto;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#analytics .ui-stat-value small, #accounting .ui-stat-value small, #wiki .ui-stat-value small{
	font-size: 12px;
	font-weight: 600;
	color: var(--analytics-text-muted);
}

#analytics .ui-stat-desc, #accounting .ui-stat-desc, #wiki .ui-stat-desc{
	font-size: 10px;
	color: var(--analytics-text-subtle);
	line-height: 1.3;
	margin-top: auto;
}

#analytics .ui-trend-badge, #accounting .ui-trend-badge, #wiki .ui-trend-badge{
	font-size: 10px;
	font-weight: 600;
	padding: 1px 4px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	line-height: 1.2;
	white-space: nowrap;
}

#analytics .ui-trend-badge .material-icons, #accounting .ui-trend-badge .material-icons, #wiki .ui-trend-badge .material-icons{
	font-size: 9px;
	line-height: 1;
	width: 9px;
	height: 9px;
}

#analytics .ui-trend-badge.is-positive, #accounting .ui-trend-badge.is-positive, #wiki .ui-trend-badge.is-positive{
	color: var(--analytics-trend-positive);
	background: var(--analytics-trend-positive-bg);
}

#analytics .ui-trend-badge.is-negative, #accounting .ui-trend-badge.is-negative, #wiki .ui-trend-badge.is-negative{
	color: var(--analytics-trend-negative);
	background: var(--analytics-trend-negative-bg);
}

#analytics .ui-trend-badge.is-neutral, #accounting .ui-trend-badge.is-neutral, #wiki .ui-trend-badge.is-neutral{
	color: var(--analytics-text-muted);
	background: var(--analytics-bg-muted);
}

@media (max-width: 560px) {
	#analytics .ui-stats-grid, #accounting .ui-stats-grid, #wiki .ui-stats-grid{
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

@media (max-width: 400px) {
	#analytics .ui-stats-grid, #accounting .ui-stats-grid, #wiki .ui-stats-grid{
		grid-template-columns: 1fr;
	}
}

/* ── Tables (.ui-table) ── */
#analytics .ui-table, #accounting .ui-table, #wiki .ui-table,
#analytics table.crm-table, #accounting table.crm-table, #wiki table.crm-table,
#analytics table.stats_table, #accounting table.stats_table, #wiki table.stats_table,
#analytics .crm-table, #accounting .crm-table, #wiki .crm-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: var(--analytics-text-main);
}

#analytics .ui-table th, #accounting .ui-table th, #wiki .ui-table th,
#analytics table.crm-table th, #accounting table.crm-table th, #wiki table.crm-table th,
#analytics table.stats_table th, #accounting table.stats_table th, #wiki table.stats_table th,
#analytics .crm-table th, #accounting .crm-table th, #wiki .crm-table th{
	font-size: 10px;
	text-transform: uppercase;
	color: var(--analytics-text-muted);
	padding: 8px 10px;
	border-bottom: 1px solid var(--analytics-border);
	font-weight: 500;
	background: transparent;
}

/* Усі таблиці: 1-й стовпець зліва, решта справа (заголовки + контент) */
#analytics :is(.ui-table, .crm-table, table.stats_table) :is(th, td):first-child,
#accounting :is(.ui-table, .crm-table, table.stats_table) :is(th, td):first-child, 
#wiki :is(.ui-table, .crm-table, table.stats_table) :is(th, td):first-child {
	text-align: left !important;
}

#analytics :is(.ui-table, .crm-table, table.stats_table) :is(th, td):not(:first-child),
#accounting :is(.ui-table, .crm-table, table.stats_table) :is(th, td):not(:first-child), 
#wiki :is(.ui-table, .crm-table, table.stats_table) :is(th, td):not(:first-child) {
	text-align: right !important;
}

#analytics .ui-table td, #accounting .ui-table td, #wiki .ui-table td,
#analytics table.crm-table td, #accounting table.crm-table td, #wiki table.crm-table td,
#analytics table.stats_table td, #accounting table.stats_table td, #wiki table.stats_table td,
#analytics .crm-table td, #accounting .crm-table td, #wiki .crm-table td{
	font-size: 12px;
	color: var(--analytics-text-main);
	padding: 10px;
	border-bottom: 1px solid var(--analytics-border-row);
	vertical-align: middle;
}

/* Головна колонка - найменування */
#analytics .ui-table td:first-child, #accounting .ui-table td:first-child, #wiki .ui-table td:first-child,
#analytics table.crm-table td:first-child, #accounting table.crm-table td:first-child, #wiki table.crm-table td:first-child,
#analytics table.stats_table td:first-child, #accounting table.stats_table td:first-child, #wiki table.stats_table td:first-child,
#analytics .crm-table td:first-child, #accounting .crm-table td:first-child, #wiki .crm-table td:first-child,
#analytics .ui-table td.stats_col_main, #accounting .ui-table td.stats_col_main, #wiki .ui-table td.stats_col_main,
#analytics table.crm-table td.stats_col_main, #accounting table.crm-table td.stats_col_main, #wiki table.crm-table td.stats_col_main,
#analytics table.stats_table td.stats_col_main, #accounting table.stats_table td.stats_col_main, #wiki table.stats_table td.stats_col_main{
	font-weight: 700;
	font-size: 12px;
	color: var(--analytics-text-strong);
}

#analytics .ui-table tbody tr:hover td, #accounting .ui-table tbody tr:hover td, #wiki .ui-table tbody tr:hover td,
#analytics table.crm-table tbody tr:hover td, #accounting table.crm-table tbody tr:hover td, #wiki table.crm-table tbody tr:hover td,
#analytics table.stats_table tbody tr:hover td, #accounting table.stats_table tbody tr:hover td, #wiki table.stats_table tbody tr:hover td,
#analytics .crm-table tbody tr:hover td, #accounting .crm-table tbody tr:hover td, #wiki .crm-table tbody tr:hover td{
	background-color: var(--analytics-hover);
}

#analytics .ui-table tr:last-child td, #accounting .ui-table tr:last-child td, #wiki .ui-table tr:last-child td,
#analytics table.crm-table tr:last-child td, #accounting table.crm-table tr:last-child td, #wiki table.crm-table tr:last-child td,
#analytics table.stats_table tr:last-child td, #accounting table.stats_table tr:last-child td, #wiki table.stats_table tr:last-child td,
#analytics .crm-table tr:last-child td, #accounting .crm-table tr:last-child td, #wiki .crm-table tr:last-child td{
	border-bottom: none;
}

#analytics .crm-table-wrap, #accounting .crm-table-wrap, #wiki .crm-table-wrap,
#analytics .table-responsive-wrapper, #accounting .table-responsive-wrapper, #wiki .table-responsive-wrapper{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	scrollbar-width: thin;
	padding-bottom: 5px;
	border: 1px solid var(--analytics-border);
	border-radius: var(--stats_card_radius, 5px);
	box-sizing: border-box;
}

#analytics .crm-table-wrap::after, #accounting .crm-table-wrap::after, #wiki .crm-table-wrap::after,
#analytics .table-responsive-wrapper::after, #accounting .table-responsive-wrapper::after, #wiki .table-responsive-wrapper::after{
	content: '';
	display: block;
	height: 1px;
	width: 100%;
	margin-top: -1px;
}

/* Analytics tables - column widths: main min 250px, metrics 80–120px */
#analytics .analytics-financial-table, #accounting .analytics-financial-table, #wiki .analytics-financial-table,
#analytics table.crm-table.stats_table, #accounting table.crm-table.stats_table, #wiki table.crm-table.stats_table,
#analytics table.crm-table--metrics.stats_table, #accounting table.crm-table--metrics.stats_table, #wiki table.crm-table--metrics.stats_table{
	width: 100%;
	table-layout: fixed;
}

#analytics .crm-table.stats_table, #accounting .crm-table.stats_table, #wiki .crm-table.stats_table,
#analytics .crm-table--metrics.stats_table, #accounting .crm-table--metrics.stats_table, #wiki .crm-table--metrics.stats_table{
	min-width: max(
		720px,
		calc(var(--stats-main-cols, 1) * 250px + var(--stats-num-cols, 3) * 80px)
	) !important;
}

#analytics .analytics-financial-table col.stats_col_main, #accounting .analytics-financial-table col.stats_col_main, #wiki .analytics-financial-table col.stats_col_main,
#analytics table.crm-table.stats_table col.stats_col_main, #accounting table.crm-table.stats_table col.stats_col_main, #wiki table.crm-table.stats_table col.stats_col_main,
#analytics .analytics-financial-table .stats_col_main, #accounting .analytics-financial-table .stats_col_main, #wiki .analytics-financial-table .stats_col_main,
#analytics table.crm-table.stats_table .stats_col_main, #accounting table.crm-table.stats_table .stats_col_main, #wiki table.crm-table.stats_table .stats_col_main,
#analytics table.crm-table.stats_table th.stats_col_main, #accounting table.crm-table.stats_table th.stats_col_main, #wiki table.crm-table.stats_table th.stats_col_main,
#analytics table.crm-table.stats_table td.stats_col_main, #accounting table.crm-table.stats_table td.stats_col_main, #wiki table.crm-table.stats_table td.stats_col_main{
	min-width: 250px;
	width: auto;
}

#analytics .analytics-financial-table col.stats_col_num, #accounting .analytics-financial-table col.stats_col_num, #wiki .analytics-financial-table col.stats_col_num,
#analytics table.crm-table.stats_table col.stats_col_num, #accounting table.crm-table.stats_table col.stats_col_num, #wiki table.crm-table.stats_table col.stats_col_num,
#analytics .stats_col_num_w, #accounting .stats_col_num_w, #wiki .stats_col_num_w,
#analytics .analytics-financial-table .stats_col_num, #accounting .analytics-financial-table .stats_col_num, #wiki .analytics-financial-table .stats_col_num,
#analytics .analytics-financial-table .analytics-dt-col-qty, #accounting .analytics-financial-table .analytics-dt-col-qty, #wiki .analytics-financial-table .analytics-dt-col-qty,
#analytics .analytics-financial-table .analytics-dt-col-money, #accounting .analytics-financial-table .analytics-dt-col-money, #wiki .analytics-financial-table .analytics-dt-col-money,
#analytics table.crm-table.stats_table .stats_col_num, #accounting table.crm-table.stats_table .stats_col_num, #wiki table.crm-table.stats_table .stats_col_num,
#analytics table.crm-table.stats_table th.stats_col_num, #accounting table.crm-table.stats_table th.stats_col_num, #wiki table.crm-table.stats_table th.stats_col_num,
#analytics table.crm-table.stats_table td.stats_col_num, #accounting table.crm-table.stats_table td.stats_col_num, #wiki table.crm-table.stats_table td.stats_col_num{
	min-width: 80px;
	max-width: 120px;
	width: 120px;
	box-sizing: border-box;
}

#analytics .analytics-financial-table .stats_col_main, #accounting .analytics-financial-table .stats_col_main, #wiki .analytics-financial-table .stats_col_main,
#analytics table.crm-table.stats_table .stats_col_main, #accounting table.crm-table.stats_table .stats_col_main, #wiki table.crm-table.stats_table .stats_col_main{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Financial breakdown tables (device types, services) */
#analytics .analytics-financial-table td.analytics-dt-col-qty, #accounting .analytics-financial-table td.analytics-dt-col-qty, #wiki .analytics-financial-table td.analytics-dt-col-qty,
#analytics .analytics-device-types-table td.analytics-dt-col-qty, #accounting .analytics-device-types-table td.analytics-dt-col-qty, #wiki .analytics-device-types-table td.analytics-dt-col-qty{
	font-weight: 400;
}

#analytics .analytics-financial-table .analytics-dt-col-discount, #accounting .analytics-financial-table .analytics-dt-col-discount, #wiki .analytics-financial-table .analytics-dt-col-discount,
#analytics .analytics-device-types-table .analytics-dt-col-discount, #accounting .analytics-device-types-table .analytics-dt-col-discount, #wiki .analytics-device-types-table .analytics-dt-col-discount{
	color: var(--analytics-discount);
}

#analytics .analytics-financial-table .analytics-dt-col-cogs, #accounting .analytics-financial-table .analytics-dt-col-cogs, #wiki .analytics-financial-table .analytics-dt-col-cogs,
#analytics .analytics-device-types-table .analytics-dt-col-cogs, #accounting .analytics-device-types-table .analytics-dt-col-cogs, #wiki .analytics-device-types-table .analytics-dt-col-cogs{
	color: var(--analytics-cogs);
}

#analytics .analytics-financial-table .analytics-dt-col-profit, #accounting .analytics-financial-table .analytics-dt-col-profit, #wiki .analytics-financial-table .analytics-dt-col-profit,
#analytics .analytics-device-types-table .analytics-dt-col-profit, #accounting .analytics-device-types-table .analytics-dt-col-profit, #wiki .analytics-device-types-table .analytics-dt-col-profit{
	font-weight: 600;
	color: var(--analytics-profit);
}

#analytics .analytics-financial-table .analytics-dt-col-loss, #accounting .analytics-financial-table .analytics-dt-col-loss, #wiki .analytics-financial-table .analytics-dt-col-loss,
#analytics .analytics-device-types-table .analytics-dt-col-loss, #accounting .analytics-device-types-table .analytics-dt-col-loss, #wiki .analytics-device-types-table .analytics-dt-col-loss{
	font-weight: 600;
	color: var(--analytics-discount);
}

/* Сума в таблицях - приглушені семантичні кольори + сіра валюта */
#analytics table.crm-table.stats_table .text-success, #accounting table.crm-table.stats_table .text-success, #wiki table.crm-table.stats_table .text-success,
#analytics table.crm-table--metrics.stats_table .text-success, #accounting table.crm-table--metrics.stats_table .text-success, #wiki table.crm-table--metrics.stats_table .text-success{
	color: var(--analytics-profit) !important;
	font-weight: 600;
}

#analytics table.crm-table.stats_table .text-danger, #accounting table.crm-table.stats_table .text-danger, #wiki table.crm-table.stats_table .text-danger,
#analytics table.crm-table--metrics.stats_table .text-danger, #accounting table.crm-table--metrics.stats_table .text-danger, #wiki table.crm-table--metrics.stats_table .text-danger{
	color: var(--analytics-discount) !important;
	font-weight: 500;
}

#analytics table.crm-table.stats_table .text-warning, #accounting table.crm-table.stats_table .text-warning, #wiki table.crm-table.stats_table .text-warning,
#analytics table.crm-table--metrics.stats_table .text-warning, #accounting table.crm-table--metrics.stats_table .text-warning, #wiki table.crm-table--metrics.stats_table .text-warning{
	color: var(--analytics-cogs) !important;
	font-weight: 500;
}

#analytics .analytics-currency, #accounting .analytics-currency, #wiki .analytics-currency,
#analytics table.crm-table.stats_table small, #accounting table.crm-table.stats_table small, #wiki table.crm-table.stats_table small,
#analytics table.crm-table--metrics.stats_table small, #accounting table.crm-table--metrics.stats_table small, #wiki table.crm-table--metrics.stats_table small{
	color: var(--analytics-currency) !important;
	font-weight: 500;
	font-size: 0.92em;
}

#analytics .analytics-financial-table .analytics-dt-col-discount .analytics-currency, #accounting .analytics-financial-table .analytics-dt-col-discount .analytics-currency, #wiki .analytics-financial-table .analytics-dt-col-discount .analytics-currency,
#analytics .analytics-financial-table .analytics-dt-col-cogs .analytics-currency, #accounting .analytics-financial-table .analytics-dt-col-cogs .analytics-currency, #wiki .analytics-financial-table .analytics-dt-col-cogs .analytics-currency,
#analytics .analytics-financial-table .analytics-dt-col-profit .analytics-currency, #accounting .analytics-financial-table .analytics-dt-col-profit .analytics-currency, #wiki .analytics-financial-table .analytics-dt-col-profit .analytics-currency,
#analytics .analytics-financial-table .analytics-dt-col-loss .analytics-currency, #accounting .analytics-financial-table .analytics-dt-col-loss .analytics-currency, #wiki .analytics-financial-table .analytics-dt-col-loss .analytics-currency{
	color: var(--analytics-currency-muted) !important;
}

#analytics .dash_section .unified-section-title, #accounting .dash_section .unified-section-title, #wiki .dash_section .unified-section-title,
#analytics .mc_section .unified-section-title, #accounting .mc_section .unified-section-title, #wiki .mc_section .unified-section-title{
	display: none;
}

#analytics .dash_section_desc, #accounting .dash_section_desc, #wiki .dash_section_desc,
#analytics .mc_section_desc, #accounting .mc_section_desc, #wiki .mc_section_desc,
#analytics .dash_card_desc, #accounting .dash_card_desc, #wiki .dash_card_desc{
	margin: 0 0 10px !important;
	font-size: 12px;
	color: var(--text-muted);
}

/* ── Day-of-week block - делеговано .analytics-chart-widget ── */

/* ── Top-10 list items ── */
#analytics .ui-top-list, #accounting .ui-top-list, #wiki .ui-top-list{
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap, 10px);
	min-width: 0;
}

#analytics .ui-top-item, #accounting .ui-top-item, #wiki .ui-top-item{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--analytics-gap, 10px);
	padding: var(--analytics-block-pad, 10px);
	background: var(--analytics-bg-subtle);
	border: 1px solid var(--analytics-border);
	border-radius: var(--stats_card_radius, 5px);
	margin: 0;
	min-width: 0;
	box-sizing: border-box;
}

#analytics .ui-top-item--empty, #accounting .ui-top-item--empty, #wiki .ui-top-item--empty{
	justify-content: center;
	color: var(--analytics-text-subtle);
	font-size: 12px;
}

#analytics .ui-top-item__main, #accounting .ui-top-item__main, #wiki .ui-top-item__main{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--analytics-gap, 10px);
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

#analytics .ui-top-rank, #accounting .ui-top-rank, #wiki .ui-top-rank{
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	color: var(--analytics-text-muted);
	background: var(--analytics-bg-muted);
	border-radius: 5px;
	padding: 2px 6px;
	line-height: 1.2;
}

#analytics .ui-top-name, #accounting .ui-top-name, #wiki .ui-top-name{
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--analytics-text-main);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#analytics .ui-top-name--link, #accounting .ui-top-name--link, #wiki .ui-top-name--link{
	color: var(--analytics-text-main);
	text-decoration: none;
}

#analytics .ui-top-name--link:hover, #accounting .ui-top-name--link:hover, #wiki .ui-top-name--link:hover{
	color: var(--analytics-chart-bar);
}

#analytics .ui-top-item__value, #accounting .ui-top-item__value, #wiki .ui-top-item__value{
	flex: 0 0 auto;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--analytics-text-main);
	line-height: 1.2;
	white-space: nowrap;
	text-align: right;
}

#analytics .ui-top-item__value small, #accounting .ui-top-item__value small, #wiki .ui-top-item__value small{
	font-size: 10px;
	font-weight: 600;
	color: var(--analytics-text-muted);
}

/* ── Day-of-week tabs (спільні для .analytics-chart-widget) ── */
#analytics .ui-days-tabs, #accounting .ui-days-tabs, #wiki .ui-days-tabs{
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 0;
	-webkit-overflow-scrolling: touch;
}

#analytics .ui-days-tab, #accounting .ui-days-tab, #wiki .ui-days-tab{
	flex: 0 0 auto;
	padding: 6px 10px;
	border: 1px solid var(--analytics-border);
	border-radius: 5px;
	background: var(--analytics-bg-subtle);
	color: var(--analytics-text-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.15s ease;
}

#analytics .ui-days-tab:hover, #accounting .ui-days-tab:hover, #wiki .ui-days-tab:hover{
	border-color: var(--analytics-border-strong);
	color: var(--analytics-text-main);
}

#analytics .ui-days-tab.is-active, #accounting .ui-days-tab.is-active, #wiki .ui-days-tab.is-active{
	background: var(--analytics-tab-active-bg);
	border-color: var(--analytics-tab-active-border);
	color: var(--analytics-text-inverse);
}

@media (max-width: 768px) {
	#analytics.analytics_page, #accounting.accounting_page, #wiki.wiki_page {
		--stats_value: 1.5rem;
		--analytics-chart-h: 260px;
		--analytics-dow-chart-h: 260px;
		--dash-chart-label-h: 26px;
	}

	#analytics .analytics-section-toolbar, #accounting .analytics-section-toolbar, #wiki .analytics-section-toolbar{
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 480px) {
	#analytics.analytics_page, #accounting.accounting_page, #wiki.wiki_page {
		--analytics-chart-h: 220px;
		--analytics-dow-chart-h: 220px;
		--dash-chart-label-h: 24px;
	}
}

#analytics .analytics-section > .ui-block:last-child, #accounting .analytics-section > .ui-block:last-child, #wiki .analytics-section > .ui-block:last-child,
#analytics .analytics-section > .analytics-ui-block:last-child, #accounting .analytics-section > .analytics-ui-block:last-child, #wiki .analytics-section > .analytics-ui-block:last-child{
	margin-bottom: 0 !important;
}


/* ================================================================== */
/* Analytics - chart widget cards */
/* Source: modules/analytics/styles/analytics_chart_widget.css */
/* ================================================================== */
/**
 * Уніфіковані картки віджетів графіків: «Прогноз та динаміка» + «Динаміка по днях».
 * Єдиний фон, рамка, radius, padding 10px.
 */

#analytics .analytics-chart-widget {
	background: var(--analytics-bg-block);
	border: 1px solid var(--analytics-border);
	border-radius: var(--stats_card_radius, 5px);
	padding: var(--analytics-block-pad, 10px);
	margin: 0;
	box-sizing: border-box;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

#analytics .analytics-chart-widget__header.ui-block-header {
	padding-bottom: var(--analytics-gap, 10px);
	margin-bottom: var(--analytics-gap, 10px);
}

#analytics .analytics-chart-widget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 var(--analytics-gap, 10px);
	border-bottom: 1px solid var(--analytics-border);
	margin: 0 0 var(--analytics-gap, 10px);
	box-sizing: border-box;
	min-width: 0;
}

#analytics .analytics-chart-widget__title {
	margin: 0;
}

#analytics .analytics-chart-widget__body,
#analytics .analytics-chart-widget__body.ui-block-content {
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap, 10px);
	padding: 0;
	margin: 0;
	min-width: 0;
}

#analytics .analytics-chart-widget__content,
#analytics .analytics-chart-widget__section,
#analytics .analytics-chart-widget__panel {
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap, 10px);
	margin: 0;
	padding: 0;
	min-width: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Мета-ряд прогнозу (badges + stats) */
#analytics .analytics-chart-widget__meta.dash_chart_head {
	margin: 0;
	padding: 0 0 var(--analytics-gap, 10px);
	border-bottom: 1px solid var(--analytics-border);
	gap: var(--analytics-gap, 10px);
}

/* Тулбар DOW (таби днів) */
#analytics .analytics-chart-widget__toolbar {
	margin: 0;
	padding: 0;
}

/* KPI всередині віджета */
#analytics .analytics-chart-widget__stats {
	margin: 0;
	width: 100%;
}

#analytics .analytics-chart-widget__stats .ui-stat-card {
	background: var(--analytics-bg-subtle);
	border: 1px solid var(--analytics-border);
	border-radius: var(--stats_card_radius, 5px);
}

#analytics .analytics-chart-widget__stats.analytics-dow-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--analytics-gap, 10px);
}

/* Область графіка - однакова для обох віджетів */
#analytics .analytics-chart-widget .analytics-chart-panel,
#analytics .analytics-chart-widget .ui-chart-wrapper.analytics-chart-panel {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: var(--analytics-chart-h, 300px);
	min-height: var(--analytics-chart-h, 300px);
	margin: 0;
	padding: var(--analytics-block-pad, 10px);
	box-sizing: border-box;
	overflow: hidden;
	background: var(--analytics-bg-subtle);
	border: 1px solid var(--analytics-border);
	border-radius: var(--stats_card_radius, 5px);
}

#analytics .analytics-chart-widget--dow .analytics-chart-panel {
	height: var(--analytics-dow-chart-h, 300px);
	min-height: var(--analytics-dow-chart-h, 300px);
}

#analytics .analytics-chart-widget .analytics-chart-panel__inner,
#analytics .analytics-chart-widget .ui-chart-inner {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

#analytics .analytics-chart-widget .analytics-chart-panel__inner canvas,
#analytics .analytics-chart-widget .ui-chart-inner canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* Внутрішній box прогнозного bar-chart */
#analytics .analytics-chart-widget .analytics-chart-panel .dash_chart_box {
	width: 100%;
	height: 100% !important;
	min-height: 0;
	margin: 0;
	padding: 40px 0 0;
	border: none;
	background: transparent;
	border-radius: 0;
	box-sizing: border-box;
	overflow: hidden;
}

#analytics .analytics-chart-widget .analytics-chart-panel .dash_chart_bars {
	gap: 1px;
}

#analytics .analytics-chart-widget .analytics-chart-panel .dash_chart_col {
	flex: 1 1 0;
	min-width: 0;
}

#analytics .analytics-chart-widget .analytics-chart-panel .dash_chart_bar {
	max-width: 100%;
	border-radius: 5px 5px 5px 5px;
}

#analytics .analytics-chart-widget .analytics-chart-panel .dash_chart_month {
	font-size: 8px;
	letter-spacing: -0.02em;
}

#analytics .analytics-chart-widget .analytics-chart-panel .dash_chart_grid {
	inset: 40px 0 calc(var(--dash-chart-label-h, 28px) + 4px) 0;
}

/* Легенда прогнозу */
#analytics .analytics-chart-widget__legend,
#analytics .analytics-chart-widget .dash_chart_legend {
	margin: 0;
	padding: var(--analytics-gap, 10px) 0 0;
	border-top: 1px solid var(--analytics-border);
	gap: var(--analytics-gap, 10px);
}

/* Скасувати стилі dashboard_core всередині віджета */
#analytics .analytics-chart-widget .dash_analytics {
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap, 10px);
}

#analytics .analytics-chart-widget .dash_chart_card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

#analytics .analytics-chart-widget .dash_chart_head {
	margin-bottom: 0 !important;
}

#analytics .analytics-chart-widget .dash_chart_badge {
	padding: 6px 10px;
}

#analytics .analytics-chart-widget .dash_chart_stats {
	gap: var(--analytics-gap, 10px);
}

#analytics .analytics-chart-widget .dash_forecast_stats {
	margin: 0;
}

@media (max-width: 768px) {
	#analytics .analytics-chart-widget__stats.analytics-dow-stats {
		grid-template-columns: 1fr;
	}
}


/* ================================================================== */
/* Analytics - responsive layout */
/* Source: modules/analytics/styles/analytics_responsive.css */
/* ================================================================== */
/**
 * Analytics page - responsive layout & chart scaling.
 * Mobile-first breakpoints: 480 / 768 / 992 / 1200
 */

/* ── Page shell: prevent horizontal bleed from charts/tables ── */
#analytics.analytics_page, #accounting.accounting_page, #wiki.wiki_page {
	overflow-x: clip;
	overflow-x: hidden;
}

#analytics.analytics_page .crm_content_head, #accounting.accounting_page .crm_content_head, #wiki.wiki_page .crm_content_head,
#analytics.analytics_page .analytics-section, #accounting.accounting_page .analytics-section, #wiki.wiki_page .analytics-section,
#analytics.analytics_page .ui-block, #accounting.accounting_page .ui-block, #wiki.wiki_page .ui-block,
#analytics.analytics_page .analytics-ui-block, #accounting.accounting_page .analytics-ui-block, #wiki.wiki_page .analytics-ui-block,
#analytics.analytics_page .analytics-chart-widget, #accounting.accounting_page .analytics-chart-widget, #wiki.wiki_page .analytics-chart-widget{
	min-width: 0;
	max-width: 100%;
}

/* ── Truncation notice (transactions cap) ── */
#analytics .analytics-tx-truncated, #accounting .analytics-tx-truncated, #wiki .analytics-tx-truncated{
	margin: 10px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--analytics-text-muted);
}

/* ── Chart widgets (Прогноз / DOW) ── */
#analytics .analytics-chart-widget--dow .analytics-chart-widget__body, #accounting .analytics-chart-widget--dow .analytics-chart-widget__body, #wiki .analytics-chart-widget--dow .analytics-chart-widget__body{
	min-width: 0;
}

#analytics .analytics-chart-widget__stats.analytics-dow-stats, #accounting .analytics-chart-widget__stats.analytics-dow-stats, #wiki .analytics-chart-widget__stats.analytics-dow-stats{
	display: grid;
	min-width: 0;
}

#analytics .analytics-chart-widget__stats.analytics-dow-stats .ui-stat-card, #accounting .analytics-chart-widget__stats.analytics-dow-stats .ui-stat-card, #wiki .analytics-chart-widget__stats.analytics-dow-stats .ui-stat-card{
	min-width: 0;
}

#analytics .ui-days-tabs, #accounting .ui-days-tabs, #wiki .ui-days-tabs{
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#analytics .ui-days-tabs::-webkit-scrollbar, #accounting .ui-days-tabs::-webkit-scrollbar, #wiki .ui-days-tabs::-webkit-scrollbar{
	display: none;
}

#analytics .ui-days-tab, #accounting .ui-days-tab, #wiki .ui-days-tab{
	scroll-snap-align: start;
	min-height: 36px;
	min-width: 44px;
	touch-action: manipulation;
}

#analytics .ui-days-tab:focus-visible, #accounting .ui-days-tab:focus-visible, #wiki .ui-days-tab:focus-visible{
	outline: 2px solid var(--analytics-chart-bar);
	outline-offset: 2px;
}

/* ── Top-10 grid: mobile → tablet → desktop ── */
@media (min-width: 576px) and (max-width: 991px) {
	#analytics .ui-top-grid, #accounting .ui-top-grid, #wiki .ui-top-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Forecast chart header (віджет) ── */
@media (max-width: 992px) {
	#analytics .analytics-chart-widget .dash_chart_head, #accounting .analytics-chart-widget .dash_chart_head, #wiki .analytics-chart-widget .dash_chart_head{
		flex-direction: column;
		align-items: stretch;
	}

	#analytics .analytics-chart-widget .dash_chart_meta, #accounting .analytics-chart-widget .dash_chart_meta, #wiki .analytics-chart-widget .dash_chart_meta,
	#analytics .analytics-chart-widget .dash_chart_stats, #accounting .analytics-chart-widget .dash_chart_stats, #wiki .analytics-chart-widget .dash_chart_stats{
		width: 100%;
	}

	#analytics .analytics-chart-widget .dash_chart_stat, #accounting .analytics-chart-widget .dash_chart_stat, #wiki .analytics-chart-widget .dash_chart_stat{
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (max-width: 768px) {
	#analytics .analytics-chart-widget .dash_forecast_stats, #accounting .analytics-chart-widget .dash_forecast_stats, #wiki .analytics-chart-widget .dash_forecast_stats{
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	/* Headers stay single-row: title left (truncate), actions right */
	#analytics .ui-block-header, #accounting .ui-block-header, #wiki .ui-block-header,
	#analytics .analytics-chart-widget__header, #accounting .analytics-chart-widget__header, #wiki .analytics-chart-widget__header{
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--analytics-gap, 10px);
	}

	#analytics .ui-block-title, #accounting .ui-block-title, #wiki .ui-block-title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}

	#analytics .ui-stat-value, #accounting .ui-stat-value, #wiki .ui-stat-value{
		font-size: 1.35rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Top rows: NEVER stack — name left, value/icon right */
	#analytics .ui-top-item, #accounting .ui-top-item, #wiki .ui-top-item,
	#analytics .top10-list__item, #accounting .top10-list__item, #wiki .top10-list__item{
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}

	#analytics .ui-top-item__value, #accounting .ui-top-item__value, #wiki .ui-top-item__value,
	#analytics .top10-list__value, #accounting .top10-list__value, #wiki .top10-list__value{
		width: auto;
		flex: 0 0 auto;
		padding-top: 0;
		border-top: none;
		text-align: right;
	}
}

@media (max-width: 480px) {
	#analytics .analytics-chart-widget .dash_chart_badge, #accounting .analytics-chart-widget .dash_chart_badge, #wiki .analytics-chart-widget .dash_chart_badge{
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	#analytics .analytics-chart-widget .dash_chart_legend, #accounting .analytics-chart-widget .dash_chart_legend, #wiki .analytics-chart-widget .dash_chart_legend{
		flex-direction: column;
		align-items: flex-start;
	}

	#analytics .crm-table.stats_table, #accounting .crm-table.stats_table, #wiki .crm-table.stats_table,
	#analytics .crm-table--metrics.stats_table, #accounting .crm-table--metrics.stats_table, #wiki .crm-table--metrics.stats_table{
		min-width: 100% !important;
	}
}

/* ── Chart density by bar count (set via data-chart-points on .ui-chart-inner) ── */
#analytics .ui-chart-inner[data-chart-points] .dash_chart_bars, #accounting .ui-chart-inner[data-chart-points] .dash_chart_bars, #wiki .ui-chart-inner[data-chart-points] .dash_chart_bars{
	gap: clamp(1px, 0.3vw, 4px);
}

#analytics .ui-chart-inner[data-chart-points="18"] .dash_chart_bar, #accounting .ui-chart-inner[data-chart-points="18"] .dash_chart_bar, #wiki .ui-chart-inner[data-chart-points="18"] .dash_chart_bar,
#analytics .ui-chart-inner[data-chart-points="17"] .dash_chart_bar, #accounting .ui-chart-inner[data-chart-points="17"] .dash_chart_bar, #wiki .ui-chart-inner[data-chart-points="17"] .dash_chart_bar,
#analytics .ui-chart-inner[data-chart-points="16"] .dash_chart_bar, #accounting .ui-chart-inner[data-chart-points="16"] .dash_chart_bar, #wiki .ui-chart-inner[data-chart-points="16"] .dash_chart_bar{
	max-width: min(28px, 4.5vw);
}

@media (max-width: 768px) {
	#analytics .ui-chart-inner[data-chart-points] .dash_chart_bar, #accounting .ui-chart-inner[data-chart-points] .dash_chart_bar, #wiki .ui-chart-inner[data-chart-points] .dash_chart_bar{
		max-width: min(18px, 3.8vw);
	}

	#analytics .ui-chart-inner[data-chart-points] .dash_chart_month--sparse, #accounting .ui-chart-inner[data-chart-points] .dash_chart_month--sparse, #wiki .ui-chart-inner[data-chart-points] .dash_chart_month--sparse{
		visibility: hidden;
	}
}


/* ================================================================== */
/* Accounting / My Cash */
/* Source: modules/my_cash/styles/my_cash.css */
/* ================================================================== */
/**
 * My Cash module - специфічні стилі.
 * Спільний стандарт KPI/таблиць/фільтра: modules/dashboard/styles/stats_shared.css
 */

#my_cash .mc_card--transactions .mc_card_icon,
#analytics .mc_card--transactions .mc_card_icon {
	background: rgba(var(--primary-rgb), 0.12);
	color: var(--primary);
}

#my_cash .mc_card--deals .mc_card_icon,
#analytics .mc_card--deals .mc_card_icon {
	background: var(--info-light);
	color: var(--info);
}

#my_cash .mc_card--avg_cost .mc_card_icon,
#my_cash .mc_card--avg_profit .mc_card_icon,
#analytics .mc_card--avg_cost .mc_card_icon,
#analytics .mc_card--avg_profit .mc_card_icon {
	background: rgba(var(--s2-rgb), 0.12);
	color: var(--s2);
}

#my_cash .mc_card--roi .mc_card_icon,
#analytics .mc_card--roi .mc_card_icon {
	background: var(--success-light);
	color: var(--success);
}

/* Transactions - payment type column */
#my_cash .mc-tx-pay-type-col,
#analytics .mc-tx-pay-type-col,
#accounting .mc-tx-pay-type-col {
	white-space: nowrap;
}

#analytics .mc-tx-pay-type-col .mc-tx-pay-type,
#accounting .mc-tx-pay-type-col .mc-tx-pay-type {
	margin-left: auto;
}

#my_cash .mc-tx-pay-type {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	padding: 3px 8px;
	border-radius: 5px;
	background: #f9fafb;
	color: #4b5563;
	border: 1px solid #e5e7eb;
}

#analytics .mc-tx-pay-type,
#accounting .mc-tx-pay-type {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--analytics-pay-bg);
	color: var(--analytics-pay-text);
	border: 1px solid var(--analytics-pay-border);
}

#my_cash .mc-tx-pay-type--cash {
	background: #f7faf8;
	color: #3f5f4a;
	border-color: #d9e8df;
}

#analytics .mc-tx-pay-type--cash,
#accounting .mc-tx-pay-type--cash {
	background: var(--analytics-pay-cash-bg);
	color: var(--analytics-pay-cash-text);
	border-color: var(--analytics-pay-cash-border);
}

#my_cash .mc-tx-pay-type--terminal {
	background: #f8fafc;
	color: #475569;
	border-color: #e2e8f0;
}

#analytics .mc-tx-pay-type--terminal,
#accounting .mc-tx-pay-type--terminal {
	background: var(--analytics-pay-terminal-bg);
	color: var(--analytics-pay-terminal-text);
	border-color: var(--analytics-pay-terminal-border);
}

#my_cash .mc-tx-pay-type--card {
	background: #faf9fc;
	color: #5c5568;
	border-color: #e8e4ef;
}

#analytics .mc-tx-pay-type--card,
#accounting .mc-tx-pay-type--card {
	background: var(--analytics-pay-card-bg);
	color: var(--analytics-pay-card-text);
	border-color: var(--analytics-pay-card-border);
}


/* ================================================================== */
/* Accounting - theme tokens */
/* Source: modules/accounting/styles/accounting_theme.css */
/* ================================================================== */
/**
 * Accounting theme — tokens come from Analytics dual selectors
 * in analytics_theme.css (#accounting.accounting_page).
 * Keep this file as a no-op marker for the asset pipeline.
 */


/* ================================================================== */
/* Accounting - dashboard */
/* Source: modules/accounting/styles/accounting_core.css */
/* ================================================================== */
/**
 * Accounting — layout bridge only.
 * Stat cards / tables: Analytics classes only (dual selectors in analytics_*.css).
 * Category tags: Device Catalog classes (.dc-tag, .dc-icon-btn, …) + modal polish 1:1.
 */

#accounting.accounting_page {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap, 10px);
	box-sizing: border-box;
}

#accounting .acc-tab-body {
	display: flex;
	flex-direction: column;
	gap: var(--analytics-gap, 10px);
	width: 100%;
	min-width: 0;
}

#accounting .acc-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Синхрон з date-filter trigger (--crm-df-trigger-size: 30px) */
#accounting .acc-add-btn,
#accounting .acc-settings-btn {
	height: 30px;
	min-height: 30px;
	border-radius: 5px;
	align-self: center;
	box-sizing: border-box;
}

#accounting .acc-settings-btn {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
	max-height: 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#accounting .acc-settings-btn .material-icons {
	font-size: 18px;
	line-height: 1;
}

#accounting .acc-header-actions .crm-date-filter {
	align-self: center;
}

#accounting .acc-pagination {
	display: flex;
	justify-content: center;
	padding-top: 10px;
}

#accounting .acc-pagination .pagination {
	margin: 0;
}

/* Transaction table — compact technical cols, flexible comment */
#accounting .acc-tx-table {
	width: 100%;
	table-layout: fixed;
}

#accounting .acc-tx-table .acc-tx-col-tight,
#accounting .acc-tx-table col.stats_col_actions_w {
	width: 1%;
	min-width: 0;
	max-width: none;
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 8px;
}

#accounting .acc-tx-table th.col-actions,
#accounting .acc-tx-table td.col-actions {
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	text-align: right !important;
	padding-left: 4px;
	padding-right: 6px;
}

#accounting .acc-tx-table td.col-actions .ds-row-delete-btn,
#accounting .acc-tx-table td.col-actions .acc-tx-delete-btn {
	margin-left: auto;
}

#accounting .acc-tx-table .acc-tx-col-type {
	width: 1%;
	white-space: nowrap;
}

#accounting .acc-tx-table .acc-tx-col-cat {
	width: 12%;
	min-width: 6rem;
	max-width: 10rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#accounting .acc-tx-table .acc-tx-col-amount {
	width: 1%;
	white-space: nowrap;
}

#accounting .acc-tx-table .acc-tx-comment {
	width: auto;
	min-width: 200px;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

#accounting .acc-tx-table .acc-tx-user {
	width: 1%;
	max-width: 7rem;
}

#accounting .acc-tx-delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	padding: 0;
	border-radius: 5px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-muted, #6b7280);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#accounting .acc-tx-delete-btn:hover {
	color: var(--danger, #dc2626);
	background: rgba(220, 38, 38, 0.08);
}

#accounting .acc-tx-delete-btn.is-delete-confirm {
	background: var(--danger, #dc2626);
	border-color: var(--danger, #dc2626);
	color: #fff;
}

#accounting .acc-tx-row.is-removing {
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#accounting .acc-tx-empty {
	color: var(--analytics-text-muted, #9CA3AF);
}

/* Author tracking — muted, compact */
#accounting .acc-tx-author {
	display: block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--analytics-text-muted, #6B7280);
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#accounting .acc-tx-date {
	display: block;
	white-space: nowrap;
}

#accounting .acc-tx-author--under-date {
	display: none;
	margin-top: 2px;
}

/* ── Categories modal = Device Catalog tag editor polish ── */
.acc-cats-dialog .dlg_body,
#acc_cats_modal .dlg_body {
	padding: 10px;
}

.acc-cats-editor {
	--dc-tag-h: 30px;
	--dc-tag-gap: 5px;
	--dc-tag-pad-x: 8px;
	--dc-tag-action: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.acc-cats-editor .crm-tab-panel.is-active {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.acc-cats-editor .dc-tags-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.acc-cats-editor .dc-tags.dc-tags--edit {
	gap: var(--dc-tag-gap);
	min-height: 0;
	align-items: center;
}

.acc-cats-editor .dc-tag {
	box-sizing: border-box;
	height: var(--dc-tag-h);
	min-height: var(--dc-tag-h);
	max-height: var(--dc-tag-h);
	padding: 0 var(--dc-tag-pad-x);
	gap: 4px;
	line-height: 1.25;
	overflow: hidden;
	border-radius: 5px;
}

.acc-cats-editor .dc-tag__drag {
	cursor: grab;
	font-size: 16px;
	line-height: 1;
	color: var(--text-muted, #6B7280);
	flex-shrink: 0;
	user-select: none;
}

.acc-cats-editor .dc-tag__view,
.acc-cats-editor .dc-tag__edit-form {
	display: inline-flex;
	align-items: center;
	height: 100%;
	max-height: 100%;
	padding: 0;
	margin: 0;
	gap: 4px;
	min-width: 0;
}

.acc-cats-editor .dc-tag__edit-form {
	flex: 1 1 auto;
}

.acc-cats-editor .dc-tag .dc-icon-btn {
	width: var(--dc-tag-action);
	min-width: var(--dc-tag-action);
	height: var(--dc-tag-action);
	min-height: var(--dc-tag-action);
	max-height: var(--dc-tag-action);
	padding: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	border: none;
	background: transparent;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	border-radius: 5px;
}

.acc-cats-editor .dc-tag .dc-icon-btn:hover:not(:disabled):not(.is-disabled) {
	background: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
}

.acc-cats-editor .dc-tag .dc-icon-btn .material-icons {
	font-size: 14px;
	line-height: 1;
	pointer-events: none;
}

.acc-cats-editor .dc-tag .form-control-sm.dc-tag__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 72px;
	max-width: 140px;
	height: var(--dc-tag-action) !important;
	min-height: var(--dc-tag-action) !important;
	max-height: var(--dc-tag-action) !important;
	padding: 0 6px !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	border-radius: 5px;
	box-sizing: border-box;
}

.acc-cats-editor .dc-tag__label {
	line-height: 1.25;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acc-cats-editor .dc-tag__actions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 2px;
	flex-shrink: 0;
	height: 100%;
	position: relative;
	z-index: 3;
}

.acc-cats-editor .dc-tag__delete-btn.is-disabled,
.acc-cats-editor .dc-tag__delete-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.acc-cats-editor .dc-add-tag-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.acc-cats-editor .dc-add-tag-input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--dc-tag-h);
	border-radius: 5px;
}

.acc-cats-status {
	min-height: 18px;
	font-size: 12px;
	color: var(--text-muted, #6B7280);
}

.acc-cats-status.is-error {
	color: #DC2626;
}

/* Same delete-confirm pulse as Device Catalog tags */
.acc-cats-editor .dc-tag__delete-btn.is-delete-confirm {
	background: var(--danger, #dc2626);
	border-color: var(--danger, #dc2626);
	color: #fff;
}

/* ── Add transaction modal (compact = Device Catalog density) ── */
.acc-tx-dialog .dlg_body {
	padding: 10px;
}

.acc-tx-form__stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

.acc-tx-form__field {
	margin: 0;
	min-height: 0;
	position: relative;
}

.acc-tx-form__field .form-label,
.acc-tx-form__field .form-label--required {
	margin-bottom: 4px;
	font-size: var(--font-micro, 0.75rem);
}

.acc-tx-form__field .form-error {
	display: block;
	min-height: 16px;
	margin-top: 2px;
	font-size: 11px;
	line-height: 16px;
	color: #dc2626;
}

.acc-tx-form__field .form-error[hidden] {
	display: block !important;
	visibility: hidden;
}

.acc-tx-form__field .form-control,
.acc-tx-form__field .form-select,
.acc-tx-form__field textarea,
.acc-tx-form .acc-tx-submit,
.acc-tx-form__field .form-control.is-invalid,
.acc-tx-form__field .form-select.is-invalid {
	border-radius: 5px;
}

.acc-tx-form__field .form-control-sm,
.acc-tx-form__field select.form-control-sm {
	min-height: 30px;
	height: 30px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: var(--font-caption, 0.8125rem);
}

.acc-tx-cat-source {
	display: none !important;
}

.acc-tx-form__field textarea,
.acc-tx-form__field textarea.form-control-sm {
	height: auto;
	min-height: 56px;
	resize: vertical;
	line-height: 1.35;
}

/* Segmented control: Income / Expense */
.acc-tx-seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 3px;
	background: var(--surface-secondary, var(--bg-body, #f3f4f6));
	border: 1px solid var(--border-color, #e5e7eb);
	border-radius: 5px;
	box-sizing: border-box;
	min-height: 36px;
}

.acc-tx-seg__btn {
	appearance: none;
	border: none;
	margin: 0;
	padding: 6px 10px;
	min-height: 30px;
	border-radius: 5px;
	background: transparent;
	color: var(--text-muted, #6b7280);
	font: inherit;
	font-size: var(--font-caption, 0.8125rem);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.acc-tx-seg__btn:hover:not(:disabled) {
	color: var(--text-main, #111827);
	background: rgba(0, 0, 0, 0.04);
}

.acc-tx-seg__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.acc-tx-seg__btn.is-active.is-income,
.acc-tx-seg.is-income .acc-tx-seg__btn.is-active {
	background: rgba(34, 197, 94, 0.16);
	color: #15803d;
	box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
}

.acc-tx-seg__btn.is-active.is-expense,
.acc-tx-seg.is-expense .acc-tx-seg__btn.is-active {
	background: rgba(239, 68, 68, 0.14);
	color: #b91c1c;
	box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.acc-tx-form__status {
	min-height: 18px;
	font-size: 12px;
	color: var(--text-muted, #6b7280);
}

.acc-tx-form__status.is-error {
	color: #dc2626;
}

.acc-tx-form__actions {
	margin: 0;
	padding-top: 4px;
}

.acc-tx-submit.is-loading {
	opacity: 0.72;
	pointer-events: none;
}

/* Smooth row insert */
#accounting .acc-tx-row--enter {
	opacity: 0;
	transform: translateY(-6px);
	background: rgba(var(--primary-rgb, 37, 99, 235), 0.08);
	transition:
		opacity 0.28s ease,
		transform 0.28s ease,
		background-color 0.9s ease;
}

#accounting .acc-tx-row--enter.is-visible {
	opacity: 1;
	transform: translateY(0);
	background: transparent;
}

[data-theme-resolved='dark'] .acc-tx-seg {
	background: var(--surface-secondary, #2a2d33);
	border-color: var(--ds-border, var(--border-color));
}

[data-theme-resolved='dark'] .acc-tx-seg__btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 767px) {
	#accounting .acc-header-actions {
		width: 100%;
		flex-wrap: wrap;
		min-width: 0;
	}

	#accounting .acc-tx-table .acc-tx-col-cat {
		max-width: 7rem;
	}

	#accounting .acc-tx-table .acc-tx-comment {
		min-width: 8rem;
		display: table-cell;
		white-space: normal;
	}

	#accounting .acc-tx-table .col-date {
		white-space: nowrap;
	}

	#accounting .acc-tx-table .acc-tx-user,
	#accounting .acc-tx-table .acc-tx-time {
		display: none;
	}

	#accounting .acc-tx-author--under-date {
		display: block;
	}

	#accounting .acc-pagination {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {
	#accounting .acc-tx-table .acc-tx-col-cat {
		max-width: 5.5rem;
	}
}


/* ================================================================== */
/* Orders / Device catalog */
/* Source: system/device_catalog/css/device_catalog.css */
/* ================================================================== */
/* Device catalog - settings + order picker (visual tokens from DS) */

.dc-page .section-desc {
	margin-top: var(--space-sm);
	color: var(--text-muted);
	font-size: var(--font-caption);
}

#device-catalog-page .dc-type-panel {
	width: 100%;
}

/* -- List page -- */
.dc-list__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.dc-search-form {
	display: flex;
	gap: 10px;
	flex: 1;
	min-width: 0;
	max-width: 360px;
}

.dc-add-type-form--inline {
	display: flex;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.dc-panel--list {
	margin-top: 0;
}

/* -- Detail page -- */
.dc-detail__nav {
	margin-top: 10px;
	margin-bottom: 10px;
}

.dc-detail__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.dc-detail__title {
	margin: 0;
	font-size: var(--font-title);
	flex: 1;
	min-width: 0;
}

.dc-detail__meta {
	color: var(--text-muted);
	font-size: var(--font-caption);
}

.dc-detail__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 900px) {
	.dc-detail__grid {
		grid-template-columns: 1fr;
	}
}

.dc-panel {
	background: var(--ds-surface, var(--bg-card));
	border: 1px solid var(--ds-border, var(--border-color));
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
	min-width: 0;
}

.dc-panel__head {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	min-width: 0;
}

.dc-panel__head h3 {
	margin: 0;
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dc-panel__hint {
	color: var(--text-muted);
	font-size: var(--font-micro);
}

/* -- Type list -- */
.dc-type-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dc-type-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--ds-border, var(--border-color));
	border-radius: 5px;
	background: var(--ds-surface, var(--bg-main));
	min-width: 0;
}

.dc-type-item__link {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px;
	text-decoration: none;
	color: var(--text-main);
}

.dc-type-item__name {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-caption);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dc-type-item__meta {
	font-size: var(--font-micro);
	color: var(--text-muted);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dc-type-item__actions {
	display: flex;
	flex-shrink: 0;
	gap: 2px;
	padding-right: 6px;
	position: relative;
	z-index: 2;
}

.dc-type-item.is-editing {
	flex-wrap: wrap;
}

.dc-type-item__actions[hidden] {
	display: none !important;
}

.dc-drag-handle {
	touch-action: none;
}

/* -- Tags (models & faults) -- */
.dc-tags-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.dc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	min-height: 0;
}

.dc-add-tag-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.dc-add-tag-form__input {
	flex: 1;
	min-width: 160px;
	max-width: 280px;
}

.dc-type-edit-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.dc-type-edit-form .form-control {
	min-width: 180px;
	max-width: 280px;
}

.dc-type-item__edit-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	padding: var(--space-sm) var(--space-sm);
}

.dc-tag__view {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.dc-tag__edit-form {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	margin: 0;
	height: 100%;
}

.dc-tag__edit-form[hidden],
.dc-tag__view[hidden] {
	display: none !important;
}

.dc-tag__input {
	width: 140px;
	min-width: 100px;
}

.dc-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
	height: 30px;
	min-height: 30px;
	max-height: 30px;
	border: 1px solid var(--ds-border, var(--border-color));
	border-radius: var(--ds-tag-radius, var(--radius-full));
	background: var(--ds-surface, var(--bg-main));
	font-size: var(--ds-tag-font, var(--font-micro));
	font-weight: var(--ds-tag-weight, var(--font-weight-semibold));
	line-height: 1.25;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.dc-tag__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
	line-height: 1.25;
}

.dc-tag__actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-left: var(--space-xs);
	flex-shrink: 0;
}

.dc-tag--add {
	justify-content: center;
	min-width: var(--ds-icon-btn-size, 30px);
	min-height: var(--ds-icon-btn-size, 30px);
	padding: 0;
	border-style: dashed;
	border-color: rgba(var(--primary-rgb), 0.45);
	color: var(--primary);
	cursor: pointer;
	background: transparent;
	margin-top: 0;
}

.dc-add-tag-row .dc-tag--add {
	align-self: center;
	flex-shrink: 0;
	width: var(--ds-input-h, 36px);
	min-width: var(--ds-input-h, 36px);
	height: var(--ds-input-h, 36px);
	min-height: var(--ds-input-h, 36px);
}

.dc-tag--add:hover {
	background: rgba(var(--primary-rgb), 0.08);
}

.dc-tag--add .material-icons {
	font-size: 18px;
}

.dc-drag-handle {
	cursor: grab;
	color: var(--text-muted);
	font-size: 16px;
	user-select: none;
	flex-shrink: 0;
}

.dc-sort-item.is-dragging,
.dc-type-item.is-dragging,
.dc-tag.is-dragging {
	opacity: 0.5;
}

.dc-icon-btn {
	border: none;
	background: transparent;
	padding: var(--space-xs);
	cursor: pointer;
	color: var(--text-muted);
	border-radius: var(--ds-icon-btn-radius, var(--radius-sm));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ds-icon-btn-size, 30px);
	min-height: var(--ds-icon-btn-size, 30px);
}

.dc-icon-btn:hover {
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--primary);
}

.dc-icon-btn--danger:hover {
	color: var(--danger);
	background: rgba(var(--danger-rgb), 0.1);
}

.dc-icon-btn .material-icons {
	font-size: 16px;
}

.dc-inline-form {
	display: inline;
	margin: 0;
}

.dc-empty {
	color: var(--text-muted);
	font-size: var(--font-caption);
	padding: var(--space-12) 0;
}

.dc-add-type-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* -- Order form picker -- */
.device-catalog-picker {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.device-catalog-picker .device-model-select:disabled {
	opacity: 0.6;
}

.device-catalog-faults-host .device-fatal-pick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	max-height: 320px;
	overflow-y: auto;
	padding: var(--space-sm);
	border: 1px solid var(--ds-border, var(--border-color));
	border-radius: var(--radius-md);
	background: var(--ds-surface, var(--bg-main));
}

.device-catalog-picker__hint {
	color: var(--text-muted);
	font-size: var(--font-caption);
	margin: 0;
}

.device-catalog-picker__hint--error {
	color: var(--danger);
}

.device-fatal-pick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.device-fatal-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 var(--ds-tag-pad-x, 12px);
	min-height: var(--ds-tag-height, 30px);
	border: 1px solid var(--ds-border, var(--border-color));
	border-radius: var(--ds-tag-radius, var(--radius-full));
	background: var(--ds-surface, var(--bg-card));
	cursor: pointer;
	font-size: var(--ds-tag-font, var(--font-micro));
	font-weight: var(--ds-tag-weight, var(--font-weight-semibold));
	user-select: none;
}

.device-fatal-chip.is-active {
	border-color: rgba(var(--primary-rgb), 0.45);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

.device-fatal-chip input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.device-pick-empty {
	color: var(--text-muted);
	font-size: var(--font-caption);
}

/* -- Searchable model combobox -- */
.dc-model-combo {
	position: relative;
	width: 100%;
}

.dc-model-combo__field {
	position: relative;
	display: flex;
	align-items: stretch;
}

.dc-model-combo__input {
	width: 100%;
	min-height: var(--ds-input-h, var(--form-height, 36px));
	height: var(--ds-input-h, var(--form-height, 36px));
	padding-right: 40px;
	transition:
		border-color var(--form-state-transition, 200ms ease),
		background-color var(--form-state-transition, 200ms ease),
		outline-color var(--form-state-transition, 200ms ease);
}

.dc-model-combo__input:hover:not(:disabled) {
	border-color: var(--form-hover-border, var(--border-hover));
}

.dc-model-combo__input:focus,
.dc-model-combo.is-open .dc-model-combo__input {
	border-color: var(--primary);
	background: var(--form-focus-bg, var(--input-focus-bg));
	outline: var(--form-focus-outline, 2px solid rgba(var(--primary-rgb), 0.22));
	outline-offset: 0;
	box-shadow: none;
}

.dc-model-combo__toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: 0 var(--ds-input-radius, var(--radius-md)) var(--ds-input-radius, var(--radius-md)) 0;
}

.dc-model-combo__toggle:hover:not(:disabled) {
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--primary);
}

.dc-model-combo__toggle .material-icons {
	font-size: 20px;
	pointer-events: none;
}

.dc-model-combo__native {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.dc-model-combo__list {
	position: absolute;
	z-index: var(--ds-z-dropdown, 1200);
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	margin: 0;
	padding: var(--space-xs);
	list-style: none;
	max-height: min(280px, 40vh);
	overflow-y: auto;
	border: 1px solid var(--ds-border, var(--border-color));
	border-radius: var(--radius-md);
	background: var(--ds-surface, var(--bg-card));
	box-shadow: 0 8px 24px rgba(20, 23, 28, 0.12);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--form-state-transition, 200ms ease),
		transform var(--form-state-transition, 200ms ease);
}

.dc-model-combo.is-open .dc-model-combo__list:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
}

.dc-model-combo__option {
	padding: var(--space-sm) var(--space-12);
	border-radius: var(--radius-md);
	font-size: var(--font-caption);
	color: var(--text-main);
	cursor: pointer;
	transition: background-color var(--ds-duration-fast, 120ms) ease;
}

.dc-model-combo__option:hover,
.dc-model-combo__option.is-focused {
	background: var(--gray-100);
	color: var(--primary);
}

.dc-model-combo__option.is-active {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
	font-weight: var(--font-weight-semibold);
}

.dc-model-combo__empty {
	padding: var(--space-sm) var(--space-12);
	font-size: var(--font-caption);
	color: var(--text-muted);
	cursor: default;
}

.dc-model-combo.is-disabled .dc-model-combo__input {
	opacity: 0.65;
	cursor: not-allowed;
}

.dc-model-combo.is-open .dc-model-combo__toggle {
	color: var(--primary);
}

@media (max-width: 767px) {
	.dc-model-combo__list {
		max-height: min(240px, 45vh);
	}

	.dc-model-combo__option {
		padding: var(--space-12);
		min-height: var(--touch-target-min, 44px);
		display: flex;
		align-items: center;
	}
}

/* Order form validation */
.device-catalog-picker .form-group.has-error .device-catalog-type,
.device-catalog-picker .form-group.error .device-catalog-type {
	border-color: var(--danger);
}

.dc-model-combo.is-invalid .dc-model-combo__input {
	border-color: var(--form-error-border, var(--danger));
	outline: 2px solid rgba(var(--danger-rgb), 0.25);
	outline-offset: 0;
	background: var(--form-error-bg, var(--danger-light));
}

.device-catalog-faults-host.is-invalid {
	border: 1px solid var(--danger);
	border-radius: var(--radius-md);
	padding: 8px;
}

.device-order-form-summary {
	margin-bottom: var(--space-md);
}


/* ================================================================== */
/* Orders - theme tokens */
/* Source: modules/orders/styles/order_theme.css */
/* ================================================================== */
/**
 * Order card - theme tokens (Light / Dark).
 * Resolved via global crm_theme_mode → html[data-theme-resolved].
 * Hardcoded palette values live ONLY in this file.
 */

[data-theme-resolved='light'] .device-order-page {
	--order-bg-block: #FFFFFF;
	--order-bg-subtle: #F9FAFB;
	--order-bg-muted: #F3F4F6;
	--order-bg-elevated: #FFFFFF;
	--order-text-main: #111827;
	--order-text-strong: #000000;
	--order-text-muted: #6B7280;
	--order-text-subtle: #9CA3AF;
	--order-text-inverse: #FFFFFF;
	--order-border: #E5E7EB;
	--order-border-strong: #D1D5DB;
	--order-border-row: #F3F4F6;
	--order-hover: #F9FAFB;
	--order-shadow-hover: rgba(0, 0, 0, 0.05);
	--order-icon-muted: #4B5563;
	--order-chip-bg: #E5E7EB;
	--order-chip-border: #D1D5DB;
	--order-chip-text: #374151;
	--order-chip-hover-bg: #D1D5DB;
	--order-chip-hover-border: #9CA3AF;
	--order-badge-bg: #F9FAFB;
	--order-badge-border: #E5E7EB;
	--order-composer-shadow: rgba(0, 0, 0, 0.08);
	--order-accept-new-text: #111827;
}

[data-theme-resolved='dark'] .device-order-page {
	--order-bg-block: #1F2937;
	--order-bg-subtle: #111827;
	--order-bg-muted: #374151;
	--order-bg-elevated: #263040;
	--order-text-main: #F9FAFB;
	--order-text-strong: #FFFFFF;
	--order-text-muted: #9CA3AF;
	--order-text-subtle: #6B7280;
	--order-text-inverse: #111827;
	--order-border: #374151;
	--order-border-strong: #4B5563;
	--order-border-row: #2D3748;
	--order-hover: #374151;
	--order-shadow-hover: rgba(0, 0, 0, 0.25);
	--order-icon-muted: #9CA3AF;
	--order-chip-bg: #374151;
	--order-chip-border: #4B5563;
	--order-chip-text: #E5E7EB;
	--order-chip-hover-bg: #4B5563;
	--order-chip-hover-border: #6B7280;
	--order-badge-bg: #263040;
	--order-badge-border: #374151;
	--order-composer-shadow: rgba(0, 0, 0, 0.35);
	--order-accept-new-text: #111827;
}

/* Semantic aliases + strict spacing / header-btn scale */
.device-order-page {
	--order-gap: 10px;
	--order-block-pad: 10px;
	--order-card-radius: 5px;
	--order-gap-sm: 10px;
	--order-btn-h: 36px;
	--order-icon-size: 20px;

	/* Header action chips (docs, client link, add service, edit/delete) */
	--order-header-btn-h: 22px;
	--order-header-btn-min-w: 30px;
	--order-header-btn-font: 12px;
	--order-header-btn-icon: 10px;
	--order-header-btn-radius: 5px;
	--order-header-btn-pad-x: 6px;
	--order-header-btn-gap: 4px;

	--oc-block-padding: var(--order-block-pad);
	--oc-block-gap: var(--order-gap);
	--oc-icon-size: var(--order-icon-size);
	--device-block-pad: var(--order-block-pad);
	--oc-gap-sm: var(--order-gap-sm);
	--oc-btn-h: var(--order-btn-h);
	--oc-radius: var(--order-card-radius);
	--oc-icon: var(--order-icon-size);
	--oc-gap: var(--order-gap);

	--oc-text: var(--order-text-main);
	--oc-muted: var(--order-text-muted);
	--oc-subtle-bg: var(--order-bg-subtle);
	--oc-divider: var(--order-border);

	--bg-block: var(--order-bg-block);
	--text-main: var(--order-text-main);
	--text-muted: var(--order-text-muted);
	--border-color: var(--order-border);

	color: var(--order-text-main);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.device-order-page .ui-block {
	background-color: var(--order-bg-block);
	border-color: var(--order-border);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.device-order-page .ui-block-header {
	border-bottom-color: var(--order-border);
}

.device-order-page .ui-block-title {
	color: var(--order-text-main);
}

.device-order-page .device-info-label,
.device-order-page .device-side-row__k,
.device-order-page .device-master-card__date-label,
.device-order-page .device-master-card__date-time,
.device-order-page .device-order-hero__date-label {
	color: var(--order-text-muted);
}

.device-order-page .device-info-value,
.device-order-page .device-side-row__v,
.device-order-page .device-master-card__date-day,
.device-order-page .device-master-card__date-value,
.device-order-page .device-order-hero__date-value,
.device-order-page .device-info-value--multiline,
.device-order-page .device-info-value--multiline p {
	color: var(--order-text-main);
}

.device-order-page .device-master-card__date {
	background: var(--order-bg-subtle);
	border-color: var(--order-border);
}

.device-order-page .device-master-card__stat,
.device-order-page .device-order-hero__stats > span {
	background: var(--order-bg-subtle);
	color: var(--order-text-muted);
}

.device-order-page .device-master-card__specs,
.device-order-page .device-master-card__footer,
.device-order-page .device-order-hero__call,
.device-order-page .device-order-hero__dates,
.device-order-page .device-info-row,
.device-order-page .device-side-row,
.device-order-page .device-track-item,
.device-order-page .device-work-item {
	border-color: var(--order-border);
}

.device-order-page .device-track-panel.ui-block {
	background: var(--order-bg-subtle);
}

.device-order-page .device-call-ghost-btn,
.device-order-page .device-call-bar__reset.device-call-ghost-btn {
	color: var(--order-text-muted);
}

.device-order-page .device-call-ghost-btn__icon {
	color: var(--order-text-muted);
}

.device-order-page .device-call-ghost-btn:hover,
.device-order-page .device-call-bar__reset.device-call-ghost-btn:hover {
	background: var(--order-bg-muted);
	color: var(--order-text-main);
}

.device-order-page .device-call-ghost-btn:hover .device-call-ghost-btn__icon {
	color: var(--order-text-main);
}

.device-order-page .client-phone-group {
	background: var(--order-badge-bg);
	border-color: var(--order-border);
}

.device-order-page .client-phone-group__number {
	color: var(--order-text-main);
}

.device-order-page .device-client-card__call .device-call-bar__undo.device-call-ghost-btn {
	border-color: var(--order-border);
	color: var(--order-text-muted);
}

.device-order-page .device-client-card__call .device-call-bar__undo.device-call-ghost-btn:hover {
	background: var(--order-badge-bg);
	color: var(--order-text-main);
	border-color: var(--order-border-strong);
}

.device-order-page .chat-composer,
.device-order-page .chat-input-area {
	background: var(--order-bg-block);
	border-top-color: var(--order-border);
	box-shadow: 0 -8px 24px var(--order-composer-shadow);
}

.device-order-page .chat-composer__row textarea,
.device-order-page .chat-composer__input {
	background: var(--order-bg-muted);
	color: var(--order-text-main);
}

.device-order-page .chat-composer__row textarea:focus,
.device-order-page .chat-composer__input:focus {
	background: var(--order-bg-block);
}

.device-order-page .chat-msg--incoming .device-chat__bubble,
.device-order-page .message-left .device-chat__bubble,
.device-order-page .device-chat__bubble--system {
	background: var(--order-bg-muted);
	color: var(--order-text-main);
}

.device-order-page .device-feed-empty {
	background: var(--order-bg-subtle);
	color: var(--order-text-muted);
}

.device-order-page .device-doc-row {
	background: var(--order-bg-subtle);
	border-color: var(--order-border);
}

.device-order-page .status-timeline-bar a.status-node.status-node--accept-new,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new .status-node__label,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:hover,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:focus-visible,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:active {
	color: var(--order-accept-new-text);
}


/* ================================================================== */
/* Orders / Detail page */
/* Source: modules/orders/styles/order_detail.css */
/* ================================================================== */
/**
 * Order card (/?device=) - layout & components.
 * Theme tokens: order_theme.css (light/dark via data-theme-resolved).
 * Scope: .device-order-page only.
 */

/* ── Page shell (layout; tokens - order_theme.css) ── */
.device-order-page {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	margin-bottom: 0;
	box-sizing: border-box;
	overflow-x: hidden;
}

.device-order-page > .device-flash-alert {
	margin: 0 0 var(--order-gap, 10px);
}

/* ══════════════════════════════════════════════════════════════════════════
   UI BLOCK - єдиний стандарт: pad 10px, radius 5px, shadow-sm
   ══════════════════════════════════════════════════════════════════════════ */
.device-order-page .ui-block {
	background: var(--order-bg-block);
	border: 1px solid var(--order-border);
	border-radius: var(--order-card-radius, 5px);
	padding: var(--order-block-pad, 10px);
	margin: 0;
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
}

.device-order-page .ui-block:hover {
	transform: none;
	box-shadow: var(--shadow-sm);
	border-color: var(--order-border);
}

.device-order-page .ui-block-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--order-gap, 10px);
	min-width: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.device-order-page .ui-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--order-gap, 10px);
	min-height: unset;
	height: auto;
	box-sizing: border-box;
	/* 10px над лінією (padding) + 10px під лінією (margin) - контент не прилипає */
	padding: 0 0 var(--order-block-pad, 10px);
	margin: 0 0 var(--order-block-pad, 10px);
	border-bottom: 1px solid var(--order-border);
	min-width: 0;
}

.device-order-page .ui-block-header__main {
	display: flex;
	align-items: center;
	gap: var(--order-gap, 10px);
	min-width: 0;
	flex: 1 1 auto;
}

.device-order-page .ui-block-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--order-text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.device-order-page .ui-block-header__main > .ui-icon,
.device-order-page .ui-block-header__main > .material-icons {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	color: var(--order-text-muted);
}

/* ── Заголовок блоку: єдиний стандарт кнопок / індикаторів ──
   height 22px · min-width 30px · font 12px · icons 10px · gap 10px ── */
.device-order-page .ui-block-header-actions,
.device-order-page .order-header-actions,
.device-order-page .device-feed-docs .doc-stats-row {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--order-gap, 10px);
	flex-shrink: 0;
}

.device-order-page .doc-stat-badge,
.device-order-page .ui-block-header-chip,
.device-order-page .ui-block-header .device-feed-add,
.device-order-page .ui-block-header .device-feed-add--stock,
.device-order-page .ui-block-header .device-feed-add--icon,
.device-order-page .ui-block-header .device-feed-add--manual,
.device-order-page .device-master-card > .ui-block-header .device-status-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--order-header-btn-gap, 4px);
	height: var(--order-header-btn-h, 22px);
	min-height: var(--order-header-btn-h, 22px);
	max-height: var(--order-header-btn-h, 22px);
	min-width: var(--order-header-btn-min-w, 30px);
	width: auto;
	padding: 0 var(--order-header-btn-pad-x, 6px);
	margin: 0;
	border-radius: var(--order-header-btn-radius, 5px);
	box-sizing: border-box;
	font-size: var(--order-header-btn-font, 12px);
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.device-order-page .doc-stat-badge {
	border: 1px solid var(--order-badge-border);
	background: var(--order-badge-bg);
	color: var(--order-text-muted);
	cursor: help;
	user-select: none;
}

.device-order-page .ui-block-header-chip {
	border: 1px solid var(--order-chip-border);
	background: var(--order-chip-bg);
	color: var(--order-chip-text);
	cursor: pointer;
}

.device-order-page .ui-block-header-chip--icon-only,
.device-order-page .ui-block-header .device-feed-add--icon,
.device-order-page .ui-block-header .device-feed-add--manual {
	min-width: var(--order-header-btn-min-w, 30px);
	padding: 0 var(--order-header-btn-pad-x, 6px);
}

.device-order-page .ui-block-header-chip .material-icons,
.device-order-page .ui-block-header-chip .ui-icon,
.device-order-page .ui-block-header .ui-block-header-chip .material-icons,
.device-order-page .ui-block-header .ui-block-header-chip .ui-icon,
.device-order-page .ui-block-header .doc-stat-badge .doc-stat-badge__icon,
.device-order-page .ui-block-header .doc-stat-badge .material-icons.doc-stat-badge__icon,
.device-order-page .ui-block-header .device-feed-add .material-icons,
.device-order-page .ui-block-header .device-feed-add--stock .material-icons,
.device-order-page .doc-stat-badge .material-icons,
.device-order-page .doc-stat-badge .doc-stat-badge__icon {
	flex-shrink: 0;
	width: var(--order-header-btn-icon, 10px) !important;
	height: var(--order-header-btn-icon, 10px) !important;
	font-size: var(--order-header-btn-icon, 10px) !important;
	line-height: 1 !important;
	color: var(--order-icon-muted);
}

.device-order-page .doc-stat-badge .doc-stat-badge__icon,
.device-order-page .doc-stat-badge .material-icons.doc-stat-badge__icon {
	color: var(--order-text-subtle);
}

.device-order-page .ui-block-header-chip__label,
.device-order-page .doc-stat-badge__value {
	font-size: var(--order-header-btn-font, 12px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.device-order-page .ui-block-header-chip__label {
	color: var(--order-chip-text);
}

.device-order-page .doc-stat-badge__value {
	color: var(--order-text-main);
}

.device-order-page .ui-block-header-chip:hover {
	background: var(--order-chip-hover-bg);
	border-color: var(--order-chip-hover-border);
	color: var(--order-text-main);
}

.device-order-page .ui-block-header-chip:hover .material-icons,
.device-order-page .ui-block-header-chip:hover .ui-icon,
.device-order-page .ui-block-header-chip:hover .ui-block-header-chip__label {
	color: var(--order-text-main);
}

.device-order-page .doc-stat-badge:hover {
	color: var(--order-text-muted);
	background: var(--order-hover);
	border-color: var(--order-border);
}

.device-order-page .doc-stat-badge:hover .doc-stat-badge__icon {
	color: var(--order-text-muted);
}

.device-order-page .ui-block-header-chip--danger {
	border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.35);
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
	color: var(--danger, #dc3545);
}

.device-order-page .ui-block-header-chip--danger .material-icons,
.device-order-page .ui-block-header-chip--danger .ui-icon {
	color: var(--danger, #dc3545);
}

.device-order-page .ui-block-header-chip--danger:hover {
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.18);
	border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.45);
	color: var(--danger, #dc3545);
}

.device-order-page .ui-block-header-chip--danger:hover .material-icons,
.device-order-page .ui-block-header-chip--danger:hover .ui-icon {
	color: var(--danger, #dc3545);
}

/* Скинути глобальні .device-feed-add з design_system у шапці замовлення */
.device-order-page .ui-block-header .device-feed-add,
.device-order-page .ui-block-header .device-feed-add--stock,
.device-order-page .ui-block-header .device-feed-add--icon,
.device-order-page .ui-block-header .device-feed-add--manual {
	border: 1px solid var(--order-chip-border) !important;
	background: var(--order-chip-bg) !important;
	color: var(--order-chip-text) !important;
	opacity: 1 !important;
	text-decoration: none !important;
	height: var(--order-header-btn-h, 22px) !important;
	min-height: var(--order-header-btn-h, 22px) !important;
	max-height: var(--order-header-btn-h, 22px) !important;
	min-width: var(--order-header-btn-min-w, 30px) !important;
	padding: 0 var(--order-header-btn-pad-x, 6px) !important;
	font-size: var(--order-header-btn-font, 12px) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	gap: var(--order-header-btn-gap, 4px) !important;
	border-radius: var(--order-header-btn-radius, 5px)!important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.device-order-page .ui-block-header .device-feed-add:hover,
.device-order-page .ui-block-header .device-feed-add--stock:hover {
	background: var(--order-chip-hover-bg) !important;
	border-color: var(--order-chip-hover-border) !important;
	color: var(--order-text-main) !important;
}

/* Усі блоки замовлення - єдиний padding 10px (перебиває design_system !important) */
.device-order-page .ui-block.device-feed-section,
.device-order-page .ui-block.device-feed-docs,
.device-order-page .ui-block.device-feed-works,
.device-order-page .ui-block.device-feed-history,
.device-order-page .ui-block.device-client-card,
.device-order-page .ui-block.device-master-card,
.device-order-page .ui-block.device-track-panel {
	padding: var(--oc-block-padding) !important;
	margin-bottom: 0 !important;
}

.device-order-page .ui-block .ui-block-header {
	padding: 0 0 var(--oc-block-padding) !important;
	margin: 0 0 var(--oc-block-padding) !important;
}

.device-order-page .ui-block .ui-block-content {
	padding: 0 !important;
	margin: 0 !important;
}

/* Роздільник: 10px до лінії (без подвоєння margin+padding) */
.device-order-page .ui-block-rule {
	margin-top: var(--oc-block-padding);
	padding-top: 0;
	border-top: 1px solid var(--oc-divider);
}

.device-order-page .ui-block-rule--dashed {
	border-top-style: dashed;
}

/* ── Layout: CSS Grid - ліва 320px, права 1fr; gap 10px ── */
.device-order-page .device-order-body {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	column-gap: var(--order-gap, 10px);
	row-gap: var(--order-gap, 10px);
	align-items: start;
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Статус-бар - перший блок лівої колонки (100% від 320px) */
.device-order-page .device-order-status-row {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.device-order-page .device-order-info,
.device-order-page .device-order-feed {
	display: flex;
	flex-direction: column;
	gap: var(--order-gap, 10px);
	min-width: 0;
	max-width: 100%;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	align-self: stretch;
}

/* Перекриття legacy design_system (.device-order-info { max-width: 300px }) */
.device-order-page .device-order-info {
	position: sticky;
	top: 0;
	max-width: 100%;
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 2;
	overscroll-behavior: contain;
}

.device-order-page .device-order-feed {
	position: relative;
	top: 0 !important;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	justify-content: flex-start;
}

/* Mobile: flex-колонка - без накладання grid-колонок (320 + 10 + 500 + ~50 ≈ 880px) */
@media (max-width: 880px) {
	.device-order-page {
		min-height: 0;
	}

	.device-order-page .device-order-body {
		display: flex;
		flex-direction: column;
		gap: var(--order-gap, 10px);
		min-height: 0;
		grid-template-columns: unset;
		grid-template-rows: unset;
	}

	.device-order-page .device-order-info {
		order: 1;
		flex: 0 0 auto;
		display: flex !important;
		flex-direction: column;
		max-width: none;
		width: 100%;
		min-height: 0;
		position: static;
		top: auto;
		max-height: none;
		overflow: visible;
		z-index: auto;
	}

	.device-order-page .device-order-feed {
		order: 2;
		flex: 0 0 auto;
		position: relative;
		top: auto !important;
		height: auto;
		min-height: 0;
		width: 100%;
		z-index: auto;
	}

	.device-order-page .device-feed-history.device-feed-history--chat {
		flex: 0 0 auto;
		position: relative;
		min-height: 400px;
		height: auto;
		overflow: hidden;
	}
}

/* Послуги - без власних margin, лише gap батьківського flex */
.device-order-page .ui-block.device-feed-works {
	flex: 0 0 auto;
	margin: 0 !important;
	align-self: stretch;
}

/* Хронологія - заповнює залишок правої колонки, flex-колонка на всю висоту */
.device-order-page .device-feed-history.device-feed-history--chat {
	flex: 1 1 0%;
	min-height: 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
	isolation: isolate;
	margin: 0 !important;
	overflow: hidden;
}

.device-order-page .device-feed-history.device-feed-history--chat > .ui-block-header {
	flex: 0 0 auto;
	flex-shrink: 0;
}

.device-order-page .device-feed-history.device-feed-history--chat > .ui-block-content {
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	gap: 0;
	overflow: hidden;
}

/* Форма sticky внизу - без подвоєння padding-bottom ui-block (10px + 10px) */
.device-order-page .ui-block.device-feed-history.device-feed-history--chat {
	padding-bottom: 0 !important;
}

@media (min-width: 881px) {
	.device-order-page {
		min-height: calc(100dvh - 60px);
	}

	.device-order-page .device-order-body {
		min-height: calc(100dvh - 60px);
		grid-template-rows: minmax(0, 1fr);
	}

	.device-order-page .device-order-feed {
		min-height: 0;
		height: 100%;
		align-self: stretch;
	}

	.device-order-page .device-feed-history.device-feed-history--chat {
		flex: 1 1 0%;
		min-height: 400px;
	}
}

/* Legacy heading alias */
.device-order-page .ui-heading {
	display: flex;
	align-items: center;
	gap: var(--oc-gap-sm);
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--oc-text);
}

.device-order-page .device-master-card__identity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--order-gap, 10px);
	margin-bottom: var(--order-gap, 10px);
}

.device-order-page .device-master-card > .ui-block-content {
	gap: 0;
}

.device-order-page .device-master-card__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--order-gap, 10px);
	margin: 0;
}

/* Статистика картки - той самий стандарт, що header chips: 22×30 / 12px / icons 10px */
.device-order-page .device-master-card__stat,
.device-order-page .device-order-hero__stats > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--order-header-btn-gap, 4px);
	height: var(--order-header-btn-h, 22px);
	min-height: var(--order-header-btn-h, 22px);
	max-height: var(--order-header-btn-h, 22px);
	min-width: var(--order-header-btn-min-w, 30px);
	padding: 0 var(--order-header-btn-pad-x, 6px);
	margin: 0;
	border: none;
	border-radius: var(--order-header-btn-radius, 5px);
	box-sizing: border-box;
	background: var(--order-bg-subtle);
	font-size: var(--order-header-btn-font, 12px);
	font-weight: 600;
	line-height: 1;
	color: var(--order-text-muted);
	white-space: nowrap;
}

.device-order-page .device-master-card__stat .material-icons,
.device-order-page .device-master-card__stat .ui-icon,
.device-order-page .device-order-hero__stats > span .material-icons,
.device-order-page .device-order-hero__stats > span .ui-icon {
	flex-shrink: 0;
	width: var(--order-header-btn-icon, 10px) !important;
	height: var(--order-header-btn-icon, 10px) !important;
	font-size: var(--order-header-btn-icon, 10px) !important;
	line-height: 1 !important;
	color: inherit;
}

.device-order-page .device-master-card__stat.is-warn {
	color: var(--warning, #f59e0b);
	background: rgba(var(--warning-rgb, 245, 158, 11), 0.1);
}

.device-order-page .device-master-card__dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--order-gap, 10px);
	margin-top: var(--order-gap, 10px);
	margin-bottom: var(--order-gap, 10px);
	width: 100%;
	box-sizing: border-box;
}

.device-order-page .device-master-card__date {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	padding: var(--order-gap, 10px);
	border: 1px solid var(--order-border);
	border-radius: var(--order-card-radius, 5px);
	background: var(--order-bg-subtle);
	box-sizing: border-box;
}

.device-order-page .device-master-card__date-label,
.device-order-page .device-master-card__date-day,
.device-order-page .device-master-card__date-time,
.device-order-page .device-master-card__date-value {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.device-order-page .device-master-card__date-label {
	font-weight: 600;
	color: var(--order-text-muted);
}

.device-order-page .device-master-card__date-day,
.device-order-page .device-master-card__date-value {
	font-weight: 700;
	color: var(--order-text-main);
}

.device-order-page .device-master-card__date-time {
	font-weight: 500;
	color: var(--order-text-muted);
}

.device-order-page .device-master-card__specs {
	margin-top: 0;
	/* 10px від верхньої лінії до першого рядка; знизу без зайвого відступу. */
	padding-top: 10px;
	padding-bottom: 0;
	/* Зовнішня лінія секції - крапкова (як і між рядками). */
	border-top: 1px dotted var(--order-border);
}

.device-order-page .device-master-card__specs .device-side-rows {
	gap: 0;
}

.device-order-page .device-master-card__footer {
	display: flex;
	flex-direction: column;
	gap: var(--oc-block-padding);
	margin-top: var(--oc-block-padding);
	padding-top: var(--oc-block-padding);
	border-top: 1px solid var(--order-border);
}

.device-order-page .device-master-card__footer .device-order-hero__call {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.device-order-page .device-master-card.s1 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s1-rgb), 0.25); }
.device-order-page .device-master-card.s2 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s2-rgb), 0.25); }
.device-order-page .device-master-card.s3 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s3-rgb), 0.25); }
.device-order-page .device-master-card.s4 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s4-rgb), 0.25); }
.device-order-page .device-master-card.s5 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s5-rgb), 0.25); }
.device-order-page .device-master-card.s6 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s6-rgb), 0.25); }
.device-order-page .device-master-card.s7 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s7-rgb), 0.25); }

@media (max-width: 480px) {
	.device-order-page .device-master-card__dates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.device-order-page .device-master-card__identity {
		flex-wrap: wrap;
	}
}

/* ── Hero (legacy hooks for status/call controls only) ── */
.device-order-page .device-order-hero.ui-block {
	box-shadow: none;
}
.device-order-page .device-order-hero__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--order-gap, 10px);
	margin-bottom: var(--oc-gap-sm);
}

.device-order-page .device-order-hero__head-main {
	display: flex;
	align-items: center;
	gap: var(--order-gap, 10px);
	min-width: 0;
	flex: 1 1 auto;
}

/* Header actions - unified in header-btn block above */

/* Без нижнього відступу під видалену плаваючу панель */
body[class*="status-mode-"] .app_main,
body[class*="status-mode-"] .main_area,
body[class*="status-mode-"] #content {
	padding-bottom: 0;
}

.device-order-page .device-order-hero__num {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.device-order-page .device-order-hero__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--order-gap, 10px);
	margin-bottom: var(--order-gap, 10px);
}

/* hero stats chips - розміри задані разом із .device-master-card__stat вище */

.device-order-page .device-order-hero__dates {
	gap: 0;
	padding-top: var(--oc-gap-sm);
	margin-bottom: var(--oc-gap-sm);
	border-top: 1px solid var(--oc-divider);
}

.device-order-page .device-order-hero__date-row {
	padding: var(--oc-gap-sm) 0;
	border: none;
	border-radius: 0;
	background: transparent;
	border-bottom: 1px solid var(--oc-divider);
	font-size: 13px;
}

.device-order-page .device-order-hero__date-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.device-order-page .device-order-hero__date-label {
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
	color: var(--oc-muted);
}

.device-order-page .device-order-hero__date-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--oc-text);
}

.device-order-page .device-status-chip {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 5px;
}

.device-order-page .device-order-hero.s1 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s1-rgb), 0.25); }
.device-order-page .device-order-hero.s2 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s2-rgb), 0.25); }
.device-order-page .device-order-hero.s3 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s3-rgb), 0.25); }
.device-order-page .device-order-hero.s4 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s4-rgb), 0.25); }
.device-order-page .device-order-hero.s5 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s5-rgb), 0.25); }
.device-order-page .device-order-hero.s6 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s6-rgb), 0.25); }
.device-order-page .device-order-hero.s7 .device-status-chip { box-shadow: 0 0 0 1px rgba(var(--s7-rgb), 0.25); }

/* ── Global order status controls (left column, above device card) ── */
.device-order-page .device-order-status-bar {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Статус у шапці картки - той самий розмір, що й header chips */
.device-order-page .device-master-card > .ui-block-header .device-status-chip {
	border: 1px solid transparent;
	color: #ffffff;
	box-shadow: none;
	user-select: none;
	cursor: default;
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s1 {
	background: var(--s1);
	border-color: var(--s1);
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s2 {
	background: var(--s2);
	border-color: var(--s2);
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s3 {
	background: var(--s3);
	border-color: var(--s3);
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s4 {
	background: var(--s4);
	border-color: var(--s4);
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s5 {
	background: var(--s5);
	border-color: var(--s5);
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s6 {
	background: var(--s6);
	border-color: var(--s6);
}

.device-order-page .device-master-card > .ui-block-header .device-status-chip.s7 {
	background: var(--s7);
	border-color: var(--s7);
}

/* ── Status timeline bar ── */
.device-order-page .status-timeline-bar {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 1px;
	width: 100%;
	min-width: 0;
	min-height: 36px;
	overflow: hidden;
	border-radius: 5px;
}

.device-order-page .status-timeline-bar .status-node {
	border-radius: 0;
}

.device-order-page .status-timeline-bar .status-node:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.device-order-page .status-timeline-bar .status-node:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.device-order-page .status-timeline-bar--single {
	gap: 0;
	overflow: hidden;
	border-radius: 5px;
}

.device-order-page .status-timeline-bar--single .status-node,
.device-order-page .status-timeline-bar--single .status-node:first-child,
.device-order-page .status-timeline-bar--single .status-node:last-child {
	flex: 1 1 auto;
	width: 100%;
	border-radius: 5px;
}

.device-order-page .status-timeline-bar--single a.status-node.status-node--accept-new {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.device-order-page .status-timeline-extra {
	display: flex;
	flex-direction: row;
	gap: 3px;
	width: 100%;
	margin-top: 3px;
	min-width: 0;
}

.device-order-page .status-timeline-extra .status-node--actionable {
	flex: 1 1 auto;
	width: 100%;
}

/* Базовий вузол: спільна геометрія + токен кольору статусу */
.device-order-page .status-node {
	--status-color: rgb(var(--status-rgb, var(--s1-rgb)));

	display: block;
	box-sizing: border-box;
	border-radius: 0;
	border-style: solid;
	border-width: 5px;
	min-height: 36px;
	padding: 0;
	margin: 0;
	background-color: transparent;
	background-image: none;
	transition: filter 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}

/* 1. Неактивні - суцільна заливка кольору статусу, без рамки */
.device-order-page .status-node--disabled {
	width: 10px;
	min-width: 10px;
	max-width: 10px;
	background-color: var(--status-color);
	border-width: 0;
	border-color: transparent;
	cursor: default;
	pointer-events: none;
}

/* 2. Поточний - суцільна заливка без тексту */
.device-order-page .status-node--current {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
	background-color: var(--status-color);
	border-color: var(--status-color);
	cursor: default;
	pointer-events: none;
}

/* 3. Доступні переходи - суцільна заливка + білий текст */
.device-order-page .status-node--actionable,
.device-order-page .device-order-status-bar a.status-node.status-node--actionable {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	background-color: var(--status-color);
	border-color: var(--status-color);
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	-webkit-tap-highlight-color: transparent;
	box-shadow: none;
}

.device-order-page .device-order-status-bar a.status-node.status-node--actionable:hover,
.device-order-page .device-order-status-bar a.status-node.status-node--actionable:focus-visible,
.device-order-page .status-node--actionable:hover,
.device-order-page .status-node--actionable:focus-visible {
	color: #ffffff;
	background-color: var(--status-color);
	border-color: var(--status-color);
	text-decoration: none;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.device-order-page .status-node--actionable:active {
	color: #ffffff;
	background-color: var(--status-color);
	border-color: var(--status-color);
	transform: translateY(0);
	filter: brightness(0.96);
}

.device-order-page .status-node__label {
	display: block;
	max-width: 100%;
	color: inherit;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.device-order-page .status-node.s1 { --status-rgb: var(--s1-rgb); --status-color: var(--s1); }
.device-order-page .status-node.s2 { --status-rgb: var(--s2-rgb); --status-color: var(--s2); }
.device-order-page .status-node.s3 { --status-rgb: var(--s3-rgb); --status-color: var(--s3); }
.device-order-page .status-node.s4 { --status-rgb: var(--s4-rgb); --status-color: var(--s4); }
.device-order-page .status-node.s5 { --status-rgb: var(--s5-rgb); --status-color: var(--s5); }
.device-order-page .status-node.s6 { --status-rgb: var(--s6-rgb); --status-color: var(--s6); }
.device-order-page .status-node.s7 { --status-rgb: var(--s7-rgb); --status-color: var(--s7); }

.device-order-page .status-node--actionable.status-node--pay {
	--status-rgb: var(--s6-rgb);
	--status-color: var(--s6);
}

.device-order-page .status-node--actionable.status-node--work,
.device-order-page .status-node--actionable.status-node--reaccept {
	--status-rgb: var(--s3-rgb);
	--status-color: var(--s3);
}

.device-order-page .status-node--actionable.status-node--accept-new {
	--status-rgb: var(--s1-rgb);
	--status-color: var(--s1);
	color: var(--order-accept-new-text, #111827);
}

.device-order-page .status-node--actionable.status-node--accept-warranty {
	--status-rgb: var(--s3-rgb);
	--status-color: var(--s3);
	color: #ffffff;
}

.device-order-page .status-timeline-bar a.status-node.status-node--accept-new,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-warranty {
	flex: 1 1 0;
	min-width: 0;
}

.device-order-page .status-timeline-bar a.status-node.status-node--accept-new .status-node__label,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:hover,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:focus-visible,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:active {
	color: var(--order-accept-new-text, #111827);
}

.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:hover,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-new:focus-visible {
	background-color: var(--s1);
	border-color: var(--s1);
	filter: brightness(1.04);
}

.device-order-page .status-timeline-bar a.status-node.status-node--accept-warranty:hover,
.device-order-page .status-timeline-bar a.status-node.status-node--accept-warranty:focus-visible {
	background-color: var(--s3);
	border-color: var(--s3);
	filter: brightness(1.08);
}

/* Фінальна фіксація 3 станів (scope: таймлайн, перебиває chip/link/bg успадкування) */
.device-order-page .status-timeline-bar .status-node--disabled,
.device-order-page .status-timeline-extra .status-node--disabled {
	width: 10px;
	min-width: 10px;
	max-width: 10px;
	background-color: var(--status-color);
	background-image: none;
	border: none;
	box-shadow: none;
}

.device-order-page .status-timeline-bar .status-node--current,
.device-order-page .status-timeline-extra .status-node--current {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
	background-color: var(--status-color);
	background-image: none;
	border: 5px solid var(--status-color);
	box-shadow: none;
}

.device-order-page .status-timeline-bar a.status-node.status-node--actionable,
.device-order-page .status-timeline-extra a.status-node.status-node--actionable {
	background-color: var(--status-color);
	background-image: none;
	border: 5px solid var(--status-color);
	color: #ffffff;
	box-shadow: none;
}

.device-order-page .status-timeline-bar a.status-node.status-node--actionable .status-node__label,
.device-order-page .status-timeline-extra a.status-node.status-node--actionable .status-node__label {
	color: #ffffff;
}

/* ── Closed order status actions (no timeline) ── */
.device-order-page .device-status-closed-actions {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	min-width: 0;
}

.device-order-page .device-status-closed-actions__btn {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.device-order-page .device-status-closed-actions__btn--wide {
	flex: 1 1 100%;
}

@media (max-width: 768px) {
	.device-order-page .status-timeline-bar {
		gap: 1px;
		min-height: 32px;
	}

	.device-order-page .status-node {
		min-height: 32px;
		border-radius: 0;
	}

	.device-order-page .status-node--actionable {
		padding: 0 6px;
		font-size: 10px;
	}

	.device-order-page .device-status-closed-actions {
		flex-direction: column;
		gap: var(--order-gap, 10px);
	}

	.device-order-page .device-status-closed-actions__btn {
		flex: 1 1 auto;
		width: 100%;
	}
}

.device-order-page .device-order-hero__call {
	margin-top: var(--oc-block-padding);
	padding-top: var(--oc-block-padding);
	border-top: 1px solid var(--oc-divider);
}

/* ── Call bar buttons ── */
.device-order-page .device-call-bar {
	align-items: stretch;
	width: 100%;
}

.device-order-page .device-call-bar--pick {
	display: flex;
	overflow: hidden;
	border-radius: var(--oc-radius);
	border: 1px solid var(--oc-divider);
}

.device-order-page .device-call-bar__half {
	display: flex;
	flex: 1 1 50%;
	margin: 0;
	min-width: 0;
	min-height: var(--oc-btn-h);
}

.device-order-page .device-call-bar__btn {
	flex: 1 1 auto;
	width: 100%;
	min-height: var(--oc-btn-h);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--oc-gap-sm);
	border: none;
	border-radius: 0;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	box-sizing: border-box;
}

.device-order-page .device-call-bar__btn .material-icons {
	font-size: var(--oc-icon);
	width: var(--oc-icon);
	height: var(--oc-icon);
}

.device-order-page .device-call-bar__btn--fail {
	background: rgba(var(--danger-rgb), 0.08);
	color: var(--danger);
	border-right: 1px solid var(--oc-divider);
}

.device-order-page .device-call-bar__btn--ok {
	background: rgba(var(--success-rgb), 0.08);
	color: var(--success);
}

.device-order-page .device-call-bar--locked {
	display: flex;
	align-items: center;
	gap: 10px;
}

.device-order-page .device-call-bar__result {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--oc-btn-h);
	padding: var(--oc-gap-sm);
	border-radius: var(--oc-radius);
	font-size: 10px;
	font-weight: 600;
	border: 1px solid var(--oc-divider);
}

.device-order-page .device-call-bar__result--fail {
	background: rgba(var(--danger-rgb), 0.08);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.2);
}

.device-order-page .device-call-bar__result--ok {
	background: rgba(var(--success-rgb), 0.08);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.2);
}

.device-order-page .device-call-bar__reset-form {
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.device-order-page .device-call-ghost-btn,
.device-order-page .device-call-bar__reset.device-call-ghost-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 8px;
	min-width: 0;
	min-height: 0;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--order-text-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.device-order-page .device-call-ghost-btn__icon {
	line-height: 1;
	color: var(--order-text-muted);
}

.device-order-page .device-call-ghost-btn__label {
	font-size: 12px;
	font-weight: 500;
	color: inherit;
}

.device-order-page .device-call-ghost-btn:hover,
.device-order-page .device-call-bar__reset.device-call-ghost-btn:hover {
	background: var(--order-bg-muted);
	color: var(--order-text-main);
}

.device-order-page .device-call-ghost-btn:hover .device-call-ghost-btn__icon {
	color: var(--order-text-main);
}

@media (max-width: 768px) {
	.device-order-page .device-call-bar--locked {
		flex-direction: column;
		align-items: stretch;
		gap: var(--order-gap, 10px);
	}

	.device-order-page .device-call-bar__result {
		width: 100%;
		min-height: 40px;
	}

	.device-order-page .device-call-bar__reset-form {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	.device-order-page .device-call-ghost-btn,
	.device-order-page .device-call-bar__reset.device-call-ghost-btn {
		min-height: 36px;
		padding: 6px 10px;
	}
}

.device-order-page .device-master-card__specs .device-info-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

/* ── Device info rows: 10px до лінії; dotted між рядками ── */
.device-order-page .device-master-card__specs .device-info-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 0;
	align-items: start;
	margin: 0;
	padding: 10px 0;
	border: none;
	box-sizing: border-box;
}

/* Внутрішні лінії - крапкові між сусідніми рядками */
.device-order-page .device-master-card__specs .device-info-row + .device-info-row {
	border-top: 1px dotted var(--oc-divider);
}

/* Батько дає 10px зверху; останній рядок без padding знизу */
.device-order-page .device-master-card__specs .device-info-row:first-child {
	padding-top: 0;
}

.device-order-page .device-master-card__specs .device-info-row:last-child {
	padding-bottom: 0;
}

.device-order-page .device-master-card__specs .device-info-label,
.device-order-page .device-master-card__specs .device-info-value {
	margin: 0;
	padding: 0;
}

.device-order-page .device-info-label {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--order-text-muted);
}

.device-order-page .device-info-value {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--order-text-main);
	min-width: 0;
	word-break: break-word;
}

.device-order-page .device-info-value--mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-weight: 400;
}

.device-order-page .device-info-value--pass {
	color: var(--danger, #dc3545);
	font-weight: 600;
}

.device-order-page .device-info-value--multiline,
.device-order-page .device-info-value--multiline p,
.device-order-page .device-info-row--description .device-info-value,
.device-order-page .device-info-row--description .device-info-value p {
	font-size: 12px;
	line-height: 1.35;
	color: var(--order-text-main);
	margin: 0;
	padding: 0;
}

.device-order-page .device-info-tags,
.device-order-page .device-master-card__specs .device-defect-mini,
.device-order-page .device-info-row--defect .device-info-tags,
.device-order-page .device-info-row--defect .device-defect-mini {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}

.device-order-page .device-master-card__specs .device-defect-tag,
.device-order-page .device-master-card__specs .device-defect-cost {
	margin: 0;
}

.device-order-page .device-master-card__specs .device-defect-tag {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	padding: 3px 6px;
	border-radius: 9999px;
	border: 1px solid rgba(var(--warning-rgb), 0.2);
}

.device-order-page .device-master-card__specs .device-defect-tag--empty {
	border-style: dashed;
}

.device-order-page .device-master-card__specs .device-defect-cost {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	padding: 3px 6px;
	border-radius: 9999px;
}

/* ── Legacy sidebar rows (unused on order card) ── */
.device-order-page .device-side-rows {
	gap: 0;
}

.device-order-page .device-side-row {
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--oc-gap-sm);
	padding: var(--oc-gap-sm) 0;
	border-bottom: 1px solid var(--oc-divider);
	align-items: center;
}

.device-order-page .device-side-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.device-order-page .device-side-row:first-child {
	padding-top: 0;
}

.device-order-page .device-side-row__k {
	font-size: 10px;
	font-weight: 500;
	color: var(--order-text-muted);
}

.device-order-page .device-side-row__v {
	font-size: 12px;
	font-weight: 500;
	color: var(--order-text-main);
	line-height: 1.35;
}

.device-order-page .device-side-row__v--mono {
	font-size: 12px;
}


/* ── Client card ── */
.device-order-page .device-client-card__title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.device-order-page .device-client-card__mood-icon.is-ok {
	color: var(--success);
}

.device-order-page .device-client-card__mood-icon.is-warn {
	color: var(--warning-hover);
}

.device-order-page .device-client-card__mood-icon.is-bad {
	color: var(--danger);
}

.device-order-page .device-client-card__mood-icon.is-great {
	color: #2563eb;
}

.device-order-page .device-client-card__call {
	/* Gap to phones comes only from .ui-block-content gap (10px) - no extra margin */
	margin-bottom: 0;
}

.device-order-page .device-client-card__call .call-status-btn {
	height: 40px;
	min-height: 40px;
	box-sizing: border-box;
}

.device-order-page .device-client-card__call .device-call-bar--pick,
.device-order-page .device-client-card__call .device-call-bar--locked {
	display: flex;
	align-items: stretch;
	gap: var(--order-gap, 10px);
	width: 100%;
}

.device-order-page .device-client-card__call .device-call-bar--pick {
	overflow: visible;
	border: none;
	border-radius: 0;
	background: transparent;
}

.device-order-page .device-client-card__call .device-call-bar__half {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
}

.device-order-page .device-client-card__call .device-call-bar__btn {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 10px;
	border-radius: 5px;
	background: transparent;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
}

.device-order-page .device-client-card__call .device-call-bar__btn--ok {
	color: var(--success);
	border: 1px solid rgba(var(--success-rgb), 0.45);
}

.device-order-page .device-client-card__call .device-call-bar__btn--fail {
	color: var(--danger);
	border: 1px solid rgba(var(--danger-rgb), 0.45);
}

.device-order-page .device-client-card__call .device-call-bar__btn--ok:hover {
	background: rgba(var(--success-rgb), 0.08);
}

.device-order-page .device-client-card__call .device-call-bar__btn--fail:hover {
	background: rgba(var(--danger-rgb), 0.08);
}

.device-order-page .device-client-card__call .device-call-bar__result {
	flex: 1 1 auto;
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 10px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 600;
	border: 1px solid transparent;
}

.device-order-page .device-client-card__call .device-call-bar__result--ok {
	background: var(--success);
	border-color: var(--success);
	color: #ffffff;
}

.device-order-page .device-client-card__call .device-call-bar__result--ok .material-icons {
	color: #ffffff;
}

.device-order-page .device-client-card__call .device-call-bar__result--fail {
	background: var(--danger);
	border-color: var(--danger);
	color: #ffffff;
}

.device-order-page .device-client-card__call .device-call-bar__result--fail .material-icons {
	color: #ffffff;
}

.device-order-page .device-client-card__call .device-call-bar__reset-form {
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.device-order-page .device-client-card__call .device-call-bar__undo.device-call-ghost-btn {
	width: 40px;
	min-width: 40px;
	padding: 0;
	gap: 0;
	border: 1px solid var(--order-border);
	border-radius: 5px;
	background: transparent;
	color: var(--order-text-muted);
}

.device-order-page .device-client-card__call .device-call-bar__undo.device-call-ghost-btn:hover {
	background: var(--order-badge-bg);
	color: var(--order-text-main);
	border-color: var(--order-border-strong);
}

.device-order-page .device-client-card__call .device-call-bar__undo .device-call-ghost-btn__icon {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: inherit;
}

@media (max-width: 768px) {
	.device-order-page .device-client-card__call .device-call-bar--locked {
		flex-direction: row;
		align-items: stretch;
	}

	.device-order-page .device-client-card__call .device-call-bar__reset-form {
		width: auto;
		justify-content: flex-start;
	}
}

.device-order-page .device-client-card__phones,
.client-page .device-client-card__phones {
	display: flex;
	flex-direction: column;
	gap: var(--order-gap, 10px);
}

.device-order-page .client-phone-group,
.client-page .client-phone-group {
	padding: var(--order-gap, 10px);
	border-radius: 5px;
	background: var(--order-badge-bg);
	border: 1px solid var(--order-border);
}

.device-order-page .client-phone-group__head,
.client-page .client-phone-group__head {
	display: flex;
	align-items: center;
	gap: var(--order-gap, 10px);
	min-width: 0;
}

.device-order-page .client-phone-group__number,
.client-page .client-phone-group__number {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--order-text-main);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.device-order-page .client-phone-group__number:hover,
.client-page .client-phone-group__number:hover {
	color: var(--primary);
}

.device-order-page .client-phone-group .device-client-card__actions,
.client-page .client-phone-group .device-client-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--order-gap, 10px);
	margin-top: var(--order-gap, 10px);
}

.device-order-page .client-phone-group .device-client-card__action,
.client-page .client-phone-group .device-client-card__action {
	box-sizing: border-box;
	height: 22px;
	min-height: 22px;
	min-width: 30px;
	padding: 0;
	border-radius: 5px;
}

.device-order-page .device-client-card__note,
.device-order-page .device-client-card__warning {
	margin-top: var(--order-gap, 10px);
	padding: var(--oc-gap-sm) var(--oc-gap);
	border-radius: var(--oc-radius);
	font-size: 12px;
	line-height: 1.45;
	border: none;
}

.device-order-page .device-client-card__note {
	background: var(--oc-subtle-bg);
	color: var(--oc-muted);
}

.device-order-page .device-client-card__warning {
	background: rgba(var(--danger-rgb), 0.08);
	color: var(--danger);
}

.device-order-page .device-client-card__actions,
.client-page .device-client-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--order-gap, 10px);
}

/* Call + messenger: strict 22×30 / icon 16 / radius 5 */
.device-order-page .device-client-card__action,
.client-page .device-client-card__action {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 22px;
	min-height: 22px;
	min-width: 30px;
	padding: 0;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--oc-divider);
}

.device-order-page .device-client-card__greeting-btn {
	min-height: var(--oc-btn-h);
	padding: 0 var(--oc-gap);
	border-radius: var(--oc-radius);
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--oc-divider);
}

.device-order-page .device-client-card__action .material-icons,
.client-page .device-client-card__action .material-icons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.device-order-page .device-client-card__greeting-btn .material-icons {
	font-size: var(--oc-icon);
	width: var(--oc-icon);
	height: var(--oc-icon);
}

/* ── Services finance summary (footer of works block) ── */
.device-order-page .services-finance-summary {
	display: block;
	width: 100%;
	margin-top: 0;
	padding-top: var(--order-block-pad, 10px);
	border-top: 1px solid var(--order-border, var(--oc-divider));
}

.device-order-page .services-finance-summary--solo {
	padding-top: 0;
	border-top: none;
}

.device-order-page .services-finance-summary__item--total {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--order-gap, 10px);
	width: 100%;
	min-width: 0;
}

.device-order-page .services-finance-summary__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--order-text-main, var(--oc-text));
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.device-order-page .services-finance-summary__value {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--order-text-main, var(--oc-text));
	white-space: nowrap;
	text-align: right;
}

.device-order-page .services-finance-summary__value small {
	font-size: 12px;
	font-weight: 600;
	color: var(--order-text-muted, var(--oc-muted));
}

.device-order-page .services-finance-summary__value--total {
	font-size: 16px;
	font-weight: 700;
	color: var(--order-text-main, var(--oc-text));
}

.device-order-page .services-finance-summary__value--total small {
	font-size: 12px;
	color: var(--order-text-muted, var(--oc-muted));
	opacity: 0.9;
}

.device-order-page .services-finance-summary__value--paid,
.device-order-page .services-finance-summary__value--paid small {
	color: var(--success, #10b981);
}


/* ── Track stats panel (under documents) ── */
.device-order-page .device-track-panel.ui-block {
	background: var(--order-bg-subtle);
	box-shadow: none;
}

.device-order-page .device-track-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.device-order-page .device-track-item {
	gap: var(--oc-gap-sm);
	padding: var(--oc-gap-sm) 0;
	border: none;
	background: transparent;
	border-bottom: 1px solid var(--oc-divider);
	border-radius: 0;
}

.device-order-page .device-track-item:last-child {
	border-bottom: none;
}

.device-order-page .device-track-item__icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border: none;
	background: var(--oc-subtle-bg);
	border-radius: 5px;
}

.device-order-page .device-track-item__icon .ui-icon {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.device-order-page .device-track-item__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--oc-muted);
}

.device-order-page .device-track-item__value {
	font-size: 13px;
	font-weight: 600;
	color: var(--oc-text);
}

/* ── Documents: compact stats + flex cards ── */
.device-order-page .device-feed-docs .device-docs-header .ui-block-header__main {
	flex-shrink: 1;
	min-width: 0;
}

.device-order-page .device-feed-docs .device-docs-grid {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--order-gap, 10px);
	width: 100%;
}

/* Шаблони повідомлень під документами */
.device-order-page .template-messages-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--order-gap, 10px);
	margin-top: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.device-order-page .template-message-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	padding: 0;
	border: 1px solid var(--order-border, var(--oc-divider));
	border-radius: 5px;
	background: var(--order-bg-block, var(--bg-card));
	color: var(--order-text-muted, var(--oc-muted));
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.device-order-page .template-message-btn .template-message-btn__icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.device-order-page .template-message-btn:hover {
	border-color: rgba(var(--primary-rgb), 0.35);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.device-order-page .template-message-btn.is-copied {
	border-color: rgba(var(--success-rgb), 0.4);
	color: var(--success);
	background: rgba(var(--success-rgb), 0.1);
}

.device-order-page .device-doc-tile {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}

.device-order-page .device-doc-tile .ios-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 9999px;
	background: var(--order-badge-bg);
	color: var(--order-text-muted);
	border: 1px solid var(--order-badge-border);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: none;
	pointer-events: none;
}

.device-order-page .device-doc-tile .ios-badge:empty,
.device-order-page .device-doc-tile .ios-badge[data-count="0"] {
	display: none;
}

.device-order-page .device-doc-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--order-gap, 10px);
	width: 100%;
	height: 40px;
	min-height: 40px;
	padding: 0 var(--order-gap, 10px);
	border: 1px solid var(--order-border);
	border-radius: 5px;
	background: var(--order-bg-subtle);
	box-sizing: border-box;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.device-order-page .device-doc-tile:hover .device-doc-row,
.device-order-page .device-doc-row:focus-within {
	background: var(--order-hover);
	border-color: var(--order-border-strong, var(--order-border));
}

.device-order-page .device-feed-docs .device-doc-row__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	text-align: left;
	color: var(--order-text-main);
	box-sizing: border-box;
	transform: none;
}

.device-order-page .device-feed-docs .device-doc-row__main:hover {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	transform: none;
	color: var(--order-text-main);
}

.device-order-page .device-feed-docs .device-doc-row__label {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
	line-height: 1.25;
	color: var(--order-text-main);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Copy button: глобальний стандарт design/ui/copy_button.css (.ui-copy-btn / .device-doc-card__copy) */

.device-order-page .device-feed-history__stack {
	gap: var(--oc-gap);
}

.device-order-page .compact-work-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
}

.device-order-page .device-work-item {
	margin: 0;
	padding: 10px 0;
	border: none;
	border-radius: 0;
	background: transparent;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Пунктир лише між послугами (як у специфікаціях) */
.device-order-page .device-work-item + .device-work-item {
	border-top: 1px dotted var(--oc-divider);
}

.device-order-page .device-work-item__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) auto minmax(72px, 1fr) 28px;
	align-items: center;
	column-gap: 10px;
	row-gap: 6px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.device-order-page .device-work-item__name {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.device-order-page .device-work-item__icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 5px;
	padding: 5px;
	box-sizing: border-box;
	background: var(--oc-subtle-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.device-order-page .device-work-item__icon .material-icons {
	font-size: var(--oc-icon);
	width: var(--oc-icon);
	height: var(--oc-icon);
	color: var(--oc-muted);
}

.device-order-page .device-work-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.device-order-page .device-work-item__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--order-text-main);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.device-order-page .device-work-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	margin-top: 4px;
}

.device-order-page .device-work-item__price-wrap {
	text-align: right;
	flex-shrink: 0;
	min-width: 0;
	justify-self: end;
}

.device-order-page .device-work-item__price {
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
}

.device-order-page .device-work-item__master {
	display: block;
	min-width: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--oc-muted);
	opacity: 0.85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.device-order-page .device-work-item__edit {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	flex-shrink: 0;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	border: 1px solid var(--oc-divider);
	background: var(--order-bg-block, var(--bg-card));
	color: var(--oc-muted);
	text-decoration: none;
	box-sizing: border-box;
}

.device-order-page .device-work-item__edit--spacer {
	visibility: hidden;
	pointer-events: none;
	border: none;
	background: transparent;
}

.device-order-page .device-work-item__edit .material-icons {
	font-size: 15px;
}

.device-order-page .device-work-item__edit:hover {
	border-color: rgba(var(--primary-rgb), 0.35);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.06);
}

.device-order-page .device-work-item.is-stock .device-work-item__icon {
	background: rgba(16, 185, 129, 0.12);
	color: var(--success);
}

.device-order-page .device-feed-empty {
	padding: 10px;
	font-size: 13px;
	color: var(--oc-muted);
	text-align: center;
	border-radius: var(--oc-radius);
	background: var(--oc-subtle-bg);
	border: none;
}

/* Мобільна адаптація послуг: wrap без горизонтального скролу */
@media (max-width: 480px) {
	.device-order-page .device-work-item__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
	}

	.device-order-page .device-work-item__name {
		flex: 1 1 100%;
		width: 100%;
	}

	.device-order-page .device-work-item__title {
		font-size: 12px;
	}

	.device-order-page .device-work-item__price-wrap {
		flex: 1 1 auto;
		text-align: left;
		justify-self: start;
	}

	.device-order-page .device-work-item__price {
		font-size: 12px;
	}

	.device-order-page .device-work-item__master {
		flex: 1 1 auto;
		max-width: calc(100% - 40px);
		font-size: 11px;
		white-space: normal;
		word-break: break-word;
		overflow-wrap: anywhere;
		overflow: visible;
		text-overflow: unset;
	}

	.device-order-page .device-work-item__edit {
		margin-left: auto;
		width: 28px;
		height: 28px;
		min-width: 28px;
		min-height: 28px;
	}
}

@media (max-width: 320px) {
	.device-order-page .device-work-item {
		padding: 10px 0;
	}

	.device-order-page .device-work-item__icon {
		width: 24px;
		height: 24px;
		padding: 3px;
	}

	.device-order-page .device-work-item__title {
		font-size: 11px;
	}

	.device-order-page .device-work-item__price,
	.device-order-page .device-work-item__master {
		font-size: 11px;
	}

	.device-order-page .device-work-item__price-wrap,
	.device-order-page .device-work-item__master {
		flex: 1 1 calc(50% - 20px);
		min-width: 0;
	}

	.device-order-page .device-work-item__edit {
		flex: 0 0 28px;
	}
}

/* ── Chat layout: список розтягується (flex-grow), форма притиснута донизу ── */
.device-order-page .device-feed-history__stack--chat,
.device-order-page .device-chat-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-height: 0;
	gap: 0;
	overflow: hidden;
}

.device-order-page .chat-history,
.device-order-page .chat-messages-list,
.device-order-page .device-feed-timeline.chat-history {
	flex: 1 1 0%;
	flex-grow: 1;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: var(--order-block-pad, 10px);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.device-order-page .chat-composer,
.device-order-page .chat-input-area {
	position: sticky;
	bottom: 0;
	z-index: 10;
	flex: 0 0 auto;
	flex-shrink: 0;
	margin-top: auto;
	margin-right: calc(-1 * var(--order-block-pad, 10px));
	margin-bottom: 0;
	margin-left: calc(-1 * var(--order-block-pad, 10px));
	padding: var(--order-gap, 10px);
	background: var(--order-bg-block);
	border-top: 1px solid var(--order-border);
	box-shadow: 0 -8px 24px var(--order-composer-shadow, rgba(0, 0, 0, 0.08));
	box-sizing: border-box;
}

.device-order-page .chat-composer__form,
.device-order-page .device-feed-comment-form.chat-composer__form {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.device-order-page .chat-composer__row {
	display: flex;
	align-items: flex-end;
	gap: var(--order-gap, 10px);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.device-order-page .chat-composer__row textarea,
.device-order-page .chat-composer__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px !important;
	max-height: 120px;
	margin: 0;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: var(--order-bg-muted);
	font-size: 14px;
	line-height: 1.4;
	color: var(--order-text-main);
	resize: none;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.device-order-page .chat-composer__row textarea:focus,
.device-order-page .chat-composer__input:focus {
	outline: none;
	border-color: rgba(var(--primary-rgb, 76, 139, 245), 0.45);
	background: var(--order-bg-block);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 76, 139, 245), 0.12);
}

.device-order-page .chat-composer__send,
.device-order-page .device-feed-comment-submit.chat-composer__send {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary, #4c8bf5);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.device-order-page .chat-composer__send .material-icons {
	line-height: 1;
}

.device-order-page .chat-composer__send:hover {
	background: var(--primary-dark, #3b7de0);
	box-shadow: 0 2px 6px rgba(var(--primary-rgb, 76, 139, 245), 0.28);
}

.device-order-page .chat-composer__send:active {
	transform: scale(0.96);
}

/* legacy alias: timeline without chat-history class */
.device-order-page .device-feed-timeline:not(.chat-history) {
	overflow: visible;
	padding: 4px 2px;
}

/* ── Chat / messenger history ── */
.device-order-page .device-chat {
	display: flex;
	flex-direction: column;
	gap: var(--order-gap, 10px);
	width: 100%;
	min-height: min-content;
	padding-top: 0;
}

.device-order-page .device-chat__author-label,
.device-order-page .device-chat__sender {
	font-weight: 700;
}

.device-order-page .device-chat__message {
	display: flex;
	flex-direction: column;
	max-width: 80%;
	min-width: 0;
	margin-bottom: 0;
	position: relative;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.device-order-page .device-chat__message.is-removing {
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
}

.device-order-page .device-chat__message.message-right,
.device-order-page .device-chat__message.chat-msg--outgoing {
	align-self: flex-end;
}

.device-order-page .device-chat__message.message-left,
.device-order-page .device-chat__message.chat-msg--incoming {
	align-self: flex-start;
}

.device-order-page .device-chat__bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--order-text-main);
	word-break: break-word;
	box-sizing: border-box;
}

.device-order-page .chat-msg--incoming .device-chat__bubble,
.device-order-page .message-left .device-chat__bubble {
	background: var(--order-bg-muted);
	border-bottom-left-radius: 0;
}

.device-order-page .chat-msg--outgoing .device-chat__bubble,
.device-order-page .message-right .device-chat__bubble {
	background: var(--primary);
	color: var(--status-on-solid, #ffffff);
	border-bottom-right-radius: 0;
}

.device-order-page .device-chat__bubble--system {
	padding: 10px;
	background: var(--order-bg-muted);
	border-bottom-left-radius: 0;
}

.device-order-page .device-chat__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 2px;
}

.device-order-page .device-chat__sender {
	font-size: 11px;
	font-weight: 700;
	color: var(--order-text-muted, var(--oc-muted));
	line-height: 1.2;
}

.device-order-page .chat-msg--outgoing .device-chat__sender {
	color: rgba(255, 255, 255, 0.82);
}

.device-order-page .device-chat__time {
	font-size: 10px;
	line-height: 1.2;
	opacity: 0.7;
	color: var(--order-text-muted, var(--oc-muted));
	white-space: nowrap;
}

.device-order-page .chat-msg--outgoing .device-chat__time {
	color: rgba(255, 255, 255, 0.78);
	opacity: 1;
}

.device-order-page .device-chat__text,
.device-order-page .device-chat__text p {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.device-order-page .chat-msg--outgoing .device-chat__text,
.device-order-page .chat-msg--outgoing .device-chat__text p {
	color: var(--status-on-solid, #ffffff);
}

.device-order-page .device-chat__text p + p {
	margin-top: 6px;
}

.device-order-page .device-chat__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 1.3;
}

.device-order-page .device-chat__flow .tl-status-tag {
	font-size: 11px;
	padding: 2px 6px;
}

.device-order-page .device-chat__flow .tl-flow-arrow {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--order-text-muted, var(--oc-muted));
}

.device-order-page .device-chat__reason {
	margin-top: 2px;
	font-size: 12px;
	color: var(--order-text-main, var(--oc-text));
	line-height: 1.35;
	opacity: 0.9;
}

.device-order-page .device-chat__author-label {
	font-weight: 700;
}

.device-order-page .device-chat__wrote {
	font-weight: 400;
	opacity: 0.75;
}

.device-order-page .chat-msg--outgoing .device-chat__author-label {
	color: rgba(255, 255, 255, 0.92);
}

.device-order-page .chat-msg--outgoing .device-chat__wrote {
	color: rgba(255, 255, 255, 0.78);
	opacity: 1;
}

.device-order-page .chat-msg--incoming .device-chat__author-label {
	color: var(--order-text-main, var(--oc-text));
}

.device-order-page .chat-msg--incoming .device-chat__wrote {
	color: var(--order-text-muted, var(--oc-muted));
	opacity: 1;
}

.device-order-page .chat-msg--outgoing .device-chat__delete {
	right: auto;
	left: -5px;
}

.device-order-page .device-chat__delete {
	position: absolute;
	top: -5px;
	right: -5px;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.15s ease;
	line-height: 0;
}

.device-order-page .device-chat__message:hover .device-chat__delete,
.device-order-page .device-chat__delete:focus-within,
.device-order-page .device-chat__delete:has(.device-chat__delete-btn--confirm) {
	opacity: 1;
}

.device-order-page .device-chat__delete-form,
.device-order-page .device-chat__delete form.delete {
	margin: 0;
	padding: 0;
	display: inline-flex;
}

.device-order-page .device-chat__delete-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--order-border, var(--oc-divider));
	border-radius: 50%;
	background: var(--order-bg-block, var(--surface));
	cursor: pointer;
	color: var(--order-text-muted, var(--oc-muted));
	line-height: 0;
	box-shadow: var(--shadow-sm);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.device-order-page .device-chat__delete-btn--confirm {
	background-color: var(--danger, #dc2626) !important;
	border-color: var(--danger, #dc2626) !important;
	color: #ffffff !important;
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(var(--danger-rgb, 220, 38, 38), 0.35);
}

.device-order-page .device-chat__delete-btn--confirm .material-icons {
	color: #ffffff;
}

.device-order-page .device-chat__text--status-change {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	line-height: 1.45;
}

.device-order-page .device-chat__status-flow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.device-order-page .device-chat__delete-btn .material-icons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.device-order-page .device-chat__delete-btn:hover {
	color: var(--danger);
	border-color: rgba(var(--danger-rgb, 220, 38, 38), 0.35);
}

.device-order-page .device-chat__message.is-call-log .device-chat__bubble,
.device-order-page .device-chat__message.is-status-log .device-chat__bubble,
.device-order-page .device-chat__message.is-client-log .device-chat__bubble {
	max-width: 100%;
}

@media (max-width: 768px) {
	.device-order-page .device-feed-history.device-feed-history--chat {
		flex: 0 0 auto;
		min-height: 400px;
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.device-order-page .chat-history,
	.device-order-page .chat-messages-list,
	.device-order-page .device-feed-timeline.chat-history {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
	}

	.device-order-page .device-chat__message {
		max-width: 88%;
	}

	.device-order-page .device-feed-docs .doc-stats-row {
		gap: var(--order-gap, 10px);
	}

	.device-order-page .ui-block-header-actions,
	.device-order-page .order-header-actions {
		gap: var(--order-gap, 10px);
	}

	.device-order-page .chat-composer__row {
		gap: var(--order-gap, 10px);
	}

	.device-order-page .chat-composer__row textarea,
	.device-order-page .chat-composer__input {
		padding: 10px;
		font-size: 16px;
		min-height: 44px !important;
	}

	.device-order-page .chat-composer__send,
	.device-order-page .device-feed-comment-submit.chat-composer__send {
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
		min-height: 36px;
	}
}

/* ui-block: локальні фікси */
.device-order-page .ui-block.device-feed-section {
	overflow: visible;
	margin: 0 !important;
}

.device-order-page .ui-block .compact-work-list {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDER MODALS - stock picker, add service, price edit
   Scope: dialogs opened from order card (#price, #add_from_stock, #p*)
   ══════════════════════════════════════════════════════════════════════════ */

.dlg_body .device-price-form,
.dlg_body .stock-picker--order {
	--oc-modal-pad: 0;
	--oc-modal-gap: 12px;
	--oc-modal-divider: #e5e7eb;
	--oc-modal-radius: 5px;
	font-family: var(--font-sans);
}

/* ── Add service / edit price forms ── */
.dlg_body .device-price-form {
	width: 100%;
	min-width: 0;
}

.dlg_body .device-price-form .form-group {
	margin-bottom: var(--oc-modal-gap);
	min-width: 0;
}

.dlg_body .device-price-form .form-group:last-child {
	margin-bottom: 0;
}

.dlg_body .device-price-form label,
.dlg_body .device-price-form .form-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary, #6b7280);
}

.dlg_body .device-price-form .form-control,
.dlg_body .device-price-form .form-select,
.dlg_body .device-price-form select.form-control {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--oc-modal-divider);
	border-radius: var(--oc-modal-radius);
	background: var(--bg-card);
	font-size: 14px;
	color: var(--text-main);
	box-sizing: border-box;
}

.dlg_body .device-price-form .form-control:focus,
.dlg_body .device-price-form .form-select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 76, 139, 245), 0.12);
}

.dlg_body .device-price-fields-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--oc-modal-gap);
	margin-bottom: var(--oc-modal-gap);
}

.dlg_body .device-price-fields-row .form-group {
	margin-bottom: 0;
}

.dlg_body .device-price-form .device-warranty-edit-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dlg_body .device-price-form .device-warranty-edit-suffix {
	font-size: 13px;
	color: var(--text-muted);
}

.dlg_body .device-price-form .form-group.button {
	margin-top: 4px;
	margin-bottom: 0;
}

.dlg_body .device-price-form .btn-block,
.dlg_body .device-price-form .btn-primary {
	width: 100%;
	min-height: 40px;
	border-radius: var(--oc-modal-radius);
	font-size: 14px;
	font-weight: 600;
}

.dlg_body .device-price-edit-topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--oc-modal-gap);
	padding-bottom: var(--oc-modal-gap);
	border-bottom: 1px solid var(--oc-modal-divider);
}

.dlg_body .device-price-edit-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: var(--oc-modal-gap);
	padding: 10px 12px;
	border-radius: var(--oc-modal-radius);
	background: var(--surface-secondary, #f9fafb);
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-muted);
}

.dlg_body .device-price-edit-note .material-icons {
	font-size: 18px;
	flex-shrink: 0;
	color: var(--primary);
}

@media (max-width: 520px) {
	.dlg_body .device-price-fields-row {
		grid-template-columns: 1fr;
	}
}

/* ── Stock picker modal ── */
.dlg_body .stock-picker--order {
	display: flex;
	flex-direction: column;
	gap: var(--oc-modal-gap);
	min-height: 0;
	height: auto;
	max-height: min(70dvh, calc(var(--dlg_viewport_h, 100dvh) - 140px));
	overflow: hidden;
}

.dlg_body .stock-picker--order .stock-picker-bc {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding-bottom: var(--oc-modal-gap);
	border-bottom: 1px solid var(--oc-modal-divider);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	flex-shrink: 0;
}

.dlg_body .stock-picker--order .stock-picker-bc button.sp-bc-item {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.dlg_body .stock-picker--order .sp-bc-item {
	color: var(--text-muted);
	line-height: 1.3;
}

.dlg_body .stock-picker--order .sp-bc-item.active {
	color: var(--primary);
}

.dlg_body .stock-picker--order .sp-bc-clickable {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dlg_body .stock-picker--order .sp-bc-clickable:hover {
	color: var(--primary);
}

.dlg_body .stock-picker--order .sp-bc-sep {
	opacity: 0.45;
	user-select: none;
}

.dlg_body .stock-picker--order .stock-picker-toolbar {
	display: flex;
	align-items: center;
	gap: var(--oc-modal-gap);
	margin: 0;
	min-height: 32px;
	flex-shrink: 0;
}

.dlg_body .stock-picker--order .sp-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 10px;
	border: 1px solid var(--oc-modal-divider);
	border-radius: var(--oc-modal-radius);
	background: var(--bg-card);
	color: var(--text-main);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.dlg_body .stock-picker--order .sp-back-btn:hover {
	background: var(--surface-secondary, #f9fafb);
	border-color: var(--primary);
	color: var(--primary);
}

.dlg_body .stock-picker--order .sp-back-btn .material-icons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.dlg_body .stock-picker--order .sp-step-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dlg_body .stock-picker--order .stock-picker-list {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	padding-bottom: 48px;
	border: 1px solid var(--oc-modal-divider);
	border-radius: var(--oc-modal-radius);
	background: var(--bg-card);
}

.dlg_body .stock-picker--order .sp-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	border: none;
	border-bottom: 1px solid var(--oc-modal-divider);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s ease;
}

.dlg_body .stock-picker--order .sp-row:last-child {
	border-bottom: none;
}

.dlg_body .stock-picker--order .sp-row:hover:not(.is-disabled) {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.06);
}

.dlg_body .stock-picker--order .sp-row.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.dlg_body .stock-picker--order .sp-row-main {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
}

.dlg_body .stock-picker--order .sp-row-main .material-icons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--primary);
	flex-shrink: 0;
}

.dlg_body .stock-picker--order .sp-row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.dlg_body .stock-picker--order .sp-row-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text-main);
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.dlg_body .stock-picker--order .sp-row-meta {
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--text-muted);
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.dlg_body .stock-picker--order .sp-row-suppliers {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.dlg_body .stock-picker--order .sp-sup-chip {
	display: inline-block;
	max-width: 100%;
	padding: 2px 6px;
	border-radius: 5px;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.08);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--text-secondary, #6b7280);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.dlg_body .stock-picker--order .sp-row--back {
	background: var(--surface-secondary, #f9fafb);
}

.dlg_body .stock-picker--order .sp-row-badge {
	flex: 0 0 auto;
	align-self: center;
	max-width: 38%;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	padding: 3px 8px;
	border-radius: 9999px;
	white-space: nowrap;
	text-align: center;
	box-sizing: border-box;
}

.dlg_body .stock-picker--order .sp-row-badge.ok {
	background: rgba(var(--success-rgb), 0.12);
	color: var(--success);
}

.dlg_body .stock-picker--order .sp-row-badge.no {
	background: rgba(var(--danger-rgb), 0.12);
	color: var(--danger);
}

.dlg_body .stock-picker--order .sp-row-badge.svc {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.1);
	color: var(--primary);
}

.dlg_body .stock-picker--order .sp-loading,
.dlg_body .stock-picker--order .stock-picker-loading,
.dlg_body .stock-picker--order .sp-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 16px;
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
}

.dlg_body .stock-picker--order .sp-empty {
	flex-direction: column;
}

.dlg_body .stock-picker--order .spin {
	animation: ocSpSpin 0.8s linear infinite;
}

@keyframes ocSpSpin {
	to { transform: rotate(360deg); }
}

/* ── Modal shell: order dialogs on mobile ── */
@media (max-width: 768px) {
	.dlg_body {
		padding: 12px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}

	.dlg_body .stock-picker--order {
		max-height: min(72dvh, calc(var(--dlg_viewport_h, 100dvh) - 120px));
		height: auto;
		min-height: 0;
		gap: 10px;
	}

	.dlg_body .stock-picker--order .stock-picker-list {
		min-height: 160px;
		padding-bottom: 56px;
	}

	.dlg_body .stock-picker--order .sp-row {
		padding: 8px 10px;
		gap: 8px;
	}

	.dlg_body .stock-picker--order .sp-row-main {
		gap: 6px;
	}

	.dlg_body .stock-picker--order .sp-row-main .material-icons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}

	.dlg_body .stock-picker--order .sp-row-title {
		font-size: 13px;
		line-height: 1.3;
	}

	.dlg_body .stock-picker--order .sp-row-meta {
		font-size: 11px;
		margin-top: 2px;
	}

	.dlg_body .stock-picker--order .sp-sup-chip {
		font-size: 11px;
		padding: 1px 5px;
		line-height: 1.2;
	}

	.dlg_body .stock-picker--order .sp-row-badge {
		font-size: 11px;
		padding: 2px 6px;
		line-height: 1.2;
		max-width: 36%;
	}

	.dlg_panel {
		max-height: calc(
			var(--dlg_viewport_h, 100dvh) - (var(--dlg_gutter) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
		);
	}
}

@media (max-width: 380px) {
	.dlg_body .stock-picker--order .sp-row {
		padding: 7px 8px;
		gap: 6px;
	}

	.dlg_body .stock-picker--order .sp-row-title {
		font-size: 12px;
	}

	.dlg_body .stock-picker--order .sp-row-badge {
		max-width: 34%;
		padding: 2px 5px;
	}
}

/* ── Warranty return (closed source + open warranty child) ── */
.device-order-page .device-warranty-banner-slot {
	width: 100%;
	min-width: 0;
}

.device-order-page .device-warranty-banner-slot:empty {
	display: none;
}

.device-order-page .device-order-info > .device-warranty-banner-slot {
	margin: 0;
}

.device-order-page .device-warranty-linked-order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	max-width: 100%;
	height: 22px;
	min-height: 22px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 5px;
	background-color: var(--danger, #dc3545);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.device-order-page .device-warranty-linked-order .material-icons,
.device-order-page .device-warranty-linked-order span {
	color: #ffffff;
}

.device-order-page .device-warranty-linked-order .material-icons {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
}

.device-order-page .device-warranty-linked-order:hover,
.device-order-page .device-warranty-linked-order:focus-visible {
	background-color: var(--danger, #dc3545);
	color: #ffffff;
	text-decoration: none;
	filter: brightness(1.08);
}

.device-order-page .device-warranty-linked-order:hover .material-icons,
.device-order-page .device-warranty-linked-order:hover span,
.device-order-page .device-warranty-linked-order:focus-visible .material-icons,
.device-order-page .device-warranty-linked-order:focus-visible span {
	color: #ffffff;
}

.device-order-page .device-warranty-linked-order:active {
	background-color: var(--danger, #dc3545);
	color: #ffffff;
	filter: brightness(0.94);
}

.device-order-page .device-warranty-banner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border-radius: 5px;
}
.device-order-page .device-warranty-banner .material-icons {
	font-size: 18px;
	line-height: 1.2;
	flex: 0 0 auto;
}
.device-order-page .device-work-item.is-defective {
	opacity: 0.92;
}

.device-order-page .device-return-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	border: 1px solid var(--danger, #dc3545);
	background: transparent;
	color: var(--danger, #dc3545);
}

.device-order-page .device-return-badge .material-icons {
	font-size: 12px;
	line-height: 1;
	color: inherit;
}

.device-order-page .device-return-badge.is-defect {
	border-color: var(--danger, #dc3545);
	color: var(--danger, #dc3545);
}

.device-order-page .device-return-badge.is-returned {
	border-color: var(--danger, #dc3545);
	color: var(--danger, #dc3545);
}

.device-order-page .device-work-item__warranty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.device-order-page .device-work-item__warranty-actions .btn .material-icons {
	font-size: 14px;
	margin-right: 2px;
	vertical-align: middle;
}

.device-order-page .device-warranty-action-btn {
	height: 22px;
	min-height: 22px;
	padding: 0 7px;
	border-radius: 5px;
	font-size: 11px;
	line-height: 20px;
}

/* Inline text links in banners/chat only — timeline child button reuses «По гарантії» styles. */
.device-order-page .device-warranty-banner .device-warranty-order-link,
.device-order-page .device-chat .device-warranty-order-link {
	border: 1px solid var(--danger, #dc3545);
	border-radius: 5px;
	color: #111;
	padding: 0 6px;
	text-decoration: none;
}

.device-order-page .device-warranty-banner .device-warranty-order-link:hover,
.device-order-page .device-warranty-banner .device-warranty-order-link:focus,
.device-order-page .device-chat .device-warranty-order-link:hover,
.device-order-page .device-chat .device-warranty-order-link:focus {
	color: #111;
	border-color: var(--danger, #dc3545);
}

.device-order-page .device-chat__text--warranty-log {
	font-size: 13px;
	line-height: 1.45;
}
.device-order-page .device-chat__warranty-services {
	margin: 6px 0 8px 18px;
	padding: 0;
}
.device-order-page .device-chat__warranty-services li {
	margin: 2px 0;
}
.device-order-page .device-chat__warranty-author {
	margin-top: 6px;
	color: var(--text-muted, #666);
}


/* ================================================================== */
/* Clients / Detail page */
/* Source: modules/clients/styles/client_detail.css */
/* ================================================================== */
/**
 * Client card (/?client=) — Order Card parity (layout + tokens).
 * Theme tokens mirror order_theme.css for .client-page.
 */

[data-theme-resolved='light'] .client-page {
	--order-bg-block: #FFFFFF;
	--order-bg-subtle: #F9FAFB;
	--order-bg-muted: #F3F4F6;
	--order-bg-elevated: #FFFFFF;
	--order-text-main: #111827;
	--order-text-strong: #000000;
	--order-text-muted: #6B7280;
	--order-text-subtle: #9CA3AF;
	--order-text-inverse: #FFFFFF;
	--order-border: #E5E7EB;
	--order-border-strong: #D1D5DB;
	--order-border-row: #F3F4F6;
	--order-hover: #F9FAFB;
	--order-shadow-hover: rgba(0, 0, 0, 0.05);
	--order-icon-muted: #4B5563;
	--order-chip-bg: #E5E7EB;
	--order-chip-border: #D1D5DB;
	--order-chip-text: #374151;
	--order-chip-hover-bg: #D1D5DB;
	--order-chip-hover-border: #9CA3AF;
	--order-badge-bg: #F9FAFB;
	--order-badge-border: #E5E7EB;
}

[data-theme-resolved='dark'] .client-page {
	--order-bg-block: #1F2937;
	--order-bg-subtle: #111827;
	--order-bg-muted: #374151;
	--order-bg-elevated: #263040;
	--order-text-main: #F9FAFB;
	--order-text-strong: #FFFFFF;
	--order-text-muted: #9CA3AF;
	--order-text-subtle: #6B7280;
	--order-text-inverse: #111827;
	--order-border: #374151;
	--order-border-strong: #4B5563;
	--order-border-row: #2D3748;
	--order-hover: #374151;
	--order-shadow-hover: rgba(0, 0, 0, 0.25);
	--order-icon-muted: #9CA3AF;
	--order-chip-bg: #374151;
	--order-chip-border: #4B5563;
	--order-chip-text: #E5E7EB;
	--order-chip-hover-bg: #4B5563;
	--order-chip-hover-border: #6B7280;
	--order-badge-bg: #263040;
	--order-badge-border: #374151;
}

.client-page {
	--order-gap: 10px;
	--order-block-pad: 10px;
	--order-card-radius: 5px;
	--order-gap-sm: 10px;
	--order-btn-h: 36px;
	--order-icon-size: 20px;
	--order-header-btn-h: 22px;
	--order-header-btn-min-w: 30px;
	--order-header-btn-font: 12px;
	--order-header-btn-icon: 10px;
	--order-header-btn-radius: 5px;
	--order-header-btn-pad-x: 6px;
	--order-header-btn-gap: 4px;
	--oc-block-padding: var(--order-block-pad);
	--oc-block-gap: var(--order-gap);
	--oc-icon-size: var(--order-icon-size);
	--device-block-pad: var(--order-block-pad);
	--oc-gap-sm: var(--order-gap-sm);
	--oc-btn-h: var(--order-btn-h);
	--oc-radius: var(--order-card-radius);
	--oc-icon: var(--order-icon-size);
	--oc-gap: var(--order-gap);
	--oc-text: var(--order-text-main);
	--oc-muted: var(--order-text-muted);
	--oc-subtle-bg: var(--order-bg-subtle);
	--oc-divider: var(--order-border);

	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	margin-bottom: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	color: var(--order-text-main);
}

.client-page > .device-flash-alert,
.client-page > .rbac-scope-notice {
	margin: 0 0 var(--order-gap, 10px);
}

.client-page .ui-block {
	background: var(--order-bg-block);
	border: 1px solid var(--order-border);
	border-radius: var(--order-card-radius, 5px);
	padding: var(--order-block-pad, 10px) !important;
	margin: 0 !important;
	margin-bottom: 0 !important;
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
}

.client-page .ui-block:hover {
	transform: none;
	box-shadow: var(--shadow-sm);
	border-color: var(--order-border);
}

.client-page .ui-block-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--order-gap, 10px);
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
}

.client-page .ui-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--order-gap, 10px);
	min-height: unset;
	height: auto;
	box-sizing: border-box;
	padding: 0 0 var(--order-block-pad, 10px) !important;
	margin: 0 0 var(--order-block-pad, 10px) !important;
	border-bottom: 1px solid var(--order-border);
	min-width: 0;
}

.client-page .ui-block-header__main {
	display: flex;
	align-items: center;
	gap: var(--order-gap, 10px);
	min-width: 0;
	flex: 1 1 auto;
}

.client-page .ui-block-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--order-text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.client-page .ui-block-header__main > .ui-icon,
.client-page .ui-block-header__main > .material-icons {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	color: var(--order-text-muted);
}

.client-page .client-master-card__mood-icon.is-ok {
	color: var(--success, #16a34a) !important;
}

.client-page .client-master-card__mood-icon.is-warn {
	color: var(--warning-hover, #d97706) !important;
}

.client-page .client-master-card__mood-icon.is-bad {
	color: var(--danger, #dc3545) !important;
}

.client-page .client-master-card__mood-icon.is-great {
	color: #2563eb !important;
}

.client-page .client-master-card__edit.ui-block-header-chip--icon-only {
	border-radius: 5px;
}

.client-page .ui-block-header-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--order-gap, 10px);
	flex-shrink: 0;
}

.client-page .ui-block-header-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--order-header-btn-gap, 4px);
	height: var(--order-header-btn-h, 22px);
	min-height: var(--order-header-btn-h, 22px);
	max-height: var(--order-header-btn-h, 22px);
	min-width: var(--order-header-btn-min-w, 30px);
	width: auto;
	padding: 0 var(--order-header-btn-pad-x, 6px);
	margin: 0;
	border: 1px solid var(--order-chip-border);
	border-radius: var(--order-header-btn-radius, 5px);
	box-sizing: border-box;
	background: var(--order-chip-bg);
	color: var(--order-chip-text);
	font-size: var(--order-header-btn-font, 12px);
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.client-page .ui-block-header-chip--icon-only {
	min-width: var(--order-header-btn-min-w, 30px);
	padding: 0 var(--order-header-btn-pad-x, 6px);
}

.client-page .ui-block-header-chip .material-icons,
.client-page .ui-block-header-chip .ui-icon {
	flex-shrink: 0;
	width: var(--order-header-btn-icon, 10px) !important;
	height: var(--order-header-btn-icon, 10px) !important;
	font-size: var(--order-header-btn-icon, 10px) !important;
	line-height: 1 !important;
	color: var(--order-icon-muted);
}

.client-page .ui-block-header-chip__label {
	font-size: var(--order-header-btn-font, 12px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--order-chip-text);
}

.client-page .ui-block-header-chip:hover {
	background: var(--order-chip-hover-bg);
	border-color: var(--order-chip-hover-border);
	color: var(--order-text-main);
	text-decoration: none;
}

.client-page .ui-block-header-chip:hover .material-icons,
.client-page .ui-block-header-chip:hover .ui-icon,
.client-page .ui-block-header-chip:hover .ui-block-header-chip__label {
	color: var(--order-text-main);
}

/* Layout: 320px | 1fr — як Order Card */
.client-page .client-page-body {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	column-gap: var(--order-gap, 10px);
	row-gap: var(--order-gap, 10px);
	align-items: start;
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.client-page .client-page-info,
.client-page .client-page-feed {
	display: flex;
	flex-direction: column;
	gap: var(--order-gap, 10px);
	min-width: 0;
	max-width: 100%;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	align-self: stretch;
}

.client-page .client-page-info {
	position: sticky;
	top: 0;
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 2;
	overscroll-behavior: contain;
}

.client-page .client-master-card > .ui-block-content {
	gap: 0;
}

.client-page .device-master-card__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--order-gap, 10px);
	margin: 0;
}

.client-page .device-master-card__stat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--order-header-btn-gap, 4px);
	height: var(--order-header-btn-h, 22px);
	min-height: var(--order-header-btn-h, 22px);
	max-height: var(--order-header-btn-h, 22px);
	min-width: var(--order-header-btn-min-w, 30px);
	padding: 0 var(--order-header-btn-pad-x, 6px);
	margin: 0;
	border: none;
	border-radius: var(--order-header-btn-radius, 5px);
	box-sizing: border-box;
	background: var(--order-bg-subtle);
	font-size: var(--order-header-btn-font, 12px);
	font-weight: 600;
	line-height: 1;
	color: var(--order-text-muted);
	white-space: nowrap;
}

.client-page .device-master-card__stat .material-icons,
.client-page .device-master-card__stat .ui-icon {
	flex-shrink: 0;
	width: var(--order-header-btn-icon, 10px) !important;
	height: var(--order-header-btn-icon, 10px) !important;
	font-size: var(--order-header-btn-icon, 10px) !important;
	line-height: 1 !important;
	color: inherit;
}

.client-page .device-master-card__stat.is-warn {
	color: var(--warning, #f59e0b);
	background: rgba(var(--warning-rgb, 245, 158, 11), 0.1);
}

.client-page .device-master-card__dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--order-gap, 10px);
	margin-top: var(--order-gap, 10px);
	margin-bottom: var(--order-gap, 10px);
	width: 100%;
	box-sizing: border-box;
}

.client-page .device-master-card__date {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	padding: var(--order-gap, 10px);
	border: 1px solid var(--order-border);
	border-radius: var(--order-card-radius, 5px);
	background: var(--order-bg-subtle);
	box-sizing: border-box;
}

.client-page .device-master-card__date-label,
.client-page .device-master-card__date-day {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.client-page .device-master-card__date-label {
	font-weight: 600;
	color: var(--order-text-muted);
}

.client-page .device-master-card__date-day {
	font-weight: 700;
	color: var(--order-text-main);
}

.client-page .device-master-card__specs {
	margin-top: 0;
	padding-top: 10px;
	padding-bottom: 0;
	border-top: 1px dotted var(--order-border);
}

.client-page .device-info-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

.client-page .device-info-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 0;
	align-items: start;
	margin: 0;
	padding: 10px 0;
	border: none;
	box-sizing: border-box;
}

.client-page .device-info-row + .device-info-row {
	border-top: 1px dotted var(--oc-divider);
}

.client-page .device-info-row:first-child {
	padding-top: 0;
}

.client-page .device-info-row:last-child {
	padding-bottom: 0;
}

.client-page .device-info-label {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--order-text-muted);
	margin: 0;
	padding: 0;
}

.client-page .device-info-value {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--order-text-main);
	min-width: 0;
	word-break: break-word;
	margin: 0;
	padding: 0;
}

.client-page .client-page__alert {
	display: flex;
	align-items: flex-start;
	gap: var(--order-gap, 10px);
	margin-top: var(--order-gap, 10px);
	padding: 10px;
	border-radius: var(--order-card-radius, 5px);
	border: 1px solid rgba(var(--danger-rgb, 220, 53, 69), 0.25);
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.08);
	font-size: 12px;
	line-height: 1.35;
	color: var(--order-text-main);
}

.client-page .client-page__alert .material-icons {
	flex-shrink: 0;
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--danger, #dc3545);
}

.client-page .client-page__mood-chip {
	font-size: 12px;
	font-weight: 600;
	height: 22px;
	min-height: 22px;
	max-height: 22px;
	padding: 0 6px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	border: 1px solid var(--order-border);
	background: var(--order-bg-subtle);
	color: var(--order-text-muted);
	box-sizing: border-box;
	line-height: 1;
}

.client-page .client-page__mood-chip.is-ok,
.client-page .client-page__mood-chip.is-great {
	border-color: rgba(var(--success-rgb, 34, 197, 94), 0.35);
	background: rgba(var(--success-rgb, 34, 197, 94), 0.12);
	color: var(--success, #16a34a);
}

.client-page .client-page__mood-chip.is-warn {
	border-color: rgba(var(--warning-rgb, 245, 158, 11), 0.35);
	background: rgba(var(--warning-rgb, 245, 158, 11), 0.12);
	color: var(--warning, #f59e0b);
}

.client-page .client-page__mood-chip.is-bad {
	border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.35);
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
	color: var(--danger, #dc3545);
}

.client-page .device-feed-empty {
	background: var(--order-bg-subtle);
	color: var(--order-text-muted);
	border-radius: var(--order-card-radius, 5px);
	padding: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	border: none;
}

.client-page .client-feed-section .ui-block-content {
	gap: 0;
}

.client-page .client-feed-section .device_list,
.client-page .client-feed-section .crm-table-wrap {
	margin: 0;
}

@media (min-width: 881px) {
	.client-page {
		min-height: calc(100dvh - 60px);
	}

	.client-page .client-page-body {
		min-height: calc(100dvh - 60px);
		grid-template-rows: minmax(0, 1fr);
	}
}

@media (max-width: 880px) {
	.client-page .client-page-body {
		display: flex;
		flex-direction: column;
		gap: var(--order-gap, 10px);
		grid-template-columns: unset;
	}

	.client-page .client-page-info {
		order: 1;
		flex: 0 0 auto;
		position: static;
		top: auto;
		max-height: none;
		overflow: visible;
		overflow-x: hidden;
		z-index: auto;
	}

	.client-page .client-page-feed {
		order: 2;
		flex: 0 0 auto;
		min-width: 0;
		overflow-x: hidden;
	}

	.client-page .client-feed-section .crm-table-wrap,
	.client-page .client-feed-section .device_list {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {
	.client-page .device-master-card__dates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.client-page .ui-block-header {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.client-page .ui-block-header__main {
		flex: 1 1 100%;
		min-width: 0;
	}

	.client-page .ui-block-header-actions {
		flex: 1 1 auto;
		justify-content: flex-start;
	}

	.client-page .client-phone-group__number {
		font-size: 14px;
	}
}


/* ================================================================== */
/* Clients / List page */
/* Source: modules/clients/styles/client_list.css */
/* ================================================================== */
/**
 * Clients list — responsive 4-column table (no horizontal scroll).
 * Columns: Name | Phone | Date | Status icon.
 */

#clients {
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

#clients .crm-page-header,
#clients .crm-page-header__actions,
#clients-list-root,
#clients .client-table-wrap.crm-table-wrap {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

#clients .client-table-wrap.crm-table-wrap {
	overflow-x: hidden;
	margin-bottom: 4px;
}

#clients .client-table.stats_table {
	table-layout: fixed;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100%;
	border-collapse: collapse;
}

/* Flexible column shares: name gets the most room */
#clients .client-table col.client-col-name-w {
	width: 36%;
}

#clients .client-table col.client-col-phone-w {
	width: 34%;
}

#clients .client-table col.client-col-date-w {
	width: 18%;
}

#clients .client-table col.client-col-status-w {
	width: 12%;
}

#clients .client-table thead th {
	padding: 8px 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-color);
	background: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#clients .client-table td {
	padding: 10px 12px;
	font-size: 0.8125rem;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
}

#clients .client-table tbody tr.client-table-row:last-child td {
	border-bottom: none;
}

#clients .client-table tbody tr.client-table-row {
	cursor: pointer;
	transition: background var(--transition-fast, 0.15s ease);
	min-height: 44px;
}

#clients .client-table tbody tr.client-table-row:hover {
	background: var(--bg-card-hover, rgba(0, 0, 0, 0.03));
}

#clients .client-table tbody tr.client-table-row:focus-visible {
	outline: 2px solid var(--primary, #2563eb);
	outline-offset: -2px;
}

/* Override legacy design_system rules that hide columns on small screens */
#clients .client-table col.client-col-name-w,
#clients .client-table col.client-col-phone-w,
#clients .client-table col.client-col-date-w,
#clients .client-table col.client-col-status-w {
	display: table-column !important;
}

#clients .client-table :is(th, td).client-col-name,
#clients .client-table :is(th, td).client-col-phone,
#clients .client-table :is(th, td).client-col-date,
#clients .client-table :is(th, td).client-col-status {
	display: table-cell !important;
	min-width: 0 !important;
	max-width: none !important;
	box-sizing: border-box;
}

#clients .client-table :is(th, td).client-col-name {
	text-align: left;
	width: auto !important;
	overflow: hidden;
}

#clients .client-table :is(th, td).client-col-phone {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#clients .client-table :is(th, td).client-col-date {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
}

#clients .client-table :is(th, td).client-col-status {
	text-align: center;
	white-space: nowrap;
	width: 12% !important;
	padding-left: 4px;
	padding-right: 4px;
}

#clients .client-table .c-name {
	font-size: inherit;
	font-weight: 700;
	color: var(--text-main);
	text-decoration: none;
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.35;
}

#clients .client-table .c-name:hover {
	color: var(--primary);
	text-decoration: none;
}

#clients .client-table .c-phone,
#clients .client-table .c-date-text {
	font-size: inherit;
	color: var(--text-muted);
	font-weight: 500;
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#clients .client-table .c-phone--empty {
	opacity: 0.55;
}

#clients .client-table .client-mood {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	flex-shrink: 0;
}

#clients .pagination {
	margin-top: 0;
	padding-top: 0;
}

/* Cancel legacy design_system archive rules (avatar cols, min-width scroll, hidden columns) */
#clients .crm-table-wrap,
#clients .client-table-wrap.crm-table-wrap {
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: auto;
}

#clients .client-table.stats_table {
	min-width: 0 !important;
}

#clients .client-table :is(th, td).stats_col_main {
	min-width: 0 !important;
	max-width: none !important;
	white-space: nowrap !important;
	word-break: normal;
	overflow-wrap: normal;
}

#clients .client-table .c-name {
	display: block;
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
	white-space: nowrap;
}

@media (max-width: 900px) {
	#clients .client-table :is(th, td).client-col-date,
	#clients .client-table col.client-col-date-w {
		display: table-cell !important;
	}
}

@media (max-width: 768px) {
	#clients .client-table.stats_table {
		min-width: 0 !important;
	}

	#clients .client-table :is(th, td).client-col-phone {
		min-width: 0 !important;
		max-width: none !important;
	}
}

@media (max-width: 640px) {
	#clients .client-table :is(th, td).client-col-phone,
	#clients .client-table col.client-col-phone-w {
		display: table-cell !important;
	}

	#clients .client-table.stats_table {
		min-width: 0 !important;
	}
}

/* 320px stress — tighter padding, all 4 columns stay visible */
@media (max-width: 360px) {
	#clients .crm-page-header {
		gap: 8px;
	}

	#clients .client-table thead th {
		padding: 6px 2px;
		font-size: 0.5625rem;
		letter-spacing: 0;
	}

	#clients .client-table td {
		padding: 10px 2px;
		font-size: 0.625rem;
	}

	#clients .client-table col.client-col-name-w {
		width: 28%;
	}

	#clients .client-table col.client-col-phone-w {
		width: 38%;
	}

	#clients .client-table col.client-col-date-w {
		width: 22%;
	}

	#clients .client-table col.client-col-status-w {
		width: 12%;
	}

	#clients .client-table .client-mood {
		width: 18px;
		height: 18px;
	}

	#clients .client-table .client-mood .material-icons {
		font-size: 12px;
		width: 12px;
		height: 12px;
	}
}

/* Large screens — proportional stretch, readable rhythm */
@media (min-width: 1400px) {
	#clients .client-table thead th {
		padding: 10px 14px;
		font-size: 0.75rem;
	}

	#clients .client-table td {
		padding: 12px 14px;
		font-size: 0.875rem;
	}

	#clients .client-table col.client-col-name-w {
		width: 38%;
	}

	#clients .client-table col.client-col-phone-w {
		width: 32%;
	}

	#clients .client-table col.client-col-date-w {
		width: 18%;
	}

	#clients .client-table col.client-col-status-w {
		width: 12%;
	}
}

#clients .crm-empty {
	margin: 0 0 16px;
}

/* Tablet */
@media (max-width: 900px) {
	#clients .client-table col.client-col-name-w {
		width: 34%;
	}

	#clients .client-table col.client-col-phone-w {
		width: 32%;
	}

	#clients .client-table col.client-col-date-w {
		width: 20%;
	}

	#clients .client-table col.client-col-status-w {
		width: 14%;
	}

	#clients .client-table thead th,
	#clients .client-table td {
		padding: 10px 8px;
		font-size: 0.8125rem;
	}

	#clients .client-table tbody tr.client-table-row td {
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Phone — all 4 columns stay visible, no side scroll */
@media (max-width: 640px) {
	#clients .client-table-wrap.crm-table-wrap {
		overflow-x: hidden !important;
		padding: 0;
	}

	#clients .client-table.stats_table {
		min-width: 0 !important;
		width: 100% !important;
	}

	#clients .client-table col.client-col-name-w {
		width: 32%;
	}

	#clients .client-table col.client-col-phone-w {
		width: 34%;
	}

	#clients .client-table col.client-col-date-w {
		width: 22%;
	}

	#clients .client-table col.client-col-status-w {
		width: 12%;
	}

	#clients .client-table thead th {
		padding: 6px 4px;
		font-size: 0.625rem;
		letter-spacing: 0.02em;
	}

	#clients .client-table td {
		padding: 10px 4px;
		font-size: 0.6875rem;
	}

	#clients .client-table tbody tr.client-table-row td {
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#clients .client-table :is(th, td).client-col-status {
		padding-left: 2px;
		padding-right: 2px;
		width: 12% !important;
	}

	#clients .client-table .client-mood {
		width: 20px;
		height: 20px;
		font-size: 14px;
	}

	#clients .client-table .client-mood .material-icons {
		font-size: 14px;
		width: 14px;
		height: 14px;
		line-height: 1;
	}
}

@media (max-width: 380px) {
	#clients .client-table thead th,
	#clients .client-table td {
		padding: 10px 3px;
		font-size: 0.625rem;
	}

	#clients .client-table col.client-col-name-w {
		width: 30%;
	}

	#clients .client-table col.client-col-phone-w {
		width: 36%;
	}

	#clients .client-table col.client-col-date-w {
		width: 22%;
	}

	#clients .client-table col.client-col-status-w {
		width: 12%;
	}
}


/* ================================================================== */
/* Inventory / Stock */
/* Source: modules/inventory/styles/stock.css */
/* ================================================================== */
/* Inventory / Stock - catalog, tables, mobile shell */

#stock-page,
#stock-item-page {
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	#stock-page,
	#stock-item-page {
		padding-bottom: 80px;
	}
}

#stock-page .crm-table-wrap,
#stock-item-page .crm-table-wrap,
#stock-page .stock-table-wrap,
#stock-page .movement-table-wrap,
#stock-page .capital-table-wrap,
#stock-item-page .batch-table-wrap {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#stock-page .st-suppliers {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	line-height: 1.35;
	white-space: normal;
}

#stock-item-page .stock-writeoff-form input[type="number"],
#stock-item-page .stock-writeoff-form select,
#stock-item-page .stock-writeoff-form textarea,
.stock-writeoff-form input[type="number"],
.stock-writeoff-form select,
.stock-writeoff-form textarea,
.supply-modal-form input[type="number"] {
	width: 100%;
	box-sizing: border-box;
}

#stock-page .stock-col-actions,
#stock-page td.move-actions,
#stock-item-page td.batch-actions {
	position: sticky;
	right: 0;
	z-index: 2;
	background: var(--bg-card);
	box-shadow: -6px 0 10px rgba(15, 23, 42, 0.06);
	white-space: nowrap;
}

/* Compact items table — no desktop horizontal scroll */
#stock-page .stock-items-table--compact {
	width: 100%;
	table-layout: fixed;
}

#stock-page .stock-items-table--compact th,
#stock-page .stock-items-table--compact td {
	padding: 6px 8px;
	font-size: 13px;
	line-height: 1.35;
	vertical-align: middle;
}

#stock-page .stock-items-table--compact .stock-col-name {
	width: auto;
	min-width: 0 !important;
	max-width: none !important;
}

#stock-page .stock-items-table--compact .stock-col-cat {
	width: 28%;
	min-width: 0 !important;
	max-width: none !important;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#stock-page .stock-items-table--compact .stock-col-qty {
	width: 5.5rem;
	min-width: 0 !important;
	max-width: none !important;
	white-space: nowrap;
	text-align: right;
}

#stock-page .stock-items-table--compact .stock-col-status {
	width: 7.5rem;
	min-width: 0 !important;
	max-width: none !important;
	white-space: nowrap;
}

#stock-page .stock-items-table--compact .st-name {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

#stock-page .stock-items-table--compact .st-name-text {
	min-width: 0;
	flex: 1 1 auto;
}

#stock-page .st-type-chip {
	flex: 0 0 auto;
	display: inline-block;
	padding: 1px 6px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.1);
	color: var(--primary);
}

#stock-page .stock-cat-table th,
#stock-page .stock-cat-table td {
	padding: 7px 10px;
	font-size: 13px;
}

#stock-page .stock-cat-table .stock-col-name {
	min-width: 0 !important;
}

#stock-page .stock-cat-table .stock-col-n {
	width: 6.5rem !important;
	min-width: 0 !important;
	max-width: none !important;
	text-align: right;
}

@media (min-width: 1024px) {
	#stock-page .stock-table-wrap,
	#stock-page .crm-table-wrap:has(.stock-items-table--compact),
	#stock-page .crm-table-wrap:has(.stock-cat-table) {
		overflow-x: visible;
	}
}

/* Actions kebab */
.stock-actions-menu {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.stock-actions-menu .crm-dropdown__panel {
	right: 0;
	left: auto;
	min-width: 180px;
	padding: 4px 0;
}

.stock-actions-menu .crm-dropdown__item,
.stock-actions-menu .crm-dropdown__form .crm-dropdown__item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	background: transparent;
	color: var(--text-main);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.stock-actions-menu .crm-dropdown__item .material-icons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--text-muted);
}

.stock-actions-menu .crm-dropdown__item:hover,
.stock-actions-menu .crm-dropdown__form .crm-dropdown__item:hover {
	background: rgba(var(--primary-rgb, 76, 139, 245), 0.08);
	color: var(--primary);
}

.stock-actions-menu .crm-dropdown__item--danger {
	color: var(--danger, #dc3545);
}

.stock-actions-menu .crm-dropdown__item--danger .material-icons {
	color: inherit;
}

.stock-actions-menu .crm-dropdown__item.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.stock-actions-menu .crm-dropdown__form {
	margin: 0;
}

#stock-item-page .stock-item-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* ── Stock chips (OrderCard parity) ───────────────────────── */
#stock-page,
#stock-item-page {
	--stock-chip-h: 22px;
	--stock-chip-min-w: 30px;
	--stock-chip-pad-x: 6px;
	--stock-chip-gap: 4px;
	--stock-chip-radius: 5px;
	--stock-chip-font: 12px;
	--stock-chip-icon: 10px;
	--stock-chip-bg: #E5E7EB;
	--stock-chip-border: #D1D5DB;
	--stock-chip-text: #374151;
	--stock-chip-hover-bg: #D1D5DB;
	--stock-chip-hover-border: #9CA3AF;
}

[data-theme="dark"] #stock-page,
[data-theme="dark"] #stock-item-page,
html.dark #stock-page,
html.dark #stock-item-page {
	--stock-chip-bg: #374151;
	--stock-chip-border: #4B5563;
	--stock-chip-text: #E5E7EB;
	--stock-chip-hover-bg: #4B5563;
	--stock-chip-hover-border: #6B7280;
}

#stock-page .stock-chip,
#stock-item-page .stock-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stock-chip-gap);
	height: var(--stock-chip-h);
	min-height: var(--stock-chip-h);
	max-height: var(--stock-chip-h);
	min-width: var(--stock-chip-min-w);
	width: auto;
	padding: 0 var(--stock-chip-pad-x);
	margin: 0;
	border: 1px solid var(--stock-chip-border);
	border-radius: var(--stock-chip-radius);
	background: var(--stock-chip-bg);
	color: var(--stock-chip-text);
	box-sizing: border-box;
	font-size: var(--stock-chip-font);
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#stock-page .stock-chip .material-icons,
#stock-item-page .stock-chip .material-icons {
	flex-shrink: 0;
	width: var(--stock-chip-icon) !important;
	height: var(--stock-chip-icon) !important;
	font-size: var(--stock-chip-icon) !important;
	line-height: 1 !important;
	color: inherit;
	opacity: 0.85;
}

#stock-page .stock-chip__label,
#stock-item-page .stock-chip__label {
	font-size: var(--stock-chip-font);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: inherit;
}

#stock-page .stock-chip:hover,
#stock-item-page .stock-chip:hover {
	background: var(--stock-chip-hover-bg);
	border-color: var(--stock-chip-hover-border);
	color: var(--text-main, #111827);
	text-decoration: none;
}

#stock-page .stock-chip--icon,
#stock-item-page .stock-chip--icon {
	min-width: var(--stock-chip-min-w);
	padding: 0 var(--stock-chip-pad-x);
}

#stock-page .stock-chip--danger,
#stock-item-page .stock-chip--danger {
	border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.35);
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
	color: var(--danger, #dc3545);
}

#stock-page .stock-chip--danger .material-icons,
#stock-item-page .stock-chip--danger .material-icons {
	color: var(--danger, #dc3545);
	opacity: 1;
}

#stock-page .stock-chip--danger:hover,
#stock-item-page .stock-chip--danger:hover {
	background: rgba(var(--danger-rgb, 220, 53, 69), 0.18);
	border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.45);
	color: var(--danger, #dc3545);
}

#stock-page .stock-chip--ghost,
#stock-item-page .stock-chip--ghost {
	background: transparent;
	border-color: var(--border-color, #D1D5DB);
	color: var(--text-muted, #6B7280);
}

#stock-page .stock-chip--ghost:hover,
#stock-item-page .stock-chip--ghost:hover {
	background: rgba(0, 0, 0, 0.04);
	border-color: var(--stock-chip-hover-border);
	color: var(--text-main, #111827);
}

#stock-page .stock-chip.is-disabled,
#stock-item-page .stock-chip.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

#stock-page .stock-chip-form,
#stock-item-page .stock-chip-form {
	display: inline-flex;
	margin: 0;
	vertical-align: middle;
}

#stock-page .crm-toolbar,
#stock-page .stock-item-actions,
#stock-item-page .stock-item-actions,
#stock-item-page .sip-panel-head,
#stock-item-page .stock-ctx-header--item {
	gap: 6px;
}

#stock-page .move-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

/* ── Compact supply (FIFO) table ──────────────────────────── */
#stock-item-page .batch-table--compact {
	width: 100%;
	min-width: 0;
	table-layout: auto;
	border-collapse: collapse;
}

#stock-item-page .batch-table--compact th,
#stock-item-page .batch-table--compact td {
	padding: 6px 8px;
	font-size: 13px;
	line-height: 1.35;
	vertical-align: middle;
}

#stock-item-page .batch-table--compact .batch-col-date,
#stock-item-page .batch-table--compact .batch-col-qty,
#stock-item-page .batch-table--compact .batch-col-cost {
	width: 1%;
	min-width: max-content;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#stock-item-page .batch-table--compact .batch-col-qty,
#stock-item-page .batch-table--compact .batch-col-cost {
	text-align: right;
}

#stock-item-page .batch-table--compact .batch-col-supplier {
	width: auto;
	min-width: 0;
	max-width: none;
}

#stock-item-page .batch-table--compact .batch-col-act {
	width: 1%;
	min-width: max-content;
	white-space: nowrap;
	text-align: right;
	padding-right: 4px;
}

#stock-item-page .batch-table--compact .batch-col-cost {
	font-weight: 700;
}

@media (min-width: 768px) {
	#stock-item-page .crm-table-wrap.batch-table-wrap:has(.batch-table--compact) {
		overflow-x: visible;
	}
}

@media (max-width: 767px) {
	#stock-item-page .stock-ctx-header--item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	#stock-item-page .stock-ctx-header--item .stock-ctx-header-main {
		flex: 1 1 140px;
		min-width: 0;
	}

	#stock-item-page .stock-item-actions {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	#stock-item-page .batch-table--compact th,
	#stock-item-page .batch-table--compact td {
		padding: 5px 6px;
		font-size: 12px;
	}

	#stock-item-page .batch-table--compact {
		min-width: 0;
	}
}


/* ================================================================== */
/* Settings / Location */
/* Source: modules/settings/location/styles/location_settings.css */
/* ================================================================== */
/* Location settings - company summary + edit form */

.location-company {
	margin: var(--space-24) 0;
	padding: var(--space-24);
}

.location-company__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	margin-bottom: var(--space-16);
}

.location-company__title-wrap {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}

.location-company__title-wrap .material-icons {
	color: var(--primary);
	font-size: 22px;
}

.location-company__title {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-main);
}

.location-company__edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.location-company__edit .material-icons {
	font-size: 16px;
}

.location-company__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.location-company__row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--space-12);
	align-items: start;
}

.location-company__label {
	font-size: var(--font-caption);
	color: var(--text-muted);
	padding-top: 2px;
}

.location-company__value {
	font-size: var(--font-size-base);
	color: var(--text-main);
	line-height: 1.45;
	word-break: break-word;
}

.location-company__empty {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-caption);
}

.location-edit-form .location-form__section {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--ds-border);
}

.location-edit-form .location-form__section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.location-edit-form .location-form__section .form-label {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-base);
	color: var(--text-main);
}

@media (max-width: 576px) {
	.location-company__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}


/* ================================================================== */
/* Mobile / Tablet / Desktop - responsive */
/* Source: design/ui/responsive_core.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Responsive System (DS v20)
   Canonical breakpoints: 1400 / 992 / 768 / 767 / 575
   Styles only - no layout structure changes
   ========================================================================== */

/* --- Global overflow guard --- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.logged-in,
.app_frame,
.app_main,
.main_area,
.crm-page,
#content,
main {
	max-width: 100%;
	min-width: 0;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* --- Typography scale --- */
@media (max-width: 767px) {
	:root {
		--font-display: clamp(1.25rem, 5vw, 1.5rem);
		--font-title: clamp(1.0625rem, 4vw, 1.25rem);
		--font-body: 0.9375rem;
		--font-caption: 0.8125rem;
		--responsive-page-pad: var(--space-12);
		--responsive-section-gap: var(--space-8);
	}

	.unified-page-title,
	.crm-page-title,
	.ds-h1 {
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.section-desc,
	.crm-section__desc {
		font-size: var(--font-caption);
		line-height: 1.5;
	}
}

@media (max-width: 575px) {
	:root {
		--responsive-page-pad: 10px;
	}
}

/* --- Page headers --- */
@media (max-width: 991px) {
	.unified-page-header,
	.crm-page-header,
	.device-header-row,
	.dash-module-header,
	.mc-module-header {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: var(--responsive-section-gap) !important;
	}

	.unified-page-header__actions,
	.crm-page-header__actions,
	.header-actions,
	.page-actions {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-8);
		justify-content: flex-start;
	}

	#dashboard .crm-content-head .crm-page-header,
	#my_cash .crm-content-head .crm-page-header,
	#instruction-page .crm-content-head .crm-page-header,
	#device-catalog-page .crm-content-head .crm-page-header {
		flex-wrap: nowrap !important;
	}

	#dashboard .crm-content-head .crm-page-header__actions,
	#dashboard .crm-content-head .header-actions,
	#my_cash .crm-content-head .crm-page-header__actions,
	#my_cash .crm-content-head .header-actions,
	#instruction-page .crm-content-head .crm-page-header__actions,
	#instruction-page .crm-content-head .header-actions,
	#device-catalog-page .crm-content-head .crm-page-header__actions,
	#device-catalog-page .crm-content-head .header-actions {
		width: auto !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
	}
}

@media (max-width: 767px) {
	.unified-page-header__actions .btn,
	.crm-page-header__actions .btn,
	.header-actions .btn,
	.page-actions .btn {
		flex: 1 1 auto;
		min-width: min(100%, 140px);
		justify-content: center;
	}
}

/* --- Forms: single column + touch --- */
@media (max-width: 767px) {
	.form-row,
	.row.g-3,
	.row.g-2,
	.ds-form-grid,
	.crm-form-grid {
		--bs-gutter-x: 0;
	}

	.form-row > [class*='col-'],
	.row.g-3 > [class*='col-'],
	.row.g-2 > [class*='col-'],
	.ds-form-grid > *,
	.crm-form-grid > * {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	.form-group.button,
	.ds-form-actions,
	.form-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: var(--space-8);
	}

	.form-group.button .btn,
	.ds-form-actions .btn,
	.form-actions .btn {
		width: 100%;
		min-height: var(--touch-target-min);
	}

	textarea.form-control {
		min-height: 88px;
		height: auto;
	}
}

/* --- Buttons & touch targets --- */
@media (max-width: 767px) {
	.btn:not(.btn-xs):not(.btn-link),
	.side_btn,
	.side_link,
	.top_toggle,
	.pagination a,
	.paginator a {
		min-height: var(--touch-target-min);
	}

	.btn-icon:not(.btn-xs) {
		min-width: var(--touch-target-min);
		min-height: var(--touch-target-min);
	}

	.btn-group {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.btn-group .btn {
		flex: 1 1 auto;
	}
}

/* --- Tables: horizontal scroll --- */
@media (max-width: 991px) {
	.crm-table-wrap,
	.fin-table-wrap,
	.acc-table-wrap,
	.stock-table-wrap,
	.movement-table-wrap,
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		max-width: 100%;
		scrollbar-width: thin;
	}

	.crm-table-wrap::after,
	.fin-table-wrap::after,
	.acc-table-wrap::after,
	.stock-table-wrap::after {
		content: '';
		display: block;
		height: 0;
		clear: both;
	}
}

@media (max-width: 767px) {
	.crm-table thead th,
	.fin-table thead th,
	.acc-table thead th,
	.stock-table thead th,
	.client-table thead th,
	.stats_table thead th {
		font-size: 0.6875rem;
		padding: var(--space-8) var(--space-8);
	}

	.crm-table tbody td,
	.fin-table tbody td,
	.acc-table tbody td,
	.stock-table tbody td,
	.client-table tbody td,
	.stats_table tbody td {
		padding: var(--space-8);
		font-size: var(--font-caption);
	}
}

/* --- Cards & lists --- */
@media (max-width: 767px) {
	.crm-card,
	.pro-card,
	.ds-card,
	.used-card,
	.task-card,
	.wiki-card {
		min-width: 0;
		overflow: hidden;
	}

	.crm-card__body,
	.pro-card-body {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* --- Modals / dialogs (supplement dialog.css) --- */
@media (max-width: 767px) {
	.dlg_body,
	.modal-body {
		max-height: min(60vh, calc(var(--dlg_viewport_h, 100dvh) - 180px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dlg_foot,
	.modal-footer {
		position: sticky;
		bottom: 0;
		z-index: 2;
		flex-wrap: wrap;
		gap: var(--space-8);
		padding-bottom: max(var(--space-12), env(safe-area-inset-bottom, 0));
	}

	.dlg_foot .btn,
	.modal-footer .btn {
		flex: 1 1 calc(50% - var(--space-8));
		min-height: var(--touch-target-min);
	}

	.modal:target .modal-content,
	[id^='edit_']:target > form {
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		margin: 8px auto !important;
	}
}

/* --- Utility visibility --- */
.ds-hide-mobile {
	display: inherit;
}

.ds-hide-tablet-up {
	display: none;
}

@media (max-width: 767px) {
	.ds-hide-mobile {
		display: none !important;
	}

	.ds-hide-tablet-up {
		display: inherit;
	}

	.ds-stack-mobile {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.ds-full-mobile {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* --- Safe areas (notch devices) --- */
@supports (padding: env(safe-area-inset-bottom)) {
	@media (max-width: 767px) {
		#admin_panel,
		.um-sticky-save,
		.pagination {
			padding-bottom: env(safe-area-inset-bottom, 0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.side_panel,
	.app_main,
	.dlg_root[open] .dlg_panel {
		transition: none !important;
	}
}


/* ================================================================== */
/* Mobile / Tablet / Desktop - responsive bridge */
/* Source: design/ui/responsive_bridge.css */
/* ================================================================== */
/* ==========================================================================
   Responsive Bridge - module-specific (DS v20)
   Preserves block order; only adaptive behavior
   ========================================================================== */

/* --- Orders: status tabs + kanban --- */
@media (max-width: 991px) {
	.location-selector-inline {
		flex-wrap: wrap;
		gap: var(--space-4);
		max-width: 100%;
	}

	.device_list.kanban-mode {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: var(--space-12);
		padding-bottom: var(--space-8);
		max-width: 100%;
		align-items: flex-start !important;
	}

	.device_list.kanban-mode > .kanban-col {
		flex: 0 0 min(85vw, 320px) !important;
		max-width: min(85vw, 320px) !important;
		scroll-snap-align: start;
		min-height: 0;
		height: auto !important;
	}

	.device_list.kanban-mode .kanban-items {
		max-height: none;
		overflow-y: visible;
	}

	.device_list.kanban-mode .device-row,
	[data-layout="card"] .device_list.kanban-mode .device-row {
		height: auto !important;
		flex-shrink: 0 !important;
	}

	.device_list.kanban-mode .device-link,
	[data-layout="card"] .device_list.kanban-mode .device-link {
		height: auto !important;
	}
}

@media (max-width: 767px) {
	[data-layout='card'] .device_list:not(.kanban-mode),
	[data-layout='linear'] .device_list:not(.kanban-mode) {
		grid-template-columns: 1fr !important;
	}

	.device-row .d-model,
	.device-row .d-contact__name {
		overflow-wrap: anywhere;
	}

	#devices-live-root.is-syncing {
		opacity: 0.92;
	}
}

/* --- Clients --- */
@media (max-width: 767px) {
	[data-layout='linear'] .client_list .client-row,
	[data-layout='card'] .client_list {
		grid-template-columns: 1fr !important;
	}

	.client-table-wrap,
	.client_list {
		max-width: 100%;
		overflow-x: auto;
	}
}

/* --- Tasks --- */
@media (max-width: 767px) {
	#tasks-live-root .task_list,
	.task-cards-grid {
		grid-template-columns: 1fr !important;
	}

	.task-row-actions {
		flex-wrap: wrap;
		gap: var(--space-4);
	}
}

/* --- Stock / inventory --- */
@media (max-width: 991px) {
	.stock-table-layout {
		min-width: 640px;
	}

	.stock-toolbar,
	.stock-filters-row {
		flex-wrap: wrap;
		gap: var(--space-8);
	}

	.stock-view-tabs,
	.module-subnav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		max-width: 100%;
		scrollbar-width: none;
	}

	.stock-view-tabs::-webkit-scrollbar,
	.module-subnav::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 767px) {
	.stock-col-go,
	.move-actions {
		white-space: nowrap;
	}

	.stock-col-go .btn,
	.move-actions .btn {
		min-height: var(--touch-target-min);
	}
}

/* --- USED devices --- */
@media (max-width: 767px) {
	.used-grid,
	.used-cards {
		grid-template-columns: 1fr !important;
	}

	.used-card-action {
		width: 100%;
		min-height: var(--touch-target-min);
	}
}

/* --- Accounting / debts --- */
@media (max-width: 767px) {
	.acc-summary-row,
	.debt-summary-row,
	.fin-summary-cards {
		grid-template-columns: 1fr !important;
	}

	.debt-actions,
	.acc-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.debt-actions .btn,
	.acc-toolbar .btn {
		width: 100%;
	}
}

/* --- Wiki / knowledge base --- */
@media (max-width: 767px) {
	.wiki-layout,
	.wiki-grid {
		grid-template-columns: 1fr !important;
	}

	.wiki-sidebar {
		max-width: 100%;
	}
}

/* --- Dashboard & My Cash (crm_content_head - title left, filter right) --- */
@media (max-width: 991px) {
	#dashboard .crm-content-head .crm-page-header,
	#my_cash .crm-content-head .crm-page-header {
		flex-wrap: nowrap !important;
	}
}

@media (max-width: 767px) {
	#dashboard .crm-content-head .crm-page-header__actions,
	#dashboard .crm-content-head .header-actions,
	#my_cash .crm-content-head .crm-page-header__actions,
	#my_cash .crm-content-head .header-actions {
		width: auto !important;
		justify-content: flex-end !important;
	}

	.dash_filter_popover,
	.mc_filter_popover {
		max-width: calc(100vw - 24px);
	}

	.stats_grid,
	.dash-kpi-grid,
	.mc-kpi-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
	}
}

/* --- Settings / users --- */
@media (max-width: 767px) {
	.settings-nav,
	.user-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.um-perm-grid,
	.rbac-perm-grid {
		grid-template-columns: 1fr !important;
	}

	.um-sticky-save {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		padding: var(--space-8) var(--space-12) !important;
		padding-bottom: max(var(--space-8), env(safe-area-inset-bottom, 0)) !important;
	}
}

/* --- Floating admin panel --- */
@media (max-width: 767px) {
	#admin_panel {
		right: max(8px, env(safe-area-inset-right, 0)) !important;
		bottom: max(8px, env(safe-area-inset-bottom, 0)) !important;
		left: auto !important;
		max-width: calc(100vw - 16px);
	}

	#admin_panel .btn {
		min-height: var(--touch-target-min);
		min-width: var(--touch-target-min);
	}
}

/* --- Auth pages --- */
@media (max-width: 575px) {
	.auth-wrap,
	.login-card,
	.reg-card {
		padding: var(--space-16);
		margin: var(--space-8);
		max-width: calc(100vw - 16px);
	}
}

/* --- Chips / filters --- */
@media (max-width: 767px) {
	.filter-chips,
	.status-chips,
	.pay-chips {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.device-pay-chip,
	.filter-chip {
		min-height: var(--touch-target-min);
	}
}

/* --- Pagination --- */
@media (max-width: 575px) {
	.pagination,
	.paginator ul {
		gap: 4px;
	}

	.pagination a,
	.paginator a {
		min-width: var(--touch-target-min);
		padding: 0 var(--space-8);
	}
}

/* --- Print: hide chrome --- */
@media print {
	.side_panel,
	.top_bar,
	#admin_panel,
	.side_back {
		display: none !important;
	}

	.app_main {
		margin-left: 0 !important;
		width: 100% !important;
	}
}


/* ================================================================== */
/* Print bridge (screen helpers) */
/* Source: design/ui/print_bridge.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Print bridge (print templates)
   Token-based styles for print_used*.php, documents/receipt_form.php, documents/invoice_form.php, documents/order_documents/order_print.php
   ========================================================================== */

@media print {
	body {
		font-family: var(--font-sans);
		color: #000;
		background: #fff;
	}
}

.print-doc {
	font-family: var(--font-sans);
	font-size: 12pt;
	color: #111;
	line-height: 1.45;
}

.print-doc h1,
.print-doc .print-title {
	font-size: 16pt;
	font-weight: 700;
	margin: 0 0 12pt;
}

.print-doc h2,
.print-doc .print-subtitle {
	font-size: 11pt;
	font-weight: 600;
	margin: 0 0 8pt;
}

.print-doc table {
	width: 100%;
	border-collapse: collapse;
	font-size: 10pt;
}

.print-doc th,
.print-doc td {
	padding: 6pt 8pt;
	border: 1px solid #ccc;
	vertical-align: top;
}

.print-doc th {
	font-weight: 700;
	background: #f5f5f5;
}

.print-doc .print-muted {
	color: #666;
	font-size: 9pt;
}

.print-doc .print-sign-row {
	display: flex;
	justify-content: space-between;
	gap: 24pt;
	margin-top: 24pt;
}

.print-doc .print-sign-block {
	flex: 1;
	border-top: 1px solid #000;
	padding-top: 6pt;
	font-size: 9pt;
}


/* ================================================================== */
/* Auth pages */
/* Source: design/auth_style.css */
/* ================================================================== */
/* ============================================
   iService CRM - Modern Split-Pane Auth
   ============================================ */

.auth-page-modern {
	display: flex;
	min-height: 100vh;
	background-color: var(--bg-body);
	font-family: var(--font-sans);
}

/* Left Panel - Branding & Infographics */
.auth-side-panel {
	display: none;
	/* hidden on small screens */
	flex: 1;
	max-width: 45%;
	background: var(--primary);
	color: #fff;
	padding: 60px;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	border-right: 1px solid var(--primary-dark);
}

@media (min-width: 992px) {
	.auth-side-panel {
		display: flex;
	}
}

/* Flat 2026 - no decorative gradients or animations */
.auth-side-panel::before {
	display: none;
}

.auth-branding {
	position: relative;
	z-index: 1;
}

.auth-branding .logo-icon {
	font-size: 64px;
	margin-bottom: 20px;
	color: #fff;
}

.auth-branding h2 {
	font-size: 2.5rem;
	font-weight: 800;
	margin: 0 0 10px 0;
	letter-spacing: -0.03em;
}

.auth-branding p {
	font-size: 1.1rem;
	opacity: 0.8;
}

.auth-features {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 40px;
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.feature-item .material-icons {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 12px;
	border-radius: 5px;
	font-size: 28px;
	box-shadow: none;
}

.feature-text strong {
	display: block;
	font-size: 1.1rem;
	margin-bottom: 4px;
}

.feature-text span {
	font-size: 0.95rem;
	opacity: 0.8;
	line-height: 1.4;
	display: block;
}

/* Right Panel - Form */
.auth-form-panel {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background-color: var(--bg-main);
	position: relative;
}

.auth-form-container {
	width: 100%;
	max-width: 400px;
	position: relative;
	z-index: 1;
}

/* Mobile Header (when side panel is hidden) */
.auth-mobile-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
}

@media (min-width: 992px) {
	.auth-mobile-header {
		display: none;
	}
}

.auth-mobile-header .material-icons {
	font-size: 36px;
	color: var(--primary);
}

.auth-mobile-header span {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--text-primary);
}

/* Form Styles */
.auth-form-header {
	margin-bottom: 40px;
}

.auth-form-header h1 {
	font-size: 2rem;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 8px 0;
	letter-spacing: -0.02em;
}

.auth-form-header p {
	font-size: 1rem;
	color: var(--text-muted);
	margin: 0;
}

.auth-form .form-group {
	margin-bottom: 24px;
	position: relative;
}

.auth-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 8px;
}

.auth-form .form-control {
	width: 100%;
	height: 54px;
	background: var(--bg-card);
	border: 2px solid var(--border-color);
	border-radius: 5px;
	padding: 0 16px;
	font-size: 1.05rem;
	color: var(--text-primary);
	transition: all 0.3s ease;
}

.auth-form .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
	outline: none;
	background: var(--bg-main);
}

.auth-form .form-control::placeholder {
	color: var(--text-light);
}

/* Icon inside input */
.input-with-icon {
	position: relative;
}

.input-with-icon .material-icons {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--text-light);
	pointer-events: none;
	transition: color 0.3s ease;
	z-index: 1;
	font-size: 20px;
	line-height: 1;
}

.input-with-icon .form-control {
	padding-left: 48px !important;
	padding-right: 16px !important;
	position: relative;
	z-index: 0;
}

.input-with-icon .form-control:focus+.material-icons,
.input-with-icon .form-control:not(:placeholder-shown)+.material-icons {
	color: var(--primary);
}


/* Form Messages */
.auth-msg {
	padding: 16px;
	border-radius: 5px;
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.auth-msg .material-icons {
	font-size: 24px;
}

.auth-msg.info {
	background: var(--info-light);
	color: var(--info);
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.auth-form .feedback {
	font-size: 0.85rem;
	margin-top: 8px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 4px;
}

.auth-form .feedback .material-icons {
	font-size: 16px;
}

.auth-form .feedback.invalid {
	color: var(--danger);
}

/* Primary Button */
.auth-form .btn-primary {
	width: 100%;
	height: 56px;
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.auth-form .btn-primary:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
}

/* Links and Footer */
.auth-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -8px;
	margin-bottom: 24px;
}

.auth-link {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.auth-link:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

.auth-form-footer {
	margin-top: 32px;
	text-align: center;
	font-size: 0.95rem;
	color: var(--text-muted);
}

.auth-form-footer a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}

.auth-form-footer a:hover {
	text-decoration: underline;
}

.auth-form-footer--muted {
	margin-top: 24px;
	text-align: center;
}

.auth-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
}

.auth-back-link:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

.auth-back-link .material-icons {
	font-size: 16px;
}

/* ============================================
   Simple login (guest only - email + password)
   ============================================ */

body.auth-page {
	margin: 0;
	min-height: 100vh;
	background: var(--bg-body);
}

body.auth-page .auth_container {
	min-height: 100vh;
}

.auth-simple {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	background: var(--bg-body);
	font-family: var(--font-sans);
}

.auth-simple__card {
	width: 100%;
	max-width: 380px;
	padding: 32px 28px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	box-shadow: var(--shadow-md);
}

.auth-simple__brand {
	text-align: center;
	margin-bottom: 28px;
}

.auth-simple__brand .material-icons {
	font-size: 40px;
	color: var(--primary);
	margin-bottom: 8px;
}

.auth-simple__brand h1 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text-heading);
	letter-spacing: -0.02em;
}

.auth-simple .auth-form .form-control {
	height: 44px;
	border-radius: 5px;
	border-width: 1px;
	font-size: 0.95rem;
	padding: 0 12px;
}

.auth-simple .auth-form .btn-primary {
	height: 44px;
	border-radius: 5px;
	font-size: 0.95rem;
	margin-top: 4px;
	transform: none;
}

.auth-simple .auth-form .btn-primary:hover {
	transform: none;
	box-shadow: none;
}

.auth-simple .auth-form-header {
	display: none;
}

/* ================================================================== */
/* Documents - print layout */
/* Source: design/sources/doc_print_scoped.css */
/* ================================================================== */
/**
 * Print documents - жорсткий A4 (scale, не reflow) · sticky actions · ink-friendly.
 *
 * Типографіка: системний/Inter · 12px / 10px · логотип (Avenir Next) 48px.
 * Кольори: #000 / #4D4D4D · білий фон · без тіней.
 */

.no-print,
.d-print-none {
	/* visible on screen */
}

@media print {
	.no-print,
	.d-print-none,
	.document-actions-bar,
	.doc-toolbar {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Screen chrome                                                       */
/* ------------------------------------------------------------------ */

/* Заборона горизонтальної прокрутки сторінки на мобільних */
html:has(body.print-document) {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

body.print-document {
	margin: 0;
	padding: 20px;
	width: 100%;
	max-width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #f3f4f6;
	background-color: #f3f4f6;
	color: #4d4d4d;
	font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	-webkit-font-smoothing: antialiased;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

/* Sticky action bar - зліва над документом, ширина як у A4 */
body.print-document .a4-wrapper > .document-actions-bar,
body.print-document .a4-wrapper > .doc-toolbar,
body.print-document .document-actions-bar,
body.print-document .doc-toolbar {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	max-width: 794px;
	margin: 0 0 15px;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	box-sizing: border-box;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	backdrop-filter: none;
}

body.print-document .doc-toolbar__spacer {
	display: none !important;
	flex: 0 0 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body.print-document .doc-toolbar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid #4d4d4d;
	border-radius: 5px;
	background: #fff;
	color: #000;
	font: 600 13px/1.2 var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	text-decoration: none;
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	margin: 0;
}

body.print-document .doc-toolbar__btn--primary {
	background: #000;
	border-color: #000;
	color: #fff;
	margin-left: 0;
}

body.print-document .doc-toolbar__btn .material-icons {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

body.print-document .doc-toolbar__btn--back {
	margin-right: 0;
	order: 0;
}

body.print-document .doc-toolbar__btn--print {
	order: 1;
	margin-left: 0 !important;
}

/*
 * Круглі кнопки на вузькому layout / touch.
 * Залишаються зліва з безпечним відступом від краю екрана.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
	body.print-document .a4-wrapper > .document-actions-bar,
	body.print-document .a4-wrapper > .doc-toolbar,
	body.print-document .document-actions-bar,
	body.print-document .doc-toolbar {
		padding: 0;
		margin-bottom: 12px;
		justify-content: flex-start;
		gap: 10px;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	body.print-document .doc-toolbar__btn--back,
	body.print-document .doc-toolbar__btn--print {
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
		padding: 0;
		border-radius: 50%;
		gap: 0;
		margin: 0 !important;
	}

	body.print-document .doc-toolbar__btn--back .doc-toolbar__btn-label,
	body.print-document .doc-toolbar__btn--print .doc-toolbar__btn-label {
		display: none;
	}

	body.print-document .doc-toolbar__btn .material-icons {
		font-size: 22px;
	}
}

/* ------------------------------------------------------------------ */
/* A4 viewport - scale + compressed wrapper (без phantom space)         */
/* ------------------------------------------------------------------ */

body.print-document .a4-wrapper {
	width: min(210mm, calc(100vw - 40px));
	min-width: 0;
	max-width: calc(100vw - 40px);
	margin: 0 auto;
	padding: 0 0 20px;
	box-sizing: border-box;
	overflow: hidden;
	display: block;
	flex: 0 0 auto;
}

/* Динамічна обгортка: JS задає width/height = scaled size на мобільних */
body.print-document .a4-scale-stage,
body.print-document .document-scale-wrapper {
	display: block;
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	box-sizing: border-box;
}

body.print-document .document-a4,
body.print-document .print_container.document-a4,
body.print-document .a4-document {
	--doc-ink: #000000;
	--doc-ink-muted: #4d4d4d;
	--doc-line: #4d4d4d;
	--doc-section-gap: 8px;
	--doc-title-line-gap: 4px;
	--doc-row-gap: 4px;
	--doc-block-pad-y: 8px;
	--doc-block-pad-x: 10px;
	--doc-cell-pad-y: 4px;
	--doc-cell-pad-x: 8px;
	--doc-body-gap: 10px;
	--doc-font-base: 12px;
	--doc-font-small: 10px;
	--doc-font-logo: 48px;
	--doc-font-stack: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	--doc-logo-font: "Avenir Next", Avenir, "Avenir Next LT Pro", sans-serif;

	width: 210mm !important;
	min-width: 210mm !important;
	max-width: 210mm !important;
	min-height: 297mm;
	height: auto;
	max-height: none;
	padding: 10mm;
	box-sizing: border-box;
	margin: 0;
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: var(--doc-ink-muted);
	font-family: var(--doc-font-stack) !important;
	font-size: var(--doc-font-base);
	line-height: 1.4;
	position: relative;
	overflow: visible;
	border: 0;
	border-radius: 5px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	word-wrap: break-word;
	overflow-wrap: break-word;
	flex-shrink: 0;
	transform-origin: top left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

body.print-document .document-a4 *,
body.print-document .document-a4 *::before,
body.print-document .document-a4 *::after {
	font-family: inherit;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Екран: білий фон елементів (без сірих «підсвіток» від Bootstrap) */
body.print-document .document-a4 .doc-title,
body.print-document .document-a4 .doc-title h1,
body.print-document .document-a4 .doc-body,
body.print-document .document-a4 .doc-panel,
body.print-document .document-a4 .doc-cols__col,
body.print-document .document-a4 .section-title,
body.print-document .document-a4 .info-row,
body.print-document .document-a4 .value,
body.print-document .document-a4 .label,
body.print-document .document-a4 .data-table,
body.print-document .document-a4 .data-table th,
body.print-document .document-a4 .data-table td,
body.print-document .document-a4 .totals,
body.print-document .document-a4 .totals-row,
body.print-document .document-a4 .terms,
body.print-document .document-a4 .doc-bottom {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
}

body.print-document .document-a4 h1,
body.print-document .document-a4 h2,
body.print-document .document-a4 h3,
body.print-document .document-a4 h4,
body.print-document .document-a4 h5,
body.print-document .document-a4 h6,
body.print-document .document-a4 strong,
body.print-document .document-a4 b,
body.print-document .document-a4 th {
	color: #000000 !important;
}

/* Колонки - ніколи не wrap на вузькому екрані (scale відповідає за розмір) */
body.print-document .document-a4 .doc-cols {
	flex-wrap: nowrap !important;
}

body.print-document .document-a4 .doc-top {
	flex-wrap: nowrap !important;
}

/* ------------------------------------------------------------------ */
/* Print - оригінальні 210mm, без scale, 1 аркуш                       */
/* ------------------------------------------------------------------ */

@media print {
	@page {
		size: A4;
		margin: 0;
	}

	html,
	body.print-document {
		width: 210mm;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		align-items: stretch !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		overflow: visible !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	body.print-document #admin_panel,
	body.print-document .no-print,
	body.print-document .d-print-none,
	body.print-document .document-actions-bar,
	body.print-document .doc-toolbar {
		display: none !important;
	}

	body.print-document .a4-wrapper {
		display: block;
		width: 210mm !important;
		min-width: 210mm !important;
		max-width: 210mm !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		min-height: 0 !important;
		height: auto !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		box-shadow: none !important;
		transform: none !important;
	}

	body.print-document .a4-scale-stage,
	body.print-document .document-scale-wrapper {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		transform: none !important;
		box-shadow: none !important;
	}

	body.print-document .document-a4,
	body.print-document .print_container.document-a4,
	body.print-document .a4-document {
		width: 210mm !important;
		min-width: 210mm !important;
		max-width: 210mm !important;
		height: auto !important;
		transform: none !important;
		box-shadow: none !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 0!important;
		box-shadow: none !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		overflow: visible !important;
		transform: none !important;
		page-break-after: avoid;
		page-break-inside: auto;
		break-after: avoid-page;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	/* PDF Print Bug: сірі смуги під заголовками / у блоках */
	body.print-document .document-a4,
	body.print-document .document-a4 *,
	body.print-document .document-a4 *::before,
	body.print-document .document-a4 *::after {
		background-image: none !important;
		box-shadow: none !important;
		text-shadow: none !important;
		filter: none !important;
		backdrop-filter: none !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	body.print-document .document-a4 h1,
	body.print-document .document-a4 h2,
	body.print-document .document-a4 h3,
	body.print-document .document-a4 h4,
	body.print-document .document-a4 h5,
	body.print-document .document-a4 h6,
	body.print-document .document-a4 span,
	body.print-document .document-a4 div,
	body.print-document .document-a4 p,
	body.print-document .document-a4 table,
	body.print-document .document-a4 thead,
	body.print-document .document-a4 tbody,
	body.print-document .document-a4 tr,
	body.print-document .document-a4 th,
	body.print-document .document-a4 td,
	body.print-document .document-a4 article,
	body.print-document .document-a4 header,
	body.print-document .document-a4 section {
		background: #ffffff !important;
		background-color: #ffffff !important;
		background-image: none !important;
	}

	body.print-document .document-a4 h1,
	body.print-document .document-a4 .doc-title h1,
	body.print-document .document-a4 .section-title,
	body.print-document .document-a4 .doc-panel__title,
	body.print-document .document-a4 th {
		color: #000000 !important;
	}

	body.print-document .document-a4,
	body.print-document .document-a4 p,
	body.print-document .document-a4 span,
	body.print-document .document-a4 td,
	body.print-document .document-a4 li,
	body.print-document .document-a4 .value,
	body.print-document .document-a4 .label {
		color: #4d4d4d !important;
	}

	body.print-document .document-a4 h1,
	body.print-document .document-a4 .doc-title h1,
	body.print-document .document-a4 .section-title,
	body.print-document .document-a4 .doc-panel__title,
	body.print-document .document-a4 th,
	body.print-document .document-a4 .grand-total,
	body.print-document .document-a4 .grand-total span,
	body.print-document .document-a4 .doc-brand-logo,
	body.print-document .document-a4 .location-text-logo {
		color: #000000 !important;
		font-family: "Avenir Next", Avenir, "Avenir Next LT Pro", sans-serif !important;
		font-weight: 700 !important;
	}

	body.print-document .document-a4 table,
	body.print-document .document-a4 th,
	body.print-document .document-a4 td,
	body.print-document .document-a4 .doc-panel,
	body.print-document .document-a4 .doc-cols__col,
	body.print-document .document-a4 .totals,
	body.print-document .document-a4 .doc-top {
		border-color: #4d4d4d !important;
	}

	body.print-document .document-a4:last-child,
	body.print-document .a4-wrapper .document-a4:last-of-type {
		page-break-after: avoid;
	}

	body.print-document .document-a4 .doc-top,
	body.print-document .document-a4 .doc-cols,
	body.print-document .document-a4 .doc-panel,
	body.print-document .document-a4 .data-table,
	body.print-document .document-a4 .doc-table,
	body.print-document .document-a4 .totals,
	body.print-document .document-a4 .doc-total-wrap,
	body.print-document .document-a4 .doc-warranty-block {
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

body.print-document .document-a4 .doc-top {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 5mm;
	padding-bottom: 3mm;
	margin-bottom: 0;
	border-bottom: 1px solid var(--doc-line);
	background: transparent;
}

body.print-document .document-a4 .doc-top__brand {
	width: 55%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
}

/* Avenir Next - лише текстовий логотип локації/компанії */
.location-text-logo {
	font-family: "Avenir Next", Avenir, "Avenir Next LT Pro", sans-serif !important;
	font-weight: 700 !important;
}

body.print-document .document-a4 .doc-brand-logo,
body.print-document .document-a4 .location-text-logo {
	margin: 0;
	padding: 0;
	font-family: var(--doc-logo-font, "Avenir Next", Avenir, "Avenir Next LT Pro", sans-serif) !important;
	font-size: var(--doc-font-logo);
	font-weight: 700 !important;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--doc-ink);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent;
}

body.print-document .document-a4 .doc-brand-meta {
	margin: 0;
	font-size: inherit;
	line-height: 1.4;
	color: var(--doc-ink-muted);
	max-width: 100%;
	background: transparent;
}

body.print-document .document-a4 .doc-brand-meta p {
	margin: 0;
	color: inherit;
}

body.print-document .document-a4 .doc-brand-meta__name,
body.print-document .document-a4 .doc-brand-meta__address,
body.print-document .document-a4 .doc-brand-meta__phones {
	margin: 0;
	font-size: inherit;
	font-weight: 500;
	color: var(--doc-ink-muted);
	line-height: 1.4;
}

body.print-document .document-a4 .doc-brand-meta__phones {
	margin-top: 1px;
}

body.print-document .document-a4 .doc-top__aside {
	width: 42%;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 3mm;
	text-align: right;
}

body.print-document .document-a4 .doc-top__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.print-document .document-a4 .doc-top__label {
	display: block;
	margin: 0 0 1mm;
	font-size: var(--doc-font-small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--doc-ink-muted);
	line-height: 1.3;
}

body.print-document .document-a4 .doc-top__value {
	margin: 0;
	font-size: var(--doc-font-small);
	font-weight: 700;
	color: var(--doc-ink);
	line-height: 1.3;
}

body.print-document .document-a4 .doc-top__hint {
	margin: 1mm 0 0;
	font-size: var(--doc-font-small);
	color: var(--doc-ink-muted);
	line-height: 1.3;
}

body.print-document .document-a4 .doc-qr-box {
	flex-shrink: 0;
	width: 32mm;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

body.print-document .document-a4 .doc-qr-box img,
body.print-document .document-a4 .js-doc-qr {
	display: block;
	width: 32mm;
	height: 32mm;
	margin: 0;
	padding: 1mm;
	box-sizing: border-box;
	border: 1px solid var(--doc-line);
	border-radius: 0;
	background: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Title / body                                                        */
/* ------------------------------------------------------------------ */

body.print-document .document-a4 .doc-title {
	margin: 3mm 0 2.5mm;
	text-align: left;
	background: #ffffff !important;
	background-color: #ffffff !important;
}

body.print-document .document-a4 .doc-title h1 {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	color: #000000 !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

body.print-document .document-a4 .doc-title p {
	margin: 1mm 0 0;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.4;
	color: var(--doc-ink-muted);
}

body.print-document .document-a4 .doc-body {
	display: flex;
	flex-direction: column;
	gap: var(--doc-body-gap);
	background: transparent;
}

body.print-document .document-a4 .doc-cols {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--doc-body-gap);
	width: 100%;
	background: transparent;
}

body.print-document .document-a4 .doc-cols__col,
body.print-document .document-a4 .doc-panel {
	width: 50%;
	min-width: 0;
	flex: 0 0 calc(50% - (var(--doc-body-gap) / 2));
	box-sizing: border-box;
	padding: var(--doc-block-pad-y) var(--doc-block-pad-x);
	border: 1px solid var(--doc-line);
	border-radius: 0;
	background: transparent;
}

body.print-document .document-a4 .doc-panel {
	width: auto;
	flex: none;
}

body.print-document .document-a4 .section-title,
body.print-document .document-a4 .doc-panel__title {
	display: block;
	margin: 0 !important;
	padding: 0 0 var(--doc-title-line-gap);
	border-bottom: 1px solid #4d4d4d !important;
	font-size: var(--doc-font-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #000000 !important;
	line-height: 1.3;
	background: #ffffff !important;
	background-color: #ffffff !important;
	gap: 0;
	align-items: unset;
}

body.print-document .document-a4 .section-title + *,
body.print-document .document-a4 .doc-panel__title + * {
	margin-top: 0 !important;
	padding-top: var(--doc-section-gap) !important;
}

body.print-document .document-a4 .info-row,
body.print-document .document-a4 .doc-field {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 var(--doc-row-gap);
	font-size: inherit;
	line-height: 1.4;
	color: var(--doc-ink-muted);
	background: transparent;
}

body.print-document .document-a4 .info-row:last-child,
body.print-document .document-a4 .doc-field:last-child {
	margin-bottom: 0;
}

body.print-document .document-a4 .label,
body.print-document .document-a4 .doc-field__label {
	flex: 0 0 28mm;
	width: 28mm;
	min-width: 28mm;
	font-size: inherit;
	font-weight: 500;
	color: var(--doc-ink-muted);
}

body.print-document .document-a4 .value,
body.print-document .document-a4 .doc-field__value {
	flex: 1 1 auto;
	min-width: 0;
	font-size: inherit;
	font-weight: 500;
	color: var(--doc-ink-muted);
	word-break: break-word;
	overflow-wrap: break-word;
}

body.print-document .document-a4 .value.bold,
body.print-document .document-a4 .bold {
	font-weight: 700;
	color: var(--doc-ink);
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

body.print-document .document-a4 .data-table,
body.print-document .document-a4 .doc-table {
	width: 100%;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	table-layout: fixed;
	font-size: inherit;
	line-height: 1.4;
	color: #4d4d4d;
	background: #ffffff !important;
	border: 1px solid #4d4d4d !important;
	border-radius: 0!important;
	overflow: visible !important;
	box-shadow: none !important;
}

body.print-document .document-a4 .data-table th,
body.print-document .document-a4 .data-table td,
body.print-document .document-a4 .doc-table th,
body.print-document .document-a4 .doc-table td {
	border: 1px solid #4d4d4d !important;
	border-color: #4d4d4d !important;
	padding: 4px 6px;
	vertical-align: top;
	text-align: left;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	box-sizing: border-box;
	font-size: inherit;
	line-height: 1.4;
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #4d4d4d !important;
}

/* Глобальний .data-table tr:last-child td { border-bottom: none } ламає сітку */
body.print-document .document-a4 .data-table tr:last-child td,
body.print-document .document-a4 .data-table tr:last-child th,
body.print-document .document-a4 .doc-table tr:last-child td,
body.print-document .document-a4 .doc-table tr:last-child th {
	border-bottom: 1px solid #4d4d4d !important;
}

body.print-document .document-a4 .data-table--invoice,
body.print-document .document-a4 .data-table--services {
	margin-top: 1mm;
}

body.print-document .document-a4 .data-table--invoice th,
body.print-document .document-a4 .data-table--invoice td,
body.print-document .document-a4 .data-table--services th,
body.print-document .document-a4 .data-table--services td {
	padding: 4px 6px;
}

body.print-document .document-a4 .data-table th,
body.print-document .document-a4 .doc-table th {
	font-size: var(--doc-font-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--doc-ink);
	line-height: 1.3;
	background: transparent !important;
}

body.print-document .document-a4 .data-table td.num,
body.print-document .document-a4 .data-table td.qty,
body.print-document .document-a4 .print-col-center {
	text-align: center;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	color: var(--doc-ink-muted);
}

body.print-document .document-a4 .data-table td.amount,
body.print-document .document-a4 .print-col-right {
	text-align: right;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	font-variant-numeric: tabular-nums;
}

body.print-document .document-a4 .print-col-w-5 { width: 8%; }
body.print-document .document-a4 .print-col-w-10 { width: 12%; }
body.print-document .document-a4 .print-col-w-20 { width: 18%; }
body.print-document .document-a4 .print-col-w-55 { width: auto; }
body.print-document .document-a4 .print-col-w-65 { width: auto; }

body.print-document .document-a4 .data-table--invoice .col-num { width: 7%; text-align: center; }
body.print-document .document-a4 .data-table--invoice .col-name { width: auto; }
body.print-document .document-a4 .data-table--invoice .col-qty { width: 10%; text-align: center; }
body.print-document .document-a4 .data-table--invoice .col-unit { width: 11%; text-align: center; }
body.print-document .document-a4 .data-table--invoice .col-price { width: 16%; text-align: right; }
body.print-document .document-a4 .data-table--invoice .col-sum { width: 14%; text-align: right; }

body.print-document .document-a4 .clearfix,
body.print-document .document-a4 .doc-totals-wrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-top: 2mm;
	background: #ffffff !important;
}

body.print-document .document-a4 .clearfix::after {
	display: none;
	content: none;
	border: 0;
	height: 0;
}

body.print-document .document-a4 .totals,
body.print-document .document-a4 .doc-total-wrap {
	float: none;
	width: 70mm;
	min-width: 70mm;
	border: 1px solid #4d4d4d !important;
	border-radius: 0;
	padding: 2mm 2.5mm;
	background: #ffffff !important;
	box-sizing: border-box;
}

body.print-document .document-a4 .totals-row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 3mm;
	margin: 0 0 1mm;
	padding: 0;
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	font-size: inherit;
	line-height: 1.4;
	color: #4d4d4d !important;
	background: #ffffff !important;
}

body.print-document .document-a4 .totals-row:last-child {
	margin-bottom: 0;
}

/* Без декоративної лінії над фінальною сумою */
body.print-document .document-a4 .totals-row.grand-total,
body.print-document .document-a4 .price-total {
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-top: 0 !important;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.4;
	color: #000000 !important;
	background: #ffffff !important;
}

body.print-document .document-a4 .totals-row.grand-total span {
	color: #000000 !important;
	background: #ffffff !important;
}

body.print-document .document-a4 .doc-total-caption,
body.print-document .document-a4 .doc-price-label,
body.print-document .document-a4 .doc-warranty-label {
	font-size: var(--doc-font-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--doc-ink);
	margin-bottom: 1mm;
	line-height: 1.3;
}

body.print-document .document-a4 .doc-warranty-block {
	display: flex;
	flex-wrap: nowrap;
	gap: 3mm;
	align-items: stretch;
}

body.print-document .document-a4 .doc-warranty-block > div {
	flex: 1 1 50%;
	min-width: 0;
	padding: 2mm 2.5mm;
	border: 1px solid var(--doc-line);
	border-radius: 0;
	background: transparent;
	box-sizing: border-box;
}

body.print-document .document-a4 .doc-warranty-value {
	font-size: inherit;
	font-weight: 700;
	color: var(--doc-ink);
}

body.print-document .document-a4 .doc-warranty-until {
	margin-top: 1mm;
	font-size: inherit;
	color: var(--doc-ink-muted);
}

body.print-document .document-a4 .price-total {
	border: none;
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Terms / footer - ліве вирівнювання, 10px                            */
/* ------------------------------------------------------------------ */

body.print-document .document-a4 .doc-bottom {
	margin-top: 3mm;
	padding-top: 0;
	margin-bottom: 0;
	background: transparent;
}

body.print-document .document-a4 .terms,
body.print-document .document-a4 .legal-text {
	margin: 0 0 2mm;
	padding: 0;
	border: none;
	font-size: var(--doc-font-small);
	line-height: 1.3;
	color: var(--doc-ink-muted);
	text-align: left;
	background: transparent;
}

body.print-document .document-a4 .terms .section-title {
	margin: 0 !important;
	padding: 0 0 var(--doc-title-line-gap);
	font-size: var(--doc-font-small);
	line-height: 1.3;
	color: var(--doc-ink);
	text-align: left;
}

body.print-document .document-a4 .terms p,
body.print-document .document-a4 .legal-text p {
	margin: 0 0 1mm;
	font-size: var(--doc-font-small);
	line-height: 1.3;
	color: var(--doc-ink-muted);
	text-align: left;
}

body.print-document .document-a4 .print-footer-note,
body.print-document .document-a4 .doc-e-footer,
body.print-document .document-a4 .doc-meta-muted {
	margin: 0;
	padding-top: 2mm;
	border-top: 1px solid var(--doc-line);
	font-size: var(--doc-font-small);
	line-height: 1.3;
	color: var(--doc-ink-muted);
	text-align: left;
	background: transparent;
}

body.print-document .document-a4 .text-center {
	text-align: left;
	color: var(--doc-ink-muted);
}

body.print-document .document-a4 .signatures,
body.print-document .document-a4 .signature-row {
	display: none !important;
}

body.print-document #admin_panel {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
}

body.print-document #admin_panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
	flex-direction: row-reverse;
}

body.print-document #admin_panel li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: #000;
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
}

body.print-document icon {
	font-family: "Material Icons";
	font-size: 24px;
	line-height: 1;
}


/* ================================================================== */
/* Documents - extras */
/* Source: design/sources/documents_extra.css */
/* ================================================================== */
/**
 * Document extras - узгоджено з ink-friendly друком (12 / 10, #000 / #4D4D4D).
 */

body.print-document .legal-text {
	margin-top: 3mm;
	text-align: left;
	color: #4d4d4d;
	font-size: 10px;
	line-height: 1.3;
	background: transparent;
}

body.print-document .legal-text p {
	margin-bottom: 1mm;
	color: inherit;
}

body.print-document .signature-row {
	display: flex;
	justify-content: space-between;
	margin-top: 8mm;
	gap: 8mm;
	background: transparent;
}

body.print-document .signature-item {
	flex: 1;
	border-top: 1px solid #4d4d4d;
	padding-top: 1mm;
	font-size: 12px;
	line-height: 1.4;
	color: #4d4d4d;
	background: transparent;
}

body.print-document .doc-signature-spacer,
body.print-document .doc-signature-spacer--tall {
	margin-top: 8mm;
	border-bottom: 1px dotted #4d4d4d;
	background: transparent;
}

body.print-document .doc-signature-spacer--tall {
	margin-top: 12mm;
}

body.print-document .doc-company-logo img {
	height: 40px;
}

body.print-document .doc-company-block {
	margin-top: 2mm;
	background: transparent;
}

body.print-document .doc-company-name {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: #000;
}

body.print-document .doc-recipient-block {
	margin-top: 1mm;
	border-top: 1px solid #4d4d4d;
	padding-top: 1mm;
	background: transparent;
}

body.print-document table.doc-supplier-table,
body.print-document table.doc-info-grid {
	width: 100%;
	border-spacing: 0;
	background: transparent;
}

body.print-document .doc-supplier-table td,
body.print-document .doc-info-cell {
	width: 50%;
	padding: 1mm 0;
	font-size: 12px;
	line-height: 1.4;
	color: #4d4d4d;
	background: transparent;
}

body.print-document .doc-info-cell {
	width: auto;
	border-bottom: 1px solid #4d4d4d;
}

body.print-document .doc-info-cell--top {
	padding: 2mm 0;
	vertical-align: top;
}

body.print-document .doc-info-value {
	text-align: right;
	word-break: break-word;
	overflow-wrap: break-word;
}

body.print-document .doc-info-value--small {
	text-align: right;
	font-size: 10px;
	line-height: 1.3;
	color: #4d4d4d;
}

body.print-document .doc-print-footer {
	margin-top: 8mm;
}

body.print-document .doc-print-page-break {
	page-break-after: always;
}


/* ================================================================== */
/* Surface unification - final audit layer */
/* Source: design/ui/surface_unification.css */
/* ================================================================== */
/* ==========================================================================
   iService CRM - Surface Unification (Final Layer)
   Full UI audit: buttons, forms, tables, tags, modals, spacing, motion.
   Visual only - no layout, structure, or behavior changes.
   ========================================================================== */

:root {
	/* Canonical component tokens (single source for overrides) */
	--ds-tag-height: 30px;
	--ds-tag-pad-x: 10px;
	--ds-tag-gap: 4px;
	--ds-tag-radius: var(--radius-full);
	--ds-tag-font: var(--font-micro);
	--ds-tag-weight: var(--font-weight-semibold);

	--ds-icon-btn-size: 30px;
	--ds-icon-btn-radius: var(--radius-sm);

	--ds-search-height: var(--ds-input-height);
	--ds-panel-radius: var(--card-radius);
	--ds-list-item-radius: var(--radius-md);

	--ds-motion-hover: var(--ds-ux-fast, 180ms) var(--ds-ux-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
	--ds-motion-base: var(--ds-ux-base, 220ms) var(--ds-ux-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS - one standard across all modules
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .btn,
.side_panel .btn,
.dlg_portal .btn,
.auth-page-modern .btn,
.task-btn,
.client-feed-add,
.control-btn,
.stock-hdr-btn,
.side_btn,
.debt-btn,
.um-btn,
.settings-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-height: var(--ds-btn-height);
	padding: 0 var(--space-md);
	border-radius: var(--ds-btn-radius);
	font-family: var(--font-sans);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--ds-motion-base),
		border-color var(--ds-motion-base),
		color var(--ds-motion-hover),
		opacity var(--ds-motion-hover);
}

.main_area .btn-sm,
.dlg_portal .btn-sm,
.task-btn--sm,
.stock-hdr-btn--sm {
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-12);
	font-size: var(--font-micro);
	border-radius: var(--radius-sm);
}

.main_area .btn-lg,
.dlg_portal .btn-lg {
	min-height: var(--ds-btn-height-lg);
	padding: 0 var(--space-20, 20px);
	font-size: var(--hig-callout, var(--font-body));
	border-radius: var(--radius-lg);
}

.main_area .btn:focus-visible,
.dlg_portal .btn:focus-visible,
.task-btn:focus-visible,
.control-btn:focus-visible,
.stock-hdr-btn:focus-visible,
.debt-btn:focus-visible {
	outline: 2px solid rgba(var(--primary-rgb), 0.35);
	outline-offset: 1px;
	box-shadow: none;
}

.main_area .btn:active:not(:disabled):not(.is-disabled):not(.disabled),
.task-btn:active:not(:disabled),
.control-btn:active:not(:disabled),
.stock-hdr-btn:active,
.debt-btn:active:not(:disabled) {
	opacity: 0.92;
	transform: translateY(1px);
}

.main_area .btn:disabled,
.main_area .btn.is-disabled,
.main_area .btn.disabled,
.task-btn:disabled,
.debt-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Icon-only buttons */
.main_area .btn-icon,
.main_area .um-icon-btn,
.main_area .dc-icon-btn,
.main_area .col-actions .btn,
.main_area .icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ds-icon-btn-size);
	min-height: var(--ds-icon-btn-size);
	padding: 0;
	border-radius: var(--ds-icon-btn-radius);
	border: none;
	background: transparent;
	color: var(--text-muted);
	transition:
		background-color var(--ds-motion-hover),
		color var(--ds-motion-hover);
}

.main_area .btn-icon:hover,
.main_area .um-icon-btn:hover,
.main_area .dc-icon-btn:hover,
.main_area .icon-btn:hover {
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--primary);
}

.main_area .dc-icon-btn--danger:hover,
.main_area .btn-icon--danger:hover {
	background: rgba(var(--danger-rgb), 0.1);
	color: var(--danger);
}

/* Toolbar button groups */
.main_area .crm-page-header__actions,
.main_area .header-actions,
.main_area .crm-toolbar,
.main_area .dc-list__toolbar,
.main_area .dc-panel__head {
	gap: var(--space-sm);
}

.main_area .crm-page-header__actions .btn + .btn,
.main_area .header-actions .btn + .btn,
.main_area .crm-toolbar .btn + .btn {
	margin-left: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMS - inputs, selects, textareas, search
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .form-control,
.main_area .form-select,
.main_area textarea.form-control,
.dlg_portal .form-control,
.dlg_portal .form-select,
.auth-page-modern .form-control,
.main_area input[type="text"],
.main_area input[type="search"],
.main_area input[type="email"],
.main_area input[type="tel"],
.main_area input[type="password"],
.main_area input[type="number"],
.main_area input[type="date"]:not(.crm-df-field__input),
.main_area input[type="time"],
.main_area select.form-control,
.main_area .dc-search-form .form-control,
.main_area .dc-add-tag-form__input,
.main_area .dc-tag__input {
	min-height: var(--ds-input-height);
	padding: 0 var(--space-12);
	font-family: var(--font-sans);
	font-size: var(--font-body);
	line-height: var(--line-height-normal);
	color: var(--text-main);
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--ds-input-radius);
	transition:
		border-color var(--ds-motion-base),
		background-color var(--ds-motion-base),
		outline-color var(--ds-motion-hover);
}

.main_area textarea.form-control,
.dlg_portal textarea.form-control {
	padding: var(--space-sm) var(--space-12);
	min-height: calc(var(--ds-input-height) * 2);
	resize: vertical;
}

.main_area .form-control:focus,
.main_area .form-select:focus,
.dlg_portal .form-control:focus,
.dlg_portal .form-select:focus,
.main_area input:focus-visible,
.main_area select:focus-visible,
.main_area textarea:focus-visible {
	border-color: var(--primary);
	background-color: var(--input-bg);
	outline: none;
	outline-offset: 0;
	box-shadow: none;
	transform: none;
}

.main_area .form-control.is-invalid,
.main_area .form-control:invalid:not(:placeholder-shown),
.main_area .has-error .form-control {
	border-color: var(--danger);
}

.main_area .form-control.is-invalid:focus,
.main_area .has-error .form-control:focus {
	outline-color: rgba(var(--danger-rgb), 0.25);
	background: var(--danger-light);
}

.main_area .form-control:disabled,
.main_area .form-select:disabled {
	opacity: var(--form-disabled-opacity, 0.55);
	background-color: var(--gray-100);
	cursor: not-allowed;
}

.main_area .form-control[readonly],
.main_area .form-control.is-readonly {
	opacity: 1;
	background: var(--form-readonly-bg, var(--gray-50));
	cursor: default;
}

.main_area .form-group > label,
.main_area .form_item > label,
.main_area .form-label {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	margin-bottom: var(--space-sm);
}

.main_area .form-hint {
	font-size: var(--font-micro);
	color: var(--text-muted);
	line-height: var(--line-height-relaxed);
}

.main_area .form-error,
.main_area .invalid-feedback {
	font-size: var(--font-micro);
	color: var(--danger);
	margin-top: var(--space-xs);
}

/* Search fields */
.main_area .search-input,
.main_area .crm-search,
.main_area .dc-search-form,
.main_area .header-search,
.main_area .filter-search {
	font-size: var(--font-body);
}

.main_area .search-input .form-control,
.main_area .crm-search .form-control {
	min-height: var(--ds-search-height);
}

/* ══════════════════════════════════════════════════════════════════════════
   TAGS & CHIPS - models, faults, statuses, categories
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .dc-tag,
.main_area .device-fatal-chip,
.main_area .tags li,
.main_area .chip:not(.btn),
.main_area .status-chip,
.main_area .ud-chip,
.main_area .wiki-tag,
.main_area .move-type-badge,
.main_area .chart-badge:not(.btn),
.main_area .order-note-badge,
.main_area .p-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-tag-gap);
	min-height: var(--ds-tag-height);
	padding: 0 var(--ds-tag-pad-x);
	border-radius: var(--ds-tag-radius);
	font-size: var(--ds-tag-font);
	font-weight: var(--ds-tag-weight);
	line-height: 1.35;
	white-space: nowrap;
	border: 1px solid var(--border-color);
	background: var(--surface);
	color: var(--text-main);
	transition:
		background-color var(--ds-motion-hover),
		border-color var(--ds-motion-hover),
		color var(--ds-motion-hover);
}

.main_area .device-fatal-chip,
.main_area .dc-tag {
	cursor: default;
}

.main_area .device-fatal-chip {
	cursor: pointer;
	user-select: none;
}

.main_area .device-fatal-chip:hover {
	border-color: var(--border-hover);
	background: var(--surface-secondary);
}

.main_area .device-fatal-chip.is-active,
.main_area .dc-tag.is-active,
.main_area .chip.is-active {
	border-color: rgba(var(--primary-rgb), 0.45);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

.main_area .dc-tag--add {
	min-width: var(--ds-icon-btn-size);
	min-height: var(--ds-icon-btn-size);
	padding: 0;
	border-style: dashed;
	border-color: rgba(var(--primary-rgb), 0.45);
	color: var(--primary);
	background: transparent;
	cursor: pointer;
}

.main_area .dc-tag--add:hover {
	background: rgba(var(--primary-rgb), 0.08);
}

/* Status chips s1–s7 - solid fill, white label (WCAG on status palette v5) */
.main_area .status-chip.s1,
.main_area .ud-chip.s1 { background: var(--s1); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s1-rgb), 0.35); }
.main_area .status-chip.s2,
.main_area .ud-chip.s2 { background: var(--s2); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s2-rgb), 0.35); }
.main_area .status-chip.s3,
.main_area .ud-chip.s3 { background: var(--s3); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s3-rgb), 0.35); }
.main_area .status-chip.s4,
.main_area .ud-chip.s4 { background: var(--s4); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s4-rgb), 0.35); }
.main_area .status-chip.s5,
.main_area .ud-chip.s5 { background: var(--s5); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s5-rgb), 0.35); }
.main_area .status-chip.s6,
.main_area .ud-chip.s6 { background: var(--s6); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s6-rgb), 0.35); }
.main_area .status-chip.s7,
.main_area .ud-chip.s7 { background: var(--s7); color: var(--status-on-solid, #ffffff); border-color: rgba(var(--s7-rgb), 0.35); }

.main_area .chip.danger,
.main_area .crm-badge--danger,
.main_area .stock-badge.danger,
.main_area .debt-badge-danger {
	background: var(--danger-light);
	color: var(--danger);
	border-color: rgba(var(--danger-rgb), 0.25);
}

.main_area .chip.success,
.main_area .crm-badge--success,
.main_area .stock-badge.success {
	background: var(--success-light);
	color: var(--success);
	border-color: rgba(var(--success-rgb), 0.25);
}

.main_area .chip.warning,
.main_area .crm-badge--warning,
.main_area .stock-badge.warning {
	background: var(--warning-light);
	color: var(--warning-hover);
	border-color: rgba(var(--warning-rgb), 0.25);
}

/* Semantic badges (compact, not pill) */
.main_area .stock-badge,
.main_area .debt-badge,
.main_area .task-badge,
.main_area .crm-badge,
.main_area .user-badge,
.main_area .badge:not(.btn) {
	border-radius: var(--radius-sm);
	min-height: auto;
	padding: 2px var(--space-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES - headers, rows, actions, pagination
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-table,
.main_area .fin-table,
.main_area .acc-table,
.main_area .stock-table,
.main_area .client-table,
.main_area .stats_table,
.main_area .table {
	font-size: var(--font-caption);
	color: var(--text-main);
}

.main_area .crm-table thead th,
.main_area .fin-table thead th,
.main_area .acc-table thead th,
.main_area .stock-table thead th,
.main_area .client-table thead th,
.main_area .stats_table thead th,
.main_area .table thead th {
	padding: var(--space-sm) var(--list-row-pad-x);
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	background: var(--gray-50);
	border-bottom: 1px solid var(--ds-border);
	vertical-align: middle;
}

.main_area .crm-table tbody td,
.main_area .fin-table tbody td,
.main_area .acc-table tbody td,
.main_area .stock-table tbody td,
.main_area .client-table tbody td,
.main_area .stats_table tbody td,
.main_area .table tbody td {
	padding: var(--list-row-pad-y) var(--list-row-pad-x);
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: middle;
}

.main_area .crm-table tbody tr:hover,
.main_area .fin-table tbody tr:hover,
.main_area .acc-table tbody tr:hover,
.main_area .stock-table tbody tr:hover,
.main_area .client-table tbody tr:hover,
.main_area .stats_table tbody tr:hover,
.main_area .table tbody tr:hover {
	background: var(--ds-surface-hover);
}

.main_area .col-actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	white-space: nowrap;
}

.main_area .pagination,
.main_area .paginator {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}

.main_area .pagination a,
.main_area .paginator a,
.main_area .pagination span,
.main_area .paginator span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ds-btn-height-sm);
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	background: var(--surface);
	border: 1px solid var(--border-color);
	text-decoration: none;
	transition:
		background-color var(--ds-motion-hover),
		border-color var(--ds-motion-hover),
		color var(--ds-motion-hover);
}

.main_area .pagination li.active a,
.main_area .paginator li.active a {
	background: var(--nav-active-bg);
	border-color: rgba(var(--primary-rgb), 0.3);
	color: var(--primary);
	font-weight: var(--font-weight-bold);
}

.main_area .pagination a:hover,
.main_area .paginator a:hover {
	background: var(--gray-100);
	border-color: var(--border-hover);
	color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS & PANELS - unified surfaces
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .card,
.main_area .pro-card,
.main_area .dash-card,
.main_area .dash_card,
.main_area .mc_card,
.main_area .ud-card,
.main_area .task-card,
.main_area .user-panel-card,
.main_area .debt-sum-card,
.main_area .debt-row-item,
.main_area .acc-sum-card,
.main_area .acc-group,
.main_area .dc-panel,
.main_area .crm-card,
.main_area .kanban-card {
	border-radius: var(--ds-panel-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

.main_area .dc-type-item {
	border-radius: var(--ds-list-item-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

.main_area .device-catalog-faults-host .device-fatal-pick {
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	padding: var(--space-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALS & DIALOGS
   ══════════════════════════════════════════════════════════════════════════ */

.dlg_panel,
.main_area .modal-content,
.dlg_portal .modal-content {
	border-radius: var(--radius-lg);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

.dlg_title,
.main_area .modal-title,
.main_area .modal-header h2,
.main_area .modal-header h3 {
	font-size: var(--font-title);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
}

.dlg_body,
.main_area .modal-body {
	font-size: var(--font-body);
	color: var(--text-main);
	line-height: var(--line-height-normal);
}

.dlg_foot,
.main_area .modal-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: flex-end;
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-subtle);
}

.dlg_root::backdrop {
	background: rgba(var(--navy-dark-rgb, 20, 23, 28), 0.45);
}

.dlg_root[open] .dlg_panel {
	animation: ds-surface-modal-in var(--ds-motion-base) var(--ds-ux-ease-out, ease-out);
}

@keyframes ds-surface-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS - unified active state
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-tabs__tab,
.main_area .module-subnav__tab,
.main_area .module-subnav .loc-tab,
.main_area .debt-tab,
.main_area .wiki-cat-tab {
	border-radius: var(--radius-md);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	transition:
		background-color var(--ds-motion-base),
		color var(--ds-motion-base);
}

.main_area .crm-tabs__tab.active,
.main_area .crm-tabs__tab.is-active,
.main_area .module-subnav__tab.active,
.main_area .module-subnav__tab.is-active,
.main_area .debt-tab.active,
.main_area .wiki-cat-tab.active {
	background: var(--ds-surface);
	color: var(--primary);
	font-weight: var(--font-weight-semibold);
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY - hierarchy in content area
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .section-desc,
.main_area .dc-panel__hint,
.main_area .dc-detail__meta,
.main_area .device-catalog-picker__hint,
.main_area .dc-empty,
.main_area .device-pick-empty {
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: var(--line-height-relaxed);
}

.main_area .dc-panel__head h3,
.main_area .pro-card__title,
.main_area .crm-section__title {
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.main_area .dc-detail__title {
	font-size: var(--font-title);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
	letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   SPACING RHYTHM - gaps between blocks (no position changes)
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-page-header {
	margin-bottom: var(--ds-section-gap);
}

.main_area .pro-card + .pro-card,
.main_area .dc-panel + .dc-panel,
.main_area .dash-card + .dash-card {
	margin-top: var(--ds-block-gap);
}

.main_area .form-group + .form-group,
.main_area .form_item + .form_item {
	margin-top: 0;
}

.main_area .dc-tags {
	gap: var(--space-sm);
}

.main_area .dc-tags-wrap,
.main_area .device-catalog-picker {
	gap: var(--space-12);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKBOX / RADIO / SWITCH
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .form-check-input,
.main_area input[type="checkbox"]:not(.device-fatal-chip input),
.main_area input[type="radio"] {
	width: 16px;
	height: 16px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-xs, 5px);
	accent-color: var(--primary);
	transition: border-color var(--ds-motion-hover), background-color var(--ds-motion-hover);
}

.main_area input[type="radio"] {
	border-radius: var(--radius-full);
}

.main_area .ds-switch__track,
.main_area .rbac-inline-toggle__track {
	border-radius: var(--radius-full);
	transition: background-color var(--ds-motion-base);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS & TOASTS
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .form-alert,
.main_area .crm-alert,
.main_area .ui-alert,
.main_area .info-alert,
.main_area .crm-toast,
.main_area .debt-flash-alert {
	border-radius: var(--radius-md);
	font-size: var(--font-caption);
	line-height: var(--line-height-relaxed);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADERS - unified hierarchy (all modules)
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-page-header,
.main_area .unified-page-header,
.main_area .dash-module-header,
.main_area .mc-module-header {
	gap: var(--space-md);
}

.main_area .crm-page-title,
.main_area .unified-page-title,
.main_area .client-dossier__identity h1,
.main_area .wiki-article-title,
.main_area .dc-detail__title {
	font-family: var(--font-sans);
	font-size: var(--font-title);
	font-weight: var(--font-weight-bold);
	color: var(--text-heading);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
	margin: 0;
}

.main_area .crm-page-subtitle,
.main_area .unified-page-subtitle,
.main_area .header-subtitle,
.main_area .wiki-article-meta {
	font-size: var(--font-caption);
	font-weight: var(--font-weight-medium);
	color: var(--text-muted);
	line-height: var(--line-height-relaxed);
}

.main_area .crm-section__title,
.main_area .client-dossier__section-title,
.main_area .wiki-section-title {
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   CLIENTS - dossier, timeline, list cells
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .client-dossier,
.main_area .client-visit-card,
.main_area .client-kpi {
	border-radius: var(--ds-panel-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

.main_area .client-dossier-chip,
.main_area .client-order-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-tag-gap);
	min-height: var(--ds-tag-height);
	padding: 0 var(--ds-tag-pad-x);
	border-radius: var(--ds-tag-radius);
	font-size: var(--ds-tag-font);
	font-weight: var(--ds-tag-weight);
	border: 1px solid var(--border-color);
	background: var(--surface);
	color: var(--text-main);
}

.main_area .tl-card,
.main_area .tl-item {
	border-radius: var(--ds-list-item-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

.main_area .c-name,
.main_area .c-phone,
.main_area .c-date-text {
	font-size: var(--font-caption);
	color: var(--text-main);
}

/* ══════════════════════════════════════════════════════════════════════════
   WIKI / KNOWLEDGE BASE
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .wiki-article,
.main_area .wiki-form-card,
.main_area .wiki-list-card {
	border-radius: var(--ds-panel-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

.main_area .wiki-article-header {
	border-radius: var(--ds-panel-radius) var(--ds-panel-radius) 0 0;
	border-bottom: 1px solid var(--ds-border);
	background: var(--gray-50);
}

.main_area .wiki-article-body,
.main_area .wiki-lead {
	font-size: var(--font-body);
	color: var(--text-main);
	line-height: var(--line-height-relaxed);
}

.main_area .wiki-table,
.main_area .wiki-table th,
.main_area .wiki-table td {
	font-size: var(--font-caption);
}

.main_area .wiki-table thead th {
	background: var(--gray-50);
	color: var(--text-muted);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--font-micro);
}

.main_area .wiki-breadcrumb,
.main_area .wiki-meta-item {
	font-size: var(--font-caption);
	color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   RBAC - roles, permissions, user panel
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .rbac-perm-tag,
.main_area .rbac-scope-tag,
.main_area .user-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-tag-gap);
	min-height: var(--ds-tag-height);
	padding: 0 var(--ds-tag-pad-x);
	border-radius: var(--ds-tag-radius);
	font-size: var(--ds-tag-font);
	font-weight: var(--ds-tag-weight);
	border: 1px solid var(--border-color);
	background: var(--surface);
	color: var(--text-main);
	transition:
		background-color var(--ds-motion-hover),
		border-color var(--ds-motion-hover),
		color var(--ds-motion-hover);
}

.main_area .rbac-perm-tag.is-on,
.main_area .rbac-perm-tag.is-active {
	border-color: rgba(var(--primary-rgb), 0.45);
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary);
}

.main_area .rbac-module-card,
.main_area .user-panel-card,
.main_area .rbac-status-grid {
	border-radius: var(--ds-panel-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

.main_area .rbac-module-preset-btn,
.main_area .rbac-enforce-toggle {
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
}

.main_area .user-panel-card__hint,
.main_area .um-info-callout,
.main_area .um-muted {
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: var(--line-height-relaxed);
}

/* ══════════════════════════════════════════════════════════════════════════
   TASKS / KANBAN / SETTINGS
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .kanban-column,
.main_area .kanban-board {
	border-radius: var(--ds-panel-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

.main_area .kanban-column__head,
.main_area .task-list__head {
	font-size: var(--font-micro);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.main_area .settings-section,
.main_area .settings-card,
.main_area .dc-page .dc-sidebar,
.main_area .dc-page .dc-panel {
	border-radius: var(--ds-panel-radius);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTERS / SEARCH BARS / EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .crm-filter-bar,
.main_area .list-filters,
.main_area .header-search,
.main_area .stock-search-row,
.main_area .debt-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.main_area .crm-empty,
.main_area .acc-empty-state,
.main_area .sp-empty,
.main_area .dc-empty,
.main_area .list-empty {
	font-size: var(--font-caption);
	color: var(--text-muted);
	line-height: var(--line-height-relaxed);
}

.main_area .acc-empty-state {
	border: 2px dashed var(--ds-border);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE DOCUMENTS GRID (RBAC settings)
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .device-docs-grid,
.main_area .device-doc-card {
	border-radius: var(--ds-panel-radius);
}

.main_area .device-doc-card {
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
}

.main_area .btn-print {
	min-height: var(--ds-btn-height-sm);
	padding: 0 var(--space-12);
	border-radius: var(--ds-btn-radius);
	font-size: var(--font-caption);
	font-weight: var(--font-weight-semibold);
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWNS & TOOLTIPS - token alignment
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .dropdown-menu,
.dlg_portal .dropdown-menu,
.main_area .crm-dropdown__panel {
	border-radius: var(--radius-md);
	border: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: none;
	font-size: var(--font-caption);
}

.main_area .dropdown-item,
.main_area .crm-dropdown__item {
	padding: var(--space-sm) var(--space-12);
	font-size: var(--font-caption);
	color: var(--text-main);
	transition: background-color var(--ds-motion-hover);
}

.main_area .dropdown-item:hover,
.main_area .crm-dropdown__item:hover {
	background: var(--gray-100);
	color: var(--primary);
}

.main_area [data-tooltip],
.main_area .crm-tooltip {
	font-size: var(--font-micro);
	border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - touch targets, overflow safety
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.main_area .btn,
	.main_area .task-btn,
	.main_area .debt-btn {
		min-height: max(var(--ds-btn-height), var(--touch-target-min, 44px));
	}

	.main_area .btn-sm {
		min-height: max(var(--ds-btn-height-sm), 40px);
	}

	.main_area .crm-table,
	.main_area .fin-table,
	.main_area .stock-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.main_area .dc-detail__grid {
		gap: var(--space-12);
	}
}

@media (min-width: 1400px) {
	.main_area .crm-page-title,
	.main_area .unified-page-title {
		letter-spacing: -0.03em;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.dlg_root[open] .dlg_panel,
	.main_area .device-fatal-chip.is-active {
		animation: none !important;
	}

	.main_area .btn:active,
	.main_area .pagination a:active {
		transform: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECT - one chevron on the right (no background tiling on focus/hover/valid)
   Wins over Bootstrap + legacy layers that used background: shorthand
   ══════════════════════════════════════════════════════════════════════════ */

:root {
	--bs-form-select-bg-img: none;
	--bs-form-select-bg-icon: none;
	--ds-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392989B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ds-select-chevron-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234C8BF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ds-select-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ds-select-chevron-dark-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236BA3F7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Shared select targets */
.main_area .form-select,
.main_area select.form-control,
.main_area select:not([multiple]):not(.dc-model-combo__native):not(.crm-df-field__select),
.dlg_portal .form-select,
.dlg_portal select.form-control,
.shell_content .form-select,
.shell_content select.form-control {
	--bs-form-select-bg-img: none !important;
	--bs-form-select-bg-icon: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 36px !important;
	/* Atomic background - prevents repeat tiling when Bootstrap :valid/:focus tweaks layers */
	background: var(--input-bg) var(--ds-select-chevron) no-repeat right 12px center / 16px 16px !important;
}

/* Hover / active / filled / valid - same single chevron (Bootstrap :valid adds 2-layer bg-size otherwise) */
.main_area .form-select:hover,
.main_area .form-select:active,
.main_area .form-select:valid,
.main_area .form-select.is-valid,
.main_area .form-select.is-invalid,
.main_area select.form-control:hover,
.main_area select.form-control:active,
.main_area select.form-control:valid,
.main_area select.form-control.is-valid,
.main_area select.form-control.is-invalid,
.main_area select:not([multiple]):not(.dc-model-combo__native):not(.crm-df-field__select):hover,
.main_area select:not([multiple]):not(.dc-model-combo__native):not(.crm-df-field__select):active,
.main_area select:not([multiple]):not(.dc-model-combo__native):not(.crm-df-field__select):valid,
.dlg_portal .form-select:hover,
.dlg_portal .form-select:active,
.dlg_portal .form-select:valid,
.dlg_portal select.form-control:hover,
.dlg_portal select.form-control:active,
.dlg_portal select.form-control:valid,
.shell_content .form-select:hover,
.shell_content .form-select:valid,
.shell_content select.form-control:hover,
.shell_content select.form-control:valid,
.was-validated .main_area .form-select:valid,
.was-validated .main_area select.form-control:valid,
.was-validated .dlg_portal .form-select:valid {
	--bs-form-select-bg-img: none !important;
	--bs-form-select-bg-icon: none !important;
	background: var(--input-bg) var(--ds-select-chevron) no-repeat right 12px center / 16px 16px !important;
	padding-right: 36px !important;
}

/* Focus states - blue chevron, no Bootstrap dual-layer icons */
.main_area .form-select:focus,
.main_area .form-select:focus-visible,
.main_area .form-select:valid:focus,
.main_area .form-select.is-valid:focus,
.main_area select.form-control:focus,
.main_area select.form-control:focus-visible,
.main_area select.form-control:valid:focus,
.main_area select:not([multiple]):not(.dc-model-combo__native):not(.crm-df-field__select):focus,
.dlg_portal .form-select:focus,
.dlg_portal .form-select:focus-visible,
.dlg_portal .form-select:valid:focus,
.dlg_portal select.form-control:focus,
.dlg_portal select.form-control:focus-visible,
.dlg_portal select.form-control:valid:focus,
.shell_content .form-select:focus,
.shell_content .form-select:focus-visible,
.shell_content select.form-control:focus,
.shell_content select.form-control:focus-visible,
.was-validated .main_area .form-select:valid:focus,
.was-validated .main_area select.form-control:valid:focus {
	--bs-form-select-bg-img: none !important;
	--bs-form-select-bg-icon: none !important;
	background: var(--input-bg) var(--ds-select-chevron-focus) no-repeat right 12px center / 16px 16px !important;
	padding-right: 36px !important;
	outline: none !important;
	box-shadow: none !important;
}

[data-theme-resolved='dark'] .main_area .form-select,
[data-theme-resolved='dark'] .main_area select.form-control,
[data-theme-resolved='dark'] .main_area .form-select:hover,
[data-theme-resolved='dark'] .main_area .form-select:valid,
[data-theme-resolved='dark'] .main_area select.form-control:hover,
[data-theme-resolved='dark'] .main_area select.form-control:valid,
[data-theme-resolved='dark'] .dlg_portal .form-select,
[data-theme-resolved='dark'] .dlg_portal select.form-control,
[data-theme-resolved='dark'] .dlg_portal .form-select:hover,
[data-theme-resolved='dark'] .dlg_portal .form-select:valid {
	background: var(--input-bg) var(--ds-select-chevron-dark) no-repeat right 12px center / 16px 16px !important;
}

[data-theme-resolved='dark'] .main_area .form-select:focus,
[data-theme-resolved='dark'] .main_area .form-select:focus-visible,
[data-theme-resolved='dark'] .main_area .form-select:valid:focus,
[data-theme-resolved='dark'] .main_area select.form-control:focus,
[data-theme-resolved='dark'] .main_area select.form-control:focus-visible,
[data-theme-resolved='dark'] .main_area select.form-control:valid:focus,
[data-theme-resolved='dark'] .dlg_portal .form-select:focus,
[data-theme-resolved='dark'] .dlg_portal .form-select:focus-visible,
[data-theme-resolved='dark'] .dlg_portal select.form-control:focus,
[data-theme-resolved='dark'] .dlg_portal select.form-control:focus-visible {
	background: var(--input-bg) var(--ds-select-chevron-dark-focus) no-repeat right 12px center / 16px 16px !important;
}

.main_area select::-ms-expand,
.dlg_portal select::-ms-expand {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATUS PALETTE v5 - solid surfaces, white label text (global enforcement)
   ══════════════════════════════════════════════════════════════════════════ */

.main_area .device-status-chip.s1,
.main_area .device-status-chip.s2,
.main_area .device-status-chip.s3,
.main_area .device-status-chip.s4,
.main_area .device-status-chip.s5,
.main_area .device-status-chip.s6,
.main_area .device-status-chip.s7,
.status-badge-lg.s1,
.status-badge-lg.s2,
.status-badge-lg.s3,
.status-badge-lg.s4,
.status-badge-lg.s5,
.status-badge-lg.s6,
.status-badge-lg.s7,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s1,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s2,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s3,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s4,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s5,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s6,
:is(.device-feed-history, .client-feed-history) .tl-status-tag.s7,
.device-group-header.s1,
.device-group-header.s2,
.device-group-header.s3,
.device-group-header.s4,
.device-group-header.s5,
.device-group-header.s6,
.device-group-header.s7,
.device_list .device-group-header.s1,
.device_list .device-group-header.s2,
.device_list .device-group-header.s3,
.device_list .device-group-header.s4,
.device_list .device-group-header.s5,
.device_list .device-group-header.s6,
.device_list .device-group-header.s7,
a.status-node.status-node--actionable,
.status-node--actionable .status-node__label {
	color: var(--status-on-solid, #ffffff);
}

.main_area .device-status-chip.s1 { background: var(--s1); border-color: rgba(var(--s1-rgb), 0.35); }
.main_area .device-status-chip.s2 { background: var(--s2); border-color: rgba(var(--s2-rgb), 0.35); }
.main_area .device-status-chip.s3 { background: var(--s3); border-color: rgba(var(--s3-rgb), 0.35); }
.main_area .device-status-chip.s4 { background: var(--s4); border-color: rgba(var(--s4-rgb), 0.35); }
.main_area .device-status-chip.s5 { background: var(--s5); border-color: rgba(var(--s5-rgb), 0.35); }
.main_area .device-status-chip.s6 { background: var(--s6); border-color: rgba(var(--s6-rgb), 0.35); }
.main_area .device-status-chip.s7 { background: var(--s7); border-color: rgba(var(--s7-rgb), 0.35); }


/* ================================================================== */
/* Radius standard - 5px tokens (final) */
/* Source: design/ui/radius_standard.css */
/* ================================================================== */
/**
 * Global border-radius standard: 5px.
 * Loaded late in the CSS cascade to remapping all design tokens.
 * Circles / pills (50%, --*-full, --*-pill) are intentionally unchanged.
 */

:root {
	--radius-xs: 5px;
	--radius-sm: 5px;
	--radius-md: 5px;
	--radius-lg: 5px;
	--radius-xl: 5px;
	--radius: 5px;
	--card-radius: 5px;
	--list-row-radius: 5px;
	--input-radius: 5px;
	--ui-radius: 5px;
	--ui-radius-sm: 5px;
	--premium-radius: 5px;
	--b-radius: 5px;
	--ds-btn-radius: 5px;
	--ds-input-radius: 5px;
	--ds-icon-btn-radius: 5px;
	--ds-panel-radius: 5px;
	--ds-list-item-radius: 5px;
	--bs-border-radius: 5px;
	--bs-border-radius-sm: 5px;
	--bs-border-radius-lg: 5px;
	--bs-border-radius-xl: 5px;
	--bs-border-radius-xxl: 5px;
	--bs-btn-border-radius: 5px;
}

.app_frame {
	--shell_radius: 5px;
}

.device-order-page,
.client-page {
	--order-card-radius: 5px;
	--order-header-btn-radius: 5px;
	--oc-radius: 5px;
	--oc-modal-radius: 5px;
}

#dashboard.dash_page,
#my_cash,
.stats_shared,
.stock-page,
#stock {
	--stats_card_radius: 5px;
	--dash_card_radius: 5px;
	--mc_card_radius: 5px;
	--stock-chip-radius: 5px;
}

/* Bootstrap rounded utilities → 5px (circles / pills / 0 unchanged) */
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5 {
	border-radius: 5px !important;
}

.rounded-top {
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
}

.rounded-end {
	border-top-right-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
}

.rounded-bottom {
	border-bottom-right-radius: 5px !important;
	border-bottom-left-radius: 5px !important;
}

.rounded-start {
	border-top-left-radius: 5px !important;
	border-bottom-left-radius: 5px !important;
}

.rounded-0 {
	border-radius: 0 !important;
}

.rounded-circle {
	border-radius: 50% !important;
}

.rounded-pill {
	border-radius: var(--bs-border-radius-pill, 9999px) !important;
}

/* Explicit locks for common text containers (beats archive 100px pills on buttons/cards) */
.btn:not(.rounded-circle):not(.rounded-pill):not(.btn-round),
.form-control,
.form-select,
.input-group-text,
.modal-content,
.dlg_panel,
.card,
.ui-block,
.alert {
	border-radius: 5px !important;
}

/* Keep true pills / circles via 9999px / 50% elsewhere; do not force 5px on them. */


/* ================================================================== */
/* Pagination - circular buttons (wins over legacy) */
/* Source: design/ui/pagination_core.css */
/* ================================================================== */
/**
 * Pagination — circular page buttons, no overlap.
 * Exception to global 5px radius rule (50% / pill track).
 */

.pagination {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px !important;
	list-style: none !important;
	margin: 1.25rem auto 0 !important;
	padding: 6px 8px !important;
	width: fit-content !important;
	max-width: 100%;
	background: var(--bg-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 9999px !important;
	box-shadow: var(--shadow-sm) !important;
	box-sizing: border-box;
}

.pagination li {
	display: flex !important;
	margin: 0 !important;
	padding: 0;
	flex: 0 0 auto;
}

.pagination li::before,
.pagination li::after {
	display: none !important;
	content: none !important;
}

.pagination li a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	padding: 0 !important;
	margin: 0;
	border: 1px solid var(--border-color) !important;
	border-radius: 50% !important;
	background: var(--bg-card) !important;
	color: var(--text-main) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-sizing: border-box;
	box-shadow: none !important;
	transform: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.pagination li a:hover {
	background: var(--bg-card-hover, var(--gray-100)) !important;
	border-color: var(--border-color) !important;
	color: var(--primary) !important;
	transform: none !important;
	box-shadow: none !important;
}

.pagination li.active a,
.pagination a.active {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--text-white, #fff) !important;
	box-shadow: none !important;
	transform: none !important;
}

.pagination li.disabled a {
	opacity: 0.35;
	pointer-events: none;
}

[data-theme-resolved='dark'] .pagination li a:hover {
	background: var(--bg-card-hover) !important;
}

@media (max-width: 380px) {
	.pagination {
		gap: 6px !important;
		padding: 5px 6px !important;
	}

	.pagination li a {
		width: 30px !important;
		height: 30px !important;
		min-width: 30px !important;
		max-width: 30px !important;
		font-size: 0.75rem !important;
	}
}


/* ================================================================== */
/* Design consistency - final visual audit layer */
/* Source: design/ui/design_consistency.css */
/* ================================================================== */
/**
 * Design consistency — final visual audit layer (Order Card standard).
 * Loaded after radius_standard + pagination.
 *
 * Rules:
 * - Cards / text buttons / inputs / modals → 5px
 * - Pills / avatars / progress → 50% / 9999px (unchanged)
 * - Block rhythm → 10px pad/gap (Order Card)
 * - No page-level horizontal scroll on mobile
 */

:root {
	--ds-block-pad: 10px;
	--ds-block-gap: 10px;
	--dlg_radius: 5px;
	--ds-tag-radius: 9999px;
}

/* ── Radius locks: containers with text (not pills) ── */
.ui-block,
.analytics-ui-block,
.card,
.panel,
.dc-panel,
.top10-panel,
.stock-chip:not(.stock-chip--round),
.modal-content,
.dlg_panel,
.dlg_body,
.form-control,
.form-select,
textarea.form-control,
select.form-control,
.btn:not(.btn-round):not(.rounded-circle):not(.rounded-pill),
.btn-primary:not(.rounded-pill),
.btn-secondary:not(.rounded-pill),
.btn-outline-primary:not(.rounded-pill),
.crm-dropdown__panel,
.dropdown-menu,
.popover,
.tooltip-inner,
.name-ac-dropdown,
.ui-dialog,
.alert:not(.alert-pill) {
	border-radius: 5px !important;
}

/* ── Mobile: never bleed horizontally at page level ── */
.app-content,
.main_area,
.crm-page,
#clients,
#analytics,
#stock-page,
#stock-item-page,
#device-catalog-page,
#dashboard,
#my_cash,
#tasks,
.device-order-page,
.client-page {
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* Tables may scroll inside their wrap — page itself must not */
.crm-table-wrap,
.client-table-wrap,
.stock-table-wrap,
.movement-table-wrap,
.capital-table-wrap,
.batch-table-wrap {
	max-width: 100%;
	min-width: 0;
}

@media (max-width: 380px) {
	.crm-page,
	.app-content .main_area {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ── Empty states (Order Card .device-feed-empty rhythm) ── */
.crm-empty,
.main_area .crm-empty,
.main_area .acc-empty-state,
.main_area .sp-empty,
.main_area .dc-empty,
.main_area .list-empty,
.stock-hub-empty,
.used-empty-state,
.user-empty-state,
.location-empty-state,
.inst-empty-state {
	margin: 0;
	padding: 10px;
	border-radius: 5px;
	background: var(--bg-card-hover, rgba(0, 0, 0, 0.03));
	border: 1px solid transparent;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	box-sizing: border-box;
}

.crm-empty .material-icons,
.stock-hub-empty .material-icons,
.used-empty-state .material-icons,
.inst-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	width: 20px;
	height: 20px;
	margin: 0 0 6px;
	color: var(--text-subtle, var(--text-muted));
}

.crm-empty p,
.stock-hub-empty p,
.used-empty-state__title,
.used-empty-state__hint,
.inst-empty-state__text,
.location-empty-state__desc {
	margin: 0;
}

.used-empty-state__hint,
.location-empty-state__desc {
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.85;
}

/* ── Truncate helpers for dense rows on 320px ── */
@media (max-width: 480px) {
	.crm-table td,
	.client-table td,
	.stock-items-table--compact td {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.crm-table .c-name,
	.client-table .c-name,
	.stock-items-table--compact .stock-col-name,
	.stock-items-table--compact .stock-col-name a {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ── Dropdown / tooltip stacking (no square bleed under active states) ── */
.crm-dropdown__panel,
.dropdown-menu,
.name-ac-dropdown,
.dlg_root,
.modal {
	z-index: 1050;
}

.tooltip,
.ui-tooltip,
[data-tooltip]::after {
	z-index: 1080;
}

.crm-dropdown__panel,
.dropdown-menu,
.name-ac-dropdown {
	overflow: hidden;
	box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
}


/* ================================================================== */
/* Date filter - CRM standard (wins over form globals) */
/* Source: design/ui/crm_date_filter.css */
/* ================================================================== */
/* ==========================================================================
   CRM Date Filter - єдиний компонент: Panel + FormField + Date/Select
   Використання: .crm-date-filter (+ legacy .dash_filter / .mc_filter)
   ========================================================================== */

.crm-date-filter {
	--crm-df-trigger-size: 30px;
	--crm-df-icon-size: 18px;
	--crm-df-popover-w: 280px;
	--crm-df-z-backdrop: 10040;
	--crm-df-z-popover: 10050;

	/* Panel (FilterPanel) */
	--crm-df-panel-radius: 5px;
	--crm-df-panel-pad: 16px;
	--crm-df-panel-gap: 16px;
	--crm-df-panel-bg: var(--bg-card);
	--crm-df-panel-border: var(--border-color);
	--crm-df-panel-shadow:
		0 12px 28px rgba(0, 0, 0, 0.1),
		0 2px 8px rgba(0, 0, 0, 0.05);

	/* Field (FormField / DateField / SelectField) */
	--crm-df-field-h: 40px;
	--crm-df-field-radius: 5px;
	--crm-df-field-pad-x: 12px;
	--crm-df-field-gap: 8px;
	--crm-df-field-label-gap: 6px;
	--crm-df-control-bg: var(--input-bg, var(--surface-secondary, var(--bg-body)));
	--crm-df-control-border: var(--border-color);
	--crm-df-control-bg-hover: rgba(var(--primary-rgb), 0.04);
	--crm-df-control-border-hover: rgba(var(--primary-rgb), 0.4);
	--crm-df-control-focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
	--crm-df-control-bg-focus: var(--input-focus-bg, var(--bg-card));

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ── Trigger ── */
.crm-date-filter__trigger,
.dash_filter_trigger,
.mc_filter_trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--crm-df-trigger-size);
	height: var(--crm-df-trigger-size);
	min-width: var(--crm-df-trigger-size);
	min-height: var(--crm-df-trigger-size);
	max-width: var(--crm-df-trigger-size);
	max-height: var(--crm-df-trigger-size);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 5px);
	color: var(--text-muted);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	flex-shrink: 0;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.crm-date-filter__trigger:hover,
.dash_filter_trigger:hover,
.mc_filter_trigger:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(var(--primary-rgb), 0.05);
}

.crm-date-filter__trigger:active,
.dash_filter_trigger:active,
.mc_filter_trigger:active {
	opacity: 0.88;
}

.crm-date-filter__trigger:focus,
.dash_filter_trigger:focus,
.mc_filter_trigger:focus {
	outline: none;
}

.crm-date-filter__trigger:focus-visible,
.dash_filter_trigger:focus-visible,
.mc_filter_trigger:focus-visible {
	outline: 2px solid rgba(var(--primary-rgb), 0.45);
	outline-offset: 2px;
}

.crm-date-filter.is_open .crm-date-filter__trigger,
.dash_filter.is_open .dash_filter_trigger,
.mc_filter.is_open .mc_filter_trigger {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	opacity: 1;
}

.crm-date-filter__trigger-icon,
.crm-date-filter__trigger .material-icons,
.dash_filter_trigger .material-icons,
.mc_filter_trigger .material-icons {
	font-size: var(--crm-df-icon-size);
	width: var(--crm-df-icon-size);
	height: var(--crm-df-icon-size);
	line-height: var(--crm-df-icon-size);
	display: block;
	flex-shrink: 0;
	pointer-events: none;
}

/* ── Backdrop ── */
.crm-date-filter__backdrop,
.dash_filter_backdrop,
.mc_filter_backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: var(--crm-df-z-backdrop);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.crm-date-filter.is_open .crm-date-filter__backdrop,
.dash_filter.is_open .dash_filter_backdrop,
.mc_filter.is_open .mc_filter_backdrop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.22s ease, visibility 0s;
}

/* ── Panel (FilterPanel / popover) ── */
.crm-date-filter__panel,
.crm-date-filter__popover,
.dash_filter_popover,
.mc_filter_popover {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: var(--crm-df-popover-w);
	max-width: min(var(--crm-df-popover-w), calc(100vw - 24px));
	background: var(--crm-df-panel-bg);
	border: 1px solid var(--crm-df-panel-border);
	border-radius: var(--crm-df-panel-radius);
	box-shadow: var(--crm-df-panel-shadow);
	padding: var(--crm-df-panel-pad);
	z-index: var(--crm-df-z-popover);
	display: flex;
	flex-direction: column;
	gap: var(--crm-df-panel-gap);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0s linear 0.2s;
}

.crm-date-filter__panel.is_open,
.crm-date-filter__popover.is_open,
.dash_filter_popover.is_open,
.mc_filter_popover.is_open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity 0.22s ease,
		transform 0.22s ease,
		visibility 0s;
}

.crm-date-filter__panel-head,
.crm-date-filter__popover-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--crm-df-field-gap);
	padding-bottom: 10px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--crm-df-panel-border);
}

.crm-date-filter__panel-title,
.crm-date-filter__popover-title {
	font-size: var(--font-micro, 0.75rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--text-heading, var(--text-main));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* ── Sections ── */
.crm-date-filter__section,
.dash_filter_section,
.mc_filter_section {
	display: flex;
	flex-direction: column;
	gap: var(--crm-df-field-label-gap);
}

.crm-date-filter__section + .crm-date-filter__section,
.dash_filter_section + .dash_filter_section,
.mc_filter_section + .mc_filter_section {
	padding-top: var(--crm-df-panel-gap);
	border-top: 1px solid var(--crm-df-panel-border);
	margin-top: 2px;
}

.crm-date-filter__section-title,
.crm-date-filter__section-label,
.dash_filter_label,
.mc_filter_label {
	font-size: var(--font-micro, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	line-height: 1.2;
}

/* ── FormField base ── */
.crm-df-field,
.crm-date-field,
.dash_range_group,
.mc_range_group {
	display: flex;
	flex-direction: column;
	gap: var(--crm-df-field-label-gap);
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

.crm-df-field__label,
.crm-date-field__label,
.dash_range_group > label,
.mc_range_group > label {
	font-size: var(--font-micro, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	line-height: 1.2;
}

/* ── Unified control shell (select + date) ── */
.crm-df-field__control,
.crm-date-filter__select-wrap,
.crm-date-field__control,
.dash_period_switcher,
.mc_period_switcher {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--crm-df-field-gap);
	min-height: var(--crm-df-field-h);
	height: var(--crm-df-field-h);
	padding: 0 var(--crm-df-field-pad-x);
	background: var(--crm-df-control-bg);
	border: 1px solid var(--crm-df-control-border);
	border-radius: var(--crm-df-field-radius);
	box-sizing: border-box;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

.crm-df-field__control:hover,
.crm-date-filter__select-wrap:hover,
.crm-date-field__control:hover,
.dash_period_switcher:hover,
.mc_period_switcher:hover {
	border-color: var(--crm-df-control-border-hover);
	background: var(--crm-df-control-bg-hover);
}

.crm-df-field__control:focus-within,
.crm-date-filter__select-wrap:focus-within,
.crm-date-field__control:focus-within,
.dash_period_switcher:focus-within,
.mc_period_switcher:focus-within {
	border-color: var(--primary);
	box-shadow: var(--crm-df-control-focus-ring);
	background: var(--crm-df-control-bg-focus);
}

.crm-df-field__control:active,
.crm-date-filter__select-wrap:active,
.crm-date-field__control:active {
	opacity: 0.96;
}

.crm-df-field__icon,
.crm-date-field__icon {
	font-size: var(--crm-df-icon-size);
	width: var(--crm-df-icon-size);
	height: var(--crm-df-icon-size);
	line-height: var(--crm-df-icon-size);
	color: var(--text-muted);
	flex-shrink: 0;
	pointer-events: none;
}

.crm-df-field__control:focus-within .crm-df-field__icon,
.crm-date-field__control:focus-within .crm-date-field__icon,
.crm-date-filter__select-wrap:focus-within .crm-df-field__icon {
	color: var(--primary);
}

.crm-df-field__chevron {
	font-size: var(--crm-df-icon-size);
	width: var(--crm-df-icon-size);
	height: var(--crm-df-icon-size);
	line-height: var(--crm-df-icon-size);
	color: var(--text-muted);
	flex-shrink: 0;
	pointer-events: none;
	margin-left: auto;
}

.crm-df-field__control:focus-within .crm-df-field__chevron {
	color: var(--primary);
}

/* ── SelectField ── */
.crm-df-field__select,
.crm-date-filter__select,
.dash_period_select,
.mc_period_select {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: var(--font-body, 0.9375rem);
	font-weight: var(--font-weight-medium, 500);
	font-family: inherit;
	color: var(--text-main);
	background: transparent;
	border: none;
	outline: none;
	appearance: none;
	cursor: pointer;
	line-height: 1.4;
}

.crm-df-field__select:disabled,
.crm-date-filter__select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Legacy CSS triangle removed - use .crm-df-field__chevron */
.crm-date-filter__select-wrap::after,
.dash_period_switcher::after,
.mc_period_switcher::after {
	content: none;
	display: none;
}

/* ── DateField ── */
.crm-date-filter__range,
.dash_range_inputs,
.mc_range_inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--crm-df-field-gap);
	width: 100%;
}

.crm-date-filter__range-form,
.dash_range_form,
.mc_range_form {
	display: flex;
	flex-direction: column;
	gap: var(--crm-df-panel-gap);
	width: 100%;
	margin: 0;
}

.crm-df-field__input,
.crm-date-field__input,
.dash_range_group input[type="date"],
.mc_range_group input[type="date"] {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: var(--font-body, 0.9375rem);
	font-weight: var(--font-weight-medium, 500);
	font-family: inherit;
	color: var(--text-main);
	background: transparent;
	border: none;
	outline: none;
	text-align: left;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.crm-df-field__input::-webkit-calendar-picker-indicator,
.crm-date-field__input::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0;
}

.crm-df-field__input:disabled,
.crm-df-field__control.is-disabled,
.crm-date-field__input:disabled,
.crm-date-field__control.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Actions ── */
.crm-date-filter__actions {
	display: flex;
	flex-direction: column;
	gap: var(--crm-df-field-gap);
	width: 100%;
	margin-top: 2px;
}

.crm-date-filter__submit,
.crm-date-filter__cancel,
.dash_filter_submit,
.mc_filter_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--crm-df-field-h);
	width: 100%;
	margin: 0;
}

/* ── Body lock ── */
body.dash-filter-sheet-open,
body.mc-filter-sheet-open {
	overflow: hidden;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.crm-date-filter__backdrop,
	.dash_filter_backdrop,
	.mc_filter_backdrop {
		display: block;
	}

	.crm-date-filter__panel,
	.crm-date-filter__popover,
	.dash_filter_popover,
	.mc_filter_popover {
		position: fixed;
		top: auto;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
		transform: translateY(16px);
		transform-origin: bottom center;
	}

	.crm-date-filter__panel.is_open,
	.crm-date-filter__popover.is_open,
	.dash_filter_popover.is_open,
	.mc_filter_popover.is_open {
		transform: translateY(0);
	}

	.crm-date-filter__range,
	.dash_range_inputs,
	.mc_range_inputs {
		grid-template-columns: 1fr;
	}

	.crm-date-filter__trigger,
	.dash_filter_trigger,
	.mc_filter_trigger {
		width: var(--crm-df-trigger-size) !important;
		height: var(--crm-df-trigger-size) !important;
		min-width: var(--crm-df-trigger-size) !important;
		min-height: var(--crm-df-trigger-size) !important;
		max-width: var(--crm-df-trigger-size) !important;
		max-height: var(--crm-df-trigger-size) !important;
	}
}

@media (max-width: 360px) {
	.crm-date-filter__panel,
	.crm-date-filter__popover,
	.dash_filter_popover,
	.mc_filter_popover {
		left: 8px;
		right: 8px;
		padding: 14px;
	}
}

/* ── Dark theme ── */
[data-theme-resolved='dark'] .crm-date-filter {
	--crm-df-panel-bg: var(--ds-surface, var(--bg-card));
	--crm-df-panel-border: var(--ds-border, var(--border-color));
	--crm-df-panel-shadow:
		0 16px 40px rgba(0, 0, 0, 0.45),
		0 2px 10px rgba(0, 0, 0, 0.22);
	--crm-df-control-bg: var(--input-bg, var(--surface-secondary));
	--crm-df-control-border: var(--input-border, var(--border-color));
	--crm-df-control-bg-focus: var(--input-focus-bg, var(--surface-elevated));
}

[data-theme-resolved='dark'] .crm-date-filter__panel-head,
[data-theme-resolved='dark'] .crm-date-filter__popover-head,
[data-theme-resolved='dark'] .crm-date-filter__section + .crm-date-filter__section {
	border-color: var(--ds-border, var(--border-color));
}

[data-theme-resolved='dark'] .crm-date-filter__trigger,
[data-theme-resolved='dark'] .dash_filter_trigger,
[data-theme-resolved='dark'] .mc_filter_trigger {
	background: var(--ds-surface, var(--bg-card));
	border-color: var(--ds-border, var(--border-color));
}

/* ── Isolation: nested select/date must not inherit global form chrome ── */
.crm-date-filter .crm-df-field__control select,
.crm-date-filter .crm-df-field__control input[type="date"],
.crm-date-filter .crm-df-field__select,
.crm-date-filter .crm-df-field__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0!important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	--bs-form-select-bg-img: none !important;
	--bs-form-select-bg-icon: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	font-size: var(--font-body, 0.9375rem) !important;
	font-weight: var(--font-weight-medium, 500) !important;
	line-height: 1.4 !important;
	color: var(--text-main) !important;
	transform: none !important;
}

.crm-date-filter .crm-df-field__control select:hover,
.crm-date-filter .crm-df-field__control select:focus,
.crm-date-filter .crm-df-field__control select:focus-visible,
.crm-date-filter .crm-df-field__control select:active,
.crm-date-filter .crm-df-field__control input[type="date"]:hover,
.crm-date-filter .crm-df-field__control input[type="date"]:focus,
.crm-date-filter .crm-df-field__control input[type="date"]:focus-visible,
.crm-date-filter .crm-df-field__control input[type="date"]:active,
.crm-date-filter .crm-df-field__select:hover,
.crm-date-filter .crm-df-field__select:focus,
.crm-date-filter .crm-df-field__select:focus-visible,
.crm-date-filter .crm-df-field__input:hover,
.crm-date-filter .crm-df-field__input:focus,
.crm-date-filter .crm-df-field__input:focus-visible {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	transform: none !important;
}


/* ================================================================== */
/* App Header - standard enforcement */
/* Source: system/shell/css/header_shell.css */
/* ================================================================== */
/**
 * App header - final enforcement (28px controls inside 40px row).
 * Loaded after responsive/theme layers.
 */

.app-header,
.top_bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	padding: 0 10px !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
}

.app-header__inner,
.top_inner,
.app-header__left,
.top_left,
.app-header__center,
.top_center,
.app-header__right,
.top_right {
	gap: 10px !important;
}

.app-header__inner,
.top_inner {
	height: 100% !important;
	max-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.app-header__toggle,
.top_toggle,
.app-header__avatar,
.top_avatar {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.app-header__user,
.top_user,
.app-header__theme,
.top_theme,
.global-search__field {
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	box-sizing: border-box !important;
}

.app-header__stats,
.top_stats {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	gap: 3px !important;
}

.top_stat--num {
	height: 22px !important;
	min-width: 22px !important;
	max-height: 22px !important;
	border-radius: 9999px!important;
	box-sizing: border-box !important;
}

@media (max-width: 991px) {
	.app-header__stats,
	.top_stats {
		display: none !important;
	}
}

.global-search {
	flex: 1 1 100px !important;
	min-width: 100px !important;
}

.global-search__field {
	background: var(--bg-header) !important;
	border-color: var(--border-color) !important;
	color: var(--text-main) !important;
	transition: var(--app-header-transition, border-color 0.2s ease, box-shadow 0.2s ease) !important;
}

.global-search__field:hover {
	border-color: var(--border-color) !important;
}

.global-search__field:focus-within {
	border-color: var(--primary) !important;
}

.global-search .global-search__input,
.global-search__field input.global-search__input {
	color: var(--text-main) !important;
	background: transparent !important;
}

.global-search__input::placeholder {
	color: var(--text-muted) !important;
}

.global-search__icon,
.global-search__clear {
	color: var(--text-muted) !important;
	transition: color 0.2s ease !important;
}

.global-search__field:focus-within .global-search__icon {
	color: var(--primary) !important;
}

.app-header__theme,
.top_theme {
	border: none !important;
	border-radius: 9999px!important;
}

.app-header__theme .app-header__theme-btn,
.top_theme .top_mode {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	border-radius: 50%!important;
}

@media (min-width: 768px) {
	.app-header__user,
	.top_user {
		padding-right: 10px !important;
		padding-left: 0 !important;
		gap: 0 !important;
		border-radius: 9999px!important;
	}
}

.app-header__avatar,
.top_avatar {
	border: none !important;
	border-radius: 50%!important;
	padding: 0 !important;
}

.app-header__avatar img,
.top_avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.global-search .global-search__input,
.global-search__field input.global-search__input {
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	box-sizing: border-box !important;
}

@media (max-width: 767px) {
	.app-header__toggle,
	.top_toggle,
	.app-header__avatar,
	.top_avatar,
	.app-header__user,
	.top_user {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
		max-width: 28px !important;
		max-height: 28px !important;
	}

	.app-header__theme .app-header__theme-btn,
	.top_theme .top_mode {
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		min-height: 24px !important;
		max-width: 24px !important;
		max-height: 24px !important;
	}

	.global-search .global-search__input,
	.global-search__field input.global-search__input {
		height: 28px !important;
		min-height: 28px !important;
		max-height: 28px !important;
	}
}


/* ================================================================== */
/* App Sidebar - standard enforcement */
/* Source: system/shell/css/sidebar_shell.css */
/* ================================================================== */
/**
 * App sidebar - final enforcement (10px inset, independent scroll).
 */

.app-sidebar,
.side_panel {
	padding: 10px !important;
	box-sizing: border-box !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
	overflow: hidden !important;
}

.app-sidebar .side_nav,
.side_panel .side_nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

@media (min-width: 769px) {
	body.side_collapsed .app-sidebar,
	body.side_collapsed .side_panel {
		padding: 10px 6px !important;
	}
}

@media (max-width: 768px) {
	.app-sidebar,
	.side_panel {
		padding-top: calc(10px + env(safe-area-inset-top, 0)) !important;
		padding-right: max(10px, env(safe-area-inset-right, 0)) !important;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
		padding-left: max(10px, env(safe-area-inset-left, 0)) !important;
	}
}


/* ================================================================== */
/* App Content - standard enforcement */
/* Source: system/shell/css/content_shell.css */
/* ================================================================== */
/**
 * App content - final enforcement (10px inset, sole scroll region).
 */

.app-content,
.main_area,
.main-content {
	padding: 10px !important;
	box-sizing: border-box !important;
	height: calc(100dvh - 40px) !important;
	max-height: calc(100dvh - 40px) !important;
	min-height: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}