/* tab-styles-hybrid.css — Full-width compact tabs (no top gap, no horizontal scroll, unified background)
   - Full bredd över sidan, sticky
   - Ingen luft mellan header och menyrad (kompakt)
   - Ingen horisontell scroll: flikarna radbryts (wrap) vid behov
   - Samma bakgrundsfärg över hela området
   - Aktiv flik: animerad underline
   - Admin/Rapporter/Företagsstatistik/Audit: röd accent
   - Tunna SVG-ikoner via CSS mask (monokroma)
*/

/* ===== Design tokens ===== */
:root {
  --tb-font: 14px;
  --tb-pad-x: 12px;   /* mindre horisontell padding */
  --tb-pad-y: 6px;    /* lägre höjd */
  --tb-gap: 8px;      /* mellanrum mellan flikar (kolumn + rad) */
  --tb-radius: 9px;

  --tb-fg: #24313b;
  --tb-fg-muted: #6f7c88;

  --tb-blue-1: #5DADE2;
  --tb-blue-2: #3498DB;
  --tb-blue-rgb: 52,152,219;

  --tb-admin: #e64f3f;
  --tb-admin-2: #c74033;
  --tb-admin-soft: #ffe7e5;

  --tb-bg: #ffffff;         /* enhetlig bakgrund över hela ytan */
  --tb-border: #e2e8ef;     /* bottenlinje */
  --tb-hover: #f3f6f9;      /* diskret hover */

  --tb-underline-h: 3px;

  --tb-shadow-subtle: 0 2px 8px rgba(0,0,0,.04);
}

/* Håll ljus även vid dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --tb-bg: #ffffff;
    --tb-border: #d8e0e7;
    --tb-hover: #f3f6f9;
  }
}

/* ===== Ta bort “mellanrum mellan menyn och blått ovan” ===== */
.header + .tabs { margin-top: 0 !important; }
.tabs { margin-top: 0 !important; }

/* ===== Full-bredd, sticky, enhetlig bakgrund ===== */
.tabs {
  position: sticky;
  top: 0;
  z-index: 700;
  width: 100%;
  background: var(--tb-bg);
  box-shadow: var(--tb-shadow-subtle);
  border-bottom: 1px solid var(--tb-border);
  padding: 0; /* inga extra vertikala gaps runt rälsen */
}

/* Själva raden – full bredd, wrap istället för scroll */
.tabs .tab-buttons {
  display: flex;
  flex-wrap: wrap;           /* radbryt istället för horisontell scroll */
  align-items: flex-end;     /* flikarnas underkant linjerar fint */
  gap: var(--tb-gap);        /* både kolumn- och rad-gap */
  padding: 6px 12px 0 12px;  /* kompakt topp, baslinje syns under */
  background: var(--tb-bg);  /* samma bakgrund som .tabs */
  border-bottom: 1px solid var(--tb-border);
  overflow: visible;         /* ingen scrollbar */
  -webkit-overflow-scrolling: auto;
  scrollbar-width: none;
  mask-image: none;          /* ingen fade – full, ren yta */
}

/* ===== Flik-knappar (kompakta, tabbliknande) ===== */
.tabs .tab-button {
  all: unset;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--tb-pad-y) var(--tb-pad-x);
  border-radius: var(--tb-radius) var(--tb-radius) 0 0; /* rundad topp, rak botten */
  color: var(--tb-fg-muted);
  font-weight: 600;
  font-size: var(--tb-font);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .18s ease, transform .06s ease;
  /* Kompaktare när det är trångt: tillåt viss krympning */
  flex: 0 1 auto;
  min-width: 0;
}

.tabs .tab-button:hover {
  background: var(--tb-hover);
  color: var(--tb-fg);
}
.tabs .tab-button:active { transform: translateY(1px); }

/* Fokus (tangentbord) */
.tabs .tab-button:focus-visible {
  outline: 3px solid rgba(var(--tb-blue-rgb), .35);
  outline-offset: 2px;
  border-radius: calc(var(--tb-radius) + 2px) calc(var(--tb-radius) + 2px) 2px 2px;
}

/* Aktiv: enhetlig bakgrund, animerad underline direkt under fliken (fungerar även vid wrap) */
.tabs .tab-button.active {
  color: #0e5e8a;
  background: var(--tb-bg);
}
.tabs .tab-button.active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -7px; /* placerad precis över radens bottenlinje oavsett rad (wrap-säkert) */
  height: var(--tb-underline-h);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tb-blue-1), var(--tb-blue-2));
  transform-origin: center;
  animation: tb-underline .25s ease-out;
}
@keyframes tb-underline {
  from { transform: scaleX(.2); opacity: .45; }
  to   { transform: scaleX(1);  opacity: 1; }
}

