html {
   height: 100%;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body,
body :where(div, span, p, a, i, table, thead, tbody, tr, th, td, label, h1, h2, h3, h4, h5, h6, small, strong, em, ul, ol, li) {
    caret-color: transparent;
    cursor: default;
}

body :where(table, thead, tbody, tr, th, td, i, svg, .fa, .fa-solid, .fa-regular, .fa-brands) {
    cursor: default;
}

body :where(input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]) {
    caret-color: auto;
    cursor: text;
}

body :where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, summary, .btn, .page-link) {
    caret-color: transparent;
}

body :where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, summary, .btn, .page-link),
body :where(a, button, [role="button"], .btn, .page-link) :where(*) {
    cursor: pointer;
}

a,
a *,
button,
button *,
.btn,
.btn *,
.page-link,
.page-link *,
[role="button"],
[role="button"] *,
[data-href],
[data-href] *,
[data-bs-toggle],
[data-bs-toggle] *,
[data-bs-target],
[data-bs-target] *,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
summary,
label[for] {
    cursor: pointer !important;
}

button:disabled,
button:disabled *,
.btn.disabled,
.btn.disabled *,
.page-link.disabled,
.page-link.disabled *,
input:disabled,
select:disabled {
    cursor: not-allowed !important;
}

.credit-elements{
    display: inline-block;
    text-align: center;
    margin-left: 1px;
    margin-right: 1px;
    width: 30px;
    background-color: #4c4c4c;
    border: 1px #4c4c4c solid;
    border-radius: 3px;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
    color: white;
}
.credit-elements:hover{
    background-color: #333;
}
.credit-remain-elements{
    display: inline-block;
    text-align: center;
    margin-left: 1px;
    margin-right: 1px;
    width: 40px;
    background-color: #4c4c4c;
    border: 1px #4c4c4c solid;
    border-radius: 3px;
    padding: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    cursor: pointer;
    color: white; 
    line-height: 14px;
}
.no-stretch{
    width:1%;
    white-space:nowrap;
}
.table-fit {
    width: 1px;
}
.credit-remain-elements:hover{
    background-color: #333;
}
.no-events{
    pointer-events: none;
}
.editable-mark{
    cursor: default;
}
textarea {
    resize: none;
}
#textarea-serials{
    height: 150px;
}
.position-relative{
    position: relative;
}
.blur-10px{
    filter: blur(10px);
}
.blur-5px{
    filter: blur(5px);
}
.align-top{
    vertical-align: top;
}
.margin-auto{
    margin: auto;
}
.ms-1{
    margin-left: 5px;
}
.margin-n-20{
    margin-top: -20px;
}
.margin-left-20{
    margin-left: 20px;
}
.margin-right-30{
    margin-right: 30px;
}
.margin-right-25{
    margin-right: 25px;
}
.margin-right-5{
    margin-right: 5px;
}
.margin-0{
    margin: 0px;
}
.margin-10{
    margin: 10px;
}
.margin-50{
    margin: 50px;
}
.margin-top-5{
    margin-top: 5px;
}
.margin-top-10{
    margin-top: 10px;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-bottom-15{
    margin-bottom: 15px;
}
.margin-left-5{
    margin-left: 5px;
}
.margin-left-10{
    margin-left: 10px;
}
.margin-left-14{
    margin-left: 14px;
}
.padding-10{
    padding: 10px;
}
.padding-5{
    padding: 5px;
}
.padding-0{
    padding: 0px;
}
.padding-top-1{
    padding-top: 1px;
}
.padding-bottom-1{
    padding-bottom: 1px;
}
.padding-left-6{
    padding-left: 6px;
}
.padding-right-6{
    padding-right: 6px;
}
.cell-align-center{
    text-align: center;
    vertical-align: middle;
    position: relative;
}
.inline-block{
    display: inline-block;
}
.normal-text{
    font-weight: normal;
}
#delears-table-container{
    overflow: auto;
    width: 80%;
    margin: 0 auto;
}
.content-width{
    width:1%;
    white-space:nowrap;
}
.cursor-pointer{
    cursor: pointer;
}
.dealers-table{
    margin: 0;
    min-width: 750px;
}
#page-wrapper{
    min-height: 50vh;
}
.thead{
    background-color: #ecf0f1;
}
.align-center{
    margin: 0 auto;
}
.content-container{
    overflow: auto;
    width: 80%;
    margin: 0 auto;
}
.data-row{
    display: block;
    width: 100%;
    float: left;
}
.float-right{
    float: right;
}
.float-left{
    float: left;
}
.custom-search{
    display: block;
    width: 100%;
}
.absolute{
    position: absolute;
}
.relative{
    position: relative;
}
.select-none{
    user-select: none; 
}
.absolute-right-down{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.selected-page{
    color: goldenrod;
    pointer-events: none;
}
.z-index999{
    z-index: 999;
}
.role-admin,
.role-graver-dealer,
.role-webnc-dealer,
.role-manufacturer,
.role-user,
.role-different{
    display: inline-block;
    user-select: none;
}
.role-user{
    color: lightgrey;
}
.role-admin{
    color: red;
}
.role-graver-dealer{
    color: lightgreen;
}
.role-webnc-dealer{
    color: forestgreen;
}
.role-manufacturer{
    color: peachpuff;
}
.min-width-100px{
    min-width: 100px;
}
.min-width-150px{
    min-width: 150px;
}
.min-width-170px{
    min-width: 170px;
}
.min-width-650px{
    min-width: 650px;
}
.width-40{
    width: 40%!important;
}
.width-50{
    width: 50%!important;
}
.width-60{
    width: 60%!important;
}
.width-80{
    width: 80%!important;
}
.width-90{
    width: 90%!important;
}
.width-100{
    width: 100%!important;
}
.width-30px{
    width: 30px!important;
}
.width-40px{
    width: 40px!important;
}
.width-50px{
    width: 50px!important;
}
.width-70px{
    width: 70px!important;
}
.width-80px{
    width: 80px!important;
}
.width-290px{
    width: 290px!important;
}
.width-300px{
    width: 300px!important;
}
.width-320px{
    width: 320px!important;
}
.width-100px{
    width: 100px!important;
}
.width-110px{
    width: 110px!important;
}
.height-30px{
    height: 30px;
}
.height-35px{
    height: 35px;
}
.max-width-200px{
    max-width: 200px;
}
.max-width-220px{
    max-width: 220px;
}
.max-width-400px{
    max-width: 400px;
}
.max-width-500px{
    max-width: 500px;
}
.max-width-600px{
    max-width: 600px;
}
.cursor-normal{
    cursor: auto;
}
.cursor-default{
    cursor: default;
}
.color-forestgreen{
    color: forestgreen;
}
.color-red{
    color: red;
}
.color-emerald{
    color: #01DFA5;
}
.color-sky{
    color: #A9F5F2;
}
.color-light-mid-grey{
    color: #bbbbbb;
}
.color-lightgrey{
    color: lightgrey;
}
.color-grey{
    color: grey;
}
.color-lightgreen{
    color: lightgreen;
}
.color-lightsalmon{
    color: lightsalmon;
}
.color-yellowgreen{
    color: yellowgreen;
}
.color-black{
    color: black;
}
.color-goldenrod{
    color: goldenrod;
}
.color-grey-hover{
    color: grey;
}
.color-grey-hover:hover{
    color: goldenrod;
}
.color-white{
    color: white;
}
.color-green{
    color: green;
}
.color-green-80{
    color: #00af00;
}
.color-darkred{
    color: darkred;
}
.color-darkred-80{
    color: #af0000;
}
.bcolor-red{
    background-color: red;
}
.color-midblue{
    color: #0A6DAF;
}
.bg-colot-lightgray{
    background-color: lightgray;
}
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
.text-decoration-none-custom{
    text-decoration: none;
}
.monospace-18{
    font-family: monospace;
    font-size: 18px;
}
#main-info-panel{
    display: table;
    overflow: auto;
    position: relative;
    width: 100%!important;
}
#main-info-heading{
    width: 100%;
}
#valid-serials-holder{
    overflow: auto;
}
#fixed-to-table{
    overflow: auto;
}

#main-info-wrapper{
    overflow: auto;
}
.sn-unl,
.ch-cls{
    cursor: pointer;
}

.unsaved-mark{
    background-color: orangered;
    border: 1px red solid;
}
.unsaved-mark2{
    background-color: orangered;
    border: 2px red solid;
}
.unsaved-mark2:hover{
    background-color: lightcoral!important;
    border: 2px red solid!important;
    box-shadow: none!important;
}
.unsaved-mark2:onclick{
    background-color: lightcoral!important;
    border: 2px red solid!important;
}
.unsaved-mark2:focus{
    background-color: lightcoral!important;
    border: 2px red solid!important;
}
.unsaved-mark2:active{
    background-color: lightcoral!important;
    border: 2px red solid!important;
}
.unsaved-mark:hover{
    background-color: lightcoral!important;
}
.pagination-custom{
    border: 1px solid lightgray;
    width: 25px;
    display: inline-block;
    text-align: center;
}
.pagination-dropdown{
    margin-left: 15px;
    border: 1px solid lightgray;
    width: auto;
    display: inline-block;
    text-align: center;
    color: gray;
}
.search-pagination{
    border: 1px solid #FDC21F;
    width: 25px;
    display: inline-block;
    text-align: center;
}
.no-select{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */      
}
.overflow-auto{
    overflow: auto;
}
input[type=checkbox] {
  transform: scale(1.3);
}
.scale-2{
    transform: scale(2);
}
.font-size-10{
    font-size: 10px;
    line-height: 10px;
}
.font-size-20{
    font-size: 40px;
    line-height: 40px;
}
.credit-limit-container{
    margin: 1px 0 0 0;
}
.unlock-toggle-off,
.unlock-toggle-on{
    cursor: pointer;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.dropdown-toggle{
    cursor: pointer;
}

/*SWITCH CHECKBOXES*/

.checkbox + label {
  cursor: pointer;
}

.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; 
  padding: 0 0 0 60px; 
}

.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; 
}

.checkbox:checked + label:before {
  background: #9FD468;
}

.checkbox:checked + label:after {
  left: 26px;
}

.checkbox:focus + label:before {
  box-shadow: 0 0 0 2px lightyellow;
}

