/*
 * responsive.css — Page & dialog responsive overrides
 * Applies mobile-friendly styles to every page without modifying
 * individual .razor files for layout/spacing/grid concerns.
 *
 * Breakpoints (match MudBlazor):
 *   xs  < 600px
 *   sm  600 – 960px
 *   md  960px+
 */

/* ════════════════════════════════════════════════════════════
   1. PAGE HEADER  — the title + action-button row at the top
   ════════════════════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.page-header-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0A1F44;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 599px) {
    .page-header { margin-bottom: 14px; }
    .page-header-title { font-size: 1.2rem; }
    /* Stack actions below title on very small screens */
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header-actions { width: 100%; justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════
   2. SECTION CARD  — white card with rounded corners
   ════════════════════════════════════════════════════════════ */
.section-card {
    background: #fff;
    border: 1.5px solid #eaecf0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
    flex-wrap: wrap;
}

.section-card-body { padding: 18px; }

@media (max-width: 599px) {
    .section-card { border-radius: 12px; margin-bottom: 14px; }
    .section-card-header { padding: 12px 14px; }
    .section-card-body  { padding: 14px; }
}

/* ════════════════════════════════════════════════════════════
   3. STAT / KPI CARDS ROW
   ════════════════════════════════════════════════════════════ */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 959px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 480px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } }

.stat-card {
    background: #fff;
    border: 1.5px solid #eaecf0;
    border-radius: 14px;
    padding: 16px 18px;
}

@media (max-width: 599px) { .stat-card { padding: 12px 14px; border-radius: 12px; } }

