/* Khaled Media — Mobile responsive overrides */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* Sidebar slide-in drawer */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 9000;
    box-shadow: 4px 0 24px rgba(0,0,0,.6);
    overflow-y: auto;
  }
  body.km-sidebar-open .sidebar { transform: translateX(0); }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-top: 56px !important;
  }

  /* Hamburger button */
  .km-mobile-toggle {
    position: fixed; top: 12px; left: 12px;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none; border-radius: 11px;
    z-index: 10000; color: #020617;
    font-size: 20px; font-weight: 900;
    box-shadow: 0 4px 14px rgba(251,191,36,.45);
    cursor: pointer; display: flex !important;
    align-items: center; justify-content: center;
  }

  /* Sidebar backdrop */
  .km-mobile-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.65);
    z-index: 8999; opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  body.km-sidebar-open .km-mobile-backdrop { opacity: 1; pointer-events: auto; }

  /* Sub-tool iframe overlay — full width */
  #kmFramePane, #kmFrameOverlay {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  #kmFrameIframe {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Hide all sub-tool quick-action floating buttons inside king dashboard */
  .km-quick-actions, .km-king-floating-actions, .king-actions-floating,
  [class*="floating-actions"], [class*="floating-bar"], .km-floating-bar,
  .quick-actions-floating, #kingQuickActions, [class*="quick-action-fab"] {
    display: none !important;
  }

  /* Cards / grids stack on mobile */
  .stat-grid, .stats-grid, .king-actions-grid, .king-grid,
  [class*="kpi-grid"], .card-grid, .grid-cards,
  [class*="actions-grid"], .attention-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 2-up only for tighter stat tiles */
  .stat-tile, .kpi-tile { font-size: 14px !important; }

  /* Chat bubble — smaller and bottom-right corner */
  #chatBubbleButton, .km-chat-bubble {
    width: 52px !important; height: 52px !important;
    right: 12px !important; bottom: 12px !important;
    left: auto !important; top: auto !important;
    z-index: 7000 !important;
  }

  /* Payout Safety floating panel — collapsed = tiny pill, expanded = full sheet */
  #km-safety-panel {
    left: 12px !important; right: 76px !important;
    width: auto !important; max-width: calc(100vw - 88px) !important;
    bottom: 12px !important; top: auto !important;
    z-index: 7001 !important;
  }
  #km-safety-panel.collapsed {
    height: 40px !important;
    max-height: 40px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 0 14px !important;
  }
  #km-safety-panel.collapsed > *:not(.km-safety-header):not(.km-safety-toggle) { display: none !important; }
  #km-safety-panel:not(.collapsed) {
    left: 12px !important; right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    bottom: 76px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  /* Detail drawers / overlays — full screen on mobile */
  .detail-drawer, #appDrawer, #releaseDetailPanel {
    width: 100% !important; max-width: 100% !important;
    left: 0 !important; right: 0 !important;
  }

  /* Skip-to-content stays off-screen except when focused */
  #adminSkipToContent { left: -9999px !important; }
  #adminSkipToContent:focus { left: 16px !important; top: 16px !important; }

  /* Modals — full screen */
  .modal-content, .modal-dialog { max-width: 95vw !important; margin: 12px !important; }
}

@media (min-width: 769px) {
  .km-mobile-toggle, .km-mobile-backdrop { display: none !important; }
}

/* Sub-tool inner floating bars (king dashboard, etc.) */
@media (max-width: 768px) {
  .qa-bar, .qa-floating, .quick-action-bar, .king-quick-bar {
    display: none !important;
  }
  /* King Actions grid — stack to 2 columns on mobile */
  .king-actions, .king-grid-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .king-action-card, .king-action {
    font-size: 12px !important;
    padding: 14px 10px !important;
  }
}