/* ============================================================
   Replyzen — Responsive Rules (Updated for Premium Dark Theme)
   ============================================================ */

/* -------------------------------------------------- Tablets & Small Laptops */
@media (max-width: 1024px) {
  .split-section { grid-template-columns: 1fr; }
  .conv-page { grid-template-columns: 1fr; }
  .conv-side-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
  .order-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* -------------------------------------------------- Mobile Devices (Phones) */
@media (max-width: 820px) {
  /* Navbar adjustments */
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 3rem 0 2.5rem; }

  /* --- Dashboard App Shell (Mobile Sidebar Logic) --- */
  
  /* সাইডবার আগের মতো লুকিয়ে না রেখে, বাইরে (বামে) রেখে স্লাইড করার ব্যবস্থা করা হলো */
  .app-sidebar { 
    display: flex !important; 
    position: fixed;
    top: 0;
    left: -100%; /* শুরুতে স্ক্রিনের বাইরে থাকবে */
    width: 260px;
    height: 100vh;
    z-index: 999;
    transition: left 0.3s ease-in-out;
    box-shadow: 4px 0 15px rgba(0,0,0,0.2);
  }
  
  /* জাভাস্ক্রিপ্ট দিয়ে ক্লিক করলে এই ক্লাসটা যুক্ত হবে এবং সাইডবার বের হবে */
  .app-sidebar.show-mobile-sidebar {
    left: 0;
  }

  .bottom-nav { display: flex; } 
  
  /* Space for Floating Nav */
  .app-main { padding-bottom: 110px; } 
  
  /* --- Topbar Mobile Layout (FIXED) --- */
  .app-topbar { 
    padding: 0.8rem 1rem; 
    gap: 0.5rem;
  }
  .topbar-title { 
    font-size: 1.2rem; 
  }
  .app-topbar-right { 
    gap: 0.5rem; 
  }
  .topbar-user { 
    gap: 0.5rem; 
  }
  .user-chip { 
    max-width: 100px; 
    font-size: 0.75rem; 
    padding: 0.3rem 0.8rem; 
  }
  
  /* মোবাইলে লগআউট টেক্সট হাইড করে শুধু আইকন দেখাবে */
  .logout-btn span { 
    display: none; 
  }
  .logout-btn { 
    padding: 0.4rem; 
  }

  /* --- Spacing & Margins Normalization --- */
  .app-main h1, .app-main .section, .app-main .card, .app-main .alert,
  .app-main .toolbar, .app-main .section-head-row, .app-main .grid,
  .app-main .table-wrap, .app-main .pagination, .app-main p,
  .app-main .connect-strip, .app-main .inbox-layout, .app-main .hub-grid,
  .app-main .stat-grid, .app-main .section-title, .app-main .image-strip,
  .app-main .plan-admin-card, .app-main .order-layout, .app-main .split-section,
  .app-main .chart-card {
    margin-left: 1rem; 
    margin-right: 1rem;
  }

  /* --- Grids --- */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
  .stat-card { padding: 1.2rem 1rem; }
  .stat-value { font-size: 1.6rem; }
  
  .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .hub-card { padding: 1rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  
  /* --- Chat Interface --- */
  .msg-bubble { max-width: 90%; font-size: 0.9rem; }
  .composer { flex-direction: column; align-items: stretch; padding: 1rem; gap: 0.8rem; }
  .composer textarea { min-height: 60px; }
  .composer input[type="submit"], .composer button { width: 100%; padding: 0.8rem; }
  
  /* --- Misc --- */
  .form-row { grid-template-columns: 1fr; }
  .table { font-size: 0.85rem; }
  .footer-grid { gap: 1.2rem; }
}

/* -------------------------------------------------- Small Phones */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-badges { flex-direction: column; align-items: center; }
  .nav-actions .btn { display: none; }
  .nav-actions .nav-burger { display: inline-flex; }
  .auth-card { padding: 1rem; }
  .toast { width: calc(100% - 2rem); justify-content: center; text-align: center; }
  .table-actions form { margin-top: 0.3rem; }
  .detail-list { grid-template-columns: 1fr; }
  .detail-list dd { margin-bottom: 0.5rem; }
  
  /* Tiny screens এ গ্রিড ১ কলাম */
  .stat-grid, .hub-grid { grid-template-columns: 1fr; }
  
  /* Floating Navbar Width */
  .bottom-nav { width: 95%; bottom: 15px; padding: 0.5rem 0.2rem; }
}

/* -------------------------------------------------- Small-Height Tweaks (Landscape) */
@media (max-height: 640px) {
  .msg-list { max-height: 40vh; }
  .app-main { padding-bottom: 90px; }
}