/* ============================================================================
 * mobile.css — Mobile-only redesign layer for Deal Flow Pro.
 * Everything here is gated behind @media (max-width:720px), so the desktop
 * experience is completely unchanged. Loaded AFTER styles.css so it wins.
 * ========================================================================== */

/* Bottom nav + More sheet are hidden by default (desktop) */
.mnav, .msheet-bg, .dialer-bg { display: none; }

@media (max-width: 720px) {

  /* ---------------------- Light palette (variable flip) ---------------------- */
  :root {
    --bg:#eef1f7;
    --text:#131722; --muted:#5b6472;
    --accent:#dc2626; --accent2:#dc2626;
    --line:#e8ebf2; --line-soft:#eef1f6;
    --panel:#ffffff; --panel2:#f7f8fb;
    --surface:#ffffff; --surface-lite:#f4f6fa;
    --radius:18px; --radius-sm:14px;
    --sheen:0 0 #0000;
    --shadow:0 6px 20px rgba(19,23,34,.08);
  }
  body { background: var(--bg); color: var(--text); }
  body::before { display: none !important; }              /* kill dark ambient blobs */
  a { color: var(--accent2); }

  /* Neutralize the dark liquid-glass override block on mobile */
  .card, .col, .tablewrap, .modal, .panelbox, .taskform, .gcard, .kpi {
    background: #fff !important;
    border-color: var(--line) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: var(--shadow) !important;
  }

  /* ---------------------- Slim top bar (brand only) ---------------------- */
  header.topbar {
    position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(19,23,34,.05); -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; gap: 10px; flex-wrap: nowrap;
  }
  header.topbar nav.tabs,
  header.topbar .mode-badge,
  header.topbar #logoutBtn,
  header.topbar .who,
  header.topbar .spacer { display: none !important; }
  header.topbar .logo { color: var(--text); font-size: 18px; }
  header.topbar .logo span { color: var(--accent); }

  #app > main { margin-left: 0; padding: 14px 16px calc(var(--mnav-h, 74px) + 24px); }

  /* ---------------------- Bottom tab bar ---------------------- */
  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: flex-start;
    height: calc(74px + env(safe-area-inset-bottom));
    padding: 8px 6px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--line);
  }
  body:not(.app-live) .mnav { display: none; }
  .mtab {
    flex: 1; background: none; border: none; padding: 5px 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #97a0b0; position: relative;
  }
  .mtab .mti { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
  .mtab .mti svg { width: 24px; height: 24px; }
  .mtab .mtl { font-size: 10px; font-weight: 700; }
  .mtab.on { color: var(--accent); }
  /* Contacts is a normal tab now — only the ACTIVE tab is highlighted red */
  .mtab.center .mti { width: 26px; height: 26px; margin-top: 0; border-radius: 0;
    background: none; box-shadow: none; color: inherit; }
  .mtab.center .mtl { color: inherit; }
  .mtab .mnb {
    position: absolute; top: 0; right: calc(50% - 22px);
    background: #dc2626; color: #fff; font-size: 9px; font-weight: 800;
    min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
  }

  /* ---------------------- More sheet ---------------------- */
  .msheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(19,23,34,.42);
    display: none; align-items: flex-end; }
  .msheet-bg.open { display: flex; animation: mfade .2s ease; }
  @keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
  .msheet {
    width: 100%; background: var(--bg); border-radius: 26px 26px 0 0;
    padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(19,23,34,.25); animation: mup .28s ease;
  }
  @keyframes mup { from { transform: translateY(100%) } to { transform: none } }
  .msheet .mgrip { width: 42px; height: 5px; border-radius: 3px; background: #cfd5e0; margin: 6px auto 14px; }
  .msheet h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--text); }
  .mitem {
    width: 100%; text-align: left; display: flex; align-items: center; gap: 14px;
    padding: 13px 14px; background: #fff; border: none; border-radius: 14px; margin-bottom: 9px;
    box-shadow: var(--shadow);
  }
  .mitem .mmi { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; color: #fff;
    display: flex; align-items: center; justify-content: center; }
  .mitem .mmi svg { width: 20px; height: 20px; }
  .mitem .mmt { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
  .mitem .mms { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 1px; }
  .mitem .marw { margin-left: auto; color: #b6bdc9; font-size: 22px; }
  .mitem.mlogout .mmt { color: #dc2626; }

  /* ---------------------- Compact dashboard (injected #mDash) ---------------------- */
  #view-dashboard > .dash { display: none; }        /* hide the heavy desktop analytics */
  #mDash { display: block; }
  .mhero {
    background: linear-gradient(135deg,#ff4b3a 0%,#d10000 100%);
    border-radius: 20px; padding: 18px 20px; color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 12px 30px rgba(214,40,40,.3); margin-bottom: 14px;
  }
  .mhero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px;
    border-radius: 50%; background: rgba(255,255,255,.13); }
  .mhero .mh-l { font-size: 12.5px; opacity: .92; font-weight: 600; }
  .mhero .mh-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 2px; }
  .mhero .mh-sub { font-size: 12.5px; opacity: .95; position: relative; z-index: 2; }
  .mhero .mh-sub b { background: rgba(255,255,255,.22); padding: 1px 7px; border-radius: 6px; }

  .mkpis { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }
  .mkpi { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
  .mkt { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
  .mkdot { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .mkdot svg { width: 14px; height: 14px; }
  .mkdot.blu { background: #e9f1fe; color: #3b82f6; } .mkdot.amb { background: #fef4e3; color: #f59e0b; }
  .mkdot.pur { background: #f0ebfe; color: #8b5cf6; } .mkdot.grn { background: #e7f8f1; color: #10b981; }
  .mkv { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; line-height: 1; color: var(--text); }
  .mkd { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }

  .mpanel { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
  .mph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .mph h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
  .mph a { font-size: 12px; color: var(--accent); font-weight: 700; }
  .mfunnel { display: flex; flex-direction: column; gap: 9px; }
  .mfrow { display: flex; align-items: center; gap: 10px; }
  .mflbl { width: 74px; flex: 0 0 74px; font-size: 12px; color: var(--muted); font-weight: 600; }
  .mftrack { flex: 1; height: 10px; background: #f1f3f8; border-radius: 6px; overflow: hidden; }
  .mffill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(135deg,#ff4b3a,#d10000); }
  .mfval { width: 26px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--text); }
  .mtoday .mtrow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid #f1f3f8; }
  .mtoday .mtrow:last-child { border-bottom: none; }
  .mtck { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #e8ebf2; flex: 0 0 auto; background: #fff; }
  .mtnm { font-size: 13.5px; font-weight: 700; color: var(--text); }
  .mtsub { font-size: 11.5px; color: #8a93a3; }
  .mempty { color: #8a93a3; text-align: center; padding: 16px; font-weight: 600; font-size: 13px; }

  /* ---------------------- Contacts as cards (injected #mContacts) ---------------------- */
  #view-contacts > *:not(#mContacts) { display: none !important; }   /* hide native table + filter wall */
  #mContacts { display: block; }
  .mchead { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
  .mchead h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; flex: 1; color: var(--text); }
  .mcnt { font-size: 12px; font-weight: 800; color: var(--accent); background: #fee2e2; padding: 4px 10px; border-radius: 9px; }
  .mcsearch { display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 13px;
    padding: 11px 14px; box-shadow: var(--shadow); margin-bottom: 11px; }
  .mcsearch svg { width: 18px; height: 18px; color: #8a93a3; flex: 0 0 auto; }
  .mcsearch input { border: none; outline: none; flex: 1; font: inherit; font-size: 14px; color: var(--text); background: transparent; }
  .maddbtn { width: 100%; border: none; border-radius: 13px; padding: 12px; margin-bottom: 14px;
    background: linear-gradient(135deg,#ff4b3a,#d10000); color: #fff; font: inherit; font-weight: 800; font-size: 14px;
    box-shadow: 0 8px 18px rgba(214,40,40,.28); }
  .mclist { display: flex; flex-direction: column; gap: 11px; }
  .mccard { background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--shadow);
    display: flex; gap: 12px; align-items: flex-start; }
  .mcav { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; color: #fff; font-weight: 800; font-size: 15px;
    display: flex; align-items: center; justify-content: center; }
  .mcmid { flex: 1; min-width: 0; }
  .mcn { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
  .mcaddr { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mctags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .mstag { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px; letter-spacing: .02em; text-transform: uppercase; }
  .mstag.new { background: #fef4e3; color: #b45309; }
  .mstag.offer { background: #e9f1fe; color: #1d4ed8; }
  .mstag.acc { background: #e7f8f1; color: #047857; }
  .mstag.contract { background: #f0ebfe; color: #6d28d9; }
  .mstag.dead { background: #eef1f6; color: #8a93a3; }
  .mstag.zillow { background: #e7f8f1; color: #0e8a5f; }
  .mcact { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
  .mqbtn { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
  .mqbtn svg { width: 17px; height: 17px; }
  .mqbtn.call { background: #10b981; }
  .mqbtn.text { background: linear-gradient(135deg,#ff4b3a,#d10000); }

  /* ---------------------- Light theme touch-ups for remaining native views ---------------------- */
  main { max-width: 100%; }
  .viewhead h2 { color: var(--text); }
  .field label, .subhead, .hint, th, .kv b { color: var(--muted); }
  .field input, .field select, .field textarea, .search, .filterbar select, .filterbar input, .bulkbar select {
    background: #fff !important; border: 1px solid var(--line) !important; color: var(--text) !important;
  }
  .field input::placeholder, .search::placeholder, input::placeholder { color: #9aa3b2; }
  table th { background: #f7f8fb; color: var(--muted); }
  table td { color: var(--text); border-bottom-color: var(--line); }
  tr:hover td { background: #f7f8fb; }
  .btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }

  /* Pipeline board columns → light, comfy width */
  .board .col { background: #fff; border-color: var(--line); flex: 0 0 84%; }
  .col h3 { color: var(--text); }
  .pcard { background: #fff; border-color: var(--line); box-shadow: 0 2px 8px rgba(19,23,34,.06); }
  .pcard .nm { color: var(--text); }

  /* Tasks list light */
  .taskitem { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
  .taskitem .tt { color: var(--text); }

  /* Modal stays full-screen (native rule) but on light surface */
  .modal .mhead { background: #fff !important; }
  .modal .mhead h3, .modal .sec, .modal label { color: var(--text); }
  .overlay { background: rgba(19,23,34,.4); }

  /* Conversations already light in the base — just ensure comfortable list width */
  .conv-list { flex-basis: 200px; width: 200px; }

  /* ---------------------- Bold buttons on light theme ---------------------- */
  /* MOBILE BUTTON POLISH */
  .btn { background: linear-gradient(135deg,#ff4b3a,#d10000) !important; color:#fff !important;
    border: 1px solid transparent !important; box-shadow: 0 6px 16px rgba(214,40,40,.24) !important; }
  .btn.ghost { background:#fff !important; color:var(--text) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow) !important; }
  .btn.danger { background:#dc2626 !important; }
  .btn.blue { background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important; border-color:transparent !important; color:#fff !important; }


  /* ---------------------- Info banners readable on light (Lead Engine etc.) ---------------------- */
  .banner { background:#eef4ff !important; border:1px solid #cddcff !important; color:#22344f !important; line-height:1.55; }
  .banner b, .banner code { color:#0f2440; background:transparent; }
  .status-badge.ls-new { background:#fef3c7 !important; color:#92400e !important; border-color:#fcd34d !important; }
  .status-badge.ls-queue { background:#e0edff !important; color:#1d4ed8 !important; border-color:#bcd4ff !important; }
  .status-badge.ls-working { background:#eef1f6 !important; color:#475467 !important; border-color:#e0e4ec !important; }

  /* ---------------------- Settings: full-width, no horizontal overflow ---------------------- */
  #view-settings .panelbox, #view-settings .sec, #view-settings .adminbar,
  #view-settings .banner, #view-settings > * { max-width:100% !important; width:100% !important; }
  #view-settings .panelbox { padding:16px; }
  #view-settings .grid2, #view-settings .grid3 { grid-template-columns:1fr !important; }
  #view-settings input, #view-settings select, #view-settings textarea { max-width:100% !important; width:100% !important; }
  /* Turn wide settings tables into stacked rows (kills sideways scrolling) */
  #view-settings table { min-width:0 !important; width:100% !important; }
  #view-settings table thead { display:none; }
  #view-settings table tr { display:block; border:1px solid var(--line); border-radius:12px;
    margin-bottom:8px; padding:4px 2px; background:#fff; }
  #view-settings table td { display:flex; justify-content:space-between; gap:12px; text-align:right;
    border:none !important; padding:7px 12px; color:var(--text); }
  #view-settings table td .btn { white-space:nowrap; }

  /* ---------------------- Inbox: single-column, app-like ---------------------- */
  #view-conversations .conv { height: calc(100vh - 168px); min-height:0; }
  #view-conversations .conv-body { flex-direction: column; }
  #view-conversations .conv-list { flex:0 0 auto; width:100% !important; max-height:42vh;
    border-right:none; border-bottom:1px solid var(--line); }
  #view-conversations .conv-detail { width:100%; }
  #view-conversations .conv-h { flex-wrap:wrap; gap:8px; }
  #view-conversations .conv-actions { width:100%; display:flex; gap:8px; }
  #view-conversations .conv-actions .gpill { flex:1; text-align:center; padding:11px 8px; font-size:13px; font-weight:700; }
  #view-conversations .conv-item { padding:14px; }
  #view-conversations .conv-av { width:42px; height:42px; flex-basis:42px; }

  /* ---------------------- Dialer (New call keypad) ---------------------- */
  .dialer-bg { position:fixed; inset:0; z-index:120; background:rgba(19,23,34,.5); display:none; align-items:flex-end; }
  .dialer-bg.open { display:flex; animation:mfade .2s ease; }
  .dialer { width:100%; background:var(--bg); border-radius:26px 26px 0 0;
    padding:12px 20px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(19,23,34,.3); animation:mup .28s ease; }
  .dialer .mgrip { width:42px; height:5px; border-radius:3px; background:#cfd5e0; margin:4px auto 8px; }
  .dialer .dmatch { text-align:center; font-size:13px; font-weight:800; color:var(--accent); min-height:18px; }
  .dialer .dnum { text-align:center; font-size:30px; font-weight:700; letter-spacing:.01em; min-height:42px;
    color:var(--text); word-break:break-all; padding:2px 0 8px; }
  .dkeys { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:0 0 14px; }
  .dkey { background:#fff; border:none; border-radius:16px; padding:13px 0; font-size:24px; font-weight:700;
    color:var(--text); box-shadow:var(--shadow); line-height:1; }
  .dkey small { display:block; font-size:9px; font-weight:800; color:var(--muted); letter-spacing:.14em; margin-top:2px; height:11px; }
  .dialer-actions { display:flex; align-items:center; justify-content:center; gap:26px; }
  .dcall { width:64px; height:64px; border-radius:50%; border:none; background:#10b981; color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(16,185,129,.4); }
  .dcall svg { width:28px; height:28px; }
  .dback, .dclose { min-width:60px; height:52px; border-radius:16px; border:none; background:#fff; color:var(--muted);
    box-shadow:var(--shadow); font-size:15px; font-weight:700; }
  .dback { font-size:22px; }

}