/* arbetsintro.css — den gemensamma stilen för alla appar (23/10 2026).
   Ledord: enkelt, rent, tydligt. Petrol är enda profilfärgen; övrig färg betyder status.
   Appar hämtar filen från portalen: <link rel="stylesheet" href="https://portal.arbetsintro.se/static/arbetsintro.css">
   Bara variabler och ai-klasser här, så att ingen app går sönder av att filen laddas. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap");

:root {
  --ai-font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ai-petrol: #0F6E56;        /* profilfärg: knappar, valt, länkar */
  --ai-petrol-hover: #0B5A46;
  --ai-petrol-ljus: #E1F5EE;   /* valt läge, tint */
  --ai-petrol-mork: #085041;   /* text på tint */

  --ai-ok: #1D9E75;            /* klart */
  --ai-gul: #BA7517;           /* påbörjat, snart */
  --ai-gul-ljus: #FAEEDA;
  --ai-rod: #E24B4A;           /* kräver handling */
  --ai-rod-ljus: #FCEBEB;
  --ai-rod-mork: #A32D2D;

  --ai-text: #111111;
  --ai-svag: #6B7280;          /* stödtext */
  --ai-blek: #9CA3AF;          /* metadata, "Sparat" */
  --ai-linje: #EEF0EF;         /* hårlinjer */
  --ai-ram: #E5E7EB;           /* ramar på knappar/fält */
  --ai-platta: #F3F4F6;        /* ikonplatta */
  --ai-bg: #FFFFFF;
  --ai-sida: #FAFAFA;          /* skena, sidopaneler */

  --ai-radie: 8px;
  --ai-radie-kort: 12px;
}

.ai, .ai body { font-family: var(--ai-font); color: var(--ai-text); }

/* Topprad: projekt till vänster, sparstatus + en huvudknapp till höger */
.ai-bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--ai-linje); background: var(--ai-bg); font-family: var(--ai-font); }
.ai-bar .ai-spar { margin-left: auto; color: var(--ai-blek); font-size: 12px; }

.ai-rubrik { font-family: var(--ai-font); font-size: 26px; font-weight: 600; letter-spacing: -0.4px; margin: 0; }

/* Knappar: en fylld per vy, resten med ram */
.ai-knapp { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--ai-font); padding: 7px 16px; border-radius: 999px; border: 1px solid var(--ai-ram); background: var(--ai-bg); color: var(--ai-text); cursor: pointer; text-decoration: none; }
.ai-knapp:hover { border-color: var(--ai-blek); text-decoration: none; }
.ai-knapp.fylld { background: var(--ai-petrol); border-color: var(--ai-petrol); color: #fff; }
.ai-knapp.fylld:hover { background: var(--ai-petrol-hover); }
.ai-knapp.liten { padding: 4px 12px; font-size: 12px; }

/* Rader med hårlinje och statusprick */
.ai-rad { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--ai-linje); }
.ai-prick { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #D1D5DB; }
.ai-prick.ok { background: var(--ai-ok); }
.ai-prick.gul { background: var(--ai-gul); }
.ai-prick.rod { background: var(--ai-rod); }

/* Ikon på grå platta (dagens emoji, jämn storlek) */
.ai-ikon { width: 32px; height: 32px; border-radius: var(--ai-radie); background: var(--ai-platta); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; flex: none; }

/* Siffra i röd bubbla */
.ai-antal { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--ai-rod); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }