/* Megro Accounting clean UI system
   Scope: old PHP panel, no backend/API behavior changes. */
:root {
    --mc-bg: #f4f7fb;
    --mc-surface: #ffffff;
    --mc-surface-soft: #f8fbff;
    --mc-border: #e5edf6;
    --mc-border-strong: #dbe6f2;
    --mc-text: #1f2d3d;
    --mc-muted: #718096;
    --mc-muted-2: #94a3b8;
    --mc-primary: #4f8cff;
    --mc-primary-dark: #2563eb;
    --mc-primary-soft: #edf5ff;
    --mc-info: #38bdf8;
    --mc-success: #10b981;
    --mc-danger: #ef4444;
    --mc-warning: #f59e0b;
    --mc-shadow: 0 16px 36px rgba(31, 45, 61, .08);
    --mc-shadow-soft: 0 10px 24px rgba(31, 45, 61, .06);
    --mc-radius-lg: 18px;
    --mc-radius-md: 14px;
    --mc-radius-sm: 10px;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

button,
input,
select,
textarea,
table,
label,
.form-control,
.btn,
.dropdown-menu,
.nav,
.navbar,
.sidebar-inner,
#sidebar-menu,
.content-page,
.card-box,
.panel,
.modal,
.alert,
.badge,
.label,
.breadcrumb,
.pagination,
.tooltip,
.popover {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
}

html,
body {
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    direction: rtl;
    background: var(--mc-bg) !important;
    color: var(--mc-text);
    font-family: Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body:before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 16%, rgba(79, 140, 255, .13), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(56, 189, 248, .12), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #f4f7fb 42%, #eef4fb 100%);
}

a { color: var(--mc-primary-dark); transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
a:hover,
a:focus { color: var(--mc-primary); text-decoration: none; }

#wrapper { min-height: 100vh; }

/* Topbar */
.topbar {
    background: transparent !important;
    box-shadow: none !important;
    min-height: 74px;
}

.topbar-left {
    background: transparent !important;
    border: 0 !important;
    height: 74px;
    display: flex;
    align-items: center;
}

.megro-brand-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 8px;
}

.megro-logo,
.megro-logo:hover,
.megro-logo:focus {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--mc-text) !important;
    font-weight: 900;
    letter-spacing: -.2px;
    line-height: 1.2;
}

.megro-logo-mark {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mc-primary), var(--mc-info));
    box-shadow: 0 10px 24px rgba(79, 140, 255, .24);
    font-weight: 900;
    font-size: 18px;
}

.megro-logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.megro-logo-title { font-size: 15px; color: var(--mc-text); }
.megro-logo-subtitle { font-size: 11px; color: var(--mc-muted); font-weight: 700; }

.navbar.navbar-default {
    background: rgba(255,255,255,.84) !important;
    border: 1px solid var(--mc-border) !important;
    box-shadow: var(--mc-shadow-soft) !important;
    min-height: 58px;
    margin: 8px 280px 0 20px;
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

.navbar.navbar-default .container {
    width: auto !important;
    max-width: none;
    padding: 0 18px !important;
}

.navbar.navbar-default .nav > li > a,
.megro-date-pill {
    color: var(--mc-muted) !important;
    font-weight: 700;
    line-height: 58px;
    padding-top: 0;
    padding-bottom: 0;
}

.megro-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.megro-date-pill:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mc-success);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, .12);
}

.navbar .profile img,
.megro-avatar {
    width: 38px !important;
    height: 38px !important;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(31, 45, 61, .14);
}

.dropdown-menu {
    border: 1px solid var(--mc-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mc-shadow) !important;
    overflow: hidden;
    padding: 8px !important;
}
.dropdown-menu > li > a {
    border-radius: 10px;
    color: #405166 !important;
    font-weight: 700;
    padding: 10px 12px !important;
}
.dropdown-menu > li > a:hover { background: var(--mc-primary-soft) !important; color: var(--mc-primary-dark) !important; }
.dropdown-menu .divider { margin: 6px 0 !important; background: var(--mc-border) !important; }

/* Sidebar */
.left.side-menu {
    background: transparent !important;
    width: 260px;
    padding: 8px 16px 18px 10px;
    box-shadow: none !important;
}

.sidebar-inner {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--mc-border);
    box-shadow: var(--mc-shadow-soft);
    border-radius: 22px;
    min-height: calc(100vh - 22px);
    padding: 14px 10px;
    overflow: hidden;
}

#sidebar-menu,
#sidebar-menu ul,
#sidebar-menu li { background: transparent !important; }
#sidebar-menu > ul { padding: 0 !important; }
#sidebar-menu .menu-title,
.text-muted.menu-title {
    color: var(--mc-muted-2) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 16px 12px 7px !important;
    margin: 0 !important;
}

