/*
 * Echoo Pro — Mobile Stylesheet
 * ============================================================
 * MOBILE-ONLY overrides. All rules are inside @media queries
 * so ZERO impact on desktop (> 768 px).
 * 
 * Covers:
 *   1. Global / resets
 *   2. Auth pages  (login, signup, register org…)
 *   3. Chat / Dashboard  (left-sidebar, contacts, chat UI)
 *   4. App pages  (teams, profile, notifications)
 *   5. Admin panel
 *   6. Modals & overlays
 *   7. Touch utilities
 * ============================================================
 */

/* ============================================================
   0. GLOBAL — BOTH breakpoints
   ============================================================ */

/* Prevent horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* Make all images safe on small screens */
img { max-width: 100%; height: auto; }

/* Respect safe-area insets (notched phones & home-bar phones) */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   1. GLOBAL MOBILE RESETS
   ============================================================ */
@media (max-width: 768px) {

  /* --- Touch targets: all interactive items get min 44 px --- */
  button,
  .btn,
  a.nav-link,
  .feature-item,
  .member-item,
  .team-item,
  .mobile-contact-item,
  .notif-item,
  .status-option {
    min-height: 44px;
  }

  /* --- Better default font size on small screens --- */
  body { font-size: 15px; }

  /* --- Remove browser tap flash --- */
  * { -webkit-tap-highlight-color: transparent; }

  /* --- Smooth scrolling throughout --- */
  *, *::before, *::after { scroll-behavior: smooth; }
}

/* ============================================================
   2. AUTH PAGES  (login, signup, org creation…)
   ============================================================ */

/* auth_layout.php uses an inline <style> but we add extra fixes here */
@media (max-width: 576px) {

  /* Body centering — remove tall padding on very small screens */
  body.auth-body {
    padding: 16px 12px;
    align-items: flex-start;
  }

  /* Auth card — smaller padding and tighter border-radius */
  .auth-card {
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }

  /* Logo — smaller on phones */
  .auth-logo i  { font-size: 1.8rem !important; }
  .auth-logo h1 { font-size: 1.3rem !important; }

  /* Header */
  .auth-header h2 { font-size: 1.2rem !important; }

  /* form-row — stack columns on phone */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Inputs — larger for comfortable typing */
  .auth-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom-in on focus */
    min-height: 48px;
  }

  /* Submit button */
  .auth-btn,
  button[type="submit"] {
    min-height: 50px;
    font-size: 1rem !important;
  }

  /* Invite signup / org card */
  .organization-card { max-width: 100% !important; }
}

@media (max-width: 360px) {
  .auth-card { padding: 20px 14px !important; }
}

/* ============================================================
   3. CHAT / DASHBOARD  (the main app page)
   ============================================================ */
