/* Settings V3 - Modern, Mobile-First Design */
/* Consolidated CSS for long-term maintainability */

/* ============================================
   CSS Variables - Easy theming and consistency
   ============================================ */
:root {
   --primary-color: #4299e1;
   --primary-hover: #3182ce;
   --primary-dark: #2b6cb0;
   --success-color: #48bb78;
   --success-hover: #38a169;
   --warning-color: #ed8936;
   --error-color: #f56565;
   --purple-color: #6f3abc;
   
   --text-primary: #2d3748;
   --text-secondary: #718096;
   --text-muted: #a0aec0;
   
   --bg-primary: #ffffff;
   --bg-secondary: #f5f7fa;
   --bg-muted: #f7fafc;
   --bg-info: #f7fafc;
   
   --border-color: #e2e8f0;
   --border-light: #edf2f7;
   
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
   
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
   --spacing-lg: 16px;
   --spacing-xl: 20px;
   --spacing-2xl: 24px;
   --spacing-3xl: 32px;
   --spacing-4xl: 40px;
   
   /* Touch-friendly sizes for mobile */
   --touch-target-min: 44px;
}

/* ============================================
   Base Styles - Mobile First
   ============================================ */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   background: var(--bg-secondary);
   color: var(--text-primary);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Container - Responsive padding
   ============================================ */
.container {
   max-width: 800px;
   margin: 0 auto;
   padding: var(--spacing-lg) var(--spacing-md);
}

/* Larger screens get more padding */
@media (min-width: 768px) {
   .container {
      padding: var(--spacing-4xl) var(--spacing-xl);
   }
}

/* ============================================
   Header Section
   ============================================ */
.header {
   margin-bottom: var(--spacing-3xl);
}

.header h1 {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: var(--spacing-sm);
   line-height: 1.2;
}

.header p {
   color: var(--text-secondary);
   font-size: 14px;
   line-height: 1.5;
}

/* Tablet and up */
@media (min-width: 768px) {
   .header h1 {
      font-size: 32px;
   }
   
   .header p {
      font-size: 16px;
   }
}

/* ============================================
   Settings Cards
   ============================================ */
.settings-card {
   background: var(--bg-primary);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   padding: var(--spacing-xl);
   margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
   .settings-card {
      padding: var(--spacing-3xl);
      margin-bottom: var(--spacing-2xl);
   }
}

.section-title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: var(--spacing-2xl);
   color: var(--purple-color);
}

@media (min-width: 768px) {
   .section-title {
      font-size: 20px;
   }
}

/* ============================================
   Setting Items - Stack on mobile
   ============================================ */
.setting-item {
   padding: var(--spacing-lg) 0;
   border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
   border-bottom: none;
}

.setting-header {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-sm);
}

/* Side by side on tablet+ */
@media (min-width: 640px) {
   .setting-header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }
}

.setting-info {
   flex: 1;
}

.setting-label {
   font-size: 15px;
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: var(--spacing-xs);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
   line-height: 1.4;
}

@media (min-width: 768px) {
   .setting-label {
      font-size: 16px;
   }
}

.setting-description {
   font-size: 13px;
   color: var(--text-secondary);
   line-height: 1.5;
}

@media (min-width: 768px) {
   .setting-description {
      font-size: 14px;
   }
}

/* ============================================
   Tooltip - Mobile friendly
   ============================================ */
.tooltip {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   min-height: 20px;
   width: 20px;
   height: 20px;
   background: #cbd5e0;
   color: #fff;
   border-radius: 50%;
   font-size: 12px;
   font-weight: 600;
   cursor: help;
   flex-shrink: 0;
}

/* Desktop hover tooltip */
@media (min-width: 768px) {
   .tooltip {
      width: 16px;
      height: 16px;
      font-size: 11px;
   }
   
   .tooltip:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 24px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--text-primary);
      color: #fff;
      padding: var(--spacing-sm) var(--spacing-md);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 400;
      white-space: nowrap;
      z-index: 1000;
      box-shadow: var(--shadow-md);
      max-width: 250px;
      white-space: normal;
   }

   .tooltip:hover::before {
      content: '';
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-right-color: var(--text-primary);
      z-index: 1000;
   }
}

