:root {
    /* Al Qaida brand — "teal" scale remapped to slate-navy chrome */
    --teal-50: #eef1f4;
    --teal-100: #dde3ea;
    --teal-200: #c2cad4;
    --teal-300: #9aa5b3;
    --teal-400: #6c7888;
    --teal-500: #4a5563;
    --teal-600: #39434f;
    --teal-700: #2e3742;
    /* "gold" scale remapped to brand amber accent */
    --gold-50: #fdf6e3;
    --gold-100: #fbedc7;
    --gold-200: #f7d98a;
    --gold-300: #f5c64d;
    --gold-400: #f2b01e;
    --gold-500: #d9991a;
    --gold-600: #b8820f;
    --dark-50: #f7f6f3;
    --dark-100: #eceae6;
    --dark-200: #dcdad4;
    --dark-300: #9a9a9f;
    --dark-400: #6b6b73;
    --dark-500: #4a4a54;
    --dark-600: #39434f;
    --dark-700: #2e3742;
    --dark-800: #28303a;
    --dark-900: #20262e;
    --white: #ffffff;
    --success: #2f9e6b;
    --warning: #e0820c;
    --danger: #d5485b;
    --info: #3e7bc0;
    --purple: #8b5cf6;
    --orange: #f97316;
    --sidebar-width: 260px;
    --header-height: 72px;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.04);
    --shadow: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.1);
    --transition: all .2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--dark-50);
    color: var(--dark-700);
    font-size: 14px;
    line-height: 1.6;
}

a { color: var(--teal-600); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--teal-700); }

.sidebar {
    position: fixed;
    left: 0; top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, var(--dark-800) 0%, var(--dark-900) 100%);
    color: var(--white);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    overflow-y: auto;
}

.sidebar-brand {
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--teal-500);
    padding: 5px;
}

.sidebar-brand-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.sidebar-brand-text span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--white);
    letter-spacing: .3px;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
}

.sidebar-section {
    margin-bottom: 24px;
}

.sidebar-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--white);
    padding: 0 12px;
    margin-bottom: 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 13.5px;
    font-weight: 500;
    transition: var(--transition);
}

.sidebar-link:hover {
    background: rgba(255,255,255,.1);
    color: var(--white);
}

.sidebar-link.active {
    background: var(--teal-600);
    color: var(--white);
}

.sidebar-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .7;
}

.sidebar-link.active svg,
.sidebar-link:hover svg { opacity: 1; }

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
}

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-400), var(--gold-300));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--white);
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--white);
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background: var(--dark-50);
}

.top-bar {
    height: var(--header-height);
    background: var(--white);
    border-bottom: 1px solid var(--dark-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-bar-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-800);
    letter-spacing: -.3px;
}

.top-bar-subtitle {
    font-size: 13px;
    color: var(--dark-300);
    font-weight: 400;
    margin-top: 1px;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-content {
    padding: 28px 36px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
    white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; }

.btn-primary {
    background: var(--teal-500);
    color: var(--white);
    box-shadow: 0 1px 3px rgba(90,158,163,.2);
}

.btn-primary:hover {
    background: var(--teal-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(90,158,163,.25);
    color: var(--white);
}

.btn-gold {
    background: var(--gold-400);
    color: var(--white);
    box-shadow: 0 1px 3px rgba(196,154,58,.2);
}

.btn-gold:hover {
    background: var(--gold-500);
    transform: translateY(-1px);
    color: var(--white);
}

.btn-outline {
    background: var(--white);
    color: var(--dark-500);
    border: 1px solid var(--dark-200);
}

.btn-outline:hover {
    border-color: var(--teal-400);
    color: var(--teal-600);
    background: var(--teal-50);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-danger:hover {
    background: #dc2626;
    color: var(--white);
}

.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--dark-100);
    overflow: hidden;
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--dark-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-700);
    line-height: 1.3;
}

.card-header-subtitle {
    font-size: 13px;
    color: var(--dark-300);
    font-weight: 400;
    margin-top: 2px;
}

.card-body { padding: 24px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px 24px 22px;
    border: 1px solid var(--dark-100);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
    letter-spacing: .2px;
}

