/* ==============================================================
   Evrâd-ü Ezkâr PWA - Custom Stylesheet
   ============================================================== */

:root {
  --teal-primary: #0f766e;
  --teal-hover: #115e59;
  --teal-light: #ccfbf1;
  --teal-dark: #134e4a;
}

/* Custom Teal Accent Utilities */
.text-teal {
  color: var(--teal-primary) !important;
}

.bg-teal {
  background-color: var(--teal-primary) !important;
  color: #ffffff !important;
}

.bg-teal-subtle {
  background-color: #f0fdfa !important;
  color: #115e59 !important;
}

[data-bs-theme="dark"] .bg-teal-subtle {
  background-color: #134e4a44 !important;
  color: #5eead4 !important;
}

.btn-teal {
  background-color: var(--teal-primary);
  border-color: var(--teal-primary);
  color: #ffffff;
  transition: all 0.15s ease-in-out;
}

.btn-teal:hover,
.btn-teal:focus {
  background-color: var(--teal-hover);
  border-color: var(--teal-hover);
  color: #ffffff;
}

/* General Typography */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

/* Arabic Text Styling */
.arabic-text {
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  font-size: 1.35rem;
  line-height: 2.1;
  direction: rtl;
  text-align: right;
  word-spacing: 2px;
  user-select: text;
  -webkit-user-select: text;
}

/* Task Item Cards */
.task-card {
  transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.2s ease;
  border-radius: 12px;
  overflow: hidden;
}

.task-card:active {
  transform: scale(0.99);
}

.task-card.task-completed {
  background-color: #f0fdf4 !important;
  border-color: #86efac !important;
}

[data-bs-theme="dark"] .task-card.task-completed {
  background-color: #052e1644 !important;
  border-color: #166534 !important;
}

/* Checkbox Toggle Button */
.btn-check-task {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  border: none;
  background: transparent;
  padding: 0;
  transition: transform 0.12s ease, opacity 0.15s ease;
  flex-shrink: 0;
}


  .btn-check-task:active {
    transform: scale(0.88);
  }

  .btn-check-task .bi-circle {
    color: #cbd5e1;
  }

  .btn-check-task:hover .bi-circle {
    color: var(--teal-primary);
  }


    .task-completed .btn-check-task .bi-check-circle-fill {
      color: #16a34a !important;
    }

    /* Sub-Pills for Quran Cüz */
    .juz-pill {
      font-size: 0.8rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: var(--bs-body-bg);
      color: var(--bs-body-color);
      cursor: pointer;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .juz-pill:hover {
      border-color: var(--teal-primary);
    }

    .juz-pill.completed {
      background-color: #dcfce7 !important;
      border-color: #22c55e !important;
      color: #15803d !important;
    }

    [data-bs-theme="dark"] .juz-pill.completed {
      background-color: #14532d !important;
      border-color: #22c55e !important;
      color: #86efac !important;
    }

    /* ==============================================================
   Zikirmatik Circular Progress Ring
   ============================================================== */
    .progress-ring {
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

    .progress-ring__circle-bg {
      color: #e2e8f0;
    }

    [data-bs-theme="dark"] .progress-ring__circle-bg {
      color: #334155;
    }

    .progress-ring__circle {
      transition: stroke-dashoffset 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      stroke: var(--teal-primary);
    }

    .counter-tap-btn {
      border: 6px solid rgba(255, 255, 255, 0.3);
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .counter-tap-btn:active {
      transform: translate(-50%, -50%) scale(0.93) !important;
      filter: brightness(0.92);
    }

    /* Rotating animation for manual sync button */
    .spin-anim {
      animation: spin 0.8s linear infinite;
    }

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

    /* ==============================================================
   Stealth / AOD Minimalist Mode (#000000 OLED Canvas)
   ============================================================== */
    .stealth-container {
      z-index: 2000 !important;
      background-color: #000000 !important;
      color: #333333 !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .stealth-tap-zone {
      cursor: pointer;
      height: 70vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .stealth-counter-text {
      color: rgba(255, 255, 255, 0.18) !important;
      font-family: monospace, sans-serif;
      letter-spacing: -2px;
      transition: transform 0.05s ease, color 0.05s ease;
    }

    .stealth-tap-zone:active .stealth-counter-text {
      transform: scale(1.05);
      color: rgba(255, 255, 255, 0.35) !important;
    }

    /* Safe area padding for notch/home bar on mobile iOS/Android */
    @supports (padding: max(0px)) {
      header.navbar {
        padding-top: max(8px, env(safe-area-inset-top));
      }

      .stealth-container {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
      }
    }