/* Mobile: tap to show tooltip in alert */
@media (max-width: 767px) {
   .tooltip:active {
      background: var(--primary-color);
   }
}

/* ============================================
   Toggle Switch - Touch friendly
   ============================================ */
.toggle-switch {
   position: relative;
   display: inline-block;
   width: 52px;
   height: 28px;
   flex-shrink: 0;
}

/* Larger on mobile for better touch */
@media (max-width: 767px) {
   .toggle-switch {
      width: 56px;
      height: 32px;
   }
}

.toggle-switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.toggle-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #cbd5e0;
   transition: 0.3s;
   border-radius: 28px;
}

.toggle-slider:before {
   position: absolute;
   content: "";
   height: 22px;
   width: 22px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: 0.3s;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
   .toggle-slider:before {
      height: 26px;
      width: 26px;
   }
}

input:checked + .toggle-slider {
   background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
   transform: translateX(24px);
}

@media (max-width: 767px) {
   input:checked + .toggle-slider:before {
      transform: translateX(24px);
   }
}

input:disabled + .toggle-slider {
   opacity: 0.5;
   cursor: not-allowed;
}

/* Active state for better touch feedback */
.toggle-switch:active .toggle-slider {
   box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.2);
}

/* ============================================
   Expandable Details
   ============================================ */
.expandable-details {
   margin-top: var(--spacing-lg);
   display: none;
}

.expandable-details.visible {
   display: block;
   animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.details-toggle {
   background: none;
   border: none;
   color: var(--primary-color);
   font-size: 14px;
   cursor: pointer;
   padding: var(--spacing-sm) 0;
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   margin-top: var(--spacing-sm);
   min-height: var(--touch-target-min);
}

.details-toggle:hover {
   color: var(--primary-hover);
}

.details-toggle:active {
   color: var(--primary-dark);
}

.details-content {
   background: var(--bg-info);
   border-radius: var(--radius-md);
   padding: var(--spacing-lg);
   margin-top: var(--spacing-md);
   font-size: 14px;
   color: #4a5568;
   line-height: 1.6;
}

.details-content ol {
   margin-left: 20px;
   margin-top: var(--spacing-sm);
}

.details-content li {
   margin-bottom: var(--spacing-sm);
}

.details-content code {
   background: rgba(0, 0, 0, 0.05);
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 13px;
   word-break: break-all;
}

/* ============================================
   Text Inputs - Mobile optimized
   ============================================ */
.text-input-group {
   margin-top: var(--spacing-lg);
   transition: all 0.3s ease;
}

.text-input-wrapper {
   position: relative;
}

textarea.text-input {
   font-family: inherit;
}

.text-input {
   width: 100%;
   padding: var(--spacing-md);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   font-size: 15px;
   transition: border-color 0.2s;
   background: var(--bg-primary);
   color: var(--text-primary);
}

/* Larger text on mobile for better readability */
@media (max-width: 767px) {
   .text-input {
      font-size: 16px; /* Prevents zoom on iOS */
      padding: var(--spacing-md);
   }
}

.text-input:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.char-counter {
   font-size: 12px;
   color: var(--text-muted);
   margin-top: var(--spacing-xs);
   text-align: right;
}

.char-counter.warning {
   color: var(--warning-color);
}

.char-counter.error {
   color: var(--error-color);
}

/* ============================================
   Buttons - Touch friendly
   ============================================ */
.button-group {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   margin-top: var(--spacing-3xl);
}

@media (min-width: 640px) {
   .button-group {
      flex-direction: row;
   }
}

/* ============================================
   Loading Spinner
   ============================================ */
.spinner {
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   border-top: 2px solid white;
   width: 14px;
   height: 14px;
   animation: spin 0.6s linear infinite;
   display: none;
}

.btn.loading .spinner {
   display: block;
}

.btn.loading .btn-text {
   display: none;
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

/* ============================================
   Toast Notification System - Modern & Visible
   ============================================ */
.toast-container {
   position: fixed;
   top: var(--spacing-lg);
   right: var(--spacing-lg);
   z-index: 10000;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   max-width: 400px;
   width: calc(100% - var(--spacing-2xl));
   pointer-events: none;
}

@media (min-width: 640px) {
   .toast-container {
      width: auto;
      min-width: 320px;
   }
}

.toast {
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   padding: var(--spacing-md) var(--spacing-lg);
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-md);
   pointer-events: auto;
   animation: toastSlideIn 0.3s ease-out;
   border-left: 4px solid;
   position: relative;
   overflow: hidden;
}

@keyframes toastSlideIn {
   from {
      transform: translateX(100%);
      opacity: 0;
   }
   to {
      transform: translateX(0);
      opacity: 1;
   }
}

.toast.toast-exit {
   animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideOut {
   from {
      transform: translateX(0);
      opacity: 1;
   }
   to {
      transform: translateX(100%);
      opacity: 0;
   }
}

/* Toast Icon */
.toast-icon {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   margin-top: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.toast-icon svg {
   width: 100%;
   height: 100%;
}

/* Toast Content */
.toast-content {
   flex: 1;
   min-width: 0;
}

.toast-title {
   font-weight: 600;
   font-size: 14px;
   margin-bottom: 2px;
   line-height: 1.4;
}

.toast-message {
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-secondary);
}

/* Toast Close Button */
.toast-close {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   border: none;
   background: transparent;
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   border-radius: var(--radius-sm);
   transition: all 0.2s;
   margin-top: -2px;
   margin-right: -4px;
}

.toast-close:hover {
   background: rgba(0, 0, 0, 0.05);
   color: var(--text-primary);
}

.toast-close svg {
   width: 16px;
   height: 16px;
}

/* Toast Types */
.toast-success {
   border-left-color: var(--success-color);
}

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

.toast-error {
   border-left-color: var(--error-color);
}

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

.toast-warning {
   border-left-color: var(--warning-color);
}

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

.toast-info {
   border-left-color: var(--primary-color);
}

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

/* Progress Bar (for auto-dismiss) */
.toast-progress {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
   background: currentColor;
   opacity: 0.3;
   animation: toastProgress linear forwards;
}

@keyframes toastProgress {
   from {
      width: 100%;
   }
   to {
      width: 0%;
   }
}

/* Legacy support - keep old #message for backwards compatibility */
#message {
   display: none !important;
}

/* ============================================
   Template Links
   ============================================ */
.template-link {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-sm);
   color: var(--primary-color);
   text-decoration: none;
   font-size: 14px;
   margin-top: var(--spacing-sm);
   min-height: var(--touch-target-min);
   padding: var(--spacing-xs) 0;
}

