/* ==========================================================
   DriverTime / Fleet Unified module CSS
   components.css — buttons, badges, modal, toast, warnings

   COLORBLIND-SAFE: Every state uses:
   1. Color (for normal vision)
   2. Icon/symbol (shape perception)
   3. Border pattern (solid/dashed/dotted)
   4. Text label (universal)
   ========================================================== */

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-12);
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  min-height: 48px;
  /* Precision-transition: specifika props = snabbare render */
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.15s var(--ease),
              box-shadow 0.15s var(--ease),
              background 0.15s var(--ease),
              color 0.12s var(--ease);
  will-change: transform;
  position: relative;
  /* Touch-optimering */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: none;
  transition: transform 0.08s ease;
}

/* Disabled-state – alla knappvarianter */
.btn:disabled,
.btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

.btn.primary {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.btn.primary:hover {
  background: rgba(77, 159, 255, 0.22);
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(77, 159, 255, 0.25);
  transform: translateY(-1px);
}

.btn.primary:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.btn.warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning-text);
}

.btn.warning:hover {
  background: rgba(255, 166, 48, 0.22);
  border-color: var(--warning);
  box-shadow: 0 4px 16px rgba(255, 166, 48, 0.18);
  transform: translateY(-1px);
}

.btn.warning:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: none;
}

.btn.danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  /* COLORBLIND: dashed border = danger */
  border-style: dashed;
  color: var(--danger-text);
}

.btn.danger:hover {
  background: rgba(255, 107, 74, 0.22);
  border-color: var(--danger);
  box-shadow: 0 4px 16px rgba(255, 107, 74, 0.18);
  transform: translateY(-1px);
}

.btn.danger:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: none;
}

/* ==========================================================
   CONTROLS (START / RAST / SLUT)
   ========================================================== */

.controls {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin: var(--s-20) 0;
}

.big-btn {
  width: 100%;
  font-size: var(--fs-lg);
  font-weight: 800;
  min-height: 68px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-16);
  border-width: 2px;
  position: relative;
  overflow: hidden;
  will-change: transform;
  /* Touch-optimering för handskar och stress-situationer */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Premium-transition: transform snabbast, bakgrund långsammare */
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 0.18s var(--ease),
              border-color 0.15s var(--ease),
              background 0.18s var(--ease),
              color 0.12s var(--ease);
}

/* Taktil press-feedback – skalning nedåt vid tryck */
.big-btn:active:not(:disabled) {
  transform: scale(0.982);
  transition: transform 0.08s ease;
}

/* Disabled-state för stora knappar */
.big-btn:disabled,
.big-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(40%);
  box-shadow: none !important;
}

/* COLORBLIND: Active uses thick border + glow + "●" prefix, not just color */
.big-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-bg),
              0 4px 20px rgba(77, 159, 255, 0.25);
}

.big-btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(77, 159, 255, 0.08),
    rgba(77, 159, 255, 0.02));
  pointer-events: none;
}

/* START knapp — blå, tydlig */
.big-btn.start {
  background: linear-gradient(180deg,
    rgba(77, 159, 255, 0.20),
    rgba(77, 159, 255, 0.08));
  border-color: var(--primary);
  border-style: solid;
  color: var(--primary);
  box-shadow: 0 2px 12px rgba(77,159,255,0.15);
}
.big-btn.start:hover {
  background: linear-gradient(180deg,
    rgba(77, 159, 255, 0.30),
    rgba(77, 159, 255, 0.14));
  box-shadow: 0 4px 20px rgba(77,159,255,0.28);
}

/* RAST knapp — orange, prickad (COLORBLIND: dotted = rast) */
.big-btn.break {
  background: linear-gradient(180deg,
    rgba(255, 166, 48, 0.18),
    rgba(255, 166, 48, 0.07));
  border-color: var(--warning);
  border-style: dotted;
  color: var(--warning-text);
  box-shadow: 0 2px 12px rgba(255,166,48,0.12);
}
.big-btn.break:hover {
  background: linear-gradient(180deg,
    rgba(255, 166, 48, 0.28),
    rgba(255, 166, 48, 0.12));
  box-shadow: 0 4px 20px rgba(255,166,48,0.22);
}

