/* 部品: カード、横並び、ボタン、表、状態バッジ、通知。複数の画面で使う。 */

/* カード */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

/* 横並び */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

/* フォーム部品・ボタン */
select, button, .btn {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--fg);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* 表 */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { background: #f3f4f6; font-weight: 600; }
td.wrap { white-space: normal; }

/* 状態バッジ（実行履歴） */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.badge.running { background: var(--primary); }
.badge.success { background: var(--ok); }
.badge.partial { background: var(--warn); }
.badge.failed { background: var(--danger); }

/* 通知 */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.flash.success { background: #dcfce7; color: #166534; }
.flash.error { background: #fee2e2; color: #991b1b; }