.mobile-only { display: none; }
@media (max-width: 768px) {
    .app-container { padding: 15px; }
    .desktop-only { display: none; }
    .mobile-only { display: block; }
    .mobile-menu-btn { background: none; border: none; color: var(--text-color); font-size: 1.5rem; }
    .dots-grid { grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 4px; }

    /* Fix Grid Dots Width */
    .dots-grid {
        width: 100%;
        justify-content: space-between;
        padding: 0; /* Removed padding as requested */
    }

    /* Sheet Overlay */
    .sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(2px);
        z-index: var(--z-sheet-overlay, 299);
    }
    .sheet-overlay.hidden {
        display: none;
    }

    /* Mobile Header Actions */
    .mobile-actions {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .mobile-actions button {
        background: transparent;
        border: none;
        color: var(--text-color);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile Config Button Style Override */
    #btn-mobile-config {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        width: 32px;
        height: 32px;
        padding: 0;
    }
    
    #btn-mobile-config img {
        width: 20px;
        height: 20px;
        filter: invert(1); /* Make icon black */
    }
    
    .mobile-actions img {
        width: 24px;
        height: 24px;
    }

    /* Mobile Header Padding Fix */
    .app-header {
        padding-bottom: 0 !important;
    }

    /* Mobile Event Widget */
    #mobile-event-widget {
        margin: 16px 0; /* Removed top margin, kept bottom 16px */
        width: auto;
        background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); /* Match web */
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    #mobile-event-widget .today-event-emoji {
        font-size: 2rem; /* Match web */
    }
    
    #mobile-event-widget .today-event-details h4 {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    
    #mobile-event-widget .today-event-details p {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
    }
    
    #mobile-event-widget.add-event-placeholder {
        border-style: dashed;
        background: rgba(255,255,255,0.02);
        cursor: pointer;
        justify-content: center;
    }

    #mobile-event-widget.hidden {
        display: none !important;
    }

    /* Apple Style Drawer (Tasks Sheet) */
    #mobile-tasks-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 85vh; /* Tall drawer */
        background: var(--sheet-bg, #1c1c1e);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        z-index: var(--z-sheet, 300);
        transform: translateY(100%);
        transition: transform var(--transition-slow, 0.3s) var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
        display: flex;
        flex-direction: column;
        box-shadow: 0 -5px 30px rgba(0,0,0,0.5);
    }

    #mobile-tasks-sheet:not(.hidden) {
        transform: translateY(0);
    }

    .sheet-handle {
        width: 40px;
        height: 5px;
        background: rgba(255,255,255,0.3);
        border-radius: 10px;
        margin: 10px auto;
        flex-shrink: 0;
    }

    .sheet-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .sheet-content h3 {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 700;
    }

    /* Sheet Header */
    .sheet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Close Sheet Button */
    .btn-close-sheet {
        background: none;
        border: none;
        cursor: pointer;
    }

    .btn-close-sheet img {
        filter: invert(0.5);
    }

    /* Mobile Kanban Container */
    .mobile-kanban-container {
        overflow-y: auto;
        flex: 1;
    }

    /* Mobile Kanban Sections */
    .mobile-kanban-section {
        margin-top: 20px;
    }

    .mobile-kanban-section:first-child {
        margin-top: 0;
    }

    /* Mobile Section Titles */
    .mobile-section-title {
        color: var(--text-muted);
        font-size: 0.8rem;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .mobile-section-title.mobile-section-working {
        color: var(--status-working);
    }

    .mobile-section-title.mobile-section-done {
        color: var(--status-done);
    }

    /* Mobile Add Button */
    .mobile-add-btn {
        background: #ffffffee;
        color: black;
    }

    .mobile-task-list {
        list-style: none;
        padding-bottom: 40px;
    }
    
    .mobile-task-list .task-item {
        background: rgba(255,255,255,0.05); /* Match web design */
        margin-bottom: 5px;
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 6px;
        padding: 10px;
    }
    
    /* Ensure mobile task items look like web ones */
    .mobile-task-list .task-main-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    
    .mobile-task-list .task-text {
        font-size: 0.9rem;
        color: var(--text-color);
    }

    /* Mobile Sheet Buttons */
    .sheet-btn {
        display: block;
        width: 100%;
        padding: 15px;
        text-align: left;
        background: rgba(255,255,255,0.05);
        border: none;
        border-radius: 12px;
        margin-bottom: 10px;
        color: var(--text-main);
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
    }

    .sheet-btn:active {
        background: rgba(255,255,255,0.1);
    }

    .sheet-btn.text-danger {
        background: rgba(255, 50, 50, 0.1);
        border: 1px solid rgba(255, 50, 50, 0.3);
        color: #ff6666;
    }

    .sheet-btn.text-danger:active {
        background: rgba(255, 50, 50, 0.2);
    }
}