/* =========================================================
   Fluid scale — font / spacing / control size theo --ui-scale
   1rem = 16px × --ui-scale (JS đặt html font-size).
   Không dùng transform/zoom trên html (tránh lệch overlay iOS).
   ========================================================= */

:root {
  --ui-scale: 1;
  --fs-xs: 0.625rem;     /* 10px */
  --fs-sm: 0.6875rem;    /* 11px */
  --fs: 0.8125rem;       /* 13px */
  --fs-md: 0.875rem;     /* 14px */
  --fs-lg: 1rem;         /* 16px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --control-h: 2.5rem;
  --icon: 1.25rem;
  --tap: 2.75rem;
  --sidebar-w: 15rem;
  --sidebar-collapsed: 5rem;
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --font-size: 0.875rem;
}

html {
  font-size: calc(16px * var(--ui-scale, 1));
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}
#app {
  max-width: 100%;
}
.content {
  min-width: 0;
  overflow-x: hidden;
}

body {
  font-size: var(--font-size);
}

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

/* ---------- Shell ---------- */
aside.app-sidebar,
.app-sidebar {
  width: var(--sidebar-w) !important;
  max-width: var(--sidebar-w);
  padding: 1rem 0.75rem;
}
.brand {
  gap: 0.75rem;
  padding: 0.625rem 0.625rem 1rem;
}
.brand-mark,
.brand > span {
  flex-basis: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem !important;
}
.brand-mark .material-symbols-outlined {
  font-size: 1.375rem;
}
.brand-text b,
.user-text b {
  font-size: var(--fs) !important;
}
.brand-text small,
.user-text small {
  font-size: var(--fs-sm) !important;
}
.nav-section-label {
  margin: 0.25rem 0.75rem 0.5rem;
  font-size: var(--fs-xs) !important;
}
.app-sidebar nav {
  gap: 0.25rem;
}
.app-sidebar nav button {
  gap: 0.6875rem;
  padding: 0.6875rem 0.75rem;
  font-size: 0.84375rem !important;
  border-radius: 0.75rem;
}
.app-sidebar nav button .nav-icon,
.app-sidebar nav button i {
  flex-basis: 2.125rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  font-size: 1.25rem !important;
}
.user {
  gap: 0.625rem;
  padding: 0.875rem 0.625rem 0.375rem;
}
.user-avatar,
.user > span {
  width: 2.25rem;
  height: 2.25rem;
  flex-basis: 2.25rem;
  font-size: var(--fs-sm) !important;
}

.content {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  padding: 1.5rem 1.75rem 3rem;
}

.content > header,
.page-header {
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.125rem !important;
  gap: 1rem;
  border-radius: var(--radius-lg);
}
.page-header-text p,
.content > header p,
header p {
  font-size: var(--fs) !important;
}

/* ---------- Buttons / chips ---------- */
.primary,
button.primary,
.excel-btn,
.paste,
.entity-btn,
.excel-upload-btn,
.drive-upload-btn,
.f1-upload-btn,
.ghost-btn,
.row-edit-btn,
.auth-submit {
  gap: 0.4375rem;
  padding: 0.625rem 1rem !important;
  font-size: var(--fs) !important;
  border-radius: var(--radius) !important;
  min-height: var(--control-h);
}
.primary .material-symbols-outlined,
.excel-btn .material-symbols-outlined,
.excel-upload-btn .material-symbols-outlined {
  font-size: 1.125rem !important;
}
.dash-chip,
.dash-chip.flight-win {
  padding: 0.5rem 0.75rem !important;
  font-size: var(--fs-sm) !important;
  border-radius: 0.5rem !important;
}

/* ---------- Inputs ---------- */
.form-grid input,
.form-grid select,
.form-grid textarea,
.auth-form input,
.auth-form select {
  font-size: var(--fs-md);
  min-height: var(--control-h);
  padding: 0.625rem 0.75rem !important;
  border-radius: 0.625rem !important;
}
textarea,
.form-grid textarea {
  min-height: 3.5rem;
}
.form-grid label,
.posting-fields label {
  font-size: var(--fs-sm) !important;
}

/* ---------- KPI / cards ---------- */
.metric-card,
.dash-kpi,
.cards > .metric-card,
.ledger-summary > .metric-card,
.dash-debt-strip > .metric-card {
  padding: 0.625rem 0.75rem 0.5625rem !important;
  border-radius: 0.75rem !important;
}
.metric-card-label {
  font-size: var(--fs-xs) !important;
}
.metric-card-icon {
  flex-basis: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
}
.metric-card-icon .material-symbols-outlined {
  font-size: 1rem !important;
}
.metric-card-value {
  margin: 0.375rem 0 0.1875rem !important;
  font-size: 1.05rem !important;
}
.metric-card-meta {
  font-size: 0.65625rem !important;
}
.metric-card-hint {
  font-size: var(--fs-xs) !important;
}
.dash-kpis,
.dash-debt-strip,
.cards,
.ledger-summary,
.report-kpis,
.ops-owner-grid {
  gap: 0.75rem;
}

.dash-panel,
.panel,
.ledger-panel {
  border-radius: 0.875rem !important;
}
.dash-panel-head,
.bsv-panel-head {
  padding: 0.9375rem 1.125rem !important;
  gap: 0.75rem;
}
.dash-panel-head h3 {
  font-size: 0.875rem !important;
}
.dash-panel-head p {
  font-size: var(--fs-sm) !important;
}

/* ---------- Tables ---------- */
.dash-table,
table {
  font-size: 0.75rem;
}
th {
  font-size: var(--fs-sm) !important;
  padding: 0.625rem 0.75rem !important;
}
td, th {
  padding: 0.625rem 0.75rem !important;
}
.dash-table td small,
.dash-recent-item small {
  font-size: var(--fs-xs) !important;
}
.ticket-table-wrap,
.report-table-wrap,
.pay-history-table-wrap,
.bsv-table-desktop,
.dash-table-wrap,
.f1-preview-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- Modals: head + body cuộn + footer cố định, không đè field ---------- */
.modal {
  z-index: 8000;
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: contain;
}
.modal form,
.modal > section,
.ledger-detail-modal > section,
.f1-import-modal > section,
.booking-modal form {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: min(46rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(94vh, calc(100dvh - 24px)) !important;
  overflow: hidden !important;
  border-radius: 1.125rem !important;
  padding-bottom: 5.75rem !important;
}
.modal-head {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
  padding: 1rem 1.25rem !important;
  z-index: 2;
}
.modal-head h2 {
  font-size: 1.0625rem !important;
  padding-right: 2.5rem;
}
.modal-head button {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 36px;
  min-height: 36px;
  font-size: 1.25rem;
  border-radius: 0.625rem !important;
  flex: 0 0 auto;
}
.modal form > .form-grid,
.modal form > .ops-form,
.modal form > .booking-body,
.modal form > .f1-import-body,
.modal > section > .form-grid,
.ledger-detail-modal > section > .ld-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  contain: paint;
  clip-path: inset(0);
  padding-bottom: 5.5rem !important;
}
.modal form:not(:has(.form-grid)):not(:has(.ops-form)):not(:has(.booking-body)):not(:has(.f1-import-body)) {
  overflow-y: auto !important;
}
.modal form,
.modal > section {
  position: relative !important;
}
.modal-actions {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem !important;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.625rem !important;
  margin-top: 0 !important;
  background: #fff !important;
  box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.08);
  z-index: 50 !important;
}
.modal-actions button,
.modal-actions .primary {
  min-height: 42px;
}

