/* ==========================================================================
   VASbay professional design layer
   Loaded after theme/css/style.css and the per-domain brand file.
   Accent colours come from --vb-primary; reseller brand files that set
   .btn-primary etc. with !important keep their own colours.
   ========================================================================== */

:root {
    --vb-primary: #1ab394;
    --vb-primary-dark: #148f76;
    --vb-primary-soft: rgba(26, 179, 148, .12);
    --vb-ink: #0f172a;
    --vb-text: #334155;
    --vb-muted: #64748b;
    --vb-line: #e2e8f0;
    --vb-surface: #ffffff;
    --vb-canvas: #f4f6fa;
    --vb-side: #111827;
    --vb-side-2: #1f2937;
    --vb-side-text: #cbd5e1;
    --vb-radius: 12px;
    --vb-radius-sm: 8px;
    --vb-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
    --vb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body,
.gray-bg,
#page-wrapper {
    font-family: var(--vb-font);
    color: var(--vb-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.gray-bg,
#page-wrapper,
.wrapper-content {
    background-color: var(--vb-canvas);
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--vb-font);
    color: var(--vb-ink);
    letter-spacing: -.01em;
}
h5 { font-weight: 600; }
.gray-bg h1, .gray-bg h2, .gray-bg h3, .gray-bg h4, .gray-bg h5,
.white-bg h1, .white-bg h2, .white-bg h3, .white-bg h4, .white-bg h5 {
    color: var(--vb-ink);
}
/* headings on coloured cards keep the card's text colour */
[class*="-bg"]:not(.gray-bg):not(.white-bg) h1, [class*="-bg"]:not(.gray-bg):not(.white-bg) h2, [class*="-bg"]:not(.gray-bg):not(.white-bg) h3, [class*="-bg"]:not(.gray-bg):not(.white-bg) h4, [class*="-bg"]:not(.gray-bg):not(.white-bg) h5,
.widget h1, .widget h2, .widget h3, .widget h4, .widget h5,
.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5 {
    color: inherit;
}
.navy-bg h1, .navy-bg h2, .navy-bg h3, .navy-bg h4, .navy-bg h5, .navy-bg strong,
.blue-bg h1, .blue-bg h2, .blue-bg h3, .blue-bg h4, .blue-bg h5, .blue-bg strong,
.lazur-bg h1, .lazur-bg h2, .lazur-bg h3, .lazur-bg h4, .lazur-bg h5, .lazur-bg strong,
.yellow-bg h1, .yellow-bg h2, .yellow-bg h3, .yellow-bg h4, .yellow-bg h5, .yellow-bg strong,
.red-bg h1, .red-bg h2, .red-bg h3, .red-bg h4, .red-bg h5, .red-bg strong,
.black-bg h1, .black-bg h2, .black-bg h3, .black-bg h4, .black-bg h5, .black-bg strong {
    color: #ffffff !important;
}
/* Some headings carry the icon class themselves (<h5 class="fa fa-envelope">):
   keep the icon in FontAwesome and the text in the UI font. */
h1.fa, h2.fa, h3.fa, h4.fa, h5.fa, h6.fa {
    font-family: var(--vb-font);
    font-weight: 600;
}
h1.fa::before, h2.fa::before, h3.fa::before, h4.fa::before, h5.fa::before, h6.fa::before {
    font-family: FontAwesome;
    margin-right: 6px;
    color: var(--vb-muted);
    font-weight: normal;
}
/* Panel shell: the theme paints the sidebar column with the body background.
   Paint only the 220px sidebar strip dark (70px when collapsed) and the rest light,
   so short pages never show a dark block under the content. */
body {
    background: linear-gradient(to right, var(--vb-side) 220px, var(--vb-canvas) 220px) fixed;
}
body.mini-navbar {
    background: linear-gradient(to right, var(--vb-side) 70px, var(--vb-canvas) 70px) fixed;
}
@media (max-width: 768px) {
    body, body.mini-navbar { background: var(--vb-canvas); }
}
/* Content column always fills the screen; footer stays at the bottom */
#page-wrapper {
    min-height: 100vh !important;
    padding-bottom: 60px;
}
.footer { position: absolute; left: 0; right: 0; bottom: 0; }
a { transition: color .15s ease; }
.text-muted { color: var(--vb-muted) !important; }
::selection { background: var(--vb-primary-soft); }

