/*
 * MACC Arbetsdag – Scandinavian Industrial Premium (redesign v1)
 *
 * Laddas efter app.css. Filen 1) definierar det centrala tokensystemet,
 * 2) mappar designsystem v2:s --macc-* och de äldre kortnamnen (--accent m.fl.)
 * till de nya tokens, och 3) innehåller de komponentstilar som ändrats:
 * appskal (sidomeny, toppfält), sidhuvud (page-hero), flikar, knappar,
 * statusetiketter, sammanfattningskort och kontrollkort.
 * Komponenter i app.css som bara läser tokens får nya färger automatiskt.
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand */
  --color-brand-950: #062B35;
  --color-brand-900: #073842;
  --color-brand-850: #08434D;
  --color-brand-800: #0A4C58;
  --color-brand-700: #0D5A68;
  --color-brand-600: #137486;
  --color-brand-500: #238B9A;
  --color-brand-400: #53A6B1;
  --color-brand-300: #91C4CB;
  --color-brand-200: #CAE3E7;
  --color-brand-100: #E4F1F3;
  --color-brand-50: #F0F8F9;

  /* Neutral */
  --color-neutral-950: #111C22;
  --color-neutral-900: #18272E;
  --color-neutral-800: #293D47;
  --color-neutral-700: #425A65;
  --color-neutral-600: #60757F;
  --color-neutral-500: #81929A;
  --color-neutral-400: #AABBC2;
  --color-neutral-300: #CBD9DE;
  --color-neutral-200: #DFE9EC;
  --color-neutral-100: #EDF3F5;
  --color-neutral-50: #F6F9FA;

  /* Semantic */
  --color-success: #246F50;
  --color-success-bg: #EAF5EF;
  --color-success-border: #BDE0CD;
  --color-warning: #935000;
  --color-warning-accent: #F3A11C;
  --color-warning-bg: #FFF8EF;
  --color-warning-border: #F2D9B9;
  --color-danger: #A63737;
  --color-danger-bg: #FDEDED;
  --color-danger-border: #F2C4C4;
  --color-info: #0C5866;
  --color-info-bg: #E7F3F5;
  --color-info-border: #C7E0E5;
  --color-neutral-status: #52666F;
  --color-neutral-status-bg: #EEF3F5;
  --color-neutral-status-border: #D8E2E6;

  /* Surfaces */
  --app-background: var(--color-neutral-50);
  --surface-app: var(--app-background);
  --surface-primary: #FFFFFF;
  --surface-secondary: var(--color-brand-50);
  --surface-card: var(--surface-primary);
  --surface-header: #FFFFFF;
  --surface-sidebar: var(--color-brand-900);
  --surface-hover: var(--color-brand-100);
  --surface-selected: #126A78;

  /* Text */
  --text-primary: var(--color-neutral-950);
  --text-secondary: var(--color-neutral-700);
  --text-muted: var(--color-neutral-600);
  --text-inverse: #FFFFFF;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #D4E6E9;
  --text-link: var(--color-brand-800);
  --text-brand: var(--color-brand-800);

  /* Borders */
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);
  --border-focus: var(--color-brand-600);
  --border-interactive: var(--color-brand-200);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(5, 45, 55, 0.04);
  --shadow-sm: 0 3px 10px rgba(5, 45, 55, 0.05);
  --shadow-md: 0 8px 24px rgba(5, 45, 55, 0.08);
  --shadow-lg: 0 16px 40px rgba(5, 45, 55, 0.11);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-fast: var(--duration-fast);
  --motion-standard: var(--duration-normal);
  --motion-slow: var(--duration-slow);
  --motion-easing: var(--ease-standard);

  /* Z-index */
  --z-content: 1;
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-header: 40;
  --z-dropdown: 50;
  --z-modal: 100;

  /* Layout */
  --sidebar-width: 216px;
  --content-max-width: 1440px;
  --page-padding-desktop: 48px;
  --page-padding-tablet: 28px;
  --page-padding-mobile: 16px;
  --content-padding-desktop: var(--page-padding-desktop);
  --content-padding-tablet: var(--page-padding-tablet);
  --content-padding-mobile: var(--page-padding-mobile);
  --dashboard-column-gap: 40px;
  --dashboard-card-gap: 16px;

  /* 2. Mappning av befintliga tokens (designsystem v2 och äldre namn) */
  --macc-canvas: var(--surface-app);
  --macc-surface: var(--surface-card);
  --macc-surface-subtle: var(--color-brand-50);
  --macc-text: var(--text-primary);
  --macc-text-muted: var(--text-secondary);
  --macc-border: var(--border-default);
  --macc-control-border: var(--color-neutral-500);
  --macc-action: var(--color-brand-700);
  --macc-action-hover: var(--color-brand-800);
  --macc-brand-dark: var(--color-brand-800);
  /* Ljus markerad yta med mörk text i app.css (avatar, status.info, hover, --accent-soft).
     Den mörka --surface-selected används bara uttryckligen med vit text. */
  --macc-selected-surface: var(--color-brand-100);
  --macc-focus: var(--border-focus);
  --macc-success-text: var(--color-success);
  --macc-success-surface: var(--color-success-bg);
  --macc-warning-text: var(--color-warning);
  --macc-warning-surface: var(--color-warning-bg);
  --macc-danger-text: var(--color-danger);
  --macc-danger-surface: var(--color-danger-bg);
  --macc-neutral-surface: var(--color-neutral-status-bg);
  --macc-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --macc-nav-width: var(--sidebar-width);
  --topbar-height: 56px;
  --radius: var(--radius-lg);
  --radius-small: var(--radius-md);
  --shadow: var(--shadow-sm);
  --shadow-soft: var(--shadow-xs);
  --surface-strong: var(--color-brand-50);
  --muted: var(--text-secondary);
  --border: var(--border-default);
  --accent: var(--color-brand-700);
  --accent-strong: var(--color-brand-800);
  --accent-deep: var(--color-brand-900);
  --accent-soft: var(--color-brand-100);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-bg);
  --red: var(--color-danger);
  --red-soft: var(--color-danger-bg);
  --gray-soft: var(--color-neutral-status-bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html,
body {
  background: var(--surface-app);
  color: var(--text-primary);
}

/* 3. Toppfält -------------------------------------------------------------- */
.topbar {
  min-height: var(--topbar-height);
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-default);
  box-shadow: none;
}

