/* ═══════════════════════════════════════════════════════════════════
   EMS Mobile Styles
   Breakpoints: ≤768px tablet, ≤480px phone
   Strategy: stack everything vertically, large tap targets (44px min),
   bottom-anchored nav bar on phone, swipe-friendly cards
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bottom nav bar (phone only) ─────────────────────────────────── */
@media (max-width: 480px) {
    /* Push page content up above the bottom bar */
    body.ems-page { padding-bottom: 68px !important; }

    .ems-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 10px rgba(0,0,0,.1);
        z-index: 9000;
        align-items: stretch;
    }
    .ems-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #888;
        font-size: 10px;
        font-weight: 600;
        gap: 3px;
        border-right: 1px solid #f0f0f0;
        transition: background .12s, color .12s;
        min-height: 44px;
    }
    .ems-bottom-nav-item:last-child { border-right: none; }
    .ems-bottom-nav-item.active { color: #1565C0; }
    .ems-bottom-nav-item:active { background: #f0f0f0; }
    .ems-bottom-nav-icon { font-size: 20px; line-height: 1; }

    /* Hide top nav links on mobile — bottom bar replaces them */
    .ems-topnav-links { display: none !important; }
    .ems-topnav { height: 48px; padding: 0 14px; }
    .ems-topnav-brand span { font-size: 14px; }
}

/* Hide bottom nav on tablet and desktop */
.ems-bottom-nav { display: none; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — Mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ems-dashboard-wrap { padding: 12px 10px; }

    .ems-dash-header {
        padding: 14px 16px;
        gap: 10px;
    }
    .ems-dash-date { display: none; } /* Save space on small screens */

    .ems-dash-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Upcoming shifts — horizontal scroll cards on phone */
    .ems-upcoming-list { gap: 8px; }
    .ems-upcoming-row {
        padding: 10px 12px;
        gap: 8px;
    }
    .ems-upcoming-actions { flex-direction: row; }

    /* Quick tiles — 2×2 grid on tablet, 2×3 on phone */
    .ems-quick-tiles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ems-tile {
        padding: 14px;
    }
    .ems-tile-icon { font-size: 22px; }
    .ems-tile-title { font-size: 13px; }
    .ems-tile-desc { display: none; } /* Too much text on phone */

    /* Request rows — stack vertically */
    .ems-request-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ems-req-status { width: 100%; }
}

@media (max-width: 480px) {
    .ems-greeting-name { font-size: 18px; }
    .ems-dash-card { padding: 14px; }
    .ems-dash-card-title { font-size: 13px; }

    /* Cert alert — compact on phone */
    .ems-cert-alert { font-size: 13px; padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   CALENDAR — Mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Toolbar — stack to two rows */
    .ems-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }
    .ems-nav-row {
        justify-content: center;
    }
    .ems-period-label { font-size: 14px; min-width: unset; }
    .ems-view-switcher { justify-content: center; }
    .ems-unit-filter { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .ems-unit-chip { white-space: nowrap; flex-shrink: 0; }

    /* DAILY VIEW — single column unit blocks */
    .ems-daily-grid { grid-template-columns: 1fr; }
    .ems-daily-unit-block { border-right: none; border-bottom: 1px solid #e0e0e0; }
    .ems-daily-shift { min-height: unset; padding: 12px 14px; }
    .ems-shift-assign { gap: 10px; }

    /* WEEKLY VIEW — scrollable horizontally */
    .ems-weekly-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ems-week-grid { min-width: 560px; }
    .ems-week-unit-col { font-size: 10px; padding: 6px 4px; min-width: 50px; }
    .ems-wshift-name { max-width: 70px; }

    /* MONTHLY VIEW — compact cells */
    .ems-month-cell { min-height: 72px; padding: 4px 2px; }
    .ems-month-day-num { font-size: 11px; width: 20px; height: 20px; line-height: 20px; }
    .ems-month-shift-chip { padding: 1px 3px; font-size: 9px; }
    .ems-month-dow-header { font-size: 10px; padding: 6px 2px; }
    .ems-chip-open { display: none; } /* Too small to show */

    /* LIST VIEW — full-width optimized */
    .ems-list-shift-row { padding: 10px 12px; gap: 8px; }
    .ems-list-unit-tag { min-width: unset; font-size: 10px; padding: 2px 7px; }
    .ems-list-shift-time { min-width: unset; font-size: 11px; }
    .ems-list-actions { margin-left: 0; width: 100%; }
    .ems-list-actions .ems-btn { flex: 1; text-align: center; }
    .ems-list-day-header { padding: 8px 12px; }
}

@media (max-width: 480px) {
    /* DAILY VIEW — make action buttons full-width */
    .ems-shift-actions { width: 100%; }
    .ems-shift-actions .ems-btn { flex: 1; padding: 10px; font-size: 13px; text-align: center; }

    /* MONTHLY VIEW — tap on day goes to day view (chips are decorative) */
    .ems-month-shift-chip { display: none; }
    .ems-month-cell { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
    .ems-month-day-num { margin-bottom: 0; }
    /* Show dot indicators instead of chips */
    .ems-month-cell[data-has-shifts="true"]::after {
        content: '';
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #1565C0;
        margin-top: 2px;
        display: block;
    }
    .ems-month-cell[data-has-open="true"]::after { background: #E65100; }

    /* LIST VIEW — hide unit tag, show as left border color instead */
    .ems-list-unit-tag { display: none; }
    .ems-list-shift-row { border-left: 4px solid var(--unit-color, #1565C0); }
}

/* ════════════════════════════════════════════════════════════════════
   AVAILABILITY CALENDAR — Mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ems-avail-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
    .ems-avail-nav h2 { font-size: 16px; min-width: unset; }
    .ems-avail-legend { gap: 8px; }
    .ems-avail-instructions { font-size: 13px; padding: 10px 14px; }

    /* Smaller cells — slots stack tighter */
    .ems-avail-day-cell { min-height: 90px; padding: 4px 2px; }
    .ems-avail-day-num { font-size: 11px; width: 20px; height: 20px; line-height: 20px; }
    .ems-avail-slot { padding: 2px 3px; font-size: 9px; }
    .ems-slot-label { font-size: 9px; }
    .ems-avail-dow-header { font-size: 10px; padding: 6px 2px; }

    .ems-avail-footer { flex-direction: column; align-items: stretch; gap: 10px; }
    .ems-avail-actions { flex-direction: column; }
    .ems-avail-actions .ems-btn { width: 100%; padding: 12px; font-size: 14px; text-align: center; }
}

@media (max-width: 480px) {
    /* Month grid too small — show 3-column (Mon/Wed/Fri + Tue/Thu + Sat/Sun grouped) */
    /* Actually keep 7-col but make slots icon-only */
    .ems-avail-slot { border-radius: 3px; min-height: 24px; justify-content: center; }
    .ems-slot-label { display: none; }
    /* Show time as tooltip only — the legend explains colors */
    .ems-slot-check { font-size: 10px; }
    .ems-avail-submitted-banner { font-size: 13px; padding: 10px 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   OPEN SHIFTS — Mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ems-open-shifts-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
    }
    .ems-open-shift-action .ems-btn { width: 100%; padding: 10px; font-size: 13px; }
    .ems-open-day-header { padding: 10px 14px; }
}
@media (max-width: 480px) {
    .ems-open-shifts-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE & CERTS — Mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ems-profile-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .ems-cert-health { margin-left: 0; text-align: left; }
    .ems-cert-grid { grid-template-columns: 1fr; }
    .ems-cert-field-row { grid-template-columns: 1fr 1fr; }
    .ems-role-selector { flex-direction: column; }
    .ems-role-option { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   CALENDAR SYNC WIDGET — Mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .ems-sync-widget { margin: 0 -10px; border-radius: 0; }
    .ems-sync-options { flex-direction: column; }
    .ems-sync-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL TOUCH IMPROVEMENTS
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Minimum 44px tap targets for all interactive elements */
    .ems-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
    .ems-xs-btn, .ems-sm-btn { min-height: 32px; }

    /* Remove hover effects on touch (they stay "hovered" after tap) */
    .ems-shift-card:hover,
    .ems-tile:hover,
    .ems-open-shift-card:hover { box-shadow: none; transform: none; }

    /* Larger close/action buttons */
    .ems-fav-remove { min-width: 36px; min-height: 36px; font-size: 18px; }

    /* Modal — full screen on phone */
    .ems-modal { align-items: flex-end; }
    .ems-modal-inner {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 24px 20px 32px;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Scroll snap for horizontal scrolling lists */
    .ems-week-grid { scroll-snap-type: x mandatory; }
    .ems-week-cell { scroll-snap-align: start; }
}

/* ════════════════════════════════════════════════════════════════════
   SYNC / EXPORT WIDGET STYLES (shared desktop+mobile)
   ════════════════════════════════════════════════════════════════════ */
.ems-sync-widget {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ems-sync-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ems-sync-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
}
.ems-sync-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ems-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all .15s;
    min-height: 44px;
}
.ems-sync-btn:hover { opacity: .85; transform: translateY(-1px); }
.ems-sync-gcal  { background: #4285F4; color: #fff; }
.ems-sync-ical  { background: #FF6B6B; color: #fff; }
.ems-sync-copy  { background: #fff; color: #333; border-color: #ccc; }
.ems-sync-copy:hover { border-color: #1565C0; color: #1565C0; }
.ems-sync-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 12px;
}
.ems-sync-url-row input {
    flex: 1;
    border: none;
    background: none;
    font-size: 12px;
    color: #555;
    font-family: monospace;
    outline: none;
}
.ems-sync-copied {
    font-size: 12px;
    color: #2E7D32;
    font-weight: 600;
    display: none;
}