.stat-card-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.stat-card-icon.teal { background: var(--teal-100); color: var(--teal-600); }
.stat-card-icon.gold { background: var(--gold-100); color: var(--gold-500); }
.stat-card-icon.green { background: #dcfce7; color: var(--success); }
.stat-card-icon.red { background: #fee2e2; color: var(--danger); }
.stat-card-icon.blue { background: #dbeafe; color: var(--info); }
.stat-card-icon.purple { background: #ede9fe; color: var(--purple); }
.stat-card-icon.orange { background: #ffedd5; color: var(--orange); }

.stat-card-icon svg { width: 24px; height: 24px; }

.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark-800);
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -.5px;
}

.stat-card-label {
    font-size: 13px;
    color: var(--dark-400);
    font-weight: 500;
}

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    padding: 13px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--dark-300);
    background: var(--dark-50);
    border-bottom: 1px solid var(--dark-100);
}

table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dark-100);
    font-size: 13.5px;
    color: var(--dark-600);
}

table tr:hover td {
    background: var(--teal-50);
}

table tr:last-child td { border-bottom: none; }

.badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.badge-draft { background: var(--dark-100); color: var(--dark-500); }
.badge-active, .badge-sent, .badge-in_progress { background: #dbeafe; color: #1d4ed8; }
.badge-accepted, .badge-paid, .badge-completed { background: #dcfce7; color: #166534; }
.badge-rejected, .badge-cancelled, .badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-expired { background: var(--gold-100); color: var(--gold-600); }
.badge-closed { background: var(--dark-200); color: var(--dark-600); }
.badge-partially_paid { background: #fef3c7; color: #92400e; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-secondary { background: var(--dark-100); color: var(--dark-500); }

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-600);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--dark-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--dark-700);
    background: var(--white);
    transition: var(--transition);
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--teal-400);
    box-shadow: 0 0 0 3px rgba(168,213,216,.2);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b73' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control { min-height: 80px; resize: vertical; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-inline {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--dark-100);
    margin-top: 24px;
}

.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--dark-400);
}

.empty-state > svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: .4;
}

.empty-state h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--dark-500);
}

.empty-state p {
    font-size: 14px;
    margin-bottom: 20px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.detail-item {
    padding: 12px 0;
}

.detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dark-400);
    margin-bottom: 4px;
}

.detail-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-700);
}

.budget-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px;
    background: var(--dark-50);
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.budget-summary-item {
    text-align: center;
}

.budget-summary-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.budget-summary-value.revenue { color: var(--teal-600); }
.budget-summary-value.cost { color: var(--danger); }
.budget-summary-value.profit { color: var(--success); }
.budget-summary-value.negative { color: var(--danger); }

.budget-summary-label {
    font-size: 12px;
    color: var(--dark-400);
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--dark-100);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease;
}

.progress-bar-fill.teal { background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }
.progress-bar-fill.gold { background: linear-gradient(90deg, var(--gold-300), var(--gold-500)); }
.progress-bar-fill.green { background: linear-gradient(90deg, #4ade80, var(--success)); }

.chart-container {
    position: relative;
    height: 300px;
    max-height: 300px;
    padding: 20px;
    overflow: hidden;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-800) 0%, var(--dark-900) 50%, var(--teal-700) 100%);
}

.login-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    width: 420px;
    max-width: 90vw;
    overflow: hidden;
}

.login-header {
    background: linear-gradient(135deg, var(--dark-800), var(--dark-700));
    padding: 36px 40px 30px;
    text-align: center;
}

.login-header img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    margin-bottom: 14px;
    background: var(--white);
    padding: 6px;
}

.login-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.login-header p {
    font-size: 13px;
    color: var(--dark-300);
}

.login-body {
    padding: 36px 40px;
}

.login-body .form-group { margin-bottom: 22px; }

.login-body .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
}

.money-in { color: var(--success); }
.money-out { color: var(--danger); }
.text-muted { color: var(--dark-400); }
.text-bold { font-weight: 700; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.w-full { width: 100%; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-700);
}

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

.action-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-tabs {
    display: flex;
    gap: 4px;
    background: var(--dark-50);
    padding: 4px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
}

.page-tab {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-400);
    transition: var(--transition);
    cursor: pointer;
}

.page-tab:hover { color: var(--dark-700); }

.page-tab.active {
    background: var(--white);
    color: var(--teal-600);
    box-shadow: var(--shadow-sm);
}

