/* ============================================================================
   Responsive and RTL corrections (v4.4.0)

   Loaded after styles.css. Each rule fixes a defect measured by
   e2e-tests/tests/responsive-audit.spec.ts at 360/390/412/768/1024/1440 px in
   English and Arabic; docs/features/responsive-mobile/TESTING.md has the matrix.
   Logical properties (inline-start/end) are used so one rule serves both
   directions.
   ========================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────────── */

/* The collapsed icon rail is 70px wide but the content was only moved 60px, so
   10px of every page sat under the rail. */
.sidebar.collapsed + .main-content { margin-left: 70px; }
[dir="rtl"] .sidebar.collapsed + .main-content { margin-left: 0; margin-right: 70px; }

/* The sidebar starts collapsed, and the collapsed-state margin outranked the
   mobile "no margin" rule, so on phones and tablets 60px of the screen stayed
   empty beside an off-canvas drawer. */
@media (max-width: 768px) {
    .sidebar.collapsed + .main-content,
    [dir="rtl"] .sidebar.collapsed + .main-content,
    .main-content,
    [dir="rtl"] .main-content {
        margin-left: 0;
        margin-right: 0;
    }
}

/* The fixed sidebar had no horizontal inset, so it sat at its static position:
   right for LTR, but in Arabic the open phone drawer ran ~90px off the right edge
   and its labels were cut. Anchor it to the inline-start edge explicitly. */
.sidebar { left: 0; right: auto; height: 100vh; height: 100dvh; }
[dir="rtl"] .sidebar { left: auto; right: 0; }
@media (max-width: 768px) {
    .sidebar { max-width: 85vw; }
}
.content-area { min-height: calc(100dvh - var(--topbar-height)); }
.login-screen { min-height: 100dvh; padding: 16px; }

@media (max-width: 480px) {
    .login-container { padding: 32px 20px; }
}

/* Top bar: page actions sit at the far end in both directions. */
.topbar-page-actions { margin-left: 0; margin-inline-start: auto; }
#notification-badge { right: auto; inset-inline-end: 0; }

@media (max-width: 768px) {
    .top-bar { gap: 8px; }
    /* A flex child will not shrink below its content without this, which is
       what pushed the refresh button off the screen. */
    .search-box { min-width: 0; flex: 1 1 0; }
    .top-bar-actions { gap: 6px; flex-shrink: 0; }
    .topbar-page-actions { flex-shrink: 0; }
}

@media (max-width: 480px) {
    .top-bar { padding: 0 8px; gap: 6px; }
    .btn-icon, .btn-toggle-sidebar { padding: 8px 10px; }
    /* Icon-only page action (e.g. "New ticket") on the narrowest phones; the
       label stays available to assistive technology through the title. */
    .topbar-page-actions .btn { font-size: 0; padding: 8px 10px; }
    .topbar-page-actions .btn i { font-size: 15px; margin: 0; }
    .search-box input { padding-inline-start: 36px; padding-inline-end: 8px; }
    .search-box i { left: 12px; }
    [dir="rtl"] .search-box i { left: auto; right: 12px; }
}

/* Unread counts on the collapsed rail sit in the corner nearest the content. */
[dir="rtl"] .sidebar.collapsed .nav-badge { right: auto; left: 4px; }

/* Mentions dropdown: never wider than the screen, anchored to the correct edge. */
.mentions-menu { max-width: calc(100vw - 16px); }
[dir="rtl"] .mentions-menu { right: auto; left: 0; }
@media (max-width: 480px) {
    .mentions-menu { position: fixed; top: calc(var(--topbar-height) - 4px); left: 8px; right: 8px; width: auto; }
    [dir="rtl"] .mentions-menu { left: 8px; right: 8px; }
}

/* ── Toasts ────────────────────────────────────────────────────────────── */

/* Bootstrap's `.toast:not(.show) { display: none }` outranks styles.css's
   `.toast`, and the app never adds `.show`: every toast was invisible, on every
   screen size. */
.toast-container .toast { display: flex; }

.toast-container { right: auto; inset-inline-end: 20px; max-width: calc(100vw - 24px); }
[dir="rtl"] .toast-container { left: auto; right: auto; inset-inline-end: 20px; }
.toast-container .toast { min-width: 0; width: 350px; max-width: 100%; }
.toast-content { min-width: 0; overflow-wrap: anywhere; }
.toast.success, .toast.error, .toast.warning, .toast.info { border-left: none; }
.toast.success { border-inline-start: 4px solid var(--success-color); }
.toast.error { border-inline-start: 4px solid var(--danger-color); }
.toast.warning { border-inline-start: 4px solid var(--warning-color); }
.toast.info { border-inline-start: 4px solid var(--info-color); }

