/* app_settings.css — Admin-UI „App-Einstellungen“ der MOREMEDIA App (Learning #8190). Nur Tokens. */

.as-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.as-intro { color: var(--tx-1); font-size: var(--t-body); margin: 0; max-width: var(--content-max); }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); }
.as-card { margin: 0; }
.as-card .card-u { gap: var(--sp-2); }
.as-hint { color: var(--tx-2); font-size: var(--t-sm); margin: 0 0 var(--sp-3); line-height: 1.5; }
.as-error { margin-top: var(--sp-2); color: var(--er); background: var(--er-bg); border: 1px solid var(--er-bd);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--t-sm); }

.as-btn { padding: var(--sp-1) var(--sp-3); font-size: var(--t-sm); }
.as-btn[disabled] { opacity: .45; cursor: not-allowed; }

.as-input { font: inherit; font-size: var(--t-body); color: var(--tx-0); background: var(--bg-surface);
  border: 1px solid var(--bdr-def); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); min-width: 0; }
.as-input:focus { outline: none; border-color: var(--bdr-str); }
.as-num { width: 5rem; }
.as-time { width: 7rem; }

.as-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--t-body); color: var(--tx-1); }
.as-row + .as-row { margin-top: var(--sp-2); }
.as-form .as-row > span:first-child { min-width: 9rem; }
.as-add { margin-top: var(--sp-3); }

.as-switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; color: var(--tx-1); font-size: var(--t-body); }
.as-switch input { accent-color: var(--ac-2); width: 1rem; height: 1rem; margin: 0; }

.as-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.as-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font: inherit; font-size: var(--t-sm);
  padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-full); border: 1px solid var(--bdr-def);
  background: transparent; color: var(--tx-1); cursor: pointer; }
.as-chip.is-on { background: var(--ac-bg); border-color: var(--bdr-str); color: var(--tx-0); }
.as-chip-x { border: 0; background: none; color: var(--tx-2); cursor: pointer; padding: 0; font-size: var(--t-base); line-height: 1; }
.as-chip-x:hover { color: var(--er); }

.as-dep { border-top: 1px solid var(--bdr-faint); padding: var(--sp-3) 0; }
.as-dep:first-of-type { border-top: 0; }
.as-dep.is-inactive .as-dep-row > :not(.as-dep-actions) { opacity: .5; }
.as-dep-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.as-dep-name { flex: 1 1 12rem; font-weight: 500; }
.as-dep-actions { display: inline-flex; gap: var(--sp-1); margin-left: auto; flex-wrap: wrap; }
.as-swatch { width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-full); flex: none; }
.as-dep-detail { margin: var(--sp-3) 0 0 calc(var(--sp-4) + var(--sp-2)); padding: var(--sp-3); background: var(--bg-el);
  border-radius: var(--r-md); }
.as-sub-l { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tx-2); margin: var(--sp-2) 0; }
.as-sub-l:first-child { margin-top: 0; }
.as-step { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-1) 0; font-size: var(--t-body); color: var(--tx-0); }
.as-step.is-inactive > span { color: var(--tx-2); text-decoration: line-through; }

.as-matrix { width: 100%; }
.as-matrix td, .as-matrix th { vertical-align: middle; }

@media (max-width: 40rem) {
  .as-dep-actions { margin-left: 0; }
  .as-dep-detail { margin-left: 0; }
}