/* TheaCRM mobile compact spacing
   v2.6.109
   Goal: use almost the full phone width, reduce duplicated horizontal gutters,
   keep cards readable and tappable. Desktop layout is intentionally untouched.
*/
:root {
  --thea-mobile-edge-gap: 0px;
  --thea-mobile-inner-gap: 6px;
  --thea-mobile-card-gap: 6px;
  --thea-mobile-card-radius: 14px;
}

@media (max-width: 767.98px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    background: #f6f8f7;
  }

  /*
   * Global page gutters.
   * In several pages the real spacing is stacked from body/content/container/page/card.
   * Keep only a tiny outer safety gap and push the useful content almost to the edge.
   */
  body .content,
  body main.content,
  body .main-content,
  body .page-content,
  body .app-content,
  body #content,
  body .thea-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--thea-mobile-edge-gap) !important;
    padding-right: var(--thea-mobile-edge-gap) !important;
    padding-top: .35rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .content > .container,
  body .content > .container-fluid,
  body main.content > .container,
  body main.content > .container-fluid,
  body .main-content > .container,
  body .main-content > .container-fluid,
  body .page-content > .container,
  body .page-content > .container-fluid,
  body .app-content > .container,
  body .app-content > .container-fluid,
  body .container.responsive-container,
  body .container-fluid.responsive-container,
  body .responsive-container,
  body .thea-page,
  body .thea-work-page,
  body .thea-directory-page,
  body .thea-directory-page.container,
  body .container.responsive-container.thea-directory-page,
  body .container.thea-work-page,
  body .container.responsive-container.thea-work-page,
  body .thea-stock-page.container,
  body .container.responsive-container.thea-stock-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Bootstrap utility classes often add the second hidden gutter on mobile pages. */
  body .content .px-3,
  body .content .px-4,
  body .content .p-3,
  body .content .p-4,
  body .responsive-container.p-3,
  body .responsive-container.p-4,
  body .thea-page.p-3,
  body .thea-page.p-4,
  body .thea-work-page.p-3,
  body .thea-work-page.p-4,
  body .thea-directory-page.p-3,
  body .thea-directory-page.p-4 {
    padding-left: var(--thea-mobile-inner-gap) !important;
    padding-right: var(--thea-mobile-inner-gap) !important;
  }

  /* Top page wrapper cards: remove big outer margin, keep small inner breathing room. */
  body .content > .container > .bg-white.rounded.shadow-sm,
  body .content > .container-fluid > .bg-white.rounded.shadow-sm,
  body main.content > .container > .bg-white.rounded.shadow-sm,
  body main.content > .container-fluid > .bg-white.rounded.shadow-sm,
  body .responsive-container > .bg-white.rounded.shadow-sm,
  body .thea-page > .bg-white.rounded.shadow-sm,
  body .thea-work-page > .bg-white.rounded.shadow-sm,
  body .thea-directory-page > .bg-white.rounded.shadow-sm,
  body .thea-work-card,
  body .thea-card,
  body .thea-page .card,
  body .thea-work-page .card,
  body .thea-stock-page .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--thea-mobile-card-radius) !important;
  }

  body .content > .container > .bg-white.rounded.shadow-sm,
  body .content > .container-fluid > .bg-white.rounded.shadow-sm,
  body main.content > .container > .bg-white.rounded.shadow-sm,
  body main.content > .container-fluid > .bg-white.rounded.shadow-sm,
  body .responsive-container > .bg-white.rounded.shadow-sm,
  body .thea-work-card,
  body .thea-page .card-body,
  body .thea-page .bg-white.rounded.shadow-sm,
  body .thea-work-page .bg-white.rounded.shadow-sm,
  body .thea-directory-page .bg-white.rounded.shadow-sm,
  body .thea-stock-page .card-body {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--thea-mobile-inner-gap) !important;
    padding-right: var(--thea-mobile-inner-gap) !important;
  }

  /* Titles: closer to top, less vertical waste. */
  h1,
  .thea-page h1,
  .thea-work-page h1,
  .project-page-title,
  .page-title {
    font-size: clamp(1.42rem, 7vw, 2rem) !important;
    line-height: 1.08 !important;
    margin-top: .1rem !important;
    margin-bottom: .55rem !important;
    letter-spacing: -.025em;
  }

  h2,
  .thea-page h2,
  .thea-work-page h2 {
    font-size: clamp(1.22rem, 5.6vw, 1.7rem) !important;
    line-height: 1.14 !important;
    margin-bottom: .5rem !important;
  }

  /* Toolbars and hero blocks: compact and near full width. */
  .thea-hero,
  .thea-page > .d-flex:first-child,
  .thea-toolbar,
  .thea-document-toolbar,
  .thea-directory-page .appbar,
  .list-header,
  .page-header {
    border-radius: var(--thea-mobile-card-radius) !important;
    padding-left: var(--thea-mobile-inner-gap) !important;
    padding-right: var(--thea-mobile-inner-gap) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .thea-toolbar,
  .thea-document-toolbar,
  .list-header,
  .page-header {
    margin-bottom: .6rem !important;
  }

  /* Project detail dashboard: wider tiles, less nested card feeling. */
  .thea-project-clean-page,
  .thea-projects-page {
    padding-top: .25rem !important;
  }

  .project-command-center {
    padding: .68rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--thea-mobile-card-radius) !important;
  }

  .project-command-tiles {
    --bs-gutter-x: .36rem;
    --bs-gutter-y: .42rem;
  }

  .project-command-tiles > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
  }

  .project-command-tile,
  .next-step-card,
  .thea-page .list-group-item,
  .thea-work-page .list-group-item {
    border-radius: var(--thea-mobile-card-radius) !important;
    padding: .68rem .72rem !important;
  }

  .project-command-actions .btn,
  .project-command-center .btn {
    padding: .46rem .68rem !important;
  }

  /* Offer/invoice/customer/list cards: remove outer side waste. */
  .offer-card,
  .invoice-card,
  .thea-doc-card,
  .organization-card,
  .contact-card,
  .task-card,
  .inquiry-card,
  .project-card,
  .item-card,
  .call-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--thea-mobile-card-radius) !important;
    padding: .72rem .78rem !important;
  }

  .thea-directory-page .list-group-item,
  .thea-directory-page .contact-card,
  .thea-directory-page .organization-card,
  .thea-directory-page .item-card,
  .thea-work-page .offer-card,
  .thea-work-page .invoice-card,
  .thea-work-page .inquiry-card,
  .thea-work-page .project-card,
  .thea-work-page .task-card,
  .thea-work-page .call-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: .42rem !important;
  }

  /* Common Bootstrap rows can create horizontal scroll/gutters; keep them tight on mobile. */
  .row,
  .row.g-0,
  .row.g-1,
  .row.g-2,
  .row.g-3,
  .row.g-4 {
    --bs-gutter-x: .5rem;
  }

  .row.g-3,
  .row.g-4 {
    --bs-gutter-y: .72rem;
  }

  /* Tables and tabs should not add horizontal waste. */
  .table-responsive {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--thea-mobile-card-radius) !important;
  }

  .nav-tabs,
  .nav-pills {
    gap: .22rem;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    padding: .42rem .56rem !important;
  }

  /* Forms: keep readability, but reduce large Bootstrap gutters. */
  .form-control,
  .form-select,
  textarea.form-control {
    border-radius: .78rem !important;
  }

  /* Floating action buttons and ghost buttons stay tappable. */
  .thea-page .btn-ghost,
  .thea-directory-page .btn-ghost,
  .thea-page .btn-ghost-primary,
  .thea-directory-page .btn-ghost-primary {
    min-width: 2.55rem;
    min-height: 2.55rem;
  }

  /* Alpha rail on contacts/organizations should sit at the visual edge. */
  .alpha-rail,
  .alphabet-rail,
  .thea-alpha-rail {
    right: 2px !important;
  }

  .alpha-rail ~ .thea-directory-page,
  .alphabet-rail ~ .thea-directory-page,
  .thea-alpha-rail ~ .thea-directory-page {
    padding-right: 2.25rem !important;
  }

  /* Final mobile gutter guard: later module styles sometimes set 94vw or Bootstrap px gutters. */
  body .content > .container,
  body .content > .container-fluid,
  body .content > .responsive-container,
  body .content > .thea-page,
  body .content > .thea-work-page,
  body .content > .thea-directory-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 420px) {
  :root {
    --thea-mobile-edge-gap: 0px;
    --thea-mobile-inner-gap: 5px;
    --thea-mobile-card-gap: 5px;
  }

  body .content,
  body main.content,
  body .main-content,
  body .page-content,
  body .app-content,
  body #content,
  body .thea-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: .3rem !important;
  }

  .project-command-tiles {
    --bs-gutter-x: .3rem;
    --bs-gutter-y: .34rem;
  }

  .offer-card,
  .invoice-card,
  .thea-doc-card,
  .organization-card,
  .contact-card,
  .task-card,
  .inquiry-card,
  .project-card,
  .item-card,
  .call-card {
    padding: .68rem .72rem !important;
  }
}

