/* テナント管理コンソール（Phase 5-B UI）。style.css を土台に最小追加。 */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px 0;
    max-width: 960px;
    margin: 0 auto;
}
.tab {
    background: transparent;
    border: 1px solid #d8cfb8;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 8px 16px;
    cursor: pointer;
    color: #6b5d43;
    font: inherit;
}
.tab[aria-selected="true"] {
    background: #fff;
    color: #8B3A3A;
    font-weight: 600;
    box-shadow: 0 -2px 0 #8B3A3A inset;
}

main { max-width: 960px; margin: 0 auto; padding: 0 16px 40px; }

.muted { color: #8a7d63; font-size: .9rem; }
.num { text-align: right; }
.hidden { display: none !important; }

.table-wrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: .88rem; }
.grid th, .grid td { padding: 8px 10px; border-top: 1px solid #e6ddc7; text-align: left; }
.grid thead th { border-top: none; border-bottom: 2px solid #e6ddc7; color: #6b5d43; white-space: nowrap; }
.grid td.num, .grid th.num { text-align: right; }

.meter { height: 14px; background: #efe8d6; border-radius: 7px; overflow: hidden; margin: 8px 0; }
.meter-fill { height: 100%; width: 0; background: #8B3A3A; transition: width .3s; }
.meter-fill.warn { background: #C9A84C; }
.meter-fill.over { background: #b3402f; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 8px 0; }
.kv dt { color: #8a7d63; }
.kv dd { margin: 0; font-weight: 600; }

.subcard { border: 1px solid #e6ddc7; border-radius: 8px; padding: 12px 16px; margin: 10px 0 18px; background: #fbf8ef; }
.card-inner { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.card-inner label { display: flex; flex-direction: column; gap: 4px; }

.keyform { margin: 10px 0; }
.keyform .row { display: flex; gap: 8px; align-items: center; }
.keyform input { flex: 1; }
.mask { font-family: monospace; }

.msg { min-height: 1.2em; margin: 8px 0 0; font-size: .9rem; }
.msg.ok { color: #2e6b3e; }
.msg.err { color: #b3402f; }

.navlink { text-decoration: none; }
.rolebtn, .statusbtn, .pwbtn { font-size: .8rem; padding: 4px 8px; margin: 0 2px; cursor: pointer; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .78rem; }
.badge.on { background: #dceede; color: #2e6b3e; }
.badge.off { background: #f0dcda; color: #b3402f; }

@media (prefers-color-scheme: dark) {
    .tab { border-color: #4a4436; color: #cdbfa0; }
    .tab[aria-selected="true"] { background: #2a2620; color: #e6b7a9; }
    .grid th, .grid td { border-color: #3a352b; }
    .subcard { background: #241f18; border-color: #3a352b; }
    .meter { background: #3a352b; }
}