/* Global responsive overrides */

/* Prevent horizontal overflow on small screens */
html, body { overflow-x: hidden; }

/* Ensure media scales */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Prevent overflow on small screens */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* General typography scaling */
html { font-size: 16px; }
@media (max-width: 575.98px) {
  html { font-size: 15px; }
}

/* Navbar fixes */
.navbar .navbar-brand .logo-img {
  max-height: 36px;
}
.navbar .navbar-brand .logo-text {
  font-size: 1.1rem;
}

/* Ensure navbar toggler is visible */
.navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,.25);
}

/* Grids and cards */
@media (max-width: 991.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 767.98px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* Tables: make horizontally scrollable on small screens */
.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
}
.table-responsive-wrap > table { min-width: 600px; }

/* Forms */
form input, form select, form textarea {
  width: 100%;
}

/* Images inside content */
.content img { height: auto; max-width: 100%; }

/* Utility to clamp big paddings/margins */
@media (max-width: 575.98px) {
  .px-section { padding-right: 1rem !important; padding-left: 1rem !important; }
  .py-section { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
}

/* Fix absolute/fixed buttons positions on mobile */
@media (max-width: 575.98px) {
  .theme-toggle { top: 16px !important; right: 16px !important; transform: none !important; }
  .scroll-to-top-btn { left: 16px !important; bottom: 16px !important; }
  .floating-support-btn { bottom: 80px !important; }
}

/* Prevent overflow for large code/pre blocks if any */
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Make big modals/content fit */
@media (max-width: 767.98px) {
  .modal-dialog { margin: .5rem; }
}

/* Hero section tweaks for small screens */
@media (max-width: 576px) {
  .hero-section { 
    height: auto !important; 
    min-height: auto !important; 
    padding-top: 2.25rem !important; 
    padding-bottom: 2rem !important; 
  }
  .hero-section .container { padding-right: 1rem; padding-left: 1rem; }
  .hero-title { font-size: 1.5rem !important; line-height: 1.3 !important; }
  .hero-subtitle { font-size: 0.95rem !important; line-height: 1.7 !important; }
}

/* Navbar collapse usability on mobile */
@media (max-width: 576px) {
  .navbar-collapse { max-height: 70vh; overflow-y: auto; }
}

/* Offcanvas navbar: small screens */
@media (max-width: 991.98px) {
  .offcanvas-lg.offcanvas-end {
    width: min(92vw, 380px);
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--glass-border);
    box-shadow: -24px 0 60px rgba(0,0,0,.35);
    z-index: 1100; /* above fixed navbar */
  }
  [data-theme="light"] .offcanvas-lg.offcanvas-end {
    background: rgba(255,255,255,0.95);
    border-left-color: rgba(0,0,0,0.08);
  }
  [data-theme="dark"] .offcanvas-lg.offcanvas-end {
    background: rgba(17,24,39,0.96);
    border-left-color: rgba(255,255,255,0.06);
  }
  .offcanvas-lg .offcanvas-header { border-bottom: 1px solid var(--glass-border); }
  .offcanvas-lg .offcanvas-title { font-weight: 800; letter-spacing: 0.2px; }
  .offcanvas-lg .btn-close { filter: invert(1); opacity: .9; }
  [data-theme="light"] .offcanvas-lg .btn-close { filter: none; }
  .offcanvas-lg .offcanvas-body { display: flex; flex-direction: column; gap: 14px; padding: 1rem; }
  .offcanvas-lg .navbar-nav { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 8px; }
  .offcanvas-lg .nav-link { padding: 14px 16px !important; border-radius: 12px; justify-content: flex-start; font-size: 1.05rem; color: var(--text-secondary-dark) !important; }
  .offcanvas-lg .nav-link:hover { background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.18)); color: #fff !important; }
  .offcanvas-lg .nav-link.active { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: #fff !important; }
  .offcanvas-lg .dropdown-menu { position: static; float: none; display: none; border: none; background: transparent; box-shadow: none; padding: 0; margin: 0; }
  .offcanvas-lg .dropdown.show .dropdown-menu { display: block; }
  .offcanvas-lg .dropdown-item { padding: 10px 12px; border-radius: 10px; font-size: .98rem; }
  .offcanvas-lg .dropdown-item:hover { background: rgba(99,102,241,.16); color: #fff; }
  .offcanvas-lg .navbar-actions { flex-direction: column; width: 100%; gap: 8px; }
}

/* Make mobile offcanvas full-screen on very small phones */
@media (max-width: 576px) {
  .offcanvas-lg.offcanvas-end { width: 100vw; height: 100dvh; border-left: none; }
  .offcanvas-lg .offcanvas-body { padding: 1.25rem; gap: 16px; }
  .offcanvas-lg .nav-link { padding: 16px !important; font-size: 1.1rem; }
}

/* Ensure toggler icon is visible on all themes */
.navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }
[data-theme="light"] .navbar .navbar-toggler { border-color: rgba(0,0,0,.2); }
.navbar .navbar-toggler-icon { filter: invert(1) grayscale(100%); }
[data-theme="light"] .navbar .navbar-toggler-icon { filter: invert(0); }

