/* Consolidated base layer. Source files: reference-theme.css, msar-classic-theme.css */

/* ---- reference-theme.css ---- */
:root {
    --brand-navy: #0A192F;
    --brand-gold: #C5A059;
    --brand-gold-dark: #a88446;
    --text-main: #2D3748;
    --text-muted: #718096;
    --bg-light: #F8FAFC;
    --bg-soft: #F3F6FA;
    --border: #E2E8F0;
    --white: #ffffff;
    --danger: #9B2C2C;
    --success: #166534;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-sm: 0 8px 24px rgba(10, 25, 47, 0.06);
    --shadow-md: 0 16px 40px rgba(10, 25, 47, 0.08);
    --shadow-lg: 0 22px 50px rgba(10, 25, 47, 0.10);
    --step-anim: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--system-font-family, var(--font-family-base, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif));
    background: var(--bg-light);
    color: var(--text-main);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea, table, th, td, label, a, span, p, div, strong, small, h1, h2, h3, h4 {
    font-family: var(--system-font-family, var(--font-family-base, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif));
}
body.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(33,20,13,1) 0%, rgba(33,20,13,.95) 58%, rgba(197,160,89,.95) 100%);
}
.dashboard {
    display: grid;
    grid-template-columns: 350px 1fr;
    min-height: 100vh;
    background: var(--white);
}
.side-info {
    background: var(--brand-navy);
    color: var(--white);
    padding: 42px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow-y: auto;
}
.side-info h1, .brand-title {
    font-weight: 600;
    font-size: 1.65rem;
    border-right: 4px solid var(--brand-gold);
    padding-right: 14px;
    margin: 0 0 10px;
    line-height: 1.4;
}
.brand-subtitle, .side-info .intro-copy {
    opacity: 0.78;
    font-size: 0.92rem;
    line-height: 1.9;
}
.track-list {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}
.track-item {
    position: relative;
    padding: 0 30px 32px 0;
    border-right: 2px solid rgba(255,255,255,0.11);
    transition: 0.3s;
    color: rgba(255,255,255,0.48);
    font-size: 0.95rem;
    line-height: 1.8;
}
.track-item.active {
    color: var(--brand-gold);
    border-right-color: var(--brand-gold);
    font-weight: 600;
}
.track-item::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    right: -7px;
    width: 12px;
    height: 12px;
    background: var(--brand-navy);
    border: 2px solid currentColor;
    border-radius: 50%;
    z-index: 2;
}
.side-footer {
    font-size: 0.78rem;
    opacity: 0.55;
    line-height: 1.9;
}
.main-form {
    padding: 40px 4%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}
.main-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.brand-inline {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-inline img, .logo-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border);
    padding: 8px;
}
.brand-inline h2 {
    margin: 0;
    color: var(--brand-navy);
    font-size: 1.35rem;
    line-height: 1.35;
}
.brand-inline p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(197,160,89,.26);
    background: rgba(197,160,89,.08);
    color: var(--brand-gold-dark);
    font-weight: 600;
    font-size: 0.92rem;
}
.badge-soft::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
}

