/*
  Shared CRM responsive layer.
  This file keeps desktop layouts intact and only tightens behavior on tablet/mobile.
*/

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

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

.table-responsive,
.table-wrap,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
}

.table {
  min-width: max-content;
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100dvh - 1rem);
}

.btn,
.form-control,
.form-select,
.input-group-text {
  max-width: 100%;
}

.btn {
  white-space: normal;
}

.dropdown-menu {
  max-width: calc(100vw - 24px);
  overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 100%;
  }

  .card,
  .card-panel,
  .control-panel,
  .metric-card,
  .panel,
  .hero,
  .cardx {
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  .page-shell,
  .wrap,
  .container,
  .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .topbar,
  .section-head,
  .hero,
  .d-flex.justify-content-between {
    gap: 12px;
  }

  .row {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.9rem;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-content {
    border-radius: 14px;
  }

  .sticky-top,
  .position-sticky {
    position: static !important;
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  h1,
  .h1 {
    font-size: 1.65rem !important;
    line-height: 1.18;
  }

  h2,
  .h2 {
    font-size: 1.35rem !important;
    line-height: 1.2;
  }

  h3,
  .h3 {
    font-size: 1.15rem !important;
  }

  .btn {
    min-height: 42px;
  }

  .btn-group,
  .btn-toolbar,
  .quick-actions,
  .chips,
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-group > .btn {
    border-radius: 10px !important;
    flex: 1 1 auto;
  }

  .form-control,
  .form-select {
    min-height: 44px;
  }

  .input-group {
    flex-wrap: wrap;
  }

  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .btn,
  .input-group > .input-group-text {
    flex: 1 1 100%;
    width: 100%;
    border-radius: 10px !important;
    margin-top: 6px;
  }

  .table-responsive {
    border-radius: 12px;
  }

  .table th,
  .table td {
    white-space: nowrap;
    vertical-align: middle;
  }

  .modal-dialog {
    max-width: none;
    margin: 0;
    min-height: 100dvh;
  }

  .modal-content {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 3;
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
  }

  .offcanvas,
  .quick-view,
  .lead-quick-view,
  .side-panel,
  .drawer,
  .right-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 575.98px) {
  .page-shell,
  .wrap,
  .container,
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .card-panel,
  .control-panel,
  .metric-card,
  .panel,
  .hero,
  .cardx,
  .section-box {
    border-radius: 12px !important;
  }

  .card-body,
  .cardx-body,
  .control-panel-body,
  .body {
    padding: 14px !important;
  }

  .row > [class*="col-"] {
    min-width: 0;
  }

  .d-flex {
    min-width: 0;
  }

  .text-truncate {
    max-width: 100%;
  }

  .badge,
  .pill,
  .status-pill {
    white-space: normal;
    line-height: 1.25;
  }
}

/* CRM dashboard/sidebar family */
@media (max-width: 991.98px) {
  .wrapper {
    min-width: 0;
    display: block !important;
  }

  #sidebar,
  .ct-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -310px !important;
    width: min(82vw, 290px) !important;
    max-width: min(82vw, 290px) !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    z-index: 1050 !important;
    transition: left .22s ease !important;
  }

  .wrapper.sidebar-toggled #sidebar,
  .wrapper.sidebar-toggled .ct-sidebar {
    left: 0 !important;
  }

  .main-content,
  .content,
  .page-content,
  #content {
    width: 100% !important;
    min-width: 0;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  #sidebarToggle {
    position: sticky;
    top: 10px;
    z-index: 1040;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(13, 110, 253, .22);
  }

  #content > .d-flex.justify-content-between {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #content form.d-flex {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  #content form.d-flex .form-control,
  #content form.d-flex .form-select,
  #content form.d-flex .btn,
  #content form.d-flex input {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Lead command center */
@media (max-width: 767.98px) {
  .lead-command,
  .lead-shell,
  .lead-dashboard-shell,
  .dashboard-shell {
    padding: 10px !important;
  }

  .filters-panel,
  .filter-panel,
  .filter-grid,
  .toolbar,
  .actions-bar,
  .bulk-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .lead-row,
  .permission-row,
  .target-row {
    grid-template-columns: 1fr !important;
  }
}