/* 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;
  }
}