:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #101828;
  --muted: #667085;
  --line: #e4ebf3;
  --brand: #0b74b8;
  --brand2: #00a3a3;
  --nav: #071d2b;
  --nav2: #0b2d42;
  --red: #d92d20;
  --amber: #dc6803;
  --green: #039855;
  --blue: #1570ef;
  --shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

body { background: var(--bg); color: var(--ink); }
body, input, select, button, textarea { font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; }
html[dir="rtl"] .app-page.active > .sidebar { right: 0; left: auto; }
html[dir="ltr"] .app-page.active > .sidebar { left: 0; right: auto; }
html[dir="rtl"] .app-page.active > .main { margin-right: 292px; margin-left: 0; width: calc(100% - 292px); }
html[dir="ltr"] .app-page.active > .main { margin-left: 292px; margin-right: 0; width: calc(100% - 292px); }

.app-page.active > .sidebar {
  width: 292px;
  background: linear-gradient(180deg, var(--nav), var(--nav2));
  color: #fff;
  transition: width .22s ease;
  border-inline-end: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 38px rgba(7, 29, 43, 0.3);
}

body.sidebar-collapsed .app-page.active > .sidebar { width: 86px; }
body.sidebar-collapsed .app-page.active > .main { width: calc(100% - 86px); }
html[dir="rtl"] body.sidebar-collapsed .app-page.active > .main { margin-right: 86px; margin-left: 0; }
html[dir="ltr"] body.sidebar-collapsed .app-page.active > .main { margin-left: 86px; margin-right: 0; }

