/* =========================================================
   ELAF dashboard skin v2 — loaded AFTER the built Vue CSS.
   Re-themes the live admin + investor app without rebuilding it.
   To roll back: remove the <link> to this file from app/index.html.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --x-bg:#f5f5f3; --x-bg-2:#efefec; --x-surface:#ffffff; --x-surface-2:#f5f5f3; --x-surface-3:#ebebe8;
  --x-line:rgba(0,0,0,.08); --x-line-2:rgba(0,0,0,.14);
  --x-fg:#0a0a0a; --x-fg-2:rgba(10,10,10,.64); --x-fg-3:rgba(10,10,10,.44);
  --x-accent:#16a34a; --x-accent-soft:rgba(22,163,74,.1);
  --x-warn:#a16207; --x-warn-soft:rgba(202,138,4,.12);
  --x-danger:#dc2626; --x-danger-soft:rgba(220,38,38,.1);
  --x-info:#2563eb; --x-info-soft:rgba(37,99,235,.1);
  --x-ease:cubic-bezier(.2,.8,.2,1);
  --x-font:"Cairo","Inter",system-ui,sans-serif; --x-num:"Inter","Cairo",sans-serif;
  /* remap the app's own tokens */
  --font-sans:var(--x-font);
  --color-gray-50:var(--x-bg); --color-gray-100:var(--x-surface-2); --color-gray-200:var(--x-line-2); --color-gray-300:var(--x-line-2);
  --color-gray-400:var(--x-fg-3); --color-gray-500:var(--x-fg-3); --color-gray-600:var(--x-fg-2); --color-gray-700:var(--x-fg-2); --color-gray-800:var(--x-fg); --color-gray-900:var(--x-fg);
  --color-brand-900:#0a0a0a; --color-brand-600:#262626;
  --color-success-50:var(--x-accent-soft); --color-success-600:var(--x-accent); --color-success-700:var(--x-accent);
  --color-warning-50:var(--x-warn-soft); --color-warning-600:var(--x-warn); --color-warning-700:var(--x-warn);
  --color-error-50:var(--x-danger-soft); --color-error-600:var(--x-danger); --color-error-700:var(--x-danger);
  --color-info-50:var(--x-info-soft); --color-info-600:var(--x-info); --color-info-700:var(--x-info);
  --sidebar-width:272px; --header-height:72px;
}
[data-theme=dark]{
  --x-bg:#080808; --x-bg-2:#0c0c0c; --x-surface:#111111; --x-surface-2:#181818; --x-surface-3:#202020;
  --x-line:rgba(255,255,255,.08); --x-line-2:rgba(255,255,255,.14);
  --x-fg:#f5f5f5; --x-fg-2:rgba(245,245,245,.66); --x-fg-3:rgba(245,245,245,.42);
  --x-accent:#4ade80; --x-accent-soft:rgba(74,222,128,.12);
  --x-warn:#facc15; --x-warn-soft:rgba(250,204,21,.12);
  --x-danger:#f87171; --x-danger-soft:rgba(248,113,113,.12);
  --x-info:#93c5fd; --x-info-soft:rgba(147,197,253,.12);
  --color-brand-900:#f5f5f5; --color-brand-600:#d4d4d4;
}
[dir=ltr]{--x-font:"Inter","Cairo",system-ui,sans-serif}

