/* ==========================================================
   ReSiRai
   Frontend Style
   ========================================================== */


/* ==========================================================
   Reset / Base
   ========================================================== */

* {
    box-sizing: border-box;
}


:root {
    /* ==========================================================
       ReSiRai design tokens
       The palette follows the approved teal login screen so the
       brand identity is continuous from sign-in to the workspace.
       ========================================================== */

    /* Brand (teal) */
    --brand-900: #0a3540;
    --brand-800: #0d4251;
    --brand-700: #0f5165;
    --brand-600: #0c687e;
    --brand-500: #0e7f95;
    --brand-450: #1995ad;   /* exact match with the login screen */
    --brand-400: #2fa8bf;
    --brand-300: #7fc9d8;
    --brand-200: #b9e2ea;
    --brand-100: #d9eff4;
    --brand-50:  #eef8fb;
    --brand-25:  #f5fbfd;

    /* Text */
    --text: #1f2d36;
    --heading: #0d3f4f;
    --muted: #55707e;
    --muted-strong: #455e6b;

    /* Surfaces */
    --page-background: #f2f7f9;
    --surface: #ffffff;
    --surface-soft: #f6fafb;
    --border: #d8e7ec;
    --border-strong: #c3dae1;

    /* Status */
    --primary: var( --brand-500 );
    --primary-dark: var( --brand-600 );
    --success: #0e7d55;
    --warning: #a06400;
    --danger: #b42318;
    --danger-soft: #fdecea;
    --warning-soft: #fff6e6;
    --success-soft: #e8f8f0;

    /* Elevation: flat surfaces with one soft shadow */
    --shadow: 0 1px 2px rgba( 12, 55, 70, 0.04 ), 0 6px 18px rgba( 12, 55, 70, 0.05 );
    --shadow-lg: 0 2px 4px rgba( 12, 55, 70, 0.05 ), 0 16px 40px rgba( 12, 55, 70, 0.10 );

    /* Radii */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    /* Motion */
    --ease: cubic-bezier( 0.2, 0.7, 0.3, 1 );
    --dur: 180ms;

    /* Type scale */
    --font-fa: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 21px;

    /* Shell (back-compat aliases used by older rules) */
    --sidebar-width: 230px;
    --sidebar-bg: var( --brand-700 );
    --sidebar-bg-deep: var( --brand-900 );
    --sidebar-active: var( --brand-600 );
    --shell-blue: var( --brand-500 );
    --shell-cyan: var( --brand-50 );
    --focus-ring: 0 0 0 3px rgba( 25, 149, 173, 0.30 );
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    font-family: var( --font-fa );
    direction: rtl;
    background: var( --page-background );
    color: var( --text );
    line-height: 1.7;
}


/* ==========================================================
   Utility
   ========================================================== */

.hidden {
    display: none !important;
}


/* Accessible keyboard focus. The previous CSS only styled :focus with a
   box-shadow, which made keyboard navigation hard to follow on buttons,
   sidebar links and table rows. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #0e7f95;
    outline-offset: 2px;
    box-shadow: var( --focus-ring );
}

/* The patient rows are clickable and focusable, so give them a clear ring too. */
.patient-list-row:focus-visible {
    outline: 2px solid #0e7f95;
    outline-offset: -2px;
}


/* ==========================================================
   Header user control (current user + logout)
   Built by login-ui.js as real DOM, styled here instead of inline.
   ========================================================== */

.header-user-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.header-user-name {
    color: var( --muted );
    font-size: 13px;
}

.header-logout-button {
    white-space: nowrap;
}

/* The application header is a flex row; keep the injected control aligned. */
.header-content {
    align-items: center;
    gap: 16px;
}


/* ==========================================================
   Header
   ========================================================== */

.main-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 18px 24px;
    background: linear-gradient( 135deg, #ffffff, #f5fbfd );
    border-bottom: 1px solid var( --border );
}


.header-content {
    max-width: 1200px;
    margin: 0 auto;
}


.brand-mark {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var( --primary );
    color: #ffffff;
    font-weight: bold;
    direction: ltr;
    box-shadow: 0 5px 14px rgba(12,55,70, 0.22 );
}

.brand-mark img,
.sidebar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

/* --- استانداردِ لوگوی رسیرای (برگهٔ هویت) — اندازهٔ دلخواه در کد ممنوع ------
   فایل‌ها: اصلی 1200×720 · هدر 600×360 · ورود 400×240 · سایدبار 260×156 ·
   موبایل 180×108 · فشرده 120×72 · آیکن‌ها 512/256/128/64/32 — نسبتِ ۵:۳ ثابت.
   هر لوگو فقط از همین اندازه‌ها: یا ارتفاع از متغیرها، یا عرضِ چاپ (mm).
   object-fit:contain تا نسبتِ تصویر هرگز کشیده/بریده نشود. */
:root {
    --logo-h-sidebar: 156px;
    --logo-h-header: 90px;
    --logo-w-login: 260px;
    --logo-w-login-mobile: 220px;
    --logo-w-login-short: 200px;
    --logo-h-mobile: 54px;
    --logo-h-compact: 36px;
    --logo-print-head: 36mm;
    --logo-print-foot: 20mm;
}

.sidebar-brand-logo {
    height: var(--logo-h-sidebar);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 8px auto;
}

.header-brand-logo {
    height: var(--logo-h-header);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .header-brand-logo { height: var(--logo-h-mobile); }
    .sidebar-brand-logo { height: var(--logo-h-compact); }
}


.main-header h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
}


.main-header p {
    margin: 5px 0 0;
    color: var( --muted );
    font-size: 13px;
}


/* ==========================================================
   Main Layout
   ========================================================== */

.page-container {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 20px 40px;
}


/* ==========================================================
   Cards
   ========================================================== */

.card {
    margin-bottom: 20px;
    padding: 22px;
    background: var( --surface );
    border: 1px solid var( --border );
    border-radius: 14px;
    box-shadow: var( --shadow );
}


/* ==========================================================
   Section Header
   ========================================================== */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}


    .section-header h2 {
        margin: 0;
        font-size: 21px;
    }


    .section-header p {
        margin: 7px 0 0;
        color: var( --muted );
        font-size: 14px;
    }


.subsection-header {
    margin: 24px 0 12px;
}


    .subsection-header h3 {
        margin: 0;
        font-size: 18px;
    }


/* ==========================================================
   Buttons
   ========================================================== */

button {
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: var( --primary );
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}


    button:hover:not(:disabled) {
        transform: translateY(-1px);
        filter: brightness( 0.98 );
        box-shadow: 0 4px 10px rgba(12,55,70, 0.08 );
    }


    button:active:not(:disabled) {
        transform: translateY(0);
    }


    button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }


.primary-button {
    background: var( --primary );
}


.secondary-button {
    background: #eef4f6;
    color: #1f2d36;
}


.warning-button {
    background: var( --warning );
    color: #ffffff;
}


.danger-button {
    background: var( --danger );
    color: #ffffff;
}


.success-button {
    background: var( --success );
    color: #ffffff;
}


/* ==========================================================
   Toolbars
   ========================================================== */

.details-toolbar,
.form-actions,
.study-action-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}


.details-toolbar {
    margin-bottom: 20px;
}


.form-actions {
    margin-top: 18px;
}


/* ==========================================================
   Search Area
   ========================================================== */

.search-panel {
    margin-bottom: 16px;
    padding: 12px;
    background: var( --surface-soft );
    border: 1px solid var( --border );
    border-radius: 10px;
}


.search-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


    .search-container input {
        flex: 1;
        min-width: 240px;
    }


.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    color: var( --muted );
    font-size: 14px;
    cursor: pointer;
}


    .checkbox-row input {
        width: auto;
        cursor: pointer;
    }


/* ==========================================================
   Form Controls
   A flat, label-above-control layout. Each field used to be its own
   bordered box, which turned every form into a grid of frames and made
   the controls smaller and harder to scan. Fields are now grouped by a
   single card, with generous hit targets for touch screens.
   ========================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 18px 20px;
    align-items: start;
}


.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 0;
    min-width: 0;
}


    .form-field.full-width {
        grid-column: 1 / -1;
    }


    .form-field label {
        display: block;
        margin: 0;
        color: var( --heading );
        font-weight: 600;
        font-size: var( --fs-sm );
        line-height: 1.6;
    }

    /* Controls: taller targets, consistent border and a clear focus ring. */
    .form-field input,
    .form-field select,
    .form-field textarea,
    .search-container input {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid var( --border-strong, #c3dae1 );
        border-radius: var( --radius-sm );
        background: #ffffff;
        color: var( --text );
        font-family: inherit;
        font-size: var( --fs-base );
        outline: none;
        transition: border-color var( --dur ) var( --ease ),
                    box-shadow var( --dur ) var( --ease );
    }

    .form-field textarea {
        /* ارتفاعِ ثابتِ بزرگ حذف شد: جعبه به‌اندازهٔ متنِ داخلش باز می‌شود
           (field-sizing در پایینِ فایل)؛ اینجا فقط فاصلهٔ خط و کفِ حداقلی می‌ماند. */
        min-height: 2.4em;
        line-height: 1.85;
    }

        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus,
        .search-container input:focus {
            border-color: var( --primary );
            box-shadow: 0 0 0 3px rgba( 12, 55, 70, 0.10 );
        }

        /* Read-only fields should read as data, not as disabled inputs. */
        .form-field input[readonly],
        .form-field textarea[readonly],
        .form-field select:disabled {
            color: var( --muted-strong );
            cursor: default;
        }

    .form-field textarea {
        resize: vertical;
        min-height: 2.4em;
    }


.field-hint {
    color: var( --muted );
    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   Status Messages
   ========================================================== */

.status-message {
    min-height: 24px;
    margin: 8px 0 10px;
    color: var( --muted );
    font-size: 14px;
}


    .status-message.error {
        color: var( --danger );
        font-weight: bold;
    }


/* ==========================================================
   Warning Box
   ========================================================== */

.warning-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #e8cf9a;
    border-radius: 9px;
    background: #fff6e6;
    color: #7a4e00;
    font-size: 14px;
}


/* ==========================================================
   Status Badge
   ========================================================== */

.status-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}


    .status-badge.active {
        background: #e8f8f0;
        color: #0e7d55;
    }


    .status-badge.inactive {
        background: #eef4f6;
        color: #55707e;
    }


/* ==========================================================
   Patient Table
   ========================================================== */

.table-container {
    overflow-x: auto;
    border: 1px solid var( --border );
    border-radius: 10px;
}


.patient-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}


    .patient-table th,
    .patient-table td {
        padding: 12px 10px;
        border-bottom: 1px solid #eef4f6;
        text-align: right;
        white-space: nowrap;
    }


    .patient-table th {
        background: #f6fafb;
        color: #455e6b;
        font-size: 13px;
    }


    .patient-table td {
        font-size: 14px;
    }


    .patient-table tbody tr {
        transition: background-color 0.15s ease;
    }


        .patient-table tbody tr:hover {
            background: #f5fbfd;
        }


        /* ==========================================================
   Inactive Patient
   ========================================================== */

        .patient-table
        tbody
        tr.inactive-patient-row,
        .patient-table
        tbody
        tr.inactive-patient-row:hover {
            background: #eef4f6 !important;
        }


            .patient-table
            tbody
            tr.inactive-patient-row
            td {
                color: #7d95a2 !important;
            }


            .patient-table
            tbody
            tr.inactive-patient-row
            button {
                color: #ffffff !important;
            }


/* ==========================================================
   Patient Details
   ========================================================== */

/* بخش‌هایِ بازشوندهٔ پروندهٔ بیمار: کارتِ هویت همیشه دیده می‌شود؛ جزئیات با
   یک کلیک — تا مراجعات بدونِ اسکرول بالا بیایند. */
.patient-info-more { margin-top: 6px; }
.patient-info-more > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var( --radius-md, 8px );
    font-weight: 600;
    color: var( --primary, #2c6e8f );
    border: 1px dashed var( --border, #d5dbe1 );
    background: #fbfcfd;
}
.patient-info-more > summary::-webkit-details-marker { display: none; }
.patient-info-more > summary::before { content: "â–¸"; color: var( --muted, #888 ); transition: transform .15s ease; }
.patient-info-more[open] > summary::before { transform: rotate(90deg); }
.patient-info-more > summary:hover { background: #f2f6f9; }
.patient-info-more > .patient-info-grid { margin-top: 10px; }

.patient-info-grid {
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 12px 20px;
    margin-bottom: 22px;
}


.info-item {
    padding: 12px;
    background: var( --surface-soft );
    border: 1px solid var( --border );
    border-radius: 9px;
}


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


.info-label {
    margin-left: 7px;
    font-weight: bold;
}


/* ==========================================================
   Summary Boxes
   ========================================================== */

.summary-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}


.summary-box {
    min-width: 150px;
    padding: 15px;
    text-align: center;
    background: linear-gradient( 180deg, #f6fafb, #f1f6f8 );
    border: 1px solid var( --border );
    border-radius: 10px;
}


.summary-number {
    display: block;
    margin-bottom: 5px;
    font-size: 24px;
    font-weight: bold;
}


.summary-label {
    color: var( --muted );
    font-size: 13px;
}


/* ==========================================================
   Studies
   ========================================================== */

.studies-container {
    display: grid;
    gap: 12px;
}














































/* ==========================================================
   Image Grid
   ========================================================== */

.images-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 185px, 1fr ) );
    gap: 15px;
}

/* گروه‌هایِ بازشونده به تفکیکِ نوعِ تصویر (تشخیصِ رسیرا) — تمیز و بدونِ شلوغی. */
.image-type-group {
    border: 1px solid var( --border );
    border-radius: var( --radius-lg );
    background: #fafbfc;
    padding: 0;
}
.image-type-group > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-weight: 600;
    color: var( --text, #333 );
    user-select: none;
}
.image-type-group > summary::-webkit-details-marker { display: none; }
.image-type-group > summary::before {
    content: "â–¸";
    color: var( --muted, #888 );
    transition: transform .15s ease;
}
.image-type-group[open] > summary::before { transform: rotate(90deg); }
.image-type-group > summary:hover { background: #f2f5f8; }
.image-type-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 185px, 1fr ) );
    gap: 15px;
    padding: 0 14px 14px;
}


.image-card {
    padding: 10px;
    background: #ffffff;
    border: 1px solid var( --border );
    border-radius: 10px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}


    .image-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 20px rgba(12,55,70, 0.08 );
    }


    .image-card img {
        width: 100%;
        height: 180px;
        object-fit: contain;
        background: #1f2d36;
        border-radius: 6px;
        cursor: pointer;
    }


.image-card-title {
    margin-top: 9px;
    font-size: 12px;
    word-break: break-all;
    direction: ltr;
    text-align: left;
}


.image-card-actions {
    display: flex;
    margin-top: 9px;
}


.image-delete-button {
    width: 100%;
    background: #fdecea;
    color: #b42318;
}


/* ==========================================================
   Image selection for a joint (multi-image) AI analysis
   ========================================================== */

.image-pick {
    display: none;
}


