/* ═══════════════════════════════════════════════════════
   PROPi.IN — Dashboard App CSS (Mobile-First + Desktop)
   Extracted from base_dash.html for file-size compliance
   ═══════════════════════════════════════════════════════ */

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#0a0e17;color:#e2e8f0;
     min-height:100vh;min-height:100dvh;overflow-x:hidden;
     padding-bottom:calc(68px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
button{border:none;background:none;cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ── STATUS BAR ── */
.status-bar{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);
            background:#0a0e17;z-index:9999}

/* ── MOBILE TOP BAR ── */
.topbar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:56px;
        background:rgba(10,14,23,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
        border-bottom:1px solid rgba(255,255,255,.06);z-index:9990;
        display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.topbar-brand{font-size:18px;font-weight:800;
              background:linear-gradient(135deg,#6366f1,#a78bfa);
              -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.topbar-page{font-size:13px;color:#94a3b8;font-weight:600}
.topbar-right{display:flex;gap:12px;align-items:center}
.topbar-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);
            display:flex;align-items:center;justify-content:center;color:#94a3b8;
            font-size:16px;position:relative;transition:.15s}
.topbar-btn:active{transform:scale(.9)}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;
           border-radius:50%;background:#ef4444;border:2px solid #0a0e17}

/* ── MAIN CONTENT ── */
.main{padding:calc(56px + env(safe-area-inset-top,0px) + 12px) 16px 16px;
      max-width:600px;margin:0 auto}

/* ── BOTTOM TAB BAR ── */
.tab-bar{position:fixed;bottom:0;left:0;right:0;
         height:calc(68px + env(safe-area-inset-bottom));
         background:rgba(10,14,23,.92);backdrop-filter:blur(20px);
         -webkit-backdrop-filter:blur(20px);
         border-top:1px solid rgba(255,255,255,.08);
         display:flex;align-items:flex-start;justify-content:space-around;
         padding-top:8px;z-index:9990}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;
     padding:4px 0;min-width:56px;color:#64748b;transition:.15s;
     -webkit-tap-highlight-color:transparent}
.tab.on{color:#a78bfa}
.tab:active{transform:scale(.9)}
.tab-icon{font-size:22px;line-height:1}
.tab-label{font-size:10px;font-weight:700;letter-spacing:.3px}
.tab-add{margin-top:-16px}
.tab-add .tab-icon{width:48px;height:48px;border-radius:50%;
                   background:linear-gradient(135deg,#6366f1,#a78bfa);
                   display:flex;align-items:center;justify-content:center;
                   color:#fff;font-size:24px;box-shadow:0 4px 16px rgba(99,102,241,.4)}

/* ── CARDS ── */
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
      border-radius:16px;padding:16px;margin-bottom:12px;transition:.15s}
.card:active{transform:scale(.98)}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.card-title{font-size:15px;font-weight:700;color:#fff}
.card-subtitle{font-size:12px;color:#64748b;margin-top:2px}
.card-badge{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;
            text-transform:uppercase;letter-spacing:.5px}
.badge-sale{background:rgba(34,197,94,.15);color:#22c55e}
.badge-lease{background:rgba(59,130,246,.15);color:#3b82f6}
.badge-propi{background:rgba(168,139,250,.15);color:#a78bfa}
.card-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.card-chip{font-size:11px;color:#94a3b8;display:flex;align-items:center;gap:4px}
.card-chip b{color:#e2e8f0}
.card-price{font-size:18px;font-weight:800;color:#22c55e;margin-top:8px}
.card-agent{font-size:11px;color:#64748b;margin-top:6px;
            border-top:1px solid rgba(255,255,255,.04);padding-top:6px}

/* ── SECTION ── */
.section-title{font-size:13px;font-weight:800;color:#64748b;
               text-transform:uppercase;letter-spacing:1.2px;
               margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.section-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}

/* ── REEL CARDS (INSTAGRAM STYLE) ── */
.reel-card{position:relative;width:100%;aspect-ratio:4/5;background:#111827;border-radius:16px;margin-bottom:20px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.reel-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0.85}
.reel-gradient{position:absolute;bottom:0;left:0;right:0;height:65%;background:linear-gradient(to top, rgba(10,14,23,0.98) 0%, rgba(10,14,23,0.8) 30%, transparent 100%);pointer-events:none}
.reel-content{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:10}
.reel-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:6px;text-shadow:0 2px 4px rgba(0,0,0,.5);line-height:1.2}
.reel-subtitle{font-size:13px;font-weight:600;color:#cbd5e1;text-shadow:0 1px 2px rgba(0,0,0,.5);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reel-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;margin-bottom:16px}
.reel-tag{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:5px 12px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.1)}
.reel-action-bar{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.reel-btn{background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:14px;font-weight:800;font-size:15px;width:100%;box-shadow:0 4px 16px rgba(37,211,102,.3);transition:.15s;border:none}
.reel-btn:active{transform:scale(.97)}
.reel-report-link{font-size:11px;color:#94a3b8;text-align:center;text-decoration:underline;cursor:pointer;margin-top:4px}
.reel-side-actions{display:flex;flex-direction:column;gap:16px;position:absolute;right:16px;bottom:140px;z-index:10}
.reel-side-btn{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}
.reel-side-btn:active{transform:scale(.9)}
.reel-side-btn-icon{font-size:22px;line-height:1}

/* ── QUOTE CARDS (REQUIREMENTS) ── */
.quote-card{background:linear-gradient(145deg, #1e1b4b, #312e81);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 8px 24px rgba(0,0,0,.4);position:relative;overflow:hidden}
.quote-card::before{content:'"';position:absolute;top:-20px;right:16px;font-size:140px;color:rgba(255,255,255,.05);font-family:serif;line-height:1}
.quote-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.3;position:relative;z-index:2}
.quote-budget{font-size:26px;font-weight:900;background:linear-gradient(135deg,#34d399,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;position:relative;z-index:2}

/* ── STAT CARDS ── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
      border-radius:14px;padding:14px;text-align:center}
.stat-val{font-size:28px;font-weight:800;
          background:linear-gradient(135deg,#6366f1,#a78bfa);
          -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:11px;color:#64748b;font-weight:600;margin-top:4px;
            text-transform:uppercase;letter-spacing:.5px}

/* ── FORMS ── */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:700;color:#94a3b8;
            margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.form-control{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);
              border:1px solid rgba(255,255,255,.08);border-radius:12px;
              color:#fff;font-size:14px;outline:none;transition:.2s;
              -webkit-appearance:none;appearance:none}
.form-control:focus{border-color:rgba(99,102,241,.5);
                    box-shadow:0 0 0 3px rgba(99,102,241,.1)}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
                    background-repeat:no-repeat;background-position:right 12px center;
                    padding-right:36px}
select.form-control option{background:#1a1f2e;color:#e2e8f0}
.form-hint{font-size:11px;color:#475569;margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── AUTOCOMPLETE ── */
.ac-wrap{position:relative}
.ac-list{position:absolute;top:100%;left:0;right:0;background:#1a1f2e;
         border:1px solid rgba(255,255,255,.1);border-radius:12px;
         max-height:200px;overflow-y:auto;z-index:100;display:none;
         box-shadow:0 8px 32px rgba(0,0,0,.4)}
.ac-list.show{display:block}
.ac-item{padding:10px 14px;font-size:13px;cursor:pointer;
         border-bottom:1px solid rgba(255,255,255,.04);transition:.1s}
.ac-item:hover,.ac-item:active{background:rgba(99,102,241,.15)}
.ac-item-name{font-weight:700;color:#fff}
.ac-item-loc{font-size:11px;color:#64748b}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
     padding:12px 20px;border-radius:12px;font-size:14px;font-weight:700;
     cursor:pointer;transition:.15s;border:none;width:100%}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#6366f1,#a78bfa);color:#fff;
             box-shadow:0 4px 16px rgba(99,102,241,.3)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.12);
             color:#e2e8f0}
.btn-sm{padding:8px 14px;font-size:12px;border-radius:8px;width:auto}

/* ── CHIPS ── */
.chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
      color:#94a3b8;cursor:pointer;transition:.15s;
      -webkit-tap-highlight-color:transparent}
.chip.selected{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);color:#a78bfa}
.chip:active{transform:scale(.95)}

/* ── FLASH ── */
.flash{padding:12px 16px;border-radius:12px;margin:12px 0;font-size:13px;font-weight:600}
.flash-success{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.2)}
.flash-error{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.flash-info{background:rgba(59,130,246,.15);color:#3b82f6;border:1px solid rgba(59,130,246,.2)}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:40px 20px;color:#475569}
.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}
.empty-text{font-size:14px;font-weight:600}

/* ── SEARCH BAR ── */
.search-bar{position:relative;margin-bottom:16px}
.search-bar input{width:100%;padding:14px 14px 14px 44px;background:rgba(255,255,255,.06);
                  border:1px solid rgba(255,255,255,.08);border-radius:14px;
                  color:#fff;font-size:14px;outline:none}
.search-bar input:focus{border-color:rgba(99,102,241,.5)}
.search-bar .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);
                         color:#64748b;font-size:16px}

/* ── TABS ── */
.seg-tabs{display:flex;gap:4px;margin-bottom:16px;overflow-x:auto;
          scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg-tabs::-webkit-scrollbar{display:none}
.seg-tab{padding:8px 16px;border-radius:10px;font-size:12px;font-weight:700;
         white-space:nowrap;background:rgba(255,255,255,.04);color:#64748b;
         border:1px solid transparent;transition:.15s;flex-shrink:0;cursor:pointer}
.seg-tab.on{background:rgba(99,102,241,.15);color:#a78bfa;border-color:rgba(99,102,241,.3)}

/* ── LOADING ── */
.spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.1);
         border-top-color:#a78bfa;border-radius:50%;
         animation:spin .6s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── DESKTOP SIDEBAR (hidden on mobile) ── */
.dk-sidebar{display:none}
.dk-topbar{display:none}