@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #f4f7fb;
    --card: #ffffff;
    --text: #102033;
    --muted: #64748b;
    --line: #dbe7f5;
    --soft-line: #edf2f8;
    --primary: #256df0;
    --primary-dark: #1557d4;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 8px 24px rgba(26, 41, 71, 0.08);
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    background: linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
    color: var(--text);
}

button,
input,
select {
    font-family: "Cairo", sans-serif;
}

.app {
    min-height: 100vh;
    max-width: 1700px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Header */
.top {
    display: grid;
    grid-template-columns: 280px 1fr 140px;
    align-items: center;
    gap: 12px;
}

    .top h1 {
        margin: 0;
        font-size: 22px;
        font-weight: 900;
        color: #071a3d;
    }

    .top p {
        margin: 2px 0 0;
        font-size: 12px;
        color: var(--muted);
    }

.search {
    display: flex;
    height: 38px;
    max-width: 520px;
    justify-self: center;
    width: 100%;
}

    .search select,
    .search input {
        border: 1px solid var(--line);
        background: white;
        padding: 0 12px;
        font-size: 13px;
        outline: none;
    }

    .search select {
        width: 118px;
        border-radius: 10px 0 0 10px;
    }

    .search input {
        flex: 1;
        font-weight: 800;
    }

    .search button {
        width: 95px;
        border: 0;
        background: linear-gradient(135deg, #367cf6, #155ee8);
        color: white;
        font-weight: 900;
        border-radius: 0 10px 10px 0;
        cursor: pointer;
    }

.lang {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

    .lang button {
        border: 1px solid var(--line);
        background: white;
        padding: 6px 11px;
        border-radius: 8px;
        font-weight: 800;
    }

        .lang button.active {
            background: var(--primary);
            color: white;
        }

    .lang span {
        font-size: 22px;
    }

/* Summary */
.summary {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    display: grid;
    grid-template-columns: 150px 1fr 500px;
    gap: 14px;
    align-items: center;
    box-shadow: var(--shadow);
}

.icd {
    height: 64px;
    background: linear-gradient(135deg, #eef5ff, #ffffff);
    border: 1px solid #dfe8f6;
    border-radius: 12px;
    color: var(--primary-dark);
    font-size: 31px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title h2 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
}

.title h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
    font-weight: 900;
}

.chips {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 8px;
}

    .chips div {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: white;
        padding: 8px 10px;
        min-height: 56px;
    }

    .chips b {
        display: block;
        color: var(--primary-dark);
        margin-bottom: 2px;
        font-size: 12px;
        font-weight: 900;
    }

    .chips span {
        display: block;
        font-size: 11px;
        line-height: 1.35;
    }

/* Tabs */
.tabs {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    overflow: hidden;
    min-height: 48px;
}

    .tabs button {
        border: 0;
        background: transparent;
        font-weight: 900;
        color: #0f172a;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        font-size: 12px;
    }

        .tabs button.active {
            color: var(--primary-dark);
            border-bottom-color: var(--primary);
        }

/* Main Grid */
.grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(4, 1fr);
    gap: 10px;
    align-items: stretch;
}

    /* Basic Mode */
    .grid.basic-mode {
        grid-template-columns: 1.25fr repeat(4, 1fr);
    }

        .grid.basic-mode .description,
        .grid.basic-mode .card {
            min-height: 430px;
        }

        .grid.basic-mode #jointCard,
        .grid.basic-mode #redFlagsCard,
        .grid.basic-mode #rehabCard,
        .grid.basic-mode #riskCard,
        .grid.basic-mode #workflowCard {
            display: none !important;
        }

    /* Arthrosis Mode */
    .grid.arthrosis-mode {
        grid-template-columns: 1.25fr repeat(4, 1fr);
    }

        .grid.arthrosis-mode .description {
            grid-column: 1 / 2;
            grid-row: span 2;
            min-height: 520px;
        }

        .grid.arthrosis-mode .joint {
            grid-column: 2 / 6;
            min-height: 180px;
        }

        .grid.arthrosis-mode #redFlagsCard,
        .grid.arthrosis-mode #rehabCard,
        .grid.arthrosis-mode #riskCard,
        .grid.arthrosis-mode #workflowCard {
            min-height: 180px;
        }

        .grid.arthrosis-mode #rehabCard {
            grid-column: 2 / 4;
        }

/* Cards */
.card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    height: auto;
    overflow: visible;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

    .card h3 {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 900;
        border-bottom: 1px solid var(--soft-line);
        padding-bottom: 8px;
        color: #0f172a;
    }

/* Description */
.desc-content {
    flex: 1;
    overflow: visible;
}

.desc-block {
    margin-bottom: 18px;
}

    .desc-block p {
        margin: 0;
        line-height: 1.8;
        font-size: 12px;
        text-align: justify;
        text-justify: inter-word;
    }

    .desc-block.ar p {
        direction: rtl;
        text-align: justify;
        font-size: 12.5px;
    }

    .desc-block.en p {
        direction: ltr;
        text-align: justify;
    }

/* Lists */
.card ul {
    list-style: none;
    margin: 0;
    padding: 0 0 12px 0;
    flex: 1;
    overflow: visible;
}

li {
    position: relative;
    padding-left: 14px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    line-height: 1.45;
    font-size: 11px;
    border-bottom: 1px solid #f0f3f8;
}

    li:before {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--primary);
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 8px;
    }

    li small {
        display: block;
        color: #475569;
        font-size: 10.5px;
        margin-top: 4px;
        line-height: 1.4;
        text-align: justify;
    }

.arText {
    display: block;
    direction: rtl;
    text-align: justify;
    color: #334155;
    font-size: 10.8px;
    margin-top: 4px;
    line-height: 1.45;
}

.badge {
    float: right;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.High,
.Critical {
    background: #ffe7e7;
    color: #e22b2b;
}

.Medium {
    background: #fff1d6;
    color: #d97706;
}

.Low {
    background: #e9f7ee;
    color: #14964a;
}

/* Buttons */
.view {
    margin-top: auto;
    padding-top: 8px;
    width: 100%;
    height: 30px;
    border: 1px solid var(--line);
    background: #fbfdff;
    color: var(--primary-dark);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 900;
    font-size: 11px;
}


/* Joint Profile */
#jointProfile {
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: 13px;
    line-height: 1.7;
    font-size: 11px;
}

.joint-row {
    display: contents;
}

    .joint-row b {
        color: #10213f;
        font-weight: 900;
    }

    .joint-row .ar {
        direction: rtl;
        text-align: justify;
        border-left: 1px solid var(--soft-line);
        padding-left: 12px;
    }

/* Rehab */
.phases {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.phase {
    background: #edf9ef;
    border: 1px solid #ccebd2;
    color: #075e24;
    border-radius: 9px;
    padding: 8px 10px;
    text-align: center;
    min-width: 90px;
    font-size: 10.5px;
    font-weight: 900;
    flex-shrink: 0;
}

    .phase small {
        display: block;
        margin-top: 2px;
        font-weight: 600;
    }

/* Workflow */
#workflow {
    overflow: visible;
}

.step {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

    .step b {
        background: #eee7ff;
        color: #6c36d9;
        border-radius: 50%;
        text-align: center;
        height: 22px;
        line-height: 22px;
        font-size: 11px;
    }

    .step strong {
        font-size: 11px;
    }

/* Footer */
.footer-card {
    margin-top: 2px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
    text-align: center;
}

    .footer-card a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 900;
    }

.footer-separator {
    color: #cbd5e1;
    font-weight: 900;
}

.footer-version {
    color: #475569;
    font-weight: 900;
}

.hidden {
    display: none !important;
}

/* 1366 */
@media (max-width: 1400px) {
    .app {
        padding: 8px;
        gap: 8px;
    }

    .grid.basic-mode,
    .grid.arthrosis-mode {
        grid-template-columns: 1.15fr repeat(4, 1fr);
        gap: 8px;
    }

    .card {
        padding: 12px;
    }

    .grid.basic-mode .description,
    .grid.basic-mode .card {
        min-height: 420px;
    }

    .grid.arthrosis-mode .description {
        min-height: 520px;
    }

    .desc-block p {
        font-size: 11px;
    }

    .desc-block.ar p {
        font-size: 11.5px;
    }

    li {
        font-size: 10.5px;
    }

    .arText {
        font-size: 10.5px;
    }
}

/* 1920 */
@media (min-width: 1700px) {
    .app {
        padding: 16px;
        gap: 14px;
    }

    .top {
        grid-template-columns: 380px 1fr 180px;
    }

        .top h1 {
            font-size: 28px;
        }

    .summary {
        grid-template-columns: 220px 1fr 760px;
        padding: 18px;
    }

    .icd {
        height: 78px;
        font-size: 38px;
    }

    .title h2 {
        font-size: 24px;
    }

    .title h3 {
        font-size: 22px;
    }

    .tabs {
        min-height: 56px;
    }

        .tabs button {
            font-size: 14px;
        }

    .card {
        padding: 18px;
    }

        .card h3 {
            font-size: 17px;
        }

    .desc-block p {
        font-size: 14px;
    }

    .desc-block.ar p {
        font-size: 14.5px;
    }

    li {
        font-size: 14px;
    }

    .arText {
        font-size: 13.5px;
    }

    #jointProfile {
        grid-template-columns: 170px 1fr 1fr;
        font-size: 14px;
    }
}

/* Active / Inactive ICD Header */

/* Bigger readable English text in cards */
.card li {
    font-size: 13.5px;
    line-height: 1.7;
}

    .card li small {
        font-size: 12.5px;
        line-height: 1.6;
    }

.card .arText {
    font-size: 12.5px;
    line-height: 1.7;
}

/* Better Rehabilitation layout */
#rehabCard {
    min-height: 280px;
}

.phases {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-content: start;
    align-items: stretch;
    gap: 14px;
    overflow: visible;
    padding: 4px 0 12px 0;
}

    .phases > span {
        display: none;
    }

.phase {
    min-width: 0;
    min-height: 86px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
    font-size: 12px;
}

    .phase small {
        font-size: 11px;
        margin-top: 6px;
    }

.dose-en {
    display: block;
    margin-top: 6px;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.55;
    text-align: justify;
}

.dose-ar {
    display: block;
    margin-top: 4px;
    color: #334155;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.55;
    direction: rtl;
    text-align: justify;
}

.med-warning {
    display: block;
    margin-top: 6px;
    color: #d97706;
    font-size: 11.8px;
    line-height: 1.5;
    font-weight: 800;
    text-align: justify;
}

/* Header active chip only */
.chip-active {
    border-color: #12a150 !important;
    background: #ecfff4 !important;
}

    .chip-active b,
    .chip-active span {
        color: #0f8b45 !important;
        font-weight: 900 !important;
    }

.chip-inactive {
    border-color: #ef4444 !important;
    background: #fff1f1 !important;
}

    .chip-inactive b,
    .chip-inactive span {
        color: #dc2626 !important;
        font-weight: 900 !important;
    }

/* Colored list items by state/severity */
.item-critical {
    background: #fff1f1;
    border-right: 4px solid #dc2626;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

.item-high {
    background: #fff7ed;
    border-right: 4px solid #f97316;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

.item-medium {
    background: #fffbeb;
    border-right: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

.item-low {
    background: #ecfdf5;
    border-right: 4px solid #10b981;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

.item-normal {
    background: #f8fbff;
    border-right: 4px solid #cbd5e1;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

.item-med {
    background: #eff6ff;
    border-right: 4px solid #256df0;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

.item-action {
    background: #f0fdf4;
    border-right: 4px solid #22c55e;
    border-radius: 10px;
    padding: 9px 12px 9px 16px;
}

/* Stronger text */
.card li,
.card li b,
.card li strong {
    font-weight: 800;
}

.card .arText,
.dose-ar,
.dose-en,
.med-warning {
    font-weight: 800;
}

/* Description full-width first row */
.grid.basic-mode,
.grid.arthrosis-mode {
    grid-template-columns: repeat(4, 1fr);
}

    .grid.basic-mode .description,
    .grid.arthrosis-mode .description {
        grid-column: 1 / 5;
        grid-row: auto;
        min-height: 260px;
    }

    .grid.basic-mode .card:not(.description) {
        min-height: 360px;
    }

    .grid.arthrosis-mode .joint {
        grid-column: 1 / 5;
        min-height: 200px;
    }

    .grid.arthrosis-mode #redFlagsCard {
        grid-column: 1 / 2;
    }

    .grid.arthrosis-mode #rehabCard {
        grid-column: 2 / 4;
    }

    .grid.arthrosis-mode #riskCard {
        grid-column: 4 / 5;
    }

    .grid.arthrosis-mode #workflowCard {
        grid-column: 1 / 5;
        min-height: 180px;
    }

/* ICD active/inactive gradient only on code box */
.icd-active {
    border-color: #12a150 !important;
    background: linear-gradient(135deg, #e9fff2, #ffffff) !important;
    color: #0f8b45 !important;
}

.icd-inactive {
    border-color: #ef4444 !important;
    background: linear-gradient(135deg, #fff1f1, #ffffff) !important;
    color: #dc2626 !important;
}

/* Active chip */
.chip-active {
    border-color: #12a150 !important;
    background: #ecfff4 !important;
}

    .chip-active b,
    .chip-active span {
        color: #0f8b45 !important;
        font-weight: 900 !important;
    }

.chip-inactive {
    border-color: #ef4444 !important;
    background: #fff1f1 !important;
}

    .chip-inactive b,
    .chip-inactive span {
        color: #dc2626 !important;
        font-weight: 900 !important;
    }

/* Only Clinical Rules / Risk Rules colored */
.rule-critical {
    background: #fff1f1;
    border-right: 4px solid #dc2626;
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
}

.rule-high {
    background: #fff7ed;
    border-right: 4px solid #f97316;
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
}

.rule-medium {
    background: #fffbeb;
    border-right: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
}

.rule-low {
    background: #ecfdf5;
    border-right: 4px solid #10b981;
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
}

.rule-normal {
    background: #f8fbff;
    border-right: 4px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
}

/* No colored cards for normal list items */
.item-critical,
.item-high,
.item-medium,
.item-low,
.item-normal,
.item-med,
.item-action {
    background: transparent !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: inherit !important;
}

/* Make short preview clear */
.card li {
    font-weight: 800;
}

.card .arText {
    font-weight: 800;
}

/* View all stays as CTA */
.view {
    margin-top: 14px;
}

/* NORMAL ICD LAYOUT مثل A17.0 */
.grid.basic-mode {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}

    .grid.basic-mode .description {
        grid-column: 1 / 4 !important;
        grid-row: auto !important;
        min-height: 260px !important;
    }

    .grid.basic-mode #jointCard,
    .grid.basic-mode #redFlagsCard,
    .grid.basic-mode #rehabCard,
    .grid.basic-mode #riskCard,
    .grid.basic-mode #workflowCard {
        display: none !important;
    }

    /* أول 3 كروت بعد الوصف */
    .grid.basic-mode .card:not(.description) {
        min-height: 420px !important;
    }

    /* Symptoms */
    .grid.basic-mode .card:nth-of-type(3) {
        grid-column: 1 / 2 !important;
    }

    /* Medications */
    .grid.basic-mode .card:nth-of-type(4) {
        grid-column: 2 / 3 !important;
    }

    /* Actions */
    .grid.basic-mode .card:nth-of-type(5) {
        grid-column: 3 / 4 !important;
    }

    /* Clinical Rules في صف لوحده تحت */
    .grid.basic-mode .card:nth-of-type(6) {
        grid-column: 1 / 4 !important;
        min-height: 220px !important;
    }

    /* نفس روح الكروت القديمة */
    .grid.basic-mode .card {
        border-radius: 16px !important;
        padding: 18px !important;
    }

        .grid.basic-mode .card h3 {
            font-size: 17px !important;
            color: #0f3f8c !important;
        }

    .grid.basic-mode li {
        font-size: 15px !important;
        line-height: 1.85 !important;
        padding-bottom: 14px !important;
        margin-bottom: 12px !important;
    }

    .grid.basic-mode .arText {
        font-size: 15px !important;
        line-height: 1.9 !important;
    }

    .grid.basic-mode .dose-en,
    .grid.basic-mode .dose-ar {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .grid.basic-mode .view {
        height: 36px !important;
        font-size: 13px !important;
        margin-top: 18px !important;
    }

/* ARTHROSIS يفضل زي ما هو */
.grid.arthrosis-mode {
    grid-template-columns: repeat(4, 1fr) !important;
}

    .grid.arthrosis-mode .description {
        grid-column: 1 / 5 !important;
    }

    .grid.arthrosis-mode .joint {
        grid-column: 1 / 5 !important;
    }

    .grid.arthrosis-mode #redFlagsCard {
        grid-column: 1 / 2 !important;
    }

    .grid.arthrosis-mode #rehabCard {
        grid-column: 2 / 4 !important;
    }

    .grid.arthrosis-mode #riskCard {
        grid-column: 4 / 5 !important;
    }

    .grid.arthrosis-mode #workflowCard {
        grid-column: 1 / 5 !important;
    }
/* ===== 2026-06 Stable Old UI Enhancements ===== */
/* الصفحة تتمدد طبيعي والاسكرول للصفحة كلها، مش ضغط داخلي للكروت */
.app {
    max-width: none !important;
    width: 100% !important;
    padding: 14px !important;
    gap: 14px !important;
}

