/* ============================================================
   Prolight ERP - Application Shell / Right Sidebar v2
   Dedicated stylesheet to avoid stale style.css browser caches.
   ============================================================ */

:root {
  --erp-sidebar-width: 304px;
  --erp-sidebar-bg: #0f172a;
  --erp-sidebar-bg-2: #111c31;
  --erp-sidebar-border: rgba(255,255,255,.075);
  --erp-sidebar-text: #dbe5f3;
  --erp-sidebar-muted: #8492a8;
  --erp-sidebar-hover: rgba(255,255,255,.065);
  --erp-sidebar-active: rgba(245,158,11,.14);
  --erp-accent: #f59e0b;
  --erp-accent-strong: #fbbf24;
  --erp-topbar-height: 68px;
  --erp-shell-border: #e6eaf0;
}

/* The shell is used only for authenticated pages. */
body.erp-app-shell {
  margin: 0;
  min-height: 100vh;
  padding-right: var(--erp-sidebar-width) !important;
  background: #f6f8fb !important;
  transition: padding-right .22s ease;
  overflow-x: hidden;
}

body.erp-app-shell.erp-sidebar-collapsed {
  padding-right: 0 !important;
}

/* -------------------- Topbar -------------------- */
.erp-topbar {
  min-height: var(--erp-topbar-height);
  width: 100%;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 22px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--erp-shell-border);
  box-shadow: 0 3px 16px rgba(15,23,42,.045);
  position: sticky;
  top: 0;
  z-index: 1020;
  direction: rtl;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.erp-topbar-main,
.erp-topbar-actions {
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.erp-topbar-main { flex: 1 1 auto; }
.erp-topbar-actions { flex: 0 0 auto; }

.erp-sidebar-toggle,
.erp-topbar-action,
.erp-user-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #dfe4eb !important;
  background: #fff !important;
  color: #334155 !important;
  border-radius: 11px !important;
  min-height: 42px;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px !important;
  font-family: inherit;
  font-size: .86rem;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.erp-sidebar-toggle:hover,
.erp-topbar-action:hover,
.erp-user-button:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.erp-sidebar-toggle:active,
.erp-topbar-action:active,
.erp-user-button:active { transform: translateY(1px); }

.erp-topbar-brand {
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: #0f172a !important;
  text-decoration: none !important;
}

.erp-brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg,#f59e0b,#ea580c);
  box-shadow: 0 7px 18px rgba(234,88,12,.2);
}

.erp-topbar-brand strong,
.erp-sidebar-logo strong {
  display: block;
  font-weight: 700;
  font-size: .94rem;
  line-height: 1.25;
}

.erp-topbar-brand small,
.erp-sidebar-logo small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: .7rem;
  line-height: 1.25;
}

.erp-user-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border-radius: 50%;
  color: #4338ca;
  background: #eef2ff;
}

/* -------------------- Sidebar -------------------- */
.erp-sidebar {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: var(--erp-sidebar-width) !important;
  max-width: 92vw;
  height: 100vh !important;
  box-sizing: border-box;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  color: var(--erp-sidebar-text) !important;
  background: linear-gradient(180deg,var(--erp-sidebar-bg) 0%,var(--erp-sidebar-bg-2) 100%) !important;
  border-left: 1px solid rgba(15,23,42,.12);
  box-shadow: -14px 0 34px rgba(15,23,42,.14);
  transform: translateX(0);
  transition: transform .22s ease, box-shadow .22s ease;
  direction: rtl;
  text-align: right;
}

body.erp-app-shell.erp-sidebar-collapsed .erp-sidebar {
  transform: translateX(101%) !important;
  box-shadow: none;
}

.erp-sidebar-header {
  min-height: var(--erp-topbar-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--erp-sidebar-border);
}

.erp-sidebar-logo {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  text-decoration: none !important;
}

