/* ===== BROSMOB UNIVERSAL MOBILE FIX ===== */
/* ملف موحّد لكل قواعد الهاتف — يعمل مع كل الصفحات */

@media (max-width: 768px) {

  /* ===== Sidebar → Bottom Nav ===== */
  .sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: 60px;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 1000 !important;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
  }
  .sidebar::-webkit-scrollbar { height: 3px; }
  .sidebar .brand { display: none !important; }
  .menu {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 4px;
    flex: 1;
  }
  .menu li { margin-bottom: 0 !important; flex-shrink: 0; }
  .menu .section-title { display: none !important; }
  .menu a {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    min-width: 62px;
    justify-content: center !important;
    font-size: 10px !important;
  }
  .menu a span:not(.icon) { display: block !important; font-size: 10px; line-height: 1.2; }
  .menu a .icon { font-size: 20px !important; width: auto !important; }

  /* ===== Main ===== */
  .main {
    margin-inline-start: 0 !important;
    padding: 12px !important;
    padding-bottom: 90px !important;
    min-height: auto;
  }

  /* ===== Topbar ===== */
  .topbar { padding: 10px 12px !important; gap: 8px !important; border-radius: 12px; margin-bottom: 14px; }
  .topbar .welcome h3 { font-size: 14px !important; margin-bottom: 2px; }
  .topbar .welcome p { font-size: 10px !important; }
  .topbar .actions { gap: 6px !important; flex-wrap: nowrap; }
  .btn-icon { width: 34px !important; height: 34px !important; font-size: 14px !important; border-radius: 8px !important; }
  .user-box { padding: 2px 8px 2px 2px !important; gap: 6px; }
  .user-box .avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .user-box .info { display: none !important; }
  .notif-dropdown { position: fixed !important; top: 70px !important; left: 10px !important; right: 10px !important; width: auto !important; max-height: 65vh; }

  /* ===== Stats ===== */
  .stats { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .stat-card { padding: 14px !important; border-radius: 12px; }
  .stat-card .head { margin-bottom: 8px; }
  .stat-card .head .label { font-size: 11px; }
  .stat-card .head .ic { font-size: 16px; }
  .stat-card .value { font-size: 18px !important; }
  .stat-card .value .cur { font-size: 11px; }
  .stat-card .sub { font-size: 10px; }

  /* ===== Grids ===== */
  .grid-2 { grid-template-columns: 1fr !important; gap: 12px; }
  .form-grid, .form-grid.one, .form-grid.three { grid-template-columns: 1fr !important; }
  .filters { grid-template-columns: 1fr !important; }
  .info-grid, .detail-grid, .edit-form-grid { grid-template-columns: 1fr !important; }
  .settings-layout { grid-template-columns: 1fr !important; }
  .import-list { grid-template-columns: 1fr !important; }
  .role-cards { grid-template-columns: 1fr !important; }
  .perm-grid { grid-template-columns: 1fr !important; }
  .cat-grid { grid-template-columns: 1fr !important; }
  .theme-grid, .store-themes { grid-template-columns: 1fr 1fr !important; }
  .payment-options { grid-template-columns: 1fr !important; }
  .form-layout { grid-template-columns: 1fr !important; }

  /* ===== Settings Nav ===== */
  .settings-nav {
    position: static !important;
    max-height: none !important;
    display: flex !important;
    overflow-x: auto !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .settings-nav button { white-space: nowrap !important; width: auto !important; flex-shrink: 0 !important; padding: 10px 15px !important; }
  .settings-nav .nav-section { display: none !important; }

  /* ===== Panels ===== */
  .panel { padding: 14px !important; border-radius: 12px; }
  .panel .panel-head h3 { font-size: 14px; }
  .panel .panel-head a { font-size: 11px; }
  .panel h2 { font-size: 16px; }

  /* ===== Page Head ===== */
  .page-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }
  .page-head h1 { font-size: 18px !important; }
  .page-head .subtitle { font-size: 12px; }
  .page-head .count { font-size: 12px; }

  /* ===== Tables ===== */
  table { min-width: auto !important; font-size: 12px !important; }
  table thead th { padding: 8px 6px !important; font-size: 11px !important; }
  table td { padding: 10px 6px !important; font-size: 11px !important; }
  .table-wrap { overflow-x: auto !important; max-height: none !important; }
  .prod-cell .thumb { width: 32px !important; height: 32px !important; font-size: 16px; }
  .prod-cell .meta strong { font-size: 12px; }
  .prod-cell .meta span { font-size: 10px; }

  /* ===== Modals ===== */
  .modal, .modal.modal-lg, .modal.modal-xl { max-width: 100% !important; margin: 10px !important; border-radius: 14px; }
  .modal-head { padding: 15px; }
  .modal-head h3 { font-size: 15px; }
  .modal-body { padding: 15px; }
  .modal-foot { padding: 12px 15px; }

  /* ===== Save Bar ===== */
  .save-bar { inset-inline-start: 15px !important; inset-inline-end: 15px !important; bottom: 80px !important; padding: 12px 15px !important; }

  /* ===== Chart ===== */
  .chart { height: 140px !important; gap: 4px; }
  .chart .label { font-size: 9px; }
  .chart .bar .val { font-size: 9px; top: -16px; }

  /* ===== Alerts ===== */
  .alert-item { padding: 10px; gap: 10px; }
  .alert-item .ic { width: 32px; height: 32px; font-size: 14px; }
  .alert-item .txt strong { font-size: 12px; }
  .alert-item .txt span { font-size: 11px; }

  /* ===== POS ===== */
  .pos-grid { grid-template-columns: 1fr !important; }
  .pos-cart { max-height: none !important; }
  .pos-products { grid-template-columns: repeat(2, 1fr) !important; }
  .pos-prod .thumb { height: 65px !important; font-size: 30px !important; }
  .pos-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .type-toggle { margin-inline-start: 0 !important; }

  /* ===== Product Grid View ===== */
  .grid-wrap { grid-template-columns: 1fr 1fr !important; padding: 12px; }
  .prod-card .card-thumb { height: 90px !important; font-size: 34px !important; }

  /* ===== Tabs ===== */
  .tabs, .main-tabs { flex-wrap: wrap !important; gap: 6px; }
  .tab-btn, .main-tab { font-size: 11px !important; padding: 8px 12px !important; }

  /* ===== Search ===== */
  .search-input-row { flex-direction: column !important; gap: 8px; }
  .search-input-row input { width: 100% !important; }
  .search-input-row .btn { width: 100% !important; }
  .search-bar { flex-direction: column !important; }
  .search-bar input, .search-bar select { width: 100% !important; }

  /* ===== Roles & Perms ===== */
  .icon-picker { grid-template-columns: repeat(6, 1fr) !important; }

  /* ===== Sale Results ===== */
  .sale-result { flex-direction: column !important; text-align: center !important; gap: 10px !important; }
  .sale-result .sr-info { text-align: center; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr !important; }
  .grid-wrap { grid-template-columns: 1fr !important; }
  .pos-products { grid-template-columns: 1fr !important; }
  .menu a { min-width: 55px; padding: 6px 8px !important; }
  .menu a .icon { font-size: 18px !important; }
  .menu a span:not(.icon) { font-size: 9px; }
}