.topbar__inner {
  min-height: var(--topbar-height);
}

.app-finder__trigger {
  min-height: 42px;
  border-color: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--color-brand-800);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.app-finder__trigger:hover {
  background: var(--color-brand-100);
}

.app-finder__kbd {
  display: none;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--color-brand-800);
  font: 600 12px/1.4 var(--macc-font-family);
  text-align: center;
}

.topbar-help {
  color: var(--color-brand-800);
  border-radius: var(--radius-md);
}

.user-avatar {
  background: var(--color-brand-100);
  color: var(--color-brand-800);
  font-weight: 700;
}

.workspace-context .icon {
  width: 20px;
  height: 20px;
  color: var(--color-brand-800);
}

/* 3b. Mobilmenyn: vald destination får vit ikon och text på MACC-blå bakgrund. */
.mobile-nav .nav-link.active,
.mobile-nav .nav-link.active:hover {
  background: var(--surface-selected);
  color: #FFFFFF;
}

.mobile-nav .nav-link.active .icon {
  color: #FFFFFF;
}

.mobile-nav .nav-link.active:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

/* 4. Sidomeny och toppfält på desktop -------------------------------------- */
@media (min-width: 960px) {
  .topbar__inner {
    width: 100%;
    max-width: none;
    padding: 0 28px 0 0;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-items: stretch;
  }

  /* Logotypen ligger överst i den mörka sidomenyn. */
  .brand {
    align-self: stretch;
    justify-content: center;
    background: var(--color-brand-950);
  }

  .brand-logo {
    height: 30px;
    margin-bottom: -9px;
    padding: 0;
    background: transparent;
    filter: brightness(0) invert(1);
  }

  .brand-copy {
    display: none;
  }

  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 40px;
  }

  .workspace-context {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 650;
  }

  .app-finder__kbd {
    display: inline-block;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .navrail {
    padding: 28px 14px 20px;
    border-right: 0;
    background:
      linear-gradient(152deg, transparent 0 62%, rgba(14, 89, 101, 0.30) 62% 78%, transparent 78%) bottom / 100% 300px no-repeat,
      linear-gradient(28deg, rgba(10, 74, 86, 0.35) 0 34%, transparent 34%) bottom / 100% 220px no-repeat,
      linear-gradient(200deg, transparent 0 55%, rgba(10, 66, 76, 0.25) 55%) bottom / 100% 160px no-repeat,
      linear-gradient(180deg, #062F39 0%, #073C47 45%, #0C5963 100%);
    color: var(--text-on-dark);
    z-index: var(--z-sidebar);
  }

  .navrail .nav-group__label {
    padding: 0 16px 8px;
    color: #BFD5DA;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .navrail .nav-group + .nav-group {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .navrail .nav-link {
    min-height: 42px;
    gap: 12px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
  }

  .navrail .nav-link .icon {
    width: 18px;
    height: 18px;
    color: currentColor;
  }

  .navrail .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
  }

  .navrail .nav-link.active {
    background: var(--surface-selected);
    color: #FFFFFF;
    box-shadow: none;
  }

  .navrail .nav-link.active .icon {
    color: #FFFFFF;
  }

  .navrail .nav-link--external {
    padding-block: 10px;
  }

  .navrail .nav-link--external small {
    color: rgba(255, 255, 255, 0.72);
  }

  .navrail .nav-link:focus-visible,
  .navrail__footer :is(a, button):focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
  }

  .navrail__footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .navrail__footer :is(a, button) {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.84);
    background: transparent;
    border-color: transparent;
  }

  .navrail__footer :is(a, button):hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
  }

  .navrail__footer .icon {
    color: currentColor;
  }

  .page {
    max-width: calc(var(--content-max-width) + 2 * var(--page-padding-desktop));
    padding: 0 var(--page-padding-desktop) 84px;
  }

  .page > .breadcrumb:first-child {
    margin-top: 32px;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .page {
    padding-inline: var(--page-padding-tablet);
  }
}

