/* ==========================================================================
   Komponenter — stilar som inte hör hemma i någon enskild vy.

   Ladda ALLTID denna efter styling.css (se index.html) så att den kan
   överstyra basstilarna där det behövs.
   ========================================================================== */

/* ── Säljargument-kedjan i resultatvyn ─────────────────────────────────────
   (låg tidigare som ett <style>-block mitt i index.html) */
.arg-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.arg-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.arg-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 640px) {
  .sales-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DRAGSTER-KNAPPEN

   Knappen från designsystemet: en cirkel med en punkt som vid hover byts
   mot en pil, samtidigt som etiketten glider åt höger.

   Markup skrivs enkelt i HTML:
       <button class="btn btn--dark">Kör workshop</button>

   js/core/buttons.js bygger sedan cirkeln, punkten och pilen automatiskt —
   du behöver alltså aldrig skriva ikonerna för hand.
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 12px 24px 12px 8px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.btn__label {
  line-height: 1;
  transition: transform 0.3s ease-out;
}

/* Ingen synlig ram vid klick. Webbläsaren ritar annars en fokusring runt
   knappen som ligger kvar tills man klickar någon annanstans.
   :focus-visible behålls — den syns bara vid tangentbordsnavigering, och
   utan den blir knapparna oanvändbara för den som inte använder mus. */
.btn:focus { outline: none; }
.btn:focus-visible {
  outline: 2px solid var(--dragster-blue);
  outline-offset: 3px;
}

/* ── Cirkeln som håller punkt och pil ─────────────────────────────────────── */
.btn--dark,
.btn--light { gap: 0; position: relative; }

.btn__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s ease-out;
}

/* ── Punkten (syns som standard) ──────────────────────────────────────────── */
.btn__dot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-out;
}

/* Stjärnvarianten — när etiketten börjar med ✦ ("✦ Hämta insikter") tar
   tecknet punktens plats i cirkeln. Delad klass ⇒ samma färg & hover. */
.btn__dot-icon--star { font-size: 15px; line-height: 1; }

