/* ============================================================================
 * Mobile-first ERP flows (Sprint D4)
 *
 * All selectors scoped to `.mobile-flow` so desktop styles are unaffected.
 * Design targets:
 *   - 375×812 viewport (iPhone 13 mini reference)
 *   - 44px minimum tap target (Apple HIG)
 *   - Single-column card layout, bottom-bar nav
 *   - High-contrast typography (16px+ body)
 *
 * This stylesheet is loaded unconditionally; selectors only fire under
 * `data-page` elements that carry the `.mobile-flow` class. Pages OPT IN by
 * adding `class="mobile-flow"` to their root container.
 * ========================================================================= */

.mobile-flow {
    background: #f6f7fb;
    min-height: 100vh;
    padding: 12px 12px 80px 12px;  /* bottom-pad for bottom-bar */
    font-size: 16px;
    line-height: 1.45;
}

.mobile-flow .mf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 4px 0;
}

.mobile-flow .mf-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #1f2933;
}

.mobile-flow .mf-header .mf-badge {
    background: var(--primary, #6F4E37);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
}

/* Cards — the building block of every mobile screen. */
.mobile-flow .mf-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 14px 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #e6e8ee;
}

.mobile-flow .mf-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2933;
    margin-bottom: 4px;
    word-break: break-word;
}

.mobile-flow .mf-card-meta {
    font-size: 13px;
    color: #62718a;
    margin-bottom: 8px;
}

.mobile-flow .mf-card-summary {
    font-size: 14px;
    color: #364152;
    background: #f6f7fb;
    padding: 8px 10px;
    border-radius: 6px;
    margin: 8px 0;
    word-break: break-word;
}

/* Big-tap action row. Each button is 48px min height (above HIG 44px). */
.mobile-flow .mf-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.mobile-flow .mf-btn {
    min-height: 48px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-flow .mf-btn-approve {
    background: #22a06b;
    color: #fff;
}

.mobile-flow .mf-btn-approve:active { background: #1c8757; }

.mobile-flow .mf-btn-reject {
    background: #de350b;
    color: #fff;
}

.mobile-flow .mf-btn-reject:active { background: #b82a07; }

.mobile-flow .mf-btn-secondary {
    background: #e6e8ee;
    color: #1f2933;
}

.mobile-flow .mf-btn-secondary:active { background: #d4d8e0; }

/* Empty state. */
.mobile-flow .mf-empty {
    text-align: center;
    padding: 60px 20px;
    color: #62718a;
}

.mobile-flow .mf-empty .mf-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    color: #c3cad6;
}

/* Bottom-bar nav (hub + per-flow). */
.mobile-flow-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e6e8ee;
    display: flex;
    z-index: 50;
}

.mobile-flow-bottom-nav a {
    flex: 1;
    text-align: center;
    padding: 10px 4px 8px 4px;
    color: #62718a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.mobile-flow-bottom-nav a.active {
    color: var(--primary, #6F4E37);
}

.mobile-flow-bottom-nav a i {
    font-size: 20px;
}

/* Camera capture upload zone. */
.mobile-flow .mf-upload-zone {
    background: #fff;
    border: 2px dashed #c3cad6;
    border-radius: 12px;
    padding: 30px 16px;
    text-align: center;
    margin-bottom: 12px;
}

.mobile-flow .mf-upload-zone i {
    font-size: 40px;
    color: #62718a;
    margin-bottom: 10px;
}

.mobile-flow .mf-upload-zone .mf-upload-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1f2933;
    margin-bottom: 4px;
}

.mobile-flow .mf-upload-zone .mf-upload-hint {
    font-size: 13px;
    color: #62718a;
}

.mobile-flow .mf-upload-zone input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* Photo preview thumbnail in attachment list. */
.mobile-flow .mf-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: #e6e8ee center/cover no-repeat;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #62718a;
    font-size: 24px;
}

.mobile-flow .mf-thumb-img i { display: none; }  /* placeholder hidden once image hydrates */

.mobile-flow .mf-attachment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e6e8ee;
}

.mobile-flow .mf-attachment-row:last-child { border-bottom: none; }

.mobile-flow .mf-attachment-meta {
    flex: 1;
    min-width: 0;
}

.mobile-flow .mf-attachment-meta .mf-attachment-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2933;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-flow .mf-attachment-meta .mf-attachment-size {
    font-size: 12px;
    color: #62718a;
}

/* Form fields — bigger for thumb input. */
.mobile-flow .mf-form input,
.mobile-flow .mf-form select,
.mobile-flow .mf-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #c3cad6;
    border-radius: 8px;
    font-size: 16px;  /* iOS safari refuses to zoom into 16px+ inputs on focus */
    margin-bottom: 12px;
    background: #fff;
}

.mobile-flow .mf-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #364152;
    margin-bottom: 4px;
}

.mobile-flow .mf-form textarea { min-height: 88px; resize: vertical; }