/* Shared responsive behavior for the existing CRM layouts. */
.mobile-menu-toggle, .mobile-menu-close, .mobile-menu-backdrop { display: none; }
.main-area, .page-content, .panel, .chat-messages { min-width: 0; }
.sidebar-nav { min-height: 0; overflow-y: auto; }
.table-responsive { max-width: 100%; overscroll-behavior-x: contain; }
.detail-row > *, .stat-card > div, .message-bubble { min-width: 0; overflow-wrap: anywhere; }
.chart-card canvas { max-width: 100%; }

@media (max-width: 992px) {
    .main-area { margin-left: 0; min-height: 100dvh; }
    /* Without JavaScript, keep navigation available above the content. */
    .sidebar { position: relative; width: 100%; transform: none; }
    .mobile-nav-ready .sidebar {
        position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100vw - 48px));
        height: 100dvh; z-index: 1040; transform: translateX(-100%);
        visibility: hidden; transition: transform .2s ease, visibility .2s;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-nav-ready .sidebar.open { transform: translateX(0); visibility: visible; }
    .sidebar-brand { flex-shrink: 0; }
    .sidebar-nav a { min-height: 44px; }
    .mobile-menu-toggle, .mobile-menu-close {
        align-items: center; justify-content: center; gap: 8px; min-height: 44px;
        border: 1px solid #CBD5E1; border-radius: 10px; padding: 8px 12px;
        background: #fff; color: #0F172A; font: inherit; font-weight: 600;
    }
    .mobile-menu-toggle { display: inline-flex; margin-right: auto; flex-shrink: 0; text-decoration: none; }
    .mobile-menu-close { display: flex; margin: 12px 16px 0; flex-shrink: 0; }
    .mobile-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1030; background: rgb(15 23 42 / 55%); }
    body.mobile-menu-open { overflow: hidden; }
    .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; }
    .mobile-topbar { background: #fff; border-bottom: 1px solid #E2E8F0; }
    .profile-chip, .profile-meta { min-width: 0; }
    .profile-avatar { flex-shrink: 0; }
    .profile-meta .name { overflow-wrap: anywhere; }
    .page-content { padding: 20px 16px; }
    .panel { padding: 16px; }
    .page-header, .page-header > .d-flex { flex-wrap: wrap; }
    .page-header > .d-flex { max-width: 100%; }
    .table-responsive .table { min-width: 600px; }
    .table-responsive .btn { margin-bottom: 4px; }
    .btn, .form-control, .form-select { min-height: 44px; }
    .form-control, .form-select { font-size: 16px; }
    input, select, textarea { max-width: 100%; min-width: 0; }
    .chat-container { height: calc(100dvh - 64px); min-height: 260px; }
    .chat-messages, .message-list { min-height: 0; }
    .message-list, .message-input { padding: 12px; }
    .message-bubble { max-width: 90%; }
    .message-input { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .message-input .form-control { width: 0; flex: 1; }
    .message-input .btn { flex-shrink: 0; }
}
@media (min-width: 993px) { .mobile-topbar { display: none; } }
@media (max-width: 575px) {
    .detail-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .page-header > .d-flex { width: 100%; gap: 8px; }
    .page-header > .d-flex > .btn { flex: 1 1 auto; }
    .login-card, .card-panel { padding: 24px; max-width: calc(100vw - 24px); }
    .stat-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-nav-ready .sidebar { transition: none; } }