/* التابات أصبحت 9 عناصر؛ نخليها واضحة وثابتة */
.tabs {
    grid-template-columns: repeat(9, minmax(110px, 1fr)) !important;
    min-height: 54px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

    .tabs button {
        min-width: 110px !important;
        min-height: 54px !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

/* نظام التابات الحقيقي */
.tab-panel {
    display: none !important;
}

    .tab-panel.active {
        display: grid !important;
    }

.full-tab-card.active {
    display: block !important;
}

/* ثبات العرض حتى لو النص قليل */
.grid,
.full-tab-card,
.footer-card,
.summary,
.top,
.tabs {
    width: 100% !important;
}

.grid {
    align-items: stretch !important;
}

.card {
    min-width: 0 !important;
    min-height: 360px !important;
    height: auto !important;
    overflow: visible !important;
}

    .card.description {
        min-height: 300px !important;
    }

    .card h3 {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
    }

    .card ul,
    .full-list {
        min-height: 230px !important;
    }

.full-card {
    min-height: 560px !important;
}

.full-list li {
    font-size: 16px !important;
    line-height: 1.9 !important;
    padding: 14px 14px 14px 20px !important;
    margin-bottom: 12px !important;
}

.full-list .arText,
.full-card .arText {
    font-size: 15.5px !important;
    line-height: 1.95 !important;
}

/* View All زر ثابت في آخر الكارت */
.view {
    margin-top: auto !important;
    height: 38px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تنسيق الخطوط والمساحات في 1366 */
@media (max-width: 1400px) {
    .app {
        padding: 12px !important;
        gap: 12px !important;
    }

    .top {
        grid-template-columns: 250px minmax(420px, 1fr) 130px !important;
    }

    .summary {
        grid-template-columns: 145px minmax(340px, 1fr) minmax(430px, 520px) !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .title h2 {
        font-size: 20px !important;
        line-height: 1.45 !important;
    }

    .title h3 {
        font-size: 19px !important;
        line-height: 1.55 !important;
    }

    .chips div {
        min-height: 60px !important;
        padding: 9px 10px !important;
    }

    .chips b {
        font-size: 12.5px !important;
    }

    .chips span {
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .grid.basic-mode {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .grid.arthrosis-mode {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .card {
        padding: 16px !important;
        min-height: 390px !important;
    }

        .card h3 {
            font-size: 17px !important;
        }

        .card li {
            font-size: 14.5px !important;
            line-height: 1.85 !important;
        }

        .card .arText,
        .dose-en,
        .dose-ar {
            font-size: 14px !important;
            line-height: 1.85 !important;
        }

    .desc-block p,
    .desc-block.ar p {
        font-size: 15px !important;
        line-height: 2 !important;
    }

    #jointProfile {
        font-size: 14px !important;
        grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) !important;
    }
}

/* 1920 وما فوق: نفس الشكل لكن أوسع وأوضح */
@media (min-width: 1700px) {
    .app {
        padding: 20px !important;
        gap: 16px !important;
    }

    .grid.basic-mode {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .grid.arthrosis-mode {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .card {
        padding: 22px !important;
        min-height: 440px !important;
    }

        .card.description {
            min-height: 330px !important;
        }

        .card li {
            font-size: 16px !important;
            line-height: 2 !important;
        }

        .card .arText,
        .dose-en,
        .dose-ar {
            font-size: 15.5px !important;
            line-height: 2 !important;
        }

    .desc-block p,
    .desc-block.ar p {
        font-size: 16px !important;
        line-height: 2.1 !important;
    }
}

/* موبايل/شاشات صغيرة فقط */
@media (max-width: 1050px) {
    .top,
    .summary,
    .grid.basic-mode,
    .grid.arthrosis-mode {
        grid-template-columns: 1fr !important;
    }

        .grid.basic-mode .description,
        .grid.arthrosis-mode .description,
        .grid.arthrosis-mode .joint,
        .grid.arthrosis-mode #redFlagsCard,
        .grid.arthrosis-mode #rehabCard,
        .grid.arthrosis-mode #riskCard,
        .grid.arthrosis-mode #workflowCard,
        .grid.basic-mode .card:nth-of-type(3),
        .grid.basic-mode .card:nth-of-type(4),
        .grid.basic-mode .card:nth-of-type(5),
        .grid.basic-mode .card:nth-of-type(6) {
            grid-column: 1 / 2 !important;
        }
}

/* Full tab content */
.rehab-full,
.workflow-full {
    display: grid;
    gap: 14px;
    min-height: 420px;
}

.rehab-phase-full {
    border: 1px solid var(--soft-line);
    border-radius: 14px;
    padding: 16px;
    background: #fbfdff;
}

    .rehab-phase-full h4 {
        margin: 0 0 10px;
        font-size: 17px;
        font-weight: 900;
        color: #0f3f8c;
    }

    .rehab-phase-full p {
        margin: 10px 0 4px;
        line-height: 1.9;
        text-align: justify;
    }

.capture-btn {
    border: 0;
    background: #16a34a;
    color: white;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    height: 38px;
}
/* ===== FINAL CLINICAL REFERENCE LAYOUT ===== */
.app {
    max-width: none !important;
    width: 100% !important;
    padding: 14px !important;
    gap: 14px !important;
}

.top {
    grid-template-columns: 280px minmax(420px, 1fr) 150px 120px !important;
    align-items: center !important;
}

.capture-btn {
    border: 0 !important;
    background: #16a34a !important;
    color: white !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    height: 38px !important;
    min-width: 140px !important;
    justify-self: end !important;
}

.tabs {
    grid-template-columns: repeat(9, minmax(112px, 1fr)) !important;
    min-height: 54px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

    .tabs button {
        min-width: 112px !important;
        min-height: 54px !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

.tab-panel {
    display: none !important;
}

    .tab-panel.active {
        display: grid !important;
    }

.full-tab-card.active {
    display: block !important;
}

.grid,
.full-tab-card,
.footer-card,
.summary,
.top,
.tabs {
    width: 100% !important;
}

.card {
    min-width: 0 !important;
    min-height: 360px !important;
    height: auto !important;
    overflow: visible !important;
}

    .card.description {
        min-height: 300px !important;
    }

    .card h3 {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 17px !important;
        color: #0f3f8c !important;
    }

    .card ul {
        min-height: 230px !important;
    }

.grid.basic-mode {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

    .grid.basic-mode .description {
        grid-column: 1 / 4 !important;
        grid-row: auto !important;
        min-height: 260px !important;
    }

    .grid.basic-mode #jointCard,
    .grid.basic-mode #redFlagsCard,
    .grid.basic-mode #riskCard,
    .grid.basic-mode #workflowCard {
        display: none !important;
    }

    .grid.basic-mode .card:not(.description) {
        min-height: 420px !important;
    }

    .grid.basic-mode .card:nth-of-type(3) {
        grid-column: 1 / 2 !important;
    }

    .grid.basic-mode .card:nth-of-type(4) {
        grid-column: 2 / 3 !important;
    }

    .grid.basic-mode .card:nth-of-type(5) {
        grid-column: 3 / 4 !important;
    }

    .grid.basic-mode .card:nth-of-type(6) {
        grid-column: 1 / 4 !important;
        min-height: 240px !important;
    }

.grid.arthrosis-mode {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

    .grid.arthrosis-mode .description {
        grid-column: 1 / 5 !important;
        grid-row: auto !important;
        min-height: 280px !important;
    }

    .grid.arthrosis-mode .joint {
        grid-column: 1 / 5 !important;
        min-height: 210px !important;
    }

    .grid.arthrosis-mode #redFlagsCard {
        grid-column: 1 / 2 !important;
    }

    .grid.arthrosis-mode #workflowCard {
        grid-column: 2 / 4 !important;
        min-height: 300px !important;
    }

    .grid.arthrosis-mode #riskCard {
        grid-column: 4 / 5 !important;
    }

.view {
    margin-top: auto !important;
    height: 38px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
}

.card li {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
    font-weight: 800 !important;
}

.card .arText,
.dose-en,
.dose-ar,
.med-warning {
    font-size: 14px !important;
    line-height: 1.85 !important;
    font-weight: 800 !important;
}

.desc-block p,
.desc-block.ar p {
    font-size: 15px !important;
    line-height: 2 !important;
}

/* Full details: old clinical table style */
.full-card {
    min-height: 560px !important;
    padding: 20px !important;
}

.clinical-table-card {
    padding: 0 !important;
    overflow: hidden !important;
}

    .clinical-table-card h3,
    .timeline-card h3,
    .alert-card h3,
    .rehab-card h3 {
        margin: 0 !important;
        padding: 18px 22px !important;
        border-bottom: 1px solid var(--line) !important;
        min-height: 58px !important;
    }

.clinical-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.clinical-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: fixed;
}

    .clinical-table th {
        background: #fbfcfe;
        color: #102033;
        font-size: 16px;
        font-weight: 900;
        padding: 18px 20px;
        border-bottom: 1px solid var(--soft-line);
        text-align: left;
    }

    .clinical-table td {
        padding: 18px 20px;
        border-bottom: 1px solid var(--soft-line);
        vertical-align: top;
        line-height: 1.9;
        font-size: 16px;
        color: #1e293b;
    }

        .clinical-table th:nth-child(1),
        .clinical-table td:nth-child(1) {
            width: 20%;
        }

        .clinical-table th:nth-child(2),
        .clinical-table td:nth-child(2) {
            width: 45%;
        }

        .clinical-table th:nth-child(3),
        .clinical-table td:nth-child(3) {
            width: 35%;
        }

    .clinical-table .row-no {
        width: 70px !important;
        color: var(--primary);
        font-weight: 900;
    }

.clinical-ar,
.inline-ar {
    direction: rtl;
    text-align: right;
    font-weight: 800;
    color: #334155;
    line-height: 1.95;
}

.inline-ar {
    margin-top: 4px;
}

.table-dose {
    font-size: 15.5px !important;
}

.warning-cell {
    color: #334155;
    font-weight: 700;
    line-height: 1.85;
}

/* Actions / Workflow timeline: close to old design */
.timeline-card {
    padding: 0 !important;
    overflow: hidden !important;
}

.clinical-timeline {
    position: relative;
    padding: 18px 28px 22px 34px;
    min-height: 420px;
}

.timeline-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 18px !important;
    padding: 0 0 18px 0 !important;
    margin: 0 !important;
}

.timeline-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-top: 8px;
    z-index: 2;
}

.timeline-line {
    position: absolute;
    left: 6px;
    top: 25px;
    bottom: 0;
    width: 2px;
    background: #dbe7f5;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-item.blue .timeline-dot {
    background: #3b82f6;
}

.timeline-item.orange .timeline-dot {
    background: #f59e0b;
}

.timeline-item.green .timeline-dot {
    background: #22c55e;
}

.timeline-item.red .timeline-dot {
    background: #ef4444;
}

.timeline-item.purple .timeline-dot {
    background: #8b5cf6;
}

.timeline-content {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--soft-line);
}

.timeline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 8px;
    color: #102033;
}

.timeline-number {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eee7ff;
    color: #6c36d9;
    font-size: 12px;
    font-weight: 900;
}

.timeline-en {
    font-size: 16px;
    line-height: 1.9;
    font-weight: 800;
    color: #1e293b;
}

.timeline-ar {
    font-size: 16px;
    margin-top: 5px;
}

.timeline-note,
.timeline-note-ar {
    margin-top: 8px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.8;
    font-weight: 800;
}

.workflow-preview .timeline-item {
    grid-template-columns: 20px 1fr !important;
    gap: 12px !important;
}

.workflow-preview .timeline-en,
.workflow-preview .timeline-ar {
    font-size: 13.5px !important;
}

/* Rules / Red Flags / Risk Rules alert blocks */
.alert-card {
    padding: 0 !important;
}

.alert-list {
    display: grid;
    gap: 12px;
    padding: 18px 24px 22px;
    min-height: 440px;
}

.severity-row {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    border-radius: 14px;
    padding: 18px 18px 18px 0;
    border-right-width: 4px;
    border-right-style: solid;
}

.severity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 8px;
    margin-left: 3px;
}

.severity-main {
    min-width: 0;
}

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

    .severity-head strong {
        display: block;
        font-size: 15px;
        font-weight: 900;
        color: #102033;
        margin-bottom: 8px;
    }

    .severity-head h4 {
        margin: 0;
        font-size: 16px;
        line-height: 1.7;
        font-weight: 900;
        color: #102033;
    }

.severity-ar {
    margin-top: 8px;
    font-size: 17px;
}

.severity-main p,
.severity-details-ar {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.85;
    font-weight: 800;
    color: #475569;
}

.severity-badge,
.badge {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

.rule-critical {
    background: #fff1f1 !important;
    border-right-color: #dc2626 !important;
}

.rule-high {
    background: #fff7ed !important;
    border-right-color: #f97316 !important;
}

.rule-medium {
    background: #fffbeb !important;
    border-right-color: #f59e0b !important;
}

.rule-low {
    background: #ecfdf5 !important;
    border-right-color: #10b981 !important;
}

.rule-normal {
    background: #f8fbff !important;
    border-right-color: #cbd5e1 !important;
}

.sev-critical {
    background: #ffe4e6 !important;
    color: #dc2626 !important;
}

.sev-high {
    background: #ffedd5 !important;
    color: #ea580c !important;
}

.sev-medium {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.sev-low {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.sev-normal {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

/* Rehab full phase blocks */
.rehab-card {
    padding: 0 !important;
}

.rehab-full {
    display: grid;
    gap: 14px;
    padding: 18px 22px 22px;
    min-height: 420px;
}

.rehab-phase-full {
    border: 1px solid var(--soft-line);
    border-radius: 14px;
    padding: 18px;
    background: #fbfdff;
}

    .rehab-phase-full h4 {
        margin: 0 0 10px;
        font-size: 17px;
        font-weight: 900;
        color: #0f3f8c;
    }

.phase-ar-title {
    margin-bottom: 10px;
    font-size: 16px;
}

.rehab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

    .rehab-grid b {
        color: #102033;
        font-weight: 900;
    }

    .rehab-grid p {
        margin: 8px 0;
        line-height: 1.85;
        text-align: justify;
    }

.empty-panel,
.timeline-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-weight: 900;
}

@media (max-width: 1400px) {
    .app {
        padding: 12px !important;
        gap: 12px !important;
    }

    .top {
        grid-template-columns: 250px minmax(380px, 1fr) 140px 100px !important;
    }

    .summary {
        grid-template-columns: 145px minmax(340px, 1fr) minmax(430px, 520px) !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .title h2 {
        font-size: 20px !important;
        line-height: 1.45 !important;
    }

    .title h3 {
        font-size: 19px !important;
        line-height: 1.55 !important;
    }

    .chips div {
        min-height: 60px !important;
        padding: 9px 10px !important;
    }

    .chips b {
        font-size: 12.5px !important;
    }

    .chips span {
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .card {
        padding: 16px !important;
        min-height: 390px !important;
    }

    .clinical-table td {
        font-size: 15px;
        padding: 16px;
    }

    .clinical-table th {
        font-size: 15px;
        padding: 16px;
    }

    .timeline-en, .timeline-ar {
        font-size: 15px;
    }

    .severity-ar {
        font-size: 16px;
    }

    #jointProfile {
        font-size: 14px !important;
        grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) !important;
    }
}

@media (min-width: 1700px) {
    .app {
        padding: 20px !important;
        gap: 16px !important;
    }

    .card {
        padding: 22px !important;
        min-height: 440px !important;
    }

        .card.description {
            min-height: 330px !important;
        }

        .card li {
            font-size: 16px !important;
            line-height: 2 !important;
        }

        .card .arText, .dose-en, .dose-ar {
            font-size: 15.5px !important;
            line-height: 2 !important;
        }

    .desc-block p, .desc-block.ar p {
        font-size: 16px !important;
        line-height: 2.1 !important;
    }
}

@media (max-width: 1050px) {
    .top,
    .summary,
    .grid.basic-mode,
    .grid.arthrosis-mode,
    .rehab-grid {
        grid-template-columns: 1fr !important;
    }

        .grid.basic-mode .description,
        .grid.arthrosis-mode .description,
        .grid.arthrosis-mode .joint,
        .grid.arthrosis-mode #redFlagsCard,
        .grid.arthrosis-mode #workflowCard,
        .grid.arthrosis-mode #riskCard,
        .grid.basic-mode .card:nth-of-type(3),
        .grid.basic-mode .card:nth-of-type(4),
        .grid.basic-mode .card:nth-of-type(5),
        .grid.basic-mode .card:nth-of-type(6) {
            grid-column: 1 / 2 !important;
        }
}

/* ===== Clinical readable final tuning ===== */
:root {
    --clinical-font-size: 15px;
    --clinical-line-height: 1.85;
}

body,
button,
input,
select,
table {
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-weight: 700;
}

.app {
    background: transparent;
}

.top h1,
.title h2,
.title h3,
.card h3,
.tabs button,
.clinical-table th,
.clinical-table strong,
.timeline-title,
.timeline-main-line,
.priority-badge,
.severity-badge,
.badge {
    font-weight: 900 !important;
}

/* Keep typography consistent: avoid random ultra-bold paragraphs */
.desc-block p,
.card li,
.card .arText,
.dose-en,
.dose-ar,
.med-warning,
.clinical-table td,
.clinical-ar,
.timeline-note,
.timeline-note-ar,
.rehab-grid p,
.rehab-phase-full {
    font-weight: 700 !important;
}

/* Make main text clearly readable on 1366 without visual noise */
.card li,
.card .arText,
.dose-en,
.dose-ar,
.med-warning {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
}

.desc-block p,
.desc-block.ar p {
    font-size: 15px !important;
    line-height: 2.05 !important;
    color: #102033 !important;
}

/* Overview cards: fixed but not empty-looking */
.grid.basic-mode .card:not(.description),
.grid.arthrosis-mode .card:not(.description):not(.joint) {
    min-height: 390px !important;
}

.grid.arthrosis-mode #workflowCard {
    min-height: 390px !important;
}

/* Full tabs use the old clinical table style */
.clinical-table-card,
.full-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

    .full-card h3,
    .clinical-table-card h3,
    .timeline-card h3,
    .alert-card h3,
    .rehab-card h3 {
        min-height: 64px !important;
        margin: 0 !important;
        padding: 18px 22px !important;
        border-bottom: 1px solid var(--line) !important;
        background: linear-gradient(90deg, #ffffff, #fbfdff) !important;
        color: #0f172a !important;
        font-size: 18px !important;
    }

.clinical-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.clinical-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

    .clinical-table th {
        background: #fbfcfe;
        color: #102033;
        font-size: 15px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .clinical-table td {
        color: #1e293b;
        font-size: var(--clinical-font-size);
        line-height: var(--clinical-line-height);
        padding: 16px 18px;
        border-bottom: 1px solid var(--soft-line);
        vertical-align: middle;
    }

    .clinical-table tr:hover td {
        background: #f8fbff;
    }

    .clinical-table .clinical-ar,
    .inline-ar {
        direction: rtl;
        text-align: right;
        color: #334155;
        font-size: 15px;
        line-height: 1.9;
        margin-top: 4px;
    }

/* Symptoms: old two-column style */
.priority-cell {
    width: 150px;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    height: 34px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

    .priority-badge.high {
        background: #ffe4e6;
        color: #e11d48;
    }

    .priority-badge.clinical {
        background: #fff1d6;
        color: #d97706;
    }

.preview-priority.high {
    display: inline-flex;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffe4e6;
    color: #e11d48;
    font-size: 12px;
    font-weight: 900;
}

.symptom-cell strong,
.rule-title-en {
    display: block;
    color: #102033;
    font-size: 15.5px;
    line-height: 1.8;
}

/* Medication table: old compact style */
#medicationsAll .clinical-table th:nth-child(1) {
    width: 22%;
}

#medicationsAll .clinical-table th:nth-child(2) {
    width: 45%;
}

#medicationsAll .clinical-table th:nth-child(3) {
    width: 33%;
}

.table-dose {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #1d4ed8 !important;
    margin: 0 0 5px !important;
}

.dose-ar.table-dose {
    color: #334155 !important;
    text-align: right !important;
}

.warning-cell {
    color: #334155;
    font-weight: 700;
    line-height: 1.85;
}

/* Rules / red flags / risk tables */
.severity-cell {
    width: 130px;
}

.rule-cell strong {
    display: block;
    color: #0f172a;
    margin-bottom: 4px;
}

.severity-badge,
.badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 28px;
    padding: 0 10px !important;
    font-size: 12px !important;
}

/* Actions and workflow: old clinical timeline style */
.timeline-card {
    padding: 0 !important;
}

.clinical-timeline {
    position: relative;
    padding: 18px 24px 24px 42px;
    min-height: 520px;
    background: #fff;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    padding: 0 0 18px 0;
    margin: 0;
}

.timeline-dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 7px;
    z-index: 2;
}

.timeline-line {
    position: absolute;
    left: 5px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #dbe7f5;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-item.blue .timeline-dot {
    background: #3b82f6;
}

.timeline-item.orange .timeline-dot {
    background: #f59e0b;
}

.timeline-item.green .timeline-dot {
    background: #22c55e;
}

.timeline-item.red .timeline-dot {
    background: #ef4444;
}

.timeline-item.purple .timeline-dot {
    background: #8b5cf6;
}

.timeline-content {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--soft-line);
}

.timeline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #102033;
    font-size: 14px;
    margin-bottom: 6px;
}

.timeline-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #eee7ff;
    color: #6c36d9;
    font-size: 12px;
    font-weight: 900;
}

.timeline-main-line {
    color: #102033;
    font-size: 15px;
    line-height: 1.9;
}

.timeline-ar-inline {
    direction: rtl;
    color: #334155;
    font-weight: 900;
}

.timeline-note,
.timeline-note-ar {
    margin-top: 8px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.75;
}

.timeline-note-ar {
    direction: rtl;
    text-align: right;
}

/* Overview workflow preview uses same compact timeline */
.workflow-preview.clinical-timeline,
#workflow.workflow-preview {
    padding: 4px 6px 0 18px !important;
    min-height: auto !important;
}

#workflow .timeline-main-line,
#actions .timeline-main-line {
    font-size: 14.5px;
}

/* Header and tabs sizing for 1366 */
@media (max-width: 1400px) {
    .app {
        padding: 10px !important;
        gap: 10px !important;
    }

    .top {
        grid-template-columns: 240px minmax(360px, 1fr) 136px 96px !important;
        gap: 10px !important;
    }

        .top h1 {
            font-size: 22px !important;
        }

    .summary {
        grid-template-columns: 145px minmax(320px, 1fr) minmax(405px, 500px) !important;
        padding: 14px !important;
    }

    .icd {
        height: 70px !important;
        font-size: 34px !important;
    }

    .title h2 {
        font-size: 20px !important;
    }

    .title h3 {
        font-size: 21px !important;
    }

    .tabs button {
        font-size: 13px !important;
    }

    .full-card h3,
    .clinical-table-card h3,
    .timeline-card h3,
    .alert-card h3,
    .rehab-card h3 {
        min-height: 58px !important;
        font-size: 17px !important;
        padding: 16px 20px !important;
    }

    .clinical-table th,
    .clinical-table td {
        font-size: 14.5px !important;
        padding: 14px 16px !important;
    }

    .clinical-table .clinical-ar,
    .inline-ar {
        font-size: 14.5px !important;
    }

    .timeline-main-line {
        font-size: 14.5px !important;
    }

    .timeline-note,
    .timeline-note-ar {
        font-size: 13px !important;
    }
}

