/* Layout tidy-ups and the sidebar, loaded after style.css. */

/* ---------- Header ---------- */
.sidebar-btn { order: 0; }
.site-header .wordmark { order: 1; }
.site-header .site-search { order: 4; flex: 1 1 100%; width: auto; margin: 0; }
.site-header .header-tools { order: 3; margin-left: auto; }
@media (min-width: 40rem) {
  .site-header .site-search { order: 2; flex: 0 1 22rem; margin-left: 1rem; }
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; z-index: 20; top: .75rem; bottom: .75rem; left: .75rem; width: 15rem;
  display: flex; flex-direction: column; gap: .25rem; padding: .75rem; overflow-y: auto;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transform: translateX(calc(-100% - 1.5rem)); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
html.sb-open .sidebar { transform: none; visibility: visible; transition-delay: 0s; }

.sb-nav { display: flex; flex-direction: column; gap: .15rem; }
.sb-group {
  margin: .9rem .6rem .25rem; max-width: none; color: var(--ink-soft);
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.sb-nav .sb-group:first-child { margin-top: .25rem; }
.sb-link {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 10px;
  color: var(--ink); font-weight: 500; text-decoration: none; transition: background-color .15s;
}
.sb-link svg {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sb-link:hover { background: var(--hover-tint); }
.sb-link[aria-current="page"] { background: var(--brand); color: #fff; }

.sb-foot { display: grid; gap: .5rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--glass-border); }
.sb-foot .inline-form { display: block; }
.sb-foot .btn { width: 100%; justify-content: center; text-align: center; }
.sb-user {
  display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .3rem .5rem; border-radius: 10px;
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.sb-user:hover { background: var(--hover-tint); }
.sb-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-backdrop { display: none; }

/* Wide screens: the page makes room for the sidebar. */
@media (min-width: 64rem) {
  body { transition: padding-left .25s ease; }
  html.sb-open body { padding-left: 16rem; }
}
/* Phones and tablets: the sidebar slides over the page. */
@media (max-width: 63.99rem) {
  html.sb-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 15; background: rgba(20, 10, 40, .5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .sidebar { max-width: calc(100vw - 1.5rem); }
}
/* Without JavaScript the menu simply sits above the page. */
html:not(.js) .sidebar { position: static; visibility: visible; transform: none; width: auto; margin: .75rem; }
html:not(.js) .sidebar-btn { display: none; }

@media print {
  .sidebar, .sidebar-backdrop { display: none !important; }
  html.sb-open body { padding-left: 0 !important; }
}

/* ---------- Admin tabs ---------- */
.admin-tabs a, .filter-tabs a { white-space: nowrap; }
@media (max-width: 40rem) {
  .admin-tabs, .filter-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Forms: keep fields a comfortable width ---------- */
.page-narrow { max-width: 36rem; }
main.wrap > form.card { max-width: 44rem; }
.page-narrow .card { padding: 1.5rem; }
.page-narrow .card h2 { margin-bottom: 1rem; }
.page-narrow .field:last-of-type { margin-bottom: 1.25rem; }

/* ---------- Skeleton loading ---------- */
/* Images: shimmer until loaded, and hide the alt text flash. */
img.img-loading {
  color: transparent;
  background: linear-gradient(90deg, rgba(124, 58, 237, .10) 25%, rgba(124, 58, 237, .24) 50%, rgba(124, 58, 237, .10) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Page skeleton, shown by skeleton.js while the next page loads. */
main.wrap { position: relative; }
.page-skeleton { position: absolute; top: 2rem; left: 1rem; right: 1rem; z-index: 1; }
html.is-navigating main.wrap > :not(.page-skeleton) { visibility: hidden; }
.sk-title { width: 55%; max-width: 26rem; height: 2.4rem; margin-bottom: 1.1rem; }
.sk-line { width: 80%; max-width: 40rem; height: 1rem; margin-bottom: .65rem; }
.sk-short { width: 50%; max-width: 24rem; }
.sk-grid { display: grid; gap: 1.25rem; margin-top: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.sk-card { height: 14rem; border-radius: 18px; }
@media print { .page-skeleton { display: none !important; } }

/* ---------- Placeholders ---------- */
/* Hints inside empty fields should look clearly lighter than typed text. */
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .7; }

/* A required dropdown still on its "Choose..." option gets the same muted look. */
select:required:invalid { color: var(--ink-soft); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  select:required:invalid { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
}
/* The open list keeps normal, readable colours in both themes. */
select option { color: var(--ink); background: var(--field); }

/* ---------- Cute empty states ---------- */
.empty-cat {
  display: block; flex: none; width: 7rem; height: auto; margin: 0 auto .75rem; overflow: visible;
  animation: cat-bob 4s ease-in-out infinite;
}
@keyframes cat-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.empty-cute { max-width: 30rem; margin: 1.5rem auto; padding: 1.75rem 1.5rem; text-align: center; }
.empty-cute p { margin: 0 auto; color: var(--ink-soft); }
.empty-cute .empty-cute-title { margin-bottom: .35rem; color: var(--ink); font: 700 1.25rem/1.2 var(--font-head); }

/* Small version, for messages that sit inside a card or a section. */
.empty-cute.is-compact {
  max-width: none; margin: .5rem 0; padding: .5rem 0;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.is-compact .empty-cat { width: 4.75rem; margin-bottom: .4rem; }
.is-compact .empty-cute-title { font-size: 1.05rem; }