@charset "UTF-8";
/*
 * siteb（SiteBeacon）のログインのある画面の形（CH-716）
 *
 * - 読むのは plugins/SitebPlus/templates/layout/default.php だけ（siteb の画面だけ）。ほかのサービスの画面には効かない
 * - 白地＋青緑 1 色（--sb-accent）。字は Noto Sans JP・数字は IBM Plex Mono
 * - 上の白い帯のメニュー（.sb-topbar）・中身 1 列（.sb-main・どの画面も最大 1240px・CH-894・CH-1010）・フッター
 *   （入力・お知らせ・ヘルプなどの画面は .sb-main-read で、中の入力と文だけを読みやすい幅に抑える）
 * - 新しい形の画面（テンプレートで sb_page = new）は .sb-page-new の中の sb-* の部品だけで出す
 * - まだ作り直していない画面（.sb-page-legacy）は、今までの base.css などの見た目のまま（ここでは囲みの余白だけ）
 * - 名前はすべて sb- で始める（共通の CSS の名前と重ねない）
 */

.sb-app {
    --sb-accent: #11727A;
    --sb-accent-dark: #0B565C;
    --sb-accent-soft: #E7F3F4;
    --sb-text: #16202B;
    --sb-text-sub: #4B5764;
    --sb-text-muted: #5A6672;
    --sb-line: #E1E5EA;
    --sb-line-soft: #EDF0F3;
    --sb-bg: #F5F6F8;
    --sb-ok: #1E7A45;
    --sb-ok-soft: #E3F4EA;
    --sb-caution: #9A5B00;
    --sb-caution-soft: #FFF8EC;
    --sb-caution-line: #F0D9A8;
    --sb-danger: #B42318;
    --sb-danger-soft: #FEF3F2;
    --sb-muted-dot: #9AA4AE;
    --sb-maint: #2563EB;
    --sb-font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
    --sb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- 土台：共通の CSS の暗い背景・ギア・固定ヘッダーの余白を外す --- */
body.sb-app {
    margin: 0;
    padding: 0 !important;
    min-height: 100vh;
    display: flex !important;
    flex-direction: column;
    background: var(--sb-bg) !important;
    font-family: var(--sb-font);
    -webkit-font-smoothing: antialiased;
}

body.sb-app::before,
body.sb-app::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.sb-app *,
.sb-app *::before,
.sb-app *::after {
    box-sizing: border-box;
}

/* 数字：前は等幅の字（--sb-mono）だったが、ほかの字と形が違って浮いて見えるので、ふつうの字のまま、けたの幅だけそろえる（CH-1059）。
   コード・トークン・貼り付けの欄（.sb-code・読み取りだけの欄など）は今までどおり --sb-mono */
.sb-mono {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.sb-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sb-app a:focus-visible,
.sb-app button:focus-visible,
.sb-app summary:focus-visible {
    outline: 3px solid var(--sb-accent);
    outline-offset: 2px;
}

/* --- 上の白い帯のメニュー --- */
.sb-topbar {
    background: #fff;
    border-bottom: 1px solid var(--sb-line);
    color: var(--sb-text);
    font-family: var(--sb-font);
}

.sb-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}

.sb-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--sb-text) !important;
    font-weight: 700;
    font-size: 17px;
}

.sb-brand svg {
    color: var(--sb-accent);
}

.sb-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 auto;
    font-size: 15px;
}

.sb-nav-link {
    padding: 10px 14px;
    border-radius: 8px;
    color: #3B4754 !important;
    text-decoration: none;
}

.sb-nav-link:hover {
    background: var(--sb-bg);
}

.sb-nav-link.is-current {
    background: var(--sb-accent-soft);
    color: var(--sb-accent-dark) !important;
    font-weight: 700;
}

.sb-account {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--sb-text-sub);
}

.sb-plan-name {
    color: var(--sb-text-sub) !important;
    text-decoration: none;
}

.sb-plan-name:hover {
    color: var(--sb-accent) !important;
}

.sb-plan-days {
    font-size: 13px;
}

.sb-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.sb-tag-warn {
    background: var(--sb-caution-soft);
    border: 1px solid var(--sb-caution-line);
    color: var(--sb-caution);
}

.sb-account-menu {
    position: relative;
}

.sb-account-button {
    position: relative;
    list-style: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D5DBE1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #3B4754;
    cursor: pointer;
    user-select: none;
}

.sb-account-button::-webkit-details-marker {
    display: none;
}