.module-switcher-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fff 0%, #fff7ed 100%);
    box-shadow: var(--shadow-sm);
}
.module-switcher-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
}
.module-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.module-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--brand-navy);
    font-weight: 600;
    transition: .2s ease;
    box-shadow: 0 4px 14px rgba(33, 20, 13, 0.04);
}
.module-tab:hover {
    border-color: rgba(197,160,89,.45);
    color: var(--brand-navy);
    transform: translateY(-1px);
}
.module-tab.active {
    background: var(--brand-navy);
    color: var(--white);
    border-color: var(--brand-navy);
    box-shadow: 0 10px 24px rgba(33, 20, 13, 0.18);
}
.module-page-title {
    width: 100%;
    justify-content: space-between;
}
.module-sidebar-card {
    backdrop-filter: blur(6px);
}
.module-sidebar-nav {
    margin-top: 18px;
}
.small-muted {
    font-size: .8rem;
    font-weight: 600;
}
.form-section { display: none; max-width: 980px; animation: slideIn var(--step-anim); }
.form-section.active { display: block; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
.section-head { margin-bottom: 30px; }
.section-head h2 {
    font-size: 1.8rem;
    color: var(--brand-navy);
    margin: 0 0 8px;
    line-height: 1.4;
    font-weight: 600;
}
.section-head p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.85; margin: 0; }
.grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.full-width { grid-column: span 2; }
.field { margin-bottom: 4px; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.86rem; color: #4A5568; }
.input-ctrl, .input, .select, .textarea {
    width: 100%;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    transition: all 0.2s;
    background: var(--bg-light);
    font-family: inherit;
    color: var(--text-main);
}
.textarea { min-height: 120px; resize: vertical; }
.input-ctrl:focus, .input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-navy);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(33, 20, 13, 0.05);
}
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7c5b4c 50%), linear-gradient(135deg, #7c5b4c 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px); background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 34px; }
.action-bar {
    margin-top: 28px;
    padding: 26px 0 0;
    display: flex;
    gap: 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.btn {
    padding: 14px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    border: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-primary { background: var(--brand-navy); color: #fff; }
.btn-primary:hover { background: #162a4d; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.btn-ghost, .btn-light { background: transparent; color: #718096; border: 1px solid var(--border); }
.btn-ghost:hover, .btn-light:hover { background: #f1f5f9; }
.btn-danger { background: #9B2C2C; color: #fff; }
.btn-success { background: #166534; color: #fff; }
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; font-weight: 600; line-height: 1.8; }
.alert-success { background: #EDFDF3; color: #166534; }
.alert-error { background: #FEF2F2; color: #991B1B; }
.chip, .pill, .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(197,160,89,.20);
    background: rgba(197,160,89,.10);
    color: var(--brand-gold-dark);
    font-weight: 600;
    font-size: 0.86rem;
}
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.section-title { margin: 0 0 12px; color: var(--brand-navy); font-size: 1.18rem; }
.muted { color: var(--text-muted); line-height: 1.8; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi, .kpi-card, .mini-card {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
}
.kpi .label, .kpi-label { color: var(--text-muted); font-size: 0.86rem; }
.kpi .value, .kpi-value { font-size: 1.7rem; font-weight: 600; color: var(--brand-navy); margin-top: 6px; }
.table-wrap { overflow: auto; width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: top; font-size: 0.93rem; }
th { background: var(--bg-light); color: var(--brand-navy); font-weight: 600; }
.metric-bar, .bar { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.metric-bar span, .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-gold), var(--brand-navy)); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.option-item { position: relative; }
.option-item input { position: absolute; opacity: 0; pointer-events: none; }
.option-card {
    display: block;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    background: var(--bg-light);
    cursor: pointer;
    transition: 0.2s;
    min-height: 88px;
}
.option-item input:checked + .option-card {
    border-color: var(--brand-gold);
    background: rgba(197,160,89,.10);
    box-shadow: 0 0 0 4px rgba(197,160,89,.10);
}
.option-card strong { display: block; color: var(--brand-navy); font-size: 0.96rem; margin-bottom: 6px; }
.option-card span { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; display: block; }
.status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.status-list li { padding: 12px 14px; border-radius: 14px; background: var(--bg-light); border: 1px solid var(--border); }
.sidebar-nav { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.sidebar-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    transition: 0.2s;
    font-size: 0.98rem;
    font-weight: 600;
}
.sidebar-nav a.active, .sidebar-nav a:hover { background: rgba(197,160,89,.15); color: #fff; }
.no-print {}
.print-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.summary-box, .insight {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--bg-light);
    border: 1px dashed rgba(197,160,89,.35);
    line-height: 2;
}
@media (max-width: 1200px) {
    .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .dashboard { grid-template-columns: 1fr; }
    body { overflow: auto; }
    .side-info { padding: 28px 24px; min-height: auto; position: relative; }
    .track-list { display: none; }
    .main-form { padding: 30px 20px; }
    .grid-fields, .grid-4, .grid-3, .grid-2, .filters, .option-grid { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
}
@media print {
    .no-print, .action-bar, .main-topbar, .sidebar-nav { display: none !important; }
    .dashboard { display: block; }
    .side-info { min-height: auto; position: static; }
    .card { box-shadow: none; }
}


:root {
  --question-bg-odd: #f3f6fb;
  --question-bg-even: #edf2f8;
  --question-border: #d6dfeb;

  --option-bg: #eef2f7;
  --option-border: #d3dce7;
  --option-hover: #e6edf5;
  --option-selected: #dde8f6;

  --evidence-bg: #edf2f8;
  --evidence-border: #c7d7ea;
}

/* =========================
   ألوان أغمق لبطاقات الأسئلة
   ========================= */

.question-card,
.question-block,
.eval-question-card {
  background: #f6eef1 !important;
  border: 1px solid #d9b2c1 !important;
  box-shadow: inset 0 0 0 1px #cf9fb0;
}

/* لو عندك بطاقات متناوبة */
.question-card:nth-of-type(even),
.question-block:nth-of-type(even),
.eval-question-card:nth-of-type(even) {
  background: #f3eaee !important;
  border-color: #d3a7b7 !important;
}

/* عنوان كود السؤال الصغير */
.question-card .question-code,
.question-block .question-code,
.eval-question-card .question-code,
.question-badge,
.question-tag {
  border: 1px solid #d3a7b7 !important;
  background: #f8f1f4 !important;
}

/* الخيارات */
.answer-option,
.option-card {
  background: #eef2f6 !important;
  border: 1px solid #c3d0de !important;
}

.answer-option:hover,
.option-card:hover {
  background: #e5ebf2 !important;
  border-color: #aebfd2 !important;
}

/* الخيار المحدد */
.answer-option.selected,
.answer-option.is-selected,
.option-card.selected,
.option-card.is-selected {
  background: #dce6f2 !important;
  border-color: #8faaca !important;
  box-shadow: inset 0 0 0 1px #7f9cbe;
}

/* منطقة الشواهد */
.evidence-box,
.evidence-container,
.question-evidence-box {
  background: #f3f6fb !important;
  border: 1px dashed #9eb7d6 !important;
}
.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: #c2410c;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-inline-start: 8px;
}
.badge-warning {
    background: #fff3cd;
    border: 1px solid #f6d37b;
    color: #92400e;
}
.timeline {
    display: grid;
    gap: 12px;
}
.timeline-item {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
}

/* Cursor-following help tooltips: keep forms clean and move explanations out of the layout. */
.label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(197,160,89,.45);
    background: rgba(197,160,89,.10);
    color: var(--brand-gold-dark);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    user-select: none;
}
.help-dot:focus {
    outline: 2px solid rgba(197,160,89,.45);
    outline-offset: 2px;
}
#cursor-help-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: min(340px, calc(100vw - 24px));
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(33,20,13,.96);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 42px rgba(33,20,13,.24);
    font-size: .86rem;
    line-height: 1.8;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}
#cursor-help-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.compact-hints {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Sprint 8: visual Workflow designer */
.workflow-designer-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(33,20,13,.04), rgba(197,160,89,.08));
}
.workflow-stage-flow {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}
.workflow-stage-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 10px 28px rgba(33,20,13,.05);
    position: relative;
}
.workflow-stage-card::after {
    content: '';
    position: absolute;
    right: 41px;
    bottom: -15px;
    width: 2px;
    height: 15px;
    background: var(--border);
}
.workflow-stage-card:last-child::after { display: none; }
.workflow-stage-card.is-ready { border-color: rgba(22,163,74,.25); background: linear-gradient(180deg, #fff, rgba(240,253,244,.55)); }
.workflow-stage-card.has-warning { border-color: rgba(217,119,6,.30); background: linear-gradient(180deg, #fff, rgba(255,251,235,.70)); }
.workflow-stage-card.is-disabled { opacity: .72; filter: grayscale(.2); }
.workflow-stage-number {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-navy);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(33,20,13,.16);
}
.workflow-stage-main { min-width: 0; }
.workflow-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}
.workflow-health-badge.ok { background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0; }
.workflow-health-badge.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.workflow-template-list { display: grid; gap: 12px; max-height: 620px; overflow: auto; padding-inline-end: 4px; }
@media (max-width: 1000px) {
    .workflow-stage-card { grid-template-columns: 1fr; }
    .workflow-stage-card::after { display: none; }
}

/* Sprint 10: request details, visual timeline, and clean activity stream */
.request-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(33,20,13,.08);
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(33,20,13,.96), rgba(80,43,26,.94));
    color: #fff;
    box-shadow: 0 22px 54px rgba(33,20,13,.16);
}
.request-detail-kicker {
    color: rgba(255,255,255,.68);
    font-size: .86rem;
    margin-bottom: 8px;
}
.request-detail-hero h2 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.45;
}
.request-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.request-detail-meta span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.80);
    font-size: .84rem;
}
.request-detail-meta strong { color: #fff; }
.request-detail-hero-side {
    min-width: 235px;
    display: grid;
    align-content: space-between;
    justify-items: end;
    gap: 14px;
}
.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .84rem;
    border: 1px solid rgba(255,255,255,.15);
}
.status-chip.success { background: #ecfdf5; color: #047857; }
.status-chip.warning { background: #fffbeb; color: #92400e; }
.status-chip.danger { background: #fef2f2; color: #b91c1c; }
.status-chip.info { background: #fff7ed; color: #e84a23; }
.status-chip.neutral { background: #f8fafc; color: #475569; }
.request-progress-inline {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.88);
}
.request-progress-inline-bar {
    width: 160px;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
}
.request-progress-inline-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-gold);
}
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(33,20,13,.05);
}
.metric-card span {
    display: block;
    color: var(--text-muted);
    font-size: .84rem;
    margin-bottom: 8px;
}
.metric-card strong {
    display: block;
    color: var(--brand-navy);
    font-size: 1.05rem;
}
.metric-success { color: #047857 !important; }
.metric-danger { color: #be123c !important; }
.section-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.request-flow-card { overflow: hidden; }
.request-stage-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.request-stage-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(33,20,13,.05);
}
.request-stage-card::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--border);
}
.request-stage-card:first-child::after { display: none; }
.request-stage-marker span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 900;
    border: 1px solid #e2e8f0;
}
.request-stage-card.is-completed { border-color: #bbf7d0; background: linear-gradient(180deg, #fff, #f0fdf4); }
.request-stage-card.is-current { border-color: #f0c9ae; background: linear-gradient(180deg, #fff, #fff7ed); box-shadow: 0 18px 38px rgba(255,90,47,.10); }
.request-stage-card.is-returned { border-color: #fde68a; background: linear-gradient(180deg, #fff, #fffbeb); }
.request-stage-card.is-rejected { border-color: #fecaca; background: linear-gradient(180deg, #fff, #fef2f2); }
.request-stage-card.is-completed .request-stage-marker span { background: #dcfce7; color: #047857; border-color: #86efac; }
.request-stage-card.is-current .request-stage-marker span { background: #ffe6d5; color: #e84a23; border-color: #f2b58c; }
.request-stage-card.is-returned .request-stage-marker span { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.request-stage-card.is-rejected .request-stage-marker span { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.request-stage-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.request-stage-top h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--brand-navy);
}
.request-stage-top span {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(33,20,13,.06);
    font-size: .76rem;
    font-weight: 800;
    color: #334155;
}
.request-stage-meta {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.7;
}
.request-stage-decision {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.76);
    border: 1px dashed rgba(33,20,13,.10);
    color: #334155;
}
.request-stage-decision span { color: var(--text-muted); margin-inline-start: 8px; }
.request-stage-decision p { margin: 7px 0 0; white-space: pre-wrap; line-height: 1.8; }
.dynamic-value-group {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.dynamic-value-group h3 {
    margin: 0 0 12px;
    color: var(--brand-navy);
    font-size: .98rem;
}
.span-full { grid-column: 1 / -1; }
.compact-form-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}
.compact-list {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}
.activity-mini {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px;
    background: #fff;
}
.activity-mini span {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .82rem;
}
.activity-mini p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.85; }
.activity-mini.success { background: #f0fdf4; border-color: #bbf7d0; }
.activity-mini.warning { background: #fffbeb; border-color: #fde68a; }
.activity-mini.neutral { background: #f8fafc; }
.activity-stream {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}
.activity-stream-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
}
.activity-stream-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: #f1f5f9;
    color: #475569;
}
.activity-stream-item.success { border-color: #bbf7d0; background: #f0fdf4; }
.activity-stream-item.warning { border-color: #fde68a; background: #fffbeb; }
.activity-stream-item.danger { border-color: #fecaca; background: #fef2f2; }
.activity-stream-item.info { border-color: #f0c9ae; background: #fff7ed; }
.activity-stream-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.activity-stream-title span,
.activity-stream-meta {
    color: var(--text-muted);
    font-size: .82rem;
}
.activity-stream-item p {
    margin: 8px 0 0;
    white-space: pre-wrap;
    line-height: 1.85;
}
.detail-collapsible summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--brand-navy);
    list-style: none;
}
.detail-collapsible summary::-webkit-details-marker { display: none; }
.detail-collapsible summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-end: 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
}
.detail-collapsible[open] summary::before { content: '−'; }
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .request-detail-hero { grid-template-columns: 1fr; }
    .request-detail-hero-side { justify-items: stretch; }
}
@media (max-width: 720px) {
    .grid-4 { grid-template-columns: 1fr; }
    .request-stage-card { grid-template-columns: 1fr; }
    .request-stage-card::after { display: none; }
    .request-progress-inline-bar { width: 100%; }
}
@media print {
    .request-detail-hero { color: #21140d; background: #fff; box-shadow: none; }
    .status-chip { border: 1px solid #e2e8f0; }
    .request-stage-card, .metric-card, .activity-stream-item, .activity-mini { box-shadow: none; break-inside: avoid; }
}

/* Sprint 11: operational approval inbox */
.approval-inbox-hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(33,20,13,.05), rgba(197,160,89,.09));
}
.approval-inbox-hero-side {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
}
.inbox-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.inbox-metric {
    text-decoration: none;
    color: var(--text);
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 10px 24px rgba(33,20,13,.05);
    display: grid;
    gap: 6px;
}
.inbox-metric span { color: var(--muted); font-size: .82rem; }
.inbox-metric strong { font-size: 1.35rem; }
.inbox-metric.active { border-color: rgba(197,160,89,.55); box-shadow: 0 12px 26px rgba(197,160,89,.12); }
.inbox-metric.danger strong { color: #b91c1c; }
.inbox-metric.warning strong { color: #92400e; }
.inbox-filter-card { margin-top: 14px; }
.inbox-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr minmax(180px, 1.2fr) auto;
    gap: 12px;
    align-items: end;
}
.inbox-search-field { min-width: 0; }
.inbox-filter-actions { margin: 0; align-self: end; }
.approval-inbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.approval-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(33,20,13,.06);
    display: grid;
    gap: 13px;
    position: relative;
    overflow: hidden;
}
.approval-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #16a34a;
}
.approval-card.priority-danger::before { background: #dc2626; }
.approval-card.priority-warning::before { background: #d97706; }
.approval-card.priority-info::before { background: #ff5a2f; }
.approval-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.approval-card-kicker {
    font-size: .78rem;
    color: var(--brand-gold-dark);
    font-weight: 800;
    margin-bottom: 5px;
}
.approval-card h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.45;
}
.approval-card-subtitle {
    color: var(--muted);
    font-size: .86rem;
    margin-top: 5px;
}
.approval-card-stage {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(33,20,13,.06);
}
.approval-card-stage span { font-weight: 800; }
.approval-card-stage small { color: var(--muted); white-space: nowrap; }
.approval-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.approval-card-facts div {
    padding: 11px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border);
}
.approval-card-facts span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    margin-bottom: 4px;
}
.approval-card-facts strong {
    display: block;
    overflow-wrap: anywhere;
}
.approval-card-body {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
    min-height: 42px;
}
.approval-card-actions {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 4px;
}
.quick-action-details {
    position: relative;
}
.quick-action-details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
}
.quick-action-details > summary::-webkit-details-marker { display: none; }
.quick-action-form {
    position: absolute;
    z-index: 30;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    width: min(390px, 82vw);
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 22px 48px rgba(33,20,13,.18);
}
.quick-action-form label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
}
.empty-inbox-card { margin-top: 18px; text-align: center; }
@media (max-width: 1180px) {
    .inbox-metric-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
    .inbox-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inbox-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .approval-inbox-grid { grid-template-columns: 1fr; }
    .approval-card-top, .approval-card-stage { flex-direction: column; align-items: flex-start; }
    .approval-card-stage small { white-space: normal; }
}
@media (max-width: 640px) {
    .inbox-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inbox-filter-grid { grid-template-columns: 1fr; }
    .approval-card-facts { grid-template-columns: 1fr; }
    .quick-action-form { position: static; width: auto; margin-top: 10px; }
}


/* Sprint 14/15: module activation, RTL selects, collapsible sidebar, and advanced request timeline */
select,
.select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #7c5b4c 50%), linear-gradient(135deg, #7c5b4c 50%, transparent 50%);
    background-position: left 18px center, left 12px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-left: 44px !important;
    padding-right: 14px;
}

.module-activation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.module-toggle-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    transition: .22s ease;
}
.module-toggle-card.is-enabled { border-color: #bbf7d0; background: #f0fdf4; }
.module-toggle-card.is-disabled { opacity: .72; background: #f8fafc; }
.module-toggle-card.is-locked { border-style: dashed; }
.module-toggle-main strong { display: block; color: var(--brand-navy); margin-bottom: 5px; }
.module-toggle-main small { display: block; color: var(--text-muted); line-height: 1.7; }
.module-toggle-control {
    display: grid;
    justify-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--text-muted);
}
.module-toggle-control input { width: 20px; height: 20px; }

.admin-sidebar-toggle {
    position: sticky;
    top: 12px;
    z-index: 15;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    color: #fff;
    cursor: pointer;
    margin-bottom: 14px;
    font-size: 1.15rem;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-nav .nav-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    font-weight: 900;
}
body.admin-sidebar-collapsed .dashboard {
    grid-template-columns: 94px 1fr;
}
body.admin-sidebar-collapsed .side-info {
    padding: 22px 16px;
}
body.admin-sidebar-collapsed .brand-inline,
body.admin-sidebar-collapsed .module-sidebar-card,
body.admin-sidebar-collapsed .side-footer,
body.admin-sidebar-collapsed .sidebar-nav .nav-text,
body.admin-sidebar-collapsed .sidebar-nav .notification-badge,
body.admin-sidebar-collapsed .side-info .card:not(.module-sidebar-card) {
    display: none !important;
}
body.admin-sidebar-collapsed .sidebar-nav a {
    justify-content: center;
    padding-inline: 8px;
}
body.admin-sidebar-collapsed .sidebar-nav .nav-icon {
    margin: 0;
}

.request-flow-card-advanced {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
}
.request-stage-track-vertical {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
    padding-inline-start: 0;
    padding-inline-end: 34px;
}
.request-stage-track-vertical::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 20px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(16,185,129,.75), rgba(245,158,11,.75), rgba(159,133,117,.55));
}
.request-stage-track-vertical .request-stage-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 18px 18px 20px;
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(33,20,13,.06);
    transform: translateZ(0);
}
.request-stage-track-vertical .request-stage-card::after { display: none; }
.request-stage-track-vertical .request-stage-marker {
    position: relative;
    z-index: 2;
}
.request-stage-track-vertical .request-stage-marker span {
    width: 46px;
    height: 46px;
    box-shadow: 0 0 0 8px #fff;
    font-size: 1rem;
}
.request-stage-card.is-completed .request-stage-top h3 { color: #047857; }
.request-stage-card.is-current {
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff 0%, #fff7ed 100%);
    box-shadow: 0 20px 44px rgba(234,88,12,.12);
}
.request-stage-card.is-current .request-stage-marker span {
    background: #ffedd5;
    color: #c2410c;
    border-color: #fb923c;
}
.request-stage-card.is-current .request-stage-top h3 { color: #c2410c; }
.request-stage-card.is-pending {
    background: #fff;
}
.request-stage-card.is-pending .request-stage-content {
    opacity: .78;
}
.request-stage-subtitle {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
}
.request-stage-track-vertical .request-stage-meta {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 12px;
}
.request-stage-track-vertical .request-stage-meta span {
    background: rgba(248,250,252,.78);
    border: 1px solid rgba(226,232,240,.85);
    border-radius: 12px;
    padding: 8px 10px;
}
.request-stage-track-vertical .request-stage-meta strong {
    display: block;
    color: #334155;
    font-size: .72rem;
    margin-bottom: 3px;
}
.current-stage-callout {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    display: grid;
    gap: 4px;
    line-height: 1.8;
}
.current-stage-callout strong { color: #c2410c; }
.request-stage-decision {
    border-style: solid;
    background: rgba(255,255,255,.88);
}
@media (max-width: 900px) {
    body.admin-sidebar-collapsed .dashboard,
    .dashboard {
        grid-template-columns: 1fr;
    }
    .side-info { position: relative; min-height: auto; }
    .request-stage-track-vertical {
        padding-inline-end: 24px;
    }
    .request-stage-track-vertical::before { right: 14px; }
    .request-stage-track-vertical .request-stage-card {
        grid-template-columns: 42px minmax(0,1fr);
    }
    .request-stage-track-vertical .request-stage-marker span {
        width: 38px;
        height: 38px;
        box-shadow: 0 0 0 6px #fff;
    }
}

/* Sprint 17: secure bulk workflow actions */
.bulk-action-panel {
    margin-top: 14px;
    border-color: rgba(255, 90, 47, .18);
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
}
.bulk-action-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.bulk-select-all,
.bulk-card-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    color: #334155;
}
.bulk-action-form {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr) auto;
    align-items: end;
    gap: 12px;
}
.bulk-action-buttons {
    margin: 0;
    align-items: end;
    flex-wrap: wrap;
}
.bulk-card-check {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(203,213,225,.9);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .78rem;
    box-shadow: 0 8px 18px rgba(33,20,13,.06);
}
.approval-card {
    position: relative;
}
.workflow-bulk-check,
#bulk-select-all {
    width: 16px;
    height: 16px;
    accent-color: #ff5a2f;
}
.bulk-action-form select option:disabled {
    color: #9f8575;
}
@media (max-width: 900px) {
    .bulk-action-form {
        grid-template-columns: 1fr;
    }
    .bulk-card-check {
        position: static;
        margin-bottom: 8px;
        width: fit-content;
    }
}

