/* ── Sidebar overlay backdrop ── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;  /* BELOW sidebar (1050) so links are tappable */
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 769px) {
  #sidebarOverlay { display: none !important }
}

/* ═══════════════════════════════════════════════════════
   WISDSOL TECH — Mobile Responsive Stylesheet
   Covers: landing, auth pages, app dashboard, forms, tables
   ═══════════════════════════════════════════════════════ */

/* ── 1. GLOBAL BASE ── */
@media (max-width: 767px) {
  html { font-size: 15px }
  body { overflow-x: hidden }
  img  { max-width: 100% }

  /* Tighter containers */
  .container, .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Headings */
  h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important }
  h2, .h2 { font-size: clamp(1.25rem, 5vw, 1.7rem) !important }
  h3, .h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important }

  /* Tables: make scrollable */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .data-table       { min-width: 520px }
  .data-table th, .data-table td { padding: 9px 10px; font-size: .8rem }

  /* Cards */
  .data-card        { border-radius: 10px }
  .data-card-header { padding: 12px 14px }

  /* Buttons */
  .btn { font-size: .82rem }
  .btn-sm { font-size: .74rem; padding: .28rem .65rem }

  /* Stat cards: 2-up grid */
  .row.stat-row { gap: 10px }
  .stat-card {
    padding: 14px;
    gap: 12px;
  }
  .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 10px }
  .stat-val  { font-size: 1.35rem }
  .stat-label { font-size: .72rem }
}

