/*
 * Pewatech + Lizwa Safe Fullscreen / Structure Restore v3
 * Replaces aggressive fullscreen v1/v2 CSS.
 * Widen OUTER pages only and preserve inner card/grid structure.
 */

:root {
  --pwt-safe-gutter: clamp(8px, 0.9vw, 18px);
  --pwt-safe-page-width: calc(100vw - (var(--pwt-safe-gutter) * 2));
}

html,
body {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  -webkit-text-size-adjust: 100%;
}

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

/* Restore normal text after old CSS made names break letter by letter. */
body,
body * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: manual !important;
}

td,
th,
textarea,
pre,
code,
.comment,
.note,
.description,
.message,
.remark,
[class*="comment"],
[class*="description"],
[class*="message"],
[class*="remark"] {
  overflow-wrap: anywhere !important;
}

/* Widen only OUTER page shells. */
body > main,
body > .container,
body > .container-fluid,
body > .page-container,
body > .page-wrapper,
body > .page-shell,
body > .app-container,
body > .app-wrapper,
body > .app-shell,
body > .dashboard-container,
body > .dashboard-wrapper,
body > .dashboard-shell,
body > .admin-dashboard,
body > .assistant-dashboard,
body > .main-container,
body > .main-wrapper,
body > .content-wrapper,
body > .content-shell,
body > .rate-board,
body > .rates-board,
body > .rate-page,
body > .rates-page,
body > .rate-board-shell,
body > .rates-shell,
#app,
#main,
#content,
main > .container,
main > .container-fluid,
main > .page-container,
main > .page-wrapper,
main > .dashboard-container,
main > .dashboard-wrapper,
main > .rate-board,
main > .rates-board,
main > .rate-page,
main > .rates-page {
  width: var(--pwt-safe-page-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Preserve cards/tiles/forms. Do not force them all to 100vw. */
.card,
.panel,
.box,
.tile,
.widget,
.section-card,
.content-card,
.page-card,
.dashboard-card,
.dashboard-panel,
.table-card,
.list-card,
.filter-card,
.search-card,
.summary-card,
.stats-card,
.rate-card,
.rate-row,
.account-card,
.party-card,
.account-tile,
.party-tile,
.account-box,
.party-box,
[class~="card"] {
  max-width: 100% !important;
  min-width: 0;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Account/party details should be readable, not vertical. */
.account-card *,
.party-card *,
.account-tile *,
.party-tile *,
.account-box *,
.party-box *,
[class*="account-card"] *,
[class*="party-card"] *,
[class*="account-tile"] *,
[class*="party-tile"] * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal;
}

.account-name,
.party-name,
.card-title,
.item-title,
.account-title,
.party-title,
[class*="account-name"],
[class*="party-name"],
[class*="card-title"],
[class*="item-title"] {
  min-width: 8ch;
  max-width: 100%;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.balance,
.amount,
.money,
.badge,
.pill,
[class*="balance"],
[class*="amount"],
[class*="money"],
[class*="badge"],
[class*="pill"] {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap;
}

button,
.btn,
.button,
[class*="btn"],
[class*="button"],
select,
input,
textarea {
  max-width: 100%;
}

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

/* Tables and ledgers scroll horizontally instead of cutting details. */
.table-responsive,
.table-wrapper,
.table-wrap,
.data-table-wrapper,
.list-table-wrapper,
.transactions-table-wrapper,
.transaction-table-wrapper,
.accounts-table-wrapper,
.parties-table-wrapper,
.rates-table-wrapper,
.rate-table-wrapper,
.ledger-wrapper,
.report-wrapper,
.history-wrapper,
[class*="table-wrap"],
[class*="table-wrapper"],
[class*="ledger-wrapper"],
[class*="history-wrapper"],
[class*="report-wrapper"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

table.transactions-table,
table.transaction-table,
table.accounts-table,
table.parties-table,
table.rates-table,
table.ledger-table,
table.report-table,
table.history-table,
table.data-table,
.transactions-table table,
.transaction-table table,
.accounts-table table,
.parties-table table,
.rates-table table,
.ledger-table table,
.report-table table,
.history-table table,
.data-table table {
  min-width: max-content;
}

.nav,
.navbar,
.tabs,
.tabbar,
.tab-list,
.button-row,
.button-group,
.actions,
.action-row,
.quick-actions,
.dashboard-actions,
.menu-row,
.filter-row,
.search-row,
.summary-row,
.stat-row,
.stats-row,
.kpi-row {
  max-width: 100%;
  flex-wrap: wrap;
}

@media (min-width: 1200px) {
  :root {
    --pwt-safe-gutter: 12px;
  }

  body > main,
  body > .container,
  body > .container-fluid,
  body > .page-container,
  body > .page-wrapper,
  body > .page-shell,
  body > .app-container,
  body > .app-wrapper,
  body > .app-shell,
  body > .dashboard-container,
  body > .dashboard-wrapper,
  body > .dashboard-shell,
  body > .admin-dashboard,
  body > .assistant-dashboard,
  body > .main-container,
  body > .main-wrapper,
  body > .content-wrapper,
  body > .content-shell,
  body > .rate-board,
  body > .rates-board,
  body > .rate-page,
  body > .rates-page,
  body > .rate-board-shell,
  body > .rates-shell,
  #app,
  #main,
  #content,
  main > .container,
  main > .container-fluid,
  main > .page-container,
  main > .page-wrapper,
  main > .dashboard-container,
  main > .dashboard-wrapper,
  main > .rate-board,
  main > .rates-board,
  main > .rate-page,
  main > .rates-page {
    width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --pwt-safe-gutter: 8px;
  }

  body > main,
  body > .container,
  body > .container-fluid,
  body > .page-container,
  body > .page-wrapper,
  body > .page-shell,
  body > .app-container,
  body > .app-wrapper,
  body > .app-shell,
  body > .dashboard-container,
  body > .dashboard-wrapper,
  body > .dashboard-shell,
  body > .admin-dashboard,
  body > .assistant-dashboard,
  body > .main-container,
  body > .main-wrapper,
  body > .content-wrapper,
  body > .content-shell,
  body > .rate-board,
  body > .rates-board,
  body > .rate-page,
  body > .rates-page,
  body > .rate-board-shell,
  body > .rates-shell,
  #app,
  #main,
  #content,
  main > .container,
  main > .container-fluid,
  main > .page-container,
  main > .page-wrapper,
  main > .dashboard-container,
  main > .dashboard-wrapper,
  main > .rate-board,
  main > .rates-board,
  main > .rate-page,
  main > .rates-page {
    width: calc(100vw - 16px) !important;
  }

  .balance,
  .amount,
  .money,
  [class*="balance"],
  [class*="amount"],
  [class*="money"] {
    white-space: normal;
  }
}

@media print {
  html,
  body {
    overflow: visible !important;
  }

  body > main,
  body > .container,
  body > .container-fluid,
  body > .page-container,
  body > .page-wrapper,
  body > .dashboard-container,
  body > .dashboard-wrapper,
  body > .rate-board,
  body > .rates-board,
  body > .rate-page,
  body > .rates-page,
  #app,
  #main,
  #content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}