/* 5. Sidhuvud (page-hero) -------------------------------------------------- */
.page-hero {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-8) 0 0;
  border-bottom: 1px solid var(--border-default);
}

.page-hero .breadcrumb {
  margin: 0 0 var(--space-2);
}

.page-hero__copy h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.page-hero__copy p {
  max-width: 68ch;
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

/* 6. Sektionsflikar -------------------------------------------------------- */
.section-tabs {
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-bottom: var(--space-4);
  border-bottom: 0;
}

.page > .section-tabs {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.section-tab {
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.section-tab:hover {
  background: var(--color-brand-50);
}

.section-tab.active {
  background: var(--color-brand-800);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.section-tab:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

.section-more__menu .section-tab.active {
  color: var(--color-brand-800);
}

/* Ikoner i Kontroller-flikarna via mask, så att markup och etiketter är oförändrade. */
.section-tab[href="/operational-checks"]::before,
.section-tab[href="/periodic-work"]::before,
.section-tab[href="/operational-deviations"]::before,
.section-tab[href="/operational-checks/history"]::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--tab-icon) center / contain no-repeat;
  mask: var(--tab-icon) center / contain no-repeat;
}

.section-tab[href="/operational-checks"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
.section-tab[href="/periodic-work"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.section-tab[href="/operational-deviations"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.4 2.8 18a2 2 0 0 0 1.8 3h14.8a2 2 0 0 0 1.8-3L13.7 4.4a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.section-tab[href="/operational-checks/history"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* 7. Knappar och statusetiketter ------------------------------------------- */
.button {
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.button:not(.secondary):not(.danger) {
  background: var(--color-brand-800);
  border-color: var(--color-brand-800);
  color: #FFFFFF;
}

.button:not(.secondary):not(.danger):hover {
  background: var(--color-brand-700);
  border-color: var(--color-brand-700);
}

.button.secondary {
  background: #EAF3F5;
  border: 1px solid var(--color-info-border);
  color: var(--color-brand-800);
}

.button.secondary:hover {
  background: #DCECEF;
}

.button:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

.status {
  border-radius: var(--radius-pill);
  font-weight: 650;
}

.status.ok { color: var(--color-success); background: var(--color-success-bg); box-shadow: inset 0 0 0 1px var(--color-success-border); }
.status.low { color: var(--color-warning); background: var(--color-warning-bg); box-shadow: inset 0 0 0 1px var(--color-warning-border); }
.status.critical,
.status.empty { color: var(--color-danger); background: var(--color-danger-bg); box-shadow: inset 0 0 0 1px var(--color-danger-border); }
.status.info { color: var(--color-info); background: var(--color-info-bg); box-shadow: inset 0 0 0 1px var(--color-info-border); }
.status.unknown,
.status.uncertain { color: var(--color-neutral-status); background: var(--color-neutral-status-bg); box-shadow: inset 0 0 0 1px var(--color-neutral-status-border); }

/* 8. Sammanfattningskort --------------------------------------------------- */
.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}

.summary-stat {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 90px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.summary-stat--link {
  color: inherit;
  text-decoration: none;
}

.summary-stat--link:hover {
  border-color: var(--color-brand-800);
}

.summary-stat--link:focus-visible {
  outline: 3px solid var(--color-brand-800);
  outline-offset: 2px;
}

.summary-stat__icon {
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 12px;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
}

.summary-stat__icon .icon {
  width: 26px;
  height: 26px;
}

.summary-stat p {
  display: grid;
  margin: 0;
}

.summary-stat strong {
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.summary-stat p span {
  color: var(--text-secondary);
  font-size: 15px;
}

/* 9. Sektionsrubriker på Kontroller ---------------------------------------- */
.operational-own-target,
.operational-target-picker {
  margin-bottom: var(--space-8);
}

.operational-own-target > h2,
.operational-target-picker .section-heading-row h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.operational-own-target > p,
.operational-target-picker .section-heading-row p {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--text-secondary);
}

/* 10. Primärt kontrollkort ------------------------------------------------- */
.control-primary {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(200px, 25fr) minmax(220px, 30fr);
  align-items: center;
  gap: var(--space-6);
  min-height: 155px;
  padding: var(--space-6) 28px var(--space-6) 32px;
  border: 1px solid var(--border-default);
  border-left: 5px solid var(--color-brand-800);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.control-primary__info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  min-width: 0;
}

.control-primary__icon {
  display: grid;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-brand-100);
  color: var(--color-brand-800);
}

.control-primary__icon .icon {
  width: 36px;
  height: 36px;
}

.control-primary h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.control-primary__info p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.control-primary__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.control-primary__status .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.control-primary__status .icon {
  width: 16px;
  height: 16px;
}

.control-primary__type {
  color: var(--text-secondary);
  font-size: 14px;
}

.control-progress {
  display: grid;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  border-left: 1px solid var(--border-default);
  list-style: none;
}

.control-progress__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 37px;
  color: var(--text-secondary);
  font-size: 15px;
}

.control-progress__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 28px;
  width: 2px;
  height: 18px;
  background: var(--border-strong);
}

.control-progress__marker {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--color-neutral-300);
  border-radius: 50%;
  background: var(--surface-card);
}

.control-progress__step--done .control-progress__marker {
  border-color: var(--color-brand-700);
  background: var(--color-brand-700);
  color: #FFFFFF;
}

.control-progress__step--done .control-progress__marker .icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.control-progress__step--current {
  color: var(--text-primary);
  font-weight: 650;
}

.control-progress__step--current .control-progress__marker {
  border-color: var(--color-brand-700);
  box-shadow: inset 0 0 0 4px var(--surface-card), inset 0 0 0 10px var(--color-brand-700);
}

.control-primary__action {
  display: flex;
  justify-content: flex-end;
}

.control-primary__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 var(--space-6);
  text-decoration: none;
}

.control-primary__cta .icon {
  width: 18px;
  height: 18px;
}

/* 11. Sekundära kontrollkort ----------------------------------------------- */
.operational-target-picker .tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.operational-target-picker .action-tile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "icon copy cta";
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-height: 0;
  padding: 22px var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.operational-target-picker .action-tile__icon {
  grid-area: icon;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  align-self: start;
  border-radius: 12px;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
}

.operational-target-picker .action-tile__copy {
  grid-area: copy;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.operational-target-picker .action-tile__copy strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.operational-target-picker .action-tile__copy small {
  color: var(--text-secondary);
  font-size: 14px;
}

.operational-target-picker .action-tile__arrow {
  display: none;
}

.operational-target-picker .operational-draft-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.operational-target-picker .operational-draft-status .status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 13px;
}

.operational-target-picker .operational-draft-status .icon {
  width: 14px;
  height: 14px;
}

.operational-target-picker .action-tile__cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: #EAF3F5;
  color: var(--color-brand-800);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.operational-target-picker .action-tile__cta::after {
  content: "→";
}

.operational-target-picker .action-tile:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .operational-target-picker .action-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .operational-target-picker .action-tile:hover .action-tile__cta {
    background: #DCECEF;
  }
}

/* Sök bland bilar och lokaler */
.target-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.target-search__field {
  margin: 0;
}

.target-search__field span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
}