.stat-card-value { font-size: 1.6rem; font-weight: 800; color: #0A1F44; line-height: 1.1; }
.stat-card-label { font-size: 11px; color: #9ca3af; font-weight: 600;
    text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }

@media (max-width: 480px) {
    .stat-card-value { font-size: 1.2rem; }
    .stat-card-label { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   4. FILTER BAR  — search + filter pills row
   ════════════════════════════════════════════════════════════ */
.filter-bar {
    background: #fff;
    border: 1.5px solid #eaecf0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

@media (max-width: 599px) {
    .filter-bar { padding: 10px 12px; gap: 8px; }
    /* Make the search field take full width on mobile */
    .filter-bar .mud-input-control { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════
   5. LIST ROWS  — generic list/table row pattern
   ════════════════════════════════════════════════════════════ */
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background .12s;
}
.list-row:hover { background: #f9fafb; }
.list-row:last-child { border-bottom: none; }

@media (max-width: 599px) { .list-row { padding: 10px 14px; gap: 10px; } }

/* ════════════════════════════════════════════════════════════
   6. FORM LAYOUT
   ════════════════════════════════════════════════════════════ */
.form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}
.form-section:last-child { border-bottom: none; }

.form-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #f3f4f6;
}

@media (max-width: 599px) {
    .form-section { margin-bottom: 18px; padding-bottom: 14px; }
}

/* MudGrid spacing on mobile — override inline classes */
@media (max-width: 599px) {
    /* Reduce dense grid gaps on mobile */
    .mud-grid.mud-grid-spacing-xs-2 > .mud-grid-item { padding: 6px !important; }
    .mud-grid.mud-grid-spacing-xs-3 > .mud-grid-item { padding: 8px !important; }
}

/* ════════════════════════════════════════════════════════════
   7. DIALOG OVERRIDES — responsive dialogs
   ════════════════════════════════════════════════════════════ */

/* All dialogs: remove fixed min-width, make responsive */
.mud-dialog { max-width: calc(100vw - 24px) !important; }
.mud-dialog-title { padding: 16px 20px 12px !important; }
.mud-dialog-content { padding: 0 20px 16px !important; }
.mud-dialog-actions { padding: 12px 20px !important; gap: 8px !important; }

@media (max-width: 599px) {
    /* Near full-screen on phones */
    .mud-dialog {
        margin: 12px !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 80px) !important;
        border-radius: 16px !important;
    }
    .mud-dialog-title   { padding: 14px 16px 10px !important; }
    .mud-dialog-content { padding: 0 16px 14px !important; overflow-y: auto; }
    .mud-dialog-actions { padding: 10px 16px !important; flex-wrap: wrap; }
    /* Full-width buttons in dialogs on mobile */
    .mud-dialog-actions .mud-button-root { flex: 1; min-width: 0; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   8. PATIENT DETAIL — sidebar tab layout
   ════════════════════════════════════════════════════════════ */
.pt-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 959px) {
    .pt-layout { grid-template-columns: 1fr; gap: 0; }
}

.pt-sidebar {
    background: #fff;
    border: 1.5px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 72px;
}

@media (max-width: 959px) {
    .pt-sidebar {
        position: static;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 12px;
    }
    .pt-sidebar::-webkit-scrollbar { display: none; }
}

.pt-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    transition: background .12s;
    position: relative;
}
.pt-tab:hover { background: #f9fafb; }
.pt-tab--active { background: #f0f4ff !important; }

@media (max-width: 959px) {
    .pt-tab {
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
        border-bottom: none;
        border-right: 1px solid #f3f4f6;
        min-width: 72px;
        align-items: center;
        flex-shrink: 0;
    }
    .pt-tab--active { border-bottom: 2.5px solid #0A1F44; }
    .pt-tab-text { display: none; } /* hide text labels on mobile — icon only */
    .pt-tab-bar { display: none; }
}

.pt-tab-icon { width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; border-radius: 8px; flex-shrink: 0; }
.pt-tab-text .pt-tab-label { font-size: 13px; font-weight: 600; color: #0A1F44; display: block; }
.pt-tab-text .pt-tab-sub   { font-size: 10px; color: #9ca3af; display: block; }
.pt-tab-bar { position: absolute; right: 0; top: 20%; bottom: 20%;
    width: 3px; background: #0A1F44; border-radius: 3px; }

.pt-content {
    background: #fff;
    border: 1.5px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    min-height: 400px;
}
@media (max-width: 599px) { .pt-content { border-radius: 12px; } }

.pt-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    gap: 10px;
    flex-wrap: wrap;
}
.pt-panel-title    { font-size: 15px; font-weight: 700; color: #0A1F44; }
.pt-panel-subtitle { font-size: 12px; color: #9ca3af; }

@media (max-width: 599px) {
    .pt-panel-header { padding: 12px 14px; }
    .pt-panel-title  { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════
   9. INVOICE / FINANCIAL GRID ROWS
   ════════════════════════════════════════════════════════════ */
/* Invoice list row — collapse to 2-column card on mobile */
@media (max-width: 599px) {
    .inv-row {
        grid-template-columns: 1fr auto !important;
        row-gap: 4px;
    }
    /* Show only Invoice# and Amount + Status on xs */
    .inv-row > *:nth-child(n+3):not(:nth-child(6)):not(:nth-child(7)) {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   10. CLINIC SETTINGS SIDE NAV
   ════════════════════════════════════════════════════════════ */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 959px) {
    .settings-layout { grid-template-columns: 1fr; }
}

.settings-sidenav {
    background: #fff;
    border: 1.5px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 72px;
}

@media (max-width: 959px) {
    .settings-sidenav {
        position: static;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .settings-sidenav::-webkit-scrollbar { display: none; }
    /* Nav items become tabs */
    .settings-sidenav .nav-item {
        flex-shrink: 0;
        min-width: 80px;
        flex-direction: column;
        padding: 10px 12px;
        border-right: 1px solid #f3f4f6;
        border-bottom: none !important;
        font-size: 11px;
    }
    .settings-sidenav .nav-item .nav-item-label { display: none; }
}

/* ════════════════════════════════════════════════════════════
   11. AUTH PAGES — login / register
   ════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    /* Login card fills screen on phone */
    .auth-card { margin: 0 !important; border-radius: 0 !important;
        min-height: 100vh; padding: 32px 20px !important; }
    /* Side illustration hidden on phone */
    .auth-illustration { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   12. APPOINTMENT CALENDAR
   ════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
    /* Calendar takes full width, no side panel */
    .cal-layout { grid-template-columns: 1fr !important; }
    .cal-sidebar { display: none; } /* hidden on mobile — accessible via drawer */
}

/* ════════════════════════════════════════════════════════════
   13. DENTAL CHART  — scale SVG on small screens
   ════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    .dental-chart-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dental-chart-container svg { min-width: 480px; }
}

/* ════════════════════════════════════════════════════════════
   14. DOCUMENT TEMPLATE EDITOR
   ════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
    .dts-layout { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   15. MudBlazor component overrides
   ════════════════════════════════════════════════════════════ */

/* MudSelect popup — ensure it doesn't overflow on mobile */
.mud-popover { max-width: calc(100vw - 16px) !important; }

/* MudDatePicker — full width on mobile */
@media (max-width: 599px) {
    .mud-picker { width: 100% !important; }
    .mud-picker-content { max-width: calc(100vw - 24px) !important; }
}

/* MudTabs — scrollable on mobile */
.mud-tabs-tabbar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none; }
.mud-tabs-tabbar::-webkit-scrollbar { display: none; }
.mud-tab { min-width: 80px !important; white-space: nowrap; }

/* MudAppBar z-index above bottom nav */
.mud-appbar { z-index: 1300 !important; }

/* MudDrawer overlay z-index */
.mud-drawer-overlay { z-index: 1250 !important; }
.mud-drawer { z-index: 1260 !important; }

/* MudTooltip — don't overflow on mobile */
.mud-tooltip { max-width: min(280px, calc(100vw - 16px)) !important; }

/* Dense MudTextField on mobile */
@media (max-width: 599px) {
    .mud-input-label { font-size: 13px !important; }
    .mud-input-control-input-slot { font-size: 14px !important; }
}

/* ════════════════════════════════════════════════════════════
   16. GENERIC HELPER CLASSES
   ════════════════════════════════════════════════════════════ */
/* Truncate long text */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Touch-friendly min tap size */
.touch-target { min-width: 44px !important; min-height: 44px !important; }

/* Full-width on mobile only */
@media (max-width: 599px) {
    .full-xs { width: 100% !important; }
}

/* Sticky header row in scrollable tables */
.sticky-header th { position: sticky; top: 0; background: #fff; z-index: 2; }

/* Gap utilities */
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }