/* File: vendors/bootstrap/css/bootstrap.css */
*,::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{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{text-decoration:underline dotted;cursor:help;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{font-size:.875em}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;line-height:inherit;font-size:calc(1.275rem + .3vw)}@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}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::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}.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}}.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}}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color:var(--bs-body-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-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{transform:translate(0,-50px);transition:transform .3s ease-out}@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-top:calc(-.5 * var(--bs-modal-header-padding-y));margin-right:calc(-.5 * var(--bs-modal-header-padding-x));margin-bottom:calc(-.5 * var(--bs-modal-header-padding-y));margin-left: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}}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--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-grow:1;flex-basis:0;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}.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-top:calc(-.5 * var(--bs-offcanvas-padding-y));margin-right:calc(-.5 * var(--bs-offcanvas-padding-x));margin-bottom:calc(-.5 * var(--bs-offcanvas-padding-y));margin-left: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}.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-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}



/* File: vendors/daterangepicker/daterangepicker.css */
.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}




/* File: vendors/tom-select/tom-select.bootstrap5.css */
/**
 * Tom Select bootstrap 5
 */
/**
 * tom-select.css (v1.7.8)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control.plugin-drag_drop.multi > .ts-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff; }

.ts-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: '!';
  visibility: hidden; }

.ts-control.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

.plugin-checkbox_options .option input {
  margin-right: 0.5rem; }

.plugin-clear_button .items {
  padding-right: calc( 1em + (3 * 5px)) !important; }

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 0.375rem;
  right: calc(0.75rem - 5px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer; }

.plugin-clear_button.single .clear-button {
  right: calc(0.75rem - 5px +  2rem); }

.plugin-clear_button .has-items.focus .clear-button,
.plugin-clear_button:hover .has-items .clear-button {
  opacity: 1; }

.ts-control .dropdown-header {
  position: relative;
  padding: 6px 0.75rem;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  border-radius: 0.25rem 0.25rem 0 0; }

.ts-control .dropdown-header-close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  color: #343a40;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important; }

.ts-control .dropdown-header-close:hover {
  color: black; }

.plugin-dropdown_input .ts-input.focus {
  box-shadow: none;
  border: 1px solid #ced4da; }

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px 0;
  display: block;
  padding: 0.375rem 0.75rem;
  box-shadow: none;
  width: 100%;
  background: transparent; }

.plugin-dropdown_input .focus ~ .ts-dropdown .dropdown-input {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }

.ts-control.plugin-input_autogrow .ts-input.has-items > input {
  min-width: 0; }

.ts-control.plugin-input_autogrow .ts-input.focus.has-items > input {
  flex: none;
  min-width: 4px; }
  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-webkit-input-placeholder {
    color: transparent; }
  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-ms-input-placeholder {
    color: transparent; }
  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::placeholder {
    color: transparent; }

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex; }

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0; }

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none; }

.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none; }

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none; }

.ts-control.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important; }

.ts-control.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 1px 5px;
  border-left: 1px solid #dee2e6;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  margin-left: 5px; }

.ts-control.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05); }

.ts-control.plugin-remove_button .item.active .remove {
  border-left-color: rgba(0, 0, 0, 0); }

.ts-control.plugin-remove_button .disabled .item .remove:hover {
  background: none; }

.ts-control.plugin-remove_button .disabled .item .remove {
  border-left-color: white; }

.ts-control.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px; }

.ts-control {
  position: relative; }

.ts-dropdown,
.ts-input,
.ts-input input {
  color: #343a40;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  font-smoothing: inherit; }

.ts-input,
.ts-control.single .ts-input.input-active {
  background: #fff;
  cursor: text; }

.ts-input {
  border: 1px solid #ced4da;
  padding: 0.375rem 0.75rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 0.25rem;
  display: flex;
  flex-wrap: wrap; }
  .ts-control.multi .ts-input.has-items {
    /* padding: calc( 0.375rem - 1px - 0px) 0.75rem calc( 0.375rem - 1px - 3px - 0px);  */
  }
  .ts-input.full {
    background-color: #fff; }
  .ts-input.disabled,
  .ts-input.disabled * {
    cursor: default !important; }
  .ts-input.focus {
    box-shadow: none; }
  .ts-input > * {
    vertical-align: baseline;
    display: inline-block; }
  .ts-control.multi .ts-input > div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 1px 5px;
    background: #efefef;
    color: #343a40;
    border: 0px solid #dee2e6; }
    .ts-control.multi .ts-input > div.active {
      background: #0d6efd;
      color: #fff;
      border: 0px solid rgba(0, 0, 0, 0); }
  .ts-control.multi .ts-input.disabled > div, .ts-control.multi .ts-input.disabled > div.active {
    color: #868787;
    background: white;
    border: 0px solid white; }
  .ts-input > input {
    flex: 1 1 auto;
    min-width: 7rem;
    display: inline-block !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    -webkit-user-select: auto !important;
       -moz-user-select: auto !important;
        -ms-user-select: auto !important;
            user-select: auto !important;
    box-shadow: none !important; }
    .ts-input > input::-ms-clear {
      display: none; }
    .ts-input > input:focus {
      outline: none !important; }
  .ts-input.has-items > input {
    margin: 0 4px !important; }
  .ts-input.dropdown-active::before {
    content: ' ';
    display: block;
    position: absolute;
    background: white;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0; }
  .ts-input.rtl {
    text-align: right; }
    .ts-input.rtl.single .ts-input:after {
      left: calc(0.75rem + 5px);
      right: auto; }
    .ts-input.rtl .ts-input > input {
      margin: 0 4px 0 -2px !important; }
  .ts-input.disabled {
    opacity: 0.5;
    background-color: #e9ecef; }
  .input-hidden .ts-input > input {
    opacity: 0;
    position: absolute;
    left: -10000px; }

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 0.25rem 0.25rem; }
  .ts-dropdown [data-selectable] {
    cursor: pointer;
    overflow: hidden; }
    .ts-dropdown [data-selectable] .highlight {
      background: rgba(255, 237, 40, 0.4);
      border-radius: 1px; }
  .ts-dropdown .option,
  .ts-dropdown .optgroup-header,
  .ts-dropdown .no-results,
  .ts-dropdown .create {
    padding: 3px 0.75rem; }
  .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
    cursor: inherit;
    opacity: 0.5; }
  .ts-dropdown [data-selectable].option {
    opacity: 1;
    cursor: pointer; }
  .ts-dropdown .optgroup:first-child .optgroup-header {
    border-top: 0 none; }
  .ts-dropdown .optgroup-header {
    color: #6c757d;
    background: #fff;
    cursor: default; }
  .ts-dropdown .create:hover,
  .ts-dropdown .option:hover,
  .ts-dropdown .active {
    background-color: #e9ecef;
    color: #1e2125; }
    .ts-dropdown .create:hover.create,
    .ts-dropdown .option:hover.create,
    .ts-dropdown .active.create {
      color: #1e2125; }
  .ts-dropdown .create {
    color: rgba(52, 58, 64, 0.5); }
  .ts-dropdown .spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 3px 0.75rem; }
    .ts-dropdown .spinner:after {
      content: " ";
      display: block;
      width: 24px;
      height: 24px;
      margin: 3px;
      border-radius: 50%;
      border: 5px solid #d0d0d0;
      border-color: #d0d0d0 transparent #d0d0d0 transparent;
      animation: lds-dual-ring 1.2s linear infinite; }

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  overflow-scrolling: touch;
  scroll-behavior: smooth; }

.ts-wrapper.form-control,
.ts-wrapper.form-select {
  padding: 0 !important; }

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  height: auto;
  padding: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }

.ts-dropdown .optgroup-header {
  font-size: 0.875rem;
  line-height: 1.5; }

.ts-dropdown .optgroup:first-child:before {
  display: none; }

.ts-dropdown .optgroup:before {
  content: ' ';
  display: block;
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: -0.75rem;
  margin-right: -0.75rem; }

.ts-dropdown .create {
  padding-left: 0.75rem; }

.ts-dropdown-content {
  padding: 5px 0; }

.ts-input {
  min-height: calc(1.5em + (0.75rem + 2px));
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  display: flex;
  align-items: center; }
  @media (prefers-reduced-motion: reduce) {
    .ts-input {
      transition: none; } }
  .ts-input.dropdown -active {
    border-radius: 0.25rem; }
  .ts-input.dropdown-active::before {
    display: none; }
  .ts-input.focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
  .ts-input .item {
    display: flex;
    align-items: center; }

.is-invalid .ts-input,
.was-validated .ts-input.invalid {
  border-color: #dc3545; }
  .is-invalid .ts-input.focus,
  .was-validated .ts-input.invalid.focus {
    border-color: #bd2130;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); }

.is-valid .ts-input {
  border-color: #198754; }
  .is-valid .ts-input.focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); }

.input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
  min-height: calc(1.5em + (0.5rem + 2px));
  padding: 0 .75rem;
  border-radius: 0.2rem;
  font-size: 0.875rem; }

.input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
  min-height: calc(1.5em + (0.5rem + 2px)) !important;
  font-size: 0.875rem;
  padding-bottom: 0; }

.input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
  /* padding-top: calc( (calc(1.5em + (0.5rem + 2px)) - (1.5 * 0.875rem) - 4px)/2) !important;  */
}

.ts-control.multi .ts-input.has-items {
  padding-left: calc(0.75rem - 5px);
  padding-right: calc(0.75rem - 5px); }

.ts-control.multi .ts-input > div {
  border-radius: calc(0.25rem - 1px); }

.input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
  min-height: calc(1.5em + (1rem + 2px));
  border-radius: 0.3rem;
  font-size: 1.25rem; }

.ts-control:not(.form-select) {
  padding: 0;
  border: none;
  height: auto;
  box-shadow: none;
  background: none; }
  .ts-control:not(.form-select).single .ts-input {
    background-image: 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 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2rem; }

.ts-control.form-select {
  padding: 0;
  height: auto;
  box-shadow: none; }
  .ts-control.form-select .ts-input,
  .ts-control.form-select.single .ts-input.input-active {
    border: none !important;
    background: transparent !important; }

.input-group > .ts-control {
  flex-grow: 1; }

.input-group > .ts-control:not(:nth-child(2)) > .ts-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.input-group > .ts-control:not(:last-child) > .ts-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

/*# sourceMappingURL=tom-select.bootstrap5.css.map */



/* File: admin/css/theme.css */
/* ============================================================
   theme.css — базовая тема/фреймворк админки
   (очищено; сюда ляжет база нового дизайна)
   ============================================================ */




/* File: admin/css/abstracts/_variables.css */
/* ============================================================
   Дизайн-токены админки
   Единый источник цветов, радиусов, шрифтов и теней.
   Компоненты ссылаются ТОЛЬКО на эти переменные (без хардкода).
   ============================================================ */
:root {
    /* Типографика */
    --font:      'Inter', system-ui, -apple-system, sans-serif;

    /* Плавность смены цвета/фона/границы по умолчанию (как ховер .app-nav-link) */
    --transition: .12s ease;

    /* Поверхности */
    --bg:          #f8f9fd;   /* фон приложения */
    --surface:     #ffffff;   /* карточки, панели */
    --input-bg:           #f1f3f9;      /* фон полей ввода (input, select, textarea) */
    --input-border:       transparent;  /* рамка поля по умолчанию (заливка без рамки) */
    --input-focus-border: #97a3b0;      /* рамка поля в фокусе (фон становится белым) */
    --fill:        #f0f0ef;   /* hover-заливка */
    --fill-soft:   #fafafa;   /* мягкий фон (dashed, превью) */
    --fill-muted:  #f4f4f5;   /* подложка бейджей */

    /* Границы */
    --border:         rgba(0, 0, 0, .07);  /* карточки */
    --border-soft:    #e6e9f2;  /* разделители */
    --border-strong:  rgba(0, 0, 0, .12);  /* инпуты */
    --border-control: rgba(0, 0, 0, .09);  /* кнопки-иконки, поиск */
    --border-dashed:  rgba(0, 0, 0, .20);  /* пунктирные рамки */

    /* Текст */
    --text:           #1e2022;  /* основной */
    --text-secondary: #52525b;  /* лейблы */
    --text-tertiary:  #3f3f46;  /* кнопки, вторичный */
    --text-muted:     #919bb6;  /* подписи, плейсхолдеры */
    --text-muted-2:   #71717a;  /* приглушённый акцентный */
    --icon-muted:     #919bb6;  /* серый цвет иконок (действия строк/списков) */

    /* Акцент */
    --primary:       #3761e9;
    --primary-hover: #1c4ade;   /* тёмный синий для hover (как в старой админке) */
    --primary-soft:  rgba(55, 97, 233, .1);

    /* Семантика */
    --success:     #16a34a;
    --success-ink: #0f7a4d;
    --danger:      #b42318;
    --warning:     #d08700;

    /* Радиусы */
    --radius-sm:   4px;   /* бейджи, kbd */
    --radius:      4px;   /* кнопки, инпуты */
    --radius-lg:   8px;   /* карточки */
    --radius-pill: 999px;

    /* Тени */
    --shadow-card: 0 8px 24px rgba(0, 0, 0, .07);
    --shadow-menu: 0 12px 30px rgba(0, 0, 0, .14);
    --shadow-pop:  0 24px 60px rgba(0, 0, 0, .30);

    /* Каркас */
    --sidebar-width: 238px;
    --header-height: 64px;   /* высота лого-блока и шапки (линии на одном уровне) */

    /* Мост к Bootstrap (reboot / сетка / modal / dropdown) — под наш дизайн */
    --bs-body-bg:         var(--bg);
    --bs-body-color:      var(--text);
    --bs-font-sans-serif: var(--font);
    --bs-font-monospace:  var(--font);
    --bs-border-color:    var(--border-strong);
    --bs-border-radius:   var(--radius);
    --bs-primary:         var(--primary);
}




/* File: admin/css/base/_base.css */
/* ============================================================
   База: глобальные правила уровня документа
   ============================================================ */
/* Прокрутка без «резинки» (rubber-band) вьюпорта — глобально для всех скроллов.
   Внутренние контейнеры (.app-main, сайдбар, модалки, таблицы) упираются overscroll
   в корневой вьюпорт; отключение его bounce убирает задержку при реверсе скролла
   на верхней/нижней границе. */
html {
    overscroll-behavior: none;
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--text);
    color: #fff;
}

/* Плавность смены цвета/фона/границы по умолчанию (тайминг как у ховера .app-nav-link).
   Специфичность * — нулевая, поэтому любой компонентный transition имеет приоритет. */
*,
*::before,
*::after {
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

/* Нативные контролы наследуют шрифт приложения */
input, textarea, select, button {
    font-family: inherit;
}

/* Тонкий кастомный скроллбар — глобально для всех прокручиваемых областей.
   Инсет через прозрачный бордер + background-clip, чтобы одинаково выглядел
   на любом фоне (страница, белая карточка, дропдаун). */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .14) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .14);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .24);
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-corner {
    background: transparent;
}




/* File: admin/css/layout/_sidebar.css */
/* ============================================================
   Layout: боковое меню (сайдбар)
   ============================================================ */
.app-sidebar {
    position: sticky;
    top: 0;
    flex: none;
    width: var(--sidebar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #2a2927;
    border-right: 1px solid var(--border);
}

/* ---------- Логотип ---------- */
.app-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    height: var(--header-height);
    padding: 0 20px;
    border-bottom: 1px solid #3A3D40;
}
.app-brand-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.app-brand-row {
    display: flex;
    align-items: center;
    gap: 7px;
}
.app-brand-logo {
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #8b6ff0, #5a7df0);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.app-brand-name {
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.01em;
    color: #fff;
}
.app-brand-badge {
    font-size: 10px;
    font-weight: 600;
    color: #7b9ff5;
    background: rgba(55, 97, 233, .18);
    border: 1px solid rgba(55, 97, 233, .28);
    border-radius: var(--radius-sm);
    letter-spacing: -0.5px;
    padding: 2px 6px;
}
.app-brand-domain {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .12s;
}
.app-brand-domain:hover {
    color: var(--fill);
}

/* ---------- Навигация (аккордеон-группы) ---------- */
.app-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 12px 8px;
}
.app-nav-head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 1px 0;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: #faf9f5a3;
    text-decoration: none;
    cursor: pointer;
    transition: color .12s ease;
}
.app-nav-head:hover {
    color: var(--fill);
}
/* Группа содержит активный пункт (или прямая ссылка активна) — заголовок акцентный */
.app-nav-group.is-current .app-nav-head,
.app-nav-head.is-active {
    color: #fff;
}
.app-nav-head svg {
    flex: none;
    width: 18px;
    height: 18px;
}
.app-nav-head-title {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-nav-chevron {
    flex: none;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    transition: transform .15s ease;
    display: none; /* ВРЕМЕННО: стрелка раскрытия скрыта */
}
.app-nav-group.is-open .app-nav-chevron {
    transform: rotate(180deg);
}

.app-nav-items {
    display: flex; /* ВРЕМЕННО: все группы раскрыты (было none) */
    flex-direction: column;
    gap: 1px;
    padding-left: 12px;
    margin: 1px 0 3px 20px;
    border-left: 1px solid #3A3D40;
}
.app-nav-group.is-open .app-nav-items {
    display: flex;
}
.app-nav-link {
    display: block;
    padding: 7px 11px;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 500;
    color: #faf9f5a3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .12s ease;
}
.app-nav-link:hover {
    color: var(--fill);
}
.app-nav-link.is-active {
    color: #fff;
}

/* ---------- Блок пользователя ---------- */
.app-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
    border-top: 1px solid #3A3D40;
}
.app-user-avatar {
    flex: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #3f3e3c;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}
.app-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.app-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.app-user-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-user-role {
    font-size: 11px;
    line-height: 1.1;
    color: var(--text-muted);
}
.app-user-logout {
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--radius);
    color: var(--danger);
    cursor: pointer;
    transition: background .12s ease;
}
.app-user-logout:hover {
    background: var(--fill);
}

