/* ══════════════════════════════════════════════════════════════════════════
   responsive.css — Mobile & tablet overrides for ChirurgiePro CRM
   Loaded after application.css in all layouts (admin, surgeon, portal).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet breakpoint (< 992px) ──────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Filter sidebar on consultation index: full-width above the table */
    .consultation-filters-col {
        order: -1;
    }

    /* Side-by-side cards in dashboard: already handled by col-lg-6 stacking,
     but ensure card headers don't overflow */
    .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .card-header .btn,
    .card-header .btn-outline-primary,
    .card-header .btn-outline-warning,
    .card-header .btn-outline-danger {
        flex-shrink: 0;
    }
}

/* ── Phone breakpoint (< 768px) ───────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* ── Page headers ─────────────────────────────────────────────────── */
    .page-header .row,
    .page-header-flex {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Title + button headers (d-flex justify-content-between) */
    .page-header-flex .btn,
    .d-flex.justify-content-between>.btn {
        width: 100%;
    }

    /* ── Admin topbar ─────────────────────────────────────────────────── */
    /* Mobile search toggle */
    .mobile-search-toggle {
        display: inline-flex !important;
    }

    .navbar-search-collapsible {
        display: none;
        width: 100%;
        padding: 0.5rem 0;
    }

    .navbar-search-collapsible.show {
        display: block;
    }

    .navbar-search-collapsible .form-control {
        min-width: 0 !important;
        width: 100%;
    }

    /* ── Navigation tabs (horizontal scroll) ──────────────────────────── */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.8125rem;
    }

    /* ── Definition lists (dt/dd stacking) ────────────────────────────── */
    dl.row>dt,
    dl.row>dd {
        flex: 0 0 100%;
        max-width: 100%;
    }

    dl.row>dt {
        margin-bottom: 0.1rem;
        font-size: 0.8125rem;
        color: var(--tblr-secondary);
    }

    dl.row>dd {
        margin-bottom: 0.75rem;
    }

    /* ── Data tables ──────────────────────────────────────────────────── */
    .table {
        font-size: 0.8125rem;
    }

    .table td,
    .table th {
        padding: 0.4rem 0.5rem;
    }

    .card-table thead th {
        font-size: 0.65rem;
    }

    /* ── Action button groups ─────────────────────────────────────────── */
    td .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.25rem !important;
    }

    td .d-flex.gap-2 .btn {
        width: 100%;
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    /* ── Stepper (compact on mobile) ──────────────────────────────────── */
    .stepper-circle {
        width: 22px;
        height: 22px;
        font-size: 0.625rem;
    }

    .stepper-label {
        font-size: 0.55rem;
        max-width: 52px;
    }

    .stepper-connector {
        min-width: 6px;
    }

    /* ── Cards ─────────────────────────────────────────────────────────── */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.625rem 0.75rem;
    }

    .card-header .card-title {
        font-size: 0.875rem;
    }

    /* ── Dashboard KPI cards ──────────────────────────────────────────── */
    .card-body .h1 {
        font-size: 1.5rem;
    }

    .card-body .subheader {
        font-size: 0.75rem !important;
    }

    /* ── Alerts (action banners) ──────────────────────────────────────── */
    .alert.d-flex {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .alert.d-flex .btn {
        width: 100%;
    }

    /* ── Page body padding ────────────────────────────────────────────── */
    .page-body>.container-xl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* ── Consultation index: page header ──────────────────────────────── */
    .consultation-page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .consultation-page-header .btn {
        width: 100%;
    }

    /* ── Consultation index: filter toggle ────────────────────────────── */
    .filter-toggle-btn {
        display: block !important;
    }

    .filter-collapse {
        display: none;
    }

    .filter-collapse.show {
        display: block;
    }

    /* ── Patient list: badges ─────────────────────────────────────────── */
    .badge {
        font-size: 0.6875rem;
    }

    /* ── Chat bubbles (portal) ────────────────────────────────────────── */
    .portal-chat__bubble {
        max-width: 90%;
    }

    /* ── Portal page header ───────────────────────────────────────────── */
    .portal-page-header__title {
        font-size: 1.15rem;
    }
}

/* ── Very small phones (< 360px) ──────────────────────────────────────── */
@media (max-width: 359.98px) {

    .nav-tabs .nav-link {
        font-size: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .stepper-label {
        display: none;
    }

    .card-body .h1 {
        font-size: 1.25rem;
    }

    td .d-flex.gap-2 .btn {
        font-size: 0.6875rem;
    }
}