/* SLUT knapp — röd-orange, streckad (COLORBLIND: dashed = stopp) */
.big-btn.stop {
  background: linear-gradient(180deg,
    rgba(255, 107, 74, 0.18),
    rgba(255, 107, 74, 0.07));
  border-color: var(--danger);
  border-style: dashed;
  color: var(--danger-text);
  box-shadow: 0 2px 12px rgba(255,107,74,0.12);
}
.big-btn.stop:hover {
  background: linear-gradient(180deg,
    rgba(255, 107, 74, 0.28),
    rgba(255, 107, 74, 0.12));
  box-shadow: 0 4px 20px rgba(255,107,74,0.22);
}

/* Inspection button — warning style */
.big-btn.inspection {
  background: linear-gradient(180deg,
    rgba(255, 166, 48, 0.15),
    rgba(255, 166, 48, 0.05));
  border: 2px solid var(--warning);
  color: var(--warning-text);
  box-shadow: 0 2px 12px rgba(255, 166, 48, 0.12);
}
.big-btn.inspection:hover {
  background: linear-gradient(180deg,
    rgba(255, 166, 48, 0.26),
    rgba(255, 166, 48, 0.10));
  box-shadow: 0 4px 20px rgba(255, 166, 48, 0.22);
}

/* ==========================================================
   STATUS BUTTONS
   ========================================================== */

.status-buttons {
  display: flex;
  gap: var(--s-8);
  margin-bottom: var(--s-16);
  flex-wrap: wrap;
}

.status-btn {
  flex: 1;
  min-width: 64px;
  font-size: var(--fs-xs);
  padding: var(--s-8) var(--s-10);
  min-height: 48px;
  border-radius: var(--r-8);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* COLORBLIND: Active status uses underline + bold, not just color */
.status-btn.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================
   BADGES
   All badges use shape distinction + text label
   ========================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-10);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

/* Micro-interaction: liten skalas upp vid hover */
.badge:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

/* COLORBLIND: Each badge type has unique border + icon pattern */
.badge.warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning);
}

.badge.warning::before {
  content: "△";
  font-size: 0.65rem;
}

.badge.overnight {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary);
}

.badge.retro {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px dashed var(--warning);
  /* COLORBLIND: dashed border = retroaktiv */
}

.badge.retro::before {
  content: "↻";
  font-size: 0.7rem;
}

.badge.inspection {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px dotted var(--warning);
  /* COLORBLIND: dotted border = inspektion */
}

.badge.inspection::before {
  content: "🔍";
  font-size: 0.65rem;
}

.badge.country {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary);
}

.badge.country::before {
  content: "◈";
  font-size: 0.65rem;
}

.badge.violation {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 2px dashed var(--danger);
}

.badge.violation::before {
  content: "✕";
  font-weight: 900;
}

.badge.deviation {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger);
  /* COLORBLIND: solid danger border = avvikelse */
}

.badge.deviation::before {
  content: "⚠";
  font-size: 0.65rem;
}

.entry-deviation-reason {
  font-size: var(--fs-xs);
  color: var(--danger-text);
  opacity: 0.85;
  margin-top: 2px;
  padding: 0 var(--s-4);
}

/* ==========================================================
   TOAST NOTIFICATIONS
   ========================================================== */

.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-raised);
  color: var(--text);
  padding: var(--s-12) var(--s-24);
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 10000;
  box-shadow: var(--shadow-2);
  animation: toast-in 0.3s var(--ease-out);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

/* Micro-animation: entry-kort tonar in (dag-vy) */
@keyframes entryFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Micro-animation: varningsmodal glider + skalas in */
@keyframes warningModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================
   WARNING MODAL (EU driving time)
   ========================================================== */

.warning-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: var(--s-20);
}

.warning-modal-overlay[aria-hidden="false"] {
  display: flex;
}

.warning-modal {
  max-width: 520px;
  width: 100%;
  border-radius: var(--r-20);
  padding: var(--s-32);
  box-shadow: var(--shadow-2);
  color: #fff;
  text-align: center;
  /* Slide-in vid öppning */
  animation: warningModalIn 0.28s cubic-bezier(0.2,0.8,0.2,1) both;
}