.td-limit-width{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-btn-light-small2{
    cursor: pointer;
    border-radius: 5px;
    border-color: transparent;
    background-color: #e3e3e3;
}
.site-btn-light-small2:hover {
    border-color: transparent;
    color: #9b9b9b;
}
.site-btn-light-small2:focus{
    border-color: transparent;
    outline: transparent;
}

.site-btn-light-small{
    cursor: pointer;
    border-radius: 5px;
    padding: 3px;
    border-color: transparent;
}
.site-btn-light-small:hover {
    border-color: transparent;
    color: #9b9b9b;
}
.site-btn-light-small:focus{
    border-color: transparent;
    outline: transparent;
}
.site-btn-light{
    cursor: pointer;
    border-radius: 5px;
    padding: 8px;
    border-color: transparent;
}
.site-btn-light:hover {
    border-color: transparent;
    color: #9b9b9b;
}
.site-btn-light:focus{
    border-color: transparent;
    outline: transparent;
}

/* ====='star-rating' component */

.starrating > input {display: none;}  /* Remove radio buttons */

.starrating > label:before { 
  content: "\f005"; /* Star */
  margin: 2px;
  font-size: 1em;
  font-family: FontAwesome;
  display: inline-block; 
}

.starrating > label
{
  color: lightgrey; /* Start color when not clicked */
}

.starrating > input:checked ~ label
{ color: goldenrod ; } /* Set yellow color when star checked */

.starrating > input:hover ~ label
{ color: goldenrod ; cursor: pointer;  } /* Set yellow color when star hover */

/* END'star-rating' component */

.d-flex{
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

.flex-row-reverse{
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: reverse!important;
    -webkit-flex-direction: row-reverse!important;
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important;
}

.justify-content-center{
    -webkit-box-pack: center!important;
    -webkit-justify-content: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.justify-content-end{
    -webkit-box-pack: flex-end!important;
    -webkit-justify-content: flex-end!important;
    -ms-flex-pack: flex-end!important;
    justify-content: flex-end!important;
}

.justify-content-start{
    -webkit-box-pack: flex-start!important;
    -webkit-justify-content: flex-start!important;
    -ms-flex-pack: flex-start!important;
    justify-content: flex-start!important;
}
@media screen and (max-width: 1000px) {
    #delears-table-container{
        overflow: auto;
        width: 100%;
        margin: 0 auto;
    }
    .width-50,
    .width-60,
    .width-80,
    .width-90{
        width: 100%!important;
    }
    .content-container{
        width: 100%;
    }
}
/*black hole at the top fix*/
@media screen and (max-width: 1199px) and (min-width: 768px) {
    body{
        margin-top: 0;
    }
    
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #666666; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

.loader-20 {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #666666; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*CHECKBOXES*/
.funkyradio div {
    clear: both;
    overflow: hidden;
}

.funkyradio label {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #D1D3D4;
    font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
    display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
    position: relative;
    line-height: 2em;
    text-indent: 3.25em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '';
    width: 2.5em;
    background: #D1D3D4;
    border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
    color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
    content: '\2714';
    text-indent: .9em;
    color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
    color: #777;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
    content: '\2714';
    text-indent: .9em;
    color: #333;
    background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
    color: #333;
    background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #337ab7;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5cb85c;
}

.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #d9534f;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #f0ad4e;
}

.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5bc0de;
}


/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
    .hide-width-less-than-760 { display: none; }
}

/* WebNC styles merged into custom.css */
/*<editor-fold desc="Admin machine table">*/
/*</editor-fold>*/

/* Global site background. Content panels sit on a darker page gutter. */
html, body {
    background-color: #222;
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('fonts/source_code_pro/SourceCodePro-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;  /* Поддержка всего диапазона весов */
    font-style: normal;
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('fonts/source_code_pro/SourceCodePro-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;  /* Поддержка всего диапазона весов */
    font-style: italic;
}

@font-face {
    font-family: 'Consolas';
    src: url('fonts/consolas/CONSOLA.TTF') format('truetype');
}

.bd-gray-600 {
    color: #fff;
    background-color: #6c757d;
}

.site-navbar {
    min-height: 64px;
}

.site-navbar-logo {
    display: block;
    width: auto;
    max-height: 42px;
}

.site-navbar-user {
    padding-right: .75rem;
}

.bg-green {
    background-color: green;
}

.bg-ext-pale-green {
    background-color: rgba(1, 173, 0, 0.1);
}

.bg-ext-pale-red {
    background-color: rgba(173, 0, 0, 0.1);
}

.bg-pale-gray {
    background-color: #ecf0f1;
}

.bg-pale-blue-gradient {
    background: #ffffff;
}

.b-divider {
    height: 2rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.a-no-decor{
    text-decoration: none;
}

.cursor-pointer{
    cursor: pointer;
}
.img-max-size-120{
    max-width: 120px;
    max-height: 120px;
}
.img-max-size-150{
    max-width: 150px;
    max-height: 150px;
}
.img-max-size-180{
    max-width: 180px;
    max-height: 180px;
}

.top-25{
    top: 25%;
}

.start-5{
    left: 5%;
}

.start-25{
    left: 25%;
}
.start-75{
    left: 75%;
}

.start-95{
    left: 95%;
}

.form-check-input {
    clear: left;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.form-switch.form-switch-md {
    margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.form-switch.form-switch-xl {
    margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.form-check-input-green:checked{
    background-color: rgba(144, 238, 144, 0.89);
    border-color: darkseagreen;
}

/*<editor-fold desc="Admin machine table">*/
.comment-cell,
.dealer-cell,
.machine-type-cell{
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.machine-info-link{
    font-size: 12px;
    color: gray;
    cursor: pointer ;
    user-select: none;
}

.machine-info-circle{
    color: gray;
    cursor: pointer ;
    user-select: none;
}

.machine-info-link:hover{
    color: #007bff;
}

.m-inf-header{
    width: 170px;
    font-weight: bold;
    overflow: hidden;
}

.m-inf-header, .m-inf-value {
    display: inline-block;
    vertical-align: middle;
}

.m-inf-value{
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.machine-info-row{
    overflow: hidden;
    display: none;
}

.machine-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.m-inf-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.serial-cell{
    font-family: "Consolas", "Courier New", monospace;
    font-size: 18px;
}

.empty-cell{
    user-select: none;
    color: #b0b0b0;
}

/*</editor-fold>*/

.scaled-switch{
    transform: scale(1.5);
    transform-origin: left center;
    vertical-align: middle;
    display: inline-block;
}

.text-hover-blue:hover{
    color: #007bff;
}

.text-light-gray{
    color: #b0b0b0;
}

.search-clear-text{
    color: #b0b0b0;
    cursor: pointer;
    font-size: 14px;
}

.search-clear-text:hover{
    color: #007bff;
}

.input-title-text{
    width: 150px;
}

.checkbox-label-text{
    width: 180px;
    display: inline-block;
}

.expired_credit_label{
    color: darkred;
}

.btn-edit-machine-type{
    font-size: 12px;
}

table.no-wrap td{
    white-space: nowrap;
}

.header-test{
    font-family: 'Source Code Pro', monospace;
    font-weight: 400; /* Нормальный вес */
}

.header-test-strong{
    font-family: 'Source Code Pro', monospace;
    font-weight: 700; /* Жирный шрифт */
}

/* main row hover */
.machine-row:hover {
    background: #f8f9fa;
}

/* responsive detail grid */
.machine-grid {
    display: grid;
    gap: 0.25rem 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
}

/* each label/value pair lives in a sub-grid (so text lines up) */
.machine-grid-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.25rem;
}

.machine-label {
    justify-self: end;      /* right-align label */
    font-weight: 600;
    color: #6c757d;         /* bootstrap text-secondary */
}

.machine-value {
    word-break: break-all; /* prevent overflow on long strings */
}


/* Карточка деталей (можете менять ширину подписи здесь) */
.machine-details-card {
    --label-width: 155px;
}

/* Сетка карточки: адаптивно в 1–3 столбца */
.machine-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 0.75rem 1rem;
}

/* Одна «псевдострока»: заголовок + значение с рамкой и скруглениями */
.machine-details-field {
    display: grid;
    grid-template-columns: var(--label-width, 150px) 1fr;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
    overflow: hidden; /* чтобы скругления работали у внутренних фонов */
}

/* Заголовок (подпись): светлый фон, полужирный, серый текст */
.machine-details-label {
    background: #f8f9fa;       /* bootstrap bg-light */
    color: #808080;
    font-weight: 600;
    padding: 0.375rem 0.5rem;
    white-space: nowrap;
}

/* Значение: белый фон, основной цвет текста, обрезка по краю */
.machine-details-value {
    background: #ffffff;
    color: #212529;            /* bootstrap body color */
    padding: 0.375rem 0.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Consolas", "Courier New", monospace
}

/* Узкие экраны: подпись над значением (читаемо на телефонах) */
@media (max-width: 480px) {
    .machine-details-field {
        grid-template-columns: 1fr;
    }
    .machine-details-value {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        white-space: normal; /* на очень узких ширинах разрешим перенос */
        word-break: break-word;
    }
}

/* Необязательно: подчёркиваем кликабельный блок действий сверху/снизу */
.machine-details-actions {
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.download-sm-key{
    cursor: pointer;
}

/* Popover */
/* Увеличим ширину popover с деталями машины */
.machine-info-popover {
    max-width: 480px;
    width: 440px;
    --bs-popover-font-size: 1rem;
    font-size: 1rem;
}

.machine-info-popover .popover-header {
    font-weight: 600;
}

.machine-info-popover table {
    margin: 0;
}

.machine-info-popover th {
    white-space: nowrap;
    padding-right: 0.75rem;
}

.machine-info-popover td {
    word-break: break-word;
}

#admin_machine_table tbody td,
#admin_machine_table tbody th {
    vertical-align: middle;
}

#admin_machine_table .admin-machine-sort-btn,
#machine_table .admin-machine-sort-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

#admin_machine_table .admin-machine-sort-btn:focus-visible,
#machine_table .admin-machine-sort-btn:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.45);
    outline-offset: 2px;
    border-radius: 2px;
}

#admin_machine_table .admin-machine-sort-btn .sort-indicator,
#machine_table .admin-machine-sort-btn .sort-indicator {
    display: inline-flex;
    align-items: center;
}

/* Make comment column wider */
#admin_machine_table th.comment-col,
#admin_machine_table td.comment-cell {
    width: 320px;              /* try 320..520 */
    min-width: 200px;
}

/* Allow wrapping only in comment column */
#admin_machine_table td.comment-cell,
#admin_machine_table th.comment-col {
    white-space: normal !important;
}

/* Show up to 2 lines, then add ellipsis */
#admin_machine_table td.comment-cell .comment-text {
    font-size: 1rem;
    line-height: 1.15;

    white-space: pre-line;     /* keep \n */
    overflow-wrap: anywhere;
    word-break: break-word;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}

/* Highlight row on hover */
#admin_machine_table tbody tr.machine-row:hover {
    background-color: rgba(13, 110, 253, 0.08); /* subtle */
}

/* Admin machines page/table */
.admin-machines-panel {
    --machine-table-border: #dde5ed;
    --machine-table-header: #edf2f7;
    --machine-table-hover: #f2f7fb;
    --machine-table-width: 1313px;
    width: min(calc(100vw - 2rem), calc(var(--machine-table-width) + 2.25rem));
    max-width: min(calc(100vw - 2rem), calc(var(--machine-table-width) + 2.25rem));
}

.admin-machines-panel > h3.text-center {
    display: none;
}

.admin-machines-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.admin-machines-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: #495057;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-machines-title i {
    width: 1.25rem;
    color: #0d6efd;
    font-size: 1.2rem;
    text-align: center;
}

.admin-machines-total {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.125rem;
    padding: .35rem .75rem;
    border: 1px solid #cfe2ff;
    border-radius: .5rem;
    background: #e7f1ff;
    color: #245c95;
    font-weight: 600;
    white-space: nowrap;
}

.admin-machines-total i {
    width: 1rem;
    text-align: center;
}

.admin-machines-search-row {
    margin-bottom: .25rem;
}

.admin-machines-search-row .input-group {
    max-width: 680px;
}

.admin-machines-search-row .form-control {
    border-color: #d7e1ea;
    border-radius: .375rem 0 0 .375rem;
}

.admin-machines-search-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 6.5rem;
}

.admin-machines-clear-search,
.admin-machines-panel #clearSearchBtn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: .15rem 0 .75rem .1rem;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: .86rem;
    line-height: 1.3;
    cursor: pointer;
}

.admin-machines-clear-search:hover,
.admin-machines-clear-search:focus,
.admin-machines-panel #clearSearchBtn:hover,
.admin-machines-panel #clearSearchBtn:focus {
    color: #0d6efd;
}

.admin-machines-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid var(--machine-table-border);
    border-radius: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-machines-table-wrap #table-container {
    width: var(--machine-table-width);
    min-width: 0;
}

