/**
 * DEV: Mobile Base Styles - Remove after integration
 * Target: iPhone (390x891px)
 * Breakpoint: max-width 768px
 *
 * Base mobile utilities and resets for CloudPanel
 * Following 8px spacing grid and existing design system
 */

/* ============================================
   CSS VARIABLES - DESIGN SYSTEM
   ============================================ */

:root {
  /* Colors - Light Mode Background */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F4F4F5;
  --color-bg-tertiary: #FAFAFA;
  --color-bg-elevated: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-input: #FFFFFF;
  --color-bg-nav: #FFFFFF;
  --color-bg-sheet: #FFFFFF;

  /* Colors - Light Mode Text */
  --color-text-primary: #000000;
  --color-text-secondary: #8E8E93;
  --color-text-tertiary: #A1A1AA;
  --color-text-muted: #71717A;
  --color-text-label: #71717A;
  --color-text-placeholder: #A1A1AA;

  /* Colors - Light Mode Borders */
  --color-border: #E4E4E7;
  --color-border-light: #E5E5EA;
  --color-separator: #E4E4E7;
  --color-divider: #E5E5EA;

  /* Colors - Action (same in light/dark) */
  --color-primary: #007AFF;
  --color-primary-hover: #0066DD;
  --color-success: #34C759;
  --color-success-dark: #22C55E;
  --color-warning: #FF9500;
  --color-warning-dark: #F59E0B;
  --color-danger: #FF3B30;
  --color-danger-dark: #EF4444;

  /* Spacing - 8px Grid */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Typography */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.01em;

  /* Layout */
  --header-height: 56px;
  --nav-width: 280px;
  --touch-target: 44px;
  --touch-target-lg: 48px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  --transition-bounce: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-sheet: 0 -4px 32px rgba(0, 0, 0, 0.15);

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-overlay: 1040;
  --z-drawer: 1050;
  --z-modal: 2000;
  --z-sheet: 2000;
  --z-toast: 3000;

  /* Overlay */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Interactive States */
  --color-hover: rgba(0, 0, 0, 0.05);
  --color-bg-hover: #F3F4F6;
  --color-link: #3B82F6;
  --color-icon: #9CA3AF;

  /* Badge Colors */
  --color-badge-bg: #18181B;
  --color-badge-text: #FFFFFF;

  /* Additional Shadows */
  --shadow-drawer: 2px 0 8px rgba(0, 0, 0, 0.1);

  /* Elevated Background for Dark Mode */
  --color-bg-elevated-dark: #52525B;

  /* Chevron and Handle Colors */
  --color-chevron: #C7C7CC;
  --color-handle: rgba(0, 0, 0, 0.12);

  /* Semi-transparent Separators */
  --color-separator-alpha: rgba(0, 0, 0, 0.1);

  /* Primary Alpha (for button active states) */
  --color-primary-alpha: rgba(0, 122, 255, 0.1);

  /* Admin Badge */
  --color-badge-admin-bg: #DBEAFE;
  --color-badge-admin-text: #1D4ED8;

  /* Toggle Switch */
  --color-toggle-off: #E9E9EB;

  /* Segmented Control */
  --color-segmented-bg: #EFEFF0;
  --color-segmented-active: #FFFFFF;

  /* Action Sheet Item Background */
  --color-action-item-bg: transparent;

  /* Editor Colors */
  --editor-bg: #1E1E1E;
  --editor-header-bg: #2D2D2D;
  --editor-text: #CCCCCC;
}

