/* Shared responsive layer for AI-Agent pages.
   Loaded last, so it intentionally overrides local page styles. */

* { box-sizing: border-box; }
:root,
body[data-theme="light"] {
  --bg: #F4F8FE;
  --surface: #FFFFFF;
  --panel: var(--surface);
  --bg-card: var(--surface);
  --bg-soft: #F4F8FE;
  --panel-soft: #F4F8FE;
  --line: #E3EBF6;
  --border: var(--line);
  --line-strong: #C9D8EC;
  --border-strong: var(--line-strong);
  --text: #0E1B33;
  --ink: var(--text);
  --muted: #5B6B85;
  --text-dim: var(--muted);
  --ink-soft: var(--muted);
  --text-faint: #93A1B8;
  --ink-faint: var(--text-faint);
  --accent: #2563EB;
  --accent-2: #0E9F6E;
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --blue-soft: #EAF1FF;
  --blue-text: var(--blue);
  --violet: #6D4AED;
  --purple: var(--violet);
  --purple-soft: #F4F0FF;
  --grad: linear-gradient(95deg, #2563EB, #6D4AED);
  --green: #0E9F6E;
  --green-soft: #E6F7F0;
  --green-text: var(--green);
  --yellow: #B45309;
  --warn: #B45309;
  --amber: #B45309;
  --amber-soft: #FEF3E2;
  --orange: #B45309;
  --orange-soft: #FEF3E2;
  --orange-text: #B45309;
  --red: #EF4444;
  --red-soft: #FEE2E2;
  --red-text: #B91C1C;
  --shadow-sm: 0 1px 2px rgba(14, 27, 51, .04);
  --shadow: 0 1px 2px rgba(14, 27, 51, .04), 0 8px 24px -12px rgba(37, 99, 235, .12);
  --shadow-md: 0 8px 26px -12px rgba(37, 99, 235, .18);
}
html { width: 100%; overflow-x: hidden; background: var(--bg, #F4F8FE); }
body { width: 100%; max-width: 100vw; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; font: inherit; }

.app, .content, .panel, .card, .modal, .toolbar, .topbar,
.topbar-actions, .actions, .filters, .table-toolbar, .section-title {
  min-width: 0;
}
.content { max-width: 100%; }

.r-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  contain: inline-size;
  overscroll-behavior-x: contain;
}
.r-table-scroll > table { margin: 0; }

.menu-toggle,
.r-menu-toggle { display: none; }

@media (min-width: 921px) {
  body.r-zoomed-layout {
    max-width: none;
  }

  body.r-zoomed-layout .app {
    width: calc(100vw / 0.85);
  }
}

@media (max-width: 1100px) {
  .content { padding-left: 14px !important; padding-right: 14px !important; }

  .topbar, .toolbar, .topbar-actions, .filters, .table-toolbar,
  .actions, .section-title, .docs-card .head {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
  }

  .kpi-grid, .finance-grid, .plan-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dc-grid3, .dc-grid4, .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  body { zoom: 1 !important; min-height: 100vh !important; }

  .app {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-height: 100vh !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 264px !important;
    max-width: 84vw !important;
    z-index: 1200 !important;
    transform: translateX(-100%) !important;
    transition: transform .2s ease-out !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 24px rgba(15, 22, 40, .2) !important;
  }
  body.sidebar-open .sidebar { transform: translateX(0) !important; }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 40, .45);
    z-index: 1100;
  }
  body.sidebar-open .sidebar-backdrop { display: block !important; }

  .menu-toggle,
  .r-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .content {
    padding: 12px !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  body.has-floating-toggle .content { padding-top: 58px !important; }

  .grid-3, .grid-2, .row-2, .mini-grid, .work-row, .parties,
  .dc-grid2, .dc-grid3, .dc-grid4, .upload-grid, .two-col, .cols-2,
  .main-grid, .chart-grid, .details-summary, .status-summary,
  .plan-layout, .plan-grid, .match-cols, .layout, .supplier-toolbar,
  .mail-shell, .mail-content, .mlayout {
    grid-template-columns: 1fr !important;
  }

  .topbar, .toolbar, .topbar-actions, .actions, .filters, .table-toolbar,
  .filters-right, .section-title, .docs-card .head {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .toolbar > *, .topbar-actions > *, .filters > *, .table-toolbar > *,
  .section-title > *, .docs-card .head > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .toolbar input, .toolbar select, .toolbar button,
  .topbar input, .topbar select, .topbar button,
  .search-wrap, input[type="search"], input[type="text"], select, textarea {
    min-width: 0 !important;
    width: 100% !important;
  }

  .segmented, .filter-pills, .tabs, .quick-chips, .chips {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fbar-root {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .fbar-seg, .fbar-nav, .fbar-dates,
  .content > div[style*="width:max-content"],
  .content > div[style*="width: max-content"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .fbar-seg { flex: 1 1 100%; }
  .fbar-dates { flex-wrap: wrap; }
  .segmented button, .filter-pills button, .tabs .tab,
  .filter-chip, .pill, .fbar-seg button, .fbar-nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .tbl-wrap, .table-wrap, .scroll-x, .r-table-scroll, .docs-scroll,
  .nomenc-scroll, .yearly-wrap, .chat-result .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
    overscroll-behavior-x: contain;
  }
  .r-table-scroll > table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { max-width: 100%; }
  .t, table.t, .month-tbl, .yearly-tbl, .items-table, table.items, .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .panel > table, .card > table, main > table {
    min-width: 680px;
  }

  .modal, .ui-modal, .ui-modal-card, .modal-back .modal,
  .modal-content, .compose-card, .sup-card {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    overflow: auto !important;
  }
  .modal .field, .ui-modal-card .field {
    grid-template-columns: 1fr !important;
  }
  .modal .actions, .ui-modal-actions {
    justify-content: stretch !important;
    flex-wrap: wrap !important;
  }

  .mail-sidebar {
    width: 100% !important;
    max-height: 220px;
    overflow: auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line, #E3EBF6);
  }
  .mview { min-height: 360px; }
  .board { min-height: 62vh; }
  .col { max-width: none !important; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  h1 { font-size: 20px !important; line-height: 1.25 !important; }
  h2 { font-size: 16px !important; line-height: 1.3 !important; }

  .content { padding: 10px !important; }
  .panel, .card { padding: 10px !important; border-radius: 8px !important; }

  .kpi-grid, .tiles, .quick-grid, .cards-grid,
  .finance-grid, .plan-summary {
    grid-template-columns: 1fr !important;
  }

  button, .btn, .dc-btn, input[type="submit"] { min-height: 40px; }
  .toolbar button, .topbar button, .actions button, .btn, .dc-btn {
    width: 100% !important;
    justify-content: center;
  }

  .pills, .quick-chips, .chips, .actions { flex-wrap: wrap !important; }
  .docs-card .head .right { width: 100%; }
  .dropzone { padding: 18px 12px !important; }
}

/* Final mobile polish: keep the app readable and the menu reachable on phones. */
@media (max-width: 920px) {
  html {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    zoom: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .app {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .content {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 70px 12px 96px !important;
    overflow-x: hidden !important;
  }

  .menu-toggle,
  .r-menu-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
    z-index: 1300 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 1px solid var(--line, #E3EBF6) !important;
    background: #fff !important;
    color: var(--blue, #2563EB) !important;
    box-shadow: 0 10px 26px rgba(15, 22, 40, .16) !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .topbar {
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  .topbar > *,
  .toolbar > *,
  .filters > *,
  .table-toolbar > *,
  .status-stack,
  .period-control,
  .search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .panel,
  .card,
  .dc-section,
  .docs-card,
  .sup-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .card-head,
  .panel-title,
  .section-title {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .segmented,
  .filter-pills,
  .tabs,
  .quick-chips,
  .chips,
  .fbar-seg,
  .fbar-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .segmented button,
  .filter-pills button,
  .tabs .tab,
  .filter-chip,
  .pill,
  .fbar-seg button,
  .fbar-nav button {
    width: auto !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .toolbar button:not(.menu-toggle):not(.r-menu-toggle),
  .topbar button:not(.menu-toggle):not(.r-menu-toggle),
  .actions button,
  .btn,
  .dc-btn {
    max-width: 100%;
  }

  .kpi-row,
  .kpi-grid,
  .finance-grid,
  .plan-summary,
  .company-period-cards,
  .details-summary,
  .status-summary {
    grid-template-columns: 1fr !important;
  }

  .kpi,
  .kpi-card,
  .finance-card,
  .plan-summary-card,
  .company-period-card,
  .details-stat,
  .status-card {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .kpi strong,
  .kpi .value,
  .kpi-card strong,
  .finance-card strong,
  .salary-amount,
  .stage-count,
  .plan-summary-card .val {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.05 !important;
  }

  .funnel,
  .pipeline,
  .company-period-card .main {
    grid-template-columns: 1fr !important;
  }

  .board {
    min-height: 70vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 12px !important;
    scroll-snap-type: x mandatory;
  }

  .col {
    max-width: 92vw !important;
    flex: 0 0 calc(100vw - 34px) !important;
    min-width: calc(100vw - 34px) !important;
    scroll-snap-align: start;
  }

  .col-head .name,
  .card-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  .card-meta {
    font-size: 12.5px !important;
    gap: 4px 8px !important;
  }

  .card-client {
    font-size: 13px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  .notif-list {
    max-height: 58vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .notif {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px 8px !important;
  }

  .notif .when {
    grid-column: 2;
    justify-self: start;
    white-space: normal !important;
    font-size: 12px !important;
  }

  table.deals,
  table.deals thead,
  table.deals tbody,
  table.deals tr,
  table.deals th,
  table.deals td {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  table.deals thead {
    display: none !important;
  }

  table.deals tr {
    border: 1px solid var(--line, #E3EBF6) !important;
    border-radius: 8px !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    background: #fff !important;
  }

  table.deals td {
    border: 0 !important;
    padding: 3px 0 !important;
    overflow-wrap: anywhere;
  }

  table.deals .st-badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

  #calCard {
    overflow: hidden !important;
  }

  #calCard .cal-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #calCard .cal-title,
  #calCard .cal-range,
  #calCard .cal-sel {
    grid-column: 1 / -1;
    min-width: 0 !important;
  }

  #calCard .cal-head > div[style*="margin-left:auto"] {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0 !important;
    justify-content: space-between;
  }

  #calRoot {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  #calCard .cal-cols {
    display: flex !important;
    gap: 8px !important;
    max-height: 68vh !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
  }

  #calCard .cal-day {
    width: min(78vw, 320px) !important;
    min-width: min(78vw, 320px) !important;
    flex: 0 0 min(78vw, 320px) !important;
    height: 62vh !important;
    scroll-snap-align: start;
  }

  #calCard .cal-foot,
  #calCard .cal-acts {
    flex-wrap: wrap !important;
  }

  #calCard .cal-acts {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-start;
  }

  #calCard .cal-mini {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
  }

  .modal,
  .ui-modal,
  .ui-modal-card,
  .modal-back .modal,
  .modal-content,
  .compose-card,
  .sup-card {
    border-radius: 10px !important;
  }
}

@media (max-width: 560px) {
  body { font-size: 15px !important; }

  .content {
    padding: 68px 10px 96px !important;
  }

  .toolbar button:not(.menu-toggle):not(.r-menu-toggle),
  .topbar button:not(.menu-toggle):not(.r-menu-toggle),
  .actions button,
  .btn,
  .dc-btn {
    width: 100% !important;
    justify-content: center;
  }
}

@media (max-width: 920px) {
  body.has-floating-toggle .content {
    padding-top: 70px !important;
  }

  .topbar > .menu-toggle,
  .topbar > .r-menu-toggle,
  .topbar .menu-toggle,
  .topbar .r-menu-toggle {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }
}

@media (max-width: 560px) {
  body.has-floating-toggle .content {
    padding-top: 68px !important;
  }

  .topbar button.filters-toggle,
  .topbar button.mnew-toggle {
    width: auto !important;
  }
}

@media (max-width: 920px) {
  .topbar > .filters-toggle {
    width: calc(100% - 54px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    flex: 1 1 calc(100% - 54px) !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .topbar > .mnew-toggle {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
  }
}

@media (max-width: 920px) {
  .topbar:has(.filters-toggle) > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .topbar:has(.filters-toggle) > div:first-child h1 {
    flex: 1 1 calc(100% - 54px) !important;
    min-width: 0 !important;
  }

  .topbar button.filters-toggle:not(.menu-toggle):not(.r-menu-toggle) {
    width: calc(100% - 54px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    flex: 1 1 calc(100% - 54px) !important;
    justify-content: center !important;
  }

  .topbar button.mnew-toggle:not(.menu-toggle):not(.r-menu-toggle) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
  }
}

/* Broad screen adaptation for laptop and phone layouts. */
.wrap,
.main,
.page,
.page-wrap,
.content,
.panel,
.card,
.docs-card,
.dc-section,
.sup-card,
.modal,
.modal-content,
.ui-modal-card,
.compose-card {
  max-width: 100%;
}

.wrap,
.main,
.page,
.page-wrap,
.content,
.panel,
.card,
.docs-card,
.dc-section,
.sup-card,
.modal,
.modal-content,
.ui-modal-card,
.compose-card,
.form-grid,
.grid,
.row,
.toolbar,
.filters,
.actions,
.topbar,
.table-toolbar,
.board,
.col,
.review,
.work,
.letter,
.extr,
.queue {
  min-width: 0;
}

.table-wrap,
.tbl-wrap,
.scroll-x,
.table-scroll,
.r-table-scroll,
.deal-items-wrap,
.docs-scroll,
.nomenc-scroll,
.yearly-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1440px) and (min-width: 921px) {
  .content,
  .main,
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .topbar,
  .toolbar,
  .filters,
  .table-toolbar,
  .actions,
  .section-title,
  .page-head {
    gap: 10px !important;
  }

  .panel,
  .card,
  .docs-card,
  .dc-section,
  .sup-card {
    border-radius: 10px !important;
  }

  .kpi-grid,
  .finance-grid,
  .plan-summary,
  .cards-grid,
  .quick-grid,
  .tiles,
  .stats {
    gap: 10px !important;
  }

  .kpi,
  .kpi-card,
  .finance-card,
  .plan-summary-card,
  .company-period-card,
  .stat {
    padding: 12px !important;
  }

  .board {
    gap: 10px !important;
    padding-bottom: 10px !important;
  }

  .col {
    min-width: 260px !important;
    flex-basis: min(300px, 24vw) !important;
  }

  #dealModal .modal,
  .modal,
  .ui-modal-card,
  .modal-content,
  .compose-card {
    max-width: 98vw !important;
  }

  #dealModal .modal {
    min-width: 0 !important;
    width: 98vw !important;
  }
}

@media (max-width: 1240px) and (min-width: 921px) {
  .kpi-grid,
  .finance-grid,
  .plan-summary,
  .cards-grid,
  .quick-grid,
  .tiles,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .main-grid,
  .chart-grid,
  .two-col,
  .cols-2,
  .row-2,
  .dc-grid2,
  .dc-grid3,
  .dc-grid4,
  .upload-grid,
  .work,
  .review {
    grid-template-columns: 1fr !important;
  }

  .letter,
  .queue {
    border-right: 0 !important;
  }

  .queue {
    max-height: 340px !important;
  }
}

@media (max-width: 920px) {
  .content [style*="min-width"]:not(table),
  .main [style*="min-width"]:not(table),
  .wrap [style*="min-width"]:not(table),
  .modal [style*="min-width"]:not(table),
  .ui-modal-card [style*="min-width"]:not(table),
  .compose-card [style*="min-width"]:not(table) {
    min-width: 0 !important;
  }

  .content [style*="max-width"],
  .main [style*="max-width"],
  .wrap [style*="max-width"],
  .modal [style*="max-width"],
  .ui-modal-card [style*="max-width"],
  .compose-card [style*="max-width"] {
    max-width: 100% !important;
  }

  .content,
  .main,
  .wrap {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .panel,
  .card,
  .docs-card,
  .dc-section,
  .sup-card {
    overflow-x: clip;
  }

  .modal-back,
  .modal-overlay,
  .ui-modal-back {
    align-items: flex-start !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 8px 10px !important;
    overflow-y: auto !important;
  }

  #dealModal .modal,
  .modal,
  .ui-modal-card,
  .modal-content,
  .compose-card {
    min-width: 0 !important;
    width: 96vw !important;
    max-width: 96vw !important;
  }

  .field,
  .dc-field,
  .form-row,
  .lrow,
  .ship-head,
  .rule-add,
  .head-right,
  .page-head {
    min-width: 0 !important;
  }

  .field,
  .dc-field,
  .form-row,
  .rule-add {
    grid-template-columns: 1fr !important;
  }

  .ship-head {
    grid-template-columns: 1fr !important;
  }

  .mail-preview,
  .qitem .qsub,
  .card-name,
  .card-client,
  .lv,
  .fv,
  td,
  th {
    overflow-wrap: anywhere;
  }

  .lrow {
    flex-wrap: wrap;
  }

  .lrow .lk {
    min-width: 0 !important;
  }

  .att,
  .export,
  .actbar,
  .head-right {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .stats,
  .kpi-grid,
  .finance-grid,
  .plan-summary,
  .cards-grid,
  .quick-grid,
  .tiles {
    grid-template-columns: 1fr !important;
  }

  .stat,
  .kpi,
  .kpi-card,
  .finance-card,
  .plan-summary-card,
  .company-period-card {
    min-height: auto !important;
  }

  .table-wrap table,
  .tbl-wrap table,
  .scroll-x table,
  .table-scroll table,
  .r-table-scroll table,
  .deal-items-wrap table,
  .docs-scroll table,
  .nomenc-scroll table,
  .yearly-wrap table {
    min-width: 640px;
  }

  .modal,
  .ui-modal-card,
  .modal-content,
  .compose-card {
    border-radius: 9px !important;
  }
}