.images-grid.is-selecting .image-pick {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 7px 9px;
    border: 1px dashed #0f5165;
    border-radius: 8px;
    background: #f0f7fa;
    font-size: 12px;
    color: #0f5165;
    cursor: pointer;
    user-select: none;
}


.images-grid.is-selecting .image-pick input {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0f5165;
}


.images-grid.is-selecting .image-pick:has( input:checked ) {
    background: #0f5165;
    border-color: #0f5165;
    border-style: solid;
    color: #ffffff;
}


.image-select-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #f0f7fa;
    border: 1px solid rgba(15, 81, 101, 0.25 );
    border-radius: 10px;
}


.image-select-count {
    font-size: 13px;
    font-weight: 600;
    color: #0f5165;
}


.image-select-run {
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: #0f5165;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}


.image-select-run:disabled {
    opacity: 0.45;
    cursor: default;
}


.study-card-image-actions .secondary-button.is-on {
    background: #0f5165;
    border-color: #0f5165;
    color: #ffffff;
}


    .image-delete-button:hover {
        background: #f7d2ce;
        color: #8f1d16;
    }


/* ==========================================================
   Image Modal
   ========================================================== */

.image-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba( 0, 0, 0, 0.85 );
}


.image-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


    .image-modal-content img {
        max-width: 95%;
        max-height: 88%;
        object-fit: contain;
        cursor: grab;
        touch-action: none;
        transform-origin: center center;
        user-select: none;
        position: relative;
        z-index: 1;
    }

.image-viewer-toolbar {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    transform: none;
    background: #0a3540;
    border: 1px solid rgba( 255, 255, 255, 0.28 );
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.45 );
    pointer-events: auto;
}

.image-viewer-toolbar button {
    min-width: 42px;
    white-space: nowrap;
}


.modal-close-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    background: #ffffff;
    color: #1f2d36;
    font-size: 28px;
}


.image-caption {
    margin-top: 10px;
    color: #ffffff;
    direction: ltr;
}


/* ==========================================================
   Confirm Modal
   ========================================================== */

.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12,55,70, 0.55 );
}


.confirm-dialog {
    width: min( 440px, 100% );
    padding: 24px;
    text-align: center;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba( 0, 0, 0, 0.24 );
}


.confirm-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecea;
    color: var( --danger );
    font-size: 25px;
    font-weight: bold;
}


.confirm-dialog h3 {
    margin: 0 0 9px;
}


.confirm-dialog p {
    margin: 0;
    color: #455e6b;
    white-space: pre-line;
    line-height: 1.8;
}


.confirm-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}


/* ==========================================================
   Toast
   ========================================================== */

.toast-container {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1400;
    display: grid;
    gap: 9px;
    width: min( 390px, calc( 100vw - 40px ) );
}


.toast {
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var( --border );
    border-right: 5px solid var( --primary );
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(12,55,70, 0.16 );
    animation: toastIn 0.22s ease;
}


    .toast.success {
        border-right-color: var( --success );
    }


    .toast.error {
        border-right-color: var( --danger );
    }


    .toast.warning {
        border-right-color: var( --warning );
    }


.toast-title {
    margin-bottom: 4px;
    font-weight: bold;
}


.toast-message {
    color: #55707e;
    font-size: 13px;
    line-height: 1.7;
}


@keyframes toastIn {

    from {
        opacity: 0;
        transform: translateY( 8px );
    }


    to {
        opacity: 1;
        transform: translateY( 0 );
    }
}


/* ==========================================================
   Responsive
   ========================================================== */

@media ( max-width: 700px ) {

    .main-header {
        position: static;
    }


    .page-container {
        padding: 0 10px 25px;
    }


    .card {
        padding: 15px;
    }


    .section-header {
        display: block;
    }


        .section-header > button {
            width: 100%;
            margin-top: 12px;
        }


    .search-container {
        display: block;
    }


        .search-container input,
        .search-container button {
            width: 100%;
            margin-bottom: 8px;
        }


    .patient-info-grid,
    .form-grid,
    .study-meta {
        grid-template-columns: 1fr;
    }


    .info-item.full-width,
    .form-field.full-width {
        grid-column: auto;
    }


    .form-actions button,
    .details-toolbar button {
        width: 100%;
    }


    .summary-box {
        width: 100%;
    }


    .confirm-actions {
        display: grid;
    }


    .toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
    }
}

/* ==========================================================
   Inline Images زیر هر Study
   ========================================================== */

.study-inline-images {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var( --border );
}


    .study-inline-images .images-grid {
        margin-top: 10px;
    }





















.study-inline-images {
    margin-top: 16px;
    padding: 16px;
    background: #f6fafb;
    border: 1px solid #e4eff2;
    border-radius: 9px;
}


    .study-inline-images .status-message {
        margin-top: 0;
    }


    /* تصاویر داخل هر Study کمی کوچک‌تر باشند
   تا چند تصویر در یک ردیف دیده شود. */

    .study-inline-images .images-grid {
        grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    }
/* Jalali calendar */
/* Jalali date picker: input wrapper + calendar button */
.jalali-input-wrap{display:flex;gap:6px;align-items:center;width:100%}
.jalali-input-wrap input{flex:1;min-width:0}
.jalali-calendar-button{
  flex:0 0 44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:var(--brand-50);
  color:var(--brand-600);
  border:1px solid var(--border-strong,#c3dae1);
  border-radius:var(--radius-sm);
}
.jalali-calendar-button:hover:not(:disabled){background:var(--brand-100);border-color:var(--brand-300)}
.jalali-calendar-button svg{width:20px;height:20px;display:block}
.jalali-picker-overlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,53,64,.58);backdrop-filter:blur(3px)}
.jalali-picker-dialog{
  width:min(380px,100%);
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  direction:rtl;
}
.jalali-picker-header{
  display:grid;
  grid-template-columns:38px 38px 1fr 38px 38px;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
}
.jalali-picker-header button{
  min-height:38px;
  padding:0;
  background:var(--brand-50);
  color:var(--brand-600);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:18px;
  line-height:1;
}
.jalali-picker-header button:hover:not(:disabled){background:var(--brand-100);border-color:var(--brand-200)}
.jalali-nav-year{font-size:15px}
.jalali-picker-title{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  color:var(--heading);
  font-size:var(--fs-md);
  font-weight:700;
}
.jalali-picker-year{color:var(--muted);font-size:var(--fs-sm);font-weight:600;direction:ltr;border:1px solid #cfdce2;border-radius:6px;padding:1px 4px;background:#fff;cursor:pointer}
.jalali-picker-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:var(--fs-xs);
  text-align:center;
}
.jalali-picker-weekdays span{padding:5px 0;font-weight:600}
.jalali-picker-weekdays .is-weekend{color:var(--danger)}
.jalali-picker-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.jalali-picker-grid button{
  aspect-ratio:1;
  min-height:38px;
  padding:0;
  background:var(--brand-25);
  color:var(--text);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  font-weight:600;
}
.jalali-picker-grid button:hover:not(:disabled){background:var(--brand-100);border-color:var(--brand-300);color:var(--brand-700)}
.jalali-picker-grid .jalali-pad{aspect-ratio:1}
.jalali-picker-grid button.is-weekend{color:var(--danger);background:#fdf3f2}
.jalali-picker-grid button.is-weekend:hover{background:#fbe6e3}
.jalali-picker-grid button.is-today{box-shadow:inset 0 0 0 2px var(--brand-300)}
.jalali-picker-grid button.is-selected{
  background:var(--primary);
  border-color:var(--primary-dark);
  color:#ffffff;
  box-shadow:0 4px 10px rgba(12,104,126,.28);
}
.jalali-picker-grid button.is-selected:hover{background:var(--primary-dark);color:#ffffff}
.jalali-picker-time{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:var(--fs-xs);
}
.jalali-picker-time input{
  width:64px;
  min-height:38px;
  padding:6px 8px;
  border:1px solid var(--border-strong,#c3dae1);
  border-radius:var(--radius-sm);
  text-align:center;
  font-family:inherit;
  font-size:var(--fs-sm);
  direction:ltr;
}
.jalali-picker-time input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(12,55,70,.10);outline:none}
.jalali-picker-footer{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.jalali-picker-footer button{min-height:40px;padding:8px 14px;border-radius:var(--radius-sm);font-size:var(--fs-sm)}
.jalali-picker-footer .jalali-today{margin-inline-start:auto;background:var(--primary);color:#ffffff}
.jalali-picker-footer .jalali-cancel{background:var(--surface-soft);color:var(--muted-strong);border:1px solid var(--border)}
.jalali-picker-footer .jalali-clear{background:transparent;color:var(--danger);border:1px solid transparent}
.jalali-picker-footer .jalali-clear:hover:not(:disabled){background:var(--danger-soft);border-color:#f7d2ce}



.study-header {
    position: relative;
    display: block;
}
.study-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.study-header-title #studyDetailsEditButton {
    flex: 0 0 auto;
}
.study-header > p {
    margin-top: 7px;
}


.study-readonly-value {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f6fafb;
    line-height: 1.7;
    white-space: pre-wrap;
}


#studyDetailsForm input[readonly],
#studyDetailsForm textarea[readonly],
#newStudyForm input[readonly],
#newStudyForm textarea[readonly] {
    background: #f6fafb;
    cursor: default;
}
/* The "مشاهده / ویرایش" panel is the main place a doctor looks at a Study. Its chart
   is read-only (the teeth are not editable there) but the view buttons must stay
   usable, otherwise the panel is stuck on a single view - which is what used to
   happen when the whole toolbar was hidden. */
#studyDetailsTeethChart.study-chart-readonly {
    pointer-events: none;
}
#studyDetailsTeethChart.study-chart-readonly .teeth-chart-toolbar {
    pointer-events: auto;
}
#studyDetailsTeethChart.study-chart-readonly .teeth-chart-selected {
    display: none;
}


/* Weekday under a date field. It sits on the start side (right in RTL) with a
   small dot so it reads as a label attached to the field, not as stray text.
   It used to be centred and plain, which made it easy to miss. */
.jalali-weekday-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 20px;
    margin-top: 6px;
    color: var( --brand-600 );
    font-weight: 700;
    font-size: var( --fs-xs );
    line-height: 1.6;
}
.jalali-weekday-name:empty { display: none; }
.jalali-weekday-name::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var( --brand-400 );
}


/* ==========================================================
   ReSiRai Application Shell - Design D
   Right-side navigation + global header
   (Shell tokens live in the top-level :root.)
   ========================================================== */

.app-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-deep));
    box-shadow: -10px 0 30px rgba(10,53,64,.12);
}

.sidebar-brand {
    min-height: 92px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.sidebar-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #ffffff;
    font-size: 27px;
}
.sidebar-brand strong { display:block; font-size:21px; direction:ltr; text-align:right; }
.sidebar-brand small { display:block; margin-top:2px; color:#7fc9d8; font-size: 12px; direction:ltr; }

.sidebar-nav { padding: 14px 10px; display:grid; gap:6px; }
.sidebar-link {
    min-height: 48px;
    padding: 10px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#eef8fb;
    text-decoration:none;
    border-radius:10px;
    font-size:14px;
    transition: background .15s ease, transform .15s ease;
}
/* Icons are real SVG so they inherit currentColor and stay crisp.
   Previously these were unicode glyphs (♟ / ⚙), which rendered in the body
   font and ignored the navigation colour - the patients glyph in particular
   came out almost black. */
.sidebar-link .nav-icon {
    width: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-link .nav-icon svg {
    width: 21px;
    height: 21px;
    display: block;
}
.sidebar-link:hover { background:rgba(255,255,255,.09); transform:translateX(-2px); }
.sidebar-link.active { color:#ffffff; background:linear-gradient(135deg,#0e7f95,#0c687e); box-shadow:0 8px 20px rgba(25,149,173,.28); }

.sidebar-footer {
    margin-top:auto;
    padding:20px 18px 24px;
    display:grid;
    gap:5px;
    color:#7fc9d8;
    font-size:12px;
    border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-footer strong { color:#7fc9d8; font-size:18px; direction:ltr; }

.app-shell {
    min-height:100vh;
    margin-right:var(--sidebar-width);
}

.main-header {
    min-height: 76px;
    padding: 12px 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 18px rgba(12,55,70,.05);
}
.header-content {
    max-width: 1500px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.header-brand {
    display:flex;
    align-items:center;
    gap:11px;
}
.header-brand h1 { margin:0; font-size:21px; line-height:1.2; color:#0d3f4f; }
.header-brand p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.header-search {
    width:min(520px,48vw);
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 13px;
    border:1px solid #d8e7ec;
    border-radius:11px;
    background:#f5fbfd;
}
.header-search span { color:var(--shell-blue); font-size:21px; }
.header-search .search-icon {
    display: inline-flex;
    align-items: center;
    color: var( --brand-600 );
    font-size: 0;
}
.header-search .search-icon svg { width: 19px; height: 19px; display: block; }
.header-search input {
    width:100%;
    height:42px;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-family:inherit;
}

/* Global patient search: the header search now returns real results. */
.header-search { position: relative; }
.global-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 60;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #c3dae1;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(12,55,70, .18);
}
.global-search-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: #0f5165;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: right;
}
.global-search-item:hover,
.global-search-item:focus-visible {
    background: #eef8fb;
}
.global-search-item .global-search-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #eef8fb;
    color: #0e7f95;
}
.global-search-item .global-search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.global-search-item .global-search-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}
.global-search-item .global-search-text strong { font-size: 12px; }
.global-search-item .global-search-text small {
    color: #55707e;
    font-size: 12px;
    direction: ltr;
    text-align: right;
}
.global-search-empty {
    padding: 14px 10px;
    color: #55707e;
    text-align: center;
    font-size: 12px;
}

.page-container {
    max-width: 1500px;
    margin: 20px auto;
    padding: 0 22px 40px;
}
.card {
    border-color:#d8e7ec;
    border-radius:16px;
    box-shadow:0 8px 28px rgba(12,55,70,.07);
}
.details-toolbar {
    padding:10px;
    border:1px solid #e4eff2;
    border-radius:12px;
    background:#f5fbfd;
}

@media (max-width: 900px) {
    :root { --sidebar-width: 76px; }
    .sidebar-brand { justify-content:center; padding:14px 8px; }
    .sidebar-brand > div:last-child, .sidebar-footer { display:none; }
    .sidebar-link { justify-content:center; padding:10px 6px; font-size:0; gap:0; }
    .sidebar-link .nav-icon svg { width:22px; height:22px; }
    .header-brand p { display:none; }
}


/* ==========================================================
   Mobile header
   On a phone the header was a single cramped row: the search box was
   squeezed to ~140px and the placeholder was cut off. It now stacks into
   two rows - brand and account on top, full-width search below - which
   also matches the bottom navigation bar.
   ========================================================== */

@media (max-width: 700px) {
    .main-header {
        padding: 10px 12px;
        min-height: 0;
    }
    .header-content {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 8px;
    }
    /* Brand first, account control pushed to the far edge. */
    .header-brand { order: 1; }
    .header-user-control {
        order: 2;
        margin-right: auto;
        gap: 7px;
    }
    .header-user-name {
        font-size: 12px;
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-logout-button { min-height: 38px; padding: 7px 12px; }

    /* Search takes the whole second row. */
    .header-search {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        margin-top: 2px;
    }
    .header-search input {
        height: 44px;
        font-size: 16px;   /* stops iOS from zooming on focus */
    }
    .header-search .search-icon svg { width: 18px; height: 18px; }

    .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
    .header-brand h1 { font-size: 17px; }
    .header-brand { gap: 9px; }

    /* Results open right under the full-width field. */
    .global-search-results {
        top: calc(100% + 6px);
        max-height: 55vh;
    }
}
@media (max-width: 700px) {
    .app-sidebar {
        top:auto;
        left:0;
        width:100%;
        height:66px;
        flex-direction:row;
    }
    .sidebar-brand,.sidebar-footer { display:none; }
    .sidebar-nav {
        width:100%;
        padding:7px;
        display:flex;
        justify-content:space-around;
        gap:4px;
    }
    .sidebar-link { flex:1; min-height:50px; font-size:0; justify-content:center; gap:0; }
    .app-shell { margin-right:0; padding-bottom:72px; }
    .main-header { position:sticky; }
    .header-search { width:58vw; }
    .header-brand h1 { font-size:17px; }
}


/* ==========================================================
   Design D - Patients & Patient Record
   Visual redesign only; existing IDs/behavior are preserved.
   ========================================================== */
#patientsSection,
#patientDetailsSection {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
#patientsSection .section-header,
#patientDetailsSection .section-header {
    padding: 18px 20px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #d8e7ec;
    border-radius: 15px;
    box-shadow: 0 6px 22px rgba(12,55,70,.06);
}
#patientsSection .section-header h2,
#patientDetailsSection .section-header h2 {
    color: #0d3f4f;
    font-size: 25px;
}
#patientsSection .search-panel {
    padding: 15px;
    background: linear-gradient(180deg,#f5fbfd,#f5fbfd);
    border-color: #d8e7ec;
    border-radius: 14px;
}
#patientsSection .table-container {
    background: #ffffff;
    border-color: #d8e7ec;
    border-radius: 14px;
    box-shadow: 0 7px 24px rgba(12,55,70,.06);
}
#patientsSection .patient-table th {
    padding: 13px 12px;
    background: #eef8fb;
    color: #0f5165;
}
#patientsSection .patient-table td { padding: 12px; }
#patientsSection .patient-table tbody tr:hover { background: #eef8fb; }
#patientsSection .patient-table button {
    padding: 7px 11px;
    border-radius: 8px;
}
#patientDetailsSection .details-toolbar {
    margin-bottom: 12px;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(12,55,70,.05);
}
#patientDetailsSection .patient-info-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    padding: 16px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #d8e7ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(12,55,70,.06);
}
#patientDetailsSection .info-item {
    min-height: 64px;
    background: #f5fbfd;
    border-color: #e4eff2;
}
#patientDetailsSection .info-item.full-width { grid-column: span 2; }
#patientDetailsSection .summary-row {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,220px));
    gap:12px;
    margin:0 0 12px;
}
#patientDetailsSection .summary-box {
    min-width:0;
    background:linear-gradient(135deg,#eef8fb,#ffffff);
    border-color:#d8e7ec;
    box-shadow:0 5px 16px rgba(12,55,70,.05);
}
#patientDetailsSection .summary-number { color:#0e7f95; }
#patientDetailsSection .subsection-header {
    margin:0;
    padding:15px 18px 10px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-bottom:0;
    border-radius:15px 15px 0 0;
}
#patientDetailsSection .subsection-header h3 { color:#0d3f4f; }
#patientDetailsSection .studies-container {
    padding:12px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-radius:0 0 15px 15px;
    box-shadow:0 7px 24px rgba(12,55,70,.06);
}











