/* =====================================================================
   Responsive layout (#37): phones (< 768px) and tablets (768-1199px).
   Desktop (>= 1200px) is the original layout: every rule below is inside
   a max-width media query, or styles elements that only phones render
   (lead/user cards, the menu backdrop).
   Breakpoints match LeadTracker.Utils.Breakpoints. Colors: the #30
   theme variables in app.css.
   ===================================================================== */

/* ---------- Phone-only elements (rendered only below 768px) ---------- */

.lt-menu-backdrop {
    position: fixed;
    inset: 56px 0 0 0; /* below the phone header, so the hamburger stays visible */
    background: var(--rz-dialog-mask-background-color);
    opacity: 0.6;
    z-index: 1001;
}

.lead-search {
    width: 100%;
    margin-bottom: 10px;
}

.lead-cards,
.user-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-cards-empty {
    color: var(--lt-text-muted);
    padding: 24px 4px;
    text-align: center;
}

.lead-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-left: 4px solid var(--lt-border);
    border-radius: 8px;
    padding: 12px 12px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}

    .lead-card:active {
        background: var(--lt-raised);
    }

    .lead-card.hot { border-left-color: var(--lt-hot); background: var(--lt-hot-row); }
    .lead-card.funded { border-left-color: var(--lt-funded); background: var(--lt-funded-row); }
    .lead-card.dead { border-left-color: var(--lt-dead); background: var(--lt-dead-row); color: var(--lt-dead-text); }

    .lead-card.selected {
        border-color: var(--lt-accent);
        border-left-color: var(--lt-accent);
        box-shadow: 0 0 0 1px var(--lt-accent);
    }

.lead-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.lead-card-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--lt-text-title);
    overflow-wrap: anywhere;
}

    .lead-card-name .notes-dot {
        margin-left: 6px;
        vertical-align: middle;
    }

.lead-card-chips {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.lead-chip {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--lt-border);
    color: var(--lt-text-muted);
    background: var(--lt-raised);
    white-space: nowrap;
}

    .lead-chip.lead-chip-hot { color: var(--lt-hot); border-color: var(--lt-hot); background: var(--rz-danger-lighter); }
    .lead-chip.lead-chip-active { color: var(--lt-accent-soft); border-color: var(--lt-accent); background: var(--lt-accent-tint); }
    .lead-chip.lead-chip-dead { color: var(--lt-dead-text); border-color: var(--lt-dead); }
    .lead-chip.lead-chip-funded { color: var(--lt-funded); border-color: var(--lt-funded); background: var(--rz-success-lighter); }

.lead-card-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    padding: 0 10px 0 0;
    font-size: 1rem;
    color: var(--lt-accent-soft);
    text-decoration: none;
}

.lead-card-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.9rem;
}

.lead-card-label {
    color: var(--lt-text-muted);
    font-size: 0.8rem;
    margin-right: 2px;
}

.lead-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.user-card .user-card-name {
    font-weight: 700;
    color: var(--lt-text-title);
}

.user-card .user-card-email {
    color: var(--lt-text-muted);
    overflow-wrap: anywhere;
    margin: 2px 0 8px;
}

.user-card .user-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* =====================================================================
   Tablets and phones (< 1200px)
   ===================================================================== */
@media (max-width: 1199.98px) {
    /* Content padding: 24px -> 12px leaves more room for the grids */
    .rz-body > .rz-p-4 {
        padding: 12px !important;
    }

    /* Dashboard: KPI cards wrap two per row, charts get a fixed height */
    .dash-page {
        height: auto !important;
    }

    .dash-kpis {
        flex-wrap: wrap !important;
    }

        .dash-kpis > .rz-card {
            flex: 1 1 calc(50% - 8px) !important;
        }

    .dash-charts {
        flex: none !important;
        height: 420px;
    }

    /* Leads toolbar wraps instead of pushing "Add" off screen */
    .leads-toolbar {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }

    /* Dialogs never wider than the screen (Add/Edit lead ask for 900px) */
    .rz-dialog-wrapper > .rz-dialog {
        max-width: calc(100vw - 24px) !important;
    }
}

/* =====================================================================
   Below 1024px (phones, portrait tablets): Pipeline stacks
   ===================================================================== */
@media (max-width: 1023.98px) {
    .pipeline-page {
        height: auto !important;
    }

    .pipeline-columns {
        flex-direction: column !important;
        height: auto !important;
    }

        .pipeline-columns > .pipeline-list,
        .pipeline-columns > .pipeline-details {
            flex: none !important;
            height: auto !important;
            width: 100%;
        }

    .pipeline-list .rz-data-grid {
        height: 300px !important;
        flex: none !important;
    }

    .pipeline-details {
        scroll-margin-top: 8px;
    }

    /* Contact tabs: the tab strip scrolls sideways instead of wrapping */
    .pipeline-contact-tabs .rz-tabview-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .pipeline-contact-tabs .rz-tabview-nav li {
            flex-shrink: 0;
        }
}

