/* =========================================================
   CharityHealth UI — CLEAN FIXED BUILD
   Login + Register + Real MainLayout + DB Admin Dashboard
   ========================================================= */

   :root {
    --app-bg: #f8fafc;
    --app-bg-soft: #eefbf6;
    --panel: #ffffff;
    --text: #111827;
    --heading: #101827;
    --muted: #98a2b3;
    --line: #e8edf3;
    --green: #08a642;
    --green-strong: #04a43d;
    --green-soft: #eafaf0;
    --blue: #2678ff;
    --purple: #8c1cf0;
    --orange: #ff9800;
    --card-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    --sidebar-width: 300px;
    --font: "Cairo", "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font);
    background: #f8fafc;
    color: var(--text);
    direction: rtl;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

.auth-layout::before,
.auth-layout::after,
.auth-layout:before,
.auth-layout:after,
body::before,
body::after,
body:before,
body:after {
    content: none !important;
    display: none !important;
}

.theme-dark {
    --app-bg: #101827;
    --app-bg-soft: #101827;
    --panel: #1f2b3a;
    --text: #f8fafc;
    --heading: #ffffff;
    --muted: #9aa6b8;
    --line: #334155;
    --green: #00b653;
    --green-strong: #00b653;
    --green-soft: rgba(0, 182, 83, 0.14);
    --card-shadow: none;
}

/* =========================================================
   Auth Layout + Login
   ========================================================= */

.auth-layout {
    min-height: 100vh;
    width: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 80px;
    position: relative;
    background:
        radial-gradient(circle at 15% 18%, rgba(0, 177, 79, 0.08), transparent 28%),
        radial-gradient(circle at 85% 78%, rgba(0, 177, 79, 0.07), transparent 30%),
        #fbfefd;
}

.login-shell {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 130px;
    align-items: center;
    direction: ltr;
}

.login-card,
.login-brand-panel {
    direction: rtl;
}

.login-card {
    width: 560px;
    min-height: 815px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 28px;
    box-shadow:
        0 28px 55px rgba(15, 23, 42, 0.14),
        0 8px 18px rgba(15, 23, 42, 0.06);
    padding: 48px 42px 38px;
}

.login-title-block {
    text-align: right;
    margin-bottom: 28px;
}

.login-title-block h1 {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -1.1px;
    color: #111827;
}

.login-title-block p {
    margin: 8px 0 0;
    font-size: 17px;
    font-weight: 600;
    color: #9aa4b2;
}

.demo-login-block {
    margin-top: 22px;
}

.demo-caption {
    margin-bottom: 14px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #9aa4b2;
}

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.demo-btn {
    height: 50px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.18s ease;
}

.demo-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.99);
}

.demo-beneficiary {
    color: #149447;
    background: #f0fff5;
    border: 1.5px solid #a8efc0;
}

.demo-doctor {
    color: #008b84;
    background: #f1fffc;
    border: 1.5px solid #75ead9;
}

.demo-pharmacy {
    color: #2563eb;
    background: #f1f7ff;
    border: 1.5px solid #9ec8ff;
}

.demo-admin {
    color: #861ce8;
    background: #fbf5ff;
    border: 1.5px solid #dec4ff;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 34px 0 28px;
    color: #9aa4b2;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e5e7eb;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form label {
    margin: 0 0 10px;
    text-align: right;
    font-size: 16px;
    font-weight: 900;
    color: #4b5563;
}

.field-shell {
    height: 66px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    padding: 0 18px;
    margin-bottom: 25px;
    transition: 0.18s ease;
}

.field-shell:focus-within {
    border-color: #00a845;
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(0, 168, 69, 0.08);
}

.field-symbol {
    flex: 0 0 auto;
    color: #9aa4b2;
    font-size: 20px;
    line-height: 1;
}

.clean-input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    direction: ltr;
    text-align: left;
}

.clean-input::placeholder {
    color: #9aa4b2;
}

.login-submit {
    width: 100%;
    height: 74px;
    margin-top: 2px;
    border: 0;
    border-radius: 21px;
    background: #05a83f;
    color: #ffffff;
    font-size: 23px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(5, 168, 63, 0.22);
    transition: 0.18s ease;
}

.login-submit:hover {
    background: #04983a;
    transform: translateY(-1px);
}

.login-footer {
    margin: 28px 0 0;
    text-align: center;
    color: #9aa4b2;
    font-size: 17px;
    font-weight: 700;
}

.login-footer a {
    display: block;
    margin-top: 3px;
    color: #05a83f;
    font-size: 18px;
    font-weight: 900;
}

.login-brand-panel {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 18px;
}

.login-brand-panel .brand-mark {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 28px;
    background: #05a83f;
    box-shadow: 0 22px 48px rgba(5, 168, 63, 0.18);
}

.login-brand-panel .brand-mark::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 37px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
}

.login-brand-panel .brand-mark::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 60px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #05a83f;
}

.login-brand-panel .brand-mark.large {
    margin-bottom: 34px;
}

.login-brand-panel h2 {
    margin: 0;
    color: #111827;
    font-size: 55px;
    line-height: 1.02;
    font-weight: 1000;
    letter-spacing: -2px;
}

.login-brand-panel p {
    margin: 24px 0 36px;
    color: #9aa4b2;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 800;
}

.brand-metrics {
    width: 430px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.brand-metrics div {
    height: 106px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.08),
        0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.brand-metrics strong {
    color: #05a83f;
    font-size: 25px;
    line-height: 1;
    font-weight: 1000;
}

.brand-metrics strong.rating {
    color: #f59e0b;
}

.brand-metrics span {
    margin-top: 10px;
    color: #9aa4b2;
    font-size: 15px;
    font-weight: 700;
}

/* =========================================================
   Register Page
   ========================================================= */

.auth-card.register-card {
    width: min(900px, 100%);
    margin: 70px auto;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 30px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.15);
    overflow: hidden;
    padding: 0;
    direction: rtl;
}

.auth-card.register-card .auth-card-header {
    min-height: 132px;
    padding: 34px 42px;
    background: linear-gradient(135deg, #0b9f93 0%, #05ad42 100%);
    color: #ffffff;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-card.register-card .auth-title {
    margin: 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.auth-card.register-card .auth-sub {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    font-weight: 850;
}

.auth-card.register-card .step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 34px 44px 0;
}

.auth-card.register-card .step {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #98a2b3;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 950;
}

.auth-card.register-card .step.active,
.auth-card.register-card .step.done {
    background: #05a843;
    color: #ffffff;
}

.auth-card.register-card .step-line {
    width: 80px;
    height: 5px;
    border-radius: 999px;
    background: #e5e7eb;
}

.auth-card.register-card .step-line.active {
    background: #05a843;
}

.auth-card.register-card form {
    padding: 34px 44px 24px;
    display: grid;
    gap: 24px;
}

.auth-card.register-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.auth-card.register-card .form-group {
    display: grid;
    gap: 10px;
}

.auth-card.register-card label {
    color: #4b5563;
    font-size: 17px;
    font-weight: 950;
    text-align: right;
}

.req {
    color: #ef4444;
}

.auth-card.register-card .form-control {
    width: 100%;
    min-height: 66px;
    border: 1.5px solid #e2e8f0;
    background: #f9fafb;
    border-radius: 24px;
    padding: 0 18px;
    color: #111827;
    font-size: 17px;
    font-weight: 700;
    outline: 0;
    box-shadow: none;
    transition: 0.18s ease;
}

.auth-card.register-card textarea.form-control {
    min-height: 76px;
    padding-top: 18px;
    resize: vertical;
}

.auth-card.register-card .form-control:focus {
    background: #ffffff;
    border-color: #96e8ba;
    box-shadow: 0 0 0 5px rgba(5, 168, 63, 0.10);
}

.auth-card.register-card .form-control::placeholder {
    color: #98a2b3;
}

.auth-card.register-card .btn-primary,
.auth-card.register-card .btn-secondary {
    height: 70px;
    border: 0;
    border-radius: 20px;
    font-size: 21px;
    font-weight: 950;
    cursor: pointer;
}

.auth-card.register-card .btn-primary {
    background: #1f4068;
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(31, 64, 104, 0.16);
}

.auth-card.register-card .btn-primary:disabled {
    background: #e5e7eb;
    color: #98a2b3;
    box-shadow: none;
    cursor: not-allowed;
}

.auth-card.register-card .btn-full {
    width: 100%;
}

.auth-card.register-card .btn-secondary {
    background: #f0f2f5;
    color: #374151;
}

.auth-card.register-card .btn-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
}

.auth-card.register-card .input-with-toggle {
    min-height: 66px;
    border: 1.5px solid #e2e8f0;
    background: #f9fafb;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.auth-card.register-card .input-with-toggle .form-control {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0 8px;
    min-height: 64px;
}

.auth-card.register-card .input-with-toggle:focus-within {
    background: #ffffff;
    border-color: #96e8ba;
    box-shadow: 0 0 0 5px rgba(5, 168, 63, 0.10);
}

.auth-card.register-card .toggle-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
}

.auth-card.register-card .hint,
.auth-card.register-card .strength-label {
    color: #98a2b3;
    font-size: 13px;
    font-weight: 850;
}

.auth-card.register-card .auth-footer-link {
    text-align: center;
    padding: 0 24px 30px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.auth-card.register-card .auth-footer-link a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 900;
}

.field-error,
.validation-message {
    color: #dc2626;
    font-size: 13px;
    font-weight: 800;
}

.alert.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 14px 16px;
    border-radius: 18px;
    font-weight: 850;
}

.password-strength {
    display: grid;
    gap: 6px;
}

.strength-bar {
    height: 7px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: 0.18s ease;
}