@media(max-width:1100px){
    #patientDetailsSection .patient-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #patientDetailsSection .info-item.full-width { grid-column:1 / -1; }
}
@media(max-width:700px){
    #patientDetailsSection .patient-info-grid { grid-template-columns:1fr; padding:10px; }
    #patientDetailsSection .summary-row { grid-template-columns:1fr; }
    #patientDetailsSection .summary-box { max-width:none; }
}


/* ==========================================================
   Design D - Study Details & Study Images
   Presentation only. Existing controls and JS contracts remain intact.
   ========================================================== */
#studyDetailsSection,
#studyImagesSection {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
#studyDetailsSection .details-toolbar,
#studyImagesSection .details-toolbar {
    position: sticky;
    top: 88px;
    z-index: 20;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.96);
    border: 1px solid #d8e7ec;
    border-radius: 14px;
    box-shadow: 0 7px 24px rgba(12,55,70,.08);
    backdrop-filter: blur(8px);
}
#studyDetailsSection .section-header,
#studyImagesSection .section-header {
    padding: 17px 20px;
    margin-bottom: 12px;
    background: linear-gradient(135deg,#ffffff,#eef8fb);
    border: 1px solid #d8e7ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(12,55,70,.06);
}
#studyDetailsSection .section-header h2,
#studyImagesSection .section-header h2 {
    color: #0d3f4f;
    font-size: 24px;
}
#studyDetailsForm {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #d8e7ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(12,55,70,.06);
}
#studyDetailsForm .form-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px 20px;
}
/* Same flat treatment as the entry forms: no per-field frame. */
#studyDetailsForm .form-field {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
#studyDetailsForm .form-field.full-width { grid-column: 1 / -1; }
#studyDetailsForm .form-field label {
    color: var( --heading );
    font-weight: 600;
    font-size: var( --fs-sm );
}
#studyDetailsForm input,
#studyDetailsForm select,
#studyDetailsForm textarea {
    border-color: var( --border-strong, #c3dae1 );
    background: #ffffff;
}
#studyDetailsForm input[readonly],
#studyDetailsForm textarea[readonly],
#studyDetailsForm select:disabled,
#newStudyForm input[readonly],
#newStudyForm textarea[readonly],
#newStudyForm select:disabled {
    color: var( --muted-strong );
    background: var( --surface-soft );
    border-color: var( --border );
    opacity:1;
}
#studyDetailsTeethChart {
    padding: 14px;
    min-height: 170px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-radius:12px;
}
#studyDetailsStatus {
    margin: 12px 0 0;
    padding: 0 4px;
}
#studyImagesSection #studyDetailsImagesStatus {
    padding: 0 4px;
}
#studyImagesSection #studyDetailsImagesGrid {
    padding: 15px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-radius:15px;
    box-shadow:0 7px 24px rgba(12,55,70,.06);
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
#studyImagesSection .image-card {
    border-color:#d8e7ec;
    border-radius:12px;
    background:linear-gradient(180deg,#ffffff,#f5fbfd);
}
#studyImagesSection .image-card:hover {
    border-color:#7fc9d8;
    box-shadow:0 10px 25px rgba(12,55,70,.12);
}
#studyImagesSection .image-card img {
    height:210px;
    border-radius:9px;
    background:#0a3540;
}
#studyImagesSection .image-card-title {
    color:#0f5165;
    font-weight:700;
}
#studyDetailsEditButton { background:#eef8fb; color:#0e7f95; }
#studyDetailsImagesButton,
#studyDetailsUploadButton { background:linear-gradient(135deg,#0e7f95,#0c687e); }
#studyDetailsSaveButton { background:linear-gradient(135deg,#0e7d55,#0e7d55); }
#studyDetailsCancelButton { background:#eef4f6; color:#1f2d36; }

/* ==========================================================
   فرمِ واحدِ مراجعه: ثبتِ جدید و ویرایش در یک بخش (study-mode-new = حالتِ جدید).
   ========================================================== */
/* در حالتِ جدید هنوز مراجعه‌ای نیست: کارهایِ تصویر پنهان می‌مانند، ولی نشانگرِ
   فرمانِ صوتی (voiceStatus) سرِ جایش می‌ماند تا دیکته/صوت در حالتِ جدید هم پاسخ دهد. */
#studyDetailsSection.study-mode-new #studyReceiveImagesButton,
#studyDetailsSection.study-mode-new #visitHeaderUploadButton,
#studyDetailsSection.study-mode-new #pickupHeaderButton,
#studyDetailsSection.study-mode-new #shareStudyDetailsButton {
    display: none;
}
/* دکمه‌های «ثبت مراجعه / انصراف» فقط در حالتِ جدید دیده می‌شوند. */
#studyDetailsSection:not(.study-mode-new) #studyCreateActions {
    display: none;
}
/* اسکنِ کارتِ سابقه فقط هنگامِ ثبتِ مراجعهٔ جدید معنا دارد. */
#studyDetailsSection:not(.study-mode-new) #studyCardScanField {
    display: none;
}
/* شمای دندان‌ها موقتاً پنهان است (کارتِ #studyDetailsTeethChart در HTML هم
   display:none دارد)؛ نموداری هم که study-delete داخلِ فرم می‌سازد همین‌طور. */
#studyDetailsSection .study-teeth-panel {
    display: none;
}

@media(max-width:1100px){
    #studyDetailsForm .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px){
    #studyDetailsSection .details-toolbar,
    #studyImagesSection .details-toolbar { position:static; }
    #studyDetailsForm { padding:10px; }
    #studyDetailsForm .form-grid { grid-template-columns:1fr; }
    #studyDetailsForm .form-field.full-width { grid-column:auto; }
    #studyImagesSection #studyDetailsImagesGrid { grid-template-columns:1fr; padding:10px; }
}


/* ==========================================================
   Design D - Data Entry Forms
   Shared visual language; existing IDs and submit behavior preserved.
   ========================================================== */
#newPatientSection,#editPatientSection,#newStudySection,#editStudySection,
#uploadImageSection,#mergePatientSection {
    max-width: 1120px;
    margin-inline: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#newPatientSection .details-toolbar,#editPatientSection .details-toolbar,
#newStudySection .details-toolbar,#editStudySection .details-toolbar,
#uploadImageSection .details-toolbar,#mergePatientSection .details-toolbar {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d8e7ec;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(12,55,70,.05);
}
#newPatientSection .section-header,#editPatientSection .section-header,
#newStudySection .section-header,#editStudySection .section-header,
#uploadImageSection .section-header,#mergePatientSection .section-header {
    margin-bottom: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg,#ffffff,#eef8fb);
    border: 1px solid #d8e7ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(12,55,70,.06);
}
#newPatientSection .section-header h2,#editPatientSection .section-header h2,
#newStudySection .section-header h2,#editStudySection .section-header h2,
#uploadImageSection .section-header h2,#mergePatientSection .section-header h2 {
    color:#0d3f4f;
    font-size:24px;
}
#newPatientForm,#editPatientForm,#newStudyForm,#editStudyForm,
#uploadImageForm,#mergePatientForm {
    padding: 20px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-radius:15px;
    box-shadow:0 7px 24px rgba(12,55,70,.06);
}
#newPatientForm .form-grid,#editPatientForm .form-grid,
#newStudyForm .form-grid,#editStudyForm .form-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 20px;
}
/* Fields no longer get their own frame: the form itself is the single card.
   Removing the per-field box makes the label/control pairing easy to scan and
   gives the inputs their full width back. */
#newPatientForm .form-field,#editPatientForm .form-field,
#newStudyForm .form-field,#editStudyForm .form-field,
#uploadImageForm .form-field,#mergePatientForm .form-field {
    margin-bottom:0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
}
#newPatientForm label,#editPatientForm label,#newStudyForm label,
#editStudyForm label,#uploadImageForm label,#mergePatientForm label {
    color:var( --heading );
    font-weight:600;
    font-size:var( --fs-sm );
}
#newPatientForm input,#newPatientForm select,#newPatientForm textarea,
#editPatientForm input,#editPatientForm select,#editPatientForm textarea,
#newStudyForm input,#newStudyForm select,#newStudyForm textarea,
#editStudyForm input,#editStudyForm select,#editStudyForm textarea,
#uploadImageForm input,#uploadImageForm select,#mergePatientForm input {
    border-color:var( --border-strong, #c3dae1 );
    background:#ffffff;
}
/* The helper text sits under its control and should not compete with it. */
#newPatientForm .field-hint,#editPatientForm .field-hint,
#newStudyForm .field-hint,#editStudyForm .field-hint,
#uploadImageForm .field-hint {
    margin-top:-1px;
    color:var( --muted );
    font-size:var( --fs-xs );
}
#newPatientForm .form-actions,#editPatientForm .form-actions,
#newStudyForm .form-actions,#editStudyForm .form-actions,
#uploadImageForm .form-actions,#mergePatientForm .form-actions {
    padding-top:18px;
    margin-top:22px;
    border-top:1px solid var( --border );
}
#newPatientForm .form-actions button[type=submit],
#editPatientForm .form-actions button[type=submit],
#newStudyForm .form-actions button[type=submit],
#editStudyForm .form-actions button[type=submit],
#uploadImageForm .form-actions button[type=submit] {
    min-width:150px;
    background:linear-gradient(135deg,#0e7d55,#0e7d55);
}
#uploadImageForm {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
#uploadImageForm > .form-field:first-child { grid-column:1 / -1; }
#uploadImageForm > .status-message,
#uploadImageForm > .form-actions,
#cameraPreviewPanel { grid-column:1 / -1; }
#cameraPreviewPanel {
    padding:14px;
    text-align:center;
    background:#f5fbfd;
    border:1px dashed #7fc9d8;
    border-radius:12px;
}
#cameraPreviewImage {
    max-width:100%;
    max-height:420px;
    object-fit:contain;
    border-radius:10px;
    background:#0a3540;
}
#mergePatientSection .warning-box {
    margin-bottom:12px;
    border-color:#e8cf9a;
    border-radius:13px;
    box-shadow:0 5px 16px rgba(160,100,0,.06);
}
#mergePatientForm { max-width:720px; }
#mergePatientForm .warning-button { background:linear-gradient(135deg,#c47f00,#a06400); }

@media(max-width:700px){
    #newPatientForm,#editPatientForm,#newStudyForm,#editStudyForm,
    #uploadImageForm,#mergePatientForm { padding:12px; }
    #newPatientForm .form-grid,#editPatientForm .form-grid,
    #newStudyForm .form-grid,#editStudyForm .form-grid,
    #uploadImageForm { grid-template-columns:1fr; gap:16px; }
    #uploadImageForm > .form-field:first-child,
    #uploadImageForm > .status-message,#uploadImageForm > .form-actions,
    #cameraPreviewPanel { grid-column:auto; }
}


/* ==========================================================
   Design D - Administration, Tables & Dialogs
   Global consistency pass without changing application behavior.
   ========================================================== */

/* Administration sections are created dynamically by the admin scripts,
   so target their stable admin class/id naming patterns. */