/* ---------- Карточка тарифа ---------- */
.app-plan {
    padding: 14px;
    border-top: 1px solid #3A3D40;
    background: #2a2927;
    background-image: radial-gradient(120% 90% at 100% 0%, rgba(55, 97, 233, .12), transparent 60%);
}
.app-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid rgb(71 70 68 / 14%);
}
.app-plan-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.app-plan-btn {
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}
.app-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted-2);
}
.app-plan-count {
    font-size: 11px;
    color: #fff;
}
.app-plan-count b {
    color: #fff;
}
.app-plan-bar {
    height: 5px;
    margin-bottom: 10px;
    background: rgb(255 255 255 / 7%);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.app-plan-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #5a7df0, #8b6ff0);
    border-radius: var(--radius-pill);
}
.app-plan-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-plan-note {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
}
.app-plan-until {
    display: block;
    font-size: 9.5px;
    color: #b4b4bb;
}
.app-plan-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #35d3ac;
    background: rgba(53, 211, 172, .14);
    border-radius: var(--radius);
    padding: 2px 7px;
}




/* File: admin/css/layout/_page.css */
/* ============================================================
   Layout: каркас приложения (сайдбар + основная область)
   ============================================================ */
.app {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.app-main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
}

.app-content {
    padding: 26px 32px 60px;
}




/* File: admin/css/layout/_pages.css */
/* ============================================================
   Лейауты страниц — переиспользуемые каркасы разделов.
   Копируются в шаблоны разделов (без include).
   ============================================================ */

/* ============================================================
   «Список» — панель: липкий тулбар → тело (таблица) → футер
   ============================================================ */
/* Шапка страницы: заголовок + описание слева, действие справа */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.page-head-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}
.page-head-text {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
}
/* Алерт-сообщение на уровне страницы (между шапкой и контентом) — отступ снизу */
.page > .alert { margin-bottom: 16px; }

.page-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* Тулбар прилипает к верху при скролле длинной таблицы */
.page-list-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Верхняя строка тулбара: заголовок + действия/контролы */
.page-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.page-list-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
/* Счётчик рядом с заголовком списка (напр. «30 из 403») */
.page-list-count {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}
.page-list-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Строка фильтров (поиск + фильтры) */
.page-list-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}
/* Фильтр-селекты (tom-select) в тулбаре — не схлопываются (tom-select ставит узкую инлайн-ширину) */
.page-list-filters .ts-wrapper,
.page-list-filters .ts-control { min-width: 160px !important; }
/* Единый цвет текста фильтров: плейсхолдеры поиска и summary-селектов — как выбранное значение */
.page-list-filters .page-list-search input::placeholder { color: var(--text); opacity: 1; }
.page-list-filters .ts-control.has-summary.is-empty .ts-input::after { color: var(--text); }

/* Все селекты (tom-select) в тулбаре списка — высотой как поиск (34px) */
.page-list-toolbar .ts-control .ts-input { font-size: 12.5px; }
.page-list-toolbar .ts-control.single .ts-input {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 30px 0 10px !important;
    background-position: right 10px center;
    background-size: 14px;
}
/* С ведущей иконкой (пагинация, сортировка) — освобождаем место слева */
.page-list-toolbar .ts-control.single .ts-input.ts-has-lead { padding-left: 32px !important; }
.page-list-toolbar .ts-control.multi .ts-input {
    min-height: 34px;
    padding: 3px 30px 3px 6px;
    background-position: right 10px center;
    background-size: 14px;
}
.page-list-toolbar .ts-control.multi .ts-input > .item { font-size: 11.5px; padding: 2px 4px 2px 8px !important; }
/* Одиночный селект в тулбаре (без поиска): схлопываем инпут-курсор в 0 —
   не нужен для набора, убирает мигающую каретку и пустое место справа.
   Выбор «Все» — обычный пункт (allowEmptyOption), плейсхолдер не используется. */
.page-list-toolbar .ts-control.single .ts-input input {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    caret-color: transparent;
}
.page-list-toolbar .ts-control.single .ts-input > .item { white-space: nowrap; }
/* Если tom-select не инициализировался — нативный select тоже компактный */
.page-list-toolbar select:not(.ts-hidden-accessible) {
    height: 34px;
    font-size: 12.5px;
}
/* Кнопка выбора дат (datepicker) в строке фильтров — как поиск/селекты по высоте */
.page-list-datepicker { display: inline-flex; }
.page-list-datepicker-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.page-list-datepicker-btn svg { flex: none; color: var(--text-muted); }

/* «Применённый» фильтр (значение реально в URL, $smarty.get) — синий бордер.
   Единообразно для поиска, селектов (tom-select) и датапикера. */
.page-list-search.is-applied { border-color: var(--primary); }
.page-list-filters .js-select.is-applied + .ts-control .ts-input { border-color: var(--primary); }
.page-list-datepicker.is-applied .page-list-datepicker-btn { color: var(--text); border-color: var(--primary); }
.page-list-datepicker.is-applied .page-list-datepicker-btn svg { color: var(--primary); }

/* Диапазон цены в строке фильтров — два числовых поля, высота как у поиска/датапикера */
.page-list-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
}
.page-list-price input {
    width: 64px;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font-size: 12.5px;
    color: var(--text);
}
/* второе поле (до) — отступ слева, чтобы число не липло к прочерку */
.page-list-price input:last-child { padding-left: 6px; }
/* фокус подсвечивает весь контейнер, а не отдельный инпут */
.page-list-price:focus-within { border-color: var(--input-focus-border); }
.page-list-price input::-webkit-outer-spin-button,
.page-list-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-list-price input::placeholder { color: var(--text-muted); }
.page-list-price-sep { color: var(--text-muted); font-size: 12px; }
.page-list-price.is-applied { border-color: var(--primary); }
/* В открытом виде рамка всегда focus-серая — даже у применённого фильтра (синяя = только индикатор в закрытом виде) */
.page-list-filters .js-select.is-applied + .ts-control .ts-input.focus,
.page-list-filters .js-select.is-applied + .ts-control .ts-input.dropdown-active { border-color: var(--input-focus-border); }
.page-list-datepicker .page-list-datepicker-btn.is-open { background: var(--surface); border-color: var(--input-focus-border); }

/* Блок сортировки — прижат вправо */
.page-list-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.page-list-sort-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
/* Селекты справа: сортировка (160px) + кол-во на странице (86px).
   tom-select ставит контролу инлайн-ширину — перебиваем !important; ширину задаём
   по контролу (выпадающий список рендерится в body и берёт ширину контрола сам). */
.page-list-sort .ts-control { flex: none !important; min-width: 0 !important; }
.page-list-sort [name="sort"] + .ts-control { width: 160px !important; }
.page-list-sort .js-nav-select + .ts-control { width: 86px !important; }

/* Поиск в тулбаре */
.page-list-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 170px;
    max-width: 260px;
    height: 34px;
    padding: 0 11px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    transition: border-color .12s ease, background-color .12s ease;
}
.page-list-search:focus-within {
    background: var(--surface);
    border-color: var(--input-focus-border);
}
.page-list-search svg {
    flex: none;
    color: var(--text-muted);
}
.page-list-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
}
/* Кнопка очистки — видна только когда в поле есть текст (input не показывает плейсхолдер) */
.page-list-search-clear {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.page-list-search-clear:hover { background: var(--fill); color: var(--text); }
.page-list-search input:not(:placeholder-shown) ~ .page-list-search-clear { display: inline-flex; }

/* Тело (таблица) — без отступов, ячейки задают их сами */
.page-list-body {
    padding: 0;
}

/* Нижний липкий блок: панель выбора (сверху) + навигация (снизу) прилипают к низу вместе */
.page-list-bottom {
    position: sticky;
    bottom: 0;
    z-index: 6;
}

/* Панель массовых действий — над навигацией, появляется при выборе.
   Слева действия, справа счётчик (как в блоке навигации). */
.page-list-bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    /* Чекбокс «Выбрать все» слева выравниваем под столбец чекбоксов строки.
       По умолчанию — таблица со столбцом-ручкой сортировки (44px) + паддинг ячейки 4px. */
    padding-left: 48px;
    background: #f3f4f9;
    border-top: 1px solid var(--border-soft);
}
/* Таблица без сортировки позиций (нет столбца-ручки) — чекбокс в первом столбце */
.page-list-bulk.no-drag { padding-left: 14px; }
.page-list-bulk-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.page-list-bulk-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Иконочные действия панели — компактные; удаление красным */
.page-list-bulk .btn-plain.btn-icon svg { width: 16px; height: 16px; }
.page-list-bulk .js-bulk-delete,
.page-list-bulk .js-bulk-delete:hover { color: var(--danger); }

/* Навигация: инфо о диапазоне слева + пагинация справа */
.page-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.page-list-info {
    font-size: 12.5px;
    color: var(--text-tertiary);
}
.page-list-info b { color: var(--text); font-weight: 600; }

/* ============================================================
   «Простая» — одна колонка (шапка страницы задаёт основной topbar)
   ============================================================ */
.page-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   «Сетка» — адаптивная сетка карточек (лендинги, настройки)
   ============================================================ */
.page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* ============================================================
   «Редактирование» — 2 колонки + фиксированная панель действий
   ============================================================ */
/* Шапка редактирования: назад + крошка/название + статус */
.page-edit-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.page-edit-head-titles { flex: 1; min-width: 0; }
.page-edit-crumb { font-size: 12px; color: var(--text-muted); }
.page-edit-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.page-edit-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}
.page-edit-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.page-edit-status.is-on .page-edit-status-dot { background: var(--success); }

/* Блок «Основная информация»: колонка главного фото + поля */
.product-main {
    display: grid;
    grid-template-columns: 196px 1fr;
    gap: 18px;
    align-items: start;
}
.product-main-fields { display: flex; flex-direction: column; gap: 14px; }
.product-main-hint { margin-top: 7px; font-size: 11px; color: var(--text-muted); text-align: center; }
/* Поле с текстовым префиксом (напр. URL: домен/…) */
.input-affix {
    display: flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.input-affix:focus-within { border-color: var(--primary); }
.input-affix-text {
    padding: 0 2px 0 12px;
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.input-affix .form-control { border: 0; background: transparent; height: 100%; padding-left: 2px; }
.input-affix .form-control:focus { box-shadow: none; }

/* Превью сниппета в поиске (SEO) */
.seo-preview {
    padding: 13px 15px;
    background: var(--fill-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.seo-preview-label { margin-bottom: 6px; font-size: 11px; color: var(--text-muted); }
.seo-preview-url { font-family: var(--font); font-size: 12px; color: var(--success-ink); word-break: break-all; }
.seo-preview-title { margin: 2px 0 3px; font-size: 15px; color: #1a4fd6; overflow: hidden; text-overflow: ellipsis; }
.seo-preview-text { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }

/* Системная информация (строки ключ-значение) */
.sysinfo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}
.sysinfo-row:last-child { border-bottom: 0; }
.sysinfo-key { font-size: 12.5px; color: var(--text-muted); }
.sysinfo-val { font-size: 12.5px; font-weight: 500; color: var(--text); }

/* Атрибуты (значения атрибутов категории) — одна таблица; значения атрибута сгруппированы заливкой */
.attr-table tr.attr-row-alt > td { background-color: rgba(5, 35, 125, .028); }
.attr-table tbody tr:hover > td { background-color: rgba(5, 35, 125, .06); }
/* Столбец действий — больший отступ справа (как у офферов) */
.attr-table td.data-table-actions,
.attr-table th:last-child { padding-right: 16px; }
/* Цвет значения: поле + круглый свотч-кнопка в КОНЦЕ (как валюта у офферов) */
.attr-color .input-group-text { padding: 0 9px; }
.attr-color-dot {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background-color: transparent;
    cursor: pointer;
    transition: border-color .12s ease;
}
.attr-color-dot:hover { border-color: var(--text-tertiary); }
/* Нет цвета — пунктирный кружок с приглушённой заливкой (не путать с чекбоксом) */
.attr-color-dot.is-empty {
    border-style: dashed;
    background-color: var(--fill-muted);
}
.attr-color .form-control { min-width: 0; font-size: 12px; }
.attr-empty {
    padding: 18px 16px;
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius);
    background: var(--fill-soft);
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}
/* Холдер Editor.js (полное описание) */
.product-editor {
    padding: 8px 16px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    min-height: 200px;
}

.page-edit {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}
.page-edit-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.page-edit-side {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Блок во всю ширину сетки редактирования (над колонками) */
.page-edit-full { grid-column: 1 / -1; }

/* ---------- Редактируемые таблицы (торговые предложения, атрибуты) ---------- */
/* Инпуты в ячейках: не обрезаем (фокус/выпадашки), строки компактнее */
.data-table-el.offers-table td,
.data-table-el.attr-table td { overflow: visible; padding-top: 5px; padding-bottom: 5px; }
.offers-table .form-control,
.attr-table .form-control { height: 36px; min-width: 0; }
/* Инпуты в таблице — белые с рамкой, чтобы не сливаться с hover-подсветкой строки (как в старой админке) */
.offers-table td > .form-control,
.attr-table td > .form-control { background: var(--surface); border-color: #e6e9f2; }
.offers-table td > .form-control:focus,
.attr-table td > .form-control:focus { border-color: var(--input-focus-border); }
.offers-table .input-group,
.attr-table .input-group { background: var(--surface); box-shadow: inset 0 0 0 1px #e6e9f2; }
.offers-table .input-group:focus-within,
.attr-table .input-group:focus-within { box-shadow: inset 0 0 0 1px var(--input-focus-border); }
/* Денежное поле (input-group с валютой) */
.offer-money .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.offer-money .input-group-text {
    padding: 0 8px;
    font-size: 12.5px;
    color: var(--text-tertiary);
}
/* Кнопка атрибутов в статусе «заданы» — иконка синяя */
.js-offer-attrs.is-set { color: var(--primary); }
/* Кнопка-превью фото варианта */
.offer-thumb {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--fill-muted);
    color: var(--text-tertiary);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.offer-thumb:hover { border-color: var(--border-strong); }
.offer-thumb-img { position: absolute; inset: 0; }
.offer-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.offer-thumb-extra {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 0 4px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 14px;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    border-radius: var(--radius-sm);
}
/* Модалка выбора изображений варианта */
.modal-subtitle { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
.offer-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.offer-pick {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--fill-muted);
    cursor: pointer;
    overflow: hidden;
}
.offer-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-pick.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.offer-pick-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
}
.offer-pick.is-selected .offer-pick-check { display: flex; }

/* Фиксированная панель действий снизу (по центру контентной области) */
.page-actions {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 0 32px 22px;
    pointer-events: none;
}
.page-actions-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 20px;
    background: #25282a;
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}
.page-actions-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .16);
}
/* Публикация (тумблер + подпись) */
.page-actions-publish { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.page-actions-publish-label { font-size: 13px; font-weight: 600; min-width: 92px; }
.page-actions-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
}
.page-actions-hint.is-hidden { display: none; }
/* Кнопки-ссылки (Предпросмотр, Отмена) — прозрачные на тёмной панели */
.page-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.page-actions-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* Сохранить — основная кнопка (наш синий) */
.page-actions-save {
    height: 38px;
    padding: 0 18px;
    font-weight: 700;
}
/* Статичный вариант — для витрины (на реальной странице панель фиксированная) */
.page-actions-static {
    position: static;
    padding: 0;
}




/* File: admin/css/components/_button.css */
/* ============================================================
   Компонент: кнопки (.btn) — имена Bootstrap, значения наши токены
   ============================================================ */

/* База */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease, filter .12s ease;
}
.btn svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* ---------- Сплошные варианты ---------- */
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-dark    { background: var(--text);    color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-secondary:hover,
.btn-dark:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover { filter: brightness(.93); }

/* Вторичная — сплошная (как primary), серого цвета */
.btn-secondary { background: #525e64; border-color: #525e64; color: #fff; }
/* Светлая (белая с мягкой рамкой, как btn-white старой админки) */
.btn-light {
    background: #fff;
    border-color: rgba(231, 234, 243, .7);
    color: #55555a;
}
.btn-light:hover { background: var(--fill); }

/* Призрачная (только текст) */
.btn-ghost {
    background: transparent;
    color: var(--primary);
}
.btn-ghost:hover { background: var(--primary-soft); }

/* Пунктирная («добавить») */
.btn-dashed {
    border: 1px dashed var(--border-dashed);
    background: var(--fill-soft);
    color: var(--text-tertiary);
}
.btn-dashed:hover { background: var(--fill); }

/* Ссылка */
.btn-link {
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
}

/* ---------- Контурные (.btn-outline-*) ---------- */
.btn-outline-primary   { background: transparent; border-color: var(--primary);         color: var(--primary); }
.btn-outline-secondary { background: transparent; border-color: #d6dbe5;                 color: #55555a; }
.btn-outline-success   { background: transparent; border-color: rgba(22, 163, 74, .35); color: var(--success); }
.btn-outline-danger    { background: transparent; border-color: rgba(180, 35, 24, .35); color: var(--danger); }
.btn-outline-warning   { background: transparent; border-color: rgba(208, 135, 0, .4);  color: var(--warning); }
.btn-outline-dark      { background: transparent; border-color: var(--text);            color: var(--text); }
/* Hover контурной = сплошная кнопка: заливка цветом + белый текст */
.btn-outline-primary:hover   { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-secondary:hover { background: #525e64;        border-color: #525e64;        color: #fff; }
.btn-outline-success:hover   { background: var(--success); border-color: var(--success); color: #fff; }
.btn-outline-danger:hover    { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-outline-warning:hover   { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-outline-dark:hover      { background: var(--text);    border-color: var(--text);    color: #fff; }

/* ---------- Размеры ---------- */
.btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }

/* ---------- Иконочные (квадратные) ---------- */
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }
.btn-icon svg { width: 17px; height: 17px; }

/* Голая иконочная — без фона, рамки и паддинга; глиф во всю кнопку */
.btn-plain {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}
.btn-plain:hover { background: transparent; color: var(--text); }
.btn-plain.btn-icon svg { width: 20px; height: 20px; }

/* Плоская иконочная: только цвет иконки — без фона и рамки, компактный отступ.
   Цвет = currentColor (наследуется или задаётся утилитой .text-*). Для таблиц/списков. */
.btn-icon-plain {
    width: auto;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
}
.btn-icon-plain:hover { background: transparent; color: var(--text-secondary); }
.btn-icon-plain svg { width: 17px; height: 17px; }

/* Контейнер действий строки/списка — иконки-кнопки вплотную, малый gap. Переиспользуемый. */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* Серый цвет иконок действий (удаление красит text-danger — !important перебивает) */
.row-actions .btn-icon-plain { color: var(--icon-muted); }
/* Иконочная впритык — без резервной ширины (глиф + маленький паддинг), для плотных групп */
.btn-icon.btn-tight { width: auto; padding: 0 3px; }

/* ---------- Состояния ---------- */
.btn:disabled,
.btn.disabled {
    opacity: .55;
    pointer-events: none;
}
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}




/* File: admin/css/components/_button-group.css */
/* ============================================================
   Компонент: группа кнопок (.btn-group) — имя Bootstrap
   Кнопки соединяются в один блок с общими границами.
   ============================================================ */
.btn-group {
    display: inline-flex;
    vertical-align: middle;
}
.btn-group > .btn {
    position: relative;
    flex: 0 1 auto;
}
/* Наезжаем границами, скругляем только крайние.
   border-left — разделитель между кнопками: у сплошных вариантов
   собственный бордер прозрачный, поэтому линию рисуем явно (как в прототипе). */
.btn-group > .btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(0, 0, 0, .14);
}
/* Тёмный вариант: на почти-чёрном фоне чёрная линия не видна — делаем светлую */
.btn-group > .btn-dark:not(:first-child) {
    border-left-color: rgba(255, 255, 255, .18);
}
/* .dropdown-toggle исключаем: в сплит-кнопке за ним лежит .dropdown-menu,
   из-за чего каретка перестаёт быть :last-child и теряла бы правый радиус */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Активная/наведённая кнопка — граница поверх соседних */
.btn-group > .btn:hover,
.btn-group > .btn:focus-visible,
.btn-group > .btn.active {
    z-index: 1;
}

/* ============================================================
   Сегментированный переключатель режимов (.segmented)
   Серый трек, активный сегмент — белая «таблетка» с тенью.
   ============================================================ */
.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--fill);
    border-radius: var(--radius);
}
.segmented-item {
    padding: 7px 15px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s ease;
}
.segmented-item.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}




/* File: admin/css/components/_tabs.css */
/* ============================================================
   Компонент: вкладки — подчёркнутые (.nav-tabs) и сегментированные
   (.segmented — из _button-group). Переключение — Bootstrap
   data-bs-toggle="tab" + .tab-content / .tab-pane.
   ============================================================ */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
    appearance: none;
    -webkit-appearance: none;
    padding: 11px 2px;
    margin-right: 26px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease;
}
.nav-tabs .nav-link:hover { color: var(--text-tertiary); }
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

/* Панели */
.tab-content { margin-top: 16px; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.tab-text {
    margin: 0;
    max-width: 620px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}




/* File: admin/css/components/_steps.css */
/* ============================================================
   Компонент: шаги (.steps горизонтальный / .steps-v вертикальный).
   Состояния шага: .is-done (готов), .is-current (текущий), .is-pending.
   ============================================================ */

/* Кружок-номер (общий) */
.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--fill);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}
.step-num svg { width: 15px; height: 15px; }
.step-num.is-done    { background: var(--primary); border: none; color: #fff; }
.step-num.is-current { background: var(--surface); border: 2px solid var(--primary); color: var(--primary); }
.step-num.is-success { background: var(--success); border: none; color: #fff; }

/* Спиннер внутри кружка (шаг «в процессе») */
.step-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--fill);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: step-spin .7s linear infinite;
}
@keyframes step-spin { to { transform: rotate(360deg); } }

/* ---------- Горизонтальный ---------- */
.steps {
    display: flex;
    align-items: flex-start;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    flex: none;
    width: 96px;
}
.step .step-num.is-done   { /* галочка внутри */ }
.step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}
.step.is-pending .step-label {
    color: var(--text-muted);
    font-weight: 500;
}
.step-line {
    flex: 1;
    height: 2px;
    margin-top: 14px;
    background: #e4e4e7;
}
.step-line.is-done    { background: var(--primary); }
.step-line.is-success { background: var(--success); }

