:root {
    --mobile-bg: #fff;
    --mobile-semi-bg: #ffffff88;
    --mobile-text: #212529;
    --mobile-card-bg: #ffffff75;
    --mobile-border: #f0f0f0;
    --mobile-bar-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism light */
}

[data-theme="dark"] {
    --mobile-bg: #121212;
    --mobile-semi-bg: #12121288;
    --mobile-text: #e0e0e0;
    --mobile-card-bg: #1e1e1e75;
    --mobile-border: #333333;
    --mobile-bar-bg: rgba(30, 30, 30, 0.85); /* Glassmorphism dark */
}

body.mobile-layout {
    background-color: var(--mobile-bg);
    color: var(--mobile-text);
}

/* Glassmorphism for bars */
.mobile-top-bar, .mobile-bottom-bar {
    z-index: 1040; /* Higher than offcanvas backdrop sometimes */
    background-color: var(--mobile-bar-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--mobile-border) !important;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Remove solid bg classes that might conflict */
.bg-body {
    background-color: var(--mobile-bg) !important;
}

.bg-semi-body {
    background-color: var(--mobile-semi-bg) !important;
}

/* Correct icon colors in bars */
.mobile-top-bar button, 
.mobile-top-bar span,
.mobile-bottom-bar a {
    color: var(--mobile-text) !important;
}

[data-theme="dark"] .mobile-top-bar button, 
[data-theme="dark"] .mobile-top-bar span,
[data-theme="dark"] .mobile-bottom-bar a {
    color: #f0f0f0 !important;
}

/* Bottom bar sizing fix */
.mobile-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 15px);
    padding-top: 8px;
}

.mobile-bottom-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 10px 0;
    gap: 12px; /* Space between icon and text */
}

.mobile-bottom-bar i {
    font-size: 1.4rem; /* Larger icons */
    margin-bottom: 0;
}

.mobile-bottom-bar small {
    font-size: 0.8rem; /* Larger text */
    line-height: 1.2;
    font-weight: 500;
}

/* Theme Switcher Fix */
[data-theme="dark"] .offcanvas {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

[data-theme="dark"] .offcanvas-header .btn-close {
    filter: invert(1);
}

[data-theme="dark"] .bg-light {
    background-color: #2c2c2c !important; /* Darker bg for "light" elements in dark mode */
    color: #e0e0e0;
}

[data-theme="dark"] .list-group-item {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}

[data-theme="dark"] .list-group-item-action:hover {
    background-color: #333;
}

/* Book List Item */
.mobile-book-list-item {
    background: var(--mobile-card-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

[data-theme="dark"] .mobile-book-list-item {
    box-shadow: none;
}

.mobile-book-cover {
    width: 50px;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #eee;
}

.mobile-book-info {
    flex-grow: 1;
    min-width: 0;
}

.mobile-book-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mobile-text);
}

.mobile-book-author {
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active Nav State */
.active-nav {
    color: #3b82f6 !important; /* Brighter blue for visibility */
    opacity: 1 !important;
}

.opacity-75 {
    opacity: 0.6;
}

/* Add extra padding to body to prevent content hiding behind fixed bars */
.mobile-content {
    padding-top: 54px !important; /* Top bar + spacing */
    padding-bottom: 60px !important; /* Bottom bar + spacing */
}

/* Form controls in dark mode */
[data-theme="dark"] .form-select {
    background-color: #2c2c2c;
    border-color: #444;
    color: #fff;
}

[data-theme="dark"] .form-control::placeholder {
    color: #888;
}

[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: #12121230 !important;
}

.mobile-content form .card-body input {
    background-color: var(--mobile-semi-bg) !important;
}

/* Fix "Add Book" empty page potential issue: Ensure card bg is correct */
.card {
    background-color: var(--mobile-card-bg);
    border: 1px solid var(--mobile-border);
}

.safe-area-pb {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Fix form-floating labels in dark mode */
[data-theme="dark"] .form-floating > label {
    color: #b0b0b0 !important;
    background-color: transparent !important; /* Ensure no weird background */
}

/* Ensure consistent text color for inputs in dark mode */
[data-theme="dark"] .form-control {
    color: #fff !important;
    background-color: transparent !important;
}

/* Fix autofill background in dark mode (tricky, but try webkit-text-fill-color) */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover, 
[data-theme="dark"] input:-webkit-autofill:focus, 
[data-theme="dark"] input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #2c2c2c inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}