@charset "utf-8";

/* ============================================================
   Journals Publishing System — journals.css
   Adapted from the Library Application Authorization Manager
   color scheme; trimmed to the components currently in use.
   ============================================================ */


/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
    /* --- Dartmouth Library brand palette --- */
    --lib-dart-green: #00693e;
    --lib-forest-green: #12312b;
    --lib-spring-green: #a5d75f;
    --lib-off-white: #f5f5f5;
    --lib-summer-yellow: #f5dc69;
    --lib-light-blue: #9bc8eb;
    --lib-light-dart-green: #ecf3f0;

    /* --- Bootstrap 5 color overrides --- */
    --bs-primary: var(--lib-dart-green);
    --bs-primary-rgb: 0, 105, 62;
    --bs-secondary: #a5d75f;
    --bs-secondary-rgb: 165, 215, 95;

    /* --- Layout geometry --- */
    --jr-navbar-height: 56px;
    --jr-content-padding: 1.5rem;
}


/* ============================================================
   Body — full-height column layout so the footer can stick to the bottom
   ============================================================ */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}


/* ============================================================
   Bootstrap Button Overrides
   All buttons default to dart-green; hover to forest-green.
   ============================================================ */
.btn {
    --bs-btn-color: white;
    --bs-btn-bg: var(--lib-dart-green);
    --bs-btn-border-color: var(--lib-dart-green);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--lib-forest-green);
    --bs-btn-hover-border-color: var(--lib-forest-green);
    --bs-btn-active-color: white;
    --bs-btn-active-bg: var(--lib-forest-green);
    --bs-btn-active-border-color: var(--lib-forest-green);
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-color: #111;
    --bs-btn-disabled-border-color: #ccc;
}

/* Danger / delete buttons retain Bootstrap red */
.btn-danger {
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-bg: #9b1325;
    --bs-btn-hover-border-color: #9b1325;
}


/* ============================================================
   Navigation — Primary Navbar
   Dark forest-green bar across the top.
   ============================================================ */
.navbar-primary {
    background-color: var(--lib-forest-green);
    z-index: 80;
}

.navbar-primary .navbar-brand {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.navbar-primary .navbar-brand:hover {
    color: var(--lib-spring-green);
}

/* Right-side user-state text. Selectors are scoped with > so they only
   style direct children of .nav-user-info (the sign-out form's button,
   etc.), not nested dropdown items which carry their own .dropdown-item
   styling. */
.navbar-primary .nav-user-info {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
}

.navbar-primary .nav-user-info>a,
.navbar-primary .nav-user-info>span a,
.navbar-primary .nav-user-info>span button.btn-link {
    color: var(--lib-spring-green);
    text-decoration: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.navbar-primary .nav-user-info>a:hover,
.navbar-primary .nav-user-info>span a:hover,
.navbar-primary .nav-user-info>span button.btn-link:hover {
    text-decoration: underline;
}

/* Currently selected journal — styled as a transparent button that serves
   as a Bootstrap dropdown toggle for switching journals from the navbar */
.navbar-primary .nav-current-journal {
    color: var(--lib-summer-yellow);
    font-style: italic;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
}

.navbar-primary .nav-current-journal:hover,
.navbar-primary .nav-current-journal:focus {
    color: white;
    text-decoration: underline;
    box-shadow: none;
}


/* ============================================================
   Dropdown menus
   Override Bootstrap CSS variables so menu items use brand colors
   (dart-green active background, dark readable text) and have a
   little more vertical breathing room. Bootstrap derives these
   from --bs-primary only at compile time, so they must be set
   explicitly here.
   ============================================================ */
.dropdown-menu {
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #212529;
    --bs-dropdown-link-hover-bg: #e9ecef;
    --bs-dropdown-link-active-color: white;
    --bs-dropdown-link-active-bg: var(--lib-dart-green);
    --bs-dropdown-item-padding-y: 0.5rem;
}


/* ============================================================
   Journal Title Banner
   Edge-to-edge dart-green strip below the navbar, showing the
   active journal's title. Only used on per-journal admin pages.
   ============================================================ */
.journal-banner {
    background-color: var(--lib-dart-green);
    color: white;
    padding: 0.75rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}


/* ============================================================
   Navigation — Tab Bar for the per-journal admin pages
   Edge-to-edge flat dart-green bar with white tab text.
   Active tab "lifts" into the content area background.
   ============================================================ */
.nav-tabs-primary {
    background-color: var(--lib-dart-green);
    padding: 0 1.5rem;
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.nav-tabs-primary .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 0;
    padding: 0.65rem 1.25rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-tabs-primary .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
}

.nav-tabs-primary .nav-link.active {
    color: var(--lib-forest-green);
    background-color: var(--lib-off-white);
    font-weight: 700;
}


/* ============================================================
   Page Header (title above the main content)
   ============================================================ */
.page-header {
    border-bottom: 2px solid var(--lib-dart-green);
    margin-bottom: var(--jr-content-padding);
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lib-forest-green);
    margin: 0 0 0.4rem 0;
}


/* ============================================================
   Article list table header — light dart-green background.
   Overrides Bootstrap's --bs-table-bg which is scoped to the
   table element and cannot be reached via :root variables.
   ============================================================ */
thead.table-primary {
    --bs-table-bg: var(--lib-light-dart-green);
}

/* ============================================================
   Main Content Area
   ============================================================ */
main.jr-content {
    flex: 1 0 auto;
    /* allow footer to settle at the bottom */
}


/* ============================================================
   Journal-selection list-group on the admin page
   ============================================================ */
/* Highlight the currently selected journal row */
.journal-list .list-group-item.active-journal {
    background-color: var(--lib-light-dart-green);
    border-left: 4px solid var(--lib-dart-green);
    font-weight: 600;
}


/* ============================================================
   Footer — visual styling only; layout is via Bootstrap utilities
   ============================================================ */
footer.jr-footer {
    background-color: var(--lib-forest-green);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    padding: 0.6rem var(--jr-content-padding);
    display: flex;
    flex-shrink: 0;
}

footer.jr-footer a {
    color: var(--lib-spring-green);
    text-decoration: none;
}

footer.jr-footer a:hover {
    text-decoration: underline;
}


/* ============================================================
   Alert / Flash Messages
   ============================================================ */
.alert-banner {
    border-radius: 0;
    border-left: 4px solid;
    margin-bottom: 0;
}

.alert-banner.alert-success {
    border-left-color: var(--lib-dart-green);
}

.alert-banner.alert-danger {
    border-left-color: #dc3545;
}


/* ============================================================
   Utility classes
   ============================================================ */

/* Muted label above a data value */
.field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ============================================================
   Form control box
   ============================================================ */

/* Pale-green panel that holds save/cancel/delete buttons at the bottom of
   an edit form. Matches the Authorization Manager's control-box styling
   so the family of edit forms feels consistent. */
.control-box {
    background-color: var(--lib-light-dart-green);
    border-top: 1px solid #c8ddd6;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

/* ============================================================
   Drag-and-drop section reordering
   ============================================================ */

/* Visual highlight on the drop target row while dragging over it. */
.draggable-section.drag-over {
    background-color: var(--lib-light-dart-green);
    border-top: 2px solid var(--lib-dart-green);
}