/*
  Nexora REV62.1 UI Foundation
  Purpose: shared design tokens + safe component leveling layer.
  Scope: CSS only. No workflow or backend logic.
*/
:root {
  color-scheme: dark;

  --ds-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-bg-page: #05070b;
  --ds-bg-elevated: rgba(12, 16, 24, .92);
  --ds-surface-1: rgba(255, 255, 255, .065);
  --ds-surface-2: rgba(255, 255, 255, .095);
  --ds-surface-3: rgba(255, 255, 255, .13);
  --ds-field: rgba(0, 0, 0, .34);
  --ds-field-strong: rgba(0, 0, 0, .48);
  --ds-border: rgba(255, 255, 255, .14);
  --ds-border-strong: rgba(255, 255, 255, .22);
  --ds-text: #f7f8fb;
  --ds-text-soft: rgba(247, 248, 251, .78);
  --ds-text-muted: rgba(247, 248, 251, .62);
  --ds-accent: #79d9ff;
  --ds-accent-strong: #45c4ff;
  --ds-accent-2: #7b55ff;
  --ds-success: #6ee7b7;
  --ds-warning: #ffd166;
  --ds-danger: #ff7a90;
  --ds-whatsapp: #25d366;

  --ds-radius-xs: 10px;
  --ds-radius-sm: 14px;
  --ds-radius-md: 18px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 30px;
  --ds-radius-pill: 999px;

  --ds-shadow-soft: 0 14px 44px rgba(0, 0, 0, .22);
  --ds-shadow-card: 0 22px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.045);
  --ds-shadow-modal: 0 32px 100px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255,255,255,.06);
  --ds-focus: 0 0 0 3px rgba(121, 217, 255, .16);
  --ds-glow-accent: 0 0 0 1px rgba(121, 217, 255, .18), 0 0 32px rgba(121, 217, 255, .16);
  --ds-glow-success: 0 0 0 1px rgba(110, 231, 183, .18), 0 0 28px rgba(110, 231, 183, .12);
  --ds-glow-warning: 0 0 0 1px rgba(255, 209, 102, .18), 0 0 28px rgba(255, 209, 102, .10);
  --ds-glow-danger: 0 0 0 1px rgba(255, 122, 144, .18), 0 0 28px rgba(255, 122, 144, .12);

  /* Legacy aliases: shell, room-manager, templates and new admin modules can all read from the same base. */
  --nx-bg: var(--ds-bg-page);
  --nx-surface: var(--ds-surface-1);
  --nx-surface-strong: var(--ds-surface-2);
  --nx-border: var(--ds-border);
  --nx-text: var(--ds-text);
  --nx-muted: var(--ds-text-muted);
  --nx-accent: var(--ds-accent);
  --nx-ok: var(--ds-success);
  --nx-warn: var(--ds-warning);
  --nx-danger: var(--ds-danger);

  --rm-bg: var(--ds-bg-page);
  --rm-panel: var(--ds-surface-1);
  --rm-panel-strong: var(--ds-surface-2);
  --rm-border: var(--ds-border);
  --rm-border-strong: var(--ds-border-strong);
  --rm-text: var(--ds-text);
  --rm-muted: var(--ds-text-muted);
  --rm-blue: var(--ds-accent);
  --rm-green: var(--ds-success);
  --rm-amber: var(--ds-warning);
  --rm-red: var(--ds-danger);

  --nu-card-bg: var(--ds-surface-1);
  --nu-card-border: var(--ds-border);
  --nu-card-border-strong: var(--ds-border-strong);
  --nu-card-shadow: var(--ds-shadow-soft);
  --nu-chip-bg: rgba(255, 255, 255, .065);
  --nu-chip-text: var(--ds-text-soft);

  --tpl-bg: var(--ds-bg-page);
  --tpl-surface: var(--ds-surface-1);
  --tpl-surface-2: var(--ds-surface-2);
  --tpl-surface-3: var(--ds-surface-3);
  --tpl-border: var(--ds-border);
  --tpl-border-soft: rgba(255, 255, 255, .1);
  --tpl-text: var(--ds-text);
  --tpl-muted: var(--ds-text-muted);
  --tpl-green: var(--ds-success);
  --tpl-red: var(--ds-danger);
}