.tooltip {
    position: relative;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.errorlist li {
    color: var(--danger);
    font-size: 12px;
}

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-700);
    padding: 4px;
    border-radius: 6px;
}
.hamburger-btn:hover {
    background: var(--dark-50);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.5);
    z-index: 99;
}
.sidebar-overlay.active {
    display: block;
}

.stat-card-sub {
    font-size: 12px;
    color: var(--dark-400);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform .3s ease;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content { margin-left: 0; }
    .page-content { padding: 16px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .budget-summary { grid-template-columns: 1fr; }
    .hamburger-btn { display: block; }
    .top-bar { padding: 0 16px; height: 60px; }
    .top-bar-subtitle { display: none; }
    .stat-card-badge { display: none; }
}

body.rtl {
  direction: rtl;
  text-align: right;
}

body.rtl .sidebar {
  left: auto;
  right: 0;
}

body.rtl .main-content {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

body.rtl .sidebar-link {
  flex-direction: row-reverse;
}

body.rtl .sidebar-brand {
  flex-direction: row-reverse;
}

body.rtl .sidebar-user {
  flex-direction: row-reverse;
}

body.rtl table th,
body.rtl table td {
  text-align: right;
}

body.rtl .text-right {
  text-align: left;
}

body.rtl .top-bar {
  flex-direction: row-reverse;
}

body.rtl .top-bar-actions {
  flex-direction: row-reverse;
}

body.rtl .btn {
  flex-direction: row-reverse;
}

body.rtl .stat-card-icon {
  margin-left: 0;
  margin-right: 0;
}

body.rtl .stat-card-badge {
  right: auto;
  left: 16px;
}

body.rtl select.form-control {
  background-position: left 12px center;
  padding-left: 36px;
  padding-right: 14px;
}

body.rtl .form-actions {
  justify-content: flex-start;
}

body.rtl .section-header {
  flex-direction: row-reverse;
}

body.rtl .card-header {
  flex-direction: row-reverse;
}

body.rtl .badge {
  direction: ltr;
}

body.rtl .sidebar-section-title {
  text-align: right;
}

body.rtl .sidebar-footer .sidebar-link {
  flex-direction: row-reverse;
}

body.rtl .alert {
  flex-direction: row-reverse;
}

body.rtl .detail-grid {
  direction: rtl;
}

body.rtl .action-group {
  flex-direction: row-reverse;
}

body.rtl .page-tabs {
  flex-direction: row-reverse;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--dark-50);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--dark-200);
}

.lang-toggle-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--dark-400);
  transition: var(--transition);
}

.lang-toggle-btn.active {
  background: var(--teal-500);
  color: white;
  box-shadow: var(--shadow-sm);
}

.lang-toggle-btn:hover:not(.active) {
  color: var(--dark-600);
}

@media (max-width: 768px) {
  body.rtl .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  body.rtl .sidebar.open {
    transform: translateX(0);
  }
  body.rtl .main-content { margin-right: 0; }
}

.sidebar-section-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sidebar-section-toggle:hover { color: var(--teal-500); }
.sidebar-chevron { transition: transform .2s ease; flex-shrink: 0; }
.sidebar-chevron.rotated { transform: rotate(-90deg); }
.sidebar-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sidebar-collapsible.open { max-height: 500px; }

.step-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--dark-100);
  padding-bottom: 0;
}
.step-tab {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-400);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
}
.step-tab.active {
  color: var(--teal-600);
  border-bottom-color: var(--teal-500);
}
.step-tab:hover { color: var(--teal-500); }
.step-content { display: none; }
.step-content.active { display: block; }

