@import url('https://fonts.bunny.net/css?family=inter:100,300,400,500,600,700,900|jetbrains-mono:400,700&display=swap');

:root {
  --amber: #fbbf24;
  --bg: #010102;
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.05);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: #fff;
}

/* --- AMBIENT EFFECTS (FRÅN INDEX) --- */
.noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.aurora {
  position: fixed;
  inset: -30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.05), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(59, 130, 246, 0.03), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.03), transparent 50%);
  filter: blur(70px);
  z-index: 0;
  animation: auroraMove 20s ease-in-out infinite alternate;
  pointer-events: none;
}

.aurora-dim {
    opacity: 0.25;
}

@keyframes auroraMove {
  from {
    transform: translate3d(-1%, -1%, 0) scale(1.02);
  }

  to {
    transform: translate3d(1%, 1%, 0) scale(1.05);
  }
}

/* --- GLASSMORPHISM COMPONENTS --- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
}

.card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  /* 24px */
  padding: 1.5rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 10;
}

/* Denna klass ger de snygga rundade hörnen och glass-effekten */
.glass-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2rem; /* Detta ger de snygga stora rundade hörnen */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.1);
}

/* --- TYPOGRAPHY --- */
.logo-font {
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  font-style: italic;
}

.mono-font {
  font-family: 'JetBrains Mono', monospace;
}

/* --- INPUTS & FORMS --- */
.label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 900;
  color: #71717a;
  /* zinc-500 */
  margin-bottom: 0.5rem;
}

.input {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  color: white;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  /* 12px */
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.input:focus {
  border-color: rgba(251, 191, 36, 0.5);
  /* amber focus */
  background: rgba(251, 191, 36, 0.05);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.1);
}

.input::placeholder {
  color: #52525b;
}

/* --- BUTTONS --- */
.btn-primary {
  background: #fff;
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  border: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.btn-primary:hover:not(:disabled) {
  transform: scale(1.02);
  background: var(--amber);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-btn {
  background: rgba(255, 255, 255, 0.03);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-btn-danger {
  background: rgba(239, 68, 68, 0.05);
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.nav-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}

/* --- SIDEBAR NAVIGATION --- */
.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}

.nav-item-active {
  background: rgba(251, 191, 36, 0.1) !important;
  color: var(--amber) !important;
  font-weight: 900;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

/* --- PILLS & BADGES --- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 10;
}

.pill-amber {
  background: rgba(251, 191, 36, 0.1);
  color: var(--amber);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.pill-zinc {
  background: rgba(255, 255, 255, 0.05);
  color: #a1a1aa;
  border: 1px solid var(--glass-border);
}

.pill-green {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.pill-red {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.pill-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* --- TABLES --- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  position: relative;
  z-index: 10;
}

.table th {
  padding: 1rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #71717a;
  font-weight: 900;
  border-bottom: 1px solid var(--glass-border);
}

.table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background 0.2s;
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* --- UTILITIES --- */
.animate-fade {
  animation: fade 0.3s ease-in-out;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--amber);
  color: #000;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-weight: 900;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
  z-index: 9999;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- ADMIN KPI WIDGETS --- */
.kpi {
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem;
  border-radius: 1.5rem;
  position: relative;
  z-index: 10;
}

.kpi-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #71717a;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  font-style: italic;
}

.status-blue {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  padding: 1.5rem;
  border-radius: 1.5rem;
  color: #60a5fa;
  position: relative;
  z-index: 10;
}

.status-green {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.1);
  padding: 1.5rem;
  border-radius: 1.5rem;
  color: #4ade80;
  position: relative;
  z-index: 10;
}

.status-orange {
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.1);
  padding: 1.5rem;
  border-radius: 1.5rem;
  color: var(--amber);
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   AKUT FIX FÖR MOBILMENY (IOS / SAFARI) - LÖSER KLICK, FÄRG & SCROLL
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. BRYT UPP "FÄNGELSET": Tar bort container-låset så menyn kan hamna överst */
  #bodyRoot>div.grid {
    z-index: auto !important;
    position: static !important;
  }

  /* 2. SKUGGAN: Säkerställer att den ligger BAKOM menyn (z-index 40) */
  #sidebarOverlay {
    z-index: 40 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3. MENYN: Ligger FRAMFÖR skuggan (z-index 50) med snygg mörkgrå färg */
  #sidebar {
    z-index: 50 !important;
    background-color: #18181b !important;
    /* Elegant mörkgrå (ej becksvart) */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    height: 100dvh !important;
    /* Fixar Safaris höjd-bugg */
    max-height: -webkit-fill-available !important;

    overflow-y: auto !important;
    /* Tillåter scroll */
    -webkit-overflow-scrolling: touch !important;
    /* Mjuk touch-scroll på iPhone */

    display: flex !important;
    flex-direction: column !important;
  }

  /* 4. LOGGA UT-KNAPPEN: Trycker upp knappen så den aldrig hamnar bakom Safari-listen */
  #sidebar>div:last-child {
    margin-top: auto !important;
    padding-bottom: 4rem !important;
  }
}

