/* =========================================================
   ShoreBuild V109 — Staff Panel Visual Refresh
   UI-only layer. Existing role permissions and panel logic remain unchanged.
========================================================= */

:root {
  --shore-panel-ease: cubic-bezier(.2,.75,.2,1);
}

/* ---------- shared motion / cleanup ---------- */
.admin-sidebar,
.admin-main,
.sidebar-button,
.sidebar-logout,
.primary-button,
.secondary-button,
.dashboard-card,
.dashboard-panel,
.admin-build-card,
.admin-user-row,
.admin-panel-card,
.staff-header,
.staff-workspace,
.staff-tabs button,
.staff-row,
.admin-search,
.admin-select,
.staff-schematics-search,
.shore-role-quick-card {
  transition:
    transform .22s var(--shore-panel-ease),
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease,
    filter .22s ease;
}

button:hover:not(:disabled),
.sidebar-button:hover,
.sidebar-logout:hover,
.admin-panel-card:hover,
.staff-tabs button:hover,
.staff-row:hover,
.admin-build-card:hover,
.shore-role-quick-card:hover {
  transform: translateY(-2px) scale(1.025);
}

button:active:not(:disabled),
.sidebar-button:active,
.staff-tabs button:active,
.staff-row:active,
.shore-role-quick-card:active {
  transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar,.admin-main,.sidebar-button,.sidebar-logout,.primary-button,.secondary-button,
  .dashboard-card,.dashboard-panel,.admin-build-card,.admin-user-row,.admin-panel-card,
  .staff-header,.staff-workspace,.staff-tabs button,.staff-row,.admin-search,.admin-select,
  .staff-schematics-search,.shore-role-quick-card { transition: none !important; }
  button:hover:not(:disabled),.sidebar-button:hover,.sidebar-logout:hover,.admin-panel-card:hover,
  .staff-tabs button:hover,.staff-row:hover,.admin-build-card:hover,.shore-role-quick-card:hover { transform:none !important; }
}

/* =========================================================
   ADMIN — BLACK + WHITE
========================================================= */
body:has(.admin-layout) {
  background: #f4f4f4 !important;
  color: #111 !important;
}

