/* 営業管理システム 統一カラーシステム */
/* 制作ルール: 背景は白、大企業らしい信頼感ある色合い、ライトモード固定 */

:root {
    /* ========== 管理者カラーシステム ========== */
    --admin-primary: #2C3E50;           /* 管理者メインカラー（ダークブルーグレー） */
    --admin-accent: #34495E;            /* 管理者アクセントカラー */
    --admin-hover: #1A252F;             /* 管理者ホバー色 */
    
    /* ========== 従業員カラーシステム ========== */
    --employee-primary: #10B981;        /* 従業員メインカラー（グリーン） */
    --employee-accent: #34D399;         /* 従業員アクセントカラー */
    --employee-hover: #059669;          /* 従業員ホバー色 */
    
    /* ========== 基本色彩システム ========== */
    --white: #FFFFFF;                   /* 純白背景色 */
    --text-dark: #2C3E50;              /* ダークテキスト（白背景用） */
    --text-light: #FFFFFF;             /* ライトテキスト（濃い背景用） */
    --text-secondary: #6B7280;         /* セカンダリテキスト */
    --text-muted: #9CA3AF;             /* ミューテッドテキスト */
    
    /* ========== ステータスカラー ========== */
    --success-green: #10B981;          /* 成功・承認 */
    --success-light: #34D399;
    --warning-orange: #F59E0B;         /* 警告・待機 */
    --warning-light: #FBBF24;
    --danger-red: #EF4444;             /* 危険・拒否 */
    --danger-light: #F87171;
    --info-cyan: #06B6D4;              /* 情報・中性 */
    --info-light: #22D3EE;
    
    /* ========== グレースケール ========== */
    --gray-50: #F9FAFB;               /* 最薄グレー */
    --gray-100: #F3F4F6;             /* 薄グレー */
    --gray-200: #E5E7EB;             /* ライトグレー */
    --gray-300: #D1D5DB;             /* ミディアムライトグレー */
    --gray-400: #9CA3AF;             /* ミディアムグレー */
    --gray-500: #6B7280;             /* グレー */
    --gray-600: #4B5563;             /* ダークグレー */
    --gray-700: #374151;             /* ダーカーグレー */
    --gray-800: #1F2937;             /* 最濃グレー */
    --gray-900: #111827;             /* 最濃色 */
    
    /* ========== シャドウシステム ========== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* ========== ボーダーラジウス ========== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

/* ========== 基本色彩の絶対保証 ========== */
/* 白背景で文字が見えなくなることを防ぐ */

body {
    background-color: var(--white) !important;
    color: var(--text-dark) !important;
}

.card,
.kpi-card,
.table-container {
    background-color: var(--white) !important;
    color: var(--text-dark) !important;
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    background-color: var(--white) !important;
    color: var(--text-dark) !important;
}

/* ========== 適切なコントラスト保証 ========== */
/* 濃い背景要素には白文字、白背景要素にはダーク文字 */

/* 管理者ナビゲーション（濃い背景） */
.navbar.admin,
.btn-primary,
.btn.btn-primary,
.badge.bg-primary,
.alert-primary {
    color: var(--text-light) !important;
}

/* 従業員ナビゲーション（濃い背景） */
.navbar.employee,
.btn-success,
.btn.btn-success,
.badge.bg-success {
    color: var(--text-light) !important;
}

/* 警告・危険要素（濃い背景） */
.btn-warning,
.btn.btn-warning,
.badge.bg-warning,
.btn-danger,
.btn.btn-danger,
.badge.bg-danger {
    color: var(--text-light) !important;
}

/* 白・薄い背景要素（ダーク文字） */
.card-body,
.table tbody td,
.table thead th,
.form-label,
.text-muted {
    color: var(--text-dark) !important;
}

/* ========== プリセットクラス ========== */
.bg-admin-primary { background-color: var(--admin-primary) !important; color: var(--text-light) !important; }
.bg-admin-accent { background-color: var(--admin-accent) !important; color: var(--text-light) !important; }
.bg-employee-primary { background-color: var(--employee-primary) !important; color: var(--text-light) !important; }
.bg-employee-accent { background-color: var(--employee-accent) !important; color: var(--text-light) !important; }

.text-admin-primary { color: var(--admin-primary) !important; }
.text-employee-primary { color: var(--employee-primary) !important; }
.text-dark-safe { color: var(--text-dark) !important; }
.text-light-safe { color: var(--text-light) !important; }

/* ========== 管理画面特化スタイル ========== */
.admin-navbar {
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-accent) 100%) !important;
}

.employee-navbar {
    background: linear-gradient(135deg, var(--employee-primary) 0%, var(--employee-accent) 100%) !important;
}

/* ========== アクセシビリティ保証 ========== */
/* WCAGコントラスト比ガイドライン準拠 */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== デバッグ用ヘルパー ========== */
/* 開発時のみ使用 */
.debug-white-bg { background: var(--white) !important; border: 2px solid red; }
.debug-dark-text { color: var(--text-dark) !important; background: yellow; }
.debug-light-text { color: var(--text-light) !important; background: black; }