/**
 * Stakespark CRM — Global alignment & responsive layout
 * Auto-fits all sections across desktop, tablet, and mobile.
 */

/* ── Safe areas (notched phones) ── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ── Global alignment foundation ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.tab-pane {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.tab-pane > * {
  max-width: 100%;
}

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

/* Fluid form controls inside cards */
.card .form-control,
.card select.form-control,
.card textarea.form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card-header {
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.card-header .card-title {
  flex: 1 1 auto;
  min-width: 0;
}

.card-header .btn,
.card-header > div:last-child:not(.card-title) {
  flex-shrink: 0;
}

/* Inline flex rows — wrap on narrow screens */
[style*="display:flex"],
.flex-row-responsive {
  flex-wrap: wrap;
}

/* Two-column inline grids from JS/HTML */
.grid-2-ext,
.scraper-ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  width: 100%;
  align-items: start;
}

/* ── Layout sections ── */
.email-layout,
.wa-layout,
.wa-compose-layout {
  width: 100%;
  min-width: 0;
}

.email-layout > *,
.wa-layout > *,
.wa-compose-layout > * {
  min-width: 0;
}

.wa-right-panel,
.email-layout > .card:last-child {
  width: 100%;
}

/* Automation — AI autorespond side log */
.ai-autorespond-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.ai-autorespond-card > div > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}

.ai-autorespond-card > div > div:last-child {
  flex: 1 1 260px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.ai-autorespond-card [style*="width:280px"] {
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 1 !important;
}

/* Leads section */
.leads-pool-bar,
.leads-quick-filters,
.leads-assign-bar,
.leads-user-bar,
.leads-bulk-bar {
  width: 100%;
  align-items: stretch;
}

.leads-main-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.leads-main-card .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}

.leads-main-card .leads-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.leads-main-card .leads-toolbar .search-box {
  flex: 1 1 200px;
  min-width: 0;
}

.leads-main-card .leads-toolbar select.form-control,
.leads-main-card .leads-toolbar .btn {
  flex: 0 1 auto;
}

.leads-main-card .leads-toolbar select.form-control {
  width: auto;
  min-width: 110px;
  max-width: 100%;
}

#leads-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 2px 4px;
}

/* CRM Kanban */
.crm-pipeline-wrap {
  width: 100%;
  min-width: 0;
}

.crm-toolbar,
.crm-pipeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.crm-pipeline-toolbar {
  justify-content: space-between;
}

.crm-pipeline-toolbar .flex {
  flex-wrap: wrap;
  gap: 8px;
}

.kanban-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

/* Tasks */
.task-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 12px;
  width: 100%;
}

/* Admin tables */
.admin-users-card .table-wrap,
.admin-activity-card .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-users-card table.admin-users-table {
  min-width: 640px;
}

/* Bulk email / WhatsApp recipient panels */
.recipients-list {
  width: 100%;
}

/* Settings */
.settings-section {
  width: 100%;
  max-width: 100%;
}

/* Modals — center & fit */
.modal-overlay {
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  align-items: center;
  justify-content: center;
}

.modal,
.modal-box {
  margin: auto;
  max-height: calc(100vh - 32px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
}

/* Toast — avoid chat bubble overlap */
#toast-container {
  padding-bottom: var(--safe-bottom);
}

#live-chat-bubble {
  bottom: calc(24px + var(--safe-bottom));
  right: calc(24px + var(--safe-right));
}

/* Topbar alignment */
.topbar {
  padding-left: max(clamp(12px, 2vw, 24px), var(--safe-left));
  padding-right: max(clamp(12px, 2vw, 24px), var(--safe-right));
}

/* Auth screen scroll on small devices */
#auth-screen {
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: flex-start;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}

