/*
 * mobile.css — app-wide MOBILE BASELINE for FollowThrough Cloud
 * Linked in Components/App.razor AFTER MudBlazor.min.css.
 *
 * CONVENTION (see wwwroot/css/README.md):
 *   - This file holds ONLY safe, app-wide mobile baselines.
 *   - NO bare `.mud-* { ... !important }` overrides and NO global 44px button
 *     rule: MudBlazor.min.css loads last and its utilities are themselves
 *     `!important`, so such overrides are order-dependent and fragile, and a
 *     global 44px mandate blows out dense rows/tables. Touch targets are opt-in.
 *   - Component-specific mobile rules belong in scoped `.razor.css` files.
 *   - One breakpoint: `max-width: 599px` (MudBlazor "sm").
 *   - Use `var(--mud-palette-*)` tokens, not hardcoded colors.
 */

/* Remove the default tap-highlight flash on touch devices. */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Touch devices: drop hover-only transforms that feel broken without hover,
   and reveal hover-gated action buttons (opacity:0 until :hover in
   _projects.css / enhanced-tree.css) — taps never produce a sustained hover,
   so without this the project-row and tree-node actions are untappable. */
@media (hover: none) and (pointer: coarse) {
    .mud-chip:hover {
        transform: none !important;
    }

    .project-actions,
    .node-actions {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Respect users' reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Momentum touch-scrolling for MudBlazor scroll containers (iOS Safari). */
.mud-table-container {
    -webkit-overflow-scrolling: touch;
}

/*
 * Opt-in 44x44 touch targets. Add Class="touch-target" to a cluster whose small
 * buttons/icons are hard to tap on phones. Higher specificity (no !important
 * needed) beats MudBlazor's size classes only inside the cluster.
 */
@media (max-width: 599px) {
    .touch-target .mud-icon-button,
    .touch-target .mud-button {
        min-width: 44px;
        min-height: 44px;
    }
}