/*
 * =====================================================================
 * بوابة المريض — Patient Portal
 * =====================================================================
 * **معجمٌ مستقلٌّ ببادئة `portal-`**، ولا يشارك أنماطَ الإدارة في حرف.
 * والسببُ قرارٌ لا ذوق: الشاشتان بوابتان منفصلتان، **وصنفٌ مشتركٌ يجعل قرارًا
 * في لوحة الموظّف يغيّر ما يراه المريض** — وهو ما لا يقصده من عدّله.
 *
 * **ولا لونَ خامًّا هنا**: الرموز كلُّها من `themes/light.css` و`dark.css`،
 * والبنيويّةُ من `core/css/base.css` — وهي الثلاثةُ التي يحمّلها غلافُ البوابة.
 *
 * **ونقطةُ توقّفٍ واحدة (‏768)**: الشاشةُ تُفتح على الهاتف أكثرَ مما تُفتح على
 * مكتب، **والحدُّ الذي ينكسر عنده الشيء هو الحدُّ الذي يُنظر إليه**.
 */

/* ============================ الغلاف ============================ */

.portal-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: var(--space-2);
    z-index: 20;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
}

.portal-skip:focus {
    inset-inline-start: var(--space-4);
}

.portal-topbar {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.portal-brand-logo {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.portal-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portal-brand-name {
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-brand-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.portal-topbar-end {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.portal-who {
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-3);
    line-height: 1.3;
}

.portal-who-name {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text);
}

.portal-who-mrn {
    font-size: calc(var(--text-sm) * .9);
    color: var(--text-muted);
}

/* ============================ الأزرار ============================ */

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface-muted);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.portal-button:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.portal-button-primary {
    border-color: transparent;
    background-color: var(--primary);
    color: var(--on-accent);
}

.portal-button-primary:hover {
    background-color: var(--primary-dark);
    color: var(--on-accent);
}

.portal-button-wide {
    width: 100%;
}

.portal-button-quiet {
    min-height: 34px;
    padding: var(--space-1) var(--space-3);
    background-color: transparent;
    font-size: calc(var(--text-sm) * .95);
}

.portal-pref-form {
    display: inline-flex;
    margin: 0;
}

/* ============================ التنقّل ============================ */

.portal-nav {
    display: flex;
    /* The body is a fixed-height flex scroller; navigation must not shrink. */
    flex-shrink: 0;
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--border);
    background-color: var(--surface-muted);
}

.portal-nav-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}

.portal-nav-link:hover {
    background-color: var(--surface);
    color: var(--text);
}

.portal-nav-link[aria-current="page"] {
    background-color: var(--color-primary-soft);
    color: var(--primary-dark);
}

/* ============================ المحتوى ============================ */

.portal-main {
    flex: 1 0 auto;
    min-width: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5);
}

.portal-title {
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
}

.portal-card {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

.portal-card-title {
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
}

.portal-note {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.portal-kpi {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
}

.portal-kpi-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.portal-kpi-value {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}

.portal-empty {
    padding: var(--space-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.portal-alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.portal-alert-error {
    border-inline-start-color: var(--danger);
    background-color: var(--color-danger-soft);
    color: var(--danger);
}

.portal-alert-ok {
    border-inline-start-color: var(--success);
    background-color: var(--color-success-soft);
    color: var(--success);
}

.portal-alert-info {
    border-inline-start-color: var(--info);
    background-color: var(--color-info-soft);
    color: var(--info);
}

/* ============================ الجداول ============================ */

/*
 * **الغلافُ يمنع فيضَ الصفحة** — نظيرُ `admin-table-wrap` في الشجرة الأخرى:
 * **جدولٌ بلا غلافٍ يدفع المستندَ كلَّه إلى تمريرٍ أفقيّ**، فيخرج الشريطُ
 * والترويسةُ من المشهد مع كلّ تمريرة.
 */
.portal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.portal-table th,
.portal-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
}

.portal-table th {
    background-color: var(--surface-muted);
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}

.portal-table tbody tr:last-child td {
    border-bottom: 0;
}

.portal-table-note {
    color: var(--text-muted);
}

/* ============================ الشارات ============================ */

.portal-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: calc(var(--text-sm) * .88);
    font-weight: 700;
    white-space: nowrap;
}

.portal-badge-ok      { background-color: var(--color-success-soft); color: var(--success); }
.portal-badge-warn    { background-color: var(--color-warning-soft); color: var(--warning); }
.portal-badge-danger  { background-color: var(--color-danger-soft);  color: var(--danger); }
.portal-badge-info    { background-color: var(--color-info-soft);    color: var(--info); }
.portal-badge-muted   { background-color: var(--surface-muted);      color: var(--text-muted); }

/* ============================ قوائم الوصف ============================ */

.portal-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.portal-dl-item {
    min-width: 0;
}

.portal-dt {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.portal-dd {
    margin: 0;
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.portal-prose {
    margin: 0 0 var(--space-3);
    white-space: pre-line;
    color: var(--text);
}

.portal-prose-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
}

.portal-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.portal-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background-color: var(--surface-muted);
    font-size: var(--text-sm);
}

/* ============================ النماذج ============================ */

.portal-field {
    display: block;
    margin-bottom: var(--space-4);
}

.portal-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}

.portal-input {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-md);
    transition: border-color var(--transition);
}

.portal-input:hover {
    border-color: var(--border-strong);
}

.portal-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.portal-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.portal-booking-card { max-width: 920px; margin-inline: auto; }
.portal-booking-progress { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.portal-booking-progress li { position: relative; display: grid; justify-items: center; gap: var(--space-2); color: var(--text-muted); text-align: center; }
.portal-booking-progress li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 17px; inset-inline-start: calc(50% + 22px); width: calc(100% - 44px); border-block-start: 2px solid var(--border); }
.portal-booking-progress span { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-weight: 800; }
.portal-booking-progress small { font-size: var(--text-sm); font-weight: 700; }
.portal-booking-progress .is-complete, .portal-booking-progress .is-current { color: var(--primary); }
.portal-booking-progress .is-complete span { border-color: var(--success); background: var(--success); color: var(--on-accent); }
.portal-booking-progress .is-complete:not(:last-child)::after { border-color: var(--success); }
.portal-booking-progress .is-current span { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
.portal-booking-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-booking-summary .portal-kpi-value { font-size: var(--text-md); }
.portal-booking-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 600px) {
    .portal-booking-summary { grid-template-columns: 1fr; }
    .portal-booking-actions .portal-button { width: 100%; }
}

/* ============================ شاشات الدخول ============================ */

.portal-auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-5);
}

.portal-auth-card {
    width: 100%;
    max-width: 430px;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
}

.portal-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    text-align: center;
}

.portal-auth-title {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
    text-align: center;
}

.portal-auth-subtitle {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
}

.portal-auth-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    text-align: center;
}

.portal-auth-link {
    font-size: var(--text-sm);
}

.portal-auth-prefs {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ============================ الهاتف ============================ */

@media (max-width: 767px) {
    .portal-topbar,
    .portal-nav,
    .portal-main {
        padding-inline: var(--space-4);
    }

    .portal-who {
        display: none;
    }

    .portal-auth-card {
        padding: var(--space-5);
    }
}

/* **ومن طلب سكونَ الحركة طلبه لأنّها تؤذيه** — والانتقالُ الواحدُ يكفي. */
@media (prefers-reduced-motion: reduce) {
    .portal-page *,
    .portal-auth-page * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}