/* =============================================================================
   Alpha Digital — left sidebar menu (release faadumo38)
   Layout: full-width header on top, white sidebar (red bold text) on the left,
   page content to the right. Classes on <body> (set by alpha-sidebar.js):
     .alpha-has-sidebar   sidebar is on the page (signed in)
     .alpha-sb-collapsed  desktop icons-only mode
     .alpha-sb-open       phone/tablet drawer is open
   ============================================================================= */

:root {
  --alpha-sb-width: 264px;
  --alpha-sb-width-collapsed: 76px;
  --alpha-header-h: 64px;
  --alpha-sb-bg: #ffffff;
  --alpha-sb-text: #dc2626;
  --alpha-sb-muted: #dc2626;
  --alpha-sb-hover: #fef2f2;
  --alpha-sb-active: #dc2626;
  --alpha-sb-active-text: #ffffff;
  --alpha-sb-border: #e2e8f0;
  --alpha-sb-line: #fee2e2;
  --alpha-sb-badge-bg: #dc2626;
  --alpha-sb-badge-text: #ffffff;
}
.dark {
  --alpha-sb-bg: #0f172a;
  --alpha-sb-text: #f87171;
  --alpha-sb-muted: #fca5a5;
  --alpha-sb-hover: rgba(239, 68, 68, 0.12);
  --alpha-sb-active: #dc2626;
  --alpha-sb-active-text: #ffffff;
  --alpha-sb-border: #1e293b;
  --alpha-sb-line: #1e293b;
  --alpha-sb-badge-bg: #dc2626;
  --alpha-sb-badge-text: #ffffff;
}

