/* shared/mobile.css — responsive & touch improvements for all MatchKit tools */

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }

/* ── Touch targets — min 44×44px ──────────────────────────── */
button, select, input, a.mk-back, .lang-btn, .export-btn,
.team-tab-btn, .star-btn, .preview-export {
    min-height: 44px;
    touch-action: manipulation;
}
.lang-btn { min-height: 36px; } /* nav lang buttons can be slightly smaller */

/* ── Nav bar ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mk-nav { padding: 0 12px; gap: 10px; }
    .mk-nav-logo { font-size: 11px; letter-spacing: 2px; }
    .mk-back { font-size: 10px; padding: 5px 10px; letter-spacing: 1px; }
    .lang-btn { font-size: 10px; padding: 3px 7px; }
}

/* ── Tool containers ───────────────────────────────────────── */
@media (max-width: 768px) {
    .tool-container,
    .workspace,
    .page-wrapper { padding: 12px !important; }

    /* Dropdowns full-width on mobile */
    select, .match-display-input {
        font-size: 15px !important; /* prevent iOS zoom on focus */
        width: 100% !important;
    }
    input[type="text"], input[type="number"] {
        font-size: 16px !important; /* prevent iOS zoom */
    }
}

/* ── Matchday tool ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-wrapper { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
    #postPreview { width: 100% !important; max-width: 360px !important; height: auto !important; min-height: 360px !important; }
    .controls-panel { width: 100% !important; max-width: 360px !important; }
    .prev-team-circle { width: 110px !important; height: 110px !important; }
    .prev-team-circle span { font-size: 15px !important; }
    .export-dropdown { left: 0 !important; transform: none !important; right: 0; }
}

/* ── FullTime tool ─────────────────────────────────────────── */
@media (max-width: 768px) {
    #ftPreview { width: 100% !important; max-width: 380px !important; margin: 0 auto !important; }
    .ft-controls { width: 100% !important; }
    .ft-score-row { gap: 8px !important; }
    .ft-score-input { width: 60px !important; font-size: 28px !important; }
}

/* ── Rating tool ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .team-tabs { flex-direction: column !important; gap: 6px !important; }
    .team-tab-btn { width: 100% !important; }
    .player-row { flex-wrap: wrap !important; gap: 6px !important; }
    .rating-stars { gap: 4px !important; }
    .rating-star { font-size: 22px !important; }
    #mainContent { padding: 10px !important; }
    .summary-grid { grid-template-columns: 1fr !important; }
}

/* ── Home page ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    #heroTop { font-size: 10px !important; letter-spacing: 3px !important; }
    h1 { font-size: clamp(44px, 15vw, 80px) !important; line-height: 1 !important; }
    #heroDesc { font-size: 12px !important; padding: 0 8px !important; }
    #workspaceBtn { font-size: 13px !important; max-width: 100% !important; }
    #teamSearchBtn { font-size: 12px !important; max-width: 100% !important; padding: 14px 20px !important; }
    .team-search-panel { padding: 12px !important; }
    .team-item { padding: 10px 12px !important; }
}

/* ── Index / tool cards ────────────────────────────────────── */
@media (max-width: 768px) {
    .cards-grid, .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    .tool-card { padding: 20px !important; }
}

/* ── Export buttons ────────────────────────────────────────── */
@media (max-width: 600px) {
    .export-btn, .preview-export {
        width: 100% !important;
        font-size: 13px !important;
        padding: 14px !important;
    }
    .export-dropdown { width: 100% !important; left: 0 !important; right: 0 !important; }
    .export-dropdown button { padding: 14px !important; font-size: 13px !important; width: 100% !important; }
}

/* ── Saved panel ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .saved-panel, select[id*="saved"], select[id*="Saved"] {
        width: 100% !important;
    }
}

/* ── Scrollbar — thinner on mobile ────────────────────────── */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
}

/* ── Safe area for notched phones ─────────────────────────── */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}