/* ═══════════════════════════════════════
   BREAKPOINTS
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .email-layout {
    grid-template-columns: 1fr minmax(220px, 280px);
  }

  .leads-main-card table.leads-table {
    min-width: 760px;
  }
}

@media (max-width: 1024px) {
  .email-layout,
  .wa-layout,
  .wa-compose-layout {
    grid-template-columns: 1fr !important;
  }

  .wa-compose-preview,
  .wa-preview-panel,
  .phone-mockup {
    position: relative !important;
    top: 0 !important;
  }

  .wa-compose-preview {
    order: -1;
  }

  .ai-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 420px;
  }

  .ai-sidebar {
    max-height: 240px;
  }

  .scraper-layout {
    grid-template-columns: 1fr !important;
  }

  .scraper-panel {
    position: relative !important;
    top: 0 !important;
  }

  .grid-2-ext,
  .scraper-ext-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide assigned column on tablet when not in assigned pool */
  .leads-main-card table.leads-table {
    min-width: 680px;
  }

  .leads-main-card .col-assigned:not([style*="display:"]) {
    display: none;
  }

  #live-chat-window {
    width: min(360px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))) !important;
  }
}

@media (max-width: 768px) {
  .content {
    padding: max(12px, var(--safe-left)) max(12px, var(--safe-right));
  }

  .leads-main-card table.leads-table {
    min-width: 560px;
  }

  /* Hide less critical columns on mobile */
  .leads-main-card table.leads-table thead th:nth-child(3),
  .leads-main-card table.leads-table tbody td:nth-child(3),
  .leads-main-card table.leads-table thead th:nth-child(6),
  .leads-main-card table.leads-table tbody td:nth-child(6) {
    display: none;
  }

  .leads-main-card .leads-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .leads-main-card .leads-toolbar .search-box,
  .leads-main-card .leads-toolbar select.form-control,
  .leads-main-card .leads-toolbar .btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .leads-assign-bar select.form-control,
  .leads-assign-bar input.form-control {
    width: 100% !important;
    max-width: 100% !important;
  }

  .crm-toolbar,
  .crm-pipeline-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-toolbar .form-control,
  .crm-toolbar .btn,
  .crm-pipeline-toolbar .btn {
    width: 100%;
  }

  .kanban-col {
    min-width: min(85vw, 240px) !important;
  }

  .task-stats {
    grid-template-columns: 1fr !important;
  }

  .ai-autorespond-card > div > div:first-child,
  .ai-autorespond-card > div > div:last-child {
    flex: 1 1 100%;
  }

  .autorespond-log {
    max-height: 180px;
  }

  /* Bulk email load-leads row */
  #tab-email .card [style*="display:flex"] {
    flex-direction: column;
    align-items: stretch !important;
  }

  #tab-email .card [style*="display:flex"] .btn {
    width: 100%;
  }

  .admin-users-card table.admin-users-table {
    min-width: 520px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-header .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .leads-main-card table.leads-table {
    min-width: 480px;
  }

  /* Keep only essential lead columns */
  .leads-main-card table.leads-table thead th:nth-child(8),
  .leads-main-card table.leads-table tbody td:nth-child(8) {
    display: none;
  }

  .leads-qf {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .stat-icon {
    display: none;
  }

  #live-chat-bubble {
    bottom: calc(12px + var(--safe-bottom));
    right: calc(8px + var(--safe-right));
  }

  #live-chat-window {
    width: calc(100vw - var(--safe-left) - var(--safe-right)) !important;
    max-width: 100vw !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .kanban-col {
    min-width: min(92vw, 220px) !important;
  }

  .modal-footer {
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 360px) {
  .leads-main-card table.leads-table {
    min-width: 420px;
  }

  .brand-name {
    font-size: 13px;
  }

  .nav-item {
    padding: 9px 14px;
    font-size: 12px;
  }
}

/* Landscape phones — reduce vertical pressure */
@media (max-height: 500px) and (orientation: landscape) {
  .modal,
  .modal-box {
    max-height: 92vh;
  }

  .ai-layout {
    min-height: 280px;
  }

  .crm-pipeline-wrap {
    height: auto !important;
    min-height: 240px;
  }
}

/* Print */
@media print {
  .content {
    overflow: visible !important;
  }

  .table-wrap {
    overflow: visible !important;
  }
}