/**
 * anyops Design System Theme
 *
 * カラーパレット：
 * - メイン（ベース）: #2FBF9F（緑）- プライマリーボタン、アクティブ状態
 * - アイコン（サブ）: #2F6FBF（青）- 情報、リンク
 * - アイコン（アクセント）: #FF6B81（ピンク）- 警告、エラー、重要通知
 * - ダーク背景: #1E293B（Slate 800）- メニュー・フッター
 * - 全体背景: #F8FAFC（Slate 50）- メイン作業領域
 * - テキスト: #0F172A（Slate 900）- メインテキスト
 * - サブテキスト: #475569（Slate 600）- 補足テキスト、ボーダー
 *
 * アクセシビリティ：WCAG 2.1 AA準拠（コントラスト比 4.5:1以上）
 */

/* Vue マウント前にテンプレートが見えないようにする */
[v-cloak] { display: none; }

:root {
    /* ==================== ブランドカラー ==================== */
    --color-primary: #2FBF9F;
    --color-primary-dark: #1F9D7F;      /* ボタン背景用（白文字でコントラスト4.5:1） */
    --color-primary-hover: #28a88a;
    --color-primary-light: #d4f4ed;     /* 薄い背景用 */

    /* ==================== セカンダリカラー（青） ==================== */
    --color-secondary: #2F6FBF;
    --color-secondary-hover: #2559a3;
    --color-secondary-light: #e3edf9;

    /* ==================== アクセントカラー（ピンク） ==================== */
    --color-accent: #FF6B81;
    --color-accent-hover: #ff5270;
    --color-accent-light: #ffe8ec;

    /* ==================== ダーク背景（メニュー・フッター） ==================== */
    --color-dark-bg: #1E293B;           /* Slate 800 */
    --color-dark-bg-hover: #334155;     /* Slate 700 */
    --color-dark-text: #F8FAFC;         /* Slate 50 */
    --color-dark-text-muted: #94A3B8;   /* Slate 400 */

    /* ==================== 背景色 ==================== */
    --color-bg-main: #F8FAFC;           /* Slate 50 - メイン作業領域 */
    --color-bg-white: #FFFFFF;
    --color-bg-gray: #F1F5F9;           /* Slate 100 */

    /* ==================== テキストカラー ==================== */
    --color-text-primary: #0F172A;      /* Slate 900 - メインテキスト */
    --color-text-secondary: #475569;    /* Slate 600 - サブテキスト（アクセシビリティ対応） */
    --color-text-muted: #64748B;        /* Slate 500 - 非重要テキスト */
    --color-text-disabled: #94A3B8;     /* Slate 400 - 無効状態 */

    /* ==================== ボーダーカラー ==================== */
    --color-border: #E2E8F0;            /* Slate 200 */
    --color-border-light: #F1F5F9;      /* Slate 100 */
    --color-border-dark: #CBD5E1;       /* Slate 300 */

    /* ==================== ステータスカラー ==================== */
    --color-success: #10b981;           /* 緑 */
    --color-warning: #f59e0b;           /* 黄 */
    --color-danger: #ef4444;            /* 赤 */
    --color-info: #3b82f6;              /* 青 */

    /* ==================== シャドウ ==================== */
    --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);
}

/* ==================== グローバルスタイル ==================== */
body {
    background-color: var(--color-bg-main);
    color: var(--color-text-primary);
}

/* ==================== Bootstrap Override - ボタン ==================== */
.btn-primary {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary-hover) !important;
}

.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

.btn-outline-secondary {
    border-color: var(--color-text-secondary) !important;
    color: var(--color-text-secondary) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--color-text-secondary) !important;
    border-color: var(--color-text-secondary) !important;
    color: #ffffff !important;
}

/* ==================== Bootstrap Override - テキスト色 ==================== */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-info {
    color: var(--color-info) !important;
}

/* ==================== Bootstrap Override - 背景色 ==================== */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-text-secondary) !important;
}

.bg-light {
    background-color: var(--color-bg-gray) !important;
}

/* ==================== Bootstrap Override - ボーダー ==================== */
.border {
    border-color: var(--color-border) !important;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--color-border) !important;
}

/* ==================== Bootstrap Override - カード ==================== */
.card {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--color-bg-white);
    border-bottom-color: var(--color-border);
    color: var(--color-text-primary);
}

/* ==================== Bootstrap Override - リスト ==================== */
.list-group-item {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.list-group-item-action:hover {
    background-color: var(--color-bg-gray);
}

/* ==================== Bootstrap Override - バッジ ==================== */
.badge.bg-primary {
    background-color: var(--color-primary-dark) !important;
}

.badge.bg-secondary {
    background-color: var(--color-text-secondary) !important;
}

.badge.bg-info {
    background-color: var(--color-info) !important;
}

.badge.bg-warning {
    background-color: var(--color-warning) !important;
}

.badge.bg-danger {
    background-color: var(--color-danger) !important;
}

.badge.bg-success {
    background-color: var(--color-success) !important;
}

/* ==================== Bootstrap Override - アラート ==================== */
.alert-success {
    background-color: #d1fae5;
    border-color: var(--color-success);
    color: #065f46;
}

.alert-warning {
    background-color: #fef3c7;
    border-color: var(--color-warning);
    color: #92400e;
}

.alert-danger {
    background-color: #fee2e2;
    border-color: var(--color-danger);
    color: #991b1b;
}

.alert-info {
    background-color: #dbeafe;
    border-color: var(--color-info);
    color: #1e40af;
}

/* ==================== ユーティリティクラス ==================== */

/* プライマリカラー */
.text-primary-custom {
    color: var(--color-primary);
}

.bg-primary-custom {
    background-color: var(--color-primary);
}

.border-primary-custom {
    border-color: var(--color-primary) !important;
}

.btn-primary-custom {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

.btn-primary-custom:disabled,
.btn-primary-custom.disabled {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    opacity: 0.65;
}

/* セカンダリカラー */
.text-secondary-custom {
    color: var(--color-secondary);
}

.bg-secondary-custom {
    background-color: var(--color-secondary);
}

/* アクセントカラー */
.text-accent {
    color: var(--color-accent);
}

.bg-accent {
    background-color: var(--color-accent);
}

/* ダーク背景 */
.bg-dark-custom {
    background-color: var(--color-dark-bg);
    color: var(--color-dark-text);
}

/* ==================== リンクスタイル ==================== */
a {
    color: var(--color-secondary);
}

a:hover {
    color: var(--color-secondary-hover);
}

/* ==================== フォーム要素 ==================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(47, 191, 159, 0.25);
}

/* ==================== テーブル ==================== */
.table {
    color: var(--color-text-primary);
}

.table thead th {
    border-bottom-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

.table tbody td {
    border-top-color: var(--color-border);
}

/* ==================== スピナー ==================== */
.spinner-border.text-primary {
    color: var(--color-primary) !important;
}

.spinner-border.text-secondary {
    color: var(--color-secondary) !important;
}

/* ==================== ページヘッダー ==================== */
.page-header {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 1rem 0; /* Bootstrap py-3 相当 */
}

@media (max-width: 767.98px) {
    .page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        /* iOS ノッチ・Dynamic Island 対応 */
        padding-top: max(1rem, calc(1rem + env(safe-area-inset-top, 0px)));
    }
    /* スペーサー高さは JS で動的にセット（固定値は fallback） */
    .page-header-spacer {
        height: 3.875rem;
    }
}

.page-header-back {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.page-header-title {
    text-align: center;
    font-size: 1.25rem; /* Bootstrap fs-5 相当 */
    font-weight: 500;
    margin: 0;
}

.page-header-bell {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}