/* ============================================================
   Table → Card Responsive Layer (Mobile & Tablet)
   ──────────────────────────────────────────────────────────
   Mirrors the appointments page pattern: on screens ≤ 1024px
   every dashboard list table transforms into per-record cards.
   Each <tr> becomes an independent card whose cells render as
   label → value rows. Labels come from the data-label attribute
   auto-assigned by mobile-table-labels.js from each table's own
   <th> texts. Desktop (>1024px) is untouched.

   Covered pages:
   doctors, finance, services, treatment plans, reports,
   audit logs, employee management, insurances, referrals,
   backup & restore, billing (payment history).
   ============================================================ */

/* ─── Base responsive guardrails (all covered pages) ─────── */
.fin-container, .services-container, .tp-container, .al-container,
.em-container, .ins-container, .ref-container, .ms-container {
    min-width: 0; overflow-x: clip;
}
.fin-container *, .services-container *, .tp-container *, .al-container *,
.em-container *, .ins-container *, .ref-container *, .ms-container * { min-width: 0; }

.fin-container img, .services-container img, .tp-container img, .al-container img,
.em-container img, .ins-container img, .ref-container img, .ms-container img { max-width: 100%; }

.fin-container button, .fin-container a,
.services-container button, .services-container a,
.tp-container button, .tp-container a,
.al-container button, .al-container a,
.em-container button, .em-container a,
.ins-container button, .ins-container a,
.ref-container button, .ref-container a,
.ms-container button, .ms-container a { touch-action: manipulation; }

/* Touch-friendly interactive elements */
.doctors-container .action-btn, .services-container .action-btn,
.em-container .em-action-btn, .ins-container .ins-action-btn,
.ref-container .ref-action-btn { min-width: 40px; min-height: 40px; }

.fin-container .btn, .services-container .btn, .tp-container .btn,
.al-container .btn, .em-container .em-btn, .ins-container .ins-btn,
.ref-container .ref-btn, .ms-container .btn, .ms-container .time-input,
.bk-btn-primary, .bk-btn-ghost { min-height: 44px; }

/* Tab bars scroll horizontally instead of wrapping ugly */
.fin-container .tab-bar, .services-container .cat-tabs,
.ref-container .ref-tabs, .bk-tab-bar {
    overflow-x: auto; scrollbar-width: thin; flex-wrap: nowrap;
}
.fin-container .tab-btn, .services-container .cat-tab,
.ref-container .ref-tab, .bk-tab { white-space: nowrap; min-height: 44px; }

/* Filter / toolbar rows wrap gracefully */
.fin-container .filters-row, .al-container .filters-row,
.em-container .em-filters, .services-container .toolbar,
.ins-container .ins-toolbar, .ref-container .ref-toolbar { flex-wrap: wrap; }

/* Modals breathe on small screens */
.fin-container .modal-overlay, .services-container .modal-overlay,
.tp-container .modal-overlay, .al-container .modal-overlay,
.doctors-container .modal-overlay, .em-modal-backdrop,
.ins-modal-overlay, .ref-modal-overlay { padding: 12px; overflow-y: auto; align-items: flex-start; }

:focus-visible { outline: 3px solid var(--accent-soft, #dfe1ff); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   TABLE → CARD TRANSFORMATION — MOBILE & TABLET (≤ 1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* ── Hide table headers — labels live inside each card ── */
    .doctors-container .doctors-table thead,
    .fin-container .fin-table thead,
    .services-container .svc-table thead,
    .tp-container .tp-table thead,
    .rep-table thead,
    .al-container .al-table thead,
    .em-container .em-table thead,
    .ins-container .ins-table thead,
    .ref-container .ref-table thead,
    .bk-table thead,
    .billing-table thead { display: none !important; }

    /* ── Reset table layout to stacked blocks ── */
    .doctors-container .doctors-table, .doctors-container .doctors-table tbody,
    .doctors-container .doctors-table tr, .doctors-container .doctors-table td,
    .fin-container .fin-table, .fin-container .fin-table tbody,
    .fin-container .fin-table tr, .fin-container .fin-table td,
    .services-container .svc-table, .services-container .svc-table tbody,
    .services-container .svc-table tr, .services-container .svc-table td,
    .tp-container .tp-table, .tp-container .tp-table tbody,
    .tp-container .tp-table tr, .tp-container .tp-table td,
    .rep-table, .rep-table tbody, .rep-table tr, .rep-table td,
    .al-container .al-table, .al-container .al-table tbody,
    .al-container .al-table tr, .al-container .al-table td,
    .em-container .em-table, .em-container .em-table tbody,
    .em-container .em-table tr, .em-container .em-table td,
    .ins-container .ins-table, .ins-container .ins-table tbody,
    .ins-container .ins-table tr, .ins-container .ins-table td,
    .ref-container .ref-table, .ref-container .ref-table tbody,
    .ref-container .ref-table tr, .ref-container .ref-table td,
    .bk-table, .bk-table tbody, .bk-table tr, .bk-table td,
    .billing-table, .billing-table tbody, .billing-table tr, .billing-table td {
        display: block; width: 100%;
    }

    /* ── Kill horizontal scroll / min-widths ── */
    .doctors-container .doctors-table, .fin-container .fin-table,
    .services-container .svc-table, .tp-container .tp-table, .rep-table,
    .al-container .al-table, .em-container .em-table,
    .ins-container .ins-table, .ref-container .ref-table,
    .bk-table, .billing-table { min-width: 0 !important; }

    .doctors-container .table-container { overflow-x: visible; }

    /* ── Each record becomes a card ── */
    .doctors-container .doctors-table tbody tr,
    .fin-container .fin-table tbody tr,
    .services-container .svc-table tbody tr,
    .tp-container .tp-table tbody tr,
    .rep-table tbody tr,
    .al-container .al-table tbody tr,
    .em-container .em-table tbody tr,
    .ins-container .ins-table tbody tr,
    .ref-container .ref-table tbody tr,
    .bk-table tbody tr,
    .billing-table tbody tr {
        background: var(--bg-surface, #ffffff);
        border: 1px solid var(--border, #e5e5e7);
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 16px 18px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .doctors-container .doctors-table tbody tr:hover,
    .fin-container .fin-table tbody tr:hover,
    .services-container .svc-table tbody tr:hover,
    .tp-container .tp-table tbody tr:hover,
    .rep-table tbody tr:hover,
    .al-container .al-table tbody tr:hover,
    .em-container .em-table tbody tr:hover,
    .ins-container .ins-table tbody tr:hover,
    .ref-container .ref-table tbody tr:hover,
    .bk-table tbody tr:hover,
    .billing-table tbody tr:hover {
        background: var(--bg-surface, #ffffff);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    /* ── Each cell becomes a label → value row ── */
    .doctors-container .doctors-table tbody td,
    .fin-container .fin-table tbody td,
    .services-container .svc-table tbody td,
    .tp-container .tp-table tbody td,
    .rep-table tbody td,
    .al-container .al-table tbody td,
    .em-container .em-table tbody td,
    .ins-container .ins-table tbody td,
    .ref-container .ref-table tbody td,
    .bk-table tbody td,
    .billing-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-light, #f0f0f2);
        text-align: right;
        min-height: 40px;
        vertical-align: middle;
    }

    .doctors-container .doctors-table tbody td:last-of-type,
    .fin-container .fin-table tbody td:last-of-type,
    .services-container .svc-table tbody td:last-of-type,
    .tp-container .tp-table tbody td:last-of-type,
    .rep-table tbody td:last-of-type,
    .al-container .al-table tbody td:last-of-type,
    .em-container .em-table tbody td:last-of-type,
    .ins-container .ins-table tbody td:last-of-type,
    .ref-container .ref-table tbody td:last-of-type,
    .bk-table tbody td:last-of-type,
    .billing-table tbody td:last-of-type { border-bottom: none; }

    /* ── Label from data-label attribute ── */
    .doctors-container .doctors-table tbody td::before,
    .fin-container .fin-table tbody td::before,
    .services-container .svc-table tbody td::before,
    .tp-container .tp-table tbody td::before,
    .rep-table tbody td::before,
    .al-container .al-table tbody td::before,
    .em-container .em-table tbody td::before,
    .ins-container .ins-table tbody td::before,
    .ref-container .ref-table tbody td::before,
    .bk-table tbody td::before,
    .billing-table tbody td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted, #86868b);
        flex-shrink: 0;
        min-width: 72px;
        padding-top: 2px;
        line-height: 1.4;
    }

    /* ── Value side wraps correctly ── */
    .doctors-container .doctors-table tbody td > *,
    .fin-container .fin-table tbody td > *,
    .services-container .svc-table tbody td > *,
    .tp-container .tp-table tbody td > *,
    .rep-table tbody td > *,
    .al-container .al-table tbody td > *,
    .em-container .em-table tbody td > *,
    .ins-container .ins-table tbody td > *,
    .ref-container .ref-table tbody td > *,
    .bk-table tbody td > *,
    .billing-table tbody td > * {
        flex: 1; min-width: 0; text-align: right;
        overflow-wrap: anywhere;
    }

    /* ── Full-width cells (loading / empty states) ── */
    .doctors-container .doctors-table tbody td[colspan],
    .fin-container .fin-table tbody td[colspan],
    .services-container .svc-table tbody td[colspan],
    .tp-container .tp-table tbody td[colspan],
    .rep-table tbody td[colspan],
    .al-container .al-table tbody td[colspan],
    .em-container .em-table tbody td[colspan],
    .ins-container .ins-table tbody td[colspan],
    .ref-container .ref-table tbody td[colspan],
    .bk-table tbody td[colspan],
    .billing-table tbody td[colspan] {
        display: block; text-align: center; padding: 24px 8px;
    }
    .doctors-container .doctors-table tbody td[colspan]::before,
    .fin-container .fin-table tbody td[colspan]::before,
    .services-container .svc-table tbody td[colspan]::before,
    .tp-container .tp-table tbody td[colspan]::before,
    .rep-table tbody td[colspan]::before,
    .al-container .al-table tbody td[colspan]::before,
    .em-container .em-table tbody td[colspan]::before,
    .ins-container .ins-table tbody td[colspan]::before,
    .ref-container .ref-table tbody td[colspan]::before,
    .bk-table tbody td[colspan]::before,
    .billing-table tbody td[colspan]::before { display: none; }

    /* Cells whose header is empty (e.g. icon/action columns) hide the label */
    .doctors-container .doctors-table tbody td[data-label=""]::before,
    .fin-container .fin-table tbody td[data-label=""]::before,
    .services-container .svc-table tbody td[data-label=""]::before,
    .tp-container .tp-table tbody td[data-label=""]::before,
    .rep-table tbody td[data-label=""]::before,
    .al-container .al-table tbody td[data-label=""]::before,
    .em-container .em-table tbody td[data-label=""]::before,
    .ins-container .ins-table tbody td[data-label=""]::before,
    .ref-container .ref-table tbody td[data-label=""]::before,
    .bk-table tbody td[data-label=""]::before,
    .billing-table tbody td[data-label=""]::before { display: none; }

    /* ── Actions column → full-width row at card bottom ──
       Only for tables whose last column is «عملیات». ── */
    .doctors-container .doctors-table tbody td:last-child,
    .services-container .svc-table tbody td:last-child,
    .em-container .em-table tbody td:last-child,
    .ins-container .ins-table tbody td:last-child,
    .ref-container .ref-table tbody td:last-child,
    .bk-table tbody td:last-child {
        flex-direction: column;
        align-items: stretch;
        padding-top: 12px;
        margin-top: 6px;
        border-top: 2px solid var(--border, #e5e5e7);
        border-bottom: none;
        gap: 8px;
    }

    .doctors-container .doctors-table tbody td:last-child > div,
    .services-container .svc-table tbody td:last-child > div,
    .em-container .em-table tbody td:last-child > div,
    .ins-container .ins-table tbody td:last-child > div,
    .ref-container .ref-table tbody td:last-child > div,
    .bk-table tbody td:last-child > div {
        display: flex; flex-wrap: wrap; gap: 8px;
        justify-content: center; align-items: center;
    }

    .doctors-container .doctors-table tbody td:last-child .action-btn,
    .services-container .svc-table tbody td:last-child .action-btn,
    .em-container .em-table tbody td:last-child .em-action-btn,
    .ins-container .ins-table tbody td:last-child .ins-action-btn,
    .ref-container .ref-table tbody td:last-child .ref-action-btn {
        width: 46px; height: 46px;
        border-radius: 12px;
        background: var(--bg-subtle, #f5f5f7);
        border: 1px solid var(--border, #e5e5e7);
    }

    /* ── Page-level tablet tweaks ── */
    .fin-container, .services-container, .tp-container, .al-container,
    .ins-container, .ref-container, .ms-container {
        padding: 20px 16px !important; margin: -24px -16px !important;
    }
    .fin-container .stats-grid, .tp-container .stats-grid,
    .al-container .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .em-container .em-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

    /* my-schedule: settings card single column */
    .ms-container [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   TABLET CARD GRID (768px – 1024px): two cards per row
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
    .doctors-container .doctors-table tbody,
    .fin-container .fin-table tbody,
    .services-container .svc-table tbody,
    .tp-container .tp-table tbody,
    .rep-table tbody,
    .al-container .al-table tbody,
    .em-container .em-table tbody,
    .ins-container .ins-table tbody,
    .ref-container .ref-table tbody,
    .bk-table tbody,
    .billing-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .doctors-container .doctors-table tbody tr,
    .fin-container .fin-table tbody tr,
    .services-container .svc-table tbody tr,
    .tp-container .tp-table tbody tr,
    .rep-table tbody tr,
    .al-container .al-table tbody tr,
    .em-container .em-table tbody tr,
    .ins-container .ins-table tbody tr,
    .ref-container .ref-table tbody tr,
    .bk-table tbody tr,
    .billing-table tbody tr { margin-bottom: 0; }

    /* Full-width rows (loading/empty) span both columns */
    .doctors-container .doctors-table tbody tr:has(td[colspan]),
    .fin-container .fin-table tbody tr:has(td[colspan]),
    .services-container .svc-table tbody tr:has(td[colspan]),
    .tp-container .tp-table tbody tr:has(td[colspan]),
    .rep-table tbody tr:has(td[colspan]),
    .al-container .al-table tbody tr:has(td[colspan]),
    .em-container .em-table tbody tr:has(td[colspan]),
    .ins-container .ins-table tbody tr:has(td[colspan]),
    .ref-container .ref-table tbody tr:has(td[colspan]),
    .bk-table tbody tr:has(td[colspan]),
    .billing-table tbody tr:has(td[colspan]) { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PAGE ADJUSTMENTS (< 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .fin-container, .services-container, .tp-container, .al-container,
    .ins-container, .ref-container, .ms-container {
        padding: 16px 12px !important; margin: -24px -12px !important;
    }

    /* Headers stack */
    .fin-container .fin-header, .tp-container .tp-header,
    .al-container .al-header, .em-container .em-header,
    .ins-container .ins-page-header, .ref-container .ref-page-header,
    .ms-container .page-header {
        flex-direction: column; align-items: stretch; gap: 12px;
    }

    /* Stats → 2 columns */
    .fin-container .stats-grid, .tp-container .stats-grid,
    .al-container .stats-grid, .em-container .em-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
    }

    /* Filters / toolbars → full-width stacked */
    .fin-container .filters-row, .al-container .filters-row,
    .em-container .em-filters, .services-container .toolbar,
    .ins-container .ins-toolbar, .ref-container .ref-toolbar {
        flex-direction: column; align-items: stretch;
    }
    .fin-container .filters-row > *, .al-container .filters-row > *,
    .em-container .em-filters > *, .services-container .toolbar > *,
    .ins-container .ins-toolbar > *, .ref-container .ref-toolbar > * { width: 100%; }
    .fin-container .search-input, .al-container .search-input,
    .em-container .em-search { min-width: 0; max-width: none; width: 100%; }

    /* my-schedule: days single column, save bar stacks */
    .ms-container [style*="repeat(auto-fill"] { grid-template-columns: 1fr !important; }
    .ms-container .save-bar { flex-direction: column; gap: 12px; align-items: stretch; }
    .ms-container .save-bar > div:last-child { display: flex; gap: 8px; }
    .ms-container .save-bar > div:last-child > * { flex: 1; }

    /* Modal footers stack */
    .fin-container .modal-footer, .services-container .modal-foot,
    .tp-container .modal-footer, .doctors-container .modal-footer,
    .em-modal-footer, .ins-modal-foot, .ref-modal-foot { flex-wrap: wrap; }

    /* Pagination wraps centered */
    .doctors-container .pagination, .al-container .pagination-row,
    .ins-container .ins-pagination, .ref-container .ref-pagination,
    .em-container .em-pagination { justify-content: center; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE (< 480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
    .fin-container, .services-container, .tp-container, .al-container,
    .ins-container, .ref-container, .ms-container {
        padding-inline: 8px !important; margin-inline: -8px !important;
    }

    /* Cards get tighter */
    .doctors-container .doctors-table tbody tr,
    .fin-container .fin-table tbody tr,
    .services-container .svc-table tbody tr,
    .tp-container .tp-table tbody tr,
    .rep-table tbody tr,
    .al-container .al-table tbody tr,
    .em-container .em-table tbody tr,
    .ins-container .ins-table tbody tr,
    .ref-container .ref-table tbody tr,
    .bk-table tbody tr,
    .billing-table tbody tr { padding: 14px; border-radius: 12px; }

    /* Cells stack label above value on very narrow screens */
    .doctors-container .doctors-table tbody td,
    .fin-container .fin-table tbody td,
    .services-container .svc-table tbody td,
    .tp-container .tp-table tbody td,
    .rep-table tbody td,
    .al-container .al-table tbody td,
    .em-container .em-table tbody td,
    .ins-container .ins-table tbody td,
    .ref-container .ref-table tbody td,
    .bk-table tbody td,
    .billing-table tbody td {
        flex-direction: column; align-items: flex-start; gap: 4px;
    }

    .doctors-container .doctors-table tbody td::before,
    .fin-container .fin-table tbody td::before,
    .services-container .svc-table tbody td::before,
    .tp-container .tp-table tbody td::before,
    .rep-table tbody td::before,
    .al-container .al-table tbody td::before,
    .em-container .em-table tbody td::before,
    .ins-container .ins-table tbody td::before,
    .ref-container .ref-table tbody td::before,
    .bk-table tbody td::before,
    .billing-table tbody td::before { min-width: auto; font-size: 11px; }

    .doctors-container .doctors-table tbody td > *,
    .fin-container .fin-table tbody td > *,
    .services-container .svc-table tbody td > *,
    .tp-container .tp-table tbody td > *,
    .rep-table tbody td > *,
    .al-container .al-table tbody td > *,
    .em-container .em-table tbody td > *,
    .ins-container .ins-table tbody td > *,
    .ref-container .ref-table tbody td > *,
    .bk-table tbody td > *,
    .billing-table tbody td > * { width: 100%; }

    /* Stats → 1 column on tiny screens */
    .fin-container .stats-grid, .tp-container .stats-grid,
    .al-container .stats-grid { grid-template-columns: 1fr !important; }

    /* Avatar+name cells stay horizontal */
    .doctors-container .doctors-table tbody td .doctor-cell,
    .al-container .al-table tbody td .user-chip {
        flex-direction: row; flex-wrap: nowrap; align-items: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES (mobile & tablet cards)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    [data-theme="dark"] .doctors-container .doctors-table tbody tr,
    [data-theme="dark"] .fin-container .fin-table tbody tr,
    [data-theme="dark"] .services-container .svc-table tbody tr,
    [data-theme="dark"] .tp-container .tp-table tbody tr,
    [data-theme="dark"] .rep-table tbody tr,
    [data-theme="dark"] .al-container .al-table tbody tr,
    [data-theme="dark"] .em-container .em-table tbody tr,
    [data-theme="dark"] .ins-container .ins-table tbody tr,
    [data-theme="dark"] .ref-container .ref-table tbody tr,
    [data-theme="dark"] .bk-table tbody tr,
    [data-theme="dark"] .billing-table tbody tr {
        background: var(--bg-surface, #1e1e2e);
        border-color: var(--border, #3a3a4a);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    [data-theme="dark"] .doctors-container .doctors-table tbody td,
    [data-theme="dark"] .fin-container .fin-table tbody td,
    [data-theme="dark"] .services-container .svc-table tbody td,
    [data-theme="dark"] .tp-container .tp-table tbody td,
    [data-theme="dark"] .rep-table tbody td,
    [data-theme="dark"] .al-container .al-table tbody td,
    [data-theme="dark"] .em-container .em-table tbody td,
    [data-theme="dark"] .ins-container .ins-table tbody td,
    [data-theme="dark"] .ref-container .ref-table tbody td,
    [data-theme="dark"] .bk-table tbody td,
    [data-theme="dark"] .billing-table tbody td {
        border-bottom-color: var(--border-light, #2a2a3a);
    }

    [data-theme="dark"] .doctors-container .doctors-table tbody td:last-child,
    [data-theme="dark"] .services-container .svc-table tbody td:last-child,
    [data-theme="dark"] .em-container .em-table tbody td:last-child,
    [data-theme="dark"] .ins-container .ins-table tbody td:last-child,
    [data-theme="dark"] .ref-container .ref-table tbody td:last-child,
    [data-theme="dark"] .bk-table tbody td:last-child {
        border-top-color: var(--border, #3a3a4a);
    }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .doctors-container .doctors-table tbody tr,
    .fin-container .fin-table tbody tr,
    .services-container .svc-table tbody tr,
    .tp-container .tp-table tbody tr,
    .rep-table tbody tr,
    .al-container .al-table tbody tr,
    .em-container .em-table tbody tr,
    .ins-container .ins-table tbody tr,
    .ref-container .ref-table tbody tr,
    .bk-table tbody tr,
    .billing-table tbody tr {
        transition: none;
    }
}