/* 共通スタイル定義 - Tailwindより優先度を高くする */

/* 統一フォント設定 */
html body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic", "Meiryo", "MS Gothic", sans-serif !important;
    font-size: 14px !important;
}

/* ページタイトルのフォントサイズを統一 */
main h2.text-3xl,
main h2.text-2xl,
main h2[class*="text-"] {
    font-size: 1.5rem !important; /* text-2xl相当 */
    line-height: 2rem !important;
}

/* ヘッダーはCSSの影響を受けないようにする */
.header-container {
    width: 100% !important;
    max-width: none !important;
}

.header-container .header-inner {
    max-width: none !important;
    width: 100% !important;
}

/* ヘッダー内の要素は通常のスタイルを維持 */
.header-container * {
    max-width: none !important;
}

/* ログイン画面は除外 - login-containerクラスがある場合は適用しない */
body:not(:has(.login-container)) {
    width: 100vw !important;
    overflow-x: hidden !important;
}

/* flexコンテナの幅を画面いっぱいに（ログイン画面を除く） */
body:not(:has(.login-container)) > div.flex,
body:not(:has(.login-container)) div.flex {
    width: 100% !important;
    max-width: none !important;
}

/* 画面幅を統一（画面いっぱいに表示） - より具体的なセレクタ */
body main,
body main.flex-1,
body main.p-6,
body div.flex main,
body > div.flex > main {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
}

/* mainタグ内の直下div - より具体的に */
body main > div,
body main > div:first-child,
body div.flex main > div,
body main > div.bg-white {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Tailwindのmax-widthクラスを完全に上書き（ログイン画面とモーダルは除外） */
body:not(:has(.login-container)) [class*="max-w-"]:not(.fixed):not(.fixed *),
body:not(:has(.login-container)) main [class*="max-w-"]:not(.fixed):not(.fixed *) {
    max-width: none !important;
}

/* Tailwindのmx-autoを完全に上書き（ログイン画面とモーダルは除外） */
body:not(:has(.login-container)) [class*="mx-auto"]:not(.fixed):not(.fixed *),
body:not(:has(.login-container)) main [class*="mx-auto"]:not(.fixed):not(.fixed *),
body:not(:has(.login-container)) main > div[class*="mx-auto"]:not(.fixed):not(.fixed *) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* テーブルコンテナの幅も制御 */
body main div[style*="overflow-x"] {
    width: 100% !important;
    max-width: none !important;
}

/* Excel風テーブルの幅 */
body main .excel-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
}

/* bg-whiteクラスを持つコンテナ */
body main .bg-white,
body main div.bg-white {
    width: 100% !important;
    max-width: none !important;
}

/* roundedとshadowクラスの組み合わせ */
body main .rounded.shadow,
body main div.rounded.shadow {
    width: 100% !important;
    max-width: none !important;
}

/* p-6クラスを持つdiv */
body main .p-6,
body main div.p-6 {
    width: 100% !important;
    max-width: none !important;
}

/* モーダルなど特定の要素は除外 */
.modal-content {
    max-width: 42rem !important; /* モーダルは適切な幅を維持 */
}

/* ボタンのアイコンスタイル調整 */
.btn-save::before,
.btn-preview::before {
    content: none !important;
}

/* レスポンシブ対応: サイドバーとメインコンテンツのレイアウト */
/* 画面幅1024px以上（lg）: サイドバーを常に表示 */
@media (min-width: 1024px) {
    /* サイドバーを固定表示（ヘッダーの下） */
    #sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 4rem !important; /* ヘッダーの高さ分下げる */
        height: calc(100vh - 4rem) !important;
        transform: translateX(0) !important;
    }
    
    /* ヘッダーをサイドバーの上に表示 */
    .header-container {
        position: relative !important;
        z-index: 60 !important; /* サイドバーのz-index(50)より上 */
    }
    
    /* メインコンテンツをサイドバーの右側に配置 */
    /* サイドバーがある画面のみ適用 */
    body:not(:has(.login-container)):has(#sidebar) main {
        margin-left: 16rem !important; /* w-64 = 16rem */
        width: calc(100% - 16rem) !important;
    }
    
    /* オーバーレイを非表示 */
    #sidebar-overlay {
        display: none !important;
    }
}

/* 画面幅1024px未満: ハンバーガーメニュー */
@media (max-width: 1023px) {
    /* メインコンテンツを全幅に */
    body:not(:has(.login-container)):has(#sidebar) main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* サイドバーをデフォルトで非表示 */
    #sidebar {
        transform: translateX(-100%) !important;
    }
    
    /* サイドバーが開いている時 */
    #sidebar.sidebar-open {
        transform: translateX(0) !important;
    }
}