/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */

html.request-progress-active .turbo-progress-bar {
  display: none;
}

body.modal-window-request {
  height: 100dvh;
  overflow: hidden;
}

body.modal-window-request > turbo-frame#modal_frame,
body.modal-window-request > .app-modal-card > turbo-frame#modal_frame {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  background: var(--app-surface);
}

body.modal-window-request > .app-modal-card {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.release-notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  min-height: 0;
}

.release-notes-history,
.release-notes-detail {
  min-width: 0;
}

@media (min-width: 960px) {
  .release-notes-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
  }

  .release-notes-history {
    grid-column: 1;
    grid-row: 1;
  }

  .release-notes-detail {
    grid-column: 2;
    grid-row: 1;
  }

  .release-notes-history-inner {
    position: sticky;
    top: 1rem;
  }
}

@media (min-width: 1536px) {
  .release-notes-layout {
    grid-template-columns: 340px minmax(0, 1fr);
  }
}

.humanis-dnd-ghost {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
  opacity: 0.78 !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.12) !important;
  transform: translate3d(0, 0, 0) scale(1.015) !important;
  transition:
    left 70ms ease-out,
    top 70ms ease-out,
    width 70ms ease-out,
    height 70ms ease-out,
    opacity 120ms ease-out,
    transform 120ms ease-out !important;
  will-change: left, top, width, height, transform !important;
}

.humanis-dnd-ghost--drop-commit {
  opacity: 0.92 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.humanis-schedule-drag-source {
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.24), 0 6px 14px rgba(15, 23, 42, 0.10) !important;
}

[data-dropzone='appointment'].drag-over {
  background-color: color-mix(in srgb, var(--app-primary-soft) 16%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--app-primary) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--app-primary) 14%, transparent) !important;
}

.humanis-schedule-drop-marker {
  position: absolute !important;
  z-index: 8 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 1px solid rgba(37, 99, 235, 0.42) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(191, 219, 254, 0.74)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 8px 18px rgba(37, 99, 235, 0.15) !important;
  transition: left 70ms ease-out, top 70ms ease-out, width 70ms ease-out, height 70ms ease-out !important;
}

.humanis-schedule-drop-marker::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 5px rgba(37, 99, 235, 0.24);
}

.humanis-schedule-drop-marker-label {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

/* Backoffice sign-in ------------------------------------------------------ */
.signin-shell {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
  width: min(calc(100% - clamp(1.5rem, 4vw, 4rem)), 1180px);
  min-height: min(760px, calc(100dvh - clamp(1.5rem, 4vw, 4rem)));
  margin: clamp(0.75rem, 2vw, 2rem) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--app-border) 78%, white);
  border-radius: 32px;
  background: var(--app-surface);
  box-shadow: 0 28px 80px rgba(45, 58, 74, 0.14), 0 8px 24px rgba(45, 58, 74, 0.07);
}

.signin-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--app-secondary-soft) 82%, transparent), transparent 18rem),
    linear-gradient(180deg, var(--app-surface), var(--app-surface-muted));
}

.signin-form {
  width: min(100%, 430px);
}

.signin-brand {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  text-align: center;
}

.signin-brand-logo {
  width: min(100%, 400px);
  height: auto;
  object-fit: contain;
}

.signin-version-pill,
.signin-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-surface) 78%, var(--app-primary-soft));
  color: var(--app-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.48rem 0.75rem;
}

.signin-heading {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin-bottom: 1.7rem;
  text-align: center;
}

.signin-context-pill {
  color: var(--app-primary);
  background: var(--app-primary-soft);
  border-color: var(--app-primary-border);
}

.signin-title {
  margin: 0;
  color: var(--app-text-strong);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.signin-subtitle {
  max-width: 34ch;
  margin: 0;
  color: var(--app-text-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.signin-fields,
.signin-field {
  display: grid;
  gap: 0.85rem;
}

.signin-fields {
  gap: 1rem;
}

.signin-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.signin-input-shell {
  position: relative;
}

.signin-input-icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  color: var(--app-muted);
  transform: translateY(-50%);
}

.signin-input-shell .signin-input {
  padding-left: 2.55rem;
}

.signin-hint-link {
  color: var(--app-primary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.signin-hint-link:hover {
  text-decoration: underline;
}

.signin-submit {
  min-height: 48px;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
}

.signin-brand-pane {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100%;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 176, 135, 0.28), transparent 18rem),
    radial-gradient(circle at 18% 82%, rgba(111, 195, 193, 0.24), transparent 18rem),
    linear-gradient(145deg, var(--app-primary-soft), color-mix(in srgb, var(--app-accent-soft) 84%, white));
}

.signin-brand-pane::after {
  content: "";
  position: absolute;
  right: -8rem;
  bottom: -9rem;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-primary) 18%, transparent);
  box-shadow: 0 0 0 5rem color-mix(in srgb, var(--app-accent) 10%, transparent);
}

.signin-brand-watermark {
  position: absolute;
  right: -2.5rem;
  bottom: 2.2rem;
  width: min(54%, 360px);
  opacity: 0.13;
  object-fit: contain;
}

.signin-brand-copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
}

.signin-brand-eyebrow {
  color: var(--app-primary);
}

.signin-brand-headline {
  margin: 0.9rem 0 1rem;
  color: var(--app-text-strong);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.signin-brand-body {
  max-width: 43rem;
  margin: 0;
  color: color-mix(in srgb, var(--app-text-soft) 86%, var(--app-text-strong));
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
}

@media (max-width: 960px) {
  .signin-shell {
    grid-template-columns: 1fr;
    max-width: 620px;
    min-height: auto;
  }

  .signin-brand-pane {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .signin-shell {
    border-radius: 20px;
  }

  .signin-form-pane,
  .signin-brand-pane {
    padding: 1.5rem;
  }

  .signin-brand-pane {
    min-height: auto;
  }

  .signin-brand-pane::after {
    display: none;
  }

  .signin-brand-watermark {
    right: -4rem;
    bottom: 0.5rem;
    width: 68%;
  }

  .signin-brand-copy {
    padding-bottom: 0;
  }

  .signin-brand-headline {
    font-size: clamp(2rem, 9vw, 2.45rem);
    line-height: 1.05;
  }

  .signin-brand-logo {
    width: min(100%, 340px);
  }
}

/* Ressourcen-Sperren bleiben in allen Plan-Farbmodi eindeutig erkennbar. */
.app-service-event {
  --app-service-event-bg: color-mix(in srgb, var(--app-warning-soft) 84%, var(--app-surface));
  --app-service-event-border: color-mix(in srgb, var(--app-warning) 72%, var(--app-border));
  --app-service-event-text: var(--app-warning-text, var(--app-warning));
  background-color: var(--app-service-event-bg);
  background-image: none;
  border-color: var(--app-service-event-border);
  border-left-width: 3px;
  color: var(--app-service-event-text);
}