/* ==================================================
   Sprint 50 — UX Foundation / Responsive / PWA shell
   ================================================== */
:root {
    --ui-primary: var(--brand-navy, #21140d);
    --ui-danger: #b91c1c;
    --ui-success: #047857;
    --ui-warning: #b45309;
    --ui-info: #e84a23;
    --ui-neutral: #475569;
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 20px;
    --ui-radius-xl: 28px;
    --ui-shadow-card: 0 14px 34px rgba(33,20,13,.07);
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-font-sm: .84rem;
    --ui-font-md: .94rem;
    --ui-font-lg: 1.1rem;
    --ui-font-xl: 1.55rem;
}
html { overflow-x: hidden; }
body.ui-responsive-shell { min-width: 0; overflow-x: hidden; }
body.ui-responsive-shell .main-form,
body.ui-responsive-shell .dashboard,
body.ui-responsive-shell .card,
body.ui-responsive-shell .table-wrap { min-width: 0; }
.ui-page-header {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(226,232,240,.95);
    border-radius: var(--ui-radius-xl);
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
    box-shadow: var(--ui-shadow-card);
}
.ui-page-header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.ui-page-header h1 { margin: 0; color: var(--brand-navy); font-size: var(--ui-font-xl); line-height: 1.35; }
.ui-page-header p { margin: 8px 0 0; color: var(--text-muted); line-height: 1.85; max-width: 920px; }
.ui-page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ui-breadcrumbs { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; color:var(--text-muted); font-size:.84rem; }
.ui-breadcrumbs a { color: var(--brand-gold-dark); font-weight: 700; }
.ui-breadcrumb-separator { opacity:.5; }
.ui-card, .app-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-5);
    box-shadow: var(--ui-shadow-card);
}
.ui-status-badge, .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ui-status-badge::before, .status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}
.ui-status-success { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
.ui-status-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ui-status-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ui-status-info { background: #fff7ed; color: #e84a23; border-color: #f0c9ae; }
.ui-status-neutral { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.ui-stat-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; }
.ui-stat-card {
    display:grid;
    gap:8px;
    padding:17px;
    border-radius:20px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:0 12px 28px rgba(33,20,13,.05);
}
.ui-stat-card span { color:var(--text-muted); font-size:.84rem; }
.ui-stat-card strong { color:var(--brand-navy); font-size:1.55rem; line-height:1; }
.ui-stat-card small { color:var(--text-muted); line-height:1.7; }
.ui-stat-success { border-color:#bbf7d0; background:linear-gradient(180deg,#fff,#f0fdf4); }
.ui-stat-warning { border-color:#fde68a; background:linear-gradient(180deg,#fff,#fffbeb); }
.ui-stat-danger { border-color:#fecaca; background:linear-gradient(180deg,#fff,#fef2f2); }
.ui-stat-info { border-color:#f0c9ae; background:linear-gradient(180deg,#fff,#fff7ed); }
.ui-empty-state {
    display:grid;
    justify-items:center;
    gap:10px;
    padding:34px 20px;
    text-align:center;
    color:var(--text-muted);
    border:1px dashed #cbd5e1;
    border-radius:22px;
    background:#f8fafc;
}
.ui-empty-state h3 { margin:0; color:var(--brand-navy); }
.ui-empty-state p { margin:0; line-height:1.8; }
.ui-empty-icon { width:48px; height:48px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#eef2ff; color:#3730a3; font-weight:900; }
.ui-alert-banner { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; padding:14px 16px; border-radius:18px; margin-bottom:16px; line-height:1.8; border:1px solid transparent; }
.ui-alert-banner strong { margin-inline-end:4px; }
.ui-alert-info { background:#fff7ed; color:#1e40af; border-color:#f0c9ae; }
.ui-alert-success { background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
.ui-alert-warning { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.ui-alert-danger { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ui-timeline { display:grid; gap:12px; position:relative; }
.ui-timeline-item { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:14px; border:1px solid #e2e8f0; border-radius:18px; background:#fff; }
.ui-timeline-dot { width:18px; height:18px; border-radius:999px; margin-top:4px; background:currentColor; box-shadow:0 0 0 5px rgba(33,20,13,.05); }
.ui-timeline-item strong { display:block; color:var(--brand-navy); }
.ui-timeline-item small { display:block; margin-top:4px; color:var(--text-muted); }
.ui-timeline-item p { margin:8px 0 0; line-height:1.85; }
.ui-filter-panel { border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); overflow:hidden; }
.ui-filter-panel > summary { cursor:pointer; padding:16px 18px; font-weight:900; color:var(--brand-navy); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.ui-filter-panel > summary::-webkit-details-marker { display:none; }
.ui-filter-panel > summary::after { content:'⌄'; font-weight:900; transition:.2s ease; }
.ui-filter-panel[open] > summary::after { transform:rotate(180deg); }
.ui-filter-body { padding:0 18px 18px; }
.ui-mobile-cards { display:none; gap:12px; }
.ui-mobile-card { display:grid; gap:10px; border:1px solid var(--border); border-radius:18px; padding:15px; background:#fff; box-shadow:0 10px 24px rgba(33,20,13,.05); }
.ui-mobile-card-title { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.ui-mobile-card-title strong { color:var(--brand-navy); }
.ui-mobile-card-meta { color:var(--text-muted); font-size:.86rem; line-height:1.7; }
.ui-confirm-modal-backdrop {
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(33,20,13,.42);
    z-index:100000;
}
.ui-confirm-modal-backdrop.is-open { display:flex; }
.ui-confirm-modal {
    width:min(480px, 100%);
    background:#fff;
    border-radius:24px;
    padding:22px;
    box-shadow:0 28px 80px rgba(33,20,13,.28);
    border:1px solid rgba(255,255,255,.4);
}
.ui-confirm-modal h3 { margin:0 0 8px; color:var(--brand-navy); }
.ui-confirm-modal p { margin:0; color:var(--text-muted); line-height:1.8; }
.ui-confirm-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; justify-content:flex-end; }
.pwa-install-button { display:none; }
.pwa-install-button.is-visible { display:inline-flex; }
body.admin-sidebar-collapsed .dashboard { grid-template-columns: 98px 1fr; }
body.admin-sidebar-collapsed .side-info { padding-inline: 18px; }
body.admin-sidebar-collapsed .brand-inline > div,
body.admin-sidebar-collapsed .module-sidebar-card,
body.admin-sidebar-collapsed .side-footer,
body.admin-sidebar-collapsed .nav-text { display:none !important; }
body.admin-sidebar-collapsed .brand-inline { justify-content:center; }
body.admin-sidebar-collapsed .brand-inline img { width:52px; height:52px; }
body.admin-sidebar-collapsed .sidebar-nav a { display:flex; justify-content:center; padding:12px; }
body.admin-sidebar-collapsed .notification-badge { margin:0; position:absolute; transform:translate(-12px,-10px); }
.admin-sidebar-toggle { width:42px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }
.select { background-position: 18px calc(50% - 2px), 24px calc(50% - 2px); padding-inline-start: 38px; padding-inline-end: 14px; }
@media (max-width: 1200px) {
    .ui-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    body.ui-responsive-shell .main-form { padding: 18px 12px 86px; }
    body.ui-responsive-shell .side-info { padding: 18px 14px; border-radius:0 0 26px 26px; }
    body.ui-responsive-shell .main-topbar { gap: 12px; margin-bottom: 16px; }
    body.ui-responsive-shell .module-switcher-wrap { padding: 14px; border-radius:20px; }
    body.ui-responsive-shell .module-switcher { width:100%; overflow:auto; flex-wrap:nowrap; padding-bottom:4px; }
    body.ui-responsive-shell .module-tab { white-space:nowrap; padding:10px 14px; }
    .ui-page-header { padding:18px; border-radius:22px; }
    .ui-page-header h1 { font-size:1.25rem; }
    .ui-page-actions, .actions { width:100%; }
    .ui-page-actions .btn, .actions .btn, .actions button { flex:1 1 100%; min-height:44px; }
    .btn { min-height:44px; padding:12px 16px; }
    .field label { font-size:.9rem; }
    .input-ctrl, .input, .select, .textarea { min-height:46px; font-size:16px; }
    .card { padding:16px; border-radius:20px; }
    .ui-stat-grid { grid-template-columns:1fr; }
    .table-wrap { overflow-x:visible; }
    table.responsive-table, .table-wrap.responsive-table-wrap table { display:none; }
    .ui-mobile-cards { display:grid; }
    .filters { grid-template-columns:1fr !important; }
    .ui-filter-panel:not([open]) .ui-filter-body { display:none; }
    .ui-confirm-modal { align-self:flex-end; border-radius:24px 24px 0 0; max-height:92vh; overflow:auto; }
}
@media (max-width: 430px) {
    .brand-inline img, .logo-thumb { width:48px; height:48px; }
    .brand-inline h2 { font-size:1.05rem; }
    th, td { padding:10px 8px; }
}
@media print {
    .ui-page-header, .ui-card, .ui-stat-card, .ui-mobile-card { box-shadow:none !important; }
    .pwa-install-button, .ui-confirm-modal-backdrop { display:none !important; }
}

@media (max-width: 760px) {
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) { display:block; width:100%; border-collapse:separate; border-spacing:0; }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) thead { display:none; }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) tbody { display:grid; gap:12px; }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) tr { display:grid; gap:8px; border:1px solid var(--border); border-radius:18px; padding:14px; background:#fff; box-shadow:0 10px 24px rgba(33,20,13,.05); }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) td { display:grid; grid-template-columns:minmax(110px,.42fr) minmax(0,1fr); gap:10px; align-items:start; border:0; padding:4px 0; text-align:right; }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) td::before { content:attr(data-label); color:var(--text-muted); font-size:.8rem; font-weight:800; }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) td[colspan] { display:block; }
    body.ui-responsive-shell .table-wrap:not(.desktop-table):not(.keep-table-wrap) table:not(.keep-table) td[colspan]::before { display:none; }
}

/* Sprint 66 — Mobile Employee Experience + Push-ready PWA */
.mobile-hero-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    padding: 22px;
    border: 1px solid #f0c9ae;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(33,20,13,.98), rgba(122,52,20,.88));
    color: #fff;
    box-shadow: var(--shadow-md);
}
.mobile-hero-card h2 { margin: 4px 0 8px; font-size: 1.55rem; }
.mobile-hero-card p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.8; }
.mobile-eyebrow { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.86); font-weight: 700; font-size: .8rem; }
.mobile-hero-metric { min-width: 145px; border-radius: 22px; padding: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: grid; align-content: center; text-align: center; }
.mobile-hero-metric strong { font-size: 2rem; }
.mobile-hero-metric span { color: rgba(255,255,255,.78); font-size: .88rem; }
.mobile-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.mobile-quick-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:16px; }
.mobile-quick-action { border:1px solid #f0c9ae; border-radius:20px; padding:16px 12px; min-height:96px; display:grid; place-items:center; gap:8px; background:#fff; box-shadow:0 10px 26px rgba(33,20,13,.05); text-align:center; }
.mobile-quick-action span { width:42px; height:42px; border-radius:16px; display:grid; place-items:center; background:#fff7ed; color:var(--brand-navy); font-size:1.25rem; }
.mobile-quick-action strong { font-size:.9rem; color:var(--brand-navy); }
.mobile-manager-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mobile-manager-strip div { border:1px solid #e2e8f0; border-radius:16px; padding:14px; background:#fffaf5; text-align:center; }
.mobile-manager-strip strong { display:block; font-size:1.7rem; color:var(--brand-navy); }
.mobile-manager-strip span { color:var(--text-muted); font-size:.84rem; }
.mobile-force-cards { display:grid; }
.employee-bottom-nav { display:none; }
@media (max-width: 1050px) {
    .mobile-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mobile-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    body.employee-mobile-shell .main-form { padding-bottom: 96px; }
    .mobile-hero-card { flex-direction:column; padding:18px; border-radius:22px; }
    .mobile-hero-metric { min-width:0; }
    .mobile-summary-grid { grid-template-columns:1fr; gap:10px; }
    .mobile-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .mobile-quick-action { min-height:88px; padding:13px 10px; }
    .mobile-manager-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .employee-bottom-nav { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); inset-inline:10px; bottom:10px; z-index:80; background:rgba(255,255,255,.96); border:1px solid #f0c9ae; border-radius:24px; box-shadow:0 16px 42px rgba(33,20,13,.16); padding:8px; backdrop-filter:blur(12px); }
    .employee-bottom-nav a { display:grid; place-items:center; gap:2px; color:#7c5b4c; font-weight:700; font-size:.78rem; padding:6px 4px; border-radius:16px; }
    .employee-bottom-nav a span { font-size:1.05rem; line-height:1; }
    .employee-bottom-nav a.active { color:var(--brand-navy); background:#fff7ed; }
    .employee-bottom-nav small { font-size:.68rem; }
}
@media print { .employee-bottom-nav { display:none!important; } }

/* Sprint 84: approver action center timeline and direct action polish */
.approval-sla-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
    border: 1px solid rgba(33, 20, 13, .06);
}
.approval-sla-bar span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(22, 163, 74, .82), rgba(255, 90, 47, .72));
}
.approval-card.priority-warning .approval-sla-bar span { background: linear-gradient(90deg, #f59e0b, #d97706); }
.approval-card.priority-danger .approval-sla-bar span { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.approval-sla-bar b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .66rem;
    color: #21140d;
    line-height: 1;
}
.approval-mini-timeline {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scrollbar-width: thin;
}
.mini-timeline-step {
    min-width: 112px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .28);
    color: #475569;
}
.mini-timeline-step i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: .78rem;
    font-weight: 900;
    background: #e2e8f0;
    color: #475569;
}
.mini-timeline-step b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
}
.mini-timeline-step.is-completed { background: #f0fdf4; border-color: rgba(22, 163, 74, .25); color: #166534; }
.mini-timeline-step.is-completed i { background: #dcfce7; color: #166534; }
.mini-timeline-step.is-current { background: #fff7ed; border-color: rgba(255, 90, 47, .28); color: #e84a23; }
.mini-timeline-step.is-current i { background: #ffe6d5; color: #e84a23; }
.mini-timeline-step.is-returned { background: #fffbeb; border-color: rgba(217, 119, 6, .3); color: #92400e; }
.mini-timeline-step.is-returned i { background: #fef3c7; color: #92400e; }
.mini-timeline-step.is-rejected { background: #fef2f2; border-color: rgba(220, 38, 38, .25); color: #991b1b; }
.mini-timeline-step.is-rejected i { background: #fee2e2; color: #991b1b; }
.approval-latest-activity {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(33, 20, 13, .035), rgba(197, 160, 89, .08));
    border: 1px solid rgba(197, 160, 89, .18);
}
.approval-latest-activity span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}
.approval-latest-activity strong { font-size: .9rem; }
.approval-latest-activity small {
    grid-column: 2;
    color: var(--muted);
    line-height: 1.6;
}
.direct-action-form { display: inline-flex; margin: 0; }
.approval-card-actions .btn-success {
    box-shadow: 0 10px 22px rgba(22, 101, 52, .16);
}
@media (max-width: 640px) {
    .mini-timeline-step { min-width: 96px; }
    .approval-latest-activity { grid-template-columns: 1fr; }
    .approval-latest-activity small { grid-column: auto; }
    .direct-action-form, .direct-action-form .btn { width: 100%; }
}

/* Sprint 85: approver request detail decision cockpit */
.approver-decision-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 28px;
    border: 1px solid rgba(255, 90, 47, .14);
    background:
        radial-gradient(circle at top left, rgba(255, 90, 47, .12), transparent 34%),
        linear-gradient(135deg, #ffffff, #fff7ed 48%, #fffaf0);
    box-shadow: 0 22px 56px rgba(33, 20, 13, .10);
}
.approver-decision-main h2 {
    margin: 0 0 8px;
    color: var(--brand-navy);
    font-size: 1.35rem;
    line-height: 1.55;
}
.approver-decision-main p {
    margin: 0 0 14px;
    color: var(--text-muted);
    line-height: 1.8;
}
.approver-decision-actions {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.decision-sla-line {
    position: relative;
    height: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5edf7;
    border: 1px solid rgba(33, 20, 13, .07);
}
.decision-sla-line span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #ff5a2f);
}
.decision-sla-line.warning span { background: linear-gradient(90deg, #f59e0b, #d97706); }
.decision-sla-line.danger span { background: linear-gradient(90deg, #ef4444, #991b1b); }
.decision-sla-line b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: #21140d;
}
.decision-notes-form { margin: 0; }
.decision-button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 9px;
}
.decision-button-grid .btn { width: 100%; justify-content: center; }
.decision-facts-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.decision-fact-card {
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 8px 20px rgba(33,20,13,.045);
}
.decision-fact-card span {
    display: block;
    color: var(--text-muted);
    font-size: .76rem;
    margin-bottom: 6px;
}
.decision-fact-card strong {
    display: block;
    color: var(--brand-navy);
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.decision-fact-card.danger { border-color: rgba(239, 68, 68, .25); background: #fff7f7; }
.decision-fact-card.danger strong { color: #b91c1c; }
.decision-insight-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.decision-insight-card {
    min-width: 0;
    padding: 15px;
    border-radius: 22px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(148, 163, 184, .22);
}
.decision-insight-card h3 {
    margin: 0 0 12px;
    color: var(--brand-navy);
    font-size: .98rem;
}
.decision-comparison-list,
.decision-impact-list {
    display: grid;
    gap: 9px;
}
.decision-comparison-list div,
.decision-impact-list div {
    padding: 10px 11px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .18);
}
.decision-comparison-list span,
.decision-impact-list span {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
}
.decision-comparison-list strong,
.decision-impact-list strong {
    display: block;
    color: #21140d;
    font-size: .9rem;
}
.decision-impact-list strong { margin-bottom: 4px; }
.decision-latest-activity { margin-bottom: 12px; }
.decision-stage-preview { padding-top: 2px; }
@media (max-width: 1180px) {
    .approver-decision-panel { grid-template-columns: 1fr; }
    .decision-facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .decision-insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .approver-decision-panel { padding: 14px; border-radius: 22px; }
    .decision-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .decision-button-grid { grid-template-columns: 1fr; }
}
@media print {
    .approver-decision-panel { display: none !important; }
}

/* ===== Sprint 88 - Resubmit Versioning / Audit Trail ===== */
.resubmit-version-panel {
    margin-top: 18px;
    border: 1px solid rgba(33, 20, 13, .08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.resubmit-version-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.resubmit-version-head h3 {
    margin: 4px 0 4px;
    color: var(--brand-navy);
}
.resubmit-version-head p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.8;
}
.resubmit-version-head > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(197,160,89,.12);
    color: var(--brand-navy);
    border: 1px solid rgba(197,160,89,.22);
}
.resubmit-version-list {
    display: grid;
    gap: 14px;
}
.resubmit-version-card {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(33, 20, 13, .08);
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 30px rgba(33,20,13,.05);
}
.resubmit-version-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.resubmit-version-title strong,
.resubmit-version-title span {
    display: block;
}
.resubmit-version-title strong {
    color: var(--brand-navy);
    font-size: 1rem;
}
.resubmit-version-title span {
    color: var(--text-muted);
    font-size: .86rem;
    margin-top: 4px;
}
.resubmit-version-title em {
    font-style: normal;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(14,165,233,.10);
    color: #0369a1;
    font-size: .78rem;
    font-weight: 800;
}
.resubmit-version-diff-grid {
    display: grid;
    gap: 10px;
}
.resubmit-version-diff-row {
    display: grid;
    grid-template-columns: 180px repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border-radius: 16px;
    background: rgba(248,250,252,.9);
    border: 1px solid rgba(33,20,13,.06);
}
.resubmit-version-diff-row > span {
    color: var(--brand-navy);
    font-weight: 800;
    align-self: center;
}
.resubmit-version-diff-row div {
    padding: 9px 10px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(33,20,13,.06);
}
.resubmit-version-diff-row small {
    display: block;
    color: var(--text-muted);
    font-size: .75rem;
    margin-bottom: 4px;
}
.resubmit-version-diff-row b {
    display: block;
    color: #111827;
    line-height: 1.7;
    word-break: break-word;
}
@media (max-width: 820px) {
    .resubmit-version-diff-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sprint 99 — تحسينات شاملة للواجهة المرجعية
   ========================================================================== */

/* ── تحسينات صفحة تسجيل الدخول ── */
body.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 90, 47, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(122, 52, 20, 0.20) 0%, transparent 55%),
        linear-gradient(145deg, #21140d 0%, #7a3414 50%, #21140d 100%);
}

body.auth-page .dashboard {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(33, 20, 13, 0.35);
}

body.auth-page .side-info {
    background: linear-gradient(160deg, #7a3414 0%, #21140d 100%);
    padding: 48px 40px;
}

body.auth-page .brand-title {
    font-size: 1.5rem;
    border-right: 4px solid rgba(255,255,255,0.5);
    padding-right: 16px;
}

body.auth-page .track-list {
    margin-top: 40px;
}

body.auth-page .track-item.active {
    color: #f2b58c;
    border-right-color: #3b82f6;
}

body.auth-page .main-form {
    background: #f8fafc;
    justify-content: center;
    padding: 48px 5%;
}

body.auth-page .main-form .card {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(33, 20, 13, 0.08);
    border-color: #e2e8f0;
    padding: 28px;
}

body.auth-page .section-head h2 {
    color: #21140d;
    font-size: 1.65rem;
}

body.auth-page .input-ctrl {
    border-radius: 8px;
    height: 44px;
    font-size: 1rem;
    border-color: #cbd5e1;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.auth-page .input-ctrl:focus {
    border-color: #ff5a2f;
    box-shadow: 0 0 0 3px rgba(255, 90, 47, 0.12);
}

body.auth-page .btn-primary {
    background: #ff5a2f;
    border-radius: 8px;
    height: 44px;
    font-size: 1rem;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body.auth-page .btn-primary:hover {
    background: #e84a23;
    box-shadow: 0 4px 16px rgba(255, 90, 47, 0.30);
    transform: translateY(-1px);
}

body.auth-page .btn-ghost {
    border-radius: 8px;
    height: 44px;
    border-color: #e2e8f0;
    color: #475569;
    transition: background 150ms ease, border-color 150ms ease;
}

body.auth-page .btn-ghost:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* ── تحسينات البطاقات خارج وضع msar-classic ── */
body:not(.msar-classic) .card {
    border-radius: 14px;
    border-color: #e2e8f0;
    box-shadow: 0 2px 12px rgba(33, 20, 13, 0.06);
    transition: box-shadow 200ms ease;
}

body:not(.msar-classic) .card:hover {
    box-shadow: 0 4px 20px rgba(33, 20, 13, 0.10);
}

/* ── تحسينات التركيز للإتاحة ── */
*:focus-visible {
    outline: 2px solid #ff5a2f;
    outline-offset: 2px;
}

/* ── تحسينات scrollbar عامة ── */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #9f8575;
}

/* ── تحسينات شريط التحديد (selection) ── */
::selection {
    background: rgba(255, 90, 47, 0.18);
    color: #7a3414;
}

/* ── بطاقات KPI خارج msar-classic ── */
body:not(.msar-classic) .analytics-card {
    border-radius: 16px;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(33, 20, 13, 0.06);
    transition: box-shadow 200ms ease, transform 200ms ease;
    overflow: hidden;
    position: relative;
}

body:not(.msar-classic) .analytics-card:hover {
    box-shadow: 0 8px 24px rgba(33, 20, 13, 0.10);
    transform: translateY(-2px);
}

/* ── تحسينات لوحة الأدوات (Topbar) في وضع الادمن ── */
body:not(.msar-classic) .main-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(33, 20, 13, 0.05);
}

/* ── تحسينات الجداول العامة ── */
body:not(.msar-classic) table tbody tr:hover td {
    background: #f0f7ff;
    transition: background 100ms ease;
}

/* ── تحسين حقول الإدخال خارج msar-classic ── */
body:not(.msar-classic) .input-ctrl,
body:not(.msar-classic) .input,
body:not(.msar-classic) .select,
body:not(.msar-classic) .textarea {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body:not(.msar-classic) .input-ctrl:focus,
body:not(.msar-classic) .input:focus,
body:not(.msar-classic) .select:focus,
body:not(.msar-classic) .textarea:focus {
    border-color: #ff5a2f;
    box-shadow: 0 0 0 3px rgba(255, 90, 47, 0.10);
}

/* ── تحسين الأزرار خارج msar-classic ── */
body:not(.msar-classic) .btn {
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body:not(.msar-classic) .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255, 90, 47, 0.25);
}

/* ── تحسين أيقونات نقاط المساعدة ── */
.help-dot {
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.help-dot:hover {
    transform: scale(1.1);
}

/* ── تحسين الشارات ── */
.badge-soft {
    transition: background 150ms ease;
}

/* ── تحسين نافذة التأكيد العامة ── */
.ui-confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 20, 13, 0.55);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.ui-confirm-modal-backdrop.is-open {
    display: flex;
    animation: fadeIn 150ms ease;
}

.ui-confirm-modal {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(33, 20, 13, 0.20);
    animation: modalIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(-12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ui-confirm-modal h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #21140d;
}

.ui-confirm-modal p[data-confirm-message] {
    margin: 0 0 20px;
    color: #475569;
    line-height: 1.8;
}

.ui-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ── تحسين الـ Notification Badge ── */
.notification-badge {
    animation: none;
}

/* ── الانتقالات الناعمة العامة ── */
.module-tab,
.sidebar-nav a,
.btn,
.card {
    will-change: transform;
}

/* ── تحسين صفحة الخطأ / offline ── */
body.auth-page .alert-error {
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

body.auth-page .alert-success {
    border-radius: 10px;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

/* ── تحسين صفحة الشكر ── */
.eval-thankyou-hero {
    text-align: center;
    padding: 48px 24px;
}

/* ── طباعة احترافية ── */
@media print {
    * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}


/* ---- msar-classic-theme.css ---- */
/* ==========================================================================
   MsarERP Classic Theme — Sprint 99 Reference Match
   مطابقة دقيقة لتصميم المرجع: خلفية دافئة، شريط جانبي بني داكن،
   أقسام قابلة للطي، شريط تنقل احترافي
   ========================================================================== */

:root {
    /* ── اللون الأساسي من إعدادات النظام ── */
    --msar-primary:          var(--ui-primary, #ff5a2f);
    --msar-primary-dark:     #e84a23;
    --msar-primary-light:    #fff7ed;
    --msar-primary-alpha:    rgba(255, 90, 47, 0.12);

    /* ── خلفيات الصفحة (دافئة كريمية مطابقة للمرجع) ── */
    --msar-page-bg:          #fffaf5;
    --msar-card-bg:          #ffffff;
    --msar-card-bg-alt:      #fffbf8;

    /* ── شريط التنقل التفصيلي (Breadcrumb) — خلفية برتقالية فاتحة ── */
    --msar-breadcrumb-bg:    #fde4cf;
    --msar-breadcrumb-text:  #7a3a10;
    --msar-breadcrumb-link:  #c05820;

    /* ── الشريط الجانبي ── */
    --msar-sidebar-bg:       #1a0c05;
    --msar-sidebar-header-bg: var(--ui-primary, #ff5a2f);
    --msar-sidebar-active-bg: rgba(255, 255, 255, 0.10);
    --msar-sidebar-hover-bg:  rgba(255, 255, 255, 0.06);
    --msar-sidebar-border:    rgba(255, 255, 255, 0.08);
    --msar-sidebar-text:      rgba(255, 255, 255, 0.88);
    --msar-sidebar-muted:     rgba(255, 255, 255, 0.45);
    --msar-sidebar-section-bg: rgba(255, 255, 255, 0.04);

    /* ── الحدود والمدخلات (دافئة) ── */
    --msar-border:           #f0ddd0;
    --msar-border-inner:     #edddd0;
    --msar-input-border:     #dbbfad;
    --msar-input-border-focus: var(--ui-primary, #ff5a2f);

    /* ── النصوص ── */
    --msar-text:             #2d1a0e;
    --msar-text-secondary:   #5a3828;
    --msar-muted:            #8a6050;

    /* ── الجداول (دافئة) ── */
    --msar-table-head-bg:    #fffaf0;
    --msar-table-head-border:#ecdec8;
    --msar-table-row-hover:  #fff5ec;
    --msar-table-stripe:     #fffdf8;

    /* ── حالات النظام ── */
    --msar-success:          #08bf7d;
    --msar-success-bg:       #edfdf5;
    --msar-info:             #38bdf8;
    --msar-info-bg:          #f0fbff;
    --msar-warning:          #f0ad4e;
    --msar-warning-bg:       #fffbeb;
    --msar-danger:           #d9534f;
    --msar-danger-bg:        #fef2f2;
    --msar-print:            #9aaab5;

    /* ── أبعاد التخطيط ── */
    --msar-header-height:    70px;
    --msar-breadcrumb-height:40px;
    --msar-sidebar-width:    270px;
    --msar-sidebar-width-md: 240px;
    --msar-sidebar-collapsed-width: 64px;

    /* ── زوايا ── */
    --msar-radius-xs:        2px;
    --msar-radius-sm:        4px;
    --msar-radius:           6px;
    --msar-radius-lg:        10px;

    /* ── ظلال ── */
    --msar-shadow-xs:        0 1px 3px rgba(100, 50, 20, 0.08);
    --msar-shadow-sm:        0 2px 6px rgba(100, 50, 20, 0.10);
    --msar-shadow-md:        0 4px 12px rgba(100, 50, 20, 0.12);

    /* ── انتقالات ── */
    --msar-transition:       140ms ease;
}

/* ==========================================================================
   1. أسس الصفحة
   ========================================================================== */

body.msar-classic {
    margin: 0;
    padding: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--msar-page-bg);
    color: var(--msar-text);
    font-family: var(--system-font-family, var(--font-family-base, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif));
    font-size: 13px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

body.msar-classic * { font-family: inherit; }
body.msar-classic button,
body.msar-classic input,
body.msar-classic select,
body.msar-classic textarea,
body.msar-classic table,
body.msar-classic th,
body.msar-classic td,
body.msar-classic label,
body.msar-classic a,
body.msar-classic span,
body.msar-classic p,
body.msar-classic div,
body.msar-classic strong,
body.msar-classic small,
body.msar-classic h1,
body.msar-classic h2,
body.msar-classic h3,
body.msar-classic h4 { font-family: inherit; }

/* ==========================================================================
   2. تخطيط الصفحة الرئيسي
   ========================================================================== */

body.msar-classic .dashboard {
    display: grid;
    grid-template-columns: var(--msar-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--msar-page-bg);
}

/* ==========================================================================
   3. الشريط الجانبي
   ========================================================================== */

body.msar-classic .side-info {
    position: sticky;
    top: 0;
    right: 0;
    height: 100vh;
    min-height: 100vh;
    width: var(--msar-sidebar-width);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--msar-sidebar-bg);
    color: #ffffff;
    z-index: 50;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent;
}

body.msar-classic .side-info::-webkit-scrollbar { width: 3px; }
body.msar-classic .side-info::-webkit-scrollbar-track { background: transparent; }
body.msar-classic .side-info::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.10);
    border-radius: 2px;
}

body.msar-classic .side-info > div { flex: 1 1 auto; min-height: 0; }

/* ── رأس الشريط الجانبي (الشعار) ── */

body.msar-classic .msar-sidebar-brand,
body.msar-classic .side-info > div > .brand-inline {
    min-height: var(--msar-header-height);
    padding: 10px 14px;
    background: var(--msar-sidebar-header-bg);
    background-image:
        radial-gradient(circle at 15% 60%, rgba(255,255,255,.13) 0 18px, transparent 19px),
        radial-gradient(circle at 80% 25%, rgba(255,255,255,.08) 0 10px, transparent 11px);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

body.msar-classic .msar-sidebar-brand img,
body.msar-classic .side-info > div > .brand-inline img {
    width: 50px;
    height: 50px;
    border-radius: var(--msar-radius-xs);
    border: 0;
    padding: 0;
    background: rgba(255,255,255,.15);
    object-fit: contain;
    flex-shrink: 0;
}

body.msar-classic .msar-sidebar-brand .brand-title,
body.msar-classic .side-info > div > .brand-inline .brand-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: #ffffff;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 0 !important;
}

body.msar-classic .msar-sidebar-brand .brand-subtitle,
body.msar-classic .side-info > div > .brand-inline .brand-subtitle {
    display: none;
}

/* ── بطاقات داخل الشريط الجانبي (مخفية) ── */

body.msar-classic .side-info .card {
    display: none !important;
}

body.msar-classic .module-sidebar-card {
    display: none !important;
}

body.msar-classic .side-info > div > .card:not(.module-sidebar-card) {
    display: none !important;
}

/* ── قوائم التنقل العليا للشريط الجانبي ── */

body.msar-classic .sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

body.msar-classic .sidebar-nav li {
    position: relative;
    margin: 0;
    padding: 0;
}

body.msar-classic .sidebar-nav a {
    position: relative;
    min-height: 36px;
    padding: 7px 14px 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--msar-sidebar-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    border-right: 3px solid transparent;
    border-left: 0;
    background: transparent;
    transition: background var(--msar-transition), color var(--msar-transition), border-color var(--msar-transition);
    border-radius: 0;
}

body.msar-classic .sidebar-nav a:hover {
    color: #ffffff;
    background: var(--msar-sidebar-hover-bg);
}

body.msar-classic .sidebar-nav a.active,
body.msar-classic .sidebar-nav li.current-page > a {
    background: var(--msar-sidebar-active-bg);
    border-right-color: var(--msar-primary);
    color: #ffffff;
    font-weight: 800;
}

/* أيقونة التنقل */
body.msar-classic .sidebar-nav .nav-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--msar-sidebar-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--msar-transition);
}

body.msar-classic .sidebar-nav a:hover .nav-icon,
body.msar-classic .sidebar-nav a.active .nav-icon {
    color: #ffffff;
}

body.msar-classic .sidebar-nav .nav-text {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

body.msar-classic .sidebar-nav .notification-badge {
    margin-inline-start: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--msar-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ── مجموعات أقسام الشريط الجانبي (Accordion) ── */

body.msar-classic .module-sidebar-groups {
    padding: 0;
}

body.msar-classic .module-sidebar-group {
    border-bottom: 1px solid var(--msar-sidebar-border);
}

/* عنوان القسم — قابل للطي */
body.msar-classic .module-sidebar-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px 9px 10px;
    font-size: 12px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    user-select: none;
    background: var(--msar-sidebar-section-bg);
    border-top: 1px solid var(--msar-sidebar-border);
    transition: background var(--msar-transition), color var(--msar-transition);
    letter-spacing: 0.02em;
    position: relative;
}

body.msar-classic .module-sidebar-group-title:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.88);
}

/* سهم الطي/التوسيع */
body.msar-classic .module-sidebar-group-title::after {
    content: '▾';
    font-size: 14px;
    font-weight: 900;
    color: var(--msar-primary);
    transition: transform 200ms ease;
    flex-shrink: 0;
}

body.msar-classic .module-sidebar-group.msar-collapsed .module-sidebar-group-title::after {
    transform: rotate(-90deg);
}

/* إخفاء القسم عند الطي */
body.msar-classic .module-sidebar-group.msar-collapsed .module-sidebar-nav {
    display: none;
}

/* تمييز القسم النشط */
body.msar-classic .module-sidebar-group.msar-active > .module-sidebar-group-title {
    color: #ffffff;
    background: rgba(255,255,255,.06);
    border-right-width: 3px;
    border-right-color: var(--msar-primary);
}

/* ── نقاط الدلالة لعناصر القائمة ── */
body.msar-classic .module-sidebar-nav > li > a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    flex-shrink: 0;
    transition: background var(--msar-transition);
    margin-inline-end: 2px;
}

body.msar-classic .module-sidebar-nav > li > a:hover::before,
body.msar-classic .module-sidebar-nav > li > a.active::before {
    background: var(--msar-primary);
}

/* تذييل الشريط الجانبي */
body.msar-classic .side-footer {
    margin-top: auto;
    padding: 10px 14px;
    color: var(--msar-sidebar-muted);
    font-size: 11px;
    line-height: 1.8;
    border-top: 1px solid var(--msar-sidebar-border);
    text-align: center;
}

/* ==========================================================================
   4. المنطقة الرئيسية
   ========================================================================== */

body.msar-classic .main-form {
    min-width: 0;
    padding: 0 10px 24px;
    overflow-y: visible;
    background: var(--msar-page-bg);
    display: block;
}

/* ==========================================================================
   5. الشريط العلوي (Top Bar)
   ========================================================================== */

body.msar-classic .main-topbar {
    min-height: var(--msar-header-height);
    height: var(--msar-header-height);
    margin: 0 -10px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(200px, 310px) minmax(0, 1fr) minmax(180px, 280px);
    grid-template-areas: "title modules user";
    gap: 12px;
    align-items: center;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--msar-border);
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(100, 50, 20, 0.08);
    position: sticky;
    top: 0;
    z-index: 40;
    direction: rtl;
}

/* ── شريط المستخدم ── */

body.msar-classic .msar-user-strip {
    grid-area: user;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    direction: ltr;
    justify-content: flex-start;
}

body.msar-classic .msar-user-strip .msar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--msar-border);
    background: var(--msar-primary-light);
    object-fit: cover;
    flex-shrink: 0;
}

body.msar-classic .msar-user-strip .msar-user-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    direction: rtl;
}

body.msar-classic .msar-user-strip .msar-top-icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #555;
    text-decoration: none;
    font-size: 16px;
    transition: background var(--msar-transition), color var(--msar-transition);
    flex-shrink: 0;
}

body.msar-classic .msar-user-strip .msar-top-icon:hover {
    background: var(--msar-primary-light);
    color: var(--msar-primary);
}

body.msar-classic .msar-user-strip .msar-top-icon.sign-out {
    background: var(--msar-primary);
    color: #fff;
}

body.msar-classic .msar-user-strip .msar-top-icon.sign-out:hover {
    background: var(--msar-primary-dark);
}

body.msar-classic .msar-user-strip .notification-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #ff4f4f;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 999px;
    text-align: center;
    padding: 0 4px;
    border: 1px solid #fff;
}

body.msar-classic .msar-user-strip .msar-user-name,
body.msar-classic .msar-user-strip .pwa-install-button {
    direction: rtl;
}

/* ── محوّل الوحدات ── */

body.msar-classic .module-switcher-wrap {
    grid-area: modules;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

body.msar-classic .module-switcher-label { display: none; }

body.msar-classic .module-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

body.msar-classic .module-switcher::-webkit-scrollbar { display: none; }

body.msar-classic .module-tab {
    width: 70px;
    min-height: var(--msar-header-height);
    padding: 4px 2px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #666;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow: none;
    font-weight: 800;
    line-height: 1.2;
    transition: color var(--msar-transition), border-color var(--msar-transition), background var(--msar-transition);
    cursor: pointer;
    text-decoration: none;
}

body.msar-classic .module-tab:hover {
    color: var(--msar-primary);
    background: var(--msar-primary-light);
}

body.msar-classic .module-tab .msar-module-icon {
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: inherit;
    transition: transform 150ms ease;
}

body.msar-classic .module-tab:hover .msar-module-icon {
    transform: translateY(-2px);
}

body.msar-classic .module-tab .msar-module-text {
    font-size: 10px;
    font-weight: 900;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 66px;
    text-align: center;
}

body.msar-classic .module-tab.active {
    color: var(--msar-primary);
    border-bottom-color: var(--msar-primary);
    background: transparent;
}

/* ── عنوان الصفحة ── */

body.msar-classic .module-page-title {
    grid-area: title;
    width: auto;
    justify-self: stretch;
    justify-content: flex-end;
    flex-direction: row-reverse;
    gap: 8px;
    display: flex;
    align-items: center;
}

body.msar-classic .module-page-title h2 {
    margin: 0;
    color: #222222;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.msar-classic .module-page-title p { display: none; }

/* ── زر طي الشريط الجانبي ── */

body.msar-classic .admin-sidebar-toggle {
    position: static;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--msar-primary);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--msar-transition);
    flex-shrink: 0;
}

body.msar-classic .admin-sidebar-toggle:hover {
    color: var(--msar-primary-dark);
}

body.msar-classic .side-info > .admin-sidebar-toggle {
    display: none;
}

/* ==========================================================================
   6. شريط التنقل التفصيلي (Breadcrumb Bar)
   ========================================================================== */

body.msar-classic .msar-breadcrumb-bar {
    min-height: var(--msar-breadcrumb-height);
    margin: 0 -10px 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--msar-breadcrumb-bg);
    border-bottom: 1px solid #f0cdb0;
    color: var(--msar-breadcrumb-text);
    font-size: 12px;
    font-weight: 700;
}

body.msar-classic .msar-breadcrumb-bar .msar-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--msar-breadcrumb-text);
}

body.msar-classic .msar-breadcrumb-bar .msar-breadcrumb a {
    color: var(--msar-breadcrumb-link);
    text-decoration: none;
    font-weight: 700;
    transition: color var(--msar-transition);
}

body.msar-classic .msar-breadcrumb-bar .msar-breadcrumb a:hover {
    text-decoration: underline;
}

body.msar-classic .msar-breadcrumb-bar .msar-breadcrumb span:last-child {
    color: var(--msar-breadcrumb-text);
    font-weight: 800;
}

body.msar-classic .msar-breadcrumb-bar .msar-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--msar-breadcrumb-text);
    font-size: 12px;
    white-space: nowrap;
}

/* أزرار حجم الخط */
body.msar-classic .msar-font-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

body.msar-classic .msar-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border: 1px solid #e0b898;
    border-radius: 2px;
    background: rgba(255,255,255,.50);
    color: var(--msar-breadcrumb-text);
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
    transition: background var(--msar-transition);
    font-family: inherit;
}

body.msar-classic .msar-font-btn:hover {
    background: rgba(255,255,255,.80);
}

body.msar-classic .msar-font-btn.msar-font-sm { font-size: 11px; }
body.msar-classic .msar-font-btn.msar-font-lg { font-size: 15px; }

/* مبدّل اللغة */
body.msar-classic .msar-language {
    color: var(--msar-primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: default;
}

/* ==========================================================================
   7. رسائل التنبيه
   ========================================================================== */

body.msar-classic .alert {
    border-radius: var(--msar-radius-xs);
    margin: 8px 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    border-width: 1px;
    border-style: solid;
}

body.msar-classic .alert-success {
    background: var(--msar-success-bg);
    color: #065f46;
    border-color: #a7f3d0;
}

body.msar-classic .alert-error {
    background: var(--msar-danger-bg);
    color: #991b1b;
    border-color: #fecaca;
}

/* ==========================================================================
   8. البطاقات (Cards)
   ========================================================================== */

body.msar-classic.msar-cards-enabled .card,
body.msar-classic.msar-cards-enabled .ui-card,
body.msar-classic.msar-cards-enabled .app-card,
body.msar-classic.msar-cards-enabled .ui-page-header,
body.msar-classic.msar-cards-enabled .ui-filter-panel,
body.msar-classic.msar-cards-enabled details.ui-filter-panel,
body.msar-classic.msar-cards-enabled .mini-card {
    position: relative;
    margin-bottom: 8px;
    padding: 14px;
    overflow: visible;
    background: var(--msar-card-bg);
    border: 1px solid var(--msar-border);
    border-radius: var(--msar-radius-xs);
    box-shadow: var(--msar-shadow-xs);
    color: var(--msar-text);
}

/* إزالة الحدود المزدوجة */
body.msar-classic.msar-cards-enabled .card::before,
body.msar-classic.msar-cards-enabled .ui-card::before,
body.msar-classic.msar-cards-enabled .app-card::before {
    display: none;
}

/* ==========================================================================
   9. عناوين الأقسام
   ========================================================================== */

body.msar-classic .section-title,
body.msar-classic .ui-page-header h1,
body.msar-classic .card h2,
body.msar-classic .card h3 {
    margin-top: 0;
    color: #333333;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
}

body.msar-classic .section-subtitle,
body.msar-classic .muted,
body.msar-classic .small-muted,
body.msar-classic .ui-page-header p {
    color: var(--msar-muted);
    font-size: 12px;
    line-height: 1.75;
}

/* ==========================================================================
   10. الشبكات والمسافات
   ========================================================================== */

body.msar-classic .grid,
body.msar-classic .grid-fields {
    gap: 8px;
}

body.msar-classic .field { margin-bottom: 10px; }

body.msar-classic .field label,
body.msar-classic label,
body.msar-classic .form-horizontal .control-label {
    display: block;
    color: #333;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
    text-align: right;
}

/* ==========================================================================
   11. حقول الإدخال
   ========================================================================== */

body.msar-classic .input,
body.msar-classic .select,
body.msar-classic .textarea,
body.msar-classic .input-ctrl,
body.msar-classic input[type="text"],
body.msar-classic input[type="number"],
body.msar-classic input[type="date"],
body.msar-classic input[type="datetime-local"],
body.msar-classic input[type="email"],
body.msar-classic input[type="password"],
body.msar-classic input[type="search"],
body.msar-classic input[type="tel"],
body.msar-classic select,
body.msar-classic textarea {
    display: block;
    width: 100%;
    min-height: 0;
    height: 28px;
    padding: 3px 8px;
    border: 1px solid var(--msar-input-border);
    border-radius: var(--msar-radius-xs);
    box-shadow: none;
    background: #ffffff;
    color: #000000;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.6;
    transition: border-color var(--msar-transition), box-shadow var(--msar-transition);
    appearance: none;
    -webkit-appearance: none;
}

body.msar-classic textarea,
body.msar-classic .textarea {
    height: auto;
    min-height: 72px;
    resize: vertical;
    line-height: 1.75;
}

body.msar-classic .input:focus,
body.msar-classic .select:focus,
body.msar-classic .textarea:focus,
body.msar-classic .input-ctrl:focus,
body.msar-classic input:focus,
body.msar-classic select:focus,
body.msar-classic textarea:focus {
    outline: none;
    border-color: var(--msar-primary) !important;
    box-shadow: 0 0 0 2px var(--msar-primary-alpha);
}

body.msar-classic input[disabled],
body.msar-classic select[disabled],
body.msar-classic textarea[disabled],
body.msar-classic input[readonly],
body.msar-classic select[readonly],
body.msar-classic textarea[readonly] {
    background: rgba(51,51,51,.05);
    color: #666;
}

/* Select arrow */
body.msar-classic select,
body.msar-classic .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(0% + 8px) center;
    padding-inline-start: 28px;
    cursor: pointer;
}

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

body.msar-classic .actions,
body.msar-classic .ui-page-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

body.msar-classic .btn,
body.msar-classic button.btn,
body.msar-classic a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 0;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: var(--msar-radius-xs);
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--msar-transition), border-color var(--msar-transition), box-shadow var(--msar-transition);
}

body.msar-classic .btn-primary,
body.msar-classic .btn-warning {
    background: var(--msar-primary) !important;
    border-color: var(--msar-primary) !important;
    color: #ffffff !important;
}

body.msar-classic .btn-primary:hover,
body.msar-classic .btn-warning:hover {
    background: var(--msar-primary-dark) !important;
    border-color: var(--msar-primary-dark) !important;
    box-shadow: 0 2px 6px var(--msar-primary-alpha);
}

body.msar-classic .btn-success {
    background: var(--msar-success) !important;
    border-color: var(--msar-success) !important;
    color: #ffffff !important;
}

body.msar-classic .btn-info {
    background: var(--msar-info) !important;
    border-color: var(--msar-info) !important;
    color: #ffffff !important;
}

body.msar-classic .btn-danger {
    background: var(--msar-danger) !important;
    border-color: var(--msar-danger) !important;
    color: #ffffff !important;
}

body.msar-classic .btn-light,
body.msar-classic .btn-ghost,
body.msar-classic .btn-secondary {
    background: var(--msar-print) !important;
    border-color: var(--msar-print) !important;
    color: #ffffff !important;
}

body.msar-classic .btn-light:hover,
body.msar-classic .btn-ghost:hover {
    background: #7a8e98 !important;
}

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

body.msar-classic.msar-tables-enabled .table-wrap {
    overflow: auto;
    width: 100%;
    background: transparent;
}

body.msar-classic.msar-tables-enabled table {
    width: 100%;
    border-collapse: collapse;
    background: var(--msar-card-bg);
    color: #000000;
    font-size: 12px;
}

body.msar-classic.msar-tables-enabled table th,
body.msar-classic.msar-tables-enabled table td {
    padding: 5px 8px;
    border: 1px solid #e5e5e5;
    text-align: right;
    vertical-align: middle;
    line-height: 1.6;
}

body.msar-classic.msar-tables-enabled table thead th,
body.msar-classic.msar-tables-enabled table thead td {
    background: var(--msar-table-head-bg);
    color: var(--msar-primary);
    border-color: var(--msar-table-head-border);
    font-weight: 900;
    font-size: 12px;
}

body.msar-classic.msar-tables-enabled table tbody tr:hover td {
    background: var(--msar-table-row-hover);
}

body.msar-classic.msar-tables-enabled table tbody tr.active td,
body.msar-classic.msar-tables-enabled table tbody tr.is-active td {
    background: #fffacd;
}

/* ==========================================================================
   14. بطاقات KPI والمقاييس
   ========================================================================== */

body.msar-classic.msar-cards-enabled .analytics-card,
body.msar-classic.msar-cards-enabled .kpi,
body.msar-classic.msar-cards-enabled .kpi-card,
body.msar-classic.msar-cards-enabled .metric-card,
body.msar-classic.msar-cards-enabled .stat-card,
body.msar-classic.msar-cards-enabled .flow-step,
body.msar-classic.msar-cards-enabled .action-box,
body.msar-classic.msar-cards-enabled .ops-note,
body.msar-classic.msar-cards-enabled .probation-snapshot,
body.msar-classic.msar-cards-enabled .escalation-note,
body.msar-classic.msar-cards-enabled .contract-preview,
body.msar-classic.msar-cards-enabled .ui-mobile-card {
    position: relative;
    background: var(--msar-card-bg) !important;
    border: 1px solid var(--msar-border) !important;
    border-radius: var(--msar-radius-xs) !important;
    box-shadow: var(--msar-shadow-xs) !important;
    padding: 14px !important;
    color: var(--msar-text) !important;
}

body.msar-classic .analytics-grid,
body.msar-classic .chart-stack,
body.msar-classic .contract-kpis,
body.msar-classic .probation-kpis,
body.msar-classic .escalation-strip,
body.msar-classic .offer-kpis,
body.msar-classic .probation-ops-funnel,
body.msar-classic .grid {
    gap: 8px !important;
}

body.msar-classic .analytics-card,
body.msar-classic .kpi,
body.msar-classic .kpi-card,
body.msar-classic .mini-card,
body.msar-classic .metric-card,
body.msar-classic .stat-card {
    margin-bottom: 8px !important;
}

body.msar-classic .analytics-label,
body.msar-classic .kpi-label,
body.msar-classic .kpi .label {
    color: #4d4d4d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

body.msar-classic .analytics-value,
body.msar-classic .kpi-value,
body.msar-classic .kpi-number {
    color: #000000 !important;
    font-size: 1.65rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
}

body.msar-classic .kpi .value {
    color: #000000 !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    margin-top: 3px !important;
}

body.msar-classic .analytics-sub {
    color: #666 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   15. لوحة الفلاتر
   ========================================================================== */

body.msar-classic.msar-cards-enabled .ui-filter-panel {
    border: 1px solid var(--msar-border) !important;
    border-radius: var(--msar-radius-xs) !important;
    box-shadow: var(--msar-shadow-xs) !important;
    background: var(--msar-card-bg) !important;
    overflow: visible !important;
}

body.msar-classic .ui-filter-panel > summary {
    padding: 8px 14px !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer;
    user-select: none;
}

body.msar-classic .ui-filter-panel > summary::after {
    color: var(--msar-primary);
}

body.msar-classic .ui-filter-body {
    padding: 0 14px 14px !important;
}

/* ==========================================================================
   16. بطاقات التبديل
   ========================================================================== */

body.msar-classic .module-toggle-card {
    border-radius: var(--msar-radius-xs);
    border-color: var(--msar-border);
    box-shadow: none;
}

body.msar-classic .module-toggle-card.is-enabled {
    border-color: rgba(8, 191, 125, .28);
}

body.msar-classic .module-toggle-card.is-disabled {
    border-color: rgba(217, 83, 79, .22);
}

/* ==========================================================================
   17. أشرطة التقدم
   ========================================================================== */

body.msar-classic .metric-bar,
body.msar-classic .bar {
    height: 8px;
    border-radius: 2px;
    background: #e9eef9;
}

body.msar-classic .metric-bar span,
body.msar-classic .bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--msar-info) !important;
}

/* ==========================================================================
   18. بروفايل الموظف
   ========================================================================== */

body.msar-classic .profile-hero { align-items: center; padding: 0; }
body.msar-classic .profile-name { margin: 0 0 2px; font-size: 15px; color: #111; font-weight: 900; }
body.msar-classic .profile-meta { color: #444; font-size: 12px; line-height: 1.9; }

body.msar-classic .profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 10px 0 0;
    border-bottom: 2px solid var(--msar-border);
}

body.msar-classic .profile-tabs a {
    padding: 6px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--msar-primary);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: color var(--msar-transition), border-color var(--msar-transition);
}

body.msar-classic .profile-tabs a:hover,
body.msar-classic .profile-tabs a.active {
    border-bottom-color: var(--msar-primary);
    color: var(--msar-primary-dark);
}

/* ==========================================================================
   19. التذييل
   ========================================================================== */

body.msar-classic .msar-footer {
    min-height: 42px;
    padding: 10px 16px;
    color: var(--msar-primary);
    text-align: center;
    font-size: 12px;
    background: var(--msar-breadcrumb-bg);
    border-top: 1px solid var(--msar-border);
    margin: 16px -10px 0;
}

/* ==========================================================================
   20. شريط التنقل السفلي للجوال
   ========================================================================== */

body.msar-classic .employee-bottom-nav {
    z-index: 70;
    background: var(--msar-card-bg);
    border-top: 1px solid var(--msar-border);
    box-shadow: 0 -2px 8px rgba(100,50,20,.10);
}

/* ==========================================================================
   21. الشريط الجانبي المطوي
   ========================================================================== */

body.msar-classic.admin-sidebar-collapsed .dashboard {
    grid-template-columns: var(--msar-sidebar-collapsed-width) minmax(0, 1fr);
}

body.msar-classic.admin-sidebar-collapsed .side-info {
    width: var(--msar-sidebar-collapsed-width);
    overflow: visible;
}

body.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand,
body.msar-classic.admin-sidebar-collapsed .side-info > div > .brand-inline {
    justify-content: center;
    padding: 10px 5px;
    gap: 0;
}

body.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand > div,
body.msar-classic.admin-sidebar-collapsed .side-info > div > .brand-inline > div,
body.msar-classic.admin-sidebar-collapsed .side-info .card,
body.msar-classic.admin-sidebar-collapsed .module-sidebar-card,
body.msar-classic.admin-sidebar-collapsed .side-footer,
body.msar-classic.admin-sidebar-collapsed .sidebar-nav .nav-text,
body.msar-classic.admin-sidebar-collapsed .module-sidebar-group-title {
    display: none !important;
}

body.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand img,
body.msar-classic.admin-sidebar-collapsed .side-info > div > .brand-inline img {
    width: 44px;
    height: 44px;
}

body.msar-classic.admin-sidebar-collapsed .sidebar-nav a {
    justify-content: center;
    min-height: 46px;
    padding: 8px 5px;
    border-right: 3px solid transparent;
    border-left: 0;
}

body.msar-classic.admin-sidebar-collapsed .sidebar-nav a.active {
    border-right-color: var(--msar-primary);
}

body.msar-classic.admin-sidebar-collapsed .sidebar-nav .nav-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 18px;
}

/* إزالة نقط الدلالة في الوضع المطوي */
body.msar-classic.admin-sidebar-collapsed .module-sidebar-nav > li > a::before {
    display: none;
}

/* Flyout للوضع المطوي */
body.msar-classic.msar-sidebar-flyout.admin-sidebar-collapsed .sidebar-nav a:hover .nav-text,
body.msar-classic.msar-sidebar-flyout.admin-sidebar-collapsed .sidebar-nav a:focus .nav-text {
    position: fixed;
    right: calc(var(--msar-sidebar-collapsed-width) + 4px);
    min-width: 200px;
    min-height: 40px;
    padding: 9px 14px;
    display: flex !important;
    align-items: center;
    color: #fff;
    background: var(--msar-sidebar-bg);
    border-right: 3px solid var(--msar-primary);
    box-shadow: var(--msar-shadow-md);
    z-index: 9999;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

/* ==========================================================================
   22. Flyout العائم
   ========================================================================== */

body.msar-classic .msar-sidebar-floating-flyout {
    position: fixed;
    background: var(--msar-sidebar-bg);
    color: #ffffff;
    padding: 7px 14px;
    border-radius: var(--msar-radius-xs);
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--msar-shadow-md);
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    border-right: 3px solid var(--msar-primary);
}

/* ==========================================================================
   23. نافذة التأكيد
   ========================================================================== */

body.msar-classic .ui-confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 12, 5, 0.55);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

