/* =========================================================
   TCABA GLOBAL RESPONSIVE SYSTEM
   File: /Public/mobile.css
   Load AFTER style.css.
   This file intentionally does NOT redefine the navbar.
========================================================= */

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

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

body > * {
  max-width: 100%;
}

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

.tcaba-page,
.container,
.page-wrap {
  width: calc(100% - 44px);
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

.tcaba-card {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
}

.tcaba-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tcaba-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.tcaba-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px 220px auto;
  gap: 12px;
}

.container,
.page-wrap,
.tcaba-page,
.page-hero,
.hero,
.header,
.main-card,
.card {
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .container,
  .page-wrap,
  .tcaba-page {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-hero,
  .hero,
  .therapist-header,
  .insurance-header {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }

  .page-hero h1,
  .hero h1,
  .therapist-header h1,
  .insurance-header h1 {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  .page-hero p,
  .hero p,
  .therapist-header p,
  .insurance-header p {
    font-size: 14px !important;
  }
}

@media (max-width: 520px) {
  .container,
  .page-wrap,
  .tcaba-page,
  .page-hero,
  .hero,
  .therapist-header,
  .insurance-header {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
  }
}

/* Grids */
@media (max-width: 1200px) {
  .tcaba-grid,
  .metric-grid,
  .summary-grid,
  .dashboard-grid,
  .stats-grid,
  .grid,
  .cards-grid,
  .location-grid,
  .location-summary-grid,
  .insurance-location-grid,
  .location-stats-grid,
  .client-location-grid,
  .insurance-client-grid,
  [class*="Grid"],
  [class*="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  .tcaba-grid,
  .metric-grid,
  .summary-grid,
  .dashboard-grid,
  .stats-grid,
  .grid,
  .cards-grid,
  .location-grid,
  .location-summary-grid,
  .insurance-location-grid,
  .location-stats-grid,
  .client-location-grid,
  .insurance-client-grid,
  [class*="Grid"],
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .metric-card,
  .summary-card,
  .stat-card,
  .card,
  .item-card,
  .facility-card,
  .insurance-card,
  .location-summary-card,
  .location-stat-card,
  .insurance-client-card,
  .client-card,
  .client-mini-card,
  [class*="Card"],
  [class*="card"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Toolbars */
@media (max-width: 1000px) {
  .tcaba-toolbar,
  .toolbar,
  .premium-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tcaba-toolbar input,
  .tcaba-toolbar select,
  .tcaba-toolbar button,
  .toolbar input,
  .toolbar select,
  .toolbar button,
  .premium-toolbar input,
  .premium-toolbar select,
  .premium-toolbar button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
  }
}

@media (max-width: 640px) {
  .tcaba-toolbar,
  .toolbar,
  .premium-toolbar {
    grid-template-columns: 1fr !important;
  }
}

/* Rows / Panels */
@media (max-width: 1100px) {
  .tcaba-row,
  .insurance-row,
  .facility-row,
  .therapist-card-row,
  .client-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  .tcaba-row,
  .insurance-row,
  .facility-row,
  .therapist-card-row,
  .client-row {
    grid-template-columns: 1fr !important;
    padding: 15px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .role-block,
  .client-block,
  .supervisor-block,
  .compliance-block,
  .contact-panel,
  .client-count-panel {
    border-left: none !important;
    border-top: 1px solid #e5e7eb !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    margin-left: 0 !important;
  }
}

/* Panels */
@media (max-width: 900px) {
  .facility-detail,
  .facility-detail-panel,
  .location-client-section,
  .location-section,
  .client-list,
  .card-list,
  .facility-client-list,
  .insurance-client-list {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

/* Tables scroll inside their card only */
@media (max-width: 1100px) {
  .main-card,
  .table-card,
  .table-wrapper,
  .clients-table-wrap,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  table:not(.status-table) {
    width: max-content !important;
    min-width: 860px !important;
    max-width: none !important;
    display: table !important;
    white-space: nowrap !important;
  }

  table:not(.status-table) th,
  table:not(.status-table) td {
    white-space: nowrap !important;
  }
}

/* Buttons */
.actions,
.row-actions,
.card-actions,
.modal-buttons,
.modal-actions,
.hero-actions,
.address-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.actions button,
.row-actions button,
.card-actions button,
.modal-buttons button,
.modal-actions button,
.hero-actions button,
.address-actions button {
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .actions button,
  .row-actions button,
  .card-actions button,
  .modal-buttons button,
  .modal-actions button,
  .hero-actions button,
  .address-actions button,
  .open-therapist-btn,
  .add-btn,
  .hero-btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 42px !important;
  }
}

/* Forms / Modals */
@media (max-width: 900px) {
  .form-grid,
  .clean-form,
  .address-grid {
    grid-template-columns: 1fr !important;
  }

  .full-width,
  .section-title {
    grid-column: span 1 !important;
  }

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

  .modal-backdrop {
    align-items: flex-start !important;
    padding: 10px !important;
    overflow-y: auto !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    overflow-y: auto !important;
  }

  .drawer-backdrop {
    justify-content: center !important;
  }

  .drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .modal {
    border-radius: 12px !important;
    padding: 14px !important;
  }

  .modal h2 {
    font-size: 22px !important;
  }

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

/* Final cut-off safety */
@media (max-width: 900px) {
  body * {
    max-width: 100%;
  }

  .container *,
  .page-wrap *,
  .tcaba-page * {
    min-width: 0;
  }
}