/* myownbiblestyle.css */

/* പൊതുവായ പേജ് ശൈലി */
body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    background-color: #f4f7f6; 
    margin: 0; 
    padding: 10px; 
    color: #333; 
    transition: background 0.3s, color 0.3s; 
}

/* ഡാർക്ക് മോഡ് ശൈലികൾ (Dark Mode) */
body.dark-mode { 
    background-color: #1a1a1a; 
    color: #f4f4f4; 
}
body.dark-mode .container { 
    background: #262626; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}
body.dark-mode .top-bar { 
    background: #333; 
}
body.dark-mode .book-card { 
    background: #334455; 
    border-color: #445566; 
    color: #fff; 
}
body.dark-mode .book-card:hover, body.dark-mode .book-card.active { 
    background: #2980b9; 
}
body.dark-mode .chapter-card { 
    background: #333; 
    color: #fff; 
}
body.dark-mode .chapter-card:hover, body.dark-mode .chapter-card.active { 
    background: #3498db; 
}
body.dark-mode .bible-reader-box { 
    background: #2d2d2d; 
    border-color: #444; 
}
body.dark-mode .bible-text { 
    color: #e0e0e0; 
}
body.dark-mode .search-result-item { 
    background: #2d2d2d; 
}
body.dark-mode h1 { 
    color: #fff; 
}
body.dark-mode h3 { 
    color: #ccc; 
}
body.dark-mode .section-btn { 
    background: #444; 
    color: #fff; 
}
body.dark-mode .section-btn.active { 
    background: #fff; 
    color: #000; 
}

/* പ്രധാന കണ്ടെയ്നർ (Full Width) */
.container { 
    width: 96%; 
    max-width: 100%; 
    margin: 0 auto; 
    background: white; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

h1 { 
    text-align: center; 
    color: #2c3e50; 
    margin: 0 0 15px 0; 
    font-size: 20px; 
}

h3 { 
    margin: 5px 0; 
    font-size: 14px; 
    color: #555; 
}

/* സെർച്ച് കൗണ്ട് ബാഡ്ജ് */
.search-badge { 
    background: #27ae60; 
    color: white; 
    padding: 3px 8px; 
    border-radius: 12px; 
    font-size: 12px; 
    font-weight: bold; 
    margin-left: 5px; 
    display: inline-block; 
    vertical-align: middle; 
}

/* മൂന്ന് ഓപ്ഷൻ ബട്ടണുകൾ (Tabs) */
.section-selector { 
    display: flex; 
    justify-content: center; 
    gap: 6px; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
}
.section-btn { 
    padding: 6px 14px; 
    font-size: 13px; 
    font-weight: bold; 
    background: #e0e0e0; 
    color: #333; 
    border: none; 
    border-radius: 20px; 
    cursor: pointer; 
    text-decoration: none; 
}
.section-btn.active { 
    background: #2c3e50; 
    color: white; 
}

/* മുകളിലെ ബാർ */
.top-bar { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-bottom: 15px; 
    align-items: center; 
    justify-content: space-between; 
    background: #f9f9f9; 
    padding: 6px; 
    border-radius: 6px; 
}
.search-box { 
    display: flex; 
    gap: 4px; 
    max-width: 350px; 
    width: 100%; 
}
.search-box input { 
    flex: 1; 
    padding: 6px; 
    border: 1px solid #bdc3c7; 
    border-radius: 4px; 
    font-size: 13px; 
}

/* ഫോണ്ട്, ഡാർക്ക് മോഡ് കൺട്രോളുകൾ */
.controls { 
    display: flex; 
    gap: 5px; 
}
.control-btn { 
    padding: 6px 10px; 
    font-size: 13px; 
    font-weight: bold; 
    border: 1px solid #bdc3c7; 
    background: white; 
    border-radius: 4px; 
    cursor: pointer; 
    color: #333; 
}
body.dark-mode .control-btn { 
    background: #444; 
    color: white; 
    border-color: #555; 
}

/* പുസ്തകങ്ങളുടെ ഒതുക്കമുള്ള ഗ്രിഡ് (Congested layout) */
.books-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); 
    gap: 4px; 
    margin-bottom: 20px; 
}
.book-card { 
    background: #ebf3f9; 
    border: 1px solid #cedee9; 
    padding: 6px 4px; 
    text-align: center; 
    border-radius: 4px; 
    text-decoration: none; 
    color: #2c3e50; 
    font-weight: 500; 
    font-size: 12px; 
    transition: all 0.2s ease; 
}
.book-card:hover, .book-card.active { 
    background: #2980b9; 
    color: white; 
    border-color: #2980b9; 
}

