/* phoenix-core app-shell — sidebar collapse (v1.7.0).
 *
 * Neutral, identity-free defaults. Override the --pc-* tokens in your org-core / app
 * CSS to brand it. Layout is a CSS grid; the sidebar state is driven by the
 * data-pc-sidebar attribute (expanded | rail | overlay) set by phoenix-shell.js.
 * Works without JS too (see the no-JS fallback at the end).
 */

.pc-shell {
  /* --- dimensions --- */
  --pc-sidebar-w: 240px;
  --pc-rail-w: 64px;
  --pc-topbar-h: 56px;
  /* --- surfaces & text --- */
  --pc-bg: #f5f6f8;
  --pc-surface: #ffffff;
  --pc-border: #e3e6ea;
  --pc-text: #1f2430;
  --pc-muted: #697086;
  /* --- accent --- */
  --pc-accent: #2f6feb;
  --pc-accent-contrast: #ffffff;
  /* --- sidebar --- */
  --pc-sidebar-bg: #0f1522;
  --pc-sidebar-text: #c9d1e0;
  --pc-sidebar-active-bg: #1b2740;
  --pc-sidebar-active-text: #ffffff;
  --pc-hover: rgba(255, 255, 255, 0.06);
  /* --- misc --- */
  --pc-z-overlay: 1000;
  --pc-transition: 160ms ease;
  /* font family token: override to match your app (e.g. --pc-font: "IBM Plex Sans", sans-serif) */
  --pc-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* base text size set ON the shell so it is UNIFORM across apps regardless of each app's body
     font-size; override --pc-font-size to scale all shell text together */
  --pc-font-size: 0.9375rem;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--pc-sidebar-w) 1fr;
  grid-template-rows: var(--pc-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
  height: 100dvh; /* account for mobile browser chrome */
  overflow: hidden; /* shell is viewport-bound; sidebar & content scroll INTERNALLY, so the
                       page itself never scrolls (which used to drag the sidebar along). */
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: var(--pc-font);
  font-size: var(--pc-font-size);
}
.pc-shell *,
.pc-shell *::before,
.pc-shell *::after {
  box-sizing: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .pc-shell,
  .pc-shell * {
    transition: none !important;
  }
}

/* --- sidebar --- */
.pc-sidebar {
  grid-area: sidebar;
  min-height: 0;
  background: var(--pc-sidebar-bg);
  color: var(--pc-sidebar-text);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the sidebar itself doesn't scroll; the brand stays fixed and only
                       .pc-nav-wrap scrolls (like a mature app shell). */
  transition: width var(--pc-transition);
}
.pc-brand {
  flex: 0 0 auto; /* fixed header: never scrolls with the nav */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--pc-topbar-h);
  min-height: var(--pc-topbar-h);
  padding: 0 0.9rem;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.pc-brand-logo {
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
}
.pc-brand-text {
  flex: 1 1 auto;
  min-width: 0;                /* let the flex item shrink below its content width */
  overflow: hidden;
  text-overflow: ellipsis;     /* long brand names end in "…" instead of a hard clip */
  white-space: nowrap;
}
.pc-nav-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* THE sidebar scroller — independent of the content panel */
  overflow-x: hidden;
  padding: 0.5rem;
}
.pc-group-label {
  font-size: 0.875rem;        /* category labels are prominent: bigger, bold, normal-case */
  font-weight: 700;
  color: var(--pc-sidebar-text);
  padding: 0.75rem 0.75rem 0.25rem;
  white-space: nowrap;
}
.pc-nav {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--pc-sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.8125rem;       /* nav items sit a step below the category headers */
}
.pc-nav-item:hover {
  background: var(--pc-hover);
  color: #fff;
}
.pc-nav-item[aria-current="page"] {
  background: var(--pc-sidebar-active-bg);
  color: var(--pc-sidebar-active-text);
}
.pc-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pc-accent);
}
.pc-nav-item:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: -2px;
}
.pc-nav-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- collapsible nav group (opt-in: group.collapsible -> native <details>) --- */
.pc-nav-grup {
  margin-bottom: 0.25rem;
}
.pc-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.25rem;
  font-size: 0.875rem;        /* match .pc-group-label: prominent category header */
  font-weight: 700;
  color: var(--pc-sidebar-text);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.pc-group-summary::-webkit-details-marker {
  display: none;
}
.pc-group-summary:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: -2px;
  border-radius: 6px;
}
.pc-nav-caret {
  flex: 0 0 auto;
  color: var(--pc-muted);
  transition: transform var(--pc-transition);
}
.pc-nav-grup[open] > .pc-group-summary .pc-nav-caret {
  transform: rotate(180deg);
}
/* rail mode: drop the group header but keep the items (icons) visible even if collapsed */
.pc-shell[data-pc-sidebar="rail"] .pc-group-summary {
  display: none;
}
.pc-shell[data-pc-sidebar="rail"] .pc-nav-grup .pc-nav {
  display: flex;
}