/* Darker backdrop for offcanvas */
.offcanvas-backdrop.show { opacity: .6 !important; background-color: #000 !important; z-index: 1090 !important; }

/* Mobile-only theme row inside offcanvas */
@media (max-width: 991.98px) {
  .offcanvas-controls { border-top: 1px solid var(--glass-border); padding: 12px 8px; }
  .offcanvas-controls .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .offcanvas-controls .theme-row span { opacity: .85; }
}

/* Dedicated mobile menu styles */
@media (max-width: 991.98px) {
  .mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .mobile-link { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; color: var(--text-secondary-dark); text-decoration: none; background: rgba(255,255,255,0.04); }
  .mobile-link:hover { box-shadow: 0 6px 18px rgba(99,102,241,.18); }
  [data-theme="light"] .mobile-link { background: rgba(0,0,0,0.04); color: #1f2937; }
  .mobile-link i { width: 20px; text-align: center; }
  .mobile-link:hover { background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.18)); color: #fff; }

  .mobile-accordion-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--text-secondary-dark); border: none; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
  [data-theme="light"] .mobile-accordion-btn { background: rgba(0,0,0,0.04); color: #1f2937; }
  .mobile-accordion-btn .chevron { transition: transform .2s ease; }
  .mobile-accordion .collapse.show + .chevron, .mobile-accordion-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }

  .mobile-sublink { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 6px 8px; border-radius: 10px; color: var(--text-secondary-dark); text-decoration: none; background: rgba(255,255,255,0.03); }
  [data-theme="light"] .mobile-sublink { background: rgba(0,0,0,0.03); }
  .mobile-sublink:hover { background: rgba(99,102,241,.15); color: #fff; }

  .mobile-auth .btn { border-radius: 12px; padding: 12px 16px; }
  /* Avoid duplicate auth blocks visually */
  .navbar-actions.d-none.d-lg-flex { display: none !important; }
  .mobile-auth { margin-top: 8px; }
  .mobile-auth .btn-warning { background: linear-gradient(135deg, #facc15, #f59e0b); border: none; color: #1e293b; }
  .mobile-auth .btn-outline-secondary { background: #fff; color: #1f2937; border: 1px solid #e5e7eb; }
}

/* Floating support button responsiveness */
@media (max-width: 576px) {
  .floating-support-btn {
    right: 16px !important;
    bottom: 72px !important;
    width: clamp(48px, 12vw, 58px) !important;
    height: clamp(48px, 12vw, 58px) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35) !important;
    border: none !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
  }
  .floating-support-btn .support-icon i,
  .floating-support-btn i {
    font-size: clamp(16px, 5.2vw, 20px) !important;
  }
  .floating-support-btn .support-text { display: none !important; }
  .floating-support-btn .support-icon { margin: 0 !important; }
  .floating-support-btn .support-tooltip { display: none !important; }
}
@media (max-width: 360px) {
  .floating-support-btn {
    right: 12px !important;
    bottom: 64px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }
}