/* =====================================================================
   RacioFlow — Responsive behaviour
   Racio Media Group · Namibia

   Desktop  ≥1200px  fixed sidebar, multi-column dashboards, wide tables
   Tablet    768px   collapsible sidebar, two-column grids
   Mobile   <768px   drawer navigation, cards instead of wide tables
   ================================================================== */

/* ---------- Large desktop ------------------------------------------ */
@media (min-width: 1600px) {
    .rf-content { padding: 1.75rem 2.25rem 3rem; }
}

/* ---------- Laptop -------------------------------------------------- */
@media (max-width: 1280px) {
    .rf-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .rf-grid-sidebar { grid-template-columns: minmax(0,1fr) 300px; }
}

/* ---------- Tablet -------------------------------------------------- */
@media (max-width: 1024px) {
    .rf-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .rf-grid-sidebar,
    .rf-grid-sidebar-left { grid-template-columns: minmax(0,1fr); }
    .rf-form-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .rf-col-span-3 { grid-column: span 2; }
    .rf-search { max-width: 320px; }
    .rf-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile & small tablet: drawer navigation ---------------- */
@media (max-width: 900px) {
    .rf-sidebar {
        inset: 10px auto 10px 10px;
        width: min(288px, calc(100vw - 20px));
        transform: translateX(calc(-100% - 20px));
        box-shadow: none;
    }
    .rf-sidebar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        background: var(--sidebar-background-bright) !important;
    }
    body.rf-nav-open .rf-sidebar-backdrop { display: block; z-index: 70; backdrop-filter: none; -webkit-backdrop-filter: none; }
    body.rf-nav-open .rf-sidebar { transform: none; box-shadow: var(--sidebar-float-shadow); z-index: 80; }
    body.rf-nav-open { overflow: hidden; }

    .rf-main { margin-left: 0; }

    .rf-menu-toggle { display: inline-flex; }
    .rf-topbar { padding: 0 .85rem; gap: .4rem; }
    .rf-topbar-title {
        display: block; font-size: .95rem; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rf-search { display: none; }
    .rf-search.is-mobile-open {
        display: block;
        position: absolute; left: .75rem; right: .75rem; top: 10px;
        max-width: none; z-index: 5;
    }

    .rf-content { padding: 1.1rem .9rem 4rem; }
    .rf-page-title { font-size: 1.35rem; }
    .rf-toast-stack { top: auto; bottom: 14px; right: 12px; left: 12px; max-width: none; }
}

@media (max-width: 768px) {
    body { font-size: 14.5px; }

    .rf-grid-2, .rf-grid-3, .rf-grid-4 { grid-template-columns: minmax(0,1fr); }
    .rf-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .rf-contact-search { display: block; max-width: none; }
    .rf-form-grid, .rf-form-grid-3 { grid-template-columns: minmax(0,1fr); }
    .rf-col-span-2, .rf-col-span-3 { grid-column: span 1; }

    .rf-card-head { padding: .9rem 1rem; }
    .rf-card-body { padding: 1rem; }
    .rf-card-foot { padding: .8rem 1rem; }

    .rf-page-head { flex-direction: column; align-items: stretch; gap: .75rem; }
    .rf-page-actions .rf-btn { flex: 1 1 auto; }

    .rf-filters { padding: .8rem 1rem; }
    .rf-filters .rf-field { flex: 1 1 100%; }
    .rf-filters-actions { width: 100%; }
    .rf-filters-actions .rf-btn { flex: 1; }

    .rf-modal { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: auto; max-height: 92vh; }
    .rf-modal-backdrop { padding: 0; align-items: flex-end; }
    .rf-modal-foot { position: sticky; bottom: 0; }
    .rf-modal-foot .rf-btn { flex: 1; }

    .rf-pagination { flex-direction: column; align-items: stretch; gap: .6rem; }
    .rf-pagination-pages { justify-content: center; }

    .rf-dropdown-panel { position: fixed; left: 8px; right: 8px; top: calc(var(--topbar-height) + 6px); min-width: 0; }

    /* Stacked "card" tables: add data-label to each <td> in the markup. */
    .rf-table.is-stacked thead { display: none; }
    .rf-table.is-stacked tbody tr {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        margin: 0 0 .65rem;
        padding: .3rem .1rem;
        background: var(--surface);
    }
    .rf-table.is-stacked tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        border-bottom: 1px dashed var(--border-color);
        padding: .55rem .85rem;
        text-align: right;
    }
    .rf-table.is-stacked tbody td:last-child { border-bottom: 0; }
    .rf-table.is-stacked tbody td::before {
        content: attr(data-label);
        font-size: .6875rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .06em; color: var(--text-muted);
        text-align: left; flex: none;
    }
    .rf-table.is-stacked tbody td[data-label=""]::before { content: none; }
    .rf-table.is-stacked .rf-cell-user { justify-content: flex-end; }
    .rf-table.is-stacked .rf-td-actions { justify-content: flex-end; }

    .rf-dl { grid-template-columns: minmax(0,1fr); gap: .1rem .5rem; }
    .rf-dl dt { margin-top: .55rem; }
}

@media (max-width: 480px) {
    .rf-content { padding: .9rem .75rem 4.5rem; }
    .rf-stat { padding: .9rem; }
    .rf-stat-value { font-size: 1.45rem; }
    .rf-btn { padding: 0 .8rem; }
    .rf-tabs { margin-bottom: 1rem; }
}

/* ---------- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Touch targets ------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .rf-icon-btn { width: 44px; height: 44px; }
    .rf-nav-item { padding: .72rem .7rem; }
    .rf-dropdown-item { padding: .7rem; }
    .rf-table tbody td { padding: .85rem .9rem; }
}