/* ===== V3: Theme + Smart Search + cleaner typography ===== */
.top {
    grid-template-columns: 280px minmax(420px, 1fr) 140px 48px !important;
    align-items: start !important;
}

/*.search-shell {
    position: relative;
    width: min(760px, 100%);
    justify-self: center;
}*/
.search-shell {
    position: relative !important;
    overflow: visible !important;
}

.search {
    max-width: none !important;
    width: 100% !important;
    height: 42px !important;
}

    .search select {
        width: 145px !important;
        font-weight: 700 !important;
    }

    .search input {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .search button {
        width: 105px !important;
        font-weight: 800 !important;
    }

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    box-shadow: var(--shadow);
}

/*.search-suggestions {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    z-index: 5000;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    max-height: 370px;
    overflow-y: auto;
}*/
.search-suggestions {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16) !important;
}

.suggestion-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--soft-line);
    cursor: pointer;
    background: var(--card);
}

    .suggestion-item:hover,
    .suggestion-item.active {
        background: #eef5ff;
    }

.suggestion-code {
    color: var(--primary-dark);
    font-weight: 900;
    font-size: 16px;
}

.suggestion-main {
    min-width: 0;
}

.suggestion-en {
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
}

.suggestion-ar {
    margin-top: 3px;
    direction: rtl;
    text-align: right;
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.55;
}

.suggestion-type {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    background: #eaf2ff;
    border: 1px solid #cfe0ff;
    padding: 5px 9px;
    border-radius: 999px;
}

.suggestion-empty {
    padding: 18px;
    text-align: center;
    font-weight: 800;
    color: var(--muted);
}

.search mark,
.suggestion-item mark {
    background: #fff3b0;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* Consistent clinical typography */
body,
button,
input,
select,
table {
    font-weight: 600 !important;
}

.top h1,
.title h2,
.title h3,
.card h3,
.tabs button,
.clinical-table th {
    font-weight: 800 !important;
}

.clinical-table strong,
.timeline-title strong,
.timeline-main-line,
.card li b,
.card li strong {
    font-weight: 700 !important;
}

.desc-block p,
.card li,
.card .arText,
.clinical-table td,
.clinical-ar,
.timeline-note,
.timeline-note-ar,
.rehab-grid p,
.rehab-phase-full,
.warning-cell,
.dose-en,
.dose-ar,
.med-warning {
    font-weight: 600 !important;
}

/* Dark mode */
body.dark-mode {
    --bg: #0f172a;
    --card: #111827;
    --text: #e5edf8;
    --muted: #a7b4c6;
    --line: #263548;
    --soft-line: #1f2a3a;
    --primary: #60a5fa;
    --primary-dark: #8ec5ff;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    background: linear-gradient(180deg, #0b1220 0%, #111827 100%) !important;
    color: var(--text) !important;
}

    body.dark-mode .summary,
    body.dark-mode .card,
    body.dark-mode .tabs,
    body.dark-mode .footer-card,
    body.dark-mode .search select,
    body.dark-mode .search input,
    body.dark-mode .clinical-table,
    body.dark-mode .clinical-table th,
    body.dark-mode .clinical-table td,
    body.dark-mode .theme-toggle,
    body.dark-mode .search-suggestions,
    body.dark-mode .suggestion-item {
        background: var(--card) !important;
        color: var(--text) !important;
        border-color: var(--line) !important;
    }

        body.dark-mode .top h1,
        body.dark-mode .title h2,
        body.dark-mode .title h3,
        body.dark-mode .card h3,
        body.dark-mode .clinical-table strong,
        body.dark-mode .timeline-main-line,
        body.dark-mode .suggestion-en {
            color: var(--text) !important;
        }

    body.dark-mode .desc-block p,
    body.dark-mode .desc-block.ar p,
    body.dark-mode .clinical-ar,
    body.dark-mode .arText,
    body.dark-mode .suggestion-ar,
    body.dark-mode .top p,
    body.dark-mode .footer-card {
        color: var(--muted) !important;
    }

    body.dark-mode .suggestion-item:hover,
    body.dark-mode .suggestion-item.active {
        background: #17233a !important;
    }

    body.dark-mode .icd-active {
        background: linear-gradient(135deg, #09291a, #111827) !important;
    }

    body.dark-mode .chip-active {
        background: #09291a !important;
    }

    body.dark-mode .rule-critical {
        background: #33171b !important;
    }

    body.dark-mode .rule-high {
        background: #332113 !important;
    }

    body.dark-mode .rule-medium {
        background: #302912 !important;
    }

    body.dark-mode .rule-low {
        background: #10291e !important;
    }

    body.dark-mode .rule-normal {
        background: #172033 !important;
    }

    body.dark-mode .phase,
    body.dark-mode .rehab-phase-full {
        background: #172033 !important;
        border-color: var(--line) !important;
        color: var(--text) !important;
    }

    body.dark-mode .capture-btn {
        background: #16a34a !important;
        color: white !important;
    }

@media (max-width: 1400px) {
    .top {
        grid-template-columns: 240px minmax(390px, 1fr) 130px 46px !important;
        gap: 10px !important;
    }

    .search-shell {
        width: min(620px, 100%) !important;
    }

    .search select {
        width: 125px !important;
    }

    .search button {
        width: 92px !important;
    }

    .suggestion-item {
        grid-template-columns: 82px 1fr;
    }

    .suggestion-type {
        display: none;
    }
}

/* ===== V4: New screen search without dropdown + polished dark mode ===== */
.search-label {
    width: 145px;
    min-width: 145px;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-right: 0;
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px 0 0 10px;
}

.search input {
    border-radius: 0 !important;
}

.search-suggestions {
    position: static !important;
    margin-top: 10px;
    width: 100%;
    max-height: 360px;
    border-radius: 16px;
}

    .search-suggestions.hidden {
        display: none !important;
    }

.suggestion-item {
    grid-template-columns: 92px minmax(0, 1fr) 92px;
}

html.dark-mode,
body.dark-mode {
    background: #0b1220 !important;
}

body.dark-mode {
    --bg: #0b1220;
    --card: #111a2b;
    --card-2: #162235;
    --text: #f1f5fb;
    --text-strong: #ffffff;
    --muted: #c7d2e5;
    --muted-2: #9fb0c8;
    --line: #2d3b52;
    --soft-line: #233149;
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --shadow: 0 10px 28px rgba(0,0,0,.35);
    color: var(--text) !important;
}

    body.dark-mode .app {
        background: transparent !important;
    }

    body.dark-mode .top h1 {
        color: #dbeafe !important;
        opacity: 1 !important;
    }

    body.dark-mode .top p {
        color: #9fb0c8 !important;
        opacity: 1 !important;
    }

    body.dark-mode .summary,
    body.dark-mode .tabs,
    body.dark-mode .footer-card,
    body.dark-mode .card,
    body.dark-mode .clinical-table-card,
    body.dark-mode .timeline-card,
    body.dark-mode .alert-card,
    body.dark-mode .rehab-card {
        background: #111a2b !important;
        border-color: #2d3b52 !important;
        color: #f1f5fb !important;
    }

    body.dark-mode .summary {
        background: linear-gradient(135deg, #111a2b 0%, #121d30 100%) !important;
    }

    body.dark-mode .tabs {
        background: #111a2b !important;
    }

        body.dark-mode .tabs button {
            color: #c7d2e5 !important;
            opacity: 1 !important;
        }

            body.dark-mode .tabs button.active {
                color: #93c5fd !important;
                border-bottom-color: #60a5fa !important;
            }

    body.dark-mode .title h2,
    body.dark-mode .title h3,
    body.dark-mode .card h3,
    body.dark-mode .full-card h3,
    body.dark-mode .clinical-table-card h3,
    body.dark-mode .timeline-card h3,
    body.dark-mode .alert-card h3,
    body.dark-mode .rehab-card h3 {
        color: #f8fbff !important;
        background: #111a2b !important;
        opacity: 1 !important;
    }

    body.dark-mode .full-card h3,
    body.dark-mode .clinical-table-card h3,
    body.dark-mode .timeline-card h3,
    body.dark-mode .alert-card h3,
    body.dark-mode .rehab-card h3 {
        background: linear-gradient(90deg, #162235 0%, #111a2b 100%) !important;
        border-bottom-color: #2d3b52 !important;
    }

    body.dark-mode .desc-block p,
    body.dark-mode .desc-block.ar p,
    body.dark-mode .card li,
    body.dark-mode .card li b,
    body.dark-mode .card li strong,
    body.dark-mode .arText,
    body.dark-mode .clinical-table td,
    body.dark-mode .clinical-table strong,
    body.dark-mode .clinical-ar,
    body.dark-mode .inline-ar,
    body.dark-mode .timeline-main-line,
    body.dark-mode .timeline-title,
    body.dark-mode .timeline-title strong,
    body.dark-mode .timeline-note,
    body.dark-mode .timeline-note-ar,
    body.dark-mode .rehab-grid p,
    body.dark-mode .rehab-grid b,
    body.dark-mode .phase-ar-title,
    body.dark-mode .warning-cell {
        color: #e5edf8 !important;
        opacity: 1 !important;
    }

    body.dark-mode .desc-block p,
    body.dark-mode .desc-block.ar p {
        color: #dce8f7 !important;
    }

    body.dark-mode .card li small,
    body.dark-mode .timeline-note,
    body.dark-mode .timeline-note-ar {
        color: #b7c5d9 !important;
    }

    body.dark-mode .clinical-table,
    body.dark-mode .clinical-table th,
    body.dark-mode .clinical-table td {
        background: #111a2b !important;
        border-color: #2d3b52 !important;
    }

        body.dark-mode .clinical-table th {
            background: #162235 !important;
            color: #f1f5fb !important;
        }

        body.dark-mode .clinical-table tr:hover td {
            background: #18263b !important;
        }

        body.dark-mode .clinical-table .clinical-ar,
        body.dark-mode .inline-ar,
        body.dark-mode .dose-ar.table-dose {
            color: #cbd7e8 !important;
        }

    body.dark-mode .dose-en,
    body.dark-mode .dose-en.table-dose {
        color: #7db7ff !important;
    }

    body.dark-mode .med-warning,
    body.dark-mode .warning-text {
        background: #2d220d !important;
        border-color: #6b4c11 !important;
        color: #fbbf24 !important;
    }

    body.dark-mode .search-label,
    body.dark-mode .search input,
    body.dark-mode .search button,
    body.dark-mode .theme-toggle,
    body.dark-mode .search-suggestions,
    body.dark-mode .suggestion-item {
        background: #111a2b !important;
        border-color: #2d3b52 !important;
        color: #f1f5fb !important;
    }

        body.dark-mode .search input::placeholder {
            color: #8ea1ba !important;
        }

    body.dark-mode .search button,
    body.dark-mode .capture-btn {
        color: #fff !important;
    }

    body.dark-mode .suggestion-item:hover,
    body.dark-mode .suggestion-item.active {
        background: #1c2b42 !important;
    }

    body.dark-mode .suggestion-en,
    body.dark-mode .suggestion-code {
        color: #f1f5fb !important;
    }

    body.dark-mode .suggestion-ar,
    body.dark-mode .suggestion-empty {
        color: #c7d2e5 !important;
    }

    body.dark-mode .suggestion-type {
        background: #17375d !important;
        border-color: #255d9d !important;
        color: #bfdbfe !important;
    }

    body.dark-mode .chips div {
        background: #162235 !important;
        border-color: #2d3b52 !important;
    }

    body.dark-mode .chips b {
        color: #93c5fd !important;
    }

    body.dark-mode .chips span {
        color: #dbeafe !important;
    }

    body.dark-mode .chip-active {
        background: #052e1a !important;
        border-color: #16a34a !important;
    }

        body.dark-mode .chip-active b,
        body.dark-mode .chip-active span {
            color: #4ade80 !important;
        }

    body.dark-mode .icd-active {
        background: linear-gradient(135deg, #062b19, #0f172a) !important;
        border-color: #16a34a !important;
        color: #22c55e !important;
    }

    body.dark-mode .view {
        background: #f8fbff !important;
        color: #2563eb !important;
        border-color: #dbe7f5 !important;
    }

    body.dark-mode .timeline-content {
        border-bottom-color: #2d3b52 !important;
    }

    body.dark-mode .timeline-line {
        background: #32445f !important;
    }

    body.dark-mode .timeline-number {
        background: #2d215f !important;
        color: #ddd6fe !important;
    }

    body.dark-mode .rehab-phase-full,
    body.dark-mode .phase {
        background: #162235 !important;
        border-color: #2d3b52 !important;
        color: #e5edf8 !important;
    }

        body.dark-mode .rehab-phase-full h4 {
            color: #93c5fd !important;
        }

    body.dark-mode .rule-critical {
        background: #3a171d !important;
        border-right-color: #f43f5e !important;
    }

    body.dark-mode .rule-high {
        background: #342111 !important;
        border-right-color: #fb923c !important;
    }

    body.dark-mode .rule-medium {
        background: #302811 !important;
        border-right-color: #facc15 !important;
    }

    body.dark-mode .rule-low {
        background: #102a1d !important;
        border-right-color: #22c55e !important;
    }

    body.dark-mode .rule-normal {
        background: #172235 !important;
        border-right-color: #64748b !important;
    }

    body.dark-mode .sev-critical {
        background: #ffe4e6 !important;
        color: #be123c !important;
    }

    body.dark-mode .sev-high {
        background: #ffedd5 !important;
        color: #ea580c !important;
    }

    body.dark-mode .sev-medium,
    body.dark-mode .priority-badge.clinical {
        background: #fef3c7 !important;
        color: #b45309 !important;
    }

    body.dark-mode .sev-low {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    body.dark-mode .sev-normal {
        background: #e2e8f0 !important;
        color: #334155 !important;
    }

    body.dark-mode .priority-badge.high,
    body.dark-mode .preview-priority.high {
        background: #ffe4e6 !important;
        color: #e11d48 !important;
    }

    body.dark-mode .footer-card {
        color: #c7d2e5 !important;
    }

    body.dark-mode .footer-version,
    body.dark-mode .footer-separator {
        color: #93a4bb !important;
    }

@media (max-width: 1400px) {
    .search-label {
        width: 125px;
        min-width: 125px;
    }
}


/* ===== V6 FIX: stable buttons/search + readable dark mode ===== */
.search-label {
    width: 145px;
    border: 1px solid var(--line);
    border-right: 0;
    background: white;
    color: #102033;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
    outline: none;
    display: flex;
    align-items: center;
    border-radius: 10px 0 0 10px;
    flex-shrink: 0;
}

.search input#txtSearch {
    border-radius: 0 !important;
}

.search-suggestions {
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 14px !important;
}

.suggestion-empty small {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    opacity: .8;
}

/* smaller gap in Symptoms full table */
#symptomsAll .clinical-table th:nth-child(1),
#symptomsAll .clinical-table td:nth-child(1) {
    width: 170px !important;
}

#symptomsAll .clinical-table th:nth-child(2),
#symptomsAll .clinical-table td:nth-child(2) {
    width: auto !important;
}

/* Dark mode: keep the whole page dark, not mixed white/black */
body.dark-mode {
    --bg: #0b1220;
    --card: #111827;
    --text: #f1f5f9;
    --muted: #cbd5e1;
    --line: #334155;
    --soft-line: #263244;
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    background: #0b1220 !important;
}

    body.dark-mode .app,
    body.dark-mode .top,
    body.dark-mode .summary,
    body.dark-mode .tabs,
    body.dark-mode .card,
    body.dark-mode .footer-card,
    body.dark-mode .full-card,
    body.dark-mode .clinical-table-card,
    body.dark-mode .timeline-card,
    body.dark-mode .alert-card,
    body.dark-mode .rehab-card,
    body.dark-mode .clinical-table,
    body.dark-mode .clinical-table thead,
    body.dark-mode .clinical-table tbody,
    body.dark-mode .clinical-table th,
    body.dark-mode .clinical-table td,
    body.dark-mode .rehab-phase-full,
    body.dark-mode .search-label,
    body.dark-mode .search input,
    body.dark-mode .search-suggestions,
    body.dark-mode .suggestion-item {
        background: #111827 !important;
        color: #f1f5f9 !important;
        border-color: #334155 !important;
    }

    body.dark-mode .summary,
    body.dark-mode .tabs,
    body.dark-mode .card,
    body.dark-mode .footer-card,
    body.dark-mode .full-card {
        box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
    }

        body.dark-mode .top h1,
        body.dark-mode .title h2,
        body.dark-mode .title h3,
        body.dark-mode .card h3,
        body.dark-mode .full-card h3,
        body.dark-mode .clinical-table-card h3,
        body.dark-mode .timeline-card h3,
        body.dark-mode .alert-card h3,
        body.dark-mode .rehab-card h3,
        body.dark-mode .clinical-table th,
        body.dark-mode .clinical-table strong,
        body.dark-mode .symptom-cell strong,
        body.dark-mode .rule-cell strong,
        body.dark-mode .timeline-title,
        body.dark-mode .timeline-title strong,
        body.dark-mode .timeline-main-line,
        body.dark-mode .suggestion-en {
            color: #f8fafc !important;
        }

    body.dark-mode .desc-block p,
    body.dark-mode .desc-block.ar p,
    body.dark-mode .clinical-table td,
    body.dark-mode .clinical-ar,
    body.dark-mode .inline-ar,
    body.dark-mode .arText,
    body.dark-mode .timeline-note,
    body.dark-mode .timeline-note-ar,
    body.dark-mode .rehab-grid p,
    body.dark-mode .warning-cell,
    body.dark-mode .suggestion-ar,
    body.dark-mode .top p,
    body.dark-mode .chips span {
        color: #dbeafe !important;
        opacity: 1 !important;
    }

    body.dark-mode .dose-en,
    body.dark-mode .table-dose {
        color: #60a5fa !important;
        opacity: 1 !important;
    }

    body.dark-mode .dose-ar,
    body.dark-mode .med-warning {
        opacity: 1 !important;
    }

    body.dark-mode .clinical-table tr:hover td,
    body.dark-mode .suggestion-item:hover,
    body.dark-mode .suggestion-item.active {
        background: #172033 !important;
    }

    body.dark-mode .rule-critical {
        background: #3b1117 !important;
        border-right-color: #fb7185 !important;
    }

    body.dark-mode .rule-high {
        background: #331b0b !important;
        border-right-color: #fb923c !important;
    }

    body.dark-mode .rule-medium {
        background: #2e260c !important;
        border-right-color: #fbbf24 !important;
    }

    body.dark-mode .rule-low {
        background: #0e2a1c !important;
        border-right-color: #34d399 !important;
    }

    body.dark-mode .rule-normal {
        background: #172033 !important;
        border-right-color: #64748b !important;
    }

    body.dark-mode .severity-badge.sev-critical,
    body.dark-mode .badge.sev-critical {
        background: #ffe4e6 !important;
        color: #be123c !important;
    }

    body.dark-mode .severity-badge.sev-high,
    body.dark-mode .badge.sev-high {
        background: #ffedd5 !important;
        color: #c2410c !important;
    }

    body.dark-mode .severity-badge.sev-medium,
    body.dark-mode .badge.sev-medium {
        background: #fef3c7 !important;
        color: #b45309 !important;
    }

    body.dark-mode .severity-badge.sev-low,
    body.dark-mode .badge.sev-low {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    body.dark-mode .severity-badge.sev-normal,
    body.dark-mode .badge.sev-normal {
        background: #e2e8f0 !important;
        color: #334155 !important;
    }

    body.dark-mode .view {
        background: #f8fafc !important;
        color: #2563eb !important;
        border-color: #cbd5e1 !important;
    }

    body.dark-mode .theme-toggle {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }

    body.dark-mode .search button,
    body.dark-mode .capture-btn {
        color: white !important;
    }

body:not(.dark-mode) {
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%) !important;
}

@media (max-width: 1400px) {
    .search-label {
        width: 125px !important;
    }

    #symptomsAll .clinical-table th:nth-child(1),
    #symptomsAll .clinical-table td:nth-child(1) {
        width: 145px !important;
    }
}

/* ===== V7 SEARCH + DARK FIX ===== */
body:not(.dark-mode) {
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%) !important;
    color: #102033 !important;
}

.search-shell {
    position: relative !important;
    z-index: 10000 !important;
}

.search-suggestions {
    position: static !important;
    display: block;
    margin-top: 10px !important;
    width: 100% !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #dbe7f5 !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
}

    .search-suggestions.hidden {
        display: none !important;
    }

.suggestion-item {
    grid-template-columns: 92px minmax(0, 1fr) 88px !important;
    background: #fff !important;
}

    .suggestion-item:hover,
    .suggestion-item.active {
        background: #eef5ff !important;
    }

.suggestion-code {
    color: #1557d4 !important;
}

.suggestion-en {
    color: #102033 !important;
}

.suggestion-ar {
    color: #334155 !important;
}

body.dark-mode {
    --bg: #0b1220;
    --card: #111c2e;
    --text: #eef6ff;
    --muted: #c5d3e6;
    --line: #334760;
    --soft-line: #26384f;
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    background: #0b1220 !important;
    color: #eef6ff !important;
}

    body.dark-mode .app {
        background: transparent !important;
    }

    body.dark-mode .summary,
    body.dark-mode .card,
    body.dark-mode .tabs,
    body.dark-mode .footer-card,
    body.dark-mode .clinical-table,
    body.dark-mode .clinical-table th,
    body.dark-mode .clinical-table td,
    body.dark-mode .search input,
    body.dark-mode .search-label,
    body.dark-mode .theme-toggle,
    body.dark-mode .search-suggestions,
    body.dark-mode .suggestion-item,
    body.dark-mode .rehab-phase-full {
        background: #111c2e !important;
        color: #eef6ff !important;
        border-color: #334760 !important;
    }

    body.dark-mode .full-card h3,
    body.dark-mode .clinical-table-card h3,
    body.dark-mode .timeline-card h3,
    body.dark-mode .alert-card h3,
    body.dark-mode .rehab-card h3 {
        background: #132137 !important;
        color: #eef6ff !important;
        border-color: #334760 !important;
    }

    body.dark-mode .top h1,
    body.dark-mode .title h2,
    body.dark-mode .title h3,
    body.dark-mode .card h3,
    body.dark-mode .clinical-table strong,
    body.dark-mode .clinical-table th,
    body.dark-mode .timeline-title,
    body.dark-mode .timeline-title strong,
    body.dark-mode .timeline-main-line,
    body.dark-mode .rule-title-en,
    body.dark-mode .suggestion-en,
    body.dark-mode .symptom-cell strong,
    body.dark-mode .rule-cell strong {
        color: #f8fbff !important;
    }

    body.dark-mode .desc-block p,
    body.dark-mode .desc-block.ar p,
    body.dark-mode .clinical-ar,
    body.dark-mode .inline-ar,
    body.dark-mode .arText,
    body.dark-mode .timeline-note,
    body.dark-mode .timeline-note-ar,
    body.dark-mode .warning-cell,
    body.dark-mode .suggestion-ar,
    body.dark-mode .top p,
    body.dark-mode .footer-card,
    body.dark-mode .rehab-grid p,
    body.dark-mode .dose-ar {
        color: #c5d3e6 !important;
    }

    body.dark-mode .dose-en,
    body.dark-mode .table-dose {
        color: #7db7ff !important;
    }

    body.dark-mode .med-warning {
        color: #ffd166 !important;
        background: rgba(245, 158, 11, .18) !important;
        border-color: rgba(245, 158, 11, .38) !important;
    }

    body.dark-mode .clinical-table tr:hover td,
    body.dark-mode .suggestion-item:hover,
    body.dark-mode .suggestion-item.active {
        background: #172842 !important;
    }

    body.dark-mode .timeline-content {
        border-color: #334760 !important;
    }

    body.dark-mode .timeline-line {
        background: #38516f !important;
    }

    body.dark-mode .search button {
        color: #fff !important;
    }

    body.dark-mode .view {
        background: #eaf2ff !important;
        color: #1557d4 !important;
    }

    body.dark-mode .rule-critical {
        background: rgba(220, 38, 38, .22) !important;
    }

    body.dark-mode .rule-high {
        background: rgba(249, 115, 22, .20) !important;
    }

    body.dark-mode .rule-medium {
        background: rgba(245, 158, 11, .18) !important;
    }

    body.dark-mode .rule-low {
        background: rgba(16, 185, 129, .18) !important;
    }

    body.dark-mode .rule-normal {
        background: #16243a !important;
    }

/* Symptoms columns: less empty gap */
#symptomsAll .clinical-table {
    table-layout: auto !important;
}

    #symptomsAll .clinical-table th:first-child,
    #symptomsAll .clinical-table td:first-child {
        width: 150px !important;
        max-width: 150px !important;
    }

    #symptomsAll .clinical-table th:nth-child(2),
    #symptomsAll .clinical-table td:nth-child(2) {
        width: auto !important;
    }


/* ===== V8 final search + dark readability fixes ===== */
body:not(.dark-mode) {
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%) !important;
}

.search-shell {
    position: relative !important;
    overflow: visible !important;
    z-index: 99999 !important;
}

.search-suggestions {
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    display: block !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #c8d7ec !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .20) !important;
}

    .search-suggestions.hidden {
        display: none !important;
    }

.suggestion-empty {
    padding: 16px 18px !important;
    color: #334155 !important;
    background: #ffffff !important;
    font-weight: 800 !important;
}

.suggestion-item {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 86px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf2f8 !important;
    cursor: pointer !important;
}

    .suggestion-item:hover,
    .suggestion-item.active {
        background: #eef5ff !important;
    }

.suggestion-code {
    color: #1557d4 !important;
    font-weight: 900 !important;
}

.suggestion-en {
    color: #102033 !important;
    font-weight: 800 !important;
}

.suggestion-ar {
    color: #334155 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* Symptoms table narrower first column */
#symptomsAll .clinical-table th:nth-child(1),
#symptomsAll .clinical-table td:nth-child(1) {
    width: 190px !important;
}

#symptomsAll .clinical-table th:nth-child(2),
#symptomsAll .clinical-table td:nth-child(2) {
    width: auto !important;
}

@media (max-width: 1400px) {
    #symptomsAll .clinical-table th:nth-child(1),
    #symptomsAll .clinical-table td:nth-child(1) {
        width: 150px !important;
    }
}

/* Dark mode readable but not changing light mode */
body.dark-mode {
    --bg: #0b1220 !important;
    --card: #111c2e !important;
    --text: #f1f7ff !important;
    --muted: #d3deec !important;
    --line: #38506b !important;
    --soft-line: #2a3c53 !important;
    background: #0b1220 !important;
    color: var(--text) !important;
}

    body.dark-mode .app {
        background: transparent !important;
    }

    body.dark-mode .summary,
    body.dark-mode .tabs,
    body.dark-mode .card,
    body.dark-mode .footer-card,
    body.dark-mode .clinical-table,
    body.dark-mode .clinical-table th,
    body.dark-mode .clinical-table td,
    body.dark-mode .search input,
    body.dark-mode .search-label,
    body.dark-mode .theme-toggle {
        background: #111c2e !important;
        color: #f1f7ff !important;
        border-color: #38506b !important;
    }

        body.dark-mode .full-card h3,
        body.dark-mode .clinical-table-card h3,
        body.dark-mode .timeline-card h3,
        body.dark-mode .alert-card h3,
        body.dark-mode .rehab-card h3,
        body.dark-mode .card h3 {
            background: #111c2e !important;
            color: #f1f7ff !important;
            border-color: #38506b !important;
        }

        body.dark-mode .clinical-table th {
            background: #132037 !important;
            color: #ffffff !important;
        }

        body.dark-mode .clinical-table td,
        body.dark-mode .timeline-content,
        body.dark-mode .timeline-main-line,
        body.dark-mode .timeline-title,
        body.dark-mode .rule-cell strong,
        body.dark-mode .symptom-cell strong,
        body.dark-mode .warning-cell {
            color: #eef6ff !important;
            opacity: 1 !important;
        }

    body.dark-mode .clinical-ar,
    body.dark-mode .inline-ar,
    body.dark-mode .timeline-ar-inline,
    body.dark-mode .timeline-note,
    body.dark-mode .timeline-note-ar,
    body.dark-mode .arText,
    body.dark-mode .dose-ar,
    body.dark-mode .desc-block p,
    body.dark-mode .desc-block.ar p {
        color: #d3deec !important;
        opacity: 1 !important;
    }

    body.dark-mode .rule-title-en,
    body.dark-mode .dose-en,
    body.dark-mode .table-dose {
        color: #77b7ff !important;
        opacity: 1 !important;
    }

    body.dark-mode .clinical-timeline,
    body.dark-mode .rehab-full,
    body.dark-mode .rehab-phase-full {
        background: #111c2e !important;
        color: #eef6ff !important;
        border-color: #38506b !important;
    }

    body.dark-mode .timeline-content {
        border-bottom-color: #38506b !important;
    }

    body.dark-mode .line,
    body.dark-mode .timeline-line {
        background: #48627f !important;
    }

    body.dark-mode .search-suggestions {
        background: #111c2e !important;
        border-color: #38506b !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.45) !important;
    }

    body.dark-mode .suggestion-empty,
    body.dark-mode .suggestion-item {
        background: #111c2e !important;
        color: #f1f7ff !important;
        border-color: #2a3c53 !important;
    }

        body.dark-mode .suggestion-item:hover,
        body.dark-mode .suggestion-item.active {
            background: #172a45 !important;
        }

    body.dark-mode .suggestion-code {
        color: #77b7ff !important;
    }

    body.dark-mode .suggestion-en {
        color: #ffffff !important;
    }

    body.dark-mode .suggestion-ar {
        color: #d3deec !important;
        opacity: 1 !important;
    }

/* ===== V9 FINAL: 12 tabs in one line - keep existing UI shape ===== */
.tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 54px !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

    .tabs button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 54px !important;
        height: 54px !important;
        padding: 0 4px !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--text) !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        cursor: pointer !important;
    }

        .tabs button:hover {
            background: rgba(37, 109, 240, 0.06) !important;
            color: var(--primary-dark) !important;
        }

        .tabs button.active {
            color: var(--primary-dark) !important;
            border-bottom-color: var(--primary) !important;
            background: transparent !important;
        }

@media (max-width: 1400px) {
    .tabs {
        min-height: 50px !important;
    }

        .tabs button {
            min-height: 50px !important;
            height: 50px !important;
            padding: 0 2px !important;
            font-size: 10.5px !important;
        }
}

@media (min-width: 1700px) {
    .tabs {
        min-height: 58px !important;
    }

        .tabs button {
            min-height: 58px !important;
            height: 58px !important;
            padding: 0 6px !important;
            font-size: 13px !important;
        }
}

body.dark-mode .tabs {
    background: #111c2e !important;
    border-color: #38506b !important;
}

    body.dark-mode .tabs button {
        background: transparent !important;
        color: #d3deec !important;
    }

        body.dark-mode .tabs button:hover {
            background: #172a45 !important;
            color: #ffffff !important;
        }

        body.dark-mode .tabs button.active {
            color: #77b7ff !important;
            border-bottom-color: #60a5fa !important;
        }


/* ===== FINAL SEARCH UI ===== */

.search-shell {
    position: relative !important;
    overflow: visible !important;
}

.search-suggestions {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16) !important;
}

    .search-suggestions.hidden {
        display: none !important;
    }

.suggestion-card {
    display: grid !important;
    grid-template-columns: 120px minmax(0,1fr) 150px !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 96px !important;
    padding: 18px 22px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 16px !important;
    cursor: pointer !important;
}

    .suggestion-card:hover,
    .suggestion-card.active {
        background: #eef6ff !important;
        border-color: #93c5fd !important;
    }

.suggestion-code {
    color: #2563eb !important;
    font-size: 28px !important;
    font-weight: 900 !important;
}

.suggestion-body {
    min-width: 0 !important;
}