#sidebar-menu > ul > li > a,
#sidebar-menu .has_sub > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin: 3px 0;
    padding: 9px 12px !important;
    border-radius: 13px;
    color: #526173 !important;
    font-weight: 800;
    border: 1px solid transparent;
}
#sidebar-menu > ul > li > a i,
#sidebar-menu .has_sub > a i {
    width: 22px;
    min-width: 22px;
    text-align: center;
    color: #8aa0b7 !important;
    font-size: 16px;
}
#sidebar-menu > ul > li > a:hover,
#sidebar-menu .has_sub > a:hover,
#sidebar-menu > ul > li > a.active,
#sidebar-menu .has_sub > a.active {
    color: #1d5fbf !important;
    background: var(--mc-primary-soft) !important;
    border-color: #d6e8ff;
}
#sidebar-menu > ul > li > a:hover i,
#sidebar-menu .has_sub > a:hover i,
#sidebar-menu > ul > li > a.active i,
#sidebar-menu .has_sub > a.active i { color: var(--mc-primary-dark) !important; }

.menu-toggle-btn,
.megro-sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--mc-border);
    background: #fff;
    color: var(--mc-text);
    box-shadow: 0 8px 20px rgba(31,45,61,.08);
    display: none;
    align-items: center;
    justify-content: center;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

/* Main content */
.content-page {
    margin-right: 260px !important;
    padding-top: 84px;
    background: transparent !important;
    min-height: 100vh;
}
.content-page > .content,
.content-page .content {
    padding: 0 20px 20px !important;
    margin-top: 0 !important;
}
.content-page .container {
    width: 100% !important;
    max-width: 1180px;
}

.page-title {
    color: var(--mc-text) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    margin: 20px 0 6px !important;
}
.page-title-alt,
.text-muted.page-title-alt {
    color: var(--mc-muted) !important;
    font-size: 13px !important;
    line-height: 1.8;
}

/* Global cards */
.card-box,
.panel.panel-default,
.panel.panel-danger,
.panel.panel-primary,
.panel.panel-success,
.panel.panel-info,
.panel.panel-warning {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius-lg) !important;
    box-shadow: var(--mc-shadow-soft) !important;
    padding: 22px !important;
    margin-bottom: 18px !important;
}
.card-box:hover,
.panel.panel-default:hover { box-shadow: var(--mc-shadow) !important; }

.panel-heading {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f6 !important;
    margin: -2px -2px 18px !important;
    padding: 0 0 14px !important;
    border-radius: 0 !important;
}
.panel-title,
.panel-heading h3,
.panel-heading h4,
.card-box h3,
.card-box h4 {
    color: #243447 !important;
    font-weight: 900 !important;
}
.panel-body { padding: 0 !important; }

/* Soft page intro for legacy rows */
.content-page .container > .row:first-child .page-title:first-child,
.content-page .container > .row:first-child h4.page-title:first-child {
    display: inline-block;
}

/* Forms */
.form-group label,
label.control-label,
.control-label {
    color: #405166 !important;
    font-size: 12.5px;
    font-weight: 900 !important;
    margin-bottom: 8px;
}
.form-control,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="url"].form-control,
input[type="email"].form-control {
    min-height: 40px;
    border-radius: var(--mc-radius-sm) !important;
    border: 1px solid #e0e7f0 !important;
    background: #fff !important;
    color: var(--mc-text) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--mc-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 140, 255, .12) !important;
    outline: none !important;
}
textarea.form-control { line-height: 1.7; }
.help-block,
small,
.text-muted { color: var(--mc-muted) !important; }