.sidebar-header { min-height: 66px; }
.sidebar-header h2{font-size:22px;font-weight:950;margin:0;letter-spacing:.3px}
.sidebar-header p{margin:2px 0 0;color:#9db2c3;font-size:12px}
.sidebar-logo-box {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.sidebar-logo-box img{width:40px;height:40px;object-fit:contain}

.sidebar-workspace{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:10px 12px;
  margin:0 0 10px;
}
.sidebar-workspace small{display:block;color:#9db2c3;font-size:11px;margin-bottom:3px}
.sidebar-workspace b{font-size:13px;color:#fff}

.sidebar .nav-item,
.sidebar .nav-top-item {
  height: 42px;
  border-radius: 14px;
  color: #c8d6e0;
  margin: 3px 0;
  padding-inline: 10px;
  position:relative;
  font-weight:850;
}

.sidebar .nav-item.active,
.sidebar .nav-top-item.active {
  background: #fff;
  color: #071d2b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.sidebar .nav-item-icon,
.sidebar .section-icon{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:10px;background:rgba(255,255,255,.09)
}
.sidebar .nav-item-icon{font-size:16px}
.sidebar .nav-item.active .nav-item-icon,
.sidebar .nav-top-item.active .section-icon{background:#eaf6ff;color:var(--brand)}

.nav-section-hdr { color: #8ea6b8; }
.nav-section-hdr:hover { color: #fff; }
.nav-section-hdr{height:38px;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:10px;padding:0 8px;font-weight:900;font-size:12px;cursor:pointer}
.section-arrow{margin-inline-start:auto;color:#8ea6b8;transition:transform .18s ease}
.nav-section:not(.collapsed) .section-arrow{transform:rotate(180deg);color:#fff}

.sidebar-badge{
  min-width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.13);
  font-size:11px;display:grid;place-items:center;font-weight:900;color:#fff
}
.sidebar .nav-item.active .sidebar-badge{background:#eaf6ff;color:var(--brand)}

.main-header {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  margin: 12px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  gap:10px;
}

.main-header-titles h1{margin:0;font-size:22px;font-weight:900;color:#101828}
.main-header-titles p{margin:2px 0 0;font-size:13px;color:#667085}

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-btn {
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  color:#344054;
  transition:all .18s ease;
}
.topbar-btn:hover{border-color:#c9d7e7;background:#f8fbff;color:#0b74b8}

.mg-btn--refresh{
  background:#f8fbff !important;
  border-color:#bfdbfe !important;
  color:#0b74b8 !important;
  font-weight:900;
}
.mg-btn--refresh:hover{
  background:#eaf4ff !important;
  border-color:#93c5fd !important;
  box-shadow:0 6px 16px rgba(21,112,239,.18) !important;
}

.mg-btn--transfer{
  background:linear-gradient(135deg,#0b74b8,#00a3a3) !important;
  border-color:transparent !important;
  color:#fff !important;
  font-weight:900;
  box-shadow:0 12px 24px rgba(11,116,184,.24) !important;
}
.mg-btn--transfer:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}

.st-btn-new{
  background:linear-gradient(135deg,#1570ef,#0b74b8) !important;
  border-color:transparent !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 12px 24px rgba(11,116,184,.24) !important;
}
.st-btn-new:hover{
  filter:brightness(.97);
}

.st-btn-refresh{
  background:#ffffff !important;
  border:1px solid #00a3a3 !important;
  color:#0b2d42 !important;
  font-weight:900 !important;
}
.st-btn-refresh:hover{
  background:#ecfeff !important;
  border-color:#00a3a3 !important;
  box-shadow:0 6px 16px rgba(0,163,163,.2) !important;
}

.st-head-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
.mg-toolbar.st-head-actions{
  display:flex !important;
  grid-template-columns:none !important;
}
.st-head-actions .mg-btn{
  min-width:150px;
  width:auto !important;
  justify-content:center;
}

body.hide-wh-switcher #whSwitcher{
  display:none !important;
}

.sidebar-toggle{
  height:36px;min-width:36px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;
}

.topbar-search {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  min-width: 180px;
  background: #fff;
}

.main{padding-bottom:20px}
.view{padding:0 12px 12px}

body.sidebar-collapsed .sidebar-header h2,
body.sidebar-collapsed .sidebar-header p,
body.sidebar-collapsed .sidebar-workspace,
body.sidebar-collapsed .section-label,
body.sidebar-collapsed .sidebar-footer .footer-meta,
body.sidebar-collapsed .nav-item span:first-child,
body.sidebar-collapsed .nav-top-item span:first-child,
body.sidebar-collapsed .section-arrow {
  display: none;
}

body.sidebar-collapsed .nav-section-body { display: block !important; }
body.sidebar-collapsed .sidebar .nav-item,
body.sidebar-collapsed .sidebar .nav-top-item {
  justify-content: center;
  padding: 0;
  position: relative;
}
body.sidebar-collapsed .sidebar .nav-top-item{margin-bottom:8px}
body.sidebar-collapsed .sidebar .sidebar-badge{display:none !important}
body.sidebar-collapsed .sidebar .nav-item.has-badge::before,
body.sidebar-collapsed .sidebar .nav-top-item.has-badge::before{
  content:attr(data-count);position:absolute;top:5px;inset-inline-end:6px;width:18px;height:18px;border-radius:50%;
  background:var(--red);color:#fff;font-size:10px;display:grid;place-items:center;font-weight:900
}
body.sidebar-collapsed .sidebar .nav-item .nav-item-icon,
body.sidebar-collapsed .sidebar .nav-top-item .section-icon {
  font-size: 18px;
}

body.sidebar-collapsed .sidebar .nav-item:hover::after,
body.sidebar-collapsed .sidebar .nav-top-item:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 7px;
  background: #101828;
  color: #fff;
  border-radius: 10px;
  padding: 7px 9px;
  white-space: nowrap;
  z-index: 60;
}
html[dir="rtl"] body.sidebar-collapsed .sidebar .nav-item:hover::after,
html[dir="rtl"] body.sidebar-collapsed .sidebar .nav-top-item:hover::after { right: 72px; }
html[dir="ltr"] body.sidebar-collapsed .sidebar .nav-item:hover::after,
html[dir="ltr"] body.sidebar-collapsed .sidebar .nav-top-item:hover::after { left: 72px; }

@media (max-width: 768px) {
  body.sidebar-collapsed .app-page.active > .sidebar { width: 292px; }
  .topbar-search { display: none; }
  html[dir="rtl"] .app-page.active > .main,
  html[dir="ltr"] .app-page.active > .main{margin:0;width:100%}
  .app-page.active > .sidebar{
    transform:translateX(105%);
    transition:transform .2s ease;
    z-index:200;
  }
  html[dir="ltr"] .app-page.active > .sidebar{transform:translateX(-105%)}
  body.sidebar-open .app-page.active>.sidebar{transform:translateX(0)}
}