/**
 * Responsive Audit Fixes for Klick-Game
 * Resolves conflicting breakpoints, adds missing tablet layout,
 * fixes hardcoded table widths, and improves mobile usability.
 *
 * Load AFTER comprehensive-fixes.css and BEFORE background-fix.css
 */

/* ============================================
   1. HARDCODED TABLE WIDTH OVERRIDE
   Many PHP files use <table width="650px"> etc.
   CSS width:100%!important already exists in
   comprehensive-fixes.css but only targets bare
   <table>.  We also need max-width so tables
   inside .site-content-main never overflow.
   ============================================ */
.site-content-main table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

/* Inline-style width overrides for common patterns */
.site-content-main table[width] {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   2. UNIFIED BREAKPOINT: TABLET 2-COLUMN LAYOUT
   layout.css collapses at 1200px to 1-col.
   comprehensive-fixes.css collapses at 992px.
   We unify: 992px+ = 3 columns, 768-991 = 2 columns
   (sidebar left + main), <768 = 1 column.
   ============================================ */

/* Tablet: 2-column layout (left sidebar + main, right sidebar below) */
@media (min-width: 768px) and (max-width: 991px) {
    .site-content {
        grid-template-columns: minmax(10rem, 13rem) 1fr !important;
        grid-template-areas:
            "left main"
            "right right" !important;
        gap: 0.75rem !important;
    }

    .site-content-left,
    .site-content-right {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    .site-content-right {
        /* Display right sidebar as a horizontal strip on tablet */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: 0.75rem;
    }
}

/* Mobile: single column, main first */
@media (max-width: 767px) {
    .site-content {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "main"
            "left"
            "right" !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .site-content-left,
    .site-content-right {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* Desktop: restore proper 3-column at 992px+ */
@media (min-width: 992px) {
    .site-content {
        grid-template-columns: minmax(12rem, 15rem) 1fr minmax(12rem, 15rem) !important;
        grid-template-areas: "left main right" !important;
        gap: 1rem !important;
    }
}

/* ============================================
   3. FOOTER RESPONSIVE IMPROVEMENTS
   ============================================ */
@media (max-width: 767px) {
    .site-footer-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }

    .site-footer-url {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem 0.5rem !important;
    }

    /* Hide pipe separators on mobile for cleaner wrapping */
    .site-footer-url > span:not(:has(a)) {
        display: none !important;
    }
}

/* ============================================
   4. MOBILE TABLE HORIZONTAL SCROLL
   Instead of card-stacking (which breaks legacy
   PHP tables that lack data-label attrs), prefer
   horizontal scrolling in a contained box.
   ============================================ */
@media (max-width: 767px) {
    .site-content-main table:not(.table-force-layout):not(.kg-table) {
        display: table !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Wrap legacy tables in a scrollable context */
    .site-content-main {
        overflow-x: auto;
    }
}

/* ============================================
   5. INLINE-STYLE WIDTH FIXES
   Some PHP files use style="width:Xpx" inline.
   We can't override inline styles without
   !important on the element. These selectors
   target common patterns.
   ============================================ */
.site-content-main select[style*="width"],
.site-content-main div[style*="width:"] {
    max-width: 100% !important;
}

/* Login page fixed-width box */
div[style*="width: 300px"],
div[style*="width:300px"] {
    width: 100% !important;
    max-width: 300px !important;
}

/* Pinnwand alert */
.alert[style*="max-width: 660px"] {
    max-width: 100% !important;
}

/* ============================================
   6. YOUTUBE EMBEDS RESPONSIVE
   profil.php embeds with fixed width="350"
   ============================================ */
.site-content-main iframe[src*="youtube"],
.site-content-main object,
.site-content-main embed {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* ============================================
   7. PREVENT HORIZONTAL OVERFLOW ON BODY
   Critical for mobile: no content should cause
   a horizontal scrollbar on the page.
   ============================================ */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

/* ============================================
   8. TOUCH-FRIENDLY SIDEBAR LINKS ON MOBILE
   Ensure sidebar menu items are large enough
   for finger taps (44px minimum).
   ============================================ */
@media (max-width: 767px) {
    .sidebar-items-left a,
    .sidebar-items-right a {
        min-height: 2.75rem !important; /* 44px */
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem 0.625rem !important;
    }

    .sidebar-items-left div,
    .sidebar-items-right div {
        padding: 0.25rem 0.625rem !important;
    }
}

/* ============================================
   9. FIX CONSENT BANNER ON MOBILE
   ============================================ */
@media (max-width: 767px) {
    .kg-consent-banner .kg-consent-card {
        max-width: 100% !important;
        margin: 0 0.5rem !important;
    }

    .kg-consent-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .kg-consent-actions .btn {
        width: 100% !important;
    }
}

/* ============================================
   10. STATUSBAR OVERFLOW ON NARROW SCREENS
   ============================================ */
@media (max-width: 480px) {
    .site-content-statusbar {
        margin: 0 0 0.75rem 0 !important;
    }

    .site-content-statusbar-table {
        font-size: 0.65rem !important;
    }
}

/* ============================================
   11. STATUSBAR - ENHANCED MOBILE HANDLING
   The statusbar uses a CSS grid with 6 columns
   on desktop. On narrow screens it must either
   wrap into rows or scroll horizontally.
   ============================================ */

/* Horizontal scroll fallback for very narrow screens */
@media (max-width: 767px) {
    .site-content-statusbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 0 0.75rem 0 !important;
        /* Subtle scroll hint shadow on right edge */
        background:
            linear-gradient(to right, transparent 90%, rgba(50,135,39,0.15) 100%);
    }

    .site-content-statusbar-table {
        /* 2-column grid at mobile; work + HP span full width */
        grid-template-columns: repeat(2, 1fr) !important;
        font-size: 0.7rem !important;
        min-width: 0;
    }

    .site-content-statusbar-table-lvl,
    .site-content-statusbar-table-money,
    .site-content-statusbar-table-ges,
    .site-content-statusbar-table-int,
    .site-content-statusbar-table-ep {
        grid-column: auto !important;
    }

    .site-content-statusbar-table-work {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .site-content-statusbar-table-hp {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    /* Prevent text/numbers from overflowing cells */
    .site-content-statusbar-table > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* Ensure icons stay compact */
    .site-content-statusbar-table img {
        flex-shrink: 0;
        max-width: 0.875rem !important;
    }
}

@media (max-width: 360px) {
    .site-content-statusbar-table {
        grid-template-columns: 1fr !important;
        font-size: 0.65rem !important;
    }

    .site-content-statusbar-table-work,
    .site-content-statusbar-table-hp {
        grid-column: 1 !important;
    }
}

/* ============================================
   12. TABLE SCROLL WRAPPERS
   Legacy PHP tables often have inline widths.
   Instead of card-stacking (which requires
   data-label attributes most tables lack), wrap
   them in a scrollable container via CSS.
   ============================================ */

/* Generic scroll wrapper class for PHP templates */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

/* All direct-child tables inside main content scroll */
@media (max-width: 767px) {
    .site-content-main {
        overflow-x: hidden !important;
    }

    /* Create scroll context for every table */
    .site-content-main table:not(.table-force-layout):not(.kg-table):not(.site-content-statusbar-table) {
        display: table !important;  /* Override responsive.css block display */
        min-width: 28rem;           /* Force scroll when container is narrow */
        width: 100% !important;
    }

    /* Undo the card-stacking from responsive.css for legacy tables
       that lack data-label attributes (most game tables) */
    .site-content-main table:not(.table-force-layout):not(.kg-table) thead {
        display: table-header-group !important;
    }

    .site-content-main table:not(.table-force-layout):not(.kg-table) tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        border: none !important;
    }

    .site-content-main table:not(.table-force-layout):not(.kg-table) td,
    .site-content-main table:not(.table-force-layout):not(.kg-table) th {
        display: table-cell !important;
        text-align: inherit !important;
    }

    .site-content-main table:not(.table-force-layout):not(.kg-table) td:before {
        content: none !important;    /* Remove pseudo-label from responsive.css */
    }

    /* Ensure the main content area scrolls for wide tables */
    .site-content-main > table,
    .site-content-main > div:not(.site-content-statusbar) {
        max-width: 100%;
    }
}

/* Highscore-specific table improvements */
@media (max-width: 767px) {
    .highscore-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-dark {
        min-width: 30rem;
    }

    /* Highscore tabs: horizontal scroll on mobile */
    .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 0.125rem;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ============================================
   13. FORMS - FULL-WIDTH & TOUCH-FRIENDLY
   Login, registration, and message forms have
   hardcoded inline widths. Override them and
   make buttons touch-friendly (min 44px).
   ============================================ */

/* Override inline width styles on form inputs */
@media (max-width: 767px) {
    .site-content-main input[type="text"],
    .site-content-main input[type="password"],
    .site-content-main input[type="email"],
    .site-content-main input[type="number"],
    .site-content-main input[type="search"],
    .site-content-main input[name="bname"],
    .site-content-main input[name="pw"],
    .site-content-main select,
    .site-content-main textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 2.75rem;  /* 44px touch target */
        padding: 0.5rem 0.75rem !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
    }

    /* Inline-styled inputs from legacy PHP (width:103px, width:270px etc.) */
    .site-content-main input[style*="width:103px"],
    .site-content-main input[style*="width: 103px"],
    .site-content-main input[style*="width:270px"],
    .site-content-main input[style*="width: 270px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Touch-friendly buttons */
    .site-content-main input[type="submit"],
    .site-content-main input[type="reset"],
    .site-content-main input[type="button"],
    .site-content-main button:not(.chat-emoji-btn):not(.chat-send-btn) {
        min-height: 2.75rem !important;  /* 44px */
        padding: 0.625rem 1.25rem !important;
        font-size: 1rem !important;
        cursor: pointer;
        touch-action: manipulation;
    }

    /* Stack form table cells vertically */
    .site-content-main form table,
    .site-content-main form table tbody,
    .site-content-main form table tr,
    .site-content-main form table td {
        display: block !important;
        width: 100% !important;
    }

    .site-content-main form table tr {
        margin-bottom: 0.5rem !important;
    }

    .site-content-main form table td {
        padding: 0.25rem 0 !important;
    }

    /* Labels (often in .procolumn) */
    .procolumn {
        display: block !important;
        width: 100% !important;
        padding: 0.25rem 0 !important;
        font-size: 0.875rem !important;
    }

    /* Login page wrapper */
    div[style*="margin: 0 auto;width: 300px"],
    div[style*="margin: 0 auto; width: 300px"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }

    /* Registration table */
    .site-content-main table[style*="border:  solid 0.0mm black"] {
        border: none !important;
    }

    /* Checkbox + label rows: keep inline */
    .site-content-main form input[type="checkbox"] {
        width: auto !important;
        min-height: 1.25rem;
        min-width: 1.25rem;
        margin-right: 0.5rem;
        vertical-align: middle;
    }
}

/* ============================================
   14. NAVIGATION / SIDEBAR - MOBILE TOUCH
   Ensure hamburger-driven mobile menu works
   and dropdown/submenus support touch events.
   ============================================ */

/* Mobile menu overlay improvements */
@media (max-width: 767px) {
    .mobile-menu {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mobile-menu a {
        min-height: 2.75rem;  /* 44px touch target */
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .mobile-menu a:active {
        background: rgba(255,102,0,0.3);
    }

    /* Sidebar collapse: items become accordion-like */
    .sidebar {
        border-radius: 0.375rem;
        overflow: hidden;
    }

    /* Menu dividers act as section headers */
    .menu-div {
        position: relative;
        cursor: pointer;
        padding-right: 2rem !important;
    }

    /* Dropdown submenus: ensure they work with touch */
    .sidebar-items-left .submenu,
    .sidebar-items-right .submenu,
    .sidebar-items-left .dropdown-menu,
    .sidebar-items-right .dropdown-menu {
        position: static !important;
        width: 100% !important;
        background: rgba(0, 27, 64, 0.9);
        box-shadow: none !important;
        border: none !important;
    }

    .sidebar-items-left .dropdown-menu a,
    .sidebar-items-right .dropdown-menu a {
        padding: 0.625rem 1.25rem !important;
        min-height: 2.75rem !important;
    }
}

/* ============================================
   15. CHAT / MESSAGES - MOBILE READABILITY
   Fix the chat's fixed height, hidden sidebar,
   and ensure input areas are properly sized.
   ============================================ */

@media (max-width: 767px) {
    /* Chat container: use viewport height instead of fixed 600px */
    .chat-container {
        height: calc(100vh - 8rem) !important;
        height: calc(100dvh - 8rem) !important;  /* Dynamic viewport for mobile browsers */
        margin: 0.5rem !important;
        border-radius: 0.375rem !important;
    }

    /* Chat body: stack vertically (sidebar hidden by default) */
    .chat-body {
        position: relative;
        flex: 1;
        overflow: hidden;
    }

    /* Chat sidebar: slide-in overlay with better toggle */
    .chat-sidebar {
        position: absolute !important;
        left: -100% !important;
        top: 0;
        bottom: 0;
        width: 70vw !important;
        max-width: 16rem;
        z-index: 10;
        transition: left 0.3s ease !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border-right: 1px solid #595959;
    }

    .chat-sidebar.open {
        left: 0 !important;
    }

    /* Chat header: compact */
    .chat-header {
        padding: 0.5rem 0.75rem !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .chat-title {
        font-size: 1.125rem !important;
    }

    .chat-online-count {
        font-size: 0.75rem;
    }

    /* Messages area: full width */
    .chat-messages {
        padding: 0.5rem !important;
    }

    .chat-message {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .chat-message-text {
        font-size: 0.875rem;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .chat-message-header {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .chat-message-user {
        font-size: 0.8125rem;
    }

    /* Input area: properly sized */
    .chat-input-area {
        padding: 0.5rem !important;
    }

    .chat-input-form {
        gap: 0.25rem !important;
    }

    .chat-input {
        min-height: 2.75rem;  /* 44px touch target */
        font-size: 1rem !important;
        padding: 0.5rem !important;
        /* Prevent iOS zoom on input focus */
        font-size: 16px !important;
    }

    .chat-send-btn {
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap;
        /* Override the generic button full-width rule for chat */
        width: auto !important;
    }

    .chat-emoji-btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.5rem !important;
        /* Override generic button full-width */
        width: auto !important;
    }

    /* Chat message actions: always visible on mobile (no hover) */
    .chat-message .chat-message-actions {
        display: flex !important;
    }

    /* Story/narrative messages */
    .story-message {
        padding: 0.75rem !important;
    }

    .message-header {
        flex-direction: column;
        gap: 0.25rem;
    }

    .messages-container {
        padding: 0 !important;
    }

    /* Chat info section below chat */
    .chat-container + .kg-container {
        margin: 1rem 0.5rem !important;
        padding: 0.75rem !important;
    }
}

/* ============================================
   16. PROFILE PAGE - MOBILE REFINEMENTS
   ============================================ */

@media (max-width: 767px) {
    .kg-page {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .profile-window {
        margin: 0 !important;
    }

    #profile-content {
        padding: 0.75rem !important;
    }

    .profile-title {
        font-size: 1.25rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .stat-item {
        padding: 0.75rem 0.5rem !important;
    }

    .stat-value {
        font-size: 1.125rem !important;
    }

    .action-buttons {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.125rem !important;
    }
}

/* ============================================
   17. GENERAL MOBILE POLISH
   ============================================ */

/* Prevent iOS input zoom (inputs < 16px cause zoom) */
@media (max-width: 767px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Ensure all clickable elements have adequate touch targets */
@media (max-width: 767px) {
    a.link7,
    a.link13,
    a.link18,
    a.link3,
    a.link15,
    a.help {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.25rem 0;
    }
}

/* Alert boxes: full-width on mobile */
@media (max-width: 767px) {
    .alert,
    table[cellpadding="5"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    table[cellpadding="5"] td {
        width: 100% !important;
    }
}

/* Story progress bar mobile */
@media (max-width: 767px) {
    .story-progress-bar {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 0.25rem;
    }

    .progress-line {
        width: 2rem !important;
    }

    .progress-step {
        min-width: 3rem;
    }

    .step-label {
        font-size: 0.75rem;
    }
}

/* Pagination mobile improvements */
@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem;
    }

    .pagination .page-link {
        min-height: 2.75rem;
        min-width: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Gewinnspiel / raffle mobile */
@media (max-width: 767px) {
    .gewinn-section {
        padding: 0.75rem !important;
    }

    .gewinn-section table {
        min-width: 20rem;
    }
}

/* ============================================
   18. TABLET REFINEMENTS (768px - 991px)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
    /* Chat: show sidebar as a narrow column */
    .chat-container {
        height: calc(100vh - 10rem);
    }

    .chat-sidebar {
        width: 10rem !important;
    }

    /* Statusbar: 3-column grid on tablet */
    .site-content-statusbar-table {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .site-content-statusbar-table-lvl,
    .site-content-statusbar-table-money,
    .site-content-statusbar-table-ges,
    .site-content-statusbar-table-int,
    .site-content-statusbar-table-ep {
        grid-column: auto !important;
    }

    .site-content-statusbar-table-work {
        grid-column: 1 / -1 !important;
    }

    .site-content-statusbar-table-hp {
        grid-column: 1 / -1 !important;
    }

    /* Form tables: keep side-by-side at tablet */
    .site-content-main form table td {
        display: table-cell !important;
    }
}

/* ============================================
   19. CHAT SIDEBAR TOGGLE BUTTON
   Visible only on mobile where the sidebar
   is hidden off-screen by default.
   ============================================ */

.chat-sidebar-toggle {
    display: none;
    background: rgba(255, 102, 0, 0.2);
    border: 1px solid #ff6600;
    color: #ff9900;
    font-size: 1.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    cursor: pointer;
    min-height: 2.75rem;
    min-width: 2.75rem;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.chat-sidebar-toggle:hover,
.chat-sidebar-toggle:active {
    background: rgba(255, 102, 0, 0.4);
}

@media (max-width: 767px) {
    .chat-sidebar-toggle {
        display: inline-flex;
        /* Override generic button full-width rule */
        width: auto !important;
        margin-bottom: 0 !important;
    }
}