/* =========================================================
   Cron Generator – Styles (Basis: assets/css/tool-ui.css)
   ========================================================= */
.cg-main { display: grid; gap: 14px; margin-bottom: 18px; }
.cg-exprlabel { justify-content: flex-start; gap: 12px; }
.cg-exprrow { display: flex; gap: 10px; align-items: stretch; }
.cg-expr {
  flex: 1; min-width: 0; padding: 14px 18px; border-radius: 14px; font-family: var(--mono); font-size: clamp(20px, 2.6vw, 30px); font-weight: 600;
  letter-spacing: .06em; word-spacing: .3em; color: var(--ink); background: #fff; border: 1.5px solid rgba(15,19,48,.12); outline: 0; transition: border-color .25s, box-shadow .25s;
}
.cg-expr:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(91,140,255,.15); }
.cg-expr.is-err { border-color: var(--err); box-shadow: 0 0 0 4px rgba(209,52,56,.12); }
.cg-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cg-field {
  display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; text-align: center;
  background: rgba(15,19,48,.035); border: 1.5px solid transparent; transition: background .2s, border-color .2s;
}
.cg-field code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); }
.cg-field span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cg-field:hover { background: rgba(91,140,255,.08); }
.cg-field.is-active { background: rgba(91,140,255,.12); border-color: var(--blue); }
.cg-field.is-err { background: rgba(209,52,56,.08); border-color: var(--err); }
.cg-field.is-err code { color: var(--err); }
.cg-text { min-height: 1.4em; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.4; color: var(--ink); }
.cg-text::before { content: "„"; color: var(--violet); }
.cg-text::after { content: "“"; color: var(--violet); }
.cg-text:empty::before, .cg-text:empty::after { content: none; }
.cg-status:empty { display: none; }
.cg-error { padding: 12px 16px; border-radius: 14px; font-size: 14px; background: rgba(209,52,56,.06); border: 1px solid rgba(209,52,56,.25); color: var(--text); }
.cg-error strong { color: var(--err); }
.cg-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid rgba(15,19,48,.06); }
.cg-presets__label { margin-right: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cg-preset { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(15,19,48,.05); transition: background .2s, color .2s; }
.cg-preset:hover { color: var(--ink); }
.cg-preset.is-active { color: #fff; background: var(--ink); }

.cg-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cg-grid > .tu-card + .tu-card { margin-top: 0; }
.cg-editor { position: relative; display: grid; gap: 16px; }
.cg-editor.is-off > :not(.tu-card__head) { opacity: .35; pointer-events: none; }
.cg-modes { justify-self: start; }
.cg-pane[hidden] { display: none; }
.cg-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); }
.cg-inline .tu-input { width: 90px; }
.cg-inline .tu-select { width: auto; min-width: 120px; }
.cg-chips { display: grid; gap: 6px; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.cg-chips--hour { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cg-chips--dom { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cg-chips--month { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cg-chips--dow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cg-chip {
  padding: 8px 0; border-radius: 9px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted);
  background: rgba(15,19,48,.04); border: 1px solid rgba(15,19,48,.06); transition: background .15s, color .15s, border-color .15s;
}
.cg-chip:hover { border-color: var(--blue); color: var(--ink); }
.cg-chip.is-on { color: #fff; background: var(--blue); border-color: var(--blue); }
.cg-chipactions { display: flex; gap: 8px; margin-top: 10px; }
.cg-mini { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(15,19,48,.05); }
.cg-mini:hover { color: var(--ink); }

/* Nächste Läufe */
.cg-next .tu-card__head { flex-wrap: wrap; }
.cg-runs { margin: 0; padding: 0; list-style: none; counter-reset: run; display: grid; gap: 4px; }
.cg-runs li { counter-increment: run; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cg-runs li:nth-child(odd) { background: rgba(15,19,48,.03); }
.cg-runs li::before { content: counter(run) "."; font-size: 12px; color: var(--muted); }
.cg-runs__date { color: var(--text); }
.cg-runs b { color: var(--ink); }
.cg-runs__rel { min-width: 82px; text-align: right; font-size: 12.5px; color: var(--muted); }
.cg-runs li.cg-runs__empty { display: block; padding: 14px; color: var(--muted); }
.cg-runs li.cg-runs__empty::before { content: none; }
.cg-runs__never { color: var(--err) !important; font-weight: 600; }

/* crontab-Zeile */
.cg-line { margin-top: 18px; display: grid; gap: 14px; }
.cg-line .tu-card__head { margin-bottom: 0; }
.cg-linegrid { align-items: center; }
.cg-line code { font-family: var(--mono); font-size: .9em; }
.cg-lineout { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cg-lineout .cg-c { color: #8f96b8; }

@media (max-width: 1000px) {
  .cg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cg-exprrow { flex-wrap: wrap; }
  .cg-exprrow .cg-expr { flex-basis: 100%; }
  .cg-fields { gap: 4px; }
  .cg-field { padding: 8px 2px; }
  .cg-field code { font-size: 14px; }
  .cg-field > span { font-size: 10.5px; letter-spacing: 0; }
  .cg-field > span > span { display: none; }
  .cg-field > span::after { content: attr(data-short); }
  .cg-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cg-chips--month { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cg-chips--dow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cg-runs li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .cg-runs__rel { display: none; }
}