.sb-account-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sb-danger);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.sb-account-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    min-width: 220px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(22, 32, 43, .12);
}

.sb-account-name {
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--sb-text-muted);
    border-bottom: 1px solid var(--sb-line-soft);
}

.sb-account-panel ul {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
}

.sb-account-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--sb-text) !important;
    text-decoration: none;
    font-size: 14px;
}

.sb-account-panel a:hover {
    background: var(--sb-bg);
}

.sb-account-logout {
    margin-top: 4px;
    border-top: 1px solid var(--sb-line-soft);
    padding-top: 4px;
}

.sb-account-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--sb-danger);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

/* --- 中身（1 列） --- */
.sb-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

/*
 * 入力・お知らせ・ヘルプなどの画面（layout の sb_inner = read・CH-1010 の 8。前は枠ごと 760px の narrow だった）。
 * 枠は上のメニューと同じ 1240px のまま、中の入力は最大 480px、長い文の入力・コピーする欄（readonly）と長い文は最大 760px
 */
.sb-main-read .sb-input {
    max-width: 480px;
}

.sb-main-read .sb-textarea,
.sb-main-read .sb-input[readonly] {
    max-width: 760px;
}

.sb-main-read .sb-page-head p,
.sb-main-read .sb-text,
.sb-main-read .sb-help,
.sb-main-read .sb-notes-list,
.sb-main-read .sb-withdraw-list,
.sb-main-read .sb-news-body,
.sb-main-read .sb-help-body .js-markdown {
    max-width: 760px;
}

.sb-page-new {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--sb-text);
    font-size: 15px;
    line-height: 1.6;
}

.sb-page-new h1,
.sb-page-new h2,
.sb-page-new h3,
.sb-page-new p {
    margin: 0;
}

.sb-page-new a {
    color: var(--sb-accent);
}

.sb-page-new a:hover {
    color: var(--sb-accent-dark);
}

/* 上の Flash の箱（空なら場所を取らない）。白地の上なので字を濃くする */
.sb-main > .flash-message:empty {
    display: none;
}

