/* Settings Page - Mobile Responsive Styles */

/* Desktop: Show tables and forms normally */
.settings-mobile-container {
  display: none;
}

.settings-desktop-container {
  display: block;
}

/* Mobile: Hide desktop, show mobile UI */
@media (width <= 768px) {
  .settings-desktop-container {
    display: none !important;
  }

  .settings-mobile-container {
    display: block;
  }

  .container-fluid {
    padding: 0 !important;
  }

  /* Mobile Section Cards */
  .mobile-settings-section {
    background: var(--surface-1);
    border-radius: 0;
    margin-bottom: var(--space-2);
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-settings-section-header {
    padding: var(--space-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-settings-section-header:active {
    background: var(--surface-3);
  }

  .mobile-settings-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .mobile-settings-section-title i {
    font-size: var(--font-size-md);
    opacity: 0.7;
  }

  .mobile-settings-section-chevron {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    transition: transform 0.3s ease;
  }

  .mobile-settings-section-header.expanded .mobile-settings-section-chevron {
    transform: rotate(180deg);
  }

  .mobile-settings-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mobile-settings-section-content.expanded {
    max-height: 5000px;
  }

  .mobile-settings-section-body {
    padding: var(--space-4);
  }

  /* Global Controls Section */
  .mobile-global-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .mobile-control-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-md);
  }

  .mobile-control-label {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
  }

  /* iOS-style toggle switch */
  .mobile-switch {
    width: 51px;
    height: 31px;
    appearance: none;
    background: var(--surface-4);
    border-radius: 15.5px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .mobile-switch::before {
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  }

  .mobile-switch:checked {
    background: var(--success);
  }

  .mobile-switch:checked::before {
    transform: translateX(20px);
  }

  /* Action Button Grid */
  .mobile-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .mobile-action-btn {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-0);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }

  .mobile-action-btn:active {
    transform: scale(0.97);
    background: var(--surface-2);
  }

  .mobile-action-btn i {
    font-size: var(--font-size-xl);
  }

  .mobile-action-btn.primary i {
    color: var(--primary);
  }

  .mobile-action-btn.success i {
    color: var(--success);
  }

  .mobile-action-btn.warning i {
    color: var(--warning);
  }

  .mobile-action-btn.danger i {
    color: var(--danger);
  }

  .mobile-action-btn.info i {
    color: var(--info);
  }

  /* Task Cards */
  .mobile-task-card {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--border-color);
  }

  .mobile-task-card-header {
    padding: var(--space-3);
    background: var(--surface-3);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-task-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
  }

  .mobile-task-id {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-family: monospace;
  }

  .mobile-task-badges {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
  }

  .mobile-task-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
  }

  .mobile-task-badge.manual {
    background: rgb(var(--info-rgb), 0.15);
    color: var(--info);
  }

  .mobile-task-badge.status {
    background: rgb(var(--primary-rgb), 0.15);
    color: var(--primary);
  }

  .mobile-task-badge.status.running {
    background: rgb(var(--primary-rgb), 0.15);
    color: var(--primary);
  }

  .mobile-task-badge.status.completed {
    background: rgb(var(--success-rgb), 0.15);
    color: var(--success);
  }

  .mobile-task-badge.status.failed {
    background: rgb(var(--danger-rgb), 0.15);
    color: var(--danger);
  }

  .mobile-task-badge.status.paused {
    background: rgb(var(--warning-rgb), 0.15);
    color: var(--warning);
  }

  .mobile-task-card-body {
    padding: var(--space-3);
  }

  .mobile-task-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .mobile-task-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .mobile-task-info-item.full-width {
    grid-column: 1 / -1;
  }

  .mobile-task-info-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-weight-medium);
  }

  .mobile-task-info-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
  }

  .mobile-task-info-value select {
    width: 100%;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
  }

  .mobile-task-actions {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
  }

  .mobile-task-actions .btn {
    flex: 1;
    font-size: var(--font-size-xs);
    padding: var(--space-2);
    white-space: nowrap;
  }

  /* Task History Cards */
  .mobile-history-card {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border: 1px solid var(--border-color);
  }

  .mobile-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
  }

  .mobile-history-task-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
  }

  .mobile-history-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
  }

  .mobile-history-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .mobile-history-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Manual Fetch Form - Mobile */
  .mobile-form-group {
    margin-bottom: var(--space-3);
  }

  .mobile-form-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
  }

  .mobile-form-input {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-md);
  }

  .mobile-form-select {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(255,255,255,0.6)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
  }

  body.light-mode .mobile-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,0.6)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  }

  .mobile-form-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-md);
  }

  .mobile-form-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .mobile-form-checkbox-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
  }

  .mobile-form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
  }

  .mobile-form-status {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    text-align: center;
  }

  .mobile-form-status.success {
    background: rgb(var(--success-rgb), 0.15);
    color: var(--success);
  }

  .mobile-form-status.error {
    background: rgb(var(--danger-rgb), 0.15);
    color: var(--danger);
  }

  .mobile-form-status.info {
    background: rgb(var(--info-rgb), 0.15);
    color: var(--info);
  }

  /* Submit Button */
  .mobile-submit-btn {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    border: none;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-submit-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .mobile-submit-btn.danger {
    background: var(--danger);
  }

  .mobile-submit-btn.success {
    background: var(--success);
  }

  .mobile-submit-btn.warning {
    background: var(--warning);
  }

  .mobile-submit-btn i {
    margin-right: var(--space-2);
  }

  /* Empty State */
  .mobile-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
  }

  .mobile-empty-state i {
    font-size: 4rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
  }

  .mobile-empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
  }

  .mobile-empty-state-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    max-width: 300px;
  }

  /* Loading State */
  .mobile-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    gap: var(--space-3);
  }

  .mobile-loading-state .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
  }

  /* Pagination */
  .mobile-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .mobile-pagination-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .mobile-pagination-btn:active:not(:disabled) {
    transform: scale(0.97);
    background: var(--surface-3);
  }

  .mobile-pagination-info {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
  }

  /* Save Configuration FAB */
  .mobile-save-fab {
    position: fixed;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
    right: var(--space-4);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: var(--font-size-xl);
    z-index: var(--z-sticky);
  }

  .mobile-save-fab:active {
    transform: scale(0.95);
  }

  .mobile-save-fab.saved {
    background: var(--primary);
  }

  /* Remap trips form specifics */
  .mobile-date-method-tabs {
    display: flex;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .mobile-date-method-tab {
    flex: 1;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-date-method-tab.active {
    background: var(--surface-1);
    color: var(--text-primary);
  }

  /* Spinner in button */
  .mobile-action-btn .spinner-border-sm,
  .mobile-submit-btn .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    margin-right: var(--space-2);
  }

  /* Responsive adjustments */
  @media (width <= 480px) {
    .mobile-action-grid {
      grid-template-columns: 1fr;
    }

    .mobile-task-info-grid {
      grid-template-columns: 1fr;
    }

    .mobile-task-actions {
      flex-direction: column;
    }

    .mobile-task-actions .btn {
      width: 100%;
    }
  }
}