/* ===================================================================
   iOS Structural Overrides
   ===================================================================
   Overrides that CSS tokens alone cannot handle — layout, visibility,
   positioning differences between Material Design and iOS HIG.
   Activated by Capacitor's body.ios class.
   Load after sva_ios_tokens.css.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Button press feedback — opacity instead of scale
   ------------------------------------------------------------------- */

body.ios button:active,
body.ios .btn-primary:active,
body.ios .btn-secondary:active,
body.ios .btn-danger:active,
body.ios .btn-warning:active,
body.ios .btn-success:active,
body.ios .btn-info:active {
    transform: none;
    opacity: 0.7;
}

body.ios .crud-fab:active,
body.ios .crud-action-btn:active:not(:disabled) {
    transform: none;
    opacity: 0.7;
}

body.ios .crud-item:active,
body.ios .entity-card:active,
body.ios .peer-item:active,
body.ios .dash-summary-card:active,
body.ios .dash-cta-card:active,
body.ios .first-action-cta:active {
    transform: none;
    opacity: 0.85;
}

body.ios .shortcut-tile:active,
body.ios .entity-action:active,
body.ios .entity-action-btn:active,
body.ios .entity-empty-action:active,
body.ios .dash-quick-action-btn:active {
    transform: none;
    opacity: 0.7;
}

body.ios .wizard-option:active {
    transform: none;
    opacity: 0.85;
}

/* -------------------------------------------------------------------
   2. M3 state layer removal — iOS does not use state layers
   ------------------------------------------------------------------- */

body.ios button::before {
    display: none;
}

/* -------------------------------------------------------------------
   3. Tab bar — remove pill indicator, use icon tinting
   ------------------------------------------------------------------- */

body.ios .tab-bar-item.active .tab-bar-icon {
    background: transparent;
    padding: 2px 0;
}

body.ios .tab-bar-item.active .tab-bar-icon .material-symbols-outlined {
    color: var(--color-primary);
}

body.ios .tab-bar-item .tab-bar-label {
    font-weight: 500;
}

body.ios .tab-bar-item.active .tab-bar-label {
    color: var(--color-primary);
    font-weight: 600;
}

/* -------------------------------------------------------------------
   4. FAB — squircle shape on iOS (less jarring than full circle)
   ------------------------------------------------------------------- */

body.ios .crud-fab {
    border-radius: 16px;
    width: 50px;
    height: 50px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

body.ios .crud-fab:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

/* -------------------------------------------------------------------
   5. Snackbar — keep at bottom on iOS (standard iOS toast position).
   iOS users expect transient feedback near the bottom of the screen,
   close to the tab bar where their attention is after an action.
   ------------------------------------------------------------------- */

body.ios .md-snackbar {
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------
   6. Bottom sheet — iOS-style drag handle
   ------------------------------------------------------------------- */

body.ios .bottom-sheet-handle::after {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--color-text-muted);
    opacity: 0.3;
}

body.ios .bottom-sheet {
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------
   7. Header — iOS navigation style (semibold title, tighter tracking)
   ------------------------------------------------------------------- */

body.ios .sva-header .header-title,
body.ios .header-title {
    font-weight: 600;
    letter-spacing: -0.4px;
}

/* -------------------------------------------------------------------
   8. Pull-to-refresh — iOS-style spinner
   ------------------------------------------------------------------- */

body.ios .pull-to-refresh-arrow {
    opacity: 0.5;
}

/* -------------------------------------------------------------------
   9. Scroll — elastic bounce on main content (native iOS behavior).
   Disabled on modals/overlays where rubber-band interferes with dismiss
   gestures, but preserved on the main scrollable area since iOS users
   expect it as feedback that they've reached the end of content.
   ------------------------------------------------------------------- */

body.ios .sva-modal-overlay,
body.ios .bottom-sheet,
body.ios .help-modal {
    overscroll-behavior-y: none;
}