.warning-modal h2 {
  margin: 0 0 var(--s-16) 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
}

.warning-modal p {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-24) 0;
}

.warning-timer {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin: var(--s-20) 0;
  padding: var(--s-20);
  background: rgba(0,0,0,0.35);
  border-radius: var(--r-12);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
              0 4px 20px rgba(0,0,0,0.40);
}

/* COLORBLIND: Each level uses different border pattern + icon symbol */

/* Info — solid border + ℹ */
.warning-modal--info {
  background: linear-gradient(135deg, #ffa630, #ff8c00);
  color: #000;
  border: 4px solid #fff;
  box-shadow: var(--shadow-2), 0 0 40px rgba(255,166,48,0.35);
}

.warning-modal--info h2::before { content: "ℹ "; }

/* Warning — dotted border + △ */
.warning-modal--warning {
  background: linear-gradient(135deg, #ff8c00, #e65100);
  color: #fff;
  border: 4px dotted #fff;
  box-shadow: var(--shadow-2), 0 0 50px rgba(255,107,74,0.40);
}

.warning-modal--warning h2::before { content: "△ "; }

/* Urgent — dashed border + ⚠ */
.warning-modal--urgent {
  background: linear-gradient(135deg, #ff6b4a, #d84315);
  border: 4px dashed #fff;
  box-shadow: var(--shadow-2), 0 0 60px rgba(255,107,74,0.50);
}

.warning-modal--urgent h2::before { content: "⚠ "; }

/* Critical — double border + heartbeat + ✕ */
.warning-modal--critical {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  border: 4px double #fff;
  /* Heartbeat: warningModalIn körs en gång, sedan loopas hjärtslagsanimation */
  animation: warningModalIn 0.28s cubic-bezier(0.2,0.8,0.2,1) both,
             warning-flash 1.4s ease-in-out 0.3s infinite;
  box-shadow: var(--shadow-2), 0 0 80px rgba(211,47,47,0.60);
}

.warning-modal--critical h2::before { content: "✕ "; }

/* Hjärtslag-animation: dubbelpuls + skalning (premium feel) */
@keyframes warning-flash {
  0%, 100% { opacity: 1;    transform: scale(1); }
  14%       { opacity: 0.82; transform: scale(1.010); }
  28%       { opacity: 1;    transform: scale(1); }
  42%       { opacity: 0.88; transform: scale(1.005); }
  70%       { opacity: 1;    transform: scale(1); }
}

/* Snooze buttons */
.warning-snooze {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-10);
  margin-top: var(--s-16);
}

/* ==========================================================
   STOP MODAL (overnight / reusable)
   ========================================================== */

.stop-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-20);
}

.stop-modal.active {
  display: flex;
  animation: modalIn 0.3s var(--ease-out);
}

@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.stop-modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-20);
  padding: var(--s-32);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2);
  text-align: center;
  animation: modalSlideUp 0.3s var(--ease-out);
}

@keyframes modalSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.stop-modal-content h3 {
  margin-bottom: var(--s-20);
}

.stop-modal-content .btn {
  width: 100%;
  margin-bottom: var(--s-8);
}

.stop-modal-timer {
  margin-top: var(--s-12);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ==========================================================
   OVERNIGHT BUTTONS
   Each button has distinct icon for colorblind
   ========================================================== */

.overnight-btn {
  width: 100%;
  margin-bottom: var(--s-8);
  justify-content: flex-start;
  text-align: left;
  min-height: 56px;
  font-size: var(--fs-base);
}

.overnight-btn:hover {
  border-color: var(--border-strong);
  background: var(--card-raised);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.overnight-btn:active {
  transform: scale(0.988);
  transition: transform 0.08s ease;
}

.overnight-btn[data-overnight="none"]::before    { content: "— "; }
.overnight-btn[data-overnight="vehicle"]::before { content: "🚛 "; }
.overnight-btn[data-overnight="hotel"]::before   { content: "🏨 "; }
.overnight-btn[data-overnight="home"]::before    { content: "🏠 "; }

.overnight-btn.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

/* ==========================================================
   RETROACTIVE ENTRY FORM
   ========================================================== */

.retro-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  margin-top: var(--s-16);
  text-align: left;
}

.retro-form label {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}

.retro-form input,
.retro-form select {
  padding: var(--s-12);
  border-radius: var(--r-8);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: var(--fs-base);
  min-height: 48px;
  transition: border-color var(--duration) var(--ease);
}

.retro-form input:focus,
.retro-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
  outline: none;
}