.target-search__field input {
  min-height: 48px;
  padding-left: 44px;
  border: 1px solid var(--color-neutral-500); /* fältgräns ≥ 3:1 mot vitt (WCAG 1.4.11) */
  border-radius: var(--radius-md);
  background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360717A' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") 14px center / 20px no-repeat;
  font-size: 16px;
}

.target-search__field input:focus-visible {
  border-color: var(--border-focus);
  outline: 3px solid var(--color-brand-100);
  outline-offset: 0;
}

.target-search__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.target-search__status {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}

.target-search__toggle {
  min-height: 48px;
  white-space: nowrap;
}

.target-search__empty {
  margin: 0;
}

/* 11b. Startsidan "Arbetsdag – Idag" ---------------------------------------- */
.home-proposal .page-hero {
  min-height: 210px;
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 0;
  align-content: start;
}

/* Ingen godkänd verksamhetsbild finns i projektet: dekoren är en ren
   CSS-gradient i petroleumtoner som tonas ut åt vänster (utan rutnät). */
@media (min-width: 768px) {
  .home-proposal .page-hero {
    margin-inline: calc(-1 * var(--page-padding-desktop));
    padding-inline: var(--page-padding-desktop);
    background:
      linear-gradient(90deg, #F6F9FA 0%, #F6F9FA 35%, rgba(246, 249, 250, 0.92) 55%, rgba(246, 249, 250, 0.35) 70%, rgba(246, 249, 250, 0) 100%),
      linear-gradient(180deg, rgba(246, 249, 250, 0) 70%, #F6F9FA 100%),
      linear-gradient(115deg, #DCEBEE 0%, #B9D6DC 55%, #8FBCC5 100%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-proposal .page-hero {
    margin-inline: calc(-1 * var(--page-padding-tablet));
    padding-inline: var(--page-padding-tablet);
  }
}

.home-proposal .page-hero__copy h1 {
  letter-spacing: -0.025em;
}

.home-proposal .start-proposal {
  max-width: none;
}

.home-proposal .start-proposal__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1.04fr);
  grid-template-areas: "pinned news actions";
  gap: var(--dashboard-column-gap);
  align-items: start;
}

.home-proposal .start-proposal__grid--two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "pinned news";
}

.home-proposal .start-proposal__section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
  margin-bottom: var(--space-5);
}

.start-proposal__section-icon {
  display: inline-flex;
  flex: 0 0 24px;
  margin-top: 2px;
  color: var(--color-brand-800);
}

.start-proposal__section-icon .icon {
  width: 24px;
  height: 24px;
}

