/* サブスクくん ブランドテーマ
   Bootstrap 5はWebJarsのビルド済みCSSをそのまま使っているため(Node.jsビルドなし)、
   SCSS変数の上書きではなく実クラスへの直接上書きで配色・装飾を調整する */
:root {
    --sk-primary: #5b4fe9;
    --sk-primary-dark: #4638c4;
    --sk-primary-light: #edebff;
    --sk-accent: #17c3b2;
    --sk-heading: #2b2350;
    --sk-border-soft: #e3e0f7;
    --sk-shadow: 0 4px 16px rgba(91, 79, 233, 0.1);
}

body {
    background: linear-gradient(180deg, #f6f5fc 0%, #ece9fb 100%) fixed;
    color: #322b55;
}

/* ナビゲーションバー */
.subscbot-navbar {
    background: linear-gradient(135deg, #4c3fe0 0%, #6f5af6 55%, #8b7bfa 100%) !important;
    box-shadow: 0 2px 14px rgba(76, 63, 224, 0.35);
}

.subscbot-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 1.35rem;
}

.subscbot-navbar .nav-link {
    font-weight: 500;
    opacity: 0.88;
}

.subscbot-navbar .nav-link:hover,
.subscbot-navbar .nav-link:focus {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* 見出し・リンク */
h1, h2, h3, h4, h5, h6 {
    color: var(--sk-heading);
}

a {
    color: var(--sk-primary);
}

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

/* カード */
.card {
    border: 1px solid var(--sk-border-soft);
    border-radius: 0.9rem;
    box-shadow: var(--sk-shadow);
}

.card-header {
    background-color: var(--sk-primary-light);
    border-bottom: 1px solid var(--sk-border-soft);
    color: var(--sk-heading);
    font-weight: 600;
    border-top-left-radius: 0.9rem !important;
    border-top-right-radius: 0.9rem !important;
}

/* ボタン */
.btn {
    border-radius: 0.6rem;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--sk-primary);
    border-color: var(--sk-primary);
    box-shadow: 0 2px 8px rgba(91, 79, 233, 0.35);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sk-primary-dark);
    border-color: var(--sk-primary-dark);
}

.btn-outline-primary {
    color: var(--sk-primary);
    border-color: var(--sk-primary);
}

.btn-outline-primary:hover {
    background-color: var(--sk-primary);
    border-color: var(--sk-primary);
}

/* テーブル */
.table thead th {
    background-color: var(--sk-primary-light);
    color: var(--sk-heading);
    border-bottom: 2px solid var(--sk-border-soft);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--sk-primary-light);
}

/* バッジ */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    padding: 0.4em 0.75em;
}

/* フォーム */
.form-control:focus,
.form-select:focus {
    border-color: var(--sk-primary);
    box-shadow: 0 0 0 0.2rem rgba(91, 79, 233, 0.2);
}

/* アラート */
.alert {
    border: none;
    border-radius: 0.75rem;
}

/* ログイン・パスワード再設定画面 */
.auth-page {
    background: linear-gradient(135deg, #ecebff 0%, #f6f5fc 45%, #e3f9f5 100%);
    min-height: 100vh;
}

.auth-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(76, 63, 224, 0.2);
}

.auth-brand {
    color: var(--sk-primary);
    font-weight: 700;
}