.checkbox label,
.radio label { color: #526173; font-weight: 700; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--mc-primary); }

/* Buttons */
.btn {
    border-radius: var(--mc-radius-sm) !important;
    font-weight: 800 !important;
    border-width: 1px !important;
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary,
.btn-custom,
.btn-pink {
    background: linear-gradient(135deg, var(--mc-primary), var(--mc-info)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(79, 140, 255, .22) !important;
}
.btn-primary:hover,
.btn-custom:hover,
.btn-pink:hover { box-shadow: 0 12px 28px rgba(79, 140, 255, .28) !important; }
.btn-default,
.btn-white {
    background: #fff !important;
    border-color: var(--mc-border-strong) !important;
    color: #405166 !important;
}
.btn-danger { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #be123c !important; }
.btn-success { background: #ecfdf5 !important; border-color: #bbf7d0 !important; color: #047857 !important; }
.btn-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.btn-info { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
.btn-xs { border-radius: 999px !important; padding: 4px 9px !important; }
.btn-sm { border-radius: 999px !important; }

/* Tables */
.table-responsive,
.table-scroll-x {
    border-radius: 14px;
    border: 1px solid #edf1f6;
    background: #fff;
    overflow: auto;
}
.table {
    margin: 0 !important;
    color: #405166;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.table > thead > tr > th {
    background: #f8fbff !important;
    color: #526173 !important;
    font-size: 12px;
    font-weight: 900 !important;
    border-bottom: 1px solid #edf1f6 !important;
    padding: 13px 12px !important;
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-top: 1px solid #f0f4f8 !important;
    padding: 12px !important;
    vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbfdff !important; }
.table > tbody > tr:hover { background: #f4f9ff !important; }
.table a { font-weight: 800; }

.label,
.badge {
    border-radius: 999px !important;
    padding: 6px 10px !important;
    font-weight: 800 !important;
}
.label-success { background: #ecfdf5 !important; color: #047857 !important; }
.label-danger { background: #fff1f2 !important; color: #be123c !important; }
.label-info { background: #eff6ff !important; color: #1d4ed8 !important; }
.label-warning { background: #fffbeb !important; color: #92400e !important; }

/* Accordion / settings */
.panel-group .panel {
    padding: 0 !important;
    overflow: hidden;
}
.panel-group .panel-heading {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.panel-group .panel-title > a,
.panel-group .panel-heading a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    color: #243447 !important;
    font-weight: 900;
}
.panel-group .panel-title > a:hover,
.panel-group .panel-heading a:hover { background: #f8fbff; }
.panel-group .panel-body { padding: 20px !important; border-top: 1px solid #edf1f6 !important; }

/* Alerts and modal */
.alert {
    border-radius: 14px !important;
    border-width: 1px !important;
    font-weight: 700;
}
.alert-info { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
.alert-success { background: #ecfdf5 !important; border-color: #bbf7d0 !important; color: #047857 !important; }
.alert-danger { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #be123c !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }

.modal-content {
    border: 1px solid var(--mc-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--mc-shadow) !important;
    overflow: hidden;
}
.modal-header,
.modal-footer { border-color: #edf1f6 !important; }
.modal-title { font-weight: 900; color: var(--mc-text); }

/* Footer */
.app-footer {
    margin: 20px 0 0;
    padding: 0 0 20px;
    background: transparent;
}
.app-footer__inner {
    direction: rtl;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--mc-border);
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 20px rgba(31,45,61,.04);
}
.app-footer__title { font-weight: 900; color: #526173; }
.app-footer__copy { color: var(--mc-muted); font-size: 12px; margin-top: 3px; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: 8px; }
.app-footer__link {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--mc-primary-soft);
    color: #1d5fbf;
    padding: 7px 12px;
    font-weight: 800;
    font-size: 12px;
}

/* Login */
.account-pages { background: transparent !important; }
.wrapper-page {
    width: min(430px, calc(100% - 28px)) !important;
    margin: 8vh auto 0 !important;
}
.wrapper-page .card-box {
    padding: 28px !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 54px rgba(31,45,61,.12) !important;
}
.wrapper-page .panel-heading {
    text-align: center;
    border: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}
.wrapper-page .panel-heading h3 {
    font-size: 22px;
    line-height: 1.7;
}
.wrapper-page .panel-heading:before {
    content: 'M';
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--mc-primary), var(--mc-info));
    color: #fff;
    font-weight: 900;
    font-size: 24px;
    box-shadow: 0 12px 28px rgba(79,140,255,.25);
}
.wrapper-page .btn-block { height: 44px; }

/* Small refinements */
hr { border-color: #edf1f6 !important; }
pre,
code {
    border-radius: 12px;
    background: #0f172a;
    color: #dbeafe;
    border: 0;
}
.text-custom { color: var(--mc-primary-dark) !important; }
.text-danger { color: var(--mc-danger) !important; }
.text-success { color: var(--mc-success) !important; }

/* Legacy layouts become less crowded */
.row { margin-left: -10px; margin-right: -10px; }
[class*="col-"] { padding-left: 10px; padding-right: 10px; }
.form-horizontal .form-group { margin-left: -10px; margin-right: -10px; }
.card-box .row + .row,
.panel-body .row + .row { margin-top: 12px; }

/* Animation - subtle, same family as add-config */
.card-box,
.panel,
.app-footer__inner,
.table-responsive {
    animation: mcFadeIn .22s ease both;
}
@keyframes mcFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 991px) {
    .navbar.navbar-default { margin-left: 14px; margin-right: 14px; }
    .content-page { margin-right: 0 !important; padding-top: 78px; }
    .left.side-menu {
        position: fixed !important;
        top: 0;
        right: -280px;
        width: 276px;
        height: 100vh;
        z-index: 9999;
        padding: 10px;
        transition: right .24s ease;
    }
    body.sidebar-open .left.side-menu { right: 0; }
    body.sidebar-open .sidebar-overlay { display: block; }
    .menu-toggle-btn,
    .megro-sidebar-toggle { display: inline-flex; }
    .topbar-left { width: 100%; }
    .navbar.navbar-default { min-height: 54px; }
    .navbar.navbar-default .nav > li > a,
    .megro-date-pill { line-height: 54px; }
    .content-page .container { padding-left: 14px; padding-right: 14px; }
    .app-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .navbar.navbar-default { margin: 4px 10px 0; border-radius: 15px; }
    .navbar.navbar-default .container { padding: 0 12px !important; }
    .hidden-xs { display: none !important; }
    .card-box,
    .panel.panel-default,
    .panel.panel-danger,
    .panel.panel-primary,
    .panel.panel-success,
    .panel.panel-info,
    .panel.panel-warning { padding: 16px !important; border-radius: 16px !important; }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 10px 9px !important; }
    .page-title { font-size: 19px !important; }
}


/* ===== Megro clean critical legacy layout safety net =====
   The old vendor CSS files were removed to avoid CDN/external dependencies.
   These rules provide the missing Bootstrap/Adminox layout pieces locally. */
html, body { min-height: 100%; }
ul.nav,
ul.navbar-nav,
#sidebar-menu ul,
.dropdown-menu { list-style: none !important; }
.nav,
.navbar-nav { padding-right: 0 !important; margin: 0 !important; }
.navbar-nav > li { float: right; }
.navbar-right { float: left !important; margin-right: auto !important; }
.navbar.navbar-default .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 58px !important;
}
.navbar.navbar-default .container > .nav { display: flex !important; align-items: center !important; }
.topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    height: 74px !important;
}
.topbar-left {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 260px !important;
    z-index: 1002 !important;
}
.left.side-menu {
    position: fixed !important;
    top: 74px !important;
    right: 0 !important;
    bottom: 14px !important;
    z-index: 999 !important;
    height: auto !important;
    overflow: visible !important;
}
.sidebar-inner {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
#sidebar-menu ul,
#sidebar-menu li { list-style: none !important; }
#sidebar-menu a { text-decoration: none !important; }
.content-page {
    position: relative !important;
    z-index: 1 !important;
    margin-right: 260px !important;
    padding-top: 84px !important;
}
.content-page > .content,
.content-page .content { width: 100%; }
.dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    min-width: 210px !important;
    z-index: 1100 !important;
    text-align: right !important;
    list-style: none !important;
}
.dropdown.open > .dropdown-menu,
.dropdown-menu.show { display: block !important; }
.profile.dropdown-toggle { display: inline-flex !important; align-items: center !important; padding: 0 !important; }
.navbar .profile img,
.megro-avatar { object-fit: cover; }
.app-footer { margin-right: 260px !important; }
.app-footer__inner { max-width: 1180px; }
.row:before,.row:after,.container:before,.container:after,.clearfix:before,.clearfix:after{content:' ';display:table}.row:after,.container:after,.clearfix:after{clear:both}
@media (max-width: 991px) {
    .topbar-left { width: 100% !important; }
    .left.side-menu {
        top: 0 !important;
        right: -280px !important;
        bottom: 0 !important;
        height: 100vh !important;
    }
    body.sidebar-open .left.side-menu { right: 0 !important; }
    .content-page { margin-right: 0 !important; padding-top: 78px !important; }
    .app-footer { margin-right: 0 !important; }
    .dropdown-menu { left: 0 !important; right: auto !important; }
}
@media (max-width: 767px) {
    .navbar.navbar-default .container { padding: 0 12px !important; }
    .navbar-nav > li { float: none; }
}

/* Megro layout hotfix: mobile menu overlay + fixed centered footer */
/* The dark mobile overlay was blocking clicks on some browsers/templates. Keep the drawer usable without a blocking layer. */
.sidebar-overlay,
body.sidebar-open .sidebar-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (min-width: 992px) {
    body.megro-panel {
        padding-bottom: 92px !important;
    }

    .content-page {
        padding-bottom: 110px !important;
    }

    .app-footer {
        position: fixed !important;
        right: 280px !important;
        left: 20px !important;
        bottom: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 920 !important;
        background: transparent !important;
        pointer-events: none;
    }

    .app-footer__inner {
        width: min(1180px, 100%) !important;
        max-width: 1180px !important;
        margin: 0 auto !important;
        pointer-events: auto;
        justify-content: center !important;
        text-align: center !important;
    }

    .app-footer__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .app-footer__links {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    body.sidebar-open {
        overflow: auto !important;
    }

    .left.side-menu {
        z-index: 10020 !important;
    }

    .app-footer {
        position: static !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 20px 0 0 !important;
        padding: 0 14px 18px !important;
        z-index: auto !important;
    }

    .app-footer__inner {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== Mobile list/table readability fix =====
   All legacy lists that use HTML tables become horizontally scrollable on mobile.
   Long values such as aliases, usernames, server names and config names are not truncated. */
.mc-mobile-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 14px;
}
.mc-mobile-table-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.table-scroll-x::-webkit-scrollbar {
    height: 8px;
}
.mc-mobile-table-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.table-scroll-x::-webkit-scrollbar-thumb {
    background: #c8d8ec;
    border-radius: 999px;
}
.mc-mobile-table-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.table-scroll-x::-webkit-scrollbar-track {
    background: #eef4fb;
    border-radius: 999px;
}

@media (max-width: 991px) {
    .content-page .table-responsive,
    .content-page .table-scroll-x,
    .content-page .mc-mobile-table-scroll,
    .card-box .table-responsive,
    .panel .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .content-page .table-responsive > table,
    .content-page .table-scroll-x > table,
    .content-page .mc-mobile-table-scroll > table,
    .content-page table.table {
        width: max-content !important;
        min-width: 860px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    .content-page table.table th,
    .content-page table.table td {
        white-space: nowrap !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .content-page table.table td a,
    .content-page table.table td span:not(.label):not(.badge),
    .content-page table.table td strong,
    .content-page table.table td small,
    .content-page table.table td code,
    .content-page table.table td .text-muted,
    .content-page table.table td .text-custom {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .content-page table.table .label,
    .content-page table.table .badge,
    .content-page table.table .btn {
        white-space: nowrap !important;
        flex-shrink: 0;
    }

    .content-page table.table input.form-control,
    .content-page table.table select.form-control,
    .content-page table.table textarea.form-control {
        min-width: 180px !important;
        width: auto !important;
        max-width: none !important;
    }

    .content-page table.table td[data-label],
    .content-page table.table td[data-title] {
        min-width: 120px;
    }

    .content-page .table-responsive::after,
    .content-page .table-scroll-x::after,
    .content-page .mc-mobile-table-scroll::after {
        content: 'برای دیدن جزئیات جدول را به چپ و راست بکشید';
        display: block;
        padding: 8px 10px 4px;
        color: var(--mc-muted);
        font-size: 11px;
        font-weight: 800;
        text-align: center;
        background: linear-gradient(180deg, rgba(248,251,255,0), #fff);
    }
}

@media (min-width: 992px) {
    .mc-mobile-table-scroll {
        overflow-x: visible !important;
    }
}


/* ===== Force horizontal scrolling for all legacy list pages =====
   Some pages already have .table-responsive wrappers, so JS must not skip them.
   These rules make the wrapper itself scroll and prevent columns from being squeezed/truncated. */
.table-responsive,
.table-scroll-x,
.mc-force-x-scroll,
.mc-mobile-table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.content-page .mc-force-x-scroll,
.content-page .table-responsive,
.content-page .table-scroll-x,
.content-page .mc-mobile-table-scroll {
    display: block !important;
}

.content-page .mc-force-x-scroll > table,
.content-page .table-responsive > table,
.content-page .table-scroll-x > table,
.content-page .mc-mobile-table-scroll > table,
.content-page table.mc-wide-table {
    width: max-content !important;
    max-width: none !important;
    table-layout: auto !important;
}

.content-page .mc-scroll-servers > table { min-width: 920px !important; }
.content-page .mc-scroll-messages > table { min-width: 820px !important; }
.content-page .mc-scroll-admins > table { min-width: 1040px !important; }
.content-page .mc-scroll-protocols > table { min-width: 980px !important; }

.content-page .table-responsive th,
.content-page .table-responsive td,
.content-page .table-scroll-x th,
.content-page .table-scroll-x td,
.content-page .mc-force-x-scroll th,
.content-page .mc-force-x-scroll td,
.content-page .mc-mobile-table-scroll th,
.content-page .mc-mobile-table-scroll td {
    white-space: nowrap !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.content-page .table-responsive input.form-control,
.content-page .table-scroll-x input.form-control,
.content-page .mc-force-x-scroll input.form-control,
.content-page .mc-mobile-table-scroll input.form-control,
.content-page .table-responsive select.form-control,
.content-page .table-scroll-x select.form-control,
.content-page .mc-force-x-scroll select.form-control,
.content-page .mc-mobile-table-scroll select.form-control {
    min-width: 220px !important;
    width: 100% !important;
    max-width: none !important;
}

.content-page .mc-table-long-text {
    white-space: normal !important;
    min-width: 420px !important;
    max-width: 620px !important;
    line-height: 1.9 !important;
    word-break: break-word !important;
}

@media (max-width: 991px) {
    .content-page .card-box,
    .content-page .panel {
        overflow: visible !important;
    }

    .content-page .table-responsive,
    .content-page .table-scroll-x,
    .content-page .mc-force-x-scroll,
    .content-page .mc-mobile-table-scroll {
        margin-left: -4px;
        margin-right: -4px;
        padding-bottom: 6px;
        border-radius: 14px;
    }

    .content-page .table-responsive > table,
    .content-page .table-scroll-x > table,
    .content-page .mc-force-x-scroll > table,
    .content-page .mc-mobile-table-scroll > table,
    .content-page table.mc-wide-table {
        min-width: 900px !important;
    }

    .content-page .mc-scroll-admins > table { min-width: 1040px !important; }
    .content-page .mc-scroll-protocols > table { min-width: 980px !important; }
    .content-page .mc-scroll-servers > table { min-width: 920px !important; }
    .content-page .mc-scroll-messages > table { min-width: 820px !important; }

    .content-page .table-responsive::after,
    .content-page .table-scroll-x::after,
    .content-page .mc-force-x-scroll::after,
    .content-page .mc-mobile-table-scroll::after {
        content: 'برای دیدن همه ستون‌ها، جدول را به چپ و راست بکشید';
        display: block;
        padding: 8px 10px 4px;
        color: var(--mc-muted);
        font-size: 11px;
        font-weight: 800;
        text-align: center;
        background: linear-gradient(180deg, rgba(248,251,255,0), #fff);
    }
}

/* ===== Fixed-size fields inside horizontal mobile tables =====
   Tables must scroll horizontally instead of squeezing controls and long names. */
.content-page .table-responsive,
.content-page .table-scroll-x,
.content-page .mc-force-x-scroll,
.content-page .mc-mobile-table-scroll {
    box-sizing: border-box !important;
    direction: rtl;
}

.content-page .table-responsive > table,
.content-page .table-scroll-x > table,
.content-page .mc-force-x-scroll > table,
.content-page .mc-mobile-table-scroll > table,
.content-page table.mc-wide-table {
    width: max-content !important;
    min-width: var(--mc-table-min-width, 960px) !important;
    max-width: none !important;
    table-layout: auto !important;
}

.content-page .table-responsive th,
.content-page .table-responsive td,
.content-page .table-scroll-x th,
.content-page .table-scroll-x td,
.content-page .mc-force-x-scroll th,
.content-page .mc-force-x-scroll td,
.content-page .mc-mobile-table-scroll th,
.content-page .mc-mobile-table-scroll td {
    min-width: 128px !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
}

.content-page .table-responsive th:first-child,
.content-page .table-responsive td:first-child,
.content-page .table-scroll-x th:first-child,
.content-page .table-scroll-x td:first-child,
.content-page .mc-force-x-scroll th:first-child,
.content-page .mc-force-x-scroll td:first-child,
.content-page .mc-mobile-table-scroll th:first-child,
.content-page .mc-mobile-table-scroll td:first-child {
    min-width: 56px !important;
    width: 56px !important;
    text-align: center !important;
}

.content-page .table-responsive td .form-control,
.content-page .table-scroll-x td .form-control,
.content-page .mc-force-x-scroll td .form-control,
.content-page .mc-mobile-table-scroll td .form-control {
    display: block !important;
    min-width: 240px !important;
    width: 240px !important;
    max-width: 240px !important;
    box-sizing: border-box !important;
}

.content-page .table-responsive td select.form-control,
.content-page .table-scroll-x td select.form-control,
.content-page .mc-force-x-scroll td select.form-control,
.content-page .mc-mobile-table-scroll td select.form-control {
    min-width: 210px !important;
    width: 210px !important;
    max-width: 210px !important;
}

.content-page .table-responsive td input[type="number"].form-control,
.content-page .table-scroll-x td input[type="number"].form-control,
.content-page .mc-force-x-scroll td input[type="number"].form-control,
.content-page .mc-mobile-table-scroll td input[type="number"].form-control {
    min-width: 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    text-align: center !important;
}

.content-page .table-responsive td input[dir="ltr"].form-control,
.content-page .table-scroll-x td input[dir="ltr"].form-control,
.content-page .mc-force-x-scroll td input[dir="ltr"].form-control,
.content-page .mc-mobile-table-scroll td input[dir="ltr"].form-control,
.content-page .table-responsive td input[type="url"].form-control,
.content-page .table-scroll-x td input[type="url"].form-control,
.content-page .mc-force-x-scroll td input[type="url"].form-control,
.content-page .mc-mobile-table-scroll td input[type="url"].form-control {
    min-width: 420px !important;
    width: 420px !important;
    max-width: 420px !important;
    direction: ltr !important;
    text-align: left !important;
}

.content-page .table-responsive td textarea.form-control,
.content-page .table-scroll-x td textarea.form-control,
.content-page .mc-force-x-scroll td textarea.form-control,
.content-page .mc-mobile-table-scroll td textarea.form-control {
    min-width: 380px !important;
    width: 380px !important;
    max-width: 380px !important;
    min-height: 120px !important;
    white-space: pre-wrap !important;
}

.content-page .table-responsive td input[type="hidden"],
.content-page .table-scroll-x td input[type="hidden"],
.content-page .mc-force-x-scroll td input[type="hidden"],
.content-page .mc-mobile-table-scroll td input[type="hidden"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Per-page table widths so mobile cards scroll instead of squeezing controls. */
.content-page .mc-scroll-servers > table { --mc-table-min-width: 980px; min-width: 980px !important; }
.content-page .mc-scroll-messages > table { --mc-table-min-width: 900px; min-width: 900px !important; }
.content-page .mc-scroll-admins > table { --mc-table-min-width: 1120px; min-width: 1120px !important; }
.content-page .mc-scroll-protocols > table { --mc-table-min-width: 1080px; min-width: 1080px !important; }
.content-page .mc-scroll-ads > table { --mc-table-min-width: 1180px; min-width: 1180px !important; }

/* Fixed columns for ads table. */
.content-page .mc-scroll-ads th:nth-child(2),
.content-page .mc-scroll-ads td:nth-child(2) { min-width: 220px !important; width: 220px !important; }
.content-page .mc-scroll-ads th:nth-child(3),
.content-page .mc-scroll-ads td:nth-child(3) { min-width: 450px !important; width: 450px !important; }
.content-page .mc-scroll-ads th:nth-child(4),
.content-page .mc-scroll-ads td:nth-child(4) { min-width: 170px !important; width: 170px !important; text-align: center !important; }
.content-page .mc-scroll-ads th:nth-child(5),
.content-page .mc-scroll-ads td:nth-child(5) { min-width: 330px !important; width: 330px !important; }
.content-page .mc-scroll-ads th:nth-child(6),
.content-page .mc-scroll-ads td:nth-child(6) { min-width: 110px !important; width: 110px !important; text-align: center !important; }
.content-page .mc-scroll-ads td:nth-child(2) select.form-control { width: 210px !important; min-width: 210px !important; max-width: 210px !important; }
.content-page .mc-scroll-ads td:nth-child(3) input.form-control { width: 420px !important; min-width: 420px !important; max-width: 420px !important; }
.content-page .mc-scroll-ads td:nth-child(4) input.form-control { width: 150px !important; min-width: 150px !important; max-width: 150px !important; }
.content-page .mc-scroll-ads td:nth-child(5) input.form-control { width: 300px !important; min-width: 300px !important; max-width: 300px !important; }

/* Fixed columns for protocol aliases and info text. */
.content-page .mc-scroll-protocols th:nth-child(3),
.content-page .mc-scroll-protocols td:nth-child(3) { min-width: 280px !important; width: 280px !important; }
.content-page .mc-scroll-protocols td:nth-child(3) input.form-control { width: 260px !important; min-width: 260px !important; max-width: 260px !important; }
.content-page .mc-scroll-protocols th:nth-child(5),
.content-page .mc-scroll-protocols td:nth-child(5) { min-width: 380px !important; width: 380px !important; }

@media (max-width: 991px) {
    .content-page .table-responsive,
    .content-page .table-scroll-x,
    .content-page .mc-force-x-scroll,
    .content-page .mc-mobile-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-bottom: 8px !important;
    }

    .content-page .table-responsive > table,
    .content-page .table-scroll-x > table,
    .content-page .mc-force-x-scroll > table,
    .content-page .mc-mobile-table-scroll > table,
    .content-page table.mc-wide-table {
        width: max-content !important;
        max-width: none !important;
    }

    .content-page .table-responsive .form-control,
    .content-page .table-scroll-x .form-control,
    .content-page .mc-force-x-scroll .form-control,
    .content-page .mc-mobile-table-scroll .form-control {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}


/* ===== Mobile collapse containment fix =====
   Collapsible panels must never expand to desktop/table width on phones.
   The panel stays viewport-sized; only the table wrapper scrolls horizontally. */
.content-page .table-responsive,
.content-page .table-scroll-x,
.content-page .mc-force-x-scroll,
.content-page .mc-mobile-table-scroll {
    min-width: 0 !important;
    max-width: 100% !important;
    contain: inline-size !important;
}

@media (max-width: 991px) {
    .content-page,
    .content-page > .content,
    .content-page .content,
    .content-page .container,
    .content-page .panel-group,
    .content-page .panel-group > .panel,
    .content-page .panel-collapse,
    .content-page .panel-collapse .panel-body,
    .content-page .panel-collapse form,
    .content-page .panel-collapse .p-20 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .content-page .panel-group > .panel,
    .content-page .panel-collapse,
    .content-page .panel-collapse .panel-body {
        overflow-x: hidden !important;
    }

    .content-page .panel-collapse.collapse {
        display: none !important;
        height: auto !important;
        max-height: none !important;
        transition: none !important;
    }

    .content-page .panel-collapse.collapse.in,
    .content-page .panel-collapse.collapse.show {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        transition: none !important;
    }

    .content-page .panel-collapse.collapsing {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
    }

    .content-page .panel-collapse .row,
    .content-page .panel-collapse .form-horizontal .form-group,
    .content-page .panel-collapse .form-group.row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .content-page .panel-collapse [class*="col-xs-"],
    .content-page .panel-collapse [class*="col-sm-"],
    .content-page .panel-collapse [class*="col-md-"],
    .content-page .panel-collapse [class*="col-lg-"] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .content-page .panel-collapse label[class*="col-"] {
        margin-top: 10px !important;
        margin-bottom: 7px !important;
        text-align: right !important;
    }

    .content-page .panel-collapse .form-control:not(table .form-control) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .content-page .panel-collapse .table-responsive,
    .content-page .panel-collapse .table-scroll-x,
    .content-page .panel-collapse .mc-force-x-scroll,
    .content-page .panel-collapse .mc-mobile-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        contain: inline-size !important;
    }

    .content-page .panel-collapse .table-responsive > table,
    .content-page .panel-collapse .table-scroll-x > table,
    .content-page .panel-collapse .mc-force-x-scroll > table,
    .content-page .panel-collapse .mc-mobile-table-scroll > table,
    .content-page .panel-collapse table.table {
        width: max-content !important;
        max-width: none !important;
        min-width: min(var(--mc-table-min-width, 760px), 920px) !important;
        table-layout: auto !important;
    }

    .content-page .panel-collapse table.table th,
    .content-page .panel-collapse table.table td {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .content-page .panel-collapse table.table td .form-control {
        min-width: 190px !important;
        width: 190px !important;
        max-width: 190px !important;
    }

    .content-page .panel-collapse table.table td input[type="url"].form-control,
    .content-page .panel-collapse table.table td input[dir="ltr"].form-control,
    .content-page .panel-collapse table.table td textarea.form-control {
        min-width: 260px !important;
        width: 260px !important;
        max-width: 260px !important;
    }

    .content-page .panel-collapse table.table td input[type="number"].form-control {
        min-width: 120px !important;
        width: 120px !important;
        max-width: 120px !important;
    }

    .content-page .panel-collapse .table-responsive::after,
    .content-page .panel-collapse .table-scroll-x::after,
    .content-page .panel-collapse .mc-force-x-scroll::after,
    .content-page .panel-collapse .mc-mobile-table-scroll::after {
        position: sticky;
        right: 0;
        left: 0;
    }
}

/* Mobile custom display:none sections, such as server protocol lists, must also stay inside the card. */
@media (max-width: 991px) {
    .content-page .card-box,
    .content-page .card-box > .row,
    .content-page .card-box .row,
    .content-page .card-box .p-20,
    .content-page [id$="-server-list"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .content-page .card-box {
        overflow-x: hidden !important;
    }

    .content-page [id$="-server-list"] {
        overflow-x: hidden !important;
        contain: inline-size !important;
    }

    .content-page [id$="-server-list"] .table-responsive,
    .content-page [id$="-server-list"] .table-scroll-x,
    .content-page [id$="-server-list"] .mc-force-x-scroll,
    .content-page [id$="-server-list"] .mc-mobile-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important;
        contain: inline-size !important;
    }
}