.home-proposal .start-proposal__section-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.home-proposal .start-proposal__section-heading p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Viktigt just nu: en kortkomponent, varianten styr färgen. */
.home-proposal .start-proposal__pin {
  --pin-accent: var(--color-brand-500);
  --pin-tag: var(--color-brand-800);
  --pin-border: var(--border-default);
  --pin-surface: var(--surface-primary);
  margin-bottom: var(--dashboard-card-gap);
  overflow: hidden;
  border: 1px solid var(--pin-border);
  border-left: 4px solid var(--pin-accent);
  border-radius: 16px;
  background: var(--pin-surface);
  box-shadow: var(--shadow-sm);
}

.home-proposal .start-proposal__pin--warning {
  --pin-accent: var(--color-warning-accent);
  --pin-tag: var(--color-warning);
  --pin-border: var(--color-warning-border);
  --pin-surface: linear-gradient(90deg, #FFF8EF 0%, #FFFCF8 45%, #FFFFFF 100%);
}

.home-proposal .start-proposal__pin > summary {
  gap: var(--space-2);
  padding: var(--space-5);
}

.home-proposal .start-proposal__pin > summary:hover {
  background: rgba(240, 248, 249, 0.6);
  border-radius: 0;
}

.home-proposal .start-proposal__tag {
  color: var(--pin-tag);
  font-size: 13px;
  font-weight: 600;
}

.home-proposal .start-proposal__tag svg {
  width: 18px;
  height: 18px;
}

.home-proposal .start-proposal__pin strong {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.home-proposal .start-proposal__summary {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.home-proposal .start-proposal__read {
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--text-link);
  font-size: 14px;
  font-weight: 600;
}

.home-proposal .start-proposal__pin[open] .start-proposal__read > span {
  transform: rotate(90deg);
}

.home-proposal .start-proposal__detail {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top-color: var(--border-default);
  color: var(--text-secondary);
}

/* Senaste nytt */
.home-proposal .start-proposal__news-card {
  border-radius: 16px;
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.news-empty {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-height: 260px;
  padding: var(--space-8);
  border: 1px dashed #C7DFE4;
  border-radius: 16px;
  background: #F8FBFC;
  color: var(--text-primary);
  text-align: center;
}

.news-empty > svg,
.start-proposal__feed-end.news-empty > svg {
  width: 64px;
  height: 64px;
  color: var(--color-brand-700);
  stroke-width: 1.4;
}

.news-empty p {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.news-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: 12px;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--motion-standard) var(--motion-easing);
}

.news-empty__cta:hover {
  background: var(--color-brand-200);
}

.news-empty__cta .icon {
  width: 18px;
  height: 18px;
}

/* Ditt arbete */
.home-proposal .start-proposal__action {
  gap: 14px;
  min-height: 0;
  margin-bottom: var(--dashboard-card-gap);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--surface-primary);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  transition: transform var(--motion-standard) var(--motion-easing), box-shadow var(--motion-standard) var(--motion-easing), border-color var(--motion-standard) var(--motion-easing);
}

.home-proposal .start-proposal__action > svg:first-child {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 10px;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
}

.home-proposal .start-proposal__action strong {
  font-size: 16px;
  font-weight: 700;
}

.home-proposal .start-proposal__action small {
  color: var(--text-secondary);
  font-size: 13px;
}

.home-proposal .start-proposal__action > span:last-child {
  color: var(--color-brand-800);
  font-size: 18px;
}

.start-proposal__fallback {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Personlig uppföljning ligger under kolumnerna, inte i sidhuvudet. */
.home-proposal .start-proposal > .followup {
  margin-top: var(--space-8);
}

/* Genvägar i lagret */
.home-proposal .start-proposal__warehouse {
  position: relative;
  margin-top: var(--space-8);
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid #DCEAEC;
  border-radius: 20px;
  background: linear-gradient(120deg, #F0F8F9 0%, #DDEFF1 100%);
}

.home-proposal .start-proposal__warehouse::before,
.home-proposal .start-proposal__warehouse::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  pointer-events: none;
}

.home-proposal .start-proposal__warehouse::before {
  background: linear-gradient(115deg, transparent 0 40%, rgba(202, 228, 232, 0.55) 40% 62%, transparent 62%);
}

.home-proposal .start-proposal__warehouse::after {
  background: linear-gradient(115deg, transparent 0 66%, rgba(215, 235, 238, 0.7) 66% 82%, rgba(228, 242, 244, 0.5) 82%);
}

.home-proposal .start-proposal__warehouse .home-shortcuts {
  position: relative;
  z-index: 1;
  margin: 0;
}

.home-proposal .home-shortcuts h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.home-shortcuts__icon {
  display: inline-flex;
  color: var(--color-brand-800);
}

.home-shortcuts__icon .icon {
  width: 24px;
  height: 24px;
}

.home-proposal .home-shortcuts__links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dashboard-card-gap);
}

.home-proposal .home-shortcut {
  gap: 14px;
  min-height: 78px;
  padding: 18px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-primary);
  box-shadow: var(--shadow-xs);
  transition: transform var(--motion-standard) var(--motion-easing), box-shadow var(--motion-standard) var(--motion-easing), background var(--motion-standard) var(--motion-easing), border-color var(--motion-standard) var(--motion-easing);
}

