/**
 * VM Design System v1.0
 * ─────────────────────
 * Enhetligt designsystem för Tidomat VisionManager.
 * Laddas SIST — överskriver alla inkonsekvenser.
 *
 * Principer:
 *   1. Mörkt premium-tema — konsekvent överallt
 *   2. Varje komponent har EN stil (inga 3 varianter)
 *   3. CSS-variabler styr allt — byt tema genom att ändra tokens
 *   4. Glasmorfism + subtila glows = premium
 */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — den enda källan
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Bakgrunder ── (legacy aliases — refererar nu vm_tokens.css master) */
  --vm-bg-card:     rgba(255,255,255,0.03);
  --vm-bg-card-2:   rgba(255,255,255,0.05);

  /* ── Borders (extra alias för input) ── */
  --vm-border-input:  rgba(255,255,255,0.12);

  /* ── Text dim alias ── */
  --vm-text-dim:   rgba(160,195,230,0.30);

  /* ── Accent text alias ── */
  --vm-accent-text: var(--vm-accent);

  /* ── Radius ── */
  --vm-radius-xl:  16px;
  --vm-radius-lg:  12px;
  --vm-radius-md:  10px;
  --vm-radius-sm:  8px;
  --vm-radius-xs:  6px;
  --vm-radius-pill: 999px;

  /* ── Shadows ── */
  --vm-shadow:     0 12px 32px rgba(0,0,0,0.25);
  --vm-shadow-sm:  0 6px 16px rgba(0,0,0,0.18);
  --vm-shadow-glow: 0 0 20px rgba(var(--vm-accent-rgb), 0.15);

  /* ── Spacing ── */
  --vm-space-xs: 4px;
  --vm-space-sm: 8px;
  --vm-space-md: 12px;
  --vm-space-lg: 16px;
  --vm-space-xl: 24px;

  /* ── Typography ── */
  --vm-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vm-font-size: 14px;
  --vm-line-height: 1.45;

  /* ── Controls ── */
  --vm-control-h:    36px;
  --vm-control-h-sm: 30px;
  --vm-control-h-lg: 42px;

  /* ── Transitions ── */
  --vm-ease: 0.18s ease;
}


/* ═══════════════════════════════════════════════════════════════════
   2. BASE — font, scrollbar (INTE bakgrundsfärg — det hanteras per tema)
   ═══════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--vm-font) !important;
  font-size: var(--vm-font-size);
  line-height: var(--vm-line-height);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(var(--vm-accent-rgb), 0.20);
}

/* ═══════════════════════════════════════════════════════════════════
   3. SIDEBAR — alltid mörk (konsekvent)
   ═══════════════════════════════════════════════════════════════════ */

.app-sidebar {
  /* FAS O (2026-05-16): sidebar pekar nu på dedikerad sidebar-token. */
  background: var(--vm-bg-sidebar) !important;
  border-right: 1px solid var(--vm-border) !important;
}

.sidebar-link {
  color: var(--vm-text-soft) !important;
  border-radius: var(--vm-radius-lg) !important;
  border: 1px solid transparent !important;
  transition: var(--vm-ease) !important;
}
.sidebar-link:hover {
  color: var(--vm-text) !important;
  background: rgba(255,255,255,0.06) !important;
}
.sidebar-link.active {
  color: var(--vm-accent-text) !important;
  background: var(--vm-accent-soft) !important;
  border-color: var(--vm-accent-glow) !important;
}

.sidebar-link-icon {
  background: var(--vm-accent-soft) !important;
  color: var(--vm-accent-text) !important;
  border-radius: var(--vm-radius-sm) !important;
}

.sidebar-bottom,
.sidebar-top {
  border-color: rgba(255,255,255,0.06) !important;
}

.brand-text strong { color: var(--vm-text) !important; }
.brand-text span { color: var(--vm-text-muted) !important; }


/* ═══════════════════════════════════════════════════════════════════
   4. BUTTONS — en stil att regera dem alla
   ═══════════════════════════════════════════════════════════════════ */

/* Primary — token-driven (följer --vm-accent vid tema-byte).
   :where() kollapsar specificity till (0,1,0) så vm_facit_overrides.css
   (laddas sist) vinner enkelt på fil-ordning. */
:where(.btn-primary),
:where(button[type="submit"]:not(.dp-btn):not(.fbar-btn):not(.ops-action-btn):not(.tool-btn):not(.layer-btn):not(.fp2d-btn):not(.vm-btn-danger):not(.vm-login__btn)) {
  min-height: var(--vm-btn-height) !important; /* Etapp 1-följd: 40→32, enad mot --vm-btn-height. ENDAST höjd ändrad. */
  padding: 0 16px !important;
  border-radius: var(--vm-radius-md) !important;
  border: 1px solid rgba(var(--vm-accent-rgb), 0.50) !important;
  background: linear-gradient(180deg, rgba(var(--vm-accent-rgb), 0.22) 0%, rgba(var(--vm-accent-rgb), 0.14) 100%) !important;
  color: var(--vm-accent) !important;
  font-size: var(--vm-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--vm-ease) !important;
  box-shadow: var(--vm-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
:where(.btn-primary:hover),
:where(button[type="submit"]:not(.dp-btn):not(.fbar-btn):not(.ops-action-btn):not(.tool-btn):not(.layer-btn):not(.fp2d-btn):not(.vm-btn-danger):not(.vm-login__btn):hover) {
  background: linear-gradient(180deg, rgba(var(--vm-accent-rgb), 0.35) 0%, rgba(var(--vm-accent-rgb), 0.22) 100%) !important;
  color: var(--vm-accent-fg, var(--vm-text)) !important;
  box-shadow: var(--vm-shadow), var(--vm-shadow-glow) !important;
}

/* Secondary / Ghost */
.btn-secondary,
.btn-ghost {
  min-height: var(--vm-btn-height) !important; /* Etapp 1-följd: 40→32, enad mot --vm-btn-height. ENDAST höjd ändrad. */
  padding: 0 14px !important;
  border-radius: var(--vm-radius-md) !important;
  border: 1px solid var(--vm-border-input) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--vm-text-soft) !important;
  font-size: var(--vm-text-xs) !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: var(--vm-ease) !important;
}
.btn-secondary:hover,
.btn-ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--vm-border-strong) !important;
  color: var(--vm-text) !important;
}

