chunyu_project/static/admin/css/custom_admin.css

/* Django Admin Responsive Styles for Mobile & Tablet */

/* ============================================
   Language Switcher Enhancements
   ============================================ */
.language-switcher-wrapper {
    display: inline-flex;
    align-items: center;
}

.language-switcher-wrapper select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #4479a4;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    min-height: 32px;
}

.language-switcher-wrapper select:focus {
    outline: 2px solid #4479a4;
    outline-offset: 1px;
}

/* ============================================
   Tablet (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /* Slightly reduce padding on list tables */
    #result_list {
        font-size: 13px;
    }
}

/* ============================================
   Mobile (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Show language switcher inline with site name */
    .language-switcher-wrapper {
        float: right;
        margin-right: 10px;
    }

    /* Reduce header text size */
    #site-name a {
        font-size: 16px;
    }

    /* Improve list table usability */
    #result_list {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }

    #result_list tbody,
    #result_list thead {
        display: inline-block;
        min-width: 100%;
    }

    /* Ensure filter sidebar doesn't overflow */
    #changelist-filter {
        max-width: 200px;
        font-size: 12px;
    }

    /* Form rows - make inputs full width */
    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="password"],
    .form-row input[type="number"],
    .form-row input[type="url"],
    .form-row input[type="tel"],
    .form-row textarea,
    .form-row select {
        width: 100%;
        max-width: 100%;
        min-height: 36px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* Improve fieldset layout */
    fieldset {
        margin-bottom: 16px;
        padding: 12px;
    }

    /* Ensure action buttons are touch-friendly */
    .actions button,
    .actions input[type="submit"],
    .button,
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Better spacing for changelist actions */
    .actions {
        padding: 10px 0;
    }

    /* Object-tools button styling */
    .object-tools {
        float: none;
        clear: both;
        margin-bottom: 10px;
    }

    .object-tools li {
        display: block;
        margin-bottom: 5px;
    }

    .object-tools a {
        display: block;
        padding: 10px 16px;
        min-height: 44px;
        line-height: 24px;
        box-sizing: border-box;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================
   Small Mobile (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Single column form layout */
    .form-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }

    .form-row label {
        margin-bottom: 4px;
        font-weight: 600;
    }

    .form-row input,
    .form-row textarea,
    .form-row select {
        width: 100%;
    }

    /* Fieldsets single column */
    fieldset {
        border: 1px solid #ccc;
        padding: 10px;
    }

    fieldset .form-row {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

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

    /* Hide less important columns in changelist */
    #result_list th:nth-child(n+5),
    #result_list td:nth-child(n+5) {
        display: none;
    }

    /* Keep action column visible */
    #result_list th:last-child,
    #result_list td:last-child {
        display: table-cell;
    }

    /* Stack breadcrumbs and language switcher */
    #header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .language-switcher-wrapper {
        margin-top: 5px;
        width: 100%;
    }

    .language-switcher-wrapper select {
        width: 100%;
    }

    /* Pagination - larger touch targets */
    .paginator {
        font-size: 14px;
    }

    .paginator a,
    .paginator span {
        padding: 8px 12px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Inline items - stack vertically */
    .inline-group .inline-related {
        margin-bottom: 12px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    /* Delete confirmation page */
    .delete-confirmation form {
        padding: 10px;
    }

    .deletelink-box {
        padding: 12px;
    }

    /* Model list in admin index - 2 columns */
    #content-related {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #content-related .module {
        min-width: 0;
    }
}