/* =============================================
   REPark Services - Mobile CSS
   Optimized for field use (phones, tablets)
   ============================================= */

@media (max-width: 768px) {

  /* ---- GENERAL ---- */
  body { font-size: 14px; }

  .container { padding-left: 12px; padding-right: 12px; }

  /* ---- SIDEBAR: hide on mobile, show toggle ---- */
  .tk-asidecolumn {
    position: fixed !important;
    left: -280px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 9999;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }

  .tk-asidecolumn.mobile-open {
    left: 0;
  }

  .tk-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
  }

  .tk-overlay.active { display: block; }

  /* Main content full width on mobile */
  .tk-main-content,
  .col-lg-9, .col-lg-8, .col-xl-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ---- HEADER ---- */
  .tk-header { padding: 8px 12px; }
  .tk-logo img { height: 36px; }

  /* Mobile menu toggle button */
  .tk-mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: #4F46E5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
  }

  /* ---- DASHBOARD STATS ---- */
  .tk-aside-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .tk-aside-list li { margin-bottom: 0 !important; }

  /* ---- PROJECT CARDS ---- */
  /* Homepage cards */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Buyer/Seller project cards */
  .tk-scetiondb { padding: 12px 0 !important; }

  /* Price + CTA on cards - stack vertically */
  div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* ---- TABS ---- */
  .tk-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .tk-tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ---- FORMS ---- */
  .form-group-half {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 10px 12px !important;
  }

  /* ---- BUTTONS ---- */
  .tk-btn-solid-lg,
  .tk-btn,
  .tk-btn-solid-lefticon {
    padding: 12px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ---- PROPOSAL/BID CARDS ---- */
  /* Action buttons stack on mobile */
  div[style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }

  /* ---- BUYER INBOX CARDS ---- */
  div[style*="padding:18px 22px"] {
    padding: 14px 14px !important;
  }

  /* Amount display */
  div[style*="font-size:22px"] {
    font-size: 18px !important;
  }

  /* ---- SEARCH PAGE ---- */
  .tk-section { padding: 10px 0 !important; }

  .tk-filters-panel {
    display: none !important;
  }

  .tk-filters-panel.mobile-open {
    display: block !important;
  }

  /* ---- PROJECT CREATION STEPS ---- */
  .tk-stepwizard { overflow-x: auto !important; }
  .tk-step-item { min-width: 80px !important; }

  /* ---- DECLARATION/PROFORMA ---- */
  div[style*="border-radius:16px"] {
    border-radius: 10px !important;
  }

  /* ---- COMPLIANCE BANNER ---- */
  div[style*="max-width:700px"] {
    max-width: 100% !important;
    margin: 10px 12px !important;
  }

  /* ---- COUNTER FORM ---- */
  div[style*="background:#F8FAFC"][style*="padding:14px 20px"] {
    padding: 12px !important;
  }

  /* ---- MODALS ---- */
  .modal-dialog { margin: 10px !important; }
  .modal-content { border-radius: 12px !important; }

  /* ---- DASHBOARD WIDGET ---- */
  div[style*="margin-top:1.5rem"] .container { padding: 0 8px !important; }

  /* ---- BOTTOM SAFE AREA for PWA ---- */
  .tk-main-wrapper { padding-bottom: 70px !important; }

  /* ---- MOBILE BOTTOM NAV for PWA ---- */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 0.5px solid #E5E7EB;
    z-index: 1000;
    padding: 8px 0;
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }

  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #6B7280;
    font-size: 10px;
    gap: 3px;
  }

  .mobile-bottom-nav a.active { color: #4F46E5; }
  .mobile-bottom-nav a i { font-size: 20px; }
  .mobile-bottom-nav .nav-primary {
    background: #4F46E5;
    border-radius: 12px;
    margin: -4px 8px;
    padding: 6px 8px;
    color: #fff !important;
  }
}

@media (max-width: 480px) {
  /* Extra small phones */
  .tk-aside-list {
    grid-template-columns: 1fr !important;
  }

  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  /* Card title */
  div[style*="font-size:18px"] { font-size: 15px !important; }
  div[style*="font-size:17px"] { font-size: 15px !important; }
}