/* ---------- base ---------- */
body,[data-theme=dark] body{background:var(--x-bg)!important;color:var(--x-fg)!important;font-family:var(--x-font)!important;font-size:14px}
h1,h2,h3,h4,h5,h6,[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3,[data-theme=dark] h4{color:var(--x-fg)!important;font-family:var(--x-font)!important;letter-spacing:0;line-height:1.35}
[dir=ltr] h1,[dir=ltr] h2,[dir=ltr] h3{letter-spacing:-.02em}
h1{font-size:clamp(22px,2vw,26px)!important;font-weight:800!important;margin-bottom:24px}
.text-muted,[data-theme=dark] .text-muted{color:var(--x-fg-3)!important}
.text-success{color:var(--x-accent)!important}.text-danger{color:var(--x-danger)!important}.text-warning{color:var(--x-warn)!important}
::selection{background:var(--x-accent);color:#000}
::-webkit-scrollbar-thumb{background:var(--x-line-2)}
:focus-visible{outline:2px solid var(--x-accent);outline-offset:2px}

/* ---------- sidebar ---------- */
.elaf-sidebar,[data-theme=dark] .elaf-sidebar{background:var(--x-bg-2)!important;border-inline-end:1px solid var(--x-line)!important;padding:20px 16px 16px!important}
.elaf-sidebar:after{display:none}
.sidebar-logo-area{padding:4px 8px 24px!important}
.sidebar-brand-mark{background:var(--x-fg)!important;box-shadow:none!important;border-radius:12px!important;width:40px!important;height:40px!important}
.sidebar-brand-mark svg{color:var(--x-bg)!important}
.sidebar-brand-title{color:var(--x-fg)!important;font-size:17px!important;font-weight:800!important}
.sidebar-brand-subtitle{color:var(--x-fg-3)!important;font-size:12px!important}
.nav-section-label{color:var(--x-fg-3)!important;font-size:11.5px!important;padding:16px 12px 8px!important}
[dir=ltr] .nav-section-label{text-transform:uppercase;letter-spacing:.06em;font-size:11px!important}
.nav-item-btn{position:relative;color:var(--x-fg-2)!important;min-height:40px!important;border-radius:10px!important;font-size:14px!important;font-weight:500!important;gap:12px!important;margin-bottom:2px!important;transition:background .2s,color .2s!important}
.nav-item-btn:hover{background:var(--x-surface-2)!important;color:var(--x-fg)!important}
.nav-item-btn.active{background:var(--x-surface-3)!important;color:var(--x-fg)!important;box-shadow:none!important;font-weight:700!important}
.nav-item-btn.active svg{color:var(--x-accent)!important}
.nav-item-btn.active::before{content:"";position:absolute;inset-inline-start:-8px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--x-accent)}
.nav-item-btn svg{width:18px!important;height:18px!important}
.sidebar-nav-area{scrollbar-width:none}
.sidebar-nav-area::-webkit-scrollbar{display:none}
.sidebar-footer-area{border-top:1px solid var(--x-line)!important;padding-top:16px!important}
.sidebar-footer-area > div:first-child{background:transparent!important}
.sidebar-footer-area > div:first-child > div:first-child{background:var(--x-accent)!important;color:#0a0a0a!important;border-radius:50%!important;font-weight:800!important}
.sidebar-footer-area .fw-bold{color:var(--x-fg)!important;font-size:14px!important}

/* ---------- main + header ---------- */
.elaf-main,[data-theme=dark] .elaf-main{background:var(--x-bg)!important}
.elaf-header,[data-theme=dark] .elaf-header{background:color-mix(in srgb,var(--x-bg) 82%,transparent)!important;border-bottom:1px solid var(--x-line)!important;padding:16px 40px!important;align-items:center!important}
.header-greeting-block{gap:6px!important}
.header-avatar{background:var(--x-accent)!important;color:#0a0a0a!important;border-radius:50%!important;font-weight:800!important}
.header-avatar-dot{border-color:var(--x-bg)!important}
.header-greeting-text,[data-theme=dark] .header-greeting-text{color:var(--x-fg)!important;font-size:18px!important;font-weight:800!important}
.header-subtitle{color:var(--x-fg-2)!important;font-size:13px!important}
.header-search{width:320px!important}
.header-search input,[data-theme=dark] .header-search input{background:var(--x-surface)!important;border:1px solid var(--x-line)!important;color:var(--x-fg)!important;border-radius:10px!important;height:40px!important;font-size:13.5px!important;font-family:var(--x-font)!important}
.header-search input:focus{outline:none;border-color:var(--x-line-2)!important;background:var(--x-surface-2)!important}
.header-search svg{color:var(--x-fg-3)!important}
.header-icon-btn,[data-theme=dark] .header-icon-btn{background:transparent!important;border:1px solid var(--x-line)!important;color:var(--x-fg-2)!important;border-radius:10px!important;width:38px!important;height:38px!important}
.header-icon-btn:hover,[data-theme=dark] .header-icon-btn:hover{background:var(--x-surface-2)!important;color:var(--x-fg)!important;transform:none!important;box-shadow:none!important}
.elaf-page-content{padding:32px 40px 48px!important;max-width:1480px!important;margin:0!important}
.elaf-page-content > div{animation:xIn .5s var(--x-ease) both}
@keyframes xIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- cards ---------- */
.ui-card,.elaf-card,[data-theme=dark] .ui-card,[data-theme=dark] .elaf-card{background:var(--x-surface)!important;border:1px solid var(--x-line)!important;border-radius:20px!important;box-shadow:none!important}
.kpi-card,.ui-stat-card,[data-theme=dark] .kpi-card,[data-theme=dark] .ui-stat-card{background:var(--x-surface)!important;border:1px solid var(--x-line)!important;border-radius:20px!important;box-shadow:none!important;padding:20px 24px!important;transition:border-color .25s,transform .35s var(--x-ease)!important}
.kpi-card:hover,.ui-stat-card:hover{border-color:var(--x-line-2)!important;box-shadow:none!important;transform:translateY(-2px)!important}
.kpi-icon,[data-theme=dark] .kpi-icon{background:var(--x-surface-3)!important;color:var(--x-fg-2)!important;border-radius:10px!important;width:36px!important;height:36px!important}
.kpi-icon-green,[data-theme=dark] .kpi-icon-green{background:var(--x-accent-soft)!important;color:var(--x-accent)!important}
.kpi-icon-red,[data-theme=dark] .kpi-icon-red{background:var(--x-danger-soft)!important;color:var(--x-danger)!important}
.kpi-icon-blue,[data-theme=dark] .kpi-icon-blue{background:var(--x-info-soft)!important;color:var(--x-info)!important}
.kpi-icon-amber,[data-theme=dark] .kpi-icon-amber{background:var(--x-warn-soft)!important;color:var(--x-warn)!important}
.kpi-icon-purple,[data-theme=dark] .kpi-icon-purple{background:var(--x-surface-3)!important;color:var(--x-fg-2)!important}
.kpi-value,[data-theme=dark] .kpi-value{color:var(--x-fg)!important;font-family:var(--x-num)!important;font-size:28px!important;font-weight:700!important;letter-spacing:-.02em!important;font-feature-settings:"tnum";direction:ltr;unicode-bidi:isolate;line-height:1.2!important}
.kpi-label,[data-theme=dark] .kpi-label{color:var(--x-fg-2)!important;font-size:13px!important;font-weight:500!important}
.kpi-delta{padding:2px 8px;border-radius:99px;font-family:var(--x-num);font-size:12px!important;font-weight:700!important}
.kpi-delta.up{background:var(--x-accent-soft);color:var(--x-accent)!important}
.kpi-delta.down{background:var(--x-danger-soft);color:var(--x-danger)!important}
.chart-period-pill{background:var(--x-surface-2)!important;border-color:var(--x-line)!important;color:var(--x-fg-2)!important;border-radius:8px!important;font-size:12px!important}

/* ---------- tables ---------- */
.ui-table thead th,.elaf-table thead th,[data-theme=dark] .ui-table thead th,[data-theme=dark] .elaf-table thead th{color:var(--x-fg-3)!important;border-bottom:1px solid var(--x-line)!important;font-size:12px!important;font-weight:600!important;padding:12px 16px!important;background:transparent}
[dir=ltr] .ui-table thead th,[dir=ltr] .elaf-table thead th{text-transform:uppercase;letter-spacing:.04em;font-size:11px!important}
.ui-table tbody td,.elaf-table tbody td,[data-theme=dark] .ui-table tbody td,[data-theme=dark] .elaf-table tbody td{color:var(--x-fg)!important;border-bottom:1px solid var(--x-line)!important;font-size:13.5px!important;padding:14px 16px!important}
.ui-table tbody tr,.elaf-table tbody tr{transition:background .15s}
.ui-table tbody tr:hover,.elaf-table tbody tr:hover,[data-theme=dark] .ui-table tbody tr:hover,[data-theme=dark] .elaf-table tbody tr:hover{background:var(--x-surface-2)!important}
.ui-table thead th:first-child,.elaf-table thead th:first-child,.ui-table tbody td:first-child,.elaf-table tbody td:first-child{padding-inline-start:24px!important}

/* ---------- badges ---------- */
.ui-badge,.badge-elaf-success,.badge-elaf-warning,.badge-elaf-danger,.badge-elaf-info,.badge-elaf-neutral{border-radius:99px!important;padding:4px 10px!important;font-size:12px!important;font-weight:600!important;gap:6px!important}
.ui-badge-success,.badge-elaf-success{background:var(--x-accent-soft)!important;color:var(--x-accent)!important}
.ui-badge-warning,.badge-elaf-warning{background:var(--x-warn-soft)!important;color:var(--x-warn)!important}
.ui-badge-error,.badge-elaf-danger{background:var(--x-danger-soft)!important;color:var(--x-danger)!important}
.ui-badge-info,.badge-elaf-info{background:var(--x-info-soft)!important;color:var(--x-info)!important}
.ui-badge-gray,.badge-elaf-neutral,[data-theme=dark] .ui-badge-gray,[data-theme=dark] .badge-elaf-neutral{background:var(--x-surface-3)!important;color:var(--x-fg-2)!important}
.badge-elaf-dark{background:var(--x-fg)!important;color:var(--x-bg)!important;border-radius:99px!important}

/* ---------- buttons ---------- */
.ui-btn,.btn{font-family:var(--x-font)!important;border-radius:10px!important;font-size:13.5px!important;font-weight:600!important}
.ui-btn-primary,.btn-elaf-primary,.btn-invest,[data-theme=dark] .ui-btn-primary,[data-theme=dark] .btn-elaf-primary,[data-theme=dark] .btn-invest{background:var(--x-fg)!important;color:var(--x-bg)!important;border-color:var(--x-fg)!important;box-shadow:none!important}
.ui-btn-primary:hover,.btn-elaf-primary:hover,.btn-invest:hover,[data-theme=dark] .ui-btn-primary:hover,[data-theme=dark] .btn-elaf-primary:hover{background:var(--x-accent)!important;border-color:var(--x-accent)!important;color:#04140a!important;transform:none!important}
.ui-btn-secondary,.btn-elaf-outline,[data-theme=dark] .ui-btn-secondary,[data-theme=dark] .btn-elaf-outline{background:transparent!important;border:1px solid var(--x-line)!important;color:var(--x-fg-2)!important}
.ui-btn-secondary:hover,.btn-elaf-outline:hover,[data-theme=dark] .ui-btn-secondary:hover,[data-theme=dark] .btn-elaf-outline:hover{background:var(--x-surface-2)!important;color:var(--x-fg)!important;transform:none!important}
.ui-btn-ghost,[data-theme=dark] .ui-btn-ghost{color:var(--x-fg-2)!important}
.ui-btn-ghost:hover,[data-theme=dark] .ui-btn-ghost:hover{color:var(--x-accent)!important}
.ui-btn-danger{color:var(--x-danger)!important}

/* ---------- forms ---------- */
.form-control,.form-select,.ui-input,.ui-select,[data-theme=dark] .form-control,[data-theme=dark] .form-select,[data-theme=dark] .ui-input,[data-theme=dark] .ui-select{background:var(--x-surface)!important;border:1px solid var(--x-line-2)!important;color:var(--x-fg)!important;font-family:var(--x-font)!important;font-size:14px!important;border-radius:10px!important}
.form-control:focus,.form-select:focus,.ui-input:focus,.ui-select:focus,[data-theme=dark] .form-control:focus,[data-theme=dark] .ui-input:focus{border-color:var(--x-accent)!important;box-shadow:0 0 0 4px var(--x-accent-soft)!important}
.form-label,[data-theme=dark] .form-label{color:var(--x-fg-2)!important;font-size:13px!important}
.ui-switch-track,[data-theme=dark] .ui-switch-track{background:var(--x-surface-3)!important}
.ui-switch input:checked~.ui-switch-track{background:var(--x-accent)!important}

/* ---------- modals, toasts, auth ---------- */
.modal-content,[data-theme=dark] .modal-content{background:var(--x-surface)!important;color:var(--x-fg)!important;border:1px solid var(--x-line-2)!important;border-radius:20px!important}
.elaf-toast{background:var(--x-surface-3)!important;color:var(--x-fg)!important;border:1px solid var(--x-line-2);border-radius:12px!important}
.elaf-toast.toast-success{background:var(--x-accent)!important;color:#04140a!important;border-color:transparent}
.elaf-toast.toast-danger{background:var(--x-danger)!important;color:#fff!important;border-color:transparent}
.auth-left{background:#080808!important}
.auth-left::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.22),transparent 70%);top:-160px;inset-inline-end:-160px;filter:blur(40px);pointer-events:none}
.auth-right,[data-theme=dark] .auth-right{background:var(--x-bg)!important}
.border,.border-top,.border-bottom,[data-theme=dark] .border,[data-theme=dark] .border-top,[data-theme=dark] .border-bottom{border-color:var(--x-line)!important}
.rounded-3,.rounded-4{border-radius:16px!important}
.bg-danger{background:var(--x-danger)!important}

/* ---------- sparklines ---------- */
.kpi-card svg [stroke^="#"],.ui-stat-card svg [stroke^="#"]{stroke:var(--x-accent)!important}
.kpi-card svg stop,.ui-stat-card svg stop{stop-color:var(--x-accent)!important}
.nav-item-btn.active::before{inset-inline-start:0;top:12px;bottom:12px}

/* ---------- responsive ---------- */
@media (width<=1200px){.elaf-page-content,.elaf-header{padding-left:24px!important;padding-right:24px!important}}
@media (width<=991.98px){.elaf-page-content{padding:20px!important}.elaf-header{padding:14px 20px!important}.header-search{width:100%!important}}
@media (prefers-reduced-motion:reduce){.elaf-page-content > div{animation:none}}
/* v2.1 layout */
/* compact one-row header */
.elaf-header{min-height:68px!important;flex-wrap:nowrap!important}
.header-greeting-block{flex-direction:row!important;align-items:center!important;gap:24px!important;flex:1;min-width:0}
.header-greeting-row{flex:none}
.header-greeting-text{white-space:nowrap}
.header-subtitle{display:none!important}
.header-search{width:min(380px,100%)!important;margin-inline-start:auto}
/* page titles + toolbars */
.elaf-page-content > div > :is(h1,h2,h3,h4,h5):first-child,.elaf-page-content > div > div:first-child > :is(h1,h2,h3,h4,h5):first-child{font-size:clamp(22px,2vw,26px)!important;font-weight:800!important;line-height:1.35!important;margin-bottom:0!important}
.elaf-page-content > div > :is(h1,h2,h3,h4,h5):first-child{margin-bottom:24px!important}
.elaf-page-content > div > .d-flex:first-child,.elaf-page-content > div > .flex:first-child{margin-bottom:24px!important;align-items:center!important;gap:16px;flex-wrap:wrap}
.elaf-page-content h2:not(:first-child),.elaf-page-content h3{font-size:16px!important;font-weight:700!important}
.elaf-card.p-4,.ui-card.p-4{padding:24px!important}
.elaf-card + .elaf-card{margin-top:16px}
/* tables */
.elaf-card:has(> table),.elaf-card:has(> .table-responsive),.ui-card:has(> table){overflow-x:auto}
.ui-table tbody td:first-child,.elaf-table tbody td:first-child{font-weight:600;white-space:nowrap}
.ui-table td,.elaf-table td{vertical-align:middle}
.elaf-table td .badge-elaf-dark,.ui-table td .badge-elaf-dark{background:var(--x-surface-3)!important;color:var(--x-fg)!important;font-weight:600}
.elaf-table td[class*="small"],.ui-table td small{color:var(--x-fg-3)!important}
.ui-btn-danger,.text-danger.btn,.btn-link.text-danger{border-radius:8px!important}
.ui-btn-danger:hover{background:var(--x-danger-soft)!important}
/* filter tabs / pills used in list pages */
.elaf-page-content button.rounded-pill,.elaf-page-content .filter-tab{border:1px solid var(--x-line)!important;background:transparent!important;color:var(--x-fg-2)!important;border-radius:999px!important;padding:7px 16px!important;font-size:13px!important}
.elaf-page-content button.rounded-pill.active,.elaf-page-content .filter-tab.active{background:var(--x-fg)!important;color:var(--x-bg)!important;border-color:var(--x-fg)!important}
/* details / summary blocks */
.elaf-page-content details>summary{cursor:pointer;font-weight:700;color:var(--x-fg);padding:8px 0}
.elaf-page-content hr{border-color:var(--x-line)!important;opacity:1}
/* empty states */
.elaf-page-content .text-center.text-muted{padding:32px 16px}
/* notification dropdown */
.header-actions [class*="dropdown"],.header-actions [class*="panel"],.header-actions [class*="popover"]{background:var(--x-surface)!important;border:1px solid var(--x-line-2)!important;border-radius:16px!important;color:var(--x-fg)!important;box-shadow:0 20px 50px -15px rgba(0,0,0,.5)!important}
@media (width<=991.98px){.header-greeting-text{display:none}.elaf-header{gap:12px!important}}