[dir="rtl"] .toast-container .toast { animation-name: slideInRtl; }
@keyframes slideInRtl {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 480px) {
    /* Bootstrap gives the container `width: max-content`, which ignores both insets. */
    .toast-container { top: 12px; inset-inline-end: 12px; inset-inline-start: 12px; width: auto; max-width: none; }
    [dir="rtl"] .toast-container { left: 12px; right: 12px; }
    .toast-container .toast { width: auto; }
}

/* ── Modal ─────────────────────────────────────────────────────────────── */

.modal { max-height: 90dvh; }
.modal.modal-fullwidth { max-height: calc(100dvh - 40px); height: calc(100dvh - 40px); }
.modal-header { gap: 12px; }
.modal-header h3 { min-width: 0; overflow-wrap: anywhere; }
.modal-footer { flex-wrap: wrap; }
.modal-body { min-height: 0; }

@media (max-width: 640px) {
    .modal,
    .modal.modal-large,
    .modal.modal-small,
    .modal.modal-fullwidth {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }
    .modal.modal-fullwidth { height: calc(100dvh - 16px); }
    .modal-header { padding: 14px 16px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; }
    /* Two-column form rows inside dialogs stack. */
    .modal .form-row,
    .modal .row > [class*="col-"] { flex-basis: 100%; max-width: 100%; }
}

/* ── Tables ────────────────────────────────────────────────────────────── */

th, td { text-align: start; }

/* Tables rendered without a scroll wrapper: on small screens the table itself
   scrolls sideways inside its card instead of being clipped. Tables already in
   a wrapper, and the stacked-card tables, are left alone. */
@media (max-width: 768px) {
    .content-area table:not(.responsive-stack):not(.table-container table):not(.cmdb-table-wrap table):not(.table-responsive table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Grids and fixed widths ────────────────────────────────────────────── */

/* The ≤1024px two-column rule for these grids came later in styles.css than the
   ≤768px one-column rule, so phones kept two columns that could not fit. */
@media (max-width: 600px) {
    .reports-stats-grid,
    .sla-overview,
    .agent-stats,
    .ticket-meta { grid-template-columns: 1fr; }
}

/* Grids laid out in inline styles (25 in the views: dashboard 2fr/1fr panels,
   form rows, `minmax(360px, 1fr)` cards in Teams Progress …) stack on phones.
   None of them is a calendar-like grid that must keep its columns. */
@media (max-width: 640px) {
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .charts-grid,
    .agents-grid,
    .asset-warnings,
    .webhooks-grid { grid-template-columns: 1fr; }
}
.chart-card, .report-stat-card, .card { min-width: 0; }
.chart-card canvas { max-width: 100%; }

/* Inline minimum widths on filter controls (reports, missions, CMDB, settings)
   and the shared combobox. */
@media (max-width: 640px) {
    select[style*="min-width"],
    input[style*="min-width"],
    div[style*="min-width"],
    .sola-combobox,
    .kanban-filters select,
    .kanban-filters input {
        min-width: 0 !important;
        max-width: 100%;
    }
    .filter-group { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .filter-group select,
    .filter-group input { min-width: 0; max-width: 100%; flex: 1 1 140px; }
    .kb-filters .filter-label,
    .kb-filters select { max-width: 100%; }
}

/* Asset list filters: three fixed 140px selects in a row that would not wrap. */
@media (max-width: 640px) {
    .assets-filters { flex-wrap: wrap; }
    .assets-filter-group { flex-shrink: 1; flex-wrap: wrap; width: 100%; min-width: 0; }
    .assets-filter-group .form-control { width: auto; flex: 1 1 120px; min-width: 0; }
    .cmdb-pagination { flex-wrap: wrap; justify-content: center; }
}

/* Tab strips scroll sideways rather than overflow the page. */
@media (max-width: 768px) {
    .assets-page-tabs,
    .tabs,
    .nav-tabs {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }
    .assets-page-tabs > *,
    .tabs > * { flex-shrink: 0; white-space: nowrap; }
}

/* Kanban: columns keep a readable width and the board scrolls. */
@media (max-width: 480px) {
    .kanban-column { min-width: 260px; flex: 0 0 260px; }
}

/* ── Accessibility helpers ─────────────────────────────────────────────── */

.btn, .btn-icon, .nav-item, .tab-btn { touch-action: manipulation; }
@media (pointer: coarse) {
    .btn-icon, .btn-sm { min-height: 36px; }
}
.modal:focus { outline: none; }