/* ---------- Sidebar ---------- */
.navbar-static-side,
.navbar-default.navbar-static-side,
body.mini-navbar .navbar-static-side {
    background: var(--vb-side);
}
.nav-header {
    background: linear-gradient(160deg, var(--vb-side-2) 0%, var(--vb-side) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 26px 24px;
}
.nav-header .profile-element,
.nav-header a { color: #f8fafc; }
.navbar-default .nav > li > a {
    color: var(--vb-side-text);
    font-weight: 500;
    font-size: 13.5px;
    padding: 12px 20px 12px 22px;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background: rgba(255, 255, 255, .05);
    color: #ffffff;
}
.navbar-default .nav > li.active,
.main-nav > li.active {
    background: rgba(255, 255, 255, .04);
    border-left: 0 !important;
    border-right: 0 !important;
}
.navbar-default .nav > li.active > a {
    color: #ffffff;
    border-left-color: var(--vb-primary);
}
.navbar-default .nav > li > a i { width: 18px; opacity: .85; margin-right: 6px; }
/* Sub-menus: level 2 (.first-level) and level 3 (.second-level) */
.nav-second-level,
.navbar-default .nav-second-level {
    background: rgba(0, 0, 0, .18);
}
.nav-second-level .nav-second-level,
.navbar-default .nav-second-level .nav-second-level {
    background: rgba(0, 0, 0, .14);
}
.first-level li { padding-left: 0 !important; }
.navbar-default .nav-second-level li a,
.navbar-default .nav.nav-second-level > li > a {
    display: block !important;
    color: #94a3b8;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 9px 16px 9px 28px !important;
    border-left: 3px solid transparent;
    box-shadow: none !important;
    background: transparent;
}
.navbar-default .nav-second-level .nav-second-level li a {
    padding-left: 54px !important;
    font-size: 12.5px !important;
}
.navbar-default .nav-second-level li a i { width: 16px; margin-right: 8px; }
.navbar-default .nav-second-level li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .04);
}
/* Clicked item (footer.php adds .selectedli / .selectedlin): highlight that row only */
.navbar-default .selectedli > a,
.navbar-default .selectedlin > a,
.navbar-default .nav.nav-second-level > li.active > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .06);
    border-left-color: var(--vb-primary);
}
.navbar-default .selectedli .nav-second-level a { color: #94a3b8 !important; }
.navbar-default .selectedli .nav-second-level .selectedlin > a { color: #ffffff !important; }

/* ---------- Top bar ---------- */
.navbar-static-top,
.navbar.navbar-static-top {
    background: var(--vb-surface);
    border-bottom: 1px solid var(--vb-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    min-height: 60px;
}
.navbar-minimalize.btn,
.minimalize-styl-2 {
    border-radius: var(--vb-radius-sm);
    box-shadow: none;
}
.navbar-top-links li a {
    color: var(--vb-muted);
    font-weight: 500;
}
.navbar-top-links li a:hover { color: var(--vb-ink); }
.homelogo { font-weight: 700; letter-spacing: -.02em; }
.navbar-top-links .label,
.count-info .label {
    border-radius: 999px;
    font-size: 10px;
    padding: 2px 6px;
}

/* ---------- Page heading / info bar ---------- */
.page-heading {
    background: var(--vb-surface);
    border-bottom: 1px solid var(--vb-line) !important;
    padding: 10px 10px 6px;
}
.page-heading .breadcrumb {
    background: transparent;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--vb-text);
}
.page-heading marquee { font-weight: 500 !important; color: var(--vb-text); }

/* ---------- Cards (ibox, panels, widgets) ---------- */
.ibox {
    margin-bottom: 24px;
    border-radius: var(--vb-radius);
    box-shadow: var(--vb-shadow);
    background: var(--vb-surface);
}
/* Rounded corners without overflow:hidden - many pages put Bootstrap .row (negative
   side margins) directly inside .ibox, which overflow:hidden would clip. */
.ibox > :first-child { border-top-left-radius: var(--vb-radius); border-top-right-radius: var(--vb-radius); }
.ibox > :last-child  { border-bottom-left-radius: var(--vb-radius); border-bottom-right-radius: var(--vb-radius); }
.ibox > .row,
.ibox > div:not([class]) > .row,
.ibox > div[class=""] > .row { margin-left: 0; margin-right: 0; }
.ibox-title {
    background: var(--vb-surface);
    border: 0;
    border-bottom: 1px solid var(--vb-line);
    padding: 16px 20px 12px;
    min-height: 52px;
}
.ibox-title h5 {
    font-family: var(--vb-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--vb-ink);
}
.ibox-title h5 .fa { color: var(--vb-muted); margin-right: 6px; }
.ibox-content {
    border: 0;
    padding: 20px;
    background: var(--vb-surface);
}
.ibox-content h1, .ibox-content h2 { font-weight: 700; }
.stats-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vb-muted);
    font-weight: 600;
}
.label.stats-label { color: #ffffff; }
.widget,
.panel {
    border-radius: var(--vb-radius);
    box-shadow: var(--vb-shadow);
    border: 0;
}
.panel > :last-child { border-bottom-left-radius: var(--vb-radius); border-bottom-right-radius: var(--vb-radius); }
.panel-heading {
    border-top-left-radius: var(--vb-radius);
    border-top-right-radius: var(--vb-radius);
    font-weight: 600;
}
.hr-line-dashed { border-top-color: var(--vb-line); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--vb-radius-sm);
    font-weight: 500;
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus,
.btn.focus { outline: none; box-shadow: 0 0 0 3px var(--vb-primary-soft); }
.btn-primary {
    background-color: var(--vb-primary);
    border-color: var(--vb-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--vb-primary-dark);
    border-color: var(--vb-primary-dark);
}
.btn-white,
.btn-default {
    background: var(--vb-surface);
    border: 1px solid var(--vb-line);
    color: var(--vb-text);
}
.btn-white:hover,
.btn-default:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--vb-ink);
}
.btn-group > .btn.btn-primary { box-shadow: none; }
.btn-xs { border-radius: 6px; }