.profile-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--dark-100);
  overflow-x: auto;
}
.profile-tab {
  padding: 10px 18px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-400);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: var(--transition);
}
.profile-tab.active {
  color: var(--teal-600);
  border-bottom-color: var(--teal-500);
}
.profile-tab:hover { color: var(--teal-500); }

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal-200);
  color: var(--teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-info h2 { margin: 0; font-size: 20px; }
.profile-info p { margin: 4px 0 0; color: var(--dark-400); font-size: 14px; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.info-item label {
  display: block;
  font-size: 12px;
  color: var(--dark-400);
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-item span {
  font-size: 14px;
  color: var(--dark-700);
}

.upload-zone {
  border: 2px dashed var(--dark-200);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.upload-zone:hover { border-color: var(--teal-400); background: var(--teal-50); }

.preview-table { width: 100%; margin-top: 16px; }
.preview-table th {
  background: var(--teal-600);
  color: white;
  padding: 8px 12px;
  font-size: 12px;
  text-align: left;
}
.preview-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--dark-100);
}
.preview-table tr.invalid { background: #fff5f5; }
.preview-table tr.valid { background: #f0fdf4; }

.omr-sym {
    display: inline-block;
    width: 1.1em;
    height: 0.7em;
    background: url("/static/images/omr-symbol.52503e753b63.png") no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    margin-right: 2px;
    position: relative;
    top: -1px;
}

/* ===== Sidebar collapse toggle (added 2026-05-16) ===== */
.sidebar-brand {
    position: relative;
}
.sidebar-collapse-btn {
    margin-left: auto;
    background: rgba(255,255,255,.06);
    border: none;
    color: var(--white);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
    background: rgba(255,255,255,.18);
}
.sidebar-collapse-btn .icon-expand { display: none; }
body.sidebar-collapsed .sidebar-collapse-btn .icon-collapse { display: none; }
body.sidebar-collapsed .sidebar-collapse-btn .icon-expand { display: inline-block; }
body.rtl .sidebar-collapse-btn .icon-collapse { transform: scaleX(-1); }
body.rtl .sidebar-collapse-btn .icon-expand { transform: scaleX(-1); }

/* When collapsed: shrink sidebar to icon rail */
body.sidebar-collapsed .sidebar {
    width: 64px;
}
body.sidebar-collapsed .sidebar-brand {
    padding: 18px 12px;
    justify-content: center;
}
body.sidebar-collapsed .sidebar-brand img {
    margin: 0;
}
body.sidebar-collapsed .sidebar-brand-text { display: none; }
body.sidebar-collapsed .sidebar-section-title { display: none; }
body.sidebar-collapsed .sidebar-nav { padding: 12px 8px; }
body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 11px 8px;
    gap: 0;
}
body.sidebar-collapsed .sidebar-link span { display: none; }
body.sidebar-collapsed .sidebar-chevron { display: none; }
body.sidebar-collapsed .sidebar-section-toggle {
    cursor: default;
}
body.sidebar-collapsed .sidebar-collapsible {
    /* keep HR items visible as icons when collapsed */
    max-height: none !important;
}
body.sidebar-collapsed .sidebar-user-info { display: none; }
body.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding: 4px;
}
body.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px;
}

/* Hide collapse button when sidebar is collapsed (button stays inside the 64px rail, centered with logo) */
body.sidebar-collapsed .sidebar-collapse-btn {
    position: absolute;
    bottom: -18px;
    right: 50%;
    transform: translateX(50%);
    width: 28px;
    height: 28px;
    background: var(--teal-600);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    z-index: 2;
}
body.sidebar-collapsed .sidebar-collapse-btn:hover {
    background: var(--teal-500);
}

/* Shift main content to match new sidebar width */
body.sidebar-collapsed .main-content {
    margin-left: 64px;
}
body.rtl.sidebar-collapsed .main-content {
    margin-left: 0;
    margin-right: 64px;
}

/* Tooltips on hover when collapsed (so user can read item names) */
body.sidebar-collapsed .sidebar-link {
    position: relative;
}
body.sidebar-collapsed .sidebar-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--dark-900);
    color: var(--white);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    pointer-events: none;
}
body.rtl.sidebar-collapsed .sidebar-link:hover::after {
    left: auto;
    right: calc(100% + 12px);
}

/* Mobile (<=768px): collapse toggle hidden — mobile uses the original overlay */
@media (max-width: 768px) {
    .sidebar-collapse-btn { display: none; }
    body.sidebar-collapsed .sidebar { width: var(--sidebar-width); }
    body.sidebar-collapsed .main-content { margin-left: 0; }
    body.rtl.sidebar-collapsed .main-content { margin-right: 0; }
}

/* ===== Page-tour theming (Driver.js) — added 2026-05-16 ===== */
.sidebar-help-btn {
    /* Looks like other sidebar links */
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--white);
}
.sidebar-help-btn:hover {
    background: rgba(255,255,255,.1);
}
.sidebar-help-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .7;
}
.sidebar-help-btn:hover svg { opacity: 1; }