/* Dark Mode Variables */
html.dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #1C1C1E;
  --color-bg-tertiary: #2C2C2E;
  --color-bg-elevated: #1C1C1E;
  --color-bg-card: #1C1C1E;
  --color-bg-input: #2C2C2E;
  --color-bg-nav: #18181B;
  --color-bg-sheet: #1C1C1E;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #8E8E93;
  --color-text-tertiary: #A1A1AA;
  --color-text-muted: #71717A;
  --color-text-label: #A1A1AA;
  --color-text-placeholder: #71717A;

  --color-border: #3F3F46;
  --color-border-light: #3F3F46;
  --color-separator: #3F3F46;
  --color-divider: #3F3F46;

  /* Dark mode action colors (slightly brighter) */
  --color-primary: #0A84FF;
  --color-primary-hover: #409CFF;
  --color-success: #30D158;
  --color-warning: #FF9F0A;
  --color-danger: #FF453A;

  /* Dark mode shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -4px 32px rgba(0, 0, 0, 0.5);
  --shadow-drawer: 2px 0 8px rgba(0, 0, 0, 0.3);

  /* Dark mode overlay */
  --color-overlay: rgba(0, 0, 0, 0.7);

  /* Dark mode interactive states */
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-bg-hover: #3F3F46;
  --color-link: #60A5FA;
  --color-icon: #6B7280;

  /* Dark mode badge */
  --color-badge-bg: #FAFAFA;
  --color-badge-text: #18181B;

  /* Dark mode chevron and handle */
  --color-chevron: #48484A;
  --color-handle: rgba(255, 255, 255, 0.2);

  /* Dark mode semi-transparent separators */
  --color-separator-alpha: rgba(255, 255, 255, 0.1);

  /* Dark mode primary alpha */
  --color-primary-alpha: rgba(10, 132, 255, 0.15);

  /* Dark mode admin badge */
  --color-badge-admin-bg: #1E3A5F;
  --color-badge-admin-text: #60A5FA;

  /* Dark mode toggle */
  --color-toggle-off: #39393D;

  /* Dark mode segmented control */
  --color-segmented-bg: #39393D;
  --color-segmented-active: #636366;

  /* Dark mode action sheet item background */
  --color-action-item-bg: transparent;

  /* Dark mode editor colors */
  --editor-bg: #1E1E1E;
  --editor-header-bg: #2D2D2D;
  --editor-text: #CCCCCC;
}

/* ============================================
   DESKTOP/MOBILE ISOLATION
   ============================================ */

/* Desktop-only: Auf Mobile verstecken */
@media (max-width: 768px) {
  html body .desktop-only,
  html body .desktop-content {
    display: none;
  }
}

/* Mobile-only: Auf Desktop verstecken */
@media (min-width: 769px) {
  html body .mobile-only,
  html body .mobile-only-flex,
  html body .mobile-only-block {
    display: none;
  }
}

/* ============================================
   RESPONSIVE HELPER CLASSES
   ============================================ */

/* Mobile only - hide on desktop (default) */
.mobile-only,
.mobile-only-flex,
.mobile-only-block {
  display: none;
}

