/* Admin UI Fixes - Cache bust: 2026-03-25 */

/* Fix long URL word wrapping in admin forms - Added 2025-08-22 */
/* This fixes the issue where long URLs don't wrap on mobile devices */
.form-row p,
.form-row div.readonly,
.form-row div.help,
.readonly {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

/* Specific fix for anchor tags with long URLs */
.form-row a,
.readonly a {
    word-wrap: break-word;
    word-break: break-all;  /* More aggressive breaking for URLs */
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
}

/* Fix content-main float issue causing horizontal scroll on mobile/tablet only */
@media (max-width: 1024px) {
    #content-main {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Fix breadcrumb styling to restore green color */
div.breadcrumbs {
    background: #79aec8 !important; /* Django default blue-green */
    padding: 10px 40px !important;
    border: none !important;
    font-size: 14px !important;
    color: #fff !important;
    text-align: left !important;
}

div.breadcrumbs a {
    color: #fff !important;
}

div.breadcrumbs a:hover {
    color: #c5f5ff !important;
}

/* Fix chain_search_form positioning */
.chain_search_form {
    clear: both !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Fix chain search form on mobile/tablet */
@media (max-width: 1024px) {
    /* Make each search row stack vertically */
    .chain_search_form .selectBox {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        clear: both !important;
    }
    
    /* Fix the AND/OR selector */
    .chain_search_form select[name*="condition"] {
        width: 80px !important;
        display: inline-block !important;
        margin-right: 10px !important;
    }
    
    /* Fix field selector dropdowns */
    .chain_search_form .field_selector,
    .chain_search_form select {
        width: calc(50% - 10px) !important;
        display: inline-block !important;
        margin-bottom: 5px !important;
        height: 35px !important;
    }
    
    /* Fix search text inputs */
    .chain_search_form input[type="text"],
    .chain_search_form .searchText {
        width: calc(100% - 40px) !important;
        display: inline-block !important;
        margin: 5px 0 !important;
        min-width: unset !important;
    }
    
    /* Make the remove button visible and positioned correctly */
    .chain_search_form .removeButton {
        display: inline-block !important;
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 5px 10px !important;
    }
    
    /* Ensure proper spacing for action buttons */
    .chain_search_form button,
    .chain_search_form input[type="submit"] {
        margin: 5px !important;
        min-height: 35px !important;
    }
    
    /* Stack search filters container vertically */
    #changelist-search > div,
    .chain_search_form > div {
        display: block !important;
        width: 100% !important;
        position: relative !important;
    }
}

/* Fix responsive overflow issues */
@media (max-width: 1024px) {
    #changelist {
        overflow-x: auto !important;
    }
    
    #changelist table {
        min-width: 100% !important;
    }
    
    #content {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* Enhanced mobile fixes for long text and URLs - Added 2025-08-22 */
@media (max-width: 767px) {
    /* Ensure form rows don't overflow */
    .form-row,
    .form-row > div,
    fieldset .form-row {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Force all text content to wrap properly on mobile */
    .form-row p,
    .form-row div,
    .form-row span,
    .form-row label,
    .form-row .readonly,
    .module p,
    .module div {
        max-width: 100%;
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Extra aggressive breaking for URLs on small screens */
    .form-row a,
    .readonly a,
    a[href*="http"] {
        word-break: break-all !important;
        display: inline-block;
        max-width: 100%;
    }
    
    /* Prevent horizontal scrolling in content areas */
    .module,
    .inline-group,
    fieldset {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* Fix z-index issues with dropdowns */
.dropdown-content,
.select2-dropdown {
    z-index: 999999 !important;
}

/* Ensure proper box-sizing for our custom elements only */
.chain_search_form *,
.modern-app * {
    box-sizing: border-box;
}

/* Fix form elements width */
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
    max-width: 100% !important;
}

/* Force single-line display for all admin change list tables - Extended 2025-09-?? */
/* This prevents text wrapping in table cells and enables horizontal scrolling */
body.change-list #result_list td,
body.change-list #result_list th {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 400px !important; /* prevent single values from stretching columns */
}

/* Make the table container scrollable horizontally */
body.change-list #changelist {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

/* Ensure the table maintains its minimum width */
body.change-list #result_list {
    min-width: max-content !important;
    table-layout: auto !important;
}

/* Mobile-specific adjustments for admin change lists */
@media (max-width: 767px) {
    body.change-list #changelist {
        padding: 0 !important;
    }

    body.change-list #result_list {
        font-size: 12px !important; /* Slightly smaller font on mobile */
    }

    /* Show scroll indicator */
    body.change-list #changelist::-webkit-scrollbar {
        height: 8px !important;
    }

    body.change-list #changelist::-webkit-scrollbar-thumb {
        background: #79aec8 !important;
        border-radius: 4px !important;
    }
}

/* ==========================================================================
   FROZEN COLUMNS — Excel-style freeze for first two columns
   (checkbox + 1 data column). Keeps identifiers visible when scrolling.
   JS companion: admin_frozen_column.js (calculates column offsets)
   ========================================================================== */

/* First column (checkbox) — sticky at left:0 */
body.change-list #result_list th:first-child,
body.change-list #result_list td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
}

/* Second column (first data field) — sticky, offset set by JS, last frozen col gets shadow */
body.change-list #result_list th:nth-child(2),
body.change-list #result_list td:nth-child(2) {
    position: sticky !important;
    z-index: 2 !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08) !important;
}

/* Header cells need higher z-index + solid background to stay above sticky body cells */
body.change-list #result_list thead th:first-child,
body.change-list #result_list thead th:nth-child(2) {
    z-index: 3 !important;
    background-color: #f6f6f6 !important;
}

/* Fallback: ensure ALL frozen cells (th AND td) have solid white background */
body.change-list #result_list tbody th:first-child,
body.change-list #result_list tbody td:first-child,
body.change-list #result_list tbody th:nth-child(2),
body.change-list #result_list tbody td:nth-child(2) {
    background-color: #fff !important;
}

/* Odd rows — white */
body.change-list #result_list tbody tr:nth-child(odd) th:first-child,
body.change-list #result_list tbody tr:nth-child(odd) td:first-child,
body.change-list #result_list tbody tr:nth-child(odd) th:nth-child(2),
body.change-list #result_list tbody tr:nth-child(odd) td:nth-child(2) {
    background-color: #fff !important;
}

/* Even rows — match Django 3.2 .row2 background */
body.change-list #result_list tbody tr:nth-child(even) th:first-child,
body.change-list #result_list tbody tr:nth-child(even) td:first-child,
body.change-list #result_list tbody tr:nth-child(even) th:nth-child(2),
body.change-list #result_list tbody tr:nth-child(even) td:nth-child(2) {
    background-color: #f9f9f9 !important;
}

/* Selected row override */
body.change-list #result_list tbody tr.selected th:first-child,
body.change-list #result_list tbody tr.selected td:first-child,
body.change-list #result_list tbody tr.selected th:nth-child(2),
body.change-list #result_list tbody tr.selected td:nth-child(2) {
    background-color: #FFFFCC !important;
}