/* Mobile-responsive styles for Django Admin */
/* AGGRESSIVE mobile optimization - desktop remains unchanged */
/* Desktop is NOT affected by these styles */

/* Mobile breakpoints */
@media (max-width: 768px) {
    /* ==================== HEADER - Ultra Compact ==================== */
    #header {
        padding: 5px 10px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    #branding {
        float: none !important;
    }

    #branding h1 {
        font-size: 14px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        padding: 5px 0 !important;
    }

    /* User tools - very compact, scrollable */
    #user-tools {
        float: none !important;
        font-size: 10px !important;
        padding: 0 !important;
        margin: 3px 0 0 0 !important;
        white-space: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #user-tools a {
        padding: 3px 6px !important;
        display: inline-block !important;
        min-height: auto !important;
    }

    /* Hide welcome message to save space */
    #user-tools .welcome {
        display: none !important;
    }

    /* ==================== BREADCRUMBS - Compact & Scrollable ==================== */
    .breadcrumbs {
        font-size: 10px !important;
        padding: 5px 10px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ==================== CONTENT AREA - Minimal Padding ==================== */
    #content {
        padding: 5px !important;
    }

    #content-main {
        float: none !important;
        width: 100% !important;
    }

    /* ==================== FORMS - Compact & Stacked ==================== */
    .form-row {
        display: block !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #eee !important;
        margin: 0 !important;
    }

    .form-row:last-child {
        border-bottom: none !important;
    }

    .form-row > div {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Form labels - compact */
    .form-row label {
        width: 100% !important;
        float: none !important;
        padding: 0 0 3px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* Hide ":" after labels to save space */
    .form-row label:after {
        content: '' !important;
    }

    /* Input fields - full width, compact */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 8px !important;
        margin: 0 !important;
    }

    /* Checkboxes and radios - more compact */
    input[type="checkbox"],
    input[type="radio"] {
        margin: 0 5px 0 0 !important;
    }

    /* ==================== FIELDSETS - Collapsible Style ==================== */
    fieldset {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    fieldset h2 {
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        background: #f8f8f8 !important;
        border-bottom: 1px solid #ddd !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    /* Add collapse indicator */
    fieldset h2:after {
        content: ' ▼' !important;
        float: right !important;
        font-size: 10px !important;
    }

    fieldset.collapsed h2:after {
        content: ' ▶' !important;
    }

    .module h2 {
        padding: 8px 10px !important;
        font-size: 13px !important;
        margin: 0 !important;
    }

    /* ==================== CKEDITOR - Optimized for Mobile ==================== */
    .django-ckeditor-widget {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .cke {
        width: 100% !important;
        max-width: 100% !important;
    }

    .cke_chrome {
        width: 100% !important;
        border: 1px solid #ddd !important;
    }

    /* CKEditor toolbar - compact and scrollable */
    .cke_top {
        padding: 2px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        background: #f8f8f8 !important;
    }

    .cke_toolbox {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* CKEditor content area - reasonable height for mobile */
    .cke_contents {
        height: 250px !important;
        min-height: 250px !important;
    }

    /* Make CKEditor buttons more touch-friendly but compact */
    .cke_button {
        padding: 4px !important;
        margin: 1px !important;
    }

    .cke_button_icon {
        width: 16px !important;
        height: 16px !important;
    }

    /* Hide less important CKEditor buttons on mobile */
    .cke_button__source,
    .cke_button__maximize {
        display: none !important;
    }

    /* ==================== TABLES - Horizontally Scrollable ==================== */
    #result_list {
        overflow-x: auto !important;
        display: block !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 12px !important;
    }

    #changelist-form .results {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #result_list th,
    #result_list td {
        padding: 6px 4px !important;
        white-space: nowrap !important;
    }

    /* Hide less important columns on mobile */
    #result_list th.field-id,
    #result_list td.field-id {
        display: none !important;
    }

    /* ==================== ACTION BUTTONS - Compact & Stacked ==================== */
    .submit-row {
        padding: 8px 10px !important;
        overflow: visible !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #f8f8f8 !important;
        border-top: 2px solid #ddd !important;
        margin: 0 -5px !important;
        z-index: 100 !important;
    }

    .submit-row input,
    .submit-row a,
    .submit-row button {
        display: block !important;
        width: 100% !important;
        margin: 4px 0 !important;
        padding: 10px 12px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    .submit-row .deletelink-box {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #ccc !important;
    }

    /* ==================== INLINE FORMS - Compact ==================== */
    .inline-group {
        margin: 10px 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }

    .inline-group h2 {
        padding: 8px 10px !important;
        margin: 0 !important;
        font-size: 13px !important;
        background: #f0f0f0 !important;
    }

    .inline-related {
        padding: 8px !important;
        margin: 0 !important;
        border-bottom: 1px solid #eee !important;
    }

    .inline-related:last-child {
        border-bottom: none !important;
    }

    /* Inline form tables */
    .inline-group .tabular {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .inline-group .tabular table {
        width: 100% !important;
    }

    /* ==================== FILTERS - Full Width on Mobile ==================== */
    #changelist-filter {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    #changelist-filter h2 {
        padding: 8px 10px !important;
        margin: 0 !important;
        font-size: 13px !important;
        background: #f0f0f0 !important;
        border-bottom: 1px solid #ddd !important;
    }

    #changelist-filter h3 {
        font-size: 12px !important;
        padding: 6px 10px !important;
        margin: 0 !important;
    }

    #changelist-filter ul {
        padding: 5px 10px !important;
        margin: 0 0 10px 0 !important;
    }

    #changelist-filter li {
        padding: 3px 0 !important;
        font-size: 12px !important;
    }

    #changelist {
        display: block !important;
    }

    #changelist .results {
        width: 100% !important;
    }

    /* ==================== HELP TEXT - Compact ==================== */
    .help,
    p.help,
    .helptext {
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #666 !important;
        margin: 3px 0 0 0 !important;
        padding: 0 !important;
    }

    /* ==================== DATE/TIME SHORTCUTS - Stacked ==================== */
    .datetimeshortcuts {
        position: static !important;
        display: block !important;
        margin-top: 5px !important;
    }

    /* ==================== RELATED WIDGET LOOKUPS - Compact ==================== */
    .related-widget-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .related-widget-wrapper select,
    .related-widget-wrapper input {
        flex: 1 !important;
        margin-right: 5px !important;
    }

    .related-widget-wrapper a {
        flex-shrink: 0 !important;
        min-height: 38px !important;
        min-width: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 2px !important;
    }

    /* ==================== PAGINATION - Compact ==================== */
    .paginator {
        font-size: 12px !important;
        padding: 8px 5px !important;
        white-space: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .paginator a,
    .paginator span {
        padding: 5px 8px !important;
        margin: 0 2px !important;
        display: inline-block !important;
    }

    /* ==================== DASHBOARD MODULES - Compact ==================== */
    .module {
        margin: 0 0 10px 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    .module h2 {
        font-size: 13px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        background: #f8f8f8 !important;
    }

    .module table {
        font-size: 12px !important;
    }

    .module th,
    .module td {
        padding: 6px 8px !important;
    }

    /* ==================== OBJECT TOOLS - Full Width Buttons ==================== */
    .object-tools {
        float: none !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    .object-tools li {
        display: block !important;
        float: none !important;
        margin: 0 0 5px 0 !important;
        height: auto !important;
    }

    .object-tools a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 40px !important;
        line-height: 40px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    /* ==================== ERROR MESSAGES - Compact ==================== */
    .errornote {
        font-size: 13px !important;
        margin: 0 0 10px 0 !important;
        padding: 8px 10px !important;
    }

    .errorlist {
        font-size: 12px !important;
        margin: 5px 0 !important;
        padding: 5px 10px !important;
    }

    .errorlist li {
        padding: 3px 0 !important;
    }

    /* ==================== SELECTOR (for many-to-many) - Stacked ==================== */
    .selector {
        display: block !important;
        width: 100% !important;
    }

    .selector .selector-available,
    .selector .selector-chosen {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px !important;
    }

    .selector select {
        width: 100% !important;
        height: 150px !important;
    }

    .selector .selector-chooser {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }

    .selector .selector-chooser ul {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* ==================== HIDE UNNECESSARY ELEMENTS ON MOBILE ==================== */
    /* Hide documentation links */
    .object-tools .addlink + .viewsitelink,
    #content-related {
        display: none !important;
    }

    /* Hide timezone warning if present */
    .datetimeshortcuts .timezonewarning {
        display: none !important;
    }

    /* ==================== TOUCH IMPROVEMENTS ==================== */
    /* Make all clickable elements touch-friendly */
    a:not(.cke_button):not(.cke_button_icon),
    button:not(.cke_button),
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Improve tap highlighting */
    a, button, input[type="submit"], input[type="button"] {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    }
}

/* ==================== SMALL MOBILE DEVICES (< 480px) ==================== */
@media (max-width: 480px) {
    /* Even more compact */
    #branding h1 {
        font-size: 13px !important;
    }

    #user-tools {
        font-size: 9px !important;
    }

    .breadcrumbs {
        font-size: 9px !important;
    }

    #content {
        padding: 3px !important;
    }

    /* CKEditor - smaller on tiny screens */
    .cke_contents {
        height: 200px !important;
        min-height: 200px !important;
    }

    /* Even smaller fonts */
    .form-row label {
        font-size: 12px !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Keep 16px to prevent zoom */
        padding: 6px !important;
    }

    /* Reduce table font size */
    #result_list {
        font-size: 11px !important;
    }

    #result_list th,
    #result_list td {
        padding: 4px 3px !important;
    }

    /* Smaller buttons */
    .submit-row input,
    .submit-row a,
    .submit-row button {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
}

/* ==================== LANDSCAPE MODE ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Use horizontal space better in landscape */
    .cke_contents {
        height: 180px !important;
    }

    /* Show filters as sidebar in landscape if there's space */
    #changelist-filter {
        position: static !important;
    }
}

/* ==================== TABLETS (769px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Slightly larger on tablets but still optimized */
    #content {
        padding: 15px !important;
    }

    .cke_contents {
        height: 350px !important;
    }

    /* Keep desktop-like layout but with mobile-friendly sizing */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ==================== TOUCH DEVICES (any size) ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Ensure touch targets are always large enough */
    a:not(.cke_button),
    button:not(.cke_button),
    input[type="submit"],
    input[type="button"],
    .button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}