/* ===========================================
   2. BASE STYLES, FORMS & UTILITIES
   =========================================== */

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: var(--border-radius-sm, 4px); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { 
  background: rgba(0, 0, 0, 0.2); 
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { 
  background: rgba(0, 0, 0, 0.3); 
}

/* Hide scrollbar for filter buttons container */
.filter-buttons-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.filter-buttons-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- RESET & GLOBAL --- */
* { 
    box-sizing: border-box; 
    margin: 0; padding: 0; 
    -webkit-tap-highlight-color: transparent; 
    touch-action: manipulation;
}

body { 
    font-family: var(--font-family-base, 'DM Sans', sans-serif); 
    background: var(--bg); 
    color: var(--text); 
    overflow-x: hidden; 
    overscroll-behavior-y: contain;
}

/* --- FLAT INTERACTIVE ELEMENTS (Fixes Rising/Embossed Look) --- */
/* Removed transition: transform to stop the "rising" effect */
.btn-orange, .btn-orange-small, .btn-focus, .spin-btn, .task-row, 
.duel-card, .nav-item, .chip-display-flat, .btn-white-outline, .btn-ai-purple {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.1s ease !important;
    transform: none !important; /* Forces flat state */
    box-shadow: none !important; /* Removes embossed look */
}

/* --- PRESS GLOW LOGIC --- */
/* Glow only triggers on physical press (:active state) */
.btn-orange:active, 
.btn-orange-small:active, 
.btn-focus:active, 
.spin-btn:active, 
.duel-card:active { 
    transform: scale(0.97) !important; /* Slight tactile shrink instead of rising */
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.2) inset, 0 0 0 1px rgba(255, 107, 53, 0.3) !important; /* Contained glow */
    border-color: var(--primary);
}
.btn-white-outline:active,
.btn-ai-purple:active,
.chip-display-flat:active { 
    transform: scale(0.97) !important; /* Slight tactile shrink instead of rising */
    box-shadow: 0 0 20px var(--primary-glow) !important; /* Neon glow effect */
    border-color: var(--primary);
}

/* --- INPUTS & FORMS --- */
.f-label { 
    display: block; font-size: 12px; font-weight: 700; 
    color: var(--text-light); margin-bottom: 6px; text-transform: uppercase; 
}

.f-input, .f-textarea, .f-select { 
    width: 100%; padding: 12px; 
    border: 1px solid var(--border); border-radius: var(--border-radius-md, 10px); 
    font-family: inherit; font-size: 16px; outline: none; 
    margin-bottom: 16px; background: var(--input-bg); color: var(--text); 
}
.f-input:focus, .f-textarea:focus, .f-select:focus { border-color: var(--primary); }

/* --- LINKS --- */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}
a:visited {
    color: var(--primary);
}

/* --- BUTTON VARIANTS (Flat Base) --- */
.btn-primary { 
    background: var(--primary); color: white; border: none; 
    padding: 12px; border-radius: var(--border-radius-md, 10px); width: 100%; 
    font-weight: 700; cursor: pointer; font-size: 14px; 
    display: flex; align-items: center; justify-content: center;
}

.btn-orange-small { 
    background: var(--primary); color: white; border: none; 
    padding: 8px 16px; border-radius: var(--border-radius-sm, 8px); font-weight: 600; cursor: pointer; 
}

.btn-white-outline { 
    background: transparent; border: 0px solid var(--border);
    color: var(--text); padding: 12px; border-radius: var(--border-radius-md, 10px); 
    font-weight: 700; cursor: pointer; 
}

.btn-ai-purple { 
    background: linear-gradient(135deg, #a29bfe, #6c5ce7); 
    color: white; border: none; width: 44px; height: 44px; 
    border-radius: var(--border-radius-md, 10px); display: flex; align-items: center; 
    justify-content: center; cursor: pointer; font-size: 18px; 
}
/* --- FIXED FLAT BUTTONS --- */
.btn-orange, .btn-primary, .btn-save-task {
    /* Reset default browser styles that cause the 'box' look */
    appearance: none;
    -webkit-appearance: none;
    border: none !important;
    outline: none !important;
    
    /* Flat Design */
    background: var(--primary);
    color: #white;
    padding: 12px 24px;
    border-radius: var(--border-radius-md, 10px);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Remove any default or rising shadows */
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.2s, box-shadow 0.1s ease;
}
/* --- UPDATED FLAT BUTTON LOGIC --- */
.btn-orange, .btn-primary, .btn-save-task, .btn-log {
    appearance: none;
    -webkit-appearance: none;
    border: none !important;
    outline: none !important;
    background: var(--primary); /* Uses theme orange */
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius-md, 10px);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Force flat state: No rising, no default shadows */
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.2s, box-shadow 0.1s ease;
}