/* ── 2. NAVBAR (public site) ── */
@media (max-width: 991.98px) {
  .wt-nav .container { min-height: 56px }
  .wt-brand-logo { height: 32px }

  .navbar-collapse {
    padding: 10px 0 14px;
    border-top: 1px solid rgba(0,0,0,.07);
    margin-top: 6px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .navbar-nav .nav-link {
    padding: .55rem .5rem !important;
    font-size: .93rem;
  }
  /* Stack auth buttons full-width */
  .navbar-nav .btn-nav-ghost,
  .navbar-nav .btn-nav-solid {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    padding: .65rem 1rem;
    font-size: .9rem;
  }
  .dropdown-menu { box-shadow: none; border: 1px solid rgba(0,0,0,.08); margin-left: .5rem }
}

/* ── 3. APP LAYOUT (sidebar + topbar) ── */
@media (max-width: 768px) {
  /* Sidebar: slide in as drawer */
  .app-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 260px;
    height: 100vh;
    z-index: 1055;  /* above overlay (1039) and Bootstrap modals backdrop (1040) */
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Clip overlay so it only covers content area, not the sidebar */
  #sidebarOverlay { left: 260px !important; z-index: 1040 }
  /* Prevent the sidebar-section from restricting scroll */
  .app-sidebar .sidebar-section { overflow: visible; flex: unset }
  /* Prevent body scroll-lock from blocking sidebar scroll */
  body.sidebar-open { overflow: hidden }
  .app-sidebar.open { touch-action: pan-y }
  .app-sidebar.open { transform: translateX(0) }

  /* Overlay behind open sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
  }
  .app-sidebar.open ~ .sidebar-overlay { display: block }

  /* Main content: no left margin */
  .app-main { margin-left: 0 !important }

  /* Topbar */
  .app-topbar {
    padding: 0 14px;
    gap: 10px;
    height: 54px;
  }
  .app-topbar .page-title { font-size: .95rem }
  .topbar-actions { gap: 6px }
  .topbar-actions .btn { font-size: .74rem; padding: .28rem .6rem }
  .topbar-actions .btn span { display: none } /* hide button text, keep icons */

  /* Hamburger toggle */
  .sidebar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1.5px solid rgba(0,0,0,.1);
    background: #fff;
    color: #0d1b3e;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
  }
  .sidebar-toggle:hover { background: rgba(244,117,33,.08); border-color: #f47521; color: #f47521 }

  /* App content padding */
  .app-content { padding: 14px !important }

  /* Form cards */
  .form-card { padding: 16px !important; border-radius: 10px }
}

/* ── 4. FORMS ── */
@media (max-width: 575px) {
  .row.g-3 > [class*=col-md] { width: 100% }
  .row.g-4 > [class*=col-lg] { width: 100% }
  .row.g-0 > [class*=col-md] { width: 100%; border-right: none !important }

  .form-control, .form-select {
    font-size: .9rem;
    padding: .5rem .8rem;
  }

  /* Submit rows: stack buttons */
  .submit-row, .edit-footer, .ef-foot, .exec-foot, .efoot, .bf-foot {
    flex-direction: column;
  }
  .submit-row .btn, .edit-footer .btn { width: 100% }
}

/* ── 5. DASHBOARD STAT GRID ── */
@media (max-width: 767px) {
  /* Force 2-col stat grid */
  .row.g-3.mb-4 { gap: 10px !important }
  .row.g-3.mb-4 > div { flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important }

  /* Finance dashboard period filter */
  .filter-bar { flex-wrap: wrap; gap: 6px !important }
  .filter-bar .btn-group { flex-wrap: wrap }
  .filter-bar form { flex-wrap: wrap }
}

/* ── 6. PROJECT DETAIL ── */
@media (max-width: 767px) {
  /* Stack columns */
  .row.g-4 > .col-lg-8,
  .row.g-4 > .col-lg-7,
  .row.g-4 > .col-lg-4,
  .row.g-4 > .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Kanban: horizontal scroll */
  .kanban-board {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 10px;
    flex-wrap: nowrap !important;
  }
  .kanban-col {
    min-width: 220px !important;
    flex-shrink: 0 !important;
  }

  /* Budget banner: 2-col grid on small */
  .budget-banner-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Project expenses: side-by-side → stacked */
  .row.g-0 > .col-lg-7,
  .row.g-0 > .col-lg-5 {
    width: 100% !important;
    border-right: none !important;
    border-bottom: .5px solid #f0eeeb;
  }
}

/* ── 7. INVOICE / RECEIPT PRINT ── */
@media (max-width: 767px) {
  .invoice-page, .receipt-card {
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .toolbar .t-btn { font-size: .75rem; padding: 6px 10px }
  .inv-header { flex-direction: column; gap: 12px; padding: 20px }
  .inv-header-right { text-align: left }
  .bill-row { grid-template-columns: 1fr !important; gap: 12px }
  .notes-grid { grid-template-columns: 1fr !important }
  .totals-grid { justify-content: stretch }
  .totals-box { min-width: 100% }
}

/* ── 8. BLOG ── */
@media (max-width: 767px) {
  .post-grid { grid-template-columns: 1fr !important }
  .bp-shell  { padding: 24px 12px }
  .bp-title  { font-size: 1.5rem !important }
  .bp-meta   { flex-wrap: wrap; gap: 8px }
}

/* ── 9. CHAT ── */
@media (max-width: 640px) {
  .chat-layout { grid-template-columns: 1fr !important }
  .chat-rooms  {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 1060;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .28s ease;
  }
  .chat-rooms.open { transform: translateX(0) }
  .chat-shell { height: auto; min-height: calc(100vh - 60px) }
  .messages-area { max-height: 55vh }
}

/* ── 10. STAFF BADGE ── */
@media (max-width: 767px) {
  .badge-print-page { padding: 10px }
  .wt-badge { transform: scale(0.9); transform-origin: top center }
}

/* ── 11. PROFILE PAGE ── */
@media (max-width: 767px) {
  .p-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
    gap: 16px;
  }
  .p-hero-btns { flex-direction: row; flex-wrap: wrap; width: 100% }
  .p-hero-btns .hbtn { flex: 1; justify-content: center }
  .p-av { width: 68px; height: 68px; font-size: 1.6rem }
  .p-hero-name { font-size: 1.3rem }

  .edit-shell { padding: 14px }
  .ef-shell   { max-width: 100% !important }
  .fg { padding: 12px 14px }
  .sec-label { padding: 10px 14px 6px }
  .edit-footer, .ef-foot { padding: 14px; flex-direction: column }
  .edit-footer .btn, .ef-foot .btn { width: 100% }
}

/* ── 12. DEPARTMENT DETAIL ── */
@media (max-width: 767px) {
  .dept-hero {
    flex-direction: column;
    padding: 20px;
    gap: 14px;
  }
  .vmv-grid { grid-template-columns: 1fr !important }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important }
}

/* ── 13. FINANCE PAGES ── */
@media (max-width: 767px) {
  /* Dashboard summary cards: 2-col */
  .finance-stats .col-lg-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  /* Date filter bar: wrap */
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch }

  /* Invoice/expense list action column */
  .data-table .d-flex.gap-1 { flex-wrap: wrap; gap: 4px !important }
}