[id$="AdminSection"], [class*="admin-section"] {
    border-color:#d8e7ec !important;
    border-radius:15px !important;
    box-shadow:0 7px 24px rgba(12,55,70,.06) !important;
}
[id$="AdminSection"] h2, [id$="AdminSection"] h3,
[class*="admin-section"] h2, [class*="admin-section"] h3 {
    color:#0d3f4f;
}
[id$="AdminSection"] table, [class*="admin-section"] table {
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
}
[id$="AdminSection"] th, [class*="admin-section"] th {
    padding:12px 10px;
    background:#eef8fb;
    color:#0f5165;
    text-align:right;
    border-bottom:1px solid #d8e7ec;
}
[id$="AdminSection"] td, [class*="admin-section"] td {
    padding:11px 10px;
    border-bottom:1px solid #eef4f6;
}
[id$="AdminSection"] tbody tr:hover,
[class*="admin-section"] tbody tr:hover { background:#eef8fb; }

/* Unified table language for tables injected by administration scripts. */
table {
    border-spacing:0;
}
table button {
    border-radius:8px;
}

/* Inputs created dynamically by admin modules inherit the Design D language. */
.card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.card select,
.card textarea {
    border-color:#c3dae1;
}
.card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.card select:focus,.card textarea:focus {
    border-color:#0e7f95;
    box-shadow:0 0 0 3px rgba(12,55,70,.10);
}

/* Dialogs */
.confirm-overlay { backdrop-filter:blur(3px); }
.confirm-dialog {
    border:1px solid #d8e7ec;
    border-radius:18px;
    box-shadow:0 28px 80px rgba(10,53,64,.28);
}
.confirm-dialog h3 { color:#0d3f4f; }
.confirm-actions button { min-width:105px; }

/* Toasts */
.toast {
    border-radius:12px;
    border-color:#d8e7ec;
    box-shadow:0 14px 40px rgba(10,53,64,.16);
}

/* Calendar: the picker styles live with the picker markup further up, so these
   earlier Design D overrides are kept minimal and non-conflicting. */
.jalali-picker-grid button:hover:not(:disabled) {
    background: var( --brand-100 );
    color: var( --brand-700 );
}

/* Image viewer follows the navy Design D shell. */
.image-modal { background:rgba(12,55,70,.92); }
.image-viewer-toolbar {
    background:linear-gradient(180deg,#0f5165,#0a3540);
    border-color:rgba(255,255,255,.18);
    border-radius:13px;
}
.image-viewer-toolbar button {
    background:#0c687e;
    border-radius:8px;
}
.modal-close-button {
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* Small global refinements */
.status-message.error {
    padding:8px 11px;
    background:#fdecea;
    border:1px solid #f7d2ce;
    border-radius:9px;
}
.warning-box { line-height:1.9; }
.status-badge.active { background:#e8f8f0; color:#0e7d55; }
.status-badge.inactive { background:#fdecea; color:#b42318; }

@media(max-width:700px){
    [id$="AdminSection"] .table-container,
    [class*="admin-section"] .table-container { overflow-x:auto; }
    .confirm-dialog { padding:18px; }
}


/* ==========================================================
   Design D - Patients as a Form-style Workspace
   Keep the existing patient table/behavior, but align its layout
   with ReSiRai's data-entry forms.
   ========================================================== */
#patientsSection {
    max-width:1120px;
    margin-inline:auto;
}
#patientsSection .section-header {
    margin-bottom:12px;
    padding:18px 20px;
    background:linear-gradient(135deg,#ffffff,#eef8fb);
}
#patientsSection .search-panel {
    padding:20px;
    margin-bottom:12px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-radius:15px;
    box-shadow:0 7px 24px rgba(12,55,70,.06);
}
#patientsSection .search-container {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:10px;
    align-items:center;
}
#patientsSection #patientSearch {
    min-height:44px;
    padding:10px 13px;
    background:#f5fbfd;
    border-color:#c3dae1;
    border-radius:10px;
}
#patientsSection .checkbox-row {
    margin-top:13px;
    padding:8px 11px;
    background:#f5fbfd;
    border:1px solid #e4eff2;
    border-radius:9px;
}
#patientsSection #statusMessage {
    margin:0 0 10px;
    padding:0 4px;
}
#patientsSection .table-container {
    padding:12px;
    border-radius:15px;
}
#patientsSection .patient-table {
    overflow:hidden;
    border:1px solid #e4eff2;
    border-radius:11px;
}
#patientsSection .patient-table th:first-child { border-radius:0 9px 0 0; }
#patientsSection .patient-table th:last-child { border-radius:9px 0 0 0; }

@media(max-width:700px){
    #patientsSection .search-panel { padding:10px; }
    #patientsSection .search-container { display:grid; grid-template-columns:1fr; }
    #patientsSection .search-container input,
    #patientsSection .search-container button { width:100%; margin:0; }
    #patientsSection .table-container { padding:6px; }
}


/* Patient photo + inline patient-record layout */
.patient-profile-panel {
    display:flex; align-items:center; gap:16px; margin-bottom:12px; padding:14px 16px;
    background:linear-gradient(135deg,#ffffff,#eef8fb); border:1px solid #d8e7ec;
    border-radius:15px; box-shadow:0 7px 24px rgba(12,55,70,.06);
}
.patient-photo-frame {
    width:104px; height:104px; flex:0 0 104px; overflow:hidden; display:grid; place-items:center;
    background:#eef8fb; border:3px solid #ffffff; border-radius:50%;
    box-shadow:0 5px 18px rgba(12,55,70,.14);
}
#patientProfilePhoto { width:100%; height:100%; object-fit:cover; }
#patientProfilePhoto.empty:not([src])::after { content:"👤"; font-size:42px; }
.patient-profile-panel p { margin:3px 0 9px; color:var(--muted); font-size:12px; }
.patient-profile-panel strong { color:#0d3f4f; font-size:16px; }

@media(max-width:700px){
    .patient-profile-panel { align-items:flex-start; }
    .patient-photo-frame { width:82px; height:82px; flex-basis:82px; }
}


/* Patient list statistics + same-page master/detail */
.patient-statistics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}
.patient-statistics > div {
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:linear-gradient(135deg,#ffffff,#eef8fb);
    border:1px solid #d8e7ec;
    border-radius:13px;
    box-shadow:0 5px 18px rgba(12,55,70,.05);
}
.patient-statistics strong { color:#0e7f95; font-size:24px; }
.patient-statistics span { color:#55707e; font-size:12px; }
.patient-list-row { cursor:pointer; transition:background .15s ease,box-shadow .15s ease; }
.patient-list-row.selected {
    background:#eef8fb !important;
    box-shadow:inset -4px 0 #0e7f95;
}
#patientsSection + #patientDetailsSection:not(.hidden) {
    max-width:1120px;
    margin:14px auto 0;
}
#patientsSection + #patientDetailsSection:not(.hidden) #backToPatientsButton {
    display:none;
}
@media(max-width:700px){
    .patient-statistics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* ==========================================================
   Patient workspace - one form, one Design D visual language
   The list, statistics, selected patient and Studies read as
   consecutive parts of the same form rather than separate screens.
   ========================================================== */
#patientsSection,
#patientsSection + #patientDetailsSection:not(.hidden) {
    width:min(1120px,calc(100% - 32px));
    max-width:1120px;
    margin-inline:auto;
    font-family:inherit;
}
#patientsSection {
    padding:18px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-radius:16px 16px 0 0;
    box-shadow:0 7px 24px rgba(12,55,70,.06);
}
#patientsSection + #patientDetailsSection:not(.hidden) {
    margin-top:0;
    padding:18px;
    background:#ffffff;
    border:1px solid #d8e7ec;
    border-top:1px dashed #b9e2ea;
    border-radius:0 0 16px 16px;
    box-shadow:0 12px 28px rgba(12,55,70,.07);
}
#patientsSection .section-header,
#patientsSection .search-panel,
#patientsSection .table-container,
#patientsSection + #patientDetailsSection .details-toolbar,
#patientsSection + #patientDetailsSection .section-header,
#patientsSection + #patientDetailsSection .patient-profile-panel,
#patientsSection + #patientDetailsSection .patient-info-grid,
#patientsSection + #patientDetailsSection .studies-container {
    box-shadow:none;
}
#patientsSection .section-header,
#patientsSection + #patientDetailsSection .section-header {
    border-radius:12px;
}
#patientsSection .patient-statistics {
    margin:12px 0;
}
#patientsSection .patient-statistics > div,
#patientsSection .search-panel,
#patientsSection .table-container,
#patientsSection + #patientDetailsSection .patient-profile-panel,
#patientsSection + #patientDetailsSection .patient-info-grid,
#patientsSection + #patientDetailsSection .summary-box,
#patientsSection + #patientDetailsSection .studies-container {
    background:#f5fbfd;
    border-color:#d8e7ec;
}
#patientsSection + #patientDetailsSection .subsection-header {
    margin-top:14px;
    background:#eef8fb;
    border-color:#d8e7ec;
}
#patientsSection button,
#patientsSection input,
#patientsSection select,
#patientsSection + #patientDetailsSection button,
#patientsSection + #patientDetailsSection input,
#patientsSection + #patientDetailsSection select,
#patientsSection + #patientDetailsSection textarea {
    font-family:inherit;
}
#patientsSection .patient-table,
#patientsSection .patient-table th,
#patientsSection .patient-table td,
#patientsSection + #patientDetailsSection .info-item {
    font-family:inherit;
}
#patientsSection + #patientDetailsSection .details-toolbar {
    position:static;
    padding:0 0 12px;
    border:0;
    background:transparent;
}
#patientsSection + #patientDetailsSection .patient-profile-panel {
    margin-top:0;
}
@media(max-width:700px){
    #patientsSection,
    #patientsSection + #patientDetailsSection:not(.hidden) {
        width:calc(100% - 16px);
        padding:10px;
    }
}


/* ==========================================================
   Design D compact density - Patient workspace
   Match the compact reference: smaller type, controls, cards and rows.
   ========================================================== */
#patientsSection,
#patientsSection + #patientDetailsSection:not(.hidden) {
    font-size:12px;
}
#patientsSection { padding:12px 14px; }
#patientsSection + #patientDetailsSection:not(.hidden) { padding:12px 14px 15px; }

#patientsSection .section-header,
#patientsSection + #patientDetailsSection .section-header {
    min-height:auto;
    padding:10px 13px;
    margin-bottom:8px;
}
#patientsSection .section-header h2,
#patientsSection + #patientDetailsSection .section-header h2 {
    font-size:18px;
}
#patientsSection .section-header p,
#patientsSection + #patientDetailsSection .section-header p {
    font-size: 12px;
    margin-top:2px;
}
#patientsSection button,
#patientsSection + #patientDetailsSection button {
    min-height:32px;
    padding:6px 10px;
    font-size:12px;
    border-radius:7px;
}
#patientsSection .patient-statistics {
    gap:7px;
    margin:8px 0;
}
#patientsSection .patient-statistics > div {
    min-height:48px;
    padding:7px 10px;
    border-radius:9px;
}
#patientsSection .patient-statistics strong { font-size:18px; }
#patientsSection .patient-statistics span { font-size: 12px; }

#patientsSection .search-panel { padding:9px 10px; margin-bottom:8px; }
#patientsSection #patientSearch { min-height:34px; height:34px; padding:6px 9px; font-size:12px; }
#patientsSection .checkbox-row { margin-top:7px; padding:4px 8px; font-size: 12px; }

#patientsSection .table-container { padding:6px; }
#patientsSection .patient-table th {
    padding:7px 8px;
    font-size: 12px;
}
#patientsSection .patient-table td {
    padding:6px 8px;
    font-size:12px;
}
#patientsSection .patient-table button { min-height:27px; padding:4px 8px; font-size: 12px; }

#patientsSection + #patientDetailsSection .details-toolbar {
    gap:6px;
    padding-bottom:8px;
    margin-bottom:8px;
}
#patientsSection + #patientDetailsSection .patient-profile-panel {
    gap:10px;
    padding:8px 10px;
    margin-bottom:8px;
    border-radius:10px;
}
#patientsSection + #patientDetailsSection .patient-photo-frame {
    width:66px;
    height:66px;
    flex-basis:66px;
}
#patientsSection + #patientDetailsSection .patient-profile-panel strong { font-size:12px; }
#patientsSection + #patientDetailsSection .patient-profile-panel p { margin:1px 0 5px; font-size: 12px; }

#patientsSection + #patientDetailsSection .patient-info-grid {
    gap:6px;
    padding:8px;
    margin-bottom:8px;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-radius:10px;
}
#patientsSection + #patientDetailsSection .info-item {
    min-height:42px;
    padding:7px 8px;
    border-radius:8px;
    font-size:12px;
}
#patientsSection + #patientDetailsSection .info-label { font-size: 12px; }

#patientsSection + #patientDetailsSection .summary-row {
    gap:7px;
    margin-bottom:8px;
    grid-template-columns:repeat(2,minmax(0,150px));
}
#patientsSection + #patientDetailsSection .summary-box {
    padding:8px 10px;
    min-height:45px;
    border-radius:9px;
}
#patientsSection + #patientDetailsSection .summary-number { font-size:18px; }

#patientsSection + #patientDetailsSection .subsection-header {
    margin-top:8px;
    padding:8px 11px 6px;
}
#patientsSection + #patientDetailsSection .subsection-header h3 { font-size:14px; }
#patientsSection + #patientDetailsSection .studies-container { padding:7px; }









@media(max-width:900px){
    #patientsSection + #patientDetailsSection .patient-info-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:700px){
    #patientsSection + #patientDetailsSection .patient-info-grid { grid-template-columns:1fr; }
    #patientsSection + #patientDetailsSection .patient-photo-frame {
        width:58px;height:58px;flex-basis:58px;
    }
}


/* ==========================================================
   Design D — Patient list with row photo and clinical summary
   ========================================================== */

#patientsSection .table-container {
    overflow-x: auto;
    background: #ffffff;
}

#patientsSection .patient-table {
    min-width: 1080px;
}

#patientsSection .patient-table th {
    padding: 10px 9px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

#patientsSection .patient-table td {
    padding: 8px 9px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

#patientsSection .patient-table th:first-child,
#patientsSection .patient-table td:first-child {
    min-width: 190px;
    text-align: right;
}

.patient-identity-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.patient-row-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #eef8fb;
    box-shadow: 0 2px 9px rgba(12,55,70, .18);
}

.patient-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.patient-row-avatar-empty {
    color: #0e7f95;
    font-size: 21px;
}

.patient-row-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.55;
}

.patient-row-name strong {
    color: #0d3f4f;
    font-size: 13px;
}

.patient-row-name small {
    color: #0e7f95;
    direction: ltr;
    font-size: 12px;
}

#patientsSection .patient-open-button {
    min-width: 92px;
    background: #eef8fb;
    color: #0e7f95;
    border: 1px solid #b9e2ea;
    font-weight: 700;
}

#patientsSection .patient-list-row.selected td {
    background: #eef8fb;
}







@media (max-width: 900px) {
    #patientsSection .patient-table { min-width: 980px; }
    .patient-row-avatar { width: 40px; height: 40px; flex-basis: 40px; }
}

/* Design D workspace: use the available canvas and keep patient/study work together. */
.page-container,
#patientsSection,
#patientsSection + #patientDetailsSection:not(.hidden),
#patientDetailsSection {
    width: 100%;
    max-width: none;
}

.header-content { max-width: none; }
.page-container { padding-inline: 18px; }

.patient-row-actions {
    display: flex;
    direction: rtl;
    justify-content: center;
    gap: 6px;
    min-width: 142px;
}

#patientsSection .patient-row-actions button {
    min-width: 62px;
    padding: 7px 10px;
    font-size: 12px;
}