/* NEON GLOW: Triggers ONLY on physical press */
.btn-orange:active, .btn-primary:active, .btn-save-task:active, .btn-log:active {
    transform: scale(0.96) !important; /* Tactile shrink instead of rising */
    box-shadow: 0 0 20px var(--primary-glow) !important; /* */
}

/* Gray/Secondary Variant (for Cancel or Log buttons) */
.btn-secondary {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:active {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
}
/* --- TAGS & BADGES --- */
.badge { font-size: 10px; padding: 2px 8px; border-radius: 6px; font-weight: 700; text-transform: uppercase; background: var(--border); color: var(--text-light); }
.badge.Urgent { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger); }
.badge.High { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); }
.badge.Medium { background: rgba(74, 144, 226, 0.15); color: #2563eb; border: 1px solid #2563eb; }

/* --- ZEN FOCUS ANIMATIONS --- */
@keyframes lavenderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.focus-bg-lavender {
    background: linear-gradient(-45deg, #f3e5f5, #e1bee7, #d1c4e9, #ede7f6);
    background-size: 400% 400%;
    animation: lavenderFlow 15s ease infinite;
}

[data-theme="dark"] .focus-bg-lavender {
    background: linear-gradient(-45deg, #2d2430, #31263e, #1a1625, #241d2e);
    background-size: 400% 400%;
}
.tt-select{
  width:100%;
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-weight:800;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
}
.tt-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,107,53,0.18);
}
.tt-select option{
  background:#121212; /* keeps dropdown dark in most browsers */
  color:#fff;
}

/* --- SHARP EDGES --- */
/* Remove rounded corners when sharp edges setting is enabled */
[data-sharp-edges="true"] *,
[data-sharp-edges="true"] *::before,
[data-sharp-edges="true"] *::after {
  border-radius: 0 !important;
}

/* --- ADVANCED UI SETTINGS --- */


/* Border Radius (applied via CSS variables in JS) */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* Apply border radius from variables */
[data-border-radius] * {
  border-radius: var(--border-radius-sm, var(--radius-sm, 6px));
}

[data-border-radius] button,
[data-border-radius] .btn-orange,
[data-border-radius] .btn-primary,
[data-border-radius] input,
[data-border-radius] select,
[data-border-radius] textarea {
  border-radius: var(--border-radius-md, var(--radius-md, 10px));
}

[data-border-radius] .app-shell,
[data-border-radius] [style*="border-radius: 12px"],
[data-border-radius] [style*="border-radius:12px"] {
  border-radius: var(--border-radius-lg, var(--radius-lg, 16px)) !important;
}

/* Animation Speed */
:root {
  --transition-speed: 0.2s;
}

* {
  transition-duration: var(--transition-speed, 0.2s) !important;
}

[data-animation-speed="instant"] * {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

[data-animation-speed="fast"] * {
  transition-duration: 0.1s !important;
  animation-duration: 0.1s !important;
}

[data-animation-speed="slow"] * {
  transition-duration: 0.4s !important;
  animation-duration: 0.4s !important;
}

/* Glass Effect */
[data-glass-effect="true"] .app-shell,
[data-glass-effect="true"] .app-header,
[data-glass-effect="true"] [style*="background: var(--card)"],
[data-glass-effect="true"] [style*="background:var(--card)"] {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  background: rgba(var(--card-rgb, 30, 30, 30), 0.7) !important;
}

/* Gradients - Enhanced visibility */
[data-gradients="true"] .btn-orange,
[data-gradients="true"] .btn-primary,
[data-gradients="true"] .btn-orange-small,
[data-gradients="true"] .btn-focus,
[data-gradients="true"] .spin-btn,
[data-gradients="true"] .btn-save-task,
[data-gradients="true"] button[style*="background: var(--primary)"],
[data-gradients="true"] button[style*="background:var(--primary)"] {
  background: linear-gradient(135deg, var(--primary), #ff8c42, var(--primary-hover)) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

[data-gradients="true"] .app-header {
  background: linear-gradient(to bottom, var(--card), rgba(var(--card-rgb, 30, 30, 30), 0.8)) !important;
}

/* Apply gradients to cards and other UI elements */
[data-gradients="true"] .card,
[data-gradients="true"] [class*="card"] {
  background: linear-gradient(135deg, var(--card), rgba(var(--card-rgb, 30, 30, 30), 0.95)) !important;
}

/* Apply gradients to primary-colored elements */
[data-gradients="true"] [style*="background: var(--primary)"],
[data-gradients="true"] [style*="background:var(--primary)"] {
  background: linear-gradient(135deg, var(--primary), #ff8c42, var(--primary-hover)) !important;
}

/* Apply gradients to success buttons */
[data-gradients="true"] button[style*="background: var(--success)"],
[data-gradients="true"] button[style*="background:var(--success)"] {
  background: linear-gradient(135deg, var(--success), #00cec9) !important;
}

/* Apply gradients to navbar items when active */
[data-gradients="true"] .nav-item.active {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.1)) !important;
}

/* Compact Mode - True Compact for Mobile */
[data-compact-mode="true"] {
  --space-sm: 4px;
  --space-md: 6px;
  --space-lg: 8px;
  --compact-padding: 8px;
  --compact-margin: 6px;
}

/* Header */
[data-compact-mode="true"] .app-header {
  padding: 6px 8px !important;
  min-height: auto !important;
}

[data-compact-mode="true"] .brand-icon {
  font-size: 18px !important;
}

[data-compact-mode="true"] .brand-title {
  font-size: 12px !important;
}

[data-compact-mode="true"] .brand-subtitle {
  font-size: 7px !important;
}

[data-compact-mode="true"] .brand-link {
  gap: 6px !important;
}

/* Content Area */
[data-compact-mode="true"] .content {
  padding: 8px 10px !important;
}

/* Navigation Bar */
[data-compact-mode="true"] .navbar {
  padding: 4px 6px !important;
  height: 50px !important;
}

[data-compact-mode="true"] .nav-item {
  padding: 6px 4px !important;
  gap: 2px !important;
}

[data-compact-mode="true"] .nav-icon {
  font-size: 16px !important;
  line-height: 16px !important;
}

[data-compact-mode="true"] .nav-label {
  font-size: 9px !important;
}

/* Buttons - more compact */
[data-compact-mode="true"] button,
[data-compact-mode="true"] .btn-white-outline,
[data-compact-mode="true"] .btn-orange,
[data-compact-mode="true"] .btn-primary {
  padding: 6px 10px !important;
  font-size: 12px !important;
  min-height: auto !important;
}

/* Cards and containers with common classes */
[data-compact-mode="true"] [class*="card"] {
  padding: 8px 10px !important;
}

/* Form inputs */
[data-compact-mode="true"] input,
[data-compact-mode="true"] textarea,
[data-compact-mode="true"] select {
  padding: 6px 8px !important;
  font-size: 13px !important;
}

/* Task rows and list items */
[data-compact-mode="true"] .task-row {
  padding: 8px 10px !important;
  gap: 8px !important;
}

/* Headings */
[data-compact-mode="true"] h1 {
  font-size: 20px !important;
  margin: 8px 0 !important;
}

[data-compact-mode="true"] h2 {
  font-size: 18px !important;
  margin: 6px 0 !important;
}

[data-compact-mode="true"] h3 {
  font-size: 16px !important;
  margin: 6px 0 !important;
}

[data-compact-mode="true"] h4 {
  font-size: 14px !important;
  margin: 4px 0 !important;
}

/* General text sizing reduction */
[data-compact-mode="true"] {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

[data-compact-mode="true"] p {
  margin: 4px 0 !important;
}

/* Modal and overlay spacing */
[data-compact-mode="true"] [role="dialog"],
[data-compact-mode="true"] .modal-content {
  padding: 12px !important;
}

/* Tab content spacing */
[data-compact-mode="true"] .tab-container {
  padding: 8px !important;
}

/* Border radius for common border-radius classes */
[data-compact-mode="true"] [style*="border-radius: 12px"],
[data-compact-mode="true"] [style*="borderRadius: 12px"] {
  border-radius: 8px !important;
}

[data-compact-mode="true"] [style*="border-radius: 16px"],
[data-compact-mode="true"] [style*="borderRadius: 16px"] {
  border-radius: 10px !important;
}

/* Reduced Motion */
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Font Family */
:root {
  --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--font-family-base);
}

[data-font-family="fredoka"] body {
  font-family: 'Fredoka', sans-serif;
}

[data-font-family="inter"] body {
  font-family: 'Inter', sans-serif;
}

[data-font-family="roboto"] body {
  font-family: 'Roboto', sans-serif;
}

[data-font-family="poppins"] body {
  font-family: 'Poppins', sans-serif;
}

[data-font-family="comic-sans"] body {
  font-family: 'Comic Sans MS', cursive;
}

/* --- CONFETTI - Always on top layer --- */
/* Ensure confetti canvas elements are always above everything else */
canvas[class*="confetti"],
canvas[id*="confetti"],
body > canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 9999999 !important;
  /* Performance optimizations for smooth animation */
  will-change: transform !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  perspective: 1000px !important;
  -webkit-perspective: 1000px !important;
  /* GPU acceleration */
  -webkit-transform: translateZ(0) !important;
  -moz-transform: translateZ(0) !important;
  -ms-transform: translateZ(0) !important;
  -o-transform: translateZ(0) !important;
}