/* ── Pilen (dold som standard) ────────────────────────────────────────────── */
.btn__arrow-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ── Mörk variant ─────────────────────────────────────────────────────────── */
.btn--dark { background-color: var(--btn-dark); color: #fff; }
.btn--dark .btn__dot-icon   { color: #fff; }
.btn--dark .btn__arrow-icon { color: #fff; }
.btn--dark:hover { background-color: var(--dragster-blue); }
.btn--dark:hover .btn__circle { background: #fff; }

/* ── Ljus variant ─────────────────────────────────────────────────────────── */
.btn--light { background-color: #fff; color: #000; }
.btn--light .btn__dot-icon   { color: #000; }
.btn--light .btn__arrow-icon { color: #000; }
.btn--light:hover { background-color: var(--dragster-blue); color: #fff; }
.btn--light:hover .btn__circle     { background: #fff; }
.btn--light:hover .btn__dot-icon   { color: #fff; }
.btn--light:hover .btn__arrow-icon { color: #fff; }

/* ── Gemensamt hover-beteende ─────────────────────────────────────────────── */
.btn--dark:hover  .btn__dot-icon,
.btn--light:hover .btn__dot-icon  { opacity: 0; }

.btn--dark:hover  .btn__arrow-icon,
.btn--light:hover .btn__arrow-icon { opacity: 1; transform: scale(1); }

.btn--dark:hover  .btn__label,
.btn--light:hover .btn__label { transform: translateX(8px); }

/* Röd variant — destruktiva åtgärder (ta bort kund). Samma mekanik,
   varningsröd grundfärg. OBS: var(--red) är BLÅ i appen, därav literaler. */
.btn--danger { background-color: #FF3B30; color: #fff; }
.btn--danger .btn__dot-icon,
.btn--danger .btn__arrow-icon { color: #fff; }
.btn--danger:hover { background-color: #D70015; }
.btn--danger:hover .btn__circle { background: #fff; }
.btn--danger:hover .btn__dot-icon { opacity: 0; }
.btn--danger:hover .btn__arrow-icon { opacity: 1; transform: scale(1); }
.btn--danger:hover .btn__label { transform: translateX(8px); }
.btn--danger:disabled { opacity: 0.6; cursor: default; }

/* Blå variant — samma mekanik, Dragster-blå som grundfärg */
.btn--blue { background-color: var(--dragster-blue); color: #fff; }
.btn--blue .btn__dot-icon,
.btn--blue .btn__arrow-icon { color: #fff; }
.btn--blue:hover { background-color: var(--btn-dark); }
.btn--blue:hover .btn__circle { background: #fff; }
.btn--blue:hover .btn__dot-icon { opacity: 0; }
.btn--blue:hover .btn__arrow-icon { opacity: 1; transform: scale(1); }
.btn--blue:hover .btn__label { transform: translateX(8px); }

/* Pilen är alltid svart. Den visas bara mot den vita cirkeln vid hover,
   så den behöver aldrig byta färg med varianten. Regeln står sist för att
   vinna över varianternas egna färgsättningar. */
.btn .btn__arrow-icon { color: var(--btn-dark) !important; }

/* ── Bakåtknappar: hela knappen speglad ────────────────────────────────────
   Framåtknappen är [•→] Text och glider åt höger vid hover. Bakåtknappen är
   dess spegelbild — Text [←•] — och glider åt vänster. Rörelseriktningen
   säger "bakåt" innan man hunnit läsa texten.

   Tre speglingar samverkar:
     1. row-reverse lägger cirkeln till höger (och paddingen byter sida)
     2. etiketten glider åt vänster vid hover
     3. pilens path speglas — i sin egen ruta (fill-box), eftersom själva
        SVG-elementet redan bär hover-animationen skala 0.8 → 1 och de två
        transformerna inte får krocka */
.btn--back {
  flex-direction: row-reverse;
  padding: 12px 8px 12px 24px;
}

.btn--back:hover .btn__label { transform: translateX(-8px); }

.btn--back .btn__arrow-icon path {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn__label,
  .btn__circle,
  .btn__dot-icon,
  .btn__arrow-icon { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHIMMER — långsam ljusreflex över stora rubriker

   Effekten är en gradient som är dubbelt så bred som texten och glider
   sidledes. `background-clip: text` gör att den bara syns inuti bokstäverna.

   Anpassad till Dragster-paletten: i stället för vitt-mot-grått på svart
   sveper Dragster-blått genom den mörka rubriktexten. Diskret — meningen
   är att det ska kännas levande, inte blinka.

   Används med klassen .shimmer. Håll den till stora rubriker; på liten text
   blir effekten grötig och läsbarheten lider.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Svepets bredd MÅSTE registreras som en typad egenskap.
 *
 * En vanlig CSS-variabel är för webbläsaren bara en textsträng. Används den
 * i en @keyframes kan webbläsaren inte räkna ut mellanlägena, så animationen
 * rapporterar "running" men värdet står stilla — vilket är precis varför
 * andra raden i rubriken inte glimmade.
 *
 * @property talar om att det är en längd, och då går den att interpolera.
 */
@property --shimmer-width {
  syntax: '<length>';
  inherits: false;
  initial-value: 900px;
}

/*
 * Svepets bredd i pixlar — INTE procent.
 *
 * Med procent blir gradienten lika bred som sitt eget element, vilket gör
 * att ett kort ord sveps igenom snabbare än en lång rad. Rubriken och dess
 * accentord skulle då glimma i otakt. Med ett fast mått i pixlar rör sig
 * ljuset lika fort överallt, och hela rubriken läses som ETT svep.
 */
.shimmer,
.shimmer--light,
.shimmer--accent {
  --shimmer-width: 900px;
  background-size: var(--shimmer-width) 100%;
  background-repeat: repeat-x;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 4.5s linear infinite;
}

/* Mörk text på ljus bakgrund — blå glans sveper igenom */
.shimmer {
  background-image: linear-gradient(
    90deg,
    var(--text-title) 0%,
    var(--text-title) 38%,
    #6E79FF 47%,
    #9AA3FF 50%,
    #6E79FF 53%,
    var(--text-title) 62%,
    var(--text-title) 100%
  );
}

/* Blått accentord — samma glans, ljusare topp */
.shimmer--accent {
  background-image: linear-gradient(
    90deg,
    var(--dragster-blue) 0%,
    var(--dragster-blue) 38%,
    #8E97FF 47%,
    #C7CCFF 50%,
    #8E97FF 53%,
    var(--dragster-blue) 62%,
    var(--dragster-blue) 100%
  );
}

/*
 * Accentordets glans måste vinna över rubrikernas egna span-färger.
 * `.hero-h1 span` och `.login-tagline span` (styling.css) har högre
 * specificitet än `.shimmer--accent` och målade ordet i solid blå —
 * animationen rullade, men bakom täckande färg. Därför glimmade
 * "framgångskommunikation." aldrig, bara texten runtomkring.
 */
.hero-h1 span.shimmer--accent,
.login-tagline span.shimmer--accent { color: transparent; }

/* Ljus text på mörk bakgrund */
.shimmer--light {
  background-image: linear-gradient(
    90deg,
    var(--text-light) 0%,
    var(--text-light) 38%,
    #A8B0FF 47%,
    #FFFFFF 50%,
    #A8B0FF 53%,
    var(--text-light) 62%,
    var(--text-light) 100%
  );
}

/* 900px matchar --shimmer-width ovan. Literalen står här som säkerhet: även
   om @property inte stöds interpolerar den här varianten korrekt. Ändras
   svepets bredd måste båda ändras. */
@keyframes shimmer {
  0%   { background-position: 900px 0; }
  100% { background-position: 0 0; }
}

/* Respektera systeminställningen "minska rörelse" — vissa blir illamående
   av animationer. Texten behåller sin färg, bara rörelsen stannar. */
@media (prefers-reduced-motion: reduce) {
  .shimmer,
  .shimmer--light,
  .shimmer--accent {
    animation: none;
    background-position: 50% 0;
  }
}

/* ── Sparfel mot databasen ─────────────────────────────────────────────────
   Visas bara när en skrivning till Supabase misslyckas (se cloud-sync.js). */
.ssm-save-error {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1D1D1F;
  color: #fff;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 980px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
}

.ssm-save-error.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Dragster-loggan ───────────────────────────────────────────────────────
   Filen ligger i assets/img/dragster-logo.svg. Höjden styr storleken;
   bredden följer med automatiskt (originalproportion 155×26). */
.dragster-logo {
  height: 21px;
  width: auto;
  display: block;
  flex-shrink: 0; /* så den aldrig klipps i flex-rader */
}
/* Mobilstorleken bor här och inte i styling.css: components.css laddas
   sist, så en regel med samma specificitet där hade vunnit ändå. */
@media (max-width: 767px) {
  .dragster-logo { height: 16px; width: auto; }
}

/* ── Inloggning: fält för e-post + lösenord ────────────────────────────────
   Kompletterar .login-* i styling.css med etiketter, laddläge och hjälptext. */
.login-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--light-gray);
  margin-bottom: 8px;
}

.login-label + .login-input { margin-bottom: 20px; }

.login-btn[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.login-hint {
  font-size: 12px;
  color: var(--gray);
  margin-top: 18px;
  text-align: center;
}