@media (max-width: 768px) {

  /* ──────────────────────────────────────────────────────────
     3a. MOBILE HEADER  — top fixed bar
     ────────────────────────────────────────────────────────── */
  .mobile-header {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    z-index: 1050;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  .mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.75rem;
    height: 56px;
  }

  /* Hide ellipsis button — Sign Out is now in the nav menu (hamburger) */
  #mobileSidebarToggle { display: none !important; }

  /* Menu & sidebar toggle buttons */
  .mobile-menu-toggle,
  .mobile-sidebar-toggle {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: #02111B;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .mobile-menu-toggle:hover,
  .mobile-sidebar-toggle:hover {
    background: #f1f3f5;
  }

  /* Notification bell button in mobile header */
  .mobile-notif-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: #02111B;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .mobile-notif-btn:hover { background: #f1f3f5; }

  .mobile-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #dc3545;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 8px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
  }

  /* Brand logo in mobile header */
  .mobile-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
  }

  .mobile-brand-logo { width: 28px; height: 28px; object-fit: contain; }

  .mobile-brand-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: #e98b48;
  }

  /* ──────────────────────────────────────────────────────────
     3b. MAIN CONTENT — push below fixed header
     ────────────────────────────────────────────────────────── */
  .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-top: 56px !important;
    height: 100vh;    /* fallback */
    height: 100dvh;   /* shrinks when keyboard opens — keeps input visible */
    overflow: hidden;
  }

  .main-header { display: none !important; }

  /* ──────────────────────────────────────────────────────────
     3c. SIDEBARS — slide-in drawers on mobile
     ────────────────────────────────────────────────────────── */

  /* Base: keep display:flex but hidden + off-screen so the
     transform transition can actually animate them.
     visibility is delayed on close so the slide-out finishes
     before the element becomes truly invisible.                */
  .left-sidebar,
  .right-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 1100 !important;
    overflow-y: auto;
    visibility: hidden !important;
    background: #ffffff !important;  /* --bg-white undefined → transparent; force solid */
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.28s !important;
  }

  .left-sidebar {
    left: 0 !important;
    width: min(300px, 88vw) !important;
    transform: translateX(-110%) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
  }

  .right-sidebar {
    right: 0 !important;
    width: min(280px, 84vw) !important;
    transform: translateX(110%) !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
  }

  /* When open — slide into view immediately, hide instantly on close start */
  .left-sidebar.mobile-open,
  .right-sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    background: #ffffff !important;  /* --bg-white is undefined so sidebars go transparent — force solid white */
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0s !important;
  }

  /* Close button inside sidebar */
  .mobile-close-btn {
    display: flex !important;
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    background: rgba(93,115,126,.12) !important;
    color: #02111B !important;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 0.875rem;
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }

  .mobile-close-btn:hover { background: rgba(93,115,126,.22) !important; }

  /* Overlay backdrop */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2,17,27,.45);
    z-index: 1060;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  /* JS sets display:block then adds .active to trigger the fade */
  .mobile-overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  /* Prevent body scroll when drawers are open */
  body.mobile-menu-open { overflow: hidden; }

  /* ──────────────────────────────────────────────────────────
     3d. MOBILE CONTACTS VIEW  — the "inbox" on mobile
     ────────────────────────────────────────────────────────── */
  .mobile-contacts-view {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;     /* required for flex child to shrink and scroll */
    overflow-y: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-contacts-header {
    padding: 0.625rem 1rem 0.875rem;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .mobile-contacts-title {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: #02111B;
    margin: 0 0 0.15rem 0;
  }

  .mobile-contacts-subtitle {
    font-size: 0.82rem !important;
    color: #5D737E;
    margin: 0;
  }

  /* Section labels (Channels, Direct Messages) */
  .mobile-section-label {
    padding: 0.5rem 1rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    background: #fafbfc;
    border-bottom: 1px solid #f0f2f5;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* Channel item in mobile contacts */
  .mobile-channel-item { align-items: center; min-height: 60px; }

  .mobile-channel-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    margin-right: 0.875rem;
  }

  /* Contact items — WhatsApp-style list */
  .mobile-contacts-list { padding: 0 !important; }

  /* Ensure last item is never clipped by viewport edge or home bar */
  .mobile-contacts-list:last-of-type,
  .mobile-contacts-list {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-contact-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f0f2f5;
    gap: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 72px;
  }

  .mobile-contact-item:active { background: #f5f7fa; }

  .mobile-contact-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .mobile-contact-status {
    width: 13px !important;
    height: 13px !important;
    border: 2.5px solid #fff !important;
    bottom: 1px !important;
    right: 1px !important;
  }

  .mobile-contact-name {
    font-size: 0.9375rem !important;
    font-weight: 600;
    color: #02111B;
  }

  .mobile-contact-last-message {
    font-size: 0.8125rem !important;
    color: #5D737E;
    line-height: 1.3;
  }

  .mobile-contact-time {
    font-size: 0.75rem !important;
    color: #9ca3af;
    white-space: nowrap;
  }

  /* ──────────────────────────────────────────────────────────
     3e. CHAT INTERFACE  — when a conversation is open
     ────────────────────────────────────────────────────────── */

  /* Hide contacts view, show chat when conversation-active */
  .main-content.conversation-active .mobile-contacts-view { display: none !important; }
  /* flex:1 fills remaining space in main-content — mirrors desktop exactly.
     A subtle slide-in-from-right animation greets the user the first time the
     chat panel mounts (one-shot — `animation` on display=block transition). */
  .main-content.conversation-active .chat-interface {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
    height: auto !important;
    animation: chat-slide-in 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .main-content.conversation-active #emptyState { display: none !important; }

  /* Swipe-back gesture visual cue — slight dim/elevation when committed */
  .chat-interface.swipe-back-armed {
    box-shadow: -8px 0 18px rgba(0,0,0,0.12);
  }

  @keyframes chat-slide-in {
    from { transform: translateX(28%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1; }
  }

  /* Chat interface — hidden until conversation selected */
  .chat-interface {
    display: none;
    flex-direction: column;
    width: 100%;
    flex: 1;
    overflow: hidden;
  }

  #emptyState { display: none !important; }

  /* Chat Header — static at top. No sticky needed: .chat-interface is a flex
     column with overflow:hidden, so .chat-header (flex-shrink:0) never moves.
     Only .messages-container (flex:1, overflow-y:auto) scrolls. */
  .chat-header {
    padding: 0.625rem 0.875rem !important;
    min-height: 56px;
    flex-shrink: 0 !important;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }

  /* Back button — visible on mobile */
  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    color: #02111B;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: background 0.15s;
  }

  .mobile-back-btn:active { background: #f1f3f5; }

  /* Chat avatar — slightly smaller */
  .chat-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  /* Contact name */
  .chat-contact-details h4 {
    font-size: 0.875rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38vw;
  }

  .chat-status {
    font-size: 0.72rem !important;
  }

  /* Action buttons — keep only essentials on mobile, hide rest */
  .chat-actions { gap: 0.25rem !important; }

  .chat-actions .btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide phone/video call in chat header on mobile (keep search + more) */
  .chat-actions .btn:nth-child(3),
  .chat-actions .btn:nth-child(4) {
    display: none !important;
  }

  /* Messages Container */
  .messages-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem !important;
    background: #f8fafc;
    scroll-behavior: auto !important; /* instant jump — no visible scroll animation */
  }

  /* Input bar: fixed to screen bottom — never shifts regardless of scroll
     or keyboard state. Padding-bottom on messages-container compensates. */
  .main-content.conversation-active .chat-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
  }

  .main-content.conversation-active .messages-container {
    padding-bottom: 130px !important;
  }

  /* Message bubbles — slightly wider on mobile screens */
  .message-bubble {
    max-width: 82vw !important;
  }

  /* Message text — comfortable reading size */
  .message-content { font-size: 0.9375rem !important; }

  .message-time { font-size: 0.68rem !important; }

  .message-sender { font-size: 0.72rem !important; }

  /* ──────────────────────────────────────────────────────────
     3f. CHAT INPUT  — thumbs-up zone
     ────────────────────────────────────────────────────────── */
  .chat-input-container {
    flex-shrink: 0;
    padding: 0.625rem 0.75rem !important;
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom)) !important;
    background: #fff;
    border-top: 1px solid #e8eaed;
  }

  /* Formatting toolbar — collapse to a tiny 2-button strip on mobile */
  .formatting-toolbar {
    gap: 0 !important;
    padding: 4px 6px !important;
    flex-wrap: nowrap;
    border-bottom: 1px solid #f0f2f5 !important;
    background: #fafbfc !important;
    overflow: hidden;
    min-height: 40px;
  }

  /* Hide everything in the toolbar except emoji + attach on mobile */
  .formatting-toolbar > *             { display: none !important; }
  .formatting-toolbar .emoji-picker-wrapper,
  .formatting-toolbar #attachFileBtn { display: flex !important; }

  /* Make the emoji picker wrapper visible as flex */
  .formatting-toolbar .emoji-picker-wrapper { align-items: center; }

  /* Larger touch targets for emoji + attach */
  .formatting-toolbar #emojiPickerBtn,
  .formatting-toolbar #attachFileBtn {
    width: 44px !important;
    height: 40px !important;
    color: #5D737E !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1.125rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .formatting-toolbar #emojiPickerBtn:active,
  .formatting-toolbar #attachFileBtn:active {
    background: #f0f2f5 !important;
  }

  /* Emoji picker dropdown — better position on mobile */
  .formatting-toolbar .emoji-picker-dropdown {
    bottom: auto !important;
    top: 100% !important;
    left: 0 !important;
    max-width: 90vw !important;
    width: 280px !important;
  }

  /* Message input wrapper — pill shape */
  .message-input-wrapper {
    border-radius: 22px !important;
    padding: 8px 50px 8px 14px !important;
    min-height: 46px !important;
    background: #f5f7fa !important;
    border: 1px solid #e1e5e9 !important;
    box-shadow: none !important;
  }

  .message-input-wrapper:focus-within {
    background: #fff !important;
    border-color: #02111B !important;
  }

  /* The contenteditable area */
  #messageInput {
    font-size: 16px !important; /* Prevent iOS zoom */
    line-height: 1.45 !important;
  }

  /* Send button — circular, stick to right */
  .send-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    bottom: 4px !important;
    right: 4px !important;
  }

  /* Attach file / emoji — larger touch targets */
  .attach-file-btn,
  .emoji-picker-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* Typing indicator */
  .typing-indicator {
    padding: 0.375rem 1rem !important;
    font-size: 0.75rem !important;
  }

  /* ──────────────────────────────────────────────────────────
     3g. MEMBER SELECTION MODE — inside left sidebar on mobile
     ────────────────────────────────────────────────────────── */
  .member-selection-header {
    padding: 0.875rem 1rem !important;
  }

  .selection-member-item {
    padding: 0.75rem !important;
    border-radius: 10px !important;
  }

  .selection-member-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  /* ──────────────────────────────────────────────────────────
     3h. LEFT SIDEBAR members list — slightly bigger items
     ────────────────────────────────────────────────────────── */
  .member-item {
    padding: 0.875rem 0.75rem !important;
    border-radius: 10px !important;
    margin-bottom: 0.25rem;
  }

  .member-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .member-name { font-size: 0.9rem !important; }

  /* ──────────────────────────────────────────────────────────
     3i. RIGHT SIDEBAR — team items inside
     ────────────────────────────────────────────────────────── */
  .team-item {
    padding: 0.875rem 0.75rem !important;
    border-radius: 10px !important;
    margin-bottom: 0.25rem;
  }

  /* ──────────────────────────────────────────────────────────
     3j. IN-CHAT SEARCH BAR
     ────────────────────────────────────────────────────────── */
  .in-chat-search-bar .input-group {
    font-size: 0.875rem;
  }

  /* ──────────────────────────────────────────────────────────
     3k. FILE PREVIEW INLINE
     ────────────────────────────────────────────────────────── */
  .file-preview-inline {
    padding: 0.75rem !important;
  }

  .selected-files-list {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  }
}

