/* Mobile Responsiveness for List View Adaptation */
@media screen and (max-width: 768px) {

    /* Global settings to prevent overflow */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container {
        padding: 0 0.8rem;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* 1. Header Styles */
    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }

    .header-logo {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }

    .header-text {
        text-align: center;
    }

    .header-title {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    /* 2. Cover Page Adaptation */
    .cover-page {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 210/297;
        /* A4 Ratio */
        margin: 0 auto 2rem auto !important;
        padding: 1rem;
    }

    .cover-title {
        font-size: 2rem;
    }

    .cover-date {
        font-size: 1.2rem;
    }

    .cover-logo {
        width: 100px;
    }

    /* 3. Newspaper Card - List View Adaptation */
    /* This makes the default PC list view responsive */
    .newspaper-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;

        /* Increased height slightly */
        aspect-ratio: 210/330;

        /* Reduced margin */
        margin: 0.8rem 0 !important;
        border-radius: 8px;
    }

    .newspaper-header {
        padding: 0.8rem 1rem;
    }

    .newspaper-title {
        font-size: 1.1rem;
    }

    .newspaper-date {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    /* 4. Controls */
    .actions {
        bottom: 1rem;
        right: 0.5rem;
        /* Keep right for consistency with PC, or user preference */
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* 5. Handle "Card View" (Grid) if activated */
    /* Force it to look like List View on mobile to avoid layout breaking */
    .container.card-view {
        display: flex !important;
        flex-direction: column;
        padding: 0 0.8rem;
        gap: 0;
    }

    .container.card-view .newspaper-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 210/330;
        /* Match new taller ratio */
        margin: 0.8rem 0 !important;
    }

    /* Hide the view toggle button since both views now look the same (List) on mobile */
    #viewToggleBtn {
        display: none !important;
    }

    /* Ensure order controls are usable on mobile */
    /* 6. Control Buttons (Always visible on mobile) */
    /* 6. Control Buttons (Always visible on mobile) */
    /* 6. Control Buttons (Always visible on mobile) */
    /* 6. Control Buttons (Always visible on mobile) */
    .admin-controls {
        display: flex !important;
        opacity: 1 !important;

        /* Position: Top Center, slightly outside */
        /* Position: Top Center, slightly outside */
        position: absolute !important;
        top: -25px !important;
        left: 50% !important;
        right: auto !important;
        /* Scale down the entire eye icon container */
        transform: translateX(-50%) scale(0.85) !important;

        /* Sweet Frame Style - Solid */
        background: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        border: 1.5px solid rgba(0, 0, 0, 0.05) !important;
        border-radius: 30px !important;

        padding: 0 10px !important;
        height: 35px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 20;
    }

    .admin-controls .btn-icon {
        color: #4a5568 !important;
        /* Dark color for visibility on white */
        text-shadow: none !important;
        padding: 0 !important;
    }

    /* Ensure order controls are usable and visible on mobile */
    .order-controls {
        display: flex !important;
        opacity: 1 !important;
        flex-direction: row !important;
        /* Horizontal layout */

        /* Position: Top Left, aligned with eye icon */
        position: absolute !important;
        top: -25px !important;
        left: 10px !important;
        transform: none !important;

        /* Adjust gap for mobile */
        gap: 10px !important;
        z-index: 20;
    }

    .btn-order {
        width: 35px;
        height: 35px;
        /* Sweet Frame Style - Solid */
        background: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        border: 1.5px solid rgba(0, 0, 0, 0.05) !important;
        border-radius: 50%;
    }

    .btn-order i {
        color: #4a5568;
        /* Dark color for visibility on white */
        text-shadow: none;
    }
}