/* Shared dialog styles (TechNotesDialogNext, StudyEditDialogNext, later others).
   Started as a copy of TechNotesDialogNext.razor.css:
   tn- renamed to dlg-, ::deep removed (global file).
   Added: date picker focus, read-only box. */

/* Dialogs that draw their own header: remove Radzen's content padding.
   Callers set ShowTitle = false and add "dlg-host" to CssClass. */
.dlg-host .rz-dialog-content {
    padding: 0 !important;
}

/* Self-rendered dialogs (Visible components, not DialogService), e.g. FaxInfoDialogNext.
   z-index 1002: Radzen dialog = 1001, mask = 1000; toasts render later in the DOM so stay on top. */
.dlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}

/* No popups inside these panels, so overflow is safe here */
.dlg-panel {
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

    .dlg-panel:focus {
        outline: none;
    }

/* Simple list (fax history) */
.dlg-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e3e7eb;
    border-radius: 4px;
}

.dlg-list-row {
    min-height: 50px; /* one row = same height while loading, so the dialog doesn't jump */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 7px 10px;
    border-bottom: 1px solid #eef1f3;
    font-size: 13px;
}

    .dlg-list-row:last-child {
        border-bottom: none;
    }

    .dlg-list-row strong {
        font-weight: 600;
    }

.dlg-ok {
    color: #2e7d32;
    font-weight: 600;
}

.dlg-bad {
    color: #c62828;
    font-weight: 600;
}

.dlg-queued {
    color: #b26a00;
    font-weight: 600;
}

.dlg {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-size: 14px;
    color: #1f2933;
}

/* Header */
.dlg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px 12px;
    background: #f4f6f8;
    border-bottom: 1px solid #e3e7eb;
}

.dlg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.dlg-stat {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #c62828;
    border-radius: 4px;
    padding: 2px 6px;
}

.dlg-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: #52606d;
}

.dlg-x {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #52606d;
    font-size: 16px;
    cursor: pointer;
    box-shadow: none;
}

    .dlg-x:hover {
        background: #e3e7eb;
    }

/* Body (no overflow here: dropdown popups must not be clipped) */
.dlg-body {
    flex: 1;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dlg-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dlg-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dlg-label {
    font-size: 12px;
    font-weight: 600;
    color: #52606d;
}

.dlg-opt, .dlg-hint {
    font-weight: 400;
    color: #7b8794;
}

.dlg-hint {
    font-size: 12px;
}

.dlg-sep {
    border: 0;
    border-top: 1px dashed #d9dee3;
    margin: 2px 0;
    opacity: 1;
}

/* Read-only value that looks like a box (e.g. Modality in Edit Case) */
.dlg-ro {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e3e7eb;
    border-radius: 4px;
    background: #f4f6f8;
    color: #52606d;
}

/* One focus style for every field: 2px brand green, no glow */
.dlg-body .rz-dropdown:focus,
.dlg-body .rz-dropdown:focus-within,
.dlg-body .rz-textbox:focus,
.dlg-body .rz-textarea:focus,
.dlg-body .rz-autocomplete:focus-within,
.dlg-body .rz-datepicker:focus-within {
    border-color: #2e7d32 !important;
    box-shadow: 0 0 0 1px #2e7d32 !important;
    outline: none !important;
}

/* Selected text: light green instead of the theme's orange-pink */
.dlg-body ::selection {
    background: #c8e6c9;
}

/* Physician clear × inside the box */
.dlg-phys {
    position: relative;
}

    .dlg-phys .rz-autocomplete-input {
        padding-inline-end: 30px;
    }

.dlg-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: none;
    color: #7b8794;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dlg-clear:hover {
        background: #f0f0f0;
        color: #333;
    }

/* Footer */
.dlg-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #e3e7eb;
}

