/* ===========================
   Base / tokens
   =========================== */
:root{
  --bg:#f4f7f6;
  --card:#fff;
  --stroke:#e7e7e7;
  --shadow:0 1px 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);

  --blue:#0b5ed7;      --blue-hover:#084db3;
  --green:#2ea44f;     --green-hover:#238636;
  --amber:#f59e0b;     --amber-hover:#d97706;
  --red:#ef4444;       --red-hover:#dc2626;
}

html, body{
  height:auto; min-height:100%;
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--bg);
}

/* ===========================
   Login
   =========================== */
.login-container{ display:flex; justify-content:center; align-items:center; min-height:100vh; }
.login-form{
  background:#fff; padding:20px; border-radius:5px; box-shadow:0 2px 4px rgba(0,0,0,.2);
  text-align:center; width:100%; max-width:400px;
}
.login-form h2, .login-error{ margin-bottom:20px; }
.login-form input[type="text"], .login-form input[type="password"]{
  width:calc(100% - 20px); padding:10px; margin-bottom:10px; border:1px solid #ddd; border-radius:4px;
}
.login-error{ color:#D8000C; background:#FFD2D2; padding:10px; border-radius:4px; font-size:14px; }
.login-button{ background:var(--blue); color:#fff; border:none; padding:10px; border-radius:4px; cursor:pointer; transition:.2s; font-size:16px; text-decoration:none; }
.login-button:hover{ background:var(--blue-hover); }
.fa-icon{ margin-right:8px; vertical-align:middle; }
.fa-icon i{ font-size:20px; color:var(--blue); }

/* ===========================
   Headings / layout
   =========================== */
h2{ color:#0056b3; margin-bottom:15px; }
.main-content{ width:100%; }
.main-content > div{ margin-bottom:30px; }

.default-section, .calendar-section, .patients-section{ max-width:800px; margin:auto; }

/* ===========================
   Calendar
   =========================== */
.calendar{ width:auto; margin:10px auto; border-collapse:collapse; font-size:.9em; }
.calendar caption{
  text-align:left; padding:10px; background:#0056b3; color:#fff; font-size:1.2em; font-weight:bold;
}
.calendar th, .calendar td{
  padding:5px; border:1px solid #ddd; text-align:center; vertical-align:middle; background:#fafafa;
}
.calendar input[type='checkbox']{ margin-top:5px; transform:scale(1.2); cursor:pointer; }
.calendar .weekday{ background:#d9eed8; }
.calendar .weekend{ background:#fddddd; }
.calendar td.current-day{ background:#ffd700; font-weight:bold; }
.calendar .week-number{ font-weight:bold; text-align:center; background:#e6e6e6; }
.holiday{ background:#ff9999 !important; }

@media (max-width:600px){ .calendar{ font-size:.8em; } }
@media (max-width:400px){ .calendar{ font-size:.7em; } }

.calendar-container{ text-align:center; }
.calendar-header{ display:flex; justify-content:center; align-items:center; margin-bottom:20px; }

/* Calendar toggle button */
.calendar-section > button{
  appearance:none; background:#fff; color:var(--blue);
  border:1.5px solid var(--blue); border-radius:10px;
  min-height:44px; min-width:44px; padding:10px 14px;
  font-weight:600; cursor:pointer; box-shadow:var(--shadow);
  transition:background-color .2s, color .2s, border-color .2s, transform .05s;
}
.calendar-section > button:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.calendar-section > button:active{ transform:translateY(1px); }
.calendar-section > button:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(11,94,215,.25); }
@media (max-width:640px){ .calendar-section > button{ width:100%; } }
.calendar-section > button::before{
  content:'▾'; display:inline-block; margin-right:8px; transform:rotate(-90deg); transition:transform .2s;
}
.calendar-section > button.is-open::before{ transform:rotate(0deg); }

/* ===========================
   Patient cards
   =========================== */
.patient-card{
  display:flex; flex-direction:row; align-items:stretch;
  background:var(--card); padding:20px; border-radius:5px; box-shadow:0 2px 4px rgba(0,0,0,.2);
  margin-bottom:20px; border:1px solid #e8e8e8;
}
.patient-info{ flex:2; padding-right:20px; border-right:1px solid #eee; }
.patient-info strong{ color:#0056b3; }
.upcoming-visits{ flex:3; padding:0 20px; border-right:1px solid #eee; }
.upcoming-visits h3{ margin:0; color:#0056b3; }
.individual-visit{ margin:8px 0; }

/* Buttons column */
.patient-buttons{
  flex:1; padding-left:20px;
  display:grid; gap:10px; align-items:stretch; grid-template-columns:1fr;
}
@media (min-width:720px){
  .patient-buttons{ grid-template-columns:1fr 1fr; }
  .patient-buttons .add-visit-button{ grid-column:1 / -1; }
}

/* ===========================
   Feedback
   =========================== */
.feedback-section{ padding:10px; margin-bottom:20px; }
.error-message, .success-message{ padding:10px; border-radius:4px; font-size:14px; margin-bottom:10px; }
.error-message{ color:#D8000C; background:#FFD2D2; }
.success-message{ color:#4F8A10; background:#DFF2BF; }

/* ===========================
   Buttons (unified system)
   =========================== */
.add-button, .logout-button, .save-patient-button, .suggest-visit-button,
.add-visit-button, .edit-button, .delete-button, .back-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; padding:10px 14px;
  border-radius:10px; font-size:15px; line-height:1; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .05s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Primary (blue) */
.add-button, .logout-button, .save-patient-button, .suggest-visit-button, .back-button{
  background:var(--blue); color:#fff; border-color:rgba(0,0,0,.02);
}
.add-button:hover, .logout-button:hover, .save-patient-button:hover,
.suggest-visit-button:hover, .back-button:hover{ background:var(--blue-hover); }

/* Success (green) */
.add-visit-button{ background:var(--green); color:#fff; border-color:rgba(0,0,0,.02); }
.add-visit-button:hover{ background:var(--green-hover); }

/* Warning (amber) */
.edit-button{ background:var(--amber); color:#fff; border-color:rgba(0,0,0,.02); }
.edit-button:hover{ background:var(--amber-hover); }

/* Danger (red) */
.delete-button{ background:var(--red); color:#fff; border-color:rgba(0,0,0,.02); }
.delete-button:hover{ background:var(--red-hover); }

/* Pseudo-icon spacing if used */
.edit-button:before, .delete-button:before{ margin-right:6px; }

/* Pressed + focus */
.add-button:active, .logout-button:active, .save-patient-button:active,
.suggest-visit-button:active, .add-visit-button:active,
.edit-button:active, .delete-button:active, .back-button:active{ transform:translateY(1px); }
.add-button:focus-visible, .logout-button:focus-visible, .save-patient-button:focus-visible,
.suggest-visit-button:focus-visible, .add-visit-button:focus-visible,
.edit-button:focus-visible, .delete-button:focus-visible, .back-button:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(11,94,215,.25);
}

/* “Tilføj ny patient” gets a plus by default */
.add-button::before{
  content:"\f067"; /* Font Awesome 'plus' */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  display:inline-block; margin-right:8px; line-height:1;
}
/* but allow removing it per-button */
.add-button.no-icon::before{ content:none !important; }
.add-button.no-icon i, .add-button.no-icon .fa, .add-button.no-icon .fas{ display:none !important; }

/* ===========================
   Visits – spacing & compact actions
   =========================== */
.individual-visit{ margin:10px 0 14px; }
.individual-visit .visit-text{ margin-bottom:8px; }
.visit-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.btn-compact{ padding:8px 12px; min-height:40px; border-radius:10px; font-size:14px; line-height:1.1; }
@media (max-width:480px){ .btn-compact{ min-height:44px; } }

/* ===========================
   Forms
   =========================== */
.form-section{
  background:#fff; padding:20px; border-radius:5px; box-shadow:0 2px 4px rgba(0,0,0,.2);
  max-width:600px; margin:20px auto; text-align:left;
}
.form-group{ margin-bottom:15px; text-align:center; }
.form-group label{ display:block; margin-bottom:5px; font-weight:bold; color:#0056b3; }
.form-control{
  width:100%; text-align:center; padding:10px; margin-bottom:10px;
  border:1px solid #ddd; border-radius:4px; box-sizing:border-box;
}
.form-control select{ text-align-last:center; -moz-text-align-last:center; }

/* ===========================
   Patient search + utilities
   =========================== */
.patient-search{ max-width:800px; margin:0 auto 15px; }
.patient-search .form-control{ text-align:left; }
.inline-form{ display:inline; }

/* ===========================
   Dagens rute: cards + log
   =========================== */
.day-visits{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 20px; }
.day-visits .visit-details{
  background:#fff; border:1px solid var(--stroke); border-radius:6px;
  padding:12px 14px; box-shadow:var(--shadow);
}
.action-log{
  background:#fff; border:1px solid var(--stroke); border-radius:6px;
  padding:10px 12px; box-shadow:var(--shadow);
}
.action-item{ padding:6px 0; border-bottom:1px dashed #e5e5e5; font-size:15px; }
.action-item:last-child{ border-bottom:0; }
.action-item strong{ display:inline-block; width:60px; }
.visit-details a{ color:#0056b3; text-decoration:none; }
.visit-details a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .patient-card{ flex-direction:column; }
  .patient-info, .upcoming-visits, .patient-buttons{ border-right:0; padding:0; margin-bottom:10px; }
}
@media (max-width:700px){ .day-visits{ grid-template-columns:1fr; } }

/* ===========================
   Beregn besøgsforslag – tidy grid
   =========================== */
.suggest-visit-form{
  display:grid; grid-template-columns:1fr; gap:12px 16px; padding:16px;
  background:var(--card); border:1px solid var(--stroke); border-radius:6px; box-shadow:var(--shadow);
}
.suggest-visit-form label{
  margin:0; font-weight:600; color:#0056b3; text-align:left; white-space:nowrap;
}
.suggest-visit-form select,
.suggest-visit-form input[type="date"],
.suggest-visit-form input[type="time"]{
  width:100%; min-height:44px; font-size:16px; font-variant-numeric:tabular-nums;
}
.suggest-visit-form .suggest-visit-button{ grid-column:1 / -1; justify-self:stretch; margin-top:4px; }
@media (min-width:640px){
  .suggest-visit-form{ grid-template-columns:minmax(160px,220px) 1fr; align-items:center; }
  .suggest-visit-form label{ text-align:right; padding-right:8px; }
  .suggest-visit-form .suggest-visit-button{ justify-self:end; width:auto; }
}

/* ===========================
   Route warnings
   =========================== */
.warning{ padding:10px; margin:10px 0; border-radius:5px; font-size:16px; display:flex; align-items:center; }
.hard-fail{ background:#f8d7da; color:#721c24; }
.soft-fail{ background:#fff3cd; color:#856404; }
.warning i{ margin-right:10px; font-size:24px; }

/* ===========================
   Map
   =========================== */
.route-map{
  height:380px; border:1px solid var(--stroke); border-radius:6px; box-shadow:var(--shadow); margin-top:16px;
}
@media (max-width:640px){ .route-map{ height:300px; } }
.mb-marker{
  width:28px; height:28px; border-radius:50%; background:#0b5ed7; color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* ===========================
   One-line select + button
   =========================== */
.single-row-form{
  display:flex; gap:12px; align-items:center; padding:16px;
  background:var(--card); border:1px solid var(--stroke); border-radius:6px; box-shadow:var(--shadow);
}
.single-row-form select{ flex:1 1 320px; min-height:44px; }
@media (max-width:640px){
  .single-row-form{ flex-direction:column; align-items:stretch; }
  .single-row-form .add-button{ width:100%; }
}

/* Compact single-select card */
.select-row{ display:grid; gap:12px; }
.single-select{
  display:block; padding:12px; background:var(--card); border:1px solid var(--stroke);
  border-radius:6px; box-shadow:var(--shadow);
}
.single-select select{ width:100%; min-height:44px; font-size:16px; line-height:1.2; }
@media (min-width:640px){
  .select-row{ grid-template-columns:1fr auto; align-items:center; }
}

/* ===========================
   Top "næstkommende kørselsdag" button – LEFT aligned
   =========================== */
.top-bar{
  display:flex; justify-content:flex-start; /* <-- left aligned */
  gap:12px;
  margin:8px auto;
}
.top-bar .add-button{ margin:0; }