.admin-sidebar {
  background: #080808 !important;
  border-right: 1px solid #2e2e2e !important;
  box-shadow: 10px 0 35px rgba(0,0,0,.12) !important;
}
.sidebar-brand { border-bottom-color:#272727 !important; }
.sidebar-brand h1 {
  font-family:"Minecraft Ten","Press Start 2P",monospace !important;
  color:#fff !important;
  text-shadow:none !important;
  letter-spacing:.02em;
}
.sidebar-brand span { color:#9b9b9b !important; }
.sidebar-nav { gap:9px !important; }
.sidebar-button {
  border:1px solid transparent !important;
  border-radius:10px !important;
  color:#aaa !important;
  padding:13px 14px !important;
}
.sidebar-button:hover {
  background:#191919 !important;
  border-color:#383838 !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
}
.sidebar-button.active {
  background:#fff !important;
  border-color:#fff !important;
  color:#050505 !important;
  box-shadow:0 8px 24px rgba(255,255,255,.12) !important;
}
.sidebar-bottom { border-top-color:#272727 !important; }
.sidebar-user-avatar { background:#fff !important;border-color:#fff !important;color:#000 !important; }
.sidebar-user-info strong { color:#fff !important; }
.sidebar-user-info span { color:#8f8f8f !important; }
.sidebar-role-label.role-owner { color:#fff !important; }
.sidebar-logout { background:#121212 !important;border-color:#333 !important;color:#bbb !important;border-radius:9px !important; }
.sidebar-logout:hover { background:#fff !important;border-color:#fff !important;color:#000 !important; }

.admin-main {
  background:
    radial-gradient(circle at 90% 0%, rgba(0,0,0,.06), transparent 34%),
    #f4f4f4 !important;
  color:#111 !important;
}
.admin-header h2,
.admin-section h2,
.panel-heading h3 {
  font-family:"Minecraft Ten","Press Start 2P",monospace !important;
  color:#0b0b0b !important;
  text-shadow:none !important;
}
.page-label { color:#555 !important; }
.admin-header p,
.panel-heading p { color:#666 !important; }

.dashboard-card,
.dashboard-panel,
.users-panel,
.admin-build-card,
.empty-panel,
.maintenance-control-card,
.release-scheduler-card,
.admin-user-row,
.admin-user-details>div {
  background:#fff !important;
  border-color:#d4d4d4 !important;
  color:#111 !important;
  box-shadow:0 10px 32px rgba(0,0,0,.055) !important;
}
.dashboard-card:hover,
.dashboard-panel:hover,
.admin-build-card:hover,
.admin-user-row:hover {
  border-color:#111 !important;
  box-shadow:0 14px 36px rgba(0,0,0,.10) !important;
}
.dashboard-card strong,.dashboard-panel strong,.admin-build-info h3,.admin-user-row strong { color:#111 !important; }
.dashboard-card span,.dashboard-card p,.dashboard-panel p,.admin-build-info p,.admin-user-row small { color:#686868 !important; }

.admin-search,
.admin-select,
.admin-user-role-label select,
.admin-user-popup-card input,
.admin-user-popup-card select,
.admin-user-popup-card textarea {
  background:#fff !important;
  border-color:#cfcfcf !important;
  color:#111 !important;
  border-radius:9px !important;
}
.admin-search:focus-within,.admin-select:focus { border-color:#111 !important;box-shadow:0 0 0 3px rgba(0,0,0,.08) !important; }
.admin-search input { color:#111 !important; }
.admin-search input::placeholder { color:#8a8a8a !important; }

.primary-button { background:#090909 !important;border-color:#090909 !important;color:#fff !important;border-radius:9px !important; }
.primary-button:hover { background:#242424 !important;border-color:#242424 !important;box-shadow:0 9px 22px rgba(0,0,0,.18) !important; }
.secondary-button { background:#fff !important;border-color:#bdbdbd !important;color:#111 !important;border-radius:9px !important; }
.secondary-button:hover { border-color:#111 !important;background:#ededed !important; }

.admin-panel-card { border-radius:13px !important;background:#fff !important;border-color:#d5d5d5 !important;color:#111 !important;box-shadow:0 10px 28px rgba(0,0,0,.06) !important; }
.admin-panel-card span,.admin-panel-card h3 { color:#111 !important; }
.admin-panel-card p { color:#686868 !important; }
.admin-panel-card:hover { border-color:#111 !important;filter:none !important;box-shadow:0 15px 35px rgba(0,0,0,.11) !important; }

/* Keep modal overlays readable in the monochrome admin theme. */
.admin-user-popup-card { background:#fff !important;border-color:#111 !important;color:#111 !important; }
.admin-user-popup-close { color:#111 !important; }

/* =========================================================
   DEV / MANAGER / BUILDER — SHARED STAFF LAYOUT
========================================================= */
.staff-shell {
  width:min(1380px,calc(100% - 40px)) !important;
  padding:28px 0 52px !important;
}
.staff-header {
  border-radius:16px !important;
  padding:22px 24px !important;
  box-shadow:0 12px 34px rgba(38,39,60,.10) !important;
}
.staff-header h1,
.staff-tab h2,
.staff-tab .admin-header h2 {
  font-family:"Minecraft Ten","Press Start 2P",monospace !important;
  letter-spacing:.015em;
}
.role-badge { border-radius:999px !important;padding:9px 13px !important; }

@media (min-width:701px) {
  .staff-workspace {
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr);
    column-gap:26px;
    align-items:start;
    padding:18px !important;
    border-radius:16px !important;
  }
  .staff-mobile-menu-row { display:none !important; }
  .staff-tabs {
    display:flex !important;
    flex-direction:column;
    gap:9px;
    grid-column:1;
    position:sticky;
    top:18px;
    border:0 !important;
    border-right:1px solid var(--staff-border) !important;
    padding:5px 17px 5px 0 !important;
    min-height:calc(100vh - 175px);
    overflow:visible !important;
  }
  .staff-tabs button {
    width:100%;
    text-align:left;
    padding:13px 14px !important;
    border-radius:10px !important;
  }
  .staff-tab {
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding:7px 5px 20px !important;
  }
  .staff-tab.active { display:block !important; }
}

.staff-row { border-radius:11px !important;cursor:pointer; }
.admin-build-card { border-radius:12px !important;overflow:hidden; }
.admin-search,.admin-select,.staff-schematics-search { border-radius:10px !important; }

/* DEV — light purple */
body.role-dev {
  --staff-bg:#eee6ff;
  --staff-surface:#fbf9ff;
  --staff-surface-2:#f3edff;
  --staff-border:#c9b6ef;
  --staff-accent:#8658d5;
  --staff-accent-dark:#6637b5;
  --staff-text:#2b1b45;
  --staff-muted:#77648f;
  background:var(--staff-bg) !important;
  color:var(--staff-text) !important;
}
body.role-dev .staff-header,
body.role-dev .staff-workspace { background:var(--staff-surface) !important;border-color:var(--staff-border) !important;color:var(--staff-text) !important; }
body.role-dev .staff-header span,
body.role-dev .page-label { color:var(--staff-accent-dark) !important; }
body.role-dev .staff-header p,
body.role-dev .staff-tab>p,
body.role-dev .admin-header p { color:var(--staff-muted) !important; }
body.role-dev .role-badge { background:#e4d5ff !important;border-color:#aa88e8 !important;color:#54279b !important; }
body.role-dev .staff-tabs button { background:transparent !important;border-color:transparent !important;color:#684d86 !important; }
body.role-dev .staff-tabs button:hover { background:#e5d8fb !important;border-color:#b89ae9 !important;color:#4b2581 !important; }
body.role-dev .staff-tabs button.active { background:var(--staff-accent) !important;border-color:var(--staff-accent-dark) !important;color:#fff !important;box-shadow:0 8px 20px rgba(102,55,181,.20) !important; }
body.role-dev .staff-row,
body.role-dev .admin-build-card { background:#fff !important;border-color:#d3c4ee !important;color:var(--staff-text) !important; }
body.role-dev .staff-row:hover,
body.role-dev .admin-build-card:hover { background:#f5efff !important;border-color:var(--staff-accent) !important;box-shadow:0 12px 26px rgba(102,55,181,.12) !important; }
body.role-dev .staff-row small { color:var(--staff-muted) !important; }
body.role-dev .admin-search,
body.role-dev .admin-select,
body.role-dev .staff-schematics-search { background:#fff !important;border-color:#cbb9ed !important;color:var(--staff-text) !important; }
body.role-dev .admin-search input { color:var(--staff-text) !important; }

/* MANAGER — light red */
body.role-manager {
  --staff-bg:#fde8ea;
  --staff-surface:#fffafb;
  --staff-surface-2:#fceff0;
  --staff-border:#efb9be;
  --staff-accent:#d95d68;
  --staff-accent-dark:#b53e49;
  --staff-text:#4c2025;
  --staff-muted:#8d6064;
  background:var(--staff-bg) !important;
  color:var(--staff-text) !important;
}
body.role-manager .staff-header,
body.role-manager .staff-workspace { background:var(--staff-surface) !important;border-color:var(--staff-border) !important;color:var(--staff-text) !important; }
body.role-manager .staff-header span,
body.role-manager .page-label { color:var(--staff-accent-dark) !important; }
body.role-manager .staff-header p,
body.role-manager .staff-tab>p,
body.role-manager .admin-header p { color:var(--staff-muted) !important; }
body.role-manager .role-badge { background:#f9d9dc !important;border-color:#e9959c !important;color:#9b303a !important; }
body.role-manager .staff-tabs button { background:transparent !important;border-color:transparent !important;color:#8b4b50 !important; }
body.role-manager .staff-tabs button:hover { background:#f6d9dc !important;border-color:#e7a5ab !important;color:#7b3037 !important; }
body.role-manager .staff-tabs button.active { background:var(--staff-accent) !important;border-color:var(--staff-accent-dark) !important;color:#fff !important;box-shadow:0 8px 20px rgba(181,62,73,.18) !important; }
body.role-manager .staff-row,
body.role-manager .admin-build-card { background:#fff !important;border-color:#edc8cc !important;color:var(--staff-text) !important; }
body.role-manager .staff-row:hover,
body.role-manager .admin-build-card:hover { background:#fff2f3 !important;border-color:var(--staff-accent) !important;box-shadow:0 12px 26px rgba(181,62,73,.10) !important; }
body.role-manager .staff-row small { color:var(--staff-muted) !important; }
body.role-manager .admin-search,
body.role-manager .admin-select,
body.role-manager .staff-schematics-search { background:#fff !important;border-color:#e9b8bc !important;color:var(--staff-text) !important; }
body.role-manager .admin-search input { color:var(--staff-text) !important; }

/* BUILDER — light blue */
body.role-builder {
  --staff-bg:#dff3ff;
  --staff-surface:#f9fdff;
  --staff-surface-2:#eaf7ff;
  --staff-border:#9fd5ef;
  --staff-accent:#3ca7dc;
  --staff-accent-dark:#207daf;
  --staff-text:#123b55;
  --staff-muted:#61859a;
  background:var(--staff-bg) !important;
  color:var(--staff-text) !important;
}
body.role-builder .staff-header,
body.role-builder .staff-workspace { background:var(--staff-surface) !important;border-color:var(--staff-border) !important;color:var(--staff-text) !important; }
body.role-builder .staff-header span,
body.role-builder .page-label { color:var(--staff-accent-dark) !important; }
body.role-builder .staff-header p,
body.role-builder .staff-tab>p,
body.role-builder .admin-header p { color:var(--staff-muted) !important; }
body.role-builder .role-badge { background:#d7effc !important;border-color:#75c5e9 !important;color:#126c99 !important; }
body.role-builder .staff-tabs button { background:transparent !important;border-color:transparent !important;color:#397896 !important; }
body.role-builder .staff-tabs button:hover { background:#d9f0fb !important;border-color:#94d2ee !important;color:#1c668a !important; }
body.role-builder .staff-tabs button.active { background:var(--staff-accent) !important;border-color:var(--staff-accent-dark) !important;color:#fff !important;box-shadow:0 8px 20px rgba(32,125,175,.17) !important; }
body.role-builder .staff-row,
body.role-builder .admin-build-card { background:#fff !important;border-color:#b9dff0 !important;color:var(--staff-text) !important; }
body.role-builder .staff-row:hover,
body.role-builder .admin-build-card:hover { background:#edf9ff !important;border-color:var(--staff-accent) !important;box-shadow:0 12px 26px rgba(32,125,175,.10) !important; }
body.role-builder .staff-row small { color:var(--staff-muted) !important; }
body.role-builder .admin-search,
body.role-builder .admin-select,
body.role-builder .staff-schematics-search { background:#fff !important;border-color:#acd9ed !important;color:var(--staff-text) !important; }
body.role-builder .admin-search input { color:var(--staff-text) !important; }

/* Owner previewing staff panel: neutral monochrome rather than old cyan. */
body.role-owner { --staff-border:#cfcfcf;background:#ededed !important;color:#111 !important; }
body.role-owner .staff-header,body.role-owner .staff-workspace { background:#fff !important;border-color:#d2d2d2 !important;color:#111 !important; }
body.role-owner .staff-header span,body.role-owner .page-label { color:#555 !important; }
body.role-owner .staff-header p,body.role-owner .staff-tab>p { color:#707070 !important; }
body.role-owner .staff-tabs button { background:transparent !important;border-color:transparent !important;color:#555 !important; }
body.role-owner .staff-tabs button:hover { background:#ececec !important;border-color:#bbb !important;color:#111 !important; }
body.role-owner .staff-tabs button.active { background:#111 !important;border-color:#111 !important;color:#fff !important; }
body.role-owner .staff-row,body.role-owner .admin-build-card { background:#fff !important;border-color:#d5d5d5 !important;color:#111 !important; }

/* Mobile keeps the existing menu behavior, but gets the refreshed colors. */
@media (max-width:700px) {
  .staff-shell { width:min(100% - 18px,1180px) !important;padding-top:12px !important; }
  .staff-header { border-radius:13px !important;padding:17px !important;gap:12px !important; }
  .staff-header h1 { font-size:24px !important; }
  .staff-workspace { padding:12px !important;border-radius:13px !important; }
  .staff-mobile-menu { border-radius:10px !important; }
  body.role-dev .staff-mobile-menu { background:#8658d5 !important;border-color:#6637b5 !important;color:#fff !important; }
  body.role-manager .staff-mobile-menu { background:#d95d68 !important;border-color:#b53e49 !important;color:#fff !important; }
  body.role-builder .staff-mobile-menu { background:#3ca7dc !important;border-color:#207daf !important;color:#fff !important; }
  body.role-owner .staff-mobile-menu { background:#111 !important;border-color:#111 !important;color:#fff !important; }
  .staff-tabs { border-radius:11px !important; }
  body.role-dev .staff-tabs,body.role-manager .staff-tabs,body.role-builder .staff-tabs,body.role-owner .staff-tabs { background:#fff !important;border-color:var(--staff-border,#ccc) !important; }
}

/* =========================================================
   HOMEPAGE — EXACT ROLE QUICK ACCESS
========================================================= */
.shore-role-quick-card[hidden] { display:none !important; }
.shore-role-quick-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.shore-role-quick-card::after {
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-38px;
  bottom:-48px;
  border-radius:50%;
  opacity:.13;
  background:currentColor;
}
.role-owner-quick { background:#111 !important;border-color:#111 !important;color:#fff !important; }
.role-owner-quick span,.role-owner-quick strong,.role-owner-quick em,.role-owner-quick p { color:#fff !important; }
.role-dev-quick { background:#eee6ff !important;border-color:#ae8ee5 !important;color:#542b92 !important; }
.role-dev-quick span,.role-dev-quick strong,.role-dev-quick em { color:#542b92 !important; }
.role-dev-quick p { color:#786391 !important; }
.role-manager-quick { background:#fde5e7 !important;border-color:#e49aa1 !important;color:#92333c !important; }
.role-manager-quick span,.role-manager-quick strong,.role-manager-quick em { color:#92333c !important; }
.role-manager-quick p { color:#8b6064 !important; }
.role-builder-quick { background:#ddf3ff !important;border-color:#8bcbe9 !important;color:#176f9e !important; }
.role-builder-quick span,.role-builder-quick strong,.role-builder-quick em { color:#176f9e !important; }
.role-builder-quick p { color:#5f8195 !important; }

/* Embedded Stock Creator adopts the parent staff role palette. */
html[data-staff-embed-theme="dev"] body:has(.admin-layout),
html[data-staff-embed-theme="dev"] .admin-main { background:#eee6ff !important; }
html[data-staff-embed-theme="dev"] .admin-sidebar { background:#6840ad !important;border-color:#8e68ce !important; }
html[data-staff-embed-theme="dev"] .primary-button { background:#7448bf !important;border-color:#7448bf !important; }
html[data-staff-embed-theme="dev"] .primary-button:hover { background:#5d35a4 !important;border-color:#5d35a4 !important; }

html[data-staff-embed-theme="manager"] body:has(.admin-layout),
html[data-staff-embed-theme="manager"] .admin-main { background:#fde8ea !important; }
html[data-staff-embed-theme="manager"] .admin-sidebar { background:#b7444f !important;border-color:#d26872 !important; }
html[data-staff-embed-theme="manager"] .primary-button { background:#ce5661 !important;border-color:#ce5661 !important; }
html[data-staff-embed-theme="manager"] .primary-button:hover { background:#ae3944 !important;border-color:#ae3944 !important; }

html[data-staff-embed-theme="builder"] body:has(.admin-layout),
html[data-staff-embed-theme="builder"] .admin-main { background:#dff3ff !important; }
html[data-staff-embed-theme="builder"] .admin-sidebar { background:#207da9 !important;border-color:#46a9d5 !important; }
html[data-staff-embed-theme="builder"] .primary-button { background:#318fc0 !important;border-color:#318fc0 !important; }
html[data-staff-embed-theme="builder"] .primary-button:hover { background:#1e719e !important;border-color:#1e719e !important; }