.sb-main > .flash-message .message.js-flash-message.success { color: #14532D; background: #ECFDF3; }
.sb-main > .flash-message .message.js-flash-message.error { color: #7A271A; background: var(--sb-danger-soft); }
.sb-main > .flash-message .message.js-flash-message.warning { color: #713F12; background: var(--sb-caution-soft); }
.sb-main > .flash-message .message.js-flash-message.info { color: #0B4A50; background: var(--sb-accent-soft); border-color: var(--sb-accent); }
.sb-main > .flash-message .message.js-flash-message.info::before { color: #fff; background: var(--sb-accent); }

/*
 * スクロールして上の箱が見えないときの AppMessage の箱（app-message.js の .app-message-float・CH-1010）。
 * 共通の暗い地（flash-message.css）をやめ、上の箱と同じ薄い地・本文と同じ幅（1240px − 左右の余白 24px）にそろえる。
 * 下の画面が透けないよう、色は不透明。影を薄く付けて、本文と分ける
 */
body.sb-app .flash-message.app-message-float {
    left: 24px;
    right: 24px;
    max-width: 1192px;
}

body.sb-app .app-message-float .message.js-flash-message { box-shadow: 0 4px 16px rgba(16, 24, 40, .12); }
body.sb-app .app-message-float .message.js-flash-message.success { color: #14532D; background: #ECFDF3; }
body.sb-app .app-message-float .message.js-flash-message.error { color: #7A271A; background: var(--sb-danger-soft); }
body.sb-app .app-message-float .message.js-flash-message.warning { color: #713F12; background: var(--sb-caution-soft); }
body.sb-app .app-message-float .message.js-flash-message.info { color: #0B4A50; background: var(--sb-accent-soft); border-color: var(--sb-accent); }
body.sb-app .app-message-float .message.js-flash-message.info::before { color: #fff; background: var(--sb-accent); }

@media (max-width: 760px) {
    body.sb-app .flash-message.app-message-float {
        left: 12px;
        right: 12px;
    }
}

/* まだ作り直していない画面：今までの見た目のまま並べる（左のサイドの列がない分の余白だけ直す） */
.sb-page-legacy .contents-header {
    padding-top: 0;
}

/* --- ボタン --- */
.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    min-width: 0;
    margin: 0;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.sb-page-new .sb-btn-primary,
.sb-btn-primary {
    background: var(--sb-accent);
    color: #fff !important;
}

.sb-btn-primary:hover {
    background: var(--sb-accent-dark);
}

.sb-page-new .sb-btn-sub,
.sb-btn-sub {
    background: #fff;
    border-color: #C5CDD5;
    color: var(--sb-accent-dark) !important;
}

.sb-btn-sub:hover {
    border-color: var(--sb-accent);
}

.sb-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--sb-text-sub) !important;
    font-weight: 500;
}

.sb-btn-ghost:hover {
    background: var(--sb-bg);
}

.sb-btn-small {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* --- 札 --- */
.sb-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.sb-chip-ok { color: var(--sb-ok); }
.sb-chip-caution,
.sb-chip-warn { color: var(--sb-caution); }
.sb-chip-danger { color: var(--sb-danger); }
.sb-chip-none,
.sb-chip-stopped { color: var(--sb-text-muted); }
.sb-chip-maint { color: var(--sb-maint); }

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

/* いちばん上のひとこと */
.sb-summary {
    padding: 24px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sb-summary-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sb-summary-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
}

.sb-summary.is-ok .sb-summary-icon {
    background: var(--sb-ok-soft);
    color: var(--sb-ok);
}

/* 全部まだ結果なし（登録したばかり・4 段目）：「問題なし」の緑にしない。落ち着いた青緑 */
.sb-summary.is-waiting .sb-summary-icon {
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
}

.sb-summary.is-attention .sb-summary-icon {
    background: var(--sb-caution-soft);
    color: var(--sb-caution);
}

.sb-summary-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sb-summary-text h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sb-text);
}

.sb-summary-text p {
    font-size: 14px;
    color: var(--sb-text-sub);
}

.sb-summary-note {
    font-size: 13px !important;
    color: var(--sb-text-muted) !important;
}

.sb-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 見ておくこと */
.sb-notice {
    background: var(--sb-caution-soft);
    border-color: var(--sb-caution-line);
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sb-notice h2 {
    font-size: 15px;
    font-weight: 700;
    color: #7A4B00;
}

.sb-notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sb-notice-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    border-top: 1px solid var(--sb-caution-line);
    font-size: 15px;
}

.sb-notice-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.sb-notice-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

.sb-notice-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sb-notice-detail {
    color: var(--sb-text-sub);
    overflow-wrap: anywhere;
}

.sb-notice-detail.is-danger {
    color: var(--sb-danger);
}

.sb-notice-ago {
    font-size: 13px;
    color: var(--sb-text-muted);
}

.sb-notice-link {
    font-weight: 700;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* --- 一覧 --- */
.sb-list {
    overflow: hidden;
}

.sb-list-toolbar {
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--sb-line);
}

.sb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sb-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #D5DBE1;
    background: #fff;
    color: #3B4754 !important;
    font-size: 14px;
    text-decoration: none;
}

.sb-filter:hover {
    border-color: var(--sb-accent);
}

.sb-filter.is-active {
    border-color: var(--sb-text);
    background: var(--sb-text);
    color: #fff !important;
    font-weight: 700;
}

.sb-filter-clear {
    font-size: 13px;
    margin-left: 4px;
}

/* 並べ方の欄（CH-880）：PC では並べているときだけ出す（説明と「手で決めた順に戻す」）。選ぶ欄はスマホの幅だけ（下の @media） */
.sb-list-sortbar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--sb-line-soft);
    font-size: 13px;
}

.sb-list-sortbar.is-sorted {
    display: flex;
}

.sb-sort-form {
    display: none;
    align-items: center;
    gap: 8px;
}

.sb-sort-form.is-js .sb-sort-submit {
    display: none;
}

.sb-sort-form-label {
    margin: 0;
    color: var(--sb-text-muted);
}

.sb-sort-select {
    width: auto;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #D5DBE1;
    border-radius: 8px;
    background: #fff;
    color: var(--sb-text);
    font-size: 14px;
}

.sb-sort-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    color: var(--sb-text-sub);
}

/* 見出しの並べ替え（押せる見出し・今の並べ方は ▲／▼・ほかは薄い ↕） */
.sb-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit !important;
    text-decoration: none;
}

.sb-th-sort:hover {
    color: var(--sb-accent) !important;
}

.sb-th-sort.is-active {
    color: var(--sb-text) !important;
    font-weight: 700;
}

.sb-th-arrow {
    font-size: 12px;
    opacity: .45;
}

.sb-th-sort.is-active .sb-th-arrow {
    opacity: 1;
}

.sb-list-empty {
    padding: 28px 20px;
    color: var(--sb-text-sub);
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.sb-table th {
    padding: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-text-muted);
    white-space: nowrap;
    /* 共通の CSS が th に灰色の地（#64748b）を付けるので、白地の表では打ち消す */
    background: transparent;
}

.sb-table td {
    padding: 14px 12px;
    border-top: 1px solid var(--sb-line-soft);
    vertical-align: middle;
    color: var(--sb-text);
}

.sb-table th:first-child,
.sb-table td:first-child {
    padding-left: 20px;
}

.sb-table th:last-child,
.sb-table td:last-child {
    padding-right: 20px;
}

.sb-table tbody tr:hover td {
    background: #FAFBFC;
}

.sb-table .sb-col-num {
    text-align: right;
    white-space: nowrap;
}

.sb-table .sb-col-state {
    white-space: nowrap;
}

.sb-table .sb-col-ops {
    text-align: right;
    width: 1%;
}

.sb-table tr.is-stopped .sb-site-name,
.sb-table tr.is-stopped .sb-col-num {
    color: var(--sb-text-muted);
}

.sb-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.sb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.sb-state-ok { color: #1E5E38; }
.sb-state-ok .sb-dot { background: var(--sb-ok); }
.sb-state-caution,
.sb-state-warn { color: var(--sb-caution); }
.sb-state-danger { color: var(--sb-danger); }
.sb-state-none,
.sb-state-stopped { color: var(--sb-text-sub); }
.sb-state-none .sb-dot,
.sb-state-stopped .sb-dot { background: var(--sb-muted-dot); }
.sb-state-maint { color: var(--sb-maint); }

/* 状態の理由：2 行まで出し、それより長いときだけ …（全文は title・CH-942）。列の幅（14em）は前と同じ */
.sb-state-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sb-text-muted);
    max-width: 14em;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.sb-col-state .sb-chip {
    margin-top: 4px;
}

.sb-site {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--sb-text) !important;
    min-width: 0;
}

.sb-site-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-accent);
}

