/* ================================================
   MOBILE OVERFLOW FIX
   モバイル横スクロール問題の完全修正

   Created: 2025-10-31
   Purpose: すべてのモバイルビューで横スクロールを防止

   Common causes of mobile overflow:
   1. Fixed widths larger than viewport
   2. Images without max-width
   3. Pre/code blocks with nowrap
   4. Tables without responsive wrappers
   5. Negative margins
   6. Viewport units miscalculation
   ================================================ */

/* ========================================
   1. GLOBAL OVERFLOW PREVENTION
   グローバル overflow 防止
   ======================================== */

/* Ensure html and body never overflow */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
}

/* All elements respect box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Force all iframes and embedded content to respect viewport */
iframe,
embed,
object {
    max-width: 100% !important;
}

/* Any element with inline styles that might cause overflow */
[style*="width"] {
    max-width: 100% !important;
}

/* ========================================
   2. CONTAINER & LAYOUT FIX
   コンテナとレイアウト修正
   ======================================== */

.page-wrapper,
.main-container,
.main-content,
.container,
.content-wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

/* Main content area */
.main-content {
    width: 100%;
    max-width: 100vw;
}

/* ========================================
   3. MEDIA CONTENT FIX
   メディアコンテンツ修正
   ======================================== */

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Videos & iframes */
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* SVG */
svg {
    max-width: 100%;
}

/* ========================================
   4. TEXT & CODE BLOCK FIX
   テキストとコードブロック修正
   ======================================== */

/* Pre & Code blocks */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Long words */
p,
li,
div,
span,
a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ========================================
   5. TABLE FIX
   テーブル修正
   ======================================== */

table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Table wrapper for horizontal scroll */
.table-wrapper,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   6. FORM ELEMENTS FIX
   フォーム要素修正
   ======================================== */

input,
textarea,
select,
button {
    max-width: 100%;
}

/* Textarea specific */
textarea {
    width: 100%;
    max-width: 100%;
}

/* ========================================
   7. CARD & SECTION FIX
   カードとセクション修正
   ======================================== */

.card,
.alert,
section,
article {
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================
   8. GRID & FLEX FIX
   グリッドとフレックス修正
   ======================================== */

/* Grid containers */
.grid,
.grid-2,
.grid-3,
.grid-4,
[class*="grid-"] {
    max-width: 100%;
    overflow-x: hidden;
}

/* Flex containers */
.flex,
[class*="flex-"] {
    max-width: 100%;
    flex-wrap: wrap;
}

/* ========================================
   9. SPECIAL ELEMENTS FIX
   特殊要素修正
   ======================================== */

/* Breadcrumbs */
.breadcrumb,
.breadcrumblist,
nav[aria-label="breadcrumb"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Share buttons */
.share-buttons,
.social-buttons {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   10. MOBILE SPECIFIC (<=768px)
   モバイル専用修正
   ======================================== */

@media (max-width: 768px) {
    /* Force ALL elements to respect viewport - CRITICAL FIX */
    * {
        max-width: 100% !important;
    }

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Force all direct children to respect viewport */
    body > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Main content adjustments - CRITICAL FIX for overflow */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* Force all children of main-content to respect parent width */
    .main-content > *,
    .main-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Page wrapper and main container */
    .page-wrapper,
    .main-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Card & Section padding */
    .card,
    .alert,
    section {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        max-width: 100% !important;
    }

    /* Tables - Enable horizontal scroll with indicator */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100% !important;
    }

    /* Code blocks - Enable horizontal scroll */
    pre {
        overflow-x: auto;
        white-space: pre;
        word-wrap: normal;
        max-width: 100% !important;
    }

    /* Long URLs */
    a[href^="http"] {
        word-break: break-all;
    }

    /* Force iframes and embeds to fit */
    iframe,
    embed,
    object {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Any inline-styled width elements */
    [style*="width"] {
        max-width: 100% !important;
    }
}

/* ========================================
   11. SMALL MOBILE (<=480px)
   小型モバイル専用修正
   ======================================== */

@media (max-width: 480px) {
    /* Even stricter constraints */
    * {
        max-width: 100% !important;
    }

    /* Remove any negative margins */
    * {
        margin-left: max(0px, var(--margin-left, 0px));
        margin-right: max(0px, var(--margin-right, 0px));
    }

    /* Reduce padding to prevent overflow */
    .main-content {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .card {
        padding: var(--space-3);
    }
}

/* ========================================
   12. SAFARI SPECIFIC FIX
   Safari専用修正
   ======================================== */

/* Safari iOS fix for 100vw including scrollbar */
@supports (-webkit-touch-callout: none) {
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-content,
    .container {
        max-width: calc(100vw - var(--scrollbar-width, 0px));
    }
}

/* ========================================
   13. DEBUG MODE (Uncomment to debug)
   デバッグモード（問題特定時に有効化）
   ======================================== */

/*
body * {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

body *:hover {
    outline: 2px solid rgba(255, 0, 0, 0.8);
}
*/