/* Mobile-only overrides (keeps desktop untouched) */
@media (max-width: 720px){

  /* Use long-press instead of dots on mobile */
  .item-dots{display:none !important;}
  .selectbar{padding-top:12px;}


  /* Make the drawer (customer details / menu) full-screen and not transparent */
  .drawer{
    width:100vw !important;
    max-width:100vw !important;
    right:0 !important;
    left:0 !important;
    border-left:none !important;
    background:rgba(11,18,32,.98) !important;
  }
  .drawer-overlay{ background:rgba(0,0,0,.60) !important; }

  /* Card headers: prevent button/tab overlap */
  .card .hd{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .card .hd > div{ width:100%; }
  .card .hd > div[style*="display:flex"]{ flex-wrap:wrap; }

  /* Search: button beside input (saves vertical space) */
  .search{ width:100%; flex-wrap:nowrap; gap:8px; }
  .search .search-inp{ width:100%; }
  .search .btn.small{ width:auto; white-space:nowrap; padding:10px 12px; border-radius:999px; }

  /* Reports: keep from/to/q + filters button on one row (scroll horizontally if needed) */
  .report-bar{ width:100%; flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .report-bar > *{ flex:0 0 auto; }
  .report-bar .rb-date input{ width:140px; }
  .report-bar .rb-q{ min-width:220px !important; }



/* Generic form grids: stack on mobile */
.form-grid{ grid-template-columns: 1fr !important; }
.form-grid > *{ grid-column: auto !important; }
.filters{ width:100%; }
.filters > div{ min-width:140px; }
.filters input, .filters select{ width:100%; }

  /* Add-customer modal grid to single column */
  .modal .box form[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* Prevent iOS zoom */
  input, select, textarea{ font-size:16px; }

  /* Flex min-width fix to prevent hidden overflow */
  .chat-wrap, .chat-wrap > *, .bd, .card{ min-width:0; }
  .chat-head, .chat-body, .chat-foot{ min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }

  /* Customer view: avoid horizontal overflow / broken layout */
   body{ overflow-x:hidden; }

  /* When a customer chat is open on mobile, hide customers-page controls
     (tabs/search/filters) so they don't appear inside the chat drawer. */
  body.mobile-chat .grid > .card > .hd{ display:none !important; }
  body.mobile-chat .grid > .card{ padding-top:0 !important; }
  body.mobile-chat .grid > .card > .bd{ padding-top:0 !important; }

  /* WhatsApp-like: maximize chat area when inside a customer */
  body.mobile-chat .topbar{ display:none !important; }
  body.mobile-chat .container{ width:100% !important; margin:0 !important; }
  body.mobile-chat .grid{ margin:0 !important; padding:0 !important; gap:0 !important; }
  body.mobile-chat .card.chat{ border-radius:0 !important; border-left:0 !important; border-right:0 !important; }

  /* Force chat to take full viewport height */
  body.mobile-chat .chat-wrap{ height:100dvh !important; }
  body.mobile-chat .chat{ height:100dvh !important; min-height:100dvh !important; }
  body.mobile-chat .chat-body{ flex:1 1 auto; overflow:auto; }

  /* Make chat header compact (show name + phone only) */
  body.mobile-chat .chat-head{ padding:10px 12px !important; gap:8px !important; }
  body.mobile-chat .chat-head strong{ font-size:16px; }
  body.mobile-chat .chat-head > div:first-child > div:nth-of-type(2){ display:none !important; } /* hide street */
  body.mobile-chat .chat-head > div:first-child > div:nth-of-type(1) small{ font-size:12px; }

  /* Tighten "آخر تقرير" strip */
  body.mobile-chat .last-report{ padding:8px 10px !important; margin-bottom:8px !important; }

  /* Composer stays visible and doesn't steal extra height */
  body.mobile-chat .composer, body.mobile-chat .chat-foot{ padding:8px 10px !important; }

  /* Reduce footer height (WhatsApp-like compact composer) */
  body.mobile-chat .chat-foot{ flex-direction:row !important; align-items:flex-end !important; gap:6px !important; }
  body.mobile-chat #msgBox{ min-height:44px !important; max-height:110px !important; }
  body.mobile-chat #sendBtn{ width:44px !important; height:44px !important; padding:0 !important; border-radius:999px !important; }
  body.mobile-chat #sendBtn .send-text{ display:none !important; }
  body.mobile-chat #sendBtn .send-ico{ font-size:18px !important; transform: translateY(1px); }

  /* Tag: use picker select on mobile-chat */
  body.mobile-chat .tagwrap{ width:94px !important; flex:0 0 auto; }
  body.mobile-chat #tagInput{ display:none !important; }
  body.mobile-chat #tagSelect{ display:block !important; width:100% !important; padding:10px 10px !important; }

  /* Outside chat (customers list view), keep composer stacked */
  body:not(.mobile-chat) .chat-foot{ flex-direction:column; align-items:stretch; gap:10px; }
  body:not(.mobile-chat) .chat-foot > *{ width:100% !important; }
  body:not(.mobile-chat) .chat-foot button#sendBtn{ width:100% !important; border-radius:999px; }

  /* Emoji panel should fit within viewport */
  .emoji-panel{ max-width: min(360px, calc(100vw - 28px)); }
  @media (max-width: 420px){
    .emoji-panel{ grid-template-columns:repeat(7, 1fr); }
  }

  /* Tables: scroll inside, not page */
  .table-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}



/* ===== Mobile style polish (WhatsApp-like) ===== */
@media (max-width: 720px){
  .topbar{position:sticky; top:0; border-radius:0 !important; margin:0 !important;}
  .container{width:100% !important; margin:0 !important;}
  .chat-wrap{grid-template-columns:1fr !important;}
  .list{height:auto !important; max-height:45vh; border-radius:0 !important;}
  .chat-body{padding:12px !important;}
  .msg{max-width:86% !important;}
  .emoji-panel{max-width:92vw !important; grid-template-columns:repeat(8, 1fr) !important;}
  body.login .container{margin:0 !important;}
}
/* ===== Light Theme: Fix Side Menu Visibility ===== */
/* لو عندك body.dark للدارك سيبه زي ما هو - ده خاص باللايت فقط */
body:not(.dark) .side-menu,
body:not(.dark) .menu-panel,
body:not(.dark) .drawer,
body:not(.dark) .nav-drawer {
  background: #ffffff !important;
  color: #0b1b14 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
}

/* أزرار/عناصر القائمة */
body:not(.dark) .side-menu a,
body:not(.dark) .side-menu button,
body:not(.dark) .menu-panel a,
body:not(.dark) .menu-panel button,
body:not(.dark) .drawer a,
body:not(.dark) .drawer button,
body:not(.dark) .nav-drawer a,
body:not(.dark) .nav-drawer button {
  color: #0b1b14 !important;
}

/* عناصر القائمة اللي شكلها “كروت/أزرار” */
body:not(.dark) .side-menu .menu-item,
body:not(.dark) .menu-panel .menu-item,
body:not(.dark) .drawer .menu-item,
body:not(.dark) .nav-drawer .menu-item,
body:not(.dark) .side-menu .btn,
body:not(.dark) .menu-panel .btn,
body:not(.dark) .drawer .btn,
body:not(.dark) .nav-drawer .btn {
  background: #f5f7fb !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* الحالة Active / Hover */
body:not(.dark) .side-menu .menu-item.active,
body:not(.dark) .menu-panel .menu-item.active,
body:not(.dark) .drawer .menu-item.active,
body:not(.dark) .nav-drawer .menu-item.active,
body:not(.dark) .side-menu .menu-item:hover,
body:not(.dark) .menu-panel .menu-item:hover,
body:not(.dark) .drawer .menu-item:hover,
body:not(.dark) .nav-drawer .menu-item:hover {
  background: #e9f3ff !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* زرار الإغلاق X */
body:not(.dark) .side-menu .close,
body:not(.dark) .menu-panel .close,
body:not(.dark) .drawer .close,
body:not(.dark) .nav-drawer .close {
  color: #0b1b14 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

/* الخلفية الشفافة وراء المنيو (Overlay) */
body:not(.dark) .menu-overlay,
body:not(.dark) .drawer-backdrop,
body:not(.dark) .nav-overlay {
  background: rgba(0,0,0,.35) !important;
}
/* ===== v6.1 mobile chat bubble patch ===== */
@media (max-width: 720px){
  .chat-body{padding:10px !important;}
  .msgstack{max-width:100% !important;}
  .msg{
    max-width:94% !important;
    width:auto !important;
    padding:6px 10px !important;
    line-height:1.25 !important;
  }
}

@media (max-width: 720px){
  .users-shell{grid-template-columns:1fr !important}
  .users-cards{max-height:none !important}
  .users-content-head{align-items:stretch !important}
  .seg-tabs{width:100%}
  .seg-tabs .pill{flex:1 1 0;text-align:center}

  .filter-toggle-mobile{display:inline-flex !important}
}




/* ===== patch: customers mobile compact header / reports mobile ===== */
@media (max-width: 720px){
  body.customers-page .selectbar{display:none !important;}
  body.customers-page .topbar-notifications .notifications-menu{right:0 !important;left:auto !important;max-width:min(92vw,360px);}
  body.customers-page .notifications-menu{top:44px;}
  .report-page .card .hd{padding:10px 12px !important;}
  .report-page .table{min-width:640px;}
  .report-page .table-wrap{overflow:auto !important;-webkit-overflow-scrolling:touch;max-width:100%;}
}

/* ===== mobile notifications dropdown polish ===== */
@media (max-width: 720px){
  .topbar,
  .navlinks,
  .topbar-notifications{overflow:visible !important;}

  .topbar-notifications{position:static !important;}

  .notifications-menu{
    position:fixed !important;
    top:72px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:min(68vh, 520px) !important;
    overflow:auto !important;
    border-radius:18px !important;
    z-index:99999 !important;
    box-shadow:0 18px 48px rgba(0,0,0,.22) !important;
    -webkit-overflow-scrolling:touch;
  }

  .notifications-menu-head{
    position:sticky;
    top:0;
    background:var(--card);
    z-index:2;
  }

  .notification-item{
    display:block !important;
    width:100% !important;
    padding:12px 14px !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  .notification-title{
    display:block !important;
    font-size:14px;
    line-height:1.55;
    white-space:normal !important;
    word-break:break-word;
    overflow-wrap:anywhere;
    margin-bottom:6px;
  }

  .notification-time{
    display:block !important;
    font-size:12px;
    direction:ltr;
    text-align:end;
  }
}


@media (max-width: 768px){
  .topbar .install-pill{ font-size:12px; padding:8px 10px; }
}

/* ===== v12.6 Mobile Theme Stabilization Patch ===== */
[data-theme="light"] .side-menu,
[data-theme="light"] .menu-panel,
[data-theme="light"] .drawer,
[data-theme="light"] .nav-drawer {
  background:#ffffff !important;
  color:#0b1b14 !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
}
[data-theme="light"] .side-menu a,
[data-theme="light"] .side-menu button,
[data-theme="light"] .menu-panel a,
[data-theme="light"] .menu-panel button,
[data-theme="light"] .drawer a,
[data-theme="light"] .drawer button,
[data-theme="light"] .nav-drawer a,
[data-theme="light"] .nav-drawer button{color:#0b1b14 !important}
[data-theme="light"] .side-menu .menu-item,
[data-theme="light"] .menu-panel .menu-item,
[data-theme="light"] .drawer .menu-item,
[data-theme="light"] .nav-drawer .menu-item,
[data-theme="light"] .side-menu .btn,
[data-theme="light"] .menu-panel .btn,
[data-theme="light"] .drawer .btn,
[data-theme="light"] .nav-drawer .btn{background:#f5f7fb !important;border:1px solid rgba(0,0,0,.10) !important}
[data-theme="light"] .side-menu .menu-item.active,
[data-theme="light"] .menu-panel .menu-item.active,
[data-theme="light"] .drawer .menu-item.active,
[data-theme="light"] .nav-drawer .menu-item.active,
[data-theme="light"] .side-menu .menu-item:hover,
[data-theme="light"] .menu-panel .menu-item:hover,
[data-theme="light"] .drawer .menu-item:hover,
[data-theme="light"] .nav-drawer .menu-item:hover{background:#e9f3ff !important;border-color:rgba(0,0,0,.14) !important}
[data-theme="light"] .side-menu .close,
[data-theme="light"] .menu-panel .close,
[data-theme="light"] .drawer .close,
[data-theme="light"] .nav-drawer .close{color:#0b1b14 !important;background:#ffffff !important;border:1px solid rgba(0,0,0,.12) !important}
[data-theme="light"] .menu-overlay,
[data-theme="light"] .drawer-backdrop,
[data-theme="light"] .nav-overlay{background:rgba(0,0,0,.35) !important}