/**
 * Nawili Caisse — Classes utilitaires de base
 * Chargé après nawili-tokens.css et NexoPOS CSS.
 * Préfixe .nw- strict pour éviter collisions.
 */

/* ── Body wrapper ─────────────────────────────────────────────────────────── */
.nawili-theme {
  font-family: var(--nw-font-ui);
  color: var(--nw-ink);
  background-color: var(--nw-bg-deep);
  -webkit-font-smoothing: antialiased;
}

/* ── Background halos (wrapper de page) ───────────────────────────────────── */
.nw-bg-halos {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(43,116,255,.30), transparent 60%),
    radial-gradient(900px 620px at 8% 8%,     rgba(47,220,255,.16), transparent 55%),
    radial-gradient(800px 800px at 50% 120%,  rgba(155,107,255,.16), transparent 55%),
    linear-gradient(180deg, #04081a, #060d27 45%, #04081a);
}

/* ── Grid overlay ─────────────────────────────────────────────────────────── */
.nw-grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(120,160,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(900px 700px at 60% 0%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 700px at 60% 0%, #000, transparent 80%);
  z-index: 0;
}

/* ── Glass panel ─────────────────────────────────────────────────────────── */
.nw-glass {
  background: var(--nw-glass);
  border: 1px solid var(--nw-stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nw-glass-strong {
  background: linear-gradient(180deg, rgba(13,26,74,.72), rgba(7,13,38,.6));
  border: 1px solid var(--nw-stroke2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
}

/* ── Buttons 3D ──────────────────────────────────────────────────────────── */
.nw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--nw-font-ui);
  font-weight: 700;
  border-radius: var(--nw-radius);
  transition: transform .1s, box-shadow .1s;
}
.nw-btn:active { transform: translateY(2px); }
.nw-btn:focus-visible { outline: 2px solid var(--nw-cyan); outline-offset: 3px; }

.nw-btn-primary {
  background: var(--nw-btn-primary-bg);
  box-shadow: var(--nw-btn-primary-sh);
  color: #fff;
}
.nw-btn-primary:hover { box-shadow: var(--nw-btn-primary-sh), var(--nw-glow-cyan); }

.nw-btn-green {
  background: var(--nw-btn-green-bg);
  box-shadow: var(--nw-btn-green-sh);
  color: #fff;
}
.nw-btn-green:hover { box-shadow: var(--nw-btn-green-sh), var(--nw-glow-green); }

.nw-btn-orange {
  background: var(--nw-btn-orange-bg);
  box-shadow: var(--nw-btn-orange-sh);
  color: #fff;
}

.nw-btn-violet {
  background: var(--nw-btn-violet-bg);
  box-shadow: var(--nw-btn-violet-sh);
  color: #fff;
}

.nw-btn-ghost {
  background: var(--nw-glass);
  border: 1px solid var(--nw-stroke);
  color: var(--nw-ink);
  backdrop-filter: blur(10px);
}
.nw-btn-ghost:hover { border-color: var(--nw-stroke2); background: var(--nw-glass2); }

/* ── Form inputs ─────────────────────────────────────────────────────────── */
.nw-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nw-stroke);
  transition: border-color .15s;
}
.nw-input-wrap:focus-within {
  border-color: rgba(47,220,255,.5);
  box-shadow: 0 0 0 3px rgba(47,220,255,.08);
}

.nw-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--nw-ink);
  font-family: var(--nw-font-ui);
  font-size: 14px;
  font-weight: 600;
  outline: none;
}
.nw-input::placeholder { color: var(--nw-muted2); font-weight: 500; }

/* ── Label ──────────────────────────────────────────────────────────────── */
.nw-label {
  display: block;
  font-family: var(--nw-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nw-muted);
  margin-bottom: 7px;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.nw-title {
  font-family: var(--nw-font-display);
  font-weight: 700;
  color: var(--nw-ink);
}
.nw-text-cyan  { color: var(--nw-cyan); }
.nw-text-muted { color: var(--nw-muted); }

/* ── Status badge ────────────────────────────────────────────────────────── */
.nw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--nw-font-ui);
  font-size: 12px;
  font-weight: 600;
}
.nw-badge-green {
  background: rgba(39,208,122,.12);
  border: 1px solid rgba(39,208,122,.32);
  color: #7df0b5;
}
.nw-badge-cyan {
  background: rgba(47,220,255,.12);
  border: 1px solid rgba(47,220,255,.32);
  color: #a5f2ff;
}
.nw-badge-orange {
  background: rgba(255,138,61,.12);
  border: 1px solid rgba(255,138,61,.32);
  color: #ffc08a;
}
.nw-badge-red {
  background: rgba(255,84,112,.12);
  border: 1px solid rgba(255,84,112,.32);
  color: #ff9aac;
}

/* ── Dot pulse ──────────────────────────────────────────────────────────── */
.nw-dot-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  animation: nwGlow 2s infinite;
}
.nw-dot-green  { background: var(--nw-green);  box-shadow: 0 0 10px var(--nw-green); }
.nw-dot-cyan   { background: var(--nw-cyan);   box-shadow: 0 0 10px var(--nw-cyan); }
.nw-dot-orange { background: var(--nw-orange); box-shadow: 0 0 10px var(--nw-orange); }

/* ── Gradient text ──────────────────────────────────────────────────────── */
.nw-grad-text {
  background: linear-gradient(90deg, var(--nw-cyan), var(--nw-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Rise animation on mount ────────────────────────────────────────────── */
.nw-rise {
  animation: nwRise .35s ease both;
}

/* ── Responsive helpers ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nw-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .nw-hide-desktop { display: none !important; }
}