#patientsSection .patient-delete-button:disabled {
    cursor: not-allowed;
    opacity: .38;
    filter: grayscale(.75);
}

.study-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.study-tabs-actions,
.study-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.study-tabs-actions button:disabled { opacity: .45; cursor: not-allowed; }

.study-tabs {
    padding: 8px 8px 0;
    border-bottom: 1px solid #c3dae1;
}

.study-tab {
    margin-bottom: -1px;
    padding: 9px 14px;
    border: 1px solid #c3dae1;
    border-bottom-color: #c3dae1;
    border-radius: 9px 9px 0 0;
    background: #f5fbfd;
    color: #0f5165;
}

.study-tab.active {
    border-color: #7fc9d8;
    border-bottom-color: #ffffff;
    background: #ffffff;
    color: #0e7f95;
    font-weight: 800;
}

.study-tab-panel { padding: 14px 10px 10px; }

.study-tab-details {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.study-tab-details .info-line {
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid #d8e7ec;
    border-radius: 9px;
    background: #f5fbfd;
}

@media (max-width: 1000px) {
    .study-tab-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .page-container { padding-inline: 8px; }
    .study-tab-details { grid-template-columns: 1fr; }
}

/* Design D patient summary: identity, recent studies, and selected odontogram. */
.patient-overview-grid {
    display: grid;
    grid-template-columns: minmax(285px, 30%) minmax(390px, 43%) minmax(300px, 27%);
    grid-template-areas: "identity studies chart";
    gap: 12px;
    direction: ltr;
    margin-bottom: 12px;
}

.patient-overview-column {
    min-width: 0;
    padding: 10px;
    border: 1px solid #d8e7ec;
    border-radius: 12px;
    background: #ffffff;
    direction: rtl;
}

.patient-overview-identity { grid-area: identity; }
.patient-overview-studies { grid-area: studies; }

#patientDetailsSection .patient-overview-identity .section-header {
    padding: 4px 5px 8px;
    margin: 0;
    border: 0;
    background: transparent;
}

#patientDetailsSection .patient-overview-identity .patient-profile-panel {
    margin: 0 0 8px;
    padding: 7px;
    border: 0;
    background: transparent;
}

#patientDetailsSection .patient-overview-identity .patient-photo-frame {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
}

#patientDetailsSection .patient-overview-identity .patient-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

#patientDetailsSection .patient-overview-identity .info-item {
    min-height: 34px;
    padding: 5px 7px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
}

#patientDetailsSection .patient-overview-studies .summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

#patientDetailsSection .patient-overview-studies .summary-box {
    min-width: 0;
    min-height: 64px;
    padding: 8px 10px;
    color: #ffffff;
    border: 0;
    box-shadow: 0 5px 14px rgba(12,55,70, .14);
}

#patientDetailsSection .patient-overview-studies .summary-number,
#patientDetailsSection .patient-overview-studies .summary-label { color: inherit; }
#patientDetailsSection .patient-overview-studies .summary-study { background: linear-gradient(135deg, #0e7f95, #2fa8bf); }
#patientDetailsSection .patient-overview-studies .summary-image { background: linear-gradient(135deg, #0e7d55, #12a06c); }
#patientDetailsSection .patient-overview-studies .summary-last { background: linear-gradient(135deg, #c47f00, #e2a01c); }
#patientDetailsSection .patient-overview-studies .summary-last .summary-number { font-size: 14px; white-space: nowrap; }

.recent-studies-card {
    padding: 9px;
    border: 1px solid #d8e7ec;
    border-radius: 10px;
    background: #f5fbfd;
}

.recent-studies-heading,
.overview-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: #0d3f4f;
}

.recent-studies-heading span,
.overview-chart-heading span { color: #55707e; font-size: 12px; }
.recent-studies-list { display: grid; gap: 5px; }

.recent-study-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 5px;
    color: #0f5165;
    border: 1px solid #e4eff2;
    background: #ffffff;
    text-align: right;
}

.recent-study-thumb {
    width: 58px;
    height: 39px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: #0a3540;
}

.recent-study-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-study-text { display: grid; gap: 1px; }
.recent-study-text strong { font-size: 12px; }
.recent-study-text small { color: #55707e; font-size: 12px; }

.patient-summary-teeth-chart {
    min-height: 215px;
    pointer-events: none;
    overflow: hidden;
}

.patient-summary-teeth-chart .teeth-chart-body { font-size: 12px; }

@media (max-width: 1250px) {
    .patient-overview-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.45fr);
        grid-template-areas: "identity studies" "chart chart";
    }
}

@media (max-width: 820px) {
    .patient-overview-grid { grid-template-columns: 1fr; grid-template-areas: "identity" "studies"; }
}

@media (max-width: 520px) {
    #patientDetailsSection .patient-overview-studies .summary-row { grid-template-columns: 1fr; }
    #patientDetailsSection .patient-overview-identity .patient-info-grid { grid-template-columns: 1fr; }
}

/* Patient overview polish. The adjacent-ID prefix deliberately wins over the
   older compact workspace rules while this screen is being migrated. */
#patientsSection + #patientDetailsSection .patient-overview-grid {
    gap: 14px;
    align-items: stretch;
}

#patientsSection + #patientDetailsSection .patient-overview-column {
    padding: 14px;
    border-color: #c3dae1;
    border-radius: 14px;
    background: linear-gradient(155deg, #ffffff 0%, #f5fbfd 100%);
    box-shadow: 0 8px 24px rgba(12,55,70, .07);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 12px;
    margin-bottom: 0;
    border-bottom: 1px solid #e4eff2;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .section-header h2 {
    margin: 0 0 3px;
    color: #0d3f4f;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 850;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-identity-line {
    color: #55707e;
    font-size: 12px;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .status-badge {
    flex: 0 0 auto;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-profile-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 10px 0;
    padding: 11px;
    border: 1px solid #d8e7ec;
    border-radius: 12px;
    background: #f6fafb;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-photo-frame {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #d9eff4;
    box-shadow: 0 4px 14px rgba(12,55,70, .14);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-profile-panel strong {
    display: block;
    margin-bottom: 7px;
    color: #0f5165;
    font-size: 13px;
    font-weight: 800;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-profile-panel p {
    display: none;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-profile-panel button {
    min-height: 31px;
    padding-inline: 12px;
    color: #ffffff;
    background: #0c687e;
    box-shadow: 0 4px 10px rgba(12,55,70, .18);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item {
    display: grid;
    align-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid #d8e7ec;
    border-radius: 9px;
    background: #ffffff;
    color: #0d3f4f;
    font-size: 12px;
    line-height: 1.6;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-label {
    margin: 0;
    color: #55707e;
    font-size: 12px;
    font-weight: 700;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item.full-width {
    grid-column: 1 / -1;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-detail-hidden {
    display: none;
}

#patientsSection + #patientDetailsSection .patient-overview-studies {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-box {
    position: relative;
    display: grid;
    place-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 78px;
    padding: 10px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    color: #ffffff !important;
    text-align: center;
    box-shadow: 0 7px 18px rgba(12,55,70, .16);
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-box::after {
    content: "";
    position: absolute;
    inset: auto -18px -27px auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-box.summary-study {
    background: linear-gradient(135deg, #0e7f95, #2fa8bf) !important;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-box.summary-image {
    background: linear-gradient(135deg, #0e7d55, #12a06c) !important;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-box.summary-last {
    background: linear-gradient(135deg, #c47f00, #e2a01c) !important;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-number,
#patientsSection + #patientDetailsSection .patient-overview-studies .summary-label {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-number {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 900;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-last .summary-number {
    font-size: 13px;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .summary-label {
    font-size: 12px;
    font-weight: 700;
    opacity: .94;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .recent-studies-card {
    flex: 1;
    padding: 11px;
    border: 1px solid #d8e7ec;
    border-radius: 12px;
    background: #f5fbfd;
}

#patientsSection + #patientDetailsSection .recent-studies-heading {
    margin-bottom: 9px;
    padding: 0 2px 7px;
    border-bottom: 1px solid #e4eff2;
}

#patientsSection + #patientDetailsSection .recent-studies-heading strong {
    color: #0f5165;
    font-size: 13px;
    font-weight: 850;
}

#patientsSection + #patientDetailsSection .recent-studies-heading span {
    color: #55707e;
    font-size: 12px;
}

#patientsSection + #patientDetailsSection .recent-studies-list {
    gap: 7px;
}

#patientsSection + #patientDetailsSection .recent-study-row {
    min-height: 57px;
    gap: 11px;
    padding: 6px;
    border-color: #d8e7ec;
    border-radius: 9px;
    background: #ffffff;
    color: #0d3f4f;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#patientsSection + #patientDetailsSection .recent-study-row:hover {
    border-color: #7fc9d8;
    box-shadow: 0 5px 13px rgba(12,55,70, .09);
    transform: translateY(-1px);
}

#patientsSection + #patientDetailsSection .recent-study-thumb {
    width: 72px;
    height: 45px;
    flex-basis: 72px;
    border-radius: 7px;
    background: #0f5165;
}

#patientsSection + #patientDetailsSection .recent-study-text {
    gap: 3px;
}

#patientsSection + #patientDetailsSection .recent-study-text strong {
    color: #0f5165;
    font-size: 12px;
    font-weight: 800;
}

#patientsSection + #patientDetailsSection .recent-study-text small {
    color: #55707e;
    font-size: 12px;
}

@media (max-width: 820px) {
    #patientsSection + #patientDetailsSection .patient-overview-column { padding: 12px; }
}

@media (max-width: 520px) {
    #patientsSection + #patientDetailsSection .patient-overview-studies .summary-row { grid-template-columns: 1fr; }
    #patientsSection + #patientDetailsSection .patient-overview-identity .patient-info-grid { grid-template-columns: 1fr; }
    #patientsSection + #patientDetailsSection .patient-overview-identity .info-item.full-width { grid-column: auto; }
}

/* Studies belong to the patient, but each teeth chart belongs to one Study.
   The overview therefore has two columns and Studies flow vertically below it. */
#patientsSection + #patientDetailsSection .patient-overview-grid {
    grid-template-columns: minmax(320px, 38%) minmax(480px, 62%);
    grid-template-areas: "identity studies";
    align-items: start;
}

#patientsSection + #patientDetailsSection .patient-overview-identity {
    display: grid;
    gap: 10px;
    align-self: start;
    padding: 12px;
}

#patientsSection + #patientDetailsSection .patient-identity-hero {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    grid-template-areas: "photo identity action";
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid #c3dae1;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef8fb 0%, #eef8fb 52%, #e8f8f0 100%);
}

/* بنر ایمنی گروه خونی: بلافاصله زیر هویت بیمار؛ رنگ قرمزِ آرام، نه فریادی. */
#patientsSection + #patientDetailsSection .patient-safety-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #e7c3c8;
    border-radius: 12px;
    background: #fdf1f2;
}
#patientsSection + #patientDetailsSection .patient-safety-banner.hidden { display: none; }
#patientsSection + #patientDetailsSection .patient-safety-banner .patient-safety-icon { font-size: 22px; line-height: 1; }
#patientsSection + #patientDetailsSection .patient-safety-banner strong { display: block; color: #8d2d38; font-size: 16px; }
#patientsSection + #patientDetailsSection .patient-safety-banner small { display: block; color: #96555e; font-size: 12px; margin-top: 2px; }
#patientsSection + #patientDetailsSection .patient-safety-banner.unknown { border-color: #d9d3c3; background: #faf6e9; }
#patientsSection + #patientDetailsSection .patient-safety-banner.unknown strong { color: #8a7330; }
#patientsSection + #patientDetailsSection .patient-safety-banner.unknown small { color: #968450; }

#patientsSection + #patientDetailsSection .patient-identity-hero .patient-photo-frame {
    grid-area: photo;
    width: 126px;
    height: 126px;
    flex-basis: 126px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #d9eff4;
    box-shadow: 0 9px 24px rgba(12,55,70, .24);
}

#patientsSection + #patientDetailsSection .patient-identity-copy {
    grid-area: identity;
    min-width: 0;
}

#patientsSection + #patientDetailsSection .patient-identity-copy h2 {
    margin: 0 0 2px;
    overflow: hidden;
    color: #0d3f4f;
    font-size: 24px;
    line-height: 1.55;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#patientsSection + #patientDetailsSection .patient-identity-copy .patient-identity-line {
    margin: 0 0 7px;
    color: #55707e;
    font-size: 12px;
}

#patientsSection + #patientDetailsSection .patient-identity-copy .status-badge {
    display: inline-flex;
    width: fit-content;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
}

#patientsSection + #patientDetailsSection .patient-photo-action {
    grid-area: action;
    align-self: end;
}

#patientsSection + #patientDetailsSection .patient-photo-action p {
    display: none;
}

#patientsSection + #patientDetailsSection .patient-photo-action button {
    min-height: 31px;
    padding: 6px 11px;
    color: #ffffff;
    border: 0;
    background: linear-gradient(135deg, #0c687e, #2fa8bf);
    box-shadow: 0 4px 11px rgba(12,55,70, .2);
    font-size: 12px;
    font-weight: 750;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .patient-info-grid {
    grid-template-columns: 1fr;
    gap: 3px;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 39px;
    padding: 5px 11px;
    border-color: transparent;
    color: #0d3f4f;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
    box-shadow: inset 0 0 0 1px rgba(12,55,70, .16);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item.full-width {
    grid-column: auto;
}

/* سنِ محاسبه‌شده، هم‌رنگِ مقدار و کنارِ تاریخِ تولد؛ نه فریاد، فقط در دسترس. */
#patientsSection + #patientDetailsSection .patient-overview-identity .info-age {
    color: #55707e;
    font-size: 11px;
    font-weight: 700;
}
#patientsSection + #patientDetailsSection .patient-overview-identity .info-age:empty { display: none; }

#patientsSection + #patientDetailsSection .patient-overview-identity .info-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 12px;
    font-weight: 900;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

/* آدرس و توضیحات: جعبه به‌اندازهٔ لازم باز می‌شود — نه ارتفاعِ ثابتِ غول‌آسا.
   متن کوتاه مثل بقیهٔ ردیف‌ها یک‌خطی می‌ماند؛ متن بلند فقط تا جایی رشد می‌کند
   که واقعاً لازم است. */
#patientsSection + #patientDetailsSection .patient-overview-identity .info-item.full-width {
    align-items: flex-start;
    /* جعبهٔ خالی/کوتاه هم‌قدِ بقیهٔ ردیف‌ها بماند (padding عمودی نصف شود چون
       flex خودش فاصلهٔ عمودی اضافه نمیدهد). */
    padding-block: 3px;
}
#patientsSection + #patientDetailsSection .patient-overview-identity .info-item.full-width .info-label {
    padding-top: 2px;
}

/* فرمهای بیمار (ثبت/ویرایش): جعبهٔ آدرس و توضیحات به‌اندازهٔ متنِ داخلش باز
   می‌شود — خالی = یک خط، پر = چند خط. مرورگرهای بدونِ field-sizing مقدار rows
   را به‌عنوانِ سقفِ پیش‌فرض نگه می‌دارند. */