.home-proposal .home-shortcut > .icon {
  width: 26px;
  height: 26px;
  color: var(--color-brand-800);
}

.home-proposal .home-shortcut strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.home-proposal .home-shortcut small {
  color: var(--text-secondary);
  font-size: 13px;
}

.home-proposal .home-shortcut > span:last-child {
  color: var(--color-brand-800);
  font-size: 18px;
}

.home-proposal :is(.home-shortcut, .start-proposal__action):focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 3px;
}

@media (hover: hover) {
  .home-proposal .home-shortcut:hover {
    transform: translateY(-1px);
    border-color: var(--border-interactive);
    background: #FAFDFD;
    box-shadow: var(--shadow-sm);
  }

  .home-proposal .start-proposal__action:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 1399px) {
  .home-proposal .start-proposal__grid {
    gap: var(--space-6);
  }
}

@media (max-width: 1190px) {
  .home-proposal .start-proposal__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "pinned news" "actions actions";
  }

  .home-proposal .start-proposal__pinned {
    display: block;
    grid-area: pinned;
  }

  .home-proposal .start-proposal__news {
    grid-area: news;
  }

  .home-proposal .start-proposal__actions {
    grid-area: actions;
  }

  .home-proposal .home-shortcuts__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-proposal .start-proposal__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .home-proposal .start-proposal__actions {
    display: block;
  }

  .home-proposal .start-proposal__actions > .start-proposal__action > svg {
    display: block;
  }

  .home-proposal .page-hero {
    min-height: 0;
    margin-bottom: var(--space-6);
    padding-bottom: 0;
  }

  .news-empty {
    min-height: 200px;
    padding: var(--space-6);
  }
}

@media (max-width: 640px) {
  .home-proposal .home-shortcuts__links {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-proposal .home-shortcut {
    min-height: 72px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .home-proposal .home-shortcut > span:last-child {
    display: inline;
  }

  .home-proposal .start-proposal__warehouse {
    padding: var(--space-4);
  }
}

/* 11b2. Genväg till "Behöver hanteras / Under uppföljning" ----------------- */
.followup-shortcut {
  margin: 0 0 var(--space-8);
}

.followup-shortcut__card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  grid-template-areas: "icon copy count cta";
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: 22px var(--space-6);
  border: 1px solid var(--border-default);
  border-left: 6px solid var(--color-brand-500);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.followup-shortcut__card--needs {
  border-left-color: var(--color-warning-accent);
}

.followup-shortcut__icon {
  grid-area: icon;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 12px;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
}

.followup-shortcut__card--needs .followup-shortcut__icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.followup-shortcut__icon .icon {
  width: 26px;
  height: 26px;
}

.followup-shortcut__copy {
  grid-area: copy;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.followup-shortcut__copy strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.followup-shortcut__copy small {
  color: var(--text-secondary);
  font-size: 14px;
}

.followup-shortcut__count {
  grid-area: count;
  display: grid;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.followup-shortcut__cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: #EAF3F5;
  color: var(--color-brand-800);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.followup-shortcut__card:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .followup-shortcut__card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 700px) {
  .followup-shortcut__card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy count" "cta cta cta";
    padding: var(--space-4);
  }

  .followup-shortcut__icon {
    width: 44px;
    height: 44px;
  }

  .followup-shortcut__cta {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .followup-shortcut__card {
    transition: none;
  }
}

/* 11c. Dagens kontroll (formuläret) ---------------------------------------- */
/* Gäller sidan med en pågående kontroll; markeras av .check-header. Ingen egen
   sidomeny – skalet och toppfältet är de globala. Frågorna har ingen ikon. */
:root {
  --control-row-min-height: 94px;
  --control-action-width: 228px;
  --check-ok-bg: #EAF5F6;
  --check-ok-border: #C7E4E8;
  --check-ok-hover-bg: #DDF0F2;
  --check-ok-selected-bg: #D7EEE8;
  --check-ok-selected-border: #237653;
  --check-ok-selected-fg: #155E46;
  --check-dev-border: #D8E5E9;
  --check-dev-hover-bg: #FFF8EF;
  --check-dev-hover-border: #F2D9B9;
  --check-dev-selected-bg: #FDEACF;
  --check-dev-selected-border: #C77C16;
  --check-dev-selected-fg: #935000;
}

.page:has(.check-header) .section-tab {
  min-height: 46px;
  font-size: 16px;
}

.page:has(.check-header) .section-tab.active {
  background: linear-gradient(180deg, var(--color-brand-700) 0%, var(--color-brand-900) 100%);
}

.check-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin: var(--space-2) 0 var(--space-7);
}

.check-header h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.check-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  color: var(--color-neutral-700);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.check-header__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.check-header__meta .icon {
  width: 20px;
  height: 20px;
}

.check-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  color: var(--color-neutral-900);
  font-size: 16px;
  font-weight: 500;
}

.check-progress__bar {
  appearance: none;
  width: 230px;
  height: 12px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: #DFEFF1;
  color: #0D7882;
}

.check-progress__bar::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: #DFEFF1;
}

