/*
 * Avyqen RC1.8 – zentrales Designsystem
 *
 * Leitlinie:
 * - Hauptnavigation: dunkel mit heller Schrift
 * - Inhaltsflächen: hell mit dunkelblauer Schrift
 * - einheitliche Karten, Tabellen, Formulare, Buttons und Abstände
 * - Arial in der gesamten Oberfläche
 */

:root {
  --ds-bg: #f4f7fb;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f7f9fd;
  --ds-surface-accent: #eef3ff;
  --ds-text: var(--navy, #0b1638);
  --ds-muted: #5f6d85;
  --ds-border: #dfe6f2;
  --ds-border-strong: #c8d4e8;
  --ds-primary: #3567e8;
  --ds-primary-hover: #2857ce;
  --ds-primary-soft: #eaf0ff;
  --ds-success: #14815b;
  --ds-success-soft: #e7f8f1;
  --ds-warning: #91600f;
  --ds-warning-soft: #fff4df;
  --ds-danger: #b93d55;
  --ds-danger-soft: #ffecef;
  --ds-radius-sm: 10px;
  --ds-radius: 14px;
  --ds-radius-lg: 18px;
  --ds-shadow-sm: 0 5px 16px rgba(11, 22, 56, 0.06);
  --ds-shadow: 0 12px 34px rgba(11, 22, 56, 0.08);
  --ds-focus: 0 0 0 4px rgba(53, 103, 232, 0.16);
  --ds-control-height: 42px;
}

html,
body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: Arial, Helvetica, sans-serif !important;
}

body {
  line-height: 1.45;
}

.app-main {
  width: 100%;
  max-width: none;
  padding: 28px;
}

/*
 * Inhalts-Header werden nicht mehr von der dunklen Hauptnavigation geerbt.
 */
.app-main header:not(.app-header) {
  position: static;
  top: auto;
  z-index: auto;
  padding: 0;
  background: transparent;
  color: var(--ds-text);
  box-shadow: none;
}

.app-main h1,
.app-main h2,
.app-main h3,
.app-main h4,
.app-main h5,
.app-main h6 {
  color: var(--ds-text);
  font-family: Arial, Helvetica, sans-serif !important;
}

.app-main h1 {
  margin: 0 0 7px;
  font-size: clamp(27px, 2.5vw, 34px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.app-main h2 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.2;
}

.app-main h3 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.25;
}

.app-main p {
  line-height: 1.55;
}