/* Driver.js popover — teal/gold theme matching SR Events brand */
.driver-popover {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(26,35,50,.35), 0 4px 12px rgba(26,35,50,.15);
    padding: 22px 24px !important;
    border: 1px solid rgba(26,122,126,.15);
    max-width: 360px !important;
}
.driver-popover * { font-family: 'Inter', sans-serif !important; }
.driver-popover-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a2332;
    margin-bottom: 6px;
    line-height: 1.35 !important;
}
.driver-popover-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #4a5568;
}
.driver-popover-footer {
    margin-top: 18px !important;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,.06);
}
.driver-popover-progress-text {
    font-size: 12px !important;
    color: #1a7a7e !important;
    font-weight: 600;
}
.driver-popover-navigation-btns {
    gap: 8px;
}
.driver-popover-footer button {
    background: #fff !important;
    color: #1a7a7e !important;
    border: 1.5px solid #1a7a7e !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all .15s ease;
}
.driver-popover-footer button:hover {
    background: #1a7a7e !important;
    color: #fff !important;
}
.driver-popover-next-btn {
    background: #1a7a7e !important;
    color: #fff !important;
}
.driver-popover-next-btn:hover {
    background: #155a5d !important;
    color: #fff !important;
}
.driver-popover-close-btn {
    color: #a0aec0 !important;
    font-size: 22px !important;
    top: 8px !important;
    right: 12px !important;
}
.driver-popover-close-btn:hover {
    color: #1a2332 !important;
}
.driver-popover-arrow {
    border-color: #fff !important;
}

/* RTL adjustments */
body.rtl .driver-popover-footer { flex-direction: row-reverse; }
body.rtl .driver-popover-close-btn { right: auto !important; left: 12px !important; }

/* Top-bar 'Guide me' tour button — always visible on every page */
.topbar-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #1a7a7e, #155a5d);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 2px 8px rgba(26,122,126,.25);
    font-family: inherit;
}
.topbar-tour-btn:hover {
    background: linear-gradient(135deg, #155a5d, #0f4446);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,122,126,.4);
}
.topbar-tour-btn:active {
    transform: translateY(0);
}
.topbar-tour-btn svg {
    opacity: .95;
}
@media (max-width: 768px) {
    .topbar-tour-btn span { display: none; }
    .topbar-tour-btn { padding: 8px; }
}

/* Tour dropdown menu (Quick + Detailed options) */
.topbar-tour-wrapper {
    position: relative;
    display: inline-block;
}
.topbar-tour-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(26,35,50,.18), 0 4px 12px rgba(26,35,50,.08);
    min-width: 280px;
    padding: 6px;
    display: none;
    z-index: 1000;
    border: 1px solid rgba(26,122,126,.12);
}
.topbar-tour-menu.open {
    display: block;
    animation: tourMenuFadeIn .15s ease-out;
}
@keyframes tourMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.topbar-tour-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: start;
    cursor: pointer;
    transition: background .12s ease;
    font-family: inherit;
}
.topbar-tour-menu-item:hover {
    background: rgba(26,122,126,.06);
}
.topbar-tour-menu-item + .topbar-tour-menu-item {
    margin-top: 2px;
}
.topbar-tour-menu-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.topbar-tour-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a2332;
    margin-bottom: 2px;
}
.topbar-tour-menu-sub {
    font-size: 12px;
    color: #718096;
}
body.rtl .topbar-tour-menu { right: auto; left: 0; }

/* ============================================================
   AL QAIDA — Premium dashboard layer (aq- namespace)
   Appended after base theme so these win. Uses brand vars:
   --teal-600 = slate #39434f, --gold-400 = amber #f2b01e
   ============================================================ */
.aq{--aq-ink:#222a31;--aq-ink2:#5c656f;--aq-muted:#8c949e;--aq-surface:#fff;--aq-canvas:#f4f2ee;
   --aq-border:#e8e4dc;--aq-amber:#f2b01e;--aq-amber-d:#d9991a;--aq-slate:#39434f;--aq-slate-d:#2e3742;
   --aq-ok:#2f9e6b;--aq-ok-s:#e6f3ec;--aq-warn:#e0820c;--aq-warn-s:#fbefda;--aq-danger:#d5485b;--aq-danger-s:#fbe8eb;--aq-info:#3e7bc0;--aq-info-s:#e8f0fa;
   --aq-r:14px;font-variant-numeric:tabular-nums}
.aq *{box-sizing:border-box}
.aq .num{font-variant-numeric:tabular-nums}