/* അധ്യായങ്ങളുടെ ഗ്രിഡ് */
.chapters-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); 
    gap: 4px; 
    margin-bottom: 20px; 
    background: #fdfefe; 
    padding: 10px; 
    border: 1px dashed #3498db; 
    border-radius: 6px; 
}
body.dark-mode .chapters-grid { 
    background: #222; 
    border-color: #444; 
}
.chapter-card { 
    background: #f0f3f4; 
    padding: 6px 2px; 
    text-align: center; 
    border-radius: 4px; 
    text-decoration: none; 
    color: #34495e; 
    font-weight: bold; 
    font-size: 12px; 
}
.chapter-card:hover, .chapter-card.active { 
    background: #3498db; 
    color: white; 
}

/* ബട്ടണുകൾ */
.btn { 
    padding: 6px 12px; 
    background: #2980b9; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    text-decoration: none; 
    font-size: 13px; 
    display: inline-block; 
}
.btn-secondary { 
    background: #27ae60; 
}

/* വായനാ ഭാഗം (Reading Mode Box) */
.bible-reader-box { 
    background: #fffcf6; 
    border: 1px solid #f3e5ab; 
    padding: 15px; 
    border-radius: 6px; 
}
.bible-text { 
    line-height: 1.8; 
    font-size: 17px; 
    text-align: justify; 
    color: #232323; 
}
.verse-number { 
    font-weight: bold; 
    color: #e67e22; 
    margin-right: 4px; 
    font-size: 12px; 
    vertical-align: super; 
    margin-left: 6px; 
}

/* മുൻപത്തെ/അടുത്ത അധ്യായം നാവിഗേഷൻ */
.chapter-nav { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 20px; 
    padding-top: 12px; 
    border-top: 1px solid #eee; 
}

/* തിരച്ചിൽ ഫലം കാണിക്കുന്ന ബോക്സ് */
.search-result-item { 
    background: #fafafa; 
    border-left: 4px solid #2980b9; 
    padding: 10px; 
    margin-bottom: 12px; 
    border-radius: 0 6px 6px 0; 
    font-size: 15px; 
}
.search-ref { 
    font-weight: bold; 
    color: #2980b9; 
    margin-bottom: 3px; 
}
/* ഓരോ വാക്യവും ഓരോ കോളം/വരിയാക്കാനുള്ള ഡിസൈൻ */
.verse-row {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    display: block; /* ഓരോ വാക്യവും പുതിയ വരിയിൽ വരാൻ */
}