.sb-icon-1 { background: #2563EB; }
.sb-icon-2 { background: #9D174D; }
.sb-icon-3 { background: #B45309; }
.sb-icon-4 { background: #4D7C0F; }
.sb-icon-5 { background: #6D28D9; }
.sb-icon-6 { background: #BE185D; }
.sb-icon-7 { background: #475569; }

.sb-site-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-site-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sb-site:hover .sb-site-name {
    color: var(--sb-accent);
}

.sb-site-url,
.sb-site-note {
    font-size: 13px;
    color: var(--sb-text-muted);
    overflow-wrap: anywhere;
}

.sb-ssl.is-caution { color: var(--sb-caution); font-weight: 700; }
.sb-ssl.is-danger { color: var(--sb-danger); font-weight: 700; }
/* まだ SSL の結果がない（登録の直後に取れなかった・次の見回りで取る・CH-1010） */
.sb-ssl.is-pending { color: var(--sb-text-muted); font-size: 12px; }

.sb-row-ops {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

/* 並べ替え（Parts/sort の .btn.sort_btn）を小さく */
.sb-sort {
    display: inline-flex;
    gap: 2px;
}

.sb-sort .btn {
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    line-height: 1.6;
}

.sb-sort .btn:hover {
    border-color: var(--sb-accent) !important;
}

.sb-row-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 8px;
    color: #3B4754 !important;
    text-decoration: none;
}

.sb-row-more:hover {
    background: var(--sb-bg);
    color: var(--sb-accent) !important;
}

.sb-row-more-text {
    font-size: 13px;
}

.sb-list-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--sb-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--sb-text-muted);
}

.sb-list-footer .mx-auto {
    margin: 0 !important;
}

.sb-list-footer .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-list-footer .pagination:empty {
    display: none;
}

.sb-list-footer .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--sb-line) !important;
    background: #fff !important;
    color: #3B4754 !important;
    box-shadow: none !important;
    text-decoration: none;
}

.sb-list-footer .page-item.active .page-link {
    background: var(--sb-text) !important;
    border-color: var(--sb-text) !important;
    color: #fff !important;
}

.sb-list-footer .page-item.disabled .page-link {
    opacity: .5;
}

/* 監視の枠（小さく） */
.sb-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 14px;
    color: var(--sb-text-sub);
}

.sb-slots strong {
    color: var(--sb-text);
}

.sb-slots-bar {
    flex: 0 1 240px;
    width: 240px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sb-line);
    -webkit-appearance: none;
    appearance: none;
}

.sb-slots-bar::-webkit-progress-bar {
    background: var(--sb-line);
    border-radius: 999px;
}

.sb-slots-bar::-webkit-progress-value {
    background: var(--sb-accent);
    border-radius: 999px;
}

.sb-slots-bar::-moz-progress-bar {
    background: var(--sb-accent);
    border-radius: 999px;
}

.sb-slots-full {
    color: var(--sb-caution);
    font-weight: 700;
}

/* --- フッター --- */
.sb-footer {
    border-top: 1px solid var(--sb-line);
    background: #fff;
    font-family: var(--sb-font);
}

.sb-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--sb-text-muted);
}