.eyebrow,
.project-eyebrow,
.dashboard-kicker,
.widget-eyebrow,
.auth-eyebrow,
.planning-title .eyebrow {
  color: var(--ds-primary) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------------
   Einheitliche Seitenköpfe
   ------------------------------------------------------------------------ */

.page-head,
.planning-header,
.planning-page-head,
.dashboard-hero,
.project-hero,
.form-header {
  position: relative !important;
  top: auto !important;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  margin: 0 0 22px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(
      circle at top right,
      rgba(53, 103, 232, 0.12),
      transparent 42%
    ),
    linear-gradient(135deg, #ffffff 0%, #f3f6ff 100%) !important;
  color: var(--ds-text) !important;
  box-shadow: var(--ds-shadow);
}

.dashboard-hero::after,
.project-hero::after {
  display: none !important;
}

.page-head > div:first-child,
.planning-title,
.dashboard-hero__copy,
.dashboard-hero-copy,
.project-hero > div:first-child {
  min-width: 0;
}

.page-head h1,
.planning-header h1,
.planning-page-head h1,
.dashboard-hero h1,
.project-hero h1,
.form-header h1 {
  color: var(--ds-text) !important;
}

.page-head p,
.planning-header p,
.planning-page-head p,
.dashboard-hero p,
.project-hero p,
.form-header p {
  margin: 0;
  color: var(--ds-muted) !important;
}

.page-head .actions,
.planning-controls,
.planning-actions,
.dashboard-hero__actions,
.dashboard-hero-actions,
.project-hero .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------------
   Abschnittsüberschriften
   ------------------------------------------------------------------------ */

.section-head,
.report-section-head,
.section-heading,
.widget-header,
.dialog-head,
.employee-pool-head {
  color: var(--ds-text) !important;
}

.section-head,
.report-section-head,
.section-heading,
.widget-header {
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--ds-border);
}

.section-head h2,
.report-section-head h2,
.section-heading h2,
.widget-header h2,
.dialog-head h2,
.employee-pool-head h2 {
  color: var(--ds-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.section-head p,
.report-section-head p,
.section-heading p,
.widget-header p,
.dialog-head p,
.employee-pool-head p {
  color: var(--ds-muted) !important;
}

.section-heading > span {
  border: 1px solid #cfdbf2;
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
}

/* ------------------------------------------------------------------------
   Karten und Inhaltsflächen
   ------------------------------------------------------------------------ */

.card,
.form-card,
.resource-card,
.document-library-card,
.content-card,
.dashboard-widget,
.project-card,
.company-settings-section,
.detail-disclosure,
.calendar-toolbar,
.employee-pool-card,
.compact-pool,
.report-section {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm) !important;
}

.card,
.form-card,
.resource-card,
.document-library-card,
.content-card,
.company-settings-section,
.employee-pool-card,
.report-section {
  padding: 21px;
}

.form-card {
  border-top: 3px solid var(--ds-primary) !important;
}

.form-card-wide {
  width: 100%;
  max-width: none;
}

.table-wrap,
.planner,
.project-table-wrap,
.month-grid-wrap {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm) !important;
}

.empty-state,
.widget-empty {
  color: var(--ds-muted);
}

/* ------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.app-main .button,
.app-main .control-button,
.app-main .dash-button,
.app-main .icon-button,
.app-main .compact-button,
.app-main .link-button,
.app-main button:not([class]),
.auth-page .auth-submit {
  min-height: var(--ds-control-height);
  padding: 9px 15px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: none;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.app-main .button:hover,
.app-main .control-button:hover,
.app-main .dash-button:hover,
.app-main .icon-button:hover,
.app-main .compact-button:hover,
.app-main .link-button:hover,
.app-main button:not([class]):hover,
.auth-page .auth-submit:hover {
  transform: translateY(-1px);
  border-color: #aebfdd;
  background: var(--ds-surface-soft);
  box-shadow: var(--ds-shadow-sm);
}

.app-main .button.primary,
.app-main button.primary,
.app-main .control-button.primary,
.app-main .dash-button--primary,
.auth-page .auth-submit {
  border-color: var(--ds-primary);
  background: linear-gradient(
    135deg,
    var(--ds-primary),
    var(--ds-primary-hover)
  );
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(53, 103, 232, 0.22);
}

.app-main .button.secondary,
.app-main .dash-button--secondary,
.app-main .dash-button--ghost {
  border-color: var(--ds-border-strong);
  background: var(--ds-surface);
  color: var(--ds-primary) !important;
}

.app-main .button.danger,
.app-main button.danger {
  border-color: #efb9c4;
  background: var(--ds-danger-soft);
  color: var(--ds-danger) !important;
}

.app-main .button.small,
.app-main .compact-button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

.app-main .button:focus-visible,
.app-main .control-button:focus-visible,
.app-main .dash-button:focus-visible,
.app-main .icon-button:focus-visible,
.auth-page .auth-submit:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
}

/* ------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------ */

.field label,
.form-card label,
.auth-field label,
.company-settings-section label,
.dialog-card label {
  color: #27344f;
  font-size: 13px;
  font-weight: 750;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field select,
.field textarea,
.filters input,
.filters select,
.auth-field input,
.company-settings-section input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.company-settings-section select,
.company-settings-section textarea,
.daily-report-form input,
.daily-report-form select,
.project-filter input,
.employee-pool-toolbar input,
.month-picker-form input,
.planning-search input,
.dialog-card input,
.dialog-card select,
.dialog-card textarea {
  min-height: var(--ds-control-height);
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  background: #ffffff;
  color: var(--ds-text);
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px;
  box-shadow: none;
}

.field textarea,
.company-settings-section textarea,
.dialog-card textarea {
  min-height: 112px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filters input:focus,
.filters select:focus,
.auth-field input:focus,
.company-settings-section input:focus,
.company-settings-section select:focus,
.company-settings-section textarea:focus,
.daily-report-form input:focus,
.daily-report-form select:focus,
.project-filter input:focus,
.employee-pool-toolbar input:focus,
.month-picker-form input:focus,
.planning-search input:focus,
.dialog-card input:focus,
.dialog-card select:focus,
.dialog-card textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus);
}

.field small,
.form-card small,
.auth-field small {
  color: var(--ds-muted);
}

.error,
.auth-field-error,
.form-non-field-errors {
  color: var(--ds-danger);
}

.filters,
.filter-bar,
.resource-filters,
.document-filters {
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}

/* ------------------------------------------------------------------------
   Standardtabellen
   ------------------------------------------------------------------------ */

.table-wrap > table,
.project-table-wrap > table,
.subcontractor-summary-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ds-text);
  font-size: 13px;
}

