:root {
  --vb-bg: #f5f7fb;
  --vb-panel: #ffffff;
  --vb-text: #172033;
  --vb-muted: #6b7280;
  --vb-border: #e5e7eb;
  --vb-primary: #2337ff;
  --vb-primary-dark: #1726c9;
  --vb-success: #0f9f6e;
  --vb-danger: #dc2626;
  --vb-warning: #d97706;
  --vb-radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--vb-bg);
  color: var(--vb-text);
}

a { color: inherit; text-decoration: none; }

.vb-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(35,55,255,.14), transparent 34%),
    linear-gradient(135deg, #f8fafc, #eef2ff);
}

.vb-auth-card {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--vb-border);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.vb-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
}

.vb-sidebar {
  background: #0f172a;
  color: #e5e7eb;
  padding: 24px 18px;
}

.vb-brand {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  margin-bottom: 28px;
}

.vb-brand small {
  display: block;
  color: #94a3b8;
  font-weight: 500;
  font-size: 12px;
  margin-top: 4px;
}

.vb-nav {
  display: grid;
  gap: 6px;
}

.vb-nav a {
  display: block;
  padding: 11px 12px;
  border-radius: 12px;
  color: #cbd5e1;
}

.vb-nav a:hover,
.vb-nav a.active {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.vb-main {
  padding: 28px;
}

.vb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.vb-title h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.03em;
}

.vb-title p {
  margin: 6px 0 0;
  color: var(--vb-muted);
}

.vb-grid {
  display: grid;
  gap: 18px;
}

.vb-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vb-card {
  background: var(--vb-panel);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.vb-stat strong {
  display: block;
  font-size: 30px;
  letter-spacing: -.04em;
}

.vb-stat span {
  color: var(--vb-muted);
  font-size: 14px;
}

.vb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #e5e7eb;
  color: #111827;
  font-weight: 700;
  cursor: pointer;
}

.vb-btn.primary {
  background: var(--vb-primary);
  color: #fff;
}

.vb-btn.primary:hover { background: var(--vb-primary-dark); }

.vb-btn.danger {
  background: #fee2e2;
  color: var(--vb-danger);
}

.vb-form {
  display: grid;
  gap: 16px;
}

.vb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.vb-field label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 7px;
}

.vb-input,
.vb-select,
.vb-textarea {
  width: 100%;
  border: 1px solid var(--vb-border);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
}

.vb-textarea {
  min-height: 110px;
  resize: vertical;
}

.vb-table-wrap {
  overflow-x: auto;
}

.vb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.vb-table th,
.vb-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--vb-border);
  vertical-align: top;
}

.vb-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vb-muted);
}

.vb-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  background: #eef2ff;
  color: #2433d8;
}