.suggestion-en {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.suggestion-ar {
    color: #334155 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    direction: rtl !important;
    text-align: right !important;
    margin-top: 6px !important;
}

.suggestion-badge {
    justify-self: end !important;
    min-width: 120px !important;
    padding: 12px 18px !important;
    text-align: center !important;
    color: #2563eb !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
}

.suggestion-empty {
    padding: 28px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #475569 !important;
}

.suggestion-card mark {
    background: #fef3c7 !important;
    color: #1d4ed8 !important;
    border-radius: 4px !important;
    padding: 0 3px !important;
}

/* Dark Mode */

body.dark-mode .search-suggestions {
    background: #111c2e !important;
    border-color: #38506b !important;
}

body.dark-mode .suggestion-card {
    background: #111c2e !important;
    border-color: #38506b !important;
}

    body.dark-mode .suggestion-card:hover,
    body.dark-mode .suggestion-card.active {
        background: #172a45 !important;
    }

body.dark-mode .suggestion-code {
    color: #77b7ff !important;
}

body.dark-mode .suggestion-en {
    color: #ffffff !important;
}

body.dark-mode .suggestion-ar {
    color: #d3deec !important;
}

body.dark-mode .suggestion-badge {
    background: #17375d !important;
    border-color: #255d9d !important;
    color: #bfdbfe !important;
}

/* 1366 */

@media (max-width: 1400px) {

    .search-suggestions {
        max-height: 430px !important;
        padding: 10px !important;
    }

    .suggestion-card {
        grid-template-columns: 86px minmax(0,1fr) 105px !important;
        min-height: 78px !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        margin-bottom: 9px !important;
    }

    .suggestion-code {
        font-size: 22px !important;
    }

    .suggestion-en {
        font-size: 16px !important;
    }

    .suggestion-ar {
        font-size: 16px !important;
    }

    .suggestion-badge {
        min-width: 92px !important;
        padding: 9px 10px !important;
        font-size: 13px !important;
    }
}


/* ===== V11 FINAL: Fixed Header + Summary + Tabs, content fills remaining space ===== */
html,
body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

body {
    width: 100% !important;
}

.app {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.fixed-top-area {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: inherit !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 100000 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%) !important;
}

.content-scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: inherit !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

    .content-scroll-area > .tab-panel {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

        .content-scroll-area > .tab-panel.active {
            min-height: 0 !important;
        }

    .content-scroll-area > .full-tab-card.active {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .content-scroll-area > .grid.tab-panel.active {
        flex: 0 0 auto !important;
        display: grid !important;
    }

    .content-scroll-area .full-tab-card.active > .full-card,
    .content-scroll-area .full-tab-card.active > .card {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .content-scroll-area .clinical-table-card,
    .content-scroll-area .timeline-card,
    .content-scroll-area .alert-card,
    .content-scroll-area .rehab-card {
        display: flex !important;
        flex-direction: column !important;
    }

    .content-scroll-area .clinical-table-wrap,
    .content-scroll-area .clinical-timeline,
    .content-scroll-area .alert-list,
    .content-scroll-area .rehab-full {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .content-scroll-area .empty-panel,
    .content-scroll-area .timeline-empty {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

.footer-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.dark-mode .fixed-top-area {
    background: #0b1220 !important;
}

.search-shell,
.search-suggestions {
    z-index: 999999 !important;
}

@media (max-width: 1400px) {
    .content-scroll-area {
        padding-right: 1px !important;
    }
}

/* ===== V17 FINAL: Empty tabs fill viewport, data tabs scroll naturally ===== */
html,
body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

body {
    width: 100% !important;
}

.app {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.fixed-top-area {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: inherit !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 100000 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%) !important;
}

.content-scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: inherit !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

    .content-scroll-area > .tab-panel {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

        .content-scroll-area > .tab-panel.active {
            min-height: 0 !important;
            height: auto !important;
        }

    .content-scroll-area > .grid.tab-panel.active {
        display: grid !important;
    }

    .content-scroll-area > .full-tab-card.active {
        display: block !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .content-scroll-area .full-tab-card.active > .full-card,
    .content-scroll-area .full-tab-card.active > .card {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .content-scroll-area .clinical-table-card,
    .content-scroll-area .timeline-card,
    .content-scroll-area .alert-card,
    .content-scroll-area .rehab-card {
        display: flex !important;
        flex-direction: column !important;
    }

    .content-scroll-area .clinical-table-wrap,
    .content-scroll-area .clinical-timeline,
    .content-scroll-area .alert-list,
    .content-scroll-area .rehab-full {
        flex: 0 0 auto !important;
        min-height: auto !important;
        height: auto !important;
    }

    /* Empty full tabs only: stretch the card to the footer instead of creating an inner scroll. */
    .content-scroll-area > .full-tab-card.active:has(.clinical-table-wrap:empty),
    .content-scroll-area > .full-tab-card.active:has(.clinical-timeline:empty),
    .content-scroll-area > .full-tab-card.active:has(.alert-list:empty),
    .content-scroll-area > .full-tab-card.active:has(.rehab-full:empty),
    .content-scroll-area > .full-tab-card.active:has(.empty-panel),
    .content-scroll-area > .full-tab-card.active:has(.timeline-empty) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

        .content-scroll-area > .full-tab-card.active:has(.clinical-table-wrap:empty) > .full-card,
        .content-scroll-area > .full-tab-card.active:has(.clinical-timeline:empty) > .full-card,
        .content-scroll-area > .full-tab-card.active:has(.alert-list:empty) > .full-card,
        .content-scroll-area > .full-tab-card.active:has(.rehab-full:empty) > .full-card,
        .content-scroll-area > .full-tab-card.active:has(.empty-panel) > .full-card,
        .content-scroll-area > .full-tab-card.active:has(.timeline-empty) > .full-card,
        .content-scroll-area > .full-tab-card.active:has(.clinical-table-wrap:empty) > .card,
        .content-scroll-area > .full-tab-card.active:has(.clinical-timeline:empty) > .card,
        .content-scroll-area > .full-tab-card.active:has(.alert-list:empty) > .card,
        .content-scroll-area > .full-tab-card.active:has(.rehab-full:empty) > .card,
        .content-scroll-area > .full-tab-card.active:has(.empty-panel) > .card,
        .content-scroll-area > .full-tab-card.active:has(.timeline-empty) > .card {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
        }

        .content-scroll-area > .full-tab-card.active:has(.clinical-table-wrap:empty) .clinical-table-wrap,
        .content-scroll-area > .full-tab-card.active:has(.clinical-timeline:empty) .clinical-timeline,
        .content-scroll-area > .full-tab-card.active:has(.alert-list:empty) .alert-list,
        .content-scroll-area > .full-tab-card.active:has(.rehab-full:empty) .rehab-full,
        .content-scroll-area > .full-tab-card.active:has(.empty-panel) .clinical-table-wrap,
        .content-scroll-area > .full-tab-card.active:has(.empty-panel) .clinical-timeline,
        .content-scroll-area > .full-tab-card.active:has(.empty-panel) .alert-list,
        .content-scroll-area > .full-tab-card.active:has(.empty-panel) .rehab-full,
        .content-scroll-area > .full-tab-card.active:has(.timeline-empty) .clinical-timeline,
        .content-scroll-area > .full-tab-card.active:has(.timeline-empty) .rehab-full {
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }

    .content-scroll-area .empty-panel,
    .content-scroll-area .timeline-empty {
        min-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

.footer-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.dark-mode .fixed-top-area {
    background: #0b1220 !important;
}

.search-shell,
.search-suggestions {
    z-index: 999999 !important;
}

@media (max-width: 1400px) {
    .content-scroll-area {
        padding-right: 1px !important;
    }
}


/* Full data tabs: fill remaining page when data is short */
.full-tab-card.active {
    display: flex !important;
    flex-direction: column !important;
}

    .full-tab-card.active > .full-card,
    .full-tab-card.active > .clinical-table-card,
    .full-tab-card.active > .timeline-card,
    .full-tab-card.active > .alert-card,
    .full-tab-card.active > .rehab-card {
        min-height: calc(100vh - 405px) !important;
    }

#assessmentAll,
#followUpAll,
#educationAll,
#rehabAll {
    min-height: calc(100vh - 500px) !important;
}

/* English = Bold */
.clinical-table td > div:first-child,
.clinical-table td > strong,
.clinical-table td .en-text {
    font-weight: 600;
    color: var(--text-primary);
}

/* Arabic = Normal */
.clinical-ar,
.inline-ar {
    font-weight: 400 !important;
    color: var(--text-secondary);
    line-height: 1.9;
}

.clinical-table td > div:first-child,
.clinical-table td > strong {
    font-weight: 700;
}

.clinical-ar,
.inline-ar {
    font-weight: 400 !important;
    opacity: .92;
}

.empty-panel,
.timeline-empty,
.card ul:empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-weight: 900;
}

#descEn,
#descAr {
    color: #334155;
    font-weight: 600;
}

#nameEn {
    font-weight: 900;
}

#nameAr {
    font-weight: 700;
}
/* ===== V18: Symptom Matcher Button + Popup ===== */
.search {
    gap: 0 !important;
    align-items: stretch !important;
}

    .search #btnSearch {
        width: 98px !important;
        min-width: 98px !important;
        height: 42px !important;
        border-radius: 0 !important;
        border-left: 0 !important;
    }

.symptom-match-btn {
    height: 42px !important;
    min-width: 158px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 0 10px 10px 0 !important;
    background: linear-gradient(135deg, #1d4ed8, #0f5ee8) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

    .symptom-match-btn:hover {
        background: linear-gradient(135deg, #1557d4, #0b4bc4) !important;
    }

    .symptom-match-btn:active {
        transform: translateY(1px);
    }

.search input#txtSearch {
    min-width: 0 !important;
}

/* Modal overlay */
.symptom-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;
    background: rgba(15, 23, 42, .42) !important;
    backdrop-filter: blur(5px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}

    .symptom-modal-overlay.hidden {
        display: none !important;
    }

.symptom-modal {
    width: min(1040px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 64px) !important;
    background: #ffffff !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 22px !important;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .28) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.symptom-modal-header {
    flex: 0 0 auto !important;
    min-height: 82px !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    border-bottom: 1px solid var(--line) !important;
    background: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%) !important;
}

    .symptom-modal-header h2 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    .symptom-modal-header p {
        margin: 5px 0 0 !important;
        color: #64748b !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

.symptom-modal-close {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid var(--line) !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

    .symptom-modal-close:hover {
        background: #fff1f1 !important;
        color: #dc2626 !important;
        border-color: #fecaca !important;
    }

.symptom-picker {
    flex: 0 0 auto !important;
    padding: 22px 24px 16px !important;
    border-bottom: 1px solid var(--soft-line) !important;
}

    .symptom-picker label {
        display: block !important;
        color: #102033 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        margin-bottom: 12px !important;
    }

.symptom-input-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 110px 126px !important;
    gap: 12px !important;
    align-items: center !important;
}

    .symptom-input-row input {
        width: 100% !important;
        height: 48px !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: #102033 !important;
        padding: 0 15px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        outline: none !important;
    }

        .symptom-input-row input:focus {
            border-color: #93c5fd !important;
            box-shadow: 0 0 0 4px rgba(37, 109, 240, .10) !important;
        }

#btnAddSymptom,
#btnSearchSymptoms {
    height: 48px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

#btnAddSymptom {
    border: 0 !important;
    background: linear-gradient(135deg, #367cf6, #155ee8) !important;
    color: #ffffff !important;
}

#btnSearchSymptoms {
    border: 1px solid #bfdbfe !important;
    background: #eff6ff !important;
    color: #1557d4 !important;
}

    #btnSearchSymptoms:hover,
    #btnAddSymptom:hover {
        filter: brightness(.97) !important;
    }

.symptom-suggestions {
    margin-top: 10px !important;
    background: #ffffff !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
    max-height: 210px !important;
    overflow-y: auto !important;
}

.symptom-suggestion-item {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--soft-line) !important;
    cursor: pointer !important;
    color: #102033 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

    .symptom-suggestion-item:hover,
    .symptom-suggestion-item.active {
        background: #eef6ff !important;
        color: #1557d4 !important;
    }

.selected-head {
    margin-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

    .selected-head b {
        color: #102033 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

#btnClearSymptoms {
    border: 0 !important;
    background: transparent !important;
    color: #256df0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
}

    #btnClearSymptoms:hover {
        color: #dc2626 !important;
    }

.symptom-chips {
    min-height: 52px !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
}

.symptom-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid #bfdbfe !important;
    background: #eef6ff !important;
    color: #1557d4 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

    .symptom-chip span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .symptom-chip button {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        border: 0 !important;
        background: rgba(37, 99, 235, .12) !important;
        color: #1557d4 !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .symptom-chip button:hover {
            background: #fee2e2 !important;
            color: #dc2626 !important;
        }

.symptom-empty-state {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    background: #fbfdff !important;
}

.symptom-results-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 18px 24px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.symptom-results-head {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

    .symptom-results-head h3 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }

#symptomMatchStatus {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.symptom-match-results {
    max-height: 430px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}

.symptom-match-empty {
    min-height: 220px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    background: #fbfdff !important;
}

.symptom-match-card {
    display: grid !important;
    grid-template-columns: 100px minmax(0,1fr) 120px 90px 100px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 86px !important;
    padding: 14px 18px !important;
}

.symptom-match-code {
    color: #2563eb !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}

.symptom-match-main {
    min-width: 0 !important;
}

.symptom-match-en {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.symptom-match-ar {
    margin-top: 4px !important;
    direction: rtl !important;
    text-align: right !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

.symptom-match-score {
    justify-self: center !important;
    min-width: 92px !important;
    height: 38px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ecfdf5 !important;
    color: #15803d !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.symptom-match-open {
    width: 88px !important;
    height: 38px !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
}

    .symptom-match-open:hover {
        filter: brightness(.97) !important;
    }

@media (max-width: 1400px) {
    .search #btnSearch {
        width: 88px !important;
        min-width: 88px !important;
    }

    .symptom-match-btn {
        min-width: 136px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .symptom-modal {
        width: min(920px, calc(100vw - 32px)) !important;
        max-height: calc(100vh - 40px) !important;
    }

    .symptom-modal-header {
        min-height: 72px !important;
        padding: 16px 20px !important;
    }

        .symptom-modal-header h2 {
            font-size: 21px !important;
        }

    .symptom-picker {
        padding: 18px 20px 14px !important;
    }

    .symptom-results-section {
        padding: 16px 20px 20px !important;
    }

    .symptom-input-row {
        grid-template-columns: minmax(0, 1fr) 96px 112px !important;
        gap: 10px !important;
    }

        #btnAddSymptom,
        #btnSearchSymptoms,
        .symptom-input-row input {
            height: 44px !important;
        }

    .symptom-match-card {
        grid-template-columns: 78px minmax(0, 1fr) 100px 82px !important;
        min-height: 78px !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .symptom-match-code {
        font-size: 20px !important;
    }

    .symptom-match-en {
        font-size: 14.5px !important;
    }

    .symptom-match-ar {
        font-size: 14px !important;
    }
}

body.dark-mode .symptom-modal {
    background: #111c2e !important;
    border-color: #38506b !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
}

body.dark-mode .symptom-modal-header,
body.dark-mode .symptom-picker,
body.dark-mode .symptom-results-section {
    background: #111c2e !important;
    border-color: #38506b !important;
}

    body.dark-mode .symptom-modal-header h2,
    body.dark-mode .symptom-picker label,
    body.dark-mode .selected-head b,
    body.dark-mode .symptom-results-head h3,
    body.dark-mode .symptom-match-en,
    body.dark-mode .symptom-suggestion-item {
        color: #f1f7ff !important;
    }

    body.dark-mode .symptom-modal-header p,
    body.dark-mode #symptomMatchStatus,
    body.dark-mode .symptom-match-ar,
    body.dark-mode .symptom-empty-state,
    body.dark-mode .symptom-match-empty {
        color: #d3deec !important;
    }

body.dark-mode .symptom-modal-close,
body.dark-mode .symptom-input-row input,
body.dark-mode .symptom-suggestions,
body.dark-mode .symptom-empty-state,
body.dark-mode .symptom-match-empty,
body.dark-mode .symptom-match-card,
body.dark-mode .symptom-suggestion-item {
    background: #111c2e !important;
    border-color: #38506b !important;
}

body.dark-mode .symptom-input-row input {
    color: #f1f7ff !important;
}

    body.dark-mode .symptom-input-row input::placeholder {
        color: #8ea1ba !important;
    }

body.dark-mode .symptom-suggestion-item:hover,
body.dark-mode .symptom-suggestion-item.active,
body.dark-mode .symptom-match-card:hover {
    background: #172a45 !important;
}

body.dark-mode .symptom-chip {
    background: #17375d !important;
    border-color: #255d9d !important;
    color: #bfdbfe !important;
}

body.dark-mode .symptom-match-code {
    color: #77b7ff !important;
}


/* ===== V19 FIX: Match Symptoms button alignment + modal open support ===== */
.search {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-width: 0 !important;
}

    .search #btnSearch {
        flex: 0 0 98px !important;
        width: 98px !important;
        min-width: 98px !important;
        height: 42px !important;
        border-radius: 0 !important;
        white-space: nowrap !important;
    }

.symptom-match-btn {
    flex: 0 0 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 0 10px 10px 0 !important;
    white-space: nowrap !important;
    line-height: 42px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.search input#txtSearch {
    min-width: 0 !important;
}

.symptom-modal-overlay.hidden {
    display: none !important;
}

body.symptom-modal-open {
    overflow: hidden !important;
}

.symptom-chip {
    appearance: none !important;
}

.symptom-match-count {
    color: #2563eb !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

@media (max-width: 1400px) {
    .search #btnSearch {
        flex-basis: 88px !important;
        width: 88px !important;
        min-width: 88px !important;
    }

    .symptom-match-btn {
        flex-basis: 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        padding: 0 8px !important;
        font-size: 11.5px !important;
        line-height: 42px !important;
    }
}

@media (min-width: 1700px) {
    .symptom-match-btn {
        flex-basis: 170px !important;
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        font-size: 13px !important;
    }
}

.match-open-btn {
    min-width: 110px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: linear-gradient( 135deg, #3b82f6 0%, #2563eb 100% );
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s ease;
}

    .match-open-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37,99,235,.25);
    }

    .match-open-btn:active {
        transform: translateY(0);
    }

    .match-open-btn i {
        font-size: 12px;
    }

/* ===== V20 FIX: Symptoms Matcher Open button - primary blue style ===== */
.symptom-match-open,
.match-open-btn {
    width: 88px !important;
    min-width: 88px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #367cf6 0%, #155ee8 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

    .symptom-match-open:hover,
    .match-open-btn:hover {
        filter: brightness(.98) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
    }

    .symptom-match-open:active,
    .match-open-btn:active {
        transform: translateY(0) !important;
        box-shadow: none !important;
    }

body.dark-mode .symptom-match-open,
body.dark-mode .match-open-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
}

@media (max-width: 1400px) {
    .symptom-match-open,
    .match-open-btn {
        width: 82px !important;
        min-width: 82px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }
}


/* ===== SFDA Generic Trade Products Popup ===== */
.medication-name-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-medication-name {
    display: flex;
}

.generic-info-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 999px;
    border: 1px solid #256df0;
    background: #ffffff;
    color: #256df0;
    font-size: 12px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 109, 240, 0.10);
    padding: 0;
}

.generic-info-btn:hover {
    transform: translateY(-1px);
    background: #eff6ff;
    box-shadow: 0 7px 16px rgba(37, 109, 240, 0.18);
}



body.generic-products-open {
    overflow: hidden !important;
}

body.generic-products-open .app {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

body.generic-products-open .generic-products-overlay {
    pointer-events: auto;
}

.generic-products-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(3px);
}

.generic-products-modal {
    width: min(1120px, 96vw);
    max-height: 86vh;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.34);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.generic-products-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;
    padding: 24px 28px 16px;
}

.generic-products-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(37, 109, 240, 0.28);
}

.generic-products-title-block h2 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.35;
}

.generic-products-title-block p {
    margin: 4px 0 0;
    color: #1e293b;
    direction: rtl;
    text-align: left;
    font-size: 16px;
    font-weight: 800;
}

.generic-products-close {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #334155;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
}

.generic-products-close:hover {
    background: #f1f5f9;
}

.generic-products-summary {
    margin: 0 28px 14px;
    padding: 14px 18px;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    color: #0f4ca3;
    display: flex;
    align-items: center;
    gap: 42px;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 700;
}

.generic-products-summary b {
    color: #1d4ed8;
    font-weight: 900;
}

.generic-products-body {
    padding: 0 28px;
    overflow: auto;
    flex: 1;
}

.generic-products-content {
    min-height: 260px;
}

.generic-products-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    table-layout: fixed;
}

.generic-products-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fbfcfe;
    color: #102033;
    font-size: 15px;
    font-weight: 900;
    padding: 14px 16px;
    border-bottom: 1px solid #dbe7f5;
    text-align: left;
}

.generic-products-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #edf2f8;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.65;
    color: #0f172a;
}

.generic-products-table th:nth-child(1),
.generic-products-table td:nth-child(1) { width: 22%; }
.generic-products-table th:nth-child(2),
.generic-products-table td:nth-child(2) { width: 20%; }
.generic-products-table th:nth-child(3),
.generic-products-table td:nth-child(3) { width: 13%; }
.generic-products-table th:nth-child(4),
.generic-products-table td:nth-child(4) { width: 17%; }
.generic-products-table th:nth-child(5),
.generic-products-table td:nth-child(5) { width: 20%; }
.generic-products-table th:nth-child(6),
.generic-products-table td:nth-child(6) { width: 8%; }

.generic-ar {
    direction: rtl;
    text-align: right;
    font-weight: 800;
}

.generic-product-sub {
    margin-top: 3px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
}

.generic-products-empty,
.generic-products-loading {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #64748b;
    font-size: 16px;
    font-weight: 800;
    border: 1px dashed #dbe7f5;
    border-radius: 12px;
    background: #fbfdff;
}

.generic-products-error {
    color: #dc2626;
    background: #fff7f7;
    border-color: #fecaca;
}

.generic-products-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid #dbeafe;
    border-top-color: #256df0;
    border-radius: 999px;
    animation: genericProductsSpin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes genericProductsSpin {
    to { transform: rotate(360deg); }
}

.generic-products-footer {
    padding: 18px 28px 24px;
    display: flex;
    justify-content: center;
}

.generic-products-footer button {
    min-width: 150px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #cfe0f5;
    background: #ffffff;
    color: #0f4ca3;
    font-weight: 900;
    cursor: pointer;
}

.generic-products-footer button:hover {
    background: #f8fbff;
}

.dark-mode .generic-products-modal,
.dark-mode .generic-products-table,
.dark-mode .generic-products-footer button {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #334155;
}

.dark-mode .generic-products-title-block h2,
.dark-mode .generic-products-table td,
.dark-mode .generic-products-table th {
    color: #e5e7eb;
}

.dark-mode .generic-products-title-block p,
.dark-mode .generic-product-sub {
    color: #cbd5e1;
}

.dark-mode .generic-products-summary,
.dark-mode .generic-products-table th,
.dark-mode .generic-products-empty,
.dark-mode .generic-products-loading {
    background: #111c31;
    border-color: #334155;
}

@media (max-width: 900px) {
    .generic-products-overlay {
        padding: 14px;
    }

    .generic-products-header {
        grid-template-columns: 46px minmax(0, 1fr) 34px;
        padding: 18px 16px 12px;
        gap: 12px;
    }

    .generic-products-icon {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    .generic-products-title-block h2 {
        font-size: 18px;
    }

    .generic-products-title-block p {
        font-size: 14px;
    }

    .generic-products-summary,
    .generic-products-body,
    .generic-products-footer {
        margin-left: 16px;
        margin-right: 16px;
        padding-left: 0;
        padding-right: 0;
    }

    .generic-products-table {
        min-width: 920px;
    }
}

/* ===== Generic Products Popup v3: grouped trade names, no Arabic trade-name column ===== */
.generic-products-grouped-list {
    display: grid;
    gap: 12px;
}

.generic-product-group {
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.generic-product-group summary {
    list-style: none;
    cursor: pointer;
    min-height: 58px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    border-bottom: 1px solid transparent;
}

.generic-product-group summary::-webkit-details-marker {
    display: none;
}

.generic-product-group summary::before {
    content: "▸";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eff6ff;
    color: #155ee8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.generic-product-group[open] summary::before {
    transform: rotate(90deg);
}

.generic-product-group[open] summary {
    border-bottom-color: #dbe7f5;
}

.generic-group-name {
    flex: 1;
    color: #071a3d;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.generic-group-count {
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #155ee8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.generic-products-table.grouped {
    border: 0;
    border-radius: 0;
}

.generic-products-table.grouped th:nth-child(1),
.generic-products-table.grouped td:nth-child(1) { width: 32%; }
.generic-products-table.grouped th:nth-child(2),
.generic-products-table.grouped td:nth-child(2) { width: 13%; }
.generic-products-table.grouped th:nth-child(3),
.generic-products-table.grouped td:nth-child(3) { width: 22%; }
.generic-products-table.grouped th:nth-child(4),
.generic-products-table.grouped td:nth-child(4) { width: 25%; }
.generic-products-table.grouped th:nth-child(5),
.generic-products-table.grouped td:nth-child(5) { width: 8%; }

.generic-product-variant-row:last-child td {
    border-bottom: 0;
}

.dark-mode .generic-product-group {
    background: #111827;
    border-color: #334155;
}

.dark-mode .generic-product-group summary {
    background: #0f172a;
}

.dark-mode .generic-group-name {
    color: #e5e7eb;
}

.dark-mode .generic-group-count,
.dark-mode .generic-product-group summary::before {
    background: #1e3a8a;
    color: #dbeafe;
}

/* ===== Generic Products Popup v4: simple unique trade-name list ===== */
.generic-products-table.unique-list th:nth-child(1),
.generic-products-table.unique-list td:nth-child(1) { width: 28% !important; }
.generic-products-table.unique-list th:nth-child(2),
.generic-products-table.unique-list td:nth-child(2) { width: 13% !important; }
.generic-products-table.unique-list th:nth-child(3),
.generic-products-table.unique-list td:nth-child(3) { width: 22% !important; }
.generic-products-table.unique-list th:nth-child(4),
.generic-products-table.unique-list td:nth-child(4) { width: 27% !important; }
.generic-products-table.unique-list th:nth-child(5),
.generic-products-table.unique-list td:nth-child(5) { width: 10% !important; text-align: right; }


.generic-products-group-wrap {
    display: grid;
    gap: 18px;
}

.generic-brand-group {
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(37, 109, 240, 0.06);
}

.generic-brand-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
    border-bottom: 1px solid #dbe7f5;
}

.generic-brand-group-head h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: #0f3f8c;
}

.generic-brand-group-head p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #256df0;
    font-weight: 800;
}

.brand-group-table {
    border-top: 0;
}

.brand-group-table th:nth-child(1),
.brand-group-table td:nth-child(1) { width: 30% !important; }
.brand-group-table th:nth-child(2),
.brand-group-table td:nth-child(2) { width: 12% !important; }
.brand-group-table th:nth-child(3),
.brand-group-table td:nth-child(3) { width: 23% !important; }
.brand-group-table th:nth-child(4),
.brand-group-table td:nth-child(4) { width: 25% !important; }
.brand-group-table th:nth-child(5),
.brand-group-table td:nth-child(5) { width: 10% !important; text-align: right; }


.generic-brand-group-head {
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.generic-brand-group-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.generic-group-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: #256df0;
    font-size: 12px;
    font-weight: 900;
    transition: transform 0.2s ease;
    flex: 0 0 28px;
}

.generic-group-toggle-label {
    color: transparent;
    position: relative;
    min-width: 62px;
    font-size: 12px;
    font-weight: 800;
}

.generic-brand-group.collapsed .generic-group-toggle-label::after {
    content: "Expand";
}

.generic-brand-group:not(.collapsed) .generic-group-toggle-label::after {
    content: "Collapse";
}

.generic-brand-group .generic-group-toggle-label::after {
    color: #256df0;
    position: absolute;
    right: 0;
    top: 0;
}

.generic-brand-group-body {
    display: block;
}

.generic-brand-group.collapsed .generic-brand-group-body {
    display: none;
}

.generic-brand-group.collapsed .generic-group-arrow {
    transform: rotate(0deg);
}

.generic-brand-group:not(.collapsed) .generic-group-arrow {
    transform: rotate(90deg);
}


.generic-brand-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.generic-variant-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eaf2ff, #f8fbff);
    border: 1px solid #cfe0ff;
    color: #155ee8;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(37, 109, 240, 0.10);
    white-space: nowrap;
}

.generic-brand-group:not(.collapsed) .generic-variant-badge {
    background: linear-gradient(135deg, #256df0, #155ee8);
    border-color: #155ee8;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 109, 240, 0.22);
}

.generic-brand-group-head:hover .generic-variant-badge {
    transform: translateY(-1px);
}

.generic-variant-badge {
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}


/* ===== Generic Products Popup v11: search + dynamic type filters ===== */
.generic-products-toolbar {
    margin: 0 28px 16px;
    display: grid;
    gap: 12px;
}

.generic-products-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.generic-products-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.generic-products-search-icon {
    flex: 0 0 auto;
    margin-left: 14px;
    font-size: 16px;
    opacity: 0.72;
}

#genericProductsSearchInput {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 14px 12px 8px;
}

