/*
 * Custom Stylesheet for the AI Writing Program
 * Author: Your Name
 * Date: August 2025
 * Description: Modern, clean, and professional design.
 */

:root {
    --primary-color: #0056b3; /* Dark Blue */
    --primary-hover: #004494;
    --secondary-color: #6c757d; /* Gray */
    --accent-color: #20c997; /* Teal */
    --background-color: #f8f9fa; /* Light Gray */
    --card-background: #ffffff; /* White */
    --text-color: #343a40; /* Dark Gray */
    --heading-color: #212529; /* Black */
    --border-color: #e9ecef; /* Lighter Gray */
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;

    /* Reference checker colors */
    --cite-ok-bg: #eaf7ee;     /* pale green */
    --cite-miss-bg: #fdecea;    /* pale red */
    --ref-matched-bg: #eef5ff; /* pale blue */
    --ref-unmatched-bg: #fff7e6; /* pale amber */

    --sem-ok: #198754;     /* bootstrap success */
    --sem-flag: #dc3545;  /* bootstrap danger */
    --sem-unknown: #6c757d; /* bootstrap secondary */
}

html, body {
    height: 100%;
}

body {
    background-color: var(--background-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-wrapper {
    flex: 1 0 auto;
}

.container-fluid {
    max-width: 1400px;
}

/* --- Header & Navigation --- */
header { position: relative; z-index: 1030; }
.navbar-brand { font-weight: 700; color: var(--heading-color) !important; }
.nav-link { font-weight: 500; color: var(--text-color) !important; }
.nav-link.active, .nav-link:hover { color: var(--primary-color) !important; }
.navbar-profile-image { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; margin-right: 8px; }
.user-info { font-weight: 600; margin-right: 15px; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 700; }
.lead { font-size: 1.25rem; font-weight: 300; }

/* --- Utility Classes --- */
.text-primary-dark { color: var(--primary-color) !important; }
.bg-primary-light { background-color: #e6f0ff !important; }

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--box-shadow); }

.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.btn-accent:hover { background-color: #1a9e7a; border-color: #1a9e7a; transform: translateY(-2px); box-shadow: var(--box-shadow); }

/* --- Cards and UI Elements --- */
.card { border: none; border-radius: 0.75rem; box-shadow: var(--box-shadow); transition: transform var(--transition-speed); background-color: var(--card-background); }
.card:hover { transform: translateY(-5px); }
.card-header {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.form-control { border-radius: 0.5rem; border: 1px solid var(--border-color); }
.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(0, 86, 179, 0.25); }

/* --- Alerts --- */
.alert { border-radius: 0.5rem; padding: 1rem 1.25rem; }

/* --- Dashboard Specific --- */
.dashboard-card-icon { font-size: 2rem; color: var(--primary-color); }
.score-green { color: #28a745; }
.score-amber { color: #ffc107; }
.score-red { color: #dc3545; }

/* --- Tables --- */
.table-hover tbody tr:hover { background-color: var(--background-color); }
.table thead th { border-bottom: 2px solid var(--primary-color); font-weight: 600; }
.table td, .table th { vertical-align: middle; }

/* --- Student Detail Page --- */
.student-header { background-color: var(--card-background); border-radius: 0.75rem; box-shadow: var(--box-shadow); padding: 2rem; }

/* --- Pagination --- */
.page-link { color: var(--primary-color); border-radius: 0.5rem; margin: 0 0.25rem; transition: all var(--transition-speed); }
.page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); }
.page-link:hover { background-color: var(--primary-color); color: white; }

/* --- Specific Components (e.g., Reports, Marking) --- */
.report-score { font-size: 2.5rem; font-weight: 700; }
.report-explanation ul { list-style-type: none; padding-left: 0; }
.report-explanation li:before {
    content: "•";
    color: var(--primary-color);
    font-size: 1.5rem;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* --- Responsive Design --- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        box-shadow: var(--box-shadow);
        border-radius: 0.75rem;
        margin-top: 10px;
        background-color: white;
        padding: 1rem;
    }
}

/* =========================================================
   Sticky footer + editor layout fixes
   ========================================================= */

.footer { position: static !important; width: 100%; margin-top: auto; }
body.d-flex.flex-column.min-vh-100 { min-height: 100vh; }
.page-container { flex: 1 0 auto; }
.main-content { flex: 1 0 auto; min-height: 0; }

/* Make the editor + sidebar fit the viewport without pushing the footer up */
@media (min-width: 992px) {
    #editor-container,
    #comment-sidebar { height: calc(100vh - 220px); }
    #comment-sidebar { overflow-y: auto; }
}
@media (max-width: 991.98px) {
    #editor-container, #comment-sidebar { height: auto; min-height: 300px; }
}

/* =========================================================
   Reference Checker styling
   ========================================================= */

.refcheck-output {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    line-height: 1.75;
    font-size: 1rem;
    white-space: normal;
}

/* In-text citation wrap */
.refcheck-output mark.citation {
    padding: 0 .15rem;
    border-radius: .25rem;
    background: #fff9e0; /* neutral pale */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}

/* Match status fills */
.refcheck-output mark.citation-ok { background: var(--cite-ok-bg); }
.refcheck-output mark.citation-missing { background: var(--cite-miss-bg); }

/* Semantic underlines (very visible) */
.refcheck-output mark.citation.sem-ok {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--sem-ok);
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
    text-decoration-skip-ink: none;
}
.refcheck-output mark.citation.sem-flag {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--sem-flag);
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
    text-decoration-skip-ink: none;
}
.refcheck-output mark.citation.sem-unknown {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--sem-unknown);
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
    text-decoration-skip-ink: none;
}

