/* Mobile Tweaks - Only applies to screens 600px and below */
@media (max-width: 600px) {
    /* Reduce side padding to 16px */
    main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Increase negative space between cards */
    .space-y-4 > * + * {
        margin-top: 1.5rem !important;
    }
    
    /* 1. Make header more concise */
    nav h1 {
        font-size: 1rem !important;
    }
    
    /* 2. Card-based design: Separate Rule and Streak into distinct visual sections */
    /* Split the combined card into separate visual blocks on mobile */
    .zen-card .grid.grid-cols-1.md\:grid-cols-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Rule Section - First Card Block */
    .zen-card .grid > div:first-child {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--zen-border);
    }
    
    /* Hide or reduce "YOUR ONE RULE" label */
    .zen-card .zen-label:first-child {
        font-size: 0.6rem !important;
        margin-bottom: 0.4rem !important;
        opacity: 0.7;
    }
    
    /* Streak Section - Second Card Block (grouped stats) */
    .zen-card .grid > div:last-child {
        text-align: center !important;
        padding-top: 1rem;
    }
    
    /* Hide "CURRENT STREAK" label */
    .zen-card .grid > div:last-child > .zen-label {
        display: none !important;
    }
    
    /* Make streak number more prominent */
    .zen-streak-number {
        font-size: 3.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Group streak stats together - elegant stat block */
    .zen-meta.mt-3 {
        text-align: center !important;
        font-size: 0.65rem !important;
        color: var(--zen-ink-light) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.75rem !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0;
        background: var(--zen-ink-wash);
        border-radius: 0.375rem;
    }
    
    .zen-meta.mt-3 > div {
        display: inline !important;
        margin-bottom: 0 !important;
    }
    
    .zen-meta.mt-3 > div:first-child::after {
        content: " • ";
        color: var(--zen-ink-light);
        margin-left: 0.5rem;
    }
    
    .zen-meta.mt-3 .zen-value {
        font-weight: 400 !important;
        color: var(--zen-ink-light) !important;
    }
    
    /* 3. Clear Primary Action - Make check-in buttons prominent */
    /* Check-in card should stand out - use more reliable selector */
    .lg\:col-span-2 .zen-card:nth-child(2) {
        margin-top: 2rem !important;
        padding: 1.5rem !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Hide "TODAY'S CHECK-IN" label or make it smaller and align with buttons */
    .lg\:col-span-2 .zen-card:nth-child(2) .zen-label {
        font-size: 0.65rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
    }
    
    /* Increase size and padding of check-in buttons - larger but still on 1 row */
    #complete-btn,
    #failed-btn {
        height: 64px !important;
        min-height: 64px !important;
        width: calc(50% - 0.375rem) !important;
        flex: 0 0 calc(50% - 0.375rem) !important;
        white-space: nowrap !important;
        font-size: 1.0625rem !important;
        padding: 1rem 1.5rem !important;
        font-weight: 600 !important;
        border-radius: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
    }
    
    #complete-btn span,
    #failed-btn span {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* Ensure buttons container aligns properly */
    .grid.grid-cols-2.gap-2 {
        gap: 0.75rem !important;
        display: flex !important;
        align-items: stretch !important;
    }
    
    /* Make sure buttons are vertically aligned on same line */
    #complete-btn,
    #failed-btn {
        align-self: stretch !important;
    }
    
    /* Alignment: Rule text on its own line, badges and edit button on same line below */
    .zen-card .grid > div:first-child > p.zen-rule-text {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }
    
    /* Create a flex container for badges and edit button */
    .zen-card .grid > div:first-child > .zen-meta:not(.mt-3) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .zen-badge {
        display: inline-block;
        vertical-align: middle;
    }
    
    /* Make Edit rule button same height/size as Daily and Private badges, align right */
    .zen-card .grid > div:first-child > .zen-link {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.5rem !important;
        margin-top: 0 !important;
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle;
        height: auto !important;
        line-height: 1.4 !important;
        background: var(--zen-ink-wash) !important;
    }
    
    .zen-link-icon {
        width: 0.65rem !important;
        height: 0.65rem !important;
        vertical-align: middle;
    }
    
    /* Ensure all cards have consistent padding and alignment */
    .zen-card {
        padding: 1.2rem !important;
    }
    
    /* Ensure text alignment consistency */
    .zen-card .grid > div:first-child {
        text-align: left;
    }
    
    .zen-card .grid > div:last-child {
        text-align: center;
    }
    
    /* Convert 30-day calendar grid to horizontally-scrollable strip */
    .zen-calendar-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem;
        width: 100%;
        /* Show approximately 7 days at a time - each dot is ~10px + 0.5rem (8px) gap */
    }
    
    .zen-calendar-grid::-webkit-scrollbar {
        height: 4px;
    }
    
    .zen-calendar-grid::-webkit-scrollbar-track {
        background: var(--zen-ink-wash);
        border-radius: 2px;
    }
    
    .zen-calendar-grid::-webkit-scrollbar-thumb {
        background: var(--zen-ink-wash-medium);
        border-radius: 2px;
    }
    
    /* Each dot should snap to position - group by 7 for better UX */
    .zen-calendar-dot {
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
        width: 10px !important;
        height: 10px !important;
        background: var(--zen-ink-light) !important;
        opacity: 0.4 !important;
    }
    
    .zen-calendar-dot.today {
        width: 12px !important;
        height: 12px !important;
        background: var(--zen-ink) !important;
        opacity: 1 !important;
        box-shadow: 0 0 0 2px var(--zen-ink-wash-medium) !important;
    }
    
    .zen-calendar-dot.success {
        background: var(--zen-ink) !important;
        opacity: 0.7 !important;
    }
    
    .zen-calendar-dot.failure {
        background: var(--zen-ink-light) !important;
        opacity: 0.5 !important;
    }
    
    .zen-calendar-dot.missed {
        background: var(--zen-ink-light) !important;
        opacity: 0.3 !important;
    }
    
    .zen-calendar-dot.future {
        background: var(--zen-ink-light) !important;
        opacity: 0.2 !important;
    }
    
    /* Create visual grouping - every 7th dot has slightly more spacing */
    .zen-calendar-dot:nth-child(7n) {
        margin-right: 0.75rem;
    }
    
    /* Shrink rule title to 24px on mobile */
    .zen-rule-text {
        font-size: 24px !important;
    }
    
    /* Reorder: Move 30-day history card above quote on mobile */
    /* Make the main grid use flexbox for ordering */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Left column - contains rule, check-in, quote */
    .lg\:col-span-2 {
        order: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Make quote card appear after calendar */
    .lg\:col-span-2 .zen-card:last-child {
        order: 3 !important;
    }
    
    /* Right column (calendar) - insert between check-in and quote */
    .grid.grid-cols-1.lg\:grid-cols-3 > div:last-child {
        order: 2 !important;
    }
    
    /* Check-in card stays in order 1 */
    .lg\:col-span-2 .zen-card:nth-child(2) {
        order: 1 !important;
    }
    
    /* Make all stats in 30-day history card on one line, properly aligned */
    /* Target stats grid in calendar card - use 2x2 grid or all 4 in one row */
    .zen-card .grid.grid-cols-2.gap-3 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        border-top: 1px solid var(--zen-border) !important;
        padding-top: 1rem !important;
        margin-top: 1rem !important;
        align-items: start !important;
    }
    
    .zen-card .grid.grid-cols-2.gap-3 > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .zen-stat-label {
        font-size: 0.6rem !important;
        margin-bottom: 0.25rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .zen-stat-value {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: 100% !important;
        line-height: 1.2 !important;
    }
    
    /* Ensure all stat items have same baseline alignment */
    .zen-card .grid.grid-cols-2.gap-3 > div > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Alternative: If 4 stats don't fit, use 2 rows (first 3 on top, completed on bottom) */
    @media (max-width: 400px) {
        .zen-card .grid.grid-cols-2.gap-3 {
            grid-template-columns: repeat(3, 1fr) !important;
        }
        
        .zen-card .grid.grid-cols-2.gap-3 > div:nth-child(4) {
            grid-column: 1 / -1 !important;
            margin-top: 0.5rem !important;
            padding-top: 0.5rem !important;
            border-top: 1px solid var(--zen-border) !important;
        }
    }
    
    /* 4. Reduce quote section to smaller, italicized footer style */
    /* Target the quote card - it's the last card in the left column */
    .lg\:col-span-2 .zen-card:last-child {
        padding: 0.75rem 1rem !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        order: 2 !important;
    }
    
    /* Hide "MOTIVATION" label and refresh button */
    .zen-label-with-action {
        display: none !important;
    }
    
    /* Make quote text smaller, italicized, footer style */
    #quote-text {
        font-size: 0.75rem !important;
        font-style: italic !important;
        color: var(--zen-ink-light) !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Make author even smaller, subtle */
    #quote-author {
        font-size: 0.65rem !important;
        color: var(--zen-ink-light) !important;
        opacity: 0.7 !important;
        margin-top: 0.25rem !important;
        text-align: center !important;
    }
    
    /* Fallback: target by containing quote elements */
    .zen-card .zen-quote {
        font-size: 0.75rem !important;
        font-style: italic !important;
        color: var(--zen-ink-light) !important;
    }
}