@font-face {
    font-family: 'Noor Sultan';
    src: url('fonts/NoorSultan.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Noor Sultan';
    src: url('fonts/NoorSultan-Bold.ttf') format('truetype'),
         url('fonts/NoorSultan.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Sultan Medium';
    src: url('fonts/NoorSultan.ttf') format('truetype'),
         url('fonts/Sultan-Medium.ttf') format('truetype'),
         url('fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Sultan Medium';
    src: url('fonts/NoorSultan-Bold.ttf') format('truetype'),
         url('fonts/Sultan-Bold.ttf') format('truetype'),
         url('fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
:root {
    /* Gold brand */
    --primary: #af7813;
    --primary-dark: #8d6010;
    --primary-light: #c99420;
    --gold-soft: rgba(175, 120, 19, 0.12);
    --gold-rich: #9a6b0f;
    --gold-glow: rgba(175, 120, 19, 0.25);
    /* Supporting */
    --charcoal: #1e293b;
    --navy: #0f172a;
    --black: #1a1a1a;
    --gray-900: #212529;
    --gray-700: #495057;
    --gray-500: #6c757d;
    --gray-300: #dee2e6;
    --gray-100: #f1f3f5;
    --surface: #f8f9fa;
    --white: #ffffff;
    --success: #16a34a;
    --alert: #dc2626;
    --muted-orange: #ea580c;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.08);
    --shadow-card: 0 4px 20px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
    --shadow-card-hover: 0 12px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
    --transition-ui: 0.2s ease;
    --font-en: 'Inter', 'Poppins', 'Plus Jakarta Sans', sans-serif;
    --font-ar: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif;
}

html, body {
    font-family: var(--font-en);
    margin: 0;
    height: 100%;
    background: var(--surface);
    color: var(--gray-900);
}

[dir="rtl"] body,
[dir="rtl"] .mud-typography {
    font-family: var(--font-ar);
}

/* Top header - light bg, greeting, gold hover glow */
.appbar-modern {
    background: var(--white) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid var(--gray-300) !important;
}

.appbar-modern .mud-icon-button,
.appbar-modern .mud-typography {
    color: var(--gray-900) !important;
}

.appbar-modern .mud-icon-button:hover {
    background: var(--gold-soft) !important;
    color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--gold-glow);
    transition: background var(--transition-ui), color var(--transition-ui), box-shadow var(--transition-ui);
}

.appbar-greeting {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}
.appbar-greeting .accent { color: var(--primary); }

.appbar-top { padding-inline-end: 0.5rem; }
.appbar-brand { display: flex; align-items: center; }
.appbar-search-wrap { display: flex; align-items: center; gap: 0.25rem; }
.appbar-search .mud-input-root { font-size: 0.9rem; }
.appbar-search .mud-input-outlined { border-radius: var(--radius-md); background: var(--gray-100); }
.appbar-search .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-md); }
.mud-theme-dark .appbar-search .mud-input-outlined { background: #2d2d2d; }
.appbar-search-btn { flex-shrink: 0; }
.appbar-mail-search .mud-input-root { font-size: 0.88rem; }
.appbar-search-hit { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.15rem 0; width: 100%; }
.appbar-search-hit-top { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.appbar-search-hit-chip { height: 22px !important; font-size: 0.72rem !important; }
.appbar-search-hit-ref { font-weight: 700; font-size: 0.85rem; color: var(--text-main); }
.appbar-search-hit-date { font-size: 0.75rem; color: var(--text-muted); margin-inline-start: auto; }
.appbar-search-hit-sub { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.searchable-employee-chips { gap: 0.35rem; }
.appbar-actions { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
.appbar-badge-wrap { margin-inline: 0.1rem; }
.app-notifications-menu .mud-menu { min-width: 320px; max-width: 380px; }
.app-notifications-panel { min-width: 300px; max-width: 360px; padding: 0.25rem 0; }
.app-notifications-title { padding: 0.5rem 1rem 0.35rem; font-weight: 700; }
.app-notification-item { align-items: flex-start !important; white-space: normal !important; }
.app-notification-body { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; }
.app-notification-title { font-weight: 600; line-height: 1.35; }
.appbar-icon { border-radius: 50% !important; }
.appbar-user-btn { text-transform: none !important; }
.appbar-user {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.mud-theme-dark .appbar-modern {
    background: #1a1a1a !important;
    border-bottom-color: #333 !important;
}

.mud-theme-dark .appbar-modern .mud-icon-button,
.mud-theme-dark .appbar-modern .mud-typography {
    color: #e0e0e0 !important;
}

.mud-theme-dark .appbar-modern .mud-icon-button:hover {
    background: var(--gold-glow) !important;
    color: var(--primary-light) !important;
}

.mud-theme-dark .appbar-user { color: #b0b0b0; }
.mud-theme-dark .appbar-greeting { color: #e0e0e0; }
.mud-theme-dark .appbar-greeting .accent { color: var(--primary-light); }

/* Logo / brand */
.brand-logo {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--black);
}

.brand-logo .accent {
    color: var(--primary);
}

/* CTA-style button in header */
.btn-cta {
    background: var(--primary) !important;
    color: white !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-cta:hover {
    background: var(--primary-dark) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Auth / login wrap - spacious, modern */
.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    padding: 2rem;
}

.mud-theme-dark .auth-wrap {
    background: linear-gradient(160deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
}

/* Login card */
.login-card {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
    max-width: 420px;
    width: 100%;
}
.login-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}
/* Login page: organization logo — transparent PNG, landscape */
.login-logo-wrap img.company-logo,
.login-logo-wrap img.login-logo {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: min(200px, 78vw) !important;
    max-height: 72px !important;
    object-fit: contain;
    background: transparent !important;
}
.hero-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Hero section on home */
.hero-section {
    padding: 3rem 0 4rem;
    text-align: center;
}

.hero-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.hero-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 0.75rem;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: var(--gray-700);
    max-width: 540px;
    margin: 0 auto 2rem;
}
.mud-theme-dark .hero-title { color: #e0e0e0; }
.mud-theme-dark .hero-subtitle { color: #b0b0b0; }
.mud-theme-dark .hero-tag { color: var(--primary-light); }

/* Dashboard cards - modern, rounded, soft shadow */
.dashboard-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    height: 100%;
    border: none !important;
    background: var(--white) !important;
}

.dashboard-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-3px);
}

.dashboard-card .mud-card-content {
    padding: 1.5rem !important;
}

.dashboard-card .card-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--black);
    margin-bottom: 0.35rem;
}

.dashboard-card .card-desc {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.dashboard-card .mud-button-root {
    border-radius: var(--radius-md);
    font-weight: 600;
    text-transform: none;
}
.mud-theme-dark .dashboard-card {
    background: #1e1e1e !important;
}
.mud-theme-dark .dashboard-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.3) !important; }
.mud-theme-dark .dashboard-card .card-title { color: #e0e0e0; }
.mud-theme-dark .dashboard-card .card-desc { color: #b0b0b0; }

/* KPI cards - white cards, progress circle, one primary highlight (like image) */
.kpi-card {
    border-radius: var(--radius-lg) !important;
    overflow: visible;
    border: none !important;
    position: relative;
    min-height: 140px;
    background: var(--white) !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.kpi-card:hover { box-shadow: var(--shadow-card-hover) !important; }

.kpi-card .kpi-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--black); }
.kpi-card .kpi-label { font-size: 0.9rem; color: var(--gray-500); margin-top: 0.25rem; }
.kpi-card .kpi-icon { color: var(--primary) !important; opacity: 0.9; margin-bottom: 0.2rem; display: block; }
.kpi-card .kpi-view { font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-top: 0.5rem; }
.kpi-card .mud-card-content { padding: 1.25rem 1.5rem !important; display: flex; flex-direction: column; }
.kpi-card .kpi-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kpi-card .kpi-main { flex: 1; min-width: 0; }
.kpi-card .kpi-progress-wrap { flex-shrink: 0; }

/* Highlighted KPI - soft gold gradient, premium */
.kpi-card.kpi-highlight {
    background: linear-gradient(135deg, #d4a84b 0%, #af7813 45%, #8d6010 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(175, 120, 19, 0.25) !important;
}
.kpi-card.kpi-highlight:hover {
    box-shadow: 0 12px 32px rgba(175, 120, 19, 0.3) !important;
}
.kpi-card.kpi-highlight .kpi-value,
.kpi-card.kpi-highlight .kpi-label,
.kpi-card.kpi-highlight .kpi-icon,
.kpi-card.kpi-highlight .kpi-view { color: inherit !important; }
.kpi-card.kpi-highlight .kpi-view { color: rgba(255,255,255,.95) !important; }
.kpi-card.kpi-highlight .kpi-progress-wrap .mud-progress-circular .mud-progress-circular-circle { stroke: rgba(255,255,255,.45) !important; }
.kpi-card.kpi-highlight .kpi-progress-wrap .mud-progress-circular .mud-progress-circular-svg { color: rgba(255,255,255,.3) !important; }
.kpi-card .kpi-view { color: var(--primary); text-decoration: none; transition: opacity var(--transition-ui); }
.kpi-card .kpi-view:hover { text-decoration: underline; opacity: 0.9; }
.kpi-card.kpi-highlight .kpi-view:hover { text-decoration: underline; }

.mud-theme-dark .kpi-card { background: #1e1e1e !important; }
.mud-theme-dark .kpi-card .kpi-value { color: #e0e0e0; }
.mud-theme-dark .kpi-card .kpi-label { color: #b0b0b0; }
.mud-theme-dark .kpi-card.kpi-highlight {
    background: linear-gradient(135deg, #c99420 0%, #af7813 50%, #8d6010 100%) !important;
    box-shadow: 0 8px 24px rgba(175, 120, 19, 0.35) !important;
}

/* Progress ring card - gold accent */
.progress-ring-card .mud-progress-circular .mud-progress-circular-svg { color: var(--primary) !important; }
.progress-ring-card .kpi-value { color: var(--gold-rich) !important; }

/* Activity feed - tabs gold underline, list cards */
.activity-tabs .mud-tab.mud-tab-active {
    color: var(--primary) !important;
    font-weight: 600;
}
.activity-tabs .mud-tabs-slider { background: var(--primary) !important; }
.activity-item { transition: background var(--transition-ui); }
.activity-item:hover { background: var(--gold-soft) !important; }
.activity-item.positive .activity-delta { color: var(--success) !important; }
.activity-item.negative .activity-delta { color: var(--alert) !important; }

/* Card transitions - lift + shadow */
.dashboard-card,
.quick-access-card,
.kpi-card {
    transition: transform var(--transition-ui), box-shadow var(--transition-ui);
}
.dashboard-card:hover,
.quick-access-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(175,120,19,.12) !important;
}
.kpi-card:hover { transform: translateY(-3px); }
.kpi-card.kpi-highlight:hover { transform: translateY(-3px); }

/* Dashboard home - premium layout */
.dashboard-hero {
    padding: 0 0 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-300);
}
.mud-theme-dark .dashboard-hero { border-color: rgba(255,255,255,.08); }
.dashboard-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}
.dashboard-tagline {
    font-size: 0.95rem;
    color: var(--gray-500);
    margin: 0;
}
.mud-theme-dark .dashboard-page-title { color: #e0e0e0; }
.mud-theme-dark .dashboard-tagline { color: #b0b0b0; }

.dashboard-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -.01em;
    color: var(--gray-900);
}
.mud-theme-dark .dashboard-section-title { color: #e0e0e0; }
.quick-access-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    border: none !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-card) !important;
}
.quick-access-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover) !important; }
.quick-access-card .mud-card-content { padding: 1.25rem 1.5rem !important; }
.quick-access-card .card-title { font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.quick-access-card .card-desc { font-size: .85rem; color: var(--gray-500); margin-bottom: 1rem; }
.mud-theme-dark .quick-access-card { background: #1e1e1e !important; }
.mud-theme-dark .quick-access-card .card-desc { color: #b0b0b0; }
.mud-theme-dark .quick-access-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.3) !important; }

.chart-card { min-height: 200px; }
.chart-card .mud-chart { width: 100%; }

/* Page container */
.page-modern {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 1.5rem;
}
.mud-theme-dark .page-title { color: #aaacae !important; }
.mud-theme-dark .page-title.mud-typography { color: #aaacae !important; }
.mud-theme-dark .page-modern { color: #e0e0e0; }

/* Inbox rows forwarded by current user — keep visible with highlight */
.inbox-row-forwarded > td {
    background: #fff8e6 !important;
}
.inbox-row-forwarded:hover > td {
    background: #fff3d4 !important;
}
.mud-theme-dark .inbox-row-forwarded > td {
    background: rgba(201, 162, 39, 0.14) !important;
}
.mud-theme-dark .inbox-row-forwarded:hover > td {
    background: rgba(201, 162, 39, 0.22) !important;
}
.inbox-row-from-branch > td {
    background: #fff3e8 !important;
}
.inbox-row-from-branch:hover > td {
    background: #ffe8d4 !important;
}
.mud-theme-dark .inbox-row-from-branch > td {
    background: rgba(230, 126, 34, 0.15) !important;
}
.mud-theme-dark .inbox-row-from-branch:hover > td {
    background: rgba(230, 126, 34, 0.22) !important;
}
.inbox-row-previous-manager > td {
    background: #f3eef8 !important;
}
.inbox-row-previous-manager:hover > td {
    background: #ebe3f5 !important;
}
.mud-theme-dark .inbox-row-previous-manager > td {
    background: rgba(120, 80, 160, 0.16) !important;
}
.mud-theme-dark .inbox-row-previous-manager:hover > td {
    background: rgba(120, 80, 160, 0.24) !important;
}

/* Content cards (tables, etc.) */
.content-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
    border: none !important;
    background: var(--white) !important;
}
.mud-theme-dark .content-card {
    background: #1e1e1e !important;
}

.content-card .mud-table-container {
    border-radius: var(--radius-lg);
}

/* صفحة النماذج — شريط بحث وإنشاء */
.templates-page { padding-bottom: 1.5rem; }
.templates-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.templates-search-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.templates-search {
    min-width: 240px;
    max-width: 320px;
}
.templates-search .mud-input-outlined {
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.templates-search .mud-input-slot {
    font-size: 0.95rem;
}
.templates-btn-search {
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
}
.templates-btn-create {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding-inline: 1.25rem !important;
}
.templates-table-card {
    border-radius: var(--radius-lg) !important;
}
.mud-theme-dark .templates-search .mud-input-outlined { background: rgba(255,255,255,.06); }

/* صفحة صلاحيات الدور — بطاقات الصلاحيات */
.role-permissions-page { padding-bottom: 2rem; }
.role-permissions-header { margin-bottom: 1.5rem; }
.role-permissions-header .page-title { margin: 0.25rem 0 0 0; }

/* كتلة اسم الدور (مثل الصورة) */
.perm-role-info {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: var(--white) !important;
    margin-bottom: 1.5rem;
}
.perm-role-info-inner { padding: 1rem 1.25rem; }
.perm-role-label { color: var(--gray-600); margin: 0 0 0.25rem 0; font-size: 0.9rem; }
.perm-role-value { margin: 0; font-weight: 600; color: var(--gray-900); }
.mud-theme-dark .perm-role-info { background: #1e1e1e !important; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.mud-theme-dark .perm-role-label { color: #b0b0b0; }
.mud-theme-dark .perm-role-value { color: #f0f0f0; }

.role-permissions-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}
.mud-theme-dark .role-permissions-actions { border-top-color: rgba(255,255,255,.08); }

/* بطاقات الصلاحيات — ظلال وتأثيرات احترافية */
.perm-cards-grid { margin-top: 0.5rem; }
.perm-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    border: none !important;
    background: var(--white) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    transition: transform 0.2s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.perm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
}
.mud-theme-dark .perm-card {
    background: #1e1e1e !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
}
.mud-theme-dark .perm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.2);
}
.perm-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}
.mud-theme-dark .perm-card-header {
    background: rgba(255,255,255,.06);
    border-bottom-color: rgba(255,255,255,.08);
}
.perm-card-icon {
    color: var(--primary);
    font-size: 1.5rem !important;
}
.perm-card-title {
    font-weight: 600;
    margin: 0;
    color: var(--gray-900);
}
.mud-theme-dark .perm-card-title { color: #e8e8e8; }
.perm-card-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
}
.perm-checkbox { margin: 0; }
.perm-checkbox .mud-checkbox-label { font-size: 0.95rem; }

/* Main content area */
.main-content-modern {
    background: linear-gradient(180deg, #f0f2f5 0%, #e8eaef 100%) !important;
    padding: 2rem 1.5rem !important;
    min-height: calc(100vh - 64px);
}
.layout-wrap.mud-theme-dark {
    background: #121212;
    min-height: 100vh;
}
.mud-theme-dark .main-content-modern {
    background: linear-gradient(180deg, #0f0f0f 0%, #121212 100%) !important;
}

/* Full-page loading: spinner only — no sidebar / app bar */
.layout-page-loading {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(180deg, #f0f2f5 0%, #e8eaef 100%) !important;
}
.mud-theme-dark .layout-page-loading {
    background: linear-gradient(180deg, #0f0f0f 0%, #121212 100%) !important;
}
.layout-page-loading-stack {
    min-height: 40vh;
}
.layout-page-loading-hidden {
    display: none !important;
}

/* Prevent cards/KPIs overlapping sidebar when switching RTL/LTR */
.layout-wrap.drawer-open[dir="ltr"] .mud-main-content {
    margin-left: 280px !important;
    margin-right: 0 !important;
}
.layout-wrap.drawer-open[dir="rtl"] .mud-main-content {
    margin-right: 280px !important;
    margin-left: 0 !important;
}
.layout-wrap.drawer-open.sidebar-mini[dir="ltr"] .mud-main-content {
    margin-left: 72px !important;
    margin-right: 0 !important;
}
.layout-wrap.drawer-open.sidebar-mini[dir="rtl"] .mud-main-content {
    margin-right: 72px !important;
    margin-left: 0 !important;
}

/* Organization logo — transparent PNG (NUPA) */
.company-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    background: transparent;
}
.company-logo-wrap img.company-logo {
    display: block;
    object-fit: contain;
    object-position: center;
    background: transparent;
}
.company-logo-small { height: 44px; width: auto; max-width: 120px; }
.company-logo-medium { height: 72px; width: auto; max-width: 180px; }
.company-logo-large { height: 120px; width: auto; max-width: 320px; }

/* App sidebar - white gradient (white + subtle gold + subtle black), modern shadows */
.app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    gap: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fefdf9 12%, #fbf8f2 28%, #f7f3ec 48%, #f2ede5 70%, #ede8e0 100%) !important;
    transition: width var(--transition-ui), background var(--transition-ui);
    box-shadow: 4px 0 24px rgba(0,0,0,.08), 2px 0 12px rgba(0,0,0,.04);
}
.layout-wrap[dir="rtl"] .app-sidebar {
    box-shadow: -4px 0 24px rgba(0,0,0,.08), -2px 0 12px rgba(0,0,0,.04);
}
.mud-theme-dark .app-sidebar {
    background: linear-gradient(180deg, #1e1e1e 0%, #252420 25%, #2a2825 50%, #262422 75%, #1f1e1c 100%) !important;
    box-shadow: 4px 0 28px rgba(0,0,0,.25);
}
.layout-wrap.mud-theme-dark[dir="rtl"] .app-sidebar {
    box-shadow: -4px 0 28px rgba(0,0,0,.25);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.mud-theme-dark .sidebar-header { border-bottom-color: rgba(255,255,255,.08); }

.sidebar-logo { flex-shrink: 0; }
.sidebar-logo .company-logo-wrap { display: flex; background: transparent; }
.sidebar-logo .company-logo-wrap img { border-radius: 0; background: transparent; }
.sidebar-logo img.company-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 130px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain;
}

.sidebar-brand-text {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}
.sidebar-brand-text .accent { color: var(--primary); }
.mud-theme-dark .sidebar-brand-text { color: #e0e0e0; }
.mud-theme-dark .sidebar-brand-text .accent { color: var(--primary-light); }

.sidebar-toggle {
    flex-shrink: 0;
    margin-inline-start: auto !important;
    color: var(--gray-500) !important;
    transition: color var(--transition-ui), background var(--transition-ui);
}
.sidebar-toggle:hover {
    color: var(--primary) !important;
    background: var(--gold-soft) !important;
}
.mud-theme-dark .sidebar-toggle { color: rgba(255,255,255,.6); }
.mud-theme-dark .sidebar-toggle:hover { color: var(--primary-light); background: var(--gold-glow); }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0.75rem 0.5rem;
}
.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    padding: 0.75rem 1rem 0.35rem;
}
.mud-theme-dark .sidebar-section-label { color: #b8b8b8 !important; }

.sidebar-nav-menu { padding: 0 !important; }
.sidebar-nav-menu .mud-nav-group { padding: 0 !important; }
.sidebar-nav-menu .mud-nav-group > .mud-nav-group-title {
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
}
.mud-theme-dark .sidebar-nav-menu .mud-nav-group > .mud-nav-group-title { color: #f0f0f0 !important; }
.mud-theme-dark .sidebar-nav-menu .mud-nav-group > .mud-nav-group-title .mud-nav-group-title-content { color: inherit !important; }

.sidebar-nav-menu .mud-nav-link {
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.15rem;
    padding-inline: 1rem !important;
    min-height: 44px;
    color: var(--gray-700) !important;
    transition: background var(--transition-ui), color var(--transition-ui), box-shadow var(--transition-ui);
}
.sidebar-nav-menu .mud-nav-link:hover {
    background: var(--gold-soft) !important;
    color: var(--gray-900) !important;
    box-shadow: 0 0 0 1px rgba(175, 120, 19, 0.15);
}
.sidebar-nav-menu .mud-nav-link.mud-nav-link-active {
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.sidebar-nav-menu .mud-nav-link.mud-nav-link-active .mud-icon-root { color: inherit !important; }
.mud-theme-dark .sidebar-nav-menu .mud-nav-link { color: #f0f0f0 !important; }
.mud-theme-dark .sidebar-nav-menu .mud-nav-link .mud-nav-link-text { color: inherit !important; }
.mud-theme-dark .sidebar-nav-menu .mud-nav-link .mud-icon-root { color: #e8e8e8 !important; }
.mud-theme-dark .sidebar-nav-menu .mud-nav-link:hover {
    background: var(--gold-glow) !important;
    color: #fff !important;
}
.mud-theme-dark .sidebar-nav-menu .mud-nav-link:hover .mud-nav-link-text,
.mud-theme-dark .sidebar-nav-menu .mud-nav-link:hover .mud-icon-root { color: #fff !important; }
.mud-theme-dark .sidebar-nav-menu .mud-nav-link.mud-nav-link-active {
    background: var(--primary) !important;
    color: #fff !important;
}
.mud-theme-dark .sidebar-nav-menu .mud-nav-link.mud-nav-link-active .mud-nav-link-text,
.mud-theme-dark .sidebar-nav-menu .mud-nav-link.mud-nav-link-active .mud-icon-root { color: #fff !important; }

.sidebar-footer {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0,0,0,.06);
}
.mud-theme-dark .sidebar-footer { border-top-color: rgba(255,255,255,.08); }

.sidebar-user-btn {
    justify-content: flex-start !important;
    text-transform: none !important;
    border-radius: var(--radius-md) !important;
    color: var(--gray-800) !important;
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.25rem 0;
}
.sidebar-user-avatar { flex-shrink: 0; }
.sidebar-user-info { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: 0.9rem; color: var(--gray-900); }
.sidebar-user-role { font-size: 0.75rem; color: var(--gray-500); }
.sidebar-user-caret { flex-shrink: 0; opacity: 0.6; color: inherit; }
.sidebar-user-btn:hover { background: var(--gold-soft) !important; }
.sidebar-user-btn:hover .sidebar-user-name,
.sidebar-user-btn:hover .sidebar-user-caret { color: var(--primary) !important; }
.mud-theme-dark .sidebar-user-name { color: #fff; }
.mud-theme-dark .sidebar-user-role { color: rgba(255,255,255,.5); }
.mud-theme-dark .sidebar-user-btn:hover { background: var(--gold-glow); }
.mud-theme-dark .sidebar-user-btn:hover .sidebar-user-name,
.mud-theme-dark .sidebar-user-btn:hover .sidebar-user-caret { color: var(--primary-light); }

/* Sidebar mini - أيقونات فقط: الشكل والكلام يختفي، الأيقونات تبقى */
.app-sidebar.sidebar-mini .sidebar-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}
.app-sidebar.sidebar-mini .sidebar-logo .company-logo-wrap { display: flex !important; }
.app-sidebar.sidebar-mini .sidebar-logo .company-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain;
    object-position: left center;
}
.app-sidebar.sidebar-mini .sidebar-brand-text { display: none !important; }
.app-sidebar.sidebar-mini .sidebar-toggle { margin-inline-start: 0 !important; }
.app-sidebar.sidebar-mini .sidebar-section-label,
.app-sidebar.sidebar-mini .mud-nav-group-title { display: none !important; }
.app-sidebar.sidebar-mini .mud-nav-group .mud-nav-group-content { display: block !important; padding: 0 !important; margin: 0 !important; border: none !important; }
.app-sidebar.sidebar-mini .mud-nav-link .mud-nav-link-text { display: none !important; }
.app-sidebar.sidebar-mini .mud-nav-group { padding: 0 !important; }
.app-sidebar.sidebar-mini .mud-nav-link {
    justify-content: center !important;
    padding-inline: 0.5rem !important;
    min-width: 44px;
    margin-inline: auto;
}
.app-sidebar.sidebar-mini .sidebar-user-info,
.app-sidebar.sidebar-mini .sidebar-user-caret { display: none !important; }
.app-sidebar.sidebar-mini .sidebar-user { justify-content: center; }
.app-sidebar.sidebar-mini .sidebar-user-btn { justify-content: center !important; }
.app-sidebar.sidebar-mini .sidebar-footer { padding: 0.5rem; }
.app-sidebar.sidebar-mini .sidebar-user-avatar { margin: 0; }
.app-sidebar.sidebar-mini .sidebar-toggle { color: var(--gray-500) !important; }
.mud-theme-dark .app-sidebar.sidebar-mini .sidebar-toggle { color: rgba(255,255,255,.6) !important; }

/* Drawer - same width left/right (no shrink on RTL), no extra background */
.layout-wrap .mud-layout {
    --mud-drawer-width-left: 280px;
    --mud-drawer-width-right: 280px;
}
.layout-wrap.sidebar-mini .mud-layout {
    --mud-drawer-width-left: 72px;
    --mud-drawer-width-right: 72px;
}
.mud-drawer.drawer-modern {
    border-radius: 0 !important;
    border-inline-end: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 280px !important;
    min-width: 280px !important;
}
.layout-wrap.sidebar-mini .mud-drawer.drawer-modern {
    width: 72px !important;
    min-width: 72px !important;
}
.mud-drawer.drawer-modern .mud-drawer-content { background: transparent !important; }

/* Drawer nav overrides (sidebar uses its own .sidebar-nav-menu) */
.mud-drawer .mud-nav-menu { padding: 0.75rem !important; }
.mud-drawer .mud-nav-link {
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.15rem;
    min-height: 44px;
}
.mud-drawer .mud-nav-link:hover { background: var(--gold-soft) !important; }
.mud-drawer .mud-nav-link.mud-nav-link-active {
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root { color: inherit !important; }
.mud-theme-dark .mud-drawer .mud-nav-link:hover { background: var(--gold-glow) !important; }

/* Tabs - modern */
.mud-tabs-toolbar {
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 0.25rem;
}

.mud-tab {
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-transform: none;
}

.mud-tab.mud-tab-active {
    background: rgba(175, 120, 19, 0.1);
    color: var(--primary);
}

/* Tables */
.mud-table {
    border-radius: var(--radius-md);
}

.mud-table .mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mud-table .mud-table-row:hover {
    background: var(--gray-100) !important;
}

/* Buttons */
.mud-button-filled-primary {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.mud-button-outlined-primary {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* Text fields */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius-md) !important;
}

/* Valid / invalid */
.valid.modified:not([type=checkbox]) { outline: 2px solid #26b050; }
.invalid { outline: 2px solid #dc3545; }
.validation-message { color: #dc3545; font-size: 0.85rem; }

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-radius: 0;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress {
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem;
}
.loading-progress circle {
    fill: none;
    stroke: var(--gray-300);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: var(--gray-700);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

@media (max-width: 600px) {
    .page-modern { padding: 1rem; }
    .hero-section { padding: 2rem 0 3rem; }
    .mud-drawer { width: 100% !important; border-radius: 0 !important; }
}

.template-preview {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
}
.template-preview p { margin: 0 0 0.5em; }
.template-preview ul, .template-preview ol { margin: 0 0 0.5em; padding-inline-start: 1.5em; }

/* App spinner - elegant loading indicator */
.app-spinner-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-spinner-ring {
    border: 3px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: app-spinner-spin 0.85s linear infinite;
}
.app-spinner-small .app-spinner-ring { width: 20px; height: 20px; border-width: 2px; }
.app-spinner-medium .app-spinner-ring { width: 32px; height: 32px; border-width: 3px; }
.app-spinner-large .app-spinner-ring { width: 48px; height: 48px; border-width: 4px; }
@keyframes app-spinner-spin {
    to { transform: rotate(360deg); }
}
.mud-theme-dark .app-spinner-ring {
    border-color: rgba(255,255,255,.2);
    border-top-color: var(--primary);
}
.app-spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    gap: 1rem;
}
.app-spinner-overlay .app-spinner-wrap .app-spinner-ring {
    border-color: rgba(255,255,255,.25);
    border-top-color: #fff;
}

/* Modals / dialogs - consistent, spacious */
.app-dialog .mud-dialog-title {
    font-weight: 600;
    padding: 1rem 1.5rem;
}
.app-dialog .mud-dialog-content {
    padding: 1rem 1.5rem 0;
    min-height: 80px;
}
.app-dialog .mud-dialog-actions {
    padding: 1rem 1.5rem 1.25rem;
    gap: 0.5rem;
}
.mud-dialog .mud-paper {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.mud-dialog-container {
    align-items: center;
    padding: 1.5rem;
}

/* Table loading overlay - match theme */
.mud-table-container .mud-overlay {
    border-radius: var(--radius-lg);
}
.mud-table-container .mud-overlay .mud-progress-circular,
.mud-table-container .mud-overlay .mud-progress-linear {
    color: var(--primary) !important;
}

.quill-editor-host { display: flex; flex-direction: column; gap: 0; min-height: 180px; }
.quill-size-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--mud-palette-background-grey, #f5f5f5);
}
.quill-size-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #555);
    white-space: nowrap;
}
.quill-size-select {
    min-width: 96px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-ar), sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
}
.quill-font-fixed-hint {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #666);
    margin-inline-start: auto;
}
.quill-editor-wrap { min-height: 180px; border-radius: 0 0 8px 8px; }
.quill-editor-wrap .ql-toolbar { border-radius: 0; border-top: none; }
.quill-editor-wrap .ql-container { border-radius: 0 0 8px 8px; min-height: 160px; font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif; direction: rtl; }
.quill-editor-wrap .ql-editor {
  min-height: 160px;
  direction: rtl;
  text-align: right;
  font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}
.quill-editor-wrap .ql-editor * {
  font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif !important;
}
.quill-editor-wrap .ql-font-sultan-medium,
.quill-editor-wrap .ql-font-noor-sultan { font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif !important; }
.quill-editor-wrap .ql-size-12px { font-size: 12px !important; }
.quill-editor-wrap .ql-size-14px { font-size: 14px !important; }
.quill-editor-wrap .ql-size-16px { font-size: 16px !important; }
.quill-editor-wrap .ql-size-18px { font-size: 18px !important; }
.quill-editor-wrap .ql-size-20px { font-size: 20px !important; }
.quill-editor-wrap .ql-size-24px { font-size: 24px !important; }
.quill-editor-wrap .ql-size-28px { font-size: 28px !important; }
.quill-editor-wrap .ql-editor h1,
.quill-editor-wrap .ql-editor h2 { font-size: 18px; font-weight: 700; }

.correspondence-creator-status {
    border-radius: 10px;
    border-right: 4px solid var(--mud-palette-primary);
}
.correspondence-creator-status.severity-warning {
    background: #fff8e6;
    border-right-color: #ed6c02;
}
.correspondence-creator-status.severity-info {
    background: #e8f4fd;
    border-right-color: #0288d1;
}
.correspondence-creator-status.severity-success {
    background: #edf7ed;
    border-right-color: #2e7d32;
}
.correspondence-creator-status.severity-error {
    background: #fdecea;
    border-right-color: #d32f2f;
}
.correspondence-creator-status-label { opacity: 0.75; }
.correspondence-creator-status-title { font-weight: 700; }
.correspondence-creator-actions {
    border: 1px solid var(--mud-palette-lines-default, #ddd);
    border-radius: 10px;
    background: var(--mud-palette-surface, #fff);
}

.template-content-slot { transition: border-color 0.2s ease; }
.template-content-slot:hover { border-color: var(--primary) !important; }

.attachment-item { background: var(--gray-100); border-radius: 8px; }
.mud-theme-dark .attachment-item { background: rgba(255,255,255,.06); }

/* Create correspondence – error alert and required-field validation */
.form-error-alert { scroll-margin-top: 1rem; }
.mud-input-control.mud-input-error .mud-input-label,
.mud-input-label.mud-input-error { color: var(--alert) !important; }

/* ----- Print layout & formal letter ----- */
.print-layout { max-width: 210mm; margin: 0 auto; padding: 1rem; background: #fff; min-height: 100vh; }
.print-actions { margin-bottom: 1.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--gray-300); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn-print { padding: 0.5rem 1rem; background: var(--primary); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-print:hover { filter: brightness(1.1); }
.btn-close { padding: 0.5rem 1rem; border: 1px solid var(--gray-500); border-radius: 8px; color: inherit; text-decoration: none; background: #fff; cursor: pointer; font: inherit; }
.btn-close:hover { background: var(--gray-100); }
.print-body { }

.letter-loading { padding: 3rem; text-align: center; color: var(--gray-600); }

.letter-formal {
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #1a1a1a;
}
.letter-head { text-align: center; margin-bottom: 1rem; }
.letter-logo { margin-bottom: 0.75rem; display: flex; justify-content: center; }
.letter-logo-img { width: 90px; height: 90px; object-fit: contain; object-position: center; }
.letter-org { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.25rem 0; color: var(--primary); }
.letter-sub { font-size: 0.95rem; color: var(--gray-700); margin: 0; }
.letter-divider { border: none; border-top: 2px solid var(--primary); margin: 1rem 0; }
.letter-meta { margin-bottom: 1rem; }
.letter-meta-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.letter-meta-table td { padding: 0.15rem 0.5rem 0.15rem 0; vertical-align: top; }
.letter-meta-gap { width: 1.5rem; }
.letter-from { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.letter-to {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
    direction: rtl;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif;
}
.letter-to-label,
.letter-to-value,
.letter-to strong { font-weight: 700; }
.letter-subject { margin-bottom: 0.75rem; font-weight: 600; }
.letter-title { margin-bottom: 0.75rem; }
.letter-body {
    margin: 1rem 0;
    padding: 0;
    min-height: 120px;
}
.letter-body-inner { }
.letter-body-inner p { margin: 0 0 0.5em 0; }
.letter-body-inner ul, .letter-body-inner ol { margin: 0.5em 0; padding-inline-start: 1.5em; }
.letter-extra { margin: 1rem 0; font-size: 0.9rem; }
.letter-extra-table { border-collapse: collapse; }
.letter-extra-table td { padding: 0.2rem 0.75rem 0.2rem 0; }
.letter-footer { margin-top: 2.5rem; display: flex; gap: 3rem; flex-wrap: wrap; }
.letter-footer p { margin: 0; font-size: 0.95rem; border-bottom: 1px solid #333; padding-bottom: 0.25rem; min-width: 120px; }

/* ----- تصميم خطاب رسمي (هيئة التخطيط العمراني) ----- */
.letter-nupa {
    display: flex;
    flex-direction: column;
    max-width: 210mm;
    width: 100%;
    margin: 0 auto;
    padding: 12mm;
    background: #fff;
    min-height: 297mm;
    box-sizing: border-box;
    position: relative;
}
.letter-nupa-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}
.letter-main-flex {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.letter-body-flow { flex: 0 1 auto; }
.letter-closing-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: auto;
    page-break-inside: avoid;
}
.letter-closing-spacer { flex: 1 1 auto; min-height: 0; }
.letter-multi-page .letter-closing-page {
    break-before: page;
    min-height: calc(297mm - 72mm);
    margin-top: 0;
}
.letter-head-nupa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.letter-head-gov {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.letter-logo-gov {
    width: 98px;
    height: 98px;
    object-fit: contain;
    display: block;
}
.letter-head-institution {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.letter-logo-company {
    width: 98px;
    height: 98px;
    object-fit: contain;
    display: block;
}
.letter-head-institution-text { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; color: var(--gray-700); text-align: center; }
.letter-head-ar { font-weight: 600; color: #1a1a1a; }
.letter-head-en { font-size: 0.7rem; color: var(--gray-500); }
.letter-head-center { flex: 1; text-align: center; padding: 0 0.75rem; }
.letter-org-main { font-size: 1.55rem; font-weight: 700; margin: 0 0 0.2rem 0; color: #1a1a1a; line-height: 1.35; }
.letter-org-sub { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.3rem 0; color: #1a1a1a; line-height: 1.35; }
.letter-org-en { font-size: 0.88rem; color: #444; margin: 0; line-height: 1.35; }
.letter-divider-gold,
.letter-head-rule { border: none; border-top: 1px solid #1a1a1a; margin: 0.35rem 0 0.65rem 0; width: 100%; }
.letter-head-rule-top { margin: 0 0 0.15rem 0; }
.letter-head-rule-bottom { margin: 0.15rem 0 0.55rem 0; }
.letter-footer-wrap { flex-shrink: 0; margin-top: 0.35rem; padding-top: 0.15rem; }
.letter-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}
.letter-meta-ref { }
.letter-meta-date { }
.letter-meta-value { font-weight: 600; }
.letter-body-wrap { position: relative; margin: 0; min-height: 120px; width: 100%; flex: 1 1 auto; }
.letter-body-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.letter-watermark-img {
    width: 85%;
    max-width: 480px;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    opacity: 0.07;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.letter-body-wrap .letter-body { position: relative; z-index: 1; background: transparent; }
.letter-footer-nupa {
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    padding: 0.5rem 0;
}
.letter-footer-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.letter-footer-icon { font-size: 1rem; opacity: 0.9; }
.letter-org-logos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 14px;
    margin: 1.25rem 0 0.5rem;
    page-break-inside: avoid;
    flex-shrink: 0;
}
.letter-org-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 96px;
    text-align: center;
}
.letter-org-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}
.letter-org-logo-placeholder {
    width: 52px;
    height: 52px;
    border: 1px dashed #ccc;
    border-radius: 4px;
}
.letter-org-logo-name {
    margin-top: 4px;
    font-size: 0.65rem;
    line-height: 1.35;
    color: #333;
    font-weight: 600;
}
.letter-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1.1rem;
    margin-top: auto;
    margin-bottom: 1.75rem;
    min-height: 150px;
    width: 100%;
    page-break-inside: avoid;
    direction: rtl;
    flex-shrink: 0;
}
.letter-copy-to-block {
    flex: 0 0 auto;
    align-self: flex-start;
    text-align: right;
    font-size: 0.82rem;
    line-height: 1.75;
    margin: 0;
    padding: 0;
    max-width: 55%;
}
.letter-copy-to-title {
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #1a1a1a;
}
.letter-copy-to-item {
    margin: 0.08rem 0;
    white-space: nowrap;
    font-weight: 600;
    color: #1a1a1a;
    padding-inline-start: 0.15rem;
}
.copy-to-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 8px;
}
.copy-to-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,.12));
    border-radius: 6px;
    cursor: pointer;
}
.copy-to-option.selected {
    border-color: var(--gold, #C9A227);
    background: #fffbf0;
}
.copy-to-option input { flex-shrink: 0; }

/* صورة إلى — create form */
.copy-to-card { border-top: 3px solid var(--gold, #C9A227); }
.copy-to-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.copy-to-header-icon {
    color: var(--gold, #C9A227);
    font-size: 1.75rem;
    margin-top: 2px;
}
.copy-to-title { font-weight: 700 !important; margin-bottom: 2px !important; }
.copy-to-section-label {
    display: block;
    font-weight: 600;
    color: var(--gray-700, #555);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.copy-to-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.copy-to-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,.14));
    border-radius: 999px;
    background: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.copy-to-preset-btn:hover {
    border-color: var(--gold, #C9A227);
    background: #fffdf5;
}
.copy-to-preset-btn.is-selected {
    border-color: var(--gold, #C9A227);
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
    color: #7a5c00;
    font-weight: 600;
}
.copy-to-autocomplete .mud-input-root { background: #fafafa; }
.copy-to-selected-panel {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,.1));
    border-radius: 10px;
    padding: 14px 16px;
}
.copy-to-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.copy-to-empty {
    padding: 8px 0;
    font-style: italic;
}
.copy-to-selected-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.copy-to-selected-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.copy-to-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold, #C9A227);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.copy-to-selected-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.letter-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
}
.letter-logo-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--mud-palette-divider, rgba(0,0,0,.12));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: center;
}
.letter-logo-option.selected {
    border-color: var(--gold, #C9A227);
    background: #fffbf0;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.2);
}
.letter-logo-option input { display: none; }
.letter-logo-thumb {
    width: 52px;
    height: 52px;
    object-fit: contain;
}
.letter-logo-name {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
}
.letter-signature-block {
    position: relative;
    min-height: 100px;
    margin: 0 auto;
    width: fit-content;
    flex: 0 0 auto;
    align-self: center;
    page-break-inside: avoid;
    text-align: center;
}
.letter-formal.letter-nupa {
    position: relative;
    width: 794px;
    max-width: 100%;
    min-height: 1123px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
/* معاينة الطباع داخل صفحة التفاصيل — تمرير دون إخفاء */
.letter-embed-preview {
    max-height: 85vh;
    overflow: auto;
    margin-top: 0.5rem;
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,.12));
    border-radius: 8px;
    background: #e8e8e8;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 12px;
}
.letter-pdf-embed {
    min-height: 80vh;
    padding: 0;
    overflow: hidden;
    background: #fff;
}
.letter-pdf-iframe {
    width: 100%;
    height: 80vh;
    min-height: 720px;
    border: none;
    border-radius: 8px;
    background: #f5f5f5;
    display: block;
}
.letter-embed-preview .letter-formal.letter-nupa {
    position: relative !important;
    width: 794px !important;
    max-width: 794px !important;
    min-height: 1123px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #fff;
}
.letter-embed-preview .letter-preview-page {
    position: relative;
    min-height: calc(1123px - 200px);
}
.letter-signature-on-page {
    position: absolute;
    z-index: 30;
    pointer-events: none;
}
.letter-stamp-label { margin: 0.5rem 0 0 0; font-size: 0.9rem; border-bottom: 1px solid #333; padding-bottom: 0.2rem; display: inline-block; min-width: 100px; }
.letter-signer-name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif; }
.letter-signer-title { margin: 0.2rem 0 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: #333; font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif; }
.letter-body-inner,
.letter-body-inner p {
    font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}
.letter-body-inner h1,
.letter-body-inner h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
}
.letter-subject-line,
.letter-title-line,
.letter-subject-value,
.letter-title-value {
    font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* Official leave form (نموذج إجازة) — template preview & print */
.letter-body-inner p.official-leave-form,
.letter-body-inner p.olf-date-row,
.letter-body-inner p.olf-title,
.letter-body-inner p.olf-types-box,
.letter-body-inner p.olf-section-title,
.letter-body-inner p.olf-line,
.letter-body-inner p.olf-final-approval,
.letter-body-inner p.olf-notes,
.letter-body-inner ul.olf-notes-list,
.official-leave-form,
.letter-body-inner .official-leave-form {
    font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif !important;
    font-size: 12pt !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #1a1a1a;
}
.letter-body-inner p.official-leave-form,
.letter-body-inner p.olf-date-row,
.official-leave-form .olf-date-row {
    text-align: left;
    direction: rtl;
    margin: 0 0 0.35rem 0;
    font-size: 11pt !important;
}
.letter-body-inner p.olf-title,
.official-leave-form .olf-title {
    text-align: center;
    font-size: 16pt !important;
    font-weight: 700 !important;
    margin: 0.25rem 0 0.75rem 0;
    line-height: 1.4 !important;
}
.letter-body-inner p.olf-section-title,
.official-leave-form .olf-section-title {
    font-weight: 700 !important;
    font-size: 12pt !important;
    margin: 0.65rem 0 0.45rem 0;
    padding-top: 0.35rem;
    border-top: 1px solid #333;
}
.letter-body-inner p.olf-line,
.official-leave-form .olf-line {
    margin: 0.35rem 0;
    line-height: 2 !important;
    font-size: 12pt !important;
}
.letter-body-inner .olf-fill,
.official-leave-form .olf-fill {
    border-bottom: 1px dotted #1a1a1a;
    padding: 0 0.15rem;
}
.letter-body-inner p.olf-final-approval,
.official-leave-form .olf-final-approval {
    page-break-inside: avoid;
}
.letter-body-inner p.olf-notes,
.official-leave-form .olf-notes {
    margin-top: 0.5rem;
    font-size: 10.5pt !important;
    line-height: 1.65 !important;
}
.letter-body-inner ul.olf-notes-list {
    margin: 0;
    padding-inline-start: 1.25rem;
}

/* Official leave form fill dialog */
.olf-fill-dialog .mud-dialog-content {
    padding-top: 8px;
}
.olf-fill-dialog-scroll {
    max-height: calc(92vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px 8px;
}
.olf-fill-dialog-paper {
    max-width: 210mm;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d8d2c8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 14mm 12mm 16mm;
    direction: rtl;
    text-align: right;
    font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif;
    font-size: 12pt;
    line-height: 1.75;
    color: #1a1a1a;
}
.olf-fill-dialog-paper .olf-form-body {
    margin-top: 0.5rem;
}
.olf-fill-dialog-paper .olf-title {
    text-align: center;
    font-size: 16pt;
    font-weight: 700;
    margin: 0.35rem 0 0.75rem;
}
.olf-fill-dialog-paper .olf-types-box-interactive {
    display: flex;
    gap: 0;
    border: 1.5px solid #1a1a1a;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.olf-fill-dialog-paper .olf-types-col {
    flex: 1 1 50%;
    padding: 2px 8px;
}
.olf-fill-dialog-paper .olf-types-location {
    border-right: 1px solid #1a1a1a;
}
.olf-fill-dialog-paper .olf-field-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
    line-height: 2;
}
.olf-fill-dialog-paper .olf-field-line-dates {
    line-height: 1.9;
}
.olf-fill-dialog-paper .olf-inline-field {
    min-width: 90px;
    max-width: 220px;
}
.olf-fill-dialog-paper .olf-inline-field-md { min-width: 120px; }
.olf-fill-dialog-paper .olf-inline-field-lg { min-width: 160px; flex: 1 1 160px; }
.olf-fill-dialog-paper .olf-inline-field .mud-input-root,
.olf-fill-dialog-paper .olf-inline-date .mud-input-root {
    font-family: 'Sultan Medium', 'Noor Sultan', var(--font-ar), sans-serif !important;
    font-size: 12pt !important;
}
.olf-fill-dialog-paper .olf-inline-field .mud-input-underline:before,
.olf-fill-dialog-paper .olf-inline-date .mud-input-underline:before {
    border-bottom: 1px dotted #555 !important;
}
.olf-fill-dialog-paper .olf-section-title {
    font-weight: 700;
    margin: 0.75rem 0 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid #333;
}
.olf-fill-dialog-paper .olf-section-readonly {
    opacity: 0.92;
}
.olf-fill-dialog-paper .olf-line-readonly {
    margin: 6px 0;
    color: #333;
}
.olf-fill-dialog-paper .olf-signature-preview,
.olf-fill-dialog-paper .olf-signatures-preview > div {
    text-align: center;
    margin: 10px 0;
}
.olf-fill-dialog-paper .olf-signatures-preview {
    display: flex;
    gap: 8px;
}
.olf-fill-dialog-paper .olf-signatures-preview > div {
    flex: 1 1 50%;
}
.olf-fill-dialog-paper .olf-signature-line {
    display: block;
    border-bottom: 1px solid #1a1a1a;
    min-width: 120px;
    max-width: 180px;
    height: 1.5rem;
    margin: 0 auto 4px;
}
.olf-fill-dialog-paper .olf-signature-line-wide {
    max-width: 220px;
}
.olf-fill-dialog-paper .olf-final-approval-preview {
    border: 2px solid #1a1a1a;
    padding: 10px 12px;
    text-align: center;
    margin: 12px 0;
}
.olf-fill-dialog-paper .olf-notes-preview ul {
    margin: 4px 0 0;
    padding-inline-start: 1.25rem;
    font-size: 10.5pt;
}
.olf-fill-dialog-paper .olf-types-box-interactive.olf-field-error,
.olf-fill-dialog-paper .olf-types-location.olf-field-error {
    border-color: #d32f2f !important;
    box-shadow: inset 0 0 0 1px #d32f2f;
}
.olf-applicant-signature-preview {
    display: block;
    max-height: 72px;
    max-width: 200px;
    margin: 0 auto 4px;
    object-fit: contain;
}
.olf-fill-dialog-loading {
    min-height: 280px;
}

/* Official leave — readable single A4 preview/print */
.letter-official-leave-mode.letter-nupa {
    font-size: 11pt;
    padding: 10mm !important;
    min-height: auto !important;
    max-width: 210mm;
}
.letter-official-leave-mode .letter-head-inline .letter-logo-gov { width: 58px; height: 58px; }
.letter-official-leave-mode .letter-head-inline .letter-logo-company { width: 48px; height: 48px; }
.letter-official-leave-mode .letter-head-inline .letter-org-main { font-size: 12pt; font-weight: 700; margin: 0 0 0.1rem 0; }
.letter-official-leave-mode .letter-head-inline .letter-org-sub { font-size: 11pt; font-weight: 700; margin: 0 0 0.15rem 0; }
.letter-official-leave-mode .letter-head-inline .letter-org-en { font-size: 0.72rem; color: #666; margin: 0; }
.letter-official-leave-mode .letter-divider-gold { margin: 0.35rem 0 0.55rem 0; }
.letter-official-leave-mode .letter-meta-row { margin-bottom: 0.45rem; font-size: 10pt; }
.letter-official-leave-mode .letter-body-watermark { display: none; }
.letter-official-leave-mode .letter-body-inner,
.letter-official-leave-mode .letter-body-inner p {
    font-size: 11pt !important;
    line-height: 1.5 !important;
    margin: 0 0 0.3em 0 !important;
}
.letter-official-leave-mode .letter-body-inner p.olf-date-row { display: none !important; }
.letter-official-leave-mode .letter-body-inner p.olf-title { font-size: 14pt !important; font-weight: 700 !important; margin: 0.2rem 0 0.55rem !important; }
.letter-official-leave-mode .letter-body-inner p.olf-section-title { font-size: 11pt !important; font-weight: 700 !important; margin: 0.45rem 0 0.25rem !important; }
.letter-official-leave-mode .letter-body-inner p.olf-types-box { padding: 8px 12px !important; margin-bottom: 0.45rem !important; font-size: 10.5pt !important; }
.letter-official-leave-mode .letter-body-inner p.olf-notes,
.letter-official-leave-mode .letter-body-inner ul.olf-notes-list { font-size: 10pt !important; line-height: 1.45 !important; }
.letter-official-leave-mode .olf-applicant-signature { max-height: 52px !important; max-width: 160px !important; }

.recipient-option-loading {
    min-width: 220px;
}

@page { size: A4; margin: 0; }

@media print {
    .letter-official-leave-mode.letter-nupa {
        padding: 10mm !important;
        min-height: auto !important;
        height: auto !important;
    }
    .letter-official-leave-mode .letter-nupa-content {
        padding-bottom: 0 !important;
    }
    .letter-official-leave-mode .letter-footer-wrap {
        display: none !important;
    }
    .no-print { display: none !important; }
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .print-layout { max-width: none; padding: 0; box-shadow: none; min-height: auto; margin: 0; }
    body { background: #fff; }
    .letter-formal { font-size: 11pt; }
    .letter-nupa,
    .letter-body-wrap { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .letter-body { border-color: #ccc; }
    .letter-nupa {
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none;
        padding: 12mm !important;
        min-height: 297mm !important;
        height: auto !important;
    }
    .letter-nupa-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding-bottom: 22mm !important; /* space so content is not under fixed gold line + footer */
    }
    .letter-body-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
  /* Signature + صورة إلى — stick above footer on short letters */
    .letter-bottom-row {
        margin-top: auto !important;
        margin-bottom: 10mm !important;
        flex-shrink: 0 !important;
    }
    .letter-multi-page .letter-closing-page {
        break-before: page !important;
        min-height: calc(297mm - 36mm - 22mm) !important;
        margin-top: 0 !important;
    }
    .letter-signature-block {
        page-break-inside: avoid;
        page-break-after: avoid;
        margin-top: 0 !important;
    }
    /* Gold line full width + footer fixed at bottom – use 100vw so line is full page width in print preview */
    .letter-footer-wrap {
        position: fixed !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        margin-left: -50vw !important;
        width: 100vw !important;
        padding: 0 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    .letter-footer-wrap .letter-divider-gold {
        margin: 0 0 0.5rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .letter-footer-nupa {
        margin: 0 !important;
        padding: 3mm 12mm !important;
        page-break-inside: avoid;
        background: #fff !important;
        max-width: 210mm;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Transparent body so watermark shows through in print / print preview */
    .letter-body-wrap .letter-body { background: transparent !important; }
    /* Force watermark to print and show in print preview */
    .letter-body-watermark,
    .letter-watermark-img { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .letter-watermark-img { opacity: 0.12 !important; }
}

/* ----- الصادر الخارجي: إعداد وربط إيميل + واجهة بريد (Gmail-like) ----- */
.webmail-setup-page {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(160deg, var(--surface) 0%, var(--gray-100) 100%);
}
.mud-theme-dark .webmail-setup-page {
    background: linear-gradient(160deg, #0d0d0d 0%, #1a1a1a 100%);
}
.webmail-setup-card {
    max-width: 480px;
    width: 100%;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
    border: 1px solid var(--gray-300);
}
.mud-theme-dark .webmail-setup-card { border-color: #333; }
.webmail-setup-card .mud-card-header {
    background: var(--primary);
    color: var(--white);
    padding: 1.25rem 1.5rem;
}
.webmail-setup-card .mud-card-header .mud-typography { color: inherit !important; }
.webmail-setup-card .mud-card-content { padding: 1.5rem; }
.webmail-setup-card .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-md); }
.webmail-setup-card .btn-connect {
    background: var(--primary) !important;
    color: white !important;
    border-radius: var(--radius-md) !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.webmail-setup-card .btn-connect:hover { background: var(--primary-dark) !important; }

/* Page wrapper so webmail is full-height below app bar and not hidden under header */
.page-webmail {
    height: calc(100vh - 64px);
    margin: -2rem -1.5rem;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.page-webmail .webmail-layout {
    flex: 1;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.webmail-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-300);
}
.mud-theme-dark .webmail-layout { background: #1e1e1e; border-color: #333; }
.webmail-refresh-bar { flex-shrink: 0; }

.webmail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    min-height: 56px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--white);
    flex-shrink: 0;
}
.mud-theme-dark .webmail-header { background: #252525; border-color: #333; }
.webmail-header .webmail-search {
    flex: 1;
    max-width: 560px;
}
.webmail-header .webmail-search .mud-input-root { font-size: 0.9rem; }
.webmail-header .webmail-search .mud-input-outlined {
    border-radius: var(--radius-lg);
    background: var(--gray-100);
}
.mud-theme-dark .webmail-header .webmail-search .mud-input-outlined { background: #2d2d2d; }
.webmail-header .webmail-account {
    font-size: 0.9rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mud-theme-dark .webmail-header .webmail-account { color: #b0b0b0; }

.webmail-body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.webmail-sidebar {
    width: 220px;
    min-width: 220px;
    border-inline-end: 1px solid var(--gray-300);
    background: var(--surface);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mud-theme-dark .webmail-sidebar { background: #252525; border-color: #333; }
.webmail-sidebar .btn-compose {
    background: var(--primary) !important;
    color: white !important;
    border-radius: var(--radius-md) !important;
    padding: 0.6rem 1rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.webmail-sidebar .btn-compose:hover { background: var(--primary-dark) !important; }
.webmail-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background var(--transition-ui), color var(--transition-ui);
}
.mud-theme-dark .webmail-sidebar .nav-item { color: #b0b0b0; }
.webmail-sidebar .nav-item:hover {
    background: var(--gold-soft);
    color: var(--primary);
}
.mud-theme-dark .webmail-sidebar .nav-item:hover { background: var(--gold-glow); color: var(--primary-light); }
.webmail-sidebar .nav-item.active {
    background: var(--gold-soft);
    color: var(--primary);
    font-weight: 600;
}
.mud-theme-dark .webmail-sidebar .nav-item.active { background: var(--gold-glow); color: var(--primary-light); }

.webmail-main {
    flex: 1;
    overflow: auto;
    background: var(--white);
    display: flex;
    flex-direction: column;
}
.mud-theme-dark .webmail-main { background: #1a1a1a; }

.webmail-main .mail-list {
    flex: 1;
}
.mail-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-300);
    cursor: pointer;
    transition: background var(--transition-ui);
}
.mud-theme-dark .mail-list-item { border-color: #333; }
.mail-list-item:hover { background: var(--gold-soft); }
.mud-theme-dark .mail-list-item:hover { background: var(--gold-glow); }
.mail-list-item .mail-from { font-weight: 600; color: var(--gray-900); min-width: 140px; }
.mud-theme-dark .mail-list-item .mail-from { color: #e0e0e0; }
.mail-list-item .mail-subject { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-700); }
.mud-theme-dark .mail-list-item .mail-subject { color: #b0b0b0; }
.mail-list-item .mail-date { font-size: 0.85rem; color: var(--gray-500); flex-shrink: 0; }
.mud-theme-dark .mail-list-item .mail-date { color: #888; }

.webmail-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray-500);
}
.mud-theme-dark .webmail-empty { color: #888; }
.webmail-compose-wrap { padding: 1.5rem; max-width: 720px; }

/* Inbox message detail dialog – body scrollable inside modal */
.inbox-message-dialog .mud-dialog-content { padding: 1rem 1.5rem; max-height: 65vh; overflow: hidden; display: flex; flex-direction: column; }
.inbox-message-body-loading { display: flex; justify-content: center; padding: 2rem; }
.inbox-message-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    font-size: 0.9rem;
}
.mud-theme-dark .inbox-message-body { background: #252525; border-color: #333; }
.inbox-message-body-text { white-space: pre-wrap; word-break: break-word; }
.inbox-message-body-html { word-break: break-word; }
.inbox-message-body-html img { max-width: 100%; height: auto; }

/* Mailbox settings dialog – professional layout */
.mailbox-settings-dialog .mud-dialog-title {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-300);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white) !important;
    font-weight: 600;
}
.mud-theme-dark .mailbox-settings-dialog .mud-dialog-title { border-color: #333; }
.mailbox-settings-dialog .mud-dialog-content {
    padding: 0 !important;
    max-height: 70vh;
    overflow-y: auto;
}
.mailbox-settings-dialog .settings-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-300);
}
.mud-theme-dark .mailbox-settings-dialog .settings-section { border-color: #333; }
.mailbox-settings-dialog .settings-section:last-of-type { border-bottom: none; }
.mailbox-settings-dialog .settings-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mailbox-settings-dialog .settings-actions {
    padding: 1rem 1.5rem;
    background: var(--surface);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mud-theme-dark .mailbox-settings-dialog .settings-actions { background: #252525; }
.mailbox-settings-dialog .connection-status {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.mailbox-settings-dialog .connection-status.success { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.mailbox-settings-dialog .connection-status.error { background: rgba(220, 38, 38, 0.12); color: var(--alert); }
.mailbox-settings-dialog .connection-status.pending { background: var(--gold-soft); color: var(--primary); }

/* Workflow visual hierarchy (premium pyramid) */
.wf-visual-card {
    border: 1px solid rgba(175, 120, 19, 0.2) !important;
    background: linear-gradient(180deg, rgba(175, 120, 19, 0.08), rgba(255, 255, 255, 0.95)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
}
.mud-theme-dark .wf-visual-card {
    background: linear-gradient(180deg, rgba(175, 120, 19, 0.18), rgba(30, 30, 30, 0.96)) !important;
    border-color: rgba(201, 148, 32, 0.35) !important;
}
.wf-pyramid-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0 0.25rem;
}
.wf-step-node {
    -webkit-appearance: none;
    appearance: none;
    border: 0 !important;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    min-height: 58px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.9rem;
    color: #fff !important;
    background: linear-gradient(135deg, #607d8b, #78909c);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .2s ease, filter .2s ease, outline-color .2s ease;
    position: relative;
}
.wf-step-node::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: rgba(175, 120, 19, 0.45);
}
.wf-pyramid-wrap .wf-step-node:last-child::after { display: none; }
.wf-step-node:hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.04);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}
.wf-step-node:focus-visible {
    outline: 3px solid rgba(175, 120, 19, 0.6);
    outline-offset: 2px;
}
.wf-step-node .wf-step-title {
    font-size: 0.95rem;
    font-weight: 800;
    text-align: start;
}
.wf-step-node .wf-step-meta {
    font-size: 0.75rem;
    opacity: 0.95;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}
.wf-step-node.done {
    background: linear-gradient(135deg, #1f8f45, #2fa45a);
}
.wf-step-node.current {
    background: linear-gradient(135deg, #af7813, #cf9d33);
}
.wf-step-node.next {
    background: linear-gradient(135deg, #607d8b, #78909c);
}
.wf-step-node.selected {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 1px;
}

/* Workflow realistic journey */
.wf-journey {
    border: 1px solid rgba(175, 120, 19, 0.22);
    border-radius: 16px;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(175,120,19,.06), rgba(255,255,255,.92));
}
.mud-theme-dark .wf-journey {
    background: linear-gradient(180deg, rgba(175,120,19,.16), rgba(30,30,30,.94));
    border-color: rgba(201,148,32,.35);
}
.wf-journey-head {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.wf-stage-pill {
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.wf-stage-pill.start { background: rgba(46,125,50,.12); color: #1f8f45; }
.wf-stage-pill.current { background: rgba(175,120,19,.14); color: #8d6010; }
.wf-stage-pill.end { background: rgba(84,110,122,.14); color: #455a64; }

.wf-journey-track {
    position: relative;
    display: grid;
    gap: .7rem;
    padding-inline-start: .55rem;
}
.wf-journey-line {
    position: absolute;
    inset-inline-start: .2rem;
    top: .2rem;
    bottom: .2rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #af7813, #c99420, #90a4ae);
    opacity: .35;
}
.wf-event-card {
    position: relative;
    margin-inline-start: .8rem;
    border: 1px solid rgba(175,120,19,.2);
    border-radius: 14px;
    background: #fff;
    padding: .7rem .8rem;
    text-align: start;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.wf-event-card::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.1rem;
    top: 1rem;
    width: .62rem;
    height: .62rem;
    border-radius: 999px;
    background: #af7813;
    box-shadow: 0 0 0 4px rgba(175,120,19,.2);
}
.wf-event-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,.13);
}
.wf-event-card.selected {
    border-color: rgba(175,120,19,.7);
    box-shadow: 0 10px 24px rgba(175,120,19,.2);
}
.mud-theme-dark .wf-event-card {
    background: #232323;
    border-color: rgba(201,148,32,.3);
}
.wf-event-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .6rem;
}
.wf-event-actor {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wf-actor-name {
    font-size: .82rem;
    font-weight: 700;
}
.wf-event-time {
    font-size: .73rem;
    opacity: .75;
}
.wf-event-route {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .83rem;
    font-weight: 600;
}
.wf-event-route .from { color: #607d8b; }
.wf-event-route .to { color: #af7813; }
.wf-event-comment {
    margin-top: .45rem;
    font-size: .78rem;
    opacity: .9;
    background: rgba(175,120,19,.08);
    border-radius: 8px;
    padding: .4rem .5rem;
}

/* Flowchart-like workflow (rectangular nodes) */
.wf-chart-shell {
    border: 1px solid rgba(175, 120, 19, 0.2);
    border-radius: 16px;
    padding: 0.9rem;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(175,120,19,.06));
}
.mud-theme-dark .wf-chart-shell {
    background: linear-gradient(180deg, rgba(30,30,30,.96), rgba(175,120,19,.14));
    border-color: rgba(201,148,32,.32);
}
.wf-chart-headline {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}
.wf-chart-track {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    padding: .25rem 0 .35rem;
}
.wf-chart-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.wf-chart-node {
    width: 260px;
    min-height: 160px;
    border: 2px solid rgba(175,120,19,.45);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #f8f8f8);
    color: inherit;
    text-align: start;
    padding: .7rem .75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.wf-chart-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.wf-chart-node.selected {
    border-color: #af7813;
    box-shadow: 0 12px 26px rgba(175,120,19,.25);
}
.mud-theme-dark .wf-chart-node {
    background: linear-gradient(135deg, #242424, #1d1d1d);
    border-color: rgba(201,148,32,.55);
}
.wf-chart-node-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: center;
    margin-bottom: .5rem;
}
.wf-chart-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wf-chart-title {
    font-size: .92rem;
    font-weight: 800;
    color: #af7813;
}
.wf-chart-time {
    font-size: .72rem;
    opacity: .78;
}
.wf-chart-meta-row {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: .35rem;
    align-items: start;
    font-size: .79rem;
    margin-bottom: .25rem;
}
.wf-chart-meta-row .k {
    opacity: .8;
    font-weight: 700;
}
.wf-chart-meta-row .v {
    font-weight: 600;
    word-break: break-word;
}
.wf-chart-comment {
    margin-top: .35rem;
    border-radius: 8px;
    padding: .32rem .45rem;
    font-size: .74rem;
    background: rgba(175,120,19,.12);
}
.wf-chart-arrow {
    width: 26px;
    display: flex;
    justify-content: center;
    opacity: .75;
}

/* Rectangular flow chart (workflow) */
.wf-rect-chart {
    position: relative;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    background: #fcfcfc;
    padding: 1rem;
    overflow-x: auto;
}
.mud-theme-dark .wf-rect-chart {
    background: #1d1d1d;
    border-color: rgba(255,255,255,.12);
}
.wf-rect-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
    min-width: max-content;
}
.wf-lines-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.wf-curve-line {
    stroke: #dcdcdc;
    stroke-width: 2;
    fill: none;
}
.mud-theme-dark .wf-curve-line {
    stroke: rgba(255,255,255,.25);
}

.wf-node-wrapper {
    width: 260px;
    flex-shrink: 0;
}
.wf-node {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
    width: 100%;
    min-height: 92px;
    display: flex;
    position: relative;
    border: 0;
    cursor: pointer;
    transition: transform .24s ease, box-shadow .24s ease;
    overflow: hidden;
}
.wf-node:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.wf-node::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    border: 4px solid transparent;
    border-right: none;
    border-radius: 16px 0 0 16px;
}
.wf-node::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    border: 4px solid #e0e0e0;
    border-left: none;
    border-radius: 0 16px 16px 0;
}
.wf-node.node-a::before { border-color: #e91e63; border-right: none; }
.wf-node.node-b::before { border-color: #ffc107; border-right: none; }
.wf-node.node-c::before { border-color: #9c27b0; border-right: none; }
.wf-node.node-child::before { border-color: #00bcd4; border-right: none; }
.wf-node.selected {
    outline: 3px solid rgba(175,120,19,.35);
    outline-offset: 2px;
}
.mud-theme-dark .wf-node {
    background: #252525;
}
.mud-theme-dark .wf-node::after {
    border-color: rgba(255,255,255,.18);
}

.wf-node-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
}
.wf-node-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 8px;
    background: #fafafa;
}
.mud-theme-dark .wf-node-right {
    background: #1f1f1f;
}
.wf-node-title {
    font-size: 1rem;
    font-weight: 800;
    color: #333;
}
.wf-node-subtitle {
    font-size: .72rem;
    font-weight: 700;
    color: #777;
    margin-top: 2px;
    letter-spacing: .4px;
}
.wf-node.node-a .wf-node-title { color: #e91e63; }
.wf-node.node-b .wf-node-title { color: #e0a800; }
.wf-node.node-c .wf-node-title { color: #9c27b0; }
.wf-node.node-child .wf-node-title { color: #00acc1; }

.wf-node-info {
    text-align: start;
    margin-top: .5rem;
}
.wf-info-title {
    font-size: .8rem;
    font-weight: 700;
    color: #333;
}
.wf-info-desc {
    font-size: .72rem;
    color: #777;
    margin-top: 3px;
    line-height: 1.35;
}

/* Workflow details dedicated page style */
.wf2-header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.wf2-title h1 { font-size: 1.35rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .2rem; }
.wf2-title p { font-size: .86rem; color: var(--text-muted); margin: 0; }
.wf2-meta-wrap { display: flex; gap: .75rem; flex-wrap: wrap; }
.wf2-meta-item {
    background: #f1f5f9;
    border-radius: 8px;
    padding: .65rem .9rem;
    border-inline-start: 4px solid var(--color-c);
}
.wf2-meta-item.pink { border-inline-start-color: var(--color-a); }
.wf2-meta-item.amber { border-inline-start-color: var(--color-b); }
.wf2-meta-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.wf2-meta-value { font-size: .92rem; font-weight: 700; color: var(--color-primary); }

.wf2-chart-container {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto 1.4rem;
}
.wf2-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}
.wf2-column-3 { gap: 1.3rem; }
.wf2-lines-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.wf2-node-wrapper { width: 250px; }
.wf2-node {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    width: 100%;
    min-height: 80px;
    display: flex;
    position: relative;
    cursor: pointer;
    transition: all .25s ease;
    overflow: hidden;
}
.wf2-node:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 20px rgba(15,23,42,.08); }
.wf2-node::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
}
.wf2-node.node-a::before { background: var(--color-a); }
.wf2-node.node-b::before { background: var(--color-b); }
.wf2-node.node-c::before { background: var(--color-c); }
.wf2-node.node-child::before { background: var(--color-child); }
.wf2-node-right {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-color);
    background: #fafafa;
}
.wf2-node-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 12px;
}
.wf2-node-title { font-size: .95rem; font-weight: 700; color: var(--text-main); }
.wf2-node-subtitle { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.wf2-node-info { text-align: right; margin-top: .45rem; width: 100%; }
.wf2-info-title { font-size: .78rem; font-weight: 700; color: #475569; }
.wf2-info-desc { font-size: .72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }

.wf2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf2-modal-content {
    background: var(--bg-card);
    border-radius: 14px;
    width: 92%;
    max-width: 520px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.wf2-modal-header {
    padding: 1rem 1.2rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wf2-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }
.wf2-modal-subtitle { font-size: .8rem; color: var(--text-muted); }
.wf2-modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); }
.wf2-modal-body { padding: 1rem 1.2rem; }
.wf2-detail-row {
    display: flex;
    margin-bottom: .7rem;
    border-bottom: 1px dashed #f1f5f9;
    padding-bottom: .55rem;
}
.wf2-detail-row .k { flex: 0 0 110px; font-size: .83rem; font-weight: 700; color: var(--text-muted); }
.wf2-detail-row .v { flex: 1; font-size: .88rem; font-weight: 600; color: var(--text-main); }

/* Within-branch recipient: disabled direct manager (no HR job structure) */
.recipient-option-disabled {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
    padding: 0.1rem 0;
}
.recipient-option-disabled-title,
.recipient-option-disabled-hint {
    color: #dc2626 !important;
}
.recipient-option-disabled-title {
    font-weight: 600;
}
.recipient-option-disabled-hint {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.95;
}
.mud-list-item-disabled .recipient-option-disabled-title,
.mud-list-item-disabled .recipient-option-disabled-hint {
    color: #dc2626 !important;
}

/* Recipient autocomplete — full hint visible in dropdown, clean label in field */
.recipient-option-select .mud-popover .mud-list-item {
    min-height: auto !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}
.recipient-option-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.4;
    width: 100%;
    white-space: normal;
}
.recipient-option-enabled-title {
    font-weight: 600;
    color: var(--text-main);
}
.recipient-option-enabled-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.recipient-option-item-disabled .recipient-option-disabled-title,
.recipient-option-item-disabled .recipient-option-disabled-hint {
    color: #dc2626 !important;
}
.recipient-option-item-disabled .recipient-option-disabled-hint {
    font-size: 0.82rem;
    font-weight: 500;
}

/* Employee search autocomplete */
.searchable-select-modern .mud-input-outlined {
    border-radius: 12px;
}
.employee-search-bar {
    padding: 0.25rem 0 0.5rem;
}
.employee-search-select .mud-input-root {
    background: #fff;
}
.mud-theme-dark .employee-search-select .mud-input-root {
    background: rgba(255, 255, 255, 0.04);
}

/* Scope wizard modal options */
.scope-wizard-dialog .mud-dialog-content { padding-top: 8px; }
.scope-wizard-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    text-align: right;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    font: inherit;
    color: inherit;
}
.scope-wizard-option:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transform: translateY(-1px);
}
.scope-wizard-option-primary { border-color: rgba(25,118,210,.35); background: linear-gradient(180deg,#f7fbff,#fff); }
.scope-wizard-option-secondary { border-color: rgba(0,150,136,.3); background: linear-gradient(180deg,#f5fffc,#fff); }
.scope-wizard-option-warning { border-color: rgba(237,108,2,.35); background: linear-gradient(180deg,#fffaf3,#fff); }
.scope-wizard-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.04);
    font-weight: 700;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}
.scope-wizard-option-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.scope-wizard-option-text strong { font-size: 1.05rem; font-weight: 700; }
.scope-wizard-option-text small { color: var(--mud-palette-text-secondary); line-height: 1.45; }

/* Recipient option custom dropdown */
.recipient-option-select-wrap { position: relative; }
.recipient-option-dropdown {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 1400;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    background: var(--mud-palette-surface, #fff);
}
.recipient-option-dropdown-scroll {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.recipient-option-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: right;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.recipient-option-row:hover { background: rgba(25,118,210,.06); }
.recipient-option-row.is-selected { background: rgba(25,118,210,.1); }
.recipient-option-row.is-disabled { opacity: .65; cursor: not-allowed; }
.recipient-option-row.is-disabled:hover { background: transparent; }

/* Notification verify employee picker */
.notification-verify-results {
    border-radius: 12px;
    overflow: hidden;
}
.notification-verify-results-scroll {
    max-height: 280px;
    overflow-y: auto;
}
.notification-verify-user-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: right;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.notification-verify-user-row:hover { background: rgba(25,118,210,.06); }
.notification-verify-user-row.is-selected { background: rgba(25,118,210,.12); }
.notification-verify-user-name { font-weight: 600; }
.notification-verify-user-meta { font-size: .8rem; color: var(--mud-palette-text-secondary); }

/* === Official NUPA letter layout (match paper template image 2) === */
.letter-formal.letter-nupa,
.letter-formal.letter-nupa * {
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif;
}
.letter-divider-gold,
.letter-head-rule {
    border: none !important;
    border-top: 1px solid #1a1a1a !important;
    margin: 0 !important;
    width: 100% !important;
}
.letter-head-rule-top { display: none !important; }
.letter-head-rule-bottom { margin: 0.15rem 0 0.75rem 0 !important; }
.letter-logo-gov,
.letter-logo-company {
    width: 98px !important;
    height: 98px !important;
    object-fit: contain !important;
}
.letter-org-main {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 0.2rem 0 !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
}
.letter-org-sub {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 0.3rem 0 !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
}
.letter-org-en {
    font-size: 0.88rem !important;
    color: #444 !important;
    line-height: 1.35 !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
}
.letter-head-institution-text { display: none !important; }
.letter-from { display: none !important; }
.letter-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    font-size: 1rem !important;
    margin: 0.45rem 0 1.75rem 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}
.letter-meta-ref { text-align: right !important; flex: 1 1 auto !important; }
.letter-meta-date { text-align: left !important; flex: 0 0 auto !important; direction: rtl !important; }
.letter-meta-value { font-weight: 700 !important; }
.letter-to {
    display: block !important;
    width: 100% !important;
    margin: 1.35rem 0 0.4rem 0 !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: right !important;
    direction: rtl !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
}
.letter-to-label { display: none !important; }
.letter-to-value {
    display: inline !important;
    font-weight: 700 !important;
}
.letter-subject-line {
    display: block !important;
    width: 100% !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0.55rem 0 1.35rem 0 !important;
    text-align: right !important;
    direction: rtl !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
}
.letter-signer-honorific {
    margin: 0 0 0.35rem 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
}
.letter-signer-name {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
    text-align: center !important;
}
.letter-signer-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-top: 0.4rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
.letter-body-inner,
.letter-body-inner p {
    text-align: justify !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    font-family: 'Noor Sultan', 'Sultan Medium', var(--font-ar), sans-serif !important;
}
.letter-bottom-row {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1.1rem !important;
    min-height: 150px !important;
    width: 100% !important;
    margin-top: auto !important;
    margin-bottom: 1.75rem !important;
    direction: rtl !important;
}
.letter-signature-block {
    position: relative !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: fit-content !important;
    max-width: 85% !important;
    z-index: 1 !important;
    align-self: center !important;
}
.letter-copy-to-block {
    position: static !important;
    align-self: flex-start !important; /* يمين في RTL */
    text-align: right !important;
    max-width: 55% !important;
    width: auto !important;
    margin: 0 !important;
    margin-top: 0.25rem !important;
    z-index: 2 !important;
    font-size: 0.82rem !important;
}
.letter-copy-to-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.35rem !important;
    direction: rtl !important;
}
.letter-copy-to-title-icon {
    display: inline-flex !important;
    color: #555 !important;
    flex: 0 0 auto !important;
}
.letter-copy-to-title-icon svg { width: 12px; height: 12px; display: block; }
.letter-copy-to-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    direction: rtl !important;
    margin: 0.12rem 0 !important;
}
.letter-copy-to-icon {
    display: inline-flex !important;
    color: #666 !important;
    flex: 0 0 auto !important;
}
.letter-copy-to-icon svg { width: 11px; height: 11px; display: block; }
.letter-copy-to-check,
.letter-copy-to-line { display: none !important; }
.letter-copy-to-text { white-space: nowrap; font-weight: 600; }
.letter-footer-svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 auto !important;
    display: block !important;
}
.letter-footer-globe { color: #3b82f6 !important; }
.letter-footer-pin { color: #e11d48 !important; }
.letter-footer-nupa {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: ltr !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    font-size: 0.8rem !important;
}
.letter-footer-fb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 2px !important;
    background: #1877f2 !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
}