#genericProductsSearchInput::placeholder {
    color: #64748b;
    font-weight: 600;
}

.generic-products-search-clear {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border: 0;
    border-radius: 999px;
    background: #eff6ff;
    color: #256df0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.generic-products-search-clear:hover {
    background: #dbeafe;
}

.generic-products-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.generic-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #d8e6f8;
    background: #ffffff;
    color: #33507b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: all 0.16s ease;
}

.generic-type-chip:hover {
    transform: translateY(-1px);
    border-color: #b9d3f7;
    box-shadow: 0 8px 18px rgba(37, 109, 240, 0.08);
}

.generic-type-chip.is-active {
    background: linear-gradient(135deg, #256df0, #155ee8);
    border-color: #155ee8;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37, 109, 240, 0.22);
}

.generic-type-chip-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #155ee8;
    font-size: 11px;
    font-weight: 900;
    flex: 0 0 18px;
}

.generic-type-chip.is-active .generic-type-chip-check {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.generic-type-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #256df0;
    font-size: 11px;
    font-weight: 900;
}

.generic-type-chip.is-active .generic-type-chip-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.generic-products-filter-empty {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    border: 1px dashed #dbe7f5;
    border-radius: 14px;
    background: #fbfdff;
    color: #64748b;
    font-size: 16px;
    font-weight: 800;
}

.generic-products-filter-empty small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.generic-brand-group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.generic-inline-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef5ff;
    color: #256df0;
    font-size: 11px;
    font-weight: 900;
}

.dark-mode .generic-products-toolbar,
.dark-mode .generic-products-search-wrap,
.dark-mode .generic-type-chip,
.dark-mode .generic-products-filter-empty {
    background: #0f172a;
    border-color: #334155;
}

.dark-mode #genericProductsSearchInput {
    color: #e5e7eb;
}

.dark-mode #genericProductsSearchInput::placeholder {
    color: #94a3b8;
}

.dark-mode .generic-type-chip {
    color: #dbeafe;
}

.dark-mode .generic-type-chip-check,
.dark-mode .generic-type-chip-count,
.dark-mode .generic-inline-type-badge,
.dark-mode .generic-products-search-clear {
    background: #1e3a8a;
    color: #dbeafe;
}

@media (max-width: 900px) {
    .generic-products-toolbar {
        margin-left: 16px;
        margin-right: 16px;
    }

    .generic-products-type-filters {
        gap: 8px;
    }

    .generic-type-chip {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }
}


/* ===== Generic Products Popup v12: select/clear, result count, polished icon ===== */
.generic-products-toolbar-bottom {
    display: grid;
    gap: 10px;
}

.generic-products-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.generic-toolbar-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #d8e6f8;
    background: linear-gradient(135deg, #256df0, #155ee8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(37, 109, 240, 0.16);
}

.generic-toolbar-btn:hover {
    transform: translateY(-1px);
}

.generic-toolbar-btn-light {
    background: #ffffff;
    color: #256df0;
    box-shadow: none;
}

.generic-toolbar-btn-light:hover {
    background: #eff6ff;
}

.generic-products-result-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: flex-start;
    min-height: 34px;
    width: fit-content;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #dbe7f5;
    background: #f8fbff;
    color: #33507b;
    font-size: 13px;
    font-weight: 800;
}

.generic-products-result-count b {
    color: #155ee8;
    font-weight: 900;
}

.dark-mode .generic-toolbar-btn-light {
    background: #0f172a;
    color: #dbeafe;
    border-color: #334155;
}

.dark-mode .generic-products-result-count {
    background: #0f172a;
    color: #dbeafe;
    border-color: #334155;
}

@media (max-width: 900px) {
    .generic-products-toolbar-top {
        flex-direction: column;
        align-items: stretch;
    }

    .generic-products-toolbar-actions {
        width: 100%;
    }

    .generic-toolbar-btn {
        flex: 1 1 0;
    }
}


/* ===== v13: Allow text selection and copy from WebView ===== */
html,
body,
.app,
.content,
.card,
.tab-panel,
.clinical-table,
.clinical-table td,
.clinical-table th,
.generic-products-modal,
.generic-products-modal *,
.symptom-modal,
.symptom-modal *,
.medication-name-line,
.dose-en,
.dose-ar,
.warning-cell,
.timeline-content,
.empty-panel {
    -webkit-user-select: text;
    user-select: text;
}

/* Keep buttons/interactive controls from showing text selection cursor */
button,
.btn,
.tabs button,
.generic-info-btn,
.generic-type-chip,
.generic-toolbar-btn,
.generic-products-close,
.generic-products-footer button,
input,
textarea {
    -webkit-user-select: none;
    user-select: none;
}


/* ===== v15: Google medication search icon ===== */
.drug-google-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 999px;
    border: 1px solid #256df0;
    background: #ffffff;
    color: #256df0;
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 109, 240, 0.10);
    padding: 0;
    margin-left: 2px;
}

.drug-google-btn:hover {
    transform: translateY(-1px);
    background: #eff6ff;
    box-shadow: 0 7px 16px rgba(37, 109, 240, 0.18);
}


/* ===== v16: Working Google search icons, smaller and also inside popup rows ===== */
.medication-name-line {
    gap: 6px;
}