/* ==========================================================
   COUNTRY PICKER
   ========================================================== */

.country-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-10);
  margin-top: var(--s-16);
}

.country-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-20);
  font-size: var(--fs-base);
  border-radius: var(--r-16);
  transition: all var(--duration) var(--ease);
}

.country-btn:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.country-btn:active {
  transform: scale(0.97);
  box-shadow: none;
  transition: transform 0.08s ease;
}

.country-btn .country-flag {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.05em;
}

/* ==========================================================
   TIMECARD (veckoarbetstidskort)
   ========================================================== */

.timecard-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  margin-bottom: var(--s-24);
  padding: var(--s-20);
  background: var(--card-bg);
  border-radius: var(--r-16);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-1);
}

.timecard-header .label {
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timecard-header .value {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
}

.timecard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.timecard-table th,
.timecard-table td {
  border: 1px solid var(--border);
  padding: var(--s-6) var(--s-8);
  text-align: left;
  vertical-align: top;
}

.timecard-table th {
  background: var(--bg-subtle);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
}

.timecard-table tr.today {
  background: var(--primary-bg);
  /* COLORBLIND: left border marks today, not just background */
  border-left: 3px solid var(--primary);
}

.timecard-table .sum-row {
  font-weight: 800;
  background: var(--bg-subtle);
  border-top: 2px solid var(--border-strong);
  color: var(--text-strong);
}

.timecard-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--s-4));
  padding: 0 var(--s-4);
}

.timecard-date {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.timecard-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  max-width: 150px;
}

/* ==========================================================
   REGNR, COUNTRY DISPLAY, BORDER, ACTION ROW
   ========================================================== */

.regnr-field {
  margin-bottom: var(--s-20);
}

.country-display {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-16);
  flex-wrap: wrap;
}

.country-display[hidden] { display: none; }

.border-section {
  margin-top: var(--s-16);
}

.border-section[hidden] { display: none; }

.border-btn {
  width: 100%;
}

.border-log {
  margin-top: var(--s-8);
  font-size: var(--fs-sm);
}

.border-log-entry {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-10) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text);
}

.border-log-entry .crossing-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}

.border-log-entry .crossing-route {
  font-weight: 600;
}

.action-row {
  display: flex;
  gap: var(--s-12);
  margin-top: var(--s-20);
}

.action-row .btn {
  flex: 1;
}

/* ==========================================================
   MODAL SHARED
   ========================================================== */

.modal-actions {
  display: flex;
  gap: var(--s-12);
  margin-top: var(--s-24);
}

.modal-actions .btn {
  flex: 1;
}

.modal-hint {
  margin-top: var(--s-16);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

/* ==========================================================
   FLEET STATUS
   ========================================================== */

.fleet-status {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: var(--s-12) var(--s-16);
  background: var(--bg-subtle);
  border-radius: var(--r-8);
  border: 1px solid var(--border);
}

/* ==========================================================
   STAT INPUT (within stat grid)
   ========================================================== */

.stat-input {
  width: 100%;
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-8);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-strong);
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   WEEK VIEW HEADER CARD
   ========================================================== */

.week-header-card {
  background: var(--card-bg);
  border: 2px solid var(--primary);
  border-radius: var(--r-16);
  padding: var(--s-24);
  margin-bottom: var(--s-24);
  box-shadow: var(--shadow-glow), var(--shadow-1);
}

.week-header-card h2 {
  margin: 0 0 var(--s-20) 0;
  font-size: var(--fs-lg);
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.week-header-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-10);
  font-size: var(--fs-sm);
}

.week-header-grid strong {
  color: var(--text-strong);
}

.week-header-meta {
  margin-top: var(--s-20);
  padding-top: var(--s-16);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}

/* ==========================================================
   DAY CARD INTERNALS
   ========================================================== */

.day-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-16);
}

