/* =========================================================================
   FlatDateControl — Vendor aus D:\Dev\Dashboard\vendor\flat-date-control\,
   übernommen am 2026-05-31. fd-* Tokens auf fn-* gemappt; .fdc-popup
   Hintergrund auf --fn-input-bg (gleicher Ton wie aufgeklapptes <select>).
   Klassennamen (auch die deutschen .ausgewaehlt/.heute/...) bleiben 1:1
   zur Vorlage, weil das JavaScript sie hart-kodiert verwendet — Rename
   wäre ein eigener Vendor-Eingriff.
   ========================================================================= */

.fdc-wrap { position: relative; display: inline-block; width: 100%; }
.fdc-wrap.fdc-disabled { opacity: 0.65; cursor: not-allowed; }

.fdc-input {
  width: 100%;
  height: 38px;
  padding: 0 44px 0 12px;
  border: var(--fn-border-width) solid var(--fn-input-border);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-input-bg);
  color: var(--fn-text);
  font-family: var(--fn-font);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
}
.fdc-input:focus { border-color: var(--fn-primary); box-shadow: var(--fn-focus-ring); }
.fdc-input::placeholder { color: var(--fn-text-tertiary); }

.fdc-trigger {
  position: absolute;
  top: 50%; right: 4px; transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--fn-border-width) solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg-muted);
  color: var(--fn-text-secondary);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, background .15s, color .15s;
}
.fdc-trigger:hover { border-color: var(--fn-primary); color: var(--fn-text); background: var(--fn-hover); }
.fdc-trigger:focus-visible { outline: none; border-color: var(--fn-primary); box-shadow: var(--fn-focus-ring); }
.fdc-trigger svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.fdc-popup {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 286px;
  background: var(--fn-input-bg);   /* gleicher Ton wie aufgeklapptes <select> */
  border: var(--fn-border-width) solid var(--fn-border-strong);
  border-radius: var(--fn-radius);
  box-shadow: var(--fn-elevation-3);
  padding: 12px;
  z-index: 1000;
  box-sizing: border-box;
}
.fdc-popup.fdc-align-right { left: auto; right: 0; }
.fdc-popup.fdc-portal { position: fixed; top: 0; left: 0; right: auto; z-index: 10000; }
.fdc-popup.hidden { display: none; }

.fdc-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.fdc-nav,
.fdc-title-btn {
  height: 30px;
  background: transparent;
  border: var(--fn-border-width) solid var(--fn-border);
  color: var(--fn-text-secondary);
  border-radius: var(--fn-radius-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; padding: 0 10px;
  font-family: inherit;
  transition: all .15s;
}
.fdc-nav { width: 30px; padding: 0; font-size: 14px; }
.fdc-nav:hover,
.fdc-title-btn:hover {
  border-color: var(--fn-primary);
  color: var(--fn-primary-hover);
  background: var(--fn-hover);
}

.fdc-titel { flex: 1; display: flex; gap: 4px; justify-content: center; align-items: center; min-width: 0; }
.fdc-title-btn { font-weight: var(--fn-font-weight-bold); min-width: 0; }

.fdc-grid { display: grid; grid-template-columns: 36px repeat(7, 1fr); gap: 2px; }
.fdc-grid.ohne-kw { grid-template-columns: repeat(7, 1fr); }

.fdc-wochentag,
.fdc-wochenlabel {
  text-align: center;
  font-size: 10.5px; font-weight: var(--fn-font-weight-bold);
  color: var(--fn-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 0;
  border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fdc-wochennr {
  text-align: center;
  font-size: 11px; font-weight: var(--fn-font-weight-bold);
  color: var(--fn-text-tertiary);
  padding: 8px 0;
  border-right: var(--fn-border-width) solid var(--fn-border);
  font-variant-numeric: tabular-nums;
}

.fdc-tag {
  text-align: center;
  font-size: 13px; padding: 8px 0;
  border-radius: var(--fn-radius-sm);
  cursor: pointer;
  color: var(--fn-text);
  transition: all .1s;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: var(--fn-border-width) solid transparent;
  font-family: inherit;
}
.fdc-tag:hover {
  background: var(--fn-hover);
  border-color: var(--fn-border-strong);
}
.fdc-tag.andere-monate { color: var(--fn-text-tertiary); opacity: 0.45; }
.fdc-tag.heute {
  border-color: var(--fn-primary);
  color: var(--fn-primary-hover);
  font-weight: var(--fn-font-weight-bold);
}
.fdc-tag.ausgewaehlt {
  background: var(--fn-primary);
  color: var(--fn-on-primary);
  font-weight: var(--fn-font-weight-bold);
  border-color: var(--fn-primary);
}
.fdc-tag.wochenende { color: var(--fn-text-secondary); }
.fdc-tag.deaktiviert { opacity: 0.25; cursor: not-allowed; pointer-events: none; text-decoration: line-through; }

.fdc-footer {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: var(--fn-border-width) solid var(--fn-border);
}

.fdc-btn {
  padding: 6px 12px;
  border: var(--fn-border-width) solid var(--fn-border-strong);
  background: var(--fn-bg-muted);
  color: var(--fn-text);
  border-radius: var(--fn-radius-sm);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.fdc-btn:hover { border-color: var(--fn-primary); background: var(--fn-hover); }
.fdc-btn.primary {
  background: var(--fn-primary);
  color: var(--fn-on-primary);
  border-color: var(--fn-primary);
  font-weight: var(--fn-font-weight-bold);
}

.fdc-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fdc-panel-grid.years { grid-template-columns: repeat(4, 1fr); }

.fdc-panel-option {
  min-height: 34px;
  border: var(--fn-border-width) solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  background: transparent;
  color: var(--fn-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.fdc-panel-option:hover { border-color: var(--fn-primary); background: var(--fn-hover); }
.fdc-panel-option.ausgewaehlt {
  background: var(--fn-primary);
  border-color: var(--fn-primary);
  color: var(--fn-on-primary);
  font-weight: var(--fn-font-weight-bold);
}