:root {
  --ink: #1f2933;
  --muted: #66727f;
  --line: #d7dde3;
  --surface: #ffffff;
  --bg: #eef1f4;
  --purple: #255b85;
  --purple-dark: #1c4769;
  --green: #32745f;
  --orange: #9a672d;
  --blue: #356b95;
  --shadow: none;
}

html, body {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3,
.topbar h1,
.section-head h2,
.card h2,
.entity-main h3,
.rate-row h3,
.timer,
.brand,
.employee-running-head strong,
.running-customer strong,
.running-project-name strong {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: normal;
}

.login-card h1,
.booking-card h1,
.portal-login-card h1,
.portal-header h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.sidebar {
  width: 224px;
  padding: 28px 16px 22px;
  background: #1e2935;
  border-right: 1px solid #101821;
}

.brand {
  gap: 10px;
  margin: 0 10px 36px;
  font-size: 20px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: #3c7098;
  box-shadow: none;
  font-size: 15px;
}

.sidebar nav {
  gap: 2px;
}

.nav-link {
  gap: 0;
  padding: 11px 12px;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #bec8d1;
  font-size: 13px;
  font-weight: 500;
}

.nav-link:hover {
  background: #273746;
  color: #ffffff;
}

.nav-link.active {
  border-left-color: #70a4c8;
  background: #2b3c4c;
  color: #ffffff;
}

.sidebar-foot {
  padding: 14px 10px 0;
  border-top: 1px solid #344453;
  color: #aeb9c3;
  font-size: 11px;
}

.status-dot {
  border-radius: 1px;
  background: #5c9b7f;
  box-shadow: none;
}

.sidebar-toggle {
  top: 29px;
  right: -48px;
  width: auto;
  height: 30px;
  padding: 0 9px;
  border: 1px solid #c9d0d7;
  border-radius: 2px;
  background: #ffffff;
  color: #374553;
  font-size: 10px;
  font-weight: 700;
}

.sidebar-collapsed .sidebar {
  width: 112px;
}

.sidebar-collapsed .main {
  margin-left: 112px;
}

.sidebar-collapsed .nav-link {
  justify-content: flex-start;
  padding: 10px 8px;
  font-size: 11px;
  text-align: left;
}

.sidebar-collapsed .sidebar-toggle {
  transform: none;
}

.main {
  margin-left: 224px;
  padding: 38px 44px 64px;
}

.topbar {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.topbar h1,
.section-head h2 {
  font-weight: 700;
}

.eyebrow {
  color: #536777;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
}

.date-pill,
.logout-btn,
.btn,
.notification-button,
.calendar-nav,
.calendar-today,
.project-report-link,
.filter-reset {
  border-radius: 2px;
  box-shadow: none;
}

.date-pill {
  background: transparent;
  border-color: #c9d0d7;
}

.btn {
  padding: 11px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.btn-primary,
.btn-start {
  background: #255b85;
}

.btn-primary:hover,
.btn-start:hover {
  background: #1c4769;
  transform: none;
}

.btn-stop {
  border-color: #c9a5a8;
  background: #ffffff;
  color: #8e343b;
}

.btn-delete,
.message-reply-delete {
  border: 1px solid #c9a5a8;
  background: #ffffff;
  color: #8e343b;
}

input,
select,
textarea {
  border-color: #cbd2d9;
  border-radius: 2px;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #255b8526;
  border-color: #255b85;
}

.card,
.stat-card,
.entity-card,
.rate-row,
.wide,
.modal-box,
.portal-header,
.portal-stats article,
.portal-entry,
.portal-empty,
.portal-messages-card,
.booking-card,
.login-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: none;
}

.stats-grid {
  gap: 10px;
}

.stat-card {
  min-height: 112px;
  padding: 18px 19px;
  border-top: 3px solid #66849a;
  align-items: flex-start;
}

.stat-card.today-stat {
  border-color: var(--line);
  border-top-color: #255b85;
  background: #ffffff;
}

.stat-card:nth-child(2),
.stat-card:nth-child(4) {
  border-top-color: #32745f;
}

.stat-card:nth-child(5),
.stat-card:nth-child(6) {
  border-top-color: #8a6a46;
}

.stat-card strong {
  margin: 7px 0 3px;
  font-size: 22px;
  font-weight: 700;
}

.count,
.tag,
.live-badge,
.running-worktype,
.entry-status-form select,
.portal-status {
  border-radius: 2px;
}

.live-badge {
  border: 1px solid #9ab9ac;
  background: #edf5f1;
  color: #326a55;
}

.live-badge i {
  display: none;
}

.rfid-scanner {
  grid-template-columns: minmax(190px, .9fr) minmax(130px, .5fr) minmax(240px, 1.2fr) auto;
  border: 1px solid #334b5e;
  border-radius: 3px;
  background: #263b4c;
  box-shadow: none;
}

.rfid-scanner small {
  color: #bdc9d2;
}

.running-context,
.running-tariff-form,
.running-log-context,
.no-running,
.check-label,
.paste-zone,
.filtered-cost strong {
  border-radius: 3px;
  background: #f4f6f8;
}

.running-context {
  border-color: #cfd6dc;
}

.project-accent,
.project-cell i,
.project-dot,
.project-color {
  border-radius: 1px;
}

.project-color {
  width: 8px;
  height: 46px;
  flex: none;
}

.running-project-name strong {
  color: #234f70;
}

.live-cost strong {
  color: #28644f;
}

.avatar,
.employee-avatar {
  border-radius: 3px;
  background: #dfe8ef;
  color: #254e6d;
}

.entity-grid {
  gap: 10px;
}

.entity-card,
.rate-row {
  padding: 17px 18px;
}

.rate-row > div:first-child {
  flex: 1;
}

.rate-information {
  max-width: 720px;
  margin: 8px 0 0;
  color: #465866;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

.rate-prices {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.rate-prices > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.rate-prices strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.rate-prices small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.maintenance-tag {
  border-color: #a9bda9;
  background: #edf3ed;
  color: #315b3a;
}

.booking-tariff-info {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid #bfd0dc;
  border-radius: 10px;
  background: #f3f7fa;
}

.booking-date-navigation {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.booking-date-navigation label { margin: 0; }

.booking-date-button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #c9d2dc;
  border-radius: 9px;
  background: #fff;
  color: #24384a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.booking-date-button:hover:not(:disabled) { background: #edf4f8; border-color: #8ca5b8; }
.booking-date-button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 620px) {
  .booking-date-navigation { grid-template-columns: 1fr 1fr; }
  .booking-date-navigation label { grid-column: 1 / -1; grid-row: 1; }
}

.booking-tariff-info > span {
  color: #607789;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.booking-tariff-info > strong {
  color: #203f57;
  font-size: 15px;
}

.booking-tariff-info small {
  color: #526575;
  font-size: 11px;
}

.entity-actions,
.row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.icon-btn,
.entity-actions .icon-btn,
.message-actions .delete-icon,
.row-actions .icon-btn {
  width: auto;
  height: auto;
  padding: 7px 9px;
  border: 1px solid #cbd2d9;
  border-radius: 2px;
  background: #ffffff;
  color: #354553;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.icon-btn:hover,
.entity-actions .icon-btn:hover,
.row-actions .icon-btn:hover {
  border-color: #7f98aa;
  background: #edf2f5;
  color: #203e55;
}

.entity-actions .delete-icon,
.row-actions form .icon-btn {
  color: #8e343b;
}

.project-report-link {
  padding: 7px 9px;
  border: 1px solid #99adbb;
  background: #edf2f5;
  color: #244f6e;
}

.empty {
  min-height: 110px;
  justify-content: center;
  padding: 30px;
  border-radius: 3px;
}

.empty div {
  display: none;
}

.modal {
  background: rgba(20, 28, 36, .68);
  backdrop-filter: none;
}

.modal-box {
  border-top: 4px solid #255b85;
  padding: 28px;
}

.modal-close {
  top: 14px;
  right: 16px;
  width: auto;
  height: auto;
  padding: 6px 8px;
  border: 1px solid #cbd2d9;
  border-radius: 2px;
  background: #ffffff;
  color: #465562;
  font-size: 0;
  font-weight: 700;
}

.modal-close::after {
  content: "Schließen";
  font-size: 10px;
}

.toast,
.appointment-form-status,
.portal-message-result,
.booking-message {
  border-radius: 2px;
  box-shadow: none;
}

.toast.success,
.appointment-form-status.success,
.portal-message-result.success,
.booking-message.success {
  border: 1px solid #9ab9ac;
  background: #edf5f1;
  color: #2d654f;
}

.toast.error,
.appointment-form-status.error,
.portal-message-result.error,
.booking-message.error {
  border: 1px solid #c9a5a8;
  background: #f8eeee;
  color: #87343b;
}

.calendar-card {
  border-radius: 4px;
}

.calendar-weekdays {
  border-radius: 3px 3px 0 0;
  background: #e8edf1;
}

.calendar-date {
  border-radius: 2px;
}

.calendar-date:hover {
  background: #dfe8ef;
  color: #234f70;
  transform: none;
}

.calendar-day.today .calendar-date {
  background: #255b85;
}

.calendar-event,
.upcoming-item,
.upcoming-date {
  border-radius: 2px;
}

.calendar-event.timed {
  background: #dfe9f0;
  color: #234f70;
}

.calendar-event.all-day {
  background: #e0eee8;
  color: #2d654f;
}

.calendar-nav {
  width: auto;
  padding: 0 12px;
  font-size: 10px;
}

.notification-button {
  border-color: #9aabba;
  background: #edf2f5;
  color: #244f6e;
}

.upcoming-date {
  background: #dfe8ef;
  color: #244f6e;
}

.booking-setting-row,
.external-booking-info {
  border-radius: 3px;
}

.booking-slots-wrap {
  border-color: #cbd2d9;
  border-radius: 3px;
  background: #f5f7f8;
}

.booking-slot {
  border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
}

.booking-slot.available {
  border-color: #a9c7bb;
  background: #e4efea;
  color: #285f4a;
}

.booking-slot.available:hover {
  border-color: #608d7a;
  background: #d8e8e1;
}

.booking-slot.available.selected {
  border-color: #285f4a;
  background: #32745f;
  box-shadow: none;
}

.booking-slot.occupied {
  background: #e4e7ea;
  color: #77818a;
}

.protocol-record,
.protocol-record:nth-child(3n+2),
.protocol-record:nth-child(3n),
.portal-protocol,
.portal-protocol:nth-child(3n+2),
.portal-protocol:nth-child(3n),
.employee-reply,
.portal-team-reply {
  border-radius: 2px;
  border-left: 4px solid #255b85;
  background: #e9eff4;
  box-shadow: none;
  color: var(--ink);
}

.protocol-record *,
.protocol-record:nth-child(3n+2) *,
.protocol-record:nth-child(3n) * {
  color: var(--ink);
}

.message-avatar {
  border-radius: 3px;
  background: #dfe8ef;
  color: #254e6d;
}

.customer-message {
  border-radius: 3px;
  box-shadow: none;
}

.customer-message.unread {
  border-left: 4px solid #255b85;
  background: #f7f9fb;
}

.customer-message.read {
  opacity: 1;
}

.message-reply-form textarea {
  border-radius: 2px;
  background: #ffffff;
}

.login-page,
.booking-page,
.portal-page {
  background: #e9edf1;
}

.login-card,
.booking-card,
.portal-login-card {
  border-top: 5px solid #255b85;
}

.portal-header,
.portal-entry,
.portal-messages-card,
.portal-stats article {
  background: #ffffff;
}

.portal-protocol {
  border-color: #53758e;
}

.portal-image-preview button,
.image-preview-close {
  width: auto;
  height: auto;
  padding: 8px 11px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
}

.log-image button,
.protocol-delete {
  width: auto;
  height: auto;
  padding: 5px 7px;
  border-radius: 2px;
  font-size: 9px;
}

@media (max-width: 780px) {
  .sidebar {
    height: 104px;
    padding: 8px;
    border-top: 1px solid #101821;
    border-right: 0;
  }

  .sidebar nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }

  .nav-link {
    min-height: 40px;
    justify-content: center;
    padding: 7px 3px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    font-size: 10px;
  }

  .nav-link.active {
    border-left: 0;
    border-bottom-color: #70a4c8;
  }

  .main,
  .sidebar-collapsed .main {
    margin-left: 0;
    padding-bottom: 128px;
  }

  .sidebar-toggle {
    display: none;
  }

  .rfid-scanner {
    grid-template-columns: 1fr 1fr;
  }

  .rfid-scanner input {
    grid-column: 1 / -1;
  }
}

/* Kundenkarten: Inhalte und Aktionen bekommen getrennte, ruhige Bereiche. */
[data-panel="customers"] .entity-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  row-gap: 12px;
}

[data-panel="customers"] .entity-main {
  width: 100%;
}

[data-panel="customers"] .entity-main > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-panel="customers"] .entity-main .tag {
  display: inline-flex;
  margin: 0;
  align-items: center;
  white-space: nowrap;
}

[data-panel="customers"] .entity-actions {
  grid-column: 2;
  width: 100%;
  padding-top: 11px;
  justify-content: flex-end;
  border-top: 1px solid #e4e8ec;
}

@media (max-width: 520px) {
  [data-panel="customers"] .entity-actions {
    grid-column: 1 / -1;
  }
}

.pause-counter {
  display: flex;
  max-width: 330px;
  margin: 4px auto 18px;
  padding: 10px 14px;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  border: 1px solid #efc7ca;
  border-radius: 10px;
  background: #fff7f7;
}

.pause-counter span,
.pause-counter small {
  color: #8b5559;
  font-size: 10px;
  font-weight: 700;
}

.pause-counter strong {
  color: #c4313d;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.pause-counter.active {
  border-color: #d66b73;
  background: #fff0f1;
}

.timer-paused {
  color: #75808a;
}

.pause-actions {
  grid-template-columns: 1fr 1fr auto;
}

.btn-pause {
  width: 100%;
  border: 1px solid #d99ba0;
  background: #fff3f3;
  color: #a52f39;
}

.btn-resume {
  width: 100%;
  border: 1px solid #95baa9;
  background: #edf7f2;
  color: #27654f;
}

.other-worker.paused .status-dot {
  background: #c4313d;
}

@media (max-width: 600px) {
  .pause-actions {
    grid-template-columns: 1fr;
  }

  .pause-actions .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .main {
    padding-left: 13px;
    padding-right: 13px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-card {
    min-height: 105px;
  }

  .section-head {
    flex-direction: column;
  }

  .rfid-scanner {
    grid-template-columns: 1fr;
  }

  .rfid-scanner input,
  .rfid-scanner .btn {
    grid-column: 1;
  }
}

.minimum-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

/* Freundlichere Rundungen und eine klar erkennbare Navigation. */
.brand-mark {
  border-radius: 9px;
}

.nav-link {
  gap: 11px;
  border-left: 0;
  border-radius: 9px;
}

.nav-link.active {
  border-left: 0;
  box-shadow: inset 3px 0 #70a4c8;
}

.nav-icon {
  display: grid;
  width: 19px !important;
  height: 19px;
  place-items: center;
  flex: 0 0 19px;
  color: #9eb5c7;
  font-size: inherit !important;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
  color: #ffffff;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link[data-tab="dashboard"] .nav-icon svg {
  fill: currentColor;
  stroke: none;
}

.nav-label {
  width: auto !important;
  font-size: inherit !important;
  text-align: left !important;
}

.sidebar-toggle {
  display: flex;
  top: 30px;
  right: -15px;
  width: 30px;
  height: 30px;
  padding: 0;
  gap: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(18, 32, 44, .12);
}

.sidebar-toggle-label {
  display: none;
}

.sidebar-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.card,
.stat-card,
.entity-card,
.rate-row,
.wide,
.modal-box,
.portal-header,
.portal-stats article,
.portal-entry,
.portal-empty,
.portal-messages-card,
.booking-card,
.login-card,
.customer-message,
.rfid-scanner,
.running-context,
.running-tariff-form {
  border-radius: 12px;
}

input,
select,
textarea,
.btn,
.notification-button,
.calendar-nav,
.calendar-today,
.project-report-link,
.filter-reset,
.logout-btn,
.date-pill,
.icon-btn,
.entity-actions .icon-btn,
.row-actions .icon-btn {
  border-radius: 8px;
}

.tag,
.count,
.live-badge,
.entry-status-form select,
.message-count-badge {
  border-radius: 999px;
}

@media (min-width: 781px) {
  .sidebar-collapsed .sidebar {
    width: 78px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .sidebar-collapsed .main {
    margin-left: 78px;
  }

  .sidebar-collapsed .brand {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }

  .sidebar-collapsed .brand > span:last-child,
  .sidebar-collapsed .nav-label {
    display: none;
  }

  .sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 11px;
  }

  .sidebar-collapsed .sidebar-foot {
    text-align: center;
    font-size: 0;
  }

  .sidebar-collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
  }
}

@media (max-width: 780px) {
  .sidebar-toggle {
    display: none;
  }

  .nav-link {
    gap: 3px;
    border-radius: 8px;
  }

  .nav-link.active .nav-label {
    text-align: center !important;
  }

  .nav-link.active {
    box-shadow: inset 0 -2px #70a4c8;
  }

  .nav-icon svg {
    width: 16px;
    height: 16px;
  }
}