/* ===== Admin/Rapporter/Företagsstatistik/Audit – röd accent ===== */
/* HÄR VAR DET MISSAT TIDIGARE: #tab-audit tillagt */
.tabs .tab-button.admin-tab,
#tab-admin,
#tab-overview,
#tab-company-stats,
#tab-audit {
  color: var(--tb-admin);
}

.tabs .tab-button.admin-tab:hover,
#tab-admin:hover,
#tab-overview:hover,
#tab-company-stats:hover,
#tab-audit:hover {
  background: var(--tb-admin-soft);
  color: var(--tb-admin-2);
}

.tabs .tab-button.admin-tab.active,
#tab-admin.active,
#tab-overview.active,
#tab-company-stats.active,
#tab-audit.active {
  color: var(--tb-admin-2);
}

.tabs .tab-button.admin-tab.active::after,
#tab-admin.active::after,
#tab-overview.active::after,
#tab-company-stats.active::after,
#tab-audit.active::after {
  background: linear-gradient(90deg, #ff9c91, var(--tb-admin));
}

/* ===== Tunna SVG-ikoner via mask (monokroma, följer textfärgen) ===== */
.tabs .tab-button::before { content: ""; }

.tabs .tab-button::before {
  display: inline-block;
  width: 15px;              /* lite mindre ikon för kompakt känsla */
  height: 15px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: .82;
  transition: opacity .18s ease;
}
.tabs .tab-button:hover::before { opacity: 1; }

/* Ikonmapping enligt ordningen i din index.html */
.tabs .tab-buttons .tab-button:nth-child(1)::before { /* Portal (Home) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M9 21V12h6v9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M9 21V12h6v9'/></svg>");
}
.tabs .tab-buttons .tab-button:nth-child(2)::before { /* Månadsrapport (Calendar) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
.tabs .tab-buttons .tab-button:nth-child(3)::before { /* Statistik (Bars) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='20' x2='18' y2='10'/><line x1='12' y1='20' x2='12' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='20' x2='18' y2='10'/><line x1='12' y1='20' x2='12' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/></svg>");
}
.tabs .tab-buttons .tab-button:nth-child(4)::before { /* Ledighet (Sun) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></svg>");
}
.tabs .tab-buttons .tab-button:nth-child(5)::before { /* Schema (Clock) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12,7 12,12 16,14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12,7 12,12 16,14'/></svg>");
}

/* Admin Ikoner */
#tab-admin::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 000-6l-1.5-.25a1.65 1.65 0 01-1.2-1l-.5-1.4a1.65 1.65 0 00-3.2 0l-.5 1.4a1.65 1.65 0 01-1.2 1L4.6 9a1.65 1.65 0 000 6l1.5.25a1.65 1.65 0 011.2 1l.5 1.4a1.65 1.65 0 003.2 0l.5-1.4a1.65 1.65 0 011.2-1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 000-6l-1.5-.25a1.65 1.65 0 01-1.2-1l-.5-1.4a1.65 1.65 0 00-3.2 0l-.5 1.4a1.65 1.65 0 01-1.2 1L4.6 9a1.65 1.65 0 000 6l1.5.25a1.65 1.65 0 011.2 1l.5 1.4a1.65 1.65 0 003.2 0l.5-1.4a1.65 1.65 0 011.2-1z'/></svg>");
}
#tab-overview::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><polyline points='14,2 14,8 20,8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><polyline points='14,2 14,8 20,8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/></svg>");
}
#tab-company-stats::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='7' height='13'/><rect x='14' y='3' width='7' height='17'/><line x1='3' y1='20' x2='21' y2='20'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='7' height='13'/><rect x='14' y='3' width='7' height='17'/><line x1='3' y1='20' x2='21' y2='20'/></svg>");
}

/* HÄR ÄR NYA IKONEN FÖR HÄNDELSER (Clipboard List) */
#tab-audit::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M9 14h.01'/><path d='M9 10h.01'/><path d='M9 18h.01'/><path d='M13 14h4'/><path d='M13 10h4'/><path d='M13 18h4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M9 14h.01'/><path d='M9 10h.01'/><path d='M9 18h.01'/><path d='M13 14h4'/><path d='M13 10h4'/><path d='M13 18h4'/></svg>");
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .tabs .tab-button,
  .tabs .tab-button::before,
  .tabs .tab-button.active::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Mobiljusteringar ===== */
@media (max-width: 760px){
  :root { --tb-font: 13px; --tb-pad-y: 5px; --tb-pad-x: 10px; }
  .tabs .tab-buttons { padding-left: 10px; padding-right: 10px; }
}