.partner-search-menu,
.source-search .partner-search-menu,
.ca-agent-menu,
.pl-search-menu {
  z-index: 9000;
  max-height: min(240px, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  left: 0;
  right: 0;
}

/* ---------- Ops / task ---------- */
.ops-task {
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
}
.ops-task-main b { font-size: 0.875rem; }
.ops-task-main small { font-size: 0.75rem; }
.ops-task-kind { font-size: var(--fs-sm); }
.ops-inbox-filters { gap: 0.5rem; padding: 0 1rem 0.75rem; }

/* ---------- Material icons ---------- */
.material-symbols-outlined {
  font-size: var(--icon);
}

/* ---------- Login / auth ---------- */
.auth-screen {
  padding: 1.5rem 1rem;
}
.auth-card {
  width: min(26.25rem, 100%);
  padding: 1.75rem 1.625rem 1.375rem;
  border-radius: 1.25rem;
}
.auth-brand {
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 0.875rem;
}
.auth-brand-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  font-size: 1.5rem !important;
}
.auth-brand b { font-size: 0.9375rem; }
.auth-brand p { font-size: 0.75rem; }
.auth-card h1 { font-size: 1.375rem; }
.auth-lead { font-size: 0.8125rem; margin: 0 0 1rem; }
.auth-error {
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: 0.75rem;
}
.auth-form { gap: 0.75rem; }
.auth-form label { gap: 0.375rem; font-size: 0.75rem; }
.auth-form input,
.auth-form select {
  padding: 0.75rem 0.875rem !important;
  font-size: 0.9375rem !important;
  min-height: 3rem;
  border-radius: 0.75rem !important;
}
.auth-submit {
  padding: 0.8125rem 1rem !important;
  font-size: 0.9375rem !important;
  min-height: 3rem;
  border-radius: 0.75rem !important;
}
.auth-foot { margin: 1rem 0 0; font-size: 0.71875rem; }

/* ---------- Boot ---------- */
.boot-loader {
  gap: 0.75rem;
  padding: 1.75rem 2.25rem;
}
.boot-loader .boot-icon {
  font-size: 2.125rem;
  width: 4rem;
  height: 4rem;
  border-radius: 1.125rem;
}
.boot-loader p { font-size: var(--fs) !important; }

/* ---------- Grid auto-balance ---------- */
.auto-balanced-grid {
  grid-template-columns: repeat(var(--balanced-cols, 1), minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
  :root { --sidebar-w: 5rem; }
  aside.app-sidebar,
  .app-sidebar {
    width: var(--sidebar-w) !important;
    max-width: var(--sidebar-w);
    padding: 0.875rem 0.625rem;
  }
  .content {
    margin-left: var(--sidebar-w) !important;
    width: calc(100% - var(--sidebar-w)) !important;
    max-width: none;
    padding: 1.25rem;
  }
}

@media (max-width: 720px) {
  :root { --sidebar-w: 0px; }
  html, body { overflow-x: hidden; }
  .content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0.75rem 0.75rem 2rem !important;
  }
  .page-header,
  .content > header {
    padding: 0.75rem 0.875rem !important;
    gap: 0.625rem;
  }
  .nav-menu-btn {
    flex-basis: var(--tap) !important;
    width: var(--tap) !important;
    height: var(--tap) !important;
    min-width: 44px;
    min-height: 44px;
    border-radius: 0.75rem;
  }
  .nav-menu-btn .material-symbols-outlined {
    font-size: 1.5rem;
  }
  .mnav-bar {
    padding: 0.875rem 0.875rem 0.625rem;
    padding-top: calc(0.875rem + env(safe-area-inset-top, 0px));
  }
  .mnav-brand b { font-size: max(15px, 0.9375rem); }
  .mnav-brand small { font-size: max(11px, 0.6875rem); }
  .mnav-x {
    width: max(44px, var(--tap));
    height: max(44px, var(--tap));
    flex-basis: max(44px, var(--tap));
    border-radius: 0.75rem;
  }
  .mnav-x .material-symbols-outlined { font-size: 1.375rem; }
  .mnav-item {
    min-height: max(52px, 3.25rem);
    padding: 0.625rem 0.75rem;
    margin: 0.25rem 0;
    font-size: max(16px, 1rem);
    gap: 0.75rem;
    border-radius: 0.75rem;
  }
  .mnav-item .nav-icon,
  .mnav-item .material-symbols-outlined {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    border-radius: 0.625rem;
  }
  .header-actions > * {
    min-height: var(--control-h);
  }
  .primary,
  button.primary,
  .excel-btn,
  .paste,
  .entity-btn {
    min-height: max(40px, var(--control-h));
  }
  .modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal form,
  .modal > section,
  .ledger-detail-modal > section,
  .f1-import-modal > section,
  .booking-modal form,
  .cost-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-head {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
  }
  .modal-head button {
    width: 44px !important;
    height: 44px !important;
  }
  .modal-actions {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .modal-actions button,
  .modal-actions .primary {
    flex: 1 1 140px;
    min-height: 44px;
  }
  .form-grid,
  .f1-source-picker,
  .ca-import-pick,
  .import-fields,
  .ticket-contact-row,
  .ncc-bank-grid,
  .expense-fields,
  .expense-fields.four,
  .posting-fields,
  .posting-fields-step,
  .cash-source-chips,
  .cash-source-chips.three,
  .ld-opening,
  .opening-inline,
  .room-bank-form-grid,
  .detail-balance,
  .operation-result {
    grid-template-columns: 1fr !important;
  }
  .ticket-contact-row { gap: 10px !important; }
  input, select, textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .auth-form input,
  .auth-form select {
    font-size: 16px !important;
    max-width: 100%;
  }
  .dash-toolbar,
  .ledger-toolbar,
  .ticket-filterbar,
  .header-actions,
  .ops-inbox-filters,
  .dash-flight-head-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .dash-chip,
  .ticket-filterbar .dash-chip {
    min-height: 40px;
  }
}

@media (max-width: 700px) {
  .header-actions { width: 100%; }
  .header-actions > * { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
  .content { padding: 0.5rem 0.5rem 1.75rem !important; }
  .page-header,
  .content > header { padding: 0.625rem 0.75rem !important; }
}

@media (min-width: 1600px) {
  .content { padding: 1.75rem 2.25rem 3.5rem; }
}

@media (min-width: 1920px) {
  .content { padding: 2rem 2.75rem 4rem; }
}

/* ---------- Layout lock: không tràn, không đè, lưới gọn ---------- */
.page-header,
.content > header,
.dash-toolbar,
.ledger-toolbar,
.ticket-filterbar,
.header-actions,
.ops-inbox-filters {
  min-width: 0;
  max-width: 100%;
}
.header-actions,
.dash-quick,
.dash-filters,
.ticket-period-chips {
  flex-wrap: wrap;
  min-width: 0;
}
button, .primary, .excel-btn, .paste, .dash-chip {
  max-width: 100%;
  white-space: nowrap;
}
@media (max-width: 720px) {
  button.primary, .excel-btn, .paste, .entity-btn, .header-actions > * {
    white-space: nowrap;
  }
}

table { max-width: 100%; }
.ticket-table-wrap,
.report-table-wrap,
.pay-history-table-wrap,
.bsv-table-desktop,
.dash-table-wrap,
.f1-preview-table,
.ld-table-wrap,
.pl-table-wrap,
.ledger-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 701px) and (max-width: 1100px) {
  .metric-card-grid:has(> :nth-child(3):last-child),
  .dash-kpis.three,
  .ops-owner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .import-fields,
  .ticket-contact-row,
  .ncc-bank-grid,
  .expense-fields.four {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .ld-kpis.detail-balance,
  .ld-kpis.ld-kpis-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .ld-opening,
  .opening-inline,
  .posting-fields-step,
  .detail-balance,
  .operation-result {
    grid-template-columns: 1fr !important;
  }
  .f1-import-modal > section,
  .ledger-detail-modal > section {
    width: min(100vw - 1rem, 1120px) !important;
  }
}

@media (max-width: 700px) {
  .cards,
  .dash-kpis,
  .dash-kpis.three,
  .dash-debt-strip,
  .report-kpis,
  .ledger-summary,
  .ops-owner-grid,
  .metric-card-grid,
  .metric-card-grid:has(> :nth-child(3):last-child),
  .auto-balanced-grid,
  .import-fields,
  .ticket-contact-row,
  .ncc-bank-grid,
  .expense-fields,
  .f1-import-summary,
  .bsv-summary {
    grid-template-columns: 1fr !important;
  }
}

.mnav { z-index: 10000; }

.lotus-tool-tabs,
.ledger-detail-tabs {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}
.lotus-tool-tabs > *,
.ledger-detail-tabs > * {
  flex: 0 0 auto;
  white-space: nowrap;
}
.report-type-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  width: 100%;
  max-width: 100%;
}
.audit-table-wrap {
  overflow-x: auto !important;
  max-width: 100%;
  width: 100%;
}

.modal,
.ledger-detail-modal,
.transaction-edit-modal,
.payment-edit-modal,
.f1-import-modal,
.ops-modal,
.bsv-card-modal,
.catalog-modal,
.partner-add-modal {
  z-index: 8500 !important;
}

.ld-hero { position: relative; }
.ld-close {
  position: absolute !important;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}
.ld-hero-main { padding-right: 52px; min-width: 0; }
.ld-hero-text { min-width: 0; }
.ld-hero-text h2 { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .modal {
    padding: 0 !important;
    align-items: stretch !important;
    place-items: stretch !important;
  }
  .modal form,
  .modal > section,
  .ledger-detail-modal > section,
  .ledger-detail-modal > section.ld-shell,
  .f1-import-modal > section,
  .booking-modal form,
  .cost-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-bottom: 7.5rem !important;
  }
}

