/**
 * Form Base Stylesheet
 * Version: 3.4 - Lade till bakgrundsfärg på stackade rader (mobil)
 */

/* Grundläggande */
:root {
  --bravida-blue: #00489b; /* Mörkare blå */
  --bravida-light-blue: #d9e8f2; /* Ljusare blå bakgrund */
  --bravida-section-bg: #eaf2fa; /* Ljusblå för sektionstitlar */
  --bravida-green: #00a39b; /* Grön för OK-knappar */
  --bravida-orange: #f39c12; /* Orange för Edit */
  --row-bg-mobile: #f9f9f9; /* NY: Ljusgrå för stackade rader */
  --text-color: #333;
  --bg-color: #f4f6f8;
  --card-bg: #fff;
  --border-color: #ccc;
  --border-light: #e0e0e0;
  --header-height: 50px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 15px;
}

/* Header-stil */
header {
  background: var(--bravida-blue);
  color: #fff;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-size: 18px;
  font-weight: 600;
  position: fixed; /* Gör header fast */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* Se till att den ligger överst */
}
header a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 0;
}
header span:nth-child(2) {
  flex-grow: 1;
  text-align: center;
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header span:last-child:empty { display: none; }

.container {
  max-width: 900px;
  margin: calc(var(--header-height) + 20px) auto 20px auto; /* Starta under headern */
  padding: 20px;
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

h1 {
  color: var(--bravida-blue);
  margin: 0 0 15px 0;
  font-size: 1.8em;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
h2 {
  color: var(--bravida-blue);
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 1.4em;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

/* Formulärfält */
label { display: block; font-weight: 600; margin-bottom: 5px; color: #555; }
input[type="text"], input[type="date"], input[type="number"], textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1em; box-sizing: border-box; margin-bottom: 12px;
}
textarea { min-height: 80px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { margin-right: 6px; vertical-align: middle; }
label input[type="checkbox"], label input[type="radio"] { position: relative; top: -1px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 25px; }

/* Knappar */
button, a.button, a.ok, a.blue, a.gray, a.edit {
  display: inline-block; padding: 10px 18px; border-radius: 6px; border: none; cursor: pointer; font-size: 1em; font-weight: 600; text-decoration: none; text-align: center; transition: background-color 0.2s; box-sizing: border-box; /* Lade till detta */
}
button:disabled { background-color: #ccc; cursor: not-allowed; }
.blue, button.blue { background-color: var(--bravida-blue); color: #fff; }
.blue:hover, button.blue:hover:not(:disabled) { background-color: #003a80; }
.ok, a.ok { background-color: var(--bravida-green); color: #fff; }
.ok:hover { background-color: #007a73; }
.gray, button.gray { background-color: #e0e0e0; color: #333; }
.gray:hover, button.gray:hover { background-color: #bdbdbd; }
.edit { background-color: var(--bravida-orange); color: #fff; }
.edit:hover { background-color: #e68a00; }

/* Meddelanden */
.alert-ok, .alert-ok-email { background: #e8f5e9; color: #2e7d32; border-left: 5px solid #4caf50; padding: 12px 16px; margin-bottom: 15px; border-radius: 0 4px 4px 0; }
.alert-warn { background: #fff3e0; color: #e65100; border-left: 5px solid #ff9800; padding: 12px 16px; margin-bottom: 15px; border-radius: 0 4px 4px 0; }
.error-message { background: #ffe6e6; border-left: 5px solid #d32f2f; padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; display: none; }
.error-message.show { display: block; }
.error-message ul { margin: 5px 0 0 15px; padding: 0; }

/* Accordion */
.accordion-section { border: 1px solid var(--border-light); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.accordion-section summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background-color: #f9f9f9; cursor: pointer; font-weight: 600; border-bottom: 1px solid var(--border-light); }
.accordion-section[open] summary { border-bottom: 1px solid var(--border-light); }
.accordion-section summary::marker { content: '▶ '; }
.accordion-section[open] summary::marker { content: '▼ '; }
.summary-title { font-size: 1.1em; color: var(--bravida-blue); }
.summary-status { font-size: 0.9em; font-weight: normal; color: #555; }
.summary-status.summary-incomplete { color: #d32f2f; font-weight: 600; }
.accordion-content { padding: 15px; }

/* Tabeller i Accordion */
.section-title {
  font-weight: bold; margin: 15px 0 8px 0; padding: 6px 10px; border-bottom: none; color: var(--bravida-blue); background-color: var(--bravida-section-bg); border-radius: 4px;
}
table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
th, td { border: 1px solid var(--border-light); padding: 8px 10px; text-align: left; vertical-align: top; }
thead th { background-color: #f1f4f8; font-weight: 600; font-size: 0.9em; }
td { font-size: 0.95em; }
.ctrl-row { display: flex; flex-wrap: wrap; gap: 8px 15px; justify-content: center; }
.ctrl-row label { white-space: nowrap; margin-bottom: 0; }
.incomplete-row td { background-color: #fff3e0 !important; }

/* Signatur */
.sig-box { border: 1px solid var(--border-color); border-radius: 6px; padding: 15px; background: #fdfdfd; }
.sig-canvas-wrapper { position: relative; width: 100%; max-width: 600px; margin: 0 auto; border: 1px dashed var(--border-color); background: #fff; }
.sig-canvas-wrapper canvas { display: block; width: 100% !important; height: auto !important; min-height: 150px; touch-action: none; }
.sig-toolbar { text-align: center; margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.sig-toolbar button { padding: 6px 12px; font-size: 0.9em; }

/* Historik */
.history-section, .history { margin-top: 30px; padding-top: 20px; border-top: 2px solid #eee; }
.history-table { width: 100%; margin-top: 10px; }
.history-table th, .history-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-light); }
.history-table th { background: #f5f5f5; font-weight: 600; }

.footer-note { font-size: 0.85em; color: #777; text-align: center; margin-top: 10px; }
.muted { font-size: 0.9em; color: #666; }

/* Responsivitet */
@media (max-width: 768px) {
  .container { margin: calc(var(--header-height) + 10px) auto 10px auto; padding: 15px; }
  header { font-size: 16px; }
  header a { font-size: 16px; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.2em; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Stackade tabeller */
  table thead { display: none; }
  table tr {
    display: block; margin-bottom: 10px; /* Minskad marginal */ border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden;
    background: var(--row-bg-mobile); /* Ljusgrå bakgrund */ padding: 5px; /* Lite luft inuti kortet */
  }
  table td { display: block; text-align: right; border: none; border-bottom: 1px dotted var(--border-light); padding: 8px 5px 8px 50%; /* Justerad padding */ position: relative; background: transparent; /* Ta bort ev. td-bakgrund */ }
  table td:last-child { border-bottom: none; }
  table td::before {
    content: attr(data-label);
    position: absolute; left: 10px; width: calc(50% - 20px); padding-right: 10px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; font-size: 0.9em; /* Lite mindre label */
  }
  table td[colspan="3"] { padding: 8px 5px; text-align: center; } /* Justerad padding */
  table td[colspan="3"]::before { content: none; }
  .ctrl-row { justify-content: space-around; gap: 5px 10px; /* Mindre gap */ }
  .ctrl-row label { font-size: 0.9em; } /* Mindre text på checkboxar */

  .sig-canvas-wrapper canvas { min-height: 180px; }
  .sig-toolbar { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  header span:nth-child(2) { font-size: 14px; }
  header a { font-size: 14px; }
  h1 { font-size: 1.3em; }
  button, a.button, a.ok, a.blue, a.gray, a.edit { width: 100%; margin-bottom: 8px; }
  .button-row { flex-direction: column; } /* Stacka knappar i utkorgen på små skärmar */
  .mark-button { margin-left: 0; } /* Nollställ marginal */
}