/* Page-navigation loading skeleton (shared by the public website and the admin
   portal, driven by static/js/base.js). Dark mode is class-based (html.dark),
   matching the app's Tailwind config -- NOT prefers-color-scheme. All classes
   are namespaced `atl-` (artitech loading) to avoid collisions with site.css /
   admin.css. */

.atl-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;               /* above page chrome; below nothing that matters mid-nav */
  background: #F7F3EF;         /* ivory */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease;
}
html.dark .atl-overlay { background: #1F1F1F; }   /* charcoal */
.atl-overlay.atl-show { opacity: 1; visibility: visible; }

/* screen-reader only "Loading" announcement */
.atl-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the shimmering placeholder block */
.atl-blk {
  background-color: #E4DBD1;
  border-radius: 6px;
  background-image: linear-gradient(100deg, transparent 30%, #F1EBE4 50%, transparent 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: atl-shimmer 1.25s ease-in-out infinite;
}
html.dark .atl-blk {
  background-color: #2C271F;
  background-image: linear-gradient(100deg, transparent 30%, #3A342B 50%, transparent 70%);
}
@keyframes atl-shimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atl-blk { animation: none; }
  .atl-overlay { transition: none; }
}

/* ---- website shape ---- */
.atl-site-head {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 32px; border-bottom: 1px solid rgba(31,31,31,0.10);
}
html.dark .atl-site-head { border-bottom-color: rgba(247,243,239,0.12); }
.atl-site-nav { display: flex; gap: 16px; margin-left: auto; }
.atl-body { padding: 44px 32px; max-width: 1120px; }
.atl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.atl-card {
  border: 1px solid rgba(31,31,31,0.10); border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
html.dark .atl-card { border-color: rgba(247,243,239,0.12); }

/* ---- admin dashboard shape ---- */
.atl-admin { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.atl-side {
  /* Matches the real admin sidebar (.admin-sidebar, admin.css): same Ivory/
     Charcoal page background as the rest of the app, not a distinct dark
     panel -- just a right border separates it. */
  background: transparent;
  border-right: 1px solid rgba(31,31,31,0.10);
  padding: 24px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
html.dark .atl-side { border-right-color: rgba(247,243,239,0.12); }
.atl-main { padding: 32px; }
.atl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.atl-stat {
  border: 1px solid rgba(31,31,31,0.10); border-radius: 8px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
html.dark .atl-stat { border-color: rgba(247,243,239,0.12); }
.atl-table { border: 1px solid rgba(31,31,31,0.10); border-radius: 8px; overflow: hidden; }
html.dark .atl-table { border-color: rgba(247,243,239,0.12); }
.atl-tr {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr; gap: 18px;
  padding: 16px 18px; border-bottom: 1px solid rgba(31,31,31,0.08);
}
html.dark .atl-tr { border-bottom-color: rgba(247,243,239,0.08); }
.atl-tr:last-child { border-bottom: 0; }

@media (max-width: 768px) {
  .atl-admin { grid-template-columns: 1fr; }
  .atl-side { display: none; }
  .atl-cards, .atl-stats { grid-template-columns: 1fr 1fr; }
  .atl-tr { grid-template-columns: 1.4fr 1fr; }
  .atl-tr > .atl-blk:nth-child(n+3) { display: none; }
}