/* _lj_dash.css — Light-mode Dashboard body (hero + stat cards + charts + activity).
   Self-contained (no dependency on _shared.css). Entirely scoped to body,
   hidden otherwise, so Dark mode keeps its existing dashboard untouched. */
.lj-dash { display: none; }
body .lj-old { display: none !important; }
body .lj-dash {
  display: block; padding: 6px 24px 30px;
  font-family: 'DM Sans', Arial, sans-serif; color: #1f2a24;
}
body .lj-dash * { box-sizing: border-box; }

/* hero */
.ld-hero { position: relative; overflow: hidden; border-radius: 18px; min-height: 200px; padding: 26px 34px; display: flex; align-items: center;
  background: linear-gradient(100deg, #fff 0%, rgba(255,255,255,.94) 40%, rgba(255,255,255,0) 66%), url('Photos/wallpaper-light-v2.jpg') center / cover;
  box-shadow: 0 4px 18px rgba(16,40,30,.12); border: 1px solid #eef1ee; }
.ld-hero::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: 56%; width: 84px; transform: skewX(-20deg);
  background: linear-gradient(180deg, #34d27b, #0f9b5e); opacity: .92; }
.ld-hero .ld-hero-in { position: relative; z-index: 2; max-width: 56%; }
.ld-hero img { height: 46px; width: auto; display: block; margin-bottom: 10px; }
.ld-hero h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; color: #12201a; }
.ld-hero .ld-tag { margin-top: 6px; font-size: 16px; font-weight: 700; color: #0f9b5e; letter-spacing: .3px; }
.ld-hero p { margin: 8px 0 14px; font-size: 13.5px; color: #4a5a52; }
.ld-hero .ld-hero-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ld-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
  text-decoration: none; color: #fff; background: linear-gradient(90deg, #1d7a44, #0f9b5e); border: none; cursor: pointer; font-family: inherit; }
.ld-proj { padding: 8px 12px; border-radius: 9px; border: 1px solid #d9e1dc; background: rgba(255,255,255,.9); font-size: 12.5px; font-family: inherit; color: #1f2a24; min-width: 170px; }

/* stat cards */
.ld-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 16px 0; }
.ld-stat { background: #fff; border: 1px solid #eef1ee; border-radius: 14px; padding: 16px 16px 14px; box-shadow: 0 2px 10px rgba(16,40,30,.08);
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: transform .12s; }
.ld-stat:hover { transform: translateY(-2px); }
.ld-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; flex-shrink: 0; }
.ld-stat .ld-num { font-size: 27px; font-weight: 800; line-height: 1.05; }
.ld-stat .ld-lbl { font-size: 12.5px; color: #5a6d63; font-weight: 600; margin-top: 3px; }
.ld-stat .ld-pct { font-size: 11px; color: #8a9a92; margin-top: 2px; }

/* panels */
.ld-row { display: grid; gap: 14px; margin-bottom: 14px; }
.ld-row.r2 { grid-template-columns: 1.7fr 1fr; }
.ld-card { background: #fff; border: 1px solid #eef1ee; border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(16,40,30,.08); min-width: 0; }
.ld-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 9px; color: #12201a; }
.ld-card h3 i { color: #0f9b5e; }
.ld-card h3 a { margin-left: auto; font-size: 12px; font-weight: 700; color: #1d7ac4; text-decoration: none; }

.ld-bars { display: flex; align-items: flex-end; gap: 18px; height: 210px; padding: 0 6px; border-bottom: 1px solid #e6ebe8; }
.ld-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.ld-bval { font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.ld-bar { width: 70%; max-width: 54px; border-radius: 6px 6px 0 0; min-height: 3px; }
.ld-blbls { display: flex; gap: 18px; padding: 8px 6px 0; }
.ld-blbls span { flex: 1; text-align: center; font-size: 11.5px; color: #5a6d63; font-weight: 600; text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ld-qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ld-qa a { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border-radius: 12px;
  text-decoration: none; font-size: 12.5px; font-weight: 700; color: #1f2a24; text-align: center; }
.ld-qa a i { font-size: 22px; }

.ld-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ld-act li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #f0f3f1; font-size: 13px; }
.ld-act li:last-child { border-bottom: none; }
.ld-act .ld-ai { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex-shrink: 0; }
.ld-act .ld-at { flex: 1; min-width: 0; } .ld-act .ld-at b { font-weight: 700; }
.ld-act .ld-at small { display: block; color: #8a9a92; font-size: 11.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-act .ld-ad { font-size: 11.5px; color: #8a9a92; flex-shrink: 0; }
.ld-empty { padding: 26px 0; text-align: center; color: #8a9a92; font-size: 13px; }

.ld-hb { display: flex; flex-direction: column; gap: 11px; }
.ld-hb .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ld-hb .row .n { width: 92px; color: #4a5a52; font-weight: 600; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-hb .row .t { flex: 1; height: 9px; background: #eef2ef; border-radius: 5px; overflow: hidden; }
.ld-hb .row .t i { display: block; height: 100%; border-radius: 5px; }
.ld-hb .row .v { width: 34px; text-align: right; font-weight: 800; }

@media (max-width: 1200px) { .ld-stats { grid-template-columns: repeat(3, 1fr); } .ld-row.r2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { body .lj-dash { padding-left: 14px; padding-right: 14px; } .ld-stats { grid-template-columns: repeat(2, 1fr); } .ld-hero .ld-hero-in { max-width: 100%; } .ld-hero::after { display: none; } }

/* ── Dark mode colours (layout identical to Day). Page wallpaper stays as the page's own. ── */
body:not(.light-mode) .lj-dash { color: #e6eef0; }
body:not(.light-mode) .ld-hero { background: linear-gradient(100deg, rgba(8,20,36,.96) 0%, rgba(8,20,36,.86) 42%, rgba(8,20,36,0) 70%), url('Photos/wallpaper-dark.jpg') center / cover; border-color: rgba(255,255,255,.1); }
body:not(.light-mode) .ld-hero h1 { color: #fff; }
body:not(.light-mode) .ld-hero p { color: #b9c9cc; }
body:not(.light-mode) .ld-proj { background: rgba(12,27,46,.85); border-color: rgba(255,255,255,.18); color: #e6eef0; }
body:not(.light-mode) .ld-stat, body:not(.light-mode) .ld-card { background: rgba(12,27,46,.80); border-color: rgba(255,255,255,.10); box-shadow: 0 2px 14px rgba(0,0,0,.35); backdrop-filter: blur(4px); }
body:not(.light-mode) .ld-stat .ld-lbl { color: #b9c9cc; }
body:not(.light-mode) .ld-stat .ld-pct { color: #7fa0a5; }
body:not(.light-mode) .ld-card h3 { color: #fff; }
body:not(.light-mode) .ld-bars { border-bottom-color: rgba(255,255,255,.14); }
body:not(.light-mode) .ld-blbls span { color: #b9c9cc; }
body:not(.light-mode) .ld-qa a { background: rgba(255,255,255,.07) !important; color: #e6eef0; }
body:not(.light-mode) .ld-act li { border-bottom-color: rgba(255,255,255,.08); }
body:not(.light-mode) .ld-act .ld-at small, body:not(.light-mode) .ld-act .ld-ad, body:not(.light-mode) .ld-empty { color: #7fa0a5; }
body:not(.light-mode) .ld-hb .row .n { color: #b9c9cc; }
body:not(.light-mode) .ld-hb .row .t { background: rgba(255,255,255,.10); }

/* RTL (Arabic) */
html[dir="rtl"] .ld-hero{ background: linear-gradient(260deg, #fff 0%, rgba(255,255,255,.94) 40%, rgba(255,255,255,0) 66%), url('Photos/wallpaper-light-v2.jpg') center / cover; }
html[dir="rtl"] .ld-hero::after{ left: auto; right: 56%; transform: skewX(20deg); }
html[dir="rtl"] body:not(.light-mode) .ld-hero{ background: linear-gradient(260deg, rgba(12,22,40,.97) 0%, rgba(12,22,40,.92) 40%, rgba(12,22,40,.05) 66%), url('Photos/wallpaper-dark.jpg') center / cover; }
html[dir="rtl"] .ld-hero .ld-hero-in{ text-align: right; }
html[dir="rtl"] .ld-card h3 a{ margin-left: 0; margin-right: auto; }