/* ============================================================
   Mobile / responsive overrides — loaded after each page's
   inline styles, so these rules win at equal specificity.
   Shared across all pages of the portfolio app.
   ============================================================ */

/* Slightly larger tap targets everywhere, even on tablets */
@media (max-width: 900px) {
    .btn { padding: .6rem 1.1rem; }
}

@media (max-width: 700px) {

    /* ---- iOS: inputs under 16px trigger auto-zoom on focus ---- */
    input, select, textarea, button { font-size: 16px !important; }

    /* ---- Top bar: wrap instead of overflowing ---- */
    .topbar {
        height: auto !important;
        min-height: 56px;
        flex-wrap: wrap;
        gap: .5rem;
        padding: .6rem 1rem !important;
    }
    .topbar-logo { font-size: .9rem; }
    .topbar-actions, .topbar > div { flex-wrap: wrap; gap: .5rem; }

    /* ---- Page padding ---- */
    .main { padding: 1rem !important; }

    /* ---- Dashboard stats ---- */
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem !important; }
    .stat-card { padding: .9rem 1rem !important; }
    .stat-card .value { font-size: 1.4rem !important; }

    /* ---- Toolbar (search + filters) ---- */
    .toolbar { flex-wrap: wrap; gap: .5rem !important; }
    .toolbar input { width: 100% !important; flex: 1 1 100%; }
    .toolbar select { flex: 1 1 40%; }
    .view-toggle { margin-left: 0 !important; }

    /* ---- Table view: horizontal scroll instead of squeeze ---- */
    .companies-table.active { display: block !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .companies-table th, .companies-table td { white-space: nowrap; }
    .companies-table th { top: 0 !important; }

    /* ---- Company page hero ---- */
    .hero { flex-direction: column !important; padding: 1.25rem !important; gap: 1.25rem !important; }
    .hero-stats { grid-template-columns: repeat(2, 1fr) !important; min-width: 0 !important; width: 100%; }
    .hero-info h1 { font-size: 1.35rem !important; }

    /* ---- Two-column panels stack ---- */
    .grid-2 { grid-template-columns: 1fr !important; }

    /* ---- Cap table chart: stack chart above legend ---- */
    .cap-chart-wrap { flex-direction: column; gap: 1rem !important; }
    .cap-chart-wrap canvas { margin: 0 auto; }

    /* ---- Panels ---- */
    .panel-body { padding: 1rem !important; }
    .panel-header { padding: .75rem 1rem !important; flex-wrap: wrap; gap: .5rem; }

    /* ---- Funding round values wrap ---- */
    .round-vals { flex-wrap: wrap; gap: .75rem !important; }

    /* ---- Contacts ---- */
    .contact-links { flex-wrap: wrap; }
    .contact-card { flex-wrap: wrap; }

    /* ---- Forms: single column ---- */
    .form-grid { grid-template-columns: 1fr !important; }
    .add-form { grid-template-columns: 1fr 1fr !important; }

    /* ---- Login card ---- */
    .card { padding: 2rem 1.5rem !important; margin: 0 1rem; }

    /* ---- Document rows ---- */
    .doc-row { flex-wrap: wrap; }
    .doc-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 400px) {
    .stats-row { grid-template-columns: 1fr 1fr !important; }
    .hero-stats { grid-template-columns: 1fr 1fr !important; }
    .add-form { grid-template-columns: 1fr !important; }
}