/* ===========================================
   6. SETTINGS COMPONENTS (Shared Styles)
   =========================================== */

/* ===== GLASSMORPHISM VARIABLES ===== */
:root {
  --settings-glass-bg: rgba(255, 255, 255, 0.04);
  --settings-glass-bg-hover: rgba(255, 255, 255, 0.08);
  --settings-glass-border: rgba(255, 255, 255, 0.1);
  --settings-blur: blur(10px);
  --settings-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --settings-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --settings-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* ===== SETTINGS SECTION ===== */
.settings-section {
  margin-bottom: var(--space-md);
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SETTINGS CARD (Glassmorphism) ===== */
.settings-card {
  background: var(--settings-glass-bg);
  -webkit-backdrop-filter: var(--settings-blur);
  backdrop-filter: var(--settings-blur);
  border: 1px solid var(--settings-glass-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--settings-shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-card:hover {
  background: var(--settings-glass-bg-hover);
  box-shadow: var(--settings-shadow-md);
  transform: translateY(-2px);
}

.settings-card:last-child {
  margin-bottom: 0;
}

/* Card with accent border */
.settings-card-accent {
  border-left: 4px solid var(--primary);
}

.settings-card-success {
  border-left: 4px solid var(--success);
}

.settings-card-warning {
  border-left: 4px solid var(--warning);
}

.settings-card-danger {
  border-left: 4px solid var(--danger);
}

/* ===== SETTINGS SECTION HEADER ===== */
.settings-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.settings-section-header:not(.collapsible) {
  cursor: default;
}

.settings-section-icon {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.settings-section-header:hover .settings-section-icon {
  transform: scale(1.1);
}

.settings-section-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  flex: 1;
}

.settings-section-chevron {
  font-size: 12px;
  color: var(--text-light);
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.settings-section-header.open .settings-section-chevron {
  transform: rotate(90deg);
}

/* ===== SETTINGS ROW ===== */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease;
  border-radius: var(--border-radius-sm);
  margin: 0 calc(var(--space-sm) * -1);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.settings-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.settings-row:last-child {
  border-bottom: none;
}

/* Settings row with full width control */
.settings-row-full {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

/* ===== SETTINGS LABEL ===== */
.settings-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.settings-label-text {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-label-icon {
  font-size: 16px;
  line-height: 1;
}

.settings-label-hint {
  font-size: var(--text-xs);
  color: var(--text-light);
  opacity: 0.65;
  line-height: 1.3;
}

/* ===== SETTINGS CONTROL ===== */
.settings-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Input within settings */
.settings-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 8px 12px;
  color: var(--text);
  font-size: var(--text-sm);
  transition: all 0.2s ease;
  min-width: 120px;
}

.settings-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Select within settings */
.settings-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 8px 12px;
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.settings-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Toggle/Switch */
.settings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-light);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-toggle.checked {
  background: var(--primary);
  border-color: var(--primary);
}

.settings-toggle.checked::after {
  transform: translateX(20px);
  background: #fff;
}

/* Checkbox */
.settings-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ===== SETTINGS BUTTONS ===== */
.settings-btn {
  padding: 8px 16px;
  border-radius: var(--border-radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
}

.settings-btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.settings-btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.settings-btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.settings-btn-outline:hover {
  background: var(--settings-glass-bg);
  border-color: var(--border-light);
}

.settings-btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.settings-btn-danger:hover {
  background: var(--danger-light);
}

.settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ===== SETTINGS GRID ===== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (max-width: 720px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== SETTINGS GROUP ===== */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== COLLAPSIBLE SECTION ===== */
.settings-collapsible {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-collapsible-content {
  padding-top: var(--space-md);
}

/* ===== STATUS INDICATORS ===== */
.settings-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-status-active {
  background: rgba(0, 184, 148, 0.2);
  color: var(--success);
  border: 1px solid rgba(0, 184, 148, 0.4);
}

.settings-status-inactive {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-light);
  border: 1px dashed var(--border-light);
}

.settings-status-error {
  background: rgba(255, 118, 117, 0.2);
  color: var(--danger);
  border: 1px solid rgba(255, 118, 117, 0.4);
}

/* ===== DIVIDERS ===== */
.settings-divider {
  height: 1px;
  background: var(--border-light);
  border: none;
  margin: var(--space-md) 0;
}

.settings-divider-thick {
  height: 2px;
  background: var(--border);
  margin: var(--space-lg) 0;
}

/* ===== HELP TEXT ===== */
.settings-help {
  font-size: var(--text-xs);
  color: var(--text-light);
  opacity: 0.7;
  line-height: 1.4;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--primary);
}

.settings-help-warning {
  border-left-color: var(--warning);
  background: var(--warning-light);
}

.settings-help-danger {
  border-left-color: var(--danger);
  background: var(--danger-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 720px) {
  .settings-card {
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .settings-control {
    width: 100%;
  }

  .settings-btn {
    width: 100%;
  }

  .settings-section-title {
    font-size: 14px;
  }
}

/* ===== MOBILE RESPONSIVENESS ===== */

/* Header Mobile Fixes */
@media (max-width: 375px) {
  .app-header {
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .app-header a[href="#spin"] > div:last-child {
    display: none !important; /* Hide brand text on very small screens */
  }

  .app-header button[title*="Sync"],
  .app-header button[title*="Search"] {
    display: none !important; /* Hide less important buttons */
  }

  /* Make hamburger menu the primary navigation */
  .app-header .settings-btn {
    min-width: 32px !important;
    padding: 4px !important;
  }
}

/* Full-Screen Modals on Mobile */
@media (max-width: 768px) {
  /* All modal content containers */
  .modal-content,
  .modal-dialog,
  .task-modal,
  .contact-modal,
  [class*="Modal"] > div:first-child,
  .simple-modal > div:first-child {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Modal backgrounds/overlays */
  .modal-backdrop,
  .modal-overlay {
    background: var(--card) !important;
  }

  /* Ensure proper scrolling on mobile modals */
  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 120px);
  }
}

/* Touch Target Optimization - All Devices */
button,
a,
input[type="checkbox"],
input[type="radio"],
.task-check,
.settings-toggle,
.clickable {
  min-width: 44px;
  min-height: 44px;
  position: relative;
}

/* Ensure interactive elements have proper touch targets on mobile */
@media (max-width: 768px) {
  button,
  a.button,
  .btn {
    min-height: 48px;
    padding: 12px 16px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Task checkboxes get extra touch area */
  .task-check {
    width: 24px;
    height: 24px;
    min-width: 48px;
    min-height: 48px;
  }
}

/* ===== PULL-TO-REFRESH ANIMATION ===== */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Smooth pull-to-refresh for touch devices */
@media (max-width: 768px) {
  .tasks-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {

  .settings-section,
  .settings-card,
  .settings-row,
  .settings-toggle,
  .settings-btn,
  .settings-collapsible {
    animation: none !important;
    transition: none !important;
  }

  .settings-card:hover {
    transform: none;
  }

  .settings-btn:hover {
    transform: none !important;
  }

  /* Disable pull-to-refresh animation for reduced motion */
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
}

/* Focus visible styles for keyboard navigation */
.settings-btn:focus-visible,
.settings-toggle:focus-visible,
.settings-input:focus-visible,
.settings-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== UTILITY CLASSES ===== */
.settings-spacing-sm {
  margin-bottom: var(--space-sm);
}

.settings-spacing-md {
  margin-bottom: var(--space-md);
}

.settings-spacing-lg {
  margin-bottom: var(--space-lg);
}

.settings-text-muted {
  color: var(--text-light);
  opacity: 0.7;
}

.settings-text-small {
  font-size: var(--text-xs);
}

.settings-text-large {
  font-size: var(--text-lg);
  font-weight: 700;
}

/* Full width utility */
.settings-full-width {
  width: 100%;
}

/* Flex utilities */
.settings-flex {
  display: flex;
}

.settings-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-gap-sm {
  gap: var(--space-sm);
}

.settings-gap-md {
  gap: var(--space-md);
}


/* ===== SEARCH HIGHLIGHT ===== */
.tt-settings-search-hit {
  animation: settingsHighlight 2s ease-out forwards;
  position: relative;
  z-index: 10;
}

@keyframes settingsHighlight {
  0% {
    background: rgba(255, 107, 53, 0.4);
    box-shadow: 0 0 0 2px var(--primary);
  }

  30% {
    background: rgba(255, 107, 53, 0.2);
    box-shadow: 0 0 0 2px var(--primary);
  }

  100% {
    background: rgba(255, 107, 53, 0);
    box-shadow: 0 0 0 0 transparent;
  }
}