/* ==========================================================================
   SISTA UI-POLERINGEN FÖR MOBIL (BETA RELEASE)
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. TOP BAR: Räddar platsen så rubrikerna inte klipps av ("Över...") */
  #topElevatedBadge {
    display: none !important;
    /* Döljer DEV-badgen på mobil, "Avsluta Dev"-knappen räcker som indikation */
  }

  #btnBackToDev,
  #btnNewCompany,
  #btnExport {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    /* Förhindrar att knapptexten bryts fult */
  }

  header>div.flex {
    gap: 0.5rem !important;
    /* Minskar avståndet mellan hamburgermeny, rubrik och knappar */
  }

  /* 2. RUBRIKER & KNAPPAR: Fixar "Ny användare" och "Nytt fordon" som krockar med titeln */
  main section>div.flex.justify-between.items-center {
    flex-wrap: wrap !important;
    /* Låter knappen hoppa ner en rad om det blir för trångt */
    gap: 0.75rem !important;
  }

  #btnAddUser,
  #btnAddVehicle {
    padding: 0.6rem 1rem !important;
    font-size: 0.75rem !important;
    margin-left: auto !important;
    /* Knuffar knappen till höger */
  }

  /* 3. INPUTS & DATUM: Förhindrar att fält (som datum) går utanför skärmen */
  .input {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  input[type="date"] {
    -webkit-appearance: none !important;
    /* Tvingar iOS att rendera fältet innanför ramarna */
  }

  /* 4. LÅNGA KNAPPTEXTER: Fixar t.ex. "Spara faktureringsuppgifter" */
  main .btn-primary,
  main .btn-secondary {
    white-space: normal !important;
    /* Låter lång text byta rad inuti knappen istället för att svämma över */
    line-height: 1.3 !important;
    text-align: center !important;
    padding: 0.875rem 1rem !important;
    /* Lite snällare padding på sidorna */
  }

  /* ==========================================================================
   LAPTOP / SMÅ SKÄRMAR (AGRESSIV HÖJD-FIX)
   ========================================================================== */

  /* 1. Tvinga sidomenyn att aldrig bli högre än skärmen på desktop */
  @media (min-width: 769px) {
    #sidebar {
      max-height: 100vh !important;
      overflow-y: auto !important;
      scrollbar-width: none !important;
      /* Firefox */
      -ms-overflow-style: none !important;
      /* IE/Edge */
    }

    #sidebar::-webkit-scrollbar {
      display: none !important;
      /* Chrome/Safari */
    }
  }

  /* 2. När skärmen är kortare än 850px (Laptops) */
  @media (min-width: 769px) and (max-height: 850px) {

    /* Krymp knapparna */
    .nav-item {
      padding: 0.4rem 1rem !important;
      font-size: 0.8rem !important;

      /* DÖDAR eventuella Tailwind 'space-y' klasser i HTML:en */
      margin-top: 2px !important;
      margin-bottom: 2px !important;
    }

    /* DÖDAR eventuella Tailwind 'gap' klasser på diven som håller menyknapparna */
    #sidebar div,
    #sidebar nav {
      gap: 4px !important;
    }
  }

  /* 3. För extremt små skärmar (under 700px höjd) */
  @media (min-width: 769px) and (max-height: 700px) {
    .nav-item {
      padding: 0.25rem 1rem !important;
    }

    #sidebar div,
    #sidebar nav {
      gap: 0px !important;
      /* Noll luft mellan knapparna */
    }
  }
}

