/* ─── Neumorphic Design System ────────────────────────────────
   offset  → clickable (buttons, cards, links)
   inset   → editable (inputs, selects, textareas)
   flat    → read-only info
──────────────────────────────────────────────────────────── */

/* OFFSET — clickable */
.neu-offset {
  background: #e8e0d0;
  border-radius: 12px;
  box-shadow: 6px 6px 14px #c9c2b4, -6px -6px 14px #f0ece4;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.neu-offset:hover {
  box-shadow: 8px 8px 20px #c9c2b4, -8px -8px 20px #f0ece4;
  transform: translateY(-2px);
}
.neu-offset:active {
  box-shadow: inset 4px 4px 10px #c9c2b4, inset -4px -4px 10px #f0ece4;
  transform: scale(0.98);
}

/* FLAT — read-only */
.neu-flat {
  background: #e8e0d0;
  border-radius: 12px;
  border: 1px solid #d4ccc0;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.neu-btn {
  display: inline-block;
  background: #e8e0d0;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 10px 24px;
  box-shadow: 6px 6px 14px #c9c2b4, -6px -6px 14px #f0ece4;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.neu-btn:hover {
  box-shadow: 8px 8px 20px #c9c2b4, -8px -8px 20px #f0ece4;
  transform: translateY(-2px);
}
.neu-btn:active {
  box-shadow: inset 4px 4px 10px #c9c2b4, inset -4px -4px 10px #f0ece4;
  transform: scale(0.98);
}
.neu-btn-danger  { color: #8b2020; }
.neu-btn-neutral { color: #2c2416; }
.neu-btn-success { color: #2d7a2d; }
.neu-btn-processing {
  color: #b8860b;
  box-shadow: inset 4px 4px 10px #c9c2b4, inset -4px -4px 10px #f0ece4;
  cursor: not-allowed;
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}
.neu-btn-processing::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #d4b84a;
  border-top-color: #b8860b;
  animation: neu-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes neu-spin {
  to { transform: rotate(360deg); }
}

/* ─── Inputs ──────────────────────────────────────────────── */
.neu-input {
  width: 100%;
  background: #e8e0d0;
  border: none;
  border-radius: 8px;
  box-shadow: inset 4px 4px 10px #c9c2b4, inset -4px -4px 10px #f0ece4;
  padding: 10px 14px;
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: #2c2416;
  outline: none;
  transition: box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.neu-input:focus {
  box-shadow: inset 5px 5px 12px #c9c2b4, inset -5px -5px 12px #f0ece4;
}
select.neu-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7060' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ─── Labels & errors ─────────────────────────────────────── */
.neu-label {
  font-family: ui-monospace, monospace;
  font-size: 0.625rem;
  color: #7a7060;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.neu-error {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  color: #8b2020;
  margin-top: 6px;
  display: block;
}

/* ─── Toggle (checkbox) ───────────────────────────────────── */
.neu-toggle::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c9c2b4;
  box-shadow: 2px 2px 6px #b8b0a0, -2px -2px 6px #f0ece4;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input[type="checkbox"]:checked + .neu-toggle {
  box-shadow: inset 4px 4px 10px #b8b0a0, inset -4px -4px 10px #f0ece4;
}
input[type="checkbox"]:checked + .neu-toggle::after {
  transform: translateX(20px);
  background: #2c2416;
  box-shadow: 2px 2px 6px #b8b0a0, -2px -2px 6px #f0ece4;
}

/* ─── Status dots ─────────────────────────────────────────── */
.neu-dot-online,
.neu-dot-offline,
.neu-dot-busy,
.neu-dot-unknown {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.neu-dot-online  { background: #2d7a2d; box-shadow: 0 0 6px #2d7a2d; }
.neu-dot-offline { background: #8b2020; }
.neu-dot-busy    { background: #b8860b; animation: neu-pulse 1.2s ease-in-out infinite; }
.neu-dot-unknown { background: #7a7060; }

.neu-status-online  { color: #2d7a2d; }
.neu-status-offline { color: #8b2020; }
.neu-status-busy    { color: #b8860b; }
.neu-status-unknown { color: #7a7060; }

@keyframes neu-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ─── Transitioning state ─────────────────────────────────── */
.neu-transitioning {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: #b8860b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.neu-transitioning::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8860b;
  animation: neu-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─── Admin table row hover ───────────────────────────────── */
tbody tr {
  transition: background 0.15s ease;
}
tbody tr:hover {
  background: #e2dace;
}

/* ─── Flash messages ──────────────────────────────────────── */
.neu-flash {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 12px 20px;
  border-radius: 10px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: flash-in 0.3s ease;
}
.neu-flash-notice {
  color: #2d7a2d;
  box-shadow: inset 4px 4px 10px #c9c2b4, inset -4px -4px 10px #f0ece4;
  border-left: 3px solid #2d7a2d;
}
.neu-flash-alert {
  color: #8b2020;
  box-shadow: inset 4px 4px 10px #c9c2b4, inset -4px -4px 10px #f0ece4;
  border-left: 3px solid #8b2020;
}
.neu-flash-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: #7a7060;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 0;
  transition: color 0.15s ease;
}
.neu-flash-dismiss:hover { color: #2c2416; }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}