/* THEACRM_MOBILE_CONTROLS_HOTFIX_26151
   Fix: after compact mobile gutters, Bootstrap .form-switch inputs could be shifted
   outside the viewport by their negative margin when nested in tight flex/grid cards.
   Keep switches inside cards and allow labels/text to shrink/wrap instead of pushing
   controls beyond the screen. Desktop layout is untouched.
*/
@media (max-width: 767.98px) {
  body .thea-page .thea-form .d-flex.align-items-start.justify-content-between.gap-3,
  body .thea-page .thea-form .d-flex.align-items-center.justify-content-between.gap-3 {
    min-width: 0 !important;
  }

  body .thea-page .thea-form .d-flex.align-items-start.justify-content-between.gap-3 > :first-child,
  body .thea-page .thea-form .d-flex.align-items-center.justify-content-between.gap-3 > :first-child {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .thea-page .thea-form .form-check.form-switch,
  body .thea-card .form-check.form-switch,
  body .thea-kpi .form-check.form-switch {
    flex: 0 0 auto !important;
    min-width: 3.35rem !important;
    padding-left: 2.65rem !important;
    margin-left: .35rem !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  body .thea-page .thea-form .form-check.form-switch .form-check-input,
  body .thea-card .form-check.form-switch .form-check-input,
  body .thea-kpi .form-check.form-switch .form-check-input {
    float: none !important;
    margin-left: -2.5rem !important;
    margin-top: .2rem !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
  }

  body .thea-page .thea-form .form-check.form-switch .form-check-label,
  body .thea-card .form-check.form-switch .form-check-label,
  body .thea-kpi .form-check.form-switch .form-check-label {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  body .thea-page .thea-form .border.rounded-4 .d-flex.align-items-start.justify-content-between.gap-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: .55rem !important;
    align-items: start !important;
  }

  body .thea-page .thea-form .border.rounded-4 .form-check.form-switch {
    min-width: 3.1rem !important;
    padding-left: 2.55rem !important;
    margin-left: .2rem !important;
  }
}

/* THEACRM_MOBILE_CONTROLS_HOTFIX_26152
   Follow-up to v2.6.151.
   Audit showed the previous selector did not cover the account page cards:
   #account-notifications uses Bootstrap .card + .form-check.form-switch.border.rounded-3.p-3.ps-5
   and base.html still referenced mobile-compact.css?v=260109. This block pins
   full-card mobile switches inside the viewport and keeps label text readable.
   Desktop layout is untouched.
*/
@media (max-width: 767.98px) {
  body #account-notifications .form-check.form-switch.border,
  body .thea-page .card .form-check.form-switch.border.rounded-3,
  body .thea-page .card .form-check.form-switch.border.rounded-4,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-3,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-4 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-top: .82rem !important;
    padding-right: .85rem !important;
    padding-bottom: .82rem !important;
    padding-left: 3.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  body #account-notifications .form-check.form-switch.border > .form-check-input,
  body .thea-page .card .form-check.form-switch.border.rounded-3 > .form-check-input,
  body .thea-page .card .form-check.form-switch.border.rounded-4 > .form-check-input,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-3 > .form-check-input,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-4 > .form-check-input {
    position: absolute !important;
    float: none !important;
    left: .82rem !important;
    top: 1.05rem !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body #account-notifications .form-check.form-switch.border > .form-check-label,
  body .thea-page .card .form-check.form-switch.border.rounded-3 > .form-check-label,
  body .thea-page .card .form-check.form-switch.border.rounded-4 > .form-check-label,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-3 > .form-check-label,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-4 > .form-check-label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body #account-notifications .form-check.form-switch.border > .form-check-label .fw-semibold,
  body .thea-page .card .form-check.form-switch.border > .form-check-label .fw-semibold,
  body .thea-page .thea-form .form-check.form-switch.border > .form-check-label .fw-semibold {
    display: inline-flex !important;
    align-items: center !important;
    gap: .2rem !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 420px) {
  body #account-notifications .form-check.form-switch.border,
  body .thea-page .card .form-check.form-switch.border.rounded-3,
  body .thea-page .card .form-check.form-switch.border.rounded-4,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-3,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-4 {
    padding-left: 3.05rem !important;
    padding-right: .72rem !important;
  }

  body #account-notifications .form-check.form-switch.border > .form-check-input,
  body .thea-page .card .form-check.form-switch.border.rounded-3 > .form-check-input,
  body .thea-page .card .form-check.form-switch.border.rounded-4 > .form-check-input,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-3 > .form-check-input,
  body .thea-page .thea-form .form-check.form-switch.border.rounded-4 > .form-check-input {
    left: .68rem !important;
  }
}