/* ---------- Вертикальный ---------- */
.steps-v {
    display: flex;
    flex-direction: column;
}
.step-v {
    display: flex;
    gap: 14px;
}
.step-v-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-v-line {
    width: 2px;
    flex: 1;
    margin: 4px 0;
    background: #e4e4e7;
}
.step-v-line.is-done    { background: var(--primary); }
.step-v-line.is-success { background: var(--success); }
.step-v-body {
    flex: 1;
    padding-bottom: 22px;
}
.step-v:last-child .step-v-body { padding-bottom: 0; }
.step-v-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
.step-v.is-pending .step-v-title { color: var(--text-muted); }
.step-v-text {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}
/* Мета: дата · деталь */
.step-v-meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.step-v-meta b { font-weight: 600; color: var(--text-secondary); }
.step-v-meta .step-sep {
    margin: 0 6px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
    color: #b4b4bb;
}




/* File: admin/css/components/_timeline.css */
/* ============================================================
   Компонент: таймлайн (.timeline) — лента событий с точками.
   Состояния точки: .is-done (зелёная+галка), .is-current (accent+кольцо),
   pending (по умолчанию — контур). Линия-коннектор — ::before.
   ============================================================ */
.timeline {
    display: flex;
    flex-direction: column;
}
.timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
}
.timeline-item:last-child { padding-bottom: 0; }
/* Вертикальная линия к следующему событию */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: #e4e4e7;
}
.timeline-item:last-child::before { display: none; }

/* Точка */
.timeline-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid #e4e4e7;
    color: #fff;
}
.timeline-dot svg { width: 11px; height: 11px; }
.timeline-dot.is-done {
    border: none;
    background: var(--success);
}
.timeline-dot.is-current {
    border: none;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(55, 97, 233, .15);
}
.timeline-dot.is-current::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* Тело события */
.timeline-body { flex: 1; }
.timeline-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
.timeline-text {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.timeline-time {
    margin-top: 4px;
    font-family: var(--font);
    font-size: 11.5px;
    color: #a1a1aa;
}
/* Будущее событие — приглушённое */
.timeline-item.is-pending .timeline-title { color: var(--text-muted); }
.timeline-item.is-pending .timeline-text { color: #c4c4cb; }




/* File: admin/css/components/_progress.css */
/* ============================================================
   Компонент: прогресс — линейный (.progress/.progress-bar),
   круговой (.progress-circle), сегментированный, неопределённый.
   Значения ширины/процента — data-bound через inline width / --pc-value.
   ============================================================ */

/* ---------- Линейный ---------- */
.progress {
    position: relative;
    height: 8px;
    background: #eef0f2;
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-thin { height: 4px; }
.progress-lg   { height: 12px; }

.progress-bar {
    position: relative;
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-pill);
    transition: width .3s ease;
    /* появление: растём от 0 до заданной ширины при загрузке */
    animation: progress-fill .9s ease-out;
}
@keyframes progress-fill { from { width: 0; } }
.progress-bar-success { background: var(--success); }
.progress-bar-warning { background: var(--warning); }

/* Полосатый (в процессе) */
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%);
    background-size: 16px 16px;
}
/* Анимированные полоски (движение паттерна) + появление */
.progress-bar-animated {
    animation: progress-fill .9s ease-out, progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
    from { background-position: 16px 0; }
    to   { background-position: 0 0; }
}

/* Буфер (полупрозрачная подложка под баром) */
.progress-buffer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #dbe4f7;
    border-radius: var(--radius-pill);
}

/* Неопределённый (бегущий сегмент) */
.progress-indeterminate::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 40%;
    border-radius: var(--radius-pill);
    background: var(--primary);
    animation: progress-run 1.3s ease-in-out infinite;
}
.progress-indeterminate.progress-bar-success::after { background: var(--success); }
@keyframes progress-run {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Заголовок над баром */
.progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 7px;
}
.progress-head-label { color: var(--text-secondary); font-weight: 500; }
.progress-head-value { font-family: var(--font); color: var(--text-muted); }
.progress-head-value.is-done { color: var(--success-ink); }

/* ---------- Стек (несколько сегментов) ---------- */
.progress-stacked {
    display: flex;
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: #eef0f2;
}
.progress-stacked > span { height: 100%; background: var(--seg, var(--primary)); }
.progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 9px;
}
.progress-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.progress-legend-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--seg, var(--primary));
}

/* ---------- Сегментированный (точки-полоски) ---------- */
.progress-segments {
    display: flex;
    gap: 5px;
}
.progress-segment {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: #eef0f2;
}
.progress-segment.is-filled { background: var(--primary); }

/* ---------- Инлайн со счётом (подпись · бар · значение) ---------- */
.progress-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}
.progress-inline-label {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.progress-inline .progress {
    flex: 1;
    height: 5px;
}
.progress-inline-value {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
}
.progress-inline-value.is-success { color: var(--success); }

/* ---------- Круговой (conic-gradient) ---------- */
.progress-circle {
    --pc-size: 74px;
    --pc-ring: 9px;
    --pc-value: 0;
    --pc-color: var(--primary);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pc-size);
    height: var(--pc-size);
    flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--pc-color) calc(var(--pc-value) * 1%), #eef0f2 0);
}
.progress-circle-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--pc-size) - var(--pc-ring) * 2);
    height: calc(var(--pc-size) - var(--pc-ring) * 2);
    border-radius: 50%;
    background: var(--surface);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.progress-circle-sm { --pc-size: 46px; --pc-ring: 6px; }
.progress-circle-sm .progress-circle-inner { font-size: 11px; }
.progress-circle-success { --pc-color: var(--success); }
.progress-circle-success .progress-circle-inner svg { width: 16px; height: 16px; color: var(--success); }

/* ---------- Круговой спиннер (неопределённый) ---------- */
.progress-spinner {
    width: 20px;
    height: 20px;
    flex: none;
    border: 2.5px solid #e4e4e7;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: progress-spin .7s linear infinite;
}
@keyframes progress-spin { to { transform: rotate(360deg); } }




/* File: admin/css/components/_loader.css */
/* ============================================================
   Компонент: лоадеры — спиннер (.spinner) и пульсирующие точки (.loader-dots).
   ============================================================ */
.spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex: none;
    border: 3px solid #e4e4e7;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-rotate .7s linear infinite;
}
.spinner-xs { width: 15px; height: 15px; border-width: 2px; }
.spinner-sm { width: 20px; height: 20px; border-width: 2.5px; }
.spinner-lg { width: 44px; height: 44px; border-width: 4px; }
.spinner-success { border-top-color: var(--success); }
/* На цветном фоне (внутри .btn-primary и т.п.) */
.spinner-light { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* Пульсирующие точки */
.loader-dots {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.loader-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    animation: loader-dot 1.1s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .18s; }
.loader-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes loader-dot {
    0%, 100% { opacity: .3; transform: scale(.7); }
    40%      { opacity: 1; transform: scale(1); }
}

/* Оверлей загрузки на блок */
.loader-host { position: relative; }
.loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(1.5px);
    z-index: 2;
}
.loader-overlay-text {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Загрузка ИИ‑генерации (кольцо + искра) */
.loader-ai {
    display: flex;
    align-items: center;
    gap: 12px;
}
.loader-ai-spin {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
}
.loader-ai-spin::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2.5px solid transparent;
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    border-radius: 50%;
    animation: spinner-rotate .7s linear infinite;
}
.loader-ai-spin svg {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 14px;
    height: 14px;
    color: var(--primary);
}
.loader-ai-text {
    font-size: 13.5px;
    font-weight: 600;
}

/* ---------- Другие варианты ---------- */
/* Столбики (эквалайзер) */
.loader-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
}
.loader-bars span {
    width: 5px;
    height: 8px;
    background: var(--primary);
    border-radius: 3px;
    animation: loader-bars 1s ease-in-out infinite;
}
.loader-bars span:nth-child(2) { animation-delay: .12s; }
.loader-bars span:nth-child(3) { animation-delay: .24s; }
.loader-bars span:nth-child(4) { animation-delay: .36s; }
@keyframes loader-bars {
    0%, 100% { height: 8px; }
    50%      { height: 28px; }
}

/* Пульс */
.loader-pulse {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    animation: loader-pulse 1.1s ease-in-out infinite;
}
@keyframes loader-pulse {
    0%, 100% { transform: scale(.55); opacity: .5; }
    50%      { transform: scale(1); opacity: 1; }
}

/* Спиннер с процентом */
.loader-percent {
    position: relative;
    width: 40px;
    height: 40px;
    flex: none;
}
.loader-percent::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid #eef0f2;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-rotate .7s linear infinite;
}
.loader-percent-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Печатает… (пилюля с точками) */
.loader-typing {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    background: var(--fill-muted);
    border-radius: var(--radius-pill);
}
.loader-typing .loader-dots { gap: 4px; }
.loader-typing .loader-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
}




/* File: admin/css/components/_skeleton.css */
/* ============================================================
   Компонент: скелетон — мерцающие плейсхолдеры контента при загрузке.
   Ширина плейсхолдера — data-bound inline (доля/размер контента),
   высота и форма — классами-модификаторами.
   ============================================================ */
.skeleton {
    display: block;
    background-color: var(--fill);
    background-image: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .65) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    from { background-position: -150% 0; }
    to   { background-position: 250% 0; }
}

.skeleton-text   { height: 13px; }
.skeleton-title  { height: 18px; }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.skeleton-box    { width: 34px; height: 34px; border-radius: var(--radius); flex: none; }
.skeleton-thumb  { height: 150px; border-radius: var(--radius-lg); }
.skeleton-media  { width: 64px; height: 64px; border-radius: var(--radius); flex: none; }
.skeleton-pill   { height: 22px; border-radius: var(--radius-pill); }
.skeleton-grow   { flex: 1; }




/* File: admin/css/components/_jobrunner.css */
/* ============================================================
   Компонент: раннер задач (.jobrunner) — запуск фоновой операции
   (импорт, генерация ресайзов, очистка кеша) с прогрессом и журналом.
   Состояния: idle → running → done. Всю динамику строит components/jobrunner.js.
   ============================================================ */
.jobrunner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}
/* На всю ширину контейнера (напр. в колонке редактирования) */
.jobrunner-full { max-width: none; }
.jobrunner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ---------- Шапка ---------- */
.jobrunner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.jobrunner-title { font-size: 14px; font-weight: 600; }
.jobrunner-subtitle { margin-top: 1px; font-size: 12px; color: var(--text-muted); }
.jobrunner-actions { display: flex; flex: none; gap: 9px; }

