/**
 * common.css
 * 共通スタイル定義
 * - ベースフォントサイズ（1.25倍=20px）
 * - CSS変数（カラーパレット、サイズ）
 * - ベーススタイル
 */

/* ==========================================================================
   1. ベースフォントサイズ設定
   ========================================================================== */

html {
    /* 16px * 1.25 = 20px をベースに設定 */
    /* ブラウザ100%表示で125%相当の見た目を実現 */
    font-size: 125%;
}

/* ==========================================================================
   2. CSS変数（共通パレット）
   ========================================================================== */

:root {
    /* Primary Colors (Coral — 新ブランドカラー、モック hue 25 準拠) */
    --primary-color: #cb4644;
    --primary-dark: #a83634;
    --primary-light: #ffe2de;

    /* Secondary Colors */
    --secondary-color: #64748b;
    --secondary-dark: #475569;
    --secondary-light: #f1f5f9;

    /* Semantic Colors */
    --success-color: #10b981;
    --success-bg: #d1fae5;

    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;

    --danger-color: #ef4444;
    --danger-bg: #fee2e2;

    --info-color: #3b82f6;
    --info-bg: #dbeafe;

    /* Extended Colors */
    --purple-color: #7c3aed;
    --purple-bg: #ede9fe;

    --cyan-color: #06b6d4;
    --cyan-bg: #cffafe;

    --pink-color: #ec4899;
    --pink-bg: #fce7f3;

    /* Neutral Colors */
    --background-color: #f3f4f6;
    --card-bg: #ffffff;

    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;

    /* 打刻修正用（共通：淡い緑系） */
    --override-color: #10b981;
    --override-bg: #ecfdf5;
    --override-text: #047857;
    --override-border: #a7f3d0;

    /* 土曜・日曜・祝日の背景色 */
    --saturday-bg: #eff6ff;
    --saturday-hover: #dbeafe;
    --sunday-bg: #fef2f2;
    --sunday-hover: #fee2e2;
    --holiday-bg: #fef2f2;
    --today-bg: #e0f2fe;

    /* 交互背景色 */
    --row-odd-bg: #ffffff;
    --row-even-bg: #f8fafc;

    /* Spacing & Sizing */
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --box-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.05);
    --transition-speed: 0.15s;
}

/* ==========================================================================
   3. ベーススタイル
   ========================================================================== */

body {
    background-color: var(--background-color);
    color: var(--text-main);
}

/* ==========================================================================
   共通: 上に戻るフロートボタン
   ========================================================================== */

.app-back-to-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1040;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(203, 70, 68, 0.18);
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, visibility var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.app-back-to-top:hover,
.app-back-to-top:focus {
    background: var(--primary-dark);
    color: #fff;
}

.app-back-to-top:focus-visible {
    outline: 3px solid rgba(203, 70, 68, 0.28);
    outline-offset: 3px;
}

.app-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

body.modal-open .app-back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .app-back-to-top {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* ==========================================================================
   共通: window スクロール前提のテーブル
   ========================================================================== */

.hf-window-scroll-page .hf-table-wrap,
.hf-window-scroll-page .hf-table-scroll,
.hf-window-scroll-page .table-responsive,
.hf-window-scroll-box {
    max-height: none;
    overflow: visible;
}

.hf-window-scroll-page .hf-table th,
.hf-window-scroll-page .hf-sticky-table-head thead,
.hf-window-scroll-page .hf-sticky-table-head thead th {
    top: var(--app-sticky-top, var(--header-height, 60px));
}

/* ==========================================================================
   4. ヘッダー固定（横スクロール対応・サイドバー連動）
   ========================================================================== */

header.navbar.sticky-top {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1020;
    transition: left 0.3s ease; /* サイドバー展開時のアニメーション */
}

/* デスクトップ: サイドバーの右側にヘッダーを配置 */
@media (min-width: 992px) {
    header.navbar.sticky-top {
        left: 85px; /* サイドバー折りたたみ時の幅 */
    }

    /* サイドバー展開時: ヘッダーも追従 */
    body.sidebar-expanded header.navbar.sticky-top {
        left: 220px; /* サイドバー展開時の幅 */
    }
}

/* モバイル: 全幅 */
@media (max-width: 991.98px) {
    header.navbar.sticky-top {
        left: 0;
    }
}

/* ==========================================================================
   5. ヘッダー・サイドバーロゴエリアの高さ統一
   ========================================================================== */

:root {
    --header-height: 60px;
}

/* ヘッダー固定分のbodyマージン調整 */
body {
    padding-top: var(--header-height);
}

/* ヘッダーの高さを固定 */
header.navbar.sticky-top {
    height: var(--header-height);
    min-height: var(--header-height);
    max-height: var(--header-height);
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

header.navbar.sticky-top .container-fluid {
    height: 100%;
    display: flex;
    align-items: center;
}

header.navbar.sticky-top .h5 {
    font-size: 1rem;
    margin: 0;
}

/* ==========================================================================
   6. サイドバーロゴエリアの高さ調整（ヘッダーと揃える）
   ========================================================================== */

@media (min-width: 992px) {
    /* ロゴエリアをヘッダーと同じ高さに */
    #desktopSidebar .sidebar-header .logo-area {
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
    }

    /* sidebar-headerのpadding-topを削除 */
    #desktopSidebar .sidebar-header {
        position: sticky;
        top: 0;
        z-index: 3;
        padding-top: 0;
    }

    /* ロゴ画像のスタイル */
    #desktopSidebar .sidebar-header .logo-img {
        max-height: 36px;
        width: auto;
    }

    /* 展開トグルボタン - 右端タイルスタイル */
    #desktopSidebar .sidebar-expand-toggle {
        position: absolute;
        right: 0;
        top: 0;
        height: 52px;
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--primary-color);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #desktopSidebar .sidebar-expand-toggle:hover {
        color: var(--primary-dark);
    }

    #desktopSidebar .sidebar-expand-toggle i {
        font-size: 0.65rem;
        transition: transform 0.3s ease;
    }

    /* 展開時のトグルボタン */
    #desktopSidebar.expanded .sidebar-expand-toggle i {
        transform: rotate(180deg);
    }

    /* 折りたたみ時: ロゴのみ表示 */
    #desktopSidebar .logo-collapsed {
        display: block;
    }
    #desktopSidebar .logo-expanded {
        display: none;
    }

    /* 展開時: 社名付きロゴ表示 */
    #desktopSidebar.expanded .logo-collapsed {
        display: none;
    }
    #desktopSidebar.expanded .logo-expanded {
        display: block;
    }

    /* 展開時のロゴエリア - 中央揃え */
    #desktopSidebar.expanded .sidebar-header .logo-area {
        justify-content: center;
        padding-left: 0;
        padding-right: 24px; /* トグルボタン分のスペース確保 */
    }

    #desktopSidebar.expanded .sidebar-header .logo-img {
        max-height: 34px;
    }
}

