/* =========================================================
   accounts/style.css - 共通認証システムの画面スタイル
   メインホームページの /css/style.css（管理ダッシュボードと同じ
   .admin-header / .admin-nav / .stats-grid / .form-card 等）を
   前提とした補完スタイル。
   ========================================================= */

.acct-body {
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.acct-body .admin-content { flex: 1; }
.acct-main { flex: 1; }

/* ---- ヘッダー帯（ロゴ + ユーザー名） ---- */
.acct-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.acct-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
}
.acct-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    background: #fff;
    flex: 0 0 auto;
}
.acct-logo-lg {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    margin: 0 auto var(--space-md);
    display: block;
}
.acct-brand-text { display: flex; flex-direction: column; }
.acct-brand-title {
    font-family: var(--font-family-en);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.3;
}
.acct-brand-sub {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
}
.acct-header-user {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}
.acct-accent { color: var(--color-primary); }

/* ---- カード ---- */
.acct-card { margin-bottom: var(--space-xl); }
.acct-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}
.acct-card-danger { border-color: #f5d0cc; }
.acct-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}
.acct-card-title-flush { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* 「すべてのサービス」設定 */
.acct-allsvc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.acct-allsvc-main { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.acct-allsvc-note { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.acct-sub-title { font-size: var(--font-size-base); font-weight: 700; margin: var(--space-lg) 0 var(--space-sm); }
.acct-muted { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-md); }
.acct-nowrap { white-space: nowrap; }

.acct-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
}
.acct-grid-2 .acct-card { margin-bottom: var(--space-xl); }

/* ---- 利用できるサービス（タイル表示） ---- */
.acct-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
}
.acct-svc-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: all var(--transition-base);
}
.acct-svc-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}
.acct-svc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct-service-name { font-weight: 700; }
.acct-service-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---- フォーム補助 ---- */
.acct-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 var(--space-lg);
}
.acct-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: var(--space-sm) 0 var(--space-md);
    font-size: var(--font-size-sm);
}
.acct-check-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.acct-select-sm { width: auto; padding: 6px 10px; font-size: var(--font-size-sm); }
.acct-actions { display: flex; gap: 10px; margin-top: var(--space-md); }
.acct-delete-form { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px dashed var(--color-border); }

/* メインCSSに無いボタン種別 */
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-hover); color: var(--color-text); }
.btn-danger { background: var(--color-error); color: #fff; border: none; }
.btn-danger:hover { background: #c0392b; color: #fff; }
.btn-sm { padding: 6px 14px; font-size: var(--font-size-sm); }

/* ---- バッジ ---- */
.acct-badge {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-light);
    vertical-align: middle;
    white-space: nowrap;
}
.acct-badge-admin { background: var(--color-primary); color: #fff; }
.acct-badge-dev { background: var(--color-info); color: #fff; }
.acct-badge-danger { background: var(--color-error); color: #fff; }
.acct-badge-header { background: var(--color-accent); color: #4a3c00; }

/* ---- テーブル（.admin-table と同じトーン） ---- */
.acct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
    background: var(--color-surface);
}
.acct-table th, .acct-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}
.acct-table th {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg);
    white-space: nowrap;
}
.acct-table tr:hover td { background: var(--color-surface-hover); }

/* ---- メール設定のプレビュー ---- */
.acct-mail-preview {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.acct-mail-preview-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.acct-mail-preview-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acct-mail-preview-addr { font-size: var(--font-size-sm); }
.acct-mail-preview-subject {
    margin-top: 4px;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* ---- ログイン ---- */
.acct-login-head h1 { font-family: var(--font-family-en); }
.acct-login-service {
    margin-top: var(--space-sm);
    padding: 8px 12px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm) !important;
    color: var(--color-text) !important;
}
.acct-note { text-align: center; font-size: var(--font-size-sm); margin-bottom: var(--space-md); }
.acct-code-input { text-align: center; letter-spacing: 6px; font-size: 1.3rem; }
.acct-btn-block { width: 100%; margin-top: var(--space-sm); }
.acct-login-hint {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-top: var(--space-md);
}
.acct-login-back { text-align: center; margin-top: var(--space-lg); }
.acct-login-back a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: var(--font-size-sm);
}
.acct-login-back a:hover { color: var(--color-primary); }

/* ---- 403ページ（style.css を読まない環境でも成立する最低限） ---- */
.acct-center {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.acct-center .acct-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-light, #eceef5);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 27, 61, 0.08);
    padding: 32px;
    max-width: 420px;
}
.acct-center .btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    background: var(--color-primary, #403999);
    color: #fff;
}

/* ---- サービス編集行 ---- */
.acct-service-edit {
    padding: var(--space-md) 0;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: var(--space-sm);
}
.acct-service-edit:last-of-type { border-bottom: none; }

/* ---- フッター ---- */
.acct-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: var(--space-lg);
}

@media (max-width: 640px) {
    .acct-header-bar { justify-content: center; text-align: center; }
    .acct-table { display: block; overflow-x: auto; white-space: nowrap; }
}