/* ---------- Idle (готово к запуску) ---------- */
.jobrunner-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}
.jobrunner-idle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}
.jobrunner-idle-title { font-size: 14px; font-weight: 600; color: var(--text-tertiary); }
.jobrunner-idle-text {
    margin-top: 5px;
    max-width: 300px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- Active (прогресс) ---------- */
.jobrunner-active { padding: 20px; }
.jobrunner-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12.5px;
}
.jobrunner-status { font-weight: 600; }
.jobrunner-status.is-running { color: var(--primary); }
.jobrunner-status.is-done { color: var(--success-ink); }
.jobrunner-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
}
.jobrunner-metrics b {
    font-family: var(--font);
    font-weight: 700;
    color: var(--text);
}
.jobrunner-metrics .is-sep { color: #c4c4cb; }
.jobrunner-metrics b.is-err { color: var(--danger); }
.jobrunner-pct {
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    color: var(--success);
}

/* Полоса прогресса раннера: без «наливания» с нуля — только плавный transition ширины
   (раннер меняет width на том же элементе на каждом тике). */
.jobrunner-bar { animation: none; }

/* Сегменты прогресса */
.jobrunner-segments { display: flex; gap: 3px; }
.jobrunner-segments span {
    flex: 1;
    height: 8px;
    border-radius: 2px;
    background: #eef0f2;
    transition: background .25s ease;
}
.jobrunner-segments span.is-filled { background: var(--success); }

/* ---------- Баннер завершения ---------- */
.jobrunner-done {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid rgba(16, 122, 77, .3);
    border-radius: var(--radius-lg);
    background: rgba(16, 122, 77, .05);
}
.jobrunner-done-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
}
.jobrunner-done-title { font-size: 13.5px; font-weight: 700; color: var(--success-ink); }
.jobrunner-done-text { margin-top: 1px; font-size: 12.5px; color: #3f7a5c; }

/* ---------- Журнал ---------- */
.jobrunner-log {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.jobrunner-log-head {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    font-weight: 600;
}
.jobrunner-log-note { font-weight: 500; color: var(--text-muted); }
.jobrunner-log-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.jobrunner-log-row:last-child { border-bottom: none; }
.jobrunner-log-time {
    width: 58px;
    flex: none;
    font-family: var(--font);
    font-size: 11.5px;
    color: var(--text-muted);
}
.jobrunner-log-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--success);
}
.jobrunner-log-dot.is-error { background: var(--danger); }
.jobrunner-log-dot.is-done { background: var(--success-ink); }
.jobrunner-log-dot.is-skip { background: var(--text-muted); }
.jobrunner-log-msg {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jobrunner-log-badge {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
}
.jobrunner-log-badge.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.jobrunner-log-badge.is-done { color: var(--success-ink); background: rgba(16, 122, 77, .12); }
.jobrunner-log-badge.is-skip { color: var(--text-muted); background: var(--fill-muted); }

/* Заметка (ошибка запуска: не выбран тип, не заданы размеры и т.п.) */
.jobrunner-note {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
}
.jobrunner-note.is-error {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}
.jobrunner-log-empty {
    padding: 18px;
    text-align: center;
    font-size: 12.5px;
    color: #c4c4cb;
}




/* File: admin/css/components/_toast.css */
/* ============================================================
   Компонент: тосты (всплывающие уведомления). Спавнятся из JS — AppCore.toast().
   Выезжают из правого верхнего угла, авто-скрываются.
   ============================================================ */
.toast-container {
    position: fixed;
    top: 20px;
    right: 0;
    z-index: 140;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 400px;                 /* > ширины тоста: есть запас под тень слева и отступ справа */
    max-width: 100vw;
    padding-right: 24px;          /* отступ тоста от правого края экрана */
    overflow-x: clip;            /* прячем тост, пока он за правым краем — виден эффект «выезда» */
    pointer-events: none;   /* клики проходят сквозь контейнер, ловят сами тосты */
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 320px;
    max-width: 100%;
    margin-bottom: 10px;    /* отступ, а не gap — чтобы схлопывался при выходе */
    padding: 13px 15px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    pointer-events: auto;
    animation: toast-in .45s cubic-bezier(.16, 1, .3, 1);
    /* плавный уход: сначала уезжает вправо/гаснет, затем (с задержкой) схлопывается высота — соседи не прыгают */
    transition: opacity .34s ease, transform .38s cubic-bezier(.4, 0, 1, 1),
                height .34s ease .1s, margin-bottom .34s ease .1s, padding .34s ease .1s;
}
.toast.is-leaving {
    opacity: 0;
    transform: translateX(120%);   /* уезжает полностью за правый край (обрезается контейнером) */
    height: 0 !important;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* Въезд из-за правого края: стартует полностью справа за пределами контейнера */
@keyframes toast-in { from { opacity: 0; transform: translateX(120%); } }

.toast-icon {
    display: flex;
    flex: none;
    margin-top: 1px;
    color: var(--text-muted);
}
.toast-success .toast-icon { color: var(--success-ink); }
.toast-error   .toast-icon { color: var(--danger); }
.toast-info    .toast-icon { color: var(--primary); }
.toast-warning .toast-icon { color: var(--warning); }

.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 600; color: var(--text); }
.toast-text { margin-top: 1px; font-size: 12.5px; line-height: 1.2; color: var(--text-muted); }

.toast-close {
    display: flex;
    flex: none;
    margin-top: 1px;
    padding: 0;
    border: none;
    background: none;
    color: #c4c4cb;
    cursor: pointer;
    transition: color .12s ease;
}
.toast-close:hover { color: var(--text-muted); }




/* File: admin/css/components/_bundle.css */
/* ============================================================
   components/_bundle.css — состав комплекта (страница редактирования).
   Поиск товара с выпадающими результатами + блок итогов.
   ============================================================ */

/* Поиск товара над таблицей состава */
.bundle-search {
    position: relative;
    padding: 12px 16px;
}
/* Поле поиска — на всю ширину панели (базовый .page-list-search капнут на 260px для тулбара) */
.bundle-search .page-list-search { max-width: none; }

/* Выпадающие результаты поиска */
.bundle-search-results {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% - 6px);
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.bundle-search-results.is-hidden { display: none; }

.bundle-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.bundle-search-result:hover { background: var(--primary-soft); }
.bundle-search-result.is-loading { cursor: default; }
.bundle-search-result.is-loading:hover { background: transparent; }
.bundle-search-result .avatar { flex: none; }
.bundle-search-result .skeleton-box { border-radius: 50%; }
.bundle-search-result-name {
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bundle-search-result-price { margin-left: auto; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.bundle-search-empty { padding: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Пустой состав */
.js-bundle-empty.is-hidden,
.js-order-empty.is-hidden { display: none; }

/* Итоги комплекта */
.bundle-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    padding: 14px 16px;
    border-top: 1px solid var(--border-soft);
}
.bundle-totals-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 240px;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
}
.bundle-totals-row.is-hidden { display: none; }
.bundle-totals-row b { color: var(--text); font-weight: 600; }
.bundle-totals-total { font-size: 15px; }
.bundle-totals-total span { color: var(--text); font-weight: 600; }
.bundle-totals-total b { font-size: 16px; }




/* File: admin/css/components/_save-bar.css */
/* ============================================================
   components/_save-bar.css — панель сохранения, прикреплённая к низу экрана.
   На всю ширину контента (справа от сайдбара). Светлая, с верхней границей.
   ============================================================ */
.save-bar {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .05);
}
.save-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 32px;
}
.save-bar-actions { display: flex; align-items: center; gap: 10px; }
/* Подсказка о несохранённых изменениях — справа от кнопок, на светлой панели тёмный muted-цвет */
.save-bar .page-actions-hint { color: var(--text-muted); }

/* Контенту редактирования — запас снизу, чтобы не прятался под панелью */
.page-edit { padding-bottom: 28px; }

/* В настройках (второе меню) панель прижата к низу и на всю ширину, но левый
   край начинается ровно от правого края бокового меню: боковой паддинг
   области контента (32px) + ширина трека subnav (232px). */
.subnav-layout .save-bar { left: calc(var(--sidebar-width) + 32px + 232px); }




/* File: admin/css/components/_repeater.css */
/* ============================================================
   components/_repeater.css — повторяемые ряды полей (repeater.js).
   ============================================================ */
.js-repeater-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.repeater-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.repeater-row > .form-control { flex: 1; min-width: 0; }
.repeater-row > .js-repeater-remove { flex: none; }
.js-repeater-add { margin-top: 12px; }




/* File: admin/css/components/_menu-builder.css */
/* ============================================================
   _menu-builder.css — инлайн-конструктор пунктов меню (menus/menu.tpl).
   Вложенное дерево с перетаскиванием (SortableJS), строки-пункты.
   ============================================================ */

/* Шапка карточки: заголовок слева, «Добавить» справа */
.mi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.mi-head .card-title { margin-bottom: 0; }
/* перебиваем глобальный .card-title + .card-subtitle{margin-top:-14px} из _card.css */
.mi-head .card-title + .card-subtitle { margin-top: 2px; margin-bottom: 0; }
.mi-head .js-mi-add { flex: none; white-space: nowrap; }

/* Дерево */
.mi-tree,
.mi-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Вложенные уровни — отступ + направляющая слева */
.mi-children {
    margin-left: 26px;
    padding-left: 12px;
    border-left: 1px dashed var(--border-soft);
}
/* Пустой уровень остаётся зоной для drop */
.mi-item > .mi-children:empty {
    min-height: 4px;
}
/* Корневой список пуст → небольшая высота для первого drop */
.mi-tree:empty { min-height: 8px; }

/* Во время перетаскивания раскрываем пустые уровни — чтобы можно было вложить пункт */
.mi-dragging .mi-item > .mi-children:empty {
    min-height: 30px;
    margin-top: 6px;
    border-style: solid;
    border-color: var(--primary-soft);
    background: var(--primary-soft);
    border-radius: var(--radius);
    opacity: .5;
}

.mi-item { margin-top: 8px; }
.mi-tree > .mi-item:first-child { margin-top: 0; }

/* Строка пункта */
.mi-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.mi-item.is-off > .mi-row { opacity: .55; }

.mi-handle {
    flex: none;
    display: inline-flex;
    color: var(--text-muted);
    cursor: grab;
}
.mi-handle:active { cursor: grabbing; }

.mi-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.mi-row .mi-type { flex: none; }

.mi-newtab {
    flex: none;
    color: var(--text-muted);
}

.mi-actions {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

/* Состояния перетаскивания (SortableJS) */
.mi-item.sortable-ghost > .mi-row {
    border-style: dashed;
    border-color: var(--primary-soft);
    background: var(--primary-soft);
    opacity: .6;
}
.mi-item.sortable-chosen > .mi-row {
    border-color: var(--primary-soft);
}
.mi-item.sortable-drag > .mi-row {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* Пусто */
.mi-empty { margin-top: 4px; }
.mi-empty.is-hidden { display: none; }




/* File: admin/css/components/_branding.css */
/* ============================================================
   _branding.css — страница «Брендинг»: загрузчики логотипов и фавикона.
   ============================================================ */
.brand-upload {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Превью: шахматка под прозрачные логотипы */
.brand-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    padding: 16px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eef0f4 25%, transparent 25%),
        linear-gradient(-45deg, #eef0f4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef0f4 75%),
        linear-gradient(-45deg, transparent 75%, #eef0f4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.brand-upload-preview img {
    max-width: 100%;
    max-height: 84px;
}

.brand-upload-bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
}

.brand-upload-hint {
    padding: 0 12px 10px;
    background: var(--surface);
    font-size: 11.5px;
    color: var(--text-muted);
}




/* File: admin/css/components/_legend.css */
/* ============================================================
   Компонент: индикатор-легенда (.legend) — подписи серий графиков/долей.
   Цвет серии задаётся классом .series-* (правило --dot / --seg внутри) —
   без инлайн-цвета. Палитра общая для легенды, стек-баров, мини-графиков.
   ============================================================ */
.series-blue   { --dot: #3761e9; --seg: #3761e9; }
.series-green  { --dot: #16a34a; --seg: #16a34a; }
.series-amber  { --dot: #f0b429; --seg: #f0b429; }
.series-orange { --dot: #c2410c; --seg: #c2410c; }
.series-purple { --dot: #a855f7; --seg: #a855f7; }
.series-red    { --dot: #dc2626; --seg: #dc2626; }
.series-grey   { --dot: #e4e4e7; --seg: #e4e4e7; }
.series-muted  { --dot: #a1a1aa; --seg: #a1a1aa; }

.legend {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.legend-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--dot, var(--primary));
}
.legend-dot-round { border-radius: 50%; }
.legend-dot-line {
    width: 16px;
    height: 3px;
    border-radius: 3px;
}
.legend-label { flex: 1; font-size: 13px; }
.legend-value {
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ---------- Инлайн ---------- */
.legend-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
}
.legend-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
}
.legend-inline-item .legend-dot { width: 9px; height: 9px; }
.legend-inline-item .legend-value { margin-left: 2px; }
.legend-inline-item.is-muted { color: var(--text-muted); }
/* Инлайн-легенда под стек-баром */
.legend-inline.legend-below { margin-top: 14px; }

/* ---------- С долями и трендом ---------- */
.legend-share-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.legend-share-label { flex: 1; font-size: 13px; font-weight: 500; }
.legend-share-pct {
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
}
.legend-share .progress { height: 6px; }
.legend-share-bar {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--dot, var(--primary));
}

/* Тренд ▲/▼ */
.legend-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
}
.legend-trend.is-up { color: var(--success-ink); }
.legend-trend.is-down { color: var(--danger); }

/* ---------- Плитками ---------- */
.legend-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.legend-tile {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.legend-tile-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-muted);
}
.legend-tile-val {
    margin-top: 5px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
}




/* File: admin/css/components/_rating.css */
/* ============================================================
   Компонент: рейтинг (звёзды).
   • Интерактив — .rating (js-rating): клик/наведение, значение в скрытый input.
   • Показ — .rating-display: дробное через клип-оверлей (inline --rate = процент).
   • .rating-badge — компактный бейдж со звездой.
   ============================================================ */
.rating {
    display: inline-flex;
    gap: 6px;
}
.rating-star {
    display: flex;
    cursor: pointer;
    color: #d4d4d8;                 /* пустая звезда */
}
.rating-star svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: color .1s ease;
}
.rating-star.is-active { color: #f59e0b; }
.rating-star.is-active svg { fill: currentColor; stroke: currentColor; }
.rating-sm { gap: 3px; }
.rating-sm .rating-star svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* ---------- Показ (дробное) ---------- */
.rating-display {
    position: relative;
    display: inline-flex;
    line-height: 0;
}
.rating-display-base,
.rating-display-fill {
    display: flex;
    gap: 2px;
}
.rating-display svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.rating-display-base { color: #e4e4e7; }
.rating-display-fill {
    position: absolute;
    top: 0;
    left: 0;
    color: #f59e0b;
    overflow: hidden;
    white-space: nowrap;
    width: calc(var(--rate, 0) * 1%);
}
.rating-score { font-family: var(--font); font-size: 14px; font-weight: 600; }

/* ---------- Компактный бейдж ---------- */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    background: #fef9ee;
    border: 1px solid #f7e3b5;
    border-radius: var(--radius);
}
.rating-badge svg { width: 15px; height: 15px; fill: #f59e0b; }
.rating-badge-val {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: #92680c;
}
.rating-badge-text { font-size: 12px; color: #92680c; }




/* File: admin/css/components/_slider.css */
/* ============================================================
   Компонент: слайдер (range). Одиночный и диапазон — виджет js-slider.
   Заливка через --lo/--hi (проценты), обновляет JS.
   ============================================================ */
.slider {
    position: relative;
    display: flex;
    align-items: center;
    height: 20px;
}
.slider-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: var(--radius-pill);
    background: #e4e4e7;
}
.slider-fill {
    position: absolute;
    left: calc(var(--lo, 0) * 1%);
    width: calc((var(--hi, 0) - var(--lo, 0)) * 1%);
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--primary);
}
.slider-input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}
.slider-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}
/* Диапазон — два инпута оверлеем, ловят только бегунки */
.slider-range .slider-input { pointer-events: none; }
.slider-range .slider-input::-webkit-slider-thumb { pointer-events: auto; }
.slider-range .slider-input::-moz-range-thumb { pointer-events: auto; }

/* Заголовок над слайдером (подпись + значение) */
.slider-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12.5px;
}
.slider-head-label { color: var(--text-muted); font-weight: 500; }
.slider-head-value { font-family: var(--font); font-weight: 600; }

/* Метки под слайдером */
.slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.slider-mark {
    font-family: var(--font);
    font-size: 12px;
    color: var(--text-muted);
}
.slider-mark.is-active { color: var(--text); font-weight: 600; }




/* File: admin/css/components/_statchart.css */
/* ============================================================
   Компонент: мини-графики / статистика (statchart).
   Разметка статичная (SVG + переиспользование .progress / .progress-circle).
   Цвета серий — классами .series-* (см. _legend.css).
   ============================================================ */

/* ---------- KPI-карточки со спарклайном ---------- */
.statchart-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.statchart-kpi {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.statchart-kpi-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.statchart-kpi-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.statchart-kpi-value {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
}
.statchart-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
}
.statchart-trend.is-up { color: var(--success-ink); }
.statchart-trend.is-down { color: var(--danger); }
.statchart-trend svg { width: 13px; height: 13px; }
.statchart-trend.is-down svg { transform: rotate(180deg); }
.statchart-spark { width: 72px; height: 34px; flex: none; }
.statchart-spark polyline {
    fill: none;
    stroke: var(--seg, var(--primary));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Сетки строк ---------- */
.statchart-grid { display: grid; gap: 16px; align-items: start; }
.statchart-grid-21 { grid-template-columns: 1.6fr 1fr; }
.statchart-grid-11 { grid-template-columns: 1fr 1fr; }

/* ---------- Линейный график (площадь) ---------- */
.statchart-line { display: block; width: 100%; height: 200px; }
.statchart-line .stat-grid-line { stroke: rgba(0, 0, 0, .05); }
.statchart-line .stat-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.statchart-line-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- Донат ---------- */
.statchart-donut-wrap { display: flex; align-items: center; gap: 20px; }
.statchart-donut { width: 128px; height: 128px; flex: none; }
.statchart-donut .donut-track { stroke: #f1f1f3; }
.statchart-donut .donut-seg { stroke: var(--seg); }
.statchart-donut-num { font-size: 6px; font-weight: 700; fill: var(--text); }
.statchart-donut-sub { font-size: 2.6px; fill: var(--text-muted); }

/* ---------- Каналы (бары) ---------- */
.statchart-channels {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.statchart-channel-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 500;
}

/* ---------- Радиальные показатели ---------- */
.statchart-gauges {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 12px;
}
.statchart-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.statchart-gauge-label { font-size: 12px; color: var(--text-muted); }
.gauge-blue   { --pc-color: #3761e9; }
.gauge-green  { --pc-color: #16a34a; }
.gauge-orange { --pc-color: #c2410c; }




/* File: admin/css/components/_dropdown.css */
/* ============================================================
   Компонент: выпадающее меню (.dropdown) — Bootstrap, наши токены
   Позиционирование/поведение — из урезанного Bootstrap + его JS.
   Перекраска через переменные --bs-dropdown-*.
   ============================================================ */
.dropdown-menu {
    --bs-dropdown-min-width: 184px;
    --bs-dropdown-padding-x: 5px;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-spacer: 6px;
    --bs-dropdown-font-size: 13px;
    --bs-dropdown-color: var(--text-tertiary);
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: rgba(0, 0, 0, .1);
    --bs-dropdown-border-radius: var(--radius);
    --bs-dropdown-box-shadow: var(--shadow-card);
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-item-border-radius: var(--radius-sm);
    --bs-dropdown-link-color: var(--text-tertiary);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--fill);
    --bs-dropdown-link-active-color: var(--primary);
    --bs-dropdown-link-active-bg: var(--primary-soft);
    --bs-dropdown-divider-bg: var(--border-soft);
    --bs-dropdown-divider-margin-y: 4px;
    --bs-dropdown-header-color: var(--text-muted);
    /* урезанный Bootstrap не применяет var(--bs-dropdown-box-shadow) — задаём напрямую */
    box-shadow: var(--shadow-card);
}

/* Пункт: иконка + подпись (работает и на <button>, и на <a>) */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.dropdown-item svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* Разделитель — на всю ширину меню (гасим боковой padding отрицательными margin) */
.dropdown-divider {
    margin-left: calc(var(--bs-dropdown-padding-x) * -1);
    margin-right: calc(var(--bs-dropdown-padding-x) * -1);
}

/* Каретку Bootstrap прячем — используем иконку chevron внутри кнопки */
.dropdown-toggle::after {
    display: none;
}




/* File: admin/css/components/_card.css */
/* ============================================================
   Компонент: карточка-секция (.card)
   ============================================================ */

/* База */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}
/* Модификатор: таблица внутри карточки — вровень с краями (как в card-panel у офферов).
   Заголовок/подзаголовок с обычным паддингом, ниже разделитель и таблица до краёв. */
.card-flush { overflow: hidden; }
.card-flush > .data-table-wrap {
    margin: 4px -22px -20px;
    border-top: 1px solid var(--border-soft);
}

/* Заголовок и подзаголовок секции */
.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}
/* Есть подзаголовок — он идёт сразу под заголовком (перебиваем отступ заголовка) */
.card-title + .card-subtitle { margin-top: -14px; }
.card-subtitle {
    margin-top: 2px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Шапка карточки: заголовок слева, действие/счётчик справа */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Вариант «панель»: бордер-шапка + тело (частый паттерн в разделах) */
.card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.card-panel-body {
    padding: 18px;
}
/* Тело-список: строки сами задают отступы (border-bottom во всю ширину) */
.card-panel-body-flush {
    padding: 8px 0;
}
/* Подзаголовок в шапке панели (заголовок + описание) */
.card-panel-subtitle {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}
/* Футер панели: действия справа */
.card-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-soft);
}

/* Подзаголовок внутри шапки карточки не отбивается снизу */
.card-head .card-subtitle {
    margin-bottom: 0;
}

/* Лист из склеенных карточек: один белый блок, где вложенные .card
   «расплющиваются» в секции, разделённые тонкими линиями (без рамок/тени/фона). */
.card-sheet {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-sheet > .card {
    margin: 0;
    padding: 22px 26px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.card-sheet > .card + .card {
    border-top: 1px solid var(--border-soft);
}




/* File: admin/css/components/_divider.css */
/* ============================================================
   Компонент: разделители — hr (горизонтальный), .divider-text
   (с текстом по центру), .vr (вертикальный, имя Bootstrap).
   ============================================================ */

/* Горизонтальный — hr или .divider */
hr,
.divider {
    height: 1px;
    margin: 16px 0;
    border: 0;
    background: rgba(0, 0, 0, .09);
    opacity: 1;
}

/* С текстом по центру */
.divider-text {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.divider-text::before,
.divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, .09);
}

/* Вертикальный (в рядах, между инлайн-элементами) */
.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background: rgba(0, 0, 0, .12);
}




/* File: admin/css/components/_alert.css */
/* ============================================================
   Компонент: алерты (.alert) — имена Bootstrap, тона на наших токенах.
   Закрытие — нативное data-bs-dismiss="alert" (Bootstrap JS).
   ============================================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-size: 12.5px;
}
.alert > svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
}
.alert-body {
    flex: 1;
    min-width: 0;
}
.alert-title {
    font-size: 13px;
    font-weight: 600;
}
.alert-text {
    margin-top: 1px;
    color: var(--text-secondary);
    line-height: 1.45;
}
/* Без заголовка текст — основной контент, делаем темнее */
.alert-text:only-child {
    margin-top: 0;
    color: var(--text-tertiary);
}
/* Однострочный алерт (без заголовка) — иконка и текст по центру */
.alert:has(.alert-text:only-child) {
    align-items: center;
}
.alert:has(.alert-text:only-child) > svg {
    margin-top: 0;
}

/* ---------- Тоны ---------- */
.alert-info    { background: rgba(55, 97, 233, .07); border-color: rgba(55, 97, 233, .2); }
.alert-success { background: rgba(16, 122, 77, .08); border-color: rgba(16, 122, 77, .22); }
.alert-warning { background: rgba(161, 92, 0, .09);  border-color: rgba(161, 92, 0, .22); }
.alert-danger  { background: rgba(180, 35, 24, .07); border-color: rgba(180, 35, 24, .2); }

.alert-info    > svg, .alert-info .alert-title    { color: var(--primary); }
.alert-success > svg, .alert-success .alert-title { color: var(--success-ink); }
.alert-warning > svg, .alert-warning .alert-title { color: #a15c00; }
.alert-danger  > svg, .alert-danger .alert-title  { color: var(--danger); }




/* File: admin/css/components/_accordion.css */
/* ============================================================
   Компонент: аккордеон (.accordion) — имена Bootstrap.
   Сворачивание — data-bs-toggle="collapse" (.collapse из Bootstrap).
   ============================================================ */
.accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
}
.accordion-item + .accordion-item {
    border-top: 1px solid var(--border-soft);
}
.accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.accordion-button:not(.collapsed) {
    background: var(--fill-soft);
    border-bottom: 1px solid var(--border-soft);
}
.accordion-button svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--text-muted);
    transition: transform .18s ease;
}
.accordion-button:not(.collapsed) svg {
    transform: rotate(180deg);
}
.accordion-body {
    padding: 14px 18px 16px;
    max-width: 640px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}




/* File: admin/css/components/_modal.css */
/* ============================================================
   Компонент: модальное окно — Bootstrap, наши токены.
   Открытие/закрытие — нативные data-bs-toggle/-dismiss="modal".
   ============================================================ */
.modal {
    --bs-modal-width: 480px;
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--text);
    --bs-modal-border-width: 0;
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: var(--radius-lg);
    --bs-modal-box-shadow: var(--shadow-pop);
    --bs-modal-padding: 20px;
    --bs-modal-header-padding: 16px 20px;
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);
    --bs-modal-footer-gap: 10px;
    --bs-modal-title-line-height: 1.3;
}
/* Размеры (в прототипе sm 340 / md 480 / lg 720) */
.modal-sm { --bs-modal-width: 340px; }
.modal-lg { --bs-modal-width: 720px; }