/* --- expandable nav item (item.children -> <details> with a nav-item summary) --- */
summary.pc-nav-parent {
  cursor: pointer;
  list-style: none;
}
summary.pc-nav-parent::-webkit-details-marker {
  display: none;
}
.pc-nav-parent .pc-nav-caret {
  margin-left: auto; /* push the chevron to the far right of the row */
}
.pc-nav-sub[open] > summary .pc-nav-caret {
  transform: rotate(180deg);
}
.pc-nav-sub > .pc-nav {
  margin: 2px 0 2px 1.1rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
/* rail: the parent collapses to its icon; children show as a flat icon list, no indent/caret */
.pc-shell[data-pc-sidebar="rail"] .pc-nav-parent .pc-nav-caret {
  display: none;
}
.pc-shell[data-pc-sidebar="rail"] .pc-nav-sub > .pc-nav {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  display: flex;
}

/* --- topbar --- */
.pc-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pc-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-topbar-spacer {
  flex: 1 1 auto;
}
.pc-topbar-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--pc-text);
  border-radius: 8px;
  cursor: pointer;
}
.pc-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}
.pc-toggle:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 2px;
}
.pc-toggle-icon {
  width: 26px; /* the glyph only fills ~3/4 of its viewBox, so render the box a bit larger */
  height: 26px;
}

/* --- split toggle (opt-in, toggle="split"): a rail-collapse button for desktop and a
 *     drawer button for phones. CSS shows only the one relevant to the breakpoint:
 *     desktop -> rail button; tablet -> neither (sidebar auto-rails); phone -> drawer. --- */
.pc-toggle-drawer {
  display: none;
}
.pc-toggle-rail {
  display: inline-flex;
}
@media (max-width: 1100px) and (min-width: 901px) {
  /* auto-rail band: the sidebar auto-collapses, so hide the manual rail toggle — unless the
     app opted out with auto_rail=False (then it stays expanded + keeps the manual toggle). */
  .pc-shell:not([data-pc-auto-rail="off"]) .pc-toggle-rail {
    display: none;
  }
}
@media (max-width: 900px) {
  .pc-toggle-rail {
    display: none;
  }
  .pc-toggle-drawer {
    display: inline-flex;
  }
}

/* --- account menu (topbar dropdown; built with the account_menu macro in topbar_end) --- */
.pc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pc-account {
  position: relative;
}
.pc-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 220px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--pc-border);
  background: var(--pc-surface);
  color: var(--pc-text);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}
.pc-account-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.pc-account-btn:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 2px;
}
.pc-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-accent);
  color: var(--pc-accent-contrast);
  font-size: 0.72rem;
  font-weight: 700;
}
.pc-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.pc-account-caret {
  flex: 0 0 auto;
  color: var(--pc-muted);
}
.pc-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 0.35rem;
  background: var(--pc-surface);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 20;
}
.pc-account-menu[hidden] {
  display: none;
}
.pc-account-head {
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--pc-border);
}
.pc-account-head-name {
  font-weight: 600;
}
.pc-account-head-sub {
  font-size: 0.8rem;
  color: var(--pc-muted);
}
/* Style BOTH the convenience class and ANY role="menuitem" the app injects, so the dropdown
   is uniform regardless of how each app authored its items (link / button / div). */
