/* Katalyst PHP compatibility layer. The original Katalyst visual CSS remains in katalyst.css. */

/* ---------- Sidebar foundation ---------- */
[data-katalyst-sidebar] {
  flex: 0 0 auto;
  overflow: hidden;
  transition: width .25s ease, transform .25s ease, background-color .2s ease, border-color .2s ease;
}
[data-katalyst-sidebar] > .sidebar { min-width: 0; }
[data-sidebar-scroll] {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--sidebar-muted) 40%, transparent) transparent;
  overscroll-behavior: contain;
}
[data-sidebar-scroll]::-webkit-scrollbar { width: 5px; }
[data-sidebar-scroll]::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--sidebar-muted) 35%, transparent);
  border-radius: 999px;
}

/* ---------- Reliable collapsed icon rail ---------- */
[data-katalyst-sidebar].is-collapsed {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-brand] {
  justify-content: center !important;
  padding-right: 0 !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-brand-label],
[data-katalyst-sidebar].is-collapsed [data-sidebar-group] > div:first-child,
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] > span.flex-1,
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] > div,
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] > svg:last-child,
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] > span[class*="rounded-full"]:not(:first-child),
[data-katalyst-sidebar].is-collapsed [data-slot="collapsible-content"],
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] span {
  display: none !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-group-panel] {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-scroll] {
  padding-right: 0 !important;
  overflow-x: hidden !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] {
  width: 48px !important;
  min-width: 48px !important;
  height: 44px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 6px !important;
  gap: 0 !important;
  justify-content: center !important;
  overflow: visible !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] > span:first-child {
  display: flex !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 9px !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-item] > span:first-child > svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] nav {
  width: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
}
[data-katalyst-sidebar].is-collapsed [data-sidebar-theme-switcher] [data-theme-choice] {
  width: 36px !important;
  height: 32px !important;
  padding: 6px !important;
  justify-content: center !important;
}

/* Collapse/group chevrons */
[data-sidebar-group-panel], [data-katalyst-submenu] { transition: opacity .2s ease; }
[data-sidebar-group-toggle] > svg { transition: transform .2s ease; }
[data-sidebar-group-toggle][aria-expanded="false"] > svg { transform: rotate(-90deg); }
[data-slot="collapsible-trigger"] > svg:last-child { transition: transform .2s ease; }
[data-slot="collapsible-trigger"][aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
[data-slot="collapsible-content"][hidden] { display: none !important; }

/* ---------- Theme controls ---------- */
[data-theme-choice] { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
[data-theme-choice][aria-selected="true"] {
  background: var(--background) !important;
  color: var(--foreground) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
.dark [data-theme-choice][aria-selected="true"] { box-shadow: 0 1px 4px rgb(0 0 0 / .35); }

/* ---------- Mobile sidebar ---------- */
.katalyst-mobile-overlay { position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / .45); }
@media (max-width: 767px) {
  [data-katalyst-sidebar].mobile-open {
    display: flex !important;
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    z-index: 50;
    width: 288px !important;
    min-width: 288px !important;
    max-width: 288px !important;
    box-shadow: 0 20px 45px rgb(0 0 0 / .25);
  }
  [data-katalyst-sidebar].mobile-open.is-collapsed {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ---------- Floating menus / command palette ---------- */
.katalyst-floating-panel { position: fixed; z-index: 80; min-width: 220px; max-width: 320px; padding: .5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--popover); color: var(--popover-foreground); box-shadow: 0 18px 50px rgb(0 0 0 / .18); }
.katalyst-floating-panel button,.katalyst-floating-panel a { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 9px; font-size: .875rem; text-align: left; }
.katalyst-floating-panel button:hover,.katalyst-floating-panel a:hover { background: var(--accent); }
.katalyst-command { position: fixed; inset: 0; z-index: 100; 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; background: transparent; 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; 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; }