.template-link:hover {
   color: var(--primary-hover);
   text-decoration: underline;
}

/* ============================================
   Pro Badge
   ============================================ */
.pro-badge {
   background: var(--primary-color);
   color: white;
   font-size: 10px;
   padding: 3px 6px;
   border-radius: 4px;
   font-weight: 500;
   text-transform: uppercase;
   white-space: nowrap;
   display: inline-block;
}

@media (max-width: 767px) {
   .pro-badge {
      font-size: 9px;
      padding: 2px 5px;
   }
}

.pro-badge.admin {
   background: var(--primary-dark);
}

.pro-badge.experimental {
   background: var(--error-color);
}

/* ============================================
   Hidden Input
   ============================================ */
.hidden-input {
   display: none;
}

/* ============================================
   Flex Input Groups - Stack on mobile
   ============================================ */
.text-input-group > div[style*="display: flex"] {
   flex-direction: column !important;
   gap: var(--spacing-md) !important;
}

@media (min-width: 640px) {
   .text-input-group > div[style*="display: flex"] {
      flex-direction: row !important;
   }
}

/* Ensure inputs in flex containers work on mobile */
.text-input-group input[type="url"],
.text-input-group input[type="text"],
.text-input-group textarea {
   width: 100% !important;
   flex: 1 1 100% !important;
}

.text-input-group button {
   width: 100% !important;
   flex: 1 1 100% !important;
}