.pc-account-item,
.pc-account-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* keep every item left-aligned (no stray centered items) */
  gap: 0.5rem;
  box-sizing: border-box; /* width:100% must INCLUDE padding, or the item overflows the panel */
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pc-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pc-account-menu [role="menuitem"] svg {
  flex: 0 0 auto;
  width: 16px; /* normalise icon size across phoenix + app-authored items */
  height: 16px;
}
.pc-account-item:hover,
.pc-account-menu [role="menuitem"]:hover {
  background: rgba(127, 127, 127, 0.18); /* visible on both light and dark surfaces */
}
.pc-account-item:focus-visible,
.pc-account-menu [role="menuitem"]:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: -2px;
}
.pc-account-sep {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--pc-border);
}
@media (max-width: 900px) {
  .pc-account-name,
  .pc-account-caret {
    display: none;
  }
  .pc-account-btn {
    padding: 0.2rem;
    border-radius: 50%;
  }
}

/* --- content --- */
.pc-content {
  grid-area: content;
  min-height: 0; /* bound the content row so it scrolls internally, not the page */
  overflow-y: auto;
  padding: 1rem;
}

/* --- backdrop (overlay mode) --- */
.pc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--pc-z-overlay);
}

/* --- state: rail (icons only) --- */
.pc-shell[data-pc-sidebar="rail"] {
  grid-template-columns: var(--pc-rail-w) 1fr;
}
.pc-shell[data-pc-sidebar="rail"] .pc-nav-label,
.pc-shell[data-pc-sidebar="rail"] .pc-group-label,
.pc-shell[data-pc-sidebar="rail"] .pc-brand-text {
  display: none;
}
.pc-shell[data-pc-sidebar="rail"] .pc-nav-item {
  justify-content: center;
  gap: 0;
}
.pc-shell[data-pc-sidebar="rail"] .pc-brand {
  justify-content: center;
  padding: 0;
}

/* --- state: overlay (mobile off-canvas drawer) --- */
.pc-shell[data-pc-sidebar="overlay"] {
  grid-template-columns: 1fr;
  grid-template-areas:
    "topbar"
    "content";
}
.pc-shell[data-pc-sidebar="overlay"] .pc-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(var(--pc-sidebar-w), 86vw);
  transform: translateX(-100%);
  transition: transform var(--pc-transition);
  z-index: calc(var(--pc-z-overlay) + 1);
}
.pc-shell[data-pc-sidebar="overlay"][data-pc-open="true"] .pc-sidebar {
  transform: translateX(0);
}
.pc-shell[data-pc-sidebar="overlay"][data-pc-open="true"] .pc-backdrop {
  display: block;
}

/* --- no-JS / pre-JS fallback: on a narrow screen hide the sidebar so content is
 *     usable (JS then upgrades it to the off-canvas drawer). --- */
@media (max-width: 900px) {
  .pc-shell:not([data-pc-js]) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .pc-shell:not([data-pc-js]) .pc-sidebar {
    display: none;
  }
}

/* --- multitab (opt-in via data-pc-multitab) --- */
.pc-shell[data-pc-multitab] {
  grid-template-rows: var(--pc-topbar-h) auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar tabstrip"
    "sidebar content";
}
.pc-shell[data-pc-multitab][data-pc-sidebar="overlay"] {
  grid-template-columns: 1fr;
  grid-template-areas:
    "topbar"
    "tabstrip"
    "content";
}
.pc-tabstrip {
  grid-area: tabstrip;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 0.5rem;
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.pc-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--pc-muted);
  border-bottom: 2px solid transparent;
  font: inherit;
}
.pc-tab:hover {
  color: var(--pc-text);
}
.pc-tab[aria-selected="true"] {
  color: var(--pc-text);
  border-bottom-color: var(--pc-accent);
}
.pc-tab:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: -2px;
}
/* --- tab drag-reorder (v1.20.0): draggable chips + a drop-position indicator --- */
.pc-tab[draggable="true"] {
  cursor: grab;
}
.pc-tab.pc-tab-dragging {
  opacity: 0.5;
  cursor: grabbing;
}
/* a vertical accent bar on the edge where the dragged tab would land */
.pc-tab-drop-before::before,
.pc-tab-drop-after::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background: var(--pc-accent);
}
.pc-tab-drop-before,
.pc-tab-drop-after {
  position: relative;
}
.pc-tab-drop-before::before {
  left: -1px;
}
.pc-tab-drop-after::after {
  right: -1px;
}
.pc-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16ch;
}
.pc-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
}
.pc-tab-close:hover {
  background: rgba(0, 0, 0, 0.1);
}
.pc-tabpanel[hidden] {
  display: none;
}
/* no-JS / pre-JS: the tab strip is populated by JS, so hide it until ready. */
.pc-shell:not([data-pc-js]) .pc-tabstrip {
  display: none;
}

