/* Hallmark - pre-emit critique: P4 H4 E4 S4 R5 V4
 * component: sidebar menu - genre: app-utility - tone: calm operations
 * states: default, hover, focus, active, disabled, loading, error, success
 * contrast: pass (40-41) - mobile: pass (34, 49)
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --hh-bg: #f8f8ff !important;
  --hh-bg-soft: #ecebff !important;
  --hh-surface: #ffffff !important;
  --hh-surface-2: #f3f4ff !important;
  --hh-line: #d7dbf9 !important;
  --hh-text: #202847 !important;
  --hh-muted: #5f678a !important;
  --hh-primary: #4f46e5 !important;
  --hh-primary-2: #5a51ea !important;
  --hh-primary-3: #6f34d2 !important;
  --hh-success: #22c55e !important;
  --hh-danger: #ef4444 !important;
  --hh-danger-bg: #fee2e2 !important;
  --hh-warning: #f59e0b !important;
  --hh-warning-bg: #fffbeb !important;
  --hh-shadow: 0 18px 40px rgba(80, 74, 183, 0.12) !important;
  --hh-shadow-soft: 0 8px 20px rgba(80, 74, 183, 0.08) !important;

  /* Compatibility aliases for legacy dark themes */
  --bg: #f8f8ff !important;
  --bg-soft: #eef1ff !important;
  --panel: #ffffff !important;
  --panel-strong: #ffffff !important;
  --panel-soft: #f3f5ff !important;
  --line: #d7dbf9 !important;
  --line-soft: #e1e5fb !important;
  --text: #202847 !important;
  --muted: #5f678a !important;
  --white: #ffffff !important;
  --purple: #4f46e5 !important;
  --purple-dark: #4038cf !important;
  --purple-soft: #e9ebff !important;
  --purple-border: #cfd4fb !important;
  --blue-soft: #eef2ff !important;
  --blue-border: #cfd8ff !important;
  --dark-soft: #f3f5ff !important;
  --dark-border: #dbe1fb !important;
  --warning: var(--hh-warning) !important;
  --warning-bg: var(--hh-warning-bg) !important;
  --shadow: 0 14px 30px rgba(79, 70, 229, 0.12) !important;
  --shadow-soft: 0 8px 18px rgba(79, 70, 229, 0.08) !important;
}

html,
body {
  background: radial-gradient(circle at 12% -10%, #efedff 0%, #f8f8ff 42%, #f8f8ff 100%) !important;
  color: var(--hh-text) !important;
}

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
  line-height: 1.55 !important;
}

a {
  color: var(--hh-primary) !important;
}

a:hover {
  color: var(--hh-primary-2) !important;
}

/* Core layout */
.site-header,
.topbar,
.dashboard-header,
header {
  background: #e8e7fb !important;
  border-bottom: 1px solid var(--hh-line) !important;
}

.dashboard-shell,
.dashboard-main,
.page-shell,
.page-main,
.page-content,
.auth-layout,
.simple-auth-page,
.simple-auth-layout,
main {
  background: transparent !important;
}

.container,
.dashboard-main {
  color: var(--hh-text) !important;
}

/* Hero / landing */
.hero-section {
  background: linear-gradient(135deg, #4f46e5 0%, #4a4bdc 45%, #7f2fd0 100%) !important;
}

.hero-copy h1,
.hero-copy p,
.hero-text,
.hero-tags span,
.eyebrow,
.method-cloud span {
  color: #ffffff !important;
}

.eyebrow,
.hero-tags span,
.method-cloud span {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
}

/* Cards, blocks */
.auth-card,
.page-card,
.service-stat-card,
.service-analytics-card,
.feature-card,
.metric-card,
.service-card,
.industry-card,
.compliance-card,
.contact-shell,
.split-panel,
.hero-visual-shell,
.service-daily-table-wrap,
.service-chart-empty,
.service-month-chart,
.account-dropdown,
.bank-note,
.admin-card,
.withdraw-summary-card,
.sidebar-shell,
.dashboard-sidebar,
.panel,
.card,
article,
table {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-soft) !important;
  color: var(--hh-text) !important;
}

