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

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

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

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

:root {
    /* Primary Colors */
    --primary-color: #4a6cf7;
    --primary-dark: #3451b2;
    --primary-light: #eef2ff;

    /* 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);
}

/* ==========================================================================
   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: var(--header-height);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
    }

    /* sidebar-headerのpadding-topを削除 */
    #desktopSidebar .sidebar-header {
        padding-top: 0;
    }

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

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

    #desktopSidebar .sidebar-expand-toggle:hover {
        color: #d81b60;
    }

    #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: 38px;
    }
}

/* ==========================================================================
   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;
    }
}