.table-wrap > table thead th,
.project-table-wrap > table thead th,
.subcontractor-summary-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-border-strong);
  background: var(--ds-surface-accent) !important;
  color: #485875 !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.table-wrap > table tbody td,
.table-wrap > table tbody th,
.project-table-wrap > table tbody td,
.project-table-wrap > table tbody th,
.subcontractor-summary-table tbody td,
.subcontractor-summary-table tbody th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ds-border);
  background: #ffffff;
}

.table-wrap > table tbody tr:nth-child(even) td,
.table-wrap > table tbody tr:nth-child(even) th,
.project-table-wrap > table tbody tr:nth-child(even) td,
.project-table-wrap > table tbody tr:nth-child(even) th,
.subcontractor-summary-table tbody tr:nth-child(even) td,
.subcontractor-summary-table tbody tr:nth-child(even) th {
  background: #fafbfe;
}

.table-wrap > table tbody tr:hover td,
.table-wrap > table tbody tr:hover th,
.project-table-wrap > table tbody tr:hover td,
.project-table-wrap > table tbody tr:hover th,
.subcontractor-summary-table tbody tr:hover td,
.subcontractor-summary-table tbody tr:hover th {
  background: #f2f6ff;
}

.table-primary-link {
  color: var(--ds-primary);
  font-weight: 750;
}

.table-subline {
  color: var(--ds-muted);
}

/* ------------------------------------------------------------------------
   Status, Hinweise und Kennzeichnungen
   ------------------------------------------------------------------------ */

.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.badge,
.status-pill.neutral,
.status-pill.status-retired {
  background: #edf1f7;
  color: #59677e;
}