.vb-badge.success { background: #dcfce7; color: #047857; }
.vb-badge.warning { background: #fef3c7; color: #b45309; }
.vb-badge.danger { background: #fee2e2; color: #b91c1c; }

.vb-alert {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #eef2ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
}

.vb-alert.error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.vb-muted { color: var(--vb-muted); }

@media (max-width: 900px) {
  .vb-shell { grid-template-columns: 1fr; }
  .vb-sidebar { position: static; }
  .vb-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .vb-main { padding: 18px; }
  .vb-grid.cols-4 { grid-template-columns: 1fr; }
}

/* Veytrium brand integration */
.vb-logo-auth {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px;
}

.vb-logo-sidebar {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 0 8px;
}

.vb-logo-page {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.vb-brand-block {
  margin-bottom: 40px;
}

.vb-brand-block small {
  display: block;
  color: #94a3b8;
  font-weight: 500;
  font-size: 12px;
  margin-top: 6px;
}

.vb-invoice-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.vb-payment-brand {
  margin-bottom: 20px;
}

@media (max-width: 560px) {
  .vb-logo-auth,
  .vb-logo-page {
    width: 190px;
  }

  .vb-logo-sidebar {
    width: 170px;
  }
}


/* Veytrium sidebar logo/menu spacing refinement */
.vb-sidebar .vb-brand-block {
  margin-bottom: 40px !important;
  padding-bottom: 4px;
}

.vb-sidebar .vb-logo-sidebar {
  margin-bottom: 10px;
}

.vb-sidebar nav,
.vb-sidebar .vb-menu {
  margin-top: 0;
}


/* Veytrium Billing dashboard tracking polish */
.vb-dashboard {
  display: grid;
  gap: 18px;
}

.vb-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 2px;
}

.vb-stat-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
  color: #172033;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vb-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
  border-color: #c7d2fe;
}

.vb-stat-card.warning {
  border-color: #fde68a;
}

.vb-stat-card.danger {
  border-color: #fecaca;
}

.vb-stat-number {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.vb-stat-label {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 750;
}

.vb-stat-sub {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

.vb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.vb-section-head h2 {
  margin: 0 0 5px;
}

.vb-section-head p {
  margin: 0;
}

.vb-badge.danger {
  background: #fee2e2;
  color: #991b1b;
}

.vb-badge.warning {
  background: #fef3c7;
  color: #92400e;
}

.vb-badge.success {
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 1280px) {
  .vb-stat-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .vb-stat-grid {
    grid-template-columns: 1fr;
  }

  .vb-section-head {
    flex-direction: column;
  }
}

/* Veytrium Billing dashboard tracking polish */
.vb-dashboard {
  display: grid;
  gap: 18px;
}

.vb-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 2px;
}

.vb-stat-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
  color: #172033;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vb-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
  border-color: #c7d2fe;
}

.vb-stat-card.warning {
  border-color: #fde68a;
}

.vb-stat-card.danger {
  border-color: #fecaca;
}

.vb-stat-number {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.vb-stat-label {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 750;
}

.vb-stat-sub {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

.vb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.vb-section-head h2 {
  margin: 0 0 5px;
}

.vb-section-head p {
  margin: 0;
}

.vb-badge.danger {
  background: #fee2e2;
  color: #991b1b;
}

.vb-badge.warning {
  background: #fef3c7;
  color: #92400e;
}

.vb-badge.success {
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 1280px) {
  .vb-stat-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .vb-stat-grid {
    grid-template-columns: 1fr;
  }

  .vb-section-head {
    flex-direction: column;
  }
}

/* Veytrium Billing dashboard tracking polish */
.vb-dashboard {
  display: grid;
  gap: 18px;
}

.vb-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 2px;
}

.vb-stat-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
  color: #172033;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vb-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
  border-color: #c7d2fe;
}

.vb-stat-card.warning {
  border-color: #fde68a;
}

.vb-stat-card.danger {
  border-color: #fecaca;
}

.vb-stat-number {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.vb-stat-label {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 750;
}

.vb-stat-sub {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

.vb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.vb-section-head h2 {
  margin: 0 0 5px;
}

.vb-section-head p {
  margin: 0;
}

.vb-badge.danger {
  background: #fee2e2;
  color: #991b1b;
}

.vb-badge.warning {
  background: #fef3c7;
  color: #92400e;
}

.vb-badge.success {
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 1280px) {
  .vb-stat-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .vb-stat-grid {
    grid-template-columns: 1fr;
  }

  .vb-section-head {
    flex-direction: column;
  }
}

/* BILLING-1.5B-FIX2 - public payment request responsive polish */
.vb-public-request-card{
  max-width: 620px !important;
  width: min(620px, calc(100vw - 32px)) !important;
}
.vb-public-summary-wrap{
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: auto;
  margin-bottom: 18px;
  background: #fff;
}
.vb-public-summary-table{
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.vb-public-summary-table td{
  padding: 14px 16px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.vb-public-summary-table td:first-child{
  width: 36%;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
}
.vb-public-note{
  padding: 14px 16px;
  border: 1px solid #b7c4ff;
  background: #eef2ff;
  color: #0b2e83;
  border-radius: 12px;
}
@media (max-width: 640px){
  .vb-public-request-card{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .vb-public-summary-table td{
    padding: 12px 12px;
    font-size: 14px;
  }
  .vb-public-summary-table td:first-child{
    width: 40%;
  }
}

/* BILLING-1.5B-FIX3 - rebuilt public payment request layout */
.vb-pr-card {
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  padding: 32px !important;
  overflow: hidden;
}

.vb-pr-logo {
  display: block;
  width: 285px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 26px;
}

.vb-pr-eyebrow {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
}

.vb-pr-title {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #172033;
}

.vb-pr-customer {
  margin: 0 0 18px;
  color: #64748b;
  font-size: 16px;
}

.vb-pr-details {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 18px;
}

.vb-pr-row {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  border-top: 1px solid #e5e7eb;
}

.vb-pr-row:first-child {
  border-top: 0;
}

.vb-pr-label {
  background: #f8fafc;
  color: #58708f;
  font-weight: 650;
  padding: 13px 15px;
  min-width: 0;
}

.vb-pr-value {
  color: #172033;
  padding: 13px 15px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vb-pr-value strong {
  font-weight: 850;
}

.vb-pr-status {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 15px;
}

.vb-pr-note {
  padding: 14px 16px;
  border: 1px solid #b7c4ff;
  background: #eef2ff;
  color: #0b2e83;
  border-radius: 12px;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .vb-pr-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 26px 22px !important;
  }

  .vb-pr-logo {
    width: 245px;
  }

  .vb-pr-title {
    font-size: 28px;
  }

  .vb-pr-row {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .vb-pr-label,
  .vb-pr-value {
    padding: 12px 12px;
    font-size: 14px;
  }
}

/* BILLING-1.5B-FIX6 - customer service row action buttons */
.vb-service-actions {
  display: grid;
  gap: 10px;
  min-width: 190px;
}

.vb-service-actions-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vb-service-actions form {
  margin: 0;
  width: 100%;
}

.vb-service-actions .vb-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  min-height: 42px;
}

.vb-service-actions .vb-btn.primary {
  min-height: 46px;
}

.vb-service-actions .vb-btn.danger {
  background: #fee2e2;
  color: #dc2626;
}

.vb-service-actions .vb-btn.danger:hover {
  background: #fecaca;
}

@media (max-width: 760px) {
  .vb-service-actions {
    min-width: 160px;
  }
}

/* BILLING-1.5B-FIX8 - payment request list polish */
.vb-nowrap {
  white-space: nowrap;
}

.vb-prq-request {
  min-width: 150px;
  white-space: nowrap;
}

.vb-prq-date {
  min-width: 105px;
  white-space: nowrap;
}

.vb-prq-amount {
  min-width: 100px;
  white-space: nowrap;
}

.vb-prq-status {
  min-width: 82px;
  white-space: nowrap;
}

.vb-prq-link {
  min-width: 72px;
  white-space: nowrap;
}

.vb-prq-actions {
  display: grid;
  gap: 10px;
  width: 140px;
  min-width: 140px;
}

.vb-prq-actions form {
  margin: 0;
  width: 100%;
}

.vb-prq-actions .vb-btn,
.vb-prq-actions button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  min-height: 40px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.vb-table td.vb-prq-service,
.vb-table td.vb-prq-domain,
.vb-table td.vb-prq-customer {
  min-width: 150px;
}

@media (max-width: 1100px) {
  .vb-prq-request {
    min-width: 135px;
  }

  .vb-prq-actions {
    width: 140px;
    min-width: 140px;
  }
}

/* BILLING-1.5B-FIX11 - invoice list action buttons */
.vb-invoice-actions {
  display: grid;
  gap: 10px;
  width: 170px;
  min-width: 170px;
}

.vb-invoice-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vb-invoice-actions form {
  margin: 0;
  width: 100%;
}

.vb-invoice-actions .vb-btn,
.vb-invoice-actions button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  min-height: 40px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.vb-invoice-actions .vb-btn.danger {
  background: #fee2e2;
  color: #dc2626;
}

.vb-invoice-actions .vb-btn.danger:hover {
  background: #fecaca;
}

.vb-inv-no,
.vb-inv-date,
.vb-inv-amount,
.vb-inv-status,
.vb-inv-link {
  white-space: nowrap;
}

.vb-inv-no {
  min-width: 145px;
}

.vb-inv-date {
  min-width: 105px;
}

.vb-inv-amount {
  min-width: 100px;
}

.vb-inv-service,
.vb-inv-customer {
  min-width: 150px;
}

/* BILLING-1.5B-FIX12 - final invoice actions layout */
.vb-inv-actions-cell-final {
  width: 220px;
  min-width: 220px;
}

.vb-invoice-actions-final {
  display: grid;
  gap: 10px;
  width: 220px;
  min-width: 220px;
}

.vb-invoice-actions-final-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.vb-invoice-actions-final form {
  margin: 0;
  width: 100%;
}

.vb-invoice-actions-final .vb-btn,
.vb-invoice-actions-final button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  padding: 10px 12px;
  box-sizing: border-box;
}

.vb-invoice-actions-final .vb-btn.danger {
  background: #fee2e2;
  color: #dc2626;
}

.vb-invoice-actions-final .vb-btn.danger:hover {
  background: #fecaca;
}

.vb-inv-no-final {
  min-width: 150px;
  white-space: nowrap;
}

.vb-inv-date-final {
  min-width: 105px;
  white-space: nowrap;
}

.vb-inv-amount-final {
  min-width: 105px;
  white-space: nowrap;
}

.vb-inv-status-final,
.vb-inv-link-final {
  white-space: nowrap;
}

.vb-inv-service-final {
  min-width: 230px;
}

.vb-inv-customer-final {
  min-width: 160px;
}

/* Veytrium dashboard open invoice actions */
#open-invoices .vb-table td:last-child .vb-actions {
  display: grid;
  gap: 10px;
  width: 148px;
  min-width: 148px;
}

#open-invoices .vb-table td:last-child .vb-actions form {
  margin: 0;
  width: 100%;
}

#open-invoices .vb-table td:last-child .vb-actions .vb-btn,
#open-invoices .vb-table td:last-child .vb-actions button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 40px;
  text-align: center;
  box-sizing: border-box;
}

/* Veytrium admin mobile responsive layout */
.vb-mobile-menu-button,
.vb-mobile-backdrop {
  display: none;
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #f3f6fc;
  }

  .vb-mobile-menu-button {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    cursor: pointer;
  }

  .vb-mobile-menu-button span {
    width: 19px;
    height: 2px;
    display: block;
    border-radius: 99px;
    background: #172033;
  }

  .vb-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.vb-mobile-menu-open .vb-mobile-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  #vb-admin-sidebar,
  aside[class*="sidebar"],
  nav[class*="sidebar"],
  .admin-sidebar,
  .vb-sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1100 !important;
    width: min(292px, 86vw) !important;
    max-width: 86vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 24px 0 60px rgba(15, 23, 42, 0.22);
  }

  body.vb-mobile-menu-open #vb-admin-sidebar,
  body.vb-mobile-menu-open aside[class*="sidebar"],
  body.vb-mobile-menu-open nav[class*="sidebar"],
  body.vb-mobile-menu-open .admin-sidebar,
  body.vb-mobile-menu-open .vb-sidebar,
  body.vb-mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .admin-main,
  .vb-admin-main,
  .admin-content,
  .vb-content,
  .content,
  .main-content,
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .admin-main,
  .vb-admin-main,
  .admin-content,
  .vb-content,
  .content,
  .main-content {
    padding-top: 74px !important;
  }

  .page-head,
  .vb-page-head,
  .admin-page-head,
  .dashboard-head,
  .vb-dashboard-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .page-head .vb-btn,
  .vb-page-head .vb-btn,
  .admin-page-head .vb-btn,
  .dashboard-head .vb-btn,
  .vb-dashboard-head .vb-btn {
    width: 100%;
    justify-content: center;
  }

  .stats-grid,
  .dashboard-grid,
  .dashboard-cards,
  .vb-stats-grid,
  .vb-dashboard-grid,
  .cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .card,
  .vb-card,
  .stat-card,
  .dashboard-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table-responsive,
  .vb-table-responsive,
  .table-wrap,
  .vb-table-wrap,
  .rk-admin-table-scroll,
  .card:has(table),
  .vb-card:has(table) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .vb-table,
  .admin-table {
    width: 100%;
    min-width: 720px;
  }

  .vb-table td:last-child,
  .admin-table td:last-child,
  table td:last-child {
    white-space: normal;
  }

  .vb-actions,
  .table-actions,
  .admin-actions,
  td.actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-width: 132px;
  }

  .vb-actions form,
  .table-actions form,
  .admin-actions form,
  td.actions form {
    width: 100%;
    margin: 0;
  }

  .vb-actions .vb-btn,
  .table-actions .vb-btn,
  .admin-actions .vb-btn,
  .vb-actions button,
  .table-actions button,
  .admin-actions button,
  td.actions .vb-btn,
  td.actions button {
    width: 100% !important;
    min-height: 38px;
    justify-content: center;
    white-space: nowrap;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  .form-grid,
  .vb-form-grid,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .stats-grid,
  .dashboard-grid,
  .dashboard-cards,
  .vb-stats-grid,
  .vb-dashboard-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-main,
  .vb-admin-main,
  .admin-content,
  .vb-content,
  .content,
  .main-content,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  table,
  .vb-table,
  .admin-table {
    min-width: 660px;
  }

  h1 {
    font-size: 26px;
    line-height: 1.15;
  }

  h2 {
    font-size: 21px;
    line-height: 1.2;
  }

  .vb-btn,
  button,
  input[type="submit"] {
    min-height: 38px;
  }
}
/* End Veytrium admin mobile responsive layout */

/* Veytrium admin mobile table card layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin-customers,
  body.vb-admin-page-admin-services,
  body.vb-admin-page-admin-payment-requests,
  body.vb-admin-page-admin-invoices {
    overflow-x: hidden;
  }

  body.vb-admin-page-admin-customers .card,
  body.vb-admin-page-admin-services .card,
  body.vb-admin-page-admin-payment-requests .card,
  body.vb-admin-page-admin-invoices .card,
  body.vb-admin-page-admin-customers .vb-card,
  body.vb-admin-page-admin-services .vb-card,
  body.vb-admin-page-admin-payment-requests .vb-card,
  body.vb-admin-page-admin-invoices .vb-card {
    overflow: visible !important;
  }

  body.vb-admin-page-admin-customers .table-responsive,
  body.vb-admin-page-admin-services .table-responsive,
  body.vb-admin-page-admin-payment-requests .table-responsive,
  body.vb-admin-page-admin-invoices .table-responsive,
  body.vb-admin-page-admin-customers .vb-table-responsive,
  body.vb-admin-page-admin-services .vb-table-responsive,
  body.vb-admin-page-admin-payment-requests .vb-table-responsive,
  body.vb-admin-page-admin-invoices .vb-table-responsive,
  body.vb-admin-page-admin-customers .table-wrap,
  body.vb-admin-page-admin-services .table-wrap,
  body.vb-admin-page-admin-payment-requests .table-wrap,
  body.vb-admin-page-admin-invoices .table-wrap,
  body.vb-admin-page-admin-customers .vb-table-wrap,
  body.vb-admin-page-admin-services .vb-table-wrap,
  body.vb-admin-page-admin-payment-requests .vb-table-wrap,
  body.vb-admin-page-admin-invoices .vb-table-wrap,
  body.vb-admin-page-admin-customers .rk-admin-table-scroll,
  body.vb-admin-page-admin-services .rk-admin-table-scroll,
  body.vb-admin-page-admin-payment-requests .rk-admin-table-scroll,
  body.vb-admin-page-admin-invoices .rk-admin-table-scroll {
    overflow: visible !important;
  }

  body.vb-admin-page-admin-customers table,
  body.vb-admin-page-admin-services table,
  body.vb-admin-page-admin-payment-requests table,
  body.vb-admin-page-admin-invoices table,
  body.vb-admin-page-admin-customers .vb-table,
  body.vb-admin-page-admin-services .vb-table,
  body.vb-admin-page-admin-payment-requests .vb-table,
  body.vb-admin-page-admin-invoices .vb-table,
  body.vb-admin-page-admin-customers .admin-table,
  body.vb-admin-page-admin-services .admin-table,
  body.vb-admin-page-admin-payment-requests .admin-table,
  body.vb-admin-page-admin-invoices .admin-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  body.vb-admin-page-admin-customers thead,
  body.vb-admin-page-admin-services thead,
  body.vb-admin-page-admin-payment-requests thead,
  body.vb-admin-page-admin-invoices thead {
    display: none !important;
  }

  body.vb-admin-page-admin-customers tbody,
  body.vb-admin-page-admin-services tbody,
  body.vb-admin-page-admin-payment-requests tbody,
  body.vb-admin-page-admin-invoices tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.vb-admin-page-admin-customers tr,
  body.vb-admin-page-admin-services tr,
  body.vb-admin-page-admin-payment-requests tr,
  body.vb-admin-page-admin-invoices tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 13px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  }

  body.vb-admin-page-admin-customers td,
  body.vb-admin-page-admin-services td,
  body.vb-admin-page-admin-payment-requests td,
  body.vb-admin-page-admin-invoices td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  body.vb-admin-page-admin-customers td::before,
  body.vb-admin-page-admin-services td::before,
  body.vb-admin-page-admin-payment-requests td::before,
  body.vb-admin-page-admin-invoices td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  body.vb-admin-page-admin-customers td:last-child,
  body.vb-admin-page-admin-services td:last-child,
  body.vb-admin-page-admin-payment-requests td:last-child,
  body.vb-admin-page-admin-invoices td:last-child {
    display: block !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.vb-admin-page-admin-customers td:last-child::before,
  body.vb-admin-page-admin-services td:last-child::before,
  body.vb-admin-page-admin-payment-requests td:last-child::before,
  body.vb-admin-page-admin-invoices td:last-child::before {
    display: block;
    margin-bottom: 8px;
  }

  body.vb-admin-page-admin-customers td:last-child .vb-actions,
  body.vb-admin-page-admin-services td:last-child .vb-actions,
  body.vb-admin-page-admin-payment-requests td:last-child .vb-actions,
  body.vb-admin-page-admin-invoices td:last-child .vb-actions,
  body.vb-admin-page-admin-customers td:last-child .table-actions,
  body.vb-admin-page-admin-services td:last-child .table-actions,
  body.vb-admin-page-admin-payment-requests td:last-child .table-actions,
  body.vb-admin-page-admin-invoices td:last-child .table-actions,
  body.vb-admin-page-admin-customers td:last-child .admin-actions,
  body.vb-admin-page-admin-services td:last-child .admin-actions,
  body.vb-admin-page-admin-payment-requests td:last-child .admin-actions,
  body.vb-admin-page-admin-invoices td:last-child .admin-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.vb-admin-page-admin-customers td:last-child form,
  body.vb-admin-page-admin-services td:last-child form,
  body.vb-admin-page-admin-payment-requests td:last-child form,
  body.vb-admin-page-admin-invoices td:last-child form {
    width: 100% !important;
    margin: 0 !important;
  }

  body.vb-admin-page-admin-customers td:last-child .vb-btn,
  body.vb-admin-page-admin-services td:last-child .vb-btn,
  body.vb-admin-page-admin-payment-requests td:last-child .vb-btn,
  body.vb-admin-page-admin-invoices td:last-child .vb-btn,
  body.vb-admin-page-admin-customers td:last-child button,
  body.vb-admin-page-admin-services td:last-child button,
  body.vb-admin-page-admin-payment-requests td:last-child button,
  body.vb-admin-page-admin-invoices td:last-child button {
    width: 100% !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}
/* End Veytrium admin mobile table card layout */

/* Veytrium admin mobile action button layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin-payment-requests td:last-child,
  body.vb-admin-page-admin-invoices td:last-child,
  body.vb-admin-page-admin-services td:last-child,
  body.vb-admin-page-admin-customers td:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.vb-admin-page-admin-payment-requests td:last-child > *,
  body.vb-admin-page-admin-invoices td:last-child > *,
  body.vb-admin-page-admin-services td:last-child > *,
  body.vb-admin-page-admin-customers td:last-child > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.vb-admin-page-admin-payment-requests td:last-child > div,
  body.vb-admin-page-admin-payment-requests td:last-child .vb-actions,
  body.vb-admin-page-admin-payment-requests td:last-child [class*="actions"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.vb-admin-page-admin-invoices td:last-child > div,
  body.vb-admin-page-admin-invoices td:last-child .vb-actions,
  body.vb-admin-page-admin-invoices td:last-child [class*="actions"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.vb-admin-page-admin-services td:last-child > div,
  body.vb-admin-page-admin-services td:last-child .vb-actions,
  body.vb-admin-page-admin-services td:last-child [class*="actions"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.vb-admin-page-admin-customers td:last-child > div,
  body.vb-admin-page-admin-customers td:last-child .vb-actions,
  body.vb-admin-page-admin-customers td:last-child [class*="actions"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.vb-admin-page-admin-payment-requests td:last-child a,
  body.vb-admin-page-admin-payment-requests td:last-child button,
  body.vb-admin-page-admin-payment-requests td:last-child .vb-btn,
  body.vb-admin-page-admin-invoices td:last-child a,
  body.vb-admin-page-admin-invoices td:last-child button,
  body.vb-admin-page-admin-invoices td:last-child .vb-btn,
  body.vb-admin-page-admin-services td:last-child a,
  body.vb-admin-page-admin-services td:last-child button,
  body.vb-admin-page-admin-services td:last-child .vb-btn,
  body.vb-admin-page-admin-customers td:last-child a,
  body.vb-admin-page-admin-customers td:last-child button,
  body.vb-admin-page-admin-customers td:last-child .vb-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  body.vb-admin-page-admin-payment-requests td:last-child form,
  body.vb-admin-page-admin-invoices td:last-child form,
  body.vb-admin-page-admin-services td:last-child form,
  body.vb-admin-page-admin-customers td:last-child form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.vb-admin-page-admin-payment-requests td:last-child {
    padding-top: 12px !important;
  }

  body.vb-admin-page-admin-invoices td:last-child {
    padding-top: 12px !important;
  }
}
/* End Veytrium admin mobile action button layout */

/* Veytrium admin mobile dashboard and invoice action layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin-invoices td:last-child > div,
  body.vb-admin-page-admin-invoices td:last-child .vb-actions,
  body.vb-admin-page-admin-invoices td:last-child [class*="actions"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.vb-admin-page-admin-invoices td:last-child a,
  body.vb-admin-page-admin-invoices td:last-child button,
  body.vb-admin-page-admin-invoices td:last-child .vb-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.vb-admin-page-admin-invoices td:last-child form {
    width: 100% !important;
    margin: 0 !important;
  }

  body.vb-admin-page-admin .card,
  body.vb-admin-page-admin .vb-card {
    overflow: hidden !important;
  }

  body.vb-admin-page-admin .card > a.vb-btn,
  body.vb-admin-page-admin .vb-card > a.vb-btn,
  body.vb-admin-page-admin .card-header a.vb-btn,
  body.vb-admin-page-admin .vb-card-header a.vb-btn,
  body.vb-admin-page-admin .card-head a.vb-btn,
  body.vb-admin-page-admin .vb-card-head a.vb-btn,
  body.vb-admin-page-admin .card > .vb-btn,
  body.vb-admin-page-admin .vb-card > .vb-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 12px 0 14px !important;
  }

  body.vb-admin-page-admin .card h2 + p + a.vb-btn,
  body.vb-admin-page-admin .vb-card h2 + p + a.vb-btn,
  body.vb-admin-page-admin .card h3 + p + a.vb-btn,
  body.vb-admin-page-admin .vb-card h3 + p + a.vb-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    justify-content: center !important;
    margin: 12px 0 14px !important;
  }

  body.vb-admin-page-admin .table-responsive,
  body.vb-admin-page-admin .vb-table-responsive,
  body.vb-admin-page-admin .table-wrap,
  body.vb-admin-page-admin .vb-table-wrap,
  body.vb-admin-page-admin .rk-admin-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.vb-admin-page-admin table,
  body.vb-admin-page-admin .vb-table,
  body.vb-admin-page-admin .admin-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.vb-admin-page-admin table th,
  body.vb-admin-page-admin table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.vb-admin-page-admin table td:last-child .vb-actions,
  body.vb-admin-page-admin table td:last-child [class*="actions"] {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.vb-admin-page-admin table td:last-child a,
  body.vb-admin-page-admin table td:last-child button,
  body.vb-admin-page-admin table td:last-child .vb-btn {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
  }
}

@media (max-width: 520px) {
  body.vb-admin-page-admin .card,
  body.vb-admin-page-admin .vb-card {
    border-radius: 16px !important;
  }

  body.vb-admin-page-admin .card table,
  body.vb-admin-page-admin .vb-card table {
    font-size: 13px !important;
  }

  body.vb-admin-page-admin .card th,
  body.vb-admin-page-admin .card td,
  body.vb-admin-page-admin .vb-card th,
  body.vb-admin-page-admin .vb-card td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* End Veytrium admin mobile dashboard and invoice action layout */

/* Veytrium admin dashboard mobile card layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin .card,
  body.vb-admin-page-admin .vb-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.vb-admin-page-admin .card > a,
  body.vb-admin-page-admin .vb-card > a,
  body.vb-admin-page-admin .card a.vb-btn,
  body.vb-admin-page-admin .vb-card a.vb-btn,
  body.vb-admin-page-admin .card a[class*="btn"],
  body.vb-admin-page-admin .vb-card a[class*="btn"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 12px 0 14px !important;
  }

  body.vb-admin-page-admin .table-responsive,
  body.vb-admin-page-admin .vb-table-responsive,
  body.vb-admin-page-admin .table-wrap,
  body.vb-admin-page-admin .vb-table-wrap,
  body.vb-admin-page-admin .rk-admin-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.vb-admin-page-admin table,
  body.vb-admin-page-admin .vb-table,
  body.vb-admin-page-admin .admin-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  body.vb-admin-page-admin thead {
    display: none !important;
  }

  body.vb-admin-page-admin tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.vb-admin-page-admin tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.vb-admin-page-admin tbody tr:not(:has(td[colspan])) {
    padding: 13px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  }

  body.vb-admin-page-admin td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  body.vb-admin-page-admin td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  body.vb-admin-page-admin td[colspan] {
    display: block !important;
    padding: 12px 0 !important;
    border-bottom: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
  }

  body.vb-admin-page-admin td[colspan]::before {
    display: none !important;
    content: none !important;
  }

  body.vb-admin-page-admin td:last-child {
    border-bottom: 0 !important;
  }

  body.vb-admin-page-admin td:last-child .vb-actions,
  body.vb-admin-page-admin td:last-child [class*="actions"],
  body.vb-admin-page-admin td:last-child > div {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.vb-admin-page-admin td:last-child form {
    width: 100% !important;
    margin: 0 !important;
  }

  body.vb-admin-page-admin td:last-child a,
  body.vb-admin-page-admin td:last-child button,
  body.vb-admin-page-admin td:last-child .vb-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.vb-admin-page-admin .status,
  body.vb-admin-page-admin .badge,
  body.vb-admin-page-admin [class*="status"],
  body.vb-admin-page-admin [class*="badge"] {
    width: 100% !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 520px) {
  body.vb-admin-page-admin td {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.vb-admin-page-admin .card,
  body.vb-admin-page-admin .vb-card {
    border-radius: 16px !important;
  }
}
/* End Veytrium admin dashboard mobile card layout */

/* Veytrium admin dashboard open invoice action layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin td[data-label="Actions"],
  body.vb-admin-page-admin td[data-label="ACTIONS"],
  body.vb-admin-page-admin td:last-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 11px !important;
    border-bottom: 0 !important;
  }

  body.vb-admin-page-admin td[data-label="Actions"]::before,
  body.vb-admin-page-admin td[data-label="ACTIONS"]::before,
  body.vb-admin-page-admin td:last-child::before {
    display: block !important;
    margin-bottom: 10px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
  }

  body.vb-admin-page-admin td[data-label="Actions"] > *,
  body.vb-admin-page-admin td[data-label="ACTIONS"] > *,
  body.vb-admin-page-admin td:last-child > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.vb-admin-page-admin td[data-label="Actions"] .vb-actions,
  body.vb-admin-page-admin td[data-label="ACTIONS"] .vb-actions,
  body.vb-admin-page-admin td:last-child .vb-actions,
  body.vb-admin-page-admin td[data-label="Actions"] [class*="actions"],
  body.vb-admin-page-admin td[data-label="ACTIONS"] [class*="actions"],
  body.vb-admin-page-admin td:last-child [class*="actions"],
  body.vb-admin-page-admin td[data-label="Actions"] > div,
  body.vb-admin-page-admin td[data-label="ACTIONS"] > div,
  body.vb-admin-page-admin td:last-child > div {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.vb-admin-page-admin td[data-label="Actions"] form,
  body.vb-admin-page-admin td[data-label="ACTIONS"] form,
  body.vb-admin-page-admin td:last-child form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.vb-admin-page-admin td[data-label="Actions"] a,
  body.vb-admin-page-admin td[data-label="ACTIONS"] a,
  body.vb-admin-page-admin td:last-child a,
  body.vb-admin-page-admin td[data-label="Actions"] button,
  body.vb-admin-page-admin td[data-label="ACTIONS"] button,
  body.vb-admin-page-admin td:last-child button,
  body.vb-admin-page-admin td[data-label="Actions"] .vb-btn,
  body.vb-admin-page-admin td[data-label="ACTIONS"] .vb-btn,
  body.vb-admin-page-admin td:last-child .vb-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}
/* End Veytrium admin dashboard open invoice action layout */

/* Veytrium admin mobile customer search layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin-customers form:has(input[placeholder*="Search"]),
  body.vb-admin-page-admin-customers form:has(input[placeholder*="search"]),
  body.vb-admin-page-admin-customers form:has(input[name="q"]),
  body.vb-admin-page-admin-customers form:has(input[type="search"]) {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  body.vb-admin-page-admin-customers form:has(input[placeholder*="Search"]) input,
  body.vb-admin-page-admin-customers form:has(input[placeholder*="search"]) input,
  body.vb-admin-page-admin-customers form:has(input[name="q"]) input,
  body.vb-admin-page-admin-customers form:has(input[type="search"]) input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    box-sizing: border-box !important;
  }

  body.vb-admin-page-admin-customers form:has(input[placeholder*="Search"]) button,
  body.vb-admin-page-admin-customers form:has(input[placeholder*="search"]) button,
  body.vb-admin-page-admin-customers form:has(input[name="q"]) button,
  body.vb-admin-page-admin-customers form:has(input[type="search"]) button {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.vb-admin-page-admin-customers a[href*="/admin/customers/new"],
  body.vb-admin-page-admin-customers .vb-btn[href*="/admin/customers/new"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* End Veytrium admin mobile customer search layout */

/* Veytrium admin mobile service filter layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin-services form:has(input[placeholder*="Search service"]),
  body.vb-admin-page-admin-services form:has(input[placeholder*="domain"]),
  body.vb-admin-page-admin-services form:has(select) {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  body.vb-admin-page-admin-services form:has(input[placeholder*="Search service"]) input,
  body.vb-admin-page-admin-services form:has(input[placeholder*="domain"]) input,
  body.vb-admin-page-admin-services form:has(select) input,
  body.vb-admin-page-admin-services form:has(input[placeholder*="Search service"]) select,
  body.vb-admin-page-admin-services form:has(input[placeholder*="domain"]) select,
  body.vb-admin-page-admin-services form:has(select) select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    box-sizing: border-box !important;
  }

  body.vb-admin-page-admin-services form:has(input[placeholder*="Search service"]) button,
  body.vb-admin-page-admin-services form:has(input[placeholder*="domain"]) button,
  body.vb-admin-page-admin-services form:has(select) button {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.vb-admin-page-admin-services a[href*="/admin/services/new"],
  body.vb-admin-page-admin-services .vb-btn[href*="/admin/services/new"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* End Veytrium admin mobile service filter layout */

/* Veytrium admin mobile payment request filter layout */
@media (max-width: 760px) {
  body.vb-admin-page-admin-payment-requests form:has(select),
  body.vb-admin-page-admin-payment-requests form:has(input[type="search"]),
  body.vb-admin-page-admin-payment-requests form:has(input[name="q"]) {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  body.vb-admin-page-admin-payment-requests form:has(select) select,
  body.vb-admin-page-admin-payment-requests form:has(select) input,
  body.vb-admin-page-admin-payment-requests form:has(input[type="search"]) input,
  body.vb-admin-page-admin-payment-requests form:has(input[name="q"]) input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    box-sizing: border-box !important;
  }

  body.vb-admin-page-admin-payment-requests form:has(select) button,
  body.vb-admin-page-admin-payment-requests form:has(input[type="search"]) button,
  body.vb-admin-page-admin-payment-requests form:has(input[name="q"]) button {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* End Veytrium admin mobile payment request filter layout */

/* Veytrium admin invoice detail page layout */
body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  width: 100% !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-page > .vb-card,
body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-page > .vb-grid {
  margin: 0 !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-left: auto !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-stat {
  height: 96px !important;
  min-height: 96px !important;
  margin: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-stat > * {
  margin-top: 0 !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-section {
  margin: 0 !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-section > h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-section .vb-table-wrap {
  margin-top: 6px !important;
}

@media (max-width: 1180px) {
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-page {
    gap: 16px !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions {
    width: 100% !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions form {
    width: 100% !important;
    margin: 0 !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions .vb-btn,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-summary {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-stat {
    height: auto !important;
    min-height: 86px !important;
  }
}
/* End Veytrium admin invoice detail page layout */

/* Veytrium admin invoice detail mobile containment */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-main,
  body[class*="vb-admin-page-admin-invoices-"] main,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-page,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-page > *,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-header,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-section,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-summary,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-stat {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-header {
    padding: 18px 16px !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-head {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    justify-content: stretch !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-head > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-head h2,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-head p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions .vb-btn,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions a,
  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-invoice-detail-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[class*="vb-admin-page-admin-invoices-"] .vb-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* End Veytrium admin invoice detail mobile containment */

/* BEGIN VEYTRIUM MOBILE DASHBOARD STAT GRID 3X2 */
@media (max-width: 767px) {
  .vb-dashboard .vb-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .vb-dashboard .vb-stat-card {
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
  }

  .vb-dashboard .vb-stat-number {
    font-size: 26px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }

  .vb-dashboard .vb-stat-label {
    font-size: 11px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
  }

  .vb-dashboard .vb-stat-sub {
    font-size: 10px !important;
    line-height: 1.15 !important;
    margin-top: 4px !important;
    white-space: normal !important;
  }
}

@media (max-width: 374px) {
  .vb-dashboard .vb-stat-grid {
    gap: 8px !important;
  }

  .vb-dashboard .vb-stat-card {
    min-height: 100px !important;
    padding: 12px 8px !important;
  }

  .vb-dashboard .vb-stat-number {
    font-size: 24px !important;
  }

  .vb-dashboard .vb-stat-label {
    font-size: 10px !important;
  }

  .vb-dashboard .vb-stat-sub {
    font-size: 9px !important;
  }
}
/* END VEYTRIUM MOBILE DASHBOARD STAT GRID 3X2 */

/* VEYTRIUM SERVER REGISTRY BM-1 */
.vb-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.vb-page-head h2 {
  margin: 0;
}

.vb-kicker {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vb-server-filter {
  align-items: center;
  flex-wrap: wrap;
}

.vb-server-filter .vb-input {
  min-width: 180px;
}

.vb-server-ns {
  display: inline-block;
  max-width: 260px;
  word-break: break-word;
}

.vb-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  background: #e2e8f0;
  color: #334155;
}

.vb-status.active {
  background: #dcfce7;
  color: #166534;
}

.vb-status.passive {
  background: #fee2e2;
  color: #991b1b;
}

.vb-server-form textarea.vb-input {
  min-height: 110px;
  resize: vertical;
}

@media (max-width: 760px) {
  body.vb-admin-page-admin-servers .vb-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  body.vb-admin-page-admin-servers .vb-page-head .vb-btn {
    width: 100%;
    justify-content: center;
  }

  body.vb-admin-page-admin-servers .vb-server-filter {
    flex-direction: column;
    align-items: stretch;
  }

  body.vb-admin-page-admin-servers .vb-server-filter .vb-input,
  body.vb-admin-page-admin-servers .vb-server-filter .vb-btn {
    width: 100%;
  }

  body.vb-admin-page-admin-servers .vb-table-wrap {
    overflow: visible;
  }

  body.vb-admin-page-admin-servers .vb-table thead {
    display: none;
  }

  body.vb-admin-page-admin-servers .vb-table,
  body.vb-admin-page-admin-servers .vb-table tbody,
  body.vb-admin-page-admin-servers .vb-table tr,
  body.vb-admin-page-admin-servers .vb-table td {
    display: block;
    width: 100%;
  }

  body.vb-admin-page-admin-servers .vb-table tr {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #ffffff;
  }

  body.vb-admin-page-admin-servers .vb-table td {
    border: 0;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    word-break: break-word;
  }

  body.vb-admin-page-admin-servers .vb-table td::before {
    content: attr(data-label);
    flex: 0 0 112px;
    color: #64748b;
    font-weight: 800;
    text-align: left;
  }

  body.vb-admin-page-admin-servers .vb-table td[colspan] {
    display: block;
    text-align: center;
  }

  body.vb-admin-page-admin-servers .vb-table td[colspan]::before {
    content: none;
  }

  body.vb-admin-page-admin-servers .vb-table td[data-label="Actions"] {
    display: block;
    text-align: left;
  }

  body.vb-admin-page-admin-servers .vb-table td[data-label="Actions"]::before {
    display: block;
    margin-bottom: 8px;
  }

  body.vb-admin-page-admin-servers .vb-table td[data-label="Actions"] .vb-actions,
  body.vb-admin-page-admin-servers .vb-table td[data-label="Actions"] form,
  body.vb-admin-page-admin-servers .vb-table td[data-label="Actions"] .vb-btn,
  body.vb-admin-page-admin-servers .vb-table td[data-label="Actions"] button {
    width: 100%;
  }
}
/* End VEYTRIUM SERVER REGISTRY BM-1 */

/* VEYTRIUM SERVICE ANNOUNCEMENTS BM-3 */
.vb-sa-filter {
  align-items: center;
  flex-wrap: wrap;
}

.vb-sa-filter .vb-input {
  min-width: 220px;
}

.vb-sa-form .tox-tinymce {
  border-radius: 14px;
  border-color: #dbe3ef;
}

.vb-sa-helper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.vb-sa-helper-card {
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  padding: 14px;
  background: #f8fafc;
}

.vb-sa-helper-card strong,
.vb-sa-helper-card span {
  display: block;
}

.vb-sa-helper-card strong {
  margin-bottom: 4px;
  color: #0f172a;
}

.vb-sa-helper-card span {
  color: #64748b;
  line-height: 1.55;
}

.vb-status.draft {
  background: #e2e8f0;
  color: #334155;
}

.vb-status.previewed {
  background: #dbeafe;
  color: #1d4ed8;
}

.vb-status.queued,
.vb-status.sending {
  background: #fef3c7;
  color: #92400e;
}

.vb-status.completed {
  background: #dcfce7;
  color: #166534;
}

.vb-status.cancelled,
.vb-status.failed {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 760px) {
  body[class*="service-announcements"] .vb-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  body[class*="service-announcements"] .vb-page-head .vb-btn {
    width: 100%;
    justify-content: center;
  }

  body[class*="service-announcements"] .vb-sa-filter {
    flex-direction: column;
    align-items: stretch;
  }

  body[class*="service-announcements"] .vb-sa-filter .vb-input,
  body[class*="service-announcements"] .vb-sa-filter .vb-btn {
    width: 100%;
  }

  body[class*="service-announcements"] .vb-sa-helper-grid {
    grid-template-columns: 1fr;
  }

  body[class*="service-announcements"] .vb-table-wrap {
    overflow: visible;
  }

  body[class*="service-announcements"] .vb-table thead {
    display: none;
  }

  body[class*="service-announcements"] .vb-table,
  body[class*="service-announcements"] .vb-table tbody,
  body[class*="service-announcements"] .vb-table tr,
  body[class*="service-announcements"] .vb-table td {
    display: block;
    width: 100%;
  }

  body[class*="service-announcements"] .vb-table tr {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #ffffff;
  }

  body[class*="service-announcements"] .vb-table td {
    border: 0;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    word-break: break-word;
  }

  body[class*="service-announcements"] .vb-table td::before {
    content: attr(data-label);
    flex: 0 0 118px;
    color: #64748b;
    font-weight: 800;
    text-align: left;
  }

  body[class*="service-announcements"] .vb-table td[colspan] {
    display: block;
    text-align: center;
  }

  body[class*="service-announcements"] .vb-table td[colspan]::before {
    content: none;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS BM-3 */

/* VEYTRIUM SERVICE ANNOUNCEMENTS BM-4 PREVIEW */
.vb-sa-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.vb-sa-summary-card span,
.vb-sa-summary-card strong {
  display: block;
}

.vb-sa-summary-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vb-sa-summary-card strong {
  margin-top: 6px;
  color: #0f172a;
}

.vb-sa-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vb-sa-email-preview {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  background: #ffffff;
  color: #0f172a;
  line-height: 1.65;
}

.vb-sa-email-preview > :first-child {
  margin-top: 0;
}

.vb-sa-email-preview > :last-child {
  margin-bottom: 0;
}

.vb-sa-recipient-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.vb-sa-recipient-head h3,
.vb-card h3 {
  margin-top: 0;
}

.vb-status.pending {
  background: #fef3c7;
  color: #92400e;
}

.vb-status.sent {
  background: #dcfce7;
  color: #166534;
}

.vb-status.skipped {
  background: #e2e8f0;
  color: #334155;
}

.vb-status.failed {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 760px) {
  .vb-sa-summary-grid {
    grid-template-columns: 1fr;
  }

  .vb-sa-detail-actions,
  .vb-sa-detail-actions form,
  .vb-sa-detail-actions .vb-btn {
    width: 100%;
  }

  .vb-sa-detail-actions {
    align-items: stretch;
  }

  .vb-sa-email-preview {
    padding: 14px;
    overflow-wrap: anywhere;
  }

  body[class*="service-announcements"] .vb-table td[data-label="Email"] span.vb-muted {
    display: block;
    margin-top: 4px;
  }

  body[class*="service-announcements"] .vb-table td[data-label="Actions"] {
    display: block;
    text-align: left;
  }

  body[class*="service-announcements"] .vb-table td[data-label="Actions"]::before {
    display: block;
    margin-bottom: 8px;
  }

  body[class*="service-announcements"] .vb-table td[data-label="Actions"] .vb-actions,
  body[class*="service-announcements"] .vb-table td[data-label="Actions"] .vb-btn {
    width: 100%;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS BM-4 PREVIEW */

/* VEYTRIUM SERVICE ANNOUNCEMENTS TINYMCE FIX1 */
.vb-sa-form .tox.tox-tinymce {
  min-height: 520px;
  border-radius: 14px;
  overflow: hidden;
}

.vb-sa-form .tox .tox-edit-area {
  min-height: 420px;
}

.vb-sa-form .tox .tox-edit-area__iframe {
  min-height: 420px;
  background: #ffffff;
}

.vb-sa-form textarea.vb-sa-editor {
  min-height: 420px;
}

@media (max-width: 760px) {
  .vb-sa-form .tox.tox-tinymce {
    min-height: 460px;
  }

  .vb-sa-form .tox .tox-edit-area,
  .vb-sa-form .tox .tox-edit-area__iframe,
  .vb-sa-form textarea.vb-sa-editor {
    min-height: 340px;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS TINYMCE FIX1 */

/* VEYTRIUM MAIL MEDIA LIBRARY BM-4-FIX4 */
body.vb-mail-media-open {
  overflow: hidden;
}

.vb-mail-media-modal {
  display: none;
}

.vb-mail-media-modal.is-open {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: block;
}

.vb-mail-media-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .54);
}

.vb-mail-media-panel {
  position: absolute;
  inset: 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}

.vb-mail-media-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.vb-mail-media-head strong,
.vb-mail-media-head span {
  display: block;
}

.vb-mail-media-head strong {
  color: #0f172a;
  font-size: 18px;
}

.vb-mail-media-head span {
  margin-top: 4px;
  color: #64748b;
}

.vb-mail-media-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #e5e7eb;
  color: #111827;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}

.vb-mail-media-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
}

#vb-mail-media-file-input {
  display: none;
}

.vb-mail-media-message {
  min-height: 22px;
  padding: 0 20px 10px;
  color: #64748b;
  font-weight: 700;
}

.vb-mail-media-message.error {
  color: #b91c1c;
}

.vb-mail-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  overflow: auto;
  padding: 20px;
}

.vb-mail-media-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 174px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}

.vb-mail-media-item:hover,
.vb-mail-media-item.is-highlighted {
  border-color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .15);
}

.vb-mail-media-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f5f9;
}

.vb-mail-media-thumb img {
  display: block;
  max-width: 100%;
  max-height: 118px;
  object-fit: contain;
}

.vb-mail-media-name {
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vb-mail-media-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  text-align: center;
}

.vb-mail-media-empty.error {
  color: #b91c1c;
}

@media (max-width: 760px) {
  .vb-mail-media-panel {
    inset: 12px;
    border-radius: 16px;
  }

  .vb-mail-media-head,
  .vb-mail-media-toolbar {
    padding: 14px;
  }

  .vb-mail-media-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .vb-mail-media-toolbar .vb-btn {
    width: 100%;
  }

  .vb-mail-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }

  .vb-mail-media-item {
    min-height: 150px;
  }

  .vb-mail-media-thumb {
    height: 96px;
  }

  .vb-mail-media-thumb img {
    max-height: 96px;
  }
}
/* End VEYTRIUM MAIL MEDIA LIBRARY BM-4-FIX4 */

/* VEYTRIUM SERVICE ANNOUNCEMENTS BM-5 TEST MAIL */
.vb-sa-test-mail-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.vb-sa-test-mail-form .vb-input {
  max-width: 380px;
}

@media (max-width: 760px) {
  .vb-sa-test-mail-form {
    flex-direction: column;
    align-items: stretch;
  }

  .vb-sa-test-mail-form .vb-input,
  .vb-sa-test-mail-form .vb-btn {
    width: 100%;
    max-width: none;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS BM-5 TEST MAIL */

/* VEYTRIUM SERVICE ANNOUNCEMENTS BM-5 FIX2 EDIT DELETE */
.vb-sa-row-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.vb-sa-row-actions form {
  margin: 0;
}

.vb-btn.danger {
  background: #fee2e2;
  color: #b91c1c;
}

.vb-btn.danger:hover {
  background: #fecaca;
}

@media (max-width: 760px) {
  body[class*="service-announcements"] .vb-sa-row-actions,
  body[class*="service-announcements"] .vb-sa-row-actions form,
  body[class*="service-announcements"] .vb-sa-row-actions .vb-btn,
  body[class*="service-announcements"] .vb-sa-row-actions button {
    width: 100%;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS BM-5 FIX2 EDIT DELETE */

/* VEYTRIUM SERVICE ANNOUNCEMENTS BM-6 QUEUE SEND */
.vb-sa-queue-card form {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .vb-sa-queue-card .vb-btn,
  .vb-sa-queue-card form {
    width: 100%;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS BM-6 QUEUE SEND */

/* VEYTRIUM SERVICE ANNOUNCEMENTS BM-6 FIX1 SAFETY */
.vb-sa-safety-card form {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .vb-sa-safety-card .vb-btn,
  .vb-sa-safety-card form {
    width: 100%;
  }
}
/* End VEYTRIUM SERVICE ANNOUNCEMENTS BM-6 FIX1 SAFETY */

/* VEYTRIUM BM-6-FIX2 MOBILE VISUAL POLISH */
/*
  Purpose:
  - Fix mobile right overflow on admin cards/tables.
  - Make Service Announcements, Servers and Services usable on phones.
  - Fix page header action buttons sticking to cards.
  - Fix Mail Media Library modal opening too low / being uncontrollable.
  - No inline CSS.
*/

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  .vb-admin-main,
  .vb-main,
  main,
  .content,
  .page-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .vb-card,
  .card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .vb-page-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
    margin-bottom: 18px !important;
  }

  .vb-page-head > div,
  .vb-page-head > .vb-actions,
  .vb-page-head > a,
  .vb-page-head > button {
    width: 100%;
    max-width: 100%;
  }

  .vb-page-head .vb-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .vb-page-head .vb-btn,
  .vb-page-head > .vb-btn,
  .vb-page-head > a.vb-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .vb-actions {
    flex-wrap: wrap;
  }

  .vb-actions .vb-btn,
  .vb-actions button,
  .vb-actions form {
    max-width: 100%;
  }

  .vb-grid,
  .vb-sa-summary-grid,
  .vb-sa-helper-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
  }

  .vb-input,
  .vb-select,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .vb-form,
  .vb-sa-form {
    width: 100%;
    max-width: 100%;
  }

  .vb-form > div,
  .vb-sa-form > div {
    max-width: 100%;
  }

  .vb-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .vb-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
  }

  .vb-table thead {
    display: none !important;
  }

  .vb-table tbody,
  .vb-table tr,
  .vb-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .vb-table tr {
    margin: 0 0 14px !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  .vb-table td {
    border: 0 !important;
    padding: 8px 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .vb-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .vb-table td[colspan] {
    text-align: center !important;
  }

  .vb-table td[colspan]::before {
    content: none !important;
  }

  .vb-table td[data-label="Actions"] .vb-actions,
  .vb-table td[data-label="Actions"] form,
  .vb-table td[data-label="Actions"] .vb-btn,
  .vb-table td[data-label="Actions"] button {
    width: 100% !important;
  }

  .vb-table td[data-label="Actions"] .vb-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .vb-sa-filter,
  .vb-server-filter,
  form.vb-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
  }

  .vb-sa-filter .vb-input,
  .vb-sa-filter .vb-btn,
  .vb-server-filter .vb-input,
  .vb-server-filter .vb-btn,
  form.vb-actions .vb-input,
  form.vb-actions .vb-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .vb-sa-detail-actions,
  .vb-sa-detail-actions form,
  .vb-sa-detail-actions .vb-btn,
  .vb-sa-test-mail-form,
  .vb-sa-test-mail-form .vb-input,
  .vb-sa-test-mail-form .vb-btn,
  .vb-sa-queue-card form,
  .vb-sa-queue-card .vb-btn,
  .vb-sa-safety-card form,
  .vb-sa-safety-card .vb-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .vb-sa-detail-actions,
  .vb-sa-test-mail-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .vb-sa-email-preview {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .vb-sa-email-preview img {
    max-width: 100% !important;
    height: auto !important;
  }

  .vb-status {
    max-width: 100%;
    white-space: normal;
  }

  /* TinyMCE mobile usability */
  .vb-sa-form .tox.tox-tinymce {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 440px !important;
  }

  .vb-sa-form .tox .tox-editor-container,
  .vb-sa-form .tox .tox-edit-area,
  .vb-sa-form .tox .tox-edit-area__iframe {
    max-width: 100% !important;
  }

  .vb-sa-form .tox .tox-toolbar,
  .vb-sa-form .tox .tox-toolbar__primary,
  .vb-sa-form .tox .tox-toolbar__overflow {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .vb-sa-form .tox .tox-toolbar__group {
    flex-wrap: nowrap !important;
  }

  /* Mail Media Library mobile modal fix */
  .vb-mail-media-modal.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  .vb-mail-media-backdrop {
    position: fixed !important;
    inset: 0 !important;
  }

  .vb-mail-media-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .vb-mail-media-head {
    flex: 0 0 auto !important;
    padding: 14px !important;
  }

  .vb-mail-media-toolbar {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  .vb-mail-media-toolbar .vb-btn,
  .vb-mail-media-toolbar button {
    width: 100% !important;
  }

  .vb-mail-media-message {
    flex: 0 0 auto !important;
    padding: 0 14px 10px !important;
  }

  .vb-mail-media-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .vb-mail-media-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 148px !important;
    padding: 8px !important;
  }

  .vb-mail-media-thumb {
    height: 94px !important;
  }

  .vb-mail-media-thumb img {
    max-height: 94px !important;
  }

  .vb-mail-media-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 430px) {
  .vb-mail-media-grid {
    grid-template-columns: 1fr !important;
  }

  .vb-mail-media-panel {
    max-height: calc(100vh - 16px) !important;
  }
}
/* End VEYTRIUM BM-6-FIX2 MOBILE VISUAL POLISH */

/* VEYTRIUM BM-6-FIX3 MOBILE SHELL POLISH DISABLED BY BM-6-FIX4
   Reason: it hid mobile sidebar/menu too aggressively and broke the mobile menu trigger.
*/

/* VEYTRIUM BM-6-FIX4 RESTORE MOBILE MENU */
/*
  Purpose:
  - Restore mobile menu/sidebar behaviour after BM-6-FIX3 was too aggressive.
  - Keep BM-6-FIX2 card/table/modal improvements.
  - Make the mobile menu trigger visible/tappable.
  - Improve TinyMCE toolbar and media modal safely without hiding sidebar/nav.
  - No inline CSS.
*/

@media (max-width: 860px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /*
    Restore possible mobile menu/sidebar elements.
    We do NOT force desktop sidebar hidden here, because the original app's mobile
    menu logic needs the element to remain available.
  */
  .vb-sidebar,
  .admin-sidebar,
  .app-sidebar,
  .billing-sidebar,
  .sidebar,
  aside[class*="sidebar"],
  nav[class*="sidebar"] {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
    Mobile menu trigger fallback.
    If the button appears as a blank white square, show a visible hamburger mark.
  */
  .vb-mobile-menu-toggle,
  .mobile-menu-toggle,
  .menu-toggle,
  .sidebar-toggle,
  .navbar-toggler,
  .hamburger,
  .vb-nav-toggle,
  [data-sidebar-toggle],
  [data-menu-toggle],
  button[aria-label*="menu" i],
  button[class*="menu" i],
  button[class*="toggle" i] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147482000 !important;
  }

  .vb-mobile-menu-toggle:empty::before,
  .mobile-menu-toggle:empty::before,
  .menu-toggle:empty::before,
  .sidebar-toggle:empty::before,
  .navbar-toggler:empty::before,
  .hamburger:empty::before,
  .vb-nav-toggle:empty::before,
  [data-sidebar-toggle]:empty::before,
  [data-menu-toggle]:empty::before {
    content: "☰";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
  }

  /*
    Prevent page content from being clipped, but do not kill mobile nav.
  */
  .vb-admin-shell,
  .vb-shell,
  .admin-shell,
  .app-shell,
  .layout,
  .admin-layout,
  .dashboard-layout,
  .vb-admin-main,
  .vb-main,
  .admin-main,
  .app-main,
  .main,
  main,
  [class*="main-content"],
  [class*="content-wrap"],
  [class*="page-content"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .vb-admin-main,
  .vb-main,
  .admin-main,
  .app-main,
  .main,
  main,
  [class*="main-content"],
  [class*="content-wrap"],
  [class*="page-content"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .vb-page-head {
    padding-top: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  .vb-page-head,
  .vb-page-head * {
    min-width: 0 !important;
  }

  .vb-page-head h1,
  .vb-page-head h2,
  h1,
  h2 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /*
    TinyMCE mobile toolbar: horizontal scroll inside editor, not page.
  */
  .vb-sa-form .tox.tox-tinymce {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .vb-sa-form .tox .tox-toolbar,
  .vb-sa-form .tox .tox-toolbar__primary,
  .vb-sa-form .tox .tox-toolbar__overflow {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .vb-sa-form .tox .tox-toolbar__group,
  .vb-sa-form .tox .tox-tbtn {
    flex: 0 0 auto !important;
  }

  /*
    Media modal stable mobile behavior.
  */
  .vb-mail-media-modal.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 12px !important;
  }

  .vb-mail-media-backdrop {
    position: fixed !important;
    inset: 0 !important;
  }

  .vb-mail-media-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .vb-mail-media-head,
  .vb-mail-media-toolbar,
  .vb-mail-media-message {
    flex: 0 0 auto !important;
  }

  .vb-mail-media-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .vb-mail-media-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vb-mail-media-toolbar .vb-btn,
  .vb-mail-media-toolbar button {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .vb-admin-main,
  .vb-main,
  .admin-main,
  .app-main,
  .main,
  main,
  [class*="main-content"],
  [class*="content-wrap"],
  [class*="page-content"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .vb-mail-media-grid {
    grid-template-columns: 1fr !important;
  }
}
/* End VEYTRIUM BM-6-FIX4 RESTORE MOBILE MENU */

/* VEYTRIUM BM-6-FIX5 MOBILE MENU ICON POLISH */
/*
  Purpose:
  - Keep mobile menu working.
  - Make the top-left mobile menu button less bright.
  - Darken the hamburger/menu lines for better visibility.
  - No inline CSS.
*/

@media (max-width: 860px) {
  .vb-mobile-menu-toggle,
  .mobile-menu-toggle,
  .menu-toggle,
  .sidebar-toggle,
  .navbar-toggler,
  .hamburger,
  .vb-nav-toggle,
  [data-sidebar-toggle],
  [data-menu-toggle],
  button[aria-label*="menu" i],
  button[class*="menu" i],
  button[class*="toggle" i] {
    background: rgba(241, 245, 249, 0.96) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: #334155 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    border-radius: 18px !important;
  }

  .vb-mobile-menu-toggle:hover,
  .mobile-menu-toggle:hover,
  .menu-toggle:hover,
  .sidebar-toggle:hover,
  .navbar-toggler:hover,
  .hamburger:hover,
  .vb-nav-toggle:hover,
  [data-sidebar-toggle]:hover,
  [data-menu-toggle]:hover,
  button[aria-label*="menu" i]:hover,
  button[class*="menu" i]:hover,
  button[class*="toggle" i]:hover {
    background: rgba(226, 232, 240, 0.98) !important;
    color: #0f172a !important;
  }

  .vb-mobile-menu-toggle:empty::before,
  .mobile-menu-toggle:empty::before,
  .menu-toggle:empty::before,
  .sidebar-toggle:empty::before,
  .navbar-toggler:empty::before,
  .hamburger:empty::before,
  .vb-nav-toggle:empty::before,
  [data-sidebar-toggle]:empty::before,
  [data-menu-toggle]:empty::before {
    color: #334155 !important;
    text-shadow: none !important;
  }

  .vb-mobile-menu-toggle svg,
  .mobile-menu-toggle svg,
  .menu-toggle svg,
  .sidebar-toggle svg,
  .navbar-toggler svg,
  .hamburger svg,
  .vb-nav-toggle svg,
  [data-sidebar-toggle] svg,
  [data-menu-toggle] svg,
  button[aria-label*="menu" i] svg,
  button[class*="menu" i] svg,
  button[class*="toggle" i] svg {
    color: #334155 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .vb-mobile-menu-toggle svg path,
  .mobile-menu-toggle svg path,
  .menu-toggle svg path,
  .sidebar-toggle svg path,
  .navbar-toggler svg path,
  .hamburger svg path,
  .vb-nav-toggle svg path,
  [data-sidebar-toggle] svg path,
  [data-menu-toggle] svg path,
  button[aria-label*="menu" i] svg path,
  button[class*="menu" i] svg path,
  button[class*="toggle" i] svg path,
  .vb-mobile-menu-toggle svg line,
  .mobile-menu-toggle svg line,
  .menu-toggle svg line,
  .sidebar-toggle svg line,
  .navbar-toggler svg line,
  .hamburger svg line,
  .vb-nav-toggle svg line,
  [data-sidebar-toggle] svg line,
  [data-menu-toggle] svg line,
  button[aria-label*="menu" i] svg line,
  button[class*="menu" i] svg line,
  button[class*="toggle" i] svg line,
  .vb-mobile-menu-toggle svg rect,
  .mobile-menu-toggle svg rect,
  .menu-toggle svg rect,
  .sidebar-toggle svg rect,
  .navbar-toggler svg rect,
  .hamburger svg rect,
  .vb-nav-toggle svg rect,
  [data-sidebar-toggle] svg rect,
  [data-menu-toggle] svg rect,
  button[aria-label*="menu" i] svg rect,
  button[class*="menu" i] svg rect,
  button[class*="toggle" i] svg rect {
    fill: #334155 !important;
    stroke: #334155 !important;
  }

  .vb-mobile-menu-toggle:focus,
  .mobile-menu-toggle:focus,
  .menu-toggle:focus,
  .sidebar-toggle:focus,
  .navbar-toggler:focus,
  .hamburger:focus,
  .vb-nav-toggle:focus,
  [data-sidebar-toggle]:focus,
  [data-menu-toggle]:focus,
  button[aria-label*="menu" i]:focus,
  button[class*="menu" i]:focus,
  button[class*="toggle" i]:focus {
    outline: 2px solid rgba(59, 130, 246, 0.22) !important;
    outline-offset: 2px !important;
  }
}
/* End VEYTRIUM BM-6-FIX5 MOBILE MENU ICON POLISH */

/* VEYTRIUM BM-6-FIX6 MOBILE MENU VISUAL SKIN DISABLED BY BM-6-FIX7
   Reason: real selector is .vb-mobile-menu-button; pseudo overlay caused double white circle.
*/

/* VEYTRIUM BM-6-FIX7 REAL MOBILE MENU BUTTON */
/*
  Purpose:
  - Style the real mobile menu button: .vb-mobile-menu-button
  - Remove duplicate pseudo overlay visual.
  - Keep click/menu behaviour intact.
  - No inline CSS.
*/

@media (max-width: 900px) {
  .vb-mobile-menu-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(248, 250, 252, 0.96) !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 12px !important;
    color: #334155 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }

  .vb-mobile-menu-button:hover,
  .vb-mobile-menu-button:focus {
    background: rgba(241, 245, 249, 0.98) !important;
    color: #0f172a !important;
  }

  .vb-mobile-menu-button svg {
    width: 22px !important;
    height: 22px !important;
    color: #334155 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .vb-mobile-menu-button svg path,
  .vb-mobile-menu-button svg line,
  .vb-mobile-menu-button svg rect {
    fill: #334155 !important;
    stroke: #334155 !important;
  }

  .vb-mobile-menu-button span,
  .vb-mobile-menu-button i,
  .vb-mobile-menu-button .bar,
  .vb-mobile-menu-button .line {
    background: #334155 !important;
    color: #334155 !important;
    border-color: #334155 !important;
  }

  /*
    If the button has no visible inner icon, draw fallback hamburger directly on the real button.
    This avoids body::before/body::after overlays.
  */
  .vb-mobile-menu-button:empty::before {
    content: "";
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: #334155;
    box-shadow:
      0 6px 0 #334155,
      0 -6px 0 #334155;
  }

  /*
    Prevent title from sitting under the fixed menu button.
    This targets only the page header, not action buttons.
  */
  .vb-page-head > div:first-child {
    padding-left: 44px !important;
  }

  .vb-page-head > div:first-child h1,
  .vb-page-head > div:first-child h2,
  .vb-page-head > div:first-child .vb-kicker,
  .vb-page-head > div:first-child p {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 430px) {
  .vb-mobile-menu-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
  }

  .vb-page-head > div:first-child {
    padding-left: 42px !important;
  }
}
/* End VEYTRIUM BM-6-FIX7 REAL MOBILE MENU BUTTON */

/* VEYTRIUM BM-6-FIX8 MOBILE MENU DRAW LINES */
/*
  Purpose:
  - Draw 3 visible dark lines inside the real .vb-mobile-menu-button
  - Keep the button clickable and functional
  - No inline CSS
*/

@media (max-width: 900px) {
  .vb-mobile-menu-button {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(248, 250, 252, 0.97) !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
    color: transparent !important;
  }

  /* Hide any broken/blank inner icon rendering */
  .vb-mobile-menu-button svg,
  .vb-mobile-menu-button img,
  .vb-mobile-menu-button i,
  .vb-mobile-menu-button span {
    opacity: 0 !important;
  }

  /* Draw the hamburger lines directly */
  .vb-mobile-menu-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin-left: -8px;
    margin-top: -1px;
    background: #475569 !important;
    border-radius: 999px;
    box-shadow:
      0 -5px 0 #475569,
      0 5px 0 #475569;
    pointer-events: none;
    z-index: 2;
    opacity: 1 !important;
  }

  .vb-mobile-menu-button:hover::before,
  .vb-mobile-menu-button:focus::before {
    background: #334155 !important;
    box-shadow:
      0 -5px 0 #334155,
      0 5px 0 #334155;
  }
}

@media (max-width: 430px) {
  .vb-mobile-menu-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
  }

  .vb-mobile-menu-button::before {
    width: 15px;
    margin-left: -7.5px;
  }
}
/* End VEYTRIUM BM-6-FIX8 MOBILE MENU DRAW LINES */

/* VEYTRIUM BM-6-FIX9 MOBILE MENU FIXED POSITION */
/*
  Final mobile decision:
  - Mobile menu button remains fixed while scrolling.
  - It stays available on long admin pages.
  - It remains below modals such as Mail Media Library.
  - No inline CSS.
*/

@media (max-width: 900px) {
  .vb-mobile-menu-button {
    position: fixed !important;
    top: 12px !important;
    left: 10px !important;
    z-index: 2147482500 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(248, 250, 252, 0.97) !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }

  .vb-mobile-menu-button::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 16px !important;
    height: 2px !important;
    margin-left: -8px !important;
    margin-top: -1px !important;
    background: #475569 !important;
    border-radius: 999px !important;
    box-shadow:
      0 -5px 0 #475569,
      0 5px 0 #475569 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
  }

  .vb-mobile-menu-button:hover::before,
  .vb-mobile-menu-button:focus::before {
    background: #334155 !important;
    box-shadow:
      0 -5px 0 #334155,
      0 5px 0 #334155 !important;
  }

  /*
    Keep page titles away from the fixed menu button.
  */
  .vb-page-head > div:first-child {
    padding-left: 44px !important;
  }

  /*
    Modals must remain above the fixed menu button.
  */
  .vb-mail-media-modal.is-open {
    z-index: 2147483000 !important;
  }
}

@media (max-width: 430px) {
  .vb-mobile-menu-button {
    top: 10px !important;
    left: 8px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
  }

  .vb-mobile-menu-button::before {
    width: 15px !important;
    margin-left: -7.5px !important;
  }

  .vb-page-head > div:first-child {
    padding-left: 42px !important;
  }
}
/* End VEYTRIUM BM-6-FIX9 MOBILE MENU FIXED POSITION */

/* VCB-STRIPE-1B-3A PAYMENT SETUP */
.vb-section-title {
  margin: 0 0 14px;
}

.vb-card-spaced {
  margin-top: 18px;
}

.vb-payment-setup-head {
  margin-bottom: 18px;
}

.vb-payment-setup-inner-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.vb-field-help {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

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

.vb-payment-setup-actions {
  margin-top: 18px;
}

@media (max-width: 760px) {
  .vb-payment-setup-head,
  .vb-payment-setup-actions {
    margin-top: 0;
  }

  .vb-field-wide {
    grid-column: auto;
  }

  .vb-payment-setup-actions .vb-btn {
    width: 100%;
  }
}
/* END VCB-STRIPE-1B-3A PAYMENT SETUP */
/* VCB-STRIPE-1C-4B PAYMENT REQUEST CHECKOUT ADMIN */
.vb-prq-head,
.vb-prq-detail-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.vb-prq-head-note {
  margin: 6px 0 0;
}

.vb-prq-filter-select {
  width: 170px;
}

.vb-prq-detail-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vb-prq-detail-note {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .vb-prq-head,
  .vb-prq-detail-head,
  .vb-prq-filter,
  .vb-prq-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vb-prq-filter-select,
  .vb-prq-filter .vb-btn,
  .vb-prq-detail-actions .vb-btn,
  .vb-prq-detail-actions form,
  .vb-prq-detail-actions button {
    width: 100%;
  }
}
/* END VCB-STRIPE-1C-4B PAYMENT REQUEST CHECKOUT ADMIN */

/* VCB-STRIPE-1C-6A SERVICE CUSTOMER VIEW CLEANUP */
.vb-services-head,
.vb-customer-show-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.vb-services-filter {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vb-services-search-input {
  width: 280px;
}

.vb-services-type-select {
  width: 180px;
}

.vb-services-status-select {
  width: 160px;
}

@media (max-width: 760px) {
  .vb-services-head,
  .vb-customer-show-head,
  .vb-services-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .vb-services-search-input,
  .vb-services-type-select,
  .vb-services-status-select,
  .vb-services-filter .vb-btn,
  .vb-customer-show-head .vb-btn {
    width: 100%;
  }
}
/* END VCB-STRIPE-1C-6A SERVICE CUSTOMER VIEW CLEANUP */

/* VEYTRIUM BILLING CUSTOM CONFIRM MODAL */
.vb-confirm-open {
  overflow: hidden;
}

.vb-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.66);
  backdrop-filter: blur(8px);
}

.vb-confirm-backdrop[hidden] {
  display: none !important;
}

.vb-confirm-dialog {
  width: min(520px, 100%);
  padding: 34px 34px 28px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.34);
  text-align: center;
}

.vb-confirm-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.vb-confirm-logo {
  display: block;
  width: min(240px, 76%);
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.vb-confirm-title {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.vb-confirm-message {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.72;
}

.vb-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.vb-confirm-cancel,
.vb-confirm-continue {
  min-width: 132px;
  justify-content: center;
}

.vb-confirm-cancel {
  background: #f1f5f9;
  color: #0f172a;
}

.vb-confirm-continue {
  background: #05070d;
  color: #ffffff;
}

.vb-confirm-continue:hover {
  background: #111827;
}

@media (max-width: 640px) {
  .vb-confirm-backdrop {
    align-items: flex-end;
    padding: 16px;
  }

  .vb-confirm-dialog {
    padding: 26px 20px 22px;
    border-radius: 22px;
  }

  .vb-confirm-title {
    font-size: 21px;
  }

  .vb-confirm-actions {
    flex-direction: column-reverse;
  }

  .vb-confirm-cancel,
  .vb-confirm-continue {
    width: 100%;
  }
}

/* VEYTRIUM BILLING INVOICE SETUP */
.vb-invoice-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: 22px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #f8fafc;
}

.vb-invoice-logo-preview img {
  display: block;
  width: auto;
  max-width: min(320px, 100%);
  max-height: 92px;
  object-fit: contain;
}

/* BEGIN VCB-3C-4G GLOBAL BLACK GREY BUTTON BRANDING */
.vb-btn.primary,
a.vb-btn.primary,
button.vb-btn.primary,
input.vb-btn.primary,
.vb-actions .vb-btn.primary {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.vb-btn.primary:hover,
.vb-btn.primary:focus,
a.vb-btn.primary:hover,
a.vb-btn.primary:focus,
button.vb-btn.primary:hover,
button.vb-btn.primary:focus,
input.vb-btn.primary:hover,
input.vb-btn.primary:focus,
.vb-actions .vb-btn.primary:hover,
.vb-actions .vb-btn.primary:focus {
  background: #808080;
  border-color: #808080;
  color: #ffffff;
}

.vb-btn:not(.primary):not(.danger),
a.vb-btn:not(.primary):not(.danger),
button.vb-btn:not(.primary):not(.danger),
input.vb-btn:not(.primary):not(.danger) {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #111827;
  
}

.vb-btn:not(.primary):not(.danger):hover,
.vb-btn:not(.primary):not(.danger):focus,
a.vb-btn:not(.primary):not(.danger):hover,
a.vb-btn:not(.primary):not(.danger):focus,
button.vb-btn:not(.primary):not(.danger):hover,
button.vb-btn:not(.primary):not(.danger):focus,
input.vb-btn:not(.primary):not(.danger):hover,
input.vb-btn:not(.primary):not(.danger):focus {
  background: #d1d5db;
  border-color: #9ca3af;
  color: #111827;
}

.vb-btn.danger,
a.vb-btn.danger,
button.vb-btn.danger,
input.vb-btn.danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.vb-btn.danger:hover,
.vb-btn.danger:focus,
a.vb-btn.danger:hover,
a.vb-btn.danger:focus,
button.vb-btn.danger:hover,
button.vb-btn.danger:focus,
input.vb-btn.danger:hover,
input.vb-btn.danger:focus {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}
/* END VCB-3C-4G GLOBAL BLACK GREY BUTTON BRANDING */

/* BEGIN VCB-3C-4H ADMIN SIDEBAR SECTIONS */
.vb-sidebar-section {
  margin: 22px 12px 8px;
  color: #8b95a7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vb-sidebar-section:first-of-type {
  margin-top: 18px;
}
/* END VCB-3C-4H ADMIN SIDEBAR SECTIONS */