textarea {
    field-sizing: content;
    min-height: 2.6em;
    max-height: 22em;
    resize: vertical;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(4) {
    background: linear-gradient(90deg, #eef8fb, #eef8fb);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(4) .info-label {
    color: #0e7f95;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(5) {
    background: linear-gradient(90deg, #e8f8f0, #e8f8f0);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(5) .info-label {
    color: #0e7d55;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(6) {
    background: linear-gradient(90deg, #ffefd1, #fff6e6);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(6) .info-label {
    color: #a06400;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(7) {
    background: linear-gradient(90deg, #d9eff4, #eef8fb);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(7) .info-label {
    color: #0e7f95;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(9) {
    background: linear-gradient(90deg, #fdecea, #fdecea);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(9) .info-label {
    color: #b42318;
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(10) {
    background: linear-gradient(90deg, #d9eff4, #f5fbfd);
}

#patientsSection + #patientDetailsSection .patient-overview-identity .info-item:nth-child(10) .info-label {
    color: #0e7f95;
}

#patientsSection + #patientDetailsSection .patient-overview-studies {
    align-self: start;
}

#patientsSection + #patientDetailsSection .patient-overview-studies .recent-studies-card {
    flex: 0 0 auto;
    min-height: 0;
}

#patientsSection + #patientDetailsSection .study-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 11px 14px;
}

#patientsSection + #patientDetailsSection .study-list-header p {
    margin: 3px 0 0;
    color: #55707e;
    font-size: 12px;
}

#patientsSection + #patientDetailsSection .studies-container {
    display: grid;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.study-scroll-card {
    scroll-margin-top: 18px;
    overflow: hidden;
    border: 1px solid #c3dae1;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(12,55,70, .07);
}

.study-scroll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #d8e7ec;
    background: linear-gradient(135deg, #eef8fb, #f5fbfd);
}

.study-scroll-header h4 {
    margin: 0 0 3px;
    color: #0f5165;
    font-size: 15px;
    font-weight: 850;
}

.study-scroll-header time {
    color: #55707e;
    font-size: 12px;
}

.study-scroll-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    position: relative;
}

/* منوی «تصویر ▾»: در همان ردیف اکشن و در خط بعدی باز می‌شود — نه مطلق‌الموقعیت،
   چون کارتِ مراجعه overflow:hidden دارد و منوی مطلق داخلش کلیپ می‌شد. */
.study-image-menu-box {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px dashed var(--border);
}

.study-image-menu-box.hidden { display: none; }

.study-image-menu-item {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    font: inherit;
    font-size: 12.5px;
    color: var(--muted-strong);
    cursor: pointer;
}

.study-image-menu-item:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-200); }

/* ردیف چهار کار تصویر، بالای لیست تصاویر در کارتِ بازشده */
.study-card-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 2px;
}

.study-card-image-actions button.is-out { margin-inline-start: auto; }

.study-scroll-body {
    display: grid;
    grid-template-columns: minmax(260px, 35%) minmax(430px, 65%);
    gap: 12px;
    padding: 12px;
}

.study-scroll-details {
    display: grid;
    gap: 7px;
    align-content: start;
}

.study-scroll-details .info-line {
    min-height: 55px;
    padding: 9px 11px;
    border: 1px solid #d8e7ec;
    border-radius: 9px;
    background: #f5fbfd;
    color: #0f5165;
}

.study-scroll-chart {
    min-width: 0;
    padding: 10px;
    border: 1px solid #d8e7ec;
    border-radius: 10px;
    background: #f5fbfd;
}

.study-scroll-chart > strong {
    display: block;
    margin-bottom: 7px;
    color: #0f5165;
    font-size: 12px;
}

/* A Study card shows the chart for reference: the view buttons stay usable so the
   teeth can be looked at in any of the views, but the teeth themselves are not
   clickable and the "selected" list is pointless here.
   Hiding the whole toolbar was wrong - it left the card stuck on one view. */
.study-card-teeth-chart {
    min-height: 245px;
    overflow: hidden;
}

.study-card-teeth-chart .teeth-chart-toolbar { pointer-events: auto; }
.study-card-teeth-chart .teeth-chart-body,
.study-card-teeth-chart .teeth-integrated-arch,
.study-card-teeth-chart .teeth-integrated-natural,
.study-card-teeth-chart .teeth-chart-selected { pointer-events: none; }

/* The natural jaw is turned by dragging, so it must keep receiving pointer events
   even inside a read-only Study card. */
.study-card-teeth-chart .teeth-integrated-natural { pointer-events: auto; }

.study-card-teeth-chart .teeth-chart-selected { display: none; }
.study-card-teeth-chart .teeth-chart-toolbar strong { font-size: 13px; }

/* نمودار در کارتِ مراجعه: بستهٔ پیش‌فرض (حدود ۲۸۵px جا می‌گیرد). سطرِ سربرگ هم
   دکمهٔ باز/بسته است و خلاصهٔ دندان‌ها را نشان می‌دهد تا هنگام بستن چیزی از دست نرود. */