/* Фиксированная ширина диалога (Bootstrap ставит width:auto — окно сжималось
   по контенту, крест липнул к заголовку). Кап по вьюпорту на узких экранах. */
.modal-dialog {
    width: var(--bs-modal-width);
    max-width: calc(100% - 24px);
}

/* урезанный Bootstrap может не применять var(--bs-modal-box-shadow) — задаём напрямую */
.modal-content {
    box-shadow: var(--shadow-pop);
}

/* Затемнение фона */
.modal-backdrop {
    --bs-backdrop-bg: #0f0f12;
    --bs-backdrop-opacity: .42;
    backdrop-filter: blur(2px);
}

/* Шапка / заголовок — в урезанном Bootstrap нет space-between */
.modal-header {
    align-items: center;
    justify-content: space-between;
}
.modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
/* Тело */
.modal-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
}
/* Футер — действия справа */
.modal-footer { justify-content: flex-end; }

/* Кнопка закрытия */
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -4px -6px -4px 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.modal-close:hover { background: var(--fill); color: var(--text); }
.modal-close svg { width: 17px; height: 17px; }

/* ---------- Компактное подтверждение (без шапки) ---------- */
.modal-confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.modal-confirm-text {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted-2);
    line-height: 1.6;
}
.modal-confirm .modal-footer {
    border-top: 0;
    padding-top: 4px;
}

/* ---------- Алерт-подтверждение (цветная шапка + иконка) ---------- */
.modal-alert { overflow: hidden; }
.modal-alert-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--primary);
    color: #fff;
}
.modal-alert-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
}
.modal-alert-icon svg { width: 24px; height: 24px; }
.modal-alert-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.modal-alert-text {
    margin-top: 4px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .82);
}
.modal-alert .modal-footer {
    justify-content: center;
    border-top: 0;
}
/* Опасный вариант (удаление и т.п.) */
.modal-alert-danger .modal-alert-head { background: var(--danger); }

/* Массовое действие «Переместить на страницу»: поле выбора страницы назначения.
   Скрыто по умолчанию классом .d-none, показывается JS при выборе действия. */
.mass-move-field { margin-top: 14px; }




/* File: admin/css/components/_tooltip.css */
/* ============================================================
   Компонент: тултипы — чистый CSS, без JS.
   Разметка: <button data-tooltip="Текст" data-tooltip-pos="top|bottom|left|right">
   По умолчанию — сверху. Показ по :hover / :focus-visible.
   ============================================================ */
[data-tooltip] { position: relative; }

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Бабл */
[data-tooltip]::after {
    content: attr(data-tooltip);
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--text);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
/* Стрелка (квадрат под 45°) */
[data-tooltip]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--text);
    transform: rotate(45deg);
}

/* ---------- Позиции ---------- */
/* Сверху (по умолчанию) */
[data-tooltip]::after  { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
[data-tooltip]::before { bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) rotate(45deg); }

/* Снизу */
[data-tooltip-pos="bottom"]::after  { top: calc(100% + 8px); bottom: auto; }
[data-tooltip-pos="bottom"]::before { top: calc(100% + 4px); bottom: auto; }

/* Слева */
[data-tooltip-pos="left"]::after  { right: calc(100% + 8px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
[data-tooltip-pos="left"]::before { right: calc(100% + 4px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }

/* Справа */
[data-tooltip-pos="right"]::after  { left: calc(100% + 8px); top: 50%; bottom: auto; transform: translateY(-50%); }
[data-tooltip-pos="right"]::before { left: calc(100% + 4px); top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }




/* File: admin/css/components/_breadcrumb.css */
/* ============================================================
   Компонент: хлебные крошки (.breadcrumb) — имена Bootstrap.
   Разделитель — шеврон (по умолчанию) или слэш (.breadcrumb-slash),
   через ::before у непервого пункта.
   ============================================================ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted-2);
}
.breadcrumb-item svg {
    width: 15px;
    height: 15px;
    flex: none;
}
.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--text); }
/* Текущая страница */
.breadcrumb-item.active {
    color: var(--text);
    font-weight: 600;
}

/* Разделитель — шеврон */
.breadcrumb-item + .breadcrumb-item::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    background-color: #c4c4cb;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Разделитель — слэш */
.breadcrumb-slash .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    color: #d4d4d8;
    font-weight: 400;
}




/* File: admin/css/components/_pagination.css */
/* ============================================================
   Компонент: пагинация (.pagination) — имена Bootstrap.
   ============================================================ */
.pagination-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.page-link svg { width: 14px; height: 14px; }
.page-link:hover { background: var(--fill); color: var(--text); }

.page-item.active .page-link,
.page-item.active .page-link:hover {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.page-item.disabled .page-link {
    color: var(--text-muted);
    background: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

/* Многоточие */
.page-ellipsis {
    min-width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* Инфо о диапазоне */
.pagination-info {
    font-size: 12.5px;
    color: var(--text-muted);
}




/* File: admin/css/components/_avatar.css */
/* ============================================================
   Компонент: аватары (.avatar) — инициалы или изображение.
   Цвет — через --avatar-fg (data-bound), фон авто из него (color-mix).
   Размеры: .avatar-xs/-sm/(md по умолчанию)/-lg/-xl. Квадрат — .avatar-square.
   Группа с наложением — .avatar-group.
   ============================================================ */
.avatar {
    --avatar-fg: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--avatar-fg) 15%, transparent);
    color: var(--avatar-fg);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Размеры */
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 22px; }

/* Квадратные (радиус пропорционален размеру) */
.avatar-square { border-radius: 22%; }

/* Счётчик «+N» */
.avatar-more {
    background: var(--fill);
    color: var(--text-secondary);
}

/* Группа с наложением и белым кольцом */
.avatar-group {
    display: inline-flex;
    align-items: center;
}
.avatar-group > .avatar {
    margin-left: -12px;
    box-shadow: 0 0 0 2.5px var(--surface);
}
.avatar-group > .avatar:first-child { margin-left: 0; }




/* File: admin/css/components/_badge.css */
/* ============================================================
   Компонент: бейджи, метки, счётчики, индикаторы, чипы.
   Тон задаётся переменной, фон авто из неё (color-mix).
   ============================================================ */

/* ---------- Статус-бейдж (сплошная пилюля, как в прошлой админке) ---------- */
.badge {
    --badge-bg: var(--text-muted-2);        /* сплошной цветной фон */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    background: var(--badge-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
.badge svg { width: 12px; height: 12px; flex: none; }
/* прямоугольный вариант (для строк списков, таблиц) */
.badge-square { border-radius: var(--radius-sm); padding: 3px 9px; font-size: 11.5px; }
.badge-primary { --badge-bg: var(--primary); }
.badge-success { --badge-bg: var(--success); }
.badge-warning { --badge-bg: var(--warning); }
.badge-danger  { --badge-bg: var(--danger); }
.badge-muted   { --badge-bg: var(--text-muted-2); }

/* ---------- Метка-тег (контурная, капс) ---------- */
.tag {
    --tag-fg: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--tag-fg) 35%, transparent);
    border-radius: var(--radius-sm);
    color: var(--tag-fg);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.3;
}
.tag svg { width: 11px; height: 11px; flex: none; }
.tag-primary { --tag-fg: var(--primary); }
.tag-success { --tag-fg: var(--success-ink); }
.tag-warning { --tag-fg: #a15c00; }
.tag-danger  { --tag-fg: var(--danger); }
/* сплошной тёмный (Pro) */
.tag-solid {
    padding: 4px 9px;
    border: none;
    background: var(--text);
    color: #fff;
}

/* ---------- Счётчик (число) ---------- */
.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
}
.count-danger { background: var(--danger); }

/* ---------- Строка «индикатор + подпись» ---------- */
.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
}
/* Пульсирующая точка статуса */
.status-dot {
    --dot: var(--success);
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--dot);
    animation: status-pulse 1.5s ease-out infinite;
}
.status-dot-online  { --dot: var(--success); }
.status-dot-offline { --dot: #dc2626; }
.status-dot-away    { --dot: var(--warning); }
@keyframes status-pulse {
    0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- Тренд (▲/▼ процент) ---------- */
.trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 700;
}
.trend svg { width: 12px; height: 12px; flex: none; }
.trend-up   { color: var(--success-ink); background: color-mix(in srgb, var(--success) 12%, transparent); }
.trend-down { color: var(--danger);      background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ---------- Чип-фильтр (удаляемый) ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px 4px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}
.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fill);
    color: var(--text-muted-2);
    cursor: pointer;
}
.chip-remove:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}
.chip-remove svg { width: 9px; height: 9px; }

/* Badge list — inline row of badges (e.g. permissions, roles) */
.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}




/* File: admin/css/components/_list.css */
/* ============================================================
   Компонент: список (.list-group / .list-group-item) — имена Bootstrap.
   Строки с иконкой/статусом/номером/чекбоксом. Внутри карточки —
   рамку/скругление даёт контейнер (.card-panel), сам список без рамки.
   ============================================================ */
.list-group {
    display: flex;
    flex-direction: column;
}
.list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.list-group-item:last-child { border-bottom: 0; }
/* Кликабельная строка */
.list-group-item-action {
    cursor: pointer;
    transition: background .12s ease;
}
.list-group-item-action:hover { background: var(--fill-soft); }

/* Иконка-плитка */
.list-icon {
    --icon-fg: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--icon-fg) 12%, transparent);
    color: var(--icon-fg);
}
.list-icon svg { width: 17px; height: 17px; }
.list-icon-primary { --icon-fg: var(--primary); }
.list-icon-warning { --icon-fg: #b45309; }
.list-icon-muted   { --icon-fg: var(--text-secondary); }

/* Тело строки */
.list-body {
    flex: 1;
    min-width: 0;
}
.list-title {
    font-size: 13.5px;
    font-weight: 600;
}
.list-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

/* Шеврон справа */
.list-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: #c4c4cb;
}

/* Статус-точка (статичная) */
.list-dot {
    --dot: var(--success);
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--dot);
}
.list-dot-success { --dot: var(--success); }
.list-dot-muted   { --dot: #d4d4d8; }
.list-dot-warning { --dot: var(--warning); }

/* Номер (нумерованный список) */
.list-num {
    width: 22px;
    flex: none;
    text-align: center;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}
.list-num-muted { color: var(--text-muted); }

/* Значение справа (кол-во, цена) */
.list-value {
    flex: none;
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text-muted-2);
}




/* File: admin/css/components/_nav-cards.css */
/* ============================================================
   Компонент: карточки-переходы (nav-cards).
   Сетка разделов, где плитка целиком — ссылка: иконка (.list-icon из _list.css),
   название, описание и стрелка в углу.
   Колонки подстраиваются под ширину сами — новый раздел не требует правок сетки.
   ============================================================ */
.nav-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.nav-card {
    position: relative;
    display: block;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}
.nav-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}
/* Стрелка тянется к описанию, поэтому запас справа только у заголовка */
.nav-card > .list-icon { margin-bottom: 14px; }

