/* Final phone layout layer. Loaded last so every CRM module follows the same rules. */
@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  .layout, .main, .screen, .panel { min-width: 0 !important; max-width: 100% !important; }
  .main { width: 100% !important; padding: 12px !important; overflow: hidden; }

  /* All native dialogs stay in the visible top layer on iOS Safari. */
  dialog[open] {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  dialog[open] > form,
  dialog[open] > .confirmBox,
  dialog[open] > .dialogPanel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  dialog[open] .iconBtn { flex: 0 0 40px; font-family: Arial, sans-serif !important; line-height: 1 !important; }

  /* The order header/footer have six actions; lay them out inside the phone width. */
  #orderDialog .orderForm { min-width: 0 !important; }
  #orderDialog .orderForm > * { min-width: 0; max-width: 100%; }
  #orderDialog .orderForm > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: start !important;
  }
  #orderDialog .dialogTitleRow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #orderDialog .dialogTitleRow h3 {
    grid-column: 1 / -1;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #orderDialog .dialogTitleRow .downloadBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 7px 8px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  #orderDialog #closeDialog {
    grid-column: 2;
    grid-row: 1;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    justify-self: end;
  }
  #orderDialog .orderForm > footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #orderDialog .orderForm > footer > .footerActions,
  #orderDialog .orderForm > footer .footerSaveRow { display: contents !important; }
  #orderDialog .orderForm > footer button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* Seven real columns must fit on the phone; no cropped Thursday-Sunday. */
  #calendarScreen { overflow: hidden; }
  #calendarScreen .calendarTop { margin-bottom: 10px; }
  #calendarScreen .calendarNav { width: 100%; gap: 7px; }
  #calendarScreen .calendarTitleBtn { flex: 1; min-width: 0; }
  #calendarScreen .calendarNav #monthTitle { min-width: 0; width: 100%; text-align: center; }
  #calendarScreen .calendarLayout { min-width: 0 !important; }
  #calendarScreen .calendarScrollViewport { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  #calendarScreen .calendarWeekdayHeader,
  #calendarScreen .calendarWeeksGrid,
  #calendarScreen .calendarGrid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  #calendarScreen .calendarDayName { min-width: 0; padding: 4px 0 !important; font-size: 10px !important; text-align: center; }
  #calendarScreen .calendarDay { min-width: 0 !important; min-height: 58px !important; padding: 5px 3px !important; border-radius: 8px !important; }
  #calendarScreen .calendarDate { font-size: 12px; }
  #calendarScreen .calendarMonthMarker { font-size: 8px !important; }
  #calendarScreen .calendarEvents { gap: 2px !important; }
  #calendarScreen .calendarEvent { display: block; max-width: 100%; padding: 2px 3px !important; overflow: hidden; font-size: 7px !important; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  #calendarScreen .calendarDuePanel,
  #calendarScreen .calendarEditor { width: 100% !important; min-width: 0 !important; padding: 14px !important; }
  #calendarScreen .calendarDueItem { width: 100%; min-width: 0; overflow-wrap: anywhere; }

  /* Free horizontal swiping with only a gentle stage alignment near rest. */
  .boardScrollFrame { width: 100%; min-width: 0; overflow: hidden; }
  .board,
  .taskBoard,
  .calculationsBoard {
    grid-auto-columns: min(82vw, 310px) !important;
    gap: 12px !important;
    padding-inline: 2px 18vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: auto !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .column, .taskColumn, .calculationColumn {
    min-width: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal !important;
  }
  .card { overflow: hidden; }
  .cardContent { padding-right: 30px !important; }
  .cardFooter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-right: 0 !important;
    align-items: stretch !important;
  }
  .cardFooter .cardActions { display: flex; flex-wrap: wrap; }
  body .card .cardFooter > .chip.chipPerson:last-child {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    padding: 6px 9px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  body .card .cardFooter > .chip.chipPerson:last-child::before { content: "Ответственный: "; margin-right: 4px; color: #60748a; font-weight: 600; }
  .chip, .timerChip, .calendarDueChip { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; }

  /* Wide settings/payroll tables scroll inside their cards, not under the page. */
  .accessTableWrap,
  .clientsAuditTableWrap,
  .clientsFinanceTableWrap,
  .checkoFinanceScroll,
  .terminalPayrollTableWrap,
  .terminalPayrollDays,
  .attendanceTableWrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .accessRightsTable { min-width: 760px !important; }
  .accessTableWrap::before { content: "Таблица листается влево и вправо"; display: block; position: sticky; left: 0; width: max-content; padding: 8px 11px; color: #71817d; font-size: 11px; }
  .accessRightsTable th:first-child,
  .accessRightsTable td:first-child { width: 145px; min-width: 145px; max-width: 145px; white-space: normal; overflow-wrap: anywhere; }

  /* Counterparty cards and charts remain readable and tappable. */
  .checkoPanel, .checkoResult, .checkoCompanyHero, .checkoCharts { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .checkoCompanyHero { padding: 12px !important; }
  .checkoCompanyTitle { min-width: 0; }
  .checkoCompanyTitle > div:last-child { min-width: 0; }
  .checkoCompanyTitle h3 { max-width: 100%; font-size: 21px !important; line-height: 1.14 !important; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
  .checkoFact { grid-template-columns: 92px minmax(0, 1fr) !important; padding-inline: 7px !important; }
  .checkoFact > strong { font-size: 13px !important; }
  .checkoCharts { padding: 12px 8px !important; gap: 22px !important; }
  .checkoChart { min-height: 250px; padding-top: 2px; touch-action: manipulation; }
  .checkoChart h4 { font-size: 18px !important; }
  .checkoChart svg { min-height: 205px; }
  .checkoChartPoint rect { pointer-events: all !important; touch-action: manipulation; cursor: pointer !important; }
  .checkoChartTooltip { position: fixed !important; max-width: calc(100vw - 24px); pointer-events: none; }

  /* Long labels and module cards should wrap instead of being clipped. */
  .controlCenter, .controlList, .dealCalculator, .pricingModule, .clientsModule, .terminalPayroll { min-width: 0 !important; max-width: 100% !important; }
  .controlList > article, .dealInputCard, .dealTableCard, .dealOutputs > section, .terminalPayrollEmployee { min-width: 0 !important; max-width: 100% !important; }
  .dealSectionHead, .dealSectionTitleWithAction { min-width: 0; }
  .dealSectionHead h4, .dealSectionHead p, .dealDerived strong { min-width: 0; overflow-wrap: anywhere; }
  .dealExpenseRow .iconBtn, .dealPaymentRemove { font-family: Arial, sans-serif !important; font-size: 20px !important; }
  .terminalPayrollEmployee > summary { min-width: 0 !important; }
  .terminalPayrollEmployee > summary > * { min-width: 0; overflow-wrap: anywhere; }

  /* Team workload becomes a readable mobile card instead of a cropped desktop row. */
  .controlLoadTable { overflow: visible !important; }
  .controlLoadHead { display: none !important; }
  .controlLoadRow {
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    padding: 14px !important;
    text-align: left !important;
  }
  .controlLoadPerson { grid-column: 1 / -1; }
  .controlLoadRow > span:not(.controlLoadPerson) { display: grid; gap: 2px; min-width: 0; font-size: 15px; font-weight: 750; }
  .controlLoadRow > span:not(.controlLoadPerson)::before { color: #75817b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
  .controlLoadRow > span:nth-child(2)::before { content: "Лиды"; }
  .controlLoadRow > span:nth-child(3)::before { content: "Заказы"; }
  .controlLoadRow > span:nth-child(4)::before { content: "Задачи"; }
  .controlLoadRow > span:nth-child(5)::before { content: "Просрочено"; }
  .controlLoadRow > span:nth-child(6)::before { content: "Критично"; }
  .controlLoadRow > span:nth-child(7) { grid-column: 1 / -1; }
  .controlLoadRow > span:nth-child(7)::before { content: "Нагрузка"; }

  /* Terminal payroll summary: name and rate are separate; the salary never overlaps them. */
  .terminalPayrollEmployee > summary {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 42%) !important;
    gap: 12px !important;
    padding: 15px 13px !important;
  }
  .terminalPayrollEmployee > summary > div:first-child { grid-column: 1; align-self: start; }
  .terminalPayrollEmployee > summary > label { grid-column: 2; align-self: start; }
  .terminalPayrollEmployee > summary > span:last-child { display: grid !important; grid-column: 1 / -1; }
  .terminalPayrollEmployee summary input { min-width: 0; }
  .terminalPayrollDays { position: relative; padding: 34px 10px 12px !important; }
  .terminalPayrollDays::before { content: "Таблица листается влево и вправо"; position: absolute; top: 10px; left: 12px; color: #71817d; font-size: 11px; }
  .terminalPayrollDays table { min-width: 790px; }
}