:root {
  --aladawy-ink: #171915;
  --aladawy-ink-soft: #252922;
  --aladawy-green: #9dbb3f;
  --aladawy-green-strong: #78931f;
  --aladawy-green-soft: #eef4dc;
  --aladawy-canvas: #f4f2eb;
  --aladawy-surface: #fffefa;
  --aladawy-surface-2: #ebe9e1;
  --aladawy-line: #d9d7cd;
  --aladawy-muted: #6e7168;
  --aladawy-danger: #b9473f;
  --aladawy-warning: #b77a18;
  --aladawy-success: #4f7d39;
  --primary: var(--aladawy-green-strong);
  --primary-soft: var(--aladawy-green-soft);
  --bg: var(--aladawy-canvas);
  --surface: var(--aladawy-surface);
  --border: var(--aladawy-line);
  --text: var(--aladawy-ink);
  --muted: var(--aladawy-muted);
  --v2-brand: var(--aladawy-green-strong);
  --v2-brand-strong: #607719;
  --v2-brand-soft: var(--aladawy-green-soft);
  --v2-bg: var(--aladawy-canvas);
  --v2-surface: var(--aladawy-surface);
  --v2-surface-muted: var(--aladawy-surface-2);
  --v2-border: var(--aladawy-line);
  --v2-text: var(--aladawy-ink);
  --v2-text-muted: var(--aladawy-muted);
  --v2-shadow-sm: 0 1px 2px rgba(23, 25, 21, .05), 0 7px 20px rgba(23, 25, 21, .05);
  --v2-shadow-md: 0 2px 4px rgba(23, 25, 21, .06), 0 18px 42px rgba(23, 25, 21, .09);
  --v2-radius: 14px;
  --v2-radius-lg: 20px;
}

:root[data-theme="dark"] {
  --aladawy-ink: #f0f1e9;
  --aladawy-ink-soft: #d7d9ce;
  --aladawy-green: #b2cf50;
  --aladawy-green-strong: #a6c248;
  --aladawy-green-soft: #2b351c;
  --aladawy-canvas: #11130f;
  --aladawy-surface: #191c17;
  --aladawy-surface-2: #22261f;
  --aladawy-line: #353a30;
  --aladawy-muted: #a1a699;
  --aladawy-danger: #eb756c;
  --aladawy-warning: #e3a843;
  --aladawy-success: #88b96b;
  --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 22px rgba(0, 0, 0, .18);
  --v2-shadow-md: 0 3px 6px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .24);
}

html { background: var(--aladawy-canvas); }
body { color: var(--aladawy-ink); background: var(--aladawy-canvas); text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--aladawy-green) 65%, transparent); outline-offset: 2px; }