.day-card-header h3 {
  margin: 0;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.day-card-status {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
}

.day-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-10);
  margin-top: var(--s-16);
}

.day-card-stat .label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.day-card-stat .value {
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.day-card-stat .value.accent {
  color: var(--primary);
}

.day-card-note {
  margin-top: var(--s-16);
  padding: var(--s-10) var(--s-12);
  background: var(--bg-subtle);
  border-radius: var(--r-8);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
}

.day-card-regnr {
  font-size: var(--fs-xs);
  margin-bottom: var(--s-8);
  color: var(--muted);
}

/* COLORBLIND: day card status borders use patterns */
.day-card.status-vacation {
  border-left: 4px solid var(--ok);
}

.day-card.status-sick {
  border-left: 4px dotted var(--danger);
}

.day-card.status-off {
  border-left: 4px dashed var(--muted-2);
}

.day-card-violation {
  margin-top: var(--s-8);
}

/* ==========================================================
   TIMECARD EXTRAS
   ========================================================== */

.timecard-km {
  margin-top: var(--s-16);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.timecard-placeholder {
  margin-top: var(--s-24);
  padding: var(--s-24);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-16);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================
   LOG AREA
   ========================================================== */

.audit-log, .log-area {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-16);
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--s-20);
}

/* ==========================================================
   SETTINGS
   ========================================================== */

.settings-actions {
  display: flex;
  gap: var(--s-12);
  margin: var(--s-20) 0;
}

.settings-actions button {
  flex: 1;
  min-height: 52px;
}

.gdpr {
  margin-top: var(--s-24);
  padding: var(--s-24);
  background: var(--bg-subtle);
  border-radius: var(--r-16);
  border: 1px solid var(--border);
}

.gdpr h3 {
  color: var(--muted);
  margin-bottom: var(--s-16);
}

.gdpr button {
  display: block;
  width: 100%;
  margin-bottom: var(--s-10);
}

/* ==========================================================
   ENTRY CARD (dag-vyn)
   ========================================================== */

.entry-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  padding: var(--s-16) var(--s-20);
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s var(--ease),
              box-shadow 0.15s var(--ease),
              transform 0.15s cubic-bezier(0.2,0.8,0.2,1);
  animation: entryFadeIn 0.25s var(--ease-out) both;
}

.entry-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.entry-card .entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-10);
}

.entry-card .entry-type {
  font-weight: 700;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  letter-spacing: 0.01em;
}

.entry-card .entry-time {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.entry-card .entry-breaks {
  margin-top: var(--s-8);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.entry-card .entry-note {
  margin-top: var(--s-8);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: italic;
}

.entry-card .entry-details {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10);
  margin-top: var(--s-10);
  padding-top: var(--s-10);
  border-top: 1px solid var(--border);
}

/* ==========================================================
   OB SUMMARY
   ========================================================== */

.ob-summary {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-16);
  padding: var(--s-20);
  margin-top: var(--s-20);
  box-shadow: var(--shadow-1);
}

.ob-summary .ob-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

/* OB-titel ikon (cirkel = timme/krona) */
.ob-summary .ob-title::before {
  content: "◉";
  font-size: var(--fs-sm);
  opacity: 0.75;
}

.ob-summary .ob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10);
}

.ob-summary .ob-item {
  text-align: center;
  background: var(--bg-subtle);
  border-radius: var(--r-8);
  padding: var(--s-10) var(--s-8);
  border: 1px solid var(--border);
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.ob-summary .ob-item:hover {
  transform: scale(1.03);
  border-color: var(--border-strong);
}

.ob-summary .ob-item .ob-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--s-4);
}