html[data-theme="light"],
:root[data-theme="light"],
body.light-theme,
html[data-reg-theme="light"] {
  color-scheme: light;
  --ds-bg-page: #f5f7fb;
  --ds-bg-elevated: rgba(255, 255, 255, .94);
  --ds-surface-1: rgba(255, 255, 255, .82);
  --ds-surface-2: rgba(255, 255, 255, .93);
  --ds-surface-3: rgba(255, 255, 255, .98);
  --ds-field: rgba(255, 255, 255, .88);
  --ds-field-strong: rgba(255, 255, 255, .96);
  --ds-border: rgba(15, 23, 42, .13);
  --ds-border-strong: rgba(15, 23, 42, .22);
  --ds-text: #111827;
  --ds-text-soft: rgba(31, 41, 55, .80);
  --ds-text-muted: rgba(55, 65, 81, .66);
  --ds-accent: #0369a1;
  --ds-accent-strong: #0284c7;
  --ds-success: #047857;
  --ds-warning: #a16207;
  --ds-danger: #b91c1c;
  --ds-shadow-soft: 0 14px 42px rgba(57, 83, 124, .12);
  --ds-shadow-card: 0 20px 64px rgba(57, 83, 124, .15), inset 0 1px 0 rgba(255,255,255,.8);
  --ds-shadow-modal: 0 30px 90px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255,255,255,.8);
}

* { box-sizing: border-box; }
html { text-rendering: optimizeLegibility; }
body {
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(121, 217, 255, .26); color: var(--ds-text); }

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus);
}

/* Shared card language. Kept intentionally conservative: same product, fewer different surfaces. */
.nx-card,
.nx-header,
.nx-panel,
.nx-panel-box,
.nx-event-picker-card,
.nx-context-card,
.nx-register-hero,
.nx-register-card,
.card,
.panel,
.form-card,
.table-card,
.metric-card,
.notice-box,
.empty-state,
.workspace-panel,
.workspace-subpanel,
.assignment-card,
.production-card,
.feed-item {
  border-color: var(--ds-border);
  box-shadow: var(--ds-shadow-soft);
}

.nx-card,
.nx-header,
.nx-panel,
.nx-panel-box,
.nx-event-picker-card,
.nx-context-card,
.nx-register-hero,
.nx-register-card {
  border-radius: var(--ds-radius-xl);
}

.nx-item,
.nx-reg-row,
.nx-field-row,
.nx-asset-card,
.assignment-card,
.production-card,
.feed-item,
.workspace-subpanel,
.notice-box,
.empty-state {
  border-radius: var(--ds-radius-lg);
}

/* Shared input language. Page-specific layouts still win; this levels focus/feel only. */
.nx-input,
.nx-select,
.nx-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea {
  border-color: var(--ds-border);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
}

.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--ds-accent) 78%, white 8%);
  box-shadow: var(--ds-focus);
}

/* Shared button and chip language. */
.nx-btn,
.btn,
.btn-soft,
.btn-inline,
.nx-primary,
.nx-secondary,
.nx-link-btn,
.nx-danger-btn,
.nx-chip,
.nx-pill,
.badge,
.summary-chip,
.meta-pill,
.status-live,
.nx-status-pill {
  border-radius: var(--ds-radius-pill);
}

.nx-primary,
.btn-primary,
.nx-submit,
.nx-holding button,
.nx-primary-link {
  background: linear-gradient(90deg, var(--ds-accent-strong), var(--ds-accent-2));
  color: #fff;
  box-shadow: 0 12px 34px rgba(69, 196, 255, .16);
}

