/* ============================================================
   DARK.CSS - Dark Mode Specific Overrides
   Sakshi's Secret Garden

   Most dark mode styling is handled via CSS custom properties
   in variables.css. This file covers special cases that need
   explicit dark-mode treatment beyond variable swaps.
   ============================================================ */

/* ============================================================
   IMAGE ADJUSTMENTS
   Slightly reduce brightness and increase contrast for comfort
   ============================================================ */

[data-theme="dark"] img:not(.no-dark-adjust) {
  filter: brightness(0.9) contrast(1.05);
}

[data-theme="dark"] img.avatar-img,
[data-theme="dark"] .avatar img {
  filter: brightness(0.85) contrast(1.1);
}

/* ============================================================
   CANVAS / DRAWING
   ============================================================ */

[data-theme="dark"] .editor-canvas-container {
  background-color: #1E1518;
}

[data-theme="dark"] .editor-canvas-container canvas {
  filter: none;
}

/* Drawing toolbar special styling in dark */
[data-theme="dark"] .drawing-toolbar {
  background-color: var(--bg-surface);
  border-color: rgba(240, 160, 180, 0.1);
}

[data-theme="dark"] .color-swatch[data-color="black"] {
  background-color: #F0E0E6;
  border: 1px solid rgba(240, 224, 230, 0.3);
}

[data-theme="dark"] .color-swatch.selected {
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--accent);
}

[data-theme="dark"] .size-option-dot {
  background-color: var(--text-primary);
}

/* ============================================================
   SHADOWS - Deeper for dark backgrounds
   ============================================================ */

[data-theme="dark"] .card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(240, 160, 180, 0.04);
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(240, 160, 180, 0.08);
}

[data-theme="dark"] .card.card-interactive:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
              0 0 0 1px var(--accent);
}

[data-theme="dark"] .modal {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(240, 160, 180, 0.06);
}

[data-theme="dark"] .dropdown-menu {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(240, 160, 180, 0.06);
}

[data-theme="dark"] .toast {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(240, 160, 180, 0.06);
}