@media (max-width: 720px) {
  .ld-kpis.detail-balance,
  .ld-kpis.ld-kpis-4,
  .detail-balance {
    grid-template-columns: 1fr 1fr !important;
    margin: 12px !important;
  }
  .ld-hero {
    flex-wrap: wrap;
    padding: 14px 14px 16px !important;
  }
  .ld-avatar { width: 44px; height: 44px; border-radius: 12px; }
  .ld-hero-text h2 { font-size: 1.15rem !important; }
  .scan-preview,
  .paste-zone,
  .paste-zone.has-image,
  .box-title {
    grid-template-columns: 1fr !important;
  }
  .box-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cost-summary,
  .posting-preview,
  .operation-result,
  .import-source-calc {
    grid-template-columns: 1fr !important;
  }
}

.payment-live .demo-banner,
.bsv-live-banner,
.ld-dual-banner {
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.payment-live .demo-banner p { max-width: 100%; }
@media (max-width: 720px) {
  .payment-live .demo-banner,
  .bsv-live-banner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .payment-live .demo-banner > *,
  .bsv-live-banner > * {
    width: 100%;
    max-width: 100%;
  }
  .payment-live .demo-banner button,
  .payment-live .demo-banner label,
  .payment-live .pay-file-btn {
    width: 100%;
    justify-content: center;
  }
  .dash-panel-head,
  .bsv-panel-head,
  .ledger-toolbar,
  .page-header,
  .content > header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dash-panel-head > div,
  .dash-flight-head-actions,
  .header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .dash-panel-head button,
  .dash-flight-head-actions button,
  .header-actions button {
    flex: 1 1 auto;
  }
  .modal-head {
    position: relative !important;
    padding-right: 3.5rem !important;
    align-items: flex-start !important;
  }
  .modal-head-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    gap: 4px;
  }
  .modal-head-tools .entity-save-top {
    display: none !important;
  }
  .modal-head > button[data-close-modal],
  .modal-head > button:last-of-type {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .catalog-modal h2,
  .partner-add-modal h2,
  .modal-head h2 {
    padding-right: 0.5rem;
    overflow-wrap: anywhere;
  }
  .entity-contact-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .entity-contact-head small { white-space: nowrap; }
  .entity-contact-grid {
    grid-template-columns: 1fr !important;
  }
  .lotus-tool-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .lotus-tool-tabs button {
    flex: 1 1 auto;
    justify-content: center;
  }
  .modal form,
  .modal > section,
  .booking-modal form,
  .ledger-detail-modal > section {
    padding-bottom: 10.5rem !important;
  }
  .report-type-tab {
    flex: 1 1 28%;
  }
  .audit-table {
    min-width: 0 !important;
    width: 100%;
  }
  .audit-table th,
  .audit-table td {
    white-space: normal !important;
  }
}