/* ============================================
   RESPONSIVE CSS FOR TECHONE CRM
   Fixes tables, cards, forms for mobile devices
   ============================================ */

/* ============================================
   RESPONSIVE TABLES - Main Fix (sitewide)
   Applies to Super Admin AND business clients (layouts/app.php),
   and the public marketing site (layouts/marketing.php).
   Goal: never crush columns into letter-by-letter wrap on iPhone.
   Tables scroll horizontally inside .table-responsive instead.
   ============================================ */

/* Only the table wrapper scrolls — never the whole card body */
.table-responsive,
.admin-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    position: relative;
}

.card-body {
    overflow-x: visible;
}

.card-body > table,
.content > table,
.table {
    width: 100%;
    max-width: none;
}

/* Codes, badges, emails: never break one character per line */
.table code,
.table .badge,
.table .font-monospace,
.table td code,
.admin-table code,
.admin-table .badge {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* Phone / tablet: force a usable table width so the wrapper scrolls */
@media (max-width: 991.98px) {
    .card-body {
        overflow-x: visible !important;
    }

    .table-responsive,
    .admin-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* Soft edge fade when content overflows */
        background:
            linear-gradient(to right, #fff 85%, rgba(255, 255, 255, 0)) left center / 1.25rem 100% no-repeat local,
            linear-gradient(to left, #fff 85%, rgba(255, 255, 255, 0)) right center / 1.25rem 100% no-repeat local;
    }

    .table-responsive > .table,
    .table-responsive > table,
    .admin-table-scroll > .table,
    .admin-table-scroll > table {
        width: max-content !important;
        min-width: 720px !important;
        max-width: none !important;
        display: table !important;
        margin-bottom: 0;
        table-layout: auto !important;
    }

    /* Wider admin grids (businesses, payments, etc.) */
    .admin-table-scroll > .admin-table--businesses,
    .table-responsive > .admin-table--businesses {
        min-width: 960px !important;
    }

    /* Hard stop letter-by-letter wrapping on keys / badges / emails */
    .table code,
    .table .badge,
    .table .font-monospace,
    .table kbd,
    .table samp,
    .table td a.badge {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }

    .table td,
    .table th {
        -webkit-hyphens: none;
        hyphens: none;
    }
}

/* Mobile table styling */
@media (max-width: 768px) {
    .table td,
    .table th {
        padding: 0.55rem 0.65rem;
        font-size: 0.8125rem;
        vertical-align: middle;
    }

    /* Wrap at spaces only — never mid-token letter stacking */
    .table td:not(:last-child),
    .table th:not(:last-child) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .table td:last-child,
    .table th:last-child {
        white-space: nowrap;
    }

    .table .btn-sm {
        padding: 0.3rem 0.55rem;
        font-size: 0.75rem;
        height: auto !important;
        min-height: 2rem;
    }

    @media (max-width: 576px) {
        .table .btn-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .table .btn-group .btn {
            width: 100%;
        }
    }
}

/* Tablet table styling */
@media (min-width: 768px) and (max-width: 1024px) {
    .card-body {
        overflow-x: visible !important;
    }

    .table-responsive > .table,
    .admin-table-scroll > .table {
        min-width: 720px;
    }

    .table td,
    .table th {
        padding: 0.65rem;
        font-size: 0.9rem;
    }

    .table .btn-sm {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }

    .table-responsive::-webkit-scrollbar,
    .admin-table-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive::-webkit-scrollbar-track,
    .admin-table-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .table-responsive::-webkit-scrollbar-thumb,
    .admin-table-scroll::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .table-responsive::-webkit-scrollbar-thumb:hover,
    .admin-table-scroll::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* Never show legacy floating scroll badges over table content */
.scroll-indicator {
    display: none !important;
}

.table-responsive.has-scroll {
    padding-top: 0 !important;
}

/* ============================================
   CARD RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    /* Card header - stack title and tools */
    .card-header:not(.game-card-header) {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .card-tools {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .card-tools .btn {
        flex: 1;
        min-width: auto;
        font-size: 0.85rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* Card body padding reduction */
    .card-body {
        padding: 0.75rem;
    }
    
    /* Card title smaller */
    .card-title {
        font-size: 1.1rem;
    }

    /* Keep Wordle lounge centered / self-contained */
    .game-card .card-body {
        padding: 0.75rem !important;
    }
}

/* Tablet card adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-tools .btn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   FORM RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    /* Stack form inline elements */
    .form-inline,
    .form-inline-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .form-inline .form-control,
    .form-inline select,
    .form-inline .form-check,
    .form-inline .btn,
    .form-inline-mobile .form-control,
    .form-inline-mobile select,
    .form-inline-mobile .form-check,
    .form-inline-mobile .btn {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .form-inline .btn,
    .form-inline-mobile .btn {
        flex: 0 0 auto;
        height: auto !important;
        min-height: 2.5rem;
        margin-bottom: 0.25rem !important;
    }

    /* Filter rows that use Bootstrap grid */
    form.row.g-2 > [class*='col-'] .btn,
    form.row.mb-3 > [class*='col-'] .btn {
        width: 100%;
        min-height: 2.5rem;
        margin-bottom: 0.35rem;
    }

    form.row.mb-3,
    form.row.g-2.mb-3 {
        margin-bottom: 1rem !important;
    }

    /* Form groups */
    .form-group {
        margin-bottom: 0.75rem;
    }

    /* Input groups */
    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control {
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }
}

/* ============================================
   BUTTON RESPONSIVENESS
   ============================================ */

@media (max-width: 576px) {
    /* Only stack action groups inside tables — keep filter toggles horizontal */
    .table .btn-group,
    .table-responsive .btn-group,
    td .btn-group,
    th .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .table .btn-group .btn,
    .table-responsive .btn-group .btn,
    td .btn-group .btn,
    th .btn-group .btn {
        border-radius: 0.25rem !important;
        margin-bottom: 0.25rem;
        margin-left: 0 !important;
    }

    /* Button text reduction */
    .btn {
        font-size: 0.85rem;
        padding: 0.375rem 0.75rem;
    }

    /* Hide button text, show only icons on very small screens */
    .btn .btn-text {
        display: none;
    }
}

/* ============================================
   MODAL RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   SIDEBAR RESPONSIVENESS (AdminLTE)
   ============================================ */

@media (max-width: 768px) {
    /* Full width content on mobile */
    .content-wrapper {
        margin-left: 0 !important;
    }
    
    /* Hide sidebar by default on mobile */
    .main-sidebar {
        margin-left: -250px;
    }
    
    /* Show sidebar when open */
    .sidebar-open .main-sidebar {
        margin-left: 0;
    }
}

/* Tablet sidebar */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Adjust content wrapper for tablet with sidebar */
    .content-wrapper {
        margin-left: 250px !important;
    }
    
    /* Ensure sidebar is visible but can be toggled */
    .main-sidebar {
        position: fixed;
        height: 100vh;
    }
    
    /* When sidebar is collapsed on tablet */
    .sidebar-collapse .content-wrapper {
        margin-left: 0 !important;
    }
    
    .sidebar-collapse .main-sidebar {
        margin-left: -250px;
    }
}

/* ============================================
   NAVIGATION RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    /* Navbar */
    .main-header .navbar-nav {
        flex-direction: row;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        position: absolute;
        min-width: 200px;
    }
}

/* ============================================
   DASHBOARD STATS/INFO BOXES
   ============================================ */

@media (max-width: 768px) {
    .info-box {
        margin-bottom: 1rem;
    }
    
    .info-box-text {
        font-size: 0.85rem;
    }
    
    .info-box-number {
        font-size: 1.5rem;
    }
    
    /* Small boxes */
    .small-box {
        margin-bottom: 1rem;
    }
    
    .small-box .inner h3 {
        font-size: 1.75rem;
    }
    
    .small-box .inner p {
        font-size: 0.85rem;
    }
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

@media (max-width: 768px) {
    .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .alert .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ============================================
   PAGINATION RESPONSIVENESS
   ============================================ */

@media (max-width: 576px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Hide page numbers on very small screens, keep prev/next */
    .pagination .page-item:not(.disabled):not(.active):not(:first-child):not(:last-child) {
        display: none;
    }
}

/* ============================================
   TABS RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   BADGE & LABEL RESPONSIVENESS
   ============================================ */

@media (max-width: 576px) {
    .badge {
        font-size: 0.7rem;
        padding: 0.25em 0.5em;
    }
}

/* ============================================
   LIST GROUP RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    .list-group-item {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   BREADCRUMB RESPONSIVENESS
   ============================================ */

@media (max-width: 576px) {
    .breadcrumb {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .breadcrumb-item {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================
   TEXT & TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }
    
    /* Hide long text with ellipsis */
    .text-truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

/* Stack columns on mobile */
@media (max-width: 768px) {
    .row > [class*='col-'] {
        margin-bottom: 0.75rem;
    }
    
    .row > [class*='col-']:last-child {
        margin-bottom: 0;
    }
}

/* ============================================
   WHATSAPP CHAT RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    /* Chat messages */
    #messages-body {
        height: 400px !important;
    }
    
    .message-bubble {
        max-width: 85% !important;
    }
    
    /* Emoji picker */
    .emoji-picker {
        width: 95vw !important;
        right: 2.5vw !important;
        left: 2.5vw !important;
    }
    
    /* Formatting toolbar */
    .formatting-toolbar {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .formatting-toolbar .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================
   FIX HORIZONTAL OVERFLOW (MOST IMPORTANT)
   ============================================ */

/* Prevent any element from causing horizontal scroll */
html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

.wrapper,
.content-wrapper,
.container,
.container-fluid {
    overflow-x: hidden;
}

/* Fix mobile padding - ensure equal left/right margins */
@media (max-width: 768px) {
    .content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .content-header .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Fix row negative margins */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    /* Ensure columns have equal padding */
    .row > [class*='col-'] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Tablet responsiveness (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .content-header .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Fix row negative margins for tablet */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    /* Ensure columns have equal padding */
    .row > [class*='col-'] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Card adjustments for tablet */
    .card-body {
        padding: 1rem;
    }
    
    /* Reduce excessive whitespace */
    .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Fix for pre and code blocks */
pre, code {
    overflow-x: auto;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Inline codes inside tables: keep on one line and scroll the table instead */
.table code,
.table-responsive code,
.admin-table-scroll code {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Fix for images */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for iframes */
iframe {
    max-width: 100%;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .main-sidebar,
    .main-header,
    .card-tools,
    .btn,
    .pagination {
        display: none !important;
    }
    
    .content-wrapper {
        margin-left: 0 !important;
    }
    
    .card {
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
    
    table {
        page-break-inside: auto;
    }
    
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Hardware acceleration for overlays only — never force transform on cards
   (translateZ on .card clips buttons/filters when overflow is hidden). */
.modal,
.dropdown-menu {
    will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   APP-WIDE LIST / TABLE SAFETY NET
   ============================================ */

/* Action cells: wrap buttons instead of clipping */
.table td:last-child,
.table th:last-child,
.admin-cell-actions,
.admin-row-actions {
    white-space: normal !important;
}

.table td:last-child .d-flex,
.table td:last-child .btn-group,
.admin-row-actions,
.admin-cell-actions .d-flex {
    flex-wrap: wrap !important;
    gap: 0.35rem;
    align-items: center;
}

.table td:last-child .flex-nowrap {
    flex-wrap: wrap !important;
}

.table td:last-child form.d-inline,
.table td:last-child form[style*="display:inline"],
.table td:last-child form[style*="display: inline"] {
    display: inline-flex !important;
    margin: 0;
    vertical-align: middle;
}

/* Filter bars: consistent stack + spacing on mobile */
@media (max-width: 768px) {
    .form-inline,
    .form-inline-mobile,
    .admin-filter-bar form,
    form.row.g-2.mb-3,
    form.row.mb-3 {
        row-gap: 0.5rem;
    }

    .card-body > .d-flex.flex-wrap.gap-2 > .form-control,
    .card-body > .d-flex.flex-wrap.gap-2 > .form-select,
    .card-body > .d-flex.flex-wrap.gap-2 > select.form-control,
    .card-body > .d-flex.flex-wrap.gap-2 > input.form-control,
    .card-body > .d-flex.flex-wrap.gap-2 > .btn,
    .card-body .d-flex.flex-wrap.gap-2 > .form-control,
    .card-body .d-flex.flex-wrap.gap-2 > select.form-control,
    .card-body .d-flex.flex-wrap.gap-2 > .btn {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .card-body .d-flex.flex-wrap.gap-2 > .form-check {
        width: 100%;
        margin: 0.15rem 0;
    }

    .card-header .card-tools {
        width: 100%;
    }

    .card-header .card-tools .btn,
    .card-header .card-tools form {
        flex: 1 1 auto;
    }

    .card-header .card-tools form .btn {
        width: 100%;
    }

    .table .btn-sm {
        white-space: nowrap;
    }
}

/* Prefer table wrappers over card-body scrolling */
.card-body.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card-body.table-responsive > .alert,
.card-body.table-responsive > .form-inline,
.card-body.table-responsive > form {
    max-width: 100%;
}