.strength-empty { width: 0; }
.strength-weak { width: 25%; background: #ef4444; }
.strength-fair { width: 50%; background: #f59e0b; }
.strength-good { width: 75%; background: #3b82f6; }
.strength-strong { width: 100%; background: #05a843; }

/* =========================================================
   Real MainLayout — fixed sidebar on right
   ========================================================= */

body:has(.app-root) {
    background: #f8fafc !important;
    overflow-x: hidden;
}

.app-root {
    min-height: 100vh !important;
    width: 100% !important;
    background: #f8fafc !important;
    color: #111827 !important;
    direction: rtl !important;
    font-family: var(--font) !important;
    overflow-x: hidden !important;
}

.app-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    background: #ffffff !important;
    border-left: 1px solid #edf0f4 !important;
    border-right: 0 !important;
    padding: 24px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
}

.app-workspace {
    margin-right: var(--sidebar-width) !important;
    margin-left: 0 !important;
    width: calc(100% - var(--sidebar-width)) !important;
    min-height: 100vh !important;
    background: #f8fafc !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.app-topbar {
    height: 78px !important;
    min-height: 78px !important;
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf0f4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 34px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
}

.page-canvas {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #f8fafc !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.brand-block {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 0 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid #edf0f4 !important;
    cursor: pointer !important;
}

.brand-copy {
    display: grid !important;
    gap: 4px !important;
    text-align: right !important;
}

.brand-title {
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.brand-subtitle {
    color: #05a843 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.brand-block .brand-mark {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    position: relative !important;
    box-shadow: 0 14px 24px rgba(5, 168, 67, 0.16) !important;
    flex: 0 0 auto !important;
}

.brand-block .brand-mark::before {
    content: "" !important;
    position: absolute !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    top: 16px !important;
    left: 15px !important;
    display: block !important;
}

.brand-block .brand-mark::after {
    content: "" !important;
    position: absolute !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    top: 12px !important;
    left: 27px !important;
    display: block !important;
}

.sidebar-user-card {
    margin: 24px 0 20px !important;
    min-height: 82px !important;
    border-radius: 22px !important;
    background: #faf5ff !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
}

.user-initial {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #8b1cf0 !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 23px !important;
    font-weight: 950 !important;
    flex: 0 0 auto !important;
}

.sidebar-user-card strong {
    display: block !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

.sidebar-user-card span {
    display: block !important;
    margin-top: 2px !important;
    color: #8b1cf0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.app-sidebar nav,
.app-sidebar .nav-menu,
.app-sidebar .nav-scrollable {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-sidebar nav a,
.app-sidebar .nav-link,
.app-sidebar .nav-item a {
    min-height: 56px !important;
    border-radius: 999px !important;
    color: #667085 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    transition: 0.16s ease !important;
    background: transparent !important;
}

.app-sidebar nav a:hover,
.app-sidebar .nav-link:hover,
.app-sidebar .nav-item a:hover {
    background: #f8fafc !important;
    color: #111827 !important;
}

.app-sidebar nav a.active,
.app-sidebar .nav-link.active,
.app-sidebar .nav-item a.active {
    background: #eafaf0 !important;
    color: #05a843 !important;
}

.app-sidebar .bi,
.app-sidebar .oi,
.app-sidebar svg {
    color: inherit !important;
}

.sidebar-footer {
    margin-top: auto !important;
    padding-top: 24px !important;
    border-top: 1px solid #edf0f4 !important;
}

.sidebar-logout {
    min-height: 56px !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

.sidebar-logout:hover {
    color: #dc2626 !important;
}

.logout-icon,
.logout-arrow {
    font-size: 20px !important;
}

.topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.topbar-logout {
    color: #667085 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.topbar-logout:hover {
    color: #111827 !important;
}

.theme-toggle {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475467 !important;
    font-size: 21px !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
}

.theme-toggle:hover {
    background: #e5e7eb !important;
}

.top-user-chip {
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid #e9d5ff !important;
    background: #faf5ff !important;
    color: #8b1cf0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.chip-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #8b1cf0 !important;
}

/* =========================================================
   Admin Dashboard DB UI — final overrides
   ========================================================= */

.admin-db-page {
    min-height: calc(100vh - 78px) !important;
    padding: 42px 42px 60px !important;
    margin: 0 !important;
    background: #f8fafc !important;
    color: #111827 !important;
}

.admin-db-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin: 0 0 34px !important;
}

.admin-db-title h1 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
}

.admin-db-title p {
    margin: 12px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.admin-db-live {
    height: 46px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #16a34a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.admin-db-live span {
    width: 10px !important;
    height: 10px !important;
    background: #16a34a !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.10) !important;
}

.admin-db-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(210px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.admin-db-stat {
    min-height: 178px !important;
    background: #ffffff !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.admin-db-stat .stat-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}

.admin-db-stat .stat-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 25px !important;
}

.admin-db-stat .stat-icon.blue { background: #eff6ff !important; }
.admin-db-stat .stat-icon.green { background: #ecfdf3 !important; }
.admin-db-stat .stat-icon.teal { background: #ecfeff !important; }
.admin-db-stat .stat-icon.purple { background: #faf5ff !important; }

.admin-db-stat .stat-delta {
    min-width: 70px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #05a843 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.admin-db-stat strong {
    display: block !important;
    color: #101827 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    direction: ltr !important;
    text-align: right !important;
}

.admin-db-stat p {
    margin: 8px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.admin-db-analytics {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.admin-db-card {
    background: #ffffff !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
    padding: 26px !important;
}

.admin-db-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}

.admin-db-card h2,
.admin-db-card-head h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.chart-legend {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.chart-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.chart-legend i {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
}

.chart-legend .green { background: #16a34a !important; }
.chart-legend .blue { background: #0ea5e9 !important; }

.admin-db-chart {
    height: 300px !important;
    direction: ltr !important;
    position: relative !important;
}

.admin-db-chart svg {
    width: 100% !important;
    height: 250px !important;
    display: block !important;
}

.admin-db-chart .grid line {
    stroke: #e8edf3 !important;
    stroke-width: 0.8 !important;
    stroke-dasharray: 4 5 !important;
}

.chart-months {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    direction: rtl !important;
}

.chart-months span {
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.admin-db-card.specialty {
    text-align: right !important;
}

.admin-db-donut {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    margin: 24px auto !important;
    position: relative !important;
}

.admin-db-donut::after {
    content: "" !important;
    position: absolute !important;
    inset: 48px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    border: 1px solid #edf0f4 !important;
    display: block !important;
}

.admin-db-specialties {
    display: grid !important;
    gap: 12px !important;
}

.admin-db-specialties div {
    display: grid !important;
    grid-template-columns: 48px 1fr 13px !important;
    align-items: center !important;
    gap: 10px !important;
}

.admin-db-specialties span {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    direction: ltr !important;
}

.admin-db-specialties b {
    color: #475467 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.admin-db-specialties i {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
}

.admin-db-card.requests {
    padding: 0 !important;
    overflow: hidden !important;
}

.admin-db-card.requests .table-head {
    padding: 24px 26px !important;
    margin: 0 !important;
    border-bottom: 1px solid #edf0f4 !important;
}

.admin-db-card.requests .table-head button {
    border: 0 !important;
    background: transparent !important;
    color: #16a34a !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.admin-db-table-wrap {
    overflow-x: auto !important;
}

.admin-db-table {
    width: 100% !important;
    min-width: 950px !important;
    border-collapse: collapse !important;
}

.admin-db-table thead {
    background: #f8fafc !important;
}

.admin-db-table th {
    text-align: right !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    padding: 15px 24px !important;
    white-space: nowrap !important;
}

.admin-db-table td {
    padding: 18px 24px !important;
    border-top: 1px solid #edf0f4 !important;
    color: #475467 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.patient-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.patient-cell .avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    display: grid !important;
    place-items: center !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

.patient-cell strong {
    display: block !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.patient-cell span {
    display: block !important;
    margin-top: 2px !important;
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.admin-db-status {
    min-height: 30px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    border: 1px solid transparent !important;
}

.status-info { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.status-warning { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; }
.status-success { background: #ecfdf3 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
.status-danger { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
.status-teal { background: #ecfeff !important; color: #0f766e !important; border-color: #99f6e4 !important; }
.status-muted { background: #f1f5f9 !important; color: #64748b !important; }

.admin-db-actions {
    display: flex !important;
    gap: 8px !important;
}

.admin-db-actions button,
.admin-db-table .view {
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.admin-db-actions .approve { background: #ecfdf3 !important; color: #15803d !important; }
.admin-db-actions .reject { background: #fef2f2 !important; color: #dc2626 !important; }
.admin-db-table .view { background: #f8fafc !important; color: #64748b !important; }

.empty-cell,
.empty-mini {
    text-align: center !important;
    color: #98a2b3 !important;
    font-weight: 900 !important;
    padding: 32px !important;
}

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

@media (max-width: 1200px) {
    .login-shell {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .login-card {
        width: min(560px, 100%);
        margin: 0 auto;
    }

    .login-brand-panel {
        order: -1;
    }

    .app-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        right: auto !important;
        top: auto !important;
        border-left: 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
    }

    .app-workspace {
        margin-right: 0 !important;
        width: 100% !important;
    }

    .admin-db-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-db-analytics {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .auth-layout {
        padding: 24px 14px;
    }

    .login-card {
        min-height: auto;
        padding: 32px 22px;
        border-radius: 24px;
    }

    .login-title-block h1 {
        font-size: 31px;
    }

    .demo-grid,
    .brand-metrics {
        grid-template-columns: 1fr;
    }

    .login-brand-panel h2 {
        font-size: 40px;
    }

    .brand-metrics {
        width: 100%;
    }

    .auth-card.register-card {
        margin: 24px 14px;
        width: auto;
    }

    .auth-card.register-card .auth-card-header {
        padding: 26px 22px;
    }

    .auth-card.register-card .auth-title {
        font-size: 28px;
    }

    .auth-card.register-card form {
        padding: 26px 20px;
    }

    .auth-card.register-card .form-row,
    .auth-card.register-card .btn-row {
        grid-template-columns: 1fr;
    }

    .app-topbar {
        padding: 0 16px !important;
    }

    .top-user-chip {
        display: none !important;
    }

    .admin-db-page {
        padding: 24px 14px !important;
    }

    .admin-db-title {
        display: grid !important;
    }

    .admin-db-title h1 {
        font-size: 34px !important;
    }

    .admin-db-stats {
        grid-template-columns: 1fr !important;
    }
}








/* =========================================================
   Requests Page — Final Admin UI
   ========================================================= */

   .requests-page {
    min-height: calc(100vh - 78px);
    padding: 42px 42px 60px;
    background: #f8fafc;
    color: #111827;
}

.requests-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.requests-kicker {
    color: #667085;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 8px;
}

.requests-head h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.requests-head p {
    margin: 14px 0 0;
    color: #475467;
    font-size: 16px;
    font-weight: 750;
}

.requests-search {
    width: min(420px, 100%);
    height: 52px;
    border: 1px solid #edf0f4;
    background: #ffffff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.requests-search span {
    color: #98a2b3;
    font-size: 17px;
}

.requests-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.requests-search input::placeholder {
    color: #98a2b3;
}

.requests-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 24px;
}

.rq-tab {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: #eef0f3;
    color: #475467;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    transition: 0.16s ease;
}

.rq-tab span {
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ffffff;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
}

.rq-tab:hover {
    transform: translateY(-1px);
}

.rq-tab.active {
    background: #05a843;
    color: #ffffff;
}

.rq-tab.active span {
    color: #05a843;
}

.requests-message {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 900;
}

.requests-message.ok {
    background: #dcfce7;
    color: #166534;
}

.requests-message.bad {
    background: #fee2e2;
    color: #991b1b;
}

.requests-card {
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 22px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.requests-table-wrap {
    overflow-x: auto;
}

.requests-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.requests-table thead {
    background: #f8fafc;
}

.requests-table th {
    text-align: right;
    color: #98a2b3;
    font-size: 13px;
    font-weight: 950;
    padding: 16px 22px;
    white-space: nowrap;
}

.requests-table td {
    padding: 18px 22px;
    border-top: 1px solid #f1f5f9;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
    vertical-align: middle;
}

.requests-table tbody tr {
    transition: 0.14s ease;
}

.requests-table tbody tr:hover {
    background: #fbfdff;
}

.rq-beneficiary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rq-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 950;
}

.rq-beneficiary strong {
    display: block;
    color: #111827;
    font-size: 15px;
    font-weight: 950;
}

.rq-beneficiary small {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
    direction: ltr;
    text-align: right;
}

.rq-specialty {
    color: #344054;
    font-size: 15px;
    font-weight: 950;
}

.rq-muted {
    color: #667085;
    font-weight: 850;
}

.rq-docs {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 950;
}

.rq-date {
    display: grid;
    gap: 2px;
}

.rq-date strong {
    color: #101827;
    font-size: 14px;
    font-weight: 950;
}

.rq-date small {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
}

.rq-status {
    min-height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 950;
    border: 1px solid transparent;
}

.rq-status.status-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.rq-status.status-warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.rq-status.status-success {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.rq-status.status-danger {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.rq-status.status-teal {
    background: #ecfeff;
    color: #0f766e;
    border-color: #99f6e4;
}

.rq-status.status-muted {
    background: #f1f5f9;
    color: #64748b;
}

.rq-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rq-accept,
.rq-reject,
.rq-view {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    transition: 0.14s ease;
}

.rq-accept {
    background: #ecfdf3;
    color: #15803d;
}

.rq-reject {
    background: #fef2f2;
    color: #dc2626;
}

.rq-view {
    background: #f1f5f9;
    color: #667085;
}

.rq-accept:hover,
.rq-reject:hover,
.rq-view:hover {
    transform: translateY(-1px);
}

.rq-accept:disabled,
.rq-reject:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.requests-empty {
    padding: 44px 20px;
    text-align: center;
    color: #98a2b3;
    font-size: 15px;
    font-weight: 950;
}

/* Dark mode support */

.theme-dark .requests-page {
    background: #101827;
    color: #f8fafc;
}

.theme-dark .requests-card,
.theme-dark .requests-search {
    background: #1f2b3a;
    border-color: #334155;
}

.theme-dark .requests-head h1,
.theme-dark .rq-beneficiary strong,
.theme-dark .rq-date strong,
.theme-dark .rq-specialty {
    color: #ffffff;
}

.theme-dark .requests-table thead {
    background: #172233;
}

.theme-dark .requests-table td {
    border-color: #334155;
}

.theme-dark .requests-search input {
    color: #ffffff;
}

/* Responsive */

@media (max-width: 900px) {
    .requests-page {
        padding: 26px 16px;
    }

    .requests-head {
        display: grid;
    }

    .requests-search {
        width: 100%;
    }

    .requests-head h1 {
        font-size: 34px;
    }
}






/* =========================================================
   Doctors Page — Final Admin UI
   ========================================================= */

   .doctors-page {
    min-height: calc(100vh - 78px);
    padding: 42px 42px 60px;
    background: #f8fafc;
    color: #111827;
}

.doctors-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.doctors-kicker {
    color: #667085;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 8px;
}

.doctors-head h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.doctors-head p {
    margin: 14px 0 0;
    color: #475467;
    font-size: 16px;
    font-weight: 750;
}

.doctor-add-btn {
    height: 54px;
    border: 0;
    border-radius: 18px;
    padding: 0 22px;
    background: #05a843;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(5, 168, 67, 0.18);
}

.doctor-add-btn span {
    font-size: 24px;
    line-height: 1;
}

.doctors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 22px;
}

.doctor-card {
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.doctor-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.doctor-main-info {
    text-align: right;
}

.doctor-main-info h2 {
    margin: 0;
    color: #111827;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 950;
}

.doctor-main-info strong {
    display: block;
    margin-top: 4px;
    color: #05a843;
    font-size: 17px;
    font-weight: 950;
}

.doctor-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #ccfbf1;
    color: #0f766e;
    display: grid;
    place-items: center;
    font-size: 28px;
    flex: 0 0 auto;
}

.doctor-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.doctor-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 950;
}

.doctor-status i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.doctor-status.available {
    color: #16a34a;
}

.doctor-status.available i {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}

.doctor-status.unavailable {
    color: #98a2b3;
}

.doctor-status.unavailable i {
    background: #cbd5e1;
}

.doctor-license {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
    direction: ltr;
}

.doctor-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.doctor-meta div {
    background: #f8fafc;
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 5px;
}

.doctor-meta span {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
}

.doctor-meta strong {
    color: #111827;
    font-size: 14px;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.doctor-address {
    color: #667085;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.6;
}

.doctor-stats {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.doctor-stats div {
    min-height: 72px;
    background: #f8fafc;
    border-radius: 18px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
}

.doctor-stats strong {
    color: #111827;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
}

.doctor-stats span {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.doctors-empty {
    min-height: 220px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

/* Dark mode */

.theme-dark .doctors-page {
    background: #101827;
    color: #f8fafc;
}

.theme-dark .doctor-card,
.theme-dark .doctors-empty {
    background: #1f2b3a;
    border-color: #334155;
}

.theme-dark .doctors-head h1,
.theme-dark .doctor-main-info h2,
.theme-dark .doctor-meta strong,
.theme-dark .doctor-stats strong {
    color: #ffffff;
}

.theme-dark .doctor-meta div,
.theme-dark .doctor-stats div {
    background: #172233;
}

/* Responsive */

@media (max-width: 1250px) {
    .doctors-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .doctors-page {
        padding: 26px 16px;
    }

    .doctors-head {
        display: grid;
    }

    .doctors-head h1 {
        font-size: 34px;
    }

    .doctor-add-btn {
        width: 100%;
        justify-content: center;
    }

    .doctors-grid {
        grid-template-columns: 1fr;
    }
}











/* =========================================================
   Reports Page — Final Admin UI
   ========================================================= */

   .reports-page {
    min-height: calc(100vh - 78px);
    padding: 42px 42px 60px;
    background: #f8fafc;
    color: #111827;
}

.reports-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.reports-kicker {
    color: #667085;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 8px;
}

.reports-head h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.reports-head p {
    margin: 14px 0 0;
    color: #475467;
    font-size: 16px;
    font-weight: 750;
}

.reports-export-btn {
    height: 54px;
    border: 1px solid #edf0f4;
    border-radius: 18px;
    padding: 0 22px;
    background: #ffffff;
    color: #344054;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.reports-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.report-kpi {
    min-height: 136px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    display: grid;
    align-content: space-between;
    gap: 14px;
}

.report-kpi .dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    justify-self: start;
}

.report-kpi .dot.green {
    background: #16a34a;
}

.report-kpi .dot.teal {
    background: #0d9488;
}

.report-kpi .dot.amber {
    background: #f59e0b;
}

.report-kpi .dot.blue {
    background: #2563eb;
}

.report-kpi strong {
    color: #101827;
    font-size: 32px;
    line-height: 1;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.report-kpi span {
    color: #98a2b3;
    font-size: 15px;
    font-weight: 900;
}

.reports-chart-card,
.reports-card {
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.reports-chart-card {
    padding: 26px;
    margin-bottom: 28px;
}

.reports-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

.reports-card-head h2,
.reports-card h2 {
    margin: 0;
    color: #111827;
    font-size: 28px;
    font-weight: 950;
}

.reports-bar-chart {
    height: 280px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    align-items: end;
    padding: 24px 20px 0;
    border-top: 1px dashed #edf0f4;
    background:
        linear-gradient(to bottom, transparent 24%, #eef2f6 25%, transparent 26%),
        linear-gradient(to bottom, transparent 49%, #eef2f6 50%, transparent 51%),
        linear-gradient(to bottom, transparent 74%, #eef2f6 75%, transparent 76%);
}

.bar-item {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 28px;
    gap: 10px;
    align-items: end;
    justify-items: center;
}

.bar-track {
    width: 42px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar-fill {
    width: 34px;
    min-height: 8px;
    border-radius: 12px 12px 0 0;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    transition: 0.18s ease;
}

.bar-item span {
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.reports-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.reports-card {
    padding: 26px;
}

.reports-specialties {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.specialty-row {
    display: grid;
    gap: 9px;
}

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

.specialty-row-head span {
    font-size: 14px;
    font-weight: 950;
    direction: ltr;
}

.specialty-row-head strong {
    color: #344054;
    font-size: 15px;
    font-weight: 950;
}

.specialty-progress {
    height: 10px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.specialty-progress i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.quick-report {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.quick-report div {
    min-height: 58px;
    border-radius: 16px;
    background: #f8fafc;
    display: grid;
    grid-template-columns: 42px 72px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.qr-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.qr-icon.blue {
    background: #eff6ff;
}

.qr-icon.amber {
    background: #fffbeb;
}

.qr-icon.green {
    background: #ecfdf3;
}

.qr-icon.red {
    background: #fef2f2;
}

.qr-icon.teal {
    background: #ecfeff;
}

.qr-icon.purple {
    background: #faf5ff;
}

.quick-report strong {
    color: #111827;
    font-size: 18px;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.quick-report p {
    margin: 0;
    color: #475467;
    font-size: 14px;
    font-weight: 900;
}

.reports-empty,
.reports-mini-empty {
    min-height: 220px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.reports-mini-empty {
    min-height: 120px;
    box-shadow: none;
}

/* Dark mode */

.theme-dark .reports-page {
    background: #101827;
    color: #f8fafc;
}

.theme-dark .report-kpi,
.theme-dark .reports-chart-card,
.theme-dark .reports-card,
.theme-dark .reports-empty,
.theme-dark .reports-mini-empty,
.theme-dark .reports-export-btn {
    background: #1f2b3a;
    border-color: #334155;
}

.theme-dark .reports-head h1,
.theme-dark .reports-card h2,
.theme-dark .reports-card-head h2,
.theme-dark .report-kpi strong,
.theme-dark .quick-report strong {
    color: #ffffff;
}

.theme-dark .quick-report div,
.theme-dark .specialty-progress {
    background: #172233;
}

/* Responsive */

@media (max-width: 1150px) {
    .reports-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .reports-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .reports-page {
        padding: 26px 16px;
    }

    .reports-head {
        display: grid;
    }

    .reports-head h1 {
        font-size: 34px;
    }

    .reports-export-btn {
        width: 100%;
        justify-content: center;
    }

    .reports-kpis {
        grid-template-columns: 1fr;
    }

    .reports-bar-chart {
        gap: 12px;
        padding-inline: 4px;
    }

    .bar-track {
        width: 28px;
    }

    .bar-fill {
        width: 24px;
    }
}




/* =========================================================
   Doctors Page — Final Admin UI
   ========================================================= */

   .doctors-page {
    min-height: calc(100vh - 78px);
    padding: 42px 42px 60px;
    background: #f8fafc;
    color: #111827;
}

.doctors-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.doctors-kicker {
    color: #667085;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 8px;
}

.doctors-head h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.doctors-head p {
    margin: 14px 0 0;
    color: #475467;
    font-size: 16px;
    font-weight: 750;
}

.doctor-add-btn {
    height: 54px;
    border: 0;
    border-radius: 18px;
    padding: 0 22px;
    background: #05a843;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(5, 168, 67, 0.18);
}

.doctor-add-btn span {
    font-size: 24px;
    line-height: 1;
}

.doctors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 22px;
}

.doctor-card {
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.doctor-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.doctor-main-info {
    text-align: right;
}

.doctor-main-info h2 {
    margin: 0;
    color: #111827;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 950;
}

.doctor-main-info strong {
    display: block;
    margin-top: 4px;
    color: #05a843;
    font-size: 17px;
    font-weight: 950;
}

.doctor-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #ccfbf1;
    color: #0f766e;
    display: grid;
    place-items: center;
    font-size: 28px;
    flex: 0 0 auto;
}

.doctor-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.doctor-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 950;
}

.doctor-status i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.doctor-status.available {
    color: #16a34a;
}

.doctor-status.available i {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}

.doctor-status.unavailable {
    color: #98a2b3;
}

.doctor-status.unavailable i {
    background: #cbd5e1;
}

.doctor-license {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
    direction: ltr;
}

.doctor-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.doctor-meta div {
    background: #f8fafc;
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 5px;
}

.doctor-meta span {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
}

.doctor-meta strong {
    color: #111827;
    font-size: 14px;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.doctor-address {
    color: #667085;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.6;
}

.doctor-stats {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.doctor-stats div {
    min-height: 72px;
    background: #f8fafc;
    border-radius: 18px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
}

.doctor-stats strong {
    color: #111827;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
}

.doctor-stats span {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.doctors-empty {
    min-height: 220px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

/* Dark mode */

.theme-dark .doctors-page {
    background: #101827;
    color: #f8fafc;
}

.theme-dark .doctor-card,
.theme-dark .doctors-empty {
    background: #1f2b3a;
    border-color: #334155;
}

.theme-dark .doctors-head h1,
.theme-dark .doctor-main-info h2,
.theme-dark .doctor-meta strong,
.theme-dark .doctor-stats strong {
    color: #ffffff;
}

.theme-dark .doctor-meta div,
.theme-dark .doctor-stats div {
    background: #172233;
}

/* Responsive */

@media (max-width: 1250px) {
    .doctors-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .doctors-page {
        padding: 26px 16px;
    }

    .doctors-head {
        display: grid;
    }

    .doctors-head h1 {
        font-size: 34px;
    }

    .doctor-add-btn {
        width: 100%;
        justify-content: center;
    }

    .doctors-grid {
        grid-template-columns: 1fr;
    }
}






/* =========================================================
   Create Doctor Page — Final UI
   ========================================================= */

   .create-doctor-page {
    min-height: calc(100vh - 78px);
    padding: 42px 42px 60px;
    background: #f8fafc;
    color: #111827;
}

.create-doctor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.create-doctor-kicker {
    color: #667085;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 8px;
}

.create-doctor-head h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.create-doctor-head p {
    margin: 14px 0 0;
    color: #475467;
    font-size: 16px;
    font-weight: 750;
}

.create-doctor-back {
    height: 52px;
    border: 1px solid #edf0f4;
    border-radius: 18px;
    padding: 0 22px;
    background: #ffffff;
    color: #344054;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.create-doctor-card {
    width: min(980px, 100%);
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.create-doctor-banner {
    min-height: 126px;
    padding: 28px 32px;
    background: linear-gradient(135deg, #0b9f93 0%, #05ad42 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 18px;
}

.banner-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
    font-size: 32px;
    flex: 0 0 auto;
}

.create-doctor-banner h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 950;
}

.create-doctor-banner p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    font-weight: 850;
}

.create-doctor-banner strong {
    color: #ffffff;
    font-weight: 950;
}

.doctor-form-grid {
    padding: 34px 34px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.doctor-field {
    display: grid;
    gap: 10px;
}

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

.doctor-field label {
    color: #344054;
    font-size: 16px;
    font-weight: 950;
}

.doctor-field label span {
    color: #ef4444;
}

.doctor-input {
    width: 100%;
    min-height: 64px;
    border: 1.5px solid #e2e8f0;
    background: #f9fafb;
    border-radius: 22px;
    padding: 0 18px;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
    outline: 0;
    transition: 0.18s ease;
}

.doctor-textarea {
    min-height: 96px;
    padding-top: 16px;
    resize: vertical;
}

.doctor-input:focus {
    background: #ffffff;
    border-color: #96e8ba;
    box-shadow: 0 0 0 5px rgba(5, 168, 63, 0.10);
}

.doctor-input::placeholder {
    color: #98a2b3;
}

.doctor-password-note {
    margin: 0 34px 24px;
    min-height: 74px;
    border: 1.5px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    border-radius: 22px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.doctor-password-note > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #dcfce7;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.doctor-password-note strong {
    display: block;
    font-size: 15px;
    font-weight: 950;
}

.doctor-password-note p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 850;
}

.doctor-password-note b {
    direction: ltr;
    display: inline-block;
}

.doctor-form-actions {
    padding: 0 34px 34px;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
}

.doctor-primary-btn,
.doctor-secondary-btn {
    height: 68px;
    border: 0;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 950;
    cursor: pointer;
}

.doctor-primary-btn {
    background: #05a843;
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(5, 168, 67, 0.18);
}

.doctor-primary-btn:disabled {
    background: #e5e7eb;
    color: #98a2b3;
    box-shadow: none;
    cursor: not-allowed;
}

.doctor-secondary-btn {
    background: #f1f5f9;
    color: #475467;
}

.doctor-form-alert {
    margin: 24px 34px 0;
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 900;
}

.doctor-form-alert.ok {
    background: #dcfce7;
    color: #166534;
}

.doctor-form-alert.bad {
    background: #fee2e2;
    color: #991b1b;
}

.doctor-form-loading {
    padding: 46px;
    text-align: center;
    color: #98a2b3;
    font-size: 16px;
    font-weight: 950;
}

.create-doctor-card .validation-message {
    color: #dc2626;
    font-size: 13px;
    font-weight: 850;
}

/* Dark mode */

.theme-dark .create-doctor-page {
    background: #101827;
    color: #f8fafc;
}

.theme-dark .create-doctor-card,
.theme-dark .create-doctor-back {
    background: #1f2b3a;
    border-color: #334155;
}

.theme-dark .create-doctor-head h1,
.theme-dark .doctor-field label {
    color: #ffffff;
}

.theme-dark .doctor-input {
    background: #172233;
    border-color: #334155;
    color: #ffffff;
}

.theme-dark .doctor-secondary-btn {
    background: #172233;
    color: #f8fafc;
}

/* Responsive */

@media (max-width: 800px) {
    .create-doctor-page {
        padding: 26px 16px;
    }

    .create-doctor-head {
        display: grid;
    }

    .create-doctor-head h1 {
        font-size: 34px;
    }

    .create-doctor-back {
        width: 100%;
    }

    .doctor-form-grid {
        grid-template-columns: 1fr;
        padding: 26px 20px 20px;
    }

    .doctor-password-note {
        margin: 0 20px 22px;
    }

    .doctor-form-actions {
        padding: 0 20px 26px;
        grid-template-columns: 1fr;
    }
}




.doctor-edit-btn {
    height: 38px;
    border: 0;
    border-radius: 999px;
    padding: 0 16px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.doctor-edit-btn:hover {
    background: #dbeafe;
}













.doctor-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doctor-day-chip {
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.doctor-day-chip input {
    width: 16px;
    height: 16px;
    accent-color: #05a843;
}

.doctor-day-chip:has(input:checked) {
    background: #ecfdf3;
    border-color: #86efac;
    color: #15803d;
}










/* =========================================================
   Admin List Pages — Specialties + Audit Logs
   Put this at the END of: CharityHealth.Web/wwwroot/css/app-ui.css
   ========================================================= */

   .admin-list-page {
    min-height: calc(100vh - 78px);
    padding: 42px;
    background:
        radial-gradient(circle at top right, rgba(5, 168, 67, 0.06), transparent 360px),
        #f8fafc;
    color: #111827;
}

.admin-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.admin-list-kicker {
    color: #667085;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 8px;
}

.admin-list-head h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.admin-list-head p {
    margin: 12px 0 0;
    color: #667085;
    font-size: 16px;
    font-weight: 800;
}

.admin-search-box {
    width: 320px;
    height: 56px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.admin-search-box span {
    color: #98a2b3;
    font-size: 22px;
    font-weight: 900;
}

.admin-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 15px;
    font-weight: 850;
}

.admin-search-box input::placeholder {
    color: #98a2b3;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.admin-stat-card {
    min-height: 120px;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    background: #ffffff;
    padding: 22px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    display: grid;
    align-content: center;
    gap: 8px;
}

.admin-stat-card span {
    color: #667085;
    font-size: 14px;
    font-weight: 900;
}

.admin-stat-card strong {
    color: #05a843;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
}

.admin-table-card {
    border: 1px solid #edf0f4;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.admin-table-title {
    min-height: 78px;
    padding: 22px 26px;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.admin-table-title h2 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 950;
}

.admin-table-title span {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #047857;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 950;
}

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

.admin-modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 820px;
}

.admin-modern-table th {
    background: #f8fafc;
    color: #667085;
    font-size: 13px;
    font-weight: 950;
    text-align: right;
    padding: 18px 22px;
    white-space: nowrap;
}

.admin-modern-table td {
    color: #111827;
    font-size: 15px;
    font-weight: 750;
    padding: 18px 22px;
    border-top: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-modern-table tbody tr:hover td {
    background: #fbfefc;
}

.admin-main-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-cell-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #d1fae5;
    color: #047857;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.admin-main-cell strong {
    display: block;
    color: #111827;
    font-size: 15px;
    font-weight: 950;
}

.admin-main-cell span {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 850;
}

.admin-number-pill {
    min-width: 42px;
    height: 34px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 950;
}

.admin-status-pill,
.admin-action-pill {
    min-height: 34px;
    border-radius: 999px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.admin-status-pill.ok,
.admin-action-pill.success {
    background: #dcfce7;
    color: #15803d;
}

.admin-status-pill.off {
    background: #f1f5f9;
    color: #64748b;
}

.admin-action-pill.info {
    background: #e0f2fe;
    color: #0369a1;
}

.admin-action-pill.warning {
    background: #fef3c7;
    color: #b45309;
}

.admin-action-pill.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-date-cell {
    color: #111827;
    font-weight: 950;
}

.ltr-cell {
    direction: ltr;
    text-align: right;
    font-weight: 850;
}

.mono-cell {
    direction: ltr;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px !important;
    color: #475467 !important;
}

.admin-state-card {
    min-height: 160px;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    background: #ffffff;
    color: #98a2b3;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.admin-state-card.inside {
    margin: 24px;
    min-height: 110px;
    box-shadow: none;
}

.theme-dark .admin-list-page {
    background: #101827;
    color: #f8fafc;
}

.theme-dark .admin-list-head h1,
.theme-dark .admin-table-title h2,
.theme-dark .admin-modern-table td,
.theme-dark .admin-main-cell strong,
.theme-dark .admin-date-cell {
    color: #f8fafc;
}

.theme-dark .admin-search-box,
.theme-dark .admin-stat-card,
.theme-dark .admin-table-card,
.theme-dark .admin-state-card {
    background: #1f2b3a;
    border-color: #334155;
}

.theme-dark .admin-modern-table th {
    background: #172233;
}

.theme-dark .admin-modern-table td {
    border-top-color: #334155;
}

.theme-dark .admin-modern-table tbody tr:hover td {
    background: #172233;
}

.theme-dark .admin-search-box input {
    color: #f8fafc;
}

.theme-dark .admin-number-pill {
    background: #172233;
    color: #f8fafc;
}

@media (max-width: 900px) {
    .admin-list-page {
        padding: 26px 16px;
    }

    .admin-list-head {
        display: grid;
    }

    .admin-list-head h1 {
        font-size: 34px;
    }

    .admin-search-box {
        width: 100%;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   FINAL HARD FIX — Layout + Admin + Beneficiary Dashboards
   Added to stop broken width, huge empty spaces, and cut cards.
   Keep this block at the VERY END of app-ui.css.
   ========================================================= */

/* ---------- Global app layout hard reset ---------- */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.app-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

.app-workspace {
    margin-right: var(--sidebar-width) !important;
    margin-left: 0 !important;
    width: calc(100% - var(--sidebar-width)) !important;
    max-width: calc(100% - var(--sidebar-width)) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.page-canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8fafc !important;
}

.app-topbar {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Admin dashboard old classes: admin-db-* ---------- */

.admin-db-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 44px 46px 70px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 86% 0%, rgba(5, 168, 67, 0.08), transparent 340px),
        #f8fafc !important;
}

.admin-db-title {
    width: 100% !important;
    margin: 0 0 30px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.admin-db-title h1 {
    font-size: 48px !important;
    line-height: 1.1 !important;
}

.admin-db-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin: 0 0 28px 0 !important;
}

.admin-db-stat {
    min-width: 0 !important;
    min-height: 172px !important;
    border-radius: 28px !important;
}

.admin-db-analytics {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr) !important;
    gap: 24px !important;
    margin: 0 0 28px 0 !important;
}

.admin-db-card {
    min-width: 0 !important;
    border-radius: 28px !important;
}

.admin-db-card.requests {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Admin dashboard new classes: admin-home-* ---------- */

.admin-home-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 46px 48px 70px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 88% 2%, rgba(5, 168, 67, 0.08), transparent 360px),
        #f8fafc !important;
    box-sizing: border-box !important;
}

.admin-home-header {
    width: 100% !important;
    min-height: 150px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.admin-home-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin-bottom: 28px !important;
}

.admin-home-stat-card {
    min-width: 0 !important;
    min-height: 180px !important;
    border-radius: 30px !important;
}

.admin-home-main-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr) !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
}

.admin-home-bottom-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .75fr) minmax(0, 1.5fr) !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
}

.admin-home-panel {
    min-width: 0 !important;
}

/* ---------- Beneficiary dashboard hard fix ---------- */

.beneficiary-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 42px 48px 70px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 86% 0%, rgba(5, 168, 67, 0.10), transparent 360px),
        radial-gradient(circle at 0% 100%, rgba(20, 184, 166, 0.06), transparent 360px),
        #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
}

.beneficiary-hero {
    width: 100% !important;
    min-height: 235px !important;
    margin: 0 0 28px 0 !important;
    padding: 36px 40px !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at left bottom, rgba(255,255,255,.20), transparent 270px),
        linear-gradient(135deg, #05a843 0%, #079f8f 100%) !important;
    color: #ffffff !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 28px !important;
    box-shadow: 0 24px 52px rgba(5, 168, 67, 0.20) !important;
    overflow: hidden !important;
}

.beneficiary-kicker {
    color: rgba(255,255,255,.88) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    margin-bottom: 14px !important;
}

.beneficiary-hero h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.beneficiary-hero p {
    margin: 16px 0 0 !important;
    max-width: 760px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
    font-weight: 850 !important;
}

.beneficiary-primary-btn {
    min-width: 190px !important;
    height: 60px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #047857 !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .14) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.beneficiary-stats-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 0 28px 0 !important;
}

.beneficiary-stat-card {
    min-width: 0 !important;
    min-height: 155px !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    padding: 24px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
}

.beneficiary-stat-card span {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.beneficiary-stat-card strong {
    color: #111827 !important;
    font-size: 44px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.beneficiary-stat-card small {
    color: #98a2b3 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 850 !important;
}

.beneficiary-content-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr) !important;
    gap: 28px !important;
    align-items: start !important;
}

.beneficiary-panel {
    min-width: 0 !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .075) !important;
    overflow: hidden !important;
}

.beneficiary-panel.large {
    min-height: 500px !important;
}

.beneficiary-side-stack {
    min-width: 0 !important;
    display: grid !important;
    gap: 28px !important;
}

.beneficiary-dashboard .panel-head {
    min-height: 88px !important;
    padding: 24px 28px !important;
    border-bottom: 1px solid #edf0f4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.beneficiary-dashboard .panel-head h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.beneficiary-dashboard .panel-head p {
    margin: 7px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

/* ---------- Dark mode for fixed pages ---------- */

.theme-dark .admin-home-page,
.theme-dark .admin-db-page,
.theme-dark .beneficiary-dashboard {
    background: #101827 !important;
    color: #f8fafc !important;
}

.theme-dark .admin-home-stat-card,
.theme-dark .admin-home-panel,
.theme-dark .admin-db-stat,
.theme-dark .admin-db-card,
.theme-dark .beneficiary-stat-card,
.theme-dark .beneficiary-panel,
.theme-dark .beneficiary-state-card {
    background: #1f2b3a !important;
    border-color: #334155 !important;
}

.theme-dark .admin-home-header h1,
.theme-dark .admin-home-stat-card strong,
.theme-dark .admin-home-panel h2,
.theme-dark .admin-db-title h1,
.theme-dark .admin-db-stat strong,
.theme-dark .admin-db-card h2,
.theme-dark .beneficiary-stat-card strong,
.theme-dark .beneficiary-dashboard .panel-head h2 {
    color: #ffffff !important;
}

/* ---------- Responsive final hard fix ---------- */

@media (max-width: 1200px) {
    .app-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        right: auto !important;
        top: auto !important;
        border-left: 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
    }

    .app-workspace {
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .admin-db-stats,
    .admin-home-stats,
    .beneficiary-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-db-analytics,
    .admin-home-main-grid,
    .admin-home-bottom-grid,
    .beneficiary-content-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .admin-db-page,
    .admin-home-page,
    .beneficiary-dashboard {
        padding: 26px 16px 46px !important;
    }

    .admin-db-title,
    .admin-home-header,
    .beneficiary-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .admin-db-title h1,
    .admin-home-header h1,
    .beneficiary-hero h1 {
        font-size: 34px !important;
    }

    .admin-db-stats,
    .admin-home-stats,
    .beneficiary-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .beneficiary-primary-btn {
        width: 100% !important;
    }

    .top-user-chip {
        display: none !important;
    }
}













/* =========================================================
   Beneficiary Dashboard Clean Fix
   Put this at the END of app-ui.css
   ========================================================= */

   .beneficiary-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 42px 48px 70px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 86% 0%, rgba(5, 168, 67, 0.10), transparent 360px),
        radial-gradient(circle at 0% 100%, rgba(20, 184, 166, 0.06), transparent 360px),
        #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
}

.beneficiary-hero {
    width: 100% !important;
    min-height: 235px !important;
    margin: 0 0 28px 0 !important;
    padding: 36px 40px !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at left bottom, rgba(255,255,255,.20), transparent 270px),
        linear-gradient(135deg, #05a843 0%, #079f8f 100%) !important;
    color: #ffffff !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 28px !important;
    box-shadow: 0 24px 52px rgba(5, 168, 67, 0.20) !important;
    overflow: hidden !important;
}

.beneficiary-kicker {
    color: rgba(255,255,255,.88) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    margin-bottom: 14px !important;
}

.beneficiary-hero h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.beneficiary-hero p {
    margin: 16px 0 0 !important;
    max-width: 760px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
    font-weight: 850 !important;
}

.beneficiary-primary-btn {
    min-width: 190px !important;
    height: 60px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #047857 !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .14) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.beneficiary-stats-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 0 28px 0 !important;
}

.beneficiary-stat-card {
    min-width: 0 !important;
    min-height: 155px !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    padding: 24px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
}

.beneficiary-stat-card span {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.beneficiary-stat-card strong {
    color: #111827 !important;
    font-size: 44px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.beneficiary-stat-card small {
    color: #98a2b3 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 850 !important;
}

.beneficiary-content-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr) !important;
    gap: 28px !important;
    align-items: start !important;
}

.beneficiary-panel {
    min-width: 0 !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .075) !important;
    overflow: hidden !important;
}

.beneficiary-panel.large {
    min-height: 500px !important;
}

.beneficiary-side-stack {
    min-width: 0 !important;
    display: grid !important;
    gap: 28px !important;
}

.beneficiary-dashboard .panel-head {
    min-height: 88px !important;
    padding: 24px 28px !important;
    border-bottom: 1px solid #edf0f4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.beneficiary-dashboard .panel-head h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.beneficiary-dashboard .panel-head p {
    margin: 7px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.beneficiary-empty-box {
    min-height: 360px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 38px !important;
    text-align: center !important;
}

.beneficiary-empty-box div {
    width: 76px !important;
    height: 76px !important;
    border-radius: 26px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 36px !important;
}

.beneficiary-empty-box strong {
    color: #111827 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

.beneficiary-empty-box span {
    color: #98a2b3 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.beneficiary-empty-box button,
.next-action-card button {
    margin-top: 10px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    background: #05a843 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.beneficiary-requests-list {
    display: grid !important;
}

.beneficiary-request-row {
    padding: 22px 28px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.beneficiary-request-row:first-child {
    border-top: 0 !important;
}

.request-main {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.request-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 20px !important;
    background: #d1fae5 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 26px !important;
    flex: 0 0 auto !important;
}

.request-main h3 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.request-main p {
    margin: 7px 0 0 !important;
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
}

.request-meta {
    margin-top: 11px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.request-meta span {
    min-height: 30px !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #667085 !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.request-side {
    display: grid !important;
    justify-items: end !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}

.beneficiary-status {
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.beneficiary-status.info { background: #e0f2fe !important; color: #0369a1 !important; }
.beneficiary-status.warning { background: #fef3c7 !important; color: #b45309 !important; }
.beneficiary-status.success { background: #dcfce7 !important; color: #15803d !important; }
.beneficiary-status.danger { background: #fee2e2 !important; color: #b91c1c !important; }
.beneficiary-status.teal { background: #ccfbf1 !important; color: #0f766e !important; }
.beneficiary-status.muted { background: #f1f5f9 !important; color: #64748b !important; }

.request-view-btn {
    height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    background: #f1f5f9 !important;
    color: #475467 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.next-action-card {
    padding: 28px !important;
    display: grid !important;
    gap: 12px !important;
}

.next-action-icon {
    width: 66px !important;
    height: 66px !important;
    border-radius: 24px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.next-action-card strong {
    color: #111827 !important;
    font-size: 21px !important;
    font-weight: 950 !important;
}

.next-action-card span {
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    font-weight: 800 !important;
}

.beneficiary-progress-list {
    padding: 26px 28px 30px !important;
    display: grid !important;
    gap: 22px !important;
}

.progress-row {
    display: grid !important;
    gap: 10px !important;
}

.progress-row > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.progress-row span {
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.progress-row strong {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.progress-track {
    height: 11px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
}

.progress-track i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #f59e0b !important;
}

.progress-track.approved i {
    background: #2563eb !important;
}

.progress-track.completed i {
    background: #14b8a6 !important;
}

.beneficiary-state-card,
.beneficiary-alert {
    min-height: 170px !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    color: #98a2b3 !important;
    display: grid !important;
    place-items: center !important;
    padding: 26px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
}

.beneficiary-alert.bad {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

@media (max-width: 1200px) {
    .beneficiary-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .beneficiary-content-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .beneficiary-dashboard {
        padding: 26px 16px 46px !important;
    }

    .beneficiary-hero {
        grid-template-columns: 1fr !important;
        padding: 28px 22px !important;
    }

    .beneficiary-hero h1 {
        font-size: 34px !important;
    }

    .beneficiary-primary-btn {
        width: 100% !important;
    }

    .beneficiary-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .beneficiary-request-row {
        display: grid !important;
    }

    .request-side {
        justify-items: stretch !important;
    }

    .request-side .beneficiary-status,
    .request-side .request-view-btn {
        justify-content: center !important;
    }
}


























/* =========================================================
   New Request Fixed UI
   ========================================================= */

   .consult-request-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 34px 44px 92px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
}

.consult-request-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
    text-align: right !important;
}

.consult-request-head h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.consult-request-head p {
    margin: 7px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.consult-back-btn {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #475467 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 38px !important;
    cursor: pointer !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06) !important;
}

.consult-progress {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 auto 34px !important;
    max-width: 1400px !important;
}

.consult-progress-item {
    display: grid !important;
    gap: 9px !important;
    color: #c4cad3 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-align: center !important;
}

.consult-progress-item span {
    display: block !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
}

.consult-progress-item.active {
    color: #05a843 !important;
}

.consult-progress-item.active span {
    background: #05a843 !important;
}

.consult-shell {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.consult-side {
    display: grid !important;
    gap: 20px !important;
}

.consult-info-card,
.consult-steps-card,
.consult-main-card {
    background: #ffffff !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 26px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .075) !important;
}

.consult-info-card {
    padding: 28px !important;
    min-height: 145px !important;
}

.consult-info-card.secure {
    border-color: #bbf7d0 !important;
}

.consult-info-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    background: #ecfdf3 !important;
    color: #05a843 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    margin-bottom: 18px !important;
}

.consult-info-card.warning .consult-info-icon {
    background: #fff7ed !important;
    color: #f97316 !important;
}

.consult-info-card h3,
.consult-steps-card h3 {
    margin: 0 0 10px !important;
    color: #101828 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

.consult-info-card p {
    margin: 0 !important;
    color: #047857 !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    font-weight: 850 !important;
}

.consult-info-card.warning p {
    color: #9a3412 !important;
}

.consult-steps-card {
    padding: 26px !important;
    display: grid !important;
    gap: 14px !important;
}

.consult-step-row {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    color: #667085 !important;
}

.consult-step-row span {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #667085 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.consult-step-row strong {
    font-size: 15px !important;
    font-weight: 900 !important;
}

.consult-step-row.active span {
    background: #05a843 !important;
    color: #ffffff !important;
}

.consult-step-row.active strong {
    color: #101828 !important;
}

.consult-main-card {
    min-height: 520px !important;
    padding: 34px !important;
    overflow: hidden !important;
}

.consult-step-screen {
    padding-bottom: 28px !important;
}

.consult-step-screen.with-border {
    border-top: 1px solid #edf0f4 !important;
    padding-top: 28px !important;
}

.consult-card-title {
    margin-bottom: 24px !important;
}

.consult-card-title h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 31px !important;
    font-weight: 950 !important;
}

.consult-card-title p {
    margin: 6px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.consult-specialty-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    gap: 16px !important;
}

.consult-specialty-card {
    min-height: 116px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    background: #f9fafb !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

.consult-specialty-card span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

.consult-specialty-card strong {
    color: #344054 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.consult-specialty-card:hover,
.consult-specialty-card.selected {
    border-color: #05a843 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 18px 32px rgba(5, 168, 67, .10) !important;
    transform: translateY(-2px) !important;
}

.consult-case-area {
    width: 100% !important;
    min-height: 155px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 24px !important;
    background: #f9fafb !important;
    color: #101828 !important;
    padding: 20px !important;
    resize: vertical !important;
    outline: none !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    font-weight: 850 !important;
}

.consult-char-count {
    margin-top: 8px !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    direction: ltr !important;
    text-align: left !important;
}

.consult-summary-box {
    margin-top: 8px !important;
    border: 1px solid #5eead4 !important;
    border-radius: 24px !important;
    background: #f0fdfa !important;
    padding: 22px !important;
}

.consult-summary-box h3,
.consult-upload-card h3 {
    margin: 0 0 14px !important;
    color: #101828 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

.consult-summary-box dl {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 9px 16px !important;
}

.consult-summary-box dt,
.consult-summary-box dd {
    color: #0f766e !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    margin: 0 !important;
}

.consult-upload-card {
    margin-top: 24px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    padding: 24px !important;
}

.upload-card-head p {
    margin: -6px 0 18px !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.consult-upload-card .upload-zone,
.consult-upload-card .drop-zone,
.consult-upload-card .document-upload-zone {
    min-height: 130px !important;
    border: 2px dashed #d5deea !important;
    border-radius: 24px !important;
    background: #f8fafc !important;
}

.consult-file-list {
    margin-top: 16px !important;
    display: grid !important;
    gap: 10px !important;
}

.consult-file-item {
    min-height: 58px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    background: #f9fafb !important;
    padding: 10px 14px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 150px 34px !important;
    align-items: center !important;
    gap: 12px !important;
}

.consult-file-item strong {
    display: block !important;
    color: #344054 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.consult-file-item small {
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.consult-file-item select {
    height: 38px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.consult-remove-file {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    cursor: pointer !important;
    font-weight: 950 !important;
}

.consult-footer-actions {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 18px !important;
    margin-top: 28px !important;
}

.consult-secondary-btn,
.consult-primary-wide {
    height: 66px !important;
    border: 0 !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.consult-secondary-btn {
    background: #f1f5f9 !important;
    color: #344054 !important;
}

.consult-primary-wide {
    background: #05a843 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(5,168,67,.18) !important;
}

.consult-primary-wide:disabled,
.consult-secondary-btn:disabled {
    background: #e5e7eb !important;
    color: #98a2b3 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.consult-field-error {
    margin-top: 12px !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.consult-alert {
    margin-top: 18px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.consult-alert.danger {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
}

.consult-empty-box {
    min-height: 140px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 22px !important;
    background: #f8fafc !important;
    display: grid !important;
    place-items: center !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

@media (max-width: 1200px) {
    .consult-shell {
        grid-template-columns: 1fr !important;
    }

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

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

@media (max-width: 780px) {
    .consult-request-page {
        padding: 24px 16px 84px !important;
    }

    .consult-progress,
    .consult-side,
    .consult-specialty-grid {
        grid-template-columns: 1fr !important;
    }

    .consult-main-card {
        padding: 22px !important;
    }

    .consult-file-item {
        grid-template-columns: 30px 1fr !important;
    }

    .consult-file-item select,
    .consult-remove-file {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .consult-footer-actions {
        grid-template-columns: 1fr !important;
    }
}






















/* Fix New Request wizard order + first personal screen */
.consult-shell.fixed-order {
    direction: ltr !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
}

.consult-shell.fixed-order .consult-side,
.consult-shell.fixed-order .consult-main-card {
    direction: rtl !important;
}

.consult-ok-strip {
    min-height: 58px !important;
    margin-bottom: 24px !important;
    border: 1px solid #86efac !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #047857 !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.consult-ok-strip span {
    width: 25px !important;
    height: 25px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 950 !important;
}

.consult-ok-strip strong {
    font-size: 14px !important;
    font-weight: 950 !important;
}

.consult-personal-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.consult-personal-grid label {
    display: grid !important;
    gap: 9px !important;
}

.consult-personal-grid label span {
    color: #475467 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.consult-personal-grid input {
    height: 56px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 22px !important;
    background: #f9fafb !important;
    color: #667085 !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    outline: none !important;
}

.consult-progress-item {
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

@media (max-width: 1200px) {
    .consult-shell.fixed-order {
        direction: rtl !important;
        grid-template-columns: 1fr !important;
    }

    .consult-personal-grid {
        grid-template-columns: 1fr !important;
    }
}


























/* =========================================================
   Beneficiary Requests Page — Figma-like cards
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .my-requests-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 46px 48px 80px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.my-requests-header {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 26px !important;
}

.my-requests-kicker {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.my-requests-header h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 46px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.my-requests-header p {
    margin: 12px 0 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.my-requests-new-btn {
    height: 54px !important;
    border: 0 !important;
    border-radius: 18px !important;
    padding: 0 22px !important;
    background: #05a843 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 16px 30px rgba(5, 168, 67, .18) !important;
}

.my-requests-new-btn span {
    font-size: 22px !important;
    line-height: 1 !important;
}

.my-requests-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 26px !important;
}

.my-requests-filter button {
    min-height: 46px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #667085 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
}

.my-requests-filter button.active {
    background: #ecfdf3 !important;
    color: #047857 !important;
    border-color: #bbf7d0 !important;
}

.my-requests-filter strong {
    min-width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: inherit !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.my-requests-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.my-request-card {
    min-height: 130px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    padding: 22px 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.my-request-card:hover {
    transform: translateY(-2px) !important;
    border-color: #d7dee9 !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .10) !important;
}

.my-request-main {
    min-width: 0 !important;
}

.my-request-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
}

.my-request-title-row h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.my-request-status {
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.my-request-status i {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-style: normal !important;
    font-size: 14px !important;
}

.my-request-status.pending {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.my-request-status.pending i {
    color: #f59e0b !important;
}

.my-request-status.approved,
.my-request-status.completed {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.my-request-status.approved i,
.my-request-status.completed i {
    color: #05a843 !important;
}

.my-request-status.rejected {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.my-request-status.rejected i {
    color: #dc2626 !important;
}

.my-request-doctor {
    display: grid !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
}

.my-request-doctor strong {
    color: #05a843 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.my-request-doctor span {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    direction: ltr !important;
    text-align: right !important;
}

.my-request-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.my-request-meta span {
    min-height: 30px !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #667085 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.my-request-note {
    margin-top: 12px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: #667085 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.my-request-actions {
    display: grid !important;
    align-content: center !important;
}

.my-request-open-btn {
    width: 58px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f1f5f9 !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.my-request-open-btn:hover {
    background: #ecfdf3 !important;
    color: #047857 !important;
}

.my-requests-state,
.my-requests-alert,
.my-requests-empty {
    min-height: 280px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 32px !important;
    text-align: center !important;
    color: #667085 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.my-requests-alert {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.my-requests-empty div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.my-requests-empty h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.my-requests-empty p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.my-requests-empty button {
    height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #05a843 !important;
    color: #ffffff !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

@media (max-width: 1180px) {
    .my-requests-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .my-requests-page {
        padding: 28px 16px 58px !important;
    }

    .my-requests-header {
        display: grid !important;
    }

    .my-requests-header h1 {
        font-size: 36px !important;
    }

    .my-request-card {
        grid-template-columns: 1fr !important;
    }

    .my-request-actions {
        justify-content: stretch !important;
    }

    .my-request-open-btn {
        width: 100% !important;
    }

    .my-request-title-row {
        align-items: flex-start !important;
        display: grid !important;
    }
}






























/* =========================================================
   Beneficiary Notifications Page — Figma-like cards
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .beneficiary-notifications-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 46px 48px 80px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.beneficiary-notifications-head {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.notifications-kicker {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.beneficiary-notifications-head h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 46px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.beneficiary-notifications-head p {
    margin: 12px 0 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.notifications-new-pill {
    min-height: 36px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.notifications-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.notification-card {
    position: relative !important;
    min-height: 118px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    padding: 22px 24px !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .065) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.notification-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .10) !important;
}

.notification-card.is-new {
    border-color: #bbf7d0 !important;
}

.notification-dot {
    position: absolute !important;
    top: 25px !important;
    right: 24px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: #05a843 !important;
}

.notification-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.notification-card.success .notification-icon {
    background: #dcfce7 !important;
    color: #05a843 !important;
}

.notification-card.warning .notification-icon {
    background: #fef3c7 !important;
    color: #f59e0b !important;
}

.notification-card.danger .notification-icon {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.notification-card.info .notification-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.notification-copy {
    min-width: 0 !important;
}

.notification-copy h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 950 !important;
}

.notification-copy p {
    margin: 7px 0 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 850 !important;
}

.notification-copy small {
    display: block !important;
    margin-top: 9px !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.notification-open {
    width: 56px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f1f5f9 !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.notification-open:hover {
    background: #ecfdf3 !important;
    color: #047857 !important;
}

.notifications-state-card,
.notifications-alert-card,
.notifications-empty-card {
    min-height: 280px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 32px !important;
    text-align: center !important;
    color: #667085 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.notifications-alert-card {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.notifications-empty-card div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.notifications-empty-card h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.notifications-empty-card p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.notifications-empty-card button {
    height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #05a843 !important;
    color: #ffffff !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

@media (max-width: 1180px) {
    .notifications-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .beneficiary-notifications-page {
        padding: 28px 16px 58px !important;
    }

    .beneficiary-notifications-head {
        display: grid !important;
    }

    .beneficiary-notifications-head h1 {
        font-size: 36px !important;
    }

    .notification-card {
        grid-template-columns: 54px minmax(0, 1fr) !important;
    }

    .notification-open {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}








































/* =========================================================
   Doctor Dashboard — Figma Match
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .doctor-home-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 34px 44px 80px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.doctor-home-hero {
    position: relative !important;
    min-height: 310px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 18% 25%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, #05a843 0%, #009c85 100%) !important;
    box-shadow: 0 22px 44px rgba(5, 168, 67, .18) !important;
    padding: 52px 54px 40px !important;
    margin-bottom: 28px !important;
    overflow: hidden !important;
}

.doctor-home-hero::before {
    content: "" !important;
    position: absolute !important;
    width: 360px !important;
    height: 360px !important;
    border-radius: 999px !important;
    right: -120px !important;
    bottom: -170px !important;
    background: rgba(255,255,255,.12) !important;
}

.doctor-hero-copy {
    position: relative !important;
    z-index: 2 !important;
}

.doctor-hero-copy span {
    display: block !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    margin-bottom: 8px !important;
}

.doctor-hero-copy h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(38px, 4vw, 56px) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.doctor-hero-copy p {
    margin: 12px 0 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.doctor-hero-qr {
    position: absolute !important;
    top: 48px !important;
    left: 48px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #047857 !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .14) !important;
    z-index: 2 !important;
}

.doctor-hero-qr span {
    font-size: 23px !important;
}

.doctor-hero-stats {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 46px !important;
}

.doctor-hero-stats article {
    min-height: 104px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    backdrop-filter: blur(8px) !important;
}

.doctor-hero-stats strong {
    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.doctor-hero-stats span {
    color: rgba(255,255,255,.82) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.doctor-schedule-card,
.doctor-cases-panel {
    border: 1px solid #e9eef5 !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    margin-bottom: 26px !important;
    padding: 26px !important;
}

.doctor-section-title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
}

.doctor-section-title h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
}

.doctor-section-title p {
    margin: 7px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.doctor-days-strip {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.doctor-day-card {
    min-height: 132px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #f9fafb !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    text-align: center !important;
}

.doctor-day-card span {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.doctor-day-card strong {
    color: #101828 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.doctor-day-card small {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.doctor-day-card em {
    min-height: 27px !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 950 !important;
}

.doctor-day-card.available,
.doctor-day-card.today {
    background: #ecfdf3 !important;
    border-color: #86efac !important;
}

.doctor-day-card.available em,
.doctor-day-card.today em {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.doctor-day-card.has-request {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
}

.doctor-day-card.has-request em {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fcd34d !important;
}

.doctor-day-card.off {
    background: #f9fafb !important;
    opacity: .72 !important;
}

.doctor-day-card.off strong,
.doctor-day-card.off span,
.doctor-day-card.off small {
    color: #c2c9d3 !important;
}

.doctor-day-card.off em {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.doctor-actions-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 26px !important;
}

.doctor-action-card {
    min-height: 104px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .065) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 17px !important;
    font-weight: 950 !important;
}

.doctor-action-card span {
    font-size: 31px !important;
    line-height: 1 !important;
}

.doctor-action-card.green {
    background: #ecfdf3 !important;
    color: #047857 !important;
}

.doctor-action-card.blue {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.doctor-action-card.mint {
    background: #f0fdf4 !important;
    color: #05a843 !important;
}

.doctor-action-card.purple {
    background: #faf5ff !important;
    color: #9333ea !important;
}

.doctor-refresh-btn {
    height: 42px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #047857 !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.doctor-current-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.doctor-current-case {
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    padding: 20px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .045) !important;
}

.current-case-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}

.current-case-head h3 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 21px !important;
    font-weight: 950 !important;
}

.current-case-head p {
    margin: 5px 0 0 !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.doctor-case-status {
    min-height: 32px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.doctor-case-status.approved,
.doctor-case-status.completed {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.doctor-case-status.pending {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.doctor-case-status.rejected {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.current-case-desc {
    margin: 0 0 14px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: #667085 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.current-case-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.current-case-meta span {
    min-height: 28px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #667085 !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.current-case-actions {
    display: flex !important;
    gap: 10px !important;
}

.doctor-open-btn,
.doctor-complete-btn {
    height: 40px !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.doctor-open-btn {
    background: #f1f5f9 !important;
    color: #344054 !important;
}

.doctor-complete-btn {
    background: #05a843 !important;
    color: #ffffff !important;
}

.doctor-complete-btn:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
}

.doctor-home-state,
.doctor-home-alert,
.doctor-home-empty {
    min-height: 240px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 30px !important;
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.doctor-home-alert {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

.doctor-home-empty div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.doctor-home-empty h3 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 23px !important;
    font-weight: 950 !important;
}

.doctor-home-empty p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

@media (max-width: 1200px) {
    .doctor-days-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .doctor-actions-row,
    .doctor-current-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .doctor-home-page {
        padding: 24px 16px 60px !important;
    }

    .doctor-home-hero {
        padding: 34px 24px 28px !important;
    }

    .doctor-hero-qr {
        position: static !important;
        margin-top: 22px !important;
    }

    .doctor-hero-stats,
    .doctor-days-strip,
    .doctor-actions-row,
    .doctor-current-list {
        grid-template-columns: 1fr !important;
    }

    .doctor-section-title,
    .current-case-head,
    .current-case-actions {
        display: grid !important;
    }

    .doctor-open-btn,
    .doctor-complete-btn {
        width: 100% !important;
    }
}





































/* =========================================================
   Doctor Scan + Result Page — Fake QR Flow
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .doctor-scan-modern-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 46px 48px 80px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.doctor-scan-modern-head,
.doctor-result-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    text-align: right !important;
    margin-bottom: 32px !important;
}

.doctor-scan-modern-head h1,
.doctor-result-head h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.doctor-scan-modern-head p,
.doctor-result-head p {
    margin: 8px 0 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.doctor-scan-back {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #475467 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 38px !important;
    cursor: pointer !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06) !important;
}

.doctor-scanner-shell {
    width: min(100%, 520px) !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 20px !important;
}

.doctor-scanner-box {
    min-height: 440px !important;
    border-radius: 30px !important;
    background: #111827 !important;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .18) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 22px !important;
    padding: 40px !important;
}

.scanner-frame {
    position: relative !important;
    width: 285px !important;
    height: 285px !important;
    border: 5px solid rgba(148, 163, 184, .28) !important;
    border-radius: 26px !important;
    display: grid !important;
    place-items: center !important;
}

.scanner-frame .corner {
    position: absolute !important;
    width: 44px !important;
    height: 44px !important;
    border-color: #22d3c5 !important;
    border-style: solid !important;
}

.scanner-frame .top-right {
    top: 12px !important;
    right: 12px !important;
    border-width: 5px 5px 0 0 !important;
    border-top-right-radius: 18px !important;
}

.scanner-frame .top-left {
    top: 12px !important;
    left: 12px !important;
    border-width: 5px 0 0 5px !important;
    border-top-left-radius: 18px !important;
}

.scanner-frame .bottom-right {
    bottom: 12px !important;
    right: 12px !important;
    border-width: 0 5px 5px 0 !important;
    border-bottom-right-radius: 18px !important;
}

.scanner-frame .bottom-left {
    bottom: 12px !important;
    left: 12px !important;
    border-width: 0 0 5px 5px !important;
    border-bottom-left-radius: 18px !important;
}

.scanner-fake-qr {
    color: #6b7280 !important;
    font-size: 68px !important;
    font-weight: 950 !important;
    letter-spacing: .05em !important;
}

.doctor-scanner-box p {
    margin: 0 !important;
    color: #9ca3af !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.doctor-simulate-scan-btn {
    height: 66px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #0f9f8e, #009c85) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 18px 32px rgba(15, 159, 142, .18) !important;
}

.doctor-simulate-scan-btn:disabled {
    opacity: .65 !important;
    cursor: not-allowed !important;
}

.doctor-result-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr) !important;
    grid-template-areas:
        "notes patient"
        "choices patient" !important;
    gap: 24px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.doctor-result-card {
    border: 1px solid #e9eef5 !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    padding: 28px !important;
}

.doctor-result-card.patient {
    grid-area: patient !important;
}

.doctor-result-card.notes {
    grid-area: notes !important;
}

.doctor-result-card.choices {
    grid-area: choices !important;
}

.result-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.doctor-result-card h2,
.result-card-head h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 25px !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
}

.patient-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.patient-info-grid div {
    border-radius: 18px !important;
    background: #f8fafc !important;
    padding: 15px !important;
    display: grid !important;
    gap: 5px !important;
}

.patient-info-grid span,
.case-description-box span {
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.patient-info-grid strong {
    color: #101828 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.case-description-box {
    border-radius: 20px !important;
    background: #f8fafc !important;
    padding: 16px !important;
}

.case-description-box p {
    margin: 8px 0 0 !important;
    color: #475467 !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    font-weight: 850 !important;
}

.doctor-notes-area {
    width: 100% !important;
    min-height: 170px !important;
    margin-top: 18px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 22px !important;
    background: #f9fafb !important;
    padding: 20px !important;
    resize: vertical !important;
    outline: none !important;
    color: #101828 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    font-weight: 850 !important;
}

.result-choice {
    width: 100% !important;
    min-height: 64px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 18px !important;
    background: #f9fafb !important;
    color: #101828 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 18px !important;
    margin-top: 14px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.result-choice span {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #98a2b3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.result-choice.selected {
    border-color: #86efac !important;
    background: #ecfdf3 !important;
    color: #047857 !important;
}

.result-choice.selected span {
    background: #dcfce7 !important;
    color: #05a843 !important;
}

.save-result-btn {
    width: 100% !important;
    height: 64px !important;
    margin-top: 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #05a843 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 16px 30px rgba(5,168,67,.18) !important;
}

.save-result-btn:disabled {
    background: #e5e7eb !important;
    color: #98a2b3 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.doctor-scan-message {
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.doctor-scan-message.success {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.doctor-scan-message.danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.doctor-case-status {
    min-height: 32px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.doctor-case-status.approved,
.doctor-case-status.completed {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.doctor-case-status.pending {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.doctor-case-status.rejected {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

@media (max-width: 1100px) {
    .doctor-result-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "patient"
            "notes"
            "choices" !important;
    }
}

@media (max-width: 760px) {
    .doctor-scan-modern-page {
        padding: 26px 16px 60px !important;
    }

    .doctor-scan-modern-head,
    .doctor-result-head {
        justify-content: flex-start !important;
    }

    .doctor-scanner-box {
        min-height: 380px !important;
        padding: 28px !important;
    }

    .scanner-frame {
        width: 235px !important;
        height: 235px !important;
    }

    .patient-info-grid {
        grid-template-columns: 1fr !important;
    }
}





































/* =========================================================
   Doctor History Page — Project UI Design
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .doctor-history-modern-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 46px 48px 80px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.doctor-history-modern-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.doctor-history-kicker {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.doctor-history-modern-head h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 46px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.doctor-history-modern-head p {
    margin: 12px 0 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.doctor-history-back-btn {
    height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #047857 !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.doctor-history-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}

.doctor-history-summary-card {
    min-height: 142px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    padding: 24px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    border-right: 6px solid #05a843 !important;
}

.doctor-history-summary-card.blue {
    border-right-color: #2563eb !important;
}

.doctor-history-summary-card.orange {
    border-right-color: #f59e0b !important;
}

.doctor-history-summary-card.purple {
    border-right-color: #9333ea !important;
}

.doctor-history-summary-card span {
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.doctor-history-summary-card strong {
    color: #101828 !important;
    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.doctor-history-summary-card small {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.doctor-history-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
}

.doctor-history-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.doctor-history-tabs button {
    min-height: 46px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #667085 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
}

.doctor-history-tabs button.active {
    background: #ecfdf3 !important;
    color: #047857 !important;
    border-color: #bbf7d0 !important;
}

.doctor-history-tabs strong {
    min-width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: inherit !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.doctor-history-search {
    width: min(100%, 360px) !important;
    display: grid !important;
    gap: 7px !important;
}

.doctor-history-search span {
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.doctor-history-search input {
    height: 48px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #101828 !important;
    padding: 0 18px !important;
    outline: none !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035) !important;
}

.doctor-history-list {
    display: grid !important;
    gap: 16px !important;
}

.doctor-history-item {
    border: 1px solid #e9eef5 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    padding: 22px !important;
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    gap: 22px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .065) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.doctor-history-item:hover {
    transform: translateY(-2px) !important;
    border-color: #d7dee9 !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .10) !important;
}

.history-item-status-side {
    border-radius: 20px !important;
    background: #f8fafc !important;
    padding: 18px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
}

.doctor-history-status {
    min-height: 36px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.doctor-history-status.approved,
.doctor-history-status.completed {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.doctor-history-status.pending {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.doctor-history-status.rejected {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.history-item-status-side small {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    direction: ltr !important;
}

.history-item-main {
    min-width: 0 !important;
}

.history-item-title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 12px !important;
}

.history-item-title h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.history-item-title p {
    margin: 6px 0 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.history-item-date {
    text-align: left !important;
    min-width: 150px !important;
}

.history-item-date span {
    display: block !important;
    color: #101828 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    direction: ltr !important;
}

.history-item-date small {
    display: block !important;
    margin-top: 4px !important;
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.history-item-description {
    border-radius: 18px !important;
    background: #f8fafc !important;
    color: #667085 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    font-weight: 850 !important;
    margin-bottom: 14px !important;
}

.history-item-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.history-item-meta span {
    min-height: 30px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #667085 !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.history-item-note {
    margin-top: 14px !important;
    border: 1px solid #d1fae5 !important;
    border-radius: 16px !important;
    background: #ecfdf3 !important;
    color: #047857 !important;
    padding: 12px 14px !important;
    display: grid !important;
    gap: 5px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    font-weight: 850 !important;
}

.history-item-note strong {
    font-weight: 950 !important;
}

.doctor-history-state,
.doctor-history-alert,
.doctor-history-empty {
    min-height: 280px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 32px !important;
    text-align: center !important;
    color: #667085 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.doctor-history-alert {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

.doctor-history-empty div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.doctor-history-empty h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.doctor-history-empty p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

@media (max-width: 1180px) {
    .doctor-history-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .doctor-history-toolbar {
        display: grid !important;
    }

    .doctor-history-search {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .doctor-history-modern-page {
        padding: 28px 16px 58px !important;
    }

    .doctor-history-modern-head {
        display: grid !important;
    }

    .doctor-history-modern-head h1 {
        font-size: 36px !important;
    }

    .doctor-history-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .doctor-history-item {
        grid-template-columns: 1fr !important;
    }

    .history-item-title {
        display: grid !important;
    }

    .history-item-date {
        text-align: right !important;
    }
}








































/* =========================================================
   Admin Pharmacies Module
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .admin-pharmacy-page,
   .admin-pharmacy-form-page {
       width: 100% !important;
       min-height: calc(100vh - 78px) !important;
       padding: 46px 48px 80px !important;
       background: #f8fafc !important;
       color: #111827 !important;
       box-sizing: border-box !important;
       overflow-x: hidden !important;
   }
   
   .admin-pharmacy-head,
   .admin-pharmacy-form-head {
       display: flex !important;
       align-items: flex-start !important;
       justify-content: space-between !important;
       gap: 24px !important;
       margin-bottom: 28px !important;
   }
   
   .admin-pharmacy-form-head {
       justify-content: flex-start !important;
       align-items: center !important;
   }
   
   .admin-pharmacy-kicker {
       color: #667085 !important;
       font-size: 15px !important;
       font-weight: 900 !important;
       margin-bottom: 8px !important;
   }
   
   .admin-pharmacy-head h1,
   .admin-pharmacy-form-head h1 {
       margin: 0 !important;
       color: #101828 !important;
       font-size: 46px !important;
       line-height: 1.1 !important;
       font-weight: 950 !important;
       letter-spacing: -0.05em !important;
   }
   
   .admin-pharmacy-head p,
   .admin-pharmacy-form-head p {
       margin: 12px 0 0 !important;
       color: #667085 !important;
       font-size: 15px !important;
       line-height: 1.8 !important;
       font-weight: 850 !important;
   }
   
   .admin-pharmacy-add-btn {
       height: 58px !important;
       border: 0 !important;
       border-radius: 18px !important;
       padding: 0 24px !important;
       background: #7c3aed !important;
       color: #ffffff !important;
       display: inline-flex !important;
       align-items: center !important;
       gap: 10px !important;
       font-size: 15px !important;
       font-weight: 950 !important;
       cursor: pointer !important;
       box-shadow: 0 16px 30px rgba(124, 58, 237, .18) !important;
   }
   
   .admin-pharmacy-add-btn span {
       font-size: 24px !important;
   }
   
   .admin-pharmacy-back {
       width: 54px !important;
       height: 54px !important;
       border: 1px solid #dfe5ec !important;
       border-radius: 999px !important;
       background: #ffffff !important;
       color: #475467 !important;
       display: grid !important;
       place-items: center !important;
       font-size: 38px !important;
       cursor: pointer !important;
       box-shadow: 0 12px 26px rgba(15, 23, 42, .06) !important;
   }
   
   .admin-pharmacy-message {
       min-height: 52px !important;
       border-radius: 18px !important;
       padding: 14px 18px !important;
       margin-bottom: 20px !important;
       display: flex !important;
       align-items: center !important;
       font-size: 14px !important;
       font-weight: 950 !important;
   }
   
   .admin-pharmacy-message.ok {
       background: #dcfce7 !important;
       color: #15803d !important;
       border: 1px solid #86efac !important;
   }
   
   .admin-pharmacy-message.bad {
       background: #fee2e2 !important;
       color: #991b1b !important;
       border: 1px solid #fecaca !important;
   }
   
   .admin-pharmacy-stats {
       display: grid !important;
       grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
       gap: 18px !important;
       margin-bottom: 22px !important;
   }
   
   .admin-pharmacy-stats article {
       min-height: 130px !important;
       border: 1px solid #e9eef5 !important;
       border-radius: 24px !important;
       background: #ffffff !important;
       padding: 24px !important;
       display: grid !important;
       align-content: center !important;
       gap: 8px !important;
       box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
       border-right: 6px solid #7c3aed !important;
   }
   
   .admin-pharmacy-stats span {
       color: #667085 !important;
       font-size: 14px !important;
       font-weight: 950 !important;
   }
   
   .admin-pharmacy-stats strong {
       color: #101828 !important;
       font-size: 38px !important;
       line-height: 1 !important;
       font-weight: 950 !important;
   }
   
   .admin-pharmacy-toolbar {
       margin-bottom: 22px !important;
   }
   
   .admin-pharmacy-toolbar label {
       width: min(100%, 420px) !important;
       display: grid !important;
       gap: 8px !important;
   }
   
   .admin-pharmacy-toolbar span {
       color: #667085 !important;
       font-size: 13px !important;
       font-weight: 950 !important;
   }
   
   .admin-pharmacy-toolbar input {
       height: 50px !important;
       border: 1px solid #dfe5ec !important;
       border-radius: 999px !important;
       background: #ffffff !important;
       color: #101828 !important;
       padding: 0 18px !important;
       outline: none !important;
       font-size: 14px !important;
       font-weight: 850 !important;
       box-shadow: 0 8px 18px rgba(15, 23, 42, .035) !important;
   }
   
   .admin-pharmacy-grid {
       display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       gap: 18px !important;
   }
   
   .admin-pharmacy-card {
       border: 1px solid #e9eef5 !important;
       border-radius: 26px !important;
       background: #ffffff !important;
       padding: 24px !important;
       box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
   }
   
   .pharmacy-card-top {
       display: grid !important;
       grid-template-columns: 64px minmax(0, 1fr) auto !important;
       align-items: center !important;
       gap: 16px !important;
       margin-bottom: 20px !important;
   }
   
   .pharmacy-icon {
       width: 58px !important;
       height: 58px !important;
       border-radius: 20px !important;
       background: #f3e8ff !important;
       color: #7c3aed !important;
       display: grid !important;
       place-items: center !important;
       font-size: 28px !important;
   }
   
   .pharmacy-title h2 {
       margin: 0 !important;
       color: #101828 !important;
       font-size: 24px !important;
       font-weight: 950 !important;
   }
   
   .pharmacy-title p {
       margin: 6px 0 0 !important;
       color: #667085 !important;
       font-size: 13px !important;
       font-weight: 850 !important;
       direction: ltr !important;
       text-align: right !important;
   }
   
   .pharmacy-status {
       min-height: 34px !important;
       border-radius: 999px !important;
       padding: 0 13px !important;
       display: inline-flex !important;
       align-items: center !important;
       font-size: 13px !important;
       font-weight: 950 !important;
   }
   
   .pharmacy-status.active {
       background: #dcfce7 !important;
       color: #15803d !important;
       border: 1px solid #86efac !important;
   }
   
   .pharmacy-status.inactive {
       background: #fee2e2 !important;
       color: #b91c1c !important;
       border: 1px solid #fecaca !important;
   }
   
   .pharmacy-info {
       display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       gap: 12px !important;
       margin-bottom: 16px !important;
   }
   
   .pharmacy-info div {
       border-radius: 18px !important;
       background: #f8fafc !important;
       padding: 14px !important;
       display: grid !important;
       gap: 5px !important;
   }
   
   .pharmacy-info span {
       color: #98a2b3 !important;
       font-size: 12px !important;
       font-weight: 900 !important;
   }
   
   .pharmacy-info strong {
       color: #101828 !important;
       font-size: 14px !important;
       font-weight: 950 !important;
   }
   
   .pharmacy-login-note {
       border-radius: 16px !important;
       background: #faf5ff !important;
       color: #6d28d9 !important;
       padding: 13px 15px !important;
       font-size: 13px !important;
       font-weight: 850 !important;
       margin-bottom: 16px !important;
   }
   
   .pharmacy-login-note strong {
       direction: ltr !important;
   }
   
   .pharmacy-actions {
       display: flex !important;
       gap: 10px !important;
   }
   
   .pharmacy-actions button {
       height: 42px !important;
       border: 0 !important;
       border-radius: 14px !important;
       padding: 0 14px !important;
       font-size: 13px !important;
       font-weight: 950 !important;
       cursor: pointer !important;
   }
   
   .pharmacy-actions .soft {
       background: #f1f5f9 !important;
       color: #344054 !important;
   }
   
   .pharmacy-actions .danger {
       background: #fee2e2 !important;
       color: #b91c1c !important;
   }
   
   .pharmacy-actions .success {
       background: #dcfce7 !important;
       color: #15803d !important;
   }
   
   .admin-pharmacy-state,
   .admin-pharmacy-empty {
       min-height: 280px !important;
       border: 1px solid #e9eef5 !important;
       border-radius: 28px !important;
       background: #ffffff !important;
       box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
       display: grid !important;
       place-items: center !important;
       align-content: center !important;
       gap: 12px !important;
       padding: 32px !important;
       text-align: center !important;
       color: #667085 !important;
       font-size: 16px !important;
       font-weight: 900 !important;
   }
   
   .admin-pharmacy-empty div {
       width: 72px !important;
       height: 72px !important;
       border-radius: 24px !important;
       background: #faf5ff !important;
       display: grid !important;
       place-items: center !important;
       font-size: 34px !important;
   }
   
   .admin-pharmacy-empty h2 {
       margin: 0 !important;
       color: #101828 !important;
       font-size: 24px !important;
       font-weight: 950 !important;
   }
   
   .admin-pharmacy-empty p {
       margin: 0 !important;
       color: #667085 !important;
       font-size: 14px !important;
       font-weight: 850 !important;
   }
   
   .admin-pharmacy-empty button {
       height: 48px !important;
       border: 0 !important;
       border-radius: 999px !important;
       background: #7c3aed !important;
       color: #ffffff !important;
       padding: 0 22px !important;
       font-size: 14px !important;
       font-weight: 950 !important;
       cursor: pointer !important;
   }
   
   .admin-pharmacy-form-card {
       max-width: 980px !important;
       border: 1px solid #e9eef5 !important;
       border-radius: 28px !important;
       background: #ffffff !important;
       box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
       padding: 30px !important;
   }
   
   .pharmacy-form-grid {
       display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       gap: 20px !important;
   }
   
   .pharmacy-form-grid label {
       display: grid !important;
       gap: 9px !important;
   }
   
   .pharmacy-form-grid label span {
       color: #344054 !important;
       font-size: 14px !important;
       font-weight: 950 !important;
   }
   
   .pharmacy-input {
       height: 56px !important;
       border: 1px solid #dfe5ec !important;
       border-radius: 18px !important;
       background: #f9fafb !important;
       color: #101828 !important;
       padding: 0 18px !important;
       outline: none !important;
       font-size: 15px !important;
       font-weight: 850 !important;
   }
   
   .pharmacy-default-password {
       margin-top: 22px !important;
       border: 1px solid #ddd6fe !important;
       border-radius: 20px !important;
       background: #faf5ff !important;
       color: #6d28d9 !important;
       padding: 18px !important;
       display: flex !important;
       align-items: center !important;
       gap: 14px !important;
   }
   
   .pharmacy-default-password span {
       width: 44px !important;
       height: 44px !important;
       border-radius: 16px !important;
       background: #f3e8ff !important;
       display: grid !important;
       place-items: center !important;
       font-size: 22px !important;
   }
   
   .pharmacy-default-password strong {
       display: block !important;
       color: #4c1d95 !important;
       font-size: 15px !important;
       font-weight: 950 !important;
   }
   
   .pharmacy-default-password p {
       margin: 5px 0 0 !important;
       color: #6d28d9 !important;
       font-size: 13px !important;
       font-weight: 850 !important;
   }
   
   .pharmacy-form-actions {
       margin-top: 26px !important;
       display: grid !important;
       grid-template-columns: 180px minmax(0, 1fr) !important;
       gap: 14px !important;
   }
   
   .pharmacy-form-actions button {
       height: 58px !important;
       border: 0 !important;
       border-radius: 18px !important;
       font-size: 16px !important;
       font-weight: 950 !important;
       cursor: pointer !important;
   }
   
   .pharmacy-form-actions .secondary {
       background: #f1f5f9 !important;
       color: #344054 !important;
   }
   
   .pharmacy-form-actions .primary {
       background: #7c3aed !important;
       color: #ffffff !important;
       box-shadow: 0 16px 30px rgba(124, 58, 237, .18) !important;
   }
   
   @media (max-width: 1180px) {
       .admin-pharmacy-grid,
       .admin-pharmacy-stats {
           grid-template-columns: 1fr !important;
       }
   }
   
   @media (max-width: 760px) {
       .admin-pharmacy-page,
       .admin-pharmacy-form-page {
           padding: 28px 16px 58px !important;
       }
   
       .admin-pharmacy-head,
       .admin-pharmacy-form-head {
           display: grid !important;
       }
   
       .admin-pharmacy-head h1,
       .admin-pharmacy-form-head h1 {
           font-size: 36px !important;
       }
   
       .pharmacy-card-top,
       .pharmacy-info,
       .pharmacy-form-grid,
       .pharmacy-form-actions {
           grid-template-columns: 1fr !important;
       }
   
       .pharmacy-actions {
           display: grid !important;
       }
   
       .pharmacy-actions button {
           width: 100% !important;
       }
   }
   






















   /* =========================================================
   Admin Pharmacies Module
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

.admin-pharmacy-page,
.admin-pharmacy-form-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 46px 48px 80px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.admin-pharmacy-head,
.admin-pharmacy-form-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.admin-pharmacy-form-head {
    justify-content: flex-start !important;
    align-items: center !important;
}

.admin-pharmacy-kicker {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.admin-pharmacy-head h1,
.admin-pharmacy-form-head h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 46px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.admin-pharmacy-head p,
.admin-pharmacy-form-head p {
    margin: 12px 0 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.admin-pharmacy-add-btn {
    height: 58px !important;
    border: 0 !important;
    border-radius: 18px !important;
    padding: 0 24px !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 16px 30px rgba(124, 58, 237, .18) !important;
}

.admin-pharmacy-add-btn span {
    font-size: 24px !important;
}

.admin-pharmacy-back {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #475467 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 38px !important;
    cursor: pointer !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06) !important;
}

.admin-pharmacy-message {
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.admin-pharmacy-message.ok {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.admin-pharmacy-message.bad {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.admin-pharmacy-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
}

.admin-pharmacy-stats article {
    min-height: 130px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    padding: 24px !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    border-right: 6px solid #7c3aed !important;
}

.admin-pharmacy-stats span {
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.admin-pharmacy-stats strong {
    color: #101828 !important;
    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.admin-pharmacy-toolbar {
    margin-bottom: 22px !important;
}

.admin-pharmacy-toolbar label {
    width: min(100%, 420px) !important;
    display: grid !important;
    gap: 8px !important;
}

.admin-pharmacy-toolbar span {
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.admin-pharmacy-toolbar input {
    height: 50px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #101828 !important;
    padding: 0 18px !important;
    outline: none !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035) !important;
}

.admin-pharmacy-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.admin-pharmacy-card {
    border: 1px solid #e9eef5 !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    padding: 24px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
}

.pharmacy-card-top {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.pharmacy-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    background: #f3e8ff !important;
    color: #7c3aed !important;
    display: grid !important;
    place-items: center !important;
    font-size: 28px !important;
}

.pharmacy-title h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.pharmacy-title p {
    margin: 6px 0 0 !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    direction: ltr !important;
    text-align: right !important;
}

.pharmacy-status {
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.pharmacy-status.active {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.pharmacy-status.inactive {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.pharmacy-info {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.pharmacy-info div {
    border-radius: 18px !important;
    background: #f8fafc !important;
    padding: 14px !important;
    display: grid !important;
    gap: 5px !important;
}

.pharmacy-info span {
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.pharmacy-info strong {
    color: #101828 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.pharmacy-login-note {
    border-radius: 16px !important;
    background: #faf5ff !important;
    color: #6d28d9 !important;
    padding: 13px 15px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    margin-bottom: 16px !important;
}

.pharmacy-login-note strong {
    direction: ltr !important;
}

.pharmacy-actions {
    display: flex !important;
    gap: 10px !important;
}

.pharmacy-actions button {
    height: 42px !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.pharmacy-actions .soft {
    background: #f1f5f9 !important;
    color: #344054 !important;
}

.pharmacy-actions .danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.pharmacy-actions .success {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.admin-pharmacy-state,
.admin-pharmacy-empty {
    min-height: 280px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 32px !important;
    text-align: center !important;
    color: #667085 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.admin-pharmacy-empty div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #faf5ff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.admin-pharmacy-empty h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.admin-pharmacy-empty p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.admin-pharmacy-empty button {
    height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.admin-pharmacy-form-card {
    max-width: 980px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
    padding: 30px !important;
}

.pharmacy-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.pharmacy-form-grid label {
    display: grid !important;
    gap: 9px !important;
}

.pharmacy-form-grid label span {
    color: #344054 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.pharmacy-input {
    height: 56px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 18px !important;
    background: #f9fafb !important;
    color: #101828 !important;
    padding: 0 18px !important;
    outline: none !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.pharmacy-default-password {
    margin-top: 22px !important;
    border: 1px solid #ddd6fe !important;
    border-radius: 20px !important;
    background: #faf5ff !important;
    color: #6d28d9 !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.pharmacy-default-password span {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: #f3e8ff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
}

.pharmacy-default-password strong {
    display: block !important;
    color: #4c1d95 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.pharmacy-default-password p {
    margin: 5px 0 0 !important;
    color: #6d28d9 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.pharmacy-form-actions {
    margin-top: 26px !important;
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 14px !important;
}

.pharmacy-form-actions button {
    height: 58px !important;
    border: 0 !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.pharmacy-form-actions .secondary {
    background: #f1f5f9 !important;
    color: #344054 !important;
}

.pharmacy-form-actions .primary {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(124, 58, 237, .18) !important;
}

@media (max-width: 1180px) {
    .admin-pharmacy-grid,
    .admin-pharmacy-stats {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .admin-pharmacy-page,
    .admin-pharmacy-form-page {
        padding: 28px 16px 58px !important;
    }

    .admin-pharmacy-head,
    .admin-pharmacy-form-head {
        display: grid !important;
    }

    .admin-pharmacy-head h1,
    .admin-pharmacy-form-head h1 {
        font-size: 36px !important;
    }

    .pharmacy-card-top,
    .pharmacy-info,
    .pharmacy-form-grid,
    .pharmacy-form-actions {
        grid-template-columns: 1fr !important;
    }

    .pharmacy-actions {
        display: grid !important;
    }

    .pharmacy-actions button {
        width: 100% !important;
    }
}










/* =========================================================
   FIX — Global Topbar Visible Like Figma
   ========================================================= */

   .ch-layout-shell {
    --topbar-height: 92px;
    --sidebar-width: 300px;
    min-height: 100vh !important;
    background: #f8fafc !important;
}

/* الشريط العلوي */
.ch-topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--topbar-height) !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إجبار كل عناصر الشريط تظهر */
.ch-topbar *,
.ch-brand,
.ch-brand *,
.ch-user-chip,
.ch-user-chip *,
.ch-top-actions,
.ch-top-actions * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* اللوجو يمين */
.ch-brand {
    position: absolute !important;
    right: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-align: right !important;
    z-index: 1000000 !important;
}

.ch-brand-logo {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    box-shadow: 0 10px 22px rgba(5, 168, 67, 0.24) !important;
}

.ch-brand-logo::after {
    content: "" !important;
    position: absolute !important;
    width: 31px !important;
    height: 31px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    top: 10px !important;
    left: 9px !important;
}

.ch-brand-logo::before {
    content: "" !important;
    position: absolute !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    top: 10px !important;
    left: 17px !important;
    z-index: 2 !important;
}

.ch-brand-text {
    display: grid !important;
    gap: 3px !important;
}

.ch-brand-text strong {
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.03em !important;
}

.ch-brand-text small {
    color: #047857 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

/* اسم المستخدم في النص */
.ch-user-chip {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    z-index: 1000000 !important;
}

.ch-user-chip strong {
    font-weight: 950 !important;
}

.ch-user-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    display: inline-block !important;
}

/* ألوان حسب نوع المستخدم */
.ch-user-chip.beneficiary {
    color: #047857 !important;
    background: #ecfdf3 !important;
    border-color: #a7f3d0 !important;
}

.ch-user-chip.doctor {
    color: #0369a1 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.ch-user-chip.admin,
.ch-user-chip.staff {
    color: #7e22ce !important;
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
}

.ch-user-chip.guest {
    color: #475467 !important;
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
}

/* الخروج والدارك مود شمال */
.ch-top-actions {
    position: absolute !important;
    left: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    z-index: 1000000 !important;
}

.ch-logout-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #667085 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.ch-logout-link:hover {
    color: #dc2626 !important;
}

.ch-logout-icon {
    font-size: 22px !important;
    line-height: 1 !important;
}

.ch-theme-toggle {
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475467 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    font-size: 21px !important;
}

.ch-theme-toggle:hover {
    background: #e2e8f0 !important;
}

/* السايدبار يبدأ تحت الشريط */
.ch-sidebar,
.app-sidebar.ch-sidebar {
    position: fixed !important;
    top: var(--topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-width) !important;
    height: calc(100vh - var(--topbar-height)) !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-left: 1px solid #e5e7eb !important;
    overflow-y: auto !important;
}

/* مساحة الصفحة */
.ch-workspace,
.app-workspace.ch-workspace {
    min-height: 100vh !important;
    padding-top: var(--topbar-height) !important;
    margin-right: var(--sidebar-width) !important;
    background: #f8fafc !important;
}

.ch-page-canvas {
    min-height: calc(100vh - var(--topbar-height)) !important;
}

/* Dark Mode */
.theme-dark .ch-topbar {
    background: #0f172a !important;
    border-bottom-color: #263244 !important;
}

.theme-dark .ch-brand-text strong {
    color: #f8fafc !important;
}

.theme-dark .ch-brand-text small {
    color: #86efac !important;
}

.theme-dark .ch-theme-toggle {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

.theme-dark .ch-logout-link {
    color: #cbd5e1 !important;
}

.theme-dark .ch-sidebar {
    background: #111827 !important;
    border-left-color: #263244 !important;
}

.theme-dark .ch-workspace {
    background: #101827 !important;
}

/* Mobile */
@media (max-width: 900px) {
    .ch-layout-shell {
        --topbar-height: 78px;
        --sidebar-width: 0px;
    }

    .ch-topbar {
        height: var(--topbar-height) !important;
    }

    .ch-brand {
        right: 16px !important;
        gap: 10px !important;
    }

    .ch-brand-logo {
        width: 44px !important;
        height: 44px !important;
    }

    .ch-brand-text strong {
        font-size: 16px !important;
    }

    .ch-brand-text small {
        font-size: 11px !important;
    }

    .ch-user-chip {
        display: none !important;
    }

    .ch-top-actions {
        left: 16px !important;
        gap: 8px !important;
    }

    .ch-logout-link span:first-child {
        display: none !important;
    }

    .ch-theme-toggle {
        width: 44px !important;
        height: 44px !important;
    }

    .ch-sidebar {
        display: none !important;
    }

    .ch-workspace {
        margin-right: 0 !important;
        padding-top: var(--topbar-height) !important;
    }
}
































/* Pharmacy Dashboard V2 */
.pharmacy-dashboard-v2{width:100%!important;min-height:calc(100vh - 78px)!important;padding:34px 44px 90px!important;background:#f8fafc!important;color:#111827!important;box-sizing:border-box!important;overflow-x:hidden!important}
.pharmacy-dash-hero{position:relative!important;min-height:315px!important;border-radius:30px!important;padding:48px 54px 40px!important;margin-bottom:28px!important;overflow:hidden!important;background:radial-gradient(circle at 20% 22%,rgba(255,255,255,.16),transparent 26%),linear-gradient(135deg,#0f9f8e 0%,#058fce 48%,#1459ff 100%)!important;box-shadow:0 24px 48px rgba(20,89,255,.16)!important}
.pharmacy-dash-hero-copy h1{margin:0!important;color:#fff!important;font-size:56px!important;line-height:1.08!important;font-weight:950!important}
.pharmacy-dash-hero-copy span,.pharmacy-dash-hero-copy p{color:rgba(255,255,255,.82)!important;font-weight:900!important}
.pharmacy-dash-hero-pill{position:absolute!important;top:44px!important;left:44px!important;height:56px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:#1459ff!important;padding:0 24px!important;font-size:15px!important;font-weight:950!important;cursor:pointer!important;box-shadow:0 16px 32px rgba(15,23,42,.14)!important}
.pharmacy-dash-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;margin-top:48px!important}
.pharmacy-dash-stats article{min-height:106px!important;border-radius:24px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;display:grid!important;place-items:center!important;align-content:center!important;gap:8px!important}
.pharmacy-dash-stats strong{color:#fff!important;font-size:38px!important;line-height:1!important;font-weight:950!important}
.pharmacy-dash-stats span{color:rgba(255,255,255,.84)!important;font-size:14px!important;font-weight:900!important}
.pharmacy-dash-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;margin-bottom:28px!important}
.pharmacy-dash-action{min-height:130px!important;border:1px solid #e9eef5!important;border-radius:22px!important;background:#fff!important;box-shadow:0 10px 24px rgba(15,23,42,.06)!important;display:grid!important;place-items:center!important;align-content:center!important;gap:13px!important;cursor:pointer!important;font-size:17px!important;font-weight:950!important}
.pharmacy-dash-action span{width:46px!important;height:46px!important;border-radius:999px!important;display:grid!important;place-items:center!important;font-size:26px!important}
.pharmacy-dash-action.active{background:#1459ff!important;color:#fff!important;box-shadow:0 20px 36px rgba(20,89,255,.22)!important}
.pharmacy-dash-action.mint{background:#f0fdfa!important;color:#0f766e!important;border-color:#99f6e4!important}
.pharmacy-dash-action.purple{background:#faf5ff!important;color:#7c3aed!important;border-color:#e9d5ff!important}
.pharmacy-dash-action.orange{background:#fffbeb!important;color:#c2410c!important;border-color:#fde68a!important}
.pharmacy-latest-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:10px 0 18px!important}
.pharmacy-latest-head h2{margin:0!important;color:#101828!important;font-size:28px!important;font-weight:950!important}
.pharmacy-latest-head button{border:0!important;background:transparent!important;color:#1459ff!important;font-size:15px!important;font-weight:950!important;cursor:pointer!important}
.pharmacy-prescription-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.pharmacy-prescription-card{min-height:112px!important;border:1px solid #e9eef5!important;border-radius:20px!important;background:#fff!important;box-shadow:0 10px 24px rgba(15,23,42,.06)!important;padding:20px 22px!important;display:grid!important;grid-template-columns:56px minmax(0,1fr) auto!important;align-items:center!important;gap:16px!important}
.prescription-link-icon{width:50px!important;height:50px!important;border-radius:999px!important;background:#dbeafe!important;color:#1459ff!important;display:grid!important;place-items:center!important;font-size:23px!important}
.prescription-main h3{margin:0!important;color:#101828!important;font-size:20px!important;font-weight:950!important}
.prescription-main p{margin:6px 0 0!important;color:#667085!important;font-size:14px!important;font-weight:850!important}
.prescription-main span{display:block!important;margin-top:5px!important;color:#98a2b3!important;font-size:13px!important;font-weight:850!important}
.prescription-state{min-height:34px!important;border-radius:999px!important;padding:0 13px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;font-weight:950!important;white-space:nowrap!important}
.prescription-state.ready{background:#dbeafe!important;color:#1459ff!important;border:1px solid #bfdbfe!important}
.prescription-state.done{background:#ccfbf1!important;color:#0f766e!important;border:1px solid #99f6e4!important}
.pharmacy-dash-state,.pharmacy-dash-alert,.pharmacy-dash-empty{min-height:260px!important;border:1px solid #e9eef5!important;border-radius:28px!important;background:#fff!important;box-shadow:0 12px 32px rgba(15,23,42,.07)!important;display:grid!important;place-items:center!important;align-content:center!important;gap:12px!important;padding:32px!important;text-align:center!important;color:#667085!important;font-size:16px!important;font-weight:900!important}
.pharmacy-dash-alert{background:#fef2f2!important;color:#991b1b!important;border-color:#fecaca!important}
.pharmacy-dash-empty div{width:72px!important;height:72px!important;border-radius:24px!important;background:#eff6ff!important;display:grid!important;place-items:center!important;font-size:34px!important}
.pharmacy-dash-empty h3{margin:0!important;color:#101828!important;font-size:24px!important;font-weight:950!important}
.pharmacy-dash-empty p{margin:0!important;color:#667085!important;font-size:14px!important;font-weight:850!important}




























/* =========================================================
   Pharmacy Pages V3
   Paste at END of wwwroot/css/app-ui.css
   ========================================================= */

   .ph-page {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    padding: 36px 46px 90px !important;
    background: #f8fafc !important;
    color: #101828 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.ph-page-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.ph-page-head.compact {
    align-items: center !important;
}

.ph-kicker {
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.ph-page-head h1 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 44px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
}

.ph-page-head p {
    margin: 12px 0 0 !important;
    color: #667085 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.9 !important;
}

.ph-head-btn {
    height: 46px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #344054 !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
}

.ph-round-back {
    width: 58px !important;
    height: 58px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #667085 !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 24px rgba(15,23,42,.065) !important;
}

.ph-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin: 0 0 18px !important;
}

.ph-tabs button {
    min-height: 42px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #344054 !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.ph-tabs button.active {
    color: #1459ff !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.ph-tabs strong {
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    display: grid !important;
    place-items: center !important;
}

.ph-table-card {
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.07) !important;
    overflow: hidden !important;
}

.ph-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.ph-table thead th {
    background: #f8fafc !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    text-align: right !important;
    padding: 18px 18px !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.ph-table tbody td {
    color: #344054 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    padding: 18px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.ph-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.ph-table td strong {
    display: block !important;
    color: #101828 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
}

.ph-table td small {
    display: block !important;
    color: #98a2b3 !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.ph-code {
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    direction: ltr !important;
}

.ph-doctor {
    color: #0f9f8e !important;
    font-weight: 950 !important;
}

.ph-status,
.ph-stock-badge {
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.ph-status.ready {
    color: #1459ff !important;
    background: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
}

.ph-status.done {
    color: #0f766e !important;
    background: #ccfbf1 !important;
    border: 1px solid #99f6e4 !important;
}

.ph-empty-panel,
.ph-state-card,
.ph-alert-card {
    min-height: 260px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.07) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 34px !important;
    color: #667085 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.ph-empty-panel div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #eff6ff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 34px !important;
}

.ph-empty-panel h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.ph-empty-panel p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.ph-alert-card {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.ph-scan-wrap {
    display: grid !important;
    place-items: start center !important;
    min-height: 620px !important;
    padding-top: 18px !important;
}

.ph-scan-card {
    width: min(430px, 100%) !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.075) !important;
    padding: 24px !important;
    text-align: center !important;
}

.ph-scan-card h2 {
    margin: 0 0 18px !important;
    color: #101828 !important;
    font-size: 25px !important;
    font-weight: 950 !important;
}

.ph-scanner-box {
    height: 310px !important;
    border-radius: 22px !important;
    background: #111827 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 16px !important;
    color: #98a2b3 !important;
    margin-bottom: 16px !important;
}

.ph-qr-icon {
    font-size: 76px !important;
    color: #6b7280 !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.ph-scanner-box p {
    margin: 0 !important;
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.ph-primary-btn,
.ph-secondary-btn {
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 0 22px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.ph-primary-btn {
    background: #1459ff !important;
    color: #ffffff !important;
    box-shadow: 0 16px 28px rgba(20,89,255,.18) !important;
}

.ph-primary-btn:disabled {
    background: #d0d5dd !important;
    color: #98a2b3 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.ph-secondary-btn {
    background: #f1f5f9 !important;
    color: #344054 !important;
}

.ph-dispense-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 22px !important;
}

.ph-dispense-card,
.ph-side-summary {
    border: 1px solid #e9eef5 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.07) !important;
    padding: 24px !important;
}

.ph-card-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.ph-card-title h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 26px !important;
    font-weight: 950 !important;
}

.ph-details {
    display: grid !important;
    grid-template-columns: 160px 1fr !important;
    gap: 12px 18px !important;
    margin: 0 0 20px !important;
}

.ph-details dt {
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.ph-details dd {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

.ph-note-box,
.ph-success {
    border-radius: 18px !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
}

.ph-note-box {
    background: #eff6ff !important;
    color: #1e40af !important;
}

.ph-note-box strong {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 950 !important;
}

.ph-note-box p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    font-weight: 850 !important;
}

.ph-success {
    background: #ecfdf3 !important;
    color: #047857 !important;
    font-weight: 950 !important;
}

.ph-actions-row {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

.ph-side-summary {
    text-align: center !important;
    align-self: start !important;
}

.ph-side-summary div {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    background: #ecfdf3 !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 16px !important;
    font-size: 34px !important;
}

.ph-side-summary h3 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

.ph-side-summary p {
    margin: 10px 0 0 !important;
    color: #667085 !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.ph-inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.ph-inventory-card {
    min-height: 118px !important;
    border: 1px solid #e9eef5 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(15,23,42,.06) !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
}

.ph-pill-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 23px !important;
}

.ph-pill-icon.good {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.ph-pill-icon.low {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.ph-pill-icon.danger {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.ph-stock-main h2 {
    margin: 0 0 8px !important;
    color: #101828 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.ph-stock-main strong {
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    margin-left: 7px !important;
}

.ph-stock-main strong.good {
    color: #101828 !important;
}

.ph-stock-main strong.low {
    color: #d97706 !important;
}

.ph-stock-main strong.danger {
    color: #dc2626 !important;
}

.ph-stock-main span {
    color: #98a2b3 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.ph-stock-badge.good {
    color: #16a34a !important;
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
}

.ph-stock-badge.low {
    color: #d97706 !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
}

.ph-stock-badge.danger {
    color: #dc2626 !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
}

@media (max-width: 1180px) {
    .ph-inventory-grid,
    .pharmacy-prescription-grid {
        grid-template-columns: 1fr !important;
    }

    .ph-dispense-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .ph-page {
        padding: 26px 16px 70px !important;
    }

    .ph-page-head {
        display: grid !important;
    }

    .ph-page-head h1 {
        font-size: 34px !important;
    }

    .ph-table-card {
        overflow-x: auto !important;
    }

    .ph-table {
        min-width: 880px !important;
    }

    .ph-inventory-card {
        grid-template-columns: 1fr !important;
    }

    .ph-actions-row {
        display: grid !important;
    }
}

























/* =========================================================
   Global Figma Topbar — Whole App
   ========================================================= */

   .figma-shell {
    min-height: 100vh;
    background: #f8fafc;
}

.figma-app-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 92px;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.figma-brand-area {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: right;
}

.figma-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #05a843;
    position: relative;
    flex: 0 0 auto;
    box-shadow: 0 10px 22px rgba(5, 168, 67, 0.22);
}

.figma-brand-mark::after {
    content: "";
    position: absolute;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #ffffff;
    top: 10px;
    left: 9px;
}

.figma-brand-mark::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #05a843;
    top: 10px;
    left: 17px;
    z-index: 1;
}

.figma-brand-copy {
    display: grid;
    gap: 2px;
}

.figma-brand-copy strong {
    color: #111827;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.figma-brand-copy span {
    color: #047857;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 900;
}

.figma-current-user-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 42px;
    border-radius: 999px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 950;
    white-space: nowrap;
    border: 1px solid transparent;
}

.figma-current-user-chip strong {
    font-weight: 950;
}

.figma-current-user-chip.beneficiary {
    color: #047857;
    background: #ecfdf3;
    border-color: #a7f3d0;
}

.figma-current-user-chip.doctor {
    color: #0369a1;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.figma-current-user-chip.admin,
.figma-current-user-chip.staff {
    color: #7e22ce;
    background: #faf5ff;
    border-color: #e9d5ff;
}

.figma-current-user-chip.guest {
    color: #475467;
    background: #f8fafc;
    border-color: #e5e7eb;
}

.figma-user-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.figma-topbar-actions {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.figma-logout-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #667085;
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
}

.figma-logout-link:hover {
    color: #dc2626;
}

.figma-logout-icon {
    font-size: 22px;
    line-height: 1;
}

.figma-theme-toggle {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475467;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 21px;
    transition: 0.2s ease;
}

.figma-theme-toggle:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.figma-shell .figma-sidebar {
    top: 92px !important;
    height: calc(100vh - 92px) !important;
}

.figma-shell .figma-workspace {
    padding-top: 92px !important;
}

.figma-sidebar-user-card {
    margin-top: 18px;
}

.figma-sidebar-user-card .user-initial {
    background: #05a843;
    color: #ffffff;
}

.figma-sidebar-user-card .user-initial.doctor {
    background: #0ea5e9;
}

.figma-sidebar-user-card .user-initial.admin,
.figma-sidebar-user-card .user-initial.staff {
    background: #9333ea;
}

.theme-dark .figma-shell {
    background: #101827;
}

.theme-dark .figma-app-topbar {
    background: rgba(15, 23, 42, 0.98);
    border-bottom-color: #263244;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.theme-dark .figma-brand-copy strong {
    color: #f8fafc;
}

.theme-dark .figma-brand-copy span {
    color: #86efac;
}

.theme-dark .figma-theme-toggle {
    background: #1f2937;
    color: #e5e7eb;
}

.theme-dark .figma-theme-toggle:hover {
    background: #334155;
}

.theme-dark .figma-logout-link {
    color: #cbd5e1;
}

.theme-dark .figma-current-user-chip.beneficiary {
    background: rgba(22, 101, 52, 0.24);
    border-color: rgba(34, 197, 94, 0.32);
    color: #86efac;
}

.theme-dark .figma-current-user-chip.doctor {
    background: rgba(14, 165, 233, 0.18);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

.theme-dark .figma-current-user-chip.admin,
.theme-dark .figma-current-user-chip.staff {
    background: rgba(126, 34, 206, 0.22);
    border-color: rgba(192, 132, 252, 0.28);
    color: #d8b4fe;
}

@media (max-width: 900px) {
    .figma-app-topbar {
        height: 78px;
    }

    .figma-brand-area {
        right: 16px;
        gap: 10px;
    }

    .figma-brand-mark {
        width: 44px;
        height: 44px;
    }

    .figma-brand-copy strong {
        font-size: 16px;
    }

    .figma-brand-copy span {
        font-size: 11px;
    }

    .figma-current-user-chip {
        display: none;
    }

    .figma-topbar-actions {
        left: 16px;
        gap: 8px;
    }

    .figma-logout-link span:first-child {
        display: none;
    }

    .figma-theme-toggle {
        width: 44px;
        height: 44px;
    }

    .figma-shell .figma-sidebar {
        top: 78px !important;
        height: calc(100vh - 78px) !important;
    }

    .figma-shell .figma-workspace {
        padding-top: 78px !important;
    }
}





/* =========================================================
   FINAL FIX — Global Topbar like Figma
   ========================================================= */

   :root {
    --global-topbar-height: 78px;
    --global-sidebar-width: 300px;
}

/* Root */
.app-root {
    min-height: 100vh !important;
    background: #f8fafc !important;
    overflow-x: hidden !important;
}

/* Topbar full width */
.app-topbar.global-topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--global-topbar-height) !important;
    min-height: var(--global-topbar-height) !important;
    z-index: 2147483000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Brand on right */
.app-topbar.global-topbar .topbar-brand {
    position: absolute !important;
    right: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 12px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2147483001 !important;
}

.app-topbar.global-topbar .brand-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    position: relative !important;
    flex: 0 0 auto !important;
    box-shadow: 0 10px 22px rgba(5, 168, 67, 0.22) !important;
}

.app-topbar.global-topbar .brand-mark::after {
    content: "" !important;
    position: absolute !important;
    width: 29px !important;
    height: 29px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    top: 9px !important;
    left: 8px !important;
}

.app-topbar.global-topbar .brand-mark::before {
    content: "" !important;
    position: absolute !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    top: 9px !important;
    left: 16px !important;
    z-index: 2 !important;
}

.app-topbar.global-topbar .brand-copy {
    display: grid !important;
    gap: 2px !important;
    text-align: right !important;
}

.app-topbar.global-topbar .brand-title {
    color: #111827 !important;
    font-size: 21px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.app-topbar.global-topbar .brand-subtitle {
    color: #047857 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* User chip center */
.app-topbar.global-topbar .global-user-chip {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid transparent !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    z-index: 2147483001 !important;
}

.app-topbar.global-topbar .global-user-chip strong {
    font-weight: 950 !important;
}

.app-topbar.global-topbar .chip-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    display: inline-block !important;
}

/* Role colors */
.app-topbar.global-topbar .global-user-chip.beneficiary {
    color: #047857 !important;
    background: #ecfdf3 !important;
    border-color: #a7f3d0 !important;
}

.app-topbar.global-topbar .global-user-chip.doctor {
    color: #0369a1 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.app-topbar.global-topbar .global-user-chip.admin,
.app-topbar.global-topbar .global-user-chip.staff {
    color: #7e22ce !important;
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
}

.app-topbar.global-topbar .global-user-chip.guest {
    color: #475467 !important;
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
}

/* Left actions */
.app-topbar.global-topbar .global-top-actions {
    position: absolute !important;
    left: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    z-index: 2147483001 !important;
}

.app-topbar.global-topbar .topbar-logout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #667085 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.app-topbar.global-topbar .topbar-logout:hover {
    color: #dc2626 !important;
}

.app-topbar.global-topbar .theme-toggle {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475467 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    font-size: 20px !important;
}

.app-topbar.global-topbar .theme-toggle:hover {
    background: #e2e8f0 !important;
}

/* Sidebar starts after topbar */
.app-sidebar.global-sidebar {
    position: fixed !important;
    top: var(--global-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--global-sidebar-width) !important;
    height: calc(100vh - var(--global-topbar-height)) !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-left: 1px solid #edf0f4 !important;
    padding: 24px 18px !important;
    overflow-y: auto !important;
}

/* Workspace */
.app-workspace.global-workspace {
    margin-right: var(--global-sidebar-width) !important;
    width: calc(100% - var(--global-sidebar-width)) !important;
    padding-top: var(--global-topbar-height) !important;
    min-height: 100vh !important;
    background: #f8fafc !important;
}

.app-workspace.global-workspace .page-canvas {
    min-height: calc(100vh - var(--global-topbar-height)) !important;
    background: #f8fafc !important;
}

/* Sidebar avatar tones */
.sidebar-user-card .user-initial.beneficiary {
    background: #05a843 !important;
    color: #ffffff !important;
}

.sidebar-user-card .user-initial.doctor {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

.sidebar-user-card .user-initial.admin,
.sidebar-user-card .user-initial.staff {
    background: #9333ea !important;
    color: #ffffff !important;
}

/* Dark mode */
.theme-dark .app-topbar.global-topbar {
    background: #0f172a !important;
    border-bottom-color: #263244 !important;
}

.theme-dark .app-topbar.global-topbar .brand-title {
    color: #f8fafc !important;
}

.theme-dark .app-topbar.global-topbar .brand-subtitle {
    color: #86efac !important;
}

.theme-dark .app-topbar.global-topbar .theme-toggle {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

.theme-dark .app-topbar.global-topbar .topbar-logout {
    color: #cbd5e1 !important;
}

.theme-dark .app-sidebar.global-sidebar {
    background: #111827 !important;
    border-left-color: #263244 !important;
}

.theme-dark .app-workspace.global-workspace,
.theme-dark .app-workspace.global-workspace .page-canvas {
    background: #101827 !important;
}

/* Mobile */
@media (max-width: 900px) {
    :root {
        --global-topbar-height: 72px;
        --global-sidebar-width: 0px;
    }

    .app-topbar.global-topbar .topbar-brand {
        right: 14px !important;
    }

    .app-topbar.global-topbar .brand-mark {
        width: 42px !important;
        height: 42px !important;
    }

    .app-topbar.global-topbar .brand-title {
        font-size: 15px !important;
    }

    .app-topbar.global-topbar .brand-subtitle {
        font-size: 11px !important;
    }

    .app-topbar.global-topbar .global-user-chip {
        display: none !important;
    }

    .app-topbar.global-topbar .global-top-actions {
        left: 14px !important;
        gap: 8px !important;
    }

    .app-topbar.global-topbar .topbar-logout span:first-child {
        display: none !important;
    }

    .app-topbar.global-topbar .theme-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .app-sidebar.global-sidebar {
        display: none !important;
    }

    .app-workspace.global-workspace {
        margin-right: 0 !important;
        width: 100% !important;
    }
}







/* =========================================================
   FINAL EXACT TOPBAR — Figma Match
   ========================================================= */

   :root {
    --final-topbar-height: 76px;
    --final-sidebar-width: 300px;
}

.final-app-shell {
    min-height: 100vh !important;
    background: #f8fafc !important;
    overflow-x: hidden !important;
}

/* Topbar */
.final-topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--final-topbar-height) !important;
    z-index: 2147483000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    display: block !important;
    overflow: visible !important;
}

/* Brand Right */
.final-brand {
    position: fixed !important;
    right: 32px !important;
    top: 38px !important;
    transform: translateY(-50%) !important;
    z-index: 2147483001 !important;

    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 12px !important;

    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-align: right !important;
}

.final-brand-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    box-shadow: 0 10px 22px rgba(5, 168, 67, 0.22) !important;
}

.final-brand-logo::after {
    content: "" !important;
    position: absolute !important;
    width: 29px !important;
    height: 29px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    top: 9px !important;
    left: 8px !important;
}

.final-brand-logo::before {
    content: "" !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #05a843 !important;
    top: 9px !important;
    left: 16px !important;
    z-index: 2 !important;
}

.final-brand-text {
    display: grid !important;
    gap: 2px !important;
    text-align: right !important;
}

.final-brand-text strong {
    color: #111827 !important;
    font-size: 21px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.final-brand-text small {
    color: #047857 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* User Chip Center */
.final-user-chip {
    position: fixed !important;
    left: 50% !important;
    top: 38px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2147483001 !important;

    min-height: 38px !important;
    border-radius: 999px !important;
    padding: 0 20px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    border: 1px solid transparent !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.final-user-chip strong {
    font-weight: 950 !important;
}

.final-user-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    display: inline-block !important;
}

.final-user-chip.beneficiary {
    color: #047857 !important;
    background: #ecfdf3 !important;
    border-color: #a7f3d0 !important;
}

.final-user-chip.doctor {
    color: #0369a1 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.final-user-chip.admin,
.final-user-chip.staff {
    color: #7e22ce !important;
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
}

.final-user-chip.guest {
    color: #475467 !important;
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
}

/* Actions Left */
.final-top-actions {
    position: fixed !important;
    left: 32px !important;
    top: 38px !important;
    transform: translateY(-50%) !important;
    z-index: 2147483001 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.final-theme-toggle {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475467 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    font-size: 20px !important;
    padding: 0 !important;
}

.final-theme-toggle:hover {
    background: #e2e8f0 !important;
}

.final-logout-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #667085 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.final-logout-link:hover {
    color: #dc2626 !important;
}

.final-logout-icon {
    font-size: 22px !important;
    line-height: 1 !important;
}

/* Sidebar */
.final-sidebar {
    position: fixed !important;
    top: var(--final-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--final-sidebar-width) !important;
    height: calc(100vh - var(--final-topbar-height)) !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-left: 1px solid #edf0f4 !important;
    padding: 24px 18px !important;
    overflow-y: auto !important;
}

/* Workspace */
.final-workspace {
    margin-right: var(--final-sidebar-width) !important;
    width: calc(100% - var(--final-sidebar-width)) !important;
    padding-top: var(--final-topbar-height) !important;
    min-height: 100vh !important;
    background: #f8fafc !important;
}

.final-workspace .page-canvas {
    min-height: calc(100vh - var(--final-topbar-height)) !important;
    background: #f8fafc !important;
}

/* Sidebar avatar tones */
.sidebar-user-card .user-initial.beneficiary {
    background: #05a843 !important;
    color: #ffffff !important;
}

.sidebar-user-card .user-initial.doctor {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

.sidebar-user-card .user-initial.admin,
.sidebar-user-card .user-initial.staff {
    background: #9333ea !important;
    color: #ffffff !important;
}

/* Dark Mode */
.theme-dark .final-topbar {
    background: #0f172a !important;
    border-bottom-color: #263244 !important;
}

.theme-dark .final-brand-text strong {
    color: #f8fafc !important;
}

.theme-dark .final-brand-text small {
    color: #86efac !important;
}

.theme-dark .final-theme-toggle {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

.theme-dark .final-logout-link {
    color: #cbd5e1 !important;
}

.theme-dark .final-sidebar {
    background: #111827 !important;
    border-left-color: #263244 !important;
}

.theme-dark .final-workspace,
.theme-dark .final-workspace .page-canvas {
    background: #101827 !important;
}

/* Mobile */
@media (max-width: 900px) {
    :root {
        --final-topbar-height: 72px;
        --final-sidebar-width: 0px;
    }

    .final-brand {
        right: 14px !important;
        top: 36px !important;
        gap: 9px !important;
    }

    .final-brand-logo {
        width: 42px !important;
        height: 42px !important;
    }

    .final-brand-text strong {
        font-size: 15px !important;
    }

    .final-brand-text small {
        font-size: 11px !important;
    }

    .final-user-chip {
        display: none !important;
    }

    .final-top-actions {
        left: 14px !important;
        top: 36px !important;
        gap: 8px !important;
    }

    .final-logout-link span:last-child {
        display: none !important;
    }

    .final-theme-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .final-sidebar {
        display: none !important;
    }

    .final-workspace {
        margin-right: 0 !important;
        width: 100% !important;
    }
}






























/* =========================================================
   CharityHealth Global Dark Mode Fix
   Add this at the END of: CharityHealth.Web/wwwroot/css/app-ui.css
   ========================================================= */

   :root {
    --ch-bg: #f6f8fb;
    --ch-bg-soft: #eef3f8;
    --ch-surface: #ffffff;
    --ch-surface-2: #f8fafc;
    --ch-card: #ffffff;
    --ch-card-soft: #f8fafc;
    --ch-border: #e5e7eb;
    --ch-border-strong: #d8dee9;
    --ch-text: #101828;
    --ch-text-2: #344054;
    --ch-muted: #667085;
    --ch-muted-2: #98a2b3;
    --ch-green: #05a843;
    --ch-green-2: #16a34a;
    --ch-green-soft: #e9fbef;
    --ch-danger: #dc2626;
    --ch-danger-soft: #fef2f2;
    --ch-warning: #d97706;
    --ch-warning-soft: #fff7ed;
    --ch-purple: #7c3aed;
    --ch-purple-soft: #f4ecff;
    --ch-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --ch-bg: #0f172a;
    --ch-bg-soft: #111c2f;
    --ch-surface: #162235;
    --ch-surface-2: #1b2a40;
    --ch-card: #162235;
    --ch-card-soft: #1b2a40;
    --ch-border: #2b3a52;
    --ch-border-strong: #3a4b66;
    --ch-text: #f8fafc;
    --ch-text-2: #e5e7eb;
    --ch-muted: #cbd5e1;
    --ch-muted-2: #94a3b8;
    --ch-green: #22c55e;
    --ch-green-2: #4ade80;
    --ch-green-soft: rgba(34, 197, 94, .14);
    --ch-danger: #fb7185;
    --ch-danger-soft: rgba(248, 113, 113, .14);
    --ch-warning: #f59e0b;
    --ch-warning-soft: rgba(245, 158, 11, .14);
    --ch-purple: #c084fc;
    --ch-purple-soft: rgba(168, 85, 247, .14);
    --ch-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--ch-bg) !important;
    color: var(--ch-text) !important;
}

/* Main containers */
html[data-theme="dark"] .page,
html[data-theme="dark"] .main,
html[data-theme="dark"] main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .layout-main,
html[data-theme="dark"] .portal-layout,
html[data-theme="dark"] .portal-main,
html[data-theme="dark"] .beneficiary-dashboard,
html[data-theme="dark"] .consult-request-page,
html[data-theme="dark"] .admin-list-page,
html[data-theme="dark"] .admin-pharmacy-page,
html[data-theme="dark"] .doctors-page,
html[data-theme="dark"] .create-doctor-page {
    background: var(--ch-bg) !important;
    color: var(--ch-text) !important;
}

/* Topbar / sidebar */
html[data-theme="dark"] .top-row,
html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .main-topbar,
html[data-theme="dark"] .layout-topbar,
html[data-theme="dark"] header.app-header,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .nav-scrollable,
html[data-theme="dark"] .beneficiary-side,
html[data-theme="dark"] .portal-sidebar,
html[data-theme="dark"] .layout-sidebar {
    background: var(--ch-surface) !important;
    border-color: var(--ch-border) !important;
    color: var(--ch-text) !important;
    box-shadow: var(--ch-shadow) !important;
}

/* Cards */
html[data-theme="dark"] .card,
html[data-theme="dark"] .admin-stat-card,
html[data-theme="dark"] .admin-table-card,
html[data-theme="dark"] .admin-pharmacy-card,
html[data-theme="dark"] .doctor-card,
html[data-theme="dark"] .create-doctor-card,
html[data-theme="dark"] .consult-main-card,
html[data-theme="dark"] .consult-info-card,
html[data-theme="dark"] .consult-steps-card,
html[data-theme="dark"] .consult-summary-box,
html[data-theme="dark"] .consult-upload-card,
html[data-theme="dark"] .consult-specialty-card,
html[data-theme="dark"] .beneficiary-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .request-card,
html[data-theme="dark"] .medical-card {
    background: var(--ch-card) !important;
    border-color: var(--ch-border) !important;
    color: var(--ch-text) !important;
    box-shadow: var(--ch-shadow) !important;
}

/* Text normalization */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .title,
html[data-theme="dark"] .nav-title,
html[data-theme="dark"] .doctor-main-info h2,
html[data-theme="dark"] .consult-card-title h2,
html[data-theme="dark"] .admin-table-title h2,
html[data-theme="dark"] .pharmacy-title h2 {
    color: var(--ch-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .doctor-main-info strong,
html[data-theme="dark"] .consult-card-title p,
html[data-theme="dark"] .pharmacy-title p {
    color: var(--ch-muted) !important;
}

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .doctor-input,
html[data-theme="dark"] .consult-case-area {
    background: var(--ch-surface-2) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-border-strong) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--ch-muted-2) !important;
}

/* Navigation links */
html[data-theme="dark"] a,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .portal-sidebar a {
    color: var(--ch-muted) !important;
}

html[data-theme="dark"] a.active,
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .portal-sidebar a.active,
html[data-theme="dark"] .sidebar a.active {
    background: var(--ch-green-soft) !important;
    color: var(--ch-green-2) !important;
}

/* Progress and stepper */
html[data-theme="dark"] .consult-progress-item span {
    background: #334155 !important;
}

html[data-theme="dark"] .consult-progress-item.active span {
    background: var(--ch-green) !important;
}

html[data-theme="dark"] .consult-progress-item strong {
    color: var(--ch-muted-2) !important;
}

html[data-theme="dark"] .consult-progress-item.active strong {
    color: var(--ch-green-2) !important;
}

html[data-theme="dark"] .consult-step-row {
    color: var(--ch-muted) !important;
}

html[data-theme="dark"] .consult-step-row span {
    background: var(--ch-surface-2) !important;
    color: var(--ch-muted) !important;
}

html[data-theme="dark"] .consult-step-row.active span {
    background: var(--ch-green) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .consult-step-row.active strong {
    color: var(--ch-green-2) !important;
}

/* Status chips / alerts */
html[data-theme="dark"] .consult-ok-strip,
html[data-theme="dark"] .doctor-status.available,
html[data-theme="dark"] .pharmacy-status.active,
html[data-theme="dark"] .admin-status-pill.ok {
    background: var(--ch-green-soft) !important;
    border-color: rgba(34, 197, 94, .45) !important;
    color: var(--ch-green-2) !important;
}

html[data-theme="dark"] .consult-info-card.warning,
html[data-theme="dark"] .doctor-password-note,
html[data-theme="dark"] .pharmacy-login-note {
    background: var(--ch-warning-soft) !important;
    border-color: rgba(245, 158, 11, .38) !important;
    color: var(--ch-warning) !important;
}

html[data-theme="dark"] .consult-alert.danger,
html[data-theme="dark"] .doctor-form-alert.bad,
html[data-theme="dark"] .admin-pharmacy-message.bad {
    background: var(--ch-danger-soft) !important;
    border-color: rgba(248, 113, 113, .38) !important;
    color: var(--ch-danger) !important;
}

/* Buttons */
html[data-theme="dark"] button,
html[data-theme="dark"] .consult-secondary-btn,
html[data-theme="dark"] .doctor-secondary-btn {
    border-color: var(--ch-border) !important;
}

html[data-theme="dark"] .consult-secondary-btn,
html[data-theme="dark"] .doctor-secondary-btn {
    background: var(--ch-surface-2) !important;
    color: var(--ch-text-2) !important;
}

html[data-theme="dark"] .consult-primary-wide,
html[data-theme="dark"] .doctor-primary-btn,
html[data-theme="dark"] .doctor-add-btn,
html[data-theme="dark"] .admin-pharmacy-add-btn {
    background: var(--ch-green) !important;
    color: #ffffff !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .admin-modern-table {
    background: var(--ch-card) !important;
    color: var(--ch-text) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-color: var(--ch-border) !important;
    color: var(--ch-text-2) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] th {
    background: var(--ch-surface-2) !important;
    color: var(--ch-muted) !important;
}

/* Figma-like beneficiary dashboard areas */
html[data-theme="dark"] .beneficiary-hero,
html[data-theme="dark"] .hero-card {
    background: linear-gradient(135deg, #059669, #05a843) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .beneficiary-hero *,
html[data-theme="dark"] .hero-card * {
    color: #ffffff !important;
}

html[data-theme="dark"] .specialty-section,
html[data-theme="dark"] .specialties-panel {
    background: var(--ch-surface) !important;
    border-color: var(--ch-border) !important;
}

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--ch-bg) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 999px;
}





















/* =========================================================
   CharityHealth SAFE Global Dark Mode
  
     dark / dark-mode / theme-dark / is-dark
   ========================================================= */

/* Tokens */
.app-root.dark,
.app-root.dark-mode,
.app-root.theme-dark,
.app-root.is-dark,
body.dark,
body.dark-mode,
body.theme-dark,
html.dark,
html.dark-mode,
html.theme-dark {
    --safe-bg: #0f172a;
    --safe-surface: #162235;
    --safe-surface-2: #1b2a40;
    --safe-card: #1e293b;
    --safe-card-2: #233247;
    --safe-border: #334155;
    --safe-border-soft: #24344c;
    --safe-text: #f8fafc;
    --safe-text-2: #e5e7eb;
    --safe-muted: #cbd5e1;
    --safe-muted-2: #94a3b8;
    --safe-green: #22c55e;
    --safe-green-2: #4ade80;
    --safe-green-soft: rgba(34, 197, 94, .14);
    --safe-blue-soft: rgba(59, 130, 246, .14);
    --safe-purple-soft: rgba(168, 85, 247, .16);
    --safe-amber-soft: rgba(245, 158, 11, .14);
    --safe-red-soft: rgba(248, 113, 113, .14);
}

/* Root background فقط بدون Layout positioning */
.app-root.dark,
.app-root.dark-mode,
.app-root.theme-dark,
.app-root.is-dark {
    background: var(--safe-bg) !important;
    color: var(--safe-text) !important;
}

/* Topbar / Sidebar colors فقط */
.app-root.dark header,
.app-root.dark-mode header,
.app-root.theme-dark header,
.app-root.is-dark header,
.app-root.dark .app-sidebar,
.app-root.dark-mode .app-sidebar,
.app-root.theme-dark .app-sidebar,
.app-root.is-dark .app-sidebar {
    background: var(--safe-surface) !important;
    border-color: var(--safe-border) !important;
    color: var(--safe-text) !important;
}

/* Workspace background فقط */
.app-root.dark .app-workspace,
.app-root.dark-mode .app-workspace,
.app-root.theme-dark .app-workspace,
.app-root.is-dark .app-workspace,
.app-root.dark .page-canvas,
.app-root.dark-mode .page-canvas,
.app-root.theme-dark .page-canvas,
.app-root.is-dark .page-canvas {
    background: var(--safe-bg) !important;
    color: var(--safe-text) !important;
}

/* Common page wrappers */
.app-root.dark .beneficiary-dashboard,
.app-root.dark-mode .beneficiary-dashboard,
.app-root.theme-dark .beneficiary-dashboard,
.app-root.is-dark .beneficiary-dashboard,
.app-root.dark .admin-dashboard,
.app-root.dark-mode .admin-dashboard,
.app-root.theme-dark .admin-dashboard,
.app-root.is-dark .admin-dashboard,
.app-root.dark .consult-request-page,
.app-root.dark-mode .consult-request-page,
.app-root.theme-dark .consult-request-page,
.app-root.is-dark .consult-request-page,
.app-root.dark .notifications-page,
.app-root.dark-mode .notifications-page,
.app-root.theme-dark .notifications-page,
.app-root.is-dark .notifications-page,
.app-root.dark .admin-list-page,
.app-root.dark-mode .admin-list-page,
.app-root.theme-dark .admin-list-page,
.app-root.is-dark .admin-list-page,
.app-root.dark .admin-pharmacy-page,
.app-root.dark-mode .admin-pharmacy-page,
.app-root.theme-dark .admin-pharmacy-page,
.app-root.is-dark .admin-pharmacy-page,
.app-root.dark .doctors-page,
.app-root.dark-mode .doctors-page,
.app-root.theme-dark .doctors-page,
.app-root.is-dark .doctors-page,
.app-root.dark .create-doctor-page,
.app-root.dark-mode .create-doctor-page,
.app-root.theme-dark .create-doctor-page,
.app-root.is-dark .create-doctor-page {
    background: var(--safe-bg) !important;
    color: var(--safe-text) !important;
}

/* Cards */
.app-root.dark .card,
.app-root.dark-mode .card,
.app-root.theme-dark .card,
.app-root.is-dark .card,
.app-root.dark article,
.app-root.dark-mode article,
.app-root.theme-dark article,
.app-root.is-dark article,
.app-root.dark .admin-stat-card,
.app-root.dark-mode .admin-stat-card,
.app-root.theme-dark .admin-stat-card,
.app-root.is-dark .admin-stat-card,
.app-root.dark .admin-table-card,
.app-root.dark-mode .admin-table-card,
.app-root.theme-dark .admin-table-card,
.app-root.is-dark .admin-table-card,
.app-root.dark .admin-pharmacy-card,
.app-root.dark-mode .admin-pharmacy-card,
.app-root.theme-dark .admin-pharmacy-card,
.app-root.is-dark .admin-pharmacy-card,
.app-root.dark .doctor-card,
.app-root.dark-mode .doctor-card,
.app-root.theme-dark .doctor-card,
.app-root.is-dark .doctor-card,
.app-root.dark .create-doctor-card,
.app-root.dark-mode .create-doctor-card,
.app-root.theme-dark .create-doctor-card,
.app-root.is-dark .create-doctor-card,
.app-root.dark .consult-main-card,
.app-root.dark-mode .consult-main-card,
.app-root.theme-dark .consult-main-card,
.app-root.is-dark .consult-main-card,
.app-root.dark .consult-info-card,
.app-root.dark-mode .consult-info-card,
.app-root.theme-dark .consult-info-card,
.app-root.is-dark .consult-info-card,
.app-root.dark .consult-steps-card,
.app-root.dark-mode .consult-steps-card,
.app-root.theme-dark .consult-steps-card,
.app-root.is-dark .consult-steps-card,
.app-root.dark .consult-summary-box,
.app-root.dark-mode .consult-summary-box,
.app-root.theme-dark .consult-summary-box,
.app-root.is-dark .consult-summary-box,
.app-root.dark .consult-upload-card,
.app-root.dark-mode .consult-upload-card,
.app-root.theme-dark .consult-upload-card,
.app-root.is-dark .consult-upload-card,
.app-root.dark .consult-specialty-card,
.app-root.dark-mode .consult-specialty-card,
.app-root.theme-dark .consult-specialty-card,
.app-root.is-dark .consult-specialty-card,
.app-root.dark .dashboard-card,
.app-root.dark-mode .dashboard-card,
.app-root.theme-dark .dashboard-card,
.app-root.is-dark .dashboard-card,
.app-root.dark .request-card,
.app-root.dark-mode .request-card,
.app-root.theme-dark .request-card,
.app-root.is-dark .request-card {
    background: var(--safe-card) !important;
    border-color: var(--safe-border) !important;
    color: var(--safe-text) !important;
}

/* Text */
.app-root.dark h1,
.app-root.dark-mode h1,
.app-root.theme-dark h1,
.app-root.is-dark h1,
.app-root.dark h2,
.app-root.dark-mode h2,
.app-root.theme-dark h2,
.app-root.is-dark h2,
.app-root.dark h3,
.app-root.dark-mode h3,
.app-root.theme-dark h3,
.app-root.is-dark h3,
.app-root.dark h4,
.app-root.dark-mode h4,
.app-root.theme-dark h4,
.app-root.is-dark h4,
.app-root.dark strong,
.app-root.dark-mode strong,
.app-root.theme-dark strong,
.app-root.is-dark strong {
    color: var(--safe-text) !important;
}

.app-root.dark p,
.app-root.dark-mode p,
.app-root.theme-dark p,
.app-root.is-dark p,
.app-root.dark small,
.app-root.dark-mode small,
.app-root.theme-dark small,
.app-root.is-dark small,
.app-root.dark label,
.app-root.dark-mode label,
.app-root.theme-dark label,
.app-root.is-dark label,
.app-root.dark span,
.app-root.dark-mode span,
.app-root.theme-dark span,
.app-root.is-dark span {
    color: inherit;
}

/* Muted text classes */
.app-root.dark .muted,
.app-root.dark-mode .muted,
.app-root.theme-dark .muted,
.app-root.is-dark .muted,
.app-root.dark .text-muted,
.app-root.dark-mode .text-muted,
.app-root.theme-dark .text-muted,
.app-root.is-dark .text-muted,
.app-root.dark .doctor-main-info strong,
.app-root.dark-mode .doctor-main-info strong,
.app-root.theme-dark .doctor-main-info strong,
.app-root.is-dark .doctor-main-info strong,
.app-root.dark .consult-card-title p,
.app-root.dark-mode .consult-card-title p,
.app-root.theme-dark .consult-card-title p,
.app-root.is-dark .consult-card-title p,
.app-root.dark .pharmacy-title p,
.app-root.dark-mode .pharmacy-title p,
.app-root.theme-dark .pharmacy-title p,
.app-root.is-dark .pharmacy-title p {
    color: var(--safe-muted) !important;
}

/* Inputs */
.app-root.dark input,
.app-root.dark-mode input,
.app-root.theme-dark input,
.app-root.is-dark input,
.app-root.dark select,
.app-root.dark-mode select,
.app-root.theme-dark select,
.app-root.is-dark select,
.app-root.dark textarea,
.app-root.dark-mode textarea,
.app-root.theme-dark textarea,
.app-root.is-dark textarea,
.app-root.dark .doctor-input,
.app-root.dark-mode .doctor-input,
.app-root.theme-dark .doctor-input,
.app-root.is-dark .doctor-input,
.app-root.dark .consult-case-area,
.app-root.dark-mode .consult-case-area,
.app-root.theme-dark .consult-case-area,
.app-root.is-dark .consult-case-area {
    background: var(--safe-surface-2) !important;
    color: var(--safe-text) !important;
    border-color: var(--safe-border) !important;
}

.app-root.dark input::placeholder,
.app-root.dark-mode input::placeholder,
.app-root.theme-dark input::placeholder,
.app-root.is-dark input::placeholder,
.app-root.dark textarea::placeholder,
.app-root.dark-mode textarea::placeholder,
.app-root.theme-dark textarea::placeholder,
.app-root.is-dark textarea::placeholder {
    color: var(--safe-muted-2) !important;
}

/* Sidebar user card and nav */
.app-root.dark .sidebar-user-card,
.app-root.dark-mode .sidebar-user-card,
.app-root.theme-dark .sidebar-user-card,
.app-root.is-dark .sidebar-user-card {
    background: rgba(34, 197, 94, .14) !important;
    border-color: rgba(34, 197, 94, .24) !important;
}

.app-root.dark .sidebar-user-card strong,
.app-root.dark-mode .sidebar-user-card strong,
.app-root.theme-dark .sidebar-user-card strong,
.app-root.is-dark .sidebar-user-card strong {
    color: var(--safe-text) !important;
}

.app-root.dark .sidebar-user-card span,
.app-root.dark-mode .sidebar-user-card span,
.app-root.theme-dark .sidebar-user-card span,
.app-root.is-dark .sidebar-user-card span {
    color: var(--safe-green-2) !important;
}

.app-root.dark .sidebar-footer,
.app-root.dark-mode .sidebar-footer,
.app-root.theme-dark .sidebar-footer,
.app-root.is-dark .sidebar-footer {
    border-color: var(--safe-border) !important;
}

.app-root.dark .nav-link,
.app-root.dark-mode .nav-link,
.app-root.theme-dark .nav-link,
.app-root.is-dark .nav-link,
.app-root.dark .sidebar a,
.app-root.dark-mode .sidebar a,
.app-root.theme-dark .sidebar a,
.app-root.is-dark .sidebar a,
.app-root.dark .app-sidebar a,
.app-root.dark-mode .app-sidebar a,
.app-root.theme-dark .app-sidebar a,
.app-root.is-dark .app-sidebar a {
    color: var(--safe-muted) !important;
}

.app-root.dark .nav-link.active,
.app-root.dark-mode .nav-link.active,
.app-root.theme-dark .nav-link.active,
.app-root.is-dark .nav-link.active,
.app-root.dark .app-sidebar a.active,
.app-root.dark-mode .app-sidebar a.active,
.app-root.theme-dark .app-sidebar a.active,
.app-root.is-dark .app-sidebar a.active {
    background: var(--safe-green-soft) !important;
    color: var(--safe-green-2) !important;
}

/* Status strips */
.app-root.dark .consult-ok-strip,
.app-root.dark-mode .consult-ok-strip,
.app-root.theme-dark .consult-ok-strip,
.app-root.is-dark .consult-ok-strip,
.app-root.dark .doctor-status.available,
.app-root.dark-mode .doctor-status.available,
.app-root.theme-dark .doctor-status.available,
.app-root.is-dark .doctor-status.available,
.app-root.dark .pharmacy-status.active,
.app-root.dark-mode .pharmacy-status.active,
.app-root.theme-dark .pharmacy-status.active,
.app-root.is-dark .pharmacy-status.active,
.app-root.dark .admin-status-pill.ok,
.app-root.dark-mode .admin-status-pill.ok,
.app-root.theme-dark .admin-status-pill.ok,
.app-root.is-dark .admin-status-pill.ok {
    background: var(--safe-green-soft) !important;
    border-color: rgba(34, 197, 94, .45) !important;
    color: var(--safe-green-2) !important;
}

.app-root.dark .consult-info-card.warning,
.app-root.dark-mode .consult-info-card.warning,
.app-root.theme-dark .consult-info-card.warning,
.app-root.is-dark .consult-info-card.warning,
.app-root.dark .doctor-password-note,
.app-root.dark-mode .doctor-password-note,
.app-root.theme-dark .doctor-password-note,
.app-root.is-dark .doctor-password-note,
.app-root.dark .pharmacy-login-note,
.app-root.dark-mode .pharmacy-login-note,
.app-root.theme-dark .pharmacy-login-note,
.app-root.is-dark .pharmacy-login-note {
    background: var(--safe-amber-soft) !important;
    border-color: rgba(245, 158, 11, .38) !important;
}

/* Buttons */
.app-root.dark .consult-secondary-btn,
.app-root.dark-mode .consult-secondary-btn,
.app-root.theme-dark .consult-secondary-btn,
.app-root.is-dark .consult-secondary-btn,
.app-root.dark .doctor-secondary-btn,
.app-root.dark-mode .doctor-secondary-btn,
.app-root.theme-dark .doctor-secondary-btn,
.app-root.is-dark .doctor-secondary-btn {
    background: var(--safe-surface-2) !important;
    color: var(--safe-text-2) !important;
    border-color: var(--safe-border) !important;
}

.app-root.dark .consult-primary-wide,
.app-root.dark-mode .consult-primary-wide,
.app-root.theme-dark .consult-primary-wide,
.app-root.is-dark .consult-primary-wide,
.app-root.dark .doctor-primary-btn,
.app-root.dark-mode .doctor-primary-btn,
.app-root.theme-dark .doctor-primary-btn,
.app-root.is-dark .doctor-primary-btn,
.app-root.dark .doctor-add-btn,
.app-root.dark-mode .doctor-add-btn,
.app-root.theme-dark .doctor-add-btn,
.app-root.is-dark .doctor-add-btn,
.app-root.dark .admin-pharmacy-add-btn,
.app-root.dark-mode .admin-pharmacy-add-btn,
.app-root.theme-dark .admin-pharmacy-add-btn,
.app-root.is-dark .admin-pharmacy-add-btn {
    background: var(--safe-green) !important;
    color: #ffffff !important;
}

/* Tables */
.app-root.dark table,
.app-root.dark-mode table,
.app-root.theme-dark table,
.app-root.is-dark table,
.app-root.dark .admin-modern-table,
.app-root.dark-mode .admin-modern-table,
.app-root.theme-dark .admin-modern-table,
.app-root.is-dark .admin-modern-table {
    background: var(--safe-card) !important;
    color: var(--safe-text) !important;
}

.app-root.dark th,
.app-root.dark-mode th,
.app-root.theme-dark th,
.app-root.is-dark th,
.app-root.dark td,
.app-root.dark-mode td,
.app-root.theme-dark td,
.app-root.is-dark td {
    border-color: var(--safe-border) !important;
    color: var(--safe-text-2) !important;
}

.app-root.dark thead,
.app-root.dark-mode thead,
.app-root.theme-dark thead,
.app-root.is-dark thead,
.app-root.dark th,
.app-root.dark-mode th,
.app-root.theme-dark th,
.app-root.is-dark th {
    background: var(--safe-surface-2) !important;
    color: var(--safe-muted) !important;
}

/* Keep green hero clean */
.app-root.dark .beneficiary-hero,
.app-root.dark-mode .beneficiary-hero,
.app-root.theme-dark .beneficiary-hero,
.app-root.is-dark .beneficiary-hero,
.app-root.dark .hero-card,
.app-root.dark-mode .hero-card,
.app-root.theme-dark .hero-card,
.app-root.is-dark .hero-card {
    background: linear-gradient(135deg, #059669, #05a843) !important;
    color: #ffffff !important;
}

.app-root.dark .beneficiary-hero *,
.app-root.dark-mode .beneficiary-hero *,
.app-root.theme-dark .beneficiary-hero *,
.app-root.is-dark .beneficiary-hero *,
.app-root.dark .hero-card *,
.app-root.dark-mode .hero-card *,
.app-root.theme-dark .hero-card *,
.app-root.is-dark .hero-card * {
    color: #ffffff !important;
}

















.app-root.dark header div[style*="left:50%"][style*="border-radius:999px"] *,
.app-root.dark-mode header div[style*="left:50%"][style*="border-radius:999px"] *,
.app-root.theme-dark header div[style*="left:50%"][style*="border-radius:999px"] *,
.app-root.is-dark header div[style*="left:50%"][style*="border-radius:999px"] * {
    color: inherit !important;
}

/* 2) ط£ظٹ ط²ط± ط£ط¨ظٹط¶ ط¯ط§ط®ظ„ ط§ظ„ظ€ Hero ط§ظ„ط£ط®ط¶ط± ظٹظپط¶ظ„ ط£ط¨ظٹط¶طŒ ظ„ظƒظ† ط§ظ„ظ†طµ ظٹط¨ظ‚ظ‰ ط£ط®ط¶ط± ظˆط§ط¶ط­ */
.app-root.dark .beneficiary-hero button,
.app-root.dark-mode .beneficiary-hero button,
.app-root.theme-dark .beneficiary-hero button,
.app-root.is-dark .beneficiary-hero button,
.app-root.dark .hero-card button,
.app-root.dark-mode .hero-card button,
.app-root.theme-dark .hero-card button,
.app-root.is-dark .hero-card button {
    background: #ffffff !important;
    color: #047857 !important;
    border-color: #ffffff !important;
}

.app-root.dark .beneficiary-hero button *,
.app-root.dark-mode .beneficiary-hero button *,
.app-root.theme-dark .beneficiary-hero button *,
.app-root.is-dark .beneficiary-hero button *,
.app-root.dark .hero-card button *,
.app-root.dark-mode .hero-card button *,
.app-root.theme-dark .hero-card button *,
.app-root.is-dark .hero-card button * {
    color: #047857 !important;
}

/* 3) ط£ظٹ ط¹ظ†طµط± ظ„ط³ظ‡ ظˆط§ط®ط¯ background ط£ط¨ظٹط¶ ط¨ط§ظ„ظ€ inline style ظپظٹ ط§ظ„ط¯ط§ط±ظƒ:
   ط®ظ„ظٹظ‡ Dark Card ط¨ط¯ظ„ ط§ظ„ط£ط¨ظٹط¶طŒ ط¹ط´ط§ظ† ط§ظ„ظ†طµ ط§ظ„ط£ط¨ظٹط¶ ظٹط¸ظ‡ط±. */
.app-root.dark [style*="background:#ffffff"],
.app-root.dark [style*="background: #ffffff"],
.app-root.dark [style*="background:#fff"],
.app-root.dark [style*="background: #fff"],
.app-root.dark-mode [style*="background:#ffffff"],
.app-root.dark-mode [style*="background: #ffffff"],
.app-root.dark-mode [style*="background:#fff"],
.app-root.dark-mode [style*="background: #fff"],
.app-root.theme-dark [style*="background:#ffffff"],
.app-root.theme-dark [style*="background: #ffffff"],
.app-root.theme-dark [style*="background:#fff"],
.app-root.theme-dark [style*="background: #fff"],
.app-root.is-dark [style*="background:#ffffff"],
.app-root.is-dark [style*="background: #ffffff"],
.app-root.is-dark [style*="background:#fff"],
.app-root.is-dark [style*="background: #fff"] {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* 4) ط§ط³طھط«ظ†ط§ط، ظ…ظ‡ظ…: ط§ظ„ط£ط²ط±ط§ط± ط§ظ„ط¨ظٹط¶ط§ط، ط¯ط§ط®ظ„ ط§ظ„ظ€ Hero طھط±ط¬ط¹ ط¨ظٹط¶ط§ط، ط¨ظ†طµ ط£ط®ط¶ط± */
.app-root.dark .beneficiary-hero [style*="background:#ffffff"],
.app-root.dark .beneficiary-hero [style*="background: #ffffff"],
.app-root.dark .beneficiary-hero [style*="background:#fff"],
.app-root.dark .beneficiary-hero [style*="background: #fff"],
.app-root.dark-mode .beneficiary-hero [style*="background:#ffffff"],
.app-root.dark-mode .beneficiary-hero [style*="background: #ffffff"],
.app-root.dark-mode .beneficiary-hero [style*="background:#fff"],
.app-root.dark-mode .beneficiary-hero [style*="background: #fff"],
.app-root.theme-dark .beneficiary-hero [style*="background:#ffffff"],
.app-root.theme-dark .beneficiary-hero [style*="background: #ffffff"],
.app-root.theme-dark .beneficiary-hero [style*="background:#fff"],
.app-root.theme-dark .beneficiary-hero [style*="background: #fff"],
.app-root.is-dark .beneficiary-hero [style*="background:#ffffff"],
.app-root.is-dark .beneficiary-hero [style*="background: #ffffff"],
.app-root.is-dark .beneficiary-hero [style*="background:#fff"],
.app-root.is-dark .beneficiary-hero [style*="background: #fff"],
.app-root.dark .hero-card [style*="background:#ffffff"],
.app-root.dark .hero-card [style*="background: #ffffff"],
.app-root.dark .hero-card [style*="background:#fff"],
.app-root.dark .hero-card [style*="background: #fff"],
.app-root.dark-mode .hero-card [style*="background:#ffffff"],
.app-root.dark-mode .hero-card [style*="background: #ffffff"],
.app-root.dark-mode .hero-card [style*="background:#fff"],
.app-root.dark-mode .hero-card [style*="background: #fff"],
.app-root.theme-dark .hero-card [style*="background:#ffffff"],
.app-root.theme-dark .hero-card [style*="background: #ffffff"],
.app-root.theme-dark .hero-card [style*="background:#fff"],
.app-root.theme-dark .hero-card [style*="background: #fff"],
.app-root.is-dark .hero-card [style*="background:#ffffff"],
.app-root.is-dark .hero-card [style*="background: #ffffff"],
.app-root.is-dark .hero-card [style*="background:#fff"],
.app-root.is-dark .hero-card [style*="background: #fff"] {
    background: #ffffff !important;
    color: #047857 !important;
    border-color: #ffffff !important;
}

/* 5) ط§ظ„ظ†طµظˆطµ ط¯ط§ط®ظ„ ط£ظٹ ط¹ظ†طµط± ط§طھط­ظˆظ„ ظ„ظ€ Dark Card */
.app-root.dark [style*="background:#ffffff"] h1,
.app-root.dark [style*="background:#ffffff"] h2,
.app-root.dark [style*="background:#ffffff"] h3,
.app-root.dark [style*="background:#ffffff"] strong,
.app-root.dark [style*="background: #ffffff"] h1,
.app-root.dark [style*="background: #ffffff"] h2,
.app-root.dark [style*="background: #ffffff"] h3,
.app-root.dark [style*="background: #ffffff"] strong,
.app-root.dark-mode [style*="background:#ffffff"] h1,
.app-root.dark-mode [style*="background:#ffffff"] h2,
.app-root.dark-mode [style*="background:#ffffff"] h3,
.app-root.dark-mode [style*="background:#ffffff"] strong,
.app-root.dark-mode [style*="background: #ffffff"] h1,
.app-root.dark-mode [style*="background: #ffffff"] h2,
.app-root.dark-mode [style*="background: #ffffff"] h3,
.app-root.dark-mode [style*="background: #ffffff"] strong,
.app-root.theme-dark [style*="background:#ffffff"] h1,
.app-root.theme-dark [style*="background:#ffffff"] h2,
.app-root.theme-dark [style*="background:#ffffff"] h3,
.app-root.theme-dark [style*="background:#ffffff"] strong,
.app-root.theme-dark [style*="background: #ffffff"] h1,
.app-root.theme-dark [style*="background: #ffffff"] h2,
.app-root.theme-dark [style*="background: #ffffff"] h3,
.app-root.theme-dark [style*="background: #ffffff"] strong,
.app-root.is-dark [style*="background:#ffffff"] h1,
.app-root.is-dark [style*="background:#ffffff"] h2,
.app-root.is-dark [style*="background:#ffffff"] h3,
.app-root.is-dark [style*="background:#ffffff"] strong,
.app-root.is-dark [style*="background: #ffffff"] h1,
.app-root.is-dark [style*="background: #ffffff"] h2,
.app-root.is-dark [style*="background: #ffffff"] h3,
.app-root.is-dark [style*="background: #ffffff"] strong {
    color: #f8fafc !important;
}

/* 6) Pills / Badges ط§ظ„ظپط§طھط­ط© ط¬ظˆظ‡ ط§ظ„ط¯ط§ط±ظƒ: ط®ظ„ظٹ ط§ظ„ظ†طµ ظˆط§ط¶ط­ */
.app-root.dark .badge,
.app-root.dark-mode .badge,
.app-root.theme-dark .badge,
.app-root.is-dark .badge,
.app-root.dark .pill,
.app-root.dark-mode .pill,
.app-root.theme-dark .pill,
.app-root.is-dark .pill,
.app-root.dark .admin-number-pill,
.app-root.dark-mode .admin-number-pill,
.app-root.theme-dark .admin-number-pill,
.app-root.is-dark .admin-number-pill,
.app-root.dark .admin-status-pill,
.app-root.dark-mode .admin-status-pill,
.app-root.theme-dark .admin-status-pill,
.app-root.is-dark .admin-status-pill {
    color: inherit !important;
}

/* 7) ط§ظ„طھط§ط±ظٹط® ظˆط§ظ„ظ€ chips ط§ظ„طµط؛ظٹط±ط© ط¯ط§ط®ظ„ ظƒط±ظˆطھ ط§ظ„ط·ظ„ط¨ط§طھ ظ„ظˆ ط®ظ„ظپظٹطھظ‡ط§ ظپط§طھط­ط© */
.app-root.dark .request-card small,
.app-root.dark-mode .request-card small,
.app-root.theme-dark .request-card small,
.app-root.is-dark .request-card small,
.app-root.dark .request-card span,
.app-root.dark-mode .request-card span,
.app-root.theme-dark .request-card span,
.app-root.is-dark .request-card span {
    color: inherit;
}

/* 8) ط¥طµظ„ط§ط­ ط²ط± ط¹ط±ط¶ ط§ظ„ظƒظ„ ظ„ظˆ ط¸ظ‡ط± ط£ط¨ظٹط¶ */
.app-root.dark button[style*="background:#ffffff"],
.app-root.dark button[style*="background: #ffffff"],
.app-root.dark button[style*="background:#fff"],
.app-root.dark button[style*="background: #fff"],
.app-root.dark-mode button[style*="background:#ffffff"],
.app-root.dark-mode button[style*="background: #ffffff"],
.app-root.dark-mode button[style*="background:#fff"],
.app-root.dark-mode button[style*="background: #fff"],
.app-root.theme-dark button[style*="background:#ffffff"],
.app-root.theme-dark button[style*="background: #ffffff"],
.app-root.theme-dark button[style*="background:#fff"],
.app-root.theme-dark button[style*="background: #fff"],
.app-root.is-dark button[style*="background:#ffffff"],
.app-root.is-dark button[style*="background: #ffffff"],
.app-root.is-dark button[style*="background:#fff"],
.app-root.is-dark button[style*="background: #fff"] {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

.app-root.dark button[style*="background:#ffffff"] *,
.app-root.dark button[style*="background: #ffffff"] *,
.app-root.dark button[style*="background:#fff"] *,
.app-root.dark button[style*="background: #fff"] *,
.app-root.dark-mode button[style*="background:#ffffff"] *,
.app-root.dark-mode button[style*="background: #ffffff"] *,
.app-root.dark-mode button[style*="background:#fff"] *,
.app-root.dark-mode button[style*="background: #fff"] *,
.app-root.theme-dark button[style*="background:#ffffff"] *,
.app-root.theme-dark button[style*="background: #ffffff"] *,
.app-root.theme-dark button[style*="background:#fff"] *,
.app-root.theme-dark button[style*="background: #fff"] *,
.app-root.is-dark button[style*="background:#ffffff"] *,
.app-root.is-dark button[style*="background: #ffffff"] *,
.app-root.is-dark button[style*="background:#fff"] *,
.app-root.is-dark button[style*="background: #fff"] * {
    color: #111827 !important;
}




















/* =========================================================
   

   - إصلاح الصفحات اللي لسه خلفيتها بيضاء في الدارك:
     /portal/dashboard
     /portal/requests
     /portal/notifications
   - بدون تغيير Layout / Sidebar / Topbar / Width / Position
   ========================================================= */

/* الخلفيات الفاتحة العامة داخل محتوى الصفحة فقط */
.app-root.dark .page-canvas [style*="background:#f8fafc"],
.app-root.dark .page-canvas [style*="background: #f8fafc"],
.app-root.dark .page-canvas [style*="background:#f9fafb"],
.app-root.dark .page-canvas [style*="background: #f9fafb"],
.app-root.dark .page-canvas [style*="background:#f3f4f6"],
.app-root.dark .page-canvas [style*="background: #f3f4f6"],
.app-root.dark-mode .page-canvas [style*="background:#f8fafc"],
.app-root.dark-mode .page-canvas [style*="background: #f8fafc"],
.app-root.dark-mode .page-canvas [style*="background:#f9fafb"],
.app-root.dark-mode .page-canvas [style*="background: #f9fafb"],
.app-root.dark-mode .page-canvas [style*="background:#f3f4f6"],
.app-root.dark-mode .page-canvas [style*="background: #f3f4f6"],
.app-root.theme-dark .page-canvas [style*="background:#f8fafc"],
.app-root.theme-dark .page-canvas [style*="background: #f8fafc"],
.app-root.theme-dark .page-canvas [style*="background:#f9fafb"],
.app-root.theme-dark .page-canvas [style*="background: #f9fafb"],
.app-root.theme-dark .page-canvas [style*="background:#f3f4f6"],
.app-root.theme-dark .page-canvas [style*="background: #f3f4f6"],
.app-root.is-dark .page-canvas [style*="background:#f8fafc"],
.app-root.is-dark .page-canvas [style*="background: #f8fafc"],
.app-root.is-dark .page-canvas [style*="background:#f9fafb"],
.app-root.is-dark .page-canvas [style*="background: #f9fafb"],
.app-root.is-dark .page-canvas [style*="background:#f3f4f6"],
.app-root.is-dark .page-canvas [style*="background: #f3f4f6"] {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* أي wrapper كبير داخل صفحات البورتال */
.app-root.dark .page-canvas > div,
.app-root.dark-mode .page-canvas > div,
.app-root.theme-dark .page-canvas > div,
.app-root.is-dark .page-canvas > div,
.app-root.dark .portal-page,
.app-root.dark-mode .portal-page,
.app-root.theme-dark .portal-page,
.app-root.is-dark .portal-page,
.app-root.dark .portal-dashboard,
.app-root.dark-mode .portal-dashboard,
.app-root.theme-dark .portal-dashboard,
.app-root.is-dark .portal-dashboard,
.app-root.dark .beneficiary-dashboard,
.app-root.dark-mode .beneficiary-dashboard,
.app-root.theme-dark .beneficiary-dashboard,
.app-root.is-dark .beneficiary-dashboard,
.app-root.dark .requests-page,
.app-root.dark-mode .requests-page,
.app-root.theme-dark .requests-page,
.app-root.is-dark .requests-page,
.app-root.dark .notifications-page,
.app-root.dark-mode .notifications-page,
.app-root.theme-dark .notifications-page,
.app-root.is-dark .notifications-page {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Sections الكبيرة اللي باينة بيضاء في الصور */
.app-root.dark .page-canvas section,
.app-root.dark-mode .page-canvas section,
.app-root.theme-dark .page-canvas section,
.app-root.is-dark .page-canvas section {
    border-color: #334155 !important;
}

/* كروت المحتوى الداكنة */
.app-root.dark .page-canvas article,
.app-root.dark-mode .page-canvas article,
.app-root.theme-dark .page-canvas article,
.app-root.is-dark .page-canvas article,
.app-root.dark .page-canvas .card,
.app-root.dark-mode .page-canvas .card,
.app-root.theme-dark .page-canvas .card,
.app-root.is-dark .page-canvas .card,
.app-root.dark .page-canvas [class*="card"],
.app-root.dark-mode .page-canvas [class*="card"],
.app-root.theme-dark .page-canvas [class*="card"],
.app-root.is-dark .page-canvas [class*="card"],
.app-root.dark .page-canvas [class*="Card"],
.app-root.dark-mode .page-canvas [class*="Card"],
.app-root.theme-dark .page-canvas [class*="Card"],
.app-root.is-dark .page-canvas [class*="Card"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* استثناء الهيرو الأخضر، لا يتحول لكارت غامق */
.app-root.dark .page-canvas [class*="hero"],
.app-root.dark-mode .page-canvas [class*="hero"],
.app-root.theme-dark .page-canvas [class*="hero"],
.app-root.is-dark .page-canvas [class*="hero"],
.app-root.dark .page-canvas [class*="Hero"],
.app-root.dark-mode .page-canvas [class*="Hero"],
.app-root.theme-dark .page-canvas [class*="Hero"],
.app-root.is-dark .page-canvas [class*="Hero"] {
    background: linear-gradient(135deg, #05a843, #059669) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* نصوص العناوين داخل صفحات البورتال */
.app-root.dark .page-canvas h1,
.app-root.dark-mode .page-canvas h1,
.app-root.theme-dark .page-canvas h1,
.app-root.is-dark .page-canvas h1,
.app-root.dark .page-canvas h2,
.app-root.dark-mode .page-canvas h2,
.app-root.theme-dark .page-canvas h2,
.app-root.is-dark .page-canvas h2,
.app-root.dark .page-canvas h3,
.app-root.dark-mode .page-canvas h3,
.app-root.theme-dark .page-canvas h3,
.app-root.is-dark .page-canvas h3,
.app-root.dark .page-canvas strong,
.app-root.dark-mode .page-canvas strong,
.app-root.theme-dark .page-canvas strong,
.app-root.is-dark .page-canvas strong {
    color: #f8fafc !important;
}

.app-root.dark .page-canvas p,
.app-root.dark-mode .page-canvas p,
.app-root.theme-dark .page-canvas p,
.app-root.is-dark .page-canvas p,
.app-root.dark .page-canvas small,
.app-root.dark-mode .page-canvas small,
.app-root.theme-dark .page-canvas small,
.app-root.is-dark .page-canvas small {
    color: #cbd5e1 !important;
}

/* الأزرار البيضاء الصغيرة والـ filter chips: خليها واضحة */
.app-root.dark .page-canvas button,
.app-root.dark-mode .page-canvas button,
.app-root.theme-dark .page-canvas button,
.app-root.is-dark .page-canvas button {
    border-color: #334155;
}

/* الأزرار اللي خلفيتها أبيض Inline تتحول لفاتح بنص غامق، مش نص أبيض */
.app-root.dark .page-canvas button[style*="background:#ffffff"],
.app-root.dark .page-canvas button[style*="background: #ffffff"],
.app-root.dark .page-canvas button[style*="background:#fff"],
.app-root.dark .page-canvas button[style*="background: #fff"],
.app-root.dark-mode .page-canvas button[style*="background:#ffffff"],
.app-root.dark-mode .page-canvas button[style*="background: #ffffff"],
.app-root.dark-mode .page-canvas button[style*="background:#fff"],
.app-root.dark-mode .page-canvas button[style*="background: #fff"],
.app-root.theme-dark .page-canvas button[style*="background:#ffffff"],
.app-root.theme-dark .page-canvas button[style*="background: #ffffff"],
.app-root.theme-dark .page-canvas button[style*="background:#fff"],
.app-root.theme-dark .page-canvas button[style*="background: #fff"],
.app-root.is-dark .page-canvas button[style*="background:#ffffff"],
.app-root.is-dark .page-canvas button[style*="background: #ffffff"],
.app-root.is-dark .page-canvas button[style*="background:#fff"],
.app-root.is-dark .page-canvas button[style*="background: #fff"] {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* داخل الأزرار الفاتحة */
.app-root.dark .page-canvas button[style*="background:#ffffff"] *,
.app-root.dark .page-canvas button[style*="background: #ffffff"] *,
.app-root.dark .page-canvas button[style*="background:#fff"] *,
.app-root.dark .page-canvas button[style*="background: #fff"] *,
.app-root.dark-mode .page-canvas button[style*="background:#ffffff"] *,
.app-root.dark-mode .page-canvas button[style*="background: #ffffff"] *,
.app-root.dark-mode .page-canvas button[style*="background:#fff"] *,
.app-root.dark-mode .page-canvas button[style*="background: #fff"] *,
.app-root.theme-dark .page-canvas button[style*="background:#ffffff"] *,
.app-root.theme-dark .page-canvas button[style*="background: #ffffff"] *,
.app-root.theme-dark .page-canvas button[style*="background:#fff"] *,
.app-root.theme-dark .page-canvas button[style*="background: #fff"] *,
.app-root.is-dark .page-canvas button[style*="background:#ffffff"] *,
.app-root.is-dark .page-canvas button[style*="background: #ffffff"] *,
.app-root.is-dark .page-canvas button[style*="background:#fff"] *,
.app-root.is-dark .page-canvas button[style*="background: #fff"] * {
    color: #111827 !important;
}

/* صفوف الإشعارات التي ظهرت فاتحة جدًا */
.app-root.dark .notifications-page .notification-item,
.app-root.dark-mode .notifications-page .notification-item,
.app-root.theme-dark .notifications-page .notification-item,
.app-root.is-dark .notifications-page .notification-item,
.app-root.dark .page-canvas [class*="notification"],
.app-root.dark-mode .page-canvas [class*="notification"],
.app-root.theme-dark .page-canvas [class*="notification"],
.app-root.is-dark .page-canvas [class*="notification"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* لا تخلي أي خلفية بيضاء عامة تظهر في قلب الصفحة */
.app-root.dark .page-canvas div[style*="background:#ffffff"],
.app-root.dark .page-canvas div[style*="background: #ffffff"],
.app-root.dark .page-canvas section[style*="background:#ffffff"],
.app-root.dark .page-canvas section[style*="background: #ffffff"],
.app-root.dark-mode .page-canvas div[style*="background:#ffffff"],
.app-root.dark-mode .page-canvas div[style*="background: #ffffff"],
.app-root.dark-mode .page-canvas section[style*="background:#ffffff"],
.app-root.dark-mode .page-canvas section[style*="background: #ffffff"],
.app-root.theme-dark .page-canvas div[style*="background:#ffffff"],
.app-root.theme-dark .page-canvas div[style*="background: #ffffff"],
.app-root.theme-dark .page-canvas section[style*="background:#ffffff"],
.app-root.theme-dark .page-canvas section[style*="background: #ffffff"],
.app-root.is-dark .page-canvas div[style*="background:#ffffff"],
.app-root.is-dark .page-canvas div[style*="background: #ffffff"],
.app-root.is-dark .page-canvas section[style*="background:#ffffff"],
.app-root.is-dark .page-canvas section[style*="background: #ffffff"] {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* استثناء أزرار الهيرو البيضاء مرة تانية */
.app-root.dark .page-canvas [class*="hero"] button,
.app-root.dark-mode .page-canvas [class*="hero"] button,
.app-root.theme-dark .page-canvas [class*="hero"] button,
.app-root.is-dark .page-canvas [class*="hero"] button,
.app-root.dark .page-canvas [class*="Hero"] button,
.app-root.dark-mode .page-canvas [class*="Hero"] button,
.app-root.theme-dark .page-canvas [class*="Hero"] button,
.app-root.is-dark .page-canvas [class*="Hero"] button {
    background: #ffffff !important;
    color: #047857 !important;
    border-color: #ffffff !important;
}






















/* =========================================================
   CharityHealth Dark Mode - Filter Counts Visibility Fix
   ========================================================= */

/* أزرار الفلاتر الفاتحة في صفحات الطلبات */
.app-root.dark .page-canvas button,
.app-root.dark-mode .page-canvas button,
.app-root.theme-dark .page-canvas button,
.app-root.is-dark .page-canvas button {
    text-shadow: none !important;
}

/* أي زر فاتح في الدارك لازم النص والأرقام جواه تبقى غامقة */
.app-root.dark .page-canvas button[style*="background:#ffffff"],
.app-root.dark .page-canvas button[style*="background: #ffffff"],
.app-root.dark .page-canvas button[style*="background:#fff"],
.app-root.dark .page-canvas button[style*="background: #fff"],
.app-root.dark .page-canvas button[style*="background:#f8fafc"],
.app-root.dark .page-canvas button[style*="background: #f8fafc"],
.app-root.dark .page-canvas button[style*="background:#f1f5f9"],
.app-root.dark .page-canvas button[style*="background: #f1f5f9"],
.app-root.dark-mode .page-canvas button[style*="background:#ffffff"],
.app-root.dark-mode .page-canvas button[style*="background: #ffffff"],
.app-root.dark-mode .page-canvas button[style*="background:#fff"],
.app-root.dark-mode .page-canvas button[style*="background: #fff"],
.app-root.dark-mode .page-canvas button[style*="background:#f8fafc"],
.app-root.dark-mode .page-canvas button[style*="background: #f8fafc"],
.app-root.dark-mode .page-canvas button[style*="background:#f1f5f9"],
.app-root.dark-mode .page-canvas button[style*="background: #f1f5f9"],
.app-root.theme-dark .page-canvas button[style*="background:#ffffff"],
.app-root.theme-dark .page-canvas button[style*="background: #ffffff"],
.app-root.theme-dark .page-canvas button[style*="background:#fff"],
.app-root.theme-dark .page-canvas button[style*="background: #fff"],
.app-root.theme-dark .page-canvas button[style*="background:#f8fafc"],
.app-root.theme-dark .page-canvas button[style*="background: #f8fafc"],
.app-root.theme-dark .page-canvas button[style*="background:#f1f5f9"],
.app-root.theme-dark .page-canvas button[style*="background: #f1f5f9"],
.app-root.is-dark .page-canvas button[style*="background:#ffffff"],
.app-root.is-dark .page-canvas button[style*="background: #ffffff"],
.app-root.is-dark .page-canvas button[style*="background:#fff"],
.app-root.is-dark .page-canvas button[style*="background: #fff"],
.app-root.is-dark .page-canvas button[style*="background:#f8fafc"],
.app-root.is-dark .page-canvas button[style*="background: #f8fafc"],
.app-root.is-dark .page-canvas button[style*="background:#f1f5f9"],
.app-root.is-dark .page-canvas button[style*="background: #f1f5f9"] {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* كل العناصر الداخلية جوه أزرار الفلاتر الفاتحة */
.app-root.dark .page-canvas button[style*="background:#ffffff"] *,
.app-root.dark .page-canvas button[style*="background: #ffffff"] *,
.app-root.dark .page-canvas button[style*="background:#fff"] *,
.app-root.dark .page-canvas button[style*="background: #fff"] *,
.app-root.dark .page-canvas button[style*="background:#f8fafc"] *,
.app-root.dark .page-canvas button[style*="background: #f8fafc"] *,
.app-root.dark .page-canvas button[style*="background:#f1f5f9"] *,
.app-root.dark .page-canvas button[style*="background: #f1f5f9"] *,
.app-root.dark-mode .page-canvas button[style*="background:#ffffff"] *,
.app-root.dark-mode .page-canvas button[style*="background: #ffffff"] *,
.app-root.dark-mode .page-canvas button[style*="background:#fff"] *,
.app-root.dark-mode .page-canvas button[style*="background: #fff"] *,
.app-root.dark-mode .page-canvas button[style*="background:#f8fafc"] *,
.app-root.dark-mode .page-canvas button[style*="background: #f8fafc"] *,
.app-root.dark-mode .page-canvas button[style*="background:#f1f5f9"] *,
.app-root.dark-mode .page-canvas button[style*="background: #f1f5f9"] *,
.app-root.theme-dark .page-canvas button[style*="background:#ffffff"] *,
.app-root.theme-dark .page-canvas button[style*="background: #ffffff"] *,
.app-root.theme-dark .page-canvas button[style*="background:#fff"] *,
.app-root.theme-dark .page-canvas button[style*="background: #fff"] *,
.app-root.theme-dark .page-canvas button[style*="background:#f8fafc"] *,
.app-root.theme-dark .page-canvas button[style*="background: #f8fafc"] *,
.app-root.theme-dark .page-canvas button[style*="background:#f1f5f9"] *,
.app-root.theme-dark .page-canvas button[style*="background: #f1f5f9"] *,
.app-root.is-dark .page-canvas button[style*="background:#ffffff"] *,
.app-root.is-dark .page-canvas button[style*="background: #ffffff"] *,
.app-root.is-dark .page-canvas button[style*="background:#fff"] *,
.app-root.is-dark .page-canvas button[style*="background: #fff"] *,
.app-root.is-dark .page-canvas button[style*="background:#f8fafc"] *,
.app-root.is-dark .page-canvas button[style*="background: #f8fafc"] *,
.app-root.is-dark .page-canvas button[style*="background:#f1f5f9"] *,
.app-root.is-dark .page-canvas button[style*="background: #f1f5f9"] * {
    color: #111827 !important;
}

/* دوائر الأرقام الصغيرة داخل أزرار الفلاتر */
.app-root.dark .page-canvas button span,
.app-root.dark-mode .page-canvas button span,
.app-root.theme-dark .page-canvas button span,
.app-root.is-dark .page-canvas button span {
    text-shadow: none !important;
}

/* لو الرقم داخل دائرة فاتحة غير Inline */
.app-root.dark .page-canvas button span:first-child,
.app-root.dark-mode .page-canvas button span:first-child,
.app-root.theme-dark .page-canvas button span:first-child,
.app-root.is-dark .page-canvas button span:first-child {
    color: #111827 !important;
}

/* الزر النشط الأخضر الفاتح، الرقم والنص يظهروا أخضر غامق */
.app-root.dark .page-canvas button[style*="#dcfce7"],
.app-root.dark .page-canvas button[style*="#ecfdf3"],
.app-root.dark .page-canvas button[style*="#e9fbef"],
.app-root.dark-mode .page-canvas button[style*="#dcfce7"],
.app-root.dark-mode .page-canvas button[style*="#ecfdf3"],
.app-root.dark-mode .page-canvas button[style*="#e9fbef"],
.app-root.theme-dark .page-canvas button[style*="#dcfce7"],
.app-root.theme-dark .page-canvas button[style*="#ecfdf3"],
.app-root.theme-dark .page-canvas button[style*="#e9fbef"],
.app-root.is-dark .page-canvas button[style*="#dcfce7"],
.app-root.is-dark .page-canvas button[style*="#ecfdf3"],
.app-root.is-dark .page-canvas button[style*="#e9fbef"] {
    background: #dcfce7 !important;
    color: #047857 !important;
    border-color: #86efac !important;
}

.app-root.dark .page-canvas button[style*="#dcfce7"] *,
.app-root.dark .page-canvas button[style*="#ecfdf3"] *,
.app-root.dark .page-canvas button[style*="#e9fbef"] *,
.app-root.dark-mode .page-canvas button[style*="#dcfce7"] *,
.app-root.dark-mode .page-canvas button[style*="#ecfdf3"] *,
.app-root.dark-mode .page-canvas button[style*="#e9fbef"] *,
.app-root.theme-dark .page-canvas button[style*="#dcfce7"] *,
.app-root.theme-dark .page-canvas button[style*="#ecfdf3"] *,
.app-root.theme-dark .page-canvas button[style*="#e9fbef"] *,
.app-root.is-dark .page-canvas button[style*="#dcfce7"] *,
.app-root.is-dark .page-canvas button[style*="#ecfdf3"] *,
.app-root.is-dark .page-canvas button[style*="#e9fbef"] * {
    color: #047857 !important;
}

/* لا تبوظ زر "طلب جديد" الأخضر */
.app-root.dark .page-canvas button[style*="#05a843"],
.app-root.dark .page-canvas button[style*="#22c55e"],
.app-root.dark .page-canvas button[style*="background:#05a843"],
.app-root.dark .page-canvas button[style*="background: #05a843"],
.app-root.dark-mode .page-canvas button[style*="#05a843"],
.app-root.dark-mode .page-canvas button[style*="#22c55e"],
.app-root.dark-mode .page-canvas button[style*="background:#05a843"],
.app-root.dark-mode .page-canvas button[style*="background: #05a843"],
.app-root.theme-dark .page-canvas button[style*="#05a843"],
.app-root.theme-dark .page-canvas button[style*="#22c55e"],
.app-root.theme-dark .page-canvas button[style*="background:#05a843"],
.app-root.theme-dark .page-canvas button[style*="background: #05a843"],
.app-root.is-dark .page-canvas button[style*="#05a843"],
.app-root.is-dark .page-canvas button[style*="#22c55e"],
.app-root.is-dark .page-canvas button[style*="background:#05a843"],
.app-root.is-dark .page-canvas button[style*="background: #05a843"] {
    background: #05a843 !important;
    color: #ffffff !important;
    border-color: #05a843 !important;
}

.app-root.dark .page-canvas button[style*="#05a843"] *,
.app-root.dark .page-canvas button[style*="#22c55e"] *,
.app-root.dark .page-canvas button[style*="background:#05a843"] *,
.app-root.dark .page-canvas button[style*="background: #05a843"] *,
.app-root.dark-mode .page-canvas button[style*="#05a843"] *,
.app-root.dark-mode .page-canvas button[style*="#22c55e"] *,
.app-root.dark-mode .page-canvas button[style*="background:#05a843"] *,
.app-root.dark-mode .page-canvas button[style*="background: #05a843"] *,
.app-root.theme-dark .page-canvas button[style*="#05a843"] *,
.app-root.theme-dark .page-canvas button[style*="#22c55e"] *,
.app-root.theme-dark .page-canvas button[style*="background:#05a843"] *,
.app-root.theme-dark .page-canvas button[style*="background: #05a843"] *,
.app-root.is-dark .page-canvas button[style*="#05a843"] *,
.app-root.is-dark .page-canvas button[style*="#22c55e"] *,
.app-root.is-dark .page-canvas button[style*="background:#05a843"] *,
.app-root.is-dark .page-canvas button[style*="background: #05a843"] * {
    color: #ffffff !important;
}






















/* =========================================================
   CharityHealth Dark Mode - Request Filter Count Circles Fix
 
   الهدف: إظهار أرقام فلاتر الطلبات: الكل / قيد المراجعة / مقبولة / مرفوضة.
   بدون أي تغيير في Layout.
   ========================================================= */

/* أزرار الفلاتر البيضاء نفسها */
.app-root.dark .page-canvas button,
.app-root.dark-mode .page-canvas button,
.app-root.theme-dark .page-canvas button,
.app-root.is-dark .page-canvas button {
    text-shadow: none !important;
}

/* أي زر فلتر فاتح: خليه أبيض بنص غامق واضح */
.app-root.dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]),
.app-root.dark-mode .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]),
.app-root.theme-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]),
.app-root.is-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) {
    color: #111827 !important;
}

/* النصوص داخل أزرار الفلاتر الفاتحة */
.app-root.dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) strong,
.app-root.dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) small,
.app-root.dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) em,
.app-root.dark-mode .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) strong,
.app-root.dark-mode .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) small,
.app-root.dark-mode .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) em,
.app-root.theme-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) strong,
.app-root.theme-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) small,
.app-root.theme-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) em,
.app-root.is-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) strong,
.app-root.is-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) small,
.app-root.is-dark .page-canvas button:not([style*="#05a843"]):not([style*="#22c55e"]):not([style*="rgb(5, 168, 67)"]) em {
    color: #111827 !important;
}

/* الرقم داخل الدائرة الصغيرة في زر الفلتر */
.app-root.dark .page-canvas button span[style*="border-radius:50%"],
.app-root.dark .page-canvas button span[style*="border-radius: 50%"],
.app-root.dark .page-canvas button span[style*="border-radius:999px"],
.app-root.dark .page-canvas button span[style*="border-radius: 999px"],
.app-root.dark-mode .page-canvas button span[style*="border-radius:50%"],
.app-root.dark-mode .page-canvas button span[style*="border-radius: 50%"],
.app-root.dark-mode .page-canvas button span[style*="border-radius:999px"],
.app-root.dark-mode .page-canvas button span[style*="border-radius: 999px"],
.app-root.theme-dark .page-canvas button span[style*="border-radius:50%"],
.app-root.theme-dark .page-canvas button span[style*="border-radius: 50%"],
.app-root.theme-dark .page-canvas button span[style*="border-radius:999px"],
.app-root.theme-dark .page-canvas button span[style*="border-radius: 999px"],
.app-root.is-dark .page-canvas button span[style*="border-radius:50%"],
.app-root.is-dark .page-canvas button span[style*="border-radius: 50%"],
.app-root.is-dark .page-canvas button span[style*="border-radius:999px"],
.app-root.is-dark .page-canvas button span[style*="border-radius: 999px"] {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
    opacity: 1 !important;
}

/* الرقم نفسه لو جواه عنصر داخلي */
.app-root.dark .page-canvas button span[style*="border-radius:50%"] *,
.app-root.dark .page-canvas button span[style*="border-radius: 50%"] *,
.app-root.dark .page-canvas button span[style*="border-radius:999px"] *,
.app-root.dark .page-canvas button span[style*="border-radius: 999px"] *,
.app-root.dark-mode .page-canvas button span[style*="border-radius:50%"] *,
.app-root.dark-mode .page-canvas button span[style*="border-radius: 50%"] *,
.app-root.dark-mode .page-canvas button span[style*="border-radius:999px"] *,
.app-root.dark-mode .page-canvas button span[style*="border-radius: 999px"] *,
.app-root.theme-dark .page-canvas button span[style*="border-radius:50%"] *,
.app-root.theme-dark .page-canvas button span[style*="border-radius: 50%"] *,
.app-root.theme-dark .page-canvas button span[style*="border-radius:999px"] *,
.app-root.theme-dark .page-canvas button span[style*="border-radius: 999px"] *,
.app-root.is-dark .page-canvas button span[style*="border-radius:50%"] *,
.app-root.is-dark .page-canvas button span[style*="border-radius: 50%"] *,
.app-root.is-dark .page-canvas button span[style*="border-radius:999px"] *,
.app-root.is-dark .page-canvas button span[style*="border-radius: 999px"] * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* الفلتر النشط الأخضر الفاتح: الدائرة تبقى أخضر غامق والرقم أبيض */
.app-root.dark .page-canvas button[style*="#dcfce7"] span[style*="border-radius"],
.app-root.dark .page-canvas button[style*="#ecfdf3"] span[style*="border-radius"],
.app-root.dark .page-canvas button[style*="#e9fbef"] span[style*="border-radius"],
.app-root.dark-mode .page-canvas button[style*="#dcfce7"] span[style*="border-radius"],
.app-root.dark-mode .page-canvas button[style*="#ecfdf3"] span[style*="border-radius"],
.app-root.dark-mode .page-canvas button[style*="#e9fbef"] span[style*="border-radius"],
.app-root.theme-dark .page-canvas button[style*="#dcfce7"] span[style*="border-radius"],
.app-root.theme-dark .page-canvas button[style*="#ecfdf3"] span[style*="border-radius"],
.app-root.theme-dark .page-canvas button[style*="#e9fbef"] span[style*="border-radius"],
.app-root.is-dark .page-canvas button[style*="#dcfce7"] span[style*="border-radius"],
.app-root.is-dark .page-canvas button[style*="#ecfdf3"] span[style*="border-radius"],
.app-root.is-dark .page-canvas button[style*="#e9fbef"] span[style*="border-radius"] {
    background: #047857 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
}

/* الفلتر النشط نفسه */
.app-root.dark .page-canvas button[style*="#dcfce7"],
.app-root.dark .page-canvas button[style*="#ecfdf3"],
.app-root.dark .page-canvas button[style*="#e9fbef"],
.app-root.dark-mode .page-canvas button[style*="#dcfce7"],
.app-root.dark-mode .page-canvas button[style*="#ecfdf3"],
.app-root.dark-mode .page-canvas button[style*="#e9fbef"],
.app-root.theme-dark .page-canvas button[style*="#dcfce7"],
.app-root.theme-dark .page-canvas button[style*="#ecfdf3"],
.app-root.theme-dark .page-canvas button[style*="#e9fbef"],
.app-root.is-dark .page-canvas button[style*="#dcfce7"],
.app-root.is-dark .page-canvas button[style*="#ecfdf3"],
.app-root.is-dark .page-canvas button[style*="#e9fbef"] {
    background: #dcfce7 !important;
    color: #047857 !important;
    border-color: #86efac !important;
}

.app-root.dark .page-canvas button[style*="#dcfce7"] strong,
.app-root.dark .page-canvas button[style*="#ecfdf3"] strong,
.app-root.dark .page-canvas button[style*="#e9fbef"] strong,
.app-root.dark-mode .page-canvas button[style*="#dcfce7"] strong,
.app-root.dark-mode .page-canvas button[style*="#ecfdf3"] strong,
.app-root.dark-mode .page-canvas button[style*="#e9fbef"] strong,
.app-root.theme-dark .page-canvas button[style*="#dcfce7"] strong,
.app-root.theme-dark .page-canvas button[style*="#ecfdf3"] strong,
.app-root.theme-dark .page-canvas button[style*="#e9fbef"] strong,
.app-root.is-dark .page-canvas button[style*="#dcfce7"] strong,
.app-root.is-dark .page-canvas button[style*="#ecfdf3"] strong,
.app-root.is-dark .page-canvas button[style*="#e9fbef"] strong {
    color: #047857 !important;
}

/* آخر طبقة إجبارية للأرقام الباهتة داخل الفلاتر */
.app-root.dark .page-canvas button span[style*="opacity"],
.app-root.dark-mode .page-canvas button span[style*="opacity"],
.app-root.theme-dark .page-canvas button span[style*="opacity"],
.app-root.is-dark .page-canvas button span[style*="opacity"] {
    opacity: 1 !important;
}

/* =========================================================
   CharityHealth MOBILE RESPONSIVE FINAL PATCH
   ضع هذا البلوك في آخر app-ui.css
   الهدف:
   - ضبط الموقع كله على الهاتف.
   - منع الـ horizontal scroll.
   - جعل الصفحات والكروت والجداول مناسبة للموبايل.
   - يعمل مع MainLayout_MobileDrawer.razor.
   ========================================================= */

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .app-root,
    .app-workspace,
    .page-canvas {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100% !important;
    }

    button,
    input,
    select,
    textarea {
        max-width: 100% !important;
    }

    /* Auth / Login */
    .auth-layout {
        min-height: 100dvh !important;
        padding: 22px 14px !important;
        align-items: flex-start !important;
        overflow-x: hidden !important;
    }

    .login-shell {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        direction: rtl !important;
    }

    .login-card {
        width: 100% !important;
        min-height: auto !important;
        padding: 30px 20px 26px !important;
        border-radius: 26px !important;
    }

    .login-title-block h1 {
        font-size: 32px !important;
    }

    .demo-grid {
        grid-template-columns: 1fr !important;
    }

    .field-shell {
        height: 62px !important;
        border-radius: 22px !important;
    }

    .login-submit {
        height: 64px !important;
        font-size: 20px !important;
    }

    .login-brand-panel {
        order: -1 !important;
        padding: 16px 0 0 !important;
    }

    .login-brand-panel .brand-mark {
        width: 96px !important;
        height: 96px !important;
        border-radius: 24px !important;
    }

    .login-brand-panel .brand-mark.large {
        margin-bottom: 24px !important;
    }

    .login-brand-panel h2 {
        font-size: 38px !important;
        line-height: 1.12 !important;
    }

    .login-brand-panel p {
        font-size: 16px !important;
        margin: 18px 0 22px !important;
    }

    .brand-metrics {
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }

    /* Register */
    .auth-card.register-card {
        width: calc(100% - 20px) !important;
        margin: 20px auto !important;
        border-radius: 26px !important;
    }

    .auth-card.register-card .auth-card-header,
    .auth-card.register-card form {
        padding-inline: 20px !important;
    }

    .auth-card.register-card .form-row,
    .auth-card.register-card .btn-row {
        grid-template-columns: 1fr !important;
    }

    /* General page wrappers */
    .admin-db-page,
    .admin-home-page,
    .admin-dashboard,
    .admin-list-page,
    .admin-pharmacy-page,
    .requests-page,
    .doctors-page,
    .reports-page,
    .create-doctor-page,
    .beneficiary-dashboard,
    .my-requests-page,
    .beneficiary-notifications-page,
    .notifications-page,
    .consult-request-page,
    .doctor-home-page,
    .doctor-scan-modern-page,
    .doctor-history-modern-page,
    .pharmacy-dashboard,
    .pharmacy-page {
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(100dvh - 72px) !important;
        padding: 22px 14px 54px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Head sections */
    .admin-db-title,
    .admin-home-header,
    .admin-list-head,
    .admin-pharmacy-head,
    .requests-head,
    .doctors-head,
    .reports-head,
    .create-doctor-head,
    .my-requests-header,
    .beneficiary-notifications-head,
    .doctor-history-modern-head,
    .doctor-section-title,
    .doctor-result-head,
    .doctor-scan-modern-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .admin-db-title h1,
    .admin-home-header h1,
    .admin-list-head h1,
    .admin-pharmacy-head h1,
    .requests-head h1,
    .doctors-head h1,
    .reports-head h1,
    .create-doctor-head h1,
    .my-requests-header h1,
    .beneficiary-notifications-head h1,
    .doctor-history-modern-head h1 {
        font-size: 32px !important;
        line-height: 1.18 !important;
        letter-spacing: -0.03em !important;
    }

    /* Hero blocks */
    .beneficiary-hero,
    .doctor-home-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 28px 20px !important;
        border-radius: 28px !important;
        gap: 20px !important;
        overflow: hidden !important;
    }

    .beneficiary-hero h1,
    .doctor-hero-copy h1 {
        font-size: 33px !important;
        line-height: 1.2 !important;
        word-break: normal !important;
    }

    .beneficiary-hero p,
    .doctor-hero-copy p {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    .beneficiary-primary-btn,
    .doctor-hero-qr,
    .doctor-add-btn,
    .admin-pharmacy-add-btn,
    .reports-export-btn,
    .create-doctor-back,
    .my-requests-new-btn,
    .doctor-history-back-btn {
        width: 100% !important;
        justify-content: center !important;
        position: static !important;
    }

    /* Grids -> one column */
    .admin-db-stats,
    .admin-home-stats,
    .admin-stats-grid,
    .admin-pharmacy-stats,
    .beneficiary-stats-grid,
    .reports-kpis,
    .doctor-history-summary-grid,
    .doctor-hero-stats,
    .doctor-actions-row,
    .doctor-current-list,
    .doctor-days-strip,
    .doctors-grid,
    .admin-pharmacy-grid,
    .my-requests-grid,
    .notifications-grid,
    .beneficiary-content-grid,
    .admin-db-analytics,
    .admin-home-main-grid,
    .admin-home-bottom-grid,
    .reports-bottom-grid,
    .doctor-result-layout,
    .consult-shell,
    .consult-shell.fixed-order,
    .consult-side,
    .consult-personal-grid,
    .doctor-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cards */
    .beneficiary-stat-card,
    .admin-db-stat,
    .admin-home-stat-card,
    .admin-stat-card,
    .report-kpi,
    .doctor-history-summary-card,
    .doctor-card,
    .admin-pharmacy-card,
    .my-request-card,
    .notification-card,
    .doctor-current-case,
    .doctor-schedule-card,
    .doctor-cases-panel,
    .doctor-result-card,
    .consult-main-card,
    .consult-info-card,
    .consult-steps-card,
    .create-doctor-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .my-request-card,
    .notification-card,
    .beneficiary-request-row,
    .doctor-current-case,
    .current-case-head,
    .current-case-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .my-request-open-btn,
    .notification-open,
    .doctor-open-btn,
    .doctor-complete-btn,
    .request-view-btn,
    .rq-accept,
    .rq-reject,
    .rq-view {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Forms */
    .doctor-form-actions,
    .consult-footer-actions,
    .auth-card.register-card .btn-row {
        grid-template-columns: 1fr !important;
    }

    .doctor-input,
    .consult-case-area,
    .clean-input,
    .form-control {
        font-size: 16px !important;
    }

    /* Tables stay scrollable instead of breaking the page */
    .admin-table-wrap,
    .requests-table-wrap,
    .admin-db-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .admin-modern-table,
    .requests-table,
    .admin-db-table {
        min-width: 760px !important;
    }

    /* Filters */
    .requests-tabs,
    .my-requests-filter,
    .doctor-history-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .requests-tabs button,
    .my-requests-filter button,
    .doctor-history-tabs button,
    .rq-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* New request */
    .consult-progress {
        grid-template-columns: 1fr !important;
    }

    .consult-specialty-grid {
        grid-template-columns: 1fr !important;
    }

    .consult-main-card {
        padding: 22px !important;
    }

    .consult-file-item {
        grid-template-columns: 1fr !important;
    }

    .consult-file-item select,
    .consult-remove-file {
        width: 100% !important;
    }

    .consult-summary-box dl {
        grid-template-columns: 1fr !important;
    }

    /* Doctor scan */
    .doctor-scanner-box {
        min-height: 360px !important;
        padding: 26px !important;
    }

    .scanner-frame {
        width: 230px !important;
        height: 230px !important;
    }

    .patient-info-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 520px) {
    .admin-db-title h1,
    .admin-home-header h1,
    .admin-list-head h1,
    .admin-pharmacy-head h1,
    .requests-head h1,
    .doctors-head h1,
    .reports-head h1,
    .create-doctor-head h1,
    .my-requests-header h1,
    .beneficiary-notifications-head h1,
    .doctor-history-modern-head h1,
    .beneficiary-hero h1,
    .doctor-hero-copy h1 {
        font-size: 29px !important;
    }

    .beneficiary-stat-card strong,
    .admin-db-stat strong,
    .admin-home-stat-card strong,
    .admin-stat-card strong,
    .report-kpi strong {
        font-size: 34px !important;
    }

    .notification-card {
        grid-template-columns: 1fr !important;
    }

    .notification-icon {
        justify-self: start !important;
    }

    .doctor-meta,
    .doctor-stats,
    .pharmacy-info,
    .admin-pharmacy-info {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   GLOBAL WhatsApp floating support button
   ========================================================= */

.whatsapp-float-btn {
    position: fixed !important;
    left: 24px !important;
    bottom: 24px !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    background: #25d366 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 18px 36px rgba(37, 211, 102, .32) !important;
    z-index: 2147483000 !important;
}

.whatsapp-float-btn:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 22px 44px rgba(37, 211, 102, .42) !important;
}

.whatsapp-float-btn svg {
    width: 34px !important;
    height: 34px !important;
    fill: currentColor !important;
}

.whatsapp-float-btn::after {
    content: "تواصل واتساب" !important;
    position: absolute !important;
    left: 76px !important;
    bottom: 10px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #ffffff !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-8px) !important;
    transition: .16s ease !important;
}

.whatsapp-float-btn:hover::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

@media (max-width: 760px) {
    .whatsapp-float-btn {
        left: 16px !important;
        bottom: 18px !important;
        width: 56px !important;
        height: 56px !important;
    }

    .whatsapp-float-btn svg {
        width: 31px !important;
        height: 31px !important;
    }

    .whatsapp-float-btn::after {
        display: none !important;
    }
}



/* ===== CharityHealth comprehensive dark-mode readability fix ===== */
.theme-dark .partner-dashboard-page,
.theme-dark .medical-reports-page { color: #f8fafc; }
.theme-dark .partner-dashboard-card,
.theme-dark .partner-dashboard-stats article,
.theme-dark .reports-card,
.theme-dark .report-kpi,
.theme-dark .reports-chart-card { background:#1e293b !important; border-color:#334155 !important; }
.theme-dark .partner-dashboard-card h1,
.theme-dark .partner-dashboard-card h2,
.theme-dark .partner-dashboard-card h3,
.theme-dark .partner-dashboard-card strong,
.theme-dark .partner-dashboard-stats strong,
.theme-dark .reports-card strong,
.theme-dark .reports-card h2 { color:#f8fafc !important; }
.theme-dark .partner-dashboard-card p,
.theme-dark .partner-dashboard-card span,
.theme-dark .partner-dashboard-stats span,
.theme-dark .reports-card p,
.theme-dark .reports-card span { color:#cbd5e1; }
.theme-dark .details-grid > div { background:#0f172a !important; border-color:#334155 !important; }
.theme-dark input,
.theme-dark select,
.theme-dark textarea { background:#0f172a; color:#f8fafc; border-color:#475569; }

/* ===== Admin operations & doctor reports ===== */
.ops-page,.doctor-reports-page{direction:rtl;padding:28px 30px 48px;display:grid;gap:22px;color:var(--app-text,#101828)}
.ops-hero,.doctor-reports-hero{border-radius:28px;padding:28px 30px;background:linear-gradient(135deg,#064e3b,#0f766e);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:22px;box-shadow:0 18px 50px rgba(15,118,110,.18)}
.ops-kicker,.doctor-reports-hero>div>span{display:block;font-size:13px;font-weight:900;color:#a7f3d0;margin-bottom:8px}.ops-hero h1,.doctor-reports-hero h1{margin:0 0 8px;font-size:34px;color:#fff}.ops-hero p,.doctor-reports-hero p{margin:0;color:rgba(255,255,255,.78);font-weight:700}
.ops-actions,.doctor-report-actions{display:flex;gap:10px;flex-wrap:wrap}.ops-btn,.doctor-report-actions button{border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;background:rgba(255,255,255,.12);color:#fff}.ops-btn.primary,.doctor-report-actions button.primary{background:#fff;color:#0f766e}.ops-btn.secondary:hover,.doctor-report-actions button:hover{background:rgba(255,255,255,.2)}
.ops-summary-grid,.doctor-report-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.ops-summary-grid article,.doctor-report-kpis article{background:var(--app-card,#fff);border:1px solid var(--app-border,#e5e7eb);border-radius:20px;padding:20px;display:grid;gap:8px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.ops-summary-grid span,.doctor-report-kpis span{color:var(--app-muted,#667085);font-size:13px;font-weight:850}.ops-summary-grid strong,.doctor-report-kpis strong{font-size:28px;color:var(--app-text,#101828)}
.ops-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.ops-tabs,.ops-view-switch,.ops-specialty-filter,.ops-day-picker{display:flex;gap:8px;flex-wrap:wrap}.ops-tabs button,.ops-view-switch button,.ops-specialty-filter button,.ops-day-picker button{border:1px solid var(--app-border,#e5e7eb);background:var(--app-card,#fff);color:var(--app-text,#101828);border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer}.ops-tabs button.active,.ops-view-switch button.active,.ops-specialty-filter button.active,.ops-day-picker button.active{background:#0f766e;color:#fff;border-color:#0f766e}.ops-tabs button span{margin-left:7px}.ops-day-picker button{display:grid;gap:3px;min-width:92px}.ops-day-picker button span{font-size:12px;opacity:.75}
.ops-table-card,.doctor-report-card{background:var(--app-card,#fff);border:1px solid var(--app-border,#e5e7eb);border-radius:24px;overflow:hidden;box-shadow:0 12px 36px rgba(15,23,42,.05)}.ops-table-head,.doctor-report-card-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--app-border,#e5e7eb)}.ops-table-head h2,.doctor-report-card-head h2{margin:0;color:var(--app-text,#101828)}.ops-table-head p{margin:5px 0 0;color:var(--app-muted,#667085);font-size:13px}.ops-count,.doctor-report-card-head span{background:#ecfdf5;color:#047857;border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px}.ops-table-wrap{overflow:auto}.ops-table{width:100%;border-collapse:collapse;min-width:980px}.ops-table th{background:var(--app-subtle,#f8fafc);color:var(--app-muted,#475467);font-size:12px;font-weight:950;padding:15px 12px;border-bottom:1px solid var(--app-border,#e5e7eb);white-space:nowrap}.ops-table th small{display:block;margin-top:4px;font-size:10px}.ops-table td{padding:14px 12px;border-bottom:1px solid var(--app-border,#eef2f6);text-align:center;color:var(--app-text,#101828);font-size:13px}.ops-table td:first-child{text-align:right}.ops-table td strong{display:block}.ops-table td small{display:block;color:var(--app-muted,#98a2b3);margin-top:4px;max-width:220px}.ops-state{display:inline-flex;align-items:center;justify-content:center;min-width:105px;padding:8px 10px;border-radius:12px;font-weight:900;font-size:11px}.ops-state.available{background:#dcfce7;color:#166534}.ops-state.near{background:#fef3c7;color:#92400e}.ops-state.full{background:#fee2e2;color:#991b1b}.ops-state.off{background:#e2e8f0;color:#64748b}.ops-loading{padding:40px;text-align:center;background:var(--app-card,#fff);border-radius:20px;color:var(--app-muted,#667085);font-weight:900}
.specialty-report-grid{padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.specialty-report-grid article{border:1px solid var(--app-border,#e5e7eb);border-radius:18px;padding:18px;background:var(--app-subtle,#f8fafc)}.specialty-report-grid h3{margin:0 0 14px;color:var(--app-text,#101828)}.specialty-report-grid article div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--app-border,#d0d5dd)}.specialty-report-grid article div:last-child{border-bottom:0}.specialty-report-grid span{color:var(--app-muted,#667085)}
html[data-theme="dark"] .ops-page,html[data-theme="dark"] .doctor-reports-page,body.dark .ops-page,body.dark .doctor-reports-page{--app-card:#1e293b;--app-subtle:#111c2f;--app-border:#334155;--app-text:#f8fafc;--app-muted:#cbd5e1}.dark .ops-table th,.dark .ops-table td{color:var(--app-text)}
@media(max-width:1100px){.ops-summary-grid,.doctor-report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.specialty-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.ops-page,.doctor-reports-page{padding:16px}.ops-hero,.doctor-reports-hero{align-items:flex-start;flex-direction:column}.ops-summary-grid,.doctor-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.specialty-report-grid{grid-template-columns:1fr}}


/* CHARITYHEALTH_REAL_DASHBOARD_FIX_V1 */
.ops-page,.doctor-reports-page{padding:34px;direction:rtl;color:var(--text-primary,#101828);background:linear-gradient(180deg,#f8fbff 0,#f5f7fb 100%);min-height:100vh;font-family:inherit}
.ops-hero,.doctor-reports-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:28px;background:linear-gradient(135deg,#fff 0,#f3fbf7 100%);border:1px solid #e7edf3;box-shadow:0 18px 50px rgba(16,24,40,.07);margin-bottom:22px}
.ops-kicker,.doctor-reports-hero>div>span{display:inline-flex;color:#0f8b62;font-size:13px;font-weight:900;margin-bottom:8px}.ops-hero h1,.doctor-reports-hero h1{margin:0;color:#101828;font-size:38px;line-height:1.15;font-weight:950}.ops-hero p,.doctor-reports-hero p{margin:10px 0 0;color:#667085;font-weight:700}.ops-actions,.doctor-report-actions{display:flex;gap:10px;flex-wrap:wrap}.ops-btn,.doctor-report-actions button{border:0;border-radius:14px;padding:13px 18px;font-weight:900;cursor:pointer}.ops-btn.primary,.doctor-report-actions .primary{background:#0ea76b;color:#fff;box-shadow:0 8px 20px rgba(14,167,107,.22)}.ops-btn.secondary,.doctor-report-actions button:not(.primary){background:#fff;color:#344054;border:1px solid #d9e2ec}
.ops-summary-grid,.doctor-report-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:20px}.ops-summary-grid article,.doctor-report-kpis article{background:#fff;border:1px solid #e7edf3;border-radius:22px;padding:20px;min-height:112px;box-shadow:0 10px 30px rgba(16,24,40,.05);position:relative;overflow:hidden}.ops-summary-grid article:before,.doctor-report-kpis article:before{content:"";position:absolute;right:0;top:0;width:5px;height:100%;background:#0ea76b}.ops-summary-grid span,.doctor-report-kpis span{display:block;color:#667085;font-size:12px;font-weight:850}.ops-summary-grid strong,.doctor-report-kpis strong{display:block;color:#101828;font-size:30px;font-weight:950;margin-top:12px}
.ops-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid #e7edf3;border-radius:22px;padding:12px;margin-bottom:14px;box-shadow:0 8px 24px rgba(16,24,40,.04)}.ops-tabs,.ops-view-switch,.ops-specialty-filter,.ops-day-picker{display:flex;gap:8px;flex-wrap:wrap}.ops-tabs button,.ops-view-switch button,.ops-specialty-filter button,.ops-day-picker button{border:1px solid #e1e8ef;background:#fff;color:#475467;border-radius:13px;padding:10px 14px;font-weight:900;cursor:pointer;transition:.2s}.ops-tabs button:hover,.ops-view-switch button:hover,.ops-specialty-filter button:hover,.ops-day-picker button:hover{transform:translateY(-1px);border-color:#9bd9c1}.ops-tabs button.active,.ops-view-switch button.active,.ops-specialty-filter button.active,.ops-day-picker button.active{background:#eafaf3;color:#087a52;border-color:#91d8bc}.ops-specialty-filter,.ops-day-picker{background:#fff;border:1px solid #e7edf3;border-radius:20px;padding:13px;margin-bottom:14px}.ops-day-picker button{display:grid;min-width:105px}.ops-day-picker span{font-size:11px;color:#98a2b3}
.ops-table-card,.doctor-report-card{background:#fff;border:1px solid #e7edf3;border-radius:26px;box-shadow:0 16px 42px rgba(16,24,40,.06);overflow:hidden;margin-top:16px}.ops-table-head,.doctor-report-card-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid #edf1f5;background:#fbfcfe}.ops-table-head h2,.doctor-report-card-head h2{margin:0;color:#101828;font-size:23px;font-weight:950}.ops-table-head p,.doctor-report-card-head span{margin:6px 0 0;color:#667085;font-size:12px;font-weight:800}.ops-count{background:#eff8ff;color:#175cd3;border-radius:999px;padding:7px 12px;font-weight:900}.ops-table-wrap{overflow:auto}.ops-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1050px}.ops-table th{position:sticky;top:0;background:#f6f8fb;color:#475467;padding:15px 13px;text-align:right;font-size:12px;font-weight:950;border-bottom:1px solid #e4e9ef;white-space:nowrap}.ops-table th small{display:block;color:#98a2b3;margin-top:4px}.ops-table td{padding:15px 13px;border-bottom:1px solid #eef2f6;color:#344054;font-size:13px;font-weight:750;vertical-align:middle}.ops-table tbody tr:hover td{background:#fbfefd}.ops-table td strong{display:block;color:#101828;font-weight:950}.ops-table td small{display:block;color:#98a2b3;margin-top:4px;max-width:220px}.ops-state{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:950;white-space:nowrap}.ops-state.available{background:#dcfae6;color:#067647}.ops-state.near{background:#fef0c7;color:#b54708}.ops-state.full{background:#fee4e2;color:#b42318}.ops-state.off{background:#eaecf0;color:#667085}.ops-loading{background:#fff;border:1px solid #e7edf3;border-radius:22px;padding:30px;text-align:center;color:#667085;font-weight:900}
.specialty-report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:20px}.specialty-report-grid article{border:1px solid #e7edf3;border-radius:20px;padding:18px;background:linear-gradient(180deg,#fff,#fbfcfe)}.specialty-report-grid h3{margin:0 0 12px;color:#101828;font-size:18px;font-weight:950}.specialty-report-grid article>div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px dashed #e5e7eb;color:#667085}.specialty-report-grid strong{color:#101828}
.audit-live-grid .admin-stat-card small{display:block;color:#98a2b3;font-size:11px;font-weight:800;margin-top:7px}
.provider-days-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px!important}.provider-day-chip{min-height:50px!important;border:1px solid #dfe6ee!important;border-radius:16px!important;background:#fff!important}.provider-day-chip:has(input:checked){background:#eafaf3!important;border-color:#70c9a4!important;box-shadow:0 0 0 3px rgba(14,167,107,.08)!important}.provider-day-chip b{color:#344054!important}.provider-discount-input-wrap{background:#fff8e7!important;border:1px solid #f5cf72!important}.provider-discount-input-wrap>span,.provider-discount-input-wrap small{color:#9a6700!important}.provider-card{transition:.2s!important}.provider-card:hover:not(.full){transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(16,24,40,.08)!important}.partner-day-card{transition:.2s!important}.partner-day-card:hover:not(.full){transform:translateY(-2px)!important}.partner-day-card.selected{background:#eafaf3!important;border-color:#70c9a4!important}
html.dark .ops-page,body.dark .ops-page,[data-theme="dark"] .ops-page,html.dark .doctor-reports-page,body.dark .doctor-reports-page,[data-theme="dark"] .doctor-reports-page{background:#111827;color:#f8fafc}.dark .ops-hero,.dark .doctor-reports-hero,.dark .ops-summary-grid article,.dark .doctor-report-kpis article,.dark .ops-toolbar,.dark .ops-specialty-filter,.dark .ops-day-picker,.dark .ops-table-card,.dark .doctor-report-card,[data-theme="dark"] .ops-hero,[data-theme="dark"] .doctor-reports-hero,[data-theme="dark"] .ops-summary-grid article,[data-theme="dark"] .doctor-report-kpis article,[data-theme="dark"] .ops-toolbar,[data-theme="dark"] .ops-table-card,[data-theme="dark"] .doctor-report-card{background:#1f2937!important;border-color:#344054!important;color:#f8fafc!important}.dark .ops-hero h1,.dark .doctor-reports-hero h1,.dark .ops-summary-grid strong,.dark .doctor-report-kpis strong,.dark .ops-table-head h2,.dark .doctor-report-card-head h2,.dark .ops-table td strong,[data-theme="dark"] .ops-hero h1,[data-theme="dark"] .doctor-reports-hero h1,[data-theme="dark"] .ops-summary-grid strong,[data-theme="dark"] .doctor-report-kpis strong,[data-theme="dark"] .ops-table td strong{color:#f8fafc!important}.dark .ops-table-head,.dark .doctor-report-card-head,.dark .ops-table th,[data-theme="dark"] .ops-table-head,[data-theme="dark"] .doctor-report-card-head,[data-theme="dark"] .ops-table th{background:#182230!important;border-color:#344054!important;color:#d0d5dd!important}.dark .ops-table td,[data-theme="dark"] .ops-table td{color:#d0d5dd!important;border-color:#344054!important}.dark .ops-table tbody tr:hover td,[data-theme="dark"] .ops-table tbody tr:hover td{background:#273449!important}.dark .ops-tabs button,.dark .ops-view-switch button,.dark .ops-specialty-filter button,.dark .ops-day-picker button,[data-theme="dark"] .ops-tabs button,[data-theme="dark"] .ops-view-switch button,[data-theme="dark"] .ops-specialty-filter button,[data-theme="dark"] .ops-day-picker button{background:#273449!important;color:#d0d5dd!important;border-color:#475467!important}.dark .ops-tabs button.active,.dark .ops-view-switch button.active,.dark .ops-specialty-filter button.active,.dark .ops-day-picker button.active,[data-theme="dark"] .ops-tabs button.active,[data-theme="dark"] .ops-view-switch button.active,[data-theme="dark"] .ops-specialty-filter button.active,[data-theme="dark"] .ops-day-picker button.active{background:#0f513f!important;color:#d1fadf!important;border-color:#2e9071!important}
@media(max-width:1200px){.ops-summary-grid,.doctor-report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.specialty-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.ops-page,.doctor-reports-page{padding:16px}.ops-hero,.doctor-reports-hero{align-items:flex-start;flex-direction:column}.ops-hero h1,.doctor-reports-hero h1{font-size:30px}.ops-summary-grid,.doctor-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-toolbar{align-items:stretch;flex-direction:column}.provider-days-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.specialty-report-grid{grid-template-columns:1fr}}

/* ===== FINAL DARK MODE FIX ===== */

.theme-dark {
    --bg-main:#0b1220;
    --card-bg:#162033;
    --text-main:#f8fafc;
    --text-muted:#cbd5e1;
    --border:#334155;
}

.theme-dark body,
.theme-dark {
    background:#0b1220 !important;
    color:#f8fafc !important;
}

.theme-dark .card,
.theme-dark .stat-card,
.theme-dark .dashboard-card,
.theme-dark .table-container {
    background:#162033 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark p,
.theme-dark span,
.theme-dark label {
    color:#f8fafc !important;
}

.theme-dark table {
    background:#162033 !important;
    color:#fff !important;
}

.theme-dark th {
    background:#0f172a !important;
    color:#fff !important;
}

.theme-dark td {
    color:#e2e8f0 !important;
    border-color:#334155 !important;
}

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background:#111827 !important;
    color:#fff !important;
    border-color:#475569 !important;
}



/* ===== FINAL DARK MODE FIX ===== */

.theme-dark {
    --bg:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#cbd5e1;
}


.theme-dark body,
.theme-dark .ops-page,
.theme-dark .portal-page {
    background:#020617 !important;
    color:#f8fafc !important;
}


.theme-dark .ops-hero,
.theme-dark .ops-table-card,
.theme-dark .status-timeline,
.theme-dark .success-card,
.theme-dark .partner-card {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}


.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark strong,
.theme-dark label {
    color:#f8fafc !important;
}


.theme-dark p,
.theme-dark span,
.theme-dark small {
    color:#cbd5e1 !important;
}


.theme-dark table,
.theme-dark th,
.theme-dark td {
    background:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
}


.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background:#020617 !important;
    color:#ffffff !important;
    border-color:#475569 !important;
}


.theme-dark button {
    color:#fff;
}




/* ===== CharityHealth Operations Final Theme ===== */

.ops-page{
    background:#f5f7fb!important;
    color:#101828!important;
}

.ops-table-card,
.ops-hero,
.ops-toolbar,
.ops-specialty-filter,
.ops-day-picker{
    background:#ffffff!important;
    border:1px solid #e4e7ec!important;
    color:#101828!important;
}


.ops-table th{
    background:#f2f4f7!important;
    color:#344054!important;
}

.ops-table td{
    color:#344054!important;
}


.ops-table td strong{
    color:#101828!important;
}


.ops-state.available{
    background:#dcfae6!important;
    color:#067647!important;
}

.ops-state.near{
    background:#fff1b8!important;
    color:#b54708!important;
}

.ops-state.full{
    background:#fee4e2!important;
    color:#b42318!important;
}

.ops-state.off{
    background:#eaecf0!important;
    color:#475467!important;
}


/* ===== DARK MODE ===== */

html.dark .ops-page,
body.dark .ops-page,
[data-theme="dark"] .ops-page{
    background:#0f172a!important;
    color:#f8fafc!important;
}


html.dark .ops-table-card,
html.dark .ops-hero,
html.dark .ops-toolbar,
html.dark .ops-specialty-filter,
html.dark .ops-day-picker,
body.dark .ops-table-card,
body.dark .ops-hero,
body.dark .ops-toolbar,
body.dark .ops-specialty-filter,
body.dark .ops-day-picker,
[data-theme="dark"] .ops-table-card,
[data-theme="dark"] .ops-hero,
[data-theme="dark"] .ops-toolbar,
[data-theme="dark"] .ops-specialty-filter,
[data-theme="dark"] .ops-day-picker{
    background:#1e293b!important;
    border-color:#334155!important;
}


html.dark .ops-table th,
body.dark .ops-table th,
[data-theme="dark"] .ops-table th{
    background:#111827!important;
    color:#e2e8f0!important;
}


html.dark .ops-table td,
body.dark .ops-table td,
[data-theme="dark"] .ops-table td{
    color:#e2e8f0!important;
    border-color:#334155!important;
}


html.dark .ops-table td strong,
body.dark .ops-table td strong,
[data-theme="dark"] .ops-table td strong{
    color:#ffffff!important;
}




/* ===== FINAL ADMIN DARK/LIGHT FIX ===== */


/* cards */
.admin-card,
.provider-card,
.profile-card,
.ops-table-card,
.doctor-report-card,
.audit-card {
    background:#ffffff;
    color:#101828;
    border:1px solid #e4e7ec;
}


/* inputs */
input,
textarea,
select {
    background:#ffffff!important;
    color:#101828!important;
    border-color:#d0d5dd!important;
}


/* labels */
label,
.form-label {
    color:#475467!important;
}


/* ===== DARK ===== */

html.dark input,
body.dark input,
[data-theme="dark"] input,
html.dark textarea,
body.dark textarea,
[data-theme="dark"] textarea,
html.dark select,
body.dark select,
[data-theme="dark"] select {

    background:#1e293b!important;
    color:#ffffff!important;
    border-color:#475569!important;
}


html.dark .admin-card,
html.dark .provider-card,
html.dark .profile-card,
html.dark .ops-table-card,
html.dark .doctor-report-card,
html.dark .audit-card,

body.dark .admin-card,
body.dark .provider-card,
body.dark .profile-card,
body.dark .ops-table-card,
body.dark .doctor-report-card,
body.dark .audit-card,

[data-theme="dark"] .admin-card,
[data-theme="dark"] .provider-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .ops-table-card,
[data-theme="dark"] .doctor-report-card,
[data-theme="dark"] .audit-card {

background:#1e293b!important;
color:#f8fafc!important;
border-color:#334155!important;

}


/* headings */
html.dark h1,
html.dark h2,
html.dark h3,
body.dark h1,
body.dark h2,
body.dark h3,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {

color:#ffffff!important;

}


/* muted text */
html.dark p,
html.dark span,
body.dark p,
body.dark span,
[data-theme="dark"] p,
[data-theme="dark"] span {

color:#cbd5e1;

}


/* tables */

html.dark table th,
body.dark table th,
[data-theme="dark"] table th {

background:#111827!important;
color:#ffffff!important;

}


html.dark table td,
body.dark table td,
[data-theme="dark"] table td {

background:#1e293b!important;
color:#e2e8f0!important;
border-color:#334155!important;

}

/* CHARITYHEALTH_RESPONSIVE_V2_START */
/* Global responsive safety */
html,
body,
#app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

main,
.page,
.content,
.main-content,
.layout-content,
.portal-content,
.app-content,
.doctors-page,
.partner-admin-page,
.notifications-page,
.notification-page,
.manual-page,
.ops-page,
.admin-page,
.dashboard-page,
.provider-page,
.beneficiary-page,
.partner-queue-page {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Common responsive grids */
.doctors-grid,
.providers-grid,
.provider-grid,
.partner-grid,
.partners-grid,
.cards-grid,
.dashboard-grid,
.requests-grid,
.request-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)) !important;
    gap: clamp(12px, 1.8vw, 22px) !important;
    align-items: stretch !important;
}

.doctor-card,
.provider-card,
.partner-card,
.dashboard-card,
.notification-card,
.request-card,
.content-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}

.doctor-card *,
.provider-card *,
.partner-card *,
.notification-card *,
.request-card * {
    min-width: 0;
}

.doctor-license,
.doctor-address,
.doctor-schedule strong,
.provider-card strong,
.partner-card strong,
.notification-card,
.notification-item,
td,
th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-wrapper,
.table-responsive,
.ops-table-wrap,
.records-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Manual service capacity component: desktop */
.manual-capacity-summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(64px, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
}

.manual-capacity-summary > div {
    min-width: 0 !important;
}

.manual-capacity-summary > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
}

/* Notification pages */
.notifications-page,
.notification-page,
.beneficiary-notifications,
.notifications-center-page {
    width: min(100%, 1200px) !important;
    margin-inline: auto !important;
    padding-inline: clamp(10px, 3vw, 28px) !important;
}

.notifications-hero,
.notification-hero,
.notifications-header,
.notifications-summary,
.notification-summary {
    width: 100% !important;
    max-width: 100% !important;
}

.notifications-stats,
.notification-stats,
.notifications-summary-grid,
.notification-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: 12px !important;
}

.notifications-hero h1,
.notification-hero h1,
.notifications-header h1 {
    font-size: clamp(30px, 6vw, 64px) !important;
    line-height: 1.05 !important;
    overflow-wrap: normal !important;
}

/* Keep floating widgets away from page content */
.whatsapp-float,
.whatsapp-button,
.floating-whatsapp {
    max-width: 58px !important;
    max-height: 58px !important;
}

@@media (max-width: 1024px) {
    .doctors-page,
    .partner-admin-page,
    .notifications-page,
    .notification-page,
    .manual-page,
    .ops-page,
    .admin-page,
    .dashboard-page,
    .provider-page,
    .beneficiary-page,
    .partner-queue-page {
        padding: 16px !important;
    }

    .doctors-grid,
    .providers-grid,
    .provider-grid,
    .partner-grid,
    .partners-grid,
    .cards-grid,
    .dashboard-grid,
    .requests-grid,
    .request-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
    }
}

@@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        font-size: 14px;
    }

    .doctors-page,
    .partner-admin-page,
    .notifications-page,
    .notification-page,
    .manual-page,
    .ops-page,
    .admin-page,
    .dashboard-page,
    .provider-page,
    .beneficiary-page,
    .partner-queue-page {
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .doctors-grid,
    .providers-grid,
    .provider-grid,
    .partner-grid,
    .partners-grid,
    .cards-grid,
    .dashboard-grid,
    .requests-grid,
    .request-grid,
    .notifications-stats,
    .notification-stats,
    .notifications-summary-grid,
    .notification-summary-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .doctor-card,
    .provider-card,
    .partner-card,
    .dashboard-card,
    .notification-card,
    .request-card,
    .content-card {
        border-radius: 18px !important;
        padding: 15px !important;
    }

    .doctor-card-top,
    .provider-card-top,
    .partner-card-top,
    .notifications-header,
    .notifications-hero,
    .notification-hero,
    .partner-admin-hero,
    .ops-hero,
    .manual-page > header,
    .partner-queue-head {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .doctor-main-info h2,
    .provider-card h2,
    .partner-card h2 {
        font-size: clamp(20px, 6vw, 26px) !important;
    }

    .notifications-hero h1,
    .notification-hero h1,
    .notifications-header h1 {
        font-size: clamp(32px, 12vw, 48px) !important;
        line-height: 1.05 !important;
        margin-block: 8px !important;
    }

    .notifications-hero p,
    .notification-hero p,
    .notifications-header p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .doctor-meta,
    .doctor-schedule,
    .doctor-stats,
    .provider-meta,
    .provider-stats,
    .partner-meta,
    .partner-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .doctor-actions,
    .provider-actions,
    .partner-actions,
    .ops-actions,
    .records-head,
    .page-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .doctor-actions button,
    .doctor-actions a,
    .provider-actions button,
    .provider-actions a,
    .partner-actions button,
    .partner-actions a,
    .ops-actions button,
    .page-actions button,
    .page-actions a {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .manual-capacity-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .manual-capacity-summary > div {
        padding: 9px 5px !important;
    }

    .manual-capacity-summary span {
        font-size: 10px !important;
    }

    .manual-capacity-summary strong {
        font-size: 18px !important;
    }

    .manual-capacity-summary > button {
        grid-column: 1 / -1 !important;
        min-height: 46px !important;
        font-size: 13px !important;
    }

    table {
        min-width: 680px;
    }
}

@@media (max-width: 480px) {
    .doctors-page,
    .partner-admin-page,
    .notifications-page,
    .notification-page,
    .manual-page,
    .ops-page,
    .admin-page,
    .dashboard-page,
    .provider-page,
    .beneficiary-page,
    .partner-queue-page {
        padding: 8px !important;
    }

    .doctor-card,
    .provider-card,
    .partner-card,
    .dashboard-card,
    .notification-card,
    .request-card,
    .content-card {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .doctor-meta,
    .doctor-schedule,
    .doctor-stats,
    .provider-meta,
    .provider-stats,
    .partner-meta,
    .partner-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .manual-capacity-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .notifications-hero,
    .notification-hero,
    .notifications-header {
        padding: 16px !important;
    }

    .notifications-hero h1,
    .notification-hero h1,
    .notifications-header h1 {
        font-size: clamp(30px, 13vw, 42px) !important;
    }
}
/* CHARITYHEALTH_RESPONSIVE_V2_END */