.generic-info-btn,
.drug-google-btn {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    border-radius: 999px !important;
    border: 1px solid #256df0 !important;
    background: #ffffff !important;
    color: #256df0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 15px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 3px 9px rgba(37, 109, 240, 0.10) !important;
    padding: 0 !important;
    margin-left: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.generic-info-btn:hover,
.drug-google-btn:hover {
    transform: translateY(-1px);
    background: #eff6ff !important;
    box-shadow: 0 6px 14px rgba(37, 109, 240, 0.18) !important;
}

.generic-product-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.drug-google-btn-popup {
    flex: 0 0 auto;
}


/* ===== v17: Symptom matcher grouped by specialty + symptom highlighting ===== */
.symptom-specialty-group {
    border: 1px solid #dbe7f5 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
    box-shadow: 0 10px 24px rgba(37, 109, 240, 0.06) !important;
}

.symptom-specialty-head {
    width: 100% !important;
    min-height: 62px !important;
    border: 0 !important;
    border-bottom: 1px solid #dbe7f5 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    text-align: left !important;
}

.symptom-specialty-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.symptom-specialty-arrow {
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eaf2ff !important;
    color: #256df0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    transition: transform 0.18s ease !important;
    flex: 0 0 28px !important;
}

.symptom-specialty-group:not(.collapsed) .symptom-specialty-arrow {
    transform: rotate(90deg) !important;
}

.symptom-specialty-head h4 {
    margin: 0 !important;
    color: #0f3f8c !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.symptom-specialty-head p {
    margin: 4px 0 0 !important;
    color: #256df0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.symptom-specialty-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #155ee8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.symptom-specialty-toggle-label {
    min-width: 64px !important;
    height: 28px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #cfe0ff !important;
}

.symptom-specialty-body {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
}

.symptom-specialty-group.collapsed .symptom-specialty-body {
    display: none !important;
}

.symptom-match-card-v17 {
    border: 1px solid #e2eaf5 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.symptom-match-card-top {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) 92px 92px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
}

.symptom-match-card-bottom {
    border-top: 1px solid #edf2f8 !important;
    background: #fbfdff !important;
    padding: 10px 14px 12px !important;
    display: grid !important;
    gap: 10px !important;
}

.symptom-match-count-badge {
    justify-self: flex-start !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #eff6ff !important;
    color: #256df0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.symptom-result-chip-wrap {
    display: grid !important;
    gap: 8px !important;
}

.symptom-result-chip-wrap > b {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.symptom-result-chip-wrap > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.symptom-result-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.symptom-result-chip small {
    direction: rtl !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.symptom-result-chip.matched {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

.symptom-result-chip.matched small {
    color: #15803d !important;
}

.symptom-term-mark {
    background: #fff3b0 !important;
    color: #7c4a00 !important;
    border-radius: 5px !important;
    padding: 1px 3px !important;
    box-shadow: inset 0 -1px 0 rgba(217, 119, 6, .25) !important;
}

.symptom-row-highlight td,
.symptom-list-highlight {
    background: linear-gradient(90deg, #fff7d6 0%, #ffffff 100%) !important;
}

.priority-badge.matched {
    background: #fff3b0 !important;
    color: #92400e !important;
    border: 1px solid #facc15 !important;
}

.symptom-highlight-pulse {
    animation: symptomHighlightPulse 1.6s ease-in-out 1 !important;
}

@keyframes symptomHighlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .75); }
    50% { box-shadow: 0 0 0 8px rgba(250, 204, 21, .18); }
    100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

body.dark-mode .symptom-specialty-group,
body.dark-mode .symptom-match-card-v17 {
    background: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .symptom-specialty-head {
    background: #111c31 !important;
    border-color: #334155 !important;
}

body.dark-mode .symptom-specialty-head h4,
body.dark-mode .symptom-match-en {
    color: #e5e7eb !important;
}

body.dark-mode .symptom-match-card-bottom,
body.dark-mode .symptom-result-chip {
    background: #111827 !important;
    border-color: #334155 !important;
}

@media (max-width: 1400px) {
    .symptom-match-card-top {
        grid-template-columns: 70px minmax(0, 1fr) 82px 82px !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .symptom-specialty-head h4 {
        font-size: 15px !important;
    }

    .symptom-specialty-meta {
        gap: 6px !important;
    }
}


/* ===== v18: ICD Chapter grouping labels ===== */
.symptom-specialty-ar {
    margin-top: 3px !important;
    direction: rtl !important;
    text-align: right !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

body.dark-mode .symptom-specialty-ar {
    color: #cbd5e1 !important;
}


/* ===== v20: Suggested specialty label in symptom group header ===== */
.symptom-suggested-specialty {
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.dark-mode .symptom-suggested-specialty {
    background: rgba(22, 163, 74, .14) !important;
    border-color: rgba(34, 197, 94, .38) !important;
    color: #86efac !important;
}


/* ===== v21: Show matched symptoms first, keep other symptoms collapsed ===== */
.symptom-result-chip-wrap-v21 {
    gap: 12px !important;
}

.matched-symptoms-block {
    display: grid !important;
    gap: 8px !important;
}

.matched-symptoms-block > b {
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.symptom-chip-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.symptom-chip-list.matched-only {
    padding: 8px !important;
    border-radius: 14px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}

.other-symptoms-details {
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.other-symptoms-details > summary {
    min-height: 34px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    cursor: pointer !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    list-style: none !important;
}

.other-symptoms-details > summary::-webkit-details-marker {
    display: none !important;
}

.other-symptoms-details > summary::before {
    content: "▸" !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #256df0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    transition: transform 0.15s ease !important;
}

.other-symptoms-details[open] > summary::before {
    transform: rotate(90deg) !important;
}

.other-symptoms-details > summary span {
    min-width: 26px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.other-symptoms-list {
    padding: 10px 12px 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #fbfdff !important;
}

.symptom-result-chip.other {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

.symptom-result-chip.other small {
    color: #64748b !important;
}

body.dark-mode .symptom-chip-list.matched-only {
    background: rgba(22, 163, 74, .12) !important;
    border-color: rgba(34, 197, 94, .36) !important;
}

body.dark-mode .other-symptoms-details {
    background: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .other-symptoms-list {
    background: #111827 !important;
    border-color: #334155 !important;
}

body.dark-mode .other-symptoms-details > summary {
    color: #cbd5e1 !important;
}


/* ===== v22: Symptom matcher order is ICD_Code ascending ===== */
.symptom-match-results[data-order-mode="icd-code"] {
    scroll-behavior: smooth !important;
}


/* =========================================================
   WEB APP OLD-EXACT OVERRIDES v9
   Keep old Medical Assistant visual system; only add current sidebar shell.
   ========================================================= */
html, body {
    height: 100%;
    overflow: hidden !important;
}
body { background: linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%) !important; }
.web-shell {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    overflow: hidden;
    background: var(--bg);
}
.ma-sidebar {
    height: 100vh;
    overflow: hidden !important;
    background: #ffffff;
    border-right: 1px solid var(--line);
    padding: 16px 12px;
    z-index: 50;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #27b7a3, #256df0);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(37,109,240,.20);
}
.brand h1 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
    color: #071a3d;
}
.brand p {
    margin: 3px 0 0;
    font-size: 10px;
    color: var(--muted);
    font-weight: 700;
}
.ma-sidebar .tabs.side-tabs {
    display: flex !important;
    flex-direction: column;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    min-height: 0 !important;
    gap: 7px;
}
.ma-sidebar .tabs.side-tabs button {
    width: 100%;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0 !important;
    border-radius: 10px;
    padding: 0 12px !important;
    background: transparent;
    color: #0f172a;
    font-size: 13px !important;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}
.ma-sidebar .tabs.side-tabs button.active {
    background: #eaf3ff !important;
    color: var(--primary-dark) !important;
    border-bottom-color: transparent !important;
}
.ma-sidebar .tabs.side-tabs button span {
    width: 18px;
    text-align: center;
    display: inline-block;
}
.web-shell .app {
    height: 100vh;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.fixed-top-area {
    flex: 0 0 auto;
    z-index: 40;
}
.content-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px;
}
.web-top.top {
    display: block !important;
}
.web-top .search-shell {
    width: 100% !important;
    max-width: none !important;
    position: relative;
}
.web-top .search {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    height: 44px !important;
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) 96px 152px !important;
    gap: 10px !important;
    align-items: stretch !important;
}
.search-label {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}
.web-top .search input#txtSearch {
    border-radius: 0 10px 10px 0 !important;
    border: 1px solid var(--line) !important;
    background: #fff;
    min-width: 0;
}
.web-top .search #btnSearch,
.web-top .search .symptom-match-btn {
    width: auto !important;
    border-radius: 12px !important;
    height: 44px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.web-top .search #btnSearch {
    background: linear-gradient(135deg, #367cf6, #155ee8) !important;
    color: #fff !important;
    border: 1px solid #155ee8 !important;
}
.web-top .search .symptom-match-btn {
    background: #f8fbff !important;
    color: #1557d4 !important;
    border: 1px solid #b9d4ff !important;
    box-shadow: none !important;
}
.footer-card, #btnScreenshot, #btnTheme, .capture-btn, .theme-toggle { display: none !important; }
/* Keep old card layout, but prevent icon/bullet overlap */
.card li { padding-left: 22px !important; }
.card li:before { left: 4px !important; top: 12px !important; }
.card li .badge { margin-left: 8px; }
.card ul { min-height: 0 !important; }
.card { min-width: 0 !important; }
.view { flex: 0 0 auto !important; }
/* Exact old symptom modal on web */
.symptom-matcher-overlay { z-index: 2000 !important; }
.symptom-matcher-modal { max-width: 1120px !important; }
.symptom-input-row { display: flex !important; gap: 12px !important; align-items: center !important; }
.symptom-input-row input { flex: 1 1 auto !important; height: 48px !important; }
.symptom-input-row button { height: 48px !important; min-width: 112px !important; border-radius: 12px !important; font-weight: 900 !important; }
#btnAddSymptom { background: var(--primary) !important; color: white !important; border: 1px solid var(--primary) !important; }
#btnSearchSymptoms { background: #f8fbff !important; color: var(--primary-dark) !important; border: 1px solid #b9d4ff !important; }
.symptom-modal-close, #btnCloseSymptomMatcher { border: 1px solid var(--line) !important; background: #fff !important; border-radius: 12px !important; font-size: 26px !important; font-weight: 900 !important; color: #1f2937 !important; }
@media (max-width: 1400px) {
    .web-shell { grid-template-columns: 205px minmax(0, 1fr); }
    .ma-sidebar { padding: 12px 10px; }
    .brand h1 { font-size: 15px; }
    .ma-sidebar .tabs.side-tabs button { font-size: 12px !important; height: 38px; min-height: 38px !important; }
    .web-shell .app { padding: 10px !important; gap: 10px !important; }
    .web-top .search { grid-template-columns: 130px minmax(0, 1fr) 90px 150px !important; gap: 8px !important; height: 40px !important; }
    .web-top .search #btnSearch, .web-top .search .symptom-match-btn { height: 40px !important; }
}

/* =========================================================
   APPROVED DESIGN v12 - exact visual model with FontAwesome
   Notes: keeps the existing card order/grid, only visual layer.
   ========================================================= */
:root {
    --ma-page-pad: 22px;
    --ma-gap: 22px;
    --ma-sidebar-w: 292px;
    --ma-bg: #f4f8fd;
    --ma-card: #ffffff;
    --ma-text: #0e1e3a;
    --ma-muted: #60708a;
    --ma-line: #dbe8f7;
    --ma-soft-line: #eef4fb;
    --ma-primary: #256df0;
    --ma-primary-2: #1f6ff2;
    --ma-shadow: 0 14px 34px rgba(25, 44, 84, .08);
    --ma-shadow-soft: 0 8px 22px rgba(25, 44, 84, .06);
    --ma-radius: 20px;
}

html,
body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    background: var(--ma-bg) !important;
}

.web-shell {
    width: 100% !important;
    height: 100vh !important;
    display: grid !important;
    grid-template-columns: var(--ma-sidebar-w) minmax(0, 1fr) !important;
    gap: var(--ma-gap) !important;
    padding: var(--ma-page-pad) !important;
    overflow: hidden !important;
    align-items: stretch !important;
    background: radial-gradient(circle at 8% 0%, #ffffff 0, #f4f8fd 42%, #edf4fb 100%) !important;
}

.ma-sidebar {
    height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    max-height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    min-height: 0 !important;
    position: sticky !important;
    top: var(--ma-page-pad) !important;
    background: #ffffff !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: var(--ma-radius) !important;
    box-shadow: var(--ma-shadow) !important;
    padding: 18px 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.brand {
    min-height: 58px !important;
    padding: 0 8px !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
}

.brand-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 22px !important;
    background: linear-gradient(145deg, #21c3c7, #256df0) !important;
    box-shadow: 0 12px 24px rgba(37, 109, 240, .20) !important;
}

.brand h1 {
    margin: 0 !important;
    color: #081932 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.brand p {
    margin: 5px 0 0 !important;
    color: #65738a !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.ma-sidebar .tabs.side-tabs {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.ma-sidebar .tabs.side-tabs button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    color: #13213a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    position: relative !important;
    text-align: left !important;
}

.ma-sidebar .tabs.side-tabs button em {
    font-style: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    color: inherit !important;
}

.ma-sidebar .tabs.side-tabs button .nav-icon,
.ma-sidebar .tabs.side-tabs button span {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #0f1f3d !important;
    background: transparent !important;
    text-align: center !important;
}

.ma-sidebar .tabs.side-tabs button.active {
    background: linear-gradient(135deg, #eaf3ff, #f5f9ff) !important;
    color: var(--ma-primary) !important;
}

.ma-sidebar .tabs.side-tabs button.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    bottom: 9px !important;
    width: 3px !important;
    border-radius: 0 999px 999px 0 !important;
    background: var(--ma-primary) !important;
}

.ma-sidebar .tabs.side-tabs button:hover {
    background: #f5f9ff !important;
}

/* approved sidebar icon colors */
.ma-sidebar .side-tabs button:nth-child(1)  .nav-icon i { color: #2878ff !important; }
.ma-sidebar .side-tabs button:nth-child(2)  .nav-icon i { color: #0e1e3a !important; }
.ma-sidebar .side-tabs button:nth-child(3)  .nav-icon i { color: #0c5bd8 !important; }
.ma-sidebar .side-tabs button:nth-child(4)  .nav-icon i { color: #ffc400 !important; text-shadow: 0 0 0 #0e1e3a; }
.ma-sidebar .side-tabs button:nth-child(5)  .nav-icon i { color: #0e1e3a !important; }
.ma-sidebar .side-tabs button:nth-child(6)  .nav-icon i { color: #ef233c !important; }
.ma-sidebar .side-tabs button:nth-child(7)  .nav-icon i { color: #16a9f5 !important; }
.ma-sidebar .side-tabs button:nth-child(8)  .nav-icon i { color: #0e1e3a !important; }
.ma-sidebar .side-tabs button:nth-child(9)  .nav-icon i { color: #0e1e3a !important; }
.ma-sidebar .side-tabs button:nth-child(10) .nav-icon i { color: #10b981 !important; }
.ma-sidebar .side-tabs button:nth-child(11) .nav-icon i { color: #ef4444 !important; }
.ma-sidebar .side-tabs button:nth-child(12) .nav-icon i { color: #1273e8 !important; }

.web-shell .app {
    height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    max-height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.fixed-top-area {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    z-index: 40 !important;
}

.web-top.top {
    width: 100% !important;
    min-height: 82px !important;
    padding: 14px 16px !important;
    display: block !important;
    background: #ffffff !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--ma-shadow-soft) !important;
}

.web-top .search-shell {
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
}

.web-top .search {
    width: 100% !important;
    max-width: none !important;
    height: 54px !important;
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 150px 230px !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.search-label,
.web-top .search input#txtSearch,
.web-top .search #btnSearch,
.web-top .search .symptom-match-btn {
    height: 54px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.search-label {
    border: 1px solid var(--ma-line) !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #0e1e3a !important;
    padding: 0 16px !important;
}

.search-label i {
    display: inline-flex !important;
    color: var(--ma-primary) !important;
    font-size: 18px !important;
}

.web-top .search input#txtSearch {
    border: 1px solid var(--ma-line) !important;
    background: #ffffff !important;
    min-width: 0 !important;
    padding: 0 20px !important;
    outline: none !important;
    color: #071a3d !important;
}

.web-top .search input#txtSearch:focus {
    border-color: #73a8ff !important;
    box-shadow: 0 0 0 4px rgba(37, 109, 240, .10) !important;
}

.web-top .search #btnSearch,
.web-top .search .symptom-match-btn,
#btnSearch,
.symptom-match-btn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 22px !important;
    cursor: pointer !important;
}

.web-top .search #btnSearch,
#btnSearch {
    color: #ffffff !important;
    border: 1px solid #1e62df !important;
    background: linear-gradient(135deg, #2f75f6, #155ee8) !important;
    box-shadow: 0 14px 28px rgba(37, 109, 240, .18) !important;
}

.web-top .search .symptom-match-btn,
.symptom-match-btn {
    color: #1764e8 !important;
    background: #ffffff !important;
    border: 1px solid #bcd6ff !important;
    box-shadow: none !important;
}

.web-top .search #btnSearch i,
.web-top .search .symptom-match-btn i {
    font-size: 18px !important;
    display: inline-flex !important;
}

.summary {
    min-height: 132px !important;
    padding: 20px 22px !important;
    grid-template-columns: 200px minmax(0, 1fr) minmax(560px, 720px) !important;
    gap: 22px !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--ma-shadow-soft) !important;
}

.icd {
    height: 92px !important;
    border-radius: 14px !important;
    border: 1px solid #2bbb70 !important;
    background: linear-gradient(135deg, #edfff5, #ffffff) !important;
    color: #0da04f !important;
    font-size: 44px !important;
    font-weight: 900 !important;
}

.title h2 {
    margin: 0 0 12px 0 !important;
    color: #0e1e3a !important;
    font-size: 22px !important;
    line-height: 1.22 !important;
    font-weight: 900 !important;
}

.title h3 {
    margin: 0 !important;
    color: #13213a !important;
    font-size: 22px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    direction: rtl !important;
    text-align: right !important;
}

.chips {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.chips div {
    min-height: 78px !important;
    padding: 14px 12px 12px 48px !important;
    position: relative !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.chips div .chip-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--ma-primary) !important;
    font-size: 22px !important;
    display: inline-flex !important;
}

.chips div:nth-child(5) {
    background: #ecfff4 !important;
    border-color: #35c979 !important;
}

.chips div:nth-child(5) .chip-icon,
.chips div:nth-child(5) b,
.chips div:nth-child(5) span {
    color: #0f9f50 !important;
}

.chips div b {
    display: block !important;
    margin-bottom: 6px !important;
    color: var(--ma-primary) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.chips div span {
    display: block !important;
    color: #0f1f3d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.content-scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 4px 0 0 !important;
    scroll-behavior: smooth !important;
}

.card,
.full-card {
    background: #ffffff !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--ma-shadow-soft) !important;
}

.card h3,
.full-card h3 {
    color: #0e1e3a !important;
    gap: 12px !important;
    font-weight: 900 !important;
}

.card-title-icon {
    color: var(--ma-primary) !important;
    font-size: 20px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 1500px) {
    :root {
        --ma-page-pad: 16px;
        --ma-gap: 16px;
        --ma-sidebar-w: 255px;
    }

    .ma-sidebar { padding: 14px 13px !important; }
    .brand { min-height: 50px !important; margin-bottom: 16px !important; gap: 11px !important; }
    .brand-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; font-size: 19px !important; }
    .brand h1 { font-size: 16px !important; }
    .brand p { font-size: 9px !important; }

    .ma-sidebar .tabs.side-tabs { gap: 7px !important; }
    .ma-sidebar .tabs.side-tabs button {
        height: 43px !important;
        min-height: 43px !important;
        border-radius: 12px !important;
        padding: 0 12px !important;
        gap: 11px !important;
        font-size: 12.3px !important;
    }

    .ma-sidebar .tabs.side-tabs button .nav-icon,
    .ma-sidebar .tabs.side-tabs button span {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 16px !important;
    }

    .web-shell .app { gap: 12px !important; }
    .fixed-top-area { gap: 12px !important; }

    .web-top.top {
        min-height: 70px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .web-top .search {
        height: 50px !important;
        grid-template-columns: 158px minmax(0, 1fr) 132px 190px !important;
        gap: 10px !important;
    }

    .search-label,
    .web-top .search input#txtSearch,
    .web-top .search #btnSearch,
    .web-top .search .symptom-match-btn {
        height: 50px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }

    .search-label { gap: 10px !important; padding: 0 12px !important; }
    .search-label i,
    .web-top .search #btnSearch i,
    .web-top .search .symptom-match-btn i { font-size: 16px !important; }

    .summary {
        min-height: 116px !important;
        padding: 16px 18px !important;
        grid-template-columns: 176px minmax(0, 1fr) minmax(500px, 640px) !important;
        gap: 18px !important;
        border-radius: 17px !important;
    }

    .icd { height: 74px !important; font-size: 36px !important; }
    .title h2 { font-size: 19px !important; margin-bottom: 8px !important; }
    .title h3 { font-size: 19px !important; }
    .chips { gap: 9px !important; }
    .chips div { min-height: 62px !important; padding: 10px 9px 9px 38px !important; border-radius: 12px !important; }
    .chips div .chip-icon { left: 12px !important; font-size: 17px !important; }
    .chips div b { font-size: 10.8px !important; margin-bottom: 4px !important; }
    .chips div span { font-size: 10.8px !important; }
}

@media (max-width: 1200px) {
    :root { --ma-sidebar-w: 225px; --ma-gap: 12px; --ma-page-pad: 12px; }
    .ma-sidebar .tabs.side-tabs button { font-size: 11px !important; gap: 8px !important; padding: 0 9px !important; }
    .web-top .search { grid-template-columns: 138px minmax(0, 1fr) 112px 160px !important; }
    .summary { grid-template-columns: 150px minmax(0, 1fr) minmax(410px, 540px) !important; }
}

/* =========================================================
   v13 COLOR ICON PATCH - approved model
   Keeps layout unchanged; only colors and icon polish.
   ========================================================= */
:root {
    --ico-blue: #256df0;
    --ico-cyan: #08a6d8;
    --ico-teal: #13b8a6;
    --ico-green: #10b981;
    --ico-yellow: #f6b800;
    --ico-orange: #f97316;
    --ico-red: #ef233c;
    --ico-purple: #7c3aed;
    --ico-slate: #12213c;
}

/* Sidebar colored icons - class based so it does not depend on order */
.ma-sidebar .tabs.side-tabs button .nav-icon,
.ma-sidebar .tabs.side-tabs button .nav-icon i,
.ma-sidebar .tabs.side-tabs button span.nav-icon,
.ma-sidebar .tabs.side-tabs button span.nav-icon i {
    opacity: 1 !important;
}

.ma-sidebar .tabs.side-tabs button .nav-icon.ico-overview i,
.ma-sidebar .tabs.side-tabs button .ico-overview i { color: var(--ico-blue) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-symptoms i,
.ma-sidebar .tabs.side-tabs button .ico-symptoms i { color: var(--ico-cyan) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-medications i,
.ma-sidebar .tabs.side-tabs button .ico-medications i { color: var(--ico-orange) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-actions i,
.ma-sidebar .tabs.side-tabs button .ico-actions i { color: var(--ico-yellow) !important; filter: drop-shadow(0 1px 0 rgba(15, 31, 61, .30)); }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-rules i,
.ma-sidebar .tabs.side-tabs button .ico-rules i { color: var(--ico-blue) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-redflags i,
.ma-sidebar .tabs.side-tabs button .ico-redflags i { color: var(--ico-red) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-rehab i,
.ma-sidebar .tabs.side-tabs button .ico-rehab i { color: var(--ico-cyan) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-risk i,
.ma-sidebar .tabs.side-tabs button .ico-risk i { color: var(--ico-slate) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-workflow i,
.ma-sidebar .tabs.side-tabs button .ico-workflow i { color: var(--ico-slate) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-assessment i,
.ma-sidebar .tabs.side-tabs button .ico-assessment i { color: var(--ico-green) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-follow i,
.ma-sidebar .tabs.side-tabs button .ico-follow i { color: var(--ico-red) !important; }
.ma-sidebar .tabs.side-tabs button .nav-icon.ico-education i,
.ma-sidebar .tabs.side-tabs button .ico-education i { color: var(--ico-blue) !important; }

.ma-sidebar .tabs.side-tabs button.active .nav-icon {
    background: rgba(37, 109, 240, .08) !important;
}

.ma-sidebar .tabs.side-tabs button.active .nav-icon i {
    color: var(--ma-primary) !important;
}

/* Header icons */
.search-label .ma-inline-icon,
.search-label i.fa-wand-magic-sparkles {
    color: var(--ico-blue) !important;
    text-shadow: 0 6px 14px rgba(37, 109, 240, .18) !important;
}

#btnSearch i,
.web-top .search #btnSearch i {
    color: #ffffff !important;
    font-size: 18px !important;
}

.symptom-match-btn i,
.web-top .search .symptom-match-btn i {
    color: var(--ico-blue) !important;
    font-size: 18px !important;
}

/* Summary chip icon colors */
.chips div:nth-child(1) .chip-icon { color: var(--ico-blue) !important; }
.chips div:nth-child(2) .chip-icon { color: var(--ico-blue) !important; }
.chips div:nth-child(3) .chip-icon { color: var(--ico-slate) !important; }
.chips div:nth-child(4) .chip-icon { color: var(--ico-slate) !important; }
.chips div:nth-child(5) .chip-icon { color: var(--ico-green) !important; }

/* Card title icon colors by card order / panel */
#tabOverview > .card.description .card-title-icon { color: var(--ico-blue) !important; }
#jointCard .card-title-icon { color: var(--ico-purple) !important; }
#tabOverview > .card:nth-of-type(3) .card-title-icon,
#tabSymptoms .card-title-icon { color: var(--ico-cyan) !important; }
#tabOverview > .card:nth-of-type(4) .card-title-icon,
#tabMedications .card-title-icon { color: var(--ico-orange) !important; }
#tabOverview > .card:nth-of-type(5) .card-title-icon,
#tabActions .card-title-icon { color: var(--ico-yellow) !important; filter: drop-shadow(0 1px 0 rgba(15, 31, 61, .30)); }
#tabOverview > .card:nth-of-type(6) .card-title-icon,
#tabRules .card-title-icon { color: var(--ico-blue) !important; }
#redFlagsCard .card-title-icon,
#tabRedFlags .card-title-icon { color: var(--ico-red) !important; }
#workflowCard .card-title-icon,
#tabWorkflow .card-title-icon { color: var(--ico-slate) !important; }
#riskCard .card-title-icon,
#tabRisk .card-title-icon { color: var(--ico-slate) !important; }
#tabRehab .card-title-icon { color: var(--ico-cyan) !important; }
#tabAssessment .card-title-icon { color: var(--ico-green) !important; }
#tabFollowUp .card-title-icon { color: var(--ico-red) !important; }
#tabEducation .card-title-icon { color: var(--ico-blue) !important; }

.card-title-icon {
    opacity: 1 !important;
}

/* =========================================================
   v16 SPACING + SIDEBAR FOOTER POLISH
   Keeps card order and grid positions unchanged.
   ========================================================= */
:root {
    --ma-page-pad: 14px !important;
    --ma-gap: 14px !important;
    --ma-sidebar-w: 278px !important;
    --ma-radius: 18px !important;
    --ma-shadow: 0 10px 26px rgba(25, 44, 84, .07) !important;
    --ma-shadow-soft: 0 6px 18px rgba(25, 44, 84, .055) !important;
}

.web-shell {
    gap: var(--ma-gap) !important;
    padding: var(--ma-page-pad) !important;
}

.ma-sidebar {
    height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    max-height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    top: var(--ma-page-pad) !important;
    padding: 14px 12px 12px 12px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

.brand {
    min-height: 48px !important;
    padding: 0 8px !important;
    margin: 0 0 12px 0 !important;
    gap: 11px !important;
}

.brand-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 19px !important;
}

.brand h1 {
    font-size: 16px !important;
    line-height: 1.1 !important;
}

.brand p {
    font-size: 9px !important;
    margin-top: 4px !important;
}

.ma-sidebar .tabs.side-tabs {
    flex: 1 1 auto !important;
    gap: 5px !important;
    padding: 2px 4px 10px 4px !important;
    background: #ffffff !important;
}

.ma-sidebar .tabs.side-tabs button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #14233d !important;
    font-size: 12.5px !important;
}

.ma-sidebar .tabs.side-tabs button .nav-icon,
.ma-sidebar .tabs.side-tabs button span.nav-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 16px !important;
    background: transparent !important;
}

.ma-sidebar .tabs.side-tabs button.active {
    background: #f3f8ff !important;
    color: var(--ma-primary) !important;
}

.ma-sidebar .tabs.side-tabs button.active::before {
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
}

.ma-sidebar .tabs.side-tabs button:hover {
    background: #f7fbff !important;
}

.sidebar-footer {
    flex: 0 0 auto !important;
    padding: 10px 8px 2px 8px !important;
    color: #7a879b !important;
    text-align: center !important;
}

.sidebar-footer-line {
    height: 1px !important;
    width: 100% !important;
    background: #e8eef7 !important;
    margin: 0 0 9px 0 !important;
}

.sidebar-copy {
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    direction: rtl !important;
    white-space: nowrap !important;
}

.web-shell .app {
    height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    max-height: calc(100vh - (var(--ma-page-pad) * 2)) !important;
    gap: 12px !important;
}

.fixed-top-area {
    gap: 10px !important;
}

.web-top.top {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
}

.web-top .search {
    height: 42px !important;
    grid-template-columns: 150px minmax(0, 1fr) 122px 176px !important;
    gap: 10px !important;
}

.search-label,
.web-top .search input#txtSearch,
.web-top .search #btnSearch,
.web-top .search .symptom-match-btn {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
}

.search-label {
    padding: 0 12px !important;
}

.web-top .search input#txtSearch {
    padding: 0 16px !important;
}

.web-top .search #btnSearch,
.web-top .search .symptom-match-btn,
#btnSearch,
.symptom-match-btn {
    padding: 0 18px !important;
    gap: 8px !important;
}

.web-top .search #btnSearch i,
.web-top .search .symptom-match-btn i {
    font-size: 15px !important;
}

.summary {
    min-height: 112px !important;
    padding: 15px 18px !important;
    gap: 18px !important;
    border-radius: 18px !important;
    grid-template-columns: 180px minmax(0, 1fr) minmax(520px, 670px) !important;
}

.icd {
    height: 76px !important;
    font-size: 38px !important;
    border-radius: 13px !important;
}

.title h2 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
}

.title h3 {
    font-size: 20px !important;
}

.chips {
    gap: 10px !important;
}

.chips div {
    min-height: 64px !important;
    padding: 10px 10px 9px 40px !important;
    border-radius: 13px !important;
}

.chips div .chip-icon {
    left: 13px !important;
    font-size: 18px !important;
}

.chips div b {
    margin-bottom: 4px !important;
    font-size: 11px !important;
}

.chips div span {
    font-size: 11px !important;
}

.content-scroll-area {
    padding: 0 3px 0 0 !important;
}

@media (max-width: 1500px) {
    :root {
        --ma-page-pad: 12px !important;
        --ma-gap: 12px !important;
        --ma-sidebar-w: 242px !important;
    }

    .ma-sidebar {
        padding: 12px 10px 10px 10px !important;
        border-radius: 16px !important;
    }

    .brand {
        min-height: 44px !important;
        margin-bottom: 10px !important;
        gap: 9px !important;
        padding: 0 6px !important;
    }

    .brand-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 17px !important;
    }

    .brand h1 { font-size: 14.5px !important; }
    .brand p { font-size: 8.2px !important; }

    .ma-sidebar .tabs.side-tabs {
        gap: 4px !important;
        padding: 2px 3px 8px 3px !important;
    }

    .ma-sidebar .tabs.side-tabs button {
        height: 37px !important;
        min-height: 37px !important;
        border-radius: 10px !important;
        padding: 0 9px !important;
        gap: 8px !important;
        font-size: 11.1px !important;
    }

    .ma-sidebar .tabs.side-tabs button .nav-icon,
    .ma-sidebar .tabs.side-tabs button span.nav-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        font-size: 14.5px !important;
    }

    .sidebar-footer { padding: 8px 6px 0 6px !important; }
    .sidebar-footer-line { margin-bottom: 7px !important; }
    .sidebar-copy { font-size: 9.8px !important; }

    .web-shell .app { gap: 10px !important; }
    .fixed-top-area { gap: 9px !important; }

    .web-top.top {
        min-height: 54px !important;
        padding: 7px 9px !important;
        border-radius: 15px !important;
    }

    .web-top .search {
        height: 40px !important;
        grid-template-columns: 142px minmax(0, 1fr) 112px 165px !important;
        gap: 8px !important;
    }

    .search-label,
    .web-top .search input#txtSearch,
    .web-top .search #btnSearch,
    .web-top .search .symptom-match-btn {
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 11px !important;
        font-size: 11.5px !important;
    }

    .summary {
        min-height: 96px !important;
        padding: 12px 14px !important;
        gap: 14px !important;
        grid-template-columns: 154px minmax(0, 1fr) minmax(430px, 560px) !important;
        border-radius: 16px !important;
    }

    .icd {
        height: 64px !important;
        font-size: 32px !important;
    }

    .title h2 {
        font-size: 17px !important;
        margin-bottom: 6px !important;
    }

    .title h3 {
        font-size: 17px !important;
    }

    .chips { gap: 7px !important; }

    .chips div {
        min-height: 54px !important;
        padding: 8px 8px 7px 34px !important;
        border-radius: 11px !important;
    }

    .chips div .chip-icon {
        left: 10px !important;
        font-size: 15.5px !important;
    }

    .chips div b,
    .chips div span {
        font-size: 9.7px !important;
    }
}


/* =========================================================
   V17 SEARCH + CATEGORY WIDTH FIX
   - Search suggestions now support any ICD-like code visually.
   - Category chip gets more horizontal space for long categories.
   ========================================================= */
.search-suggestions {
    z-index: 9999 !important;
}

.suggestion-empty {
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7a90 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

.chips {
    grid-template-columns: minmax(190px, 2.05fr) repeat(4, minmax(96px, 1fr)) !important;
}

.chips div:first-child {
    min-width: 190px !important;
}

.chips div span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.25 !important;
}

.summary {
    grid-template-columns: 180px minmax(260px, 1fr) minmax(650px, 820px) !important;
}

@media (max-width: 1500px) {
    .summary {
        grid-template-columns: 154px minmax(220px, 1fr) minmax(560px, 700px) !important;
    }

    .chips {
        grid-template-columns: minmax(170px, 2.1fr) repeat(4, minmax(78px, 1fr)) !important;
        gap: 7px !important;
    }

    .chips div:first-child {
        min-width: 170px !important;
    }

    .chips div {
        padding-left: 32px !important;
    }

    .chips div .chip-icon {
        left: 10px !important;
    }
}

@media (max-width: 1150px) {
    .summary {
        grid-template-columns: 140px minmax(0, 1fr) !important;
    }

    .chips {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(92px, 1fr)) !important;
    }
}


/* ===== V23 SFDA medication info icon fixes ===== */
.generic-info-btn.medication-info-btn,
.generic-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 999px !important;
    border: 1px solid #2f75f6 !important;
    background: #ffffff !important;
    color: #256df0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin-inline-start: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(37, 109, 240, .10) !important;
}

.generic-info-btn.medication-info-btn:hover,
.generic-info-btn:hover {
    background: #eff6ff !important;
    border-color: #155ee8 !important;
    transform: translateY(-1px);
}

.generic-info-mark {
    display: inline-block;
    font-style: normal;
    font-family: Arial, sans-serif;
    font-weight: 900;
    transform: translateY(-.5px);
}

.drug-google-btn {
    margin-inline-start: 6px !important;
}


/* =========================================================
   V24 RESPONSIVE WEB READY
   Goal: keep approved V23 desktop design unchanged, then adapt
   safely for laptop, tablet, and phone screens.
   ========================================================= */

:root {
    --ma-safe-pad: max(8px, env(safe-area-inset-left));
}

img, svg, canvas, video {
    max-width: 100% !important;
}

button,
input,
select,
textarea {
    max-width: 100% !important;
}

.clinical-table-wrap,
.generic-products-content,
.symptom-match-results,
.search-suggestions {
    -webkit-overflow-scrolling: touch !important;
}

/* Medium laptops and small desktops */
@media (max-width: 1320px) and (min-width: 1181px) {
    :root {
        --ma-page-pad: 10px !important;
        --ma-gap: 10px !important;
        --ma-sidebar-w: 230px !important;
    }

    .brand h1 { font-size: 14px !important; }
    .brand p { font-size: 8px !important; }

    .ma-sidebar .tabs.side-tabs button {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 10.5px !important;
        gap: 7px !important;
        padding: 0 8px !important;
    }

    .web-top .search {
        grid-template-columns: 130px minmax(0, 1fr) 104px 150px !important;
        gap: 7px !important;
    }

    .summary {
        grid-template-columns: 138px minmax(0, 1fr) minmax(500px, 620px) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .icd { font-size: 29px !important; }
    .title h2,
    .title h3 { font-size: 15px !important; }

    .chips {
        grid-template-columns: minmax(160px, 2fr) repeat(4, minmax(72px, 1fr)) !important;
        gap: 6px !important;
    }

    .chips div {
        min-height: 50px !important;
        padding: 7px 6px 6px 30px !important;
    }

    .chips div b,
    .chips div span { font-size: 9px !important; }
}

/* Tablet / small laptop: sidebar becomes top horizontal navigation */
@media (max-width: 1180px) {
    html,
    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        background: var(--ma-bg) !important;
    }

    .web-shell {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .ma-sidebar {
        position: sticky !important;
        top: 8px !important;
        z-index: 1000000 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .brand {
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        gap: 10px !important;
    }

    .brand-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 17px !important;
    }

    .brand h1 {
        font-size: 15px !important;
        line-height: 1.1 !important;
    }

    .brand p {
        font-size: 9px !important;
        margin-top: 2px !important;
    }

    .ma-sidebar .tabs.side-tabs {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 4px 2px !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: thin !important;
    }

    .ma-sidebar .tabs.side-tabs button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 116px !important;
        max-width: 170px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        font-size: 11.5px !important;
        scroll-snap-align: start !important;
        justify-content: flex-start !important;
    }

    .ma-sidebar .tabs.side-tabs button.active::before {
        display: none !important;
    }

    .ma-sidebar .tabs.side-tabs button .nav-icon,
    .ma-sidebar .tabs.side-tabs button span.nav-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 15px !important;
    }

    .sidebar-footer {
        display: none !important;
    }

    .web-shell .app {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        gap: 12px !important;
    }

    .fixed-top-area {
        position: relative !important;
        z-index: 100000 !important;
        gap: 10px !important;
    }

    .content-scroll-area {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .web-top.top {
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .web-top .search {
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 130px minmax(0, 1fr) 104px 156px !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .search-label,
    .web-top .search input#txtSearch,
    .web-top .search #btnSearch,
    .web-top .search .symptom-match-btn {
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    .summary {
        display: grid !important;
        grid-template-columns: 145px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        min-height: 0 !important;
    }

    .icd {
        height: 64px !important;
        font-size: 30px !important;
    }

    .title h2 { font-size: 16px !important; }
    .title h3 { font-size: 16px !important; }

    .chips {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(170px, 2fr) repeat(4, minmax(82px, 1fr)) !important;
        gap: 8px !important;
    }

    .chips div {
        min-height: 52px !important;
        padding: 8px 8px 7px 34px !important;
    }

    .grid.basic-mode,
    .grid.arthrosis-mode,
    .content-scroll-area > .grid.tab-panel.active {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .grid.basic-mode .description,
    .grid.arthrosis-mode .description,
    .grid.arthrosis-mode .joint,
    .grid.arthrosis-mode #workflowCard,
    .grid.basic-mode .card:nth-of-type(6) {
        grid-column: 1 / -1 !important;
    }

    .grid.basic-mode .card:not(.description),
    .grid.arthrosis-mode .card:not(.description),
    .card,
    .full-card {
        min-height: auto !important;
        height: auto !important;
    }

    .card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .full-tab-card.active,
    .content-scroll-area > .full-tab-card.active {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .clinical-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .clinical-table {
        min-width: 760px !important;
    }

    .search-suggestions {
        max-height: min(58vh, 430px) !important;
    }

    .suggestion-card {
        grid-template-columns: 86px minmax(0,1fr) 96px !important;
    }

    .generic-products-modal,
    .symptom-modal,
    .symptom-matcher-modal {
        width: min(980px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
    }
}

/* Mobile phones */
@media (max-width: 720px) {
    .web-shell {
        padding: 8px !important;
        gap: 8px !important;
    }

    .ma-sidebar {
        top: 6px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }

    .brand {
        min-height: 34px !important;
    }

    .brand-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 15px !important;
    }

    .brand h1 {
        font-size: 14px !important;
    }

    .brand p {
        display: none !important;
    }

    .ma-sidebar .tabs.side-tabs {
        gap: 6px !important;
        padding-bottom: 3px !important;
    }

    .ma-sidebar .tabs.side-tabs button {
        min-width: 104px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
        border-radius: 11px !important;
    }

    .ma-sidebar .tabs.side-tabs button .nav-icon,
    .ma-sidebar .tabs.side-tabs button span.nav-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        font-size: 14px !important;
    }

    .web-shell .app,
    .fixed-top-area {
        gap: 8px !important;
    }

    .web-top.top {
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .web-top .search {
        grid-template-columns: minmax(0, 1fr) minmax(128px, .75fr) !important;
        gap: 8px !important;
    }

    .search-label {
        display: none !important;
    }

    .web-top .search input#txtSearch {
        grid-column: 1 / -1 !important;
        border-radius: 12px !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
    }

    .web-top .search #btnSearch,
    .web-top .search .symptom-match-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
    }

    .summary {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .icd {
        width: 100% !important;
        height: 58px !important;
        font-size: 28px !important;
    }

    .title h2 {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 4px !important;
    }

    .title h3 {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .chips div:first-child {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    .chips div {
        min-height: 50px !important;
        padding: 8px 8px 7px 34px !important;
        border-radius: 11px !important;
    }

    .chips div b,
    .chips div span {
        font-size: 10px !important;
    }

    .grid.basic-mode,
    .grid.arthrosis-mode,
    .content-scroll-area > .grid.tab-panel.active {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .grid.basic-mode .description,
    .grid.arthrosis-mode .description,
    .grid.arthrosis-mode .joint,
    .grid.arthrosis-mode #redFlagsCard,
    .grid.arthrosis-mode #rehabCard,
    .grid.arthrosis-mode #riskCard,
    .grid.arthrosis-mode #workflowCard,
    .grid.basic-mode .card:nth-of-type(3),
    .grid.basic-mode .card:nth-of-type(4),
    .grid.basic-mode .card:nth-of-type(5),
    .grid.basic-mode .card:nth-of-type(6) {
        grid-column: 1 / -1 !important;
    }

    .card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .card.description {
        min-height: auto !important;
    }

    .card h3 {
        min-height: 34px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .card li,
    .grid.basic-mode li {
        font-size: 13px !important;
        line-height: 1.75 !important;
        padding-bottom: 10px !important;
        margin-bottom: 9px !important;
    }

    .card .arText,
    .dose-en,
    .dose-ar,
    .grid.basic-mode .arText {
        font-size: 13px !important;
        line-height: 1.85 !important;
    }

    .desc-block p,
    .desc-block.ar p {
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    #jointProfile {
        display: block !important;
        font-size: 13px !important;
    }

    .joint-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--soft-line) !important;
    }

    .joint-row .ar {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    .search-suggestions {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: 150px !important;
        max-height: calc(100dvh - 170px) !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .suggestion-card {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        min-height: 0 !important;
        padding: 12px !important;
        margin-bottom: 8px !important;
    }

    .suggestion-code {
        font-size: 21px !important;
    }

    .suggestion-en,
    .suggestion-ar {
        font-size: 14px !important;
    }

    .suggestion-badge {
        justify-self: start !important;
        min-width: 0 !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .clinical-table-wrap {
        border-radius: 12px !important;
    }

    .clinical-table {
        min-width: 720px !important;
    }

    .symptom-modal-overlay,
    .symptom-matcher-overlay,
    .generic-products-overlay {
        padding: 8px !important;
        align-items: flex-start !important;
    }

    .symptom-modal,
    .symptom-matcher-modal,
    .generic-products-modal {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 16px !important;
    }

    .symptom-modal-header,
    .generic-products-header {
        padding: 14px !important;
        min-height: 0 !important;
        align-items: flex-start !important;
    }

    .symptom-modal-header h2,
    .generic-products-title-block h2,
    #genericProductsTitle {
        font-size: 18px !important;
    }

    .symptom-modal-header p,
    .generic-products-title-block p,
    #genericProductsSubtitle {
        font-size: 12px !important;
    }

    .symptom-picker,
    .generic-products-toolbar,
    .generic-products-summary {
        padding: 12px !important;
    }

    .symptom-input-row,
    .generic-products-toolbar-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .symptom-input-row input,
    #btnAddSymptom,
    #btnSearchSymptoms,
    .generic-products-search-wrap,
    .generic-products-search-wrap input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .generic-products-toolbar-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .generic-products-type-filters {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }

    .generic-products-card,
    .generic-product-card,
    .generic-products-item {
        grid-template-columns: 1fr !important;
    }
}

/* Very small phones */
@media (max-width: 430px) {
    .web-shell {
        padding: 6px !important;
    }

    .ma-sidebar .tabs.side-tabs button {
        min-width: 86px !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

    .ma-sidebar .tabs.side-tabs button em {
        font-size: 9.5px !important;
    }

    .web-top .search {
        grid-template-columns: 1fr 1fr !important;
    }

    .web-top .search #btnSearch span,
    .web-top .search .symptom-match-btn span {
        display: inline !important;
    }

    .chips {
        grid-template-columns: 1fr !important;
    }

    .chips div:first-child {
        grid-column: auto !important;
    }

    .clinical-table {
        min-width: 680px !important;
    }
}


/* =========================================================
   V27 SAFE TABS HEIGHT + CLICK FIX
   - Hidden tab panels cannot catch clicks.
   - Active short full tabs stretch by flex, without the V26 min-height:100% overlay.
   - Mobile tabs have a scroll target margin under sticky navigation.
   ========================================================= */
.tab-panel:not(.active) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.tab-panel.active {
    pointer-events: auto !important;
    visibility: visible !important;
}

@media (min-width: 1181px) {
    .content-scroll-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .content-scroll-area > .grid.tab-panel.active {
        display: grid !important;
        flex: 0 0 auto !important;
    }

    .content-scroll-area > .full-tab-card.active {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .content-scroll-area > .full-tab-card.active > .full-card,
    .content-scroll-area > .full-tab-card.active > .card,
    .content-scroll-area > .full-tab-card.active > .clinical-table-card,
    .content-scroll-area > .full-tab-card.active > .timeline-card,
    .content-scroll-area > .full-tab-card.active > .alert-card,
    .content-scroll-area > .full-tab-card.active > .rehab-card {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 1180px) {
    .tab-panel {
        scroll-margin-top: 128px !important;
    }

    .full-tab-card.active,
    .content-scroll-area > .full-tab-card.active {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 720px) {
    .tab-panel {
        scroll-margin-top: 118px !important;
    }
}


/* =========================================================
   V28 RESPONSIVE TYPOGRAPHY + MOBILE TABLE CARDS
   - Shrinks real text on tablet/phone instead of keeping desktop sizes.
   - Clinical tables become readable cards on phones.
   - Keeps desktop V27 layout unchanged.
   ========================================================= */
@media (max-width: 1180px) {
    html { font-size: 15px !important; }

    body,
    button,
    input,
    select,
    textarea {
        font-size: clamp(12px, 1.45vw, 15px) !important;
    }

    .web-top .search,
    .summary,
    .card,
    .full-card,
    .clinical-table-card {
        min-width: 0 !important;
    }

    .title h2,
    #nameEn {
        font-size: clamp(18px, 2.2vw, 24px) !important;
        line-height: 1.35 !important;
    }

    .title h3,
    #nameAr {
        font-size: clamp(16px, 2vw, 22px) !important;
        line-height: 1.45 !important;
    }

    .icd,
    #icdCode {
        font-size: clamp(30px, 5vw, 46px) !important;
    }

    .chips b,
    .chips span {
        font-size: clamp(11px, 1.45vw, 13px) !important;
        line-height: 1.35 !important;
    }

    .card h3,
    .full-card h3,
    .clinical-table-card h3 {
        font-size: clamp(15px, 1.8vw, 19px) !important;
        line-height: 1.35 !important;
    }

    .card li,
    .card .arText,
    .dose-en,
    .dose-ar,
    .med-warning,
    .clinical-ar,
    .inline-ar {
        font-size: clamp(12px, 1.6vw, 15px) !important;
        line-height: 1.65 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .clinical-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .clinical-table {
        min-width: 620px !important;
    }

    .clinical-table th,
    .clinical-table td {
        font-size: clamp(12px, 1.45vw, 14px) !important;
        line-height: 1.55 !important;
        padding: 12px 14px !important;
        overflow-wrap: anywhere !important;
    }

    .clinical-table strong,
    .clinical-table b {
        font-size: clamp(12px, 1.5vw, 14px) !important;
        line-height: 1.45 !important;
    }

    .clinical-table .clinical-ar,
    .clinical-table .inline-ar {
        font-size: clamp(11.5px, 1.45vw, 13.5px) !important;
        line-height: 1.65 !important;
    }
}

@media (max-width: 720px) {
    html { font-size: 14px !important; }

    .web-shell,
    .app,
    .content-scroll-area {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .web-top,
    .summary,
    .card,
    .full-card,
    .footer-card {
        border-radius: 14px !important;
    }

    .web-top .search {
        gap: 7px !important;
    }

    #txtSearch,
    #btnSearch,
    #btnSymptomMatcher,
    .symptom-match-btn {
        height: 40px !important;
        font-size: 12px !important;
    }

    .ma-sidebar .tabs.side-tabs button {
        min-width: 94px !important;
        height: 44px !important;
        padding: 0 9px !important;
    }

    .ma-sidebar .tabs.side-tabs button i {
        font-size: 14px !important;
    }

    .ma-sidebar .tabs.side-tabs button em {
        font-size: 10.5px !important;
    }

    .summary {
        padding: 10px !important;
        gap: 10px !important;
    }

    .chips {
        gap: 7px !important;
    }

    .chips div {
        min-height: 48px !important;
        padding: 8px !important;
    }

    .card,
    .full-card,
    .clinical-table-card {
        padding: 12px !important;
        min-height: 0 !important;
    }

    .full-card {
        min-height: calc(100dvh - 170px) !important;
    }

    .clinical-table-card h3,
    .full-card h3 {
        padding: 12px 14px !important;
        min-height: 46px !important;
        font-size: 15px !important;
    }

    /* Mobile tables as cards */
    .clinical-table-wrap {
        overflow-x: hidden !important;
        border: 0 !important;
        background: transparent !important;
    }

    .clinical-table,
    .clinical-table thead,
    .clinical-table tbody,
    .clinical-table tr,
    .clinical-table th,
    .clinical-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .clinical-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
        background: transparent !important;
    }

    .clinical-table thead {
        display: none !important;
    }

    .clinical-table tbody {
        display: grid !important;
        gap: 10px !important;
    }

    .clinical-table tr {
        background: #fff !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 20px rgba(26, 41, 71, 0.06) !important;
        margin: 0 !important;
    }

    .clinical-table td {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--soft-line) !important;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        text-align: left !important;
        vertical-align: top !important;
        overflow-wrap: anywhere !important;
    }

    .clinical-table td:last-child {
        border-bottom: 0 !important;
    }

    .clinical-table td::before {
        content: attr(data-label) !important;
        color: var(--primary) !important;
        font-weight: 900 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .clinical-table td > * {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .clinical-table strong,
    .clinical-table b {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    .clinical-table .clinical-ar,
    .clinical-table .inline-ar,
    .clinical-table .dose-ar {
        font-size: 12px !important;
        line-height: 1.65 !important;
        margin-top: 4px !important;
    }

    .clinical-table .dose-en,
    .clinical-table .med-warning {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    #medicationsAll .clinical-table th:nth-child(1),
    #medicationsAll .clinical-table th:nth-child(2),
    #medicationsAll .clinical-table th:nth-child(3),
    #medicationsAll .clinical-table td:nth-child(1),
    #medicationsAll .clinical-table td:nth-child(2),
    #medicationsAll .clinical-table td:nth-child(3),
    #symptomsAll .clinical-table th:nth-child(1),
    #symptomsAll .clinical-table th:nth-child(2),
    #symptomsAll .clinical-table td:nth-child(1),
    #symptomsAll .clinical-table td:nth-child(2) {
        width: 100% !important;
    }

    .generic-products-card,
    .generic-product-card,
    .generic-products-item,
    .symptom-result-card {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 430px) {
    html { font-size: 13px !important; }

    .web-shell {
        padding: 6px !important;
    }

    .summary {
        padding: 8px !important;
    }

    .icd,
    #icdCode {
        font-size: 28px !important;
        min-height: 62px !important;
    }

    .title h2,
    #nameEn {
        font-size: 16px !important;
    }

    .title h3,
    #nameAr {
        font-size: 15px !important;
    }

    .card h3,
    .full-card h3,
    .clinical-table-card h3 {
        font-size: 14px !important;
    }

    .clinical-table td {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 9px 10px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .clinical-table td::before {
        font-size: 10.5px !important;
        padding-bottom: 2px !important;
    }

    .clinical-table strong,
    .clinical-table b,
    .clinical-table .clinical-ar,
    .clinical-table .inline-ar,
    .clinical-table .dose-en,
    .clinical-table .dose-ar,
    .clinical-table .med-warning {
        font-size: 11.5px !important;
    }

    .generic-products-modal,
    .symptom-matcher-modal,
    .symptom-modal {
        font-size: 12px !important;
    }
}

/* =========================================================
   V29 MOBILE SUMMARY CHIPS FIX
   Fixes overlapping chip icons/text on small screens.
   Keeps desktop/tablet layout unchanged; mobile chips become clean rows.
   ========================================================= */
@media (max-width: 720px) {
    .summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .summary .icd,
    .summary #icdCode {
        width: 100% !important;
        height: auto !important;
        min-height: 64px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .summary .title {
        min-width: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .summary .title h2,
    .summary #nameEn {
        margin: 0 0 6px 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: left !important;
    }

    .summary .title h3,
    .summary #nameAr {
        margin: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        direction: rtl !important;
        text-align: right !important;
    }

    .summary .chips {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .summary .chips div,
    .summary .chips div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 54px !important;
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 8px !important;
        row-gap: 1px !important;
        align-items: center !important;
        padding: 8px 11px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .summary .chips div .chip-icon {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .summary .chips div b {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10.8px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .summary .chips div span {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

@media (max-width: 430px) {
    .summary .chips div,
    .summary .chips div:first-child {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        min-height: 50px !important;
        padding: 7px 10px !important;
        column-gap: 7px !important;
    }

    .summary .chips div .chip-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 13.5px !important;
    }

    .summary .chips div b {
        font-size: 10.2px !important;
    }

    .summary .chips div span {
        font-size: 11px !important;
    }
}