.nav-card-title {
    margin-bottom: 4px;
    padding-right: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.nav-card-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.nav-card-arrow {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 14px;
    height: 14px;
    color: var(--icon-muted);
    transition: var(--transition);
}
.nav-card:hover .nav-card-arrow { color: var(--text-secondary); }

/* ---------- Группа карточек с подписью ---------- */
.nav-cards-group + .nav-cards-group { margin-top: 26px; }
.nav-cards-title {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

@media (max-width: 560px) {
    .nav-cards { grid-template-columns: 1fr; }
}




/* File: admin/css/components/_prose.css */
/* ============================================================
   Компонент: форматированный текст (.prose)
   Для документации, описаний, справки — весь rich-text внутри.
   ============================================================ */
.prose {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-tertiary);
}
.prose p {
    margin: 0 0 12px;
}
.prose > :last-child {
    margin-bottom: 0;
}

/* Вводный (крупный) абзац/фрагмент */
.prose-lead {
    font-size: 15px;
    color: var(--text);
}

/* Инлайн-акценты */
.prose strong, .prose b {
    font-weight: 600;
    color: var(--text);
}
.prose em {
    font-style: italic;
}
.prose a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid #3761e940;
}
.prose s, .prose del {
    color: var(--text-muted);
}
.prose mark {
    padding: 0 3px;
    border-radius: 3px;
    background: #3761e922;
    color: inherit;
}

/* Код и клавиши */
.prose code {
    font-family: var(--font);
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--fill-muted);
    border: 1px solid var(--border);
}
.prose kbd {
    font-family: inherit;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--text);
    color: #fff;
}

/* Цитата */
.prose blockquote {
    margin: 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--primary);
    color: var(--text-secondary);
    font-style: italic;
}

/* Списки */
.prose ul, .prose ol {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
}




/* File: admin/css/components/_subnav.css */
/* ============================================================
   Компонент: раздел с боковым подменю (второе меню)
   Слева — серый рейл во всю высоту (прижат к краям контента),
   справа — контент. Переиспользуется в любых разделах.
   Значения 1:1 из прототипа (app.js mkDsItem / dsSections).
   ============================================================ */

/* Раскладка «подменю + контент» */
.subnav-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 22px;
    align-items: start;
}
.subnav-layout-main {
    min-width: 0;
}

/* Рейл подменю — прижат к краям области контента (гасим её padding 26px 32px 60px).
   Во всю высоту экрана с собственным скроллом (список длиннее вьюпорта). */
.subnav {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -26px 0 -60px -32px;
    padding: 20px 12px 12px;
    background: #f0f0f2;
    border-right: 1px solid rgba(0, 0, 0, .08);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .18) transparent;
}
.subnav::-webkit-scrollbar { width: 7px; }
.subnav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .16);
    border-radius: 4px;
}
.subnav::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .28); }

/* Группа */
.subnav-group {
    margin-bottom: 14px;
}
.subnav-title {
    padding: 2px 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b4b4bb;
}

/* Пункт */
.subnav-link {
    display: block;
    padding: 7px 11px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.subnav-link.is-active {
    background: #3761e914;
    color: var(--primary);
    font-weight: 600;
}

/* Заголовок текущего подраздела в области контента */
.subnav-main-head { margin-bottom: 16px; }
.subnav-main-head .page-edit-title { margin-top: 2px; }

/* Алерты в области настроек (лежат в .subnav-layout-main, а не в .page) */
.subnav-layout-main > .alert { margin-bottom: 16px; }

/* В настройках белый лист тянется на всю высоту и вплотную к краям области
   контента (как в старой админке): гасим правый (32px), нижний (60px) паддинг
   .app-content и левый gap до меню (22px); без скруглений и боковых/нижней границ. */
.subnav-layout-main .card-sheet {
    margin: 0 -32px -60px -22px;
    min-height: calc(100vh - 84px);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}





/* File: admin/css/components/_empty.css */
/* ============================================================
   Компонент: пустое состояние / заглушка (.empty)
   Для разделов «в разработке», пустых списков, «ничего не найдено».
   ============================================================ */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 20px;
}

/* Полноэкранный вариант — раздел в разработке, без карточки */
.empty-page {
    padding: 90px 20px;
}
.empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: var(--fill);
    color: #c4c4cb;
}
.empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.empty-text {
    margin-top: 6px;
    max-width: 380px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Компактный вариант (для карточек в сетке) */
.empty-sm { padding: 44px 20px; }
.empty-sm .empty-title { font-size: 15px; }
.empty-sm .empty-text { max-width: 280px; font-size: 12.5px; }

/* Размеры иконки */
.empty-icon-sm {
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
    border-radius: var(--radius);
}
.empty-icon-xs {
    width: 44px;
    height: 44px;
    margin-bottom: 13px;
}

/* Круглая иконка */
.empty-icon-round { border-radius: 50%; }

/* Тона иконки */
.empty-icon-danger {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}
.empty-icon-accent {
    background: var(--primary-soft);
    color: var(--primary);
}

/* Кнопка призыва к действию */
.empty .btn { margin-top: 20px; }
.empty-sm .btn { margin-top: 16px; }

/* Пунктирная область-призыв (без карточки) */
.empty-dashed {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--fill-soft);
}




/* File: admin/css/components/_tables.css */
/* ============================================================
   Компонент: таблица списка (.data-table).
   Выбор строк, «выбрать все», панель массовых действий, сортировка колонок,
   компактный режим, перетаскивание строк (SortableJS) — виджет js-table.
   ============================================================ */
.data-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Тулбар над таблицей */
.data-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.data-table-title { font-size: 13px; font-weight: 600; }
.data-table-tools { display: flex; align-items: center; gap: 10px; }

/* Горизонтальный оверфлоу режем через clip (не создаёт скролл-контейнер по Y —
   иначе ломается sticky у thead относительно страницы). */
.data-table-wrap { overflow-x: clip; }

/* Сама таблица.
   table-layout: fixed — ширины колонок задаём классами .col-* на <th> (см. ниже),
   контент не влияет на раскладку → предсказуемо и одинаково во всех строках.
   Разным таблицам — свой набор классов ширины под их колонки. */
.data-table-el {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

/* Утилиты ширины колонок (ставятся на <th>) ---------------------------------
   Фиксированные (px) — для служебных/узких колонок (чекбокс, id, статус, действия). */
.col-w-28  { width: 28px; }
.col-w-32  { width: 32px; }
.col-w-40  { width: 40px; }
.col-w-44  { width: 44px; }
.col-w-56  { width: 56px; }
.col-w-64  { width: 64px; }
.col-w-80  { width: 80px; }
.col-w-96  { width: 96px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-160 { width: 160px; }
/* Растягивающаяся колонка — забирает ВСЁ свободное место (обычно название).
   Обязательно одна такая на таблицу: иначе в fixed-раскладке остаток размажется
   по всем колонкам и узкие (чекбокс/id) распухнут. */
.col-grow { width: auto; }
/* Долевые (%) — для содержательных колонок (бренд, цена, статус…). */
.col-p-10 { width: 10%; }
.col-p-12 { width: 12%; }
.col-p-15 { width: 15%; }
.col-p-20 { width: 20%; }
.col-p-25 { width: 25%; }
.col-p-30 { width: 30%; }
.col-p-40 { width: 40%; }
.col-p-50 { width: 50%; }
.data-table-el th {
    height: 48px;
    padding: 10px 14px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: #333338;
    white-space: nowrap;
    background: #f3f4f9;
    border-bottom: 1px solid #e6e9f2;
    /* Липкая шапка таблицы. top (высота топбара + тулбара списка) выставляется в table.js */
    position: sticky;
    z-index: 3;
}
.data-table-el th.is-right,
.data-table-el td.is-right { text-align: right; }
.data-table-el td {
    padding: 6px 10px;
    vertical-align: middle;
    color: #333338;
    border-bottom: 1px solid #e6e9f2;
    white-space: nowrap;
    overflow: hidden;                 /* fixed-раскладка: длинный контент не ломает колонки */
    text-overflow: ellipsis;
}
.data-table-el th { padding: 8px 10px; }
/* Растягивающаяся колонка (напр. «Товар») забирает свободное место — остальные встык */
.data-table-grow { width: 100%; }
/* Числовые ячейки (суммы) — табличные цифры для ровных колонок */
.data-table-num { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.data-table-el tbody tr:last-child td { border-bottom: none; }
.data-table-el tbody tr:hover { background: rgba(5, 35, 125, .05); }
.data-table-el tr.is-selected,
.data-table-el tr.is-selected:hover { background: var(--primary-soft); }
/* Выключенный товар */
.data-table-el tr.is-disabled td { opacity: .5; }
.data-table-el tr.is-disabled .data-table-check,
.data-table-el tr.is-disabled .data-table-actions { opacity: 1; }

/* Кнопка вида таблицы: обычный вид → иконка «свернуть», компактный (.is-active) → «развернуть» */
.js-table-compact .js-compact-off { display: none; }
.js-table-compact.is-active .js-compact-on { display: none; }
.js-table-compact.is-active .js-compact-off { display: inline-flex; }

/* Компактный режим (класс is-compact на .data-table/.page-list) — короче строки, как в старой админке */
.is-compact .data-table-el th,
.is-compact .data-table-el td { padding-top: 2px; padding-bottom: 2px; }
.is-compact .data-table-media .avatar { width: 22px; height: 22px; }
.is-compact .data-table-media { gap: 8px; }

/* Ячейка с превью + названием */
.data-table-media { display: flex; align-items: center; gap: 10px; min-width: 0; }
.data-table-media .avatar { width: 28px; height: 28px; }
.data-table-thumb {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--fill-muted);
}
.data-table-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #333338; }
/* Дерево категорий в списке: ступенчатый отступ по глубине + стрелка ↳ (как в селект-фильтре) */
.cat-tree-arrow { flex: none; color: var(--text-muted); }
.cat-tree-1 { padding-left: 22px; }
.cat-tree-2 { padding-left: 44px; }
.cat-tree-3 { padding-left: 66px; }
.cat-tree-4 { padding-left: 88px; }
.cat-tree-5 { padding-left: 110px; }
.cat-tree-6 { padding-left: 132px; }
/* Ссылка-ячейка (напр. URL) — обычный шрифт, обрезается многоточием */
.data-table-link { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.data-table-link:hover { color: var(--primary); text-decoration: none; }
.data-table-sub { font-size: 11.5px; }

/* Путь категории: мелкая строка предков + лист крупнее; поле не растягиваем, полный путь — в тултипе */
.cat-path { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 210px; }
.cat-path-parents { font-size: 11px; line-height: 1.25; color: var(--text-muted); }
.cat-path-leaf { min-width: 0; }
/* Приглушённая (серая) ячейка — для второстепенных данных (ID и т.п.) */
.data-table-el td.data-table-muted { color: #677788; }

/* Колонка выбора / ручка — малые отступы (ширина задаётся .col-w-* на th) */
.data-table-check { white-space: nowrap; }
.data-table-el td.data-table-check,
.data-table-el th.data-table-check { padding-left: 4px; padding-right: 4px; }
/* левый край таблицы — небольшой отступ у первой ячейки */
.data-table-el tr > td:first-child,
.data-table-el tr > th:first-child { padding-left: 12px; }
.data-table-check .form-check-input { margin: 0; vertical-align: middle; }
.data-table-handle {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--text-tertiary);
    cursor: grab;
}
.data-table-handle:active { cursor: grabbing; }

/* Сортируемый заголовок */
.data-table-sort { cursor: pointer; user-select: none; }
.data-table-sort a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.data-table-sort:hover { color: var(--text-secondary); }
.data-table-sort-ico {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: .35;
    transition: opacity .12s ease, transform .12s ease;
}
.data-table-sort.is-asc .data-table-sort-ico,
.data-table-sort.is-desc .data-table-sort-ico { opacity: 1; color: var(--primary); }
.data-table-sort.is-desc .data-table-sort-ico { transform: rotate(180deg); }

/* Перетаскивание строк */
.data-table-el tr.sortable-ghost { opacity: .4; }
.data-table-el tr.sortable-chosen { background: var(--surface); box-shadow: var(--shadow-card); }

/* Ячейка действий (ghost-иконки). ВАЖНО: не делать сам <td> display:flex —
   это выкидывает ячейку из табличной модели и колонка «съезжает». Выравниваем
   содержимое через text-align (кнопки — инлайновые). overflow:visible — чтобы
   не обрезался CSS-тултип (у остальных td overflow:hidden ради ellipsis). */
.data-table-el td.data-table-actions {
    text-align: right;
    white-space: nowrap;
    overflow: visible;
}
.data-table-actions .btn-icon + .btn-icon { margin-left: 2px; }
.data-table-actions .btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
}
.data-table-actions .btn-icon svg { width: 14px; height: 14px; }
.data-table-actions .btn-icon:hover { background: var(--fill); }
.data-table-actions .is-danger { color: var(--danger); }
.data-table-actions .is-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* Панель массовых действий — только показ/скрытие; раскладка в .page-list-bulk (layout) */
.data-table-bulk.is-hidden { display: none; }
.data-table-bulk-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.data-table-bulk-count { font-size: 13px; color: var(--text-tertiary); }
.data-table-bulk-count b { margin-left: 5px; color: var(--text-tertiary); font-weight: 700; }

/* Пустое состояние (как в прототипе): центрированный блок под таблицей —
   иконка в плашке + заголовок + подпись. НЕ строкой в <td colspan>, иначе
   контент уезжает и ломается верстка. */
.data-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 52px 20px;
}
.data-table-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
    border-radius: 9px;
    background: var(--fill-muted);
    color: #c4c4cb;
}
.data-table-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.data-table-empty-text {
    margin-top: 5px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Ячейка «Браузер» в таблице сессий: иконка + название */
.session-browser { display: inline-flex; align-items: center; gap: 8px; }
.session-browser-icon { width: 18px; height: 18px; flex: none; }




/* File: admin/css/components/_uploader.css */
/* ============================================================
   Компонент: загрузчик изображений (.uploader)
   Режимы: одиночный (single) и множественный (multiple) — components/uploader.js.
   ============================================================ */
.uploader { width: 100%; }
.uploader-input { display: none; }

/* ---------- Dropzone ---------- */
.uploader-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 180px;
    padding: 0 20px;
    text-align: center;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .13s ease, background .13s ease;
}
.uploader-drop:hover { border-color: var(--primary); }
.uploader-drop.is-over {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.uploader-drop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fill-muted);
    color: var(--text-secondary);
}
.uploader-drop-title { font-size: 13px; font-weight: 600; color: var(--text-tertiary); }
.uploader-drop-hint { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }

/* ---------- Одиночное превью ---------- */
.uploader-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.uploader-preview-img {
    display: block;
    width: 100%;
    height: 180px;
    background: var(--fill-muted) center / cover no-repeat;
}
.uploader-preview-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-soft);
}
.uploader-file-info:empty { display: none; }
.uploader-file-info { min-width: 0; }
.uploader-file-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uploader-file-size { margin-top: 1px; font-size: 11px; color: var(--text-muted); }
.uploader-preview-actions { display: flex; gap: 6px; }
.uploader-preview-actions .btn { flex: 1; padding-left: 8px; padding-right: 8px; }

/* ---------- Множественная сетка ---------- */
.uploader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.uploader-tile {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    transition: box-shadow .12s ease, opacity .12s ease;
}
/* Классы SortableJS при перетаскивании */
.uploader-tile.sortable-chosen { box-shadow: var(--shadow-card); }
.uploader-tile.sortable-ghost { opacity: .4; }
/* Действия плитки — кнопки как в офферах (btn-icon-plain) в подложке поверх фото */
.uploader-tile-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    gap: 0;
    padding: 1px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    opacity: 0;
    transition: opacity .12s ease;
}
/* Кнопки в плитке — 24px, компактнее общих btn-icon-plain */
.uploader-tile-actions .btn-icon-plain { width: 24px; height: 24px; padding: 0; }
.uploader-tile-actions .btn-icon-plain svg { width: 15px; height: 15px; }
/* Ручка перетаскивания — крупнее и цвет как у драга в таблицах */
.uploader-tile-actions .js-uploader-move { color: var(--text-tertiary); }
.uploader-tile-actions .js-uploader-move svg { width: 19px; height: 19px; }
.uploader-tile-actions .js-uploader-move { cursor: grab; }
.uploader-tile-actions .js-uploader-move:active { cursor: grabbing; }
.uploader-tile-img {
    display: block;
    width: 100%;
    height: 96px;
    background: var(--fill-muted) center / cover no-repeat;
}
.uploader-tile-name {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Действия показываем только при наведении на плитку */
.uploader-tile:hover .uploader-tile-actions { opacity: 1; }

/* Плитка добавления (dashed) */
.uploader-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 126px;
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.uploader-add:hover { border-color: rgba(55, 97, 233, .4); color: var(--text-secondary); }
.uploader-add.is-over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* Ошибка (размер/тип) */
.uploader-error {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--danger);
}

/* ---------- Форма-центричная галерея ---------- */
.uploader-field { width: 100%; }
.uploader-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Компактная зона загрузки (горизонтальная) */
.uploader-drop-row {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    height: auto;
    padding: 14px 16px;
    margin-bottom: 12px;
    text-align: left;
}
.uploader-drop-row .uploader-drop-icon { flex: none; }

/* Пустое состояние списка */
.uploader-empty {
    padding: 26px 20px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius-lg);
}

.uploader .is-hidden { display: none; }




/* File: admin/css/components/_feedback.css */
/* ============================================================
   Компонент: обратная связь (тосты, модалки, прелоадер)
   ============================================================ */




/* File: admin/css/components/_editor.css */
/* ============================================================
   Компонент: редактор контента (EditorJS)
   ============================================================ */
.codex-editor {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e2022;
}




/* File: admin/css/components/_misc.css */
/* ============================================================
   Компонент: мелкие элементы
   (разделители, каретки, инфо-списки, пагинация, фильтр-панель, метки)
   ============================================================ */