.service-stat-card.is-highlight,
.feature-card.is-highlight,
.partner-section,
.solid-panel,
.auth-card.compact {
  background: linear-gradient(160deg, #ffffff 0%, #f1f2ff 100%) !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
.account-toggle strong {
  color: var(--hh-text) !important;
}

.page-brand .brand-copy strong,
.sidebar-brand .brand-copy strong,
.dashboard-brand .brand-copy strong {
  color: var(--hh-primary) !important;
}

.brand-icon {
  background: linear-gradient(135deg, #4f46e5 0%, #5a51ea 100%) !important;
  border: 1px solid #4f46e5 !important;
}

.brand-icon i {
  background: #ffffff !important;
}

p,
small,
label,
.section-message,
.form-message,
.auth-head p,
.service-stat-card p,
.service-analytics-card p,
.sidebar-link,
.sidebar-group-head,
.service-daily-table th,
.service-daily-table td {
  color: var(--hh-muted) !important;
}

/* Buttons */
.primary-button,
.submit-button,
button[type="submit"],
.admin-action-button,
.btn-primary {
  background: linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-2) 55%, var(--hh-primary-3) 100%) !important;
  border: 1px solid var(--hh-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.28) !important;
}

.primary-button:hover,
.submit-button:hover,
button[type="submit"]:hover,
.admin-action-button:hover,
.btn-primary:hover {
  filter: brightness(1.03) !important;
}

.secondary-button,
.toggle-password,
.account-toggle,
.sidebar-toggle-button,
.dropdown-link,
.btn,
button {
  background: #ffffff !important;
  color: var(--hh-text) !important;
  border: 1px solid var(--hh-line) !important;
}

.secondary-button.light {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.sidebar-link.is-active,
.sidebar-group.is-open .sidebar-group-head,
.dropdown-link:hover,
.switch-link.active {
  color: var(--hh-primary) !important;
  background: #e9ebff !important;
  border-color: #cfd4fb !important;
}

/* Account dropdown should read like a menu, not stacked form inputs */
.account-dropdown {
  gap: 8px !important;
  padding: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
  border: 1px solid #dbe2ff !important;
  box-shadow: 0 20px 46px rgba(80, 74, 183, 0.16) !important;
}

.account-menu:not(.is-open) .account-dropdown {
  display: none !important;
}

.account-menu.is-open .account-dropdown {
  display: grid !important;
}

.account-dropdown>p:first-child {
  margin: 0 0 6px !important;
  padding: 12px 14px !important;
  display: grid !important;
  gap: 4px !important;
  border-radius: var(--hh-radius-lg) !important;
  background: linear-gradient(135deg, #f6f7ff 0%, #edf0ff 100%) !important;
  border: 1px solid #d7dbf9 !important;
}

.account-dropdown>p:first-child strong {
  display: block !important;
  color: var(--hh-text) !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

.account-dropdown>p:first-child small {
  color: var(--hh-muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.account-dropdown .dropdown-link {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--hh-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease !important;
}

.account-dropdown .dropdown-link:hover {
  background: #eef1ff !important;
  border-color: #cfd4fb !important;
  color: var(--hh-primary) !important;
  transform: translateX(2px) !important;
}

.account-dropdown .dropdown-link.is-danger {
  color: #bf3558 !important;
}

.account-dropdown .dropdown-link.is-danger:hover {
  background: #fff1f5 !important;
  border-color: #f3c1cf !important;
  color: #a72b49 !important;
}

.account-dropdown .dropdown-link[hidden],
.dropdown-link[hidden] {
  display: none !important;
}

#deleteAccountAction {
  display: none !important;
}

/* Lock sidebar item alignment (override rebuild pages) */
.page-nav.sidebar-nav>.sidebar-link,
.page-nav.sidebar-nav>.sidebar-group>.sidebar-group-head {
  min-height: 50px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.page-nav.sidebar-nav .menu-icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-nav.sidebar-nav .menu-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.page-nav.sidebar-nav .sidebar-label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  line-height: 1 !important;
}

.page-nav.sidebar-nav .sidebar-arrow {
  margin-left: auto !important;
}

/* Forms */
input,
textarea,
select,
.field input,
.field textarea,
.field select {
  background: #fbfcff !important;
  border: 1px solid var(--hh-line) !important;
  color: var(--hh-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #9aa3b8 !important;
}

input:focus,
textarea:focus,
select:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none !important;
  border-color: var(--hh-primary) !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14) !important;
}

/* Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th {
  background: #eef0ff !important;
  color: #4b5570 !important;
  border-bottom: 1px solid var(--hh-line) !important;
}

tbody tr {
  background: #ffffff !important;
}

tbody tr:nth-child(even) {
  background: #f5f7ff !important;
}

td,
th {
  border-color: var(--hh-line) !important;
}

/* Pills, icon badges */
.brand-icon,
.account-avatar,
.badge-primary,
.status-dot.is-online,
.icon-badge.purple {
  background: linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-2) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.feature-chip,
.section-label,
.dashboard-kicker,
.metric-card strong,
.icon-badge.blue,
.icon-badge.dark {
  background: #e9ebff !important;
  color: #4f46e5 !important;
  border: 1px solid #cfd4fb !important;
}

.service-chart-bar.is-activity {
  background: linear-gradient(180deg, #716bff 0%, #4f46e5 100%) !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.25) !important;
}

/* Legacy dark widgets */
.orders-search,
.search-input,
.admin-search-input,
.admin-copy-button,
.admin-action-button,
.receipt-button,
.dropdown-link.is-danger,
.admin-balance-modal-card,
.modal-content,
.receipt-modal-content {
  background: #ffffff !important;
  color: var(--hh-text) !important;
  border: 1px solid var(--hh-line) !important;
}

.admin-action-button.is-primary,
.receipt-button.is-primary {
  background: linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-2) 55%, var(--hh-primary-3) 100%) !important;
  color: #ffffff !important;
  border-color: var(--hh-primary) !important;
}

.pagination-button,
.pagination-page {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--pg-border) !important;
  border-radius: 10px !important;
  background: var(--pg-surface) !important;
  color: var(--pg-text) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

.pagination-button {
  min-width: 76px !important;
}

@media (hover: hover) {
  .pagination-button:hover,
  .pagination-page:hover {
    background: var(--pg-surface-hover) !important;
    border-color: var(--pg-border-strong) !important;
    box-shadow: var(--pg-shadow) !important;
    transform: translateY(-1px) !important;
  }
}

.pagination-button:focus-visible,
.pagination-page:focus-visible {
  border-color: var(--pg-border-strong) !important;
  outline-color: var(--pg-focus) !important;
}

.pagination-button:active,
.pagination-page:active {
  background: var(--pg-surface-active) !important;
  box-shadow: none !important;
  transform: translateY(1px) !important;
}

.pagination-page[aria-current="page"],
.pagination-page.is-active {
  background: var(--pg-surface-active) !important;
  border-color: var(--pg-border-strong) !important;
  color: var(--pg-text) !important;
  box-shadow: inset 0 0 0 1px var(--pg-border-strong) !important;
  pointer-events: none !important;
}

.pagination-ellipsis {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  color: var(--pg-muted) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.dashboard-sidebar,
.page-sidebar {
  background: #f6f7ff !important;
  border-right: 1px solid var(--hh-line) !important;
}

.modal-backdrop,
.receipt-modal-backdrop,
.admin-balance-modal-backdrop {
  background: rgba(42, 55, 122, 0.22) !important;
}

/* Hard reset for leftover dark inline pieces */
[style*="#2a2a2a"],
[style*="#222"],
[style*="background:#0"],
[style*="background: #0"] {
  background: var(--hh-surface) !important;
  color: var(--hh-text) !important;
  border-color: var(--hh-line) !important;
}

/* Global rounded corners */
:root {
  --hh-radius-xs: 6px !important;
  --hh-radius-sm: 8px !important;
  --hh-radius-md: 10px !important;
  --hh-radius-lg: 12px !important;
  --hh-radius-xl: 14px !important;
}

button,
input,
select,
textarea,
.btn,
.primary-button,
.secondary-button,
.submit-button,
.dropdown-link,
.admin-copy-button,
.admin-action-button,
.pagination-button,
.pagination-page,
.search-input,
.orders-search,
.admin-search-input,
.field input,
.field select,
.field textarea {
  border-radius: var(--hh-radius-md) !important;
}

.page-card,
.auth-card,
.dashboard-header,
.page-header,
.account-dropdown,
.modal-content,
.receipt-modal-content,
.admin-balance-modal-card,
.dashboard-sidebar,
.page-sidebar,
.panel,
.card,
.service-stat-card,
.service-analytics-card,
.feature-card,
.metric-card,
.service-card,
.industry-card,
.compliance-card {
  border-radius: var(--hh-radius-lg) !important;
}

.dropdown-icon,
.account-avatar,
.brand-icon {
  border-radius: var(--hh-radius-sm) !important;
}

/* ============================================
   RESPONSIVE MOBILE FIXES
   ============================================ */

/* Mobile 960px and below - Sidebar layout fix */
@media (max-width: 960px) {
  .page-main.dashboard-main > .page-content {
    padding: 18px 14px 20px !important;
  }

  .dashboard-header,
  .page-header.dashboard-header {
    margin: 14px 14px 0 !important;
    padding: 18px !important;
    border-radius: var(--hh-radius-lg) !important;
  }
}

/* Mobile 768px */
@media (max-width: 768px) {
  .page-card {
    padding: 14px !important;
  }

  .page-main {
    padding: 10px !important;
  }

  .service-summary-grid,
  .feature-grid {
    gap: 10px !important;
  }

  .service-stat-card,
  .service-analytics-card,
  .feature-card,
  .bank-note {
    padding: 14px !important;
  }
}

/* Mobile 640px */
@media (max-width: 640px) {
  .dashboard-header,
  .page-header.dashboard-header {
    padding: 14px !important;
    margin: 12px 12px 0 !important;
  }

  .dashboard-header h1 {
    font-size: 1.6rem !important;
    margin: 10px 0 0 !important;
  }

  .page-content {
    gap: 10px !important;
  }

  .page-card {
    padding: 12px !important;
    border-radius: var(--hh-radius-lg) !important;
  }

  .toolbar-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .toolbar-row .search-input {
    max-width: none !important;
    width: 100% !important;
  }

  .page-grid-2,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .service-stat-value {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .data-table {
    display: block !important;
    overflow-x: auto !important;
  }

  .data-table th,
  .data-table td {
    padding: 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* Mobile 480px */
@media (max-width: 480px) {
  .page-main {
    padding: 8px !important;
  }

  .page-main.dashboard-main > .page-content {
    padding: 12px 8px 16px !important;
  }

  .page-card {
    padding: 10px !important;
  }

  .page-card h2 {
    font-size: 16px !important;
  }

  .dashboard-header,
  .page-header.dashboard-header {
    padding: 12px !important;
    margin: 8px 8px 0 !important;
  }

  .header-stack {
    gap: 8px !important;
  }

  .header-toolbar {
    gap: 6px !important;
  }

  .sidebar-toggle-button {
    min-width: 40px !important;
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  .service-dashboard {
    padding: 14px 8px 0 !important;
  }

  .service-summary-grid,
  .feature-grid {
    gap: 8px !important;
  }

  .service-stat-card,
  .service-analytics-card,
  .feature-card,
  .bank-note {
    padding: 12px !important;
  }

  .pagination-row {
    justify-content: center !important;
    gap: 6px !important;
  }

  .pagination-button,
  .pagination-page {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* Hallmark menu pass: single sidebar component */

/* Sidebar geometry lock: keep menu size stable across pages and roles */
.dashboard-sidebar,
.page-sidebar.dashboard-sidebar {
  width: var(--hh-sidebar-width) !important;
  min-width: var(--hh-sidebar-width) !important;
  max-width: var(--hh-sidebar-width) !important;
  box-sizing: border-box !important;
  flex: 0 0 var(--hh-sidebar-width) !important;
}

.dashboard-sidebar .sidebar-brand {
  min-height: 54px !important;
  margin: 0 0 18px !important;
  display: flex !important;
  align-items: center !important;
}

.dashboard-sidebar .page-brand,
.dashboard-sidebar .sidebar-brand .brand {
  width: 100% !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.dashboard-sidebar .brand-copy {
  min-width: 0 !important;
  max-width: calc(100% - 58px) !important;
  display: grid !important;
  gap: 4px !important;
}

.dashboard-sidebar .brand-copy strong,
.dashboard-sidebar .brand-copy small {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.15 !important;
}

.dashboard-sidebar .brand-copy strong {
  font-size: 17px !important;
  font-weight: 700 !important;
}

.dashboard-sidebar .brand-copy small {
  min-height: 16px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.page-nav.sidebar-nav,
.page-nav.sidebar-nav > .sidebar-link,
.page-nav.sidebar-nav > .sidebar-group,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

:root {
  --hh-sidebar-width: 270px !important;
  --hh-sidebar-rail: 92px !important;
  --hh-sidebar-item: 48px !important;
  --hh-sidebar-icon: 36px !important;
  --hh-sidebar-drawer: min(312px, 86vw) !important;
  --hh-dur-fast: 160ms !important;
  --hh-dur-drawer: 200ms !important;
  --hh-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  --hh-menu-focus: 0 0 0 3px rgba(79, 70, 229, 0.24) !important;
  --hh-success-bg: #ecfdf3 !important;
}

.dashboard-shell,
.page-shell.dashboard-shell {
  grid-template-columns: var(--hh-sidebar-width) minmax(0, 1fr) !important;
}

.dashboard-shell.is-sidebar-collapsed {
  grid-template-columns: var(--hh-sidebar-rail) minmax(0, 1fr) !important;
}

.dashboard-sidebar,
.page-sidebar.dashboard-sidebar {
  overflow-x: clip !important;
  z-index: 42 !important;
}


.page-nav.sidebar-nav[hidden],
.dashboard-sidebar .sidebar-nav[hidden] {
  display: none !important;
}

.page-nav.sidebar-nav:not([hidden]) {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
}

.page-nav.sidebar-nav > .sidebar-link,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
  position: relative !important;
  min-height: var(--hh-sidebar-item) !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: var(--hh-radius-sm) !important;
  color: var(--hh-muted) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: background-color var(--hh-dur-fast) var(--hh-ease-out), border-color var(--hh-dur-fast) var(--hh-ease-out), color var(--hh-dur-fast) var(--hh-ease-out), transform var(--hh-dur-fast) var(--hh-ease-out) !important;
}

.page-nav.sidebar-nav .menu-icon {
  width: var(--hh-sidebar-icon) !important;
  height: var(--hh-sidebar-icon) !important;
  min-width: var(--hh-sidebar-icon) !important;
  border-radius: var(--hh-radius-md) !important;
}

.page-nav.sidebar-nav .sidebar-label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.page-nav.sidebar-nav .sidebar-arrow {
  flex: 0 0 auto !important;
}

@media (hover: hover) {
  .page-nav.sidebar-nav > .sidebar-link:hover,
  .page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head:hover {
    background: var(--hh-surface-2) !important;
    border-color: var(--hh-line) !important;
    color: var(--hh-primary) !important;
    transform: translateY(-1px) !important;
  }
}

.page-nav.sidebar-nav > .sidebar-link:focus-visible,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head:focus-visible {
  outline: 2px solid var(--hh-primary) !important;
  outline-offset: 2px !important;
  box-shadow: var(--hh-menu-focus) !important;
}

.page-nav.sidebar-nav > .sidebar-link:active,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head:active {
  transform: translateY(1px) !important;
}

.page-nav.sidebar-nav > .sidebar-link.is-active,
.page-nav.sidebar-nav > .sidebar-group.is-open > .sidebar-group-head {
  background: var(--purple-soft) !important;
  border-color: var(--purple-border) !important;
  border-radius: var(--hh-radius-md) !important;
  color: var(--hh-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.08) !important;
}

.page-nav.sidebar-nav > .sidebar-link[aria-disabled="true"],
.page-nav.sidebar-nav > .sidebar-link.is-disabled,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.page-nav.sidebar-nav > .sidebar-link.is-loading,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head.is-loading {
  background: var(--hh-surface-2) !important;
  color: var(--hh-muted) !important;
  cursor: progress !important;
}

.page-nav.sidebar-nav > .sidebar-link.is-error,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head.is-error {
  background: var(--hh-danger-bg) !important;
  border-color: var(--hh-danger) !important;
  color: var(--hh-danger) !important;
}

.page-nav.sidebar-nav > .sidebar-link.is-success,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head.is-success {
  background: var(--hh-success-bg) !important;
  border-color: var(--hh-success) !important;
  color: var(--hh-success) !important;
}

@media (min-width: 961px) {
  .dashboard-shell.is-sidebar-collapsed .dashboard-sidebar,
  .dashboard-shell.is-sidebar-collapsed .page-sidebar.dashboard-sidebar {
    width: var(--hh-sidebar-rail) !important;
    min-width: var(--hh-sidebar-rail) !important;
    max-width: var(--hh-sidebar-rail) !important;
    flex-basis: var(--hh-sidebar-rail) !important;
    padding-inline: 12px !important;
  }

  .dashboard-shell.is-sidebar-collapsed .page-brand,
  .dashboard-shell.is-sidebar-collapsed .dashboard-brand,
  .dashboard-shell.is-sidebar-collapsed .sidebar-brand .brand {
    justify-content: center !important;
  }

  .dashboard-shell.is-sidebar-collapsed .brand-copy,
  .dashboard-shell.is-sidebar-collapsed .sidebar-caption,
  .dashboard-shell.is-sidebar-collapsed .sidebar-label,
  .dashboard-shell.is-sidebar-collapsed .sidebar-arrow,
  .dashboard-shell.is-sidebar-collapsed .sidebar-submenu {
    display: none !important;
    visibility: hidden !important;
  }

  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav {
    gap: 10px !important;
    justify-items: center !important;
  }

  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-link,
  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
    width: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: var(--hh-radius-md) !important;
  }

  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav .menu-icon {
    margin: 0 !important;
  }
}

@media (max-width: 960px) {
  .dashboard-shell,
  .dashboard-shell.is-sidebar-collapsed,
  .page-shell.dashboard-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-sidebar,
  .page-sidebar.dashboard-sidebar {
    width: var(--hh-sidebar-drawer) !important;
    min-width: 0 !important;
    max-width: var(--hh-sidebar-drawer) !important;
    flex-basis: auto !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 18px 14px !important;
    border: 0 !important;
    border-right: 1px solid var(--hh-line) !important;
    border-radius: 0 var(--hh-radius-xl) var(--hh-radius-xl) 0 !important;
    background: var(--hh-surface) !important;
    box-shadow: 18px 0 44px rgba(31, 42, 92, 0.18) !important;
    transform: translateX(calc(-100% - 18px)) !important;
    transition: transform var(--hh-dur-drawer) var(--hh-ease-out) !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    pointer-events: none !important;
  }

  .dashboard-shell.is-sidebar-open .dashboard-sidebar,
  .dashboard-shell.is-sidebar-open .page-sidebar.dashboard-sidebar {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .dashboard-shell.is-sidebar-collapsed .brand-copy,
  .dashboard-shell.is-sidebar-collapsed .sidebar-label,
  .dashboard-shell.is-sidebar-collapsed .sidebar-arrow {
    display: inline-flex !important;
    visibility: visible !important;
  }

  .dashboard-shell.is-sidebar-collapsed .sidebar-submenu {
    display: none !important;
  }

  .dashboard-shell.is-sidebar-open .sidebar-group.is-open .sidebar-submenu {
    display: grid !important;
  }

  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 41 !important;
    display: none !important;
    border: 0 !important;
    background: rgba(32, 40, 71, 0.28) !important;
  }

  .dashboard-shell.is-sidebar-open .sidebar-overlay {
    display: block !important;
  }

  body.is-sidebar-open {
    overflow: hidden !important;
  }

  .dashboard-header,
  .page-header.dashboard-header {
    margin: 10px 10px 0 !important;
  }
}

@media (max-width: 480px) {
  .dashboard-sidebar,
  .page-sidebar.dashboard-sidebar {
    width: min(292px, 88vw) !important;
    max-width: min(292px, 88vw) !important;
    padding-inline: 12px !important;
  }

  .page-nav.sidebar-nav > .sidebar-link,
  .page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
    min-height: 46px !important;
    padding-inline: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar,
  .page-sidebar.dashboard-sidebar,
  .page-nav.sidebar-nav > .sidebar-link,
  .page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   CROSS-DEVICE CONSISTENCY PASS
   Keeps the existing visual language while making dense app screens usable
   on phones without relying on wide horizontal tables.
   ============================================ */
@media (max-width: 640px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .dashboard-shell,
  .page-shell,
  .dashboard-main,
  .page-main,
  .page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dashboard-header,
  .page-header.dashboard-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .header-stack,
  .header-toolbar {
    min-width: 0 !important;
  }

  .account-menu {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .account-toggle {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .account-toggle > span:not(.account-avatar) {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .account-toggle strong,
  .account-toggle small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 46vw !important;
  }

  .account-dropdown {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 66px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .page-card,
  .service-stat-card,
  .service-analytics-card,
  .deposit-merged-section,
  .deposit-history-section,
  .withdraw-hero-card,
  .withdraw-workspace-card,
  .withdraw-history-card,
  .withdraw-panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .toolbar-row,
  .deposit-address-actions,
  .history-pagination,
  .pagination-row {
    align-items: stretch !important;
  }

  .toolbar-row > *,
  .deposit-address-actions > *,
  .pagination-row > button,
  .pagination-row > span,
  .history-pagination > button,
  .history-pagination > span {
    min-width: 0 !important;
  }

  .search-input,
  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }

  .deposit-address,
  .wallet-value,
  .transaction-copy,
  .order-meta strong,
  .order-meta small,
  code,
  pre {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #depositShell .deposit-table,
  #bankManageShell .data-table,
  #bankOrdersShell .data-table,
  #serviceOrdersShell .data-table,
  #adminOrdersShell .data-table,
  #serviceWithdrawShell .data-table,
  #adminShell #usersSection .data-table,
  #adminShell #bankProfilesSection .data-table,
  #adminShell #walletsSection .data-table,
  #adminShell #withdrawsSection .data-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #depositShell .deposit-table thead,
  #bankManageShell .data-table thead,
  #bankOrdersShell .data-table thead,
  #serviceOrdersShell .data-table thead,
  #adminOrdersShell .data-table thead,
  #serviceWithdrawShell .data-table thead,
  #adminShell #usersSection .data-table thead,
  #adminShell #bankProfilesSection .data-table thead,
  #adminShell #walletsSection .data-table thead,
  #adminShell #withdrawsSection .data-table thead {
    display: none !important;
  }

  #depositShell .deposit-table tbody,
  #bankManageShell .data-table tbody,
  #bankOrdersShell .data-table tbody,
  #serviceOrdersShell .data-table tbody,
  #adminOrdersShell .data-table tbody,
  #serviceWithdrawShell .data-table tbody,
  #adminShell #usersSection .data-table tbody,
  #adminShell #bankProfilesSection .data-table tbody,
  #adminShell #walletsSection .data-table tbody,
  #adminShell #withdrawsSection .data-table tbody {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #depositShell .deposit-table tr,
  #bankManageShell .data-table tr,
  #bankOrdersShell .data-table tr,
  #serviceOrdersShell .data-table tr,
  #adminOrdersShell .data-table tr,
  #serviceWithdrawShell .data-table tr,
  #adminShell #usersSection .data-table tr,
  #adminShell #bankProfilesSection .data-table tr,
  #adminShell #walletsSection .data-table tr,
  #adminShell #withdrawsSection .data-table tr {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid var(--hh-line, #d7dbf9) !important;
    border-radius: var(--hh-radius-lg) !important;
    background: var(--hh-surface, #ffffff) !important;
    box-shadow: var(--hh-shadow-soft, 0 8px 20px rgba(80, 74, 183, 0.08)) !important;
  }

  #depositShell .deposit-table td,
  #bankManageShell .data-table td,
  #bankOrdersShell .data-table td,
  #serviceOrdersShell .data-table td,
  #adminOrdersShell .data-table td,
  #serviceWithdrawShell .data-table td,
  #adminShell #usersSection .data-table td,
  #adminShell #bankProfilesSection .data-table td,
  #adminShell #walletsSection .data-table td,
  #adminShell #withdrawsSection .data-table td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--hh-text, #202847) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #depositShell .deposit-table td::before,
  #bankManageShell .data-table td::before,
  #bankOrdersShell .data-table td::before,
  #serviceOrdersShell .data-table td::before,
  #adminOrdersShell .data-table td::before,
  #serviceWithdrawShell .data-table td::before,
  #adminShell #usersSection .data-table td::before,
  #adminShell #bankProfilesSection .data-table td::before,
  #adminShell #walletsSection .data-table td::before,
  #adminShell #withdrawsSection .data-table td::before {
    flex: 0 0 42% !important;
    color: var(--hh-muted, #5f678a) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    content: attr(data-label) !important;
  }

  #depositShell .deposit-table td[colspan],
  #bankManageShell .data-table td[colspan],
  #bankOrdersShell .data-table td[colspan],
  #serviceOrdersShell .data-table td[colspan],
  #adminOrdersShell .data-table td[colspan],
  #serviceWithdrawShell .data-table td[colspan],
  #adminShell #usersSection .data-table td[colspan],
  #adminShell #bankProfilesSection .data-table td[colspan],
  #adminShell #walletsSection .data-table td[colspan],
  #adminShell #withdrawsSection .data-table td[colspan] {
    display: block !important;
    text-align: left !important;
  }

  #depositShell .deposit-table td[colspan]::before,
  #bankManageShell .data-table td[colspan]::before,
  #bankOrdersShell .data-table td[colspan]::before,
  #serviceOrdersShell .data-table td[colspan]::before,
  #adminOrdersShell .data-table td[colspan]::before,
  #serviceWithdrawShell .data-table td[colspan]::before,
  #adminShell #usersSection .data-table td[colspan]::before,
  #adminShell #bankProfilesSection .data-table td[colspan]::before,
  #adminShell #walletsSection .data-table td[colspan]::before,
  #adminShell #withdrawsSection .data-table td[colspan]::before {
    content: none !important;
  }

  #depositShell .deposit-table td:nth-child(1)::before { content: "TxHash" !important; }
  #depositShell .deposit-table td:nth-child(2)::before { content: "Số USDT" !important; }
  #depositShell .deposit-table td:nth-child(3)::before { content: "Thời gian" !important; }

  #bankManageShell .data-table td:nth-child(1)::before { content: "Mã hồ sơ" !important; }
  #bankManageShell .data-table td:nth-child(2)::before { content: "Ngân hàng" !important; }
  #bankManageShell .data-table td:nth-child(3)::before { content: "Số tài khoản" !important; }
  #bankManageShell .data-table td:nth-child(4)::before { content: "Chủ tài khoản" !important; }
  #bankManageShell .data-table td:nth-child(5)::before { content: "Hạn mức/ngày" !important; }
  #bankManageShell .data-table td:nth-child(6)::before { content: "Trạng thái" !important; }
  #bankManageShell .data-table td:nth-child(7)::before { content: "Thao tác" !important; }

  #serviceOrdersShell .data-table td:nth-child(1)::before { content: "Mã đơn" !important; }
  #serviceOrdersShell .data-table td:nth-child(2)::before { content: "Ngân hàng" !important; }
  #serviceOrdersShell .data-table td:nth-child(3)::before { content: "Số tiền" !important; }
  #serviceOrdersShell .data-table td:nth-child(4)::before { content: "Nội dung" !important; }
  #serviceOrdersShell .data-table td:nth-child(5)::before { content: "Trạng thái" !important; }
  #serviceOrdersShell .data-table td:nth-child(6)::before { content: "Giao dịch" !important; }
  #serviceOrdersShell .data-table td:nth-child(7)::before { content: "Biên lai" !important; }
  #serviceOrdersShell .data-table td:nth-child(8)::before { content: "Thời gian" !important; }

  #bankOrdersShell .data-table td:nth-child(1)::before { content: "Mã đơn" !important; }
  #bankOrdersShell .data-table td:nth-child(2)::before { content: "Merchant" !important; }
  #bankOrdersShell .data-table td:nth-child(3)::before { content: "Ngân hàng" !important; }
  #bankOrdersShell .data-table td:nth-child(4)::before { content: "Số tiền" !important; }
  #bankOrdersShell .data-table td:nth-child(5)::before { content: "Nội dung" !important; }
  #bankOrdersShell .data-table td:nth-child(6)::before { content: "Trạng thái" !important; }
  #bankOrdersShell .data-table td:nth-child(7)::before { content: "Giao dịch" !important; }
  #bankOrdersShell .data-table td:nth-child(8)::before { content: "Biên lai" !important; }
  #bankOrdersShell .data-table td:nth-child(9)::before { content: "Duyệt tay" !important; }
  #bankOrdersShell .data-table td:nth-child(10)::before { content: "Thời gian" !important; }

  #adminOrdersShell .data-table td:nth-child(1)::before { content: "Mã đơn" !important; }
  #adminOrdersShell .data-table td:nth-child(2)::before { content: "Merchant" !important; }
  #adminOrdersShell .data-table td:nth-child(3)::before { content: "Tài khoản bank" !important; }
  #adminOrdersShell .data-table td:nth-child(4)::before { content: "Ngân hàng" !important; }
  #adminOrdersShell .data-table td:nth-child(5)::before { content: "Số tiền" !important; }
  #adminOrdersShell .data-table td:nth-child(6)::before { content: "Nội dung" !important; }
  #adminOrdersShell .data-table td:nth-child(7)::before { content: "Trạng thái" !important; }
  #adminOrdersShell .data-table td:nth-child(8)::before { content: "Giao dịch" !important; }
  #adminOrdersShell .data-table td:nth-child(9)::before { content: "Biên lai" !important; }
  #adminOrdersShell .data-table td:nth-child(10)::before { content: "Thao tác" !important; }
  #adminOrdersShell .data-table td:nth-child(11)::before { content: "Thời gian" !important; }

  #serviceWithdrawShell .data-table td:nth-child(1)::before { content: "Thời gian" !important; }
  #serviceWithdrawShell .data-table td:nth-child(2)::before { content: "Ví nhận" !important; }
  #serviceWithdrawShell .data-table td:nth-child(3)::before { content: "Số tiền" !important; }
  #serviceWithdrawShell .data-table td:nth-child(4)::before { content: "Trạng thái" !important; }
  #serviceWithdrawShell .data-table td:nth-child(5)::before { content: "Giao dịch" !important; }


  #adminShell #usersSection .data-table td:nth-child(1)::before { content: "Người dùng" !important; }
  #adminShell #usersSection .data-table td:nth-child(2)::before { content: "Email" !important; }
  #adminShell #usersSection .data-table td:nth-child(3)::before { content: "Vai trò" !important; }
  #adminShell #usersSection .data-table td:nth-child(4)::before { content: "Trạng thái" !important; }
  #adminShell #usersSection .data-table td:nth-child(5)::before { content: "Số dư ví" !important; }
  #adminShell #usersSection .data-table td:nth-child(6)::before { content: "Ngày tạo" !important; }
  #adminShell #usersSection .data-table td:nth-child(7)::before { content: "Thao tác" !important; }

  #adminShell #bankProfilesSection .data-table td:nth-child(1)::before { content: "Mã hồ sơ" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(2)::before { content: "Người dùng" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(3)::before { content: "Ngân hàng" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(4)::before { content: "Số tài khoản" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(5)::before { content: "Chủ tài khoản" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(6)::before { content: "Hạn mức/ngày" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(7)::before { content: "Bank Token" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(8)::before { content: "Trạng thái" !important; }
  #adminShell #bankProfilesSection .data-table td:nth-child(9)::before { content: "Thao tác" !important; }

  #adminShell #walletsSection .data-table td:nth-child(1)::before { content: "Người dùng" !important; }
  #adminShell #walletsSection .data-table td:nth-child(2)::before { content: "Vai trò" !important; }
  #adminShell #walletsSection .data-table td:nth-child(3)::before { content: "Số dư ví" !important; }
  #adminShell #walletsSection .data-table td:nth-child(4)::before { content: "Ví rút tiền" !important; }
  #adminShell #walletsSection .data-table td:nth-child(5)::before { content: "Thao tác" !important; }

  #adminShell #withdrawsSection .data-table td:nth-child(1)::before { content: "Mã rút" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(2)::before { content: "Người dùng" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(3)::before { content: "Ví nhận tiền" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(4)::before { content: "Telegram" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(5)::before { content: "Số tiền" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(6)::before { content: "Trạng thái" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(7)::before { content: "Giao dịch" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(8)::before { content: "Ngày tạo" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(9)::before { content: "Cập nhật cuối" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(10)::before { content: "Ghi chú lỗi" !important; }
  #adminShell #withdrawsSection .data-table td:nth-child(11)::before { content: "Thao tác" !important; }
}


/* Sidebar inner geometry hard lock: same footprint on dashboard/service/bank/admin */
:root {
  --hh-sidebar-pad-x: 14px !important;
  --hh-sidebar-pad-y: 24px !important;
  --hh-sidebar-brand-h: 48px !important;
  --hh-sidebar-brand-gap: 16px !important;
  --hh-sidebar-link-w: calc(var(--hh-sidebar-width) - (var(--hh-sidebar-pad-x) * 2)) !important;
}

.dashboard-sidebar,
.page-sidebar.dashboard-sidebar {
  padding: var(--hh-sidebar-pad-y) var(--hh-sidebar-pad-x) !important;
}

.dashboard-sidebar .sidebar-brand,
.dashboard-sidebar .page-brand,
.dashboard-sidebar .sidebar-brand .brand {
  height: var(--hh-sidebar-brand-h) !important;
  min-height: var(--hh-sidebar-brand-h) !important;
  max-height: var(--hh-sidebar-brand-h) !important;
  margin: 0 0 var(--hh-sidebar-brand-gap) !important;
  padding: 0 !important;
}

.dashboard-sidebar .sidebar-brand .brand {
  margin: 0 !important;
}

.dashboard-sidebar .brand-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
}

.page-nav.sidebar-nav:not([hidden]) {
  width: var(--hh-sidebar-link-w) !important;
  min-width: var(--hh-sidebar-link-w) !important;
  max-width: var(--hh-sidebar-link-w) !important;
}

.page-nav.sidebar-nav > .sidebar-link,
.page-nav.sidebar-nav > .sidebar-group,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
  width: var(--hh-sidebar-link-w) !important;
  min-width: var(--hh-sidebar-link-w) !important;
  max-width: var(--hh-sidebar-link-w) !important;
}

.page-nav.sidebar-nav > .sidebar-link,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
  min-height: var(--hh-sidebar-item) !important;
  height: var(--hh-sidebar-item) !important;
  padding: 0 12px !important;
}

@media (min-width: 961px) {
  .dashboard-shell.is-sidebar-collapsed .dashboard-sidebar,
  .dashboard-shell.is-sidebar-collapsed .page-sidebar.dashboard-sidebar {
    padding-inline: 14px !important;
  }

  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav:not([hidden]),
  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-link,
  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-group,
  .dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
}

@media (max-width: 960px) {
  :root {
    --hh-sidebar-link-w: calc(var(--hh-sidebar-drawer) - 28px) !important;
  }

  .dashboard-sidebar,
  .page-sidebar.dashboard-sidebar {
    padding: 24px 14px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --hh-sidebar-link-w: calc(min(292px, 88vw) - 24px) !important;
  }

  .dashboard-sidebar,
  .page-sidebar.dashboard-sidebar {
    padding-inline: 12px !important;
  }
}


/* Hallmark content layout pass: prevent app-shell horizontal overflow */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

.dashboard-shell,
.page-shell.dashboard-shell,
.dashboard-main,
.page-main.dashboard-main,
.page-content,
.page-main.dashboard-main > .page-content {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dashboard-shell,
.page-shell.dashboard-shell {
  width: 100% !important;
  overflow-x: clip !important;
}

.dashboard-main,
.page-main.dashboard-main {
  width: 100% !important;
  overflow-x: clip !important;
}

.dashboard-header,
.page-header.dashboard-header,
.page-content,
.page-main.dashboard-main > .page-content,
.page-card,
.service-card,
.service-stat-card,
.service-analytics-card,
.deposit-merged-section,
.deposit-history-section,
.bank-orders-board,
.bank-manage-board,
.admin-card,
.withdraw-summary-card,
.withdraw-panel,
.withdraw-history-card,
.withdraw-workspace-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.page-grid-2,
.form-grid,
.service-summary-grid,
.feature-grid,
.deposit-grid,
.admin-stats-grid,
.bank-manage-grid {
  min-width: 0 !important;
  max-width: 100% !important;
}

.summary-tile {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--hh-line) !important;
  border-radius: var(--hh-radius-md) !important;
  background: var(--hh-surface-2) !important;
  box-shadow: none !important;
  color: var(--hh-text) !important;
}

.summary-tile p {
  margin: 0 0 8px !important;
  color: var(--hh-muted) !important;
}

.summary-tile strong {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  font-variant-numeric: tabular-nums !important;
}

.table-scroll,
.table-responsive,
.data-table-wrap,
.service-daily-table-wrap,
.service-month-bars-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
}

.table-scroll > table,
.table-responsive > table,
.data-table-wrap > table,
.service-daily-table-wrap > table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

.page-card > table.data-table,
.page-card > table.deposit-table,
.page-card > table.service-daily-table,
.page-card > table.service-card-fee-table,
.page-card > table.service-card-history-table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}

.data-table,
.deposit-table,
.service-daily-table,
.service-card-fee-table,
.service-card-history-table {
  font-variant-numeric: tabular-nums !important;
}

.service-month-chart,
.service-chart-visual,
.service-month-bars-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 961px) {
  .page-main.dashboard-main > .page-content,
  .page-content {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 960px) {
  .dashboard-main,
  .page-main.dashboard-main {
    overflow-x: clip !important;
  }
}



/* Header account chip: username only */
.account-toggle #headerEmail {
  display: none !important;
}

.account-toggle strong {
  max-width: 24ch;
}


/* Mobile account chip: fit username content */
@media (max-width: 960px) {
  .account-menu {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 92px) !important;
  }

  .account-toggle {
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .account-toggle > span:not(.account-avatar) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .account-toggle strong {
    max-width: min(44vw, 18ch) !important;
  }
}


/* Admin section tables: show all information without horizontal scroll */
#adminShell #usersSection .table-scroll,
#adminShell #bankProfilesSection .table-scroll,
#adminShell #withdrawsSection .table-scroll {
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-gutter: auto !important;
}

#adminShell #usersSection .table-scroll > .data-table,
#adminShell #bankProfilesSection .table-scroll > .data-table,
#adminShell #withdrawsSection .table-scroll > .data-table,
#adminShell #usersSection .data-table,
#adminShell #bankProfilesSection .data-table,
#adminShell #withdrawsSection .data-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

#adminShell #usersSection .data-table th,
#adminShell #usersSection .data-table td,
#adminShell #bankProfilesSection .data-table th,
#adminShell #bankProfilesSection .data-table td,
#adminShell #withdrawsSection .data-table th,
#adminShell #withdrawsSection .data-table td {
  padding-inline: 8px !important;
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.82rem) !important;
  line-height: 1.32 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#adminShell #usersSection .data-table th:nth-child(1) { width: 14%; }
#adminShell #usersSection .data-table th:nth-child(2) { width: 18%; }
#adminShell #usersSection .data-table th:nth-child(3) { width: 14%; }
#adminShell #usersSection .data-table th:nth-child(4) { width: 10%; }
#adminShell #usersSection .data-table th:nth-child(5) { width: 12%; }
#adminShell #usersSection .data-table th:nth-child(6) { width: 12%; }
#adminShell #usersSection .data-table th:nth-child(7) { width: 20%; }

#adminShell #bankProfilesSection .data-table th:nth-child(1) { width: 9%; }
#adminShell #bankProfilesSection .data-table th:nth-child(2) { width: 10%; }
#adminShell #bankProfilesSection .data-table th:nth-child(3) { width: 11%; }
#adminShell #bankProfilesSection .data-table th:nth-child(4) { width: 12%; }
#adminShell #bankProfilesSection .data-table th:nth-child(5) { width: 12%; }
#adminShell #bankProfilesSection .data-table th:nth-child(6) { width: 10%; }
#adminShell #bankProfilesSection .data-table th:nth-child(7) { width: 16%; }
#adminShell #bankProfilesSection .data-table th:nth-child(8) { width: 9%; }
#adminShell #bankProfilesSection .data-table th:nth-child(9) { width: 11%; }

#adminShell #withdrawsSection .data-table th:nth-child(1) { width: 8%; }
#adminShell #withdrawsSection .data-table th:nth-child(2) { width: 9%; }
#adminShell #withdrawsSection .data-table th:nth-child(3) { width: 13%; }
#adminShell #withdrawsSection .data-table th:nth-child(4) { width: 8%; }
#adminShell #withdrawsSection .data-table th:nth-child(5) { width: 8%; }
#adminShell #withdrawsSection .data-table th:nth-child(6) { width: 9%; }
#adminShell #withdrawsSection .data-table th:nth-child(7) { width: 12%; }
#adminShell #withdrawsSection .data-table th:nth-child(8) { width: 8%; }
#adminShell #withdrawsSection .data-table th:nth-child(9) { width: 8%; }
#adminShell #withdrawsSection .data-table th:nth-child(10) { width: 9%; }
#adminShell #withdrawsSection .data-table th:nth-child(11) { width: 8%; }

#adminShell #usersSection .admin-user-actions,
#adminShell #bankProfilesSection .profile-action-row,
#adminShell #withdrawsSection .admin-withdraw-actions,
#adminShell #withdrawsSection .withdraw-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#adminShell #usersSection .admin-action-button,
#adminShell #bankProfilesSection .admin-action-button,
#adminShell #withdrawsSection .admin-action-button,
#adminShell #withdrawsSection button {
  white-space: normal !important;
  min-width: 0 !important;
}

#adminShell #usersSection .admin-inline-input,
#adminShell #bankProfilesSection .admin-inline-input,
#adminShell #withdrawsSection .admin-inline-input,
#adminShell #bankProfilesSection input,
#adminShell #bankProfilesSection select,
#adminShell #withdrawsSection input,
#adminShell #withdrawsSection select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 960px) {
  #adminShell #usersSection .table-scroll,
  #adminShell #bankProfilesSection .table-scroll,
  #adminShell #withdrawsSection .table-scroll {
    overflow: visible !important;
  }

  #adminShell #usersSection .data-table,
  #adminShell #usersSection .data-table tbody,
  #adminShell #usersSection .data-table tr,
  #adminShell #usersSection .data-table td,
  #adminShell #bankProfilesSection .data-table,
  #adminShell #bankProfilesSection .data-table tbody,
  #adminShell #bankProfilesSection .data-table tr,
  #adminShell #bankProfilesSection .data-table td,
  #adminShell #withdrawsSection .data-table,
  #adminShell #withdrawsSection .data-table tbody,
  #adminShell #withdrawsSection .data-table tr,
  #adminShell #withdrawsSection .data-table td {
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* Admin no-scroll table inner controls */
#adminShell #bankProfilesSection .admin-token-editor,
#adminShell #bankProfilesSection .admin-action-stack,
#adminShell #withdrawsSection .admin-action-stack,
#adminShell #usersSection .admin-action-stack {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#adminShell #bankProfilesSection .admin-token-editor > *,
#adminShell #bankProfilesSection .admin-action-stack > *,
#adminShell #withdrawsSection .admin-action-stack > *,
#adminShell #usersSection .admin-action-stack > * {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* Admin users table: 9 rendered columns */
#adminShell #usersSection .data-table th:nth-child(1) { width: 11% !important; }
#adminShell #usersSection .data-table th:nth-child(2) { width: 15% !important; }
#adminShell #usersSection .data-table th:nth-child(3) { width: 9% !important; }
#adminShell #usersSection .data-table th:nth-child(4) { width: 8% !important; }
#adminShell #usersSection .data-table th:nth-child(5) { width: 14% !important; }
#adminShell #usersSection .data-table th:nth-child(6) { width: 11% !important; }
#adminShell #usersSection .data-table th:nth-child(7) { width: 9% !important; }
#adminShell #usersSection .data-table th:nth-child(8) { width: 10% !important; }
#adminShell #usersSection .data-table th:nth-child(9) { width: 13% !important; }

#adminShell #usersSection .admin-user-setting small,
#adminShell #usersSection .wallet-value,
#adminShell #usersSection .admin-balance-value,
#adminShell #usersSection .admin-user-actions {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  #adminShell #usersSection .data-table td:nth-child(1)::before { content: "Ng\0001b0\001eddi d\0000f9ng" !important; }
  #adminShell #usersSection .data-table td:nth-child(2)::before { content: "Email" !important; }
  #adminShell #usersSection .data-table td:nth-child(3)::before { content: "Lo\001ea1i TK" !important; }
  #adminShell #usersSection .data-table td:nth-child(4)::before { content: "Vai tr\0000f2" !important; }
  #adminShell #usersSection .data-table td:nth-child(5)::before { content: "Ph\0000ed/Hoa h\001ed3ng" !important; }
  #adminShell #usersSection .data-table td:nth-child(6)::before { content: "S\001ed1\20 d\0001b0\20 v\0000ed" !important; }
  #adminShell #usersSection .data-table td:nth-child(7)::before { content: "Tr\001ea1ng th\0000e1i" !important; }
  #adminShell #usersSection .data-table td:nth-child(8)::before { content: "Ng\0000e0y t\001ea1o" !important; }
  #adminShell #usersSection .data-table td:nth-child(9)::before { content: "Thao t\0000e1c" !important; }
}