/* Extra fallback: a slim bottom stripe if some browser ignores text-decoration on <mark> */
.refcheck-output mark.citation.sem-ok::after,
.refcheck-output mark.citation.sem-flag::after,
.refcheck-output mark.citation.sem-unknown::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 1px;
}
.refcheck-output mark.citation.sem-ok::after { background: var(--sem-ok); }
.refcheck-output mark.citation.sem-flag::after { background: var(--sem-flag); }
.refcheck-output mark.citation.sem-unknown::after { background: var(--sem-unknown); }

/* Reference section colouring */
.ref-line mark.ref-matched { background: var(--ref-matched-bg); }
.ref-line mark.ref-unmatched { background: var(--ref-unmatched-bg); }

/* Semantic badges (sidebar list) */
.badge-sem {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
}
.badge-sem.ok    { color: var(--sem-ok); border-color: var(--sem-ok); }
.badge-sem.flag  { color: var(--sem-flag); border-color: var(--sem-flag); }
.badge-sem.unknown { color: var(--sem-unknown); border-color: var(--sem-unknown); }

/* Legend swatches (avoid “checkbox look”) */
.legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}
.legend .legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    margin-right: .35rem;
}
.legend .legend-ok   { background: var(--cite-ok-bg); }
.legend .legend-miss { background: var(--cite-miss-bg); }

/* --- Legacy User Badge --- */
.legacy-badge {
    position: absolute;
    top: -2px; /* Adjust slightly for better overlap */
    right: -2px; /* Adjust slightly for better overlap */
    font-size: 1rem; /* Increased icon size */
    color: #FFD700; /* Gold color */
    background-color: #fff;
    border-radius: 50%;
    width: 1.4rem; /* Increased badge size */
    height: 1.4rem; /* Increased badge size */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translate(30%, -30%);
    box-shadow: 0 0 0 2px #fff; /* White outline to separate from profile pic */
}

/* Custom class for the legacy tooltip */
.legacy-tooltip {
    --bs-tooltip-max-width: 280px; /* Slightly narrower */
    --bs-tooltip-bg: #495057; /* Darker gray background */
    --bs-tooltip-color: #fff;
    --bs-tooltip-border-radius: 0.5rem;
    --bs-tooltip-opacity: 0.95;
    font-size: 0.8rem; /* Smaller font size */
    text-align: left;
}

/* Adjust arrow color for the new tooltip background */
.legacy-tooltip .tooltip-arrow::before {
    border-bottom-color: #495057 !important;
}