.sb-footer-inner a {
    color: var(--sb-text-sub) !important;
    text-decoration: none;
}

.sb-footer-inner a:hover {
    color: var(--sb-accent) !important;
    text-decoration: underline;
}

.sb-footer-copy {
    margin-left: auto;
}

/* 共通のダイアログ（今までのレイアウトの style 属性をクラスにした） */
.sb-dialog-body {
    height: 500px;
}

.sb-dialog-frame {
    width: 100%;
    height: 100%;
}

/* --- スマホの幅：表をカードの並びにする（画面案 Phone） --- */
@media (max-width: 760px) {
    .sb-topbar-inner {
        padding: 10px 16px;
        gap: 8px 12px;
    }

    .sb-brand {
        flex: 1 1 auto;
    }

    .sb-nav {
        order: 3;
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -4px;
    }

    .sb-nav-link {
        white-space: nowrap;
    }

    .sb-plan-name {
        display: none;
    }

    .sb-main {
        padding: 16px 12px 48px;
    }

    .sb-summary {
        padding: 18px;
    }

    .sb-summary-text h1 {
        font-size: 20px;
    }

    .sb-summary-actions,
    .sb-summary-actions .sb-btn {
        width: 100%;
    }

    .sb-summary-actions .sb-btn {
        flex: 1 1 auto;
    }

    .sb-notice {
        padding: 16px;
    }

    .sb-list-toolbar {
        padding: 12px;
    }

    .sb-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
    }

    /* 右にまだボタンがあるときは、右端をぼかして「横に動かせる」と分かるようにする（has-more は siteb-list.js が付け外し・CH-1059） */
    .sb-filters.has-more {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }

    /* 一覧の上の文（「…最後に確認した時刻：11/3 8:39（1 分以内）」）は、語の途中で折り返さない（CH-1059） */
    .sb-summary-text p {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* フッターのリンクは押せる高さを 44px に（CH-1059） */
    .sb-footer-inner {
        gap: 0 20px;
    }

    .sb-footer-inner a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .sb-filter {
        white-space: nowrap;
    }

    .sb-table thead {
        display: none;
    }

    .sb-table,
    .sb-table tbody {
        display: block;
    }

    .sb-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "site site site"
            "state state state"
            "up ms ssl"
            "ops ops ops";
        gap: 8px 10px;
        padding: 14px 12px;
        border-top: 1px solid var(--sb-line-soft);
    }

    .sb-table tbody tr:first-child {
        border-top: 0;
    }

    .sb-table td {
        padding: 0 !important;
        border: 0;
        text-align: left !important;
        white-space: normal;
    }

    .sb-table tbody tr:hover td {
        background: transparent;
    }

    .sb-table .sb-col-site { grid-area: site; }
    .sb-table .sb-col-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .sb-table td[data-label="24 時間の稼働"] { grid-area: up; }
    .sb-table td[data-label="平均の応答"] { grid-area: ms; }

    /* 見出しが出ないので、表の上に並べ方を選ぶ欄を出す（CH-880） */
    .sb-list-sortbar {
        display: flex;
        padding: 10px 12px;
    }

    .sb-sort-form {
        display: flex;
    }
    .sb-table td[data-label="SSL の期限"] { grid-area: ssl; }
    .sb-table .sb-col-ops { grid-area: ops; width: auto; }

    .sb-table .sb-col-num::before {
        content: attr(data-label);
        display: block;
        font-family: var(--sb-font);
        font-size: 12px;
        font-weight: 400;
        color: var(--sb-text-muted);
    }

    .sb-state-sub,
    .sb-col-state .sb-chip {
        margin-top: 0;
    }

    .sb-row-ops {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .sb-row-more {
        margin-left: auto;
        border: 1px solid var(--sb-line);
        padding: 0 12px;
    }

    .sb-list-footer {
        padding: 12px;
    }

    .sb-slots-bar {
        width: 160px;
    }

    .sb-footer-copy {
        margin-left: 0;
    }
}