/* Предпросмотр суммы на странице валюты */
.currency-preview {
    padding: 14px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    background: var(--fill-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}

/* Импорт — текущий файл */
.import-file-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--fill-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.import-file-meta { flex: 1 1 auto; min-width: 0; }
.import-file-name { font-size: 13px; font-weight: 500; color: var(--text); }
.import-file-date { font-size: 11.5px; color: var(--text-muted); }
/* Импорт — таблица соответствия полей */
.import-map-field { font-weight: 500; }
.import-map-group { margin-top: 1px; font-size: 11.5px; color: var(--text-muted); }




/* File: admin/css/forms/_input.css */
/* ============================================================
   Формы: поля ввода — имена Bootstrap (.form-control, .form-select,
   .input-group, .form-label, .is-invalid/.is-valid) на наших токенах.
   Кастомные обёртки только для того, чего в Bootstrap нет
   (.input-icon — иконка внутри поля, .input-stepper — числовой степпер).
   ============================================================ */

/* ---------- Обёртка «лейбл + контрол + подсказка» ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}
/* Лейбл с элементом справа (счётчик символов и т.п.) */
.form-label-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Подсказка под полем */
.form-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- Базовый контрол ---------- */
.form-control,
.form-select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--input-focus-border);
    box-shadow: none;
}
.form-control::placeholder {
    color: var(--text-muted);
}

/* Нативный файловый инпут — кнопка «Выбрать файл» + имя файла */
input[type="file"].form-control {
    padding: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 38px;
    cursor: pointer;
    overflow: hidden;
}
input[type="file"].form-control::file-selector-button {
    height: 38px;
    margin: 0 12px 0 0;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--input-border);
    background: var(--fill);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease;
}
input[type="file"].form-control::file-selector-button:hover { background: var(--fill-muted); }

/* Многострочный */
textarea.form-control {
    height: auto;
    min-height: 76px;
    padding: 10px 12px;
    line-height: 1.55;
    resize: vertical;
}

/* Селект — свой шеврон фоном (нативная стрелка убрана) */
.form-select {
    padding-right: 34px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    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='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

/* ---------- Размеры ---------- */
.form-control-sm,
.form-select-sm {
    height: 32px;
    padding: 0 11px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}
.form-control-lg,
.form-select-lg {
    height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-lg);
    font-size: 15px;
}
.form-select-sm { padding-right: 32px; }
.form-select-lg { padding-right: 38px; }

/* ---------- Состояния ---------- */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background: var(--fill-soft);
    color: var(--text-secondary);
    cursor: not-allowed;
    box-shadow: none;
}
.form-control:disabled,
.form-select:disabled {
    background: var(--bg);
    color: var(--text-muted);
}
.form-control[readonly] {
    cursor: default;
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--danger); }
.form-control.is-valid,
.form-select.is-valid { border-color: var(--success); }

/* Подписи валидации — показываем рядом с помеченным контролом */
.invalid-feedback,
.valid-feedback {
    display: none;
    font-size: 11.5px;
}
.invalid-feedback { color: var(--danger); }
.valid-feedback { color: var(--success); }
.is-invalid ~ .invalid-feedback,
.is-valid ~ .valid-feedback { display: block; }

/* ============================================================
   Группа полей (.input-group) — сегменты с общими границами:
   контрол + приставка (.input-group-text) или кнопка (.btn).
   ============================================================ */
/* Единый бокс: фон и бордер на КОНТЕЙНЕРЕ (через inset-shadow — не меняет высоту),
   дети (поле + приставка) прозрачные. При фокусе бордер оборачивает всю группу, ₴ внутри. */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--input-bg);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px var(--input-border);
    overflow: hidden;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.input-group > .form-control,
.input-group > .form-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .input-group-text {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
}
.input-group:focus-within {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--input-focus-border);
}
/* Кнопка в группе тянется на высоту поля */
.input-group > .btn {
    height: auto;
    position: relative;
    border-radius: 0;
}

/* Приставка (валюта, домен, единица, +7 …) */
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 11px;
    color: #55555a;
    font-size: 13px;
    white-space: nowrap;
}

/* ============================================================
   Поле с иконкой внутри (.input-icon) — общий бордер,
   контрол без рамки. Для поиска, пароля, поля с галочкой.
   ============================================================ */
.input-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--input-bg);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.input-icon:focus-within {
    background: var(--surface);
    border-color: var(--input-focus-border);
}
.input-icon.is-valid {
    border-color: var(--success);
}
.input-icon > svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--text-muted);
}
.input-icon > svg.text-success { color: var(--success); }
.input-icon > .form-control {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.input-icon > .form-control:focus { box-shadow: none; }
/* Кнопка-переключатель (глаз) внутри поля */
.input-icon > .input-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.input-icon > .input-icon-btn:hover { color: var(--text); }
.input-icon > .input-icon-btn svg { width: 16px; height: 16px; }

/* ============================================================
   Числовой степпер (.input-stepper) — число слева, круглые −/+ справа.
   ============================================================ */
.input-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.input-stepper:focus-within {
    border-color: var(--primary);
}
.input-stepper > .form-control {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.input-stepper > .form-control:focus { box-shadow: none; }
.input-stepper-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
.input-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background .12s ease, color .12s ease;
}
.input-stepper-btn:hover { background: var(--fill); color: var(--text); }
.input-stepper-btn:active { background: var(--fill-muted); }
.input-stepper-btn:disabled {
    opacity: .4;
    box-shadow: none;
    cursor: not-allowed;
    background: var(--surface);
    color: var(--text-secondary);
}
.input-stepper-btn svg { width: 14px; height: 14px; }




/* File: admin/css/forms/_check.css */
/* ============================================================
   Формы: чекбоксы, радио, тумблеры — имена Bootstrap.
   Нативные input через appearance:none. Тот же вид у опций
   мультиселекта tom-select (.plugin-checkbox_options).
   ============================================================ */
.form-check-input,
.plugin-checkbox_options .option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    border: 1px solid rgb(231 234 243);
    border-radius: 3px;
    background-color: var(--surface);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, background-position .15s ease;
}

/* Отмеченный чекбокс — белая галочка на заливке */
.form-check-input:checked,
.plugin-checkbox_options .option input[type="checkbox"]:checked {
    border-color: var(--primary);
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px;
}
/* ---------- Радио ---------- */
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input[type="radio"]:checked {
    border-color: var(--primary);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%233761e9'/%3E%3C/svg%3E");
    background-size: contain;
}

/* Фокус / disabled */
.form-check-input:focus-visible {
    outline: none;
    border-color: var(--primary);
}
.form-check-input:disabled {
    opacity: .5;
    cursor: not-allowed;
    background-color: var(--fill);
}
/* Отмеченный + disabled сохраняет заливку (иначе белая галочка тонет на светлом фоне) */
.form-check-input:checked:disabled { background-color: var(--primary); border-color: var(--primary); }
.form-check-input[type="radio"]:checked:disabled { background-color: var(--surface); }

/* ---------- Размеры (чекбокс/радио) ---------- */
.form-check-input-sm { width: 15px; height: 15px; background-size: 10px; }
.form-check-input-lg { width: 22px; height: 22px; background-size: 14px; }

/* ---------- Тумблер (.form-switch) ---------- */
/* Обёртка флексом — инпут не садится на базовую линию текста (иначе тумблер «висит» выше метки) */
.form-switch { display: inline-flex; align-items: center; }
.form-switch .form-check-input {
    width: 38px;
    height: 22px;
    border: none;
    border-radius: var(--radius-pill);
    background-color: #d4d4d8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff'/%3E%3C/svg%3E");
    background-position: left 2px center;
    background-size: 18px;
}
.form-switch .form-check-input:checked {
    background-color: var(--primary);
    background-position: right 2px center;
}
.form-switch .form-check-input-sm { width: 32px; height: 18px; background-size: 14px; }
.form-switch .form-check-input-lg { width: 48px; height: 28px; background-size: 22px; }
/* Зелёный тумблер (активность) */
.form-switch-success .form-check-input:checked { background-color: var(--success); }

/* ---------- Строка «контрол + подпись» ---------- */
.form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.form-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Чипы-переключатели (метки и т.п.) ---------- */
/* Чекбокс скрыт, активность — по :checked. Сабмитятся как обычные чекбоксы. */
.chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chip-toggle input { position: absolute; width: 0; height: 0; opacity: 0; }
.chip-toggle-check { display: none; flex: none; }
.chip-toggle:hover { border-color: var(--border-strong); }
.chip-toggle:has(input:checked) {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}
.chip-toggle:has(input:checked):hover { border-color: var(--success); }
.chip-toggle:has(input:checked) .chip-toggle-check { display: inline-flex; }




/* File: admin/css/forms/_select.css */
/* ============================================================
   Формы: селект и комбобокс на tom-select.
   Структура темы: .ts-wrapper > .ts-control.single|multi > .ts-input (бокс)
   .ts-control — позиционер, весь вид бокса — на .ts-input.
   Разметка: <select class="js-select"> (+ multiple) → init в theme.js.
   ============================================================ */

.ts-wrapper { width: 100%; }
.ts-hidden-accessible { display: none; }

/* ---------- Анти-FOUC ----------
   До готовности приложения прячем нативные select (особенно multiple → длинный listbox),
   чтобы они не мелькали и не «прыгала» вёрстка до построения контрола. Готовность —
   класс .app-ready на <html>, который app.js выставляет после AppCore.init: он снимает
   скрытие со ВСЕХ селектов разом, независимо от успеха инициализации каждого (в отличие
   от завязки на per-select .tomselected, которая оставляла «обрезанными» те, где
   tom-select не построился). Высоту резервируем ≈ под контрол, чтобы не было сдвига.
   Fail-safe: если .app-ready так и не появился (JS не отработал) — через 1s показываем
   нативный select анимацией, чтобы он не остался скрытым навсегда. */
:root:not(.app-ready) .js-select {
    opacity: 0;
    height: 40px;
    box-sizing: border-box;
    animation: js-select-reveal 0s linear 1s forwards;
}
:root:not(.app-ready) .page-list-toolbar .js-select { height: 34px; }
:root:not(.app-ready) .js-select[multiple] { overflow: hidden; }
@keyframes js-select-reveal { to { opacity: 1; } }

/* .ts-control — только позиционер (видимый бокс рендерится как .ts-input) */
.ts-control {
    position: relative;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* ---------- Видимый бокс = .ts-input ---------- */
.ts-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 4px 34px 4px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background-color: var(--input-bg);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.4;
    box-sizing: border-box;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s 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='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
/* Одиночный: фиксированная высота 40, padding как в прототипе.
   Тема даёт single свой тёмный шеврон (спецификой выше) — приводим к общему. */
.ts-control.single .ts-input,
.ts-control:not(.form-select).single .ts-input {
    height: 40px;
    padding: 0 34px 0 12px;
    flex-wrap: nowrap;
    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='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
/* В покое (значение выбрано, .full) — наша серая заливка. Открыт/в фокусе (.focus/.dropdown-active
   ниже) переопределяет на белый — единообразно для всех селектов. */
.ts-input.full { background-color: var(--input-bg); }

/* Маленький размер (size:'sm') — класс на .ts-control; высота как у поиска (34px) */
.ts-control.ts-sm .ts-input { font-size: 12.5px; }
.ts-control.ts-sm.single .ts-input {
    height: 34px;
    padding: 0 30px 0 10px;
    background-position: right 10px center;
    background-size: 14px;
}
.ts-control.ts-sm.multi .ts-input {
    min-height: 34px;
    padding: 3px 30px 3px 6px;
    background-position: right 10px center;
    background-size: 14px;
}
.ts-control.ts-sm.multi .ts-input > .item { font-size: 11.5px; min-height: 20px; line-height: 20px; padding: 0 0 0 8px !important; }

/* summary:true — единый текст в контроле: плейсхолдер (пусто) / «Выбрано: N» (выбрано) */
.ts-control.has-summary .ts-input > .item { display: none !important; }
.ts-control.has-summary .ts-input input::placeholder { color: transparent; }   /* прячем нативный плейсхолдер */
/* схлопываем инпут в 0 ширины, чтобы наш текст (::after) был слева */
.ts-control.has-summary .ts-input input {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
}
/* summary-текст позиционируем абсолютно — не зависит от инпута/чипов, не съезжает */
.ts-control.has-summary .ts-input { position: relative; }
.ts-control.has-summary .ts-input::after {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    content: "Выбрано: " attr(data-count);
    color: var(--text);
    font-size: 12.5px;
    white-space: nowrap;
    pointer-events: none;
}
.ts-control.has-summary.is-empty .ts-input::after {
    content: attr(data-ph);
    color: var(--text-muted);
}

/* Плейсхолдер пустого состояния для селектов без поля ввода (search:false, инпут удалён) */
.ts-input.ts-ph { position: relative; }
.ts-input.ts-ph:not(.has-items)::after {
    content: attr(data-ph);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 12.5px;
    white-space: nowrap;
    pointer-events: none;
}
.ts-input.ts-sm.ts-ph:not(.has-items)::after { left: 10px; }

/* Опция сортировки: иконка-стрелка + отступ до текста */
.sort-opt { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sort-opt-icon { flex: none; color: var(--text-tertiary); }

/* Ведущая иконка в контроле (icon:'name') — как календарь в датапикере */
.ts-lead {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}
.ts-input.ts-has-lead { position: relative; }
.ts-control .ts-input.ts-has-lead { padding-left: 34px; }

.ts-input.focus,
.ts-input.dropdown-active {
    background-color: var(--surface);
    border-color: var(--input-focus-border);
    box-shadow: none;
}
.ts-input.disabled,
.ts-wrapper.disabled .ts-input {
    background-color: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}
.ts-input > input {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
}
.ts-input > input::placeholder { color: var(--text-muted); }
.ts-control.single .ts-input .item {
    margin: 0;
    padding: 0;
    color: var(--text);
    line-height: normal;
}

/* ---------- Мультивыбор: теги ---------- */
.ts-control.multi .ts-input {
    padding: 4px 34px 4px 8px;
}
.ts-control.multi .ts-input > .item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    /* лево — под текст, право 0 — крестик идёт своим сегментом с разделителем */
    padding: 0 0 0 8px !important;
    min-height: 20px;
    border: none;
    border-radius: 3px;
    background: #dce1ff;
    color: #333338;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 20px;
    overflow: hidden;
}
.ts-control.multi .ts-input > .item > * { display: inline-flex; align-items: center; }
/* Клик по тегу тема красит в active (ярко-синий) — гасим: как обычный тег */
.ts-control.multi .ts-input > .item.active {
    background: #dce1ff;
    color: #333338;
}
/* Крестик — иконка через ::before (идеально центрируется флексом), разделитель border-left на элементе */
.ts-control.plugin-remove_button .item .remove {
    justify-content: center;
    align-self: stretch;
    margin-left: 5px;
    padding: 0 6px;
    border: none;
    border-left: 1px solid #e6e9f2;
    border-radius: 0;
    background: transparent;
    font-size: 0;
    cursor: pointer;
}
.ts-control.plugin-remove_button .item .remove::before {
    content: '';
    width: 11px;
    height: 11px;
    background-color: #8c98a4;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color .12s ease;
}
/* Гасим вендорный фон на hover — меняется только цвет крестика (как в старой) */
.ts-control.plugin-remove_button .item .remove:hover { background: transparent; }
.ts-control.plugin-remove_button .item .remove:hover::before {
    background-color: #3761e9;
}

/* ---------- Выпадающий список ---------- */
.ts-dropdown {
    box-sizing: border-box;   /* tom-select задаёт width = ширине контрола; без этого паддинг/бордер уводят бокс левее */
    margin-top: 6px;
    padding: 8px;
    border: 1px solid rgba(231, 234, 243, .7);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
    font-size: 13px;
    z-index: 1200;   /* выше модалки bootstrap (~1055): dropdownParter=body рендерит список в body */
}
.ts-dropdown .ts-dropdown-content {
    padding: 0;
    max-height: 210px;
}
.ts-dropdown .option {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 36px;
    margin: 2px 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}
/* Подсветка совпадения при поиске (вместо ярко-жёлтой темы) */
.ts-dropdown .option .highlight {
    background: var(--primary-soft);
    border-radius: 2px;
}
/* Тема красит активную опцию серым (.ts-dropdown .active) — гасим фантом */
.ts-dropdown .option.active {
    background: transparent;
    color: var(--text-tertiary);
}
/* Подсветка только по наведению мышью */
.ts-dropdown .option:hover {
    background: rgba(5, 35, 125, .05);
    color: var(--text);
}
/* Выбранная — приоритетнее active (tom-select вешает оба класса) */
.ts-dropdown .option.selected {
    color: var(--text);
    font-weight: 600;
    background: rgba(5, 35, 125, .08);
}
/* Галочка у выбранной опции (одиночный — без чекбоксов) — зелёная, как в старой админке */
.ts-dropdown .option.selected::after {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2335d3ac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Мультивыбор: чекбоксы в опциях (плагин checkbox_options) ---------- */
/* Вид самого чекбокса — в _check.css (общий с .form-check-input); здесь только отступ */
.plugin-checkbox_options .option input[type="checkbox"] {
    margin: 0 9px 0 0;
}
.plugin-checkbox_options .option.selected {
    color: var(--text);
    background: var(--primary-soft);
    font-weight: 600;
}
.plugin-checkbox_options .option.selected::after { display: none; }

/* Пусто / служебное */
.ts-dropdown .no-results {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
}
/* Создание новой метки (create: true) */
.ts-dropdown .create {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.ts-dropdown .create:hover,
.ts-dropdown .create.active { background: rgba(5, 35, 125, .05); }
.ts-dropdown .create strong { color: var(--text); font-weight: 600; }
.ts-dropdown .optgroup-header {
    padding: 6px 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    background: transparent;
}

/* ---------- Поиск внутри дропдауна (плагин dropdown_input) ---------- */
.ts-dropdown .dropdown-input-wrap { padding: 0 0 6px; }
.ts-dropdown .dropdown-input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
}
.ts-dropdown .dropdown-input:focus { border-color: var(--border-strong); }
.ts-dropdown .dropdown-input::placeholder { color: var(--text-muted); }
/* Тема даёт синюю рамку + кольцо при фокусе контрола — гасим */
.plugin-dropdown_input .focus ~ .ts-dropdown .dropdown-input {
    border-color: var(--border-strong);
    box-shadow: none;
}

/* ---------- Медиа в опциях/тегах (data-render="media") ---------- */
.ts-media {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ts-thumb {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--fill-soft);
}
.ts-thumb-round { border-radius: 50%; }
.ts-media-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.ts-media-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ts-media-sub {
    color: var(--text-muted);
    font-size: 11.5px;
}

/* ---------- Дерево категорий (data-option-template по уровням) ---------- */
.ts-tree {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ts-tree-arrow {
    flex: none;
    color: var(--text-muted);
}
.ts-tree-root {
    font-weight: 600;
    color: var(--text);
}
/* отступ по уровням; специфичнее .ts-dropdown .option, база 12px + уровень */
.ts-dropdown .option.ts-tree-1 { padding-left: 32px; }
.ts-dropdown .option.ts-tree-2 { padding-left: 52px; }
.ts-dropdown .option.ts-tree-3 { padding-left: 72px; }
.ts-dropdown .option.ts-tree-4 { padding-left: 92px; }

/* Состояния валидации */
.is-invalid .ts-input { border-color: var(--danger); }
.is-valid .ts-input { border-color: var(--success); }




/* File: admin/css/forms/_form-layout.css */
/* ============================================================
   Формы: раскладка полей (стек, сетки, горизонтальные и инлайн-ряды)
   Поле — .field (лейбл + контрол + .form-text). Здесь — как их расставлять.
   ============================================================ */

/* Вертикальный стек полей/рядов */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Сетка полей в колонки (замена kit-grid для форм) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-col-full { grid-column: 1 / -1; }
/* Сетка чекбоксов (права администратора и т.п.) — авто-колонки */
.perms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 16px;
}
@media (max-width: 720px) {
    .form-grid,
    .form-grid-3,
    .form-grid-4 { grid-template-columns: 1fr; }
}

/* Горизонтальный ряд: подпись слева, контрол справа */
.form-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    align-items: center;
}
.form-row-top { align-items: start; }
.form-row > .form-label { margin: 0; }
@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; gap: 6px; }
    .form-row > .form-label { padding-top: 0 !important; }
}

