/* 顧客画面・運営画面で共通の最小限のスタイル (フレームワークなし、外部読み込みなし)。
   画面は静的 SSR の素の HTML なので、要素セレクタを基本にしてクラスは状態バッジ・カード・バナーだけに使う */

:root {
    --fg: #1f2933;
    --muted: #616e7c;
    --bg: #f5f7fa;
    --surface: #ffffff;
    --border: #d9e2ec;
    --accent: #2f6fde;
    --accent-dark: #1d4fa8;
    --danger: #c62828;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg);
    background: var(--bg);
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 40px;
}

h1 { font-size: 1.6rem; margin: 0.4em 0 0.6em; }
h2 { font-size: 1.2rem; margin: 1.6em 0 0.5em; }
h3 { font-size: 1.05rem; margin: 1.2em 0 0.4em; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

code { font-size: 0.9em; background: #eef2f7; padding: 1px 5px; border-radius: 4px; }
small, .muted { color: var(--muted); }

/* ---- デモのバナー ---- */
.demo-banner {
    background: #fff4ce;
    color: #6b4e00;
    border-bottom: 1px solid #f0d78c;
    padding: 6px 20px;
    font-size: 0.9rem;
    text-align: center;
}

/* ---- ヘッダーとナビゲーション ---- */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 10px 20px;
    background: #1f2933;
    color: #fff;
}

.site-header .brand { font-size: 1.05rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-header nav a {
    color: #e4e7eb;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
}
.site-header nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.site-header nav a.ops-link { border: 1px solid rgba(255, 255, 255, 0.35); }
.site-header .whoami { margin-left: auto; color: #cbd2d9; }
/* ログイン・新規登録・ログアウト (公開 Web のみ) */
.site-header .account-links { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.site-header .account-links a { color: #e4e7eb; text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.site-header .account-links a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.site-header .inline-form { margin: 0; }

/* ログイン・新規登録の IdP ごとのボタン (リンク) */
.login-providers { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.login-providers .login-provider {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    text-decoration: none;
}

/* 運営画面の各ページ先頭の <nav> (main の直下) はタブ風にする */
main > nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
main > nav a {
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
}
main > nav a:hover { border-color: var(--accent); }

footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 20px 30px;
    color: var(--muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
}
footer .footer-links a { color: inherit; }

/* ---- 表 ---- */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
th, td {
    text-align: left;
    vertical-align: top;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
}
thead th { background: #eef2f7; font-weight: 600; font-size: 0.9rem; }
tbody th { width: 11em; font-weight: 600; color: var(--muted); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

/* ---- フォームとボタン ---- */
form { margin: 0; }
label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 4px 0; }
input, select {
    font: inherit;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

button, .button-like {
    font: inherit;
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
button:hover:not([disabled]) { background: var(--accent-dark); }
button[disabled] {
    background: #e4e7eb;
    border-color: #cbd2d9;
    color: #9aa5b1;
    cursor: not-allowed;
}
form.danger button:not([disabled]) { background: var(--danger); border-color: var(--danger); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }

/* ---- 状態バッジ ---- */
.badge {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.state-stopped  { background: #e4e7eb; color: #3e4c59; }
.state-starting { background: #e3f0ff; color: #1d4fa8; border-color: #b6d4fe; }
.state-running  { background: #def7e5; color: #186a3b; border-color: #a7e3b9; }
.state-stopping { background: #fff1d6; color: #8a5300; border-color: #f7d48a; }
.state-saving   { background: #fff1d6; color: #8a5300; border-color: #f7d48a; }
.state-error    { background: #fde2e1; color: #a61b1b; border-color: #f5b5b2; }
.state-deleted  { background: #f5f7fa; color: #9aa5b1; border-color: #d9e2ec; text-decoration: line-through; }

/* ---- カード ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin: 12px 0 20px;
}
.server-card { display: flex; flex-direction: column; gap: 6px; }
.server-card .card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.server-card .card-head a { font-weight: 600; word-break: break-all; }
.server-card p { margin: 0; }
.server-card dl { margin: 0; display: grid; grid-template-columns: 4.5em 1fr; gap: 2px 8px; }
.server-card dt { color: var(--muted); font-size: 0.9rem; }
.server-card dd { margin: 0; }

.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 8px 0;
}
.card.pack { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fg); }
.card.pack:hover { border-color: var(--accent); }
.card.pack .button-like { align-self: flex-start; }

.demo-panel, .demo-guide { margin: 12px 0 20px; border-color: #f0d78c; background: #fffbea; }
.demo-panel h2, .demo-guide h2 { margin-top: 0; }

/* ---- 通知 ---- */
.flash {
    background: #e3f0ff;
    border: 1px solid #b6d4fe;
    border-radius: var(--radius);
    padding: 8px 12px;
}
.note { background: #fff8e6; border-left: 4px solid #f0b429; padding: 6px 12px; border-radius: 4px; }
.note.error { background: #fde2e1; border-left-color: var(--danger); }
.note.demo { background: #fffbea; border-left-color: #f0d78c; }
.balance strong { font-size: 1.3rem; }