/* ===========================================
   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);
}

/* ===== SETTINGS LAYOUT ROOT - Full Height Fix ===== */

/* Hide footer when settings is active - settings has its own layout */
/* Class-based approach (better browser support) */
.settings-page-active .tt-footer,
.settings-page-active > footer,
body.settings-active .tt-footer,
body.settings-active footer.tt-footer {
  display: none !important;
}

/* :has() approach for modern browsers */
.tt-main-container:has(.settings-layout-root) .tt-footer,
.tt-main-container:has(.settings-layout-root) > footer {
  display: none !important;
}

/* Remove padding from tt-content when settings is active */
/* Class-based approach */
.settings-page-active .tt-content,
body.settings-active .tt-content {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* :has() approach */
.tt-content:has(.settings-layout-root) {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Settings layout takes full available space */
/* Use 100% of parent container height - parent already accounts for header */
.settings-layout-root {
  height: 100% !important;
  min-height: 100% !important;
}

/* When settings is rendered inside tt-content, fill available space */
.tt-content > .animate-fade-in:has(.settings-layout-root),
.tt-content > div:has(.settings-layout-root) {
  height: 100% !important;
}

.tt-content .settings-layout-root {
  height: 100% !important;
  min-height: 100% !important;
}

/* Ensure settings content area fills available height */
.settings-layout-root > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Settings content scrollable area */
.settings-layout-root > div:last-child > div:last-child {
  flex: 1;
  overflow-y: auto;
  min-height: 400px;
}

/* Settings always uses 100% of available parent height */
/* The parent containers (.tt-content, .tt-main-container) handle the viewport calculations */


/* ===== 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;
  }
}

/* ===== SETTINGS LAYOUT RESPONSIVE FIXES ===== */

/* Ensure settings content area has proper padding on mobile */
@media (max-width: 768px) {
  /* Settings content area */
  .settings-sidebar-desktop {
    display: none !important;
  }

  .settings-sidebar-mobile {
    display: flex !important;
  }

  .settings-mobile-menu-btn {
    display: flex !important;
  }

  /* Reduce content padding on mobile */
  [style*="padding: 24px"] {
    padding: 16px !important;
  }

  /* Settings form controls - full width on mobile */
  .settings-select,
  .settings-input,
  .setting-select {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Settings row stacking on mobile */
  .settings-row,
  .setting-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .settings-control,
  .setting-control {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  /* Toggle stays at reasonable size */
  .settings-toggle,
  .setting-toggle {
    flex-shrink: 0 !important;
  }

  /* Grid layouts stack better on mobile */
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* Header breadcrumb adjustments */
  [style*="padding: 16px 24px"] {
    padding: 12px 16px !important;
  }

  /* Section title adjustments */
  h2[style*="font-size: 18px"] {
    font-size: 16px !important;
  }
}

/* Very small screens */
@media (max-width: 375px) {
  /* Even smaller padding */
  [style*="padding: 16px"] {
    padding: 12px !important;
  }

  /* Smaller section titles */
  h2[style*="font-size: 16px"] {
    font-size: 14px !important;
  }

  /* Tabs scroll nicely */
  .appearance-tabs,
  .mobile-tabs {
    gap: 6px !important;
  }

  .appearance-tab,
  .mobile-tab {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* ===== iPhone SE (375px) Settings Navigation Fix ===== */

  /* Make mobile sidebar narrower to fit better */
  .settings-sidebar-mobile {
    width: 260px !important;
    left: -260px !important;
  }

  .settings-sidebar-mobile[style*="left: 0"] {
    left: 0 !important;
  }

  /* Reduce padding in sidebar items */
  .settings-sidebar-mobile .settings-nav-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* Smaller group labels */
  .settings-sidebar-mobile .settings-nav-group-label {
    padding: 8px 12px 4px !important;
    font-size: 10px !important;
  }

  /* Content header - more compact */
  .settings-mobile-menu-btn {
    padding: 6px !important;
    margin-right: 2px !important;
  }

  /* Reduce content area padding more aggressively */
  [style*="padding: 12px"] {
    padding: 8px !important;
  }

  /* Card padding reduction */
  .settings-card,
  [class*="settings-card"] {
    padding: 12px !important;
  }

  /* Ensure buttons don't overflow */
  .settings-btn,
  button[class*="settings"] {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   MOBILE HORIZONTAL TABS FOR SETTINGS (iPhone SE / 480px and below)
   ========================================================================== */

/* Mobile tabs wrapper - hidden by default, shown on small screens */
.settings-mobile-tabs-wrapper {
  display: none !important;
}

/* Mobile horizontal scrolling tabs container */
.settings-mobile-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.settings-mobile-tabs::-webkit-scrollbar {
  display: none;
}

/* Individual mobile tab button */
.settings-mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  min-width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 9px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-mobile-tab:hover {
  background: rgba(255, 255, 255, 0.05);
}

.settings-mobile-tab.active,
.settings-mobile-tab[data-active="true"] {
  background: rgba(255, 107, 53, 0.15);
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.settings-mobile-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ===== MOBILE (480px and below): Show horizontal tabs, hide sidebar ===== */
@media (max-width: 480px) {
  /* Show mobile tabs wrapper */
  .settings-mobile-tabs-wrapper {
    display: block !important;
    flex-shrink: 0;
  }

  /* Hide sidebar elements on mobile */
  .settings-sidebar-desktop,
  .settings-sidebar-mobile,
  .settings-tablet-menu-btn {
    display: none !important;
  }

  /* Compact content header */
  .settings-content-header {
    padding: 10px 12px !important;
  }

  /* Hide description on mobile - save space */
  .settings-section-desc {
    display: none !important;
  }

  /* Smaller title */
  .settings-section-title {
    font-size: 14px !important;
  }

  /* Reduce content padding */
  .settings-content-area {
    padding: 12px !important;
  }
}

/* ===== iPhone SE / Very small screens (375px and below) ===== */
@media (max-width: 375px) {
  .settings-mobile-tabs-wrapper {
    display: block !important;
  }

  .settings-mobile-tab {
    padding: 5px 8px !important;
    min-width: 48px !important;
    height: 48px !important;
    font-size: 8px !important;
  }

  .settings-mobile-tab svg {
    width: 14px !important;
    height: 14px !important;
  }

  .settings-content-header {
    padding: 8px 10px !important;
  }

  .settings-section-title {
    font-size: 13px !important;
  }

  .settings-content-area {
    padding: 10px !important;
  }
}

/* Admin page: disable rise on .settings-section when inside admin */
.tt-content > .admin-content-instant .settings-section {
  animation: none !important;
}