/* ── 14. ADMIN ── */
@media (max-width: 768px) {
  #wt-sidebar   { display: none !important }
  main#content-start { flex: 1 }
  #content      { padding: 14px }
  .dash-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 10px }
  .dash-card    { padding: 14px }
  .dash-num     { font-size: 1.5rem }
  .app-grid     { grid-template-columns: 1fr !important }
  .wt-quick     { flex-wrap: wrap }
  .wt-qbtn      { flex: 1; min-width: 120px; justify-content: center }
  .row[style*="grid-template-columns"] { display: block !important }
  header#header { padding: 0 14px !important }
  #user-tools a { font-size: .72rem; padding: 3px 6px }
}

/* ── 15. REGISTRATION PAGE ── */
@media (max-width: 800px) {
  .reg-brand { display: none }
  .reg-form-panel { padding: 20px 12px; align-items: flex-start; min-height: 100vh }
  .reg-form-wrap { max-width: 100% }
  .reg-form-head h2 { font-size: 1.4rem }
  .reg-card { border-radius: 14px }
  .reg-section { padding: 20px 16px }
  .reg-nav { padding: 14px 16px }
  .field-row { flex-direction: column; gap: 0 }
  .btn-next, .btn-back, .btn-submit { padding: 11px 20px; font-size: .87rem }
}

/* ── 16. AUTH PAGES (login, forgot, reset) ── */
@media (max-width: 575px) {
  .pw-wrap, .edit-wrap, .shell, .bf-shell { padding: 14px 10px }
  .pw-card, .card, .ecard { border-radius: 12px }
  .pw-body, .body { padding: 20px 16px }
  .pw-footer, .footer { padding: 14px 16px; flex-wrap: wrap }
}

/* ── 17. GENERAL UTILITY FIXES ── */
@media (max-width: 767px) {
  /* Remove hover transforms on touch devices */
  .post-card:hover, .stat-card:hover,
  .hbtn:hover, .btn-next:hover { transform: none !important }

  /* Chips: allow wrap */
  .chips { flex-wrap: wrap }

  /* Progress cards: horizontal layout */
  .p-progress-card { flex-direction: column; align-items: flex-start }

  /* Badge preview on upload page: smaller */
  .badge-mini { width: 110px !important }
  .preview-ring { width: 120px; height: 120px }

  /* Notification list */
  .notif-shell { padding: 16px 10px }
  .ni { padding: 10px 12px }

  /* Chat input */
  .chat-input { padding: 8px 10px }
  .chat-input textarea { font-size: .84rem }
  .msg-bubble { max-width: 85% }
  .msg-av { width: 28px; height: 28px; font-size: .7rem }
}

/* ── 18. TOUCH OPTIMISATIONS ── */
@media (hover: none) and (pointer: coarse) {
  .btn, .sidebar-link, .nav-link, a.action-link { min-height: 42px }
  .form-control, .form-select { min-height: 44px; font-size: 16px } /* prevent zoom on iOS */
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=date], textarea, select {
    font-size: 16px !important; /* prevent iOS auto-zoom */
  }
}

/* ═══════════════════════════════════════════════════════
   WISDSOL TECH — Extended Mobile Styles (v2)
   Covers: Gallery, Proposals, Superadmin, Statistics,
           PWA install, Share buttons, Visit stats
   ═══════════════════════════════════════════════════════ */

/* ── 19. GALLERY — Public Page ── */
@media (max-width: 767px) {
  /* Filter pill bar: horizontal scroll */
  .filter-bar { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px }
  .filter-bar .filter-pill { flex-shrink: 0 }

  /* Gallery grid: 2-col on mobile */
  .gallery-grid .col-6 { flex: 0 0 50%; max-width: 50% }
  .gallery-grid .col-lg-3 { flex: 0 0 50%; max-width: 50% }

  /* Lightbox: full screen */
  .lightbox { padding: 10px }
  .lightbox-inner { max-width: 100% }
  .lightbox img, .lightbox video { max-height: 70vh }
  .lightbox iframe { aspect-ratio: 16/9 }
  .lightbox-close { top: -32px; font-size: 1.3rem }

  /* Featured strip: 1-col */
  .featured-section .col-md-4 { flex: 0 0 100%; max-width: 100% }

  /* Gallery hero card */
  .gallery-hero { padding: 40px 0 30px }
  .gallery-hero h1 { font-size: 1.8rem }

  /* Share bar: wrap and smaller buttons */
  .wt-share-bar { gap: 4px !important }
  .wt-share-btn { width: 30px; height: 30px; font-size: .78rem }
  .wt-share-label { display: none }
}