.status-pill.success,
.status-pill.status-available {
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

.status-pill.warning,
.status-pill.status-maintenance {
  background: var(--ds-warning-soft);
  color: var(--ds-warning);
}

.status-pill.danger,
.status-pill.status-defective {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.message,
.auth-alert {
  padding: 13px 15px;
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-primary);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
}

.message.success {
  border-left-color: var(--ds-success);
}

.message.warning {
  border-left-color: #d89523;
}

.message.error {
  border-left-color: var(--ds-danger);
}

/* ------------------------------------------------------------------------
   Dashboard, Projekte und Einsatzplanung
   ------------------------------------------------------------------------ */

.dashboard-toolbar {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}

.metric-card,
.content-card {
  background: var(--ds-surface) !important;
}

.widget-header h2,
.project-card h2 {
  color: var(--ds-text) !important;
}

.planning-header {
  color: var(--ds-text) !important;
}

.planning-title h1 {
  color: var(--ds-text) !important;
}

.planning-title p {
  color: var(--ds-muted) !important;
}

.planning-tools,
.employee-pool-panel {
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}

.project-column-heading {
  background: var(--ds-surface-accent) !important;
  color: var(--ds-text) !important;
}

.day-heading {
  color: var(--ds-text);
}

.dialog-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

/*
 * Wochenendfarben bleiben bewusst als eigener fachlicher Akzent bestehen.
 */
.planning-show-weekend .day-heading.weekend-column {
  background: #f3e3e7 !important;
  color: #8b3448 !important;
}

.planning-show-weekend .day-heading.weekend-column strong {
  color: #7d2d40 !important;
}

/* ------------------------------------------------------------------------
   Kalender
   ------------------------------------------------------------------------ */

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.calendar-toolbar h2 {
  min-width: 180px;
  margin: 0;
  text-align: center;
}

.calendar-day {
  border-color: var(--ds-border) !important;
  background: var(--ds-surface);
}

.calendar-weekdays {
  color: var(--ds-muted);
}

/* ------------------------------------------------------------------------
   Anmeldung
   ------------------------------------------------------------------------ */

.auth-page {
  background: var(--ds-bg);
}

.auth-form-panel {
  background: var(--ds-surface);
}

.auth-form-wrap {
  border-radius: var(--ds-radius-lg);
}

.auth-heading h2 {
  color: var(--ds-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.auth-heading > p:last-child {
  color: var(--ds-muted);
}

/* Die linke Markenfläche bleibt bewusst dunkel. */
.auth-brand-panel,
.auth-brand-panel h1,
.auth-brand-panel h2,
.auth-brand-panel h3,
.auth-brand-panel strong {
  color: #ffffff;
}

/* ------------------------------------------------------------------------
   Responsive und Druck
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  .app-main {
    padding: 20px 16px;
  }

  .page-head,
  .planning-header,
  .planning-page-head,
  .dashboard-hero,
  .project-hero,
  .form-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 19px;
  }

  .page-head .actions,
  .planning-controls,
  .planning-actions,
  .dashboard-hero__actions,
  .dashboard-hero-actions,
  .project-hero .actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .app-main {
    padding: 15px 11px;
  }

  .page-head,
  .planning-header,
  .planning-page-head,
  .dashboard-hero,
  .project-hero,
  .form-header {
    padding: 16px;
    border-radius: 14px;
  }

  .card,
  .form-card,
  .resource-card,
  .document-library-card,
  .content-card,
  .company-settings-section,
  .employee-pool-card,
  .report-section {
    padding: 17px;
  }

  .app-main .actions .button,
  .app-main .actions button {
    flex: 1 1 150px;
  }
}

@media print {
  .page-head,
  .planning-header,
  .planning-page-head,
  .dashboard-hero,
  .project-hero,
  .form-header,
  .card,
  .form-card,
  .resource-card,
  .content-card,
  .report-section,
  .table-wrap,
  .project-table-wrap,
  .month-grid-wrap {
    box-shadow: none !important;
  }
}


/* Avyqen RC1.8a – kontrastsichere Aktionen und Navigation */
.app-main .button.primary,
.app-main button.primary,
.app-main .control-button.primary,
.app-main .dash-button--primary,
.auth-page .auth-submit {
  border-color: #3567e8 !important;
  background: linear-gradient(135deg, #3567e8, #2857ce) !important;
  color: #ffffff !important;
}

.app-main .dash-button--secondary {
  border-color: #bfcdea !important;
  background: #ffffff !important;
  color: #2857ce !important;
}

.app-main .dash-button--ghost {
  border-color: #c8d4e8 !important;
  background: #ffffff !important;
  color: #2857ce !important;
}

.app-header__inner {
  min-height: 68px;
}

.main-nav > .nav-link,
.nav-group > summary {
  font-size: 13px;
}

.company-brand-text strong {
  font-size: 16px;
}

.user-meta strong {
  font-size: 13px;
}


/* Avyqen RC1.8b – ausfallsichere mobile Navigation */
.nav-backdrop {
  display: none;
}

@media (max-width: 920px) {
  /*
   * Geschlossen ist der zwingende Grundzustand. Die !important-Regeln
   * verhindern, dass ältere app.css-/Aurora-Regeln das Menü beim Laden
   * versehentlich sichtbar machen.
   */
  .app-header .main-nav:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px);
  }

  .app-header .main-nav.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0);
  }

  .app-header .main-nav {
    z-index: 1210;
    max-height: calc(100dvh - 94px);
    overscroll-behavior: contain;
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0.16s ease;
  }

  .nav-backdrop {
    position: fixed;
    z-index: 1190;
    inset: 66px 0 0;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: rgba(5, 13, 36, 0.46);
    backdrop-filter: blur(2px);
    cursor: default;
  }

  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  body.nav-open .nav-backdrop {
    display: block;
  }

  body:not(.nav-open) .nav-backdrop {
    display: none !important;
    pointer-events: none;
  }

  .nav-toggle {
    position: relative;
    z-index: 1220;
  }
}

@media (min-width: 921px) {
  .nav-backdrop {
    display: none !important;
  }

  .app-header .main-nav {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}