/* Bottom sheets - hidden on desktop, shown on mobile */
div.bottom-sheet-overlay,
div.bottom-sheet {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop, show mobile */
  html body .desktop-only,
  html body .desktop-only-flex,
  html body .desktop-only-inline,
  html body .desktop-only-inline-block {
    display: none;
  }

  html body .mobile-only {
    display: block;
  }

  /* Page headers - iOS Large Title style (title on top, button below) */
  html body div.mobile-page-header.mobile-only {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  html body .mobile-only-flex {
    display: flex;
  }

  html body .mobile-only-block {
    display: block;
  }
}

/* ============================================
   MOBILE BASE RESETS
   ============================================ */

@media (max-width: 768px) {

  /* White background for mobile */
  html, body {
    background-color: var(--color-bg-primary);
  }

  /* Dark mode handled by CSS Variables - no override needed */

  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden;
    position: relative;
  }

  /* Space for fixed mobile header */
  .main-container {
    padding-top: var(--header-height);
  }

  /* Ensure container respects mobile width */
  html body .container-fluid,
  html body .container-limited-width {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  /* Touch-friendly minimum tap target size */
  button,
  a,
  .btn,
  .table-action-btn,
  .icon-item {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
  }

  /* Improve touch scrolling on iOS */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* ============================================
     TYPOGRAPHY - MOBILE SCALE
     ============================================ */

  /* Reduce heading sizes for mobile */
  html body h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  html body h2 {
    font-size: 20px;
    line-height: 1.4;
  }

  html body h3 {
    font-size: 18px;
    line-height: 1.4;
  }

  html body h4 {
    font-size: 16px;
    line-height: 1.4;
  }

  html body h5 {
    font-size: 14px;
    line-height: 1.5;
  }

  html body h6 {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Body text remains at 14px - minimum readable size */
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  /* ============================================
     SPACING UTILITIES - 8PX GRID
     ============================================ */

  /* Mobile-specific spacing adjustments */
  html body .mobile-mt-1 { margin-top: var(--spacing-xs); }
  html body .mobile-mt-2 { margin-top: var(--spacing-sm); }
  html body .mobile-mt-3 { margin-top: 12px; }
  html body .mobile-mt-4 { margin-top: var(--spacing-md); }
  html body .mobile-mt-5 { margin-top: 20px; }
  html body .mobile-mt-6 { margin-top: var(--spacing-lg); }
  html body .mobile-mt-8 { margin-top: var(--spacing-xl); }

  html body .mobile-mb-1 { margin-bottom: var(--spacing-xs); }
  html body .mobile-mb-2 { margin-bottom: var(--spacing-sm); }
  html body .mobile-mb-3 { margin-bottom: 12px; }
  html body .mobile-mb-4 { margin-bottom: var(--spacing-md); }
  html body .mobile-mb-5 { margin-bottom: 20px; }
  html body .mobile-mb-6 { margin-bottom: var(--spacing-lg); }
  html body .mobile-mb-8 { margin-bottom: var(--spacing-xl); }

  html body .mobile-p-0 { padding: 0; }
  html body .mobile-p-2 { padding: var(--spacing-sm); }
  html body .mobile-p-3 { padding: 12px; }
  html body .mobile-p-4 { padding: var(--spacing-md); }

  /* ============================================
     LAYOUT UTILITIES
     ============================================ */

  /* Full width on mobile */
  html body .mobile-w-full {
    width: 100%;
  }

  /* Stack elements vertically */
  html body .mobile-flex-column {
    flex-direction: column;
  }

  /* Hide on mobile */
  html body .mobile-hidden {
    display: none;
  }

  /* Show only on mobile - already defined above */

  /* ============================================
     CARDS & CONTAINERS
     ============================================ */

  /* Reduce card padding on mobile */
  html body .card {
    margin-bottom: var(--spacing-md);
  }

  html body .card-body {
    padding: var(--spacing-md);
  }

  html body .card-header {
    padding: 12px var(--spacing-md);
    font-size: var(--font-size-md);
  }

  /* ============================================
     FORMS - MOBILE FRIENDLY
     ============================================ */

  /* Larger form controls for touch */
  html body .form-control,
  html body .form-select {
    font-size: var(--font-size-md); /* Prevents iOS zoom */
    min-height: var(--touch-target);
    padding: 12px var(--spacing-md);
  }

  html body .form-label {
    font-size: 14px;
    margin-bottom: var(--spacing-sm);
  }

  /* Stack form elements vertically */
  .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-md);
  }

  /* ============================================
     BUTTONS - TOUCH FRIENDLY
     ============================================ */

  html body .btn {
    min-height: var(--touch-target);
    padding: 12px 20px;
    font-size: 14px;
  }

  /* Full-width button in page headers - iOS style */
  html body button.btn.btn-add-site {
    min-height: 50px;
    max-height: 50px;
    height: 50px;
    min-width: auto;
    width: 100%;
    padding: 0 20px;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
  }

  html body .btn-sm {
    min-height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* ============================================
     MODALS & DROPDOWNS
     ============================================ */

  /* Full width modals on mobile */
  html body .modal-dialog {
    margin: 0;
    max-width: 100%;
  }

  html body .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }

  /* Dropdown menus full width */
  html body .dropdown-menu {
    min-width: 100%;
    border-radius: var(--radius-md);
  }

  /* ============================================
     TABLES - RESPONSIVE SCROLL
     ============================================ */

  /* Allow horizontal scroll for tables */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px; /* Ensure table doesn't collapse too much */
  }

  /* ============================================
     IMAGES & MEDIA
     ============================================ */

  img {
    max-width: 100%;
    height: auto;
  }

  /* ============================================
     UTILITY DISPLAY CLASSES
     ============================================ */

  /* Bootstrap-like mobile display utilities */
  html body .d-mobile-none {
    display: none;
  }

  html body .d-mobile-block {
    display: block;
  }

  html body .d-mobile-flex {
    display: flex;
  }

  html body .d-mobile-grid {
    display: grid;
  }

  /* ============================================
     FOOTER - HIDE ON MOBILE
     ============================================ */

  html body footer {
    display: none;
  }

  /* ============================================
     SAFE AREA SUPPORT (All iOS devices)
     ============================================ */

  /* Safe area for all browsers (notch, home indicator) */
  @supports (padding-top: env(safe-area-inset-top)) {
    header.mobile-header {
      padding-top: env(safe-area-inset-top, 0px);
      height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    }

    body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .main-container {
      padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    }
  }

  /* ============================================
     PWA STANDALONE MODE (Mobile only)
     ============================================ */

  /* Prevent pull-to-refresh in standalone mode */
  html.pwa-standalone {
    overscroll-behavior-y: contain;
  }

}

