/* Codex responsive overrides for The Black Div */
:root { --mobile-nav-h: 78px; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
.table-wrap, .finance-table, .card, .modal, .search-modal { max-width: 100%; }
.table-wrap { -webkit-overflow-scrolling: touch; }
.card { min-width: 0; }
.flex-between { gap: 12px; }
.search-bar .input, .search-bar .select { min-width: 0; }

@media (max-width: 1180px) {
  .page-content { padding: 24px; }
  .charts-grid, .profile-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  .drive-sidebar { width: 230px; }
}

@media (max-width: 900px) {
  .topbar { height: auto; min-height: 58px; padding: 10px 16px; gap: 10px; }
  .page-title { font-size: 22px; }
  .global-search-trigger { max-width: 150px; overflow: hidden; white-space: nowrap; }
  .flex-between { align-items: stretch; flex-direction: column; }
  .flex-between > * { min-width: 0; }
  .search-bar { align-items: stretch; flex-direction: column; }
  .search-bar > div, .search-bar .input, .search-bar .select { max-width: none !important; width: 100% !important; }
  .grid-2, .grid-3, .detail-layout, .profile-grid, .charts-grid { grid-template-columns: 1fr !important; }
  .detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
  .kanban-col { flex: 0 0 min(82vw, 340px); min-height: 360px; }
  .drive-sidebar { border-bottom: 1px solid var(--border); border-right: 0; max-height: 240px; width: 100%; }
  .drive-content { min-height: 420px; }
  .finance-table, table { min-width: 720px; }
  .tbd-pay-layout { grid-template-columns: 1fr !important; }
  .tbd-pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .app-layout { display: block; min-height: 100vh; }
  .main-content, html[dir=rtl] .main-content { margin-left: 0 !important; margin-right: 0 !important; padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
  .page-content { padding: 16px; }
  .topbar { border-bottom-color: var(--border); position: sticky; top: 0; z-index: 120; }
  .topbar > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
  .page-title { font-size: 20px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sidebar, html[dir=rtl] .sidebar {
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--violet) 8%);
    border-right: 0;
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,.28);
    display: block;
    height: var(--mobile-nav-h);
    left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px calc(env(safe-area-inset-bottom));
    right: 0;
    top: auto;
    transform: none !important;
    width: 100%;
    z-index: 300;
  }
  .sidebar-logo, .sidebar-footer, .nav-section-title { display: none !important; }
  .sidebar-nav { align-items: center; display: flex; gap: 6px; height: 100%; padding: 8px 4px; }
  .nav-item { flex: 0 0 auto; flex-direction: column; font-size: 11px; gap: 3px; justify-content: center; margin: 0; min-width: 68px; padding: 7px 9px; text-align: center; }
  .nav-item svg { height: 18px; width: 18px; }
  .nav-item.active { box-shadow: 0 8px 20px rgba(125,57,235,.25); }

  .stats-grid, .detail-stats, .tbd-pay-grid, .tbd-mini-grid { grid-template-columns: 1fr !important; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 28px; overflow-wrap: anywhere; }
  .card, .chart-card { padding: 16px; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { border-radius: 14px 14px 0 0; max-height: 92vh !important; max-width: none !important; width: 100% !important; }
  .modal-header { padding: 18px 16px 0; }
  .modal-body { padding: 16px; }
  .search-overlay { padding: 70px 12px 12px; }
  .search-modal { width: 100%; }
  th, td, .finance-table th, .finance-table td { padding: 10px 12px; }
  .btn { justify-content: center; min-height: 40px; }
  .input { min-height: 42px; }
  .toast-stack { bottom: calc(var(--mobile-nav-h) + 12px); left: 12px; right: 12px; width: auto; }

  .tbd-simple-finance { padding: 16px !important; }
  .tbd-pay-head { align-items: stretch !important; flex-direction: column; }
  .tbd-pay-table { min-width: 620px; }
  .tbd-detail-head { align-items: stretch !important; flex-direction: column; }
  .tbd-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .page-content { padding: 12px; }
  .topbar { padding: 8px 10px; }
  .page-title { font-size: 18px; max-width: 38vw; }
  .global-search-trigger { max-width: 42px; padding: 8px; }
  .theme-toggle, .notif-bell { min-height: 34px; padding: 6px 8px; }
  .nav-item { min-width: 62px; padding-inline: 7px; }
  .nav-item span { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-value { font-size: 24px; }
  .login-form { padding: 20px; }
  .embedded-form-card { padding: 18px; }
}

/* Drive-specific responsive recovery */
@media (max-width: 900px) {
  .page-content:has(.drive-sidebar) {
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .page-content:has(.drive-sidebar) > div[style*="display: flex"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .page-content:has(.drive-sidebar) .drive-sidebar {
    flex: 0 0 auto !important;
    max-height: 42vh !important;
    min-height: 170px !important;
    overflow: auto !important;
    width: 100% !important;
  }
  .page-content:has(.drive-sidebar) .drive-content {
    flex: 1 1 auto !important;
    min-height: 52vh !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .page-content:has(.drive-sidebar) .drive-content > div {
    height: auto !important;
    min-height: 52vh !important;
    overflow: visible !important;
    padding: 16px !important;
  }
  .page-content:has(.drive-sidebar) .drive-content .flex-between {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .page-content:has(.drive-sidebar) .drive-content .flex-between > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .page-content:has(.drive-sidebar) .drive-sidebar {
    max-height: 36vh !important;
  }
  .page-content:has(.drive-sidebar) .drive-content .flex-between > div:last-child {
    grid-template-columns: 1fr !important;
  }
}