/* =====================================================================
   Touch screens: phones, and tablets with a finger (coarse) pointer.
   44px touch targets; inputs at 16px so iOS doesn't zoom in on focus.
   ===================================================================== */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1199.98px) {
    .rz-button {
        min-height: 44px;
        min-width: 44px;
    }

    /* ...but not the up/down arrows inside number boxes (they split the box height) */
    .rz-numeric .rz-numeric-button {
        min-height: 0;
        min-width: 0;
    }

    .rz-textbox,
    .rz-textarea,
    .rz-inputtext,
    .rz-numeric,
    .rz-numeric-input,
    .rz-dropdown,
    .rz-datepicker,
    .rz-datepicker > input,
    .rz-spinner,
    textarea,
    select {
        font-size: 16px !important;
    }

    .rz-textbox,
    .rz-numeric,
    .rz-dropdown,
    .rz-datepicker,
    .rz-datepicker > .rz-inputtext {
        min-height: 44px;
    }

    .rz-dropdown .rz-dropdown-label,
    .rz-dropdown-item,
    .rz-dropdown-items li {
        font-size: 16px !important;
    }

    .rz-dropdown-items li {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Bigger checkboxes / radio buttons (Radzen sizes them from these variables) */
    :root {
        --rz-checkbox-width: 1.5rem;
        --rz-checkbox-height: 1.5rem;
        --rz-checkbox-icon-width: 1.2rem;
        --rz-checkbox-icon-height: 1.2rem;
        --rz-checkbox-icon-font-size: 1.2rem;
        --rz-radio-width: 1.5rem;
        --rz-radio-height: 1.5rem;
    }

    .rz-radio-btn {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Hidden focus input inside Radzen dropdowns */
    .rz-dropdown input {
        font-size: 16px !important;
    }

    .rz-sidebar .rz-navigation-item-link {
        min-height: 48px;
    }

    /* Login / Identity pages */
    body input.form-control,
    body input[type=password],
    body input[type=email] {
        font-size: 16px;
        min-height: 44px;
    }

    body .identity-card-body input[type=checkbox] {
        width: 22px;
        height: 22px;
        vertical-align: middle;
    }

    body .identity-card-body label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    body button.btn-primary {
        min-height: 48px;
        font-size: 16px;
    }
}

/* =====================================================================
   Phones (< 768px)
   ===================================================================== */
@media (max-width: 767.98px) {
    /* No sideways scrolling of the page; the layout follows the visible height */
    .rz-layout {
        height: 100dvh;
    }

    .rz-body {
        overflow-x: hidden !important;
    }

    /* ---------- Header + hamburger menu ---------- */
    .rz-header {
        height: 56px;
    }

        .rz-header .app-title-uppercase {
            font-size: 1.1rem;
            letter-spacing: 1.5px;
            margin-left: 4px;
        }

        .rz-header .rz-sidebar-toggle {
            min-width: 48px;
            min-height: 48px;
        }

        /* Logout: icon only */
        .rz-header .lt-logout {
            margin-right: 8px !important;
            min-width: 44px;
        }

            .rz-header .lt-logout .rz-button-text {
                display: none;
            }

    /* The sidebar slides in over the page below the header */
    .rz-layout > .rz-sidebar {
        position: fixed !important;
        top: 56px;
        bottom: 0;
        left: 0;
        width: min(280px, 85vw) !important;
        opacity: 1;
        z-index: 1002;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: 4px 0 16px rgba(10, 14, 20, 0.45);
    }

    .rz-layout.lt-menu-open > .rz-sidebar {
        transform: none;
    }

    .rz-layout:not(.lt-menu-open) > .rz-sidebar {
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s 0.2s;
    }


    .rz-body > .rz-p-4 {
        padding: 10px !important;
    }

    /* ---------- Leads toolbar ---------- */
    .leads-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
    }

        .leads-toolbar > .leads-filter {
            flex: 1 1 calc(50% - 4px);
            min-width: 0;
        }

            .leads-toolbar > .leads-filter .rz-dropdown {
                flex: 1;
                min-width: 0 !important;
            }

        .leads-toolbar > .leads-dead {
            margin-left: 0 !important;
        }

        .leads-toolbar > .leads-add {
            margin-left: auto !important;
            min-width: 120px;
        }


    /* ---------- Side panel: full width ---------- */
    .rz-dialog-side {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        border-radius: 0;
        border: none;
    }

        .rz-dialog-side > .rz-dialog-resize-bar {
            display: none;
        }

    .rz-dialog-side-titlebar .rz-dialog-side-titlebar-close,
    .rz-dialog-titlebar .rz-dialog-titlebar-close {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* Side panel rows: label above the field, everything full width */
    .lead-side-panel .rz-fieldset .rz-stack.rz-flex-row {
        flex-wrap: wrap !important;
        row-gap: 4px;
    }

        .lead-side-panel .rz-fieldset .rz-stack.rz-flex-row > .rz-label {
            width: 100% !important;
            margin-left: 0 !important;
            margin-top: 6px;
            color: var(--lt-text-muted);
        }

        .lead-side-panel .rz-fieldset .rz-stack.rz-flex-row > :not(.rz-label):not(.rz-stack):not(div) {
            flex: 1 1 100% !important;
            width: 100% !important;
        }

    /* Loan Info's two columns stack */
    .lead-side-panel .rz-fieldset .rz-stack.rz-flex-row > .rz-stack.rz-flex-column {
        flex: 1 1 100% !important;
    }

    /* Status checkboxes wrap */
    .lead-side-panel .rz-fieldset .rz-stack.rz-flex-row > div:not([class]) {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .lead-side-panel > form > .rz-button,
    .lead-side-panel .rz-button-md {
        width: 100%;
    }

    /* ---------- Dialogs: full screen (confirm/alert: full width) ---------- */
    .rz-dialog-wrapper > .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-width: 0 !important;
        border-radius: 0;
        border: none;
        transform: none !important;
    }

        .rz-dialog-wrapper > .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) > .rz-dialog-content {
            flex: 1 1 auto;
            padding: 12px;
        }

    .rz-dialog-wrapper > .rz-dialog.rz-dialog-confirm,
    .rz-dialog-wrapper > .rz-dialog.rz-dialog-alert {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0;
    }

    /* Add/Edit lead: one column */
    .dialog-grid,
    .lead-dialog-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .dialog-wrapper .rz-dialog-content,
    .dialog-wrapper {
        padding: 0;
    }

    /* Notes dialog: the list uses the rest of the screen */
    .notes-list {
        max-height: none;
    }

    .notes-add-actions .rz-button {
        min-width: 140px;
    }

    .note-meta {
        flex-wrap: wrap;
    }

    /* ---------- Pipeline ---------- */
    .pipeline-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .pipeline-list .rz-data-grid {
        height: 260px !important;
    }

    .pipeline-details > .rz-card > div[style*="text-align:right"] .rz-button,
    .pipeline-details .rz-card > div[style*="text-align: right"] .rz-button {
        width: 100%;
    }

    .pipeline-page > .rz-heading {
        font-size: 1.4rem;
        margin: 0;
    }

    /* Contact form: checklist above the fields, both full width */
    .contact-form {
        flex-direction: column !important;
    }

        .contact-form .contact-todo {
            width: 100% !important;
            flex-direction: column !important;
            gap: 6px !important;
        }

        .contact-form .contact-todo > .rz-stack > div {
            min-height: 40px;
            display: flex;
            align-items: center;
        }

        .contact-form .contact-fields {
            align-items: stretch !important;
        }

            .contact-form .contact-fields > div {
                width: 100% !important;
            }

    /* ---------- Dashboard ---------- */
    .dash-header {
        flex-wrap: wrap !important;
    }

        .dash-header h2 {
            font-size: 1.35rem;
        }

    .dash-kpis > .rz-card {
        flex: 1 1 100% !important;
    }

        .dash-kpis > .rz-card .rz-stack.rz-flex-row {
            flex-wrap: wrap !important;
            gap: 12px !important;
        }

        .dash-kpis > .rz-card .rz-stack.rz-flex-row > .rz-stack[style*="width:50%"],
        .dash-kpis > .rz-card .rz-stack.rz-flex-row > .rz-stack[style*="width: 50%"] {
            width: 100% !important;
        }

    .dash-charts {
        flex-direction: column !important;
        height: auto;
    }

        .dash-charts > .rz-card {
            flex: none !important;
            height: 360px !important;
        }

    /* ---------- Users (admin) ---------- */
    .user-card .rz-stack.rz-flex-row {
        gap: 8px !important;
    }

        .user-card .rz-stack.rz-flex-row > .rz-button {
            flex: 1 1 calc(50% - 4px);
        }

    .user-form-card .rz-form-field {
        min-width: 0 !important;
        flex: 1 1 100%;
    }

    .user-form-card .rz-stack.rz-flex-row > .rz-stack {
        flex: 1 1 100%;
    }

        .user-form-card .rz-stack.rz-flex-row > .rz-stack > .rz-form-field {
            width: 100%;
        }

    /* ---------- Login / Identity pages ---------- */
    body .identity-container {
        width: calc(100vw - 24px);
        max-width: 420px;
        padding: 24px 20px;
        box-sizing: border-box;
    }

    body .identity-logo {
        width: 170px;
    }

}