:root {
  --bg-color: #F2F4F7;
  --menu-color: #116466;
  --prymary-color: #116466;
  --prymary-color-focus: #0e5052;
  --light-color: #ffffff;
  --light-color-focus: #b6ddd3;
  --color-white: #ffffff;
  --warning-color: #ddbc03;
  --warning-color-focus: #f5d93a;
  --secess-color: #01850c;
  --danger-color: #940d03;
  --danger-color-focus: #c02b21;
  --disable-color: #739d9e;
  --disable-color-focus: #4f7d7e;
}



html {
    min-height: 100%;
    background: var(--bg-color);
}

body {
    background: var(--bg-color);
    color: var(--prymary-color);
    margin: 0;
    min-height: 100vh;
    padding-bottom: 20px;
}


a{
    color: var(--prymary-color);
    font-weight: 600;
}

a:hover{
    color: var(--prymary-color-focus)
}

.account-link{
  font-size: 1.2rem;
}

p{
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}


h1{
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 20px;
    padding-left: 20px;
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.6rem; 
    }
}

h2{
    font-size: 1.4rem;
    font-weight: 700;
}

h3{
    font-size: 1.2rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    h3 {
        font-size: 1.0rem; 
    }
}

/* ОСНОВНЫЕ БЛОКИ */
.module{
    background: var(--light-color);
    border-radius: 24px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;

    margin-top: 20px;
}

.hovered-module{
    background: var(--light-color);
    border-radius: 24px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;

    margin-top: 20px;
}

.hovered-module:hover{
    background: var(--light-color-focus);
}

.message-icon{
    font-size: 2.2rem;
    padding-left: 10px; 
}

.server-icon{
    font-size: 3rem;
    padding-left: 10px; 
}

.table-icon{
    font-size: 2rem;
}


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

.message-sucess{
  color: var(--secess-color);
}

.message-disable{
  color: var(--disable-color);
}

/* ТАБЛИЦЫ */
.module-table{
    width: 100%;
}

.module-table tr{
    height: 3rem;
}

.hover-row{
    border-bottom-width: thin;
    border-bottom-color: var(--disable-color);  
}


.hover-row:hover{
    background-color: var(--light-color-focus);
}

.general-row{
    background: var(--prymary-color-focus);
    color: var(--color-white);
    padding-left: 15px;
    font-weight: bold;
}


.sub-general-row{
    background: var(--prymary-color);
    color: var(--color-white);
}


/* КНОПКИ */
.general-btn{
   background-color: var(--prymary-color); 
   color: var(--color-white);
   text-decoration: none;
   border-radius: 8px;
   padding-right: 12px;
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-left: 0px;
   margin-right: 10px;
   border-width: inherit;
}

.setting-btn{
    background: var(--prymary-color);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;
    color: white;
}

.setting-btn:hover{
    background: var(--prymary-color-focus);
    color: white;
}


.general-btn:hover{
   background-color: var(--prymary-color-focus);
   color: var(--color-white); 
}


.table-general-btn{
   background-color: var(--prymary-color); 
   color: var(--color-white);
   text-decoration: none;
   border-radius: 8px;
   padding-right: 12px;
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.table-general-btn:hover{
   background-color: var(--prymary-color-focus);
   color: var(--color-white); 
}

.disable-btn{
   background-color: var(--disable-color); 
   color: var(--color-white);
   text-decoration: none;
   border-radius: 8px;
   padding-right: 12px;
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-left: 10px;
   margin-right: 10px;
   border-width: inherit;
   border-color: white;
}

.disable-btn:hover{
   background-color: var(--disable-color-focus); 
   color: var(--color-white)
}

.back-btn{
    margin-top: 10px;
}

.warning-btn{
   background-color: var(--warning-color); 
   color: var(--prymary-color-focus);
   text-decoration: none;
   border-radius: 8px;
   padding-right: 12px;
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-left: 10px;
   margin-right: 10px;
}

.warning-btn:hover{
   background-color: var(--warning-color-focus); 
}

.table-warning-btn{
   background-color: var(--warning-color); 
   color: var(--prymary-color-focus);
   text-decoration: none;
   border-radius: 8px;
   padding-right: 12px;
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;

}

.table-warning-btn:hover{
   background-color: var(--warning-color-focus); 
}


.danger-btn{
   background-color: var(--danger-color); 
   color: var(--color-white);
   text-decoration: none;
   border-radius: 8px;
   padding-right: 12px;
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.danger-btn:hover{
   background-color: var(--danger-color-focus);
   color: var(--color-white); 
}



.sucess{
    color: var(--secess-color);
}

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

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

.disable{
    color: var(--disable-color);
}

/* ИКОНКИ */


.marged-left-icon{
    margin-left: 10px;
}

/* ЗАГОЛОВКИ */
.general-title{
    font-size: 2rem;
    font-weight: 500;
    margin-top: 70px;
    margin-bottom: 20px;
    margin-left: 10px;
}

.sub-general-title{
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
}

/* запрет переноса текста в ячейках */
.no-wrap {
        white-space: nowrap;
        padding-left: 10px;
        padding-right: 10px;
    }


/* БОКОВОЕ МЕНЮ */
.sidebar {
  min-height: 100vh;
  background: var(--menu-color);
}

.sidebar-desctop{
  list-style-type: none;
}

.sidebar-desctop li{
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

.sidebar-link {
  text-decoration: none; 
  color: var(--light-color); 
}

.sidebar-link:hover {
  text-decoration: none; 
  color: var(--light-color-focus); 
}

.sidebar-desctop li:hover {
  background-color: var(--prymary-color-focus); 
}

.sidebar-desctop-collapse-btn{
  color: var(--light-color);
  font-size: 2rem;
}

.sidebar-icon{
  font-size: 1.3rem;
  padding-right: 10px;
}

.sidebar-mobile{
  list-style-type: none;
}

.sidebar-mobile li{
  margin-top: 15px;
}



.sidebar-mobile-collapse-btn{
    font-size: 2.5rem;
}

.sidebar-mobile-link{
    padding-top: 20px;
}


#line_chart_col {
    position: relative;
    min-height: 500px;
    width: 100%;
}

#line-chart {
    width: 100% !important;
    height: 500px !important;
    display: block;
}

/* ПЕРЕКЛЮЧАТЕЛИ В ФОРМЕ */
.form-check-input:checked {
    background-color: var(--prymary-color);
    border-color: var(--prymary-color);
}

/*ИКОНКИ СТАТИСТИКИ ПО ФЕРМАМ*/
.farm-stat {
    color: white;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 7px;
    margin-right: 4px;
    display: inline-block;
    min-width: 40px; /* Минимальная ширина */
    text-align: center;
}

.success-bg{
    background: var(--secess-color);
}

.menu-bg{
    background: var(--menu-color);
}

.disable-bg{
    background: var(--disable-color-focus);
}


.index-stat{
    font-size: 3rem;
    font-weight: bold;
}

@media (max-width: 1600px) {
    .index-stat{
        font-size: 2.6rem;
        font-weight: bold;
    }
}


@media (max-width: 480px) {
    .index-stat{
        font-size: 2rem;
        font-weight: bold;
    }
}

#desctop_sidebar { width: 252px; padding: 0; background: #123e40; color: #ecf7f5; border-right: 1px solid #244e50; transition: width .2s ease; }
.desktop-nav-shell { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; padding: 28px 16px 20px; }
.nav-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 0 6px; }
.nav-brand:hover { color: #c7ebe1; }
.nav-brand-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; background: #ffffff12; border: 1px solid #ffffff1a; border-radius: 12px; font-size: 22px; }
.nav-brand-text { font-size: 18px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.nav-brand-text small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; letter-spacing: 0; color: #a5c7c5; }
.nav-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff26; border-radius: 10px; background: transparent; color: #c5e1db; font-size: 20px; cursor: pointer; }
.nav-toggle:hover { background: #ffffff12; color: #fff; }
.desktop-nav-toggle { margin: 24px 0 24px 6px; }
.nav-caption { display: block; margin: 0 12px 12px; color: #85aaa7; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.nav-links { list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 4px 0; }
.nav-links .nav-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 48px; border-radius: 10px; color: #bfd5d1; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.nav-item i { width: 20px; flex-shrink: 0; text-align: center; font-size: 18px; }
.nav-item span { white-space: nowrap; }
.nav-links .nav-item:hover { background: #ffffff0c; color: #fff; }
.nav-links .nav-item.is-active { background: #d9f2e8; color: #155f56; font-weight: 650; }
.nav-links .nav-exit { border-top: 1px solid #ffffff16; margin-top: 28px; padding-top: 16px; }
.nav-exit .nav-item:hover { color: #ffc6bd; }
.nav-brand:focus-visible, .nav-item:focus-visible, .nav-toggle:focus-visible { outline: 3px solid #79cfb4; outline-offset: 3px; }
.sidebar-collapsed #desctop_sidebar { width: 84px; }
.sidebar-collapsed .desktop-nav-shell { padding-left: 12px; padding-right: 12px; }
.sidebar-collapsed .desktop-nav-shell .nav-brand { padding: 0 10px; }
.sidebar-collapsed .desktop-nav-shell .nav-brand-text,
.sidebar-collapsed .desktop-nav-shell .nav-item span,
.sidebar-collapsed .desktop-nav-shell .nav-caption { display: none; }
.sidebar-collapsed .desktop-nav-toggle { margin-left: 10px; }
.sidebar-collapsed .desktop-nav-shell .nav-item { justify-content: center; padding: 13px 10px; }
#mobile_sidebar { position: relative; padding: 0; margin: 0 -12px; }
#mobile_navigation > summary { position: absolute; top: 16px; right: 20px; list-style: none; touch-action: manipulation; }
#mobile_navigation > summary::-webkit-details-marker { display: none; }
#mobile_navigation .mobile-menu-close-icon { display: none; }
#mobile_navigation[open] .mobile-menu-open-icon { display: none; }
#mobile_navigation[open] .mobile-menu-close-icon { display: block; }
.mobile-nav-bar .nav-brand { margin-right: 52px; }
.mobile-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #123e40; }
.mobile-nav-bar .nav-brand { padding: 0; }
.mobile-nav-panel { background: #123e40; border-top: 1px solid #ffffff16; padding: 8px 16px 16px; }
.mobile-nav-panel .nav-exit { margin-top: 12px; padding-top: 8px; }
body > .container > .row > .col { min-width: 0; }
@media (prefers-reduced-motion: reduce) { #desctop_sidebar, .nav-links .nav-item { transition: none; } }

.phone-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.phone-badges form { margin: 0; }
.phone-badge-menu { min-width: 0; max-width: 100%; }
.phone-badge-menu > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px; color: #64748b; font-size: 13px; cursor: pointer; list-style: none; border-radius: 8px; touch-action: manipulation; }
.phone-badge-menu > summary::-webkit-details-marker { display: none; }
.phone-badge-menu > summary:hover, .phone-badge-menu[open] > summary { background: #f1f5f9; color: #334155; }
.phone-badge-menu > summary:focus-visible { outline: 3px solid #64b8a6; outline-offset: 2px; }
.phone-badge-menu-items { padding: 6px; border: 1px solid #e3e9ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px #2035470a; }
.phone-badge-menu-items .phone-badge { width: 100%; border: 0; background: transparent; color: #475569; border-radius: 6px; }
.phone-badge-menu-items .phone-badge:hover { background: #edf5f1; color: #176754; }
.phone-badge { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 11px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fafc; color: #64748b; font: 500 13px/1.4 system-ui, sans-serif; cursor: pointer; text-align: left; touch-action: manipulation; overflow-wrap: anywhere; max-width: 100%; }
.phone-badge:hover { border-style: solid; background: #edf2f7; }
.phone-badge-payment.is-set { background: #fff4df; border: 1px solid #efd6a1; color: #95600c; }
.phone-badge-fault.is-set { background: #fcecea; border: 1px solid #efccc6; color: #b64339; }
.phone-badge-details { min-width: 0; max-width: 100%; }
.phone-badge-details > summary { list-style: none; }
.phone-badge-details > summary::-webkit-details-marker { display: none; }
.phone-badge-chevron { margin-left: 4px; font-size: 11px; flex-shrink: 0; }
.phone-badge-details[open] .phone-badge-chevron { transform: rotate(180deg); }
.phone-badge-info { padding: 12px; margin-top: 8px; border: 1px solid #e3e9ef; border-radius: 10px; background: #f8fafc; color: #475569; overflow-wrap: anywhere; }
.portal-content .phone-badge-info p { margin: 0 0 6px !important; font-size: 13px; }
.phone-badge-remove { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 12px; margin-top: 6px; border: 1px solid #efccc6; border-radius: 8px; background: #fcecea; color: #b64339; font: 600 13px/1.4 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.phone-badge-remove:hover { background: #f9d9d4; }
.phone-badge:focus-visible, .phone-badge-remove:focus-visible { outline: 3px solid #64b8a6; outline-offset: 3px; }
/* Shared visual language for all portal pages, forms and dialogs. */
:root {
    --bg-color: #f4f7fa;
    --prymary-color: #0f766e;
    --prymary-color-focus: #115e59;
    --secess-color: #16805b;
    --warning-color: #a16c0b;
    --danger-color: #be4a42;
    --disable-color: #64748b;
}
body { color: #243447; font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; padding-bottom: 0; }
body > .container > .row { min-height: 100vh; }
.portal-content { max-width: 1600px; margin: 0 auto; padding: 32px 24px 48px; }
.portal-content-dashboard { padding: 0; max-width: none; }
.portal-content h1 { color: #172b3a; padding-left: 0; margin: 8px 0 24px; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
.portal-content h2 { font-size: 21px; color: #203d46; line-height: 1.45; }
.portal-content h3 { font-size: 17px; line-height: 1.45; color: #243447; }
.portal-content a { text-decoration: none; }
.portal-content :is(.module, .hovered-module) { border: 1px solid #e3e9ef; border-radius: 16px; padding: 22px; margin-top: 16px; background: #fff; box-shadow: 0 3px 14px #20354705; }
.portal-content .hovered-module:hover { background: #fcfefd; border-color: #c6ded6; }
.portal-content :is(.sms-item, .expensis-item, .phone-item) > .row { row-gap: 12px; }
.portal-content :is(.sms-item, .expensis-item) { overflow-wrap: anywhere; }
.portal-content .table-icon { font-size: 22px; }
.portal-content .account-section { margin-top: 24px; }
.portal-content .farm-section { border: 1px solid #e3e9ef; border-radius: 14px; padding: 20px; background: #fff; margin-bottom: 16px; }
.portal-content .farm-section > .row { row-gap: 12px; }
.portal-content .farm-section h3 { margin: 0; }
.portal-content .expenses_list { border-top: 1px solid #edf1f5; padding-top: 4px; }
.detail-summary { background: #fff; border: 1px solid #e3e9ef; border-radius: 16px; padding: 24px; margin-top: 24px; }
.detail-summary h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 20px; }
.portal-content .detail-summary p { margin-left: 0 !important; margin-bottom: 10px; overflow-wrap: anywhere; }
.detail-summary p b { font-weight: 600; }
.portal-content :is(.general-btn, .disable-btn, .danger-btn, .warning-btn, .setting-btn, .table-general-btn, .table-warning-btn),
.modal :is(.general-btn, .disable-btn, .danger-btn), .offcanvas :is(.general-btn, .disable-btn) {
    display: inline-flex; justify-content: center; align-items: center; gap: 8px;
    min-height: 42px; padding: 10px 14px; border: 1px solid transparent; border-radius: 9px;
    margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none;
    cursor: pointer; vertical-align: middle; transition: background .15s, border-color .15s;
}
:is(.portal-content, .modal, .offcanvas) .general-btn { background: #0f766e; border-color: #0f766e; color: #fff; }
:is(.portal-content, .modal, .offcanvas) .general-btn:hover { background: #115e59; border-color: #115e59; color: #fff; }
:is(.portal-content, .modal, .offcanvas) .disable-btn { background: #f1f5f9; border-color: #dfe6ee; color: #475569; }
:is(.portal-content, .modal, .offcanvas) .disable-btn:hover { background: #e2e8f0; color: #334155; }
:is(.portal-content, .modal) .danger-btn { background: #fcecea; border-color: #f5d7d3; color: #b64339; }
:is(.portal-content, .modal) .danger-btn:hover { background: #f9d9d4; color: #963329; }
.portal-content :is(.warning-btn, .table-warning-btn) { background: #fff7ed; border-color: #f6e2c8; color: #a15c10; }
.portal-content :is(.warning-btn, .table-warning-btn):hover { background: #ffecd2; color: #854809; }
.portal-content :is(.setting-btn, .table-general-btn) { background: #e9f4ef; border-color: #d5e9df; color: #176754; }
.portal-content :is(.setting-btn, .table-general-btn):hover { background: #d7ebe0; color: #12523f; }
:is(.portal-content, .modal, .offcanvas) :is(a, button):focus-visible { outline: 3px solid #64b8a6; outline-offset: 3px; }
[hidden] { display: none !important; }
.modal-dialog { max-width: 540px; }
.modal-content { border: 1px solid #e3e9ef; border-radius: 18px; box-shadow: 0 24px 80px #172b3a26; overflow: hidden; }
.modal-header, .offcanvas-header { padding: 22px 24px; border-bottom: 1px solid #e9eef3; background: #f8fafb; }
.modal-title, .offcanvas-title { color: #172b3a; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.modal-body, .offcanvas-body { padding: 24px; }
.modal-footer { padding: 18px 24px; border-top: 1px solid #e9eef3; background: #f8fafb; gap: 10px; }
.modal-footer > * { margin: 0; }
.modal-backdrop { background: #102a35; }
.offcanvas { border-color: #e3e9ef; }
.form-label, .form-check-label { color: #475569; font-size: 14px; font-weight: 500; }
.form-control, .form-select { border-color: #dce4ec; border-radius: 9px; padding: 11px 13px; color: #243447; font-size: 15px; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: #6caf9f; box-shadow: 0 0 0 3px #0f766e14; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-check-input:focus { border-color: #6caf9f; box-shadow: 0 0 0 3px #0f766e14; }
.pagination { flex-wrap: wrap; gap: 6px; }
.pagination .page-link { border: 1px solid #e3e9ef; border-radius: 8px !important; color: #475569; background: #fff; min-width: 38px; text-align: center; padding: 8px 12px; font-size: 14px; }
.pagination .page-link:hover { background: #e9f4ef; color: #176754; }
.pagination .active .page-link { background: #0f766e; border-color: #0f766e; color: #fff; }
.pagination .disabled .page-link { background: #f1f5f9; color: #94a3b8; }
.module-table { border-collapse: collapse; color: #475569; font-size: 14px; }
.module-table th, .module-table td { padding: 12px 14px; border-bottom: 1px solid #e9eef3; }
.module-table :is(.general-row, .sub-general-row) { background: #eef5f3; color: #35564f; font-weight: 600; }
.module-table .hover-row:hover { background: #f3f8f6; }
.table-scroll { width: 100%; overflow-x: auto; border: 1px solid #e3e9ef; border-radius: 12px; }
.alert { border-radius: 12px; margin-top: 16px; font-size: 15px; }
.sms-meta { color: #64748b; font-size: 14px; }
.sms-body { margin-top: 12px; font-style: normal; color: #243447; line-height: 1.7; white-space: pre-line; }
.sms-actions { border-top: 1px solid #edf1f5; padding-top: 14px; margin-top: 16px; }
.log-item .row { align-items: center; }
.log-item .log-date { font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; }
.log-item .log-name { font-weight: 600; }
.portal-content .log-item .table-icon { font-size: 12px; }
.payment-actions { flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.next-fee-total { display: inline-flex; align-items: baseline; gap: 10px; margin: -10px 0 10px; padding: 10px 14px; border: 1px solid #d5e9df; border-radius: 10px; background: #e9f4ef; color: #176754; }
.next-fee-total span { font-size: 14px; }
.next-fee-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.payment-footer { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.payment-footer-marks { min-width: 0; }
.payment-footer .phone-badges { margin: 0; }
.payment-footer .payment-actions { margin-top: 0; }
@media (min-width: 992px) {
    .payment-footer { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
    .payment-footer-marks { flex: 1; }
    .payment-footer .payment-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}
.login-section { min-height: 75vh; display: flex; align-items: center; }
.login-card { border: 1px solid #e3e9ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 40px #2035470a; }
.login-brand { text-align: center; color: #172b3a; font-size: 26px; font-weight: 750; letter-spacing: -.04em; margin-bottom: 8px; }
.login-mark { display: grid; place-items: center; margin: 0 auto 20px; width: 60px; height: 60px; border: 1px solid #d5e9df; border-radius: 16px; background: #e9f4ef; color: #176754; font-size: 30px; }
@media (max-width: 767px) {
    .portal-content { padding: 20px 4px 32px; }
    .portal-content-dashboard { padding: 0; }
    .portal-content :is(.module, .hovered-module, .farm-section) { padding: 16px; }
    .portal-content .detail-summary { padding: 18px; }
    .modal-header, .modal-body, .modal-footer, .offcanvas-header, .offcanvas-body { padding: 18px; }
    .modal-dialog { margin: 12px; }
    .portal-content .expensis-item .row > div { min-width: 100px; }
    .portal-content .module-table { min-width: 540px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.portal-content, .modal, .offcanvas) :is(a, button) { transition: none; }
}

.dashboard-page {
    color: #243447;
    background: #f4f7fa;
    padding-bottom: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dashboard-page > .container > .row { min-height: 100vh; }
.dashboard-page > .container > .row > .col { min-width: 0; }
.dashboard { max-width: 1600px; margin: 0 auto; padding: 36px 24px 48px; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.dashboard-eyebrow { color: #0f766e; font-size: 12px; font-weight: 750; letter-spacing: .14em; }
.dashboard h1 { padding: 0; margin: 8px 0; color: #172b3a; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.dashboard-header p { color: #64748b; margin: 0; }
.dashboard-payout { background: #e6f3ef; border: 1px solid #cce7de; border-radius: 16px; padding: 18px 24px; min-width: 240px; color: #0f665c; }
.dashboard-payout span { display: block; font-size: 15px; }
.dashboard-payout strong { display: block; margin-top: 4px; font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dashboard-payout small { font-size: 14px; font-weight: 500; }
.dashboard-section-title { color: #172b3a; font-size: 21px; margin: 28px 0 0; letter-spacing: -.02em; }
.dashboard .module { border: 1px solid #e3e9ef; border-radius: 16px; padding: 22px; margin-top: 16px; box-shadow: 0 3px 14px #20354705; }
.dashboard .account-link { display: inline-block; margin-bottom: 4px; color: #153e44; text-decoration: none; overflow-wrap: anywhere; }
.dashboard .account-link:hover { color: #0f766e; text-decoration: underline; }
.dashboard .module p { font-size: 15px; color: #64748b; line-height: 1.6; }
.dashboard .server-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: #eef7f4; border-radius: 14px; padding: 0; font-size: 25px; }
.dashboard .metric-label { text-align: center; font-weight: 600; margin: 0; }
.dashboard .metric-label i { margin-right: 8px; color: #0f766e; }
.dashboard p.index-stat { text-align: center; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 750; color: #172b3a; line-height: 1.2; margin: 14px 0 0; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dashboard p.index-stat.sucess { color: #16805b; }
.dashboard p.index-stat.warning { color: #a16c0b; }
.dashboard p.index-stat.danger { color: #be4a42; }
.metric-percent { display: inline-block; font-size: 15px; letter-spacing: 0; padding: 5px 9px; border-radius: 7px; background: #f1f5f9; vertical-align: middle; }
.dashboard #line_chart_col { min-height: 0; }
.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.chart-heading h3 { margin: 0; font-size: 18px; color: #172b3a; }
.chart-heading span { color: #64748b; font-size: 14px; }
.dashboard-chart { position: relative; height: 360px; min-width: 0; }
.dashboard #line-chart { height: 100% !important; width: 100% !important; }
.account-section { margin-top: 20px; }
.account-section-heading { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #64748b; margin: 24px 0 12px; }
.dashboard .farm-section { background: #fff; border: 1px solid #e3e9ef; border-radius: 14px; padding: 18px; margin-bottom: 12px; }
.farm-heading { row-gap: 12px; }
.farm-heading h3 { color: #243447; font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.dashboard .setting-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dce8e4; background: #edf6f2; color: #0f766e; padding: 8px 10px; border-radius: 8px; }
.dashboard .setting-btn:hover { background: #dcefe7; }
.dashboard .farm-stat { font-size: 16px; font-weight: 700; border-radius: 8px; padding: 7px 10px; margin: 2px; }
.dashboard .farm-stat small { font-size: 13px; font-weight: 500; margin-left: 4px; }
.dashboard .menu-bg { background: #edf2f7; color: #475569; }
.dashboard .success-bg { background: #e7f5ee; color: #16805b; }
.dashboard .disable-bg { background: #eeedfd; color: #625ac4; }
.dashboard .phones_list { border-top: 1px solid #edf1f5; margin-top: 16px; padding-top: 4px; }
.dashboard .phone-item { border: 1px solid #e6edf2; border-radius: 12px; background: #fff; margin-top: 12px; padding: 20px; color: #475569; font-size: 15px; }
.dashboard .phone-item:hover { border-color: #c6ded6; background: #fcfefd; }
.dashboard .phone-item h2 { font-size: 17px; overflow-wrap: anywhere; }
.dashboard .phone-item .table-icon { font-size: 22px; }
.dashboard .phone-item a { text-decoration: none; }
.modem-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 150px; gap: 20px; align-items: start; }
.modem-grid > div { min-width: 0; }
.modem-card .row { --bs-gutter-x: 0; margin-bottom: 6px; }
.modem-card h2 { margin: 0 0 8px; color: #203d46; line-height: 1.4; }
.modem-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.modem-status-online { background: #e7f5ee; color: #16805b; }
.modem-status-error { background: #fcecea; color: #be4a42; }
.modem-status-unknown { background: #f0f3f7; color: #64748b; }
.modem-signal { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.modem-signal > span:last-child { font-size: 12px; color: #64748b; }
.modem-label { color: #64748b; font-size: 13px; margin-right: 6px; }
.modem-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.modem-restrictions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 17px; }
.modem-sim .col { overflow-wrap: anywhere; }
.modem-payment { margin-top: 6px; }
.modem-dates .modem-label { display: block; margin-bottom: 3px; }
.modem-sms { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: #5553b5; border-radius: 7px; padding: 4px 8px; font-size: 13px; margin-top: 6px; }
.modem-actions { display: flex; flex-direction: column; gap: 8px; }
.modem-action { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.modem-action-view { background: #e9f4ef; border-color: #d5e9df; color: #176754; }
.modem-action-view:hover { background: #d7ebe0; color: #12523f; }
.modem-action-reboot { background: #fff7ed; border-color: #f6e2c8; color: #a15c10; }
.modem-action-reboot:hover { background: #ffecd2; color: #854809; }
@media (max-width: 1399px) {
    .modem-grid { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
    .modem-dates { grid-column: 2; }
    .modem-actions { grid-column: 3; align-self: end; }
}
@media (max-width: 575px) {
    .dashboard .modem-card { padding: 16px; }
    .modem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .modem-health { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
    .modem-health .row { margin: 0; }
    .modem-signal { margin: 0; }
    .modem-dates, .modem-actions { grid-column: 1 / -1; }
    .modem-actions { flex-direction: row; border-top: 1px solid #edf1f5; padding-top: 14px; }
    .modem-action { flex: 1; padding: 9px 6px; font-size: 12px; }
}
.dashboard :is(a, button):focus-visible { outline: 3px solid #64b8a6; outline-offset: 3px; }
@media (max-width: 767px) {
    .dashboard { padding: 16px 4px 32px; }
    .dashboard-header { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px; }
    .dashboard-payout { min-width: 0; padding: 16px 20px; }
    .dashboard .module { padding: 18px; }
    .chart-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
    .dashboard-chart { height: 320px; }
    .dashboard .chart-card { padding: 16px 10px; }
    .dashboard .farm-section { padding: 14px; }
    .farm-heading > .col-auto:last-child { width: 100%; padding-left: 12px; }
}