.admin-machines-table-wrap #table-container > span {
    display: none;
}

.admin-machines-pagination {
    display: flex;
    justify-content: flex-start;
    padding: .35rem .5rem .2rem;
}

.admin-machines-pagination .pagination {
    margin-bottom: 0;
}

.admin-machines-pagination .page-link,
.admin-dealers-pagination .page-link,
.admin-sysbuilds-pagination .page-link,
.dealer-dashboard-pagination .page-link {
    padding: .28rem .62rem;
    font-size: .9rem;
    line-height: 1.2;
}

#admin_machine_table.admin-machines-table {
    width: var(--machine-table-width);
    min-width: var(--machine-table-width);
    max-width: var(--machine-table-width);
    table-layout: fixed;
    margin-bottom: 0;
    border-color: var(--machine-table-border);
    font-size: 13px;
}

#admin_machine_table.admin-machines-table > :not(caption) > * > * {
    border-color: var(--machine-table-border);
}

#admin_machine_table.admin-machines-table > thead > tr > th {
    padding: .45rem .45rem;
    background: var(--machine-table-header);
    color: #495057;
    font-weight: 600;
    vertical-align: middle;
    border-bottom: 1px solid #d4dde7;
}

#admin_machine_table.admin-machines-table > tbody > tr > td {
    padding: .36rem .45rem;
    vertical-align: middle;
}

#admin_machine_table.admin-machines-table > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

#admin_machine_table.admin-machines-table > tbody > tr.admin-machine-row:hover > td {
    background: var(--machine-table-hover);
}

#admin_machine_table.admin-machines-table th:nth-child(1) { width: 52px; }
#admin_machine_table.admin-machines-table th:nth-child(2) { width: 138px; }
#admin_machine_table.admin-machines-table th:nth-child(3) { width: 48px; }
#admin_machine_table.admin-machines-table th:nth-child(4) { width: 96px; }
#admin_machine_table.admin-machines-table th:nth-child(5) { width: 106px; }
#admin_machine_table.admin-machines-table th:nth-child(6) { width: 173px; }
#admin_machine_table.admin-machines-table th:nth-child(7) { width: 108px; }
#admin_machine_table.admin-machines-table th:nth-child(8) { width: 172px; }
#admin_machine_table.admin-machines-table th:nth-child(9),
#admin_machine_table.admin-machines-table th:nth-child(10),
#admin_machine_table.admin-machines-table th:nth-child(11) { width: 38px; }
#admin_machine_table.admin-machines-table th:nth-child(12) { width: 298px; }

#admin_machine_table .admin-machine-sort-btn {
    gap: .28rem;
    min-width: 0;
}

#admin_machine_table .admin-machine-sort-btn .sort-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#admin_machine_table .admin-machine-sort-btn .sort-indicator {
    color: #9aa7b4;
    font-size: .82rem;
}

.admin-machine-id-col,
.admin-machine-id-cell {
    width: 52px;
}

.admin-machine-id-badge,
.admin-machine-id-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #495057;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
}

#admin_machine_table td.admin-machine-serial-cell {
    width: 138px;
    color: #212529;
    font-size: .96rem;
    overflow: hidden;
    white-space: nowrap;
}

.admin-machine-serial {
    display: inline-block;
    max-width: calc(100% - 3.35rem);
    overflow: hidden;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-machine-dev-mode .admin-machine-serial {
    color: darkgoldenrod;
    font-weight: 800;
}

.admin-machine-service-mode .admin-machine-serial {
    color: #0d6efd;
    font-weight: 800;
}

.admin-machine-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.68rem;
    height: 1.68rem;
    margin-left: .2rem;
    padding: 0;
    border: 1px solid #d7e1ea;
    border-radius: .375rem;
    background: #ffffff;
    color: #6c757d;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.admin-machine-icon-button i {
    width: .9rem;
    font-size: .82rem;
    text-align: center;
}

.admin-machine-info-button:hover,
.admin-machine-settings-button:hover {
    border-color: #9ec5fe;
    background: #e7f1ff;
    color: #0d6efd;
}

.admin-machine-edit-button:hover {
    border-color: #badbcc;
    background: #e6f4ea;
    color: #276c3d;
}

.admin-machine-info-button {
    width: 1.34rem;
    height: 1.34rem;
    border-color: transparent;
    background: transparent;
    color: #7b8794;
}

.admin-machine-settings-cell {
    width: 48px;
}

.admin-machine-download-cell {
    width: 38px;
}

.admin-machine-settings-cell .admin-machine-icon-button,
.admin-machine-download-cell .admin-machine-icon-button {
    margin-left: 0;
}

#admin_machine_table td.admin-machine-dealer-cell,
#admin_machine_table td.admin-machine-type-cell,
#admin_machine_table td.admin-machine-sysbuild-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#admin_machine_table td.admin-machine-dealer-cell {
    width: 96px;
}

#admin_machine_table td.admin-machine-type-cell {
    width: 106px;
}

#admin_machine_table td.admin-machine-sysbuild-cell {
    width: 173px;
    max-width: 173px;
}

#admin_machine_table th.admin-machine-sysbuild-col {
    width: 173px;
    max-width: 173px;
}

.machine-sysbuild-stack {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    gap: 0;
    line-height: 1.08;
}

.machine-sysbuild-selected {
    display: flex;
    overflow: hidden;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.machine-sysbuild-selected-text {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.machine-sysbuild-selected-text {
    display: inline-block;
    flex: 1 1 auto;
}

.machine-sysbuild-match-icon {
    flex: 0 0 auto;
    color: #2f9e44;
    font-size: .68rem;
    line-height: 1;
}

.machine-sysbuild-mismatch-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: .58rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #868e96;
    font-size: .5rem;
    line-height: .45rem;
}

.machine-sysbuild-mismatch-icon i {
    display: block;
    height: .45rem;
    line-height: .45rem;
}

.admin-machine-dealer-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: #212529;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.admin-machine-dealer-link:hover {
    color: #0d6efd;
}

.admin-machine-date-cell {
    width: 108px;
    overflow: hidden;
    color: #495057;
    font-family: inherit;
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-machine-online-cell {
    width: 172px;
}

.admin-machine-download-icon {
    pointer-events: none;
}

.admin-machine-download-button:hover {
    border-color: #9ec5fe;
    background: #e7f1ff;
    color: #0d6efd;
}

#admin_machine_table td.admin-machine-comment-cell,
#admin_machine_table th.comment-col {
    width: 298px;
    min-width: 298px;
    max-width: 298px;
    white-space: normal !important;
}

#admin_machine_table td.admin-machine-comment-cell .comment-text {
    color: #495057;
    font-size: .92rem;
    line-height: 1.25;
    -webkit-line-clamp: 3;
}

.admin-machine-comment-input {
    min-height: 8rem;
}

.admin-machine-comment-help {
    margin-top: .35rem;
    color: #6c757d;
    font-size: .82rem;
}

.admin-machine-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6c757d;
}

.admin-machines-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
    color: #6c757d;
    font-size: .9rem;
}

@media (max-width: 991.98px) {
    .admin-machines-toolbar {
        align-items: flex-start;
    }

    .admin-machines-total {
        width: 100%;
        justify-content: space-between;
    }

    .admin-machines-pagination {
        justify-content: flex-start;
    }
}

/* Dealer dashboard tables */
.dealer-dashboard-panel {
    --dealer-dashboard-border: #dde5ed;
    --dealer-dashboard-header: #edf2f7;
    --dealer-dashboard-hover: #f2f7fb;
    --dealer-dashboard-table-width: 1286px;
    width: min(calc(100vw - 2rem), calc(var(--dealer-dashboard-table-width) + 2.25rem));
    max-width: min(calc(100vw - 2rem), calc(var(--dealer-dashboard-table-width) + 2.25rem));
}

.dealer-dashboard-panel > h3.text-center {
    display: none;
}

.dealer-dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.dealer-dashboard-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: #495057;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
}

.dealer-dashboard-title i {
    width: 1.25rem;
    color: #0d6efd;
    font-size: 1.15rem;
    text-align: center;
}

.dealer-machine-types-title i {
    color: #198754;
}

.dealer-dashboard-total {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.125rem;
    padding: .35rem .75rem;
    border: 1px solid #cfe2ff;
    border-radius: .5rem;
    background: #e7f1ff;
    color: #245c95;
    font-weight: 600;
    white-space: nowrap;
}

.dealer-dashboard-total i {
    width: 1rem;
    text-align: center;
}

.dealer-machine-types-total {
    border-color: #badbcc;
    background: #e9f7ef;
    color: #276c3d;
}

.dealer-dashboard-search-row {
    margin-bottom: .25rem;
}

.dealer-dashboard-search-row .input-group {
    max-width: 680px;
}

.dealer-dashboard-search-row .form-control {
    border-color: #d7e1ea;
    border-radius: .375rem 0 0 .375rem;
}

.dealer-dashboard-search-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 6.5rem;
}

.dealer-dashboard-panel #clearSearchBtn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: .15rem 0 .75rem .1rem;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: .86rem;
    line-height: 1.3;
    cursor: pointer;
}

.dealer-dashboard-panel #clearSearchBtn:hover,
.dealer-dashboard-panel #clearSearchBtn:focus {
    color: #0d6efd;
}

.dealer-dashboard-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid var(--dealer-dashboard-border);
    border-radius: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.dealer-dashboard-pagination {
    display: flex;
    justify-content: flex-start;
    padding: .35rem .5rem .2rem;
}

.dealer-dashboard-pagination .pagination {
    margin-bottom: 0;
}

#machine_table.dealer-machines-table,
#machine_type_table.dealer-machine-types-table {
    width: var(--dealer-dashboard-table-width);
    min-width: var(--dealer-dashboard-table-width);
    max-width: var(--dealer-dashboard-table-width);
    margin-bottom: 0;
    border-color: var(--dealer-dashboard-border);
    font-size: 13px;
}

#machine_table.dealer-machines-table {
    table-layout: fixed;
}

#machine_table.dealer-machines-table > :not(caption) > * > *,
#machine_type_table.dealer-machine-types-table > :not(caption) > * > * {
    border-color: var(--dealer-dashboard-border);
}

#machine_table.dealer-machines-table > thead > tr > th,
#machine_type_table.dealer-machine-types-table > thead > tr > th {
    padding: .45rem .45rem;
    background: var(--dealer-dashboard-header);
    color: #495057;
    font-weight: 600;
    vertical-align: middle;
    border-bottom: 1px solid #d4dde7;
}

#machine_table.dealer-machines-table > tbody > tr > td,
#machine_type_table.dealer-machine-types-table > tbody > tr > td {
    padding: .36rem .45rem;
    vertical-align: middle;
}

#machine_table.dealer-machines-table > tbody > tr:nth-child(even) > td,
#machine_type_table.dealer-machine-types-table > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

#machine_table.dealer-machines-table > tbody > tr.dealer-machine-row:hover > td,
#machine_type_table.dealer-machine-types-table > tbody > tr.dealer-machine-type-row:hover > td {
    background: var(--dealer-dashboard-hover);
}

#machine_table .admin-machine-sort-btn {
    gap: .28rem;
    min-width: 0;
}

#machine_table .admin-machine-sort-btn .sort-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#machine_table .admin-machine-sort-btn .sort-indicator {
    color: #9aa7b4;
    font-size: .82rem;
}

#machine_table td.dealer-machine-serial-cell {
    width: 132px;
    overflow: hidden;
    color: #212529;
    font-size: .96rem;
    white-space: nowrap;
}

#machine_table td.dealer-machine-serial-cell .admin-machine-serial {
    max-width: calc(100% - 2.2rem);
}