.ob-summary .ob-item .ob-value {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   PRINT STYLES
   ========================================================== */

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt !important;
  }

  .app-header,
  .tabs,
  .controls,
  .status-buttons,
  #regnrField,
  #currentSession,
  #todayEntries,
  #todayOBSummary,
  #countryDisplay,
  #borderCrossingSection,
  .settings-actions,
  .gdpr,
  .audit-log,
  .no-print {
    display: none !important;
  }

  .view { display: block !important; }

  .timecard-table {
    font-size: 8pt;
    page-break-inside: auto;
  }

  .timecard-table th,
  .timecard-table td {
    border-color: #333;
    padding: 4px 6px;
  }

  .timecard-table th {
    background: #eee !important;
    color: #000 !important;
  }

  .timecard-table tr.today {
    background: #f0f5ff !important;
  }

  .timecard-header {
    border-color: #333;
    background: #f5f5f5 !important;
  }

  .timecard-header .label { color: #666 !important; }
  .timecard-header .value { color: #000 !important; }
}

.entry-breaks { display: none !important; }


/* Aktiv knapp-state — körning pågår (teal/grön, designsystem) */
.btn-active-start {
  background: linear-gradient(180deg, rgba(46,196,182,0.22), rgba(46,196,182,0.10)) !important;
  border-color: var(--ok) !important;
  border-style: solid !important;
  color: var(--ok-text) !important;
  box-shadow: 0 0 28px rgba(46,196,182,0.20), 0 4px 16px rgba(0,0,0,0.25) !important;
}
/* Aktiv rast — orange glow */
.btn-active-break {
  background: linear-gradient(180deg, rgba(255,166,48,0.22), rgba(255,166,48,0.10)) !important;
  border-color: var(--warning) !important;
  border-style: dotted !important;
  color: var(--warning-text) !important;
  box-shadow: 0 0 28px rgba(255,166,48,0.18), 0 4px 16px rgba(0,0,0,0.25) !important;
}
/* Aktiv stopp — röd */
.btn-active-stop {
  background: linear-gradient(180deg, rgba(255,107,74,0.22), rgba(255,107,74,0.10)) !important;
  border-color: var(--danger) !important;
  border-style: dashed !important;
  color: var(--danger-text) !important;
  box-shadow: 0 0 28px rgba(255,107,74,0.18), 0 4px 16px rgba(0,0,0,0.25) !important;
}
button.active { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.entry-breaks { display: none !important; } /* göm små rasterutor */
.quick-break-menu { display: none !important; } /* göm snabbrastmeny */
.quick-breaks { display: none !important; }     /* göm statiska snabbrastknappar */

/* Break timer färger — mörkt tema (designsystem) */
.break-green  { background: rgba(46,196,182,0.14);  color: var(--ok-text);      border: 1px solid var(--ok);      padding:6px 10px; border-radius:6px; display:inline-block; }
.break-yellow { background: rgba(255,166,48,0.14);  color: var(--warning-text); border: 1px solid var(--warning); padding:6px 10px; border-radius:6px; display:inline-block; }
.break-red    { background: rgba(255,107,74,0.14);  color: var(--danger-text);  border: 1px solid var(--danger);  padding:6px 10px; border-radius:6px; display:inline-block; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,107,74,0.25); } 70% { box-shadow: 0 0 0 12px rgba(255,107,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,74,0); } }

/* ==========================================================
   LIVE SESSION TIMER  (liveklocka HH:MM:SS)
   ========================================================== */

.session-timer {
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  padding: var(--s-12) 0 var(--s-8);
  line-height: 1;
}

/* ==========================================================
   KoV KORNINGSGRANSER  (kortid kvar)
   ========================================================== */

.driving-limits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  padding: var(--s-10) 0 var(--s-16);
}

.driving-limit-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-12) var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 0.15s var(--ease),
              border-color 0.15s var(--ease);
}

/* Micro-lift: lyfts 1px vid hover för taktil känsla */
.driving-limit-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.driving-limit-item .limit-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.driving-limit-item .limit-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.driving-limit-item.limit-warning {
  border-color: var(--warning);
  background: var(--warning-bg);
}
.driving-limit-item.limit-warning .limit-value {
  color: var(--warning-text);
}
/* COLORBLIND: ikonprefix på label vid varningsnivå */
.driving-limit-item.limit-warning .limit-label::before { content: "△ "; color: var(--warning-text); }

.driving-limit-item.limit-danger {
  border-color: var(--danger);
  background: var(--danger-bg);
  animation: pulse 1.5s infinite;
}
.driving-limit-item.limit-danger .limit-value {
  color: var(--danger-text);
}
/* COLORBLIND: ikonprefix på label vid kritisk nivå */
.driving-limit-item.limit-danger .limit-label::before  { content: "⚠ "; color: var(--danger-text); }

