/*
 * Custom Stylesheet for Glodal Journal System
 * Phase 7 - Design & Theming
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* --- Base & Footer Styles --- */
body {
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 100px;
    background-color: #f8f8f8; /* Slightly off-white background */
}

.site-footer {
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #777;
    border-top: 1px solid #eee;
    background-color: #ffffff; /* White footer background */
}

.main-content {
    margin-top: 20px;
    background-color: #ffffff; /* White background for main content area */
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for content */
}


/* --- Navbar Styles --- */
.site-navbar.navbar-default {
    background-color: #003366; /* Fallback */
    background-image: linear-gradient(to bottom, #004080 0%, #00264d 100%);
    border: none;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Navbar Brand (Text/Logo Area) */
.site-navbar.navbar-default .navbar-brand {
    color: #ffffff;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 15px;
    height: auto;
    line-height: normal;
    background-image: url('../images/MainLogo_06102025.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding-left: 150px;
    min-height: 50px;
}
.site-navbar.navbar-default .navbar-brand:hover,
.site-navbar.navbar-default .navbar-brand:focus {
    color: #eeeeee;
}

/* Navbar Links */
.site-navbar.navbar-default .navbar-nav > li > a {
    color: #d9edf7;
    line-height: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: color 0.2s ease-in-out;
}
.site-navbar.navbar-default .navbar-nav > li > a:hover,
.site-navbar.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}

/* Active Navbar Link */
.site-navbar.navbar-default .navbar-nav > .active > a,
.site-navbar.navbar-default .navbar-nav > .active > a:hover,
.site-navbar.navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: transparent;
    font-weight: bold;
}

/* Dropdown Styles (Logged-in User) */
.site-navbar.navbar-default .navbar-nav > .dropdown > a {
     color: #d9edf7;
     line-height: 20px;
     padding-top: 15px;
     padding-bottom: 15px;
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.site-navbar.navbar-default .navbar-nav > .dropdown > a:hover,
.site-navbar.navbar-default .navbar-nav > .dropdown > a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar.navbar-default .navbar-nav > .open > a,
.site-navbar.navbar-default .navbar-nav > .open > a:hover,
.site-navbar.navbar-default .navbar-nav > .open > a:focus {
     color: #ffffff;
     background-color: rgba(0, 0, 0, 0.1);
}
.dropdown-menu {
     background-color: #003366;
     border: 1px solid #002244;
     box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.dropdown-menu > li > a {
     color: #d9edf7;
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}
 .dropdown-menu .divider {
    background-color: #002244;
 }


/* Navbar Toggle Button (Mobile) */
.site-navbar.navbar-default .navbar-toggle {
    border-color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    margin-bottom: 8px;
    transition: background-color 0.2s ease-in-out;
}
.site-navbar.navbar-default .navbar-toggle:hover,
.site-navbar.navbar-default .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}


/* --- Login Page Specific Styles --- */
.login-image-side {
    background-image: url('../images/LoginCover_20102025.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

body.login-page {
    padding-bottom: 0;
    background-color: #ffffff;
}

.login-logo {
    /* --- UPDATED: Increased max-width --- */
    max-width: 300px; /* Increased from 150px */
    height: auto;
    margin-bottom: 30px;
}

/* Footer for login page */
.login-footer {
    margin-top: 30px;
    font-size: 12px;
    color: #777;
}

@media (max-width: 767px) {
    .login-container {
        flex-direction: column;
    }
    .login-image-side {
        min-height: 200px;
        flex: none;
    }
    .login-form-side {
        padding: 20px;
        flex: none;
    }
}

/* --- Button Styles --- */

/* General Button Styling (using Bootstrap classes) */
.btn {
    border-radius: 4px; /* Slightly rounded corners */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Primary Button (e.g., Save, Submit, Search) - Use a Tiffany Green */
.btn-primary {
    background-color: #0ABAB5; /* Tiffany Green/Blue */
    border-color: #09A09A;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #088A85; /* Darker shade on hover/active */
    border-color: #07706B;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Success Button (e.g., Accept, Assign) - Can use a slightly different green or keep primary */
.btn-success {
     background-color: #5cb85c; /* Default Bootstrap Green */
     border-color: #4cae4c;
}
 .btn-success:hover,
.btn-success:focus {
     background-color: #449d44;
     border-color: #398439;
}

/* Info Button (e.g., View Feedback, Import) - Use a Light Blue */
.btn-info {
    background-color: #5bc0de; /* Default Bootstrap Info Blue */
    border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #31b0d5;
    border-color: #269abc;
}

/* Warning Button (e.g., Revisions Required, Edit Published) - Keep Orange/Yellow */
.btn-warning {
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #ec971f;
    border-color: #d58512;
}

/* Danger Button (e.g., Reject, Remove, Logout) - Keep Red */
.btn-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
}
 .btn-danger:hover,
.btn-danger:focus {
    background-color: #c9302c;
    border-color: #ac2925;
}

/* Default/Cancel Button - Light Gray */
.btn-default {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #333;
}
 .btn-default:hover,
.btn-default:focus {
     background-color: #e8e8e8;
     border-color: #adadad;
}


/* --- Form Input Styles --- */
.form-control {
    border-radius: 4px; /* Match button corners */
    box-shadow: none; /* Remove default inner shadow */
    border: 1px solid #ccc;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-control:focus {
    border-color: #0ABAB5; /* Highlight with accent color */
    box-shadow: 0 0 5px rgba(10, 186, 181, 0.4); /* Subtle glow */
    outline: 0 none; /* Remove default outline */
}

/* Style required field labels */
label:after {
  /* content: " *"; Remove if you don't want asterisks */
  /* color: #d9534f; Red asterisk */
}

/* Style help text below inputs */
.help-block {
    font-size: 12px;
    color: #777;
}

/* Style validation errors */
.has-error .form-control {
    border-color: #d9534f; /* Red border */
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); /* Keep Bootstrap's inner shadow for errors */
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #d9534f; /* Red text for errors */
}
.alert-danger { /* Style error message box */
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

/* --- Add more specific styles below --- */

/* --- Dashboard Styles --- */

/* Jumbotron */
.jumbotron {
    background-color: #eaf6f6; /* Light Tiffany Green/Blue background */
    border: 1px solid #c4e9e8;
    padding: 30px; /* Adjust padding if needed */
    margin-bottom: 30px;
}
.jumbotron h1 {
    color: #003366; /* Dark Blue heading */
    margin-top: 0;
    font-size: 36px; /* Slightly smaller Jumbotron heading */
}

/* Section Headings (h3) */
h3 {
    color: #004080; /* Slightly lighter blue for section heads */
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Table Styles */
.table thead > tr > th {
    background-color: #f5f5f5; /* Light grey header */
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}
.table > tbody > tr > td {
    vertical-align: middle; /* Center cell content vertically */
}

/* Status Labels */
.label {
    font-size: 90%; /* Make labels slightly larger */
    padding: .3em .6em .3em;
}
.label-primary { background-color: #337ab7; } /* Keep Bootstrap Blue for Accepted/Proofread */
.label-success { background-color: #5cb85c; } /* Keep Green for Published/Completed */
.label-info { background-color: #5bc0de; } /* Keep Light Blue for Submitted/Pending */
.label-warning { background-color: #f0ad4e; } /* Keep Orange for Revisions */
.label-danger { background-color: #d9534f; } /* Keep Red for Rejected/Declined */
.label-default { background-color: #777; } /* Keep Grey for other statuses */

/* --- Add more specific styles below --- */

/* --- Public Archive & Article Styles --- */

/* Style the issue headings on the archive page */
.issue-group h2 {
    font-size: 24px; /* Slightly smaller than h1 */
    color: #003366; /* Dark Blue */
    margin-bottom: 20px;
}

/* Style the article panels on the archive page */
.public-archive .panel-default { /* Target panels specifically on archive */
    border-color: #ddd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Softer shadow */
    margin-bottom: 20px;
}
.public-archive .panel-heading {
    background-color: #f9f9f9; /* Very light grey heading */
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
}
.public-archive .panel-title {
    font-size: 18px; /* Article title size */
}
.public-archive .panel-title a {
    color: #004080; /* Match section heading color */
    text-decoration: none;
}
.public-archive .panel-title a:hover {
    color: #00264d; /* Darker blue on hover */
    text-decoration: underline;
}
.public-archive .panel-body p {
    margin-bottom: 10px;
    line-height: 1.6;
}
.public-archive .panel-body strong {
    color: #555;
}


/* Style the single article view page */
.article-content {
    line-height: 1.7; /* Increase line spacing for readability */
    font-size: 16px; /* Slightly larger base font size */
}
.article-content h1, .article-content h2, .article-content h3 {
    color: #003366; /* Dark blue headings within content */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}
.article-content p {
    margin-bottom: 1.2em;
}
.article-content blockquote {
    border-left: 3px solid #0ABAB5; /* Accent color for blockquotes */
    color: #666;
    font-style: italic;
}

/* --- Add more specific styles below --- */

/* --- Form Page Styles --- */

/* Style panels commonly used on form pages */
.panel-default {
    border-color: #ddd; /* Standard border */
}
.panel-info {
     border-color: #bce8f1; /* Match info alert color */
}
.panel-success {
     border-color: #d6e9c6; /* Match success alert color */
}
 .panel-warning {
     border-color: #faebcc; /* Match warning alert color */
}

/* Add slightly more padding inside form panels */
.panel-body {
    padding: 20px;
}

/* Add spacing between form groups */
.form-group {
    margin-bottom: 20px;
}

/* Optional: Style form section headings if used */
form h4 {
    margin-top: 25px;
    margin-bottom: 10px;
    color: #004080;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* --- Add more specific styles below --- */

/* --- Alert Message Styles --- */

.alert {
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Success Alert (e.g., Registration successful) */
.alert-success {
    background-color: #dff0d8; /* Light Green */
    border-color: #d6e9c6;
    color: #3c763d; /* Dark Green text */
}

/* Danger/Error Alert (e.g., Login failed, Validation) */
.alert-danger {
    background-color: #f2dede; /* Light Red */
    border-color: #ebccd1;
    color: #a94442; /* Dark Red text */
}

/* Info Alert (e.g., Search results info) */
.alert-info {
    background-color: #d9edf7; /* Light Blue */
    border-color: #bce8f1;
    color: #31708f; /* Dark Blue text */
}

 /* Warning Alert (Not currently used much, but good to have) */
.alert-warning {
    background-color: #fcf8e3; /* Light Yellow */
    border-color: #faebcc;
    color: #8a6d3b; /* Dark Yellow/Brown text */
}

/* --- Add more styles below --- */

/* --- Decision Hub (assign_reviewer.php) Styles --- */

/* Style the main panels on the assign page */
.decision-hub-panel .panel-heading {
    font-weight: bold;
}

/* Style the assigned reviewers list */
.assigned-reviewers-list .list-group-item {
    display: flex; /* Use flexbox for better alignment */
    justify-content: space-between; /* Pushes button/status to the right */
    align-items: center; /* Vertically aligns items */
    padding: 10px 15px;
}
.assigned-reviewers-list .list-group-item .label {
    margin-left: 10px; /* Space between name and status */
}
.assigned-reviewers-list .list-group-item .btn {
    margin-left: 10px; /* Space between status and button */
}

/* Style the final decision panel */
.final-decision-panel .panel-body {
    background-color: #fcf8e3; /* Light yellow background */
}
.final-decision-panel .btn {
    margin: 5px; /* Add some space around buttons */
}

/* Style the reviewer search table */
#reviewerTable th {
    background-color: #f9f9f9; /* Light grey header */
}
#reviewerTable td:last-child {
    text-align: center; /* Center the Assign button */
}

/* --- Add more specific styles below --- */