.nx-primary:hover,
.btn-primary:hover,
.nx-submit:hover,
.nx-primary-link:hover {
  box-shadow: var(--ds-glow-accent);
}

.nx-chip.active,
.nx-tabs button.is-active,
.people-tab-button.active,
.nav-link.active,
.nx-bottom-nav button.active {
  border-color: color-mix(in srgb, var(--ds-accent) 64%, transparent);
  background: color-mix(in srgb, var(--ds-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.nx-count-badge,
.nx-badge {
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-glow-accent);
}

/* Status semantics: one meaning everywhere. */
.is-success,
.status-done,
.nx-status-done,
.nx-chip.success,
.nx-chip.ok,
.badge.success {
  border-color: color-mix(in srgb, var(--ds-success) 56%, transparent);
  color: var(--ds-success);
}

.is-warning,
.status-warning,
.status-pending,
.nx-chip.amber,
.badge.warning,
.badge.pending {
  border-color: color-mix(in srgb, var(--ds-warning) 50%, transparent);
  color: var(--ds-warning);
}

.is-danger,
.status-danger,
.status-blocked,
.nx-status-blocked,
.nx-danger,
.nx-danger-btn,
.btn-danger,
.badge.danger,
.badge.missing {
  border-color: color-mix(in srgb, var(--ds-danger) 52%, transparent);
  color: var(--ds-danger);
}

/* Modals and overlays: single cockpit behavior. */
dialog::backdrop,
.nx-modal::backdrop {
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nx-modal-card,
.modal-card,
.dialog-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-modal);
}

/* Bottom nav now shares the same glass behavior as the top shell. */
.nx-bottom-nav,
.mobile-bottom-nav,
.bottom-nav {
  border-color: var(--ds-border);
  background: rgba(8, 10, 16, .82);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

html[data-theme="light"] .nx-bottom-nav,
:root[data-theme="light"] .nx-bottom-nav,
body.light-theme .nx-bottom-nav,
html[data-theme="light"] .mobile-bottom-nav,
:root[data-theme="light"] .mobile-bottom-nav,
body.light-theme .mobile-bottom-nav {
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 48px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.65);
}

/* Toasts: less bulky, same placement language. */
.nx-toast,
.toast,
.page-message {
  border: 1px solid color-mix(in srgb, var(--ds-accent) 36%, transparent);
  border-radius: var(--ds-radius-pill);
  background: rgba(8, 10, 16, .92);
  color: var(--ds-text);
  box-shadow: 0 16px 48px rgba(0,0,0,.36);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

/* Foundation utility classes for future patches. */
.ds-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface-1));
  box-shadow: var(--ds-shadow-card);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 34px;
  padding: 0 .8rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: rgba(255,255,255,.065);
  color: var(--ds-text-soft);
  font-weight: 760;
}

.ds-icon-action {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-1);
  color: var(--ds-text);
}

.ds-icon-action[data-tone="success"] { color: var(--ds-success); border-color: color-mix(in srgb, var(--ds-success) 46%, transparent); }
.ds-icon-action[data-tone="warning"] { color: var(--ds-warning); border-color: color-mix(in srgb, var(--ds-warning) 46%, transparent); }
.ds-icon-action[data-tone="danger"] { color: var(--ds-danger); border-color: color-mix(in srgb, var(--ds-danger) 46%, transparent); }
.ds-icon-action[data-tone="accent"] { color: var(--ds-accent); border-color: color-mix(in srgb, var(--ds-accent) 46%, transparent); }

@media (max-width: 740px) {
  .nx-card,
  .nx-header,
  .nx-panel,
  .nx-panel-box,
  .nx-event-picker-card,
  .nx-context-card,
  .nx-register-hero,
  .nx-register-card {
    border-radius: var(--ds-radius-lg);
  }

  .nx-count-badge,
  .nx-badge {
    min-width: 44px;
    min-height: 44px;
  }
}