/* =============================================================================
   システム設定 (admin-settings.php) 専用スタイル
   as- プレフィックス、dedi.css の変数命名 (--bg-card / --text 系) を使用
   ============================================================================= */

.as-loading, .as-empty { text-align:center; color:var(--text-muted); padding:40px 16px; font-size:13px; }

/* ---------- 設定カード ---------- */
.as-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:14px; padding:20px 22px; margin-bottom:18px;
}
.as-card__head { margin-bottom:14px; }
.as-card__title {
    font-size:15px; font-weight:800; color:var(--text);
    display:flex; align-items:center; gap:8px;
}
.as-card__desc {
    font-size:12.5px; color:var(--text-secondary); margin-top:4px; line-height:1.65;
}
.as-card__desc strong { color:var(--text); font-weight:700; }
.as-card__desc code {
    background:var(--bg-subtle); color:var(--brand-hover);
    padding:1px 6px; border-radius:5px;
    font-family:'JetBrains Mono','Inter',monospace; font-size:11.5px;
}

/* ---------- ソース表示バッジ (DB / env / none) ---------- */
.as-source {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
    margin-left:8px; vertical-align:middle;
}
.as-source--db   { background:#D1FAE5; color:#047857; }
.as-source--env  { background:#FEF3C7; color:#92400E; }
.as-source--none { background:#FEE2E2; color:#B91C1C; }

/* ---------- 値: ドメインチップ ---------- */
.as-domains {
    display:flex; flex-wrap:wrap; gap:6px;
    min-height:38px; padding:8px;
    background:var(--bg-subtle); border:1px solid var(--border);
    border-radius:9px; margin-bottom:10px;
}
.as-domain {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--bg-card); color:var(--text);
    border:1px solid var(--border);
    font-size:12.5px; font-weight:600;
    padding:5px 10px 5px 12px; border-radius:999px;
    font-family:'JetBrains Mono','Inter',monospace;
}
.as-domain__x {
    border:none; background:transparent; cursor:pointer;
    color:var(--text-tertiary); font-size:13px; line-height:1;
    padding:2px 4px; border-radius:50%;
    transition:background .12s, color .12s;
}
.as-domain__x:hover { background:#FEE2E2; color:#B91C1C; }
.as-domains__empty {
    font-size:12px; color:var(--text-tertiary); font-style:italic;
    padding:8px 4px;
}

/* ---------- 追加入力 ---------- */
.as-add { display:flex; gap:8px; align-items:stretch; margin-bottom:10px; }
.as-add__input {
    flex:1; padding:9px 12px;
    border:1px solid var(--border); border-radius:8px;
    background:var(--bg-input); color:var(--text);
    font-size:13px; font-family:'JetBrains Mono','Inter',monospace; outline:none;
    transition:border-color .12s, box-shadow .12s;
}
.as-add__input:focus {
    border-color:var(--brand); box-shadow:0 0 0 3px var(--border-focus);
}
.as-add__btn { white-space:nowrap; }

/* env_fallback 表示 (グレーアウト) */
.as-env {
    background:var(--bg-subtle); border:1px dashed var(--border);
    border-radius:9px; padding:10px 12px; margin-top:10px;
    font-size:11.5px; color:var(--text-secondary); line-height:1.6;
}
.as-env b { color:var(--text); font-weight:700; }
.as-env code {
    background:var(--bg-card); padding:1px 5px; border-radius:4px;
    font-family:'JetBrains Mono','Inter',monospace; font-size:11px;
}

/* 保存バー (フッター固定) */
.as-savebar {
    display:flex; justify-content:flex-end; align-items:center; gap:10px;
    padding:14px 0 0; border-top:1px dashed var(--border); margin-top:14px;
}
.as-savebar__hint {
    flex:1; font-size:11.5px; color:var(--text-tertiary);
}
.as-savebar__hint.is-dirty { color:#C2410C; font-weight:600; }

/* 警告ブロック */
.as-warn {
    display:flex; gap:10px; align-items:flex-start;
    background:#FFF7ED; border:1px solid #FED7AA; border-radius:9px;
    padding:10px 12px; margin-top:10px;
    font-size:12px; color:#9A3412; line-height:1.6;
}
.as-warn__ic { font-size:16px; flex-shrink:0; line-height:1; }

@media (max-width: 640px) {
    .as-card { padding:16px 14px; }
    .as-add { flex-direction:column; }
    .as-add__btn { width:100%; }
}