/* ഓരോ വാക്യവും ഓരോ വരിയാക്കാനുള്ള ഫ്ലെക്സ് ഡിസൈൻ */
.verse-row {
    display: flex;
    align-items: flex-start; /* വചനം നീളമുള്ളതാണെങ്കിലും നമ്പർ മുകളിൽ തന്നെ നിൽക്കാൻ */
    padding: 6px 10px;
    margin-bottom: 3px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* വാക്യങ്ങൾക്ക് മുകളിലൂടെ മൗസ് കൊണ്ടുപോകുമ്പോൾ */
.verse-row:hover {
    background-color: #f0f4f8;
}
body.dark-mode .verse-row:hover {
    background-color: #3a3a3a;
}

/* ഇടതുവശത്തെ റഫറൻസ് ബോക്സിന്റെ വീതി കൂട്ടിയത് */
.verse-num-box {
    min-width: 65px;         /* വീതി 30-ൽ നിന്നും 65px ആയി കൂട്ടി */
    max-width: 65px;
    text-align: center;
    background-color: #f0f3f4;
    color: #555555;
    font-weight: bold;
    font-size: 10px;         /* അക്ഷരങ്ങൾ കൃത്യമായി കൊള്ളാൻ വലിപ്പം ഇത്തിരി കുറച്ചു */
    padding: 2px 3px;
    border-radius: 4px;
    margin-right: 12px;
    border: 1px solid #dcdde1;
}

/* ഡാർക്ക് മോഡിലെ നമ്പറിന്റെ കോളം ബോക്സ് */
body.dark-mode .verse-num-box {
    background-color: #333;
    border-color: #444;
    color: #e67e22;
}

/* വചനം അടങ്ങുന്ന വലത് വശത്തെ ഭാഗം (വരികൾ തമ്മിൽ അടുപ്പിച്ചു നിർത്തിയത്) */
.verse-text-content {
    flex: 1;
    font-size: 16px; /* അക്ഷരങ്ങൾ ഒതുക്കമുള്ളതാക്കി */
    line-height: 1.4; /* വരികൾ തമ്മിലുള്ള അകലം കുറച്ചു */
    text-align: left;
}

/* ഹൈലൈറ്റ് കളർ (Light Mode) */
.verse-highlight {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107;
}
.verse-highlight .verse-num-box {
    background-color: #ffeeba;
    border-color: #ffeeaa;
}

/* ഹൈലൈറ്റ് കളർ (Dark Mode) */
body.dark-mode .verse-highlight {
    background-color: #4d3d1a !important;
    border-left: 4px solid #ffc107;
}
body.dark-mode .verse-highlight .verse-num-box {
    background-color: #5d4a1f;
    border-color: #6d5724;
}
/* അധ്യായങ്ങളുടെ ഗ്രിഡ് പുസ്തകത്തിന് താഴെ ഫുൾ വിഡ്ത്തിൽ വരാൻ */
.chapters-row-container {
    grid-column: 1 / -1; /* ഗ്രിഡിലെ എല്ലാ കോളങ്ങളെയും കവർ ചെയ്ത് ഫുൾ വിഡ്ത്തിൽ വരാൻ */
    background: #fdfefe;
    padding: 8px;
    border: 1px dashed #3498db;
    border-radius: 6px;
    margin: 4px 0 8px 0;
}
/* അധ്യായങ്ങളുടെ ഗ്രിഡ് അകലം കുറച്ചത് */
.chapters-inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
}
/* വചനത്തിന്റെ അവസാനം വരുന്ന ആഡ് റഫറൻസ് ബട്ടൺ */
.add-ref-btn {
    background-color: #646465; /* പച്ച നിറം */
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    user-select: none;
}
.add-ref-btn:hover {
    background-color: #218c4e; /* മൗസ് കൊണ്ടുപോകുമ്പോൾ അല്പം ഇരുണ്ട പച്ച */
}
.search-word-highlight {
    background-color: #ffeb3b !important; /* തിളക്കമുള്ള മഞ്ഞ നിറം */
    color: #000000 !important;            /* കറുത്ത അักษരങ്ങൾ */
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    display: inline-block !important;
}
body.dark-mode .search-word-highlight {
    background-color: #ff9800 !important; 
    color: #000000 !important;
}
/* --- വചനത്തിന് ശേഷമുള്ള ഇൻലൈൻ ബ്രാക്കറ്റ് റഫറൻസ് സ്റ്റൈൽ (ഇത് മാത്രം നിലനിർത്തി പഴയ പോപ്പ്-അപ്പ് കോഡുകൾ പൂർണ്ണമായി ഒഴിവാക്കി) --- */
.inline-bible-ref {
    font-size: 12px;
    color: #2980b9;
    font-weight: bold;
    margin-left: 5px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}
.inline-bible-ref:hover {
    text-decoration: underline;
}
body.dark-mode .inline-bible-ref {
    color: #3498db;
}

/* --- മൗസ് ഓവർ ചെയ്യുമ്പോൾ വചനം കാണിക്കുന്ന ടൂൾടിപ്പ് (Tooltip) --- */
.inline-bible-ref::after {
    content: attr(data-verse-text); /* വചനം ഇതിലേക്ക് തനിയെ വരും */
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333333;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: normal;
    white-space: normal;
    width: 250px; /* ബോക്സിന്റെ വീതി */
    z-index: 3000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: none; /* ആദ്യം മറച്ചുവെക്കുന്നു */
    line-height: 1.4;
    text-align: left;
}

/* മൗസ് മുകളിൽ കൊണ്ടുവരുമ്പോൾ ടൂൾടിപ്പ് കാണിക്കാൻ */
.inline-bible-ref:hover::after {
    display: block;
}

/* ടൂൾടിപ്പിന്റെ താഴെയുള്ള ചെറിയ അമ്പ് അടയാളം (Arrow) */
.inline-bible-ref::before {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    display: none;
    z-index: 3000;
}
.inline-bible-ref:hover::before {
    display: block;
}

/* ഡാർക്ക് മോഡിലെ ടൂൾടിപ്പ് സ്റ്റൈൽ */
body.dark-mode .inline-bible-ref::after {
    background-color: #f0f3f4;
    color: #222222;
}
body.dark-mode .inline-bible-ref::before {
    border-color: #f0f3f4 transparent transparent transparent;
}