/* Aether Cloud-inspired controls, adapted to the existing dark staff workspace.
   Keep this shared layer last so setup, preview and staff actions stay consistent. */
@font-face {
  font-family: "Desk Poppins";
  src: url("/assets/poppins-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --control-primary: #7853db;
  --control-primary-hover: #6845c4;
  --control-primary-pressed: #5936b0;
  --control-bg: #1b2133;
  --control-hover: #28223d;
  --control-edge: #534762;
  --control-edge-hover: #bda4da;
  --control-ink: #eee8f7;
  --control-focus: #c4a9ff;
}

.button, .icon-button, .quick-find, .select-trigger, .mobile-nav-item {
  border-width: 1px;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.button {
  min-height: 44px;
  padding: 11px 16px;
  border-color: var(--control-edge);
  background: var(--control-bg);
  color: var(--control-ink);
  font-family: "Desk Poppins", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.5;
}

.button:hover:not(:disabled):not([aria-disabled=true]) {
  background: var(--control-hover);
  border-color: var(--control-edge-hover);
  color: #fff;
  box-shadow: none;
  transform: none;
}
.button:active:not(:disabled):not([aria-disabled=true]) {
  background: #332944;
  box-shadow: none;
  transform: none;
}

.button.primary {
  background: var(--control-primary);
  border-color: var(--control-primary);
  color: #fff;
  box-shadow: none;
}
.button.primary:hover:not(:disabled):not([aria-disabled=true]) {
  background: var(--control-primary-hover);
  border-color: var(--control-primary);
  color: #fff;
  box-shadow: none;
}
.button.primary:active:not(:disabled):not([aria-disabled=true]) {
  background: var(--control-primary-pressed);
  box-shadow: none;
}

/* Destructive actions must remain visibly distinct from normal purple actions. */
.button.danger, .button.primary.danger {
  background: #652b40;
  border-color: #b76d87;
  color: #fff0f4;
  box-shadow: none;
}
.button.danger:hover:not(:disabled):not([aria-disabled=true]) {
  background: #7c334d;
  border-color: #e7a0b7;
  color: #fff;
}
.button.danger:active:not(:disabled):not([aria-disabled=true]) { background: #572338; }

.icon-button { min-width: 44px; min-height: 44px; color: #cbbbdc; }
.icon-button:hover:not(:disabled) {
  background: var(--control-hover);
  border-color: var(--control-edge-hover);
  color: #fff;
  box-shadow: none;
  transform: none;
}
.icon-button:active:not(:disabled) { background: #332944; transform: none; }
.button:disabled, .button[aria-disabled=true], .icon-button:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  transition: none;
}

.select-trigger, .quick-find { border-color: var(--control-edge); }
.select-trigger:hover:not(:disabled), .quick-find:hover:not(:disabled) {
  border-color: var(--control-edge-hover);
  background: var(--control-hover);
  transform: none;
  box-shadow: none;
}
.select-trigger[aria-expanded=true] {
  border-color: var(--control-focus);
  box-shadow: 0 0 0 2px #c4a9ff20;
}
.select-menu { border-width: 1px; border-radius: 8px; box-shadow: 0 12px 32px #0006; }
.select-menu [role=option] { border-radius: 5px; }
/* Native selects keep OS keyboard/accessibility behavior without the white arrow box. */
select:not(.native-select) {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--control-edge);
  border-radius: 8px;
  background-color: #141b2c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c5b0df' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  padding: 11px 39px 11px 13px;
  color: var(--control-ink);
  font-family: inherit;
  line-height: 1.4;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
select:not(.native-select):hover:not(:disabled) { background-color: #202237; border-color: var(--control-edge-hover); }
select:not(.native-select):focus-visible { outline: 3px solid var(--control-focus); outline-offset: 2px; border-color: var(--control-focus); }
select:not(.native-select):disabled { opacity: .5; cursor: not-allowed; }
select:not(.native-select) option { background: #171d2f; color: var(--control-ink); }
.select-trigger { background: #141b2c; padding: 11px 13px; color: var(--control-ink); }
.select-trigger svg { color: #c5b0df; }
.select-menu { border-color: #69597e; background: #191e32; padding: 6px; }
.select-menu [role=option][aria-selected=true] { color: #e0ccff; background: #7853db24; }
.select-menu [role=option].highlighted { color: #fff; background: #43315f; }

.nav, .mobile-nav-item, .queue-views button {
  border-width: 1px;
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.nav.active, .mobile-nav-item[aria-current=page], .queue-views button[aria-pressed=true] {
  background: #7853db24;
  border-color: #9671ce;
  color: #e3d5ff;
  box-shadow: none;
}

/* Card-sized actions retain their layout, without the old raised-button ledge. */
.workspace-shortcut, .staff-summary button, .anticheat-metrics > button,
.preview-stats button, .preview-journeys button, .preview-case-row {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: none;
  transform: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.workspace-shortcut:hover, .workspace-shortcut:active {
  border-color: var(--control-edge-hover);
  box-shadow: none;
  transform: none;
}
.text-button { border-radius: 5px; color: #c5b0ef; }
.text-button:hover:not(:disabled) { color: #e4d6ff; }

:is(.button, .icon-button, .text-button, .nav, .mobile-nav-item, .quick-find,
    .select-trigger, .workspace-shortcut, .queue-views button, .staff-summary button,
    .anticheat-metrics > button, .preview-stats button, .preview-journeys button,
    .preview-case-row):focus-visible {
  outline: 3px solid var(--control-focus);
  outline-offset: 3px;
}
@media(prefers-reduced-motion:reduce) {
  .button, .icon-button, .nav, .mobile-nav-item, .quick-find, .select-trigger,
  .workspace-shortcut, .queue-views button, .staff-summary button,
  .anticheat-metrics > button, .preview-stats button, .preview-journeys button,
  .preview-case-row, select:not(.native-select) { transition: none; }
}