/* ============================================================================
   _lj_shell.css — Lavajet DBMS app shell: left sidebar + page-specific breadcrumb bar.
   Used on every app page (Day AND Dark mode share the same layout; only colours and
   the wallpaper differ, and each mode keeps its own wallpaper). Built by _lj_shell.js.
   Self-contained: no dependency on _shared.css.
   ============================================================================ */

body { --lj-sidebar-w: 248px; font-family: 'DM Sans', Arial, sans-serif; }
/* one font everywhere in Light mode (icons keep their own icon font via the .fa class) */
body button, body input, body select, body textarea, body table { font-family: inherit; }
body.lj-collapsed { --lj-sidebar-w: 76px; }

/* Hide the page's original top nav bar + its items entirely in Light mode —
   the sidebar replaces it. The rest of .hdr (logo/title) is also hidden;
   the new .lj-topbar replaces it with the search/bell/user-avatar header. */
body.lj-shell header.hdr { display: none !important; }

/* Each of .lj-sidebar / .lj-crumbbar already sets its own display (flex)
   below, scoped under body with higher specificity than this
   bare hide rule, so no extra "display:block !important" override is
   needed here — one previously existed and silently broke the sidebar's
   and crumbbar's flex layouts (forcing them to block), so it's gone. */
.lj-sidebar, .lj-crumbbar { display: none; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
body .lj-sidebar {
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--lj-sidebar-w); background: linear-gradient(180deg, #0c1b2e 0%, #0a2235 55%, #0c2a33 100%);
  color: #cfe3e8; z-index: 500; transition: width .18s ease; overflow: hidden;
  font-family: 'DM Sans', Arial, sans-serif; box-shadow: 2px 0 14px rgba(0,0,0,.18);
}
body .lj-sidebar .lj-brand {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; overflow: hidden;
}
body .lj-sidebar .lj-brand img { height: 26px; width: auto; flex-shrink: 0; }
body .lj-sidebar .lj-brand .lj-brand-sub { font-size: 10.5px; color: #7fa8ad; margin-top: 1px; }
body .lj-sidebar .lj-collapse-btn {
  margin-left: auto; background: rgba(255,255,255,.06); border: none; color: #bcd; width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer; flex-shrink: 0; font-size: 11px;
}
body .lj-sidebar .lj-collapse-btn:hover { background: rgba(255,255,255,.14); }
body .lj-sidebar .lj-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 16px; }
body .lj-sidebar .lj-nav::-webkit-scrollbar { width: 5px; }
body .lj-sidebar .lj-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
body .lj-sidebar .lj-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #5f8a8f;
  padding: 14px 10px 6px; white-space: nowrap; overflow: hidden;
}
body .lj-sidebar .lj-group-label:first-child { padding-top: 4px; }
body .lj-sidebar a.lj-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; margin: 1px 0; border-radius: 9px;
  color: #c3d6da; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: background .12s, color .12s;
}
body .lj-sidebar a.lj-link i { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; color: #7fa8ad; }
body .lj-sidebar a.lj-link:hover { background: rgba(255,255,255,.07); color: #fff; }
body .lj-sidebar a.lj-link:hover i { color: #6fd38a; }
body .lj-sidebar a.lj-link.on { background: linear-gradient(90deg, #1d7a44, #0f9b5e); color: #fff; }
body .lj-sidebar a.lj-link.on i { color: #fff; }
body .lj-sidebar .lj-link-label { opacity: 1; transition: opacity .12s; }
body.lj-collapsed .lj-sidebar .lj-link-label,
body.lj-collapsed .lj-sidebar .lj-group-label,
body.lj-collapsed .lj-sidebar .lj-brand-text { display: none; }
body.lj-collapsed .lj-sidebar a.lj-link { justify-content: center; }
body .lj-sidebar .lj-foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 10px 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
body .lj-sidebar .lj-foot-user {
  display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; text-decoration: none; overflow: hidden;
}
body .lj-sidebar .lj-foot-user .lj-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1f9b5e, #1d8fc4); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
body .lj-sidebar .lj-foot-info { min-width: 0; overflow: hidden; }
body .lj-sidebar .lj-uname { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .lj-sidebar .lj-urole { font-size: 10.5px; color: #7fa8ad; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .lj-sidebar .lj-theme-btn {
  width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); border: none; color: #bcd;
  cursor: pointer; flex-shrink: 0; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
body .lj-sidebar .lj-theme-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
body.lj-collapsed .lj-sidebar .lj-foot-info,
body.lj-collapsed .lj-sidebar .lj-theme-btn { display: none; }
body.lj-collapsed .lj-sidebar .lj-foot { justify-content: center; }
body.lj-collapsed .lj-sidebar .lj-foot-user { flex: 0; }

/* ── Push the whole page right of the fixed sidebar ─────────────────────
   Body padding (not per-element margins) so any page layout works, while
   position:fixed things (modals, toasts) still ignore it as they should. */
body.lj-shell { padding-left: var(--lj-sidebar-w) !important; transition: padding-left .18s ease; }
/* generic nav pieces of the old top bars (logo / nav / Day-Dark / logout) — replaced by the sidebar */
body.lj-shell .lj-hide { display: none !important; }

/* ── Breadcrumb / page-action bar ────────────────────────────────────── */
body .lj-crumbbar {
  display: flex; align-items: center; gap: 10px; padding: 13px 24px; background: transparent;
  border-bottom: none; flex-wrap: wrap; position: sticky; top: 0; z-index: 400;
}
body .lj-crumbbar .lj-crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #8a9a92; flex-wrap: wrap; }
body .lj-crumbbar .lj-crumbs a { color: #5a6d63; text-decoration: none; font-weight: 600; }
body .lj-crumbbar .lj-crumbs a:hover { color: #0f9b5e; }
body .lj-crumbbar .lj-crumbs .lj-cur { color: #1f2a24; font-weight: 700; }
body .lj-crumbbar .lj-crumbs i.fa-chevron-right { font-size: 9px; color: #c3cdc6; }
body .lj-crumbbar .lj-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
body .lj-crumbbar .lj-abtn {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 8px;
  cursor: pointer; border: 1px solid #e3e8e4; background: #fff; color: #3a4a40; text-decoration: none;
}
body .lj-crumbbar .lj-abtn:hover { background: #f3f5f3; }
body .lj-crumbbar .lj-abtn.lj-primary { background: linear-gradient(90deg, #1d7a44, #0f9b5e); border-color: transparent; color: #fff; }
body .lj-crumbbar .lj-abtn.lj-primary:hover { filter: brightness(1.06); }

/* ── Page background + card restyle to match the wallpaper look ─────── */
body.light-mode { background-image: url('Photos/wallpaper-light-v2.jpg') !important; background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; }
body .pg, body .hero, body .fbar { background: transparent !important; }

@media (max-width: 900px) {
  body.lj-shell { padding-left: 0 !important; }
  body .lj-sidebar { width: 0; }
  body.lj-open .lj-sidebar { width: 260px; }
  body.lj-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 499; }
  body .lj-burger { display: flex; }
  body .lj-crumbbar { padding-left: 62px; }
}

/* ── Dark mode: same layout as Day; only colours differ. Wallpaper is NOT touched here. ── */
body:not(.light-mode) .lj-crumbbar .lj-crumbs { color: #9fb7bb; }
body:not(.light-mode) .lj-crumbbar .lj-crumbs a { color: #bcd3d6; }
body:not(.light-mode) .lj-crumbbar .lj-crumbs a:hover { color: #6fd38a; }
body:not(.light-mode) .lj-crumbbar .lj-crumbs .lj-cur { color: #fff; }
body:not(.light-mode) .lj-crumbbar .lj-crumbs i.fa-chevron-right { color: #5f8a8f; }
body:not(.light-mode) .lj-crumbbar .lj-abtn { background: rgba(12,27,46,.7); border-color: rgba(255,255,255,.16); color: #e6eef0; }
body:not(.light-mode) .lj-crumbbar .lj-abtn:hover { background: rgba(255,255,255,.12); }
body:not(.light-mode) .lj-crumbbar .lj-abtn.lj-primary { background: linear-gradient(90deg, #1d7a44, #0f9b5e); border-color: transparent; color: #fff; }

/* sidebar footer: logout */
body .lj-sidebar .lj-logout-btn {
  width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); border: none; color: #bcd;
  cursor: pointer; flex-shrink: 0; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
body .lj-sidebar .lj-logout-btn:hover { background: rgba(224,73,58,.35); color: #fff; }
body.lj-collapsed .lj-sidebar .lj-logout-btn { display: none; }
/* mobile hamburger */
.lj-burger { display: none; position: fixed; top: 10px; left: 10px; z-index: 600; width: 38px; height: 38px; border-radius: 10px;
  align-items: center; justify-content: center; border: none; cursor: pointer; color: #fff; background: #0c1b2e; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* Pages ship a legacy rule "body.light-mode nav a{color:#374151!important}" meant for the old top bar;
   keep the sidebar links readable in Day mode too. */
body.light-mode.lj-shell .lj-sidebar .lj-nav a.lj-link{ color: #d3e4e7 !important; }
body.light-mode.lj-shell .lj-sidebar .lj-nav a.lj-link:hover{ color: #fff !important; }
body.light-mode.lj-shell .lj-sidebar .lj-nav a.lj-link.on{ color: #fff !important; }

/* ── PRINT: never print the sidebar / breadcrumb bar / burger, and drop the sidebar gutter ── */
@media print {
  .lj-sidebar, .lj-crumbbar, .lj-burger, .lj-overlay { display: none !important; }
  body.lj-shell { padding-left: 0 !important; background: #fff !important; background-image: none !important; }
}

/* ── Arabic / RTL (switched by _lj_lang.js: <html dir="rtl">) ───────────────────────────── */
html[dir="rtl"] body { font-family: 'DM Sans', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; }
html[dir="rtl"] body button, html[dir="rtl"] body input, html[dir="rtl"] body select, html[dir="rtl"] body textarea, html[dir="rtl"] body table { font-family: inherit; }
html[dir="rtl"] body.lj-shell { padding-left: 0 !important; padding-right: var(--lj-sidebar-w) !important; transition: padding-right .18s ease; }
html[dir="rtl"] body .lj-sidebar { left: auto; right: 0; box-shadow: -2px 0 14px rgba(0,0,0,.18); }
html[dir="rtl"] body .lj-sidebar .lj-foot { padding: 10px 16px 14px 10px; }
html[dir="rtl"] .lj-collapse-btn i, html[dir="rtl"] .lj-crumbs i.fa-chevron-right { transform: scaleX(-1); }
html[dir="rtl"] body .lj-crumbbar .lj-actions { margin-left: 0; margin-right: auto; }
html[dir="rtl"] body .lj-crumbbar .lj-actions .lj-abtn i.fa-arrow-left { transform: scaleX(-1); }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] .lj-burger { left: auto; right: 10px; }
@media (max-width: 900px) {
  html[dir="rtl"] body.lj-shell { padding-right: 0 !important; }
  html[dir="rtl"] body .lj-crumbbar { padding-left: 24px; padding-right: 62px; }
}
@media print { html[dir="rtl"] body.lj-shell { padding-right: 0 !important; } }
html[dir="rtl"] body .lj-sidebar .lj-uname, html[dir="rtl"] body .lj-sidebar .lj-urole { direction: ltr; text-align: right; }
body.lj-shell { margin: 0; }