/* ── 20. GALLERY — Management (item_list, dashboard) ── */
@media (max-width: 767px) {
  /* Item list table: hide less important columns */
  .gallery-mgmt-table .col-featured,
  .gallery-mgmt-table .col-order,
  .gallery-mgmt-table .col-uploader { display: none }

  /* Dashboard stat cards: 2x2 */
  .gallery-dash-stats .col-6 { flex: 0 0 50%; max-width: 50% }

  /* Recent uploads table: compact */
  .gallery-recent-table th:nth-child(5),
  .gallery-recent-table td:nth-child(5),
  .gallery-recent-table th:nth-child(6),
  .gallery-recent-table td:nth-child(6) { display: none }
}

/* ── 21. GALLERY — Item Detail & Upload Form ── */
@media (max-width: 767px) {
  /* Item detail: stack media + sidebar */
  .media-hero { max-height: 50vw; min-height: 200px }
  .media-hero img, .media-hero video { max-height: 50vw }

  /* Upload form: full-width fields */
  .gallery-form-cols > .col-lg-8,
  .gallery-form-cols > .col-lg-4 { flex: 0 0 100%; max-width: 100% }

  /* Related items: 3-col grid stays fine but cap thumb height */
  .thumb-card img { height: 70px }
}

/* ── 22. PROPOSALS — Forms & Lists ── */
@media (max-width: 767px) {
  /* Proposal form: stack columns */
  .proposal-form .col-md-6,
  .proposal-form .col-md-4,
  .proposal-form .col-md-3 { flex: 0 0 100%; max-width: 100% }

  /* Line items table: horizontal scroll */
  .line-items-table { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .line-items-table table { min-width: 560px }

  /* Proposals list: hide less-used columns on xs */
  .proposals-list-table th:nth-child(4),
  .proposals-list-table td:nth-child(4),
  .proposals-list-table th:nth-child(5),
  .proposals-list-table td:nth-child(5) { display: none }

  /* SLA / Checklist forms: full-width */
  .sla-form .col-md-6,
  .sla-form .col-md-4,
  .checklist-form .col-md-6 { flex: 0 0 100%; max-width: 100% }

  /* Checklist checkbox grid: 2-col */
  .checklist-grid { grid-template-columns: 1fr 1fr !important }

  /* Proposal dashboard stat cards */
  .proposal-dash-stats .col-md-3 { flex: 0 0 50%; max-width: 50% }

  /* Print templates: scale down */
  .proposal-print-page { padding: 16px !important; font-size: .82rem }
  .sla-print-page      { padding: 16px !important }
  .print-parties-grid  { grid-template-columns: 1fr !important; gap: 12px }
}

/* ── 23. SUPERADMIN DASHBOARD ── */
@media (max-width: 767px) {
  /* Hero banner: stack */
  .sa-hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px }
  .sa-hero-badge { align-self: flex-start }
  .sa-hero h2 { font-size: 1.3rem }

  /* Stat cards: 2-col */
  .sa-stat-grid .col-md-3,
  .sa-stat-grid .col-md-4 { flex: 0 0 50%; max-width: 50% }

  /* User table: hide less-used cols */
  .sa-users-table th:nth-child(3),
  .sa-users-table td:nth-child(3),
  .sa-users-table th:nth-child(5),
  .sa-users-table td:nth-child(5) { display: none }

  /* Module cards: 2-col */
  .modules-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px }

  /* Activity feed: full width */
  .activity-feed-col { flex: 0 0 100%; max-width: 100% }
  .activity-panel-col { flex: 0 0 100%; max-width: 100% }
}

/* ── 24. STATISTICS PAGE ── */
@media (max-width: 767px) {
  /* Stat section cards: 2-col */
  .stat-section .col-md-3,
  .stat-section .col-md-2 { flex: 0 0 50%; max-width: 50% }

  /* scard: tighter on mobile */
  .scard { padding: 12px 14px; gap: 10px }
  .scard-icon { width: 38px; height: 38px; font-size: .9rem; border-radius: 9px }
  .scard-val { font-size: 1.2rem }
  .scard-label { font-size: .68rem }
  .scard-sub { display: none }

  /* Staff by dept: hide bar chart, show just numbers */
  .dept-bar-col { display: none }
}

