/* Inter (English) and Google Fonts Web Fallback */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght=400;500;600;700;800&family=Noto+Sans+Devanagari:wght=400;500;650;700;800&display=swap');

/* -------------------------------------------------------------------------
   Font-Face Setup: Local First with Online Web Fallbacks
   ------------------------------------------------------------------------- */

/* Local Mangal Devanagari Font (Preferred) */
@font-face {
  font-family: 'Noto Sans Devanagari Local';
  src: url('./fonts/NotoSansDevanagari-Regular.woff2') format('woff2'),
       url('./fonts/NotoSansDevanagari-Regular.woff') format('woff'),
       url('./fonts/NotoSansDevanagari-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Local Kruti Dev 010 Font (Preferred) with CDN Fallback */
@font-face {
  font-family: 'Kruti Dev 010 Local';
  src: url('./fonts/Kruti_Dev_010.ttf') format('truetype'),
       url('https://cdn.jsdelivr.net/gh/idmshrestha/kruti-dev-010@master/Kruti_Dev_010.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/idmshrestha/kruti-dev-010@master/Kruti_Dev_010.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Font class styling rules */
.font-kruti {
    font-family: 'Kruti Dev 010 Local', 'Kruti Dev 010', sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
}
.font-mangal {
    font-family: 'Noto Sans Devanagari Local', 'Noto Sans Devanagari', 'Mangal', sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
}

/* Color Variables and Layout Standards */
:root {
  --bg-light: #f3f4f7;
  --card-light: #ffffff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --primary: #2d3748; 
  --primary-hover: #1f2937;
  --primary-light: #eef2ff;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --font-family: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-family); background-color: var(--bg-light); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.btn { transition: all 0.2s ease-in-out; transform: translateY(0); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.btn:active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-primary:disabled { background-color: #a5b4fc; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background-color: var(--text-secondary); color: white; }
.btn-secondary:hover { background-color: #2d3748; }

.card { background-color: var(--card-light); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); border: 1px solid #e2e8f0; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07); }

.input-field { background-color: #f8fafc; border: 1px solid #e2e8f0; transition: all 0.3s; }
.input-field:focus, .input-field:focus-visible { box-shadow: 0 0 0 3px rgba(45, 55, 72, 0.2); border-color: var(--primary); outline: none; }

.nav-link { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 600; color: var(--text-secondary); transition: background-color 0.2s ease, color 0.2s ease; }
.nav-link:hover { background-color: #e5e7eb; color: var(--text-primary); }
.nav-link.active { background-color: var(--primary); color: white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.nav-link i { width: 1.25rem; margin-right: 0.75rem; text-align: center; }
#sidebar { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 1023px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 40;
    transform: translateX(-100%);
    display: flex !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  }
  #sidebar.open {
    transform: translateX(0);
  }
}

/* Analysis Color Highlighting */
.correct { color: #16a34a; font-weight: 500; }
.missing { color: var(--danger); font-weight: 600; background-color: rgba(239, 68, 68, 0.1); padding: 1px 4px; border-radius: 4px;}
.addition { color: #2563eb; font-weight: 600; background-color: rgba(59, 130, 246, 0.1); padding: 1px 4px; border-radius: 4px; text-decoration: line-through;}
.capitalization { color: #9333ea; font-weight: 600; border-bottom: 2px dotted #9333ea; }
.punctuation { color: var(--warning); font-weight: 600; background-color: rgba(245, 158, 11, 0.1); padding: 1px 4px; border-radius: 4px;}

.spelling-mistake-wrapper { color: var(--danger); background-color: rgba(239, 68, 68, 0.1); padding: 1px 5px; border-radius: 4px; font-weight: 500; }
.spelling-mistake-wrapper .incorrect-word { text-decoration: line-through; opacity: 0.8; }
.spelling-mistake-wrapper .correct-word-suggestion { font-weight: 600; }
.explainable-word { cursor: pointer; transition: background-color 0.2s; border-radius: 3px; }
.explainable-word:hover { background-color: rgba(45, 55, 72, 0.1); }
.mistake-word-container { position: relative; display: inline-block; }

.add-to-practice-btn { position: absolute; top: -5px; right: -5px; background-color: var(--success); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: 1px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; opacity: 0; transform: scale(0.8); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10; }
.touch-disabled .mistake-word-container:hover .add-to-practice-btn { opacity: 1; transform: scale(1); }
.add-to-practice-btn:hover { transform: scale(1.15); }
.add-to-practice-btn:disabled { background-color: #10b981; opacity: 0.7; cursor: not-allowed; color: white; }
.add-to-practice-btn .fa-check-circle { color: white; }
.mistake-word-container .add-to-practice-btn { display: inline-flex; }
.touch-enabled .mistake-word-container .add-to-practice-btn { display: none; }

#wordActionPopover { transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; }
#toast-container { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; }
.toast { display: flex; align-items: center; padding: 1rem 1.5rem; border-radius: 0.5rem; color: white; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); transform: translateX(120%); animation: slideIn 0.5s forwards, fadeOut 0.5s 4.5s forwards; }
.toast-success { background: linear-gradient(to right, #10b981, #059669); }
.toast-error { background: linear-gradient(to right, #ef4444, #dc2626); }
.toast-info { background: linear-gradient(to right, #3b82f6, #2563eb); }
.toast i { margin-right: 0.75rem; font-size: 1.25rem; }

@keyframes slideIn { from { transform: translateX(120%); } to { transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateX(120%); } }

/* Practice Words Styles */
#practiceTextDisplay .word { display: inline-block; margin: 0 5px 10px 0; font-size: 1.75rem; letter-spacing: 0.5px; padding: 2px 4px; }
#practiceTextDisplay .word.current { background-color: var(--primary-light); border-radius: 4px; }
#practiceTextDisplay .letter { transition: color 0.2s; }
.letter.correct { color: var(--success); }
.letter.incorrect { color: var(--danger); }
.word.completed-correct { color: var(--success); }
.word.completed-incorrect { color: var(--danger); text-decoration: underline; text-decoration-thickness: 2px; }

#videoContainer { position: relative; width: 100%; padding-top: 56.25%; background-color: #fff; border-radius: 0.5rem; overflow: hidden; }
#videoContainer > #youtube-player-div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.dictation-mode-hidden { position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; overflow: hidden; padding-top: 0; }

#explainModal { z-index: 9999; }
#explainModalContent .grid h5 { font-family: var(--font-family); }
.info-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.info-section h5 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.5rem; }
.info-chip { display: inline-block; background-color: #eef2ff; color: var(--primary); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; margin-right: 0.5rem; margin-bottom: 0.5rem; }
.rule-section { background-color: #f7f9fc; border-left: 4px solid var(--primary); padding: 0.75rem 1rem; margin-top: 1rem; border-radius: 0.25rem; }
.rule-section h5 { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--primary); text-transform: none; letter-spacing: normal; font-size: 1rem; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.5); } 80% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }
.animate-fade-in-down { animation: fadeInDown 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-bounce-in { animation: bounceIn 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
.delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; }

.audio-player-wrapper { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; background-color: #f8fafc; }
audio { display: none; }
.progress-bar { height: 8px; background-color: #e2e8f0; border-radius: 4px; overflow: hidden; }
.progress-bar-inner { height: 100%; width: 0%; background-color: var(--primary); transition: width 0.3s ease; }

#audioSeekSlider, #videoSeekSlider, .solution-seek-slider { -webkit-appearance: none; width: 100%; height: 8px; background: #eef2ff; border-radius: 5px; outline: none; transition: opacity .2s; }
#audioSeekSlider::-webkit-slider-thumb, #videoSeekSlider::-webkit-slider-thumb, .solution-seek-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--primary); cursor: pointer; border-radius: 50%; border: 3px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
#audioSeekSlider::-moz-range-thumb, #videoSeekSlider::-moz-range-thumb, .solution-seek-slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary); cursor: pointer; border-radius: 50%; border: 3px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

.pass-details-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1.5rem; align-items: center; }
.pass-details-grid dt { font-weight: 600; color: var(--text-secondary); }
.pass-details-grid dd { font-weight: 500; color: var(--text-primary); }

.progress-ring { position: relative; width: 150px; height: 150px; }
.progress-ring__circle { transition: stroke-dashoffset 0.8s ease-out; transform: rotate(-90deg); transform-origin: 50% 50%; }
.progress-ring__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.progress-ring__days { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--text-primary); }
.progress-ring__label { font-size: 1rem; color: var(--text-secondary); }

#passwordStrengthIndicator ul { list-style-type: none; padding: 0; }
#passwordStrengthIndicator li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; transition: color 0.3s ease; }
#passwordStrengthIndicator li.invalid { color: var(--text-secondary); }
#passwordStrengthIndicator li.invalid i { color: var(--danger); }
#passwordStrengthIndicator li.valid { color: var(--success); font-weight: 500; }
#passwordStrengthIndicator li.valid i { color: var(--success); }

/* Folder Cards */
.folder-card { border-radius: 0.75rem; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.folder-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2); }
.folder-icon { font-size: 4.5rem; color: #f59e0b; margin-bottom: 0.75rem; }
.folder-title { font-weight: 700; color: #1f2937; font-size: 1.05rem; line-height: 1.3; margin-bottom: 0.25rem; text-align: center; }
.folder-count { font-size: 0.8rem; color: #4b5563; font-weight: 500; }

/* Custom Seek Slider for Video Controls */
#customVideoSeekSlider {
    -webkit-appearance: none;
    appearance: none;
    background: #4b5563;
    outline: none;
    height: 4px;
    border-radius: 2px;
    transition: height 0.1s;
}
#customVideoSeekSlider:hover { height: 6px; }
#customVideoSeekSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dc2626;
    cursor: pointer;
}
#customVideoSeekSlider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dc2626;
    cursor: pointer;
    border: none;
}