/* Katalyst PHP interaction/layout compatibility layer.
   Visual tokens/components remain in the original Katalyst stylesheet. */

/* ---------- Sidebar: one authoritative width/state ---------- */
[data-katalyst-sidebar] {
  box-sizing: border-box !important;
  flex: 0 0 288px !important;
  width: 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
  overflow: hidden !important;
  transition: width .22s ease, min-width .22s ease, max-width .22s ease, transform .22s ease, background-color .18s ease, border-color .18s ease !important;
}
[data-katalyst-sidebar] > .sidebar { min-width: 0 !important; width: 100% !important; }
[data-sidebar-scroll] {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, currentColor 24%, transparent) transparent;
}
[data-sidebar-scroll]::-webkit-scrollbar { width: 5px; }
[data-sidebar-scroll]::-webkit-scrollbar-track { background: transparent; }
[data-sidebar-scroll]::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; }

/* Expanded state is explicit so stale inline/template rules cannot squeeze it. */
[data-katalyst-sidebar][data-sidebar-state="expanded"] {
  flex-basis: 288px !important;
  width: 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Collapsed sidebar = clean icon rail. */
[data-katalyst-sidebar][data-sidebar-state="collapsed"],
[data-katalyst-sidebar].is-collapsed {
  flex-basis: 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-brand],
[data-katalyst-sidebar].is-collapsed [data-sidebar-brand] {
  justify-content: flex-start !important;
  padding: 0 !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-collapse],
[data-katalyst-sidebar].is-collapsed [data-sidebar-collapse] {
  transform: translateX(12px) !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-brand-label],
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-group-header],
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-label],
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-chevron],
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-slot="collapsible-content"],
[data-katalyst-sidebar].is-collapsed [data-sidebar-brand-label],
[data-katalyst-sidebar].is-collapsed [data-sidebar-group-header],
[data-katalyst-sidebar].is-collapsed [data-sidebar-label],
[data-katalyst-sidebar].is-collapsed [data-sidebar-chevron],
[data-katalyst-sidebar].is-collapsed [data-slot="collapsible-content"] {
  display: none !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-group-panel],
[data-katalyst-sidebar].is-collapsed [data-sidebar-group-panel] {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-scroll],
[data-katalyst-sidebar].is-collapsed [data-sidebar-scroll] {
  padding-right: 0 !important;
  scrollbar-width: none !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-scroll]::-webkit-scrollbar,
[data-katalyst-sidebar].is-collapsed [data-sidebar-scroll]::-webkit-scrollbar { width: 0 !important; display: none !important; }
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-item],
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] {
  box-sizing: border-box !important;
  display: flex !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 auto !important;
  padding: 6px !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  overflow: visible !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-icon],
[data-katalyst-sidebar].is-collapsed [data-sidebar-icon] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-icon] svg,
[data-katalyst-sidebar].is-collapsed [data-sidebar-icon] svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Theme control remains usable in both sidebar states. */
[data-sidebar-theme-switcher] { margin-top: auto !important; }
[data-sidebar-theme-switcher] [data-theme-choice] { cursor: pointer !important; }
[data-theme-indicator] { opacity: 0 !important; }
[data-theme-choice][aria-selected="true"] [data-theme-indicator] { opacity: 1 !important; }
[data-theme-choice][aria-selected="true"] {
  color: var(--foreground) !important;
  font-weight: 600 !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-theme-switcher] nav,
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] nav {
  width: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 4px !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-theme-switcher] nav > div,
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] nav > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-theme-switcher] [data-theme-choice],
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] [data-theme-choice] {
  width: 36px !important;
  height: 34px !important;
  padding: 7px !important;
  justify-content: center !important;
}
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-theme-switcher] [data-theme-label],
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] [data-theme-label] { display: none !important; }

/* Collapse / dropdown indicators. */
[data-sidebar-collapse] svg { transition: transform .2s ease !important; }
[data-katalyst-sidebar][data-sidebar-state="collapsed"] [data-sidebar-collapse] svg,
[data-katalyst-sidebar].is-collapsed [data-sidebar-collapse] svg { transform: rotate(180deg) !important; }
[data-sidebar-group-toggle] > svg { transition: transform .2s ease; }
[data-sidebar-group-toggle][aria-expanded="false"] > svg { transform: rotate(-90deg); }
[data-slot="collapsible-trigger"] [data-sidebar-chevron] { transition: transform .2s ease; }
[data-slot="collapsible-trigger"][aria-expanded="true"] [data-sidebar-chevron] { transform: rotate(180deg); }
[data-slot="collapsible-content"][hidden], [data-sidebar-group-panel][hidden] { display: none !important; }

/* ---------- Topbar / floating menus ---------- */
[data-katalyst-topbar] button { cursor: pointer; }
.katalyst-floating-panel {
  position: fixed; z-index: 120; min-width: 230px; max-width: 330px; padding: 8px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--popover);
  color: var(--popover-foreground); box-shadow: 0 18px 50px rgb(0 0 0 / .22);
}
.katalyst-floating-panel[hidden] { display: none !important; }
.katalyst-floating-panel button,.katalyst-floating-panel a {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 9px; font-size: .875rem; text-align: left; cursor: pointer;
}
.katalyst-floating-panel button:hover,.katalyst-floating-panel a:hover { background: var(--accent); }
.katalyst-floating-panel .katalyst-menu-heading { padding: 8px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.katalyst-floating-panel .katalyst-menu-separator { height: 1px; margin: 6px 4px; background: var(--border); }
.katalyst-floating-panel [aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 800; }

/* ---------- Right utility rail ---------- */
[data-katalyst-utility-rail] button,
[data-katalyst-utility-rail] a { cursor: pointer !important; }
[data-katalyst-utility-rail] [data-utility-action]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ---------- Mobile sidebar ---------- */
.katalyst-mobile-overlay { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .48); }
.katalyst-mobile-overlay[hidden] { display: none !important; }
@media (max-width: 767px) {
  [data-katalyst-sidebar] { display: none !important; }
  [data-katalyst-sidebar].mobile-open {
    display: flex !important; position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important;
    z-index: 100 !important; width: 288px !important; min-width: 288px !important; max-width: 288px !important;
    flex-basis: 288px !important; transform: translateX(0) !important; box-shadow: 0 20px 50px rgb(0 0 0 / .28);
  }
}

/* ---------- Command palette ---------- */
.katalyst-command { position: fixed; inset: 0; z-index: 150; display: grid; place-items: start center; padding-top: 12vh; }
.katalyst-command[hidden] { display: none !important; }
.katalyst-command-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .48); backdrop-filter: blur(3px); }
.katalyst-command-dialog { position: relative; width: min(640px,calc(100vw - 32px)); max-height: 70vh; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--popover); color: var(--popover-foreground); box-shadow: 0 24px 80px rgb(0 0 0 / .28); }
.katalyst-command-input-wrap { height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.katalyst-command-input-wrap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.katalyst-command-input-wrap input { flex: 1; min-width: 0; background: transparent; color: inherit; outline: none; border: 0; font-size: 15px; }
.katalyst-command-input-wrap kbd { font-size: 11px; opacity: .6; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.katalyst-command-results { padding: 8px; max-height: calc(70vh - 58px); overflow: auto; }
.katalyst-command-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.katalyst-command-result:hover,.katalyst-command-result.is-active { background: var(--accent); }
[data-unavailable-route] { cursor: default; }