/* WCAG 2.1 - Tangentbordsnavigering (Focus Visible) */
:focus-visible {
  outline: 2px solid #fbbf24 !important;
  /* amber-500 */
  outline-offset: 4px !important;
  border-radius: 4px;
}

/* --- LANDNINGSSIDA & INDEX SPECIFIKT --- */
html {
  scroll-behavior: smooth;
}

/* Menyer & Animationer */
#mobileMenu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#mobileMenu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all .4s ease;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), transform .8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.animate-enter {
  animation: floatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

@keyframes floatUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Text & Kort för Index */
.logo-font {
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  font-style: italic;
}

.hero-text {
  font-size: clamp(3.3rem, 11vw, 8.5rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
}

.bento-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(251, 191, 36, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(251, 191, 36, 0.05);
}

.premium-border {
  position: relative;
}

.premium-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 180deg, rgba(251, 191, 36, 0.0), rgba(251, 191, 36, 0.5), rgba(59, 130, 246, 0.2), rgba(251, 191, 36, 0.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  transition: opacity .35s ease;
  pointer-events: none;
}

.premium-border:hover::before {
  opacity: 1;
}

.soft-divider {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  height: 1px;
}

.text-gradient-amber {
  background: linear-gradient(to right, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mobil-mockup på index */
.mockup-phone {
  border: 8px solid #27272a;
  border-radius: 40px;
  background: #000;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  transform: rotate(2deg) scale(0.95);
  transition: transform 0.5s ease;
}

.mockup-phone:hover {
  transform: rotate(0deg) scale(1);
}

.mockup-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 20px;
  background: #27272a;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
}

.m-glass-panel {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.m-status-orange {
  border-top: 2px solid #fbbf24;
  background: #18181b;
}

.m-status-blue {
  border-top: 2px solid #3b82f6;
  background: #18181b;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .aurora {
    animation: none;
  }

  .btn-premium::after {
    animation: none;
  }

  .reveal {
    transition: none;
  }
}

/* De rundade premium-knapparna */
.btn-premium {
  background: #fff !important;
  color: #000 !important;
  /* Tvingar fram svart text */
  border-radius: 100px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.3);
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: rotate(45deg);
  animation: buttonShine 4s infinite;
  pointer-events: none;
}

.btn-premium:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--amber) !important;
  /* Blir gul vid hover */
  color: #000 !important;
  /* Fortfarande svart text vid hover */
  box-shadow: 0 15px 40px -10px rgba(251, 191, 36, 0.5);
}

/* Amber-variant av premium-knappen */
.btn-amber {
    background: var(--amber) !important;
    color: #000 !important;
}

/* Transparenta rundade knappar (ghost) */
.btn-ghost {
  border-radius: 100px;
  transition: all .3s ease;
  color: #fff !important;
  /* Tvingar vit text här */
}

.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
}

/* --- DASHBOARD & DEV SPECIFIKT --- */

#crmActivationBar {
    width: var(--bar-width, 0%);
}

/* KPI-kort */
.kpi-mini {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 1rem;
}

.kpi-mini-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.kpi-mini-label:not([class*="text-"]) {
  color: #71717a;
}

/* Standardfärg om Tailwind saknas */

.kpi-mini-value {
  font-size: 1.1rem;
  font-weight: 900;
  font-style: italic;
}

.kpi-mini-value:not([class*="text-"]) {
  color: #fff;
}

/* Standardfärg om Tailwind saknas */

/* Scrollbars för chattar och textfält */
#chatMessagesList::-webkit-scrollbar,
#globalChatMessagesList::-webkit-scrollbar {
  width: 4px;
}

#chatMessagesList::-webkit-scrollbar-thumb,
#globalChatMessagesList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