#machine_table td.dealer-machine-type-cell {
    width: 142px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#machine_table td.dealer-machine-version-cell {
    width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#machine_table td.dealer-machine-sysbuild-cell {
    width: 173px;
    max-width: 173px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#machine_table td.dealer-machine-credit-cell {
    width: 178px;
    overflow: hidden;
    color: #495057;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#machine_table td.admin-machine-online-cell {
    width: 190px;
}

#machine_table td.dealer-machine-type-date-cell,
#machine_table td.dealer-machine-date-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dealer-machine-action-col,
.dealer-machine-action-cell,
.dealer-machine-type-settings-col,
.dealer-machine-type-settings-cell,
.dealer-machine-type-usage-col,
.dealer-machine-type-usage-cell,
.dealer-machine-type-action-col,
.dealer-machine-type-action-cell {
    width: 38px;
}

#machine_table td.admin-machine-settings-cell {
    width: 44px;
}

.dealer-machine-action-cell .admin-machine-icon-button,
.dealer-machine-type-action-cell .admin-machine-icon-button {
    margin-left: 0;
}

#machine_table.dealer-machines-table th:nth-child(1) { width: 128px; }
#machine_table.dealer-machines-table th:nth-child(2) { width: 44px; }
#machine_table.dealer-machines-table th:nth-child(3) { width: 128px; }
#machine_table.dealer-machines-table th:nth-child(4) { width: 173px; }
#machine_table.dealer-machines-table th:nth-child(5) { width: 120px; }
#machine_table.dealer-machines-table th:nth-child(6) { width: 150px; }
#machine_table.dealer-machines-table th:nth-child(7) { width: 156px; }
#machine_table.dealer-machines-table th:nth-child(8),
#machine_table.dealer-machines-table th:nth-child(9),
#machine_table.dealer-machines-table th:nth-child(10) { width: 38px; }

#machine_table.dealer-machines-table td.dealer-machine-notes-cell,
#machine_table.dealer-machines-table th.dealer-machine-notes-col {
    width: 260px;
    min-width: 200px;
    max-width: 280px;
    white-space: normal !important;
}

#machine_table.dealer-machines-table th.dealer-machine-sysbuild-col {
    width: 173px;
    max-width: 173px;
}

#machine_table.dealer-machines-table td.dealer-machine-notes-cell .comment-text {
    color: #495057;
    font-size: .92rem;
    line-height: 1.25;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.dealer-machine-notes-input {
    min-height: 6rem;
}

.dealer-machine-notes-help {
    margin-top: .35rem;
    color: #6c757d;
    font-size: .82rem;
}

#machine_type_table td.dealer-machine-type-name-cell,
#machine_type_table th.dealer-machine-type-name-col {
    width: 360px;
    min-width: 260px;
    max-width: 460px;
    overflow: hidden;
    white-space: nowrap;
}

.dealer-machine-type-name {
    display: inline-block;
    max-width: calc(100% - 2.25rem);
    margin-right: .36rem;
    overflow: hidden;
    color: #212529;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

#machine_type_table td.dealer-machine-type-name-cell .admin-machine-icon-button,
#machine_type_table td.dealer-machine-type-settings-cell .admin-machine-icon-button {
    margin-left: 0;
}

#machine_type_table td.dealer-machine-type-date-cell {
    min-width: 82px;
}

#machine_type_table th.dealer-machine-type-usage-col,
#machine_type_table td.dealer-machine-type-usage-cell,
#machine_type_table th.dealer-machine-type-action-col,
#machine_type_table td.dealer-machine-type-action-cell {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding-left: .2rem;
    padding-right: .2rem;
    white-space: nowrap;
}

#machine_type_table td.dealer-machine-type-comment-cell,
#machine_type_table th.dealer-machine-type-comment-col {
    width: 300px;
    min-width: 220px;
    max-width: 360px;
    white-space: normal !important;
}

#machine_type_table td.dealer-machine-type-comment-cell .comment-text {
    color: #495057;
    font-size: .92rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.dealer-machine-type-usage-number {
    color: #245c95;
    font-weight: 700;
}

.dealer-machine-delete-button {
    color: #8f1d1d;
}

.dealer-machine-delete-button:hover {
    border-color: #f1b0b7;
    background: #f8d7da;
    color: #842029;
}

.dealer-dashboard-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6c757d;
}

.dealer-dashboard-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
    color: #6c757d;
    font-size: .9rem;
}

.dealer-dashboard-upload {
    width: min(100%, 680px);
    margin: .9rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid #e4e9ef;
    --bs-gutter-x: 0;
}

.dealer-dashboard-upload .form-label {
    margin-bottom: .35rem;
    color: #495057;
    font-weight: 600;
}

.dealer-dashboard-upload .form-control {
    border-color: #d7e1ea;
}

.dealer-dashboard-upload .form-text {
    margin-top: .35rem;
    color: #7a8794;
}

.dealer-dashboard-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: .9rem;
}

@media (max-width: 991.98px) {
    .dealer-dashboard-toolbar {
        align-items: flex-start;
    }

    .dealer-dashboard-total {
        width: 100%;
        justify-content: space-between;
    }

    .dealer-dashboard-pagination {
        justify-content: flex-start;
    }
}

#machineSettingsModal .modal-dialog,
#machineTypeSettingsModal .modal-dialog {
    max-width: 52rem;
}

#machineSettingsLoading,
#machineTypeSettingsLoading {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    width: min(100%, 42rem);
    margin: 0 auto;
}

#machineSettingsFormMount,
#machineTypeSettingsFormMount {
    /* Внутренний скролл намеренно убран:
     * modal-dialog-scrollable уже даёт единственную, чётко ограниченную
     * область прокрутки между фиксированным header и footer, поэтому
     * двойной скролл (и ощущение "прокрутки в пустоту") пропадает. */
    width: min(100%, 42rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.machine-settings-meta {
    width: min(100%, 42rem);
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 0.75rem;
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: #eef2f7;
    border-left: 3px solid #0d6efd;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.01em;
    word-break: break-all;
}

.machine-settings-meta:empty {
    display: none;
}

#machineSettingsModalAlert,
#machineTypeSettingsModalAlert {
    width: min(100%, 42rem);
    margin-left: auto;
    margin-right: auto;
}

/* Модалка настроек: единая область скролла с заметной границей.
 * Header/footer "залипают", скроллится только середина с формой. */
#machineSettingsModal .modal-content,
#machineTypeSettingsModal .modal-content {
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

#machineSettingsModal .modal-header,
#machineTypeSettingsModal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

#machineSettingsModal .modal-footer,
#machineTypeSettingsModal .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

#machineSettingsModal .modal-body,
#machineTypeSettingsModal .modal-body {
    background-color: #fdfdfe;
    padding: 1rem 1.25rem 1.5rem;
}

/* Аккуратный, более заметный скроллбар для области с формой */
#machineSettingsModal .modal-body,
#machineTypeSettingsModal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #f1f3f5;
}

#machineSettingsModal .modal-body::-webkit-scrollbar,
#machineTypeSettingsModal .modal-body::-webkit-scrollbar {
    width: 10px;
}

#machineSettingsModal .modal-body::-webkit-scrollbar-track,
#machineTypeSettingsModal .modal-body::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 5px;
}

#machineSettingsModal .modal-body::-webkit-scrollbar-thumb,
#machineTypeSettingsModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #adb5bd;
    border-radius: 5px;
    border: 2px solid #f1f3f5;
}

#machineSettingsModal .modal-body::-webkit-scrollbar-thumb:hover,
#machineTypeSettingsModal .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: #868e96;
}

#machineSettingsLoading,
#machineTypeSettingsLoading {
    width: min(100%, 42rem);
    margin: 1.5rem auto;
    text-align: center;
    color: #495057;
    font-style: italic;
}

/* =========================================================================
 * Admin dashboard shared layout (BS5 native)
 * ------------------------------------------------------------------------- */

/* Stat-card tile used on admin.php (big icon + count) */
.admin-stat-card {
    cursor: pointer;
    user-select: none;
    border: 1px solid rgba(0, 0, 0, .125);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    transition: transform .12s ease, box-shadow .12s ease;
}
.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .2rem .45rem rgba(0, 0, 0, .1);
}
.admin-stat-card .card-header,
.admin-stat-card .card-footer {
    background-color: #f8f9fa;
    border-color: rgba(0, 0, 0, .125);
    min-height: 2.5rem;
    font-weight: 500;
}
.admin-stat-card .card-header {
    padding: .5rem .75rem;
}
.admin-stat-card .card-footer {
    padding: 0;
}
.admin-stat-card .card-body {
    padding: 1rem .75rem;
    background-color: #ffffff;
}
.admin-stat-card .admin-stat-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
}
.admin-stat-card .admin-stat-value i {
    flex: 0 0 auto;
    margin-right: 0;
}

/* Role icon pills (replace old .role-* color-only rules with a pill look) */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .4rem;
    margin-right: .25rem;
    border-radius: .5rem;
    font-size: .8rem;
    line-height: 1.1;
    color: #fff;
    user-select: none;
    white-space: nowrap;
}
.role-badge i { font-size: .85rem; }
.role-badge-admin   { background-color: #dc3545; }
.role-badge-dealer  { background-color: #198754; }
.role-badge-user    { background-color: #6c757d; }

/* Shared back links */
.site-back-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.site-back-actions-center {
    justify-content: center;
}

.site-back-actions-start {
    justify-content: flex-start;
}

.site-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.15rem;
    padding: .35rem .7rem;
    border: 1px solid #d6e0ea;
    border-radius: 6px;
    background: #ffffff;
    color: #245c95;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(31, 45, 61, .06);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.site-back-link i {
    color: #6d7c8c;
    font-size: .82rem;
}

.site-back-link:hover,
.site-back-link:focus {
    border-color: #9ec5fe;
    background: #f2f7ff;
    color: #0d5cab;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(13, 92, 171, .12);
}

.site-back-link:hover i,
.site-back-link:focus i {
    color: #0d5cab;
}

/* Admin user profile page */
.admin-user-page {
    min-height: calc(100vh - 120px);
}

.admin-user-shell {
    max-width: 1120px;
}

.admin-user-back-actions {
    margin-bottom: .9rem;
}

.admin-user-form {
    margin: 0;
    padding: 1rem;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 8px 22px rgba(31, 45, 61, .08);
}

.admin-user-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.admin-user-avatar-wrap {
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #f6f8fb;
}

.admin-user-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-heading {
    min-width: 0;
}

.admin-user-kicker {
    margin-bottom: .15rem;
    color: #6c757d;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .84rem;
    line-height: 1.2;
}

.admin-user-heading h1 {
    margin: 0;
    overflow: hidden;
    color: #1f2933;
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-subtitle {
    margin-top: .2rem;
    overflow: hidden;
    color: #65758b;
    font-size: .95rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-role-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .55rem;
}

.admin-user-muted-pill,
.admin-user-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 6px;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.admin-user-muted-pill {
    padding: .22rem .48rem;
    border: 1px solid #dde4eb;
    background: #f4f6f8;
    color: #7b8794;
}

.admin-user-state {
    justify-self: end;
    padding: .42rem .62rem;
    border: 1px solid transparent;
}

.admin-user-state-active {
    border-color: #b7dfc4;
    background: #eaf7ef;
    color: #217645;
}

.admin-user-state-blocked {
    border-color: #f1b6bd;
    background: #fff1f2;
    color: #b02a37;
}

.admin-user-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 1rem;
    align-items: stretch;
}

.admin-user-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.admin-user-profile-panel,
.admin-user-permissions-panel {
    grid-column: 1;
}

.admin-user-info-panel,
.admin-user-security-panel {
    grid-column: 2;
}

.admin-user-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid #e3e9ef;
    background: #edf2f7;
    border-radius: 8px 8px 0 0;
}

.admin-user-panel-header h2 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: #2f3b47;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-user-panel-header h2 i {
    color: #53708e;
    font-size: .95rem;
}

