/*
 * 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 / MudAutocomplete popover — constrain only on mobile.
   Without the media query the rule fires on desktop too and stretches
   every dropdown across the full viewport width. */
@media (max-width: 599px) {
    .mud-popover {
        max-width: calc(100vw - 16px) !important;
    }
}

/* Desktop: popovers must never be wider than the viewport minus some
   breathing room, but let MudBlazor size them to the anchor element. */
@media (min-width: 600px) {
    .mud-popover {
        max-width: min(480px, calc(100vw - 32px)) !important;
        width: auto !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;
}