/* Unified admin polish: calm monochrome controls, contained data scroll, and lightweight transitions. */
:root {
  --admin-bg: #050505;
  --admin-surface: #0b0b0b;
  --admin-surface-hover: #151515;
  --admin-border: #2a2a2a;
  --admin-border-strong: #4a4a4a;
  --admin-text: #f2f2f2;
  --admin-muted: #a4a4a4;
}

html, body { background: var(--admin-bg) !important; }
body { color: var(--admin-text); text-rendering: optimizeLegibility; }
.layout { min-height: 100dvh; background: var(--admin-bg) !important; }
.main { min-width: 0; min-height: 100dvh; }
#content { min-width: 0; position: relative; transition: opacity .18s ease, transform .18s ease; }
#content.is-switching { opacity: .42; transform: translateY(4px); }
#content.is-loading { cursor: progress; }
#content.is-loading::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, #d7d7d7, transparent); background-size: 38% 100%; animation: admin-progress 1.2s ease-in-out infinite; }

.loading-state { min-height: 360px; display: grid; align-content: start; gap: 14px; padding: 24px; border: 1px solid var(--admin-border); border-radius: 18px; background: var(--admin-surface); }
.loading-title, .loading-copy, .loading-grid > div { border-radius: 9px; background: linear-gradient(100deg, #101010 20%, #202020 42%, #101010 64%); background-size: 220% 100%; animation: admin-shimmer 1.35s ease-in-out infinite; }
.loading-title { width: min(340px, 62%); height: 28px; }
.loading-copy { width: min(520px, 82%); height: 15px; }
.loading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.loading-grid > div { height: 118px; }
.loading-state p { color: var(--admin-muted); margin: 4px 0 0; font-size: 13px; }

/* Native topbar selects keep their keyboard semantics while matching the custom menus. */
.controls select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 10px 38px 10px 14px !important; border-radius: 13px !important; background-color: var(--admin-surface) !important; background-image: linear-gradient(45deg, transparent 50%, #bdbdbd 50%), linear-gradient(135deg, #bdbdbd 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.menu-control { position: relative; min-width: 168px; }
.filter-control > .menu-control { width: 100%; min-width: 0; }
.menu-trigger { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 13px; border: 1px solid var(--admin-border-strong); border-radius: 13px; background: var(--admin-surface); color: var(--admin-text); font-weight: 700; cursor: pointer; text-align: left; transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.menu-trigger:hover, .menu-control.is-open .menu-trigger { background: var(--admin-surface-hover); border-color: #777; box-shadow: 0 0 0 3px rgba(235, 235, 235, .08); }
.menu-trigger:active { transform: translateY(1px) scale(.985); }
.menu-trigger:focus-visible, .menu-option:focus-visible { outline: 2px solid #ededed; outline-offset: 2px; }
.menu-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-chevron { width: 8px; height: 8px; flex: 0 0 auto; border-right: 1.5px solid #d2d2d2; border-bottom: 1.5px solid #d2d2d2; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.menu-control.is-open .menu-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.menu-popover { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; width: max(100%, 230px); max-height: 330px; overflow: auto; padding: 6px; border: 1px solid #424242; border-radius: 14px; background: #0b0b0b; box-shadow: 0 20px 44px rgba(0, 0, 0, .58); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px) scale(.985); transform-origin: top right; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.menu-control.is-open .menu-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.menu-option { width: 100%; display: block; border: 0; border-radius: 9px; background: transparent; color: #cfcfcf; padding: 10px 11px; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; transition: background-color .14s ease, color .14s ease; }
.menu-option:hover, .menu-option.selected { background: #222; color: #fff; }
.menu-option.selected { box-shadow: inset 2px 0 0 #e6e6e6; }
.menu-popover::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.menu-popover::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: #3a3a3a; border: 3px solid #0b0b0b; border-radius: 999px; }

.request-filters { align-items: end; }
.request-filters .filter-control { min-width: 210px; }
.data-view > .panel > .table-wrap { max-height: min(68dvh, 760px); overflow: auto; overscroll-behavior: contain; border-radius: 14px; }
.data-view > .panel > .table-wrap .table { min-width: 980px; }
.table tbody tr { content-visibility: auto; contain-intrinsic-size: 48px; }
.nav, .button, .controls select, .date-control { will-change: auto; }

@keyframes admin-progress { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes admin-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  #content, .menu-trigger, .menu-chevron, .menu-popover { transition: none; }
  #content.is-switching { transform: none; }
  #content.is-loading::before, .loading-title, .loading-copy, .loading-grid > div { animation: none; }
}
@media (max-width: 760px) {
  .menu-control { min-width: 0; flex: 1 1 180px; }
  .request-filters .filter-control { min-width: min(100%, 210px); }
  .loading-grid { grid-template-columns: 1fr; }
  .data-view > .panel > .table-wrap { max-height: 64dvh; }
}