/* Avlång statusrad – spänner över hela bredden (båda kolumner).
   Liknande .current-session – används för Nattvila-raden. */
.driving-limit-wide {
  grid-column: 1 / -1;
  background: var(--primary-bg);
  border: 1px solid var(--primary);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-12);
  padding: var(--s-12) var(--s-16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
}
.driving-limit-wide .limit-label {
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 600;
}
.driving-limit-wide .limit-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  white-space: nowrap;
}
.driving-limit-wide.limit-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  border-left-color: var(--warning);
}
.driving-limit-wide.limit-warning .limit-label,
.driving-limit-wide.limit-warning .limit-value { color: var(--warning-text); }
.driving-limit-wide.limit-warning .limit-label::before { content: "△ "; }
.driving-limit-wide.limit-danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  border-left-color: var(--danger);
  animation: pulse 1.5s infinite;
}
.driving-limit-wide.limit-danger .limit-label,
.driving-limit-wide.limit-danger .limit-value { color: var(--danger-text); }
.driving-limit-wide.limit-danger .limit-label::before  { content: "⚠ "; }

/* ==========================================================
   RASTKNAPP - lagestillstand
   ========================================================== */

.big-btn.break.on-break {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning-text);
  border-style: solid;
  animation: breakPulse 2s ease-in-out infinite;
}

.big-btn.break.break-ending {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger-text);
  border-style: solid;
  animation: breakFlash 0.8s ease-in-out infinite;
}

/* Pulserande ring matchar --warning: #ffa630 */
@keyframes breakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,166,48,0.30); }
  50%       { box-shadow: 0 0 0 12px rgba(255,166,48,0); }
}

@keyframes breakFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ==========================================================
   SESSION TIMER – nu dold; visas inuti körningsknappen
   ========================================================== */
#sessionTimer { display: none !important; }

/* ==========================================================
   RASTVÄLJARE – bottom sheet (visas vid RAST-knapp-tryck)
   ========================================================== */
.break-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9000;
  align-items: flex-end;
  justify-content: center;
}
.break-picker-overlay.active { display: flex; }

.break-picker-sheet {
  width: 100%;
  max-width: 640px;
  background: var(--card-bg);
  border-radius: var(--r-20) var(--r-20) 0 0;
  padding: 20px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
}
.break-picker-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.break-picker-btn {
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  color: var(--text);
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--fs-lg);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--duration) var(--ease);
}
.break-picker-btn:hover { border-color: var(--border-strong); background: var(--panel); }
.break-picker-btn:active { background: var(--primary-bg); border-color: var(--primary); }
.break-picker-sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
  text-align: right;
  max-width: 55%;
}
.break-picker-cancel {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  color: var(--muted);
  font-size: var(--fs-base);
  padding: 14px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: all var(--duration) var(--ease);
}
.break-picker-cancel:hover { background: var(--panel); border-color: var(--border-strong); }
.break-picker-cancel:active { background: var(--bg-subtle); }

/* ==========================================================
   INLINE RASTVAL – visas direkt under RAST-knappen
   ========================================================== */
.break-inline-options {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.break-inline-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 12px 4px;
  cursor: pointer;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.15s var(--ease),
              background 0.15s var(--ease),
              box-shadow 0.15s var(--ease);
}
.break-inline-btn span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
  text-align: center;
}
.break-inline-btn:hover {
  border-color: var(--border-strong);
  background: var(--panel);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.break-inline-btn:active {
  background: var(--primary-bg);
  border-color: var(--primary);
  transform: scale(0.97);
  box-shadow: none;
}

.break-inline-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  color: var(--muted);
  font-size: var(--fs-md);
  padding: 12px 10px;
  cursor: pointer;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: all var(--duration) var(--ease);
}
.break-inline-cancel:active {
  background: var(--bg-subtle);
}

/* ==========================================================
   IKONER – Status-picker (visuell identitet via ::before)
   ========================================================== */
