/*
 * NexusDemo product skin — NYXBRKR official neon-sign palette.
 *
 * This file intentionally loads after the structural stylesheets. It owns
 * color and surface semantics only; layout and behavior remain in app.css,
 * calendar.css and components.css.
 */

@font-face {
  font-family: "Nyxbrkr UI";
  src: url("fonts/Rajdhani-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nyxbrkr UI";
  src: url("fonts/Rajdhani-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Nyxbrkr UI";
  src: url("fonts/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nyxbrkr Display";
  src: url("fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --nyx-black: #020202;
  --nyx-panel: #021927;
  --nyx-panel-raised: #052235;
  --nyx-yellow: #f7ff18;
  --nyx-pink: #ff22c8;
  --nyx-blue: #20a8ff;
  --nyx-green: #32ff45;
  --nyx-white: #f0f4ff;
  --bg: var(--nyx-black);
  --surface: rgba(2, 25, 39, .96);
  --surface-2: rgba(5, 34, 53, .9);
  --ink: var(--nyx-white);
  --muted: #9fb4c7;
  --line: rgba(32, 168, 255, .26);
  --accent: var(--nyx-blue);
  --accent-dark: var(--nyx-yellow);
  --danger: var(--nyx-pink);
  --font-ui: "Nyxbrkr UI", "Rajdhani", system-ui, sans-serif;
  --font-display: "Nyxbrkr Display", "Michroma", "Arial Narrow", sans-serif;
  --shadow:
    0 0 0 1px rgba(255, 34, 200, .1),
    0 0 30px rgba(32, 168, 255, .09);
  color-scheme: dark;
  font-family: var(--font-ui);
}

body,
.guest-body {
  color: var(--ink);
  font-family: var(--font-ui);
  background:
    linear-gradient(rgba(32, 168, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 255, 69, .038) 1px, transparent 1px),
    radial-gradient(circle at 82% 12%, rgba(247, 255, 24, .08), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(255, 34, 200, .1), transparent 30%),
    var(--nyx-black);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.sidebar {
  color: var(--muted);
  background: rgba(2, 2, 2, .98);
  border-right-color: rgba(255, 34, 200, .34);
}

.topbar,
.panel,
.metric-card,
.stage-row,
.deal-card,
.pipeline-column,
.login-card,
.code-list,
.accent-panel,
.metric-list div,
.file-list a,
.calendar-shell,
.calendar-event {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.brand,
.page-heading h1,
.login-card h1,
.panel h2,
.panel h3,
.metric-card strong,
td,
label {
  color: var(--ink);
}

.brand,
.page-heading h1,
.login-card h1,
.panel h2,
.panel h3,
.nav a,
.button,
.eyebrow,
th,
.badge {
  font-family: var(--font-display);
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

.brand-logo,
.login-logo {
  background: var(--nyx-black);
  border-color: rgba(255, 34, 200, .48);
}

.brand-mark {
  color: var(--nyx-yellow);
  background: var(--nyx-black);
  border-color: rgba(255, 34, 200, .58);
  box-shadow: 0 0 18px rgba(247, 255, 24, .16);
}

.nav a {
  color: var(--muted);
}

.nav a .nav-icon {
  color: var(--nyx-pink);
}

.nav-icon {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

.nav a:hover,
.nav a.active {
  color: var(--nyx-yellow);
  background: rgba(247, 255, 24, .07);
  border-color: rgba(247, 255, 24, .28);
}

.nav a:hover .nav-icon,
.nav a.active .nav-icon {
  color: var(--nyx-yellow);
}

.button-primary,
.pagination a.active {
  color: var(--nyx-black);
  background: linear-gradient(90deg, var(--nyx-blue), var(--nyx-yellow));
  border-color: rgba(247, 255, 24, .72);
  box-shadow: 0 0 18px rgba(32, 168, 255, .18);
}

.button-primary:hover,
.pagination a.active:hover {
  color: var(--nyx-black);
  background: linear-gradient(90deg, var(--nyx-yellow), var(--nyx-pink));
  border-color: var(--nyx-pink);
}

.button-danger {
  color: var(--nyx-black);
  background: var(--nyx-pink);
  border-color: var(--nyx-pink);
}

.button,
.pagination a,
.badge {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
}

.eyebrow,
.panel-heading a,
.metric-card a,
.table-action a,
.link-button,
th {
  color: var(--nyx-blue);
}

.metric-card:nth-child(4n + 1) {
  border-top-color: var(--nyx-blue);
}

.metric-card:nth-child(4n + 2) {
  border-top-color: var(--nyx-green);
}

.metric-card:nth-child(4n + 3) {
  border-top-color: var(--nyx-yellow);
}

.metric-card:nth-child(4n) {
  border-top-color: var(--nyx-pink);
}

.metric-accent {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 34, 200, .16), transparent 46%),
    linear-gradient(315deg, rgba(32, 168, 255, .16), transparent 48%),
    var(--surface);
}

input,
select,
textarea,
.global-search input {
  color: var(--ink);
  background: rgba(2, 2, 2, .94);
  border-color: var(--line);
}

input:focus,
select:focus,
textarea:focus,
.global-search input:focus {
  border-color: var(--nyx-yellow);
  box-shadow: 0 0 0 3px rgba(247, 255, 24, .16);
}

tbody tr:hover,
.notification-list article.unread {
  background: rgba(32, 168, 255, .065);
}

td,
.note-list article,
.notification-list article,
.automation-list article {
  border-color: rgba(32, 168, 255, .14);
}

.dot,
.status-dot.online {
  background: var(--nyx-green);
  box-shadow: 0 0 12px rgba(50, 255, 69, .36);
}

.priority-high,
.priority-urgent {
  background: var(--nyx-pink);
}

.priority-medium {
  background: var(--nyx-yellow);
}

.alert-success {
  color: var(--nyx-green);
  background: rgba(50, 255, 69, .1);
  border-color: rgba(50, 255, 69, .34);
}

.alert-error {
  color: var(--nyx-pink);
  background: rgba(255, 34, 200, .1);
  border-color: rgba(255, 34, 200, .34);
}

.tag-list form,
.pipeline-column,
.badge {
  background: var(--surface-2);
}

::selection {
  color: var(--nyx-black);
  background: var(--nyx-yellow);
}