/* Extra-small phones (< 375px) */
@media (max-width: 374px) {
  .mobile-header { height: 52px; }
  .mobile-header-content { height: 52px; }
  .main-content  { padding-top: 52px !important; }
  /* mobile-contacts-view uses flex:1 — no explicit height needed */
}

/* ============================================================
   4. APP PAGES  (teams/channels, profile, notifications,
                  leave requests)
   ============================================================ */
@media (max-width: 768px) {

  /* ─── TEAMS / CHANNELS PAGE ─────────────────────────────── */

  /* Channel cards — single column */
  .channel-card { margin-bottom: 0.5rem; }

  /* Tab bar scrolls horizontally */
  .channel-tabs-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .channel-tabs-row::-webkit-scrollbar { display: none; }

  /* ─── PROFILE PAGE ─────────────────────────────────────── */

  /* Hero section — stacks on mobile */
  .profile-hero {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  .profile-hero .d-flex.align-items-center { flex-direction: column; text-align: center; gap: 0.75rem !important; }
  .profile-hero .ms-auto { margin-left: 0 !important; margin-top: 0.5rem; }

  .avatar-main {
    width: 80px !important;
    height: 80px !important;
  }

  /* Save button — full width on mobile */
  .profile-card .text-end { text-align: left !important; }
  .profile-card .btn { width: 100% !important; }

  /* Leave history table — scrollable */
  .table-responsive { border-radius: 8px; }

  /* ─── NOTIFICATIONS PAGE ────────────────────────────────── */

  .notif-item {
    padding: 0.75rem 0.875rem !important;
    border-radius: 8px;
  }

  .notif-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.8rem !important;
  }

  /* Mark all read button — full width */
  #markAllBtn { width: 100%; }

  /* Notification header */
  .d-flex.align-items-center.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* Extra-small */
@media (max-width: 480px) {

  /* Profile form row columns stack */
  .col-md-6 { flex: 0 0 100%; max-width: 100%; }

  /* Better padding on tiny screens */
  .container-fluid.px-3 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
}

/* ============================================================
   5. ADMIN PANEL
   ============================================================ */
@media (max-width: 991.98px) {

  /* ─── ADMIN SIDEBAR ─────────────────────────────────────── */
  .admin-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    width: min(280px, 82vw) !important;
    box-shadow: none;
    z-index: 1200 !important;
  }

  .admin-sidebar.show {
    transform: translateX(0) !important;
    box-shadow: 6px 0 32px rgba(0,0,0,.18) !important;
  }

  /* ─── ADMIN OVERLAY ─────────────────────────────────────── */
  .admin-overlay {
    transition: opacity 0.28s ease !important;
    z-index: 1199 !important;
  }

  .admin-overlay.show {
    display: block !important;
    opacity: 1;
  }

  /* ─── ADMIN MAIN ────────────────────────────────────────── */
  .admin-main { margin-left: 0 !important; }

  /* ─── ADMIN TOPBAR ──────────────────────────────────────── */
  .admin-topbar {
    padding: 0.75rem 1rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
  }

  /* Hamburger — always visible on mobile */
  .admin-topbar .d-lg-none {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0;
  }

  /* Page title shorter */
  .admin-topbar h5 {
    font-size: 0.9375rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
  }

  /* ─── ADMIN CONTENT ─────────────────────────────────────── */
  .admin-content {
    padding: 1rem !important;
  }

  /* ─── STAT CARDS — 2-up grid on small tablets, 1-up on phones ─ */
  .stat-card .card-body {
    padding: 1rem !important;
  }

  /* ─── ADMIN TABLES ──────────────────────────────────────── */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  /* Table cells — tighter padding */
  .table td, .table th {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  /* Nav links in sidebar — slightly larger touch target */
  .sidebar-nav .nav-link {
    padding: 0.75rem 1.5rem !important;
    min-height: 48px;
  }

  /* ─── BADGE: hide text on very small screens ─────────────── */
  .admin-badge span { display: none; }
}

@media (max-width: 576px) {
  /* Stat cards — single column */
  .row .col-md-3,
  .row .col-md-4,
  .row .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .admin-content { padding: 0.75rem !important; }

  /* Card action buttons — full width stacking */
  .card .d-flex.gap-2 { flex-direction: column; }
  .card .d-flex.gap-2 .btn { width: 100% !important; }

  /* Join / leave request tables — show only key columns */
  .table .d-none-xs { display: none !important; }
}

/* ============================================================
   6. MODALS (Bootstrap) — mobile improvements
   ============================================================ */
@media (max-width: 576px) {

  /* Full-screen modals on small phones */
  .modal-dialog {
    margin: 0.5rem !important;
  }

  .modal-content {
    border-radius: 16px !important;
  }

  .modal-header {
    padding: 1rem 1.25rem !important;
  }

  .modal-body {
    padding: 1.25rem !important;
  }

  .modal-footer {
    padding: 0.875rem 1.25rem !important;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  /* Modal buttons — full width stacked */
  .modal-footer .btn {
    width: 100% !important;
    min-height: 46px;
  }

  /* Message search modal layout */
  #messageSearchModal .modal-dialog { max-width: 100% !important; margin: 0.25rem !important; }
  .search-layout { flex-direction: column !important; height: auto !important; min-height: unset !important; }
  .search-filters-column { width: 100% !important; border-right: none !important; border-top: 1px solid #e9ecef; }
  .search-results-column { border-right: none !important; }
}

/* ============================================================
   7. TOUCH UTILITIES & MISC
   ============================================================ */
@media (max-width: 768px) {

  /* Horizontal scroll container (used in tabs) */
  .scroll-x-touch {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .scroll-x-touch::-webkit-scrollbar { display: none; }

  /* Prevent text selection during touch-scroll */
  .left-sidebar,
  .right-sidebar,
  .mobile-contacts-list {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Nice dividers */
  .mobile-divider {
    height: 1px;
    background: #f0f2f5;
    margin: 0.25rem 0;
  }

  /* Floating action-like primary button */
  .mobile-fab {
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #02111B;
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(2,17,27,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 500;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .mobile-fab:active {
    transform: scale(0.94);
    box-shadow: 0 2px 8px rgba(2,17,27,.3);
  }

  /* Skeleton / loading shimmer — used in message loading */
  .shimmer {
    background: linear-gradient(90deg, #f0f2f5 25%, #e4e7ea 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 6px;
  }

  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Invite link — full width on mobile */
  .invite-link {
    padding: 0.75rem 1rem !important;
  }

  /* Right sidebar feature items */
  .feature-item {
    padding: 0.875rem 0.75rem !important;
  }

  /* Form controls — always 16px to prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Better alert styling on mobile */
  .alert {
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
  }

  /* Badges — readable size */
  .badge { font-size: 0.7rem !important; }

  /* Scrollbars — thin on mobile */
  *::-webkit-scrollbar { width: 3px; height: 3px; }
  *::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
}

/* ============================================================
   8.  SAFE-AREA  (iPhone home bar)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .chat-input-container {
      padding-bottom: calc(0.625rem + env(safe-area-inset-bottom)) !important;
    }

    .admin-topbar {
      padding-top: max(0.75rem, env(safe-area-inset-top)) !important;
    }

    .mobile-header {
      padding-top: env(safe-area-inset-top) !important;
      height: calc(56px + env(safe-area-inset-top)) !important;
    }

    .main-content,
    .mobile-contacts-view {
      padding-top: calc(56px + env(safe-area-inset-top)) !important;
    }
    /* mobile-contacts-view uses flex:1 so no height override needed — just extra bottom padding */
    .mobile-contacts-view {
      padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
    /* chat-interface is a flex:1 child — never needs padding-top */
  }
}