.admin-user-panel-note {
    color: #6c757d;
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-user-panel-body {
    flex: 1 1 auto;
    padding: .9rem;
}

.admin-user-field-grid,
.admin-user-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.admin-user-field {
    min-width: 0;
}

.admin-user-field .form-label {
    margin-bottom: .32rem;
    color: #344054;
    font-size: .86rem;
    font-weight: 700;
}

.admin-user-field .form-control {
    min-height: 2.35rem;
    border-color: #cbd5e1;
    border-radius: 6px;
    box-shadow: none;
}

.admin-user-field .form-control:focus {
    border-color: #4c91d9;
    box-shadow: 0 0 0 3px rgba(76, 145, 217, .14);
}

.admin-user-facts {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.admin-user-facts div {
    padding: .58rem .65rem;
    border: 1px solid #e3e9ef;
    border-radius: 6px;
    background: #f8fafc;
}

.admin-user-facts dt {
    margin-bottom: .12rem;
    color: #6c757d;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-user-facts dd {
    margin: 0;
    overflow: hidden;
    color: #2f3b47;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .9rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-permission-list {
    display: grid;
    gap: .5rem;
}

.admin-user-permission-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    min-height: 3.1rem;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid #dde4eb;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.admin-user-permission-card:hover {
    border-color: #b8c8d8;
    background: #f8fafc;
    box-shadow: 0 3px 10px rgba(31, 45, 61, .08);
}

.admin-user-permission-input {
    position: absolute;
    opacity: 0;
    transform: none !important;
}

.admin-user-permission-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.4rem;
    height: 1.32rem;
    border: 1px solid #c4ced8;
    border-radius: 999px;
    background: #e9eef3;
    transition: background-color .12s ease, border-color .12s ease;
}

.admin-user-permission-toggle span {
    position: absolute;
    left: .14rem;
    width: .96rem;
    height: .96rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(31, 45, 61, .22);
    transition: transform .12s ease;
}

.admin-user-permission-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .14rem;
}

.admin-user-permission-title {
    color: #26323f;
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-user-permission-id {
    color: #7b8794;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .78rem;
    line-height: 1.2;
}

.admin-user-permission-status {
    margin-left: auto;
    flex: 0 0 auto;
    padding: .18rem .42rem;
    border: 1px solid #dde4eb;
    border-radius: 6px;
    background: #ffffff;
    color: #7b8794;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-user-permission-card.is-active {
    background: #eef6ff;
    border-color: #5ca8f2;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .12);
}

.admin-user-permission-card.is-active .admin-user-permission-toggle {
    border-color: #4c91d9;
    background: #0d6efd;
}

.admin-user-permission-card.is-active .admin-user-permission-toggle span {
    transform: translateX(1.08rem);
}

.admin-user-permission-card.is-active .admin-user-permission-title {
    color: #102a43;
}

.admin-user-permission-card.is-active .admin-user-permission-status {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #ffffff;
}

.admin-user-permission-admin.is-active {
    border-color: #e7a2aa;
    background: #fff3f4;
}

.admin-user-permission-admin.is-active .admin-user-permission-toggle {
    border-color: #dc3545;
    background: #dc3545;
}

.admin-user-permission-admin.is-active .admin-user-permission-status {
    border-color: #dc3545;
    background: #dc3545;
}

.admin-user-permission-dealer.is-active {
    border-color: #75b798;
    background: #e9f7ef;
}

.admin-user-permission-dealer.is-active .admin-user-permission-toggle {
    border-color: #198754;
    background: #198754;
}

.admin-user-permission-dealer.is-active .admin-user-permission-status {
    border-color: #198754;
    background: #198754;
}

.admin-user-permission-user.is-active {
    border-color: #bfc8d2;
    background: #f4f6f8;
}

.admin-user-permission-user.is-active .admin-user-permission-toggle {
    border-color: #6c757d;
    background: #6c757d;
}

.admin-user-permission-user.is-active .admin-user-permission-status {
    border-color: #6c757d;
    background: #6c757d;
}

.admin-user-status-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .9rem;
}

.admin-user-status-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.admin-user-status-option input {
    position: absolute;
    opacity: 0;
    transform: none !important;
}

.admin-user-status-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.45rem;
    padding: .45rem .55rem;
    border: 1px solid #dde4eb;
    border-radius: 6px;
    background: #f8fafc;
    color: #52606d;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.15;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.admin-user-status-option.is-active span {
    border-color: #9ec5fe;
    background: #eaf4ff;
    color: #0d5cab;
}

.admin-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1rem;
    padding: .75rem;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.admin-user-save,
.admin-user-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.35rem;
    border-radius: 6px;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .admin-user-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-profile-panel,
    .admin-user-permissions-panel,
    .admin-user-info-panel,
    .admin-user-security-panel {
        grid-column: auto;
    }

    .admin-user-info-panel {
        order: -1;
    }
}

@media (max-width: 767.98px) {
    .admin-user-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-user-state {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .admin-user-field-grid,
    .admin-user-password-grid,
    .admin-user-status-choice {
        grid-template-columns: 1fr;
    }

    .admin-user-actions {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 420px) {
    .admin-user-hero {
        grid-template-columns: 1fr;
    }

    .admin-user-avatar-wrap {
        width: 72px;
        height: 72px;
    }

    .admin-user-heading h1 {
        font-size: 1.45rem;
    }
}

/* Admin dealers table */
.admin-dealers-panel {
    --dealer-table-border: #dde5ed;
    --dealer-table-header: #edf2f7;
    --dealer-table-hover: #f2f7fb;
}

.admin-dealers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.admin-dealers-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: #495057;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-dealers-title i {
    color: #198754;
    font-size: 1.2rem;
    width: 1.25rem;
    text-align: center;
}

.admin-dealers-total {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.125rem;
    padding: .35rem .75rem;
    border: 1px solid #cfe8d5;
    border-radius: .5rem;
    background: #e6f4ea;
    color: #276c3d;
    font-weight: 600;
    white-space: nowrap;
}

.admin-dealers-total i {
    width: 1rem;
    text-align: center;
}

.admin-dealers-table-wrap {
    background: #ffffff;
    border: 1px solid var(--dealer-table-border);
    border-radius: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-dealers-table-wrap #table-container {
    min-width: 720px;
}

.admin-dealers-pagination {
    display: flex;
    justify-content: flex-end;
    padding: .35rem .5rem .2rem;
}

.admin-dealers-pagination .pagination {
    margin-bottom: 0;
}

#admin_dealer_table.admin-dealers-table {
    min-width: 720px;
    margin-bottom: 0;
    border-color: var(--dealer-table-border);
    font-size: 14px;
}

#admin_dealer_table.admin-dealers-table > :not(caption) > * > * {
    border-color: var(--dealer-table-border);
}

#admin_dealer_table.admin-dealers-table > thead > tr > th {
    padding: .65rem .75rem;
    background: var(--dealer-table-header);
    color: #495057;
    font-weight: 600;
    vertical-align: middle;
    border-bottom: 1px solid #d4dde7;
}

#admin_dealer_table.admin-dealers-table > tbody > tr > td {
    padding: .65rem .75rem;
    vertical-align: middle;
}

#admin_dealer_table.admin-dealers-table > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

#admin_dealer_table.admin-dealers-table > tbody > tr.admin-dealer-row:hover > td {
    background: var(--dealer-table-hover);
}

.admin-dealer-id-col,
.admin-dealer-id-cell {
    width: 90px;
}

.dealer-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: .18rem .45rem;
    border: 1px solid #dde4eb;
    border-radius: .375rem;
    background: #f3f5f7;
    color: #5c6773;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .86rem;
    line-height: 1.3;
}

.dealer-profile-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: 100%;
    min-width: 0;
    color: #212529;
    text-decoration: none;
}

.dealer-profile-link:hover .dealer-name {
    color: #0d6efd;
}

.dealer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid #cfe8d5;
    border-radius: 50%;
    background: #e6f4ea;
    color: #276c3d;
    font-weight: 700;
    line-height: 1;
}

.dealer-profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dealer-name {
    max-width: 260px;
    overflow: hidden;
    color: #212529;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dealer-email-cell {
    max-width: 340px;
}

.dealer-email-wrap {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    color: #6c757d;
}

.dealer-email-wrap i {
    color: #9aa7b4;
    width: 1rem;
    text-align: center;
}

.dealer-email-link {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    color: #495057;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

a.dealer-email-link:hover {
    color: #0d6efd;
}

.dealer-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
}

.dealer-count-machine {
    color: #245c95;
}

.dealer-count-type {
    color: #236b70;
}

.dealer-count-empty {
    color: #8a96a3;
}

.dealer-empty {
    color: #adb5bd;
}

.admin-dealer-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6c757d;
}

.admin-dealers-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
    color: #6c757d;
    font-size: .9rem;
}

@media (max-width: 767.98px) {
    .admin-dealers-toolbar {
        align-items: flex-start;
    }

    .admin-dealers-total {
        width: 100%;
        justify-content: space-between;
    }

    .admin-dealers-table-wrap #table-container,
    #admin_dealer_table.admin-dealers-table {
        min-width: 640px;
    }

    .dealer-email-link {
        max-width: 220px;
    }

    .admin-dealers-pagination {
        justify-content: flex-start;
    }
}

/* Admin system builds table */
.admin-sysbuilds-panel {
    --sysbuild-table-border: #dde5ed;
    --sysbuild-table-header: #edf2f7;
    --sysbuild-table-hover: #f2f7fb;
}

.admin-sysbuilds-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.admin-sysbuilds-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: #495057;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-sysbuilds-title i {
    width: 1.25rem;
    color: #0d6efd;
    font-size: 1.2rem;
    text-align: center;
}

.admin-sysbuilds-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.admin-sysbuilds-total {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.125rem;
    padding: .35rem .75rem;
    border: 1px solid #cfe2ff;
    border-radius: .5rem;
    background: #e7f1ff;
    color: #245c95;
    font-weight: 600;
    white-space: nowrap;
}

.admin-sysbuilds-total i {
    width: 1rem;
    text-align: center;
}

.admin-sysbuilds-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.125rem;
    white-space: nowrap;
}

.admin-sysbuilds-action-btn i {
    width: 1rem;
    text-align: center;
}

.admin-sysbuilds-table-wrap {
    background: #ffffff;
    border: 1px solid var(--sysbuild-table-border);
    border-radius: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-sysbuilds-table-wrap #table-container {
    min-width: 1180px;
}

.admin-sysbuilds-pagination {
    display: flex;
    justify-content: flex-end;
    padding: .35rem .5rem .2rem;
}

.admin-sysbuilds-pagination .pagination {
    margin-bottom: 0;
}

#admin_sysbuilds_table.admin-sysbuilds-table {
    min-width: 1180px;
    margin-bottom: 0;
    border-color: var(--sysbuild-table-border);
    font-size: 13.5px;
}

#admin_sysbuilds_table.admin-sysbuilds-table > :not(caption) > * > * {
    border-color: var(--sysbuild-table-border);
}

#admin_sysbuilds_table.admin-sysbuilds-table > thead > tr > th {
    padding: .65rem .75rem;
    background: var(--sysbuild-table-header);
    color: #495057;
    font-weight: 600;
    vertical-align: middle;
    border-bottom: 1px solid #d4dde7;
}