/* greeting */
.aq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.aq-head h2{font-size:23px;font-weight:700;letter-spacing:-.3px;color:var(--aq-ink);margin:0}
.aq-head .sub{font-size:13px;color:var(--aq-ink2);margin-top:3px}
.aq-actions{display:flex;gap:10px;align-items:center}
.aq-btn{height:40px;padding:0 15px;border-radius:10px;font-size:13px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .12s,background .15s}
.aq-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.aq-btn-ghost{background:#fff;border-color:var(--aq-border);color:var(--aq-ink)}
.aq-btn-primary{background:var(--aq-amber);color:#3a2c05;box-shadow:0 6px 16px -8px rgba(242,176,30,.9)}
.aq-btn-primary:hover{background:var(--aq-amber-d);transform:translateY(-1px)}

/* needs-attention band */
.aq-attn{display:grid;grid-template-columns:auto repeat(4,1fr);gap:12px;align-items:stretch;margin-bottom:20px}
.aq-attn .lead{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-right:6px}
.aq-attn .lead .t{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--aq-ink)}
.aq-attn .lead .t svg{width:16px;height:16px;stroke:var(--aq-amber);fill:none;stroke-width:2}
.aq-attn .lead .s{font-size:11.5px;color:var(--aq-muted)}
.aq-attn .item{background:var(--aq-surface);border:1px solid var(--aq-border);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(40,38,32,.05);transition:box-shadow .15s,transform .12s;text-decoration:none}
.aq-attn .item:hover{box-shadow:0 8px 22px -12px rgba(40,38,32,.25);transform:translateY(-1px)}
.aq-attn .item .row1{display:flex;align-items:center;justify-content:space-between}
.aq-attn .item .chip{width:26px;height:26px;border-radius:8px;display:grid;place-items:center}
.aq-attn .item .chip svg{width:15px;height:15px;fill:none;stroke-width:2}
.aq-attn .item .n{font-size:17px;font-weight:700;color:var(--aq-ink)}
.aq-attn .item .lbl{font-size:11.5px;color:var(--aq-ink2);line-height:1.3}
.aq-c-danger{background:var(--aq-danger-s)} .aq-c-danger svg{stroke:var(--aq-danger)}
.aq-c-warn{background:var(--aq-warn-s)} .aq-c-warn svg{stroke:var(--aq-warn)}
.aq-c-info{background:var(--aq-info-s)} .aq-c-info svg{stroke:var(--aq-info)}
.aq-c-ok{background:var(--aq-ok-s)} .aq-c-ok svg{stroke:var(--aq-ok)}

/* KPI row */
.aq-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.aq-kpi{background:var(--aq-surface);border:1px solid var(--aq-border);border-radius:var(--aq-r);padding:16px 17px;box-shadow:0 1px 2px rgba(40,38,32,.05);display:flex;flex-direction:column;gap:9px;min-height:116px}
.aq-kpi .k-top{display:flex;align-items:center;justify-content:space-between}
.aq-kpi .k-lab{font-size:12px;color:var(--aq-ink2);font-weight:500}
.aq-kpi .k-ico{width:30px;height:30px;border-radius:9px;background:#faf9f6;border:1px solid var(--aq-border);display:grid;place-items:center}
.aq-kpi .k-ico svg{width:16px;height:16px;stroke:var(--aq-slate);fill:none;stroke-width:1.8}
.aq-kpi .k-val{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--aq-ink)}
.aq-kpi .k-val .cur{font-size:12px;font-weight:600;color:var(--aq-muted);margin-inline-end:3px}
.aq-kpi .k-foot{display:flex;align-items:center;gap:7px;font-size:12px;margin-top:auto}
.aq-delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;padding:2px 7px;border-radius:999px;font-size:11.5px}
.aq-delta.up{color:var(--aq-ok);background:var(--aq-ok-s)} .aq-delta.down{color:var(--aq-danger);background:var(--aq-danger-s)} .aq-delta.flat{color:var(--aq-ink2);background:#f3f1ec}
.aq-note{color:var(--aq-muted)}
.aq-spark{height:30px;width:100%}

/* layout grids + cards */
.aq-grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:20px}
.aq-grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-bottom:20px}
.aq-card{background:var(--aq-surface);border:1px solid var(--aq-border);border-radius:var(--aq-r);box-shadow:0 1px 2px rgba(40,38,32,.05);display:flex;flex-direction:column}
.aq-card .ch{display:flex;align-items:center;justify-content:space-between;padding:15px 17px 8px}
.aq-card .ch h3{font-size:14px;font-weight:600;margin:0;color:var(--aq-ink)}
.aq-card .ch .cap{font-size:11.5px;color:var(--aq-muted);margin-top:2px}
.aq-card .cb{padding:6px 17px 17px}
.aq-insight{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:11px 13px;background:#faf9f6;border:1px solid var(--aq-border);border-radius:10px}
.aq-insight svg{width:18px;height:18px;flex:0 0 auto;color:var(--aq-amber);stroke:currentColor;fill:none;stroke-width:1.8}
.aq-insight p{font-size:12.5px;color:var(--aq-ink2);line-height:1.5;margin:0}
.aq-insight b{color:var(--aq-ink);font-weight:600}

/* AI smart summary panel */
.aq-ai{background:linear-gradient(168deg,#3a4450,#2c343e);color:#e7eaee;border-radius:var(--aq-r);padding:17px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.aq-ai::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;background:radial-gradient(circle,rgba(242,176,30,.22),transparent 70%)}
.aq-ai .ah{display:flex;align-items:center;gap:9px;z-index:1}
.aq-ai .ah .sp{width:26px;height:26px;border-radius:8px;background:rgba(242,176,30,.18);display:grid;place-items:center}
.aq-ai .ah .sp svg{width:15px;height:15px;stroke:var(--aq-amber);fill:none;stroke-width:1.9}
.aq-ai .ah h3{font-size:13.5px;font-weight:600;color:#fff;margin:0}
.aq-ai .ah .tag{margin-inline-start:auto;font-size:10px;font-weight:600;letter-spacing:.6px;color:#aeb6bf;border:1px solid rgba(255,255,255,.15);padding:2px 7px;border-radius:999px}
.aq-ai p.lead{font-size:12.5px;line-height:1.55;color:#cdd3da;z-index:1;margin:0}
.aq-ai p.lead b{color:#fff;font-weight:600}
.aq-ai .rec{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:#d6dbe1;line-height:1.4;z-index:1}
.aq-ai .rec .d{width:6px;height:6px;border-radius:50%;background:var(--aq-amber);margin-top:6px;flex:0 0 auto}

/* mini pipeline / placeholder modules */
.aq-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 14px;text-align:center;color:var(--aq-muted)}
.aq-soon svg{width:26px;height:26px;stroke:var(--aq-slate);fill:none;stroke-width:1.6;opacity:.5}
.aq-soon .t{font-size:13px;font-weight:600;color:var(--aq-ink2)}
.aq-soon .s{font-size:11.5px}
.aq-soon .pill{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--aq-amber-d);background:var(--aq-warn-s);padding:3px 9px;border-radius:999px}

/* table */
.aq-tbl{width:100%;border-collapse:collapse}
.aq-tbl thead th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--aq-muted);font-weight:600;text-align:start;padding:9px 17px;border-bottom:1px solid var(--aq-border);background:#faf9f6}
.aq-tbl thead th.r,.aq-tbl td.r{text-align:end}
.aq-tbl tbody td{padding:11px 17px;font-size:13px;border-bottom:1px solid var(--aq-border);color:var(--aq-ink)}
.aq-tbl tbody tr:last-child td{border-bottom:0}
.aq-tbl tbody tr:hover{background:#faf9f6}
.aq-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.aq-badge .d{width:6px;height:6px;border-radius:50%}
.aq-badge.ok{background:var(--aq-ok-s);color:#1f7e51} .aq-badge.ok .d{background:var(--aq-ok)}
.aq-badge.warn{background:var(--aq-warn-s);color:#a9620a} .aq-badge.warn .d{background:var(--aq-warn)}
.aq-badge.bad{background:var(--aq-danger-s);color:#a83545} .aq-badge.bad .d{background:var(--aq-danger)}
.aq-badge.info{background:var(--aq-info-s);color:#2c5d96} .aq-badge.info .d{background:var(--aq-info)}
.aq-empty{padding:30px 16px;text-align:center;color:var(--aq-muted);font-size:13px}

@media (max-width:1100px){.aq-attn{grid-template-columns:1fr 1fr}.aq-kpis{grid-template-columns:1fr 1fr}.aq-grid2,.aq-grid3{grid-template-columns:1fr}}
body.rtl .aq-ai .ah .tag{margin-inline-start:auto}