/* ============================================
   MOBILE HEADER
   ============================================ */

html body header.mobile-header {
  display: none;
}

@media (max-width: 768px) {
  html body header.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    padding: 0 var(--spacing-md);
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    z-index: var(--z-fixed);
  }

  /* Dark mode handled by CSS Variables - no override needed */

  /* Hamburger Button */
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    gap: 5px;
  }

  .hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* Dark mode handled by CSS Variables - no override needed */

  /* Hamburger button on right side (for admin pages with back button) */
  .hamburger-btn.hamburger-btn-right {
    order: 3;
  }

  /* Mobile Header Title */
  .mobile-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  /* Dark mode handled by CSS Variables - no override needed */

  /* Mobile Header Action Button (+ icon) */
  .mobile-header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: var(--transition-fast);
  }

  /* Dark mode handled by CSS Variables - no override needed */

  .mobile-header-action:active {
    background-color: var(--color-bg-secondary);
  }

  /* Mobile Logo */
  .mobile-logo-link {
    display: flex;
    align-items: center;
  }

  .mobile-logo {
    height: 28px;
    width: auto;
  }

  /* Logo Dark/Light Mode Switch */
  .mobile-logo-light {
    display: block;
  }

  .mobile-logo-dark {
    display: none;
  }

  html.dark .mobile-logo-light {
    display: none;
  }

  html.dark .mobile-logo-dark {
    display: block;
  }

  /* ============================================
     SHADCN-STYLE BUTTON GROUP
     ============================================ */

  .header-btn-group {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* Dark mode handled by CSS Variables - no override needed */

  /* Button Group Item */
  .header-btn-group-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: var(--transition-fast);
  }

  .header-btn-group-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary);
  }

  .header-btn-group-item:active {
    background-color: rgba(0, 0, 0, 0.1);
  }

  html.dark .header-btn-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  html.dark .header-btn-group-item:active {
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* Divider */
  .header-btn-group-divider {
    width: 1px;
    height: var(--spacing-md);
    background-color: var(--color-border);
  }

  /* Dark mode handled by CSS Variables - no override needed */

  /* Status Indicator */
  .status-indicator {
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    border-radius: var(--radius-full);
    background-color: var(--color-text-muted);
  }

  .status-indicator.status-online {
    background-color: var(--color-success);
  }

  .status-indicator.status-maintenance {
    background-color: var(--color-warning);
  }

  .status-indicator.status-offline {
    background-color: var(--color-danger);
  }

  /* ============================================
     BOTTOM SHEET BASE STYLES
     ============================================ */

  /* Default: Hidden on desktop */
  div.bottom-sheet-overlay,
  div.bottom-sheet {
    display: block;
  }

  /* Overlay */
  div.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-sheet);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
  }

  div.bottom-sheet-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Sheet Container */
  div.bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-sheet);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: calc(var(--z-sheet) + 1);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--shadow-sheet);
    visibility: hidden;
  }

  div.bottom-sheet.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
  }

  /* Handle */
  div.bottom-sheet-handle {
    width: 36px;
    height: 5px;
    background-color: var(--color-handle);
    border-radius: 2.5px;
    margin: var(--spacing-sm) auto 0;
  }

  /* Header */
  div.bottom-sheet-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 20px;
    border-bottom: 0.5px solid var(--color-separator-alpha);
  }

  div.bottom-sheet-header h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
  }

  /* Close Button */
  button.bottom-sheet-close {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    min-height: auto;
    min-width: auto;
    -webkit-tap-highlight-color: transparent;
  }

  button.bottom-sheet-close:active {
    opacity: 0.5;
  }

  /* Content */
  div.bottom-sheet-content {
    padding: 0;
    overflow-y: auto;
    max-height: calc(85vh - 70px);
  }

  /* ============================================
     SEGMENTED CONTROL BASE STYLES
     iOS-style segmented control
     ============================================ */

  .segmented-control {
    display: flex;
    padding: 2px;
    background-color: var(--color-segmented-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .segmented-control-item {
    flex: 1;
    padding: 7px 12px;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .segmented-control-item.active {
    background-color: var(--color-segmented-active);
    box-shadow: var(--shadow-sm);
  }

  .segmented-control-item:active:not(.active) {
    background-color: var(--color-hover);
  }

  /* ============================================
     TOAST NOTIFICATIONS
     iOS-style feedback messages
     ============================================ */

  .mobile-toast-container {
    position: fixed;
    top: calc(var(--header-height) + var(--spacing-md));
    left: var(--spacing-md);
    right: var(--spacing-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
  }

  .mobile-toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px var(--spacing-md);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    pointer-events: auto;
  }

  .mobile-toast.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
  }

  .mobile-toast.toast-success .mobile-toast-icon {
    color: var(--color-success);
  }

  .mobile-toast.toast-error .mobile-toast-icon {
    color: var(--color-danger);
  }

  .mobile-toast.toast-warning .mobile-toast-icon {
    color: var(--color-warning);
  }

  .mobile-toast.toast-info .mobile-toast-icon {
    color: var(--color-primary);
  }

  /* ============================================
     LOADING OVERLAY
     ============================================ */

  .mobile-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    z-index: calc(var(--z-toast) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
  }

  .mobile-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  .mobile-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* ============================================
     FORM INPUT ERROR STATES
     ============================================ */

  .mobile-input-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15) !important;
  }

  .mobile-form-error {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    margin-top: var(--spacing-xs);
  }

  /* Loading state for forms */
  body.mobile-form-loading .mobile-btn-primary,
  body.mobile-form-loading .mobile-form-save {
    opacity: 0.6;
    pointer-events: none;
  }

  /* ============================================
     CONFIRM DIALOG (iOS Action Sheet Style)
     ============================================ */

  .mobile-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
  }

  .mobile-confirm-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  .mobile-confirm-sheet {
    position: fixed;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    bottom: var(--spacing-sm);
    z-index: calc(var(--z-modal) + 1);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s;
    visibility: hidden;
  }

  .mobile-confirm-overlay.visible + .mobile-confirm-sheet,
  .mobile-confirm-sheet.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
  }

  .mobile-confirm-content {
    background-color: var(--color-bg-sheet);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
  }

  .mobile-confirm-message {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 0.5px solid var(--color-separator);
  }

  .mobile-confirm-title {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
  }

  .mobile-confirm-btn {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-confirm-btn:not(:last-child) {
    border-bottom: 0.5px solid var(--color-separator);
  }

  .mobile-confirm-btn:active {
    background-color: var(--color-hover);
  }

  .mobile-confirm-btn-destructive {
    color: var(--color-danger);
  }

  .mobile-confirm-btn-default {
    color: var(--color-primary);
  }

  .mobile-confirm-cancel {
    background-color: var(--color-bg-sheet);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-confirm-cancel:active {
    background-color: var(--color-hover);
  }
}

/* ============================================
   UTILITY CLASSES - REPLACE INLINE STYLES
   ============================================ */

@media (max-width: 768px) {
  /* Cursor */
  .cursor-default { cursor: default; }

  /* Border utilities */
  .border-top-none { border-top: none !important; }

  /* Padding utilities */
  .pt-0 { padding-top: 0 !important; }
  .pt-4 { padding-top: 4px !important; }
  .pt-8 { padding-top: 8px !important; }
  .pt-12 { padding-top: 12px !important; }
  .pt-16 { padding-top: 16px !important; }
  .p-12 { padding: 12px !important; }
  .p-16 { padding: 16px !important; }
  .px-16 { padding-left: 16px !important; padding-right: 16px !important; }
  .py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }

  /* Margin utilities */
  .mt-0 { margin-top: 0 !important; }
  .mt-8 { margin-top: 8px !important; }
  .mt-16 { margin-top: 16px !important; }
  .mt-24 { margin-top: 24px !important; }
  .mb-16 { margin-bottom: 16px !important; }
  .m-0 { margin: 0 !important; }

  /* Font family */
  .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }

  /* Font size */
  .text-xs { font-size: 11px !important; }
  .text-sm { font-size: 13px !important; }
  .text-base { font-size: 15px !important; }

  /* Font weight */
  .font-medium { font-weight: 500 !important; }
  .font-semibold { font-weight: 600 !important; }

  /* Text color */
  .text-success { color: var(--color-success) !important; }
  .text-danger { color: var(--color-danger) !important; }
  .text-muted { color: var(--color-text-muted) !important; }
  .text-secondary { color: var(--color-text-secondary) !important; }

  /* Flex utilities */
  .flex { display: flex !important; }
  .flex-col { flex-direction: column !important; }
  .items-center { align-items: center !important; }
  .items-stretch { align-items: stretch !important; }
  .justify-between { justify-content: space-between !important; }
  .gap-8 { gap: 8px !important; }
  .gap-12 { gap: 12px !important; }
  .gap-16 { gap: 16px !important; }

  /* Width */
  .w-full { width: 100% !important; }

  /* Line height */
  .leading-relaxed { line-height: 1.5 !important; }

  /* Word break */
  .break-all { word-break: break-all !important; }

  /* Display */
  .hidden { display: none !important; }

  /* Disabled state */
  .disabled-input {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-muted) !important;
  }

  /* Settings card modifiers */
  .settings-header.static { cursor: default; }
  .settings-content.no-border { border-top: none; }

  /* Text decoration (for links) */
  .no-underline { text-decoration: none !important; }

  /* Border utilities */
  .border-none { border: none !important; }

  /* Bottom Sheet form input reset */
  .sheet-input-row {
    padding: 0 !important;
    border: none !important;
  }
  .sheet-input-row.mb-16 {
    margin-bottom: 16px !important;
  }

  /* Text alignment */
  .text-center { text-align: center !important; }

  /* Gap utilities */
  .gap-4 { gap: 4px !important; }

  /* Colors - danger/muted */
  .text-red { color: #FF3B30 !important; }
  .text-gray { color: #8E8E93 !important; }

  /* Cursor */
  .cursor-pointer { cursor: pointer !important; }

  /* Flex shrink */
  .flex-1 { flex: 1 !important; }

  /* Font utilities */
  .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }

  /* Text size utilities */
  .text-sm { font-size: 13px !important; }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   Respects user's motion preferences for accessibility
   ============================================ */

@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;
  }

  /* Keep essential state changes instant but visible */
  .bottom-sheet,
  .mobile-confirm-sheet,
  .mobile-action-sheet,
  .mobile-nav-drawer,
  .bottom-sheet-overlay,
  .mobile-confirm-overlay,
  .mobile-action-sheet-overlay,
  .mobile-nav-overlay {
    transition: none !important;
  }
}