/* ========================================
   SURAH SELECTOR - DESIGN MODERNE INSPIRÉ DU PROFIL
======================================== */

#salatSurahSelector {
  margin-left: 0;
  padding: 20px;
  padding-bottom: 80px;
  background: transparent;
  color: var(--primary-color);
  min-height: 100vh;
  font-family: var(--main-font);
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header style Tikrar */
.surahselector-header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding: 1rem 0;
}

.surahselector-header-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--primary-color, #274c77) 0%, var(--secondary-color, #6096ba) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(39, 76, 119, 0.25);
}

.surahselector-header-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.surahselector-header-icon img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

.surahselector-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color, #274c77);
  margin: 0;
  letter-spacing: -0.02em;
  font-family: var(--main-font);
}

.surahselector-subtitle {
  margin: 0.75rem 0 0;
  font-size: 1.1rem;
  color: rgba(39, 76, 119, 0.7);
  font-weight: 400;
}

/* Container principal sobre */
.surahselector-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 32px;
  padding: 0;
  align-items: start; /* Prevent cards from stretching to match height */
}

/* Positionnement des cartes en desktop */
.surahselector-card:nth-child(1) {
  /* "Selection of Surahs to Recite" - pleine largeur, première ligne */
  grid-column: 1 / -1;
  grid-row: 1;
}

.surahselector-card:nth-child(2) {
  /* "Selection for Salat" - pleine largeur, deuxième ligne */
  grid-column: 1 / -1;
  grid-row: 2;
}

.surahselector-card:nth-child(3) {
  /* "Individual Surah Tracking" - pleine largeur, troisième ligne */
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Cards sobres (comme Task List) */
.surahselector-card {
  background: white;
  border: 1px solid rgba(39, 76, 119, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(39, 76, 119, 0.08);
  overflow: hidden;
  width: 100%;
  transition: all 0.2s ease;
  position: relative;
}

.surahselector-card:hover {
  box-shadow: 0 4px 12px rgba(39, 76, 119, 0.12);
  border-color: rgba(39, 76, 119, 0.2);
}

/* Headers des cards avec gradient horizontal */
.surahselector-card h2 {
  color: white;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 16px 20px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--main-font);
  letter-spacing: -0.01em;
  position: relative;
}

/* Icônes avant les titres */
.surahselector-card h2::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Icônes pour chaque section */
.surahselector-card:nth-child(1) h2::before {
  /* Selection of Surahs to Recite - checkmark badge */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>');
}

.surahselector-card:nth-child(2) h2::before {
  /* Selection for Salat - book icon */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>');
}

.surahselector-card:nth-child(3) h2::before {
  /* Individual Surah Tracking - clipboard */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>');
}

/* Badge compteur dans le header */
.header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  margin-left: 12px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  vertical-align: middle;
}

/* Contenu des cartes sobre */
.surahselector-card > div {
  padding: 20px;
  background: #fafbfc;
}

/* Liste des sourates sobre */
#sourateList {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(39, 76, 119, 0.15);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  background: white;
  transition: all 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-color) #f0f0f0;
}

#sourateList::-webkit-scrollbar {
  width: 8px;
}

#sourateList::-webkit-scrollbar-track {
  background: rgba(163, 206, 241, 0.1);
  border-radius: var(--border-radius-sm);
}

#sourateList::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: var(--border-radius-sm);
}

#sourateList:focus-within {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(96, 150, 186, 0.15);
}

.sourate-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: var(--border-radius-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.sourate-item:hover {
  background: linear-gradient(135deg, rgba(96, 150, 186, 0.1) 0%, rgba(163, 206, 241, 0.05) 100%);
  transform: translateX(4px);
}

.sourate-item input {
  margin-right: 12px;
  transform: scale(1.2);
  cursor: pointer;
  accent-color: var(--primary-color);
}

.sourate-item label {
  font-weight: 500;
  font-family: var(--main-font);
  color: var(--primary-color);
  cursor: pointer;
  user-select: none;
  flex: 1;
}

/* Boutons CTA (exclut le bouton back) - Uses unified button system */
#salatSurahSelector button:not(.page-back-btn) {
  background: var(--gradient-primary);
  color: white;
  padding: var(--btn-padding-md, 0.75rem 1.5rem);
  border: none;
  border-radius: var(--btn-radius-md, 8px);
  font-size: var(--btn-font-size-lg, 1rem);
  font-weight: var(--btn-font-weight, 600);
  font-family: var(--main-font);
  cursor: pointer;
  transition: var(--btn-transition, all 0.2s ease);
  width: 200px;
  height: 48px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
  box-shadow: var(--btn-shadow, 0 2px 8px rgba(39, 76, 119, 0.15));
}