.dlg-btn {
    height: 36px;
    padding: 0 18px;
    border: 1px solid #c5ccd3;
    border-radius: 6px;
    background: #fff;
    color: #1f2933;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

    .dlg-btn:hover {
        background: #f4f6f8;
    }

.dlg-primary {
    min-width: 96px;
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

    .dlg-primary:hover {
        background: #1b5e20;
    }

    .dlg-primary:disabled {
        opacity: .6;
        cursor: default;
    }

/* Tabs (own buttons, so the green is ours) */
.dlg-tabs {
    display: flex;
    gap: 20px;
    padding: 0 18px;
    border-bottom: 1px solid #e3e7eb;
}

.dlg-tab {
    height: 38px;
    padding: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #52606d;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

    .dlg-tab:hover {
        color: #1f2933;
    }

    .dlg-tab.is-on {
        color: #2e7d32;
        border-bottom-color: #2e7d32;
    }

    /* No box on mouse click; green outline only for keyboard users */
    .dlg-tab:focus {
        outline: none;
    }

    .dlg-tab:focus-visible {
        outline: 2px solid #2e7d32;
        outline-offset: 2px;
    }

/* Action cards (Share link, CD image) */
.dlg-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
}

    .dlg-card.is-done {
        border-color: #2e7d32;
    }

.dlg-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.dlg-card.is-done .dlg-card-head > span:first-child {
    color: #2e7d32;
}

.dlg-price {
    font-size: 12px;
    font-weight: 400;
    color: #7b8794;
}

/* Input/link + button on one line; the button never gets pushed out */
.dlg-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .dlg-inline > :first-child {
        flex: 1;
        min-width: 0;
    }

    .dlg-inline .dlg-btn {
        flex: 0 0 auto;
    }

.dlg-link {
    height: 36px;
    line-height: 34px;
    padding: 0 10px;
    border: 1px solid #e3e7eb;
    border-radius: 4px;
    background: #f4f6f8;
    color: #52606d;
    font-family: Consolas, monospace;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dlg-textlink {
    padding: 0;
    border: none;
    background: none;
    color: #52606d;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
}

/* CD image card */
.dlg-cd-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

    .dlg-cd-top strong {
        color: #1f2933;
    }

/* Scrolls when a patient has many studies (no popups inside, so overflow is safe) */
.dlg-cd-list {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid #e3e7eb;
    border-radius: 4px;
}

.dlg-cd-row {
    display: grid;
    grid-template-columns: 18px 66px 32px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #eef1f3;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

    .dlg-cd-row:last-child {
        border-bottom: none;
    }

    .dlg-cd-row.is-current {
        background: #f1f8f1;
    }

    .dlg-cd-row.is-off {
        color: #9aa5b1;
    }

    .dlg-cd-row input {
        margin: 0;
        accent-color: #2e7d32;
    }

.dlg-cd-date {
    color: #52606d;
    font-variant-numeric: tabular-nums;
}

.is-off .dlg-cd-date {
    color: inherit;
}

.dlg-cd-mod {
    font-weight: 600;
}

.dlg-cd-proc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dlg-cd-cur {
    font-size: 11px;
    font-weight: 600;
    color: #2e7d32;
}

.dlg-cd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dlg-howto summary {
    cursor: pointer;
    font-size: 12px;
    color: #52606d;
}

.dlg-howto ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: #52606d;
}

.dlg-howto li {
    margin-bottom: 4px;
}

.dlg-warn {
    padding: 10px 12px;
    border-radius: 6px;
    background: #fff4e0;
    color: #7a4b00;
    font-size: 13px;
}

/* Phone: green header, big touch targets */
@media (max-width: 767.98px) {
    .dlg-head {
        background: #2e7d32;
        border-bottom: none;
    }

    .dlg-title, .dlg-x {
        color: #fff;
    }

    .dlg-sub {
        color: #e3f1e4;
    }

    .dlg-x {
        width: 44px;
        height: 44px;
    }

        .dlg-x:hover {
            background: rgba(255,255,255,.15);
        }

    .dlg-foot {
        padding-bottom: 20px;
    }

    /* Self-rendered dialogs go full screen */
    .dlg-overlay {
        padding: 0;
    }

    .dlg-panel {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    /* Only footer buttons stretch; card buttons keep their size */
    .dlg-foot .dlg-btn {
        flex: 1;
        height: 46px;
    }

    .dlg-foot .dlg-primary {
        flex: 2;
    }
}