/* ============================================================================
 * ERP Rasel-26 — shared state layer
 * ----------------------------------------------------------------------------
 * Loaded after tokens.css / layout.css / components.css (see theme.php), so
 * every --erp-* variable and every component class is available to it.
 *
 * WHY THIS FILE EXISTS
 * The sidebar emits marker classes such as `customers-view-active-li`,
 * `items-list-active-li` or `expense-category-list-active-li` on every entry —
 * they are how the app records "this menu item corresponds to the page that is
 * open". Nothing styled them and nothing resolved them globally, so the active
 * highlight existed only on the handful of pages whose own JS happened to call
 * addClass("active"). Every other page looked like no menu item was current.
 *
 * Two things are handled here:
 *   1. Navigation state — which entry is active, and its parent group open.
 *   2. Shared value states — empty, loading, denied — so a page that cannot
 *      show data says so in the same way everywhere.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. Sidebar — universal active state
 *
 * `active` is the single class the app's own scripts already set and the class
 * theme-init.js / ui.js look for, so all three layers now agree on one name
 * instead of one class per page.
 * ------------------------------------------------------------------------ */

.sidebar-menu > li.active > a,
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus {
  color: var(--erp-on-accent);
  background: var(--erp-gradient-primary);
  border-left-color: var(--erp-on-accent);
}

.sidebar-menu > li.active > a:hover,
.sidebar-menu > li.active > a:focus {
  background: var(--erp-gradient-primary);
}

.sidebar-menu .treeview-menu > li.active > a {
  color: var(--erp-blue);
  font-weight: 700;
  background: color-mix(in srgb, var(--erp-blue) 12%, transparent);
}

.sidebar-menu .treeview-menu > li.active > a:hover,
.sidebar-menu .treeview-menu > li.active > a:focus {
  background: color-mix(in srgb, var(--erp-blue) 18%, transparent);
}

/* Open parent group gets the same emphasis as the child it contains, so a
   collapsed sidebar still shows which section the current page belongs to. */
.sidebar-menu > li.treeview.menu-open > a,
.sidebar-menu > li.treeview.active > a {
  color: var(--erp-on-accent);
  border-left-color: var(--erp-on-accent);
}

/* The angle indicator must agree with the real open/closed state rather than
   only rotating on hover. */
.sidebar-menu > li.treeview.menu-open > a .pull-right-container > .fa-angle-left,
.sidebar-menu > li.treeview.active > a .pull-right-container > .fa-angle-left {
  transform: rotate(-90deg);
}

.sidebar-menu > li.treeview > a .pull-right-container > .fa-angle-left {
  transition: transform 0.2s ease;
}

/* Bottom utility bar (Profile / Sign out) — keeps the same hit area and colour
   contract as a normal menu row so it does not read as a separate control. */
.erp-sidebar-footer {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--erp-line);
}

.erp-side-utility {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--erp-radius);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.erp-side-utility:hover,
.erp-side-utility:focus {
  color: var(--erp-on-accent);
  background: var(--erp-gradient-primary);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 2. Shared value states
 * ------------------------------------------------------------------------ */

.erp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  text-align: center;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.erp-empty-state > .fa {
  font-size: 1.75rem;
  opacity: 0.6;
}

.erp-empty-state > strong {
  font-weight: 600;
}

/* Table cells that hold no value read as "no data" rather than as broken
   layout; the muted tone matches the empty state. */
.erp-cell-empty {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-style: italic;
}

/* A table that is still fetching shows a stable placeholder instead of a
   jump from zero rows to many. */
.erp-loading-row td {
  padding: 1.25rem 0.75rem;
  text-align: center;
  color: color-mix(in srgb, currentColor 65%, transparent);
}

/* The role/dashboard_empty view renders outside a card by default; give it the
   same panel as every other page so a denied view is not a blank screen. */
.erp-permission-notice {
  margin: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--erp-line);
  border-radius: var(--erp-radius);
  background: var(--erp-bg);
  box-shadow: var(--erp-shadow);
}

.erp-permission-notice .fa {
  margin-right: 0.5rem;
}

/* Motion is decorative here — never let it block a user. */
@media (prefers-reduced-motion: reduce) {
  .sidebar-menu > li.treeview > a .pull-right-container > .fa-angle-left,
  .erp-side-utility {
    transition: none;
  }
}