#admin_sysbuilds_table.admin-sysbuilds-table > tbody > tr > td {
    padding: .65rem .75rem;
    vertical-align: middle;
}

#admin_sysbuilds_table.admin-sysbuilds-table > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

#admin_sysbuilds_table.admin-sysbuilds-table > tbody > tr.admin-sysbuild-row:hover > td {
    background: var(--sysbuild-table-hover);
}

.admin-sysbuild-id-cell {
    width: 86px;
}

.sysbuild-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: .18rem .45rem;
    border: 1px solid #dde4eb;
    border-radius: .375rem;
    background: #f3f5f7;
    color: #5c6773;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .86rem;
    line-height: 1.3;
}

.sysbuild-build-cell {
    min-width: 190px;
    max-width: 260px;
}

.sysbuild-build-wrap,
.sysbuild-date-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sysbuild-build-title {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    min-width: 0;
}

.sysbuild-build-name {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    color: #212529;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysbuild-debug-label {
    flex: 0 0 auto;
    color: #dc3545;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.sysbuild-build-title .admin-machine-icon-button {
    flex: 0 0 auto;
    margin-left: 0;
}

.sysbuild-edit-button:hover {
    border-color: #9ec5fe;
    background: #e7f1ff;
    color: #0d6efd;
}

.sysbuild-build-file {
    max-width: 240px;
    overflow: hidden;
    color: #6c757d;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .78rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysbuild-created-cell {
    min-width: 112px;
}

.sysbuild-date {
    color: #212529;
    font-weight: 600;
    line-height: 1.2;
}

.sysbuild-time {
    color: #6c757d;
    font-size: .78rem;
    line-height: 1.25;
}

.sysbuild-version-cell {
    width: 92px;
}

.sysbuild-version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.sysbuild-firmware-version {
    color: #245c95;
}

.sysbuild-webui-version {
    color: #236b70;
}

.sysbuild-size-cell {
    min-width: 112px;
    color: #495057;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-weight: 600;
}

.sysbuild-usage-cell {
    width: 74px;
}

.sysbuild-usage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 .25rem;
    color: #245c95;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.sysbuild-usage-empty {
    color: #8a96a3;
}

.sysbuild-comment-cell,
#admin_sysbuilds_table th.sysbuild-comment-col {
    min-width: 220px;
    max-width: 360px;
    white-space: normal !important;
}

.sysbuild-comment-text {
    display: -webkit-box;
    overflow: hidden;
    color: #495057;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sysbuild-action-cell {
    width: 54px;
}

.sysbuild-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #d7e1ea;
    border-radius: .375rem;
    background: #ffffff;
    color: #6c757d;
    line-height: 1;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.sysbuild-action-button i {
    width: 1rem;
    text-align: center;
}

.sysbuild-download-button:hover {
    border-color: #9ec5fe;
    background: #e7f1ff;
    color: #0d6efd;
}

.sysbuild-delete-button:hover {
    border-color: #f1aeb5;
    background: #f8d7da;
    color: #b02a37;
}

.sysbuild-action-disabled,
.sysbuild-action-disabled:disabled {
    border-color: #e6ebf0;
    background: #f5f7f9;
    color: #b0b8c0;
    cursor: not-allowed;
    opacity: 1;
}

.admin-sysbuild-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6c757d;
}

.admin-sysbuilds-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
    color: #6c757d;
    font-size: .9rem;
}

@media (max-width: 991.98px) {
    .admin-sysbuilds-toolbar {
        align-items: flex-start;
    }

    .admin-sysbuilds-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .admin-sysbuilds-table-wrap #table-container,
    #admin_sysbuilds_table.admin-sysbuilds-table {
        min-width: 1080px;
    }
}

@media (max-width: 575.98px) {
    .admin-sysbuilds-total,
    .admin-sysbuilds-action-btn {
        width: 100%;
    }
}

/* Event logs filter bar */
.event-logs-filter-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Event logs colored pills for Категория / Уровень / Статус.
   Bootstrap 5.1.3 does not include .text-bg-* helpers, so we declare
   our own pill style matching .role-badge visual. */