/* Danger */
.btn-danger {
  min-height: var(--vm-btn-height) !important; /* Etapp 1-följd: 40→32, enad mot --vm-btn-height. ENDAST höjd ändrad. */
  border-radius: var(--vm-radius-md) !important;
  border: 1px solid rgba(212,100,100,0.40) !important;
  background: linear-gradient(180deg, rgba(212,100,100,0.25) 0%, rgba(180,60,60,0.18) 100%) !important;
  color: var(--vm-danger) !important;
  font-weight: 700 !important;
  box-shadow: var(--vm-shadow-sm) !important;
}
.btn-danger:hover {
  background: linear-gradient(180deg, rgba(212,100,100,0.40) 0%, rgba(180,60,60,0.30) 100%) !important;
}

/* Small */
.btn-sm {
  min-height: var(--vm-control-h-sm) !important;
  padding: 0 10px !important;
  font-size: var(--vm-text-xs) !important;
  border-radius: var(--vm-radius-sm) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   5. BADGES — enhetligt pill-format
   ═══════════════════════════════════════════════════════════════════ */

.badge,
.access-status-badge {
  border-radius: var(--vm-radius-sm) !important;
  font-size: var(--vm-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.badge-neutral, .access-status-badge {
  background: rgba(255,255,255,0.06) !important;
  color: var(--vm-text-muted) !important;
  border: 1px solid var(--vm-border-soft) !important;
}

.badge-success {
  background: var(--vm-success-soft) !important;
  color: var(--vm-success) !important;
  border: 1px solid rgba(106,219,138,0.20) !important;
}

.badge-warning {
  background: var(--vm-warning-soft) !important;
  color: var(--vm-warning) !important;
  border: 1px solid rgba(var(--vm-accent-rgb), 0.20) !important;
}

.badge-danger {
  background: var(--vm-danger-soft) !important;
  color: var(--vm-danger) !important;
  border: 1px solid rgba(212,100,100,0.20) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   6. INPUTS — enhetlig border-radius + focus-glow (behåller färger)
   ═══════════════════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-radius: var(--vm-radius-sm) !important;
  transition: var(--vm-ease);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--vm-accent) !important;
  box-shadow: 0 0 0 3px var(--vm-accent-soft) !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   7. CARDS & PANELS — förbättrad stil (behåller existerande färger)
   ═══════════════════════════════════════════════════════════════════ */

.module-panel {
  border-radius: var(--vm-radius-xl) !important;
  overflow: hidden;
  transition: box-shadow var(--vm-ease);
}

.module-panel:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}


/* ═══════════════════════════════════════════════════════════════════
   8. TABLES — förbättrad typografi (behåller existerande färger)
   ═══════════════════════════════════════════════════════════════════ */

.table-wrap,
.module-table-wrap {
  border-radius: var(--vm-radius-lg) !important;
}

table th {
  font-size: var(--vm-text-xs) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}


/* ═══════════════════════════════════════════════════════════════════
   9. FLASH MESSAGES — förbättrad radius
   ═══════════════════════════════════════════════════════════════════ */

.flash {
  border-radius: var(--vm-radius-md) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   10. CHECKBOX / TOGGLE
   ═══════════════════════════════════════════════════════════════════ */

.chk-item label {
  border-radius: var(--vm-radius-sm) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   12. UTILITY — minimala förbättringar som inte krockar med ljusa teman
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   13. FIELD GROUPS — form layout
   ═══════════════════════════════════════════════════════════════════ */

.field-group label,
.field-group span {
  color: var(--vm-text-muted) !important;
  font-size: var(--vm-text-xs);
}


/* ═══════════════════════════════════════════════════════════════════
   14. GRID CARDS / STATS
   ═══════════════════════════════════════════════════════════════════ */

.stat-card,
.stat-mini,
.metric-card {
  background: var(--vm-bg-card) !important;
  border: 1px solid var(--vm-border) !important;
  border-radius: var(--vm-radius-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   15. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════ */

.empty-state,
.no-data,
.module-empty {
  color: var(--vm-text-dim) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   16. LOADING / SKELETON
   ═══════════════════════════════════════════════════════════════════ */

@keyframes vm-pulse {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.08; }
}

.skeleton,
.loading-placeholder {
  background: rgba(255,255,255,0.04) !important;
  animation: vm-pulse 1.6s ease infinite;
  border-radius: var(--vm-radius-sm);
}