.erp-sidebar-logo small {
  color: #8fa0b8 !important;
  max-width: 165px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.erp-sidebar-close {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.055) !important;
  color: #9eacc0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.erp-sidebar-close:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

.erp-sidebar-search-wrap {
  height: 42px;
  flex: 0 0 42px;
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 13px 13px 8px;
  padding: 0 12px;
  color: #7d8ca3;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
}

.erp-sidebar-search {
  width: 100% !important;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #fff !important;
  font-family: inherit;
  font-size: .83rem !important;
  direction: rtl;
  text-align: right;
}

.erp-sidebar-search::placeholder { color: #7d8ca3 !important; opacity: 1; }

.erp-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: block !important;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 9px 17px;
  scrollbar-width: thin;
  scrollbar-color: #344156 transparent;
}

.erp-sidebar-nav::-webkit-scrollbar { width: 6px; }
.erp-sidebar-nav::-webkit-scrollbar-thumb { background: #344156; border-radius: 20px; }

.erp-sidebar-section-label {
  display: block;
  padding: 14px 12px 6px;
  color: var(--erp-sidebar-muted) !important;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .015em;
  user-select: none;
}

.erp-sidebar-group { display: block; margin: 1px 0; }

.erp-sidebar-link,
.erp-sidebar-group-toggle {
  width: 100% !important;
  min-height: 44px;
  box-sizing: border-box;
  margin: 2px 0 !important;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--erp-sidebar-text) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-align: right !important;
  text-decoration: none !important;
  font-family: inherit;
  font-size: .84rem !important;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: none !important;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.erp-sidebar-group-toggle { cursor: pointer; }

.erp-sidebar-link:hover,
.erp-sidebar-group-toggle:hover {
  background: var(--erp-sidebar-hover) !important;
  color: #fff !important;
}

.erp-sidebar-link.active {
  color: #fff !important;
  background: var(--erp-sidebar-active) !important;
  border-color: rgba(245,158,11,.16) !important;
  box-shadow: inset -3px 0 0 var(--erp-accent) !important;
  font-weight: 700;
}

.erp-menu-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #aab6c8;
  font-size: .86rem;
}

.erp-sidebar-link.active .erp-menu-icon,
.erp-sidebar-group-toggle:not(.collapsed) .erp-menu-icon {
  color: var(--erp-accent-strong) !important;
  background: rgba(245,158,11,.12);
}

.erp-menu-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.erp-menu-chevron {
  flex: 0 0 auto;
  color: #718097;
  font-size: .67rem;
  transition: transform .16s ease, color .16s ease;
}

.erp-sidebar-group-toggle:not(.collapsed) .erp-menu-chevron {
  transform: rotate(-90deg);
  color: #b6c0cf;
}

.erp-sidebar-submenu {
  position: relative;
  margin: 1px 0 5px !important;
  padding: 2px 9px 4px 0 !important;
  background: transparent !important;
}

.erp-sidebar-submenu::before {
  content: "";
  position: absolute;
  right: 24px;
  top: 5px;
  bottom: 7px;
  width: 1px;
  background: rgba(255,255,255,.075);
}

.erp-sidebar-sublink {
  min-height: 36px;
  box-sizing: border-box;
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 1px 0 !important;
  padding: 7px 34px 7px 9px !important;
  border-radius: 8px;
  color: #aab7c9 !important;
  background: transparent !important;
  text-decoration: none !important;
  text-align: right;
  font-size: .78rem !important;
  line-height: 1.35;
  transition: background .14s ease, color .14s ease;
}

.erp-sidebar-sublink:hover {
  color: #fff !important;
  background: rgba(255,255,255,.05) !important;
}

.erp-sidebar-sublink.active {
  color: #fff !important;
  background: rgba(245,158,11,.11) !important;
  font-weight: 700;
}

.erp-submenu-dot {
  position: absolute;
  right: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #64748b;
  background: var(--erp-sidebar-bg);
  z-index: 1;
}

.erp-sidebar-sublink.active .erp-submenu-dot {
  border-color: var(--erp-accent);
  background: var(--erp-accent);
}

.erp-sidebar-divider {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.065);
  margin: 6px 29px 6px 10px;
}

.erp-sidebar-footer {
  min-height: 50px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border-top: 1px solid var(--erp-sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8492a8;
  font-size: .72rem;
}

.erp-sidebar-footer a {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #9aa7b8 !important;
  background: rgba(255,255,255,.05);
  text-decoration: none !important;
}

.erp-sidebar-footer a:hover { color: #fff !important; background: rgba(255,255,255,.09); }

.erp-sidebar-search-empty {
  padding: 28px 12px;
  text-align: center;
  color: #8290a5;
  font-size: .78rem;
}

.erp-sidebar-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1035 !important;
  display: block;
  background: rgba(15,23,42,.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

/* Ensure ordinary page containers keep their natural width in the remaining area. */
body.erp-app-shell > .container,
body.erp-app-shell > .container-fluid {
  box-sizing: border-box;
}

/* -------------------- Tablet / Mobile -------------------- */
@media (max-width: 991.98px) {
  body.erp-app-shell,
  body.erp-app-shell.erp-sidebar-collapsed {
    padding-right: 0 !important;
  }

  .erp-sidebar,
  body.erp-app-shell.erp-sidebar-collapsed .erp-sidebar {
    width: min(86vw, 310px) !important;
    max-width: 310px;
    transform: translateX(102%) !important;
    box-shadow: none;
  }

  body.erp-app-shell.erp-mobile-sidebar-open .erp-sidebar {
    transform: translateX(0) !important;
    box-shadow: -16px 0 38px rgba(15,23,42,.24);
  }

  body.erp-app-shell.erp-mobile-sidebar-open .erp-sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.erp-app-shell.erp-mobile-sidebar-open { overflow: hidden; }

  .erp-topbar { padding: 9px 12px; min-height: 60px; }
}

@media (max-width: 575.98px) {
  .erp-topbar { gap: 7px; }
  .erp-topbar-main, .erp-topbar-actions { gap: 6px; }

  .erp-topbar-brand strong { font-size: .84rem; }
  .erp-topbar-brand small { display: none; }
  .erp-brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }

  .erp-sidebar-toggle,
  .erp-topbar-action,
  .erp-user-button {
    min-height: 38px;
    min-width: 38px;
    padding: 7px 9px !important;
  }

  .erp-sidebar { width: min(88vw, 300px) !important; }
}

@media print {
  body.erp-app-shell,
  body.erp-app-shell.erp-sidebar-collapsed { padding-right: 0 !important; }
  .erp-topbar, .erp-sidebar, .erp-sidebar-backdrop { display: none !important; }
}