/* ── 25. PAGE VISIT STATS WIDGET ── */
@media (max-width: 767px) {
  /* Stats bar: 2x2 */
  .vs-stat { padding: 12px 14px; gap: 10px }
  .vs-stat-icon { width: 38px; height: 38px; font-size: .9rem }
  .vs-stat-val { font-size: 1.2rem }
  .vs-stat-sub { display: none }

  /* Chart: compress */
  .vs-chart { height: 60px }
  .vs-chart-bar { min-height: 2px }
  .vs-chart-lbl { font-size: .5rem; height: 22px }

  /* Top pages: hide count bar, just show label + number */
  .vs-bar-track { display: none }
  .vs-bar-row { gap: 8px }

  /* Recent visits table: hide referrer */
  .vs-tbl th:nth-child(3), .vs-tbl td:nth-child(3) { display: none }
}

/* ── 26. FINANCE OVERVIEW (superadmin) ── */
@media (max-width: 767px) {
  /* Monthly bar chart col: full width */
  .fin-chart-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 16px }
  .fin-table-col { flex: 0 0 100%; max-width: 100% }

  /* Stat cards: 2-col */
  .fin-stat { padding: 14px 16px; gap: 10px }
  .fin-stat .fin-stat-val { font-size: 1.1rem }
  .fin-stat-sub { display: none }

  /* Tables: hide date column on xs */
  .sa-tbl th:last-child, .sa-tbl td:last-child { display: none }
}

/* ── 27. PWA FLOATING INSTALL BUTTON ── */
@media (max-width: 575px) {
  #pwaFloatBtn { bottom: 16px; right: 14px; padding: 11px 16px; font-size: .82rem }
  .pwa-modal-card { padding: 24px 18px }
  .pwa-modal-card h5 { font-size: 1rem }
  .pwa-modal-steps { font-size: .78rem }
}

/* ── 28. LANDING PAGE GALLERY SECTION ── */
@media (max-width: 767px) {
  /* Gallery section header */
  .gallery-lp-card { border-radius: 10px }
  .gallery-lp-label { font-size: .75rem; padding: 8px 10px }
  .gallery-lp-thumb { padding-top: 75% }

  /* CTA buttons: stack on tiny screens */
  .gallery-section-btns { flex-direction: column; align-items: stretch }
  .gallery-section-btns .btn { width: 100%; justify-content: center }
}

/* ── 29. HERO CAROUSEL ARROWS ── */
@media (max-width: 575px) {
  .hero-arrow { width: 34px; height: 34px; font-size: .8rem }
  .hero-arrow-prev { left: 10px }
  .hero-arrow-next { right: 10px }
  .hero-caption { font-size: .7rem; bottom: 52px; padding: 4px 12px }
}

/* ── 30. GENERAL NEW TEMPLATE FIXES ── */
@media (max-width: 767px) {
  /* Cards with col-lg-4 / col-lg-8 layouts: always stack */
  .mobile-stack > .col-lg-8,
  .mobile-stack > .col-lg-4,
  .mobile-stack > .col-lg-6,
  .mobile-stack > .col-lg-7,
  .mobile-stack > .col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Scrollable tables in all new templates */
  .ov-card .table-responsive,
  .vs-card .table-responsive,
  .fin-card .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch }

  /* Pill badges: don't overflow */
  .pill { white-space: nowrap }

  /* Superadmin activity log: single column */
  .activity-item { gap: 10px }
  .activity-dot  { width: 34px; height: 34px; font-size: .8rem }
  .activity-body { padding: 10px 12px }
  .activity-text { font-size: .82rem }
  .activity-time { font-size: .65rem }
}

/* ── 31. TOUCH OPTIMISATIONS (new elements) ── */
@media (hover: none) and (pointer: coarse) {
  .gallery-lp-card:hover { transform: none }
  .gallery-card:hover     { transform: none }
  .wt-share-btn:hover     { transform: none }
  .scard:hover            { transform: none }
  .vs-chart-bar:hover     { background: rgba(244,117,33,.65) }
  #pwaFloatBtn:hover      { background: #f47521 }

  /* Larger tap targets for share buttons */
  .wt-share-btn { min-width: 40px; min-height: 40px }

  /* Checklist checkboxes: bigger tap area */
  .checklist-form input[type=checkbox] { width: 18px; height: 18px }
}