.study-chart-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #0f5165;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}
.study-chart-toggle:focus-visible { outline: 2px solid #0c7c9c; outline-offset: 3px; border-radius: 6px; }
.study-chart-arrow { flex: 0 0 auto; color: #0c7c9c; font-size: 16px; line-height: 1; }
.study-chart-toggle strong { display: block; color: #0f5165; font-size: 12px; font-weight: 800; }
.study-chart-teeth {
    min-width: 0;
    margin-inline-start: auto;
    overflow: hidden;
    color: #4a6b78;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.study-scroll-chart:not(.is-collapsed) .study-chart-toggle { margin-bottom: 7px; }
.study-scroll-chart.is-collapsed .study-card-teeth-chart { display: none; }
.study-scroll-chart.is-collapsed { padding-bottom: 9px; }

/* شمارهٔ سریالِ مراجعه در هدر کارت: قدیمی‌ترین =۱ */
.study-visit-serial { color: var(--primary); font-weight: 850; }

.study-scroll-images {
    padding: 0 0 12px;
    border-top: 1px solid #e4eff2;
}

/* تمام‌عرض و زیرِ هم: اقدامات، دریافت‌ها و تصاویر در یک ستون می‌نشینند. (بدنهٔ
   کارت در عرض‌های بیش از ۱۱۰۰px دو ستونه است؛ جزئیات و نمودار کنار هم می‌مانند
   و این سه بخش هر دو ستون را می‌گیرند.) */
.study-actions,
.study-finance,
.study-scroll-images { grid-column: 1 / -1; }

/* کارتِ سابقه: سندِ اسکن‌شدهٔ همان مراجعه — جدا از تصاویر رادیولوژی نشان داده
   می‌شود و دکمهٔ تحلیل ندارد چون هنگامِ ثبتِ مراجعه خوانده شده است. */
.study-scroll-docs {
    margin: 0 0 12px;
    padding: 10px;
    border: 1px dashed #cfe0e6;
    border-radius: 10px;
    background: #fbfdfe;
}
.study-scroll-docs .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* بازبینیِ اطلاعاتِ استخراج‌شده از کارتِ سابقه — فرمِ مراجعهٔ جدید */
.scan-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 8px;
    border: 1px solid var( --border );
    border-radius: var( --radius-sm );
    background: var( --surface );
}
.scan-row:nth-child(even) { background: var( --brand-25 ); }
.scan-pick { display: flex; align-items: center; padding-top: 6px; }
.scan-pick input { width: auto; margin: 0; cursor: pointer; }
.scan-cell { display: grid; gap: 4px; min-width: 0; }
.scan-label { color: var( --muted ); font-size: var( --fs-xs ); font-weight: 700; }
.scan-cell input,
.scan-cell textarea {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var( --border-strong, #c3dae1 );
    border-radius: var( --radius-sm );
    background: var( --surface );
    font-family: inherit;
    font-size: var( --fs-sm );
    resize: vertical;
}
.study-scroll-images-title {
    padding-top: 10px;
    color: #0f5165;
    font-size: 12px;
    font-weight: 800;
}

.study-scroll-images .status-message {
    min-height: 0;
    margin: 5px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #55707e;
    font-size: 12px;
}

@media (max-width: 1100px) {
    #patientsSection + #patientDetailsSection .patient-overview-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "identity" "studies";
    }
    .study-scroll-body { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    #patientsSection + #patientDetailsSection .patient-identity-hero {
        grid-template-columns: 98px minmax(0, 1fr);
        grid-template-areas: "photo identity" "action action";
    }
    #patientsSection + #patientDetailsSection .patient-identity-hero .patient-photo-frame {
        width: 94px;
        height: 94px;
        flex-basis: 94px;
    }
    #patientsSection + #patientDetailsSection .patient-photo-action button { width: 100%; }
    .study-scroll-header { align-items: flex-start; flex-direction: column; }
    .study-scroll-actions { width: 100%; }
    .study-scroll-actions button { flex: 1; }
    .study-card-teeth-chart { min-height: 210px; }
}

/* Global navigation and Settings hub. */
.settings-admin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    padding: 14px;
}

.settings-admin-actions .settings-action-button {
    min-height: 74px;
    padding: 14px;
    color: #0f5165;
    border: 1px solid #c3dae1;
    border-radius: 11px;
    background: #f5fbfd;
    font-weight: 800;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.dashboard-summary-card {
    display: grid;
    gap: 5px;
    min-height: 96px;
    place-content: center;
    text-align: center;
    border: 1px solid #d8e7ec;
    border-radius: 12px;
    background: linear-gradient(145deg, #f5fbfd, #eef8fb);
}

.dashboard-summary-card strong { color: #0e7f95; font-size: 28px; }
.dashboard-summary-card span { color: #55707e; }
.shell-empty-state { padding: 48px 20px; color: #55707e; text-align: center; }

.dashboard-group-title { margin: 17px 2px 8px; color: #0f5165; font-size: 14px; }
.dashboard-overall-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-today-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-metric-icon { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; }
.dashboard-metric-icon svg { width: 22px; height: 22px; display: block; }
.dashboard-summary-card.metric-blue { border-top: 4px solid #0e7f95; }
.dashboard-summary-card.metric-green { border-top: 4px solid #0e7d55; }
.dashboard-summary-card.metric-gray { border-top: 4px solid #7d95a2; }
.dashboard-summary-card.metric-purple { border-top: 4px solid #0e7f95; }
.dashboard-summary-card.metric-cyan { border-top: 4px solid #0e7f95; }
.dashboard-summary-card.today-patients { background: #eef8fb; }
.dashboard-summary-card.today-studies { background: #eef8fb; }
.dashboard-summary-card.today-images { background: #e8f8f0; }
.dashboard-summary-card.today-new { background: #fff6e6; }

/* "Today" cards read as neutral until they actually have activity for the day.
   A non-zero value turns the card green, so a filled dashboard is obvious
   at a glance while empty days stay quiet. */
.dashboard-summary-card.today-card { transition: background .2s ease, box-shadow .2s ease; }
.dashboard-summary-card.today-card.has-value {
    background: linear-gradient(145deg, #e8f8f0, #d3f0e2);
    box-shadow: 0 8px 20px rgba(12,55,70, .14);
    border-color: #a9e0c6;
}
.dashboard-summary-card.today-card.has-value strong { color: #0e7d55; }
.dashboard-summary-card.today-card:not(.has-value) { opacity: .72; }

.dashboard-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.dashboard-panel { padding: 12px; border: 1px solid #d8e7ec; border-radius: 12px; background: #ffffff; }
.dashboard-panel-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: #0f5165; }
.dashboard-panel-title span { color: #55707e; font-size: 12px; }
.dashboard-recent-list { display: grid; gap: 6px; min-height: 90px; }
.dashboard-recent-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px; border: 1px solid #e4eff2; border-radius: 8px; background: #f5fbfd; }

/* Dashboard rows are real actions: opening a record or an image. */
.dashboard-recent-clickable {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dashboard-recent-clickable:hover {
    border-color: #7fc9d8;
    background: #eef8fb;
    transform: translateY(-1px);
}
.dashboard-recent-clickable:active { transform: translateY(0); }

/* Study thumbnails are photographs, not glyphs, so they fill their box. */
img.dashboard-recent-icon { padding: 0; object-fit: cover; background: #0f5165; }
.dashboard-recent-row > span:nth-child(2) { display: grid; gap: 2px; }
.dashboard-recent-row strong { color: #0f5165; font-size: 12px; }
.dashboard-recent-row small, .dashboard-recent-row time { color: #55707e; font-size: 12px; }
.dashboard-recent-icon, .dashboard-image-thumb { width: 42px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: #eef8fb; color: #0e7f95; object-fit: cover; }

.dashboard-network-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #c3dae1;
    border-radius: 13px;
    background: linear-gradient(135deg, #eef8fb, #eef8fb 55%, #e8f8f0);
}

.dashboard-network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.dashboard-network-grid > div {
    display: grid;
    gap: 5px;
    min-height: 66px;
    align-content: center;
    padding: 9px 11px;
    border: 1px solid rgba(12,55,70, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
}

.dashboard-network-grid span { color: #55707e; font-size: 12px; }
.dashboard-network-grid strong { color: #0d3f4f; font-size: 13px; overflow-wrap: anywhere; }
.dashboard-network-grid .network-configured { color: #0e7d55; }
.dashboard-network-grid .network-not-configured { color: #a06400; }

.dashboard-access-links {
    display: grid;
    gap: 7px;
    padding: 11px;
    border: 1px solid #d8e7ec;
    border-radius: 10px;
    background: #ffffff;
    color: #55707e;
    font-size: 12px;
}

.dashboard-access-links > strong { color: #0f5165; font-size: 12px; }
/* Each link is its own card; the gap is what keeps two QR codes from sitting
   close to each other when the clinic has several addresses to show.
   Two cards share a row (one right, one left) so the panel stays short. */
.dashboard-access-links > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* The settings panel holds the same cards directly, under its own heading. */
#settingsNetworkLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#settingsNetworkLinks > strong { grid-column: 1 / -1; }

.dashboard-access-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e3eef3;
    border-radius: 10px;
    background: #f5fbfd;
}

.dashboard-access-qr {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    padding: 14px;
    border-radius: 10px;
    background: #ffffff;
}

/* Sized box so every code looks the same, whatever the length of the address.
   The padding is white space around the quiet zone: a camera needs a clear
   margin on all four sides before it locks on. */
.dashboard-access-qr {
    cursor: zoom-in;
}

.dashboard-access-qr svg {
    display: block;
    width: 210px;
    height: 210px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #d8e7ec;
    border-radius: 12px;
    background: #ffffff;
    image-rendering: pixelated;
}

/* نمای تمام‌صفحهٔ کیوآرکد: همان کد با خانه‌های بسیار بزرگ‌تر، برای
   دوربین‌هایی که به خانهٔ کوچک حساس‌اند (مثلاً شیائومی). */
.qr-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 55, 70, 0.62);
    backdrop-filter: blur(2px);
}

.qr-zoom-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 560px);
    padding: 22px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.qr-zoom-card .modal-close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    width: 36px;
    height: 36px;
    font-size: 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted-strong);
}

.qr-zoom-body svg {
    display: block;
    width: min(78vw, 460px);
    height: min(78vw, 460px);
    image-rendering: pixelated;
}

.qr-zoom-hint {
    color: #55707e;
    font-size: 12.5px;
    line-height: 1.9;
    text-align: center;
}

.dashboard-access-qr small { color: #55707e; font-size: 11px; line-height: 1.7; }

.dashboard-access-row a {
    direction: ltr;
    color: #0e7f95;
    font-family: Consolas, "Segoe UI", sans-serif;
    font-size: 12px;
    text-align: left;
    overflow-wrap: anywhere;
}

.dashboard-access-row button { min-height: 28px; padding: 4px 9px; font-size: 12px; }

.dashboard-access-ip {
    direction: ltr;
    text-align: left;
    font-weight: 700;
    color: #0f5165;
    overflow-wrap: anywhere;
}

.dashboard-access-row > small {
    grid-column: 1 / -1;
    color: #55707e;
    font-size: 11.5px;
    line-height: 1.8;
}

/* ==========================================================
   کنترل صوتی در هدر مراجعه (فاز ۱)
   ========================================================== */

.voice-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 360px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.7;
}

.voice-status.is-listening {
    border-color: #f3c2c0;
    background: #fdecea;
    color: #b42318;
    font-weight: 700;
}

.voice-status.is-listening::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d92d20;
    animation: voice-blink 1.1s infinite;
}

.voice-status.is-error {
    border-color: #f3c2c0;
    background: #fff5f5;
    color: #b42318;
}

@keyframes voice-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* معادل صوتی هر دکمه، درست کنار خودش نمایش داده می‌شود */
.image-viewer-toolbar button[data-voice] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 46px;
    padding: 4px 6px;
}

.image-viewer-toolbar button[data-voice]::after {
    content: attr(data-voice);
    font-size: 10px;
    font-weight: 700;
    opacity: 0.85;
    white-space: nowrap;
}

/* دکمهٔ بستن جدا از نوار است؛ برچسبش زیر خودش می‌آید */
.modal-close-button[data-voice]::after {
    content: attr(data-voice);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* بازخورد فرمان داخل بینندهٔ تمام‌صفحه، جایی که هدر دیده نمی‌شود */
.voice-status-viewer {
    position: absolute;
    bottom: 14px;
    right: 50%;
    transform: translateX(50%);
    max-width: 80%;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(12, 55, 70, 0.88);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}

.voice-status-viewer.is-error { background: rgba(180, 35, 24, 0.92); }

/* راهنمای فرمان‌ها — فقط وقتی گوش دادن فعال است، زیر کلیدها دیده می‌شود */
/* راهنمای فرمان‌ها حذف شد: برچسب صوتی زیر هر دکمه + توضیح کامل در tooltip همان دکمه است. */
.dashboard-network-note { margin: 9px 2px 0; color: #55707e; font-size: 12px; }

.dashboard-network-settings-button {
    min-height: 30px;
    padding: 5px 10px;
    color: #0e7f95;
    border-color: #b9e2ea;
    background: #ffffff;
    font-size: 12px;
}

.network-settings-card {
    scroll-margin-top: 18px;
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #c3dae1;
    border-radius: 13px;
    background: linear-gradient(135deg, #eef8fb, #eef8fb);
    box-shadow: 0 7px 20px rgba(12,55,70, .07);
}

.network-settings-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.network-settings-steps > div {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 11px;
    border: 1px solid #d8e7ec;
    border-radius: 10px;
    background: rgba(255, 255, 255, .88);
}

.network-settings-steps strong { color: #0f5165; font-size: 12px; }
.network-settings-steps span { color: #55707e; font-size: 12px; line-height: 1.8; }
.network-settings-steps code { direction: ltr; padding: 7px; overflow-wrap: anywhere; border-radius: 7px; background: #0a3540; color: #d9eff4; font-size: 12px; text-align: left; }

@media (max-width: 800px) {
    .dashboard-network-grid { grid-template-columns: 1fr; }
    .network-settings-steps { grid-template-columns: 1fr; }
    .dashboard-access-links > div,
    #settingsNetworkLinks { grid-template-columns: 1fr; }
    .dashboard-access-row { grid-template-columns: 1fr auto; }
    .dashboard-access-row > span { grid-column: 1 / -1; }
}
.dashboard-system-panel { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border: 1px solid #d8e7ec; border-radius: 12px; background: #f5fbfd; }
.dashboard-system-panel > div { display: grid; gap: 4px; }
.dashboard-system-panel span { color: #55707e; font-size: 12px; }
.dashboard-system-items { display: flex !important; flex-wrap: wrap; gap: 16px !important; }
.dashboard-system-items .system-ok { color: #0e7d55; }
.dashboard-system-items .system-error { color: #b42318; }

@media (max-width: 700px) {
    .dashboard-summary-grid { grid-template-columns: 1fr; }
    .dashboard-detail-grid { grid-template-columns: 1fr; }
    .dashboard-system-panel { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 701px) and (max-width: 1200px) {
    .dashboard-overall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================
   ReSiRai polish pass
   Flattens the remaining gradients, unifies radii and motion, and
   improves legibility for staff who read this screen all day.
   Declared last so it settles years of incremental overrides.
   ========================================================== */

/* --- Surfaces: one soft shadow instead of many heavy ones --- */
.card,
.dashboard-panel,
.dashboard-summary-card,
.study-scroll-card,
.patient-overview-column,
.patient-profile-panel,
.search-panel,
.table-container,
.image-card,
.recent-studies-card,
.dashboard-network-panel,
.network-settings-card,
.settings-admin-actions .settings-action-button,
.patient-statistics > div,
.info-item,
.study-scroll-details .info-line {
    box-shadow: var( --shadow );
}

/* Gradients on chrome add noise; the login screen keeps its own art.
   NOTE: the coloured "today" cards and study summary boxes below keep their
   gradients, because on those the gradient IS the signal (green = activity). */
#patientsSection .search-panel,
#patientsSection .section-header,
#patientsSection .patient-table th,
#patientsSection .patient-statistics > div,
#patientDetailsSection .patient-overview-column,
#patientsSection + #patientDetailsSection .patient-overview-column,

.study-scroll-header,
.subsection-header,
.study-list-header,
.dashboard-network-panel,
.network-settings-card,
.settings-admin-actions .settings-action-button,
.recent-studies-card,
.table-container,
.patient-table th,
.card-extraction-dialog>header,
.card-extraction-dialog>footer {
    background-image: none;
}

/* Keep the solid background colours that came with those gradients. */
#patientsSection .search-panel,
#patientsSection + #patientDetailsSection .patient-overview-column { background-color: var( --surface ); }
.subsection-header,
.study-list-header { background-color: var( --brand-50 ); }
.patient-table th { background-color: var( --brand-50 ); }
.dashboard-summary-card { background-color: var( --surface-soft ); }
.recent-studies-card,
.study-scroll-chart,
.study-scroll-details .info-line { background-color: var( --brand-25 ); }
.settings-admin-actions .settings-action-button { background-color: var( --brand-50 ); }

/* --- Radii: three steps only --- */
.card,
.patient-overview-column,
.study-scroll-card,
.dashboard-panel,
.dashboard-network-panel,
.network-settings-card,
.table-container,
.search-panel,
.patient-profile-panel,
.recent-studies-card,
.patient-statistics > div,
.image-card { border-radius: var( --radius-lg ); }

.info-item,

.dashboard-summary-card,
.settings-admin-actions .settings-action-button,
.study-scroll-details .info-line,
.study-scroll-chart,
.study-inline-images { border-radius: var( --radius ); }

button,
input,
select,
textarea,
.status-message.error,
.warning-box,
.status-badge,
.dashboard-recent-row,
.dashboard-recent-icon,
.dashboard-image-thumb,
.recent-study-row,
.recent-study-thumb { border-radius: var( --radius-sm ); }

.status-badge { border-radius: 999px; }

/* --- Motion: one easing and duration for every interactive element --- */
button,
a.sidebar-link,
.dashboard-recent-clickable,
.recent-study-row,
.patient-list-row,
.image-card,
.study-scroll-card,

input,
select,
textarea {
    transition: background-color var( --dur ) var( --ease ),
                border-color var( --dur ) var( --ease ),
                color var( --dur ) var( --ease ),
                box-shadow var( --dur ) var( --ease ),
                transform var( --dur ) var( --ease );
}

button:hover:not(:disabled) {
    transform: translateY( -1px );
    box-shadow: 0 4px 12px rgba( 12, 55, 70, 0.12 );
}

/* A visible, calm press state so staff never wonder whether a click landed. */
button:active:not(:disabled) {
    transform: translateY( 0 );
    box-shadow: none;
    filter: brightness( 0.96 );
}

/* --- Legibility --- */
body { line-height: 1.75; }

.section-header p,
.field-hint,
.status-message,
.dashboard-summary-card span,
.dashboard-panel-title span,
.patient-statistics span,
.summary-label {
    color: var( --muted );
}

/* Long-form Persian text benefits from a little extra leading. */
.study-scroll-details .info-line,
.card-extraction-body pre,
.warning-box,
.confirm-dialog p,
.status-message.error { line-height: 1.85; }

/* Larger, rounder patient avatar: identifying the patient is the single
   most repeated task on this screen. */
.patient-row-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba( 12, 55, 70, 0.16 );
}

#patientsSection + #patientDetailsSection .patient-identity-hero .patient-photo-frame {
    border: 4px solid #ffffff;
    box-shadow: 0 6px 18px rgba( 12, 55, 70, 0.18 );
}

/* --- Friendlier empty states --- */
.shell-empty-state {
    padding: 44px 20px;
    color: var( --muted );
    text-align: center;
    font-size: var( --fs-sm );
}

.dashboard-recent-list,
#studiesContainer,
#studyDetailsImagesGrid {
    line-height: 1.9;
}

/* Status message blocks are calmer than full-bleed alert colours. */
.status-message.error {
    padding: 9px 12px;
    background: var( --danger-soft, #fdecea );
    border: 1px solid #f7d2ce;
    color: var( --danger );
}

/* --- Sidebar: lighter and calmer than the previous navy --- */
.app-sidebar {
    background: linear-gradient( 180deg, var( --brand-700 ), var( --brand-900 ) );
}
.sidebar-link.active {
    background: var( --brand-600 );
    box-shadow: 0 6px 16px rgba( 25, 149, 173, 0.28 );
}


/* ==========================================================
   Touch and small-screen ergonomics
   Staff open ReSiRai on phones and tablets as well as desktops, so
   targets are generously sized and the mobile bar shows text labels.
   ========================================================== */

@media ( hover: none ) and ( pointer: coarse ) {
    /* Comfortable thumb targets for every control. */
    button,
    .sidebar-link,
    .dashboard-recent-clickable,
    .recent-study-row {
        min-height: 46px;
    }
    .patient-table button { min-height: 40px; }
    .form-field input,
    .form-field select,
    .form-field textarea,
    .search-container input { min-height: 48px; }
    /* iOS zooms the page when a field is focused with a font below 16px. */
    .form-field input,
    .form-field select,
    .form-field textarea { font-size: 16px; }
}

@media ( max-width: 700px ) {
    /* The bottom bar keeps its label under the icon: an icon alone is slow to
       recognise, and the previous rules hid all text on small screens. */
    .app-sidebar { height: 62px; }
    .sidebar-nav { padding: 6px 8px; gap: 6px; }
    .sidebar-link {
        flex: 1;
        min-height: 50px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 5px 2px;
        font-size: 11px !important;
        line-height: 1.2;
        border-radius: var( --radius-sm );
    }
    .sidebar-link .nav-icon svg { width: 20px; height: 20px; }
    /* Keep the label readable but quiet until the tab is active. */
    .sidebar-link span:not(.nav-icon) { font-size: 11px; opacity: .92; }
    .sidebar-link.active span:not(.nav-icon) { opacity: 1; font-weight: 700; }
    .app-shell { padding-bottom: 70px; }

    /* Forms: one column, roomy spacing, actions reachable with the thumb. */
    .form-grid { grid-template-columns: 1fr; gap: 16px; }
    .details-toolbar { gap: 8px; }
    .form-actions button,
    .details-toolbar button { min-height: 46px; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions button { width: 100%; }

    /* Tables scroll instead of squashing the columns. */
    .table-container { -webkit-overflow-scrolling: touch; }

    /* Dialogs use the full width and stay scrollable. */
    .confirm-dialog,
    .jalali-picker-dialog { width: 100%; }
    .global-search-results { max-height: 60vh; }
}

/* Respect users who ask for less motion. */
@media ( prefers-reduced-motion: reduce ) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    button:hover:not(:disabled) { transform: none; }
}

/* ==========================================================
   Mobile: messages must never sit on the bottom bar
   The navigation bar owns the bottom 62px of the phone screen. Toasts are
   fixed and layered far above it, so while a message is on screen the bar
   used to become untappable - tapping "بیماران" then did nothing at all.
   ========================================================== */
@media ( max-width: 700px ) {
    .toast-container {
        bottom: 74px;
        /* An empty (or partly empty) container must let touches through. */
        pointer-events: none;
    }
    .toast { pointer-events: auto; }
}

/* A required choice the user skipped is marked in the form itself, so the
   error is visible next to the field and not only in a message. */
.form-field select.field-missing {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .12);
}

/* ==========================================================
   Persian file picker
   The native control prints "Choose File" in English, so it is stretched
   transparently over a Persian face. Tapping the face really taps the input,
   which is what makes this work the same on Android and iPhone.
   ========================================================== */
.file-picker {
    position: relative;
    display: block;
}

.file-picker input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-picker-face {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 46px;
    padding: 7px 12px;
    border: 1px dashed #a9cbd7;
    border-radius: 10px;
    background: #f5fbfd;
}

.file-picker-button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 14px;
    border: 1px solid #b9e2ea;
    border-radius: 9px;
    background: #ffffff;
    color: #0e7f95;
    font-size: 13px;
    font-weight: 700;
}

.file-picker-name {
    color: #55707e;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.file-picker:focus-within .file-picker-face {
    border-color: #0e7f95;
    box-shadow: 0 0 0 3px rgba(14, 127, 149, .14);
}

/* ==========================================================
   Share the Study images by SMS
   ========================================================== */
.share-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; }
.share-dialog-hint { margin: 0 0 14px; color: #55707e; font-size: 13px; line-height: 1.9; }

.share-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.share-link-row input {
    flex: 1;
    min-width: 0;
    direction: ltr;
    text-align: left;
    font-family: Consolas, "Segoe UI", sans-serif;
    font-size: 12.5px;
    background: #f5fbfd;
}

.share-link-row button { white-space: nowrap; }

#shareOtherFields { display: grid; gap: 8px; }
#shareOtherFields.hidden { display: none; }
#shareOtherFields input + input { margin-top: 0; }

#shareImagesDialog .status-message { min-height: 18px; }

/* ==========================================================
   Dialogs must stay reachable on short screens.
   The pairing dialog carries two QR codes plus the device panel,
   so without a height limit its action buttons fall off screen.
   ========================================================== */
.confirm-dialog {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-height: 780px) {
    .confirm-dialog { padding: 16px; }
    .pair-qr svg { width: 168px; height: 168px; }
    .pair-qr { padding: 10px; gap: 8px; }
}

/* ==========================================================
   الصاق تصویر موجود از پرونده به مراجعه (تصاویر بدون نوع یا غیرمتصل)
   ========================================================== */

.section-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pickup-dialog {
    position: relative;
    width: min( 780px, 100% );
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    text-align: right;
}

.pickup-close {
    top: 10px;
    right: 10px;
    left: auto;
    width: 36px;
    height: 36px;
    font-size: 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted-strong);
}

.pickup-hint {
    margin: 8px 0 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    text-align: right;
}

.pickup-list {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
    gap: 12px;
    margin-top: 12px;
}

.pickup-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
    text-align: right;
}

.pickup-card img.pickup-thumb {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    background: #0b2b36;
    cursor: pointer;
}

.pickup-card .pdf-thumbnail { cursor: pointer; }

.pickup-name {
    font-size: 12px;
    font-weight: 700;
    direction: ltr;
    text-align: right;
    word-break: break-all;
}

.pickup-badge {
    align-self: flex-start;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted-strong);
    font-size: 11px;
}

.pickup-badge.is-attached {
    background: var(--brand-100);
    border-color: var(--brand-200);
    color: var(--brand-700);
}

.pickup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pickup-actions button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
}

.pickup-classify {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.pickup-classify select {
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
}

/* ==========================================================
   راهنمای ثابت زیر فرم‌ها (متن‌ها در js/help-content.js)
   ========================================================== */

.form-guide {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fcfd;
    overflow: hidden;
}

.form-guide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #0f5165;
    text-align: right;
    cursor: pointer;
}

.form-guide-head:hover { background: #f1f9fc; }

.form-guide-title { flex: 1; }

.form-guide-caret {
    color: #0e7f95;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.form-guide-body {
    padding: 2px 14px 14px;
    border-top: 1px dashed #d8e7ec;
}

.form-guide.is-closed .form-guide-body { display: none; }

.form-guide-part {
    margin: 11px 0 0;
    color: #4a6b7d;
    font-size: 13px;
    line-height: 2;
}

.form-guide-part b { color: #0d3f4f; }

.form-guide-sub {
    margin-top: 12px;
    color: #0d3f4f;
    font-size: 13px;
    font-weight: 700;
}

.form-guide-steps {
    margin: 6px 0 0;
    padding-inline-start: 20px;
    color: #4a6b7d;
    font-size: 13px;
    line-height: 2;
}

.form-guide-steps li { margin-bottom: 2px; }

.form-guide-steps b {
    color: #0d3f4f;
    background: #eef6f9;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 700;
}

/* ==========================================================
   تور اولین ورود (متن‌ها در js/help-content.js → tour)
   ========================================================== */

.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 55, 70, 0.55);
    backdrop-filter: blur(3px);
}

.tour-dialog {
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    padding: 20px 22px;
    text-align: right;
}

.tour-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tour-kicker { color: #0e7f95; font-size: 12px; font-weight: 700; }

.tour-title { color: #0d3f4f; font-size: 18px; font-weight: 700; margin-top: 3px; }

.tour-progress { color: #55707e; font-size: 12.5px; white-space: nowrap; }

.tour-dots { display: flex; gap: 6px; margin-top: 12px; }

.tour-dot { width: 9px; height: 9px; border-radius: 50%; background: #d8e7ec; }

.tour-dot.is-active { background: #0e7f95; }

.tour-body { min-height: 110px; }

.tour-part { margin: 13px 0 0; color: #4a6b7d; font-size: 13.5px; line-height: 2.1; }

.tour-part b { color: #0d3f4f; }

.tour-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

.tour-note { margin-top: 12px; color: #7c8b95; font-size: 11.5px; line-height: 1.9; }

/* ==========================================================
   صفحهٔ «راهنما» در منو
   ========================================================== */

.help-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-guide .form-guide-head { cursor: default; }

.help-guide .form-guide-head:hover { background: transparent; }

.help-tour-state {
    align-self: center;
    color: var(--muted);
    font-size: 12px;
}

/* کیوآرکدِ همان لینک، داخل پنجرهٔ «ارسال لینک تصویر با پیامک» */
.share-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

.share-qr svg {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
}

.share-qr small {
    color: #55707e;
    font-size: 11.5px;
}


/* ==========================================================
   App event log (فقط مدیرِ سیستم)
   ========================================================== */

.events-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin: 14px 0;
    padding: 12px;
    background: #f6fafb;
    border: 1px solid var(--border);
    border-radius: 10px;
}


.events-filters .form-field {
    min-width: 150px;
    flex: 1 1 150px;
}


.events-filters .events-search {
    flex: 2 1 220px;
}


.events-filters label {
    font-size: 12px;
    color: #4a6b78;
}


.events-filters select,
.events-filters input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
}


.events-actions {
    display: flex;
    gap: 8px;
}


.events-outcome {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


.events-outcome.is-ok {
    background: #e7f6ec;
    color: #157347;
}


.events-outcome.is-fail {
    background: #fdecea;
    color: #b42318;
}


/* ==========================================================
   Practitioner note + AI follow-up chat
   ========================================================== */

.ai-note-input {
    width: 100%;
    margin: 10px 0 2px;
    padding: 8px 11px;
    border: 1px dashed #0f516566;
    border-radius: 8px;
    background: #f8fcfd;
    font-size: 13px;
}


.ai-note-input:focus {
    border-style: solid;
    background: #ffffff;
}


.ai-chat-report {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #4a6b78;
}


.ai-chat-report summary {
    cursor: pointer;
    padding: 4px 0;
}


.ai-chat-report pre {
    max-height: 240px;
    overflow: auto;
    padding: 8px;
    background: #f6fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
}


.ai-chat-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0 10px;
}


.ai-chat-bubble {
    max-width: 92%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.9;
    white-space: pre-wrap;
}


.ai-chat-bubble.is-user {
    align-self: flex-start;
    background: #e8f4f8;
    color: #0f5165;
    border: 1px solid #0f516533;
}


.ai-chat-bubble.is-ai {
    align-self: flex-end;
    background: #f4f7f9;
    color: #12333f;
    border: 1px solid var(--border);
}


.ai-chat-bubble.is-error {
    background: #fdecea;
    color: #b42318;
    border-color: #f3c3bd;
}


.ai-chat-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    resize: vertical;
}


.ai-chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 9px;
}


.ai-chat-actions .field-hint {
    flex: 1 1 200px;
}


/* آماده‌سازیِ تحلیل: نکتهٔ ویژه قبل از ارسال، در خودِ پنجرهٔ تحلیل */

.ai-prepare-label {
    margin: 0 0 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #12333f;
}


.ai-prepare-label span {
    font-weight: 400;
    color: #55707e;
}


.ai-prepare-input {
    width: 100%;
    min-height: 68px;
    padding: 9px 11px;
    border: 1px solid #0f516566;
    border-radius: 8px;
    background: #f8fcfd;
    font-size: 13.5px;
    line-height: 1.9;
    resize: vertical;
}


.ai-prepare-input:focus {
    border-color: #0f5165;
    background: #ffffff;
}


.ai-prepare-actions {
    display: flex;
    justify-content: flex-start;
    gap: 9px;
    margin-top: 10px;
}


/* ==========================================================
   Backup card in settings
   ========================================================== */

.backup-badge {
    font-size: 12.5px;
    color: #4a6b78;
}


.backup-badge.is-ok {
    color: #157347;
}


.backup-badge.is-fail {
    color: #b42318;
}


.backup-badge.is-run {
    color: #0f5165;
}


.backup-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 12px 0;
}


.backup-status-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 11px;
    background: #f6fafb;
    border: 1px solid var(--border);
    border-radius: 9px;
}


.backup-status-grid span {
    font-size: 11.5px;
    color: #55707e;
}


.backup-status-grid strong {
    font-size: 13.5px;
    color: #12333f;
}


.backup-note-error,
.backup-note-warning {
    margin: 6px 0;
    line-height: 1.7;
}


.backup-actions {
    display: flex;
    gap: 9px;
    margin: 10px 0 14px;
}


.backup-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}


.backup-settings-row .form-field {
    flex: 1 1 240px;
}


.backup-settings-row .backup-keep {
    flex: 0 1 140px;
}


.backup-settings-row input {
    width: 100%;
}


.backup-settings-row .secondary-button {
    margin-bottom: 2px;
}


.backup-restore {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}


.backup-restore-warning {
    margin: 8px 0 10px;
    color: #b45309;
    line-height: 1.8;
}


.backup-restore-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}


.backup-restore-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 11px;
    background: #f6fafb;
    border: 1px solid var(--border);
    border-radius: 9px;
}


.backup-restore-name {
    flex: 1 1 230px;
    font-size: 13px;
    color: #12333f;
    word-break: break-all;
}


.backup-restore-meta {
    font-size: 12px;
    color: #55707e;
}


.backup-restore-row .secondary-button {
    color: #b42318;
    border-color: #f3c3bd;
}


.backup-restore-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    letter-spacing: 0.5px;
}


/* ==========================================================
   Reports page
   ========================================================== */

.reports-actions {
    display: flex;
    gap: 8px;
}


.reports-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin: 14px 0;
    padding: 12px;
    background: #f6fafb;
    border: 1px solid var(--border);
    border-radius: 10px;
}


.reports-filters .form-field {
    flex: 0 1 170px;
}


.reports-filters input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
}


.reports-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}


.reports-presets .secondary-button,
.reports-filters .secondary-button {
    font-size: 12.5px;
}


.reports-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0;
}


.reports-cards .metric-red {
    background: #fdecea;
}


.reports-cards .metric-red strong {
    color: #b42318;
}


.reports-block {
    margin: 24px 0;
    break-inside: avoid;
}


.reports-block-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}


.reports-block-head strong {
    font-size: 15px;
    color: #12333f;
}


.reports-block-head span {
    font-size: 12.5px;
    color: #55707e;
}


.reports-print-head {
    display: none;
}


@media print {
    .app-sidebar,
    .main-header,
    .reports-filters,
    .reports-actions,
    .toast-container {
        display: none !important;
    }

    .app-shell {
        padding: 0;
        margin: 0;
    }

    .page-container {
        padding: 0;
    }

    .page-container > section {
        display: none !important;
    }

    #reportsSection {
        display: block !important;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .reports-print-head {
        display: block;
        margin-bottom: 14px;
        font-size: 13px;
        color: #333333;
    }

    .reports-cards {
        gap: 8px;
    }

    .table-container {
        overflow: visible !important;
    }

    body {
        background: #ffffff;
    }
}
/* ??????? ????? � ??? �??????? ??????� (????? ? ???????) */
.patient-extra-details{margin-top:14px;border:1px solid #dbe7f1;border-radius:12px;background:#f8fbfe;padding:7px 12px}
.patient-extra-details>summary{cursor:pointer;font-weight:700;color:#215a86;padding:4px 0}
.patient-extra-details[open]>summary{margin-bottom:10px;border-bottom:1px solid #e3edf5;padding-bottom:7px}


/* ???? ?????? ???????: ???????? ????????? ? ????? */
.patient-table-compact td,.patient-table-compact th{vertical-align:middle}
.patient-contact-cell small{display:block;color:#8496a6;font-size:11px;direction:ltr;text-align:right}
.patient-studies-cell strong{font-size:15px}
.patient-studies-cell .study-count-open{display:inline-block;margin-inline-start:6px;background:#fff0e2;color:#b4530a;border-radius:9px;padding:1px 7px;font-size:11px;font-weight:700}
.followup-due-badge{display:inline-block;background:#fdecea;color:#b42318;border-radius:9px;padding:2px 8px;font-size:11px;font-weight:700}
.patient-open-button{margin-inline-end:5px}


/* ???? ????? ? ????? ????? ????? ????? ??????? */
.patient-sortable{cursor:pointer;user-select:none}
.patient-sortable:hover{color:#0b62c4}
.patient-sortable.sort-asc::after{content:' ?';font-size:9px;color:#0b62c4}
.patient-sortable.sort-desc::after{content:' ?';font-size:9px;color:#0b62c4}
.patients-load-more{display:flex;justify-content:center;padding:14px 0}

/* ==== کارتِ مراجعه بدونِ ناوبری (visit-draft.js) ===========================
   پیش‌نویسِ بالایِ لیست + فیلدهایِ مستقیم‌ویرایش در هر کارت. هر تغییر، کلیدِ
   «ثبت» را کنارِ همان فیلد ظاهر می‌کند؛ «ثبت» کلِ کارت را ذخیره می‌کند.        */
.visit-draft-host:empty{display:none}
.visit-draft-host{margin:0 0 14px}
.study-draft-card{border:1px dashed var(--border,#cfe0ee);border-radius:12px;background:#f7fcfe;padding:12px 14px;box-shadow:var(--shadow,none)}
.study-draft-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.study-draft-title{display:flex;align-items:center;gap:8px;font-weight:700;color:#123}
.study-draft-badge{background:#fff3d6;color:#8a5b00;border:1px solid #f0d9a6;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
.visit-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:6px 16px}
.visit-fields-bar{grid-column:1/-1;min-height:18px;font-size:12px;color:#8a5b00}
.visit-fields-bar:empty{display:none}
.visit-fields-state.is-error{color:#b42318;font-weight:600}
.visit-field-row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:8px;align-items:center;border-bottom:1px dashed #e7eff6;padding:5px 0}.visit-field-label{font-size:13px;font-weight:600;color:#285b8f}
.visit-field-input{min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.visit-input{width:100%;box-sizing:border-box;border:1px solid var(--border,#cfe0ee);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;background:#fff;color:#123}
/* فیلد مراجعه همیشه کلِ ستون را پُر کند — چه دیکته آن را پیچیده باشد چه نه؛ تأییدِ سطر را فشرد نکن (به‌جای width:100% از flex استفاده می‌شود تا ردیف‌های Verify با دکمه درهم نشکند: Elan، ثبت و ...) */
.visit-field-input input,.visit-field-input textarea,.visit-field-input select{flex:1 1 0;min-width:0;width:auto;box-sizing:border-box}
/* فیلدهای تاریخ/ساعت هرگز آنقدر باریک نشوند که عدد بُریده شود */
.visit-field-row input[data-jalali-date],.visit-field-row input[data-jalali-datetime]{min-width:118px}
.visit-field-input .jalali-input-wrap{flex:1 1 0;min-width:0;width:auto}
.visit-field-input .jalali-input-wrap input{flex:1 1 0;min-width:0;width:auto}
textarea.visit-input{resize:vertical}
.visit-field-save{border:1px solid #0f766e;background:#0f766e;color:#fff;border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.visit-field-save:hover{background:#0b5f59}
.visit-field-save:disabled{opacity:.7;cursor:default}
.visit-field-error .visit-input{border-color:#e06a5e}
.visit-field-error-text{grid-column:2/-1;color:#b42318;font-size:12px}
.visit-now{font-size:12px;padding:4px 10px;white-space:nowrap}
.study-card-sections{margin-top:12px}
@media(max-width:700px){.visit-field-row{grid-template-columns:1fr;align-items:start}.visit-field-error-text{grid-column:1/-1}}