/* Phone styles for the worklist (TechViewNext; later RadViewNext).
   Copied unchanged from the old TechView.razor inline <style> (phone block).
   Wrapped in a media query so nothing here touches desktop. */

@media (max-width: 767.98px) {

    /* Force hide scrollbars globally when in mobile view */
    html, body {
        overflow-x: hidden !important;
    }

    /* === MOBILE HEADER === */
    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 101;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        min-height: 48px;
        overflow: visible;
    }

    .mobile-header-left {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .mobile-title {
        font-weight: 700;
        font-size: 17px;
        letter-spacing: -0.3px;
    }

    .mobile-count {
        font-size: 14px;
        opacity: 0.85;
    }

    .mobile-header-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .issue-badge-header {
        background: #F48FB1;
        color: white;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 10px;
        min-width: 20px;
        text-align: center;
        cursor: pointer;
    }

    .filter-toggle-btn {
        position: relative;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: white;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

        .filter-toggle-btn:active,
        .filter-toggle-btn.active {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0.95);
        }

    .filter-active-dot {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
        background: #ff9800;
        border-radius: 50%;
        border: 2px solid #388e3c;
    }

    /* === COLLAPSIBLE FILTER PANEL === */
    .mobile-filter-panel {
        background: white;
        position: relative;
        z-index: 100;
        width: 100%;
        flex-shrink: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.25s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

        .mobile-filter-panel.collapsed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
        }

        .mobile-filter-panel.expanded {
            max-height: 250px;
            opacity: 1;
            pointer-events: auto;
        }

    .mobile-filter-panel-content {
        padding: 14px;
    }

    .filter-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 10px;
    }

        .filter-row:last-child {
            margin-bottom: 0;
        }

    .native-select,
    .native-input {
        flex: 1;
        height: 40px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 0 12px;
        font-size: 14px;
        background: #fafafa;
        color: #333;
        -webkit-appearance: none;
        appearance: none;
    }

    .native-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 32px;
    }

        .native-select:focus,
        .native-input:focus {
            outline: none;
            border-color: #388e3c;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.12);
        }

        .native-select:disabled,
        .native-input:disabled {
            opacity: 0.5;
        }

    .date-input-wrapper {
        flex: 1 1 0;
        min-width: 0;
        max-width: 140px;
        position: relative;
        display: flex;
        align-items: center;
    }

        .date-input-wrapper i {
            position: absolute;
            right: 8px;
            color: #999;
            font-size: 12px;
            pointer-events: none;
            z-index: 1;
        }

    .native-date {
        width: 100%;
        height: 40px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 0 28px 0 8px;
        font-size: 13px;
        background: #fafafa;
        color: #333;
        -webkit-appearance: none;
        appearance: none;
    }

        .native-date:focus {
            outline: none;
            border-color: #388e3c;
            background: white;
        }

        .native-date:disabled {
            opacity: 0.5;
        }

    .mobile-search-btn {
        flex: 0 0 50px;
        height: 40px;
        background: linear-gradient(135deg, #4caf50, #388e3c);
        border: none;
        border-radius: 10px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.5rem;
    }

        .mobile-search-btn:disabled {
            opacity: 0.5;
        }

    .mobile-facility-row {
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }

    .native-facility-select {
        width: 100%;
    }

    .mobile-card-list {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: min-content;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .mobile-card-list::-webkit-scrollbar {
            display: none;
            width: 0;
        }

    .expandable-card {
        background: white;
        border-radius: 14px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        overflow: visible !important;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid #e0e0e0;
        width: 100%;
        position: relative;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        touch-action: manipulation;
    }

        .expandable-card.expanded {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: 10;
            margin-bottom: 8px;
        }

        .expandable-card.issue {
            background: linear-gradient(135deg, #fff 0%, #fce4ec 100%);
            border-left: 4px solid #F48FB1;
        }

        .expandable-card.claimed {
            background: linear-gradient(135deg, #fff 0%, #fff8e1 100%);
        }

        .expandable-card.completed {
            opacity: 0.75;
            background: #fafafa;
        }

    .card-compact {
        display: flex;
        align-items: stretch;
        padding: 14px 12px 14px 0;
    }

    .priority-indicator {
        width: 5px;
        min-height: 100%;
        border-radius: 0 3px 3px 0;
        margin-right: 12px;
        flex-shrink: 0;
    }

        .priority-indicator.stat {
            background: linear-gradient(180deg, #dc3545, #c62828);
        }

        .priority-indicator.urgent {
            background: linear-gradient(180deg, #ff9800, #f57c00);
        }

        .priority-indicator.routine {
            background: linear-gradient(180deg, #4caf50, #388e3c);
        }

    .card-compact-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-width: 0;
    }

    .compact-patient-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .compact-patient-name {
        font-weight: 600;
        font-size: 17px;
        color: #212121;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 170px;
    }

    .compact-patient-meta {
        font-size: 13px;
        color: #757575;
        flex-shrink: 0;
    }

    .compact-study-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .compact-modality {
        font-weight: 700;
        color: #388e3c;
        background: #e8f5e9;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .compact-exam {
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .compact-time {
        font-size: 13px;
        color: #9e9e9e;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .card-compact-right {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 8px;
        flex-shrink: 0;
    }

    .compact-badges {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
    }

    .mini-badge {
        font-size: 11px;
        font-weight: 700;
        padding: 3px 7px;
        border-radius: 4px;
        text-transform: uppercase;
    }

        .mini-badge.stat {
            background: #ffebee;
            color: #c62828;
        }

        .mini-badge.issue {
            background: #F48FB1;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 11px;
        }

        .mini-badge.pfe {
            background: #f0a000;
            color: white;
        }

    .compact-msg-icon {
        font-size: 14px;
    }

        .compact-msg-icon.unread {
            color: #ff8f00;
        }

        .compact-msg-icon.read {
            color: #43a047;
        }

    .compact-critical-icon {
        color: #dc3545;
        font-size: 14px;
    }

    .compact-chevron {
        color: #bbb;
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    .expandable-card.expanded .compact-chevron {
        transform: rotate(90deg);
    }

    .card-expanded-details {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        background: #f8f9fa;
        border-top: 0 solid transparent;
        transition: max-height 0.3s ease, opacity 0.25s ease;
        position: relative;
        width: 100%;
    }

        .card-expanded-details.show {
            max-height: 350px;
            opacity: 1;
            border-top: 1px solid #eee;
        }

    .expanded-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
        padding: 14px 16px;
    }

    .expanded-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .expanded-item.full-width {
            grid-column: 1 / -1;
        }

    .expanded-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #9e9e9e;
        font-weight: 500;
    }

    .expanded-value {
        font-size: 15px;
        color: #333;
        font-weight: 500;
    }

        .expanded-value.status-active {
            color: #388e3c;
            font-weight: 600;
        }

        .expanded-value.status-claimed {
            color: #ff9800;
            font-weight: 600;
        }

        .expanded-value.status-completed {
            color: #1976d2;
            font-weight: 600;
        }

    .expanded-link {
        color: #1976d2;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
    }

    .card-expanded-actions {
        display: flex;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        border-top: 0 solid transparent;
        background: linear-gradient(to bottom, #fff, #f5f5f5);
        transition: max-height 0.3s ease, opacity 0.25s ease;
        position: relative;
        width: 100%;
    }

        .card-expanded-actions.show {
            max-height: 80px;
            opacity: 1;
            border-top: 1px solid #e8e8e8;
        }

    .expanded-action-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 12px 8px;
        border: none;
        background: transparent;
        color: #666;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
    }

        .expanded-action-btn:not(:last-child) {
            border-right: 1px solid #e8e8e8;
        }

        .expanded-action-btn i {
            font-size: 20px;
        }

        .expanded-action-btn.images {
            color: #1976d2;
        }

        .expanded-action-btn.edit {
            color: #388e3c;
        }

        .expanded-action-btn.message {
            color: #ff8f00;
        }

        .expanded-action-btn.notes {
            color: #0288d1;
        }

        .expanded-action-btn.upload {
            color: #757575;
        }

        .expanded-action-btn.delete {
            color: #d32f2f;
        }

        .expanded-action-btn:disabled {
            opacity: 0.4;
            pointer-events: none;
        }

    .empty-state {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: #9e9e9e;
    }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.4;
        }

        .empty-state p {
            font-size: 15px;
            margin: 0;
        }

    /* ===== Tech Notes dialog — mobile full-screen sheet ===== */

    /* Full-bleed sheet, no floating-dialog chrome */
    .rz-dialog.mobile-sheet {
        border-radius: 0;
        max-height: none;
        margin: 0;
    }

    /* Kill the 500px floor from TechNotesDialog.razor.css —
           this is what was causing the horizontal scroll and clipped Update button.
           !important is required to beat the scoped [b-xxx] attribute selector. */
    .mobile-sheet .tech-notes-dialog,
    .mobile-sheet .study-edit-dialog {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Let the content area own the scrolling */
    .mobile-sheet .rz-dialog-content {
        padding: 12px 16px 0 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 16px inputs — anything smaller makes iOS zoom the page on focus */
    .mobile-sheet .rz-textbox,
    .mobile-sheet .rz-textarea,
    .mobile-sheet .rz-dropdown,
    .mobile-sheet .rz-dropdown .rz-inputtext,
    .mobile-sheet .rz-autocomplete input {
        font-size: 16px !important;
    }

    /* Slightly tighter vertical rhythm so more fields fit above the keyboard */
    .mobile-sheet .rz-form-field {
        margin-bottom: 0;
    }

    /* Flex chain so the form area fills the screen and pushes the footer down
           even when content is short */
    .mobile-sheet .rz-dialog-content {
        display: flex;
        flex-direction: column;
    }

    .mobile-sheet .tech-notes-dialog,
    .mobile-sheet .study-edit-dialog {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

        .mobile-sheet .tech-notes-dialog > .rz-stack,
        .mobile-sheet .study-edit-dialog > .rz-stack {
            flex: 1 1 auto;
        }

    .mobile-sheet .sheet-form {
        flex: 1 1 auto;
        padding-bottom: 8px;
    }

    /* Pinned action bar: full-width, thumb-sized, safe-area padded */
    .mobile-sheet .sheet-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        margin-left: -16px;
        margin-right: -16px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    }

        .mobile-sheet .sheet-actions .rz-button {
            flex: 1 1 0;
            min-height: 46px;
            font-size: 16px;
        }

    /* Thumb-sized clear (×) button on Ref. Physician */
    .mobile-sheet .physician-clear-button {
        width: 36px;
        height: 36px;
        font-size: 20px;
        right: 6px;
    }

    /* Pad the autocomplete's inner input so text doesn't run under the × */
    .mobile-sheet .physician-input-container .rz-autocomplete input {
        padding-inline-end: 46px;
    }

    /* Keep the suggestion popup short enough to coexist with the keyboard */
    .rz-autocomplete-panel {
        max-height: 40vh !important;
    }

    /* Truly edge-to-edge, and give the content area a real height to fill */
    .rz-dialog.mobile-sheet {
        position: fixed;
        inset: 0;
        width: 100vw !important;
        height: 100dvh !important;
        display: flex;
        flex-direction: column;
    }

    .mobile-sheet .rz-dialog-content {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* StudyEdit only: the EditForm's form and the rz-focus-green wrapper sit
           between the stack and the tabs container — extend the flex chain through them */
    .mobile-sheet .study-edit-dialog form,
    .mobile-sheet .study-edit-dialog .rz-focus-green {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* The tabs container carries an inline min-height:400px — relax it on mobile
           so short phones don't get forced overflow */
    .mobile-sheet .study-edit-dialog .sheet-form {
        min-height: 0 !important;
    }

    /* Tab strip: one row, horizontally swipeable, hidden scrollbar */
    .mobile-sheet .rz-tabview-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .mobile-sheet .rz-tabview-nav::-webkit-scrollbar {
            display: none;
        }

        .mobile-sheet .rz-tabview-nav li {
            flex: 0 0 auto;
            white-space: nowrap;
        }

    .native-input {
        min-width: 0;
    }

    .wl-m-strip {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px 0;
        flex-shrink: 0;
        scrollbar-width: none;
    }

        .wl-m-strip::-webkit-scrollbar {
            display: none;
        }

        .wl-m-strip .wl-tab, .wl-m-strip .wl-chip {
            flex: 0 0 auto;
            height: 32px;
        }

        .wl-m-strip .wl-sep {
            flex: 0 0 1px;
            align-self: center;
        }

    .wl-m-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        cursor: pointer;
    }

    .wl-m-scope {
        font-size: 12px;
        opacity: .85;
        max-width: 62vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Shell on phone: 52px header, no footer */
    .wl-page {
        gap: 0;
        height: calc(100vh - 52px);
    }

    .mobile-header, .mobile-filter-panel, .wl-m-strip {
        flex-shrink: 0;
    }

    .mobile-card-list {
        min-height: 0;
    }

    .compact-patient-name {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* RadViewNext: blue header so Rad View is easy to tell apart */
    .mobile-header.wl-m-blue {
        background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    }

        .mobile-header.wl-m-blue .filter-active-dot {
            border-color: #1976d2;
        }

        .mobile-header.wl-m-blue ~ .mobile-filter-panel .mobile-search-btn {
            background: #1976d2;
        }

    /* Rad filter panel has an extra row (switches) */
    .mobile-filter-panel.expanded.wl-m-tall {
        max-height: 320px;
    }
}
/* end @media phone */