/* Unified sidebar geometry 20260803 */
.page-nav.sidebar-nav:not([hidden]) {
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
}

.page-nav.sidebar-nav > .sidebar-link,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
  height: var(--hh-sidebar-item) !important;
  min-height: var(--hh-sidebar-item) !important;
  max-height: var(--hh-sidebar-item) !important;
  display: grid !important;
  grid-template-columns: var(--hh-sidebar-icon) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 8px !important;
}

.page-nav.sidebar-nav > .sidebar-link .menu-icon,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head .menu-icon {
  grid-column: 1 !important;
}

.page-nav.sidebar-nav > .sidebar-link .sidebar-label,
.page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head .sidebar-label {
  grid-column: 2 !important;
}

.page-nav.sidebar-nav .sidebar-arrow {
  grid-column: 3 !important;
  justify-self: end !important;
  width: 16px !important;
  text-align: center !important;
}

.dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-link,
.dashboard-shell.is-sidebar-collapsed .page-nav.sidebar-nav > .sidebar-group > .sidebar-group-head {
  grid-template-columns: var(--hh-sidebar-icon) !important;
  justify-content: center !important;
}

/* Landing H1 one-line desktop 20260803 */
@media (min-width: 1024px) {
  .hero-copy {
    max-width: 1180px !important;
  }

  .hero-copy h1 {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: clamp(2.8rem, 4.2vw, 3.45rem) !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 1023px) {
  .hero-copy h1 {
    white-space: normal !important;
  }
}