#salatSurahSelector button:not(.page-back-btn):hover {
  background: var(--gradient-primary);
  box-shadow: var(--btn-shadow-hover, 0 4px 12px rgba(39, 76, 119, 0.25));
  transform: var(--btn-hover-lift, translateY(-2px));
}

#salatSurahSelector button:not(.page-back-btn):active {
  transform: var(--btn-active-press, translateY(0));
}

.surahselector-card p {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--primary-color);
  font-family: var(--main-font);
}

/* Container pour les rakats - Layout en colonnes avec bouton centré */
.surahselector-card:nth-child(2) > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  align-items: center;
}

/* Style sobre pour les conteneurs des rakats */
.surahselector-card p {
  font-size: 15px;
  margin-bottom: 0;
  color: var(--primary-color);
  font-family: var(--main-font);
  padding: 20px;
  background: white;
  border-radius: 12px;
  border: 2px solid rgba(39, 76, 119, 0.15);
  box-shadow: 0 2px 8px rgba(39, 76, 119, 0.08);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.surahselector-card p:hover {
  border-color: var(--secondary-color);
  box-shadow: 0 4px 12px rgba(39, 76, 119, 0.15);
}

/* Labels visibles pour "1st raka:" et "2nd raka:" */
.surahselector-card p .raka-label {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 16px;
  font-family: var(--main-font);
  letter-spacing: -0.01em;
  display: block;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(39, 76, 119, 0.1);
}

/* Style pour l'exposant dans les labels raka */
.raka-label sup {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
}

/* Valeurs des sourates - Imposantes et sobres */
.surahselector-card p #firstRaka,
.surahselector-card p #secondRaka {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--main-font);
  color: var(--primary-color);
  background: none;
  border: none;
  box-shadow: none;
  padding: 12px 0;
  margin: 0;
  border-radius: 0;
  width: 100%;
  text-align: center;
  min-height: auto;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Suppression de l'ancien système de grille */
.surahselector-row {
  display: block;
  margin-bottom: 0;
}

/* ===== INDIVIDUAL SURAH TRACKING ===== */
.surah-tracking-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 450px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
}

.surah-tracking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: white;
  border-radius: 10px;
  border: 2px solid rgba(39, 76, 119, 0.12);
  box-shadow: 0 2px 6px rgba(39, 76, 119, 0.06);
  transition: all 0.2s ease;
}

.surah-tracking-item:hover {
  border-color: var(--secondary-color);
  box-shadow: 0 4px 12px rgba(39, 76, 119, 0.12);
  transform: translateY(-1px);
}

.surah-tracking-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.surah-tracking-info .surah-number {
  font-weight: 700;
  color: var(--primary-color);
  min-width: 40px;
  font-size: 1.15em;
  font-family: var(--main-font);
}

.surah-tracking-info .surah-name {
  font-weight: 600;
  color: var(--text-color);
  font-size: 1.1em;
  white-space: nowrap;
  font-family: var(--main-font);
}

.surah-tracking-info .surah-arabic {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 1.25em;
  color: var(--secondary-color);
  margin-left: 6px;
  font-weight: 500;
}

.surah-tracking-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05em;
  flex-shrink: 0;
  margin-left: 10px;
  color: var(--text-muted);
}

.surah-tracking-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-icon {
  flex-shrink: 0;
  opacity: 0.6;
  color: var(--primary-color);
}

.stat-recitation-count {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.05em;
  font-family: var(--main-font);
}

.stat-last-recited {
  color: var(--text-muted);
  font-size: 1em;
  font-family: var(--main-font);
}

.surah-tracking-empty,
.surah-tracking-error {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-muted);
  grid-column: 1 / -1;
  font-family: var(--main-font);
}

