/*
 * BookPoint admin: app chrome, shell layout and page primitives.
 * Everything lives under .bp-ui (design system root) and uses logical properties (RTL-safe).
 */

/* ---- WordPress admin chrome (BookPoint pages take over the whole screen) ---- */
.bp-app-mode #wpwrap,
.bp-app-mode #wpcontent,
.bp-app-mode #wpbody,
.bp-app-mode #wpbody-content { margin-top: 0 !important; padding: 0 !important; }
.bp-app-mode #adminmenumain,
.bp-app-mode #adminmenuwrap,
.bp-app-mode #adminmenu,
.bp-app-mode #wpfooter { display: none !important; }
.bp-app-mode #wpcontent,
.bp-app-mode #wpbody,
.bp-app-mode #wpbody-content { margin-inline-start: 0 !important; }
.bp-app-mode #wpbody-content > .wrap,
.bp-app-mode #wpbody-content > #bp-admin-app { margin: 0 !important; padding: 0 !important; }
.bp-app-mode #wpbody-content { overflow-x: clip; background: var(--bp-c-bg, #f6f7f9); }
.bp-app-mode #wpbody-content > .notice,
.bp-app-mode #wpbody-content > .update-nag,
.bp-app-mode #wpbody-content > .error { display: none; }
.bp-app-mode #wpbody-content > #screen-meta,
.bp-app-mode #wpbody-content > #screen-meta-links { display: none; }

/* ---- Root ---- */
.bp-ui.bp-admin { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); background: var(--bp-c-bg); color: var(--bp-c-text); }

.bp-ui .bp-shell {
  /* stylelint-disable-next-line length-zero-no-unit -- the unit is required inside calc() */
  --_adminbar: var(--wp-admin--admin-bar--height, 0px);
  --_sidebar: 244px;
  display: grid;
  grid-template-columns: var(--_sidebar) minmax(0, 1fr);
  min-height: 100vh;
  align-items: stretch;
}
.bp-ui .bp-shell.is-collapsed { --_sidebar: 68px; }
.bp-ui .bp-shell__main { min-width: 0; display: flex; flex-direction: column; }
.bp-ui .bp-skip { position: absolute; inset-inline-start: var(--bp-s-3); inset-block-start: var(--bp-s-3); z-index: calc(var(--bp-z-toast) + 1); }