/* ==========================================================================
   7. ヘッダーボタンスタイル
   ========================================================================== */

/* 事業所・スタッフボタンにうっすら枠線 */
header.navbar .btn-light {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

header.navbar .btn-light:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

/* ロゴリンク */
.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.logo-link:hover {
    opacity: 1;
}

/* ==========================================================================
   8. スクロールバー常時表示
   ========================================================================== */

/* メインコンテンツとテーブル領域のスクロールバーを常時表示 */
.main-content,
.table-responsive {
    overflow-x: auto;
    overflow-y: auto;
    /* Firefox用: 常時表示 + カラー指定 */
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* WebKit系ブラウザ (Chrome, Safari, Edge) のスクロールバースタイル */
.main-content::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.main-content::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.main-content::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

.main-content::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* スクロールバーコーナー（縦横両方のスクロールバーが交差する角） */
.main-content::-webkit-scrollbar-corner,
.table-responsive::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* IE/Edge Legacy 用 */
@media screen {
    .main-content,
    .table-responsive {
        -ms-overflow-style: scrollbar;
    }
}

/* ==========================================================================
   和暦日付入力コンポーネント
   ========================================================================== */
.wareki-date-input {
    position: relative;
    display: flex;
    align-items: center;
}
.wareki-date-input .wareki-display {
    cursor: pointer;
    background: #fff;
    padding-right: 2.2rem;
}
.wareki-date-input .wareki-display.is-invalid {
    border-color: var(--bs-danger);
}
.wareki-date-input .wareki-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.wareki-date-input .wareki-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border: 0;
    background: transparent;
    color: #63758a;
    padding: 0 0.45rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.wareki-date-input .wareki-btn:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   クリック可能な日付・年月ピッカー
   ========================================================================== */
.hf-date-button,
.hf-month-button {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 1.85rem;
    border: 1px solid var(--hf-border, var(--border-color));
    border-radius: var(--hf-radius-sm, var(--border-radius-sm));
    background: var(--hf-surface, #fff);
    color: var(--hf-text, var(--text-main));
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.hf-date-button:hover,
.hf-month-button:hover,
.hf-date-button:focus-within,
.hf-month-button:focus-within {
    background: var(--hf-hover, #f8fafc);
    border-color: var(--hf-primary-300, var(--primary-color));
}

.hf-date-button > i,
.hf-month-button > i {
    color: var(--hf-primary-600, var(--primary-color));
    pointer-events: none;
}

.hf-date-button__native,
.hf-month-button__native {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: transparent;
    opacity: 0;
    cursor: pointer;
}

.hf-date-button__native::-webkit-calendar-picker-indicator,
.hf-month-button__native::-webkit-calendar-picker-indicator {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.hf-month-button {
    margin: 0;
    padding: 0 0.65rem;
    font-weight: 700;
}

.hf-month-button__label {
    pointer-events: none;
}

/* ==========================================================================
   電話番号 3 分割入力 (レガシーUI互換)
   ========================================================================== */
.phone-inline {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.phone-inline span {
    color: var(--text-muted, #6c757d);
    font-size: .8rem;
    flex: 0 0 auto;
}
.phone-inline .form-control {
    /* 狭い列でも被らないように flex で縮小可能にする */
    flex: 1 1 0;
    min-width: 0;
    max-width: 4.2rem;
    width: auto;
    text-align: center;
    padding-left: .3rem;
    padding-right: .3rem;
}

/* ==========================================================================
   西暦/和暦 切替トグル (極小)
   ========================================================================== */
.birth-mode-toggle .btn {
    padding: .05rem .3rem;
    font-size: .7rem;
    line-height: 1.1;
}

/* ==========================================================================
   和暦 元号+年/月/日 分割入力
   ========================================================================== */
.wareki-inline {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.wareki-inline span {
    color: var(--text-muted, #6c757d);
    font-size: .8rem;
    flex: 0 0 auto;
}
.wareki-inline .form-select,
.wareki-inline .form-control {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    text-align: center;
    padding-left: .3rem;
    padding-right: .3rem;
}
.wareki-inline .form-select {
    max-width: 4.5rem;
    text-align: left;
}
.wareki-inline .form-control {
    max-width: 3.2rem;
}

/* ==========================================================================
   ヘルプポップオーバー
   ========================================================================== */
.btn-help {
    display: inline;
    background: none;
    border: none;
    color: var(--info-color, #3b82f6);
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    font-size: 0.85rem;
    vertical-align: middle;
    line-height: 1;
}
.btn-help:hover { opacity: 0.7; }
/* ラベル＋ヘルプボタンの折り返しを防止 */
.form-check:has(.btn-help) { white-space: nowrap; }
.help-popover-detail summary {
    cursor: pointer;
    color: var(--info-color, #3b82f6);
    font-size: 0.85rem;
    margin-top: 8px;
}
.help-popover-detail > div {
    font-size: 0.8rem;
    color: #666;
    max-height: 200px;
    overflow-y: auto;
}
.popover { max-width: 360px; }

/* ==========================================================================
   Bootstrap ボタンオーバーライド（テーマカラー統一）
   ========================================================================== */

/* --- Primary (コーラル: 主要アクション — 保存/確定/新規作成) --- */
.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: #7c2524;
    --bs-btn-active-border-color: #7c2524;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-active-color: #fff;
}

/* --- Danger (赤: 削除/除籍/危険操作) --- */
.btn-danger {
    --bs-btn-bg: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626;
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
}

.btn-outline-danger {
    --bs-btn-color: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-hover-bg: var(--danger-color);
    --bs-btn-hover-border-color: var(--danger-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #dc2626;
    --bs-btn-active-border-color: #dc2626;
    --bs-btn-active-color: #fff;
}

/* --- Success (緑: 出力/ダウンロード/確定) --- */
.btn-success {
    --bs-btn-bg: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-hover-bg: #059669;
    --bs-btn-hover-border-color: #059669;
    --bs-btn-active-bg: #047857;
    --bs-btn-active-border-color: #047857;
}

.btn-outline-success {
    --bs-btn-color: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-hover-bg: var(--success-color);
    --bs-btn-hover-border-color: var(--success-color);
    --bs-btn-hover-color: #fff;
}

/* --- Warning (黄: 注意操作 — 配置終了/保存せず移動) --- */
.btn-warning {
    --bs-btn-bg: var(--warning-color);
    --bs-btn-border-color: var(--warning-color);
    --bs-btn-color: #1e293b;
    --bs-btn-hover-bg: #d97706;
    --bs-btn-hover-border-color: #d97706;
    --bs-btn-hover-color: #1e293b;
    --bs-btn-active-bg: #b45309;
    --bs-btn-active-border-color: #b45309;
    --bs-btn-active-color: #fff; /* 濃い背景なので白文字OK */
}

/* --- Secondary (グレー: キャンセル/閉じる) --- */
.btn-secondary {
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-bg: var(--secondary-dark);
    --bs-btn-hover-border-color: var(--secondary-dark);
}

/* --- ドロップダウン選択色（Bootstrap青→コーラル） --- */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
    color: #fff;
}

/* --- テキストユーティリティ（Bootstrap青→コーラル） --- */
.text-primary {
    color: var(--primary-color) !important;
}

/* ==========================================================================
   ページ幅制約ユーティリティ
   ========================================================================== */
.content-narrow { max-width: 800px; }
.content-medium { max-width: 960px; }

/* ==========================================================================
   共通コンポーネント: ボタン・バッジ（master_manage.css から共通化）
   ========================================================================== */
.btn-icon {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted, #718096);
    transition: all 0.15s;
}
.btn-icon:hover {
    background: #f8f9fa;
    color: var(--primary-color, #cb4644);
    border-color: var(--primary-color, #cb4644);
}
.btn-icon.delete-btn:hover {
    color: var(--danger-color, #ef4444);
    border-color: var(--danger-color, #ef4444);
}

.status-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.active {
    background: var(--primary-light);
    color: var(--primary-dark);
}
.status-badge.inactive {
    background: #f1f5f9;
    color: #64748b;
}