/* ── Sidebar overlay backdrop ── */
#sidebarOverlay {
  display: none;          /* hidden by default, always */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 769px) {
  /* Never show overlay on desktop */
  #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;
  }
  .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: 1050;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  .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 */
  }
}