/* ═══════════════════════════════════════
   dialog.css — All Dialog / Modal Styles
   ═══════════════════════════════════════ */

/* ── دیالوگ اشتراک‌گذاری مریض ── */
.share-patient {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.share-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--mud-palette-primary-hover, rgba(37,99,235,0.08));
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.share-record-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
}

.share-record-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #1e293b);
}

.share-record-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--mud-palette-primary, #2563eb);
    letter-spacing: 1px;
}

.share-desc {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--mud-palette-text-secondary, #475569);
    margin: 0;
}

.share-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 4px;
    border-top: 1px dashed var(--mud-palette-lines-default, #e2e8f0);
}

.share-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 6px 0;
}

.share-code-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey, #f8fafc);
    border: 1px dashed var(--mud-palette-primary, #3b82f6);
    margin: 6px 0;
}

.share-code-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
}

.share-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-code {
    font-size: 26px;
    font-weight: 800;
    color: var(--mud-palette-primary, #2563eb);
    letter-spacing: 2px;
}

/* ── دیالوگ علائم حیاتی ── */
.vitals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.vitals-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .vitals-field label {
        font-size: 12px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary, #475569);
    }

/* ── دیالوگ پرسشنامه ── */
.qa-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qa-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
}

    .qa-item.qa-yes {
        border-color: var(--mud-palette-error, #ef4444);
        background: var(--mud-palette-error-hover, rgba(239,68,68,0.06));
    }

.qa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.qa-q {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
}

/* توضیحات داخل چارچوب همان سوال */
.qa-details {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey, #f8fafc);
    border: 1px dashed var(--mud-palette-lines-default, #e2e8f0);
}

/* ── دیالوگ نسخه‌های قبلی ── */
.prev-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prev-card {
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--mud-palette-surface, #fff);
}

.prev-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prev-code {
    font-weight: 700;
    font-size: 13px;
    color: var(--mud-palette-primary, #2563eb);
}

.prev-date {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
}

.prev-drugs {
    margin: 0;
    padding-right: 18px;
    font-size: 12.5px;
    color: var(--mud-palette-text-primary, #334155);
    line-height: 1.9;
}

.prev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
}

@media (max-width: 600px) {
    /* ۸ فیلد در دو ستون می‌ماند تا ارتفاع دیالوگ کم شود */
    .vitals-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }
}

/* ── Dialog Divider ── */
.dialog-divider {
    margin: 0;
    border: none;
    border-top: 1px solid #e0e0e0;
}

/* ── Base Dialog ── */
.note-dialog {
    direction: rtl;
}

    .note-dialog .mud-dialog-content {
        padding: 16px 20px !important;
    }

    .note-dialog .mud-dialog-actions {
        padding: 12px 16px 18px 16px !important;
        padding-top: 0 !important;
    }

/* ── Dialog Header ── */
.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.dialog-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

.dialog-separator {
    margin: 8px -20px 0 -20px;
    margin-top: 30px;
    border: none;
    border-top: 1px solid #e0e0e0;
}

/* ── Dialog Body ── */
.dialog-body {
    padding: 24px;
}

/* ── Dialog Footer ── */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 24px;
    border-top: 1px solid #eef2f7;
}

    .dialog-footer .mud-button {
        min-width: 110px;
        border-radius: 6px;
    }

/* ── Search Section (prescription dialog) ── */
.search-section {
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.search-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start;
}

/* ── Prescription Code Combobox ── */
.prescription-code-select {
    width: 100%;
}

    .prescription-code-select .mud-input {
        font-size: 14px;
        background-color: white;
    }

    .prescription-code-select .mud-select-item {
        padding: 8px 16px;
        font-size: 14px;
        transition: background-color 0.2s;
    }

        .prescription-code-select .mud-select-item:hover {
            background-color: #e3f2fd;
        }

/* ── Drug Autocomplete ── */
.drug-autocomplete {
    width: 100%;
}

.drug-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    width: 100%;
    border-radius: 8px;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

    .drug-autocomplete-item:hover {
        background-color: #eef5ff;
        border-color: #bcd9ff;
    }

.drug-name {
    font-weight: 600;
    font-size: 13.5px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .drug-name::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #3b82f6;
        flex-shrink: 0;
    }

.drug-ac-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.drug-strength {
    font-size: 11.5px;
    font-weight: 600;
    color: #2563eb;
    background-color: #eaf2ff;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.drug-ac-add {
    color: #cbd5e1;
    font-size: 20px !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

.drug-autocomplete-item:hover .drug-ac-add {
    color: #22c55e;
    transform: scale(1.15);
}

.autocomplete-add-new {
    padding: 8px 6px 4px 6px;
    border-top: 1px solid #e8edf3;
    margin-top: 6px;
    position: sticky;
    bottom: 0;
    background: #fff;
}

/* ── Patient Dialog ── */
.patient-dialog {
    width: min(95vw, 1250px);
    height: clamp(760px, 80vh, 820px);
    min-height: 760px;
    max-height: 760px;
    display: flex;
    flex-direction: column;
}

    .patient-dialog .mud-dialog-content {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
    }

    .patient-dialog .mud-dialog-actions {
        flex-shrink: 0;
        padding: 12px 16px 18px 16px !important;
        gap: 8px;
    }

    .patient-dialog .mud-tabs {
        flex: 1;
        min-height: 0;
    }

    .patient-dialog .mud-tab-panel {
        flex: 1;
        min-height: 0;
    }

    /* Section header: group icon + title together on the right (RTL),
       instead of spreading them apart with space-between */
    .patient-dialog .column-card .section-header,
    .user-dialog .column-card .section-header {
        justify-content: flex-start !important;
        gap: 8px;
    }

    /* Kill the unwanted horizontal scrollbar inside the tab body */
    .patient-dialog .tab-content-scrollable,
    .user-dialog .tab-content-scrollable {
        overflow-x: hidden !important;
    }

    .patient-dialog .column-card,
    .patient-dialog .two-column-section,
    .user-dialog .column-card,
    .user-dialog .two-column-section {
        overflow: hidden;
    }

    /* MudGrid default spacing uses negative margins (-24px) + one-sided
       item padding (24px) → causes overflow AND uneven left/right gaps
       inside fields. Reset to symmetric padding so every field has equal
       inner spacing on both sides and nothing overflows. */
    .patient-dialog .mud-grid,
    .user-dialog .mud-grid {
        margin: 0 !important;
        width: 100% !important;
    }

    .patient-dialog .mud-grid > .mud-grid-item,
    .user-dialog .mud-grid > .mud-grid-item {
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    /* MudTabs computes the active-indicator (slider) position LTR (left:0%/50%),
       but the tabs are displayed RTL — so the underline lands under the WRONG
       tab. Mirror it for the two tabs: when the 1st tab (rendered on the right)
       is active, push the slider to the right half, and vice-versa. */
    .patient-tabs .mud-tabs-tabbar-wrapper:has(.mud-tooltip-root:first-child .mud-tab-active) .mud-tab-slider {
        left: 50% !important;
    }

    .patient-tabs .mud-tabs-tabbar-wrapper:has(.mud-tooltip-root:nth-child(2) .mud-tab-active) .mud-tab-slider {
        left: 0% !important;
    }

/* ── Responsive ── */
@media (max-width: 992px) {
    .search-grid {
        grid-template-columns: 200px 1fr;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .search-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search-section {
        padding: 8px;
    }

    .dialog-body {
        padding: 16px;
    }

    .dialog-footer {
        padding: 16px;
        flex-wrap: wrap;
    }

        .dialog-footer .mud-button {
            flex: 1;
        }
}

@media (max-width: 576px) {
    .search-grid {
        gap: 6px;
    }

    .drug-name { font-size: 12px; }
    .drug-strength { font-size: 10px; padding: 0 6px; }
}