/* PharmaSync v95.20zzmd — modern neutral desktop sidebar surface for Pharmacy Owner + Employee.
   Presentation-only. Desktop fine-pointer only; mobile/tablet and navigation behavior are unchanged. */

@media (min-width:821px) and (hover:hover) and (pointer:fine) {
  html[data-ps-role="owner"],
  html[data-ps-role="staff"] {
    --ps-sidebar-surface-v95-20zzmd: #f5f7fa;
    --ps-sidebar-border-v95-20zzmd: rgba(71,85,105,.14);
    --ps-sidebar-hover-v95-20zzmd: rgba(37,99,235,.055);
    --ps-sidebar-active-v95-20zzmd: rgba(37,99,235,.105);
    --ps-sidebar-active-border-v95-20zzmd: #2563eb;
    --ps-sidebar-shadow-v95-20zzmd: 0 16px 36px rgba(15,23,42,.07);
  }

  /* Exact native desktop sidebar parent. :has() is limited to modern desktop Chromium/WebKit. */
  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426),
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) {
    background-color: var(--ps-sidebar-surface-v95-20zzmd) !important;
    border-color: var(--ps-sidebar-border-v95-20zzmd) !important;
    box-shadow: var(--ps-sidebar-shadow-v95-20zzmd) !important;
  }

  /* Give the logo/identity and utility/footer zones a subtle glass-like separation. */
  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child,
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child {
    margin: 0 8px 6px !important;
    padding: 6px 8px 8px !important;
    border-radius: 14px !important;
    background-color: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(148,163,184,.13) !important;
  }

  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child,
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child {
    margin: 6px 8px 0 !important;
    padding: 8px 8px 2px !important;
    border-radius: 14px !important;
    gap: 6px !important;
    background-color: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(148,163,184,.12) !important;
  }

  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426,
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 {
    padding: 2px 4px 4px !important;
    gap: 0 !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child img,
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child img {
    width: 62px !important;
    height: 62px !important;
  }

  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child > [role="button"],
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child > [role="button"] {
    min-height: 38px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"],
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"] {
    flex: 1 1 0 !important;
    min-height: 38px !important;
    max-height: 43px !important;
    margin: 1px 5px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 9px !important;
    border-radius: 12px !important;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
  }

  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"]:hover,
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"]:hover {
    background-color: var(--ps-sidebar-hover-v95-20zzmd) !important;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.07), 0 5px 14px rgba(15,23,42,.045) !important;
    transform: translateY(-1px) !important;
  }

  /* Uses the native React active-tab state exposed as aria-selected; no DOM scanning/observer. */
  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"][aria-selected="true"],
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"][aria-selected="true"] {
    background-color: var(--ps-sidebar-active-v95-20zzmd) !important;
    border-left-color: var(--ps-sidebar-active-border-v95-20zzmd) !important;
    border-right-color: var(--ps-sidebar-active-border-v95-20zzmd) !important;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.10), 0 6px 16px rgba(37,99,235,.08) !important;
    transform: none !important;
  }
}

/* Keep every Owner/Employee desktop tab visible in normal PC-height windows.
   Extremely short windows keep native scrolling as a safety fallback instead of clipping controls. */
@media (min-width:821px) and (min-height:650px) and (hover:hover) and (pointer:fine) {
  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426,
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 {
    overflow-y: hidden !important;
  }
}

@media (min-width:821px) and (max-height:720px) and (hover:hover) and (pointer:fine) {
  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child,
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child {
    margin-bottom: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child img,
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child img {
    width: 54px !important;
    height: 54px !important;
  }

  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"],
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 > [role="button"] {
    min-height: 34px !important;
    max-height: 39px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child,
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child {
    margin-top: 4px !important;
    padding-top: 6px !important;
    gap: 4px !important;
  }

  html[data-ps-role="owner"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child > [role="button"],
  html[data-ps-role="staff"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child > [role="button"] {
    min-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

@media (min-width:821px) and (max-height:649px) and (hover:hover) and (pointer:fine) {
  html[data-ps-role="owner"] #ps-desktop-sidebar-tabs-scroll-v94-426,
  html[data-ps-role="staff"] #ps-desktop-sidebar-tabs-scroll-v94-426 {
    overflow-y: auto !important;
  }
}

/* Dark mode: same geometry, neutral graphite/navy surface and restrained panels. */
@media (min-width:821px) and (hover:hover) and (pointer:fine) {
  html[data-ps-role="owner"][data-ps-ui-theme="dark"],
  html[data-ps-role="owner"][data-ps-owner-theme="dark"],
  html[data-ps-role="staff"][data-ps-ui-theme="dark"],
  html[data-ps-role="staff"].dark {
    --ps-sidebar-surface-v95-20zzmd: #151a23;
    --ps-sidebar-border-v95-20zzmd: rgba(148,163,184,.13);
    --ps-sidebar-hover-v95-20zzmd: rgba(96,165,250,.09);
    --ps-sidebar-active-v95-20zzmd: rgba(96,165,250,.16);
    --ps-sidebar-active-border-v95-20zzmd: #60a5fa;
    --ps-sidebar-shadow-v95-20zzmd: 0 16px 36px rgba(0,0,0,.25);
  }

  html[data-ps-role="owner"][data-ps-ui-theme="dark"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child,
  html[data-ps-role="owner"][data-ps-owner-theme="dark"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child,
  html[data-ps-role="staff"][data-ps-ui-theme="dark"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child,
  html[data-ps-role="staff"].dark :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :first-child,
  html[data-ps-role="owner"][data-ps-ui-theme="dark"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child,
  html[data-ps-role="owner"][data-ps-owner-theme="dark"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child,
  html[data-ps-role="staff"][data-ps-ui-theme="dark"] :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child,
  html[data-ps-role="staff"].dark :has(> #ps-desktop-sidebar-tabs-scroll-v94-426) > :last-child {
    background-color: rgba(30,41,59,.44) !important;
    border-color: rgba(148,163,184,.11) !important;
  }
}