.event-log-pill {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: .5rem;
    font-size: .8rem;
    line-height: 1.1;
    font-weight: 500;
    color: #495057;
    user-select: none;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, .08);
}
.event-log-pill-secondary { background-color: #e9ecef; color: #495057; }
.event-log-pill-api       { background-color: #fdebd0; color: #7d4c0a; }
.event-log-pill-info      { background-color: #e9ecef; color: #6c757d; }
.event-log-pill-warning   { background-color: #f9f1df; color: #8a6d3b; }
.event-log-pill-danger    { background-color: #f7e4e2; color: #a94442; }
.event-log-pill-success   { background-color: #e5f3e8; color: #3c763d; }
.event-log-pill-primary   { background-color: #e8eef6; color: #4a6785; }

/* Expanded detail row shares the table body background
   (less grey, matches white striped table rows). */
.event-logs-table + * .event-log-details-row > td,
.event-log-details-row > td {
    background: #ffffff;
}

/* Metadata rendered as a code block */
.event-log-metadata-code {
    display: block;
    background: #f3f5f7;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: .75rem 1rem;
    border-radius: .375rem;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    margin: 0;
}

/* Event logs styles moved from users/event_logs.php */
.event-logs-shell {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
    }

    .event-logs-table {
        font-size: 13px;
        --event-log-row-bg: #ffffff;
        --event-log-row-alt-bg: #fbfcfd;
        --event-log-row-active-bg: #f8f9fa;
        --event-log-border: #e2e8ee;
    }

    .event-logs-table-wrap {
        background: #ffffff;
        border: 1px solid var(--event-log-border);
        border-radius: .375rem;
        overflow: hidden;
    }

    .event-logs-table.table {
        margin-bottom: 0;
        border-color: var(--event-log-border);
    }

    .event-logs-table > :not(caption) > * > * {
        border-color: var(--event-log-border);
    }

    .event-logs-table > tbody > tr > td {
        background: var(--event-log-row-bg);
    }

    .event-logs-table.table-striped > tbody > tr:nth-of-type(odd) > td {
        background: var(--event-log-row-alt-bg);
    }

    .event-logs-table > thead > tr > th,
    .event-logs-table > tbody > tr > td {
        padding: 6px 8px;
        vertical-align: top;
        line-height: 1.3;
    }

    .event-logs-table > thead > tr > th {
        background: #edf1f5;
        color: #495057;
        font-weight: 600;
    }

    .event-log-sort-link {
        color: #495057;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        text-decoration: none;
    }

    .event-log-sort-link:hover {
        color: #0d6efd;
    }

    .event-log-sort-arrow {
        color: #9aa7b4;
        font-size: 11px;
        line-height: 1;
    }

    .event-log-main {
        font-weight: 500;
        color: #212529;
    }

    .event-log-meta {
        color: #6c757d;
        font-size: 12px;
        margin-top: 2px;
    }

    .event-log-message-cell {
        min-width: 270px;
        max-width: 420px;
    }

    .event-log-request-cell {
        min-width: 220px;
        max-width: 340px;
    }

    .event-log-message-preview,
    .event-log-error-preview,
    .event-log-inline-ellipsis {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .event-log-error-preview {
        color: #a94442;
        font-size: 11px;
        margin-top: 2px;
    }

    .event-log-row-clickable {
        cursor: pointer;
    }

    .event-log-row-clickable:hover > td {
        background: var(--event-log-row-active-bg);
    }

    .event-log-row-clickable:hover + .event-log-details-row > td {
        background: var(--event-log-row-active-bg);
    }

    .event-log-row-clickable.is-expanded > td {
        background: var(--event-log-row-active-bg);
    }

    .event-log-row-clickable.is-expanded + .event-log-details-row > td {
        background: var(--event-log-row-active-bg);
    }

    .event-log-details-row {
        --bs-table-bg: var(--event-log-row-active-bg);
        --bs-table-accent-bg: transparent;
        --bs-table-hover-bg: transparent;
        --bs-table-striped-bg: transparent;
        --bs-table-active-bg: transparent;
    }

    .event-log-details-row > td {
        background: var(--event-log-row-active-bg);
        box-shadow: none !important;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: left;
    }

    .event-log-details-row:hover > td {
        background: var(--event-log-row-active-bg) !important;
    }

.event-log-details-row,
.event-log-details-row:hover {
    cursor: default;
}

.event-log-details-row-hidden {
    display: none;
}

.event-log-details-grid {
    display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: left;
    }

    .event-log-details-block strong {
        display: block;
        margin-bottom: 4px;
        color: #495057;
    }

    .event-log-details-plain strong {
        display: block;
        margin-bottom: 4px;
        color: #495057;
    }

    .event-log-details-block {
        background: #f8fafc;
        border: 1px solid var(--event-log-border);
        border-radius: .375rem;
        padding: .75rem .875rem;
    }

    .event-log-details-block pre {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
        overflow: visible;
    }

    .event-log-change-line {
        margin-bottom: 4px;
    }

    .event-log-pagination {
        margin: 0 0 12px;
    }

    .event-log-pagination .page-link {
        color: #245c95;
    }

    .event-log-pagination .page-link:hover,
    .event-log-pagination .page-link:focus {
        color: #0d5cab;
    }
/* Extracted shared page styles */
.highlight-white-bg {
    background: #ffffff;
}

.webnc-user-name {
    margin-right: 5px;
}

.admin-pages-search {
    max-width: 400px;
}

.admin-pages-shell {
    max-width: 1180px;
}

.admin-pages-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-pages-heading h1 {
    margin: 0;
    color: #1f2933;
    font-size: 1.95rem;
    font-weight: 650;
    line-height: 1.15;
}

.admin-pages-subtitle {
    margin: .35rem 0 0;
    color: #65758b;
    font-size: .95rem;
}

.admin-pages-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.admin-pages-stat-card {
    min-width: 150px;
    padding: .85rem 1rem;
    border: 1px solid #dce4ed;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(31, 45, 61, .06);
}

.admin-pages-stat-label {
    color: #7b8794;
    font-size: .84rem;
    line-height: 1.2;
}

.admin-pages-stat-value {
    margin-top: .2rem;
    color: #1f2933;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
}

.admin-pages-panel {
    padding: 1rem;
    border: 1px solid #dce4ed;
    border-radius: 10px;
    background: #f8fafc;
    box-shadow: 0 8px 22px rgba(31, 45, 61, .08);
}

.admin-pages-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.admin-pages-search .form-control {
    border-color: #cbd5e1;
}

.admin-pages-search .btn {
    min-width: 2.8rem;
}

.admin-pages-table-wrap {
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 10px;
    background: #ffffff;
}

.admin-pages-table {
    margin-bottom: 0;
}

.admin-pages-table > thead > tr > th {
    background: #edf2f7;
    color: #495057;
    font-weight: 600;
    border-bottom-color: #dce4ed;
}

.admin-pages-table > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

.admin-pages-id-cell {
    width: 74px;
    color: #65758b;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .88rem;
    white-space: nowrap;
}

.admin-pages-link {
    color: #1f2933;
    font-weight: 600;
    text-decoration: none;
}

.admin-pages-link:hover,
.admin-pages-link:focus {
    color: #0d6efd;
    text-decoration: underline;
}

.admin-pages-path-note {
    display: block;
    margin-top: .16rem;
    color: #7b8794;
    font-size: .8rem;
    font-family: "Consolas", "Source Code Pro", monospace;
    word-break: break-word;
}

.admin-pages-access-link {
    text-decoration: none;
}

.admin-pages-access-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.admin-pages-access-pill i {
    font-size: .8rem;
}

.admin-pages-access-pill.is-public {
    color: #1d5f35;
    background: #e9f7ef;
    border: 1px solid #badbcc;
}

.admin-pages-access-pill.is-private {
    color: #8a2b34;
    background: #fbeaec;
    border: 1px solid #f1c2c7;
}

.admin-page-shell {
    max-width: 1220px;
}

.admin-page-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-page-heading h1 {
    margin: .2rem 0 0;
    color: #10233c;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.08;
}

.admin-page-kicker {
    color: #0d6efd;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-page-subtitle {
    margin: .45rem 0 0;
    max-width: 760px;
    color: #5f7187;
    font-size: .98rem;
    line-height: 1.55;
}

.admin-page-current-state {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-page-current-state.is-public {
    color: #1d5f35;
    background: #e9f7ef;
    border: 1px solid #badbcc;
}

.admin-page-current-state.is-private {
    color: #8a2b34;
    background: #fbeaec;
    border: 1px solid #f1c2c7;
}

.admin-page-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(180px, .6fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.admin-page-summary-card {
    padding: .95rem 1.05rem;
    border: 1px solid #dce4ed;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 22px rgba(31, 45, 61, .06);
}

.admin-page-summary-card.compact {
    min-width: 0;
}

.admin-page-summary-label {
    color: #7b8794;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.admin-page-summary-value {
    margin-top: .25rem;
    color: #10233c;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-page-summary-path {
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: 1rem;
    word-break: break-word;
}

.admin-page-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.admin-page-panel {
    padding: 1rem;
    border: 1px solid #dce4ed;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(31, 45, 61, .08);
}

.admin-page-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-page-step {
    display: inline-block;
    margin-bottom: .35rem;
    color: #0d6efd;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-page-panel-header h2 {
    margin: 0;
    color: #10233c;
    font-size: 1.28rem;
    font-weight: 700;
}

.admin-page-panel-note {
    max-width: 220px;
    color: #748396;
    font-size: .85rem;
    line-height: 1.45;
    text-align: right;
}

.admin-page-mode-grid {
    display: grid;
    gap: .8rem;
}

.admin-page-mode-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-page-mode-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem;
    border: 2px solid #dbe5ef;
    border-radius: 14px;
    background: #f8fbff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.admin-page-mode-card:hover {
    border-color: #9ec5fe;
    box-shadow: 0 8px 20px rgba(13, 110, 253, .08);
    transform: translateY(-1px);
}

.admin-page-mode-card.is-active {
    border-color: #0d6efd;
    background: #eef5ff;
    box-shadow: 0 12px 24px rgba(13, 110, 253, .12);
}

.admin-page-mode-card.is-private.is-active {
    border-color: #8a2b34;
    background: #fff4f5;
    box-shadow: 0 12px 24px rgba(138, 43, 52, .10);
}

.admin-page-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    background: #ffffff;
    color: #0d6efd;
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .08);
}

.admin-page-mode-card.is-private .admin-page-mode-icon {
    color: #8a2b34;
    box-shadow: inset 0 0 0 1px rgba(138, 43, 52, .08);
}

.admin-page-mode-title {
    color: #10233c;
    font-size: 1.08rem;
    font-weight: 700;
}

.admin-page-mode-text {
    color: #667789;
    font-size: .91rem;
    line-height: 1.55;
}

.admin-page-mode-helper {
    margin-top: .85rem;
    color: #667789;
    font-size: .9rem;
    line-height: 1.5;
}

.admin-page-alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    margin-bottom: .9rem;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.5;
}

.admin-page-alert i {
    margin-top: .12rem;
}

.admin-page-alert-warning {
    color: #7a3b00;
    background: #fff4d8;
    border: 1px solid #f2d38b;
}

.admin-page-alert-info {
    color: #245c95;
    background: #eef5ff;
    border: 1px solid #cfe2ff;
}

.admin-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: .95rem;
}

.admin-page-search-wrap {
    position: relative;
    flex: 1 1 360px;
    min-width: 260px;
}

.admin-page-search-wrap i {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: #7b8794;
}

.admin-page-search-wrap .form-control {
    padding-left: 2.55rem;
    min-height: 2.7rem;
    border-color: #cbd5e1;
}

.admin-page-toolbar-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.admin-page-toolbar-btn {
    min-width: 118px;
}

.admin-page-selected-block {
    margin-bottom: .95rem;
}

.admin-page-selected-label {
    margin-bottom: .45rem;
    color: #5f7187;
    font-size: .88rem;
    font-weight: 700;
}

.admin-page-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.admin-page-chip-placeholder {
    color: #7b8794;
    font-size: .9rem;
}

.admin-page-role-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .38rem .65rem;
    border: 1px solid #dce4ed;
    border-radius: 999px;
    background: #f8fafc;
    color: #243b53;
    font-size: .83rem;
    line-height: 1;
}

.admin-page-role-chip .role-id {
    color: #7b8794;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .76rem;
}

.admin-page-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .8rem;
}

.admin-page-role-card {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    min-height: 100%;
    padding: .9rem .95rem;
    border: 1px solid #dce4ed;
    border-radius: 14px;
    background: #fbfcfd;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}

.admin-page-role-card:hover {
    border-color: #b9c7d6;
    box-shadow: 0 8px 18px rgba(31, 45, 61, .06);
    transform: translateY(-1px);
}

.admin-page-role-card.is-selected {
    border-color: #0d6efd;
    background: #eef5ff;
    box-shadow: 0 10px 22px rgba(13, 110, 253, .10);
}

.admin-page-role-checkbox-wrap {
    padding-top: .2rem;
}

.admin-page-role-checkbox {
    transform: scale(1.2);
}

.admin-page-role-body {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-page-role-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.admin-page-role-name {
    color: #10233c;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-page-role-meta {
    display: block;
    margin-top: .28rem;
    color: #7b8794;
    font-size: .82rem;
    font-family: "Consolas", "Source Code Pro", monospace;
}

.admin-page-role-badge {
    display: inline-flex;
    align-items: center;
    padding: .24rem .48rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.admin-page-role-badge.is-admin {
    color: #8a2b34;
    background: #fbeaec;
    border: 1px solid #f1c2c7;
}

.admin-page-role-badge.is-dealer {
    color: #1d5f35;
    background: #e9f7ef;
    border: 1px solid #badbcc;
}

.admin-page-role-badge.is-user {
    color: #245c95;
    background: #eef5ff;
    border: 1px solid #cfe2ff;
}

.admin-page-role-badge.is-neutral {
    color: #51606f;
    background: #f4f7fa;
    border: 1px solid #dce4ed;
}

.admin-page-role-empty {
    padding: 1rem;
    border: 1px dashed #d2dae3;
    border-radius: 12px;
    color: #7b8794;
    background: #fbfcfd;
    font-size: .9rem;
}

.admin-page-savebar {
    position: sticky;
    bottom: .6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .95rem 1rem;
    border: 1px solid #dce4ed;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 30px rgba(31, 45, 61, .10);
    z-index: 5;
}

.admin-page-save-summary {
    color: #5f7187;
    font-size: .92rem;
    line-height: 1.45;
}

.admin-page-save-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.8rem;
    padding-inline: 1.1rem;
}

@media (max-width: 991.98px) {
    .admin-pages-header,
    .admin-pages-toolbar,
    .admin-page-topbar,
    .admin-page-panel-header,
    .admin-page-savebar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-page-current-state,
    .admin-page-panel-note {
        align-self: flex-start;
        text-align: left;
    }

    .admin-page-summary {
        grid-template-columns: 1fr;
    }

    .admin-page-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .admin-pages-search {
        max-width: none;
        width: 100%;
    }

    .admin-page-role-head,
    .admin-page-toolbar,
    .admin-page-toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-page-toolbar-btn,
    .admin-page-save-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-page-mode-card,
    .admin-page-role-card,
    .admin-page-savebar {
        border-radius: 12px;
    }
}

.admin-narrow-container {
    max-width: 720px;
}

.admin-users-search {
    max-width: 360px;
}

.admin-user-add-panel {
    max-width: 480px;
}

/* Admin users page */
.admin-users-shell {
    max-width: 1180px;
}

.admin-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-users-heading h1 {
    margin: 0;
    color: #1f2933;
    font-size: 2rem;
    font-weight: 650;
    line-height: 1.15;
}

.admin-users-subtitle {
    margin-top: .3rem;
    color: #65758b;
    font-size: .94rem;
}

.admin-users-search-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.admin-users-search {
    width: min(100%, 390px);
    max-width: 390px;
}

.admin-users-search .form-control {
    min-height: 2.35rem;
    border-color: #cbd5e1;
    border-radius: 6px 0 0 6px;
}

.admin-users-search .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    border-radius: 0 6px 6px 0;
}

.admin-users-clear-search {
    color: #6c757d;
    font-size: .86rem;
    line-height: 1.2;
    text-decoration: none;
}

.admin-users-clear-search:hover,
.admin-users-clear-search:focus {
    color: #0d6efd;
    text-decoration: underline;
}

.admin-users-panel {
    padding: 1rem;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 8px 22px rgba(31, 45, 61, .08);
}

.admin-users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .85rem;
}

.admin-users-add-btn,
.admin-users-add-footer .btn,
.admin-users-delete-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.35rem;
    border-radius: 6px;
    font-weight: 700;
}

.admin-users-toolbar-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #65758b;
    font-size: .88rem;
    line-height: 1.2;
}

.admin-users-toolbar-note i {
    color: #198754;
}

.admin-users-page .admin-user-add-panel {
    max-width: 420px;
}

.admin-users-add-form {
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(31, 45, 61, .06);
}

.admin-users-add-header,
.admin-users-add-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .7rem;
    background: #edf2f7;
}

.admin-users-add-header {
    justify-content: space-between;
    border-bottom: 1px solid #dce4ed;
}

.admin-users-add-footer {
    justify-content: flex-end;
    border-top: 1px solid #dce4ed;
}

.admin-users-add-title,
.admin-users-add-role,
.admin-users-add-close {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.admin-users-add-close {
    width: 2rem;
    height: 2rem;
    justify-content: center;
    flex: 0 0 2rem;
    padding: 0;
    border-radius: 6px;
}

.admin-users-add-title {
    color: #2f3b47;
}

.admin-users-add-title i {
    color: #0d6efd;
}

.admin-users-add-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    padding: .7rem;
}

.admin-users-add-grid .form-control,
.admin-users-add-role .form-select {
    min-height: 2.15rem;
    border-color: #cbd5e1;
    border-radius: 6px;
    font-size: .9rem;
    box-shadow: none;
}

.admin-users-list-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .9rem;
    margin-bottom: .7rem;
}

.admin-users-count {
    color: #65758b;
    font-size: .9rem;
    white-space: nowrap;
}

.admin-users-pagination {
    min-width: 0;
    order: -1;
}

.admin-users-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    margin: 0;
}

.admin-users-pagination-bar nav {
    overflow-x: auto;
}

.admin-users-pagination-bar .pagination {
    flex-wrap: nowrap;
}

.admin-users-pagination-bar .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 2.1rem;
    min-height: 2rem;
    padding: .32rem .58rem;
    color: #345c83;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.15;
}

.admin-users-pagination-bar .page-item.active .page-link {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: #ffffff;
}

.admin-users-pagination-bar .page-item.disabled .page-link {
    color: #a3adb8;
    background: #f2f5f8;
}