/* Tablet responsive for surah tracking */
@media (max-width: 900px) {
  .surah-tracking-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Mobile responsive for surah tracking */
@media (max-width: 600px) {
  .surah-tracking-list {
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 350px;
  }

  .surah-tracking-item {
    padding: 10px 12px;
    border-radius: 8px;
  }

  .surah-tracking-info {
    flex-wrap: wrap;
    gap: 4px;
  }

  .surah-tracking-info .surah-number {
    min-width: 30px;
    font-size: 0.9em;
  }

  .surah-tracking-info .surah-name {
    font-size: 0.85em;
  }

  .surah-tracking-info .surah-arabic {
    font-size: 0.95em;
    margin-left: 4px;
  }

  .surah-tracking-stats {
    margin-left: 8px;
    gap: 8px;
  }

  .stat-last-recited {
    font-size: 0.8em;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  #salatSurahSelector {
    margin-left: auto;
    margin-right: auto;
    width: 98vw;
  }

  .surahselector-container {
    max-width: 90vw;
  }
}

@media (max-width: 600px) {
  #salatSurahSelector {
    padding-left: 0rem;
  }

  #salatSurahSelector.page {
    padding: 10px;
  }

  .surahselector-container {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Surah Selector Mobile - Design moderne empilé */
  #salatSurahSelector {
    padding: 8px;
    margin-left: 0;
    background: var(--gradient-light);
    min-height: 100vh;
  }

  #salatSurahSelector.page {
    padding: 8px;
  }

  /* Header mobile */
  .surahselector-header {
    margin-bottom: 1.5rem;
    padding: 1rem 0;
  }

  .surahselector-header-icon {
    width: 56px;
    height: 56px;
  }

  .surahselector-header-icon svg {
    width: 28px;
    height: 28px;
  }

  .surahselector-title {
    font-size: 1.5rem;
  }

  .surahselector-subtitle {
    font-size: 1rem;
  }

  /* Container mobile */
  .surahselector-container {
    max-width: 100%;
    padding: 0 8px;
    gap: 16px;
    /* Activation du flexbox pour pouvoir utiliser order */
    display: flex;
    flex-direction: column;
  }

  /* Réorganisation des cartes en mobile */
  .surahselector-card:nth-child(1) {
    /* "Selection of Surahs to Recite" - 1ère position */
    order: 1;
  }

  .surahselector-card:nth-child(2) {
    /* "Selection for Salat" - 2ème position */
    order: 2;
  }

  .surahselector-card:nth-child(3) {
    /* "Individual Surah Tracking" - 3ème position */
    order: 3;
  }

  /* Cards mobile optimisées */
  .surahselector-card {
    margin-bottom: 0;
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 8px rgba(39, 76, 119, 0.08);
  }

  .surahselector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(39, 76, 119, 0.15);
  }

  .surahselector-card::before {
    height: 2px;
  }

  /* Headers des cards mobile */
  .surahselector-card h2 {
    font-size: 16px;
    font-weight: 700;
    padding: 16px 16px;
    letter-spacing: -0.005em;
  }

  .surahselector-card h2::before {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  /* Contenu mobile */
  .surahselector-card > div {
    padding: 16px;
  }

  /* Liste des sourates mobile */
  #sourateList {
    max-height: 250px;
    padding: 12px;
    margin-bottom: 12px;
    border-width: 2px;
  }

  .sourate-item {
    margin-bottom: 6px;
    padding: 8px 10px;
  }

  .sourate-item:hover {
    transform: translateX(2px);
  }

  .sourate-item input {
    margin-right: 10px;
    transform: scale(1.15);
  }

  .sourate-item label {
    font-size: 14px;
    font-weight: 500;
  }

  /* Boutons mobile */
  #salatSurahSelector button {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    margin-top: 8px;
    letter-spacing: 0.01em;
  }

  /* Style mobile moderne pour les containers de rakats */
  .surahselector-card p {
    font-size: 14px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius-sm);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Labels des rakats en mobile */
  .surahselector-card p span:first-child {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
    letter-spacing: 0.05em;
  }

  /* Valeurs des sourates en mobile */
  .surahselector-card p #firstRaka,
  .surahselector-card p #secondRaka {
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--secondary-color);
  }

  /* Masquer les anciens éléments responsive */
  .surahselector-row {
    display: block;
  }
}