@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --bg0: #f7fbff;
  --bg1: #e6efff;
  --card: rgba(255, 255, 255, 0.88);
  --line: #c9d7ef;
  --text: #0d1b2b;
  --muted: #4a5f7c;
  --primary: #145af2;
  --secondary: #0e2a52;
  --good: #0ea271;
  --warn: #c43b3b;
  --chip: #edf3ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, #d6e6ff 0%, transparent 42%),
    radial-gradient(circle at 90% 0%, #d1f3ec 0%, transparent 36%),
    linear-gradient(170deg, var(--bg0), var(--bg1));
}

.device-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(8, 16, 32, 0.72);
  backdrop-filter: blur(6px);
}

.device-gate.hidden {
  display: none;
}

.device-gate-card {
  width: min(520px, 92vw);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.device-gate-card h2 {
  margin: 0 0 8px;
}

.device-gate-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Dedicated desktop UI mode (selected via device gate) */
.customer-page.force-desktop .container {
  width: min(1320px, 96vw);
}
.customer-page.force-desktop .grid.cols-2 {
  grid-template-columns: 1.7fr 1fr;
}
.customer-page.force-desktop .mobile-view-switch {
  display: none !important;
}

/* Dedicated mobile UI mode (selected via device gate) */
.customer-page.force-mobile .container {
  width: min(100%, 96vw);
  margin: 10px auto;
  gap: 10px;
}
.customer-page.force-mobile .panel {
  border-radius: 14px;
  padding: 12px;
}
.customer-page.force-mobile .title {
  font-size: 22px;
  line-height: 1.2;
}
.customer-page.force-mobile .subtitle {
  font-size: 13px;
}
.customer-page.force-mobile .grid.cols-2 {
  grid-template-columns: 1fr;
  overflow: visible;
}
.customer-page.force-mobile .mobile-view-switch {
  display: grid !important;
}
.customer-page.force-mobile .company-side {
  grid-template-rows: auto auto;
}
.customer-page.force-mobile input,
.customer-page.force-mobile select,
.customer-page.force-mobile textarea,
.customer-page.force-mobile button {
  padding: 10px 11px;
  font-size: 15px;
}
.customer-page.force-mobile .chat-wrap {
  min-height: 420px;
}
.customer-page.force-mobile .chat-input {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
}
.customer-page.force-mobile .chat-input input {
  grid-column: 1 / -1;
}
.customer-page.force-mobile .chat-input button {
  min-height: 42px;
}
.customer-page.force-mobile.mobile-company-view .customer-chat-panel {
  display: none;
}
.customer-page.force-mobile:not(.mobile-company-view) .customer-company-panel {
  display: none;
}
.customer-page.force-mobile.mobile-company-view .customer-company-panel,
.customer-page.force-mobile:not(.mobile-company-view) .customer-chat-panel {
  display: grid;
}

.container {
  width: min(1280px, 96vw);
  margin: 20px auto;
  display: grid;
  gap: 14px;
}

.customer-page {
  height: 100vh;
  overflow: hidden;
}
.customer-page .container {
  height: calc(100vh - 24px);
  margin: 12px auto;
  grid-template-rows: auto minmax(0, 1fr);
}
.customer-page .grid.cols-2 {
  min-height: 0;
  overflow: hidden;
}
.customer-page .grid.cols-2 > .panel {
  min-height: 0;
}
.customer-page .grid.cols-2 > .panel:first-child {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.customer-page .company-side {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
.customer-page .register-panel {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.customer-page .chat-wrap {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.panel {
  background: var(--card);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(30, 57, 95, 0.12);
  padding: 16px;
}

.title { font-size: 28px; margin: 0; }
.subtitle { color: var(--muted); margin: 6px 0 0; }
.lang-bar {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 220px 180px auto;
  gap: 6px;
  align-items: center;
  max-width: 620px;
}
.mobile-view-switch {
  display: none;
  margin-top: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 320px;
}
.mobile-view-switch button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.lang-bar select,
.lang-bar input,
.lang-bar button {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 8px;
}

.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: 1.7fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

input, select, textarea, button {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font: inherit;
}
textarea { min-height: 80px; resize: vertical; }

button {
  cursor: pointer;
  border: none;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
}
button.secondary { background: var(--secondary); }
button.good { background: var(--good); }
button.warn { background: var(--warn); }
button.ghost {
  background: #fff;
  color: var(--secondary);
  border: 1px solid var(--line);
}

label { font-size: 13px; color: var(--muted); display: block; margin: 6px 0; }
.small { font-size: 12px; color: var(--muted); }

.chat-wrap {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fcfeff;
}

@media (min-width: 769px) {
  .customer-page .chat-wrap {
    position: relative;
    border-color: #8a949f;
    background: #eef1f4;
    overflow: hidden;
  }
  .customer-page .chat-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(40, 200, 120, 0.24), transparent 52%),
      linear-gradient(145deg, rgba(35, 160, 95, 0.18), rgba(80, 180, 120, 0.08));
    pointer-events: none;
    z-index: 0;
  }
  .customer-page .chat-log,
  .customer-page .chat-input {
    position: relative;
    z-index: 1;
  }
  .customer-page .chat-log {
    background: transparent;
  }
  .customer-page .chat-input {
    background: transparent;
    border-top-color: rgba(64, 110, 88, 0.28);
  }
}
.chat-log {
  padding: 12px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-log::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.msg {
  max-width: 100%;
  width: fit-content;
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.4;
}
.msg.user {
  justify-self: auto;
  margin-left: auto;
  margin-right: 0;
  background: #dce7ff;
}
.msg.bot {
  justify-self: auto;
  margin-left: 0;
  margin-right: auto;
  background: #eef5ff;
  border: 1px solid #d8e5ff;
}
.chat-input {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  padding: 10px;
  background: #f3f8ff;
  border-top: 1px solid var(--line);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips.chips-scroll {
  display: grid;
  grid-template-columns: 1fr;
  max-height: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  gap: 3px;
}
.chip {
  background: var(--chip);
  border: 1px solid #d5e1f8;
  color: #173464;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
  line-height: 1.15;
  cursor: pointer;
}

.list {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.item {
  padding: 11px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
}
.item:last-child { border-bottom: none; }

.board {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
.drop-col {
  min-height: 420px;
  border: 1px dashed #aac0e8;
  border-radius: 12px;
  padding: 8px;
  background: #f8fbff;
}
.card {
  border: 1px solid #cddaf1;
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.card[draggable='true'] { cursor: grab; }
.slot-target {
  border: 1px solid #d6e3fb;
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: #ffffff;
}
.slot-target.over { border-color: var(--primary); background: #eef4ff; }

.badge { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.badge.routine { color: #1b7446; background: #dcf7e8; }
.badge.normal { color: #1f4d9a; background: #dde9ff; }
.badge.wichtig { color: #955500; background: #ffefcf; }
.badge.kritisch { color: #9f1f1f; background: #ffe0e0; }

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  inset: 0;
  background: #c7d5ec;
  border-radius: 999px;
  transition: 0.2s;
}
.slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.switch input:checked + .slider {
  background: var(--good);
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}

.dev-page .container {
  width: min(980px, 94vw);
  gap: 10px;
  position: relative;
  z-index: 1;
}
.dev-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Ctext x='120' y='38' text-anchor='middle' fill='rgba(20,90,242,0.08)' font-size='21' font-family='Space Grotesk, Arial, sans-serif' font-weight='700'%3EENTWICKLER%3C/text%3E%3Ctext x='120' y='92' text-anchor='middle' fill='rgba(20,90,242,0.06)' font-size='21' font-family='Space Grotesk, Arial, sans-serif' font-weight='700'%3EENTWICKLER%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 120px;
  background-position: center top;
  pointer-events: none;
  z-index: 0;
}
.dev-page .panel {
  padding: 12px;
  border-radius: 14px;
}
.dev-page .title {
  font-size: 22px;
}
.dev-page .subtitle {
  font-size: 13px;
}
.dev-page .grid {
  gap: 10px;
}
.dev-page input,
.dev-page select,
.dev-page textarea,
.dev-page button {
  padding: 9px 10px;
  font-size: 13px;
  border-radius: 10px;
}
.dev-page .list {
  max-height: 260px;
}

.legal-footer {
  display: grid;
  gap: 6px;
}

.legal-footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.legal-doc {
  width: min(980px, 94vw);
  margin: 20px auto 28px;
}

.legal-doc h1 {
  margin: 0 0 12px;
}

.legal-doc h2 {
  margin: 18px 0 8px;
  font-size: 18px;
}

@media (max-width: 1000px) {
  .cols-2, .cols-3, .board { grid-template-columns: 1fr; }
  .lang-bar {
    grid-template-columns: 1fr;
  }
  .customer-page {
    height: auto;
    overflow: auto;
  }
  .customer-page .container {
    height: auto;
    margin: 20px auto;
  }
  .customer-page .company-side {
    grid-template-rows: auto auto;
  }
  .customer-page .register-panel {
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100%, 96vw);
    margin: 10px auto;
    gap: 10px;
  }
  .panel {
    padding: 12px;
    border-radius: 14px;
  }
  .title {
    font-size: 22px;
    line-height: 1.2;
  }
  .subtitle {
    font-size: 13px;
  }
  input, select, textarea, button {
    padding: 10px 11px;
    font-size: 15px;
  }
  .chat-wrap {
    min-height: 420px;
  }
  .mobile-view-switch {
    display: grid;
  }
  .customer-page.force-desktop .mobile-view-switch {
    display: none;
  }
  .customer-page.mobile-company-view .customer-chat-panel {
    display: none;
  }
  .customer-page:not(.mobile-company-view) .customer-company-panel {
    display: none;
  }
  .customer-page.force-desktop .customer-chat-panel,
  .customer-page.force-desktop .customer-company-panel {
    display: grid !important;
  }
  .customer-page.mobile-company-view .customer-company-panel,
  .customer-page:not(.mobile-company-view) .customer-chat-panel {
    display: grid;
  }
  .customer-page .grid.cols-2 {
    overflow: visible;
  }
  .customer-page .company-side {
    grid-template-rows: auto auto;
  }
  .chat-log {
    padding: 10px;
    gap: 8px;
  }
  .msg {
    max-width: 100%;
    font-size: 14px;
    padding: 9px 10px;
  }
  .chat-input {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
  }
  .chat-input input {
    grid-column: 1 / -1;
  }
  .chat-input button {
    min-height: 42px;
  }
}

@media (min-width: 769px) {
  .customer-page.force-mobile .mobile-view-switch {
    display: grid;
  }
  .customer-page.force-mobile.mobile-company-view .customer-chat-panel {
    display: none;
  }
  .customer-page.force-mobile:not(.mobile-company-view) .customer-company-panel {
    display: none;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 19px;
  }
  .subtitle,
  .small,
  label {
    font-size: 12px;
  }
  .panel {
    padding: 10px;
  }
  .chat-wrap {
    min-height: 360px;
  }
  .chip {
    font-size: 11px;
    padding: 6px 8px;
  }
}