/* Инлайн-форма (фильтр): поля в ряд, действия по нижнему краю */
.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.form-inline .field { width: 220px; }
.form-inline .field-narrow { width: 170px; }

/* Секция с боковой подписью: заголовок+описание слева, поля справа */
.form-aside {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}
.form-aside-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}
.form-aside-text {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
@media (max-width: 720px) {
    .form-aside { grid-template-columns: 1fr; gap: 10px; }
}

/* Обязательное поле — красная звёздочка у подписи */
.form-required { color: var(--danger); }




/* File: admin/css/forms/_phone.css */
/* ============================================================
   Формы: телефонный ввод (intl-tel-input / iti)
   ============================================================ */
.iti {
    width: 100%;
}
.iti__country-container {
    right: 0;
}
.iti__country-list {
    background-color: #fff !important;
    border: none !important;
    border-radius: 0px !important;
    margin-top: 0 !important;
}
.iti__dropdown-content {
    width: 100% !important;
}
.iti__divider {
    border-bottom: 1px solid #e6e9f2 !important;
}
.iti__selected-country {
    width: initial;
    padding-right: 10px;
}
.iti__selected-country-primary {
    background-color: transparent !important;
}
.iti__country-check-svg {
    color: rgb(0, 200, 83);
}
.iti__country.iti__highlight {
    background-color: #05237d14 !important;
}
.iti__search-input, .iti__country {
    outline: none;
}
.iti__search-input,
.iti__country {
    outline: none;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e2022;
}
.iti--inline-dropdown .iti__dropdown-content {
    border: 0.0625rem solid rgba(231, 234, 243, 0.7);
    border-radius: 0.3125rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}
.iti__search-input-wrapper {
    border-bottom: 1px solid #e6e9f2;
}
.iti__search-icon-svg {
    stroke: #919bb6;
}


/* Тёмный вариант списка стран */
.iti {
    display: block !important;
}
.iti__country-list {
    background-color: #1e2022;
    border: 1px solid #2f3235;
    border-radius: 8px;
    margin-top: 5px;
}
.iti__country.iti__highlight {
    background-color: rgb(47 50 53);
}
.iti__divider {
    border-bottom: 1px solid #2f3235;
}




/* File: admin/css/forms/_datepicker.css */
/* ============================================================
   Формы: выбор даты (daterangepicker) — перекрашено под наши токены.
   ============================================================ */
.daterangepicker {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    margin-top: 6px;
}
/* хвостик-указатель не используем */
.daterangepicker:before,
.daterangepicker:after { display: none; }

/* ---------- Пресеты (левый список) ---------- */
.daterangepicker .ranges { margin: 0; }
.daterangepicker .ranges ul { min-width: 190px; padding: 6px; }
.daterangepicker .ranges li {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.3;
}
.daterangepicker .ranges li:hover { background: var(--fill); color: var(--text); }
.daterangepicker .ranges li.active { background: var(--primary); color: #fff; }

/* ---------- Календарь ---------- */
.daterangepicker .drp-calendar { max-width: none; padding: 10px 12px; }
.daterangepicker .drp-calendar.left { border-left: 1px solid var(--border-soft); }
.daterangepicker .calendar-table { border: none; background: transparent; padding: 0; }
.daterangepicker .calendar-table table { border-spacing: 1px; border-collapse: separate; }
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    border: none;
    border-radius: var(--radius-sm);
}
.daterangepicker .calendar-table th:not(.month) { color: var(--text-muted); font-weight: 500; }
.daterangepicker th.month { font-weight: 600; color: var(--text); }

/* стрелки месяцев */
.daterangepicker th.prev,
.daterangepicker th.next {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover { background: var(--fill); }
.daterangepicker th.prev span,
.daterangepicker th.next span { border-color: currentColor; }

/* дни */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover { background: var(--fill); color: var(--text); }
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date { color: var(--text-muted); background: transparent; opacity: .5; }
.daterangepicker td.in-range { background: var(--primary-soft); color: var(--text); border-radius: 0; }
.daterangepicker td.active,
.daterangepicker td.active:hover { background: var(--primary); color: #fff; }
.daterangepicker td.start-date { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.daterangepicker td.end-date { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.daterangepicker td.start-date.end-date { border-radius: var(--radius-sm); }

/* выпадающие месяц/год/время */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

/* ---------- Футер: выбранный диапазон + кнопки ---------- */
.daterangepicker .drp-buttons {
    padding: 10px 12px;
    border-top: 1px solid var(--border-soft);
}
.daterangepicker .drp-selected { color: var(--text-muted); font-size: 12.5px; }
.daterangepicker .drp-buttons .btn {
    padding: 7px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
}
.daterangepicker .drp-buttons .cancelBtn {
    background: var(--fill);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
}
.daterangepicker .drp-buttons .cancelBtn:hover { background: var(--fill-muted); }




/* File: admin/css/forms/_colorpicker.css */
/* ============================================================
   Colorpicker (Spectrum) — перекраска поповера под наши токены.
   Грузится после vendors/spectrum-colorpicker2/css/spectrum.min.css.
   ============================================================ */
.sp-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    background: var(--surface);
    font-family: inherit;
    padding: 6px;
}
.sp-picker-container { border-left: 1px solid var(--border-soft); }

/* Палитра */
.sp-palette .sp-thumb-el {
    border-radius: var(--radius-sm);
    border-color: var(--border-soft);
}
.sp-palette .sp-thumb-el:hover,
.sp-palette .sp-thumb-el.sp-thumb-active { border-color: var(--primary); }

/* Основные области выбора */
.sp-color,
.sp-hue,
.sp-alpha-inner { border-radius: var(--radius-sm); }
.sp-color { border: 1px solid var(--border-soft); }

/* HEX-инпут */
.sp-input {
    height: 34px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    padding: 0 10px !important;
}
.sp-input:focus { border-color: var(--primary) !important; box-shadow: none !important; }

/* Кнопки */
.sp-button-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 10px !important;
    margin-top: 6px !important;
    border-top: 1px solid var(--border-soft);
}
.sp-button-container .sp-cancel,
.sp-button-container .sp-choose {
    float: none !important;
    margin: 0 !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.sp-choose {
    padding: 0 16px !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius) !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.sp-choose:hover { background: var(--primary-hover, var(--primary)) !important; }
.sp-cancel {
    padding: 0 10px !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}
.sp-cancel:hover { color: var(--text) !important; text-decoration: none !important; }

/* Поле цвета в настройках темы: инпут + свотч (клик по свотчу открывает палитру) */
.color-field .color-dot {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-soft);
    cursor: pointer;
}
.color-dot.is-empty {
    background-image:
        linear-gradient(45deg, #e5e7ec 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7ec 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7ec 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7ec 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}




/* File: admin/css/abstracts/_utilities.css */
/* ============================================================
   Утилиты — имена как в Bootstrap, значения = наши токены.
   Своё имя заводим только для того, чего в Bootstrap нет.
   ============================================================ */

/* ---------- Фоновые цвета (.bg-*) ---------- */
.bg-primary          { background-color: var(--primary) !important; }
.bg-primary-subtle   { background-color: var(--primary-soft) !important; }
.bg-success          { background-color: var(--success) !important; }
.bg-danger           { background-color: var(--danger) !important; }
.bg-warning          { background-color: var(--warning) !important; }
.bg-body             { background-color: var(--bg) !important; }
.bg-white            { background-color: var(--surface) !important; }
.bg-light            { background-color: var(--fill) !important; }
.bg-body-secondary   { background-color: var(--fill-soft) !important; }
.bg-body-tertiary    { background-color: var(--fill-muted) !important; }

/* ---------- Цвета текста (.text-*) ---------- */
.text-primary   { color: var(--primary) !important; }
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--danger) !important; }
.text-warning   { color: var(--warning) !important; }
.text-body      { color: var(--text) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-white     { color: #fff !important; }

/* ---------- Радиусы (.rounded-*) ---------- */
.rounded        { border-radius: var(--radius) !important; }
.rounded-0      { border-radius: 0 !important; }
.rounded-1      { border-radius: var(--radius-sm) !important; }
.rounded-2      { border-radius: var(--radius) !important; }
.rounded-3      { border-radius: var(--radius-lg) !important; }
.rounded-pill   { border-radius: var(--radius-pill) !important; }
.rounded-circle { border-radius: 50% !important; }

/* ---------- Тени (.shadow-*) ---------- */
.shadow-none { box-shadow: none !important; }
.shadow-sm   { box-shadow: var(--shadow-card) !important; }
.shadow      { box-shadow: var(--shadow-menu) !important; }
.shadow-lg   { box-shadow: var(--shadow-pop) !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; }
.text-uppercase { text-transform: uppercase !important; }

/* ---------- Отображение (.d-*) ---------- */
.d-none        { display: none !important; }
.d-block       { display: block !important; }
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* ---------- Ширина / переполнение ---------- */
.w-100 { width: 100% !important; }
.overflow-visible { overflow: visible !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }

/* ---------- Отступы margin (шкала Bootstrap: 0/.25/.5/1/1.5/3rem) ---------- */
.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}
.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}
.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}
.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}
.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}
.mx-0{margin-left:0!important;margin-right:0!important} .mx-1{margin-left:.25rem!important;margin-right:.25rem!important} .mx-2{margin-left:.5rem!important;margin-right:.5rem!important} .mx-3{margin-left:1rem!important;margin-right:1rem!important} .mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important} .mx-5{margin-left:3rem!important;margin-right:3rem!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}
.mx-auto{margin-left:auto!important;margin-right:auto!important} .ms-auto{margin-left:auto!important} .me-auto{margin-right:auto!important}

/* ---------- Анимированная AI-иконка (пульс свечения) ---------- */
.icon-ai {
    animation: ai-glow 1.8s ease-in-out infinite;
}
@keyframes ai-glow {
    0%, 100% { filter: drop-shadow(0 0 0 currentColor); }
    50%      { filter: drop-shadow(0 0 6px currentColor); }
}

/* Размеры шрифта (.fs-*) — по нашей шкале (имена как в Bootstrap) */
.fs-1 { font-size: 32px !important; }
.fs-2 { font-size: 22px !important; }
.fs-3 { font-size: 16px !important; }
.fs-4 { font-size: 14px !important; }
.fs-5 { font-size: 13.5px !important; }
.fs-6 { font-size: 12px !important; }




/* File: admin/css/design-system.css */
/* ============================================================
   Раздел «Дизайн-система» — витрина компонентов (kit-*)
   Второе меню — общий компонент .subnav (см. components/_subnav.css).
   ============================================================ */

.kit-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 820px;
}
/* Для лейаутов — на всю доступную ширину (без ограничения доков) */
.kit-page-wide {
    max-width: none;
}
.kit-page-head {
    margin-bottom: 4px;
}
.kit-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}
.kit-page-lead {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* Ряд примеров */
.kit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
/* Ряд с выравниванием по низу (разновысокие контролы) */
.kit-row-end { align-items: flex-end; }
/* Ограничение ширины блока витрины */
.kit-narrow { max-width: 520px; }
/* Растягивающийся элемент в ряду */
.kit-grow { flex: 1; min-width: 220px; }
/* Простор для тултипов (чтобы бабл сверху/снизу не упирался в край) */
.kit-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

/* Ряд аватаров с подписью размера снизу */
.kit-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-end;
}
.kit-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}
.kit-avatar > span {
    font-size: 11px;
    color: var(--text-muted);
}

/* Сетка плиток (обзор) */
.kit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.kit-tile {
    text-decoration: none;
    transition: border-color .13s, box-shadow .13s, transform .13s;
}
.kit-tile:hover {
    border-color: rgba(55, 97, 233, .4);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

/* Свотчи токенов */
.kit-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.kit-swatch-chip {
    height: 54px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.kit-swatch-name {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text);
}
.kit-swatch-val {
    font-size: 11px;
    color: var(--text-muted);
}

/* Демо-элемент с подписью (радиусы, тени) */
.kit-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.kit-box {
    width: 100px;
    height: 60px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.kit-token {
    font-size: 11px;
    color: var(--text-muted);
}

/* Сетка 2 колонки */
.kit-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* Ячейка во всю ширину сетки */
.kit-col-full { grid-column: 1 / -1; }

/* Строка размерной шкалы (типографика) */
.kit-type-row {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}
.kit-type-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.kit-type-row-label {
    width: 130px;
    flex: none;
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- Демо-утилиты витрины (без инлайна) ---------- */

/* Описание/заметка в карточке */
.kit-note {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* Ряд с увеличенным зазором (демо теней) */
.kit-row-wide { gap: 22px; }

/* Шрифты (демо) */
.kit-fonts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}
.kit-font-sans { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.kit-font-body { font-size: 15px; color: var(--text-secondary); }
.kit-font-mono { font-size: 15px; }

/* Типографика — размерная шкала */
.kit-scale {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kit-weights {
    display: flex;
    gap: 20px;
    font-size: 15px;
}

/* Типографика — списки и цвета */
.kit-lists {
    display: flex;
    gap: 26px;
}
.kit-lists > * {
    flex: 1;
}
.kit-colors {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
}
.kit-caps {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    color: var(--text-muted);
}

/* Форма-колонка (демо полей) */
.kit-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 14px;
}
.kit-counter {
    color: var(--text-muted);
    font-weight: 400;
}

/* Плейсхолдер-слот в каркасах лейаутов («здесь компонент …») */
.kit-wire {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    font-size: 12.5px;
    color: var(--text-muted);
    background: repeating-linear-gradient(135deg, var(--fill-soft) 0 10px, transparent 10px 20px);
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius);
}
.kit-wire-sm {
    min-height: 0;
    padding: 8px 14px;
}

/* Схема-раскладка (рейл + контент) для показа лейаута «С подменю» */
.kit-schema {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 16px;
}

/* Сетка иконок (референс спрайта) */
.kit-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.kit-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.kit-icon svg { width: 24px; height: 24px; color: var(--text-secondary); }
.kit-icon-name {
    font-family: var(--font);
    font-size: 10.5px;
    color: var(--text-muted);
    word-break: break-all;
}
/* Счётчик в шапке панели */
.card-panel-count {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Центрированная колонка (демо рейтинга) */
.kit-form-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Скелетон/лоадеры — раскладки строк витрины */
.kit-skel-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.kit-skel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
.kit-skel-list {
    display: flex;
    flex-direction: column;
}
.kit-skel-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.kit-skel-item:last-child { border-bottom: none; }

/* Демо-карточка товара под оверлей загрузки */
.kit-loader-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.kit-loader-card-body { padding: 18px 20px; }
.kit-loader-card-title { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.kit-loader-card-text { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.kit-loader-card-price { font-family: var(--font); font-size: 15px; font-weight: 600; margin-top: 12px; }

/* Ряд «других вариантов» лоадеров — ячейки с подписью снизу */
.kit-loaders-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 44px;
}
.kit-loader-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.kit-loader-cell-label {
    font-size: 11.5px;
    color: var(--text-muted);
}
/* Скелетон-карточка (миниатюра + строки) */
.kit-skel-card {
    display: flex;
    gap: 14px;
    max-width: 420px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
}