.admin-users-page-size {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: #65758b;
    font-size: .84rem;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-users-page-size select {
    width: auto;
    min-width: 4.4rem;
    height: 2rem;
    padding: .2rem 1.65rem .2rem .5rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
    color: #344054;
    font-size: .88rem;
}

.admin-users-table-wrap {
    overflow-x: auto;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #ffffff;
}

.admin-users-table {
    min-width: 980px;
    font-size: 13px;
}

.admin-users-table > :not(caption) > * > * {
    border-color: #e1e7ee;
}

.admin-users-table > thead > tr > th {
    padding: .55rem .65rem;
    background: #edf2f7;
    color: #495057;
    font-weight: 700;
    vertical-align: middle;
    border-bottom: 1px solid #d4dde7;
}

.admin-users-table > tbody > tr > td {
    padding: .5rem .65rem;
    vertical-align: middle;
}

.admin-users-table > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

.admin-users-table > tbody > tr:hover > td {
    background: #f2f7fb;
}

.admin-users-delete-col,
.admin-users-delete-cell {
    width: 76px;
}

.admin-users-delete-cell .form-check-input {
    margin: 0;
}

.admin-users-name-cell {
    width: 170px;
}

.admin-users-name-link {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
    color: #1f2933;
    text-decoration: none;
}

.admin-users-name-link:hover .admin-users-username {
    color: #0d6efd;
    text-decoration: underline;
}

.admin-users-username {
    max-width: 150px;
    overflow: hidden;
    font-weight: 750;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-users-id {
    color: #7b8794;
    font-family: "Consolas", "Source Code Pro", monospace;
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
}

.admin-users-email-cell {
    max-width: 230px;
    overflow: hidden;
    color: #495057;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-users-date-cell {
    width: 126px;
    color: #495057;
    font-family: inherit;
    font-size: .9rem;
    white-space: nowrap;
}

.admin-users-logins-cell {
    width: 72px;
    color: #245c95;
    font-weight: 800;
}

.admin-users-roles-cell {
    min-width: 170px;
    white-space: normal;
}

.admin-users-roles-cell .role-badge {
    margin-top: .12rem;
    margin-bottom: .12rem;
}

.admin-users-delete-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .85rem;
    color: #65758b;
    font-size: .88rem;
}

.admin-users-empty-state {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .35rem;
    padding: 2.5rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #65758b;
    text-align: center;
}

.admin-users-empty-state i {
    color: #8a96a3;
    font-size: 1.6rem;
}

.admin-users-empty-state h2 {
    margin: .2rem 0 0;
    color: #344054;
    font-size: 1.25rem;
    font-weight: 700;
}

.admin-users-empty-state p {
    margin: 0 0 .6rem;
}

@media (max-width: 991.98px) {
    .admin-users-header,
    .admin-users-list-head,
    .admin-users-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-users-search-form,
    .admin-users-search {
        align-items: stretch;
        width: 100%;
        max-width: none;
    }

    .admin-users-pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-users-add-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .admin-users-add-header,
    .admin-users-add-footer,
    .admin-users-delete-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-users-add-role {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-users-add-grid {
        grid-template-columns: 1fr;
    }

    .admin-users-add-btn,
    .admin-users-add-footer .btn,
    .admin-users-delete-actions .btn {
        width: 100%;
    }
}

.form-select-auto {
    width: auto;
}

.table-action-delete-sm {
    width: 70px;
}

.table-action-delete-md {
    width: 90px;
}

/* Account pages */
.account-page,
.account-settings-page {
    min-height: calc(100vh - 64px);
    padding: 2rem 0 2.5rem;
}

.account-shell,
.account-settings-shell {
    max-width: 980px;
}

.account-hero,
.account-settings-header,
.account-card,
.account-settings-card,
.account-settings-actions,
.account-settings-note {
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(31, 45, 61, .08);
}

.account-hero,
.account-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.account-identity,
.account-settings-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.account-avatar,
.account-settings-avatar {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    border: 3px solid #e7f1ff;
    border-radius: 8px;
    object-fit: cover;
    background: #f8fafc;
}

.account-settings-avatar {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
}

.account-kicker {
    margin-bottom: .18rem;
    color: #65758b;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.account-title-block,
.account-settings-identity > div {
    min-width: 0;
}

.account-title-block h1,
.account-settings-header h1 {
    margin: 0;
    color: #1f2933;
    font-size: 2rem;
    font-weight: 750;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.account-full-name,
.account-settings-header p {
    margin: .35rem 0 0;
    color: #65758b;
    font-size: .96rem;
}

.account-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.account-primary-action,
.account-settings-back,
.account-settings-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.35rem;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 1rem;
}

.account-card {
    padding: 1rem;
}

.account-card-title,
.account-settings-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
    color: #344054;
    font-weight: 800;
}

.account-card-title i,
.account-settings-section-title i {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.15rem;
    border: 1px solid #cfe2ff;
    border-radius: 8px;
    background: #e7f1ff;
    color: #0d6efd;
}

.account-detail-list {
    display: grid;
    gap: .65rem;
}

.account-detail,
.account-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.35rem;
    padding: .58rem .7rem;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    background: #f8fafc;
}

.account-detail-label,
.account-metric span {
    color: #65758b;
    font-size: .86rem;
    white-space: nowrap;
}

.account-detail strong,
.account-metric strong {
    min-width: 0;
    color: #1f2933;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.account-metrics {
    display: grid;
    gap: .65rem;
}

.account-settings-form {
    display: grid;
    gap: 1rem;
}

.account-settings-card {
    padding: 1rem;
}

.account-settings-section-title {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.account-settings-section-title h2 {
    margin: 0;
    color: #1f2933;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}

.account-settings-section-title span {
    display: block;
    margin-top: .18rem;
    color: #65758b;
    font-size: .88rem;
}

.account-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.account-field {
    min-width: 0;
}

.account-field-wide {
    grid-column: 1 / -1;
}

.account-field label {
    display: block;
    margin-bottom: .28rem;
    color: #495057;
    font-size: .88rem;
    font-weight: 700;
}

.account-field .form-control {
    min-height: 2.35rem;
    border-color: #cbd5e1;
    border-radius: 6px;
    color: #1f2933;
    font-size: .94rem;
    box-shadow: none;
}

.account-field .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .16);
}

.account-field .form-control[readonly] {
    background: #f2f5f8;
    color: #65758b;
}

.account-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    padding: .85rem 1rem;
}

.account-settings-note {
    margin-top: 1rem;
    padding: .85rem 1rem;
    color: #65758b;
    font-size: .9rem;
}

@media (max-width: 767.98px) {
    .account-page,
    .account-settings-page {
        padding: 1rem 0 1.5rem;
    }

    .account-hero,
    .account-settings-header,
    .account-identity,
    .account-settings-identity,
    .account-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-grid,
    .account-settings-grid {
        grid-template-columns: 1fr;
    }

    .account-avatar,
    .account-settings-avatar {
        align-self: flex-start;
    }

    .account-primary-action,
    .account-settings-back,
    .account-settings-actions .btn {
        width: 100%;
    }
}

.maintenance-warning-icon {
    color: #FFD700;
    font-size: 140px;
    text-align: center;
}

.register-password-fields,
.register-password-rules {
    display: inline-block;
}

.register-password-rules {
    padding-left: 20px;
}

.password-rule-icon {
    color: green;
}

.delete-icon {
    color: darkred;
    cursor: pointer;
}

.download-icon-muted {
    color: dimgrey;
}

.gray_out_icon {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.gray_out_text {
    opacity: .5;
}

/* Login page */
.login-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px 64px;
    background: #eef2f6;
}

.login-shell {
    width: 100%;
    max-width: 440px;
}

.login-card {
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(21, 36, 56, 0.16);
    padding: 28px;
}

.login-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.login-brand-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #174ea6;
    color: #ffffff;
    font-size: 21px;
}

.login-title {
    margin: 0;
    color: #1f2933;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
}

.login-subtitle {
    margin: 4px 0 0;
    color: #65758b;
    font-size: 14px;
}

.login-error {
    margin-bottom: 18px;
}

.login-error ul {
    margin: 0;
    padding-left: 18px;
}

.login-form {
    margin: 0;
}

.login-field {
    margin-bottom: 16px;
}

.login-field label {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

.login-input-wrap {
    position: relative;
}

.login-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #7b8794;
    pointer-events: none;
}

.login-input.form-control {
    height: 44px;
    padding-left: 40px;
    border-color: #cbd5e1;
    border-radius: 6px;
    box-shadow: none;
}

.login-input.form-control:focus {
    border-color: #174ea6;
    box-shadow: 0 0 0 3px rgba(23, 78, 166, 0.14);
}

.login-recaptcha {
    overflow-x: auto;
    padding-bottom: 2px;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 20px;
    color: #52606d;
    font-size: 14px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #52606d;
    font-weight: 400;
}

.login-remember input {
    margin: 0;
}

.login-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #174ea6;
    text-decoration: none;
    white-space: nowrap;
}

.login-reset-link:hover,
.login-reset-link:focus {
    color: #0f3b7a;
    text-decoration: underline;
}

.login-submit.btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    font-weight: 600;
}

/* Password recovery */
.forgot-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px 64px;
    background: #eef2f6;
}

.forgot-shell {
    width: 100%;
    max-width: 560px;
}

.forgot-card {
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(21, 36, 56, 0.16);
    padding: 30px;
}

.forgot-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.forgot-card-header-centered {
    align-items: flex-start;
}

.forgot-brand-mark,
.forgot-state-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #174ea6;
    color: #ffffff;
    font-size: 22px;
}

.forgot-brand-mark-success {
    background: #198754;
}

.forgot-title {
    margin: 0;
    color: #1f2933;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
}

.forgot-subtitle {
    margin: 6px 0 0;
    color: #65758b;
    font-size: 14px;
    line-height: 1.45;
}

.forgot-steps {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    counter-reset: forgot-step;
}

.forgot-steps li {
    position: relative;
    min-height: 34px;
    padding: 7px 10px 7px 44px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #344054;
    font-size: 14px;
    line-height: 1.35;
    counter-increment: forgot-step;
}

.forgot-steps li::before {
    content: counter(forgot-step);
    position: absolute;
    top: 6px;
    left: 8px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #174ea6;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.forgot-alert {
    margin-bottom: 18px;
}

.forgot-alert ul {
    margin: 0;
    padding-left: 18px;
}

.forgot-form {
    margin: 0;
}

.forgot-field {
    margin-bottom: 16px;
}

.forgot-field label {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

.forgot-input-wrap {
    position: relative;
}

.forgot-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #7b8794;
    pointer-events: none;
}

.forgot-input.form-control {
    height: 44px;
    padding-left: 40px;
    border-color: #cbd5e1;
    border-radius: 6px;
    box-shadow: none;
}

.forgot-input.form-control:focus {
    border-color: #174ea6;
    box-shadow: 0 0 0 3px rgba(23, 78, 166, 0.14);
}

.forgot-submit.btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    font-weight: 600;
}

.forgot-card-footer {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.forgot-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #174ea6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.forgot-back-link:hover,
.forgot-back-link:focus {
    color: #0f3b7a;
    text-decoration: underline;
}

.forgot-state-card {
    text-align: center;
}

.forgot-state-card .forgot-state-icon {
    margin: 0 auto 18px;
}

.forgot-state-success .forgot-state-icon {
    background: #198754;
}

.forgot-state-error .forgot-state-icon {
    background: #dc3545;
}

.forgot-state-action.btn {
    margin-top: 20px;
    max-width: 260px;
}

@media (max-width: 480px) {
    .login-page {
        align-items: flex-start;
        padding: 28px 12px 48px;
    }

    .forgot-page {
        align-items: flex-start;
        padding: 28px 12px 48px;
    }

    .login-card {
        padding: 22px;
    }

    .forgot-card {
        padding: 22px;
    }

    .forgot-card-header {
        align-items: flex-start;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}