.auth-body { background: var(--aladawy-canvas); color: var(--aladawy-ink); }
.auth-shell { background: var(--aladawy-canvas); }
.auth-visual { position: relative; overflow: hidden; background: #171a15; color: #f5f6ef; }
.auth-visual::before { content: ""; position: absolute; width: 440px; height: 440px; right: -210px; bottom: -180px; border: 70px solid rgba(169,199,72,.11); border-radius: 50%; }
.auth-visual__copy, .auth-brand { position: relative; z-index: 1; }
.auth-visual__copy p { color: var(--aladawy-green); }
.auth-visual__copy h1 { color: #fff; }
.auth-visual__copy span { color: #bfc5b7; }
.auth-pattern { opacity: .06; filter: saturate(.4); }
.auth-content { background: var(--aladawy-canvas); }
.auth-card { background: var(--aladawy-surface); border: 1px solid var(--aladawy-line); box-shadow: var(--v2-shadow-md); }
.auth-logo-viewport { width: 58px !important; height: 58px !important; display: inline-block; border: 1px solid rgba(255,255,255,.16); }
.auth-mobile-brand .auth-logo-viewport { width: 44px !important; height: 44px !important; }
.auth-card button[type="submit"] { background: var(--aladawy-ink); color: var(--aladawy-canvas); border-color: var(--aladawy-ink); }
.auth-card button[type="submit"]:hover { background: var(--aladawy-green-strong); border-color: var(--aladawy-green-strong); color: #fff; }

.sidebar {
  background: var(--aladawy-ink);
  color: #f4f4ec;
  border-inline-end: 1px solid rgba(255,255,255,.08);
  box-shadow: 12px 0 40px rgba(0,0,0,.12);
}
:root[data-theme="dark"] .sidebar { background: #0b0d0a; }
.brand { min-height: 84px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand__logo-viewport, .company-mini__logo-viewport, .auth-logo-viewport {
  position: relative; overflow: hidden; background: #fff; border-radius: 11px; flex: 0 0 auto;
}
.brand__logo-viewport { width: 48px; height: 48px; }
.company-mini__logo-viewport { width: 34px; height: 34px; border-radius: 9px; }
.brand__logo-viewport img, .company-mini__logo-viewport img, .auth-logo-viewport img {
  position: absolute; width: 176%; max-width: none; height: auto; left: 50%; top: 49%; transform: translate(-50%, -50%);
}
.brand__copy strong, .company-mini__copy strong { color: #fff; letter-spacing: .035em; }
.brand__copy small, .company-mini__copy small { color: #aeb4a6; }
.nav-group__title { color: #858d7c; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-item { color: #c8cdc0; border: 1px solid transparent; border-radius: 11px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item--active { color: #f8f9f1; background: rgba(157,187,63,.15); border-color: rgba(178,207,80,.24); box-shadow: inset 3px 0 0 var(--aladawy-green); }
[dir="rtl"] .nav-item--active { box-shadow: inset -3px 0 0 var(--aladawy-green); }
.nav-item--active svg { color: var(--aladawy-green); }
.nav-badge { background: var(--aladawy-green); color: #171915; }
.sidebar__footer { border-top-color: rgba(255,255,255,.09); }

.topbar { background: color-mix(in srgb, var(--aladawy-surface) 92%, transparent); border-bottom: 1px solid var(--aladawy-line); backdrop-filter: blur(16px); }
.search { background: var(--aladawy-surface-2); border: 1px solid transparent; border-radius: 12px; }
.search:focus-within { background: var(--aladawy-surface); border-color: var(--aladawy-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aladawy-green) 16%, transparent); }
.icon-button, .profile--button { border-color: var(--aladawy-line); background: var(--aladawy-surface); color: var(--aladawy-ink); }
.icon-button:hover, .profile--button:hover { border-color: var(--aladawy-green); background: var(--aladawy-green-soft); }
.notification__badge { background: var(--aladawy-danger); border-color: var(--aladawy-surface); }
.dropdown-menu { border: 1px solid var(--aladawy-line); background: var(--aladawy-surface); box-shadow: var(--v2-shadow-md); border-radius: 16px; }
.notification-menu { width: min(410px, calc(100vw - 24px)); overflow: hidden; }
.notification-menu > header { padding: 17px 18px; border-bottom: 1px solid var(--aladawy-line); }
.notification-list { max-height: 390px; overflow-y: auto; overscroll-behavior: contain; }
.notification-item { position: relative; width: 100%; text-align: start; padding: 14px 18px 14px 50px; border: 0; border-bottom: 1px solid var(--aladawy-line); background: transparent; color: var(--aladawy-ink); }
[dir="rtl"] .notification-item { padding: 14px 50px 14px 18px; }
.notification-item::before { content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 7px; background: var(--aladawy-surface-2); box-shadow: inset 0 0 0 6px var(--aladawy-green-soft); }
[dir="rtl"] .notification-item::before { left: auto; right: 18px; }
.notification-item--unread { background: color-mix(in srgb, var(--aladawy-green-soft) 64%, transparent); }
.notification-item--unread::after { content: ""; position: absolute; inset-inline-end: 10px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--aladawy-green-strong); }
.notification-item:hover { background: var(--aladawy-surface-2); }
.notification-item strong { display: block; margin-bottom: 4px; }
.notification-item small { display: block; color: var(--aladawy-muted); line-height: 1.55; }
.notification-history-link { display: block; padding: 13px 18px; text-align: center; color: var(--aladawy-green-strong); font-weight: 750; }

.content { max-width: 1680px; width: 100%; margin-inline: auto; }
.v2-card, .card, .panel, .metric-card, .table-card { background: var(--aladawy-surface); border-color: var(--aladawy-line); box-shadow: var(--v2-shadow-sm); }
.v2-button--primary, .btn-primary, button[type="submit"].primary { background: var(--aladawy-ink); border-color: var(--aladawy-ink); color: var(--aladawy-canvas); }
.v2-button--primary:hover, .btn-primary:hover, button[type="submit"].primary:hover { background: var(--aladawy-green-strong); border-color: var(--aladawy-green-strong); color: #fff; }
.v2-badge--brand { color: var(--aladawy-green-strong); background: var(--aladawy-green-soft); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  color: var(--aladawy-ink); background: var(--aladawy-surface); border: 1px solid var(--aladawy-line); border-radius: 11px;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--aladawy-green-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aladawy-green) 15%, transparent); }
.password-control, .date-control { position: relative; display: block; }
.password-control input { width: 100%; padding-inline-end: 46px !important; }
[dir="rtl"] .password-control input { padding-inline-start: 46px !important; padding-inline-end: 12px !important; }
.password-toggle { position: absolute; inset-inline-end: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--aladawy-muted); background: transparent; }
.password-toggle:hover { color: var(--aladawy-ink); background: var(--aladawy-surface-2); }
.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
input[type="date"], input[type="datetime-local"] { min-height: 46px; font-variant-numeric: tabular-nums; color-scheme: light; }
:root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .72; cursor: pointer; padding: 7px; border-radius: 7px; }
input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { background: var(--aladawy-green-soft); }

.premium-page { display: grid; gap: 20px; }
.premium-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 170px; padding: 28px 30px; color: #f7f8ef; background: #1a1d17; border: 1px solid #2e3428; border-radius: 22px; box-shadow: var(--v2-shadow-md); }
.premium-hero::after { content: ""; position: absolute; width: 260px; height: 260px; inset-inline-end: -80px; top: -90px; border: 48px solid rgba(174,204,75,.12); border-radius: 50%; }
.premium-hero__content, .premium-hero__identity { position: relative; z-index: 1; }
.premium-hero__eyebrow { margin: 0 0 8px; color: #bdca9f; font-size: .82rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.premium-hero h1 { margin: 0; color: #fff; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.2; }
.premium-hero p { max-width: 660px; margin: 10px 0 0; color: #c7ccbe; line-height: 1.7; }
.premium-hero__identity { display: flex; align-items: center; gap: 14px; min-width: max-content; }
.premium-avatar { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 19px; border: 2px solid rgba(178,207,80,.62); background: #2d3424; color: #fff; font-size: 1.35rem; font-weight: 800; }
.premium-avatar img { width: 100%; height: 100%; object-fit: cover; }
.premium-hero__date { color: #bbc2b2; font-size: .82rem; }

.priority-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: 20px; align-items: start; }
.premium-panel { min-width: 0; padding: 21px; background: var(--aladawy-surface); border: 1px solid var(--aladawy-line); border-radius: 18px; box-shadow: var(--v2-shadow-sm); }
.premium-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.premium-panel__head h2, .premium-panel__head h3 { margin: 0; font-size: 1.08rem; }
.premium-panel__head p { margin: 4px 0 0; color: var(--aladawy-muted); font-size: .82rem; }
.premium-count { display: inline-grid; min-width: 29px; height: 29px; padding: 0 8px; place-items: center; border-radius: 9px; background: var(--aladawy-green-soft); color: var(--aladawy-green-strong); font-weight: 800; }
.action-stack, .reminder-stack, .ranking-list { display: grid; gap: 10px; }
.action-row, .reminder-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--aladawy-line); border-radius: 13px; background: color-mix(in srgb, var(--aladawy-surface) 83%, var(--aladawy-surface-2)); }
.action-row__icon, .reminder-row__icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: var(--aladawy-green-strong); background: var(--aladawy-green-soft); }
.action-row__body, .reminder-row__body { min-width: 0; }
.action-row__body strong, .reminder-row__body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-row__body small, .reminder-row__body small { display: block; margin-top: 3px; color: var(--aladawy-muted); }
.reminder-row--overdue { border-inline-start: 3px solid var(--aladawy-danger); }
.reminder-row--now { border-inline-start: 3px solid var(--aladawy-warning); }
.row-actions { display: flex; align-items: center; gap: 5px; }
.row-action { padding: 6px 9px; border: 1px solid var(--aladawy-line); border-radius: 8px; color: var(--aladawy-ink); background: var(--aladawy-surface); font-size: .75rem; font-weight: 700; text-decoration: none; }
.row-action:hover { border-color: var(--aladawy-green); color: var(--aladawy-green-strong); }
.empty-compact { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 13px; border: 1px dashed var(--aladawy-line); border-radius: 13px; color: var(--aladawy-muted); background: var(--aladawy-surface-2); }
.empty-compact__mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--aladawy-green-soft); color: var(--aladawy-green-strong); font-weight: 900; }
.metric-strip { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 11px; }
.pulse-card { min-width: 0; padding: 15px; border: 1px solid var(--aladawy-line); border-radius: 15px; background: var(--aladawy-surface); box-shadow: var(--v2-shadow-sm); }
.pulse-card small { display: block; min-height: 2.5em; color: var(--aladawy-muted); font-weight: 650; }
.pulse-card strong { display: block; margin-top: 8px; color: var(--aladawy-ink); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.pulse-card em { display: block; margin-top: 4px; color: var(--aladawy-muted); font-size: .72rem; font-style: normal; }

.performance-hero { min-height: 190px; }
.performance-summary { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
.executive-stat { padding: 17px; border: 1px solid var(--aladawy-line); border-radius: 16px; background: var(--aladawy-surface); box-shadow: var(--v2-shadow-sm); }
.executive-stat span { display: block; color: var(--aladawy-muted); font-size: .76rem; font-weight: 700; }
.executive-stat strong { display: block; margin-top: 8px; font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.executive-stat small { display: block; margin-top: 5px; color: var(--aladawy-muted); }
.rank-row { display: grid; grid-template-columns: 48px minmax(190px,1.2fr) repeat(4,minmax(95px,.55fr)) auto; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--aladawy-line); border-radius: 15px; background: var(--aladawy-surface); }
.rank-row--first { border-color: color-mix(in srgb, var(--aladawy-green) 65%, var(--aladawy-line)); background: color-mix(in srgb, var(--aladawy-green-soft) 42%, var(--aladawy-surface)); }
.rank-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--aladawy-green-strong); background: var(--aladawy-green-soft); font-weight: 900; }
.rank-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rank-person .premium-avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 1rem; }
.rank-person strong, .rank-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-person small, .rank-metric small { color: var(--aladawy-muted); }
.rank-metric strong { display: block; font-size: 1.04rem; font-variant-numeric: tabular-nums; }
.rank-metric small { display: block; margin-top: 2px; font-size: .69rem; }
.trend-up { color: var(--aladawy-success); }.trend-down { color: var(--aladawy-danger); }.trend-flat { color: var(--aladawy-muted); }
.kpi-track { width: 100%; height: 7px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: var(--aladawy-surface-2); }
.kpi-track > span { display: block; height: 100%; border-radius: inherit; background: var(--aladawy-green-strong); }
.evidence-details { border-top: 1px solid var(--aladawy-line); margin-top: 18px; padding-top: 16px; }
.evidence-details summary { cursor: pointer; color: var(--aladawy-green-strong); font-weight: 750; }

.profile-premium-grid { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 20px; align-items: start; }
.avatar-editor { text-align: center; }
.avatar-preview { width: 138px; height: 138px; display: grid; place-items: center; margin: 0 auto 16px; overflow: hidden; border: 5px solid var(--aladawy-surface); outline: 1px solid var(--aladawy-line); border-radius: 35px; background: var(--aladawy-green-soft); color: var(--aladawy-green-strong); font-size: 2.5rem; font-weight: 900; box-shadow: var(--v2-shadow-md); }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-control input[type="file"] { width: 100%; font-size: .82rem; }
.upload-control input[type="file"]::file-selector-button { margin-inline-end: 9px; padding: 9px 12px; border: 0; border-radius: 9px; background: var(--aladawy-ink); color: var(--aladawy-canvas); font-weight: 700; cursor: pointer; }
.readonly-field { padding: 12px 13px; border: 1px solid var(--aladawy-line); border-radius: 11px; background: var(--aladawy-surface-2); color: var(--aladawy-muted); }

table { border-collapse: separate; border-spacing: 0; }
th { color: var(--aladawy-muted); background: var(--aladawy-surface-2); font-size: .72rem; letter-spacing: .025em; text-transform: uppercase; }
th, td { border-bottom: 1px solid var(--aladawy-line); }
tbody tr:hover td { background: color-mix(in srgb, var(--aladawy-green-soft) 35%, transparent); }

@media (max-width: 1180px) {
  .metric-strip { grid-template-columns: repeat(3, 1fr); }
  .performance-summary { grid-template-columns: repeat(3, 1fr); }
  .rank-row { grid-template-columns: 44px minmax(180px,1fr) repeat(2,minmax(90px,.5fr)) auto; }
  .rank-row .rank-metric:nth-of-type(3), .rank-row .rank-metric:nth-of-type(4) { display: none; }
}
@media (max-width: 900px) {
  .priority-grid, .profile-premium-grid { grid-template-columns: 1fr; }
  .premium-hero { align-items: flex-start; }
  .premium-hero__identity { display: none; }
  .performance-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .content { padding-inline: 12px; }
  .premium-page { gap: 14px; }
  .premium-hero { min-height: 148px; padding: 22px 19px; border-radius: 17px; }
  .premium-panel { padding: 15px; border-radius: 15px; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .performance-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .action-row, .reminder-row { grid-template-columns: auto minmax(0,1fr); }
  .action-row > .row-actions, .reminder-row > .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .rank-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; }
  .rank-row .rank-metric { display: none !important; }
  .rank-number { width: 34px; height: 34px; }
  .search { max-width: none; }
  .company-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}