/*
 * Shared mobile layout rules.
 * Loaded last so dynamic screens and their injected styles use one responsive baseline.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

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

.mobile-nav-toggle {
  display: none;
}

.view,
.content-output,
.content-section,
.dashboard-card,
.client-card,
.crm-screen,
.crm-client-card,
.crm-main-panel,
.crm-finance-section,
.crm-services-section,
.pricing-card,
#clientsWorkspace,
#contentCenter,
#taliContent,
#clientContent,
#paymentsReportContent,
#pricingPackagesWorkspace {
  min-width: 0;
  max-width: 100%;
}

.crm-table-wrap,
.crm-finance-table-wrap,
.open-payments-table-wrap,
.table-wrap,
[class$="-table-wrap"] {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.crm-table-wrap:focus-visible,
.crm-finance-table-wrap:focus-visible,
.open-payments-table-wrap:focus-visible,
.table-wrap:focus-visible,
[class$="-table-wrap"]:focus-visible {
  outline: 3px solid rgba(111, 73, 184, 0.22);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  html {
    scrollbar-gutter: auto;
  }

  .app-shell {
    width: min(100% - 20px, 1420px);
    margin: 10px auto 20px;
  }

  .topbar {
    position: sticky;
    top: 4px;
    display: block;
    padding: 8px;
    border-radius: 18px;
  }

  .topbar .brand {
    display: none;
  }

  .mobile-nav-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.88);
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    color: #fff;
    background: var(--purple);
  }

  .topbar nav {
    width: 100%;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
    padding: 7px 1px 1px;
    border-top: 1px solid rgba(121, 86, 180, 0.14);
  }

  .topbar nav.mobile-nav-open {
    display: grid;
  }

  .topbar #primaryNavigation button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 8px;
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  main {
    margin-top: 10px;
  }

  .section-head {
    margin: 4px 2px 12px;
  }

  .section-head h2,
  .hero-card h2 {
    font-size: clamp(25px, 8vw, 31px);
  }

  .section-head p,
  .hero-card p,
  .content-section p,
  .client-card p {
    overflow-wrap: anywhere;
  }

  .hero-card,
  .dashboard-card,
  .content-section,
  .notice,
  .placeholder-panel,
  .diagnosis-form,
  .client-card,
  .crm-client-card,
  .crm-main-panel,
  .pricing-card,
  #pricingPackagesWorkspace .pricing-card,
  .business-profile-card,
  .client-work-log {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .hero-card,
  .client-card,
  .list-head,
  .audience-intro,
  .audience-topic-head,
  .peaks-workspace-head,
  .peaks-period header,
  .peaks-mode-title,
  .pythagoras-workspace-head,
  .pythagoras-section-title,
  .crm-client-command,
  .crm-services-section-head,
  .crm-documents-summary,
  .crm-documents-section-head,
  .content-preview-dialog header,
  .display-layout-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  /* The CRM identity is injected as one horizontal flex row. On a phone,
     the badge, client name and age compete for the same narrow line and
     fragment into overlapping columns. Give the card header a stable
     one-column layout that also overrides the later runtime stylesheet. */
  #view-clients .crm-client-card .crm-client-command {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  #view-clients .crm-client-card .crm-client-identity {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  #view-clients .crm-client-card .crm-client-identity .eyebrow {
    max-width: 100%;
    margin: 0 0 2px;
    white-space: normal;
  }

  #view-clients .crm-client-card .crm-client-identity h3,
  #view-clients .crm-client-card .crm-client-identity p {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #view-clients .crm-client-card .crm-client-identity h3 {
    font-size: clamp(21px, 6.5vw, 27px);
    line-height: 1.25;
  }

  #view-clients .crm-client-card .crm-client-identity p {
    font-size: 16px;
    line-height: 1.4;
  }

  .dashboard-grid,
  .clients-grid,
  .clients-layout,
  .diagnosis-form,
  .client-form,
  .settings-hub-grid,
  .pricing-grid,
  .pricing-summary,
  #pricingPackagesWorkspace .pricing-summary,
  .crm-client-summary,
  .crm-main-tabs,
  .crm-panel-grid,
  .crm-overview-grid,
  .crm-finance-summary,
  .crm-finance-grid,
  .crm-services-summary,
  .crm-new-client-grid,
  .crm-new-hebrew-date-row,
  .audience-summary-grid,
  .audience-calculation-details,
  .audience-content-grid,
  .peaks-calculation-summary,
  .peaks-number-pair,
  .content-preview-grid,
  .business-profile-grid,
  .client-file-summary,
  .client-file-tools,
  .open-payments-filters,
  .open-payments-summary {
    grid-template-columns: 1fr !important;
  }

  .crm-details-grid,
  .crm-hebrew-date-grid,
  .crm-meetings-grid,
  .crm-documents-form,
  .crm-service-row,
  .crm-package-picker,
  .crm-services-discount,
  .crm-services-toolbar,
  .crm-payment-allocation-row,
  .crm-unassigned-payment-box,
  .client-work-log-form,
  .client-work-log-form.has-due-date,
  .client-work-log-entry,
  .display-layout-row,
  .display-layout-group-head,
  .settings-tab-order-list,
  .settings-tab-order-row,
  #contentCenter .client-status-editor-row,
  #pricingPackagesWorkspace .pricing-row,
  #pricingPackagesWorkspace .pricing-package-row {
    grid-template-columns: 1fr !important;
  }

  .crm-service-row > *,
  .crm-services-discount > *,
  .crm-services-toolbar > *,
  .crm-payment-allocation-row > *,
  .crm-documents-form > *,
  .crm-meetings-grid > *,
  .crm-new-hebrew-date-row > * {
    grid-column: 1 !important;
  }

  .crm-service-row-total {
    padding: 4px 0;
  }

  /* Payment allocation descriptions can contain several services and amounts.
     On phones, present each payment as a labelled card so the text increases
     the row height instead of extending beyond a 720px table. */
  .crm-payments-history-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .crm-payments-history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .crm-payments-history-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .crm-payments-history-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(111, 73, 184, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
  }

  .crm-payments-history-table td {
    display: grid;
    grid-template-columns: minmax(94px, 36%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: 100%;
    min-width: 0;
    padding: 8px 2px;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .crm-payments-history-table td::before {
    color: #2f1d54;
    font-weight: 950;
  }

  .crm-payments-history-table td:nth-child(1)::before { content: "תאריך"; }
  .crm-payments-history-table td:nth-child(2)::before { content: "סכום"; }
  .crm-payments-history-table td:nth-child(3)::before { content: "אמצעי תשלום"; }
  .crm-payments-history-table td:nth-child(4)::before { content: "שויך אל"; }
  .crm-payments-history-table td:nth-child(5)::before { content: "הערה"; }
  .crm-payments-history-table td:nth-child(6)::before { content: "פעולה"; }

  .crm-payments-history-table .crm-finance-empty {
    display: block;
  }

  .crm-payments-history-table .crm-finance-empty::before {
    content: none;
  }

  .crm-payments-history-table td button {
    width: 100%;
    min-width: 0 !important;
  }

  /* The workflow's injected desktop style otherwise leaves date and notes in
     two narrow columns. A single-column row keeps every label and value whole. */
  .service-workflow-row,
  .service-workflow-history-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100%;
    min-width: 0;
  }

  .service-workflow-name,
  .service-workflow-row label,
  .service-workflow-row input,
  .service-workflow-row select,
  .service-workflow-row textarea,
  .service-workflow-row button,
  .service-workflow-history-row > * {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .service-workflow-row textarea {
    min-height: 76px !important;
    box-sizing: border-box;
    resize: vertical;
    field-sizing: content;
  }

  /* The client list is a ten-column desktop table. On phones, keeping its
     960px intrinsic width makes the surrounding grid grow beyond the
     viewport. Present each row as a labelled card instead. */
  #view-clients .crm-top-card,
  #view-clients .crm-table-card,
  #view-clients .crm-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #view-clients .crm-top-card,
  #view-clients .crm-table-card {
    padding: 12px !important;
  }

  #view-clients .crm-top-card .crm-actions button {
    width: 100%;
    min-width: 0 !important;
    min-height: 46px;
    color: #fff !important;
    background: var(--purple) !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #view-clients .crm-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  #view-clients .crm-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #view-clients .crm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #view-clients .crm-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  #view-clients .crm-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid rgba(111, 73, 184, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
  }

  #view-clients .crm-table td {
    display: grid;
    grid-template-columns: minmax(104px, 40%) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 8px 2px;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #view-clients .crm-table td::before {
    color: #2f1d54;
    font-weight: 950;
  }

  #view-clients .crm-table td:nth-child(1)::before { content: "שם לקוח"; }
  #view-clients .crm-table td:nth-child(2)::before { content: "גיל"; }
  #view-clients .crm-table td:nth-child(3)::before { content: "סטטוס"; }
  #view-clients .crm-table td:nth-child(4)::before { content: "מה הלקוח בחר"; }
  #view-clients .crm-table td:nth-child(5)::before { content: "סטטוס תשלום"; }
  #view-clients .crm-table td:nth-child(6)::before { content: "סה״כ"; }
  #view-clients .crm-table td:nth-child(7)::before { content: "שולם"; }
  #view-clients .crm-table td:nth-child(8)::before { content: "יתרה / זכות"; }
  #view-clients .crm-table td:nth-child(9)::before { content: "כרטיס לקוח"; }
  #view-clients .crm-table td:nth-child(10)::before { content: "עריכה"; }

  #view-clients .crm-table td button {
    width: 100%;
    min-width: 0 !important;
    min-height: 42px !important;
    white-space: normal;
  }

  .audience-tabs,
  .client-file-tabs,
  .display-layout-tabs,
  .peaks-mode-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    gap: 6px;
    padding-bottom: 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .audience-tabs button,
  .client-file-tabs button,
  .display-layout-tabs button,
  .peaks-mode-tabs button {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }


  /* Tali's topic navigation must show every destination without relying on
     horizontal scrolling. Long professional labels wrap inside two stable
     columns, while the workspace and its cards remain bounded by the phone. */
  #view-tali,
  #view-tali #taliContent,
  #view-tali .audience-workspace,
  #view-tali .audience-workspace > *,
  #view-tali .content-section,
  #view-tali [data-tali-section] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #view-tali .tali-view-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
    overflow: visible;
  }

  #view-tali .tali-view-tabs button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* A horizontally scrolling CRM tab row hides part of the next action in
     RTL mobile layouts. Keep every client-card destination visible in a
     stable two-column grid instead of clipping a single long row. */
  #view-clients .crm-main-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
    overflow: visible;
  }

  #view-clients .crm-main-tabs button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .crm-actions,
  .crm-panel-actions,
  .crm-overview-actions,
  .crm-details-actions,
  .crm-finance-actions,
  .crm-services-actions,
  .crm-new-client-actions,
  .pricing-actions,
  .business-profile-actions,
  .business-profile-logo-actions,
  .editor-actions,
  .backup-actions,
  .home-command-actions,
  .home-focus-actions,
  .display-layout-add-group,
  .display-layout-footer {
    width: 100%;
    min-width: 0 !important;
  }

  .crm-meetings-actions,
  .crm-document-row,
  .crm-meeting-row {
    grid-template-columns: 1fr !important;
  }

  .crm-services-savebar,
  .crm-available-payment-banner,
  .crm-payment-allocation-head {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .content-layout-sidebar {
    padding: 10px;
  }

  .content-sidebar-items .content-item-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .content-preview-backdrop,
  .display-layout-modal {
    align-items: end;
    padding: 8px;
  }

  .content-preview-dialog,
  .display-layout-panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 14px;
    border-radius: 20px 20px 12px 12px;
  }

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

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .crm-table,
  .crm-finance-table,
  .open-payments-table {
    font-size: 14px;
  }
}

@media (max-width: 430px) {
  .app-shell {
    width: min(100% - 12px, 1420px);
    margin-top: 6px;
  }

  .topbar {
    top: 2px;
    border-radius: 15px;
  }

  .content-sidebar-items .content-item-buttons,
  .home-metrics-grid,
  .home-quick-actions,
  .home-active-card .home-focus-actions {
    grid-template-columns: 1fr !important;
  }

  .crm-actions > button,
  .crm-panel-actions > button,
  .crm-overview-actions > button,
  .crm-details-actions > button,
  .crm-finance-actions > button,
  .crm-services-actions > button,
  .crm-new-client-actions > button,
  .crm-meetings-actions > button,
  .crm-documents-actions > button,
  .pricing-actions > button,
  .business-profile-actions > button,
  .backup-actions > button,
  .hero-actions > button,
  #activeClientPanel .active-view-actions > button,
  #activeClientPanel .active-backup-actions > button {
    width: 100%;
    min-width: 0 !important;
  }

  .crm-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .crm-pagination span {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .content-preview-dialog,
  .display-layout-panel {
    max-height: calc(100dvh - 12px);
  }
}