/* ---------- Forms ---------- */
.form-control,
.chosen-container-single .chosen-single,
.bootstrap-select > .dropdown-toggle {
    border-radius: var(--vb-radius-sm) !important;
    border: 1px solid #d5dce6;
    box-shadow: none;
    color: var(--vb-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:not(textarea) { min-height: 38px; }
.form-control:focus {
    border-color: var(--vb-primary);
    box-shadow: 0 0 0 3px var(--vb-primary-soft);
}
.form-control::placeholder { color: #94a3b8; }
label,
.control-label {
    font-weight: 600;
    color: var(--vb-text);
    font-size: 13px;
}
.mail-body h5,
.form-group h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vb-muted);
}

/* ---------- Tables ---------- */
.table { color: var(--vb-text); }
.table > thead > tr > th {
    background: #f8fafc;
    border-bottom: 1px solid var(--vb-line) !important;
    color: var(--vb-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 10px;
}
.table > tbody > tr > td {
    border-top: 1px solid #eef2f7;
    padding: 11px 10px;
    vertical-align: middle;
}
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover { background: #f8fafc; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbfcfe; }
.table-responsive { border: 0; }

/* ---------- Labels, badges, alerts ---------- */
.label,
.badge {
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 8px;
    letter-spacing: .02em;
}
.alert {
    border-radius: var(--vb-radius-sm);
    border: 0;
    border-left: 4px solid currentColor;
}

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    border-color: var(--vb-line);
    color: var(--vb-text);
    margin: 0 2px;
    border-radius: 6px !important;
}
.pagination > .active > a,
.pagination > .active > span {
    background: var(--vb-primary);
    border-color: var(--vb-primary);
}

/* ---------- Compose / mail-box layout ---------- */
.mail-box,
.mail-box-header {
    background: var(--vb-surface);
    border: 0;
}
.mail-box-header {
    border-radius: var(--vb-radius) var(--vb-radius) 0 0;
    border-bottom: 1px solid var(--vb-line);
    padding: 22px 24px;
}
.mail-box-header h2 { font-weight: 700; font-size: 20px; margin: 0; }
.mail-box {
    border-radius: 0 0 var(--vb-radius) var(--vb-radius);
    box-shadow: var(--vb-shadow);
    margin-bottom: 24px;
}
.category-list li a { color: var(--vb-text); border-radius: 6px; }
.activesmstype a { box-shadow: none !important; color: var(--vb-ink) !important; font-weight: 600; }

/* ---------- Modals & dropdowns ---------- */
.modal-content {
    border: 0;
    border-radius: var(--vb-radius);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}
.modal-header { border-bottom-color: var(--vb-line); }
.modal-footer { border-top-color: var(--vb-line); }
.dropdown-menu {
    border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-sm);
    box-shadow: var(--vb-shadow);
    padding: 6px;
}
.dropdown-menu > li > a { border-radius: 6px; }

/* ---------- Footer ---------- */
.footer {
    background: var(--vb-surface);
    border-top: 1px solid var(--vb-line);
    color: var(--vb-muted);
    font-size: 12.5px;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .animated { animation: none !important; }
    * { transition: none !important; }
}

/* ---------- Modals (SweetAlert) ---------- */
.swal2-modal {
    border-radius: var(--vb-radius) !important;
    font-family: var(--vb-font);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}
.swal2-modal .swal2-title { color: var(--vb-ink); font-weight: 700; font-size: 24px; }
.swal2-modal .swal2-content { color: var(--vb-text); font-size: 15px; }
.swal2-modal .swal2-styled {
    border-radius: var(--vb-radius-sm) !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
}
.swal2-modal .swal2-confirm { background-color: var(--vb-primary) !important; }
.swal2-modal .swal2-cancel { background-color: #94a3b8 !important; }

/* ---------- Report / form popups (#alert-modal, #modal-form, #notificationId) ---------- */
#alert-modal .modal-dialog,
#modal-form .modal-dialog {
    width: auto;
    max-width: min(1100px, calc(100vw - 32px));
    margin: 40px auto;
}
@media (min-width: 768px) {
    #alert-modal .modal-dialog { width: 900px; }
}
.modal-header {
    font-size: 16px;
    font-weight: 600;
    color: var(--vb-ink);
    padding: 16px 20px;
}
.modal-body {
    padding: 20px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: auto;
}
/* content pages loaded into a popup: no card-inside-a-card */
.modal-body .ibox { box-shadow: none; margin-bottom: 0; background: transparent; }
.modal-body .ibox-content { padding: 0; }
.modal-body .wrapper-content { padding: 0; }
.modal-body > .form-group > .row,
.modal-body > .row { margin-left: 0; margin-right: 0; }
.modal-body .table { margin-bottom: 12px; }
.modal-body .table-responsive { overflow-x: auto; }
.modal-body .pagination { margin: 8px 0; }

/* ---------- Search box + button (input-group) ---------- */
.input-group { display: flex; width: 100%; }
.input-group { align-items: stretch; }
.input-group > .form-control {
    flex: 1 1 auto;
    height: auto;
    min-height: 38px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .input-group-btn {
    display: flex;
    width: auto;
}
.input-group > .input-group-btn > .btn {
    min-height: 38px;
    height: auto;
    padding: 0 16px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Side menu: current page (panel.js syncMenu adds .is-current / .is-trail) ---------- */
.navbar-default .nav li > a:focus { outline:none; }
.navbar-default .nav li > a:focus-visible { outline:2px solid rgba(26,179,148,.6); outline-offset:-2px; }
.navbar-default .nav > li.is-trail > a { color:#ffffff; border-left-color:var(--vb-primary); background:rgba(255,255,255,.04); }
.navbar-default .nav-second-level li.is-trail > a { color:#e2e8f0 !important; }
.navbar-default .nav li.is-current > a,
.navbar-default .nav.nav-second-level > li.is-current > a {
    color:#ffffff !important;
    font-weight:600 !important;
    background:linear-gradient(90deg, rgba(26,179,148,.28), rgba(26,179,148,.06)) !important;
    border-left:3px solid var(--vb-primary) !important;
    position:relative;
}
.navbar-default .nav li.is-current > a::after {
    content:''; position:absolute; right:14px; top:50%; width:7px; height:7px; margin-top:-3px; border-radius:50%; background:var(--vb-primary);
    box-shadow:0 0 0 3px rgba(26,179,148,.25);
}

/* ---------- Account menu (top bar) and the profile dropdown in the side menu ---------- */
.navbar-top-links .vb-usermenu > a.vb-usermenu__toggle { display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; margin:8px 14px 8px 4px; min-height:0; border:1px solid var(--vb-border, #e2e8f0); border-radius:999px; color:var(--vb-ink); background:#fff; transition:border-color .15s, box-shadow .15s; }
.navbar-top-links .vb-usermenu > a.vb-usermenu__toggle:hover,
.navbar-top-links .vb-usermenu.open > a.vb-usermenu__toggle { border-color:#cbd5e1; box-shadow:0 2px 8px rgba(15,23,42,.08); background:#fff; }
.vb-usermenu__avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#1ab394,#0ea5e9); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; letter-spacing:.02em; flex:none; }
.vb-usermenu__avatar--lg { width:42px; height:42px; font-size:15px; }
.vb-usermenu__who { display:flex; flex-direction:column; line-height:1.15; text-align:left; max-width:160px; }
.vb-usermenu__who b { font-size:13px; font-weight:600; color:var(--vb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vb-usermenu__who small { font-size:11px; color:#64748b; }
.vb-usermenu__caret { color:#64748b; font-size:14px; transition:transform .15s; }
.vb-usermenu.open .vb-usermenu__caret { transform:rotate(180deg); }
.navbar-top-links .vb-usermenu__menu { width:270px; padding:6px; margin-top:4px; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.14); }
.navbar-top-links .vb-usermenu__menu > li { display:block; }
.navbar-top-links .vb-usermenu__menu > li.vb-usermenu__head, .vb-usermenu__head { display:flex !important; align-items:center; gap:12px; padding:10px 10px 12px; margin-bottom:4px; border-bottom:1px solid #f1f5f9; }
.vb-usermenu__head b { display:block; font-size:14px; color:var(--vb-ink); }
.vb-usermenu__head small { display:block; font-size:12px; color:#64748b; word-break:break-all; }
.navbar-top-links .vb-usermenu__menu > li > a,
.nav-header .vb-side-menu > li > a { display:flex; align-items:center; gap:10px; padding:9px 10px; margin:0; border-radius:8px; font-size:13px; font-weight:500; color:#334155 !important; min-height:0; line-height:1.3; background:transparent; }
.navbar-top-links .vb-usermenu__menu > li > a i,
.nav-header .vb-side-menu > li > a i { color:#64748b; width:16px; text-align:center; }
.navbar-top-links .vb-usermenu__menu > li > a:hover,
.nav-header .vb-side-menu > li > a:hover { background:#f1f5f9 !important; color:var(--vb-ink) !important; }
.navbar-top-links .vb-usermenu__menu > li > a:hover i,
.nav-header .vb-side-menu > li > a:hover i { color:var(--vb-primary); }
.vb-usermenu__menu .divider, .vb-side-menu .divider { margin:6px 4px; background:#f1f5f9; }
.vb-usermenu__menu a.vb-logout, .vb-side-menu a.vb-logout,
.vb-usermenu__menu a.vb-logout i, .vb-side-menu a.vb-logout i { color:#dc2626 !important; }
.vb-usermenu__menu a.vb-logout:hover, .vb-side-menu a.vb-logout:hover { background:#fef2f2 !important; }
.nav-header .vb-side-menu { min-width:210px; padding:6px; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.18); }
@media (max-width:768px) { .vb-usermenu__who, .vb-usermenu__caret { display:none; } .navbar-top-links .vb-usermenu > a.vb-usermenu__toggle { padding:4px; margin-right:8px; } }
/* Phones: the theme opens the sidebar (body-small + mini-navbar) as a 70px icon strip
   with labels hidden and hover fly-outs. Open it as a full menu with text instead. */
@media (max-width:768px) {
    /* a full-height drawer over the page; tapping the backdrop (panel.js .vb-nav-backdrop) closes it */
    body.body-small.mini-navbar .navbar-static-side { position:fixed; top:0; left:0; bottom:0; height:100vh; height:100dvh; z-index:2002;
        width:270px; max-width:85vw; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
        background:var(--vb-side); box-shadow:0 18px 40px rgba(15,23,42,.35); }
    body.body-small.mini-navbar .navbar-static-side .sidebar-collapse { min-height:100%; }
    .vb-nav-backdrop { display:none; }
    body.body-small.mini-navbar .vb-nav-backdrop { display:block; position:fixed; inset:0; z-index:2001; background:rgba(15,23,42,.45); animation:vb-fade .15s ease-out; }
    body.body-small.mini-navbar { overflow:hidden; }
    body.body-small.mini-navbar .nav-header { padding:26px 24px; }
    body.body-small.mini-navbar .profile-element { display:block; }
    body.body-small.mini-navbar .logo-element { display:none; }
    body.body-small.mini-navbar .nav-label,
    body.body-small.mini-navbar .navbar-default .nav li a span { display:inline; }
    body.body-small.mini-navbar .navbar-default .nav li a span.clear,
    body.body-small.mini-navbar .navbar-default .nav li a span.block { display:block; }
    body.body-small.mini-navbar .navbar-default .nav li a span.fa { display:inline-block; }
    body.body-small.mini-navbar .navbar-default .nav > li > a { font-size:13.5px; }
    body.body-small.mini-navbar .nav-second-level { position:static; left:auto; min-width:0; padding:0; border-radius:0; display:none !important; }
    body.body-small.mini-navbar .nav-second-level.in,
    body.body-small.mini-navbar .nav-second-level.collapsing { display:block !important; }
}
/* Phones: custom.css gives .homelogo a fixed 700px width and 35px text, which pushes the
   notification + account buttons onto a second row. Lay the top bar out as one flex row:
   menu button, logo (shrinks/truncates), then the right-hand icons. */
@media (max-width:768px) {
    .navbar.navbar-static-top { display:flex; align-items:center; flex-wrap:nowrap; min-height:60px; padding:0 4px 0 10px; }
    .navbar.navbar-static-top:before, .navbar.navbar-static-top:after,
    .navbar-static-top .navbar-header:before, .navbar-static-top .navbar-header:after { display:none; }
    .navbar-static-top .navbar-header { display:flex; align-items:center; flex:1 1 auto; min-width:0; float:none; margin:0; }
    .navbar-static-top .navbar-minimalize { float:none; flex:none; margin:0 10px 0 0; }
    .navbar-static-top .homelogo { float:none; flex:1 1 auto; width:auto; min-width:0; margin:0; padding:0; font-size:20px; line-height:1.2; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .navbar-static-top .homelogo * { margin:0; font-size:inherit; line-height:inherit; }
    .navbar-static-top .homelogo img { max-height:34px; width:auto; max-width:100%; vertical-align:middle; }
    .navbar-static-top .navbar-top-links { display:flex; align-items:center; flex:none; float:none; margin:0; }
    .navbar-static-top .navbar-top-links > li { float:none; margin:0; }
    .navbar-static-top .navbar-top-links > li > a { padding:10px 8px; min-height:0; }
    .navbar-static-top .vbnd > .vbnd__toggle { margin:10px 2px; }
    .navbar-static-top .navbar-top-links .vb-usermenu > a.vb-usermenu__toggle { margin:8px 4px; }
    /* the theme's .dropdown-menu { left:0 } beats .dropdown-menu-right, so the account menu opened
       off the right edge of the screen; pin it inside the viewport like the notifications menu */
    .navbar-static-top .vb-usermenu { position:static; }
    .navbar-static-top .navbar-top-links .vb-usermenu__menu { position:fixed; top:60px; left:auto; right:10px; width:270px; max-width:calc(100vw - 20px); max-height:calc(100vh - 70px); overflow-y:auto; }
}
/* Show / hide password button (public/dist/js/vb-password.js), used on the auth pages and panel forms */
.vb-pw { position:relative; }
.vb-pw > input { padding-right:44px !important; }
.vb-pw > input::-ms-reveal, .vb-pw > input::-ms-clear { display:none; }
.vb-pw__eye { position:absolute; top:50%; right:4px; transform:translateY(-50%); width:36px; height:36px; padding:0; border:0; border-radius:8px; background:transparent; color:#64748b; font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.vb-pw__eye:hover { color:#334155; background:#f1f5f9; }
.vb-pw__eye:focus { outline:none; }
.vb-pw__eye:focus-visible { outline:2px solid var(--vd-teal, #1ab394); outline-offset:-2px; }

/* page area slides in (animate.css fadeInRight) but must not keep the end transform: any transform makes it
   the containing block of position:fixed children, so slide-over drawers and overlays were cut to the content box */
#wrapper-data.animated { -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards; }

/* send dialogs of Compose SMS (panel.js vbSendResult / vbScheduleConfirm, SweetAlert2 6.x) */
.swal2-modal.vbs-modal { border-radius:18px; padding:0 !important; overflow:hidden; font-family:inherit; }
.vbs-modal .swal2-content { padding:0; }
.vbs-modal .swal2-buttonswrapper { display:flex; gap:10px; justify-content:stretch; padding:0 28px 26px; margin:0; }
.vbs-modal .swal2-close { top:10px; right:12px; color:#94a3b8; font-size:28px; }
.vbs { text-align:left; padding:30px 28px 18px; color:#0f172a; }
.vbs-icon { width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 0 14px; }
.vbs-icon--ok { background:#e6f7f2; color:#0f9f7f; } .vbs-icon--sky { background:#e8f1fe; color:#2563eb; } .vbs-icon--warn { background:#fff4e0; color:#c2410c; }
.vbs h3 { font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px; color:#0f172a; }
.vbs-sub { margin:0 0 18px; font-size:14px; color:#64748b; }
.vbs-when, .vbs-push { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #e5eaf0; border-radius:12px; background:#f8fafc; margin-bottom:12px; }
.vbs-when > .fa { font-size:18px; color:#475569; width:20px; text-align:center; }
.vbs-when small, .vbs-push small { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
.vbs-when b { font-size:15px; }
.vbs-push > div { flex:1; min-width:0; }
.vbs-push b { font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.vbs-copy { border:1px solid #d5dce6; background:#fff; border-radius:8px; height:32px; padding:0 12px; font-size:12.5px; font-weight:600; color:#334155; display:inline-flex; align-items:center; gap:6px; }
.vbs-copy:hover { border-color:#1ab394; color:#148f76; }
.vbs-rows { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:0 0 12px; }
.vbs-rows > div { padding:10px 12px; border:1px solid #e5eaf0; border-radius:10px; }
.vbs-rows dt { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b; margin:0 0 2px; }
.vbs-rows dd { margin:0; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.vbs-note { display:flex; gap:8px; margin:4px 0 0; font-size:12.5px; color:#64748b; line-height:1.5; }
.vbs-note .fa { margin-top:2px; }
.vbs-alert { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid #fcd34d; background:#fffbeb; border-radius:12px; margin-bottom:12px; font-size:13px; color:#78350f; line-height:1.5; }
.vbs-alert b { color:#92400e; font-size:13.5px; }
.vbs-okline { display:flex; gap:8px; align-items:center; padding:10px 14px; border-radius:12px; background:#ecfdf5; color:#047857; font-size:13px; margin-bottom:12px; }
.vbs-list { margin:2px 0 0; padding-left:18px; font-size:12.5px; color:#64748b; line-height:1.6; }
.vbs-btn { flex:1; height:44px; border-radius:10px; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0 !important; cursor:pointer; }
.vbs-btn--primary { background:#1ab394; border:1px solid #1ab394; color:#fff; }
.vbs-btn--primary:hover { background:#169e83; border-color:#169e83; }
.vbs-btn--ghost { background:#fff; border:1px solid #d5dce6; color:#0f172a; }
.vbs-btn--ghost:hover { background:#f8fafc; border-color:#c5cfdb; }
@media (max-width:480px) { .vbs { padding:26px 20px 14px; } .vbs-modal .swal2-buttonswrapper { flex-direction:column-reverse; padding:0 20px 20px; } .vbs-btn { width:100%; } }
/* SweetAlert2 6.x sets its own button colours and wrapper layout: take them over */
.vbs-modal .swal2-buttonswrapper { display:flex !important; }
.vbs-modal .swal2-styled, .vbs-modal button.vbs-btn { flex:1 1 0; min-width:0; box-shadow:none; }
.vbs-modal button.vbs-btn--ghost { background:#fff !important; border:1px solid #d5dce6 !important; color:#0f172a !important; }
.vbs-modal button.vbs-btn--primary { background:#1ab394 !important; border:1px solid #1ab394 !important; color:#fff !important; }
.vbs-modal button.vbs-btn:focus { outline:none; box-shadow:0 0 0 3px rgba(26,179,148,.25) !important; }

/* messages (panel.js showmessage): same card as the send dialogs, one tone per type */
.vbs-icon--err { background:#fdecec; color:#dc2626; }
.vbs--msg { padding:28px 28px 16px; }
.vbs--msg h3 { font-size:18px; }
.vbs-msg { margin:2px 0 4px; font-size:14.5px; line-height:1.55; color:#334155; word-break:break-word; white-space:pre-line; }
.vbs--msg .vbs-note { margin-top:10px; }
.swal2-modal.vbs-modal--msg { border-top:4px solid #1ab394; }
.swal2-modal.vbs-modal--err { border-top-color:#dc2626; }
.swal2-modal.vbs-modal--warn { border-top-color:#f59e0b; }
.swal2-modal.vbs-modal--sky { border-top-color:#0ea5e9; }
.vbs-modal--msg .swal2-buttonswrapper { justify-content:flex-end !important; }
.vbs-modal--msg button.vbs-btn { flex:0 0 auto !important; min-width:120px; padding:0 22px; }
.vbs-modal--err button.vbs-btn--primary { background:#0f172a !important; border-color:#0f172a !important; }
@media (max-width:480px) { .vbs-modal--msg button.vbs-btn { flex:1 1 auto !important; } }

/* a field named by an error message (panel.js markField) */
.vb-invalid, .vb-invalid.form-control, .chosen-container.vb-invalid .chosen-single, .chosen-container.vb-invalid .chosen-choices {
    border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.14) !important; }
div.vb-invalid:not(.chosen-container) { border:1px solid #dc2626; border-radius:10px; }
.vb-invalid-msg { display:flex; align-items:center; gap:6px; margin:6px 0 0; font-size:12.5px; font-weight:600; color:#b91c1c; }
.vb-invalid--shake { animation:vbshake .45s ease-in-out; }
@keyframes vbshake { 0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }
@media (prefers-reduced-motion:reduce) { .vb-invalid--shake { animation:none; } }

@keyframes vb-fade { from { opacity:0; } to { opacity:1; } }