.check-progress__bar::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: #0D7882;
  transition: width var(--duration-normal) var(--ease-standard);
}

.check-progress__bar::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: #0D7882;
}

.check-progress__value {
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.check-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 160px;
  margin: 0 0 var(--space-6);
  padding: var(--space-7) var(--space-10) var(--space-7) var(--space-12);
  overflow: hidden;
  border: 1px solid #DCEDEF;
  border-radius: 16px;
  background: linear-gradient(105deg, #F0F8F9 0%, #E9F5F6 48%, #D8EEF0 100%);
}

.check-stage::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--color-brand-500);
}

.check-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0 56%, rgba(255, 255, 255, 0.38) 56% 70%, transparent 70%),
    linear-gradient(118deg, transparent 0 74%, rgba(255, 255, 255, 0.22) 74% 84%, transparent 84%);
  pointer-events: none;
}

.check-stage__icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background: #DDEFF1;
  color: var(--color-brand-800);
}

.check-stage__icon .icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.6;
}

.check-stage__copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.check-stage__copy p {
  margin: var(--space-2) 0 0;
  color: var(--color-neutral-700);
  font-size: 17px;
  line-height: 1.5;
}

.check-stage .check-stage__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-neutral-900);
  font-size: 17px;
  font-weight: 500;
}

.check-stage h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.check-stage .check-stage__note {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-brand-800);
}

.check-stage__art {
  position: relative;
  z-index: 1;
  flex: none;
  width: 150px;
  height: 130px;
  margin-left: auto;
  fill: none;
  stroke: var(--color-brand-400);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

.check-instruction {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0 0 var(--space-2);
  color: var(--color-neutral-700);
  font-size: 16px;
  line-height: 1.5;
}

.check-instruction .icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-brand-800);
}

.page:has(.check-header) .operational-check-form {
  max-width: none;
}

.page:has(.check-header) .operational-items {
  gap: var(--space-3);
}

/* Frågekort: frågan till vänster, OK och Avvikelse till höger. Legenden flyttas
   in i rutnätet med float, så att fieldset/legend-semantiken behålls. */
.page:has(.check-header) .operational-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, var(--control-action-width));
  align-items: center;
  column-gap: 14px;
  min-height: var(--control-row-min-height);
  padding: var(--space-4) 18px var(--space-4) var(--space-8);
  border: 1px solid #E3ECEF;
  border-radius: 16px;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-normal) var(--ease-standard), background var(--duration-normal) var(--ease-standard);
}

.page:has(.check-header) .operational-item > * {
  grid-column: 1 / -1;
}

.page:has(.check-header) .operational-item > .operational-item__question {
  float: left;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  padding: 0 var(--space-4) 0 0;
  color: var(--text-primary);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.page:has(.check-header) .operational-item > .operational-answer-options {
  grid-column: 2 / 4;
  grid-row: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.page:has(.check-header) .operational-item > .helper-text {
  margin: var(--space-3) 0 0;
}

.page:has(.check-header) .operational-answer {
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 1px solid var(--check-ok-border);
  border-radius: 14px;
  background: var(--check-ok-bg);
  color: var(--color-brand-700);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  transition: background var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}

.operational-answer__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.operational-answer__label .icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  stroke-width: 2;
}

.page:has(.check-header) .operational-answer--ok:hover {
  border-color: var(--color-brand-300);
  background: var(--check-ok-hover-bg);
}

.page:has(.check-header) .operational-answer--deviation {
  border-color: var(--check-dev-border);
  background: var(--surface-card);
  color: var(--color-neutral-900);
}

.page:has(.check-header) .operational-answer--deviation:hover {
  border-color: var(--check-dev-hover-border);
  background: var(--check-dev-hover-bg);
}

.page:has(.check-header) .operational-answer:active {
  transform: translateY(1px);
}

.page:has(.check-header) .operational-answer:has(input:focus-visible) {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

/* Valt svar: färg + dubbel kant + fylld ikon, så att valet inte bara syns i färg. */
.page:has(.check-header) .operational-answer--ok:has(input:checked) {
  border-color: var(--check-ok-selected-border);
  background: var(--check-ok-selected-bg);
  box-shadow: inset 0 0 0 1px var(--check-ok-selected-border);
  color: var(--check-ok-selected-fg);
}

.page:has(.check-header) .operational-answer--deviation:has(input:checked) {
  border-color: var(--check-dev-selected-border);
  background: var(--check-dev-selected-bg);
  box-shadow: inset 0 0 0 1px var(--check-dev-selected-border);
  color: var(--check-dev-selected-fg);
}

.page:has(.check-header) .operational-answer--ok:has(input:checked) .icon {
  padding: 3px;
  background: var(--check-ok-selected-border);
  color: #FFFFFF;
  stroke-width: 2.6;
}

.page:has(.check-header) .operational-answer--deviation:has(input:checked) .icon {
  background: var(--check-dev-selected-border);
  color: #FFFFFF;
}

.page:has(.check-header) .operational-answer:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Avvikelse vald: kortet växer och visar befintliga fält för kommentar och foto. */
.page:has(.check-header) .operational-item:has(.operational-answer--deviation input:checked) {
  border-color: var(--check-dev-hover-border);
  background: #FFFDF9;
}

.page:has(.check-header) .operational-comment-wrap {
  gap: var(--space-3);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--check-dev-hover-border);
}

.page:has(.check-header) .operational-comment-wrap textarea,
.page:has(.check-header) .operational-comment-wrap select {
  padding: 14px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  font-size: 16px;
}

.page:has(.check-header) .operational-comment-wrap textarea:focus-visible,
.page:has(.check-header) .operational-comment-wrap select:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 1px;
}

