/* ============================================================
   Priel CRM - Mobile Responsiveness
   Active only on screens narrower than 900px
   ============================================================ */

@media (max-width: 900px) {

  /* ===== Base typography ===== */
  body {
    font-size: 15px;
  }
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 16px !important; }

  /* ===== Main layout ? single column ===== */
  .row2,
  .row3,
  .stats,
  .prop-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ===== Cards ? full width, less padding ===== */
  .card {
    margin: 0 0 12px 0 !important;
    border-radius: 10px !important;
  }
  .card-b {
    padding: 14px !important;
  }
  .card-h {
    padding: 12px 14px !important;
  }

  /* ===== Tables ? horizontal scroll ===== */
  table, .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 13px;
  }
  table th, table td {
    padding: 8px 6px !important;
  }

  /* ===== Forms ? stack labels and inputs ===== */
  .fld {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .fld.half, .fld.third, .fld.quarter {
    width: 100% !important;
  }
  input, select, textarea {
    font-size: 16px !important;  /* prevents iOS auto-zoom */
    min-height: 44px;
    padding: 10px 12px !important;
    box-sizing: border-box;
    width: 100%;
  }
  textarea {
    min-height: 100px;
  }

  /* ===== Buttons ? touch friendly ===== */
  .btn, button {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 15px !important;
  }
  .btn-sm {
    min-height: 36px;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  /* ===== Top bar / header ===== */
  .topbar {
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar h1, .topbar h2 {
    font-size: 17px !important;
  }
  .topbar .search,
  .topbar input[type="search"] {
    width: 100% !important;
    order: 99;
  }

  /* ===== Modals ? full-screen on mobile ===== */
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-b {
    padding: 16px !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto;
  }
  .modal-f {
    padding: 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-f .btn {
    flex: 1;
    min-width: 120px;
  }

  /* ===== Property cards ===== */
  .prop-card, .property-card {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .prop-card img,
  .property-photo {
    width: 100% !important;
    height: auto !important;
    max-height: 200px;
    object-fit: cover;
  }

  /* ===== Calendar ? simpler on mobile ===== */
  .cal-week, .cal-month {
    font-size: 12px;
  }
  .cal-cell {
    min-height: 60px !important;
    padding: 4px !important;
  }

  /* ===== Toast notifications ? narrower ===== */
  .toast {
    max-width: calc(100vw - 20px);
    font-size: 13px;
  }

  /* ===== Stats numbers ? smaller ===== */
  .stat-num, .stats-number {
    font-size: 22px !important;
  }
  .stat-label {
    font-size: 12px !important;
  }

  /* ===== Tabs ? scrollable horizontally ===== */
  .tabs, .tab-row {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    flex-shrink: 0;
    padding: 10px 14px !important;
  }

  /* ===== Hide some heavy desktop-only elements ===== */
  .desktop-only {
    display: none !important;
  }

  /* ===== Sidebar overlay backdrop ===== */
  .sidebar.open + .main::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 50;
  }
}

/* ===== Tiny screens (< 480px) ? even tighter ===== */
@media (max-width: 480px) {
  .card-b { padding: 10px !important; }
  body { font-size: 14px; }
  .modal-f .btn { font-size: 14px !important; padding: 8px 12px !important; }
}

/* ===== Topbar ? better stacking on mobile ===== */
@media (max-width: 900px) {
  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .topbar > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .topbar h1, .topbar h2, .topbar .page-title {
    text-align: right;
    margin: 0 0 4px 0 !important;
  }
  .topbar .search,
  .topbar input[type="search"],
  .topbar input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
  }
  .topbar .btn,
  .topbar .quick-add,
  .topbar button {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Filters dropdown row */
  .filter-row, .filters {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .filter-row > *, .filters > * {
    width: 100% !important;
  }
}