.status-picker-btn[data-status="normal"]       > span:first-child::before { content: "▶ "; }
.status-picker-btn[data-status="extra"]        > span:first-child::before { content: "⚡ "; }
.status-picker-btn[data-status="vacation"]     > span:first-child::before { content: "☀ "; }
.status-picker-btn[data-status="unpaid_leave"] > span:first-child::before { content: "⏸ "; }
.status-picker-btn[data-status="sick"]         > span:first-child::before { content: "✚ "; }
.status-picker-btn[data-status="off"]          > span:first-child::before { content: "◐ "; }

/* IKONER – Rast-picker (15/30/45 min) */
.break-picker-btn[data-min="15"] > span:first-child::before { content: "⏱ "; }
.break-picker-btn[data-min="30"] > span:first-child::before { content: "⏸ "; }
.break-picker-btn[data-min="45"] > span:first-child::before { content: "✔ "; }

/* ==========================================================
   KÖRNINGSKNAPP – visar timer i texten (KÖRNING HH:MM:SS)
   ========================================================== */
#inspectionBtn {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* ==========================================================
   AKTIVITETSLOGG – expanderbar lista
   ========================================================== */
.entry-expand-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-8);
  color: var(--muted);
  font-size: var(--fs-xs);
  padding: var(--s-8) var(--s-12);
  cursor: pointer;
  width: 100%;
  margin-top: var(--s-6);
  text-align: center;
  transition: all var(--duration) var(--ease);
}
.entry-expand-btn:hover { border-color: var(--primary); color: var(--primary); }
.entry-expand-btn:active { background: var(--primary-bg); }
.entries-older { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-6); }


/* ==========================================================
   DYGNSVILA – KoV-komplianssektion (Veckoöversikt)
   ========================================================== */
.rest-compliance-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-bottom: var(--s-16);
}

.rest-compliance-row {
  border-radius: var(--r-12);
  padding: var(--s-12) var(--s-16);
  border-left: 4px solid transparent;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left-width: 4px;
}

.rest-compliance-row .rest-period {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--s-4);
}

.rest-compliance-row .rest-status {
  font-size: var(--fs-base);
  font-weight: 700;
}

.rest-ok         { border-left-color: var(--ok); }
.rest-ok .rest-status { color: var(--ok-text); }

.rest-reduced    { border-left-color: var(--warning); }
.rest-reduced .rest-status { color: var(--warning-text); }

.rest-violation  { border-left-color: var(--danger); }
.rest-violation .rest-status { color: var(--danger-text); }

/* IKONER – kompliansrader (colorblind + ikon-alignment) */
.rest-ok        .rest-status::before  { content: "✓ "; }
.rest-reduced   .rest-status::before  { content: "△ "; }
.rest-violation .rest-status::before  { content: "✕ "; }

.rest-summary {
  border-radius: var(--r-8);
  padding: var(--s-8) var(--s-12);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-8);
}
.rest-summary.rest-reduced   { background: var(--warning-bg); color: var(--warning-text); }
.rest-summary.rest-violation { background: var(--danger-bg);  color: var(--danger-text); }

.rest-next-start {
  background: var(--bg-subtle);
  border-radius: var(--r-12);
  padding: var(--s-16);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  margin-top: var(--s-10);
  border: 1px solid var(--border);
}

/* ==========================================================
   RESPONSIV POLISH
   Finjuserar storlekar på mycket små och mellanstora skärmar
   ========================================================== */

/* Mycket smala skärmar (< 400px) — extra komprimering */
@media (max-width: 400px) {
  .big-btn {
    min-height: 62px;
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
  }

  .break-inline-options {
    gap: var(--s-4);
  }

  .break-inline-btn {
    font-size: var(--fs-sm);
    padding: 10px 2px;
    min-height: 52px;
  }

  /* OB-grid: 3 kolumner blir 2+1 på smal skärm */
  .ob-summary .ob-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Körningsgränser: staplas på smal skärm */
  .driving-limits {
    grid-template-columns: 1fr;
  }

  .driving-limit-wide {
    grid-column: 1;
  }
}

/* Mellanstora skärmar (≥ 600px) — större touchmål */
@media (min-width: 600px) {
  .big-btn {
    min-height: 72px;
    font-size: var(--fs-xl);
  }

  .break-inline-btn {
    min-height: 64px;
    font-size: var(--fs-md);
  }

  .warning-modal {
    padding: var(--s-40);
  }
}