.page:has(.check-header) .operational-item .photo-prompt--inline {
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--color-brand-300);
  border-radius: 12px;
  background: #FFFFFF;
}

.page:has(.check-header) .operational-item .photo-prompt--inline .photo-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.page:has(.check-header) .operational-submit {
  display: flex;
  width: auto;
  min-width: 320px;
  min-height: 56px;
  margin-left: auto;
  justify-content: center;
  font-size: 17px;
}

/* 12. Surfplatta och mobil ------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --control-action-width: 190px;
  }
}

@media (max-width: 1023px) {
  .page:has(.check-header) .operational-item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    padding: 20px;
  }

  .page:has(.check-header) .operational-item > .operational-answer-options {
    grid-column: 1;
    grid-row: 2;
  }

  .check-stage__art {
    width: 110px;
    height: 96px;
  }
}

@media (max-width: 700px) {
  .page:has(.check-header) .section-tab {
    min-height: 44px;
    font-size: 14px;
  }

  .check-header {
    align-items: stretch;
    margin-bottom: var(--space-5);
  }

  .check-header h1 {
    font-size: 30px;
  }

  .check-header__meta {
    font-size: 16px;
  }

  .check-progress {
    width: 100%;
  }

  .check-progress__bar {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .check-stage {
    gap: var(--space-4);
    min-height: 0;
    padding: var(--space-5) var(--space-5) var(--space-5) 28px;
  }

  .check-stage__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .check-stage__icon .icon {
    width: 28px;
    height: 28px;
  }

  .check-stage__art {
    display: none;
  }

  .check-stage h2 {
    font-size: 22px;
  }

  .check-stage .check-stage__eyebrow,
  .check-stage__copy p {
    font-size: 15px;
  }

  .check-instruction {
    gap: var(--space-3);
    font-size: 15px;
  }

  .page:has(.check-header) .operational-item {
    padding: var(--space-4);
  }

  .page:has(.check-header) .operational-item > .operational-item__question {
    padding-right: 0;
    font-size: 17px;
  }

  .page:has(.check-header) .operational-item > .operational-answer-options {
    gap: 10px;
  }

  .page:has(.check-header) .operational-answer {
    min-height: 56px;
    padding: 0 var(--space-2);
    font-size: 17px;
  }

  .page:has(.check-header) .operational-submit {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page:has(.check-header) .operational-answer,
  .page:has(.check-header) .operational-item,
  .check-progress__bar::-webkit-progress-value {
    transition: none;
  }
}

@media (max-width: 1199px) {
  .control-primary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .control-primary__info {
    grid-column: 1 / -1;
  }

  .control-progress {
    padding-left: 0;
    border-left: 0;
  }

  .operational-target-picker .tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 959px) {
  .page-hero {
    padding-top: var(--space-2);
  }
}

@media (max-width: 767px) {
  .page-hero__copy h1 {
    font-size: 28px;
  }

  .page-hero__copy p {
    font-size: 15px;
  }

  .summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .summary-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 0;
    padding: var(--space-3);
  }

  .summary-stat__icon {
    display: none;
  }

  .page-hero .section-tabs {
    flex-wrap: nowrap;
    gap: var(--space-1);
    overflow-x: auto;
  }

  .summary-stat strong {
    font-size: 24px;
  }

  .summary-stat p span {
    font-size: 12px;
    line-height: 1.35;
  }

  .control-primary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
  }

  .control-primary__info {
    gap: var(--space-4);
  }

  .control-primary__icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .control-primary__icon .icon {
    width: 28px;
    height: 28px;
  }

  .control-primary__action,
  .control-primary__cta {
    width: 100%;
  }

  .operational-own-target > h2,
  .operational-target-picker .section-heading-row h2 {
    font-size: 21px;
  }

  .operational-target-picker .action-tile {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "icon copy" "cta cta";
    padding: var(--space-4);
  }

  .operational-target-picker .action-tile__icon {
    width: 44px;
    height: 44px;
  }

  .operational-target-picker .action-tile__cta {
    justify-content: center;
  }

  .target-search {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .target-search__meta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .target-search__status {
    white-space: normal;
  }

  .section-tab {
    padding: 0 var(--space-3);
  }
}

@media (max-width: 420px) {
  .section-tab::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .operational-target-picker .action-tile,
  .navrail .nav-link,
  .section-tab,
  .button {
    transition: none;
  }

  .operational-target-picker .action-tile:hover {
    transform: none;
  }
}