/* ---------- header: menu button, full-width bar ---------- */
.alpha-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.alpha-menu-btn svg { width: 22px; height: 22px; }
.alpha-menu-btn:hover { background: #fef2f2; color: #dc2626; }
.dark .alpha-menu-btn { color: #cbd5e1; }
.dark .alpha-menu-btn:hover { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.alpha-menu-btn:focus-visible,
.alpha-sb button:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.alpha-header-inner {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 12px !important;
  padding-right: 20px !important;
}

/* ---------- sidebar ---------- */
.alpha-sb {
  position: fixed;
  left: 0;
  top: var(--alpha-header-h);
  bottom: 0;
  z-index: 20;
  width: var(--alpha-sb-width);
  display: flex;
  flex-direction: column;
  background: var(--alpha-sb-bg);
  color: var(--alpha-sb-text);
  border-right: 1px solid var(--alpha-sb-border);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  transition: width 0.2s ease, transform 0.25s ease;
}
.alpha-sb ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.alpha-sb p { margin: 0; }

.alpha-sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: #fecaca transparent;
}
.alpha-sb-group-title {
  padding: 0 12px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--alpha-sb-muted);
  white-space: nowrap;
}

.alpha-sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--alpha-sb-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.alpha-sb-item:hover { background: var(--alpha-sb-hover); }
.alpha-sb-item.is-active .alpha-sb-badge { background: #fff; color: #dc2626; }
.alpha-sb-item.is-active {
  background: var(--alpha-sb-active);
  color: var(--alpha-sb-active-text);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.alpha-sb-icon { width: 20px; height: 20px; flex: none; }
.alpha-sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.alpha-sb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--alpha-sb-badge-bg);
  color: var(--alpha-sb-badge-text);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

.alpha-sb-foot {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--alpha-sb-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alpha-sb-records {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--alpha-sb-muted);
  white-space: nowrap;
}
.alpha-sb-records .alpha-sb-icon { width: 18px; height: 18px; }
.alpha-sb-collapse { color: var(--alpha-sb-muted); font-size: 13px; }
.alpha-sb-collapse:hover { color: var(--alpha-sb-text); }

/* Drawer-only parts are hidden on desktop. */
.alpha-sb-drawer-head,
.alpha-sb-overlay { display: none; }

/* ---------- desktop collapsed: icons only ---------- */
.alpha-sb.is-collapsed { width: var(--alpha-sb-width-collapsed); }
.alpha-sb.is-collapsed .alpha-sb-nav,
.alpha-sb.is-collapsed .alpha-sb-foot { padding-left: 12px; padding-right: 12px; }
.alpha-sb.is-collapsed .alpha-sb-group-title {
  height: 18px;
  padding: 0;
  font-size: 0;
  position: relative;
}
.alpha-sb.is-collapsed .alpha-sb-group-title::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 8px;
  border-top: 1px solid var(--alpha-sb-line);
}
.alpha-sb.is-collapsed .alpha-sb-item,
.alpha-sb.is-collapsed .alpha-sb-records { justify-content: center; padding: 0; gap: 0; }
.alpha-sb.is-collapsed .alpha-sb-label { display: none; }
.alpha-sb.is-collapsed .alpha-sb-badge {
  position: absolute;
  top: 3px;
  left: 30px;
  min-width: 18px;
  height: 17px;
  padding: 0 4px;
  font-size: 10px;
}

/* ---------- page next to the sidebar (desktop) ---------- */
@media (min-width: 1024px) {
  body.alpha-has-sidebar .alpha-main {
    max-width: none !important;
    margin-left: var(--alpha-sb-width) !important;
    margin-right: 0 !important;
    width: auto !important;
    min-width: 0;
    padding-left: 24px !important;
    padding-right: 24px !important;
    transition: margin-left 0.2s ease;
  }
  body.alpha-has-sidebar.alpha-sb-collapsed .alpha-main { margin-left: var(--alpha-sb-width-collapsed) !important; }

  /* Bottom-fixed live totals bar starts after the sidebar. */
  body.alpha-has-sidebar .alpha-live-totals {
    left: calc(var(--alpha-sb-width) + (100% - var(--alpha-sb-width)) / 2) !important;
    width: calc(100% - var(--alpha-sb-width) - 24px) !important;
  }
  body.alpha-has-sidebar.alpha-sb-collapsed .alpha-live-totals {
    left: calc(var(--alpha-sb-width-collapsed) + (100% - var(--alpha-sb-width-collapsed)) / 2) !important;
    width: calc(100% - var(--alpha-sb-width-collapsed) - 24px) !important;
  }
}

/* ---------- summary cards: no squeezing next to the sidebar ---------- */
@media (min-width: 1600px) {
  .alpha-kpi-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (min-width: 1280px) {
  .alpha-kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- phone & tablet: slide-in drawer ---------- */
@media (max-width: 1023.98px) {
  .alpha-sb {
    top: 0;
    z-index: 45;
    width: min(86vw, var(--alpha-sb-width));
    transform: translateX(-100%);
    box-shadow: none;
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .alpha-sb.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 12px 0 40px rgba(15, 23, 42, 0.35);
    transition: transform 0.25s ease, visibility 0s;
  }
  .alpha-sb-collapse { display: none; }

  .alpha-sb-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .alpha-sb-overlay.is-visible { opacity: 1; pointer-events: auto; }
  body.alpha-sb-open { overflow: hidden; }

  .alpha-sb-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 14px 16px;
    border-bottom: 1px solid var(--alpha-sb-line);
  }
  .alpha-sb-logo {
    width: 40px;
    height: 40px;
    flex: none;
    padding: 5px;
    border: 0;
    border-radius: 11px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #fecaca;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .alpha-sb-logo img,
  .alpha-sb-logo svg { width: 100%; height: 100%; object-fit: contain; }
  .alpha-sb-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .alpha-sb-brand strong { color: var(--alpha-sb-text); font-size: 15px; font-weight: 800; }
  .alpha-sb-brand span { color: var(--alpha-sb-muted); font-size: 12px; font-weight: 700; }
  .alpha-sb-close {
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--alpha-sb-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .alpha-sb-close:hover { background: var(--alpha-sb-hover); }
  .alpha-sb-close svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .alpha-sb,
  .alpha-sb-overlay,
  body.alpha-has-sidebar .alpha-main { transition: none !important; }
}