@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    /* Reservera plats för scrollbaren även när sidan är kort nog att inte behöva en.
       Tar bort sidleds-"hoppet" när man växlar mellan korta och långa tabs (t.ex.
       i chefsportalen mellan inställningar och översikt). */
    scrollbar-gutter: stable;
  }
  body {
    @apply bg-gray-50 text-text-primary antialiased;
    font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* ── A11y: synlig fokusring på alla fokuserbara element ── */
  *:focus { outline: none; }
  *:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
    border-radius: inherit;
  }
  /* Inputs har redan egen ring via .input-field — behåll den utan dubbelring */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: none;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-xl shadow-sm border border-border-light p-4 md:p-6;
  }
  .btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white font-semibold py-2.5 px-5 rounded-xl
           border-2 border-transparent
           transition-all duration-200 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
    /* Stackad skugga: inner top-highlight (varm depth) + indigo-tonad outer glöd
       — matchar login-CTA:n så primärknappen i hela appen får samma "varma" känsla. */
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      0 4px 12px -2px rgba(79, 70, 229, 0.28),
      0 2px 6px -1px rgba(0, 0, 0, 0.08);
  }
  .btn-primary:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      0 8px 22px -4px rgba(79, 70, 229, 0.48),
      0 3px 8px -2px rgba(0, 0, 0, 0.10);
  }
  .btn-primary:disabled {
    box-shadow: none;
  }

  /* Portal-knappars stackade skugga — återanvändbar i login + onboarding (där portalen
     varierar). Bas-klass + en variant-klass per portal sätter accentfärgen via
     CSS-variabler. Samma "tactile" känsla som .btn-primary fast färg-flexibel. */
  .btn-portal-shadow {
    /* 2px transparent border matchar .btn-primary — flyttar inset-highlighten 2px nedåt
       så den visuellt blir en "carved ridge" istället för att ligga klistrad i toppkanten. */
    border: 2px solid transparent;
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      0 4px 12px -2px var(--btn-glow, rgba(0, 0, 0, 0.10)),
      0 2px 6px -1px rgba(0, 0, 0, 0.08);
    transition-property: box-shadow, background-color, transform, opacity;
  }
  .btn-portal-shadow:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      0 8px 22px -4px var(--btn-glow-hover, rgba(0, 0, 0, 0.18)),
      0 3px 8px -2px rgba(0, 0, 0, 0.10);
  }
  .btn-portal-shadow:disabled {
    box-shadow: none;
  }
  /* Portal-glöd-värden synkade EXAKT med .btn-primary (rgba 0.28 / 0.48 hover).
     handlaggare: indigo-600 (samma som primary), chef: emerald-600, admin: amber-700. */
  .btn-portal-handlaggare { --btn-glow: rgba(79, 70, 229, 0.28);  --btn-glow-hover: rgba(79, 70, 229, 0.48);  }
  .btn-portal-chef        { --btn-glow: rgba(5, 150, 105, 0.28);  --btn-glow-hover: rgba(5, 150, 105, 0.48);  }
  .btn-portal-admin       { --btn-glow: rgba(180, 83, 9, 0.28);   --btn-glow-hover: rgba(180, 83, 9, 0.48);   }
  .btn-danger {
    @apply bg-danger hover:bg-red-600 text-white font-semibold py-2.5 px-5 rounded-xl
           transition-all duration-200 active:scale-95;
  }
  .btn-outline {
    @apply border-2 border-border-light hover:border-primary text-text-primary font-semibold
           py-2.5 px-5 rounded-xl transition-all duration-200 active:scale-95 bg-white;
  }
  .btn-danger-outline {
    @apply border-2 border-red-200 hover:border-danger text-danger hover:bg-red-50
           font-semibold py-2.5 px-5 rounded-xl bg-white
           transition-all duration-200 active:scale-95;
  }
  .input-field {
    @apply w-full px-4 py-3 rounded-xl border border-border-light bg-white
           focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary
           transition-all duration-200 text-text-primary placeholder:text-text-secondary/50;
  }
  .input-field-sm {
    @apply px-3 py-2 rounded-lg border border-border-light bg-white text-sm
           focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary
           transition-all duration-200 text-text-primary placeholder:text-text-secondary/50;
  }
  .toggle-pill {
    @apply text-xs font-medium px-3 py-1.5 rounded-full border border-border-light
           bg-white text-text-secondary hover:border-gray-300 transition-colors;
  }
  .toggle-pill-active {
    @apply text-xs font-medium px-3 py-1.5 rounded-full border border-primary
           bg-primary text-white transition-colors;
  }
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  .nav-item {
    @apply flex flex-col items-center gap-1 py-2 px-3 rounded-xl transition-all duration-200
           text-text-secondary hover:text-primary hover:bg-primary/5 cursor-pointer;
  }
  .nav-item-active {
    @apply text-primary bg-primary/10;
  }
  .status-dot {
    @apply w-3 h-3 rounded-full ring-2 ring-white;
  }

  /* ── Signaturkort: vit yta + tunn ring + 4 px färgad vänsterkant ──
     Används genomgående i handläggarportalen för status-/notisytor.
     Färgen sätts per användning via inline `style={{ '--accent': '...' }}`
     eller via en variant-klass nedan. Default: indigo. */
  .status-card {
    @apply bg-white border border-border-light rounded-xl;
    border-left: 4px solid var(--accent, #6366f1);
  }
  /* Snabbvarianter — sätter --accent från Tailwinds färgskala. */
  .accent-emerald { --accent: #10b981; }
  .accent-indigo  { --accent: #6366f1; }
  .accent-amber   { --accent: #f59e0b; }
  .accent-red     { --accent: #ef4444; }
  .accent-sky     { --accent: #38bdf8; }
  .accent-violet  { --accent: #8b5cf6; }
  .accent-gray    { --accent: #d1d5db; }

  /* ── Sektionslabel: enhetlig behandling överallt en rubrik introducerar
     en grupp innehåll. Matchar det dominerande mönstret som redan användes
     på ~15 ställen (text-xs uppercase tracking-widest text-secondary).
     Blandningen var tidigare: text-sm secondary, text-sm font-semibold,
     text-xs tracking-wider, text-xs tracking-widest m.fl. */
  .section-label {
    @apply text-xs font-semibold uppercase tracking-widest text-text-secondary;
  }
}

@layer utilities {
  .safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  /* A11y: visuellt dolt men tillgängligt för skärmläsare */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

@keyframes pulseAlarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}
.animate-pulse-alarm {
  animation: pulseAlarm 1.5s ease-in-out infinite;
}

@keyframes float1 {
  0%   { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
  25%  { transform: translate(12px, -20px) rotate(var(--sq-rotate, 0deg)); }
  50%  { transform: translate(6px, -35px) rotate(var(--sq-rotate, 0deg)); }
  75%  { transform: translate(-8px, -18px) rotate(var(--sq-rotate, 0deg)); }
  100% { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
}
@keyframes float2 {
  0%   { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
  30%  { transform: translate(-18px, -12px) rotate(var(--sq-rotate, 0deg)); }
  60%  { transform: translate(-10px, -28px) rotate(var(--sq-rotate, 0deg)); }
  80%  { transform: translate(14px, -20px) rotate(var(--sq-rotate, 0deg)); }
  100% { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
}
@keyframes float3 {
  0%   { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
  20%  { transform: translate(20px, -8px) rotate(var(--sq-rotate, 0deg)); }
  50%  { transform: translate(16px, -30px) rotate(var(--sq-rotate, 0deg)); }
  70%  { transform: translate(-6px, -22px) rotate(var(--sq-rotate, 0deg)); }
  100% { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
}
@keyframes float4 {
  0%   { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
  35%  { transform: translate(-14px, -25px) rotate(var(--sq-rotate, 0deg)); }
  55%  { transform: translate(10px, -40px) rotate(var(--sq-rotate, 0deg)); }
  80%  { transform: translate(18px, -15px) rotate(var(--sq-rotate, 0deg)); }
  100% { transform: translate(0px, 0px) rotate(var(--sq-rotate, 0deg)); }
}
.animate-float { animation: float1 14s ease-in-out infinite; }
.animate-float2 { animation: float2 18s ease-in-out infinite; }
.animate-float3 { animation: float3 22s ease-in-out infinite; }
.animate-float4 { animation: float4 16s ease-in-out infinite; }

/* ── Logo mount animations — front-facing (ingen 3D-rotation) ── */
@keyframes logoIconIn {
  0%   { opacity: 0; transform: scale(0.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logoIconFloat {
  0%, 100% { transform: translateY(0px); }
  33%       { transform: translateY(-3px); }
  66%       { transform: translateY(-5px); }
}
.animate-logo-icon {
  animation:
    logoIconIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1.05) both,
    logoIconFloat 3.5s ease-in-out 700ms 3 forwards;
}

@keyframes logoWordmarkIn {
  0%   { opacity: 0; letter-spacing: 0.35em; transform: translateY(4px); }
  100% { opacity: 1; letter-spacing: -0.03em; transform: translateY(0); }
}
.animate-logo-wordmark {
  animation: logoWordmarkIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}

/* ── Grain overlay for login ── */
.grain-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 7;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }