/* Alice Suite Reader - Main Styles */

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    /* Reader app colors - Dark Green */
    --reader-primary: #155724;
    --reader-primary-light: #1e7e34;
    --reader-primary-dark: #0d4e1a;
    
    /* Consultant app colors — overridden on body.consultant-app via consultant-theme.css */
    --consultant-primary: #2d5a27;
    --consultant-primary-light: #3a7233;
    --consultant-primary-dark: #4a8a43;

    /* Administrator app colors - Dark blue */
    --admin-primary: #1a365d;
    --admin-primary-light: #2c5282;
    --admin-primary-dark: #0d2137;

    /* Narrative style – book-like feel */
    --narrative-font: 'Lora', Georgia, 'Times New Roman', serif;
    --narrative-ink: #2c2825;
    --narrative-ink-muted: #5c554d;
    --narrative-paper: #f7f4ef;
    --narrative-paper-card: #fefdfb;
    --narrative-border: #e8e2d9;
    --narrative-shadow: 0 1px 3px rgba(44, 40, 37, 0.08);
    --narrative-shadow-card: 0 2px 8px rgba(44, 40, 37, 0.06);
}

/* Reader app theme - Dark Green */
body.reader-app,
body[data-app="reader"] {
    --primary-color: var(--reader-primary);
}

body.reader-app .btn-primary,
body[data-app="reader"] .btn-primary {
    background-color: var(--reader-primary);
    border-color: var(--reader-primary);
}

body.reader-app .btn-primary:hover,
body[data-app="reader"] .btn-primary:hover {
    background-color: var(--reader-primary-dark);
    border-color: var(--reader-primary-dark);
}

body.reader-app .btn-outline-primary,
body[data-app="reader"] .btn-outline-primary {
    color: var(--reader-primary);
    border-color: var(--reader-primary);
}

body.reader-app .btn-outline-primary:hover,
body[data-app="reader"] .btn-outline-primary:hover {
    background-color: var(--reader-primary);
    border-color: var(--reader-primary);
    color: white;
}

body.reader-app .navbar-light,
body[data-app="reader"] .navbar-light {
    background-color: var(--reader-primary) !important;
}

body.reader-app .navbar-light .navbar-brand,
body.reader-app .navbar-light .nav-link,
body[data-app="reader"] .navbar-light .navbar-brand,
body[data-app="reader"] .navbar-light .nav-link {
    color: white !important;
}

body.reader-app .text-primary,
body[data-app="reader"] .text-primary {
    color: var(--reader-primary) !important;
}

body.reader-app #user-name-display,
body[data-app="reader"] #user-name-display {
    color: white !important;
}

body.reader-app #user-info-nav .nav-link,
body[data-app="reader"] #user-info-nav .nav-link {
    color: white !important;
}

body.reader-app .card-header,
body[data-app="reader"] .card-header {
    background-color: var(--reader-primary);
    color: white;
}

body.reader-app .card-header h5,
body.reader-app .card-header .card-title,
body[data-app="reader"] .card-header h5,
body[data-app="reader"] .card-header .card-title {
    color: white;
}

body.reader-app .badge.bg-secondary,
body[data-app="reader"] .badge.bg-secondary {
    background-color: var(--reader-primary-light) !important;
}

body.reader-app .bg-primary,
body[data-app="reader"] .bg-primary {
    background-color: var(--reader-primary) !important;
}

body.reader-app .border-primary,
body[data-app="reader"] .border-primary {
    border-color: var(--reader-primary) !important;
}

/* Consultant app theme - Red */
body.consultant-app,
body[data-app="consultant"] {
    --primary-color: var(--consultant-primary);
}

body.consultant-app .btn-primary,
body[data-app="consultant"] .btn-primary {
    background-color: var(--consultant-primary);
    border-color: var(--consultant-primary);
}

body.consultant-app .btn-primary:hover,
body[data-app="consultant"] .btn-primary:hover {
    background-color: var(--consultant-primary-dark);
    border-color: var(--consultant-primary-dark);
}

body.consultant-app .btn-outline-primary,
body[data-app="consultant"] .btn-outline-primary {
    color: var(--consultant-primary);
    border-color: var(--consultant-primary);
}

body.consultant-app .btn-outline-primary:hover,
body[data-app="consultant"] .btn-outline-primary:hover {
    background-color: var(--consultant-primary);
    border-color: var(--consultant-primary);
    color: white;
}

body.consultant-app .navbar-light,
body[data-app="consultant"] .navbar-light {
    background-color: var(--consultant-primary) !important;
}

body.consultant-app .navbar-light .navbar-brand,
body.consultant-app .navbar-light .nav-link,
body[data-app="consultant"] .navbar-light .navbar-brand,
body[data-app="consultant"] .navbar-light .nav-link {
    color: white !important;
}

body.consultant-app .navbar-light #user-name-brand,
body[data-app="consultant"] .navbar-light #user-name-brand {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.consultant-app .text-primary,
body[data-app="consultant"] .text-primary {
    color: var(--consultant-primary) !important;
}

body.consultant-app #user-name-display,
body[data-app="consultant"] #user-name-display {
    color: white !important;
}

body.consultant-app #user-info-nav .nav-link,
body[data-app="consultant"] #user-info-nav .nav-link {
    color: white !important;
}

body.consultant-app .card-header,
body[data-app="consultant"] .card-header {
    background-color: var(--consultant-primary);
    color: white;
}

body.consultant-app .card-header h5,
body.consultant-app .card-header .card-title,
body[data-app="consultant"] .card-header h5,
body[data-app="consultant"] .card-header .card-title {
    color: white;
}

body.consultant-app .badge.bg-secondary,
body[data-app="consultant"] .badge.bg-secondary {
    background-color: var(--consultant-primary-light) !important;
}

body.consultant-app .bg-primary,
body[data-app="consultant"] .bg-primary {
    background-color: var(--consultant-primary) !important;
}

body.consultant-app .border-primary,
body[data-app="consultant"] .border-primary {
    border-color: var(--consultant-primary) !important;
}

/* Administrator app theme - Dark blue */
body.admin-app,
body[data-app="admin"] {
    --primary-color: var(--admin-primary);
}

body.admin-app .btn-primary,
body[data-app="admin"] .btn-primary {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
}

body.admin-app .btn-primary:hover,
body[data-app="admin"] .btn-primary:hover {
    background-color: var(--admin-primary-dark);
    border-color: var(--admin-primary-dark);
}

body.admin-app .btn-outline-primary,
body[data-app="admin"] .btn-outline-primary {
    color: var(--admin-primary);
    border-color: var(--admin-primary);
}

body.admin-app .btn-outline-primary:hover,
body[data-app="admin"] .btn-outline-primary:hover {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
}

body.admin-app .navbar-light,
body[data-app="admin"] .navbar-light {
    background-color: var(--admin-primary) !important;
}

body.admin-app .navbar-light .navbar-brand,
body.admin-app .navbar-light .nav-link,
body[data-app="admin"] .navbar-light .navbar-brand,
body[data-app="admin"] .navbar-light .nav-link {
    color: white !important;
}

body.admin-app .text-primary,
body[data-app="admin"] .text-primary {
    color: var(--admin-primary) !important;
}

body.admin-app #user-name-display,
body[data-app="admin"] #user-name-display {
    color: white !important;
}

body.admin-app #user-info-nav .nav-link,
body[data-app="admin"] #user-info-nav .nav-link {
    color: white !important;
}

body.admin-app .card-header,
body[data-app="admin"] .card-header {
    background-color: var(--admin-primary);
    color: white;
}

body.admin-app .card-header h5,
body.admin-app .card-header .card-title,
body[data-app="admin"] .card-header h5,
body[data-app="admin"] .card-header .card-title {
    color: white;
}

body.admin-app .badge.bg-secondary,
body[data-app="admin"] .badge.bg-secondary {
    background-color: var(--admin-primary-light) !important;
}

body.admin-app .bg-primary,
body[data-app="admin"] .bg-primary {
    background-color: var(--admin-primary) !important;
}

body.admin-app .border-primary,
body[data-app="admin"] .border-primary {
    border-color: var(--admin-primary) !important;
}

/* Admin login page: dark blue background */
body.admin-app main,
body[data-app="admin"] main {
    background-color: var(--admin-primary-dark);
    min-height: calc(100vh - 200px);
    margin-top: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

body.admin-app .card,
body[data-app="admin"] .card {
    border-color: var(--admin-primary-light);
}

body.admin-app .card-title,
body[data-app="admin"] .card-title {
    color: var(--admin-primary);
}

body.admin-app footer.bg-light,
body[data-app="admin"] footer.bg-light {
    background-color: var(--admin-primary-dark) !important;
    color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid var(--admin-primary);
}

body.admin-app footer .mb-0,
body[data-app="admin"] footer .mb-0 {
    color: inherit;
}

/* ========== Narrative style (Reader, Consultant, Admin) – simple, book-like ========== */
body.reader-app,
body.consultant-app,
body.admin-app,
body[data-app="reader"],
body[data-app="consultant"],
body[data-app="admin"] {
    font-family: var(--narrative-font);
    line-height: 1.65;
    color: var(--narrative-ink);
}

body.reader-app h1, body.reader-app h2, body.reader-app h3, body.reader-app h4, body.reader-app h5, body.reader-app h6,
body.consultant-app h1, body.consultant-app h2, body.consultant-app h3, body.consultant-app h4, body.consultant-app h5, body.consultant-app h6,
body.admin-app h1, body.admin-app h2, body.admin-app h3, body.admin-app h4, body.admin-app h5, body.admin-app h6,
body[data-app="reader"] h1, body[data-app="reader"] h2, body[data-app="reader"] h3, body[data-app="reader"] h4, body[data-app="reader"] h5, body[data-app="reader"] h6,
body[data-app="consultant"] h1, body[data-app="consultant"] h2, body[data-app="consultant"] h3, body[data-app="consultant"] h4, body[data-app="consultant"] h5, body[data-app="consultant"] h6,
body[data-app="admin"] h1, body[data-app="admin"] h2, body[data-app="admin"] h3, body[data-app="admin"] h4, body[data-app="admin"] h5, body[data-app="admin"] h6 {
    font-family: var(--narrative-font);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--narrative-ink);
}

/* Page background – warm paper for Reader and Consultant */
body.reader-app main,
body.consultant-app main,
body[data-app="reader"] main,
body[data-app="consultant"] main {
    background-color: var(--narrative-paper);
    border-radius: 0;
    padding-top: 1.75rem;
    padding-bottom: 2rem;
}

/* Cards – paper-like for Reader and Consultant */
body.reader-app .card,
body.consultant-app .card,
body[data-app="reader"] .card,
body[data-app="consultant"] .card {
    background-color: var(--narrative-paper-card);
    border: 1px solid var(--narrative-border);
    border-radius: 6px;
    box-shadow: var(--narrative-shadow-card);
}

body.reader-app .card-header,
body[data-app="reader"] .card-header {
    border-bottom: 1px solid var(--narrative-border);
    border-radius: 6px 6px 0 0;
}

body.consultant-app .card-header,
body[data-app="consultant"] .card-header {
    border-bottom: 1px solid var(--narrative-border);
    border-radius: 6px 6px 0 0;
}

/* Navbar – subtle narrative touch (keep app colors, add soft shadow) */
body.reader-app .navbar,
body.consultant-app .navbar,
body.admin-app .navbar,
body[data-app="reader"] .navbar,
body[data-app="consultant"] .navbar,
body[data-app="admin"] .navbar {
    box-shadow: var(--narrative-shadow);
    font-family: var(--narrative-font);
}

body.reader-app .navbar-brand,
body.consultant-app .navbar-brand,
body.admin-app .navbar-brand,
body[data-app="reader"] .navbar-brand,
body[data-app="consultant"] .navbar-brand,
body[data-app="admin"] .navbar-brand {
    font-family: var(--narrative-font);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Footer – warm, quiet for Reader and Consultant (Admin keeps dark) */
body.reader-app footer.bg-light,
body.consultant-app footer.bg-light,
body[data-app="reader"] footer.bg-light,
body[data-app="consultant"] footer.bg-light {
    background-color: var(--narrative-paper) !important;
    border-top: 1px solid var(--narrative-border);
    color: var(--narrative-ink-muted);
}

body.reader-app footer .mb-0,
body.consultant-app footer .mb-0,
body[data-app="reader"] footer .mb-0,
body[data-app="consultant"] footer .mb-0 {
    color: var(--narrative-ink-muted);
    font-size: 0.9rem;
}

/* Breadcrumbs – chapter-like */
body.reader-app .breadcrumb,
body.consultant-app .breadcrumb,
body.admin-app .breadcrumb,
body[data-app="reader"] .breadcrumb,
body[data-app="consultant"] .breadcrumb,
body[data-app="admin"] .breadcrumb {
    font-family: var(--narrative-font);
    font-size: 0.875rem;
    color: var(--narrative-ink-muted);
}

body.reader-app .breadcrumb-item a,
body.consultant-app .breadcrumb-item a,
body.admin-app .breadcrumb-item a,
body[data-app="reader"] .breadcrumb-item a,
body[data-app="consultant"] .breadcrumb-item a,
body[data-app="admin"] .breadcrumb-item a {
    color: var(--narrative-ink);
    text-decoration: none;
}

body.reader-app .breadcrumb-item a:hover,
body.consultant-app .breadcrumb-item a:hover,
body.admin-app .breadcrumb-item a:hover,
body[data-app="reader"] .breadcrumb-item a:hover,
body[data-app="consultant"] .breadcrumb-item a:hover,
body[data-app="admin"] .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Muted text in narrative tone */
body.reader-app .text-muted,
body.consultant-app .text-muted,
body[data-app="reader"] .text-muted,
body[data-app="consultant"] .text-muted {
    color: var(--narrative-ink-muted) !important;
}

/* Buttons – slightly softer radius, narrative feel */
body.reader-app .btn,
body.consultant-app .btn,
body.admin-app .btn,
body[data-app="reader"] .btn,
body[data-app="consultant"] .btn,
body[data-app="admin"] .btn {
    font-family: var(--narrative-font);
    border-radius: 5px;
    font-weight: 500;
}

/* Lead and display text – chapter-like */
body.reader-app .lead,
body.consultant-app .lead,
body.admin-app .lead,
body[data-app="reader"] .lead,
body[data-app="consultant"] .lead,
body[data-app="admin"] .lead {
    font-family: var(--narrative-font);
    font-weight: 400;
    color: var(--narrative-ink-muted);
}

body.reader-app .display-1, body.reader-app .display-2, body.reader-app .display-3, body.reader-app .display-4, body.reader-app .display-5, body.reader-app .display-6,
body.consultant-app .display-1, body.consultant-app .display-2, body.consultant-app .display-3, body.consultant-app .display-4, body.consultant-app .display-5, body.consultant-app .display-6,
body.admin-app .display-1, body.admin-app .display-2, body.admin-app .display-3, body.admin-app .display-4, body.admin-app .display-5, body.admin-app .display-6,
body[data-app="reader"] .display-1, body[data-app="reader"] .display-2, body[data-app="reader"] .display-3, body[data-app="reader"] .display-4, body[data-app="reader"] .display-5, body[data-app="reader"] .display-6,
body[data-app="consultant"] .display-1, body[data-app="consultant"] .display-2, body[data-app="consultant"] .display-3, body[data-app="consultant"] .display-4, body[data-app="consultant"] .display-5, body[data-app="consultant"] .display-6,
body[data-app="admin"] .display-1, body[data-app="admin"] .display-2, body[data-app="admin"] .display-3, body[data-app="admin"] .display-4, body[data-app="admin"] .display-5, body[data-app="admin"] .display-6 {
    font-family: var(--narrative-font);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--narrative-ink);
}

/* Form controls – gentle border */
body.reader-app .form-control,
body.consultant-app .form-control,
body.admin-app .form-control,
body[data-app="reader"] .form-control,
body[data-app="consultant"] .form-control,
body[data-app="admin"] .form-control {
    border-color: var(--narrative-border);
    border-radius: 5px;
}

body.reader-app .form-control:focus,
body.consultant-app .form-control:focus,
body.admin-app .form-control:focus,
body[data-app="reader"] .form-control:focus,
body[data-app="consultant"] .form-control:focus,
body[data-app="admin"] .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.06);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Ensure navbar brand flex container doesn't break in narrow windows */
.navbar-brand.d-flex {
    min-width: 0; /* Allow flex items to shrink */
    flex-wrap: nowrap;
}

.card {
    border: none;
    border-radius: 8px;
}

.btn {
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
}

.form-control {
    border-radius: 4px;
}

/* Reader specific styles */
.reading-content {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.word-highlight {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.word-highlight:hover {
    background-color: #fff3cd;
}

/* Dictionary popup */
.dictionary-popup {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-width: 300px;
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .reading-content {
        font-size: 1rem;
        padding: 0 1rem;
    }
}