[data-theme="dark"] .fab {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .fab:hover {
  box-shadow: 0 0 24px rgba(240, 160, 180, 0.25),
              0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   SCROLLBAR - Dark variant
   ============================================================ */

[data-theme="dark"] * {
  scrollbar-color: rgba(240, 160, 180, 0.2) transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(240, 160, 180, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(240, 160, 180, 0.35);
}

/* ============================================================
   DECORATIVE ELEMENTS
   ============================================================ */

/* Petals are more translucent in dark mode */
[data-theme="dark"] .petal {
  opacity: 0;
}

[data-theme="dark"] .petal-pink     { background: linear-gradient(135deg, rgba(255, 182, 193, 0.5), rgba(232, 135, 155, 0.4)); }
[data-theme="dark"] .petal-rose     { background: linear-gradient(135deg, rgba(244, 160, 176, 0.5), rgba(216, 112, 144, 0.4)); }
[data-theme="dark"] .petal-blush    { background: linear-gradient(135deg, rgba(255, 209, 220, 0.4), rgba(240, 160, 180, 0.3)); }
[data-theme="dark"] .petal-lavender { background: linear-gradient(135deg, rgba(216, 180, 254, 0.4), rgba(167, 139, 250, 0.3)); }
[data-theme="dark"] .petal-white    { background: linear-gradient(135deg, rgba(255, 245, 247, 0.15), rgba(255, 232, 238, 0.1)); }

/* Hearts slightly glow in dark mode */
[data-theme="dark"] .floating-heart {
  filter: drop-shadow(0 0 4px rgba(240, 160, 180, 0.4));
}

/* Sparkles glow more in dark mode */
[data-theme="dark"] .sparkle-particle::before {
  filter: drop-shadow(0 0 3px var(--accent));
}

/* Shooting star is more visible in dark */
[data-theme="dark"] .shooting-star {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

[data-theme="dark"] .shooting-star::after {
  box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
}

/* ============================================================
   LOVE POPUP - Dark variant
   ============================================================ */

[data-theme="dark"] .love-popup {
  background: linear-gradient(145deg, #3A2030, #352030, #302028);
  border: 1px solid rgba(240, 160, 180, 0.1);
}

[data-theme="dark"] .love-popup-overlay {
  background-color: rgba(0, 0, 0, 0.65);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B8A0AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* PIN pad buttons */
[data-theme="dark"] .pin-pad-btn {
  background-color: var(--bg-surface);
  border-color: rgba(240, 160, 180, 0.12);
}

[data-theme="dark"] .pin-pad-btn:hover {
  background-color: rgba(240, 160, 180, 0.12);
  border-color: var(--accent);
}

[data-theme="dark"] .pin-pad-btn:active {
  background-color: var(--accent);
  color: #fff;
}

/* ============================================================
   TOGGLE - Dark variant
   ============================================================ */

[data-theme="dark"] .toggle-track {
  background-color: rgba(240, 160, 180, 0.15);
}

[data-theme="dark"] .toggle-thumb {
  background-color: var(--text-primary);
}

[data-theme="dark"] .toggle input:checked + .toggle-track {
  background-color: var(--accent);
}

/* ============================================================
   PROGRESS BAR - Dark variant
   ============================================================ */

[data-theme="dark"] .progress {
  background-color: rgba(240, 160, 180, 0.08);
}

[data-theme="dark"] .progress-bar {
  background: linear-gradient(90deg, var(--accent), #C070A0);
}

/* ============================================================
   CALENDAR - Dark mode adjustments
   ============================================================ */

[data-theme="dark"] .calendar-day.today {
  background-color: rgba(240, 160, 180, 0.15);
}

[data-theme="dark"] .calendar-day.selected {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Mood dots slightly glow in dark mode */
[data-theme="dark"] .mood-dot {
  box-shadow: 0 0 3px currentColor;
}

/* ============================================================
   EDITOR - Dark mode
   ============================================================ */

[data-theme="dark"] .editor-toolbar {
  background-color: var(--bg-surface);
  border-color: rgba(240, 160, 180, 0.08);
}

[data-theme="dark"] .editor-content blockquote {
  background-color: rgba(240, 160, 180, 0.06);
  border-left-color: var(--accent);
}

[data-theme="dark"] .editor-content code {
  background-color: rgba(240, 160, 180, 0.1);
  color: var(--accent);
}

[data-theme="dark"] .editor-footer {
  background-color: var(--bg-surface);
  border-color: rgba(240, 160, 180, 0.08);
}

/* ============================================================
   SELECTION - Dark variant
   ============================================================ */

[data-theme="dark"] ::selection {
  background-color: rgba(240, 160, 180, 0.3);
  color: var(--text-primary);
}

[data-theme="dark"] ::-moz-selection {
  background-color: rgba(240, 160, 180, 0.3);
  color: var(--text-primary);
}

/* ============================================================
   SKELETON LOADING - Dark variant
   ============================================================ */

[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    rgba(240, 160, 180, 0.06) 50%,
    var(--bg-surface) 75%
  );
  background-size: 200% 100%;
}

/* ============================================================
   STREAK / DAYS COUNTER - Dark
   ============================================================ */

[data-theme="dark"] .streak-display {
  background-color: rgba(240, 160, 180, 0.1);
}

[data-theme="dark"] .days-counter-number {
  background: linear-gradient(135deg, var(--accent), #C070A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   HEADER / NAV - Subtle glow in dark mode
   ============================================================ */

[data-theme="dark"] .app-header {
  border-bottom-color: rgba(240, 160, 180, 0.06);
}

[data-theme="dark"] .app-nav {
  border-top-color: rgba(240, 160, 180, 0.06);
}

@media (min-width: 768px) {
  [data-theme="dark"] .app-nav {
    border-top-color: transparent;
    border-right-color: rgba(240, 160, 180, 0.06);
  }
}

/* ============================================================
   FOCUS STYLES - Dark
   ============================================================ */

[data-theme="dark"] :focus-visible {
  outline-color: var(--accent);
}

/* ============================================================
   SIDEBAR - Dark
   ============================================================ */

[data-theme="dark"] .sidebar {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sidebar-overlay {
  background-color: rgba(0, 0, 0, 0.55);
}

/* ============================================================
   SEARCH BAR - Dark
   ============================================================ */

[data-theme="dark"] .search-bar .input {
  background-color: var(--bg-surface);
}

[data-theme="dark"] .search-bar .input:focus {
  background-color: var(--bg-elevated);
}

/* ============================================================
   TAG COLORS - Dark variant
   Slightly adjusted for readability on dark backgrounds
   ============================================================ */

[data-theme="dark"] .tag-rose      { background-color: rgba(232, 135, 155, 0.15); color: #F0A0B4; border-color: rgba(232, 135, 155, 0.25); }
[data-theme="dark"] .tag-lavender  { background-color: rgba(167, 139, 250, 0.15); color: #C0A8FF; border-color: rgba(167, 139, 250, 0.25); }
[data-theme="dark"] .tag-sage      { background-color: rgba(107, 191, 138, 0.15); color: #80D0A0; border-color: rgba(107, 191, 138, 0.25); }
[data-theme="dark"] .tag-honey     { background-color: rgba(240, 176, 96, 0.15);  color: #F0C080; border-color: rgba(240, 176, 96, 0.25); }
[data-theme="dark"] .tag-sky       { background-color: rgba(96, 176, 240, 0.15);  color: #80C0F0; border-color: rgba(96, 176, 240, 0.25); }