@media (min-width: 640px) {
   .text-input-group input[type="url"],
   .text-input-group input[type="text"] {
      flex: 7 1 auto !important;
   }
   
   .text-input-group button {
      flex: 3 1 auto !important;
      width: auto !important;
   }
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus visible for keyboard navigation */
.btn:focus-visible,
.text-input:focus-visible,
.toggle-switch input:focus-visible + .toggle-slider,
.details-toggle:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .setting-item {
      border-bottom-width: 2px;
   }
   
   .text-input {
      border-width: 2px;
   }
   
   .btn {
      border: 2px solid currentColor;
   }
}

/* ============================================
   Additional Component Styles
   ============================================ */

/* Email Account Info */
.email-account-info {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-md);
   background: var(--bg-muted);
   border-radius: var(--radius-md);
   margin-bottom: var(--spacing-lg);
}

.email-account-name {
   font-size: 14px;
   color: var(--text-primary);
   font-weight: 500;
   margin-bottom: 4px;
}

.email-account-link {
   font-size: 14px;
   color: var(--text-secondary);
}

/* Generate Template Wrapper */
.generate-template-wrapper {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-lg);
}

@media (min-width: 640px) {
   .generate-template-wrapper {
      flex-direction: row;
      align-items: center;
   }
   
   .generate-template-wrapper .btn {
      flex-shrink: 0;
      width: auto;
   }
}

.generate-message {
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--radius-sm);
   font-size: 13px;
   background: var(--bg-info);
   color: var(--text-secondary);
   border: 1px solid var(--border-light);
}

/* Input Wrapper */
.input-wrapper {
   margin-bottom: var(--spacing-lg);
}

.input-wrapper:last-child {
   margin-bottom: 0;
}

/* ============================================
   Utility Classes
   ============================================ */
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
   .button-group,
   .toggle-switch,
   .details-toggle {
      display: none;
   }
   
   .setting-item {
      page-break-inside: avoid;
   }
   
   .settings-card {
      box-shadow: none;
      border: 1px solid #000;
   }
}

/* ============================================
   API Key Modal
   ============================================ */
.api-key-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
}

.api-key-modal.hidden {
   display: none;
}

.api-key-modal__backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
}

.api-key-modal__content {
   background-color: var(--bg-primary);
   padding: var(--spacing-3xl);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   z-index: 1001;
   max-width: 500px;
   width: 90%;
   text-align: center;
   position: relative;
}

.api-key-modal__content h3 {
   margin-top: 0;
   color: var(--text-primary);
   font-size: 1.5rem;
   margin-bottom: var(--spacing-md);
}

.api-key-modal__content p {
   color: var(--text-secondary);
   margin-bottom: var(--spacing-xl);
}

.api-key-modal__content pre {
   background-color: var(--bg-muted);
   color: var(--text-primary);
   padding: var(--spacing-md);
   border-radius: var(--radius-sm);
   text-align: left;
   overflow-x: auto;
   word-break: break-all;
   white-space: pre-wrap;
   margin-bottom: var(--spacing-xl);
   font-size: 14px;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

.api-key-modal__content .btn {
   width: auto;
   padding: var(--spacing-md) var(--spacing-2xl);
}

/* ============================================
   Admin API Key Section - Single Line Layout
   ============================================ */
.api-key-container {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   flex-wrap: wrap;
   margin-bottom: var(--spacing-md);
}

.api-key-masked {
   flex: 1;
   min-width: 200px;
   background: var(--bg-muted);
   padding: 8px 12px;
   border-radius: var(--radius-sm);
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   font-size: 14px;
   color: var(--text-primary);
   border: 1px solid var(--border-color);
}

.api-key-info {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   flex-wrap: wrap;
   font-size: 13px;
   color: var(--text-secondary);
   white-space: nowrap;
}

.api-key-info span {
   white-space: nowrap;
}

.api-key-info-separator {
   color: var(--text-muted);
}

.btn-compact {
   padding: 8px 16px;
   font-size: 14px;
   white-space: nowrap;
   flex-shrink: 0;
   min-width: auto;
}

@media (max-width: 640px) {
   .api-key-container {
      flex-direction: column;
      align-items: stretch;
   }
   
   .api-key-masked {
      min-width: 100%;
   }
   
   .api-key-info {
      width: 100%;
      justify-content: space-between;
      font-size: 12px;
   }
}