/* ============ mobile.css v2 — app-style mobile experience ============
   Desktop is untouched: every rule lives inside max-width media queries.
   ≤768px the CRM becomes an app: labeled bottom nav, card-based lists,
   floating Add button, full-screen lead view with a big action grid. */

@media (max-width: 768px) {

  /* ================= bottom navigation bar (with labels) ================= */
  .rail {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 62px;
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: 0; gap: 0; box-sizing: border-box;
    border-right: none; border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px -8px rgba(18, 22, 33, .18);
  }
  .rail-logo, .rail-spacer { display: none; }
  .rail-btn {
    flex: 1; min-width: 0; width: auto; height: 54px; font-size: 17px;
    flex-direction: column; gap: 1px; display: flex; align-items: center; justify-content: center;
  }
  .rail-btn::after {
    font-size: 8.5px; font-weight: 700; letter-spacing: .02em; line-height: 1;
    color: inherit;
  }
  a.rail-btn[data-nav="dashboard"]::after { content: 'Stats'; }
  a.rail-btn[data-nav="leads"]::after { content: 'Leads'; }
  a.rail-btn[data-nav="search"]::after { content: 'Search'; }
  #rail-add::after { content: 'Add'; }
  a.rail-btn[data-nav="followups"]::after { content: 'Calls'; }
  a.rail-btn[data-nav="tasks"]::after { content: 'Tasks'; }
  #rail-settings::after { content: 'More'; }

  /* fly menus open upward from the bottom bar */
  .fly { left: 50%; top: auto; bottom: 56px; transform: translate(-50%, 4px); }
  .has-fly:hover .fly, .has-fly:focus-within .fly { transform: translate(-50%, 0); }
  #rail-settings .fly { left: auto; right: -8px; transform: translate(0, 4px); }
  #rail-settings:hover .fly, #rail-settings:focus-within .fly { transform: translate(0, 0); }
  .fly a { padding: 11px 12px; font-size: 14px; }

  /* ================= shell / topbar / content ================= */
  .shell { margin-left: 0; }
  .main { padding: 12px 12px calc(88px + env(safe-area-inset-bottom)); }
  .topbar { padding: 0 12px; height: 50px; }
  .topbar-right { gap: 10px; }

  /* touch-friendly forms (16px stops iOS focus zoom) */
  input, select, textarea { font-size: 16px !important; }
  .btn { min-height: 40px; }
  input[type="datetime-local"], input[type="date"], input[type="month"] { max-width: 100%; }

  /* ================= LEADS LIST → CARDS ================= */
  .table-wrap.leads-table { background: transparent; border: none; box-shadow: none; overflow: visible; }
  .leads-table table, .leads-table tbody { display: block; width: 100%; }
  .leads-table thead { display: none; }
  .leads-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "name    name    name"
      "status  rating  phone"
      "meta1   meta2   meta3"
      "fu      fu      created";
    gap: 7px 10px; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--sh-sm); padding: 13px 14px; margin-bottom: 10px;
  }
  .leads-table tbody tr:hover { background: var(--surface); }
  .leads-table td { display: flex; align-items: center; border: none; padding: 0; white-space: normal; }
  .leads-table td:nth-child(1) { position: absolute; top: 11px; right: 12px; }  /* checkbox */
  .leads-table td:nth-child(1) input { width: 20px; height: 20px; }
  .leads-table td:nth-child(2) { grid-area: name; display: block; font-size: 15.5px; padding-right: 34px; }
  .leads-table td:nth-child(2) .sub { margin-top: 1px; }
  .leads-table td:nth-child(3) { grid-area: status; }
  .leads-table td:nth-child(4) { grid-area: rating; }
  .leads-table td:nth-child(5) { grid-area: phone; justify-self: end; font-weight: 650; font-size: 13.5px; }
  .leads-table td:nth-child(6) { grid-area: meta1; }
  .leads-table td:nth-child(7) { grid-area: meta2; }
  .leads-table td:nth-child(8) { grid-area: meta3; justify-self: end; }
  .leads-table td:nth-child(6), .leads-table td:nth-child(7), .leads-table td:nth-child(8) {
    font-size: 12px; color: var(--text-2);
  }
  .leads-table td:nth-child(9) { grid-area: fu; font-size: 12px; color: var(--amber); font-weight: 600; }
  .leads-table td:nth-child(10) { grid-area: created; justify-self: end; font-size: 11.5px; color: var(--text-3); }

  /* ================= SEARCH RESULTS → CARDS ================= */
  #sp-results { background: transparent; border: none; box-shadow: none; overflow: visible; }
  #sp-results table, #sp-results tbody { display: block; width: 100%; }
  #sp-results tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "name pill" "course time";
    gap: 6px 10px; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--sh-sm); padding: 12px 14px; margin-bottom: 10px;
  }
  #sp-results td { display: flex; align-items: center; border: none; padding: 0; white-space: normal; }
  #sp-results td:nth-child(1) { grid-area: name; display: block; font-size: 15px; }
  #sp-results td:nth-child(2) { grid-area: pill; justify-self: end; }
  #sp-results td:nth-child(3) { grid-area: course; font-size: 12px; color: var(--text-2); }
  #sp-results td:nth-child(4) { grid-area: time; justify-self: end; font-size: 11.5px; }

  /* ================= FOLLOW-UPS → CALL QUEUE CARDS ================= */
  #fu-table { background: transparent; border: none; box-shadow: none; overflow: visible; }
  #fu-table table, #fu-table tbody { display: block; width: 100%; }
  #fu-table thead { display: none; }
  #fu-table tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "name actions" "status actions" "when assignee";
    gap: 6px 12px; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--sh-sm); padding: 13px 14px; margin-bottom: 10px;
  }
  #fu-table td { display: flex; align-items: center; border: none; padding: 0; white-space: normal; }
  #fu-table td:nth-child(1) { grid-area: name; display: block; font-size: 15px; }
  #fu-table td:nth-child(2) { display: none; }                 /* phone (in call button already) */
  #fu-table td:nth-child(3) { grid-area: status; }
  #fu-table td:nth-child(4) { grid-area: when; font-size: 12.5px; }
  #fu-table td:nth-child(5) { grid-area: assignee; justify-self: end; font-size: 12px; color: var(--text-2); }
  #fu-table td:nth-child(6) { grid-area: actions; gap: 8px; }
  #fu-table td:nth-child(6) .btn { min-width: 46px; min-height: 46px; justify-content: center; border-radius: 12px; }

  /* ================= LEAD VIEW → APP SCREEN ================= */
  .lead-overlay { width: 100%; min-width: 0; border-radius: 0; }
  .ov-nav { padding: 10px 12px 0; }
  .ov-head { padding: 10px 14px 0; }
  .ov-head h2 { font-size: 18px; }
  .ov-sub { padding: 10px 14px 14px; gap: 9px; }
  .ov-fields { padding: 14px 14px 0; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
  .ov-showmore { margin: 8px 14px 0; }
  .ov-actions {
    padding: 10px 8px; gap: 2px;
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .ov-act { padding: 9px 2px; font-size: 9.5px; gap: 5px; }
  .ov-act .ico .ic { width: 22px; height: 22px; }
  .ov-act#act-call, a.ov-act[href^="tel"] { color: #fff; background: var(--green); border-radius: 12px; }
  a.ov-act[href^="tel"]:hover { background: var(--green); color: #fff; filter: brightness(1.05); }
  .ov-composer { padding: 14px; }
  .ov-tabs { padding: 12px 14px 0; }
  .ov-body { padding: 12px 14px 30px; }
  .act-item .meta { flex-direction: column; align-items: flex-end; gap: 2px; }
  .task-add { display: grid; grid-template-columns: 1fr; gap: 8px; }

  /* ================= LIST TOOLBAR + floating Add button ================= */
  .list-toolbar .right .btn-primary {
    position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 60;
    border-radius: 999px; padding: 13px 20px; font-size: 14px; font-weight: 700;
    box-shadow: 0 10px 24px -6px rgba(45, 95, 227, .55);
  }
  .list-toolbar .right .btn { min-height: 36px; }

  /* ================= conditions / chart / page furniture ================= */
  .cond-bar { padding: 11px 12px; }
  .sort-row input#save-view-name { width: 130px !important; }
  .chart-tabs { flex-wrap: nowrap; overflow-x: auto; width: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .chart-tab { white-space: nowrap; padding: 9px 13px; }
  .chart-panel { padding: 12px; }
  .page-head h2, .view-title { font-size: 17px; }
  .stages-grid { grid-template-columns: 1fr; }

  /* add / edit lead forms single column */
  .add-form .fgrid, .fgrid, .form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .add-foot .btn { width: 100%; }

  /* settings setup forms (facebook / voice / whatsapp) stack to one column */
  .mgrid { grid-template-columns: 1fr !important; }
  .mgrid .btn { width: 100%; }

  /* dashboard: 2-up KPI cards, comfortable sections */
  .dash-cards { grid-template-columns: 1fr 1fr; }
  .dash-section { padding: 14px 13px; }
  .dash-section h3 { font-size: 14px; flex-wrap: wrap; }

  /* kanban board: slimmer columns, taller usable area */
  .board-col { width: 205px; max-height: calc(100dvh - 320px); }

  /* calendar: compact cells */
  .cal-cell { min-height: 48px; padding: 4px 5px; }
  .cal-dot { min-width: 15px; height: 15px; font-size: 9.5px; }
  .cal-legend { margin-left: 0; }

  /* generic tables (settings, users, fb leads) stay tables but scroll smoothly */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 10px; }

  /* modals near-fullscreen */
  .modal { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; max-height: 88dvh; overflow-y: auto; }
}

@media (max-width: 560px) {
  .top-counts { display: none; }
  .org { font-size: 12.5px; }
  .login-card { margin: 0 14px; width: 100%; }
  .ov-fields { grid-template-columns: 1fr 1fr; }
}