body.msar-classic .ui-confirm-modal-backdrop.is-open {
    display: flex;
}

body.msar-classic .ui-confirm-modal {
    background: var(--msar-card-bg);
    border: 1px solid var(--msar-border);
    border-radius: var(--msar-radius);
    padding: 22px;
    max-width: 400px;
    width: calc(100% - 32px);
    box-shadow: var(--msar-shadow-md);
    animation: msar-modal-in 180ms ease-out;
}

@keyframes msar-modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

body.msar-classic .ui-confirm-modal h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 900;
    color: #1a0c05;
}

body.msar-classic .ui-confirm-modal p[data-confirm-message] {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--msar-text-secondary);
    line-height: 1.75;
}

body.msar-classic .ui-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ==========================================================================
   24. الشارات والحالات
   ========================================================================== */

body.msar-classic .badge,
body.msar-classic .chip,
body.msar-classic .status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

body.msar-classic .status-chip.success { background: var(--msar-success-bg); color: #065f46; border: 1px solid #a7f3d0; }
body.msar-classic .status-chip.danger  { background: var(--msar-danger-bg);  color: #991b1b; border: 1px solid #fecaca; }
body.msar-classic .status-chip.warning { background: var(--msar-warning-bg); color: #92400e; border: 1px solid #fde68a; }
body.msar-classic .status-chip.info    { background: var(--msar-info-bg);    color: #075985; border: 1px solid #bae6fd; }
body.msar-classic .status-chip.neutral { background: #f8fafc; color: #475569; border: 1px solid var(--msar-border); }

/* ==========================================================================
   25. التايم لاين
   ========================================================================== */

body.msar-classic .timeline { display: grid; gap: 8px; }
body.msar-classic .timeline-item {
    border: 1px solid var(--msar-border);
    border-radius: var(--msar-radius-xs);
    padding: 10px 14px;
    background: var(--msar-card-bg);
}

/* ==========================================================================
   26. الطباعة
   ========================================================================== */

@media print {
    body.msar-classic.msar-print-enabled {
        background: #fff !important;
        color: #000 !important;
    }
    body.msar-classic.msar-print-enabled .side-info,
    body.msar-classic.msar-print-enabled .main-topbar,
    body.msar-classic.msar-print-enabled .msar-breadcrumb-bar,
    body.msar-classic.msar-print-enabled .msar-footer,
    body.msar-classic.msar-print-enabled .admin-sidebar-toggle,
    body.msar-classic.msar-print-enabled .no-print,
    body.msar-classic.msar-print-enabled .actions,
    body.msar-classic.msar-print-enabled .btn { display: none !important; }
    body.msar-classic.msar-print-enabled .dashboard,
    body.msar-classic.msar-print-enabled.admin-sidebar-collapsed .dashboard { display: block !important; }
    body.msar-classic.msar-print-enabled .main-form { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    body.msar-classic.msar-print-enabled .card,
    body.msar-classic.msar-print-enabled .ui-card,
    body.msar-classic.msar-print-enabled .app-card,
    body.msar-classic.msar-print-enabled .ui-page-header,
    body.msar-classic.msar-print-enabled .mini-card {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
    }
    body.msar-classic.msar-print-enabled .card::before,
    body.msar-classic.msar-print-enabled .ui-card::before,
    body.msar-classic.msar-print-enabled .app-card::before { display: none !important; }
}

/* ==========================================================================
   27. الاستجابة للشاشات
   ========================================================================== */

body.msar-classic .side-info > div { flex: 1 1 auto; min-height: 0; }
body.msar-classic .side-footer { margin-top: auto; }

/* شاشات كبيرة */
@media (min-width: 901px) {
    body.msar-classic .main-form { padding-inline: 12px; }
}

/* شاشات متوسطة */
@media (max-width: 1279px) {
    body.msar-classic .dashboard { grid-template-columns: var(--msar-sidebar-width-md) minmax(0, 1fr); }
    body.msar-classic .side-info { width: var(--msar-sidebar-width-md); }
    body.msar-classic .module-switcher { gap: 0; }
    body.msar-classic .module-tab { width: 62px; }
}

@media (max-width: 1279px) and (min-width: 901px) {
    body.msar-classic .main-topbar { grid-template-columns: minmax(180px, 270px) minmax(0, 1fr) minmax(150px, 240px); }
}

@media (max-width: 1100px) and (min-width: 901px) {
    body.msar-classic .main-topbar { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) minmax(130px, 210px); padding-inline: 12px; }
    body.msar-classic .module-switcher { overflow-x: auto; scrollbar-width: none; }
    body.msar-classic .module-switcher::-webkit-scrollbar { display: none; }
}

/* شاشات صغيرة */
@media (max-width: 900px) {
    body.msar-classic.msar-print-enabled .dashboard,
    body.msar-classic.msar-print-enabled.admin-sidebar-collapsed .dashboard { display: block; }
    body.msar-classic.msar-print-enabled .side-info,
    body.msar-classic.admin-sidebar-collapsed .side-info { position: relative; width: 100%; height: auto; min-height: 0; overflow: visible; }
    body.msar-classic.admin-sidebar-collapsed .side-info .card,
    body.msar-classic.admin-sidebar-collapsed .side-footer,
    body.msar-classic.admin-sidebar-collapsed .sidebar-nav .nav-text,
    body.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand > div,
    body.msar-classic.admin-sidebar-collapsed .side-info > div > .brand-inline > div { display: initial !important; }
    body.msar-classic .sidebar-nav { display: flex; overflow-x: auto; gap: 0; padding: 0; scrollbar-width: none; }
    body.msar-classic .sidebar-nav::-webkit-scrollbar { display: none; }
    body.msar-classic .sidebar-nav a { white-space: nowrap; min-width: max-content; border-left: 0; border-bottom: 3px solid transparent; }
    body.msar-classic .sidebar-nav a.active { border-bottom-color: var(--msar-primary); border-left: 0; }
    body.msar-classic.msar-print-enabled .main-form { padding: 0 8px 70px; }
    body.msar-classic .main-topbar {
        position: static; height: auto; min-height: 64px;
        margin-inline: -10px; padding-block: 8px;
        grid-template-columns: 1fr;
        grid-template-areas: "title" "modules" "user";
        gap: 8px;
    }
    body.msar-classic .module-switcher-wrap,
    body.msar-classic .msar-user-strip,
    body.msar-classic .module-page-title { order: unset; justify-self: stretch; }
    body.msar-classic .module-switcher { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    body.msar-classic .msar-breadcrumb-bar { margin-inline: -10px; flex-wrap: wrap; }
    body.msar-classic .grid-4,
    body.msar-classic .grid-3,
    body.msar-classic .grid-2,
    body.msar-classic .grid-fields { grid-template-columns: 1fr; }
}

/* شاشات جوال */
@media (max-width: 576px) {
    body.msar-classic .module-tab { width: 48px; min-height: 56px; }
    body.msar-classic .module-tab .msar-module-text { display: none; }
    body.msar-classic .module-tab .msar-module-icon { font-size: 22px; }
    body.msar-classic .btn, body.msar-classic button.btn, body.msar-classic a.btn { min-height: 36px; padding: 0 10px; }
    body.msar-classic .input,
    body.msar-classic .select,
    body.msar-classic .textarea,
    body.msar-classic input[type="text"],
    body.msar-classic input[type="number"],
    body.msar-classic input[type="date"],
    body.msar-classic select,
    body.msar-classic textarea { height: 36px; font-size: 13px; }
    body.msar-classic.msar-tables-enabled table { min-width: 600px; }
}

/* ==========================================================================
   28. ثيم الكيرو
   ========================================================================== */

body.msar-classic.msar-tajawal-font { font-family: var(--system-font-family, var(--font-family-base, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif)); }

/* ==========================================================================
   29. شاشات كبيرة جداً
   ========================================================================== */

@media (min-width: 1280px) {
    body.msar-classic .main-topbar {
        grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) minmax(190px, 300px);
    }
}