textarea::-webkit-scrollbar,
textarea#ticketReplyBody::-webkit-scrollbar,
.tos-scroll::-webkit-scrollbar {
  width: 6px;
}

textarea::-webkit-scrollbar-thumb,
textarea#ticketReplyBody::-webkit-scrollbar-thumb,
.tos-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Input Select (Dropdowns) */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2em;
  padding-right: 2.5rem;
}

select.input option {
  background-color: #09090b;
  color: #ffffff;
  padding: 0.5rem;
}

/* Toggles (Av/På knappar i Dev) */
.toggle-checkbox {
  right: 0;
  z-index: 1;
  border-color: #3f3f46;
  transition: all 0.3s;
}

.toggle-label {
  width: 3rem;
  height: 1.5rem;
  background-color: #3f3f46;
  border-radius: 9999px;
  transition: all 0.3s;
}

.toggle-checkbox:checked {
  right: 0;
  border-color: #ef4444;
}

.toggle-checkbox:checked+.toggle-label {
  background-color: #ef4444;
}

/* Flikar (Tabs i Dev) */
.settings-tab {
  padding-bottom: 0.5rem;
  color: #71717a;
  transition: all 0.2s;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.settings-tab:hover {
  color: #a855f7;
}

.settings-tab-active {
  border-bottom: 2px solid #a855f7;
  color: #ffffff;
  font-weight: 900;
}

/* --- LADDNINGSSNURRA OCH KNAPP-ANIMATION (Från Login) --- */

.loader {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top: 2px solid #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes buttonShine {
  0% {
    left: -100%;
    opacity: 0;
  }

  20% {
    left: 100%;
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* 1. Fixa så att 'hidden' fungerar på dina egna Pills och Nav-items */
.pill.hidden,
.nav-item.hidden {
    display: none !important;
}

/* 2. Fix för Tailwind responsiva klasser (Döljer mobila Logga ut-knappen på desktop) */
@media (min-width: 768px) {
    .nav-item.md\:hidden {
        display: none !important;
    }
    .pill.md\:inline-flex,
    .nav-item.md\:flex {
        display: flex !important;
    }
}

/* 3. Framtvinga färgerna för KPI-korten (Om Tailwind rensat bort dem) */
.border-l-green-500 { border-left-color: var(--color-green-500) !important; }
.border-l-purple-500 { border-left-color: var(--color-purple-500) !important; }

/* --- FÄRGADE KNAPPAR FÖR DEV-PORTALEN --- */
.btn-dev-green {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}
.btn-dev-green:hover {
  background-color: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: #fff !important;
}

.btn-dev-red {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}
.btn-dev-red:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fff !important;
}

.btn-dev-purple {
  background-color: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #c084fc !important;
}
.btn-dev-purple:hover {
  background-color: rgba(168, 85, 247, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
  color: #fff !important;
}

/* Dölj utskrifts-sidfoten på vanliga skärmen */
.audit-print-footer {
    display: none;
}

/* ==========================================================================
   UTSKRIFTSLÄGE (PDF EXPORT & PRINT)
   ========================================================================== */
@media print {
    /* Tvingar bort webbläsarens standard-URL, sidnummer och datum */
    @page { 
        margin: 0; 
    } 
    
    /* Gömmer menyer, header, knappar och notiser */
    #sidebar, 
    header, 
    .nav-btn, 
    [data-action="printLog"],
    .toast { 
        display: none !important; 
    }

    /* Gör hela grunden vit */
    body, #bodyRoot, main { 
        background: white !important; 
    }

    /* MAGIN: Tvinga ALL text till svart och alla bakgrunder till genomskinliga */
    #viewAuditDetail * {
        color: #000000 !important;
        background: transparent !important;
        border-color: #e4e4e7 !important; /* Svagt gråa kantlinjer för struktur */
        box-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Tvinga JSON-rutan att radbryta ordentligt och få en grå ram istället för mörk bakgrund */
    #auditDetailJson {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        border: 1px solid #e4e4e7 !important;
        padding: 1.5rem !important;
    }

}