/* --- Export / Print menu (export_menu macro): a <details> dropdown (v1.21.0) --- */
.pc-export {
  position: relative;
  display: inline-block;
}
.pc-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  background: var(--pc-surface);
  color: var(--pc-text);
  font: inherit;
  list-style: none;
}
.pc-export-btn::-webkit-details-marker {
  display: none;
}
.pc-export-btn::after {
  content: "▾";
  font-size: 0.8em;
  color: var(--pc-muted);
}
.pc-export-btn:hover {
  background: rgba(127, 127, 127, 0.12);
}
.pc-export[open] > .pc-export-btn {
  outline: 2px solid var(--pc-accent);
  outline-offset: -2px;
}
.pc-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 10rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pc-export-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box; /* width:100% must INCLUDE padding, or the item overflows the panel
                             (the hover highlight would spill past the dropdown's edge) */
  width: 100%;
  padding: 0.45rem 0.6rem;
  text-align: left;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pc-text);
  cursor: pointer;
  font: inherit;
}
.pc-export-item:hover {
  background: rgba(127, 127, 127, 0.18);
}
.pc-export-item:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: -2px;
}

/* --- Legal / copyright footer (v1.29.0): a generic, identity-free footer for the foot of a
 *     login page (drop it BELOW the submit button) or a page. Standalone-safe — it does NOT
 *     require the .pc-shell grid, so it styles correctly on a bare login page that loads only
 *     this stylesheet. Muted + small + dark-aware via the --pc-* tokens, with neutral fallbacks
 *     so it still looks right when no shell tokens are present. phoenix owns no text/logo. */
.pc-legal {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--pc-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--pc-muted, #697086);
}
.pc-legal-center {
  align-items: center;
  text-align: center;
}
.pc-legal-left {
  align-items: flex-start;
  text-align: left;
}
.pc-legal-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.1rem;
}
.pc-legal-logo img,
.pc-legal-logo svg {
  max-height: 32px;
  width: auto;
}
.pc-legal-copy {
  font-weight: 600;
}
.pc-legal-disclaimer {
  opacity: 0.85;
}
.pc-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.1rem;
}
.pc-legal-link {
  color: inherit;
  text-decoration: none;
}
.pc-legal-link:hover {
  text-decoration: underline;
}

/* Utility: ".pc-print-only" shows ONLY when printing (e.g. a print-time letterhead);
   hidden on screen. Pair with ".pc-no-print" (below) to drop things from the printout. */
.pc-print-only {
  display: none;
}

/* --- Print to PDF (v1.20.1): print the CONTENT, not the app chrome ------------------
 * Browser "Print → Save as PDF" of an app page: hide the sidebar / topbar / tab strip,
 * let the shell flow across pages instead of being a fixed-height viewport grid, and
 * force an ink-friendly light palette (via the --pc-* tokens) so dark themes still print
 * readable. In multitab, inactive panels are [hidden], so only the ACTIVE tab prints.
 * Apps add ".pc-no-print" to hide extra elements and ".pc-print-only" to reveal a
 * print-only block (e.g. a letterhead); the document layout itself stays the app's. */
@media print {
  @page {
    margin: 14mm;
  }
  .pc-sidebar,
  .pc-topbar,
  .pc-tabstrip,
  .pc-export,
  .pc-no-print,
  [data-pc-backdrop] {
    display: none !important;
  }
  .pc-shell {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    /* ink-friendly: print dark-on-white regardless of the on-screen theme */
    --pc-bg: #fff;
    --pc-surface: #fff;
    --pc-text: #000;
    --pc-muted: #333;
    --pc-border: #999;
    background: #fff !important;
    color: #000 !important;
  }
  .pc-content,
  .pc-nav-wrap,
  [data-pc-tabpanels] {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .pc-tabpanel[hidden] {
    display: none !important;
  }
  .pc-print-only {
    display: block !important;
  }
}