/* ---- Sidebar ---- */
.bp-ui .bp-sidebar {
  position: sticky;
  inset-block-start: var(--_adminbar);
  align-self: start;
  height: calc(100vh - var(--_adminbar));
  height: calc(100dvh - var(--_adminbar));
  display: flex;
  flex-direction: column;
  background: var(--bp-c-surface);
  border-inline-end: 1px solid var(--bp-c-border);
  z-index: var(--bp-z-sticky);
  overflow: hidden;
}
.bp-ui .bp-sidebar__brand { display: flex; align-items: center; gap: var(--bp-s-3); min-height: 60px; padding: 0 var(--bp-s-4); border-block-end: 1px solid var(--bp-c-border); flex: 0 0 auto; }
.bp-ui .bp-sidebar__logo { border-radius: var(--bp-r-sm); object-fit: contain; flex: 0 0 auto; }
.bp-ui .bp-sidebar__name { font-weight: var(--bp-fw-bold); font-size: var(--bp-fs-lg); letter-spacing: -0.02em; margin-inline-end: auto; }
.bp-ui .bp-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: var(--bp-s-3) var(--bp-s-3) var(--bp-s-4); overscroll-behavior: contain; }
.bp-ui .bp-nav-group + .bp-nav-group { margin-block-start: var(--bp-s-4); }
.bp-ui .bp-nav-group__label { padding: 0 var(--bp-s-3); margin-block-end: var(--bp-s-1); font-size: var(--bp-fs-xs); font-weight: var(--bp-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bp-c-text-3); white-space: nowrap; }
.bp-ui .bp-nav-link {
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
  min-height: 38px;
  padding: 0 var(--bp-s-3);
  border-radius: var(--bp-r-md);
  color: var(--bp-c-text-2);
  font-weight: var(--bp-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--bp-dur-fast), color var(--bp-dur-fast);
}
.bp-ui .bp-nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.bp-ui .bp-nav-link:hover { background: var(--bp-c-surface-3); color: var(--bp-c-text); }
.bp-ui .bp-nav-link.is-active { background: var(--bp-c-primary-soft); color: var(--bp-c-primary-text); font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-nav-link:focus-visible { outline: 2px solid var(--bp-focus-color); outline-offset: -2px; }
.bp-ui .bp-sidebar__collapse {
  display: flex; align-items: center; gap: var(--bp-s-3); min-height: 44px; padding: 0 var(--bp-s-5);
  border: 0; border-block-start: 1px solid var(--bp-c-border); background: none; color: var(--bp-c-text-2); font: inherit; cursor: pointer; flex: 0 0 auto;
}
.bp-ui .bp-sidebar__collapse:hover { background: var(--bp-c-surface-3); color: var(--bp-c-text); }
.bp-ui .bp-sidebar__collapse svg { width: 18px; height: 18px; }
.bp-ui .bp-shell.is-collapsed .bp-nav-link__text,
.bp-ui .bp-shell.is-collapsed .bp-sidebar__name,
.bp-ui .bp-shell.is-collapsed .bp-nav-group__label { display: none; }
.bp-ui .bp-shell.is-collapsed .bp-nav-link { justify-content: center; padding: 0; }
.bp-ui .bp-shell.is-collapsed .bp-sidebar__brand { justify-content: center; padding: 0; }
.bp-ui .bp-shell.is-collapsed .bp-sidebar__collapse { justify-content: center; padding: 0; }
.bp-ui .bp-shell.is-collapsed .bp-nav-group + .bp-nav-group { margin-block-start: var(--bp-s-2); padding-block-start: var(--bp-s-2); border-block-start: 1px solid var(--bp-c-border); }

/* ---- Top bar ---- */
.bp-ui .bp-topbar {
  position: sticky;
  inset-block-start: var(--_adminbar);
  z-index: var(--bp-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
  min-height: 60px;
  padding: 0 var(--bp-s-6);
  background: color-mix(in srgb, var(--bp-c-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-block-end: 1px solid var(--bp-c-border);
}
.bp-ui .bp-topbar__actions { display: flex; align-items: center; gap: var(--bp-s-2); margin-inline-start: auto; }
.bp-ui .bp-topbar__avatar { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; display: inline-flex; }
.bp-ui .bp-topbar__avatar:focus-visible { outline: 2px solid var(--bp-focus-color); outline-offset: 2px; }

.bp-ui .bp-gsearch { position: relative; flex: 1 1 auto; max-width: 440px; }
.bp-ui .bp-gsearch__panel { inset-inline: 0; top: calc(100% + 6px); max-height: 60vh; overflow-y: auto; padding: var(--bp-s-1); }
.bp-ui .bp-gsearch__panel .bp-option { display: flex; align-items: center; gap: var(--bp-s-3); padding: var(--bp-s-2) var(--bp-s-3); border-radius: var(--bp-r-sm); cursor: pointer; }
.bp-ui .bp-gsearch__panel .bp-option.is-active,
.bp-ui .bp-gsearch__panel .bp-option[aria-selected="true"] { background: var(--bp-c-primary-soft); }
.bp-ui .bp-gsearch__panel .bp-option svg { flex: 0 0 auto; color: var(--bp-c-text-3); }
.bp-ui .bp-gsearch__text { display: flex; flex-direction: column; min-width: 0; }
.bp-ui .bp-gsearch__title { font-weight: var(--bp-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-ui .bp-gsearch__sub { font-size: var(--bp-fs-sm); color: var(--bp-c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Content + page primitives ---- */
.bp-ui .bp-content { flex: 1 1 auto; min-width: 0; padding-block-end: var(--bp-s-12); }
.bp-ui .bp-content:focus { outline: none; }
.bp-ui .bp-page { max-width: 1240px; margin-inline: auto; padding: var(--bp-s-6); display: flex; flex-direction: column; gap: var(--bp-s-5); }
.bp-ui .bp-page--wide { max-width: none; }
.bp-ui .bp-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--bp-s-3) var(--bp-s-4); }
.bp-ui .bp-page-header__main { min-width: 0; }
.bp-ui .bp-page-header__back { display: inline-flex; align-items: center; gap: var(--bp-s-1); font-size: var(--bp-fs-sm); color: var(--bp-c-text-2); text-decoration: none; margin-block-end: var(--bp-s-2); }
.bp-ui .bp-page-header__back:hover { color: var(--bp-c-text); }
.bp-ui .bp-page-header__title { font-size: var(--bp-fs-2xl); font-weight: var(--bp-fw-bold); letter-spacing: -0.02em; line-height: var(--bp-lh-tight); }
.bp-ui .bp-page-header__sub { margin-block-start: var(--bp-s-1); color: var(--bp-c-text-2); }
.bp-ui .bp-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bp-s-2); }

.bp-ui .bp-section { background: var(--bp-c-surface); border: 1px solid var(--bp-c-border); border-radius: var(--bp-r-lg); box-shadow: var(--bp-sh-xs); }
.bp-ui .bp-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bp-s-3); padding: var(--bp-s-4) var(--bp-s-5) 0; }
.bp-ui .bp-section__title { font-size: var(--bp-fs-lg); font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-section__desc { margin-block-start: 2px; color: var(--bp-c-text-2); font-size: var(--bp-fs-sm); }
.bp-ui .bp-section__body { padding: var(--bp-s-4) var(--bp-s-5) var(--bp-s-5); }
.bp-ui .bp-form-grid { display: grid; gap: var(--bp-s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .bp-ui .bp-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-ui .bp-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-ui .bp-form-grid .bp-span-2 { grid-column: 1 / -1; }
}

/* ---- Sticky save bar ---- */
.bp-ui .bp-savebar { position: sticky; inset-block-end: 0; z-index: var(--bp-z-sticky); margin-block-start: var(--bp-s-4); }
.bp-ui .bp-savebar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-s-3); flex-wrap: wrap; padding: var(--bp-s-3) var(--bp-s-4); border: 1px solid var(--bp-c-border-strong); border-radius: var(--bp-r-lg); background: var(--bp-c-surface); box-shadow: var(--bp-sh-lg); }
.bp-ui .bp-savebar__msg { display: inline-flex; align-items: center; gap: var(--bp-s-2); font-weight: var(--bp-fw-medium); }
.bp-ui .bp-savebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bp-c-warning); }

/* ---- Charts ---- */
.bp-ui .bp-chart { margin: 0; }
.bp-ui .bp-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.bp-ui .bp-chart__grid { stroke: var(--bp-c-border); stroke-width: 1; stroke-dasharray: 3 4; }
.bp-ui .bp-chart__tick { fill: var(--bp-c-text-3); font-size: 11px; }
.bp-ui .bp-chart__bar { fill: var(--bp-c-primary); opacity: 0.85; transition: opacity var(--bp-dur-fast); }
.bp-ui .bp-chart__bar.is-active { opacity: 1; }
.bp-ui .bp-chart__caption { min-height: 1.5em; margin-block-start: var(--bp-s-2); font-size: var(--bp-fs-sm); }

/* ---- Small screens ---- */
@media (max-width: 1023px) {
  .bp-ui .bp-shell { grid-template-columns: minmax(0, 1fr); }
  .bp-ui .bp-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform var(--bp-dur-slow) var(--bp-ease-out);
    box-shadow: var(--bp-sh-xl); z-index: calc(var(--bp-z-modal) + 1);
  }
  [dir="rtl"] .bp-ui .bp-sidebar, .bp-ui[dir="rtl"] .bp-sidebar { transform: translateX(102%); }
  .bp-ui .bp-shell.is-drawer-open .bp-sidebar { transform: none; }
  .bp-ui .bp-sidebar-scrim { position: fixed; inset: 0; background: var(--bp-c-overlay); z-index: var(--bp-z-modal); }
  .bp-ui .bp-topbar { padding: 0 var(--bp-s-3); }
  .bp-ui .bp-page { padding: var(--bp-s-4); }
}
@media (max-width: 640px) {
  /* Icon only on phones; the text stays available to screen readers. */
  .bp-ui .bp-topbar__cta-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .bp-ui .bp-topbar__cta { padding-inline: var(--bp-s-3); }
  .bp-ui .bp-page-header__title { font-size: var(--bp-fs-xl); }
  .bp-ui .bp-section__head { padding: var(--bp-s-4) var(--bp-s-4) 0; }
  .bp-ui .bp-section__body { padding: var(--bp-s-3) var(--bp-s-4) var(--bp-s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-ui .bp-sidebar { transition: none; }
}

.bp-ui .bp-page-header__actions .bp-select { width: auto; min-width: 180px; }