:root {
    /* Light mode colors */
    --tblr-body-bg: #F5F3E7;
    --tblr-bg-surface: #E8E2D0;
    --tblr-bg-surface-secondary: #D4CBB2;
    --tblr-primary: #A67C52;
    --tblr-primary-rgb: 166, 124, 82;
    --tblr-body-color: #2C2C2C;
    --tblr-link-color: #A67C52;
    --tblr-link-hover-color: #3E3A2F;
    --tblr-breadcrumb-link-color: #A67C52; /* Accent color for breadcrumbs */
    
    /* Header and footer colors */
    --tblr-navbar-bg: #3E3A2F;
    --tblr-navbar-color: #F5F3E7;
    --tblr-footer-bg: #3E3A2F;
    --tblr-footer-color: #F5F3E7;

    /* Card colors */
    --tblr-card-bg: #E8E2D0;
    --tblr-card-cap-bg: #D4CBB2;
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
    --tblr-body-bg: #3E3A2F;
    --tblr-bg-surface: #2C2C2C;
    --tblr-bg-surface-secondary: #3E3A2F;
    --tblr-primary: #A67C52;
    --tblr-primary-rgb: 166, 124, 82;
    --tblr-body-color: #F5F3E7;
    --tblr-link-color: #A67C52;
    --tblr-link-hover-color: #D4CBB2;
    --tblr-breadcrumb-link-color: #D4CBB2; /* Lighter accent for dark mode */
    
    --tblr-card-bg: #2C2C2C;
    --tblr-card-cap-bg: #3E3A2F;
}

/* Custom styles for specific elements */
/* .card:hover {
    background-color: var(--tblr-bg-surface-secondary);
} */

.greek-text {
    color: #4B3D8F;
}

.navbar-dark {
    background-color: var(--tblr-navbar-bg);
    color: var(--tblr-navbar-color);
}

.footer {
    background-color: var(--tblr-footer-bg);
    color: var(--tblr-footer-color);
}

.form-control{
    background-color: var(--tblr-gray-100) !important;
}

/* Verse Update page - striped background for form cards */
/* Target cards in verse edit/update forms */
form[action*="/verse/"] .card,
body:has(form[action*="/verse/"][action*="/update"]) .card,
body:has(form[action*="/verse/"][action*="/edit"]) .card {
    background-color: var(--tblr-gray-50) !important;
}

/* Alternative approach using URL path */
body[data-page*="verse"][data-page*="edit"] .card,
body[data-page*="verse"][data-page*="update"] .card {
    background-color: var(--tblr-gray-50) !important;
}

/* Using a more specific selector based on form structure */
main form[action*="/verse/"] .card {
    background-color: var(--tblr-gray-50) !important;
}


form[action*="/book/"] .card,
body:has(form[action*="/book/"][action*="/update"]) .card,
body:has(form[action*="/book/"][action*="/edit"]) .card {
    background-color: var(--tblr-gray-50) !important;
}

/* Alternative approach using URL path */
body[data-page*="book"][data-page*="edit"] .card,
body[data-page*="book"][data-page*="update"] .card {
    background-color: var(--tblr-gray-50) !important;
}

/* Using a more specific selector based on form structure */
main form[action*="/book/"] .card {
    background-color: var(--tblr-gray-50) !important;
}

/* RTL Support for Hebrew text */
.hebrew-text,
textarea[style*="direction: rtl"] {
    direction: rtl !important;
    text-align: right !important;
    font-family: "Times New Roman", "David", "Arial Hebrew", serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Specific styling for Hebrew textarea input only */
.hebrew-textarea {
    direction: rtl !important;
    text-align: right !important;
    font-family: "Times New Roman", "David", "Arial Hebrew", serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Ensure form layout stays intact */
.form-group .hebrew-textarea {
    display: block !important;
    width: 100% !important;
}

/* Fix form layout for Hebrew textarea */
.form-group:has(.hebrew-textarea) {
    display: block !important;
}

.form-group:has(.hebrew-textarea) label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}

.form-group:has(.hebrew-textarea) .hebrew-textarea {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* Alternative approach for browsers that don't support :has() */
.hebrew-textarea {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* Ensure label stays above textarea */
label[for*="bible_text"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}

/* Backpack specific form layout fixes */
.card-body .form-group:has(.hebrew-textarea),
.card-body .form-group .hebrew-textarea {
    display: block !important;
    width: 100% !important;
}

.card-body .form-group:has(.hebrew-textarea) label,
.card-body label[for*="bible_text"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
}

/* Hebrew text in buttons and badges */
.hebrew-button,
.hebrew-badge {
    direction: rtl !important;
    font-family: "Times New Roman", "David", "Arial Hebrew", serif !important;
    font-size: 14px !important;
}

/* RTL textarea styling */
textarea[style*="direction: rtl"] {
    resize: vertical !important;
    min-height: 200px !important;
}

/* Hebrew word display */
.hebrew-words-container {
    direction: rtl !important;
    text-align: right !important;
}

.hebrew-words-container .btn {
    direction: rtl !important;
    font-family: "Times New Roman", "David", "Arial Hebrew", serif !important;
    font-size: 14px !important;
}

/* Greek text styling */
.greek-text,
.greek-textarea {
    direction: ltr !important;
    text-align: left !important;
    font-family: "Times New Roman", "Palatino Linotype", "Book Antiqua", serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Greek text in buttons and badges */
.greek-button,
.greek-badge {
    direction: ltr !important;
    font-family: "Times New Roman", "Palatino Linotype", "Book Antiqua", serif !important;
    font-size: 14px !important;
}

/* Greek words container */
.greek-words-container {
    direction: ltr !important;
    text-align: left !important;
}

.greek-words-container .btn {
    direction: ltr !important;
    font-family: "Times New Roman", "Palatino Linotype", "Book Antiqua", serif !important;
    font-size: 14px !important;
}

/* Ensure form layout stays intact for Greek textarea */
.form-group .greek-textarea {
    display: block !important;
    width: 100% !important;
}

.greek-textarea {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* Ensure label stays above Greek textarea */
label[for*="bible_text"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}

/* Backpack specific form layout fixes for Greek */
.card-body .form-group:has(.greek-textarea),
.card-body .form-group .greek-textarea {
    display: block !important;
    width: 100% !important;
}

.card-body .form-group:has(.greek-textarea) label,
.card-body label[for*="bible_text"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
}