/* ============================================================
   OJSHub
   DOAJ Evaluation
   ============================================================ */


/* ============================================================
   PAGE
   ============================================================ */

.doaj-page {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
    padding: 32px 20px 64px;

    box-sizing: border-box;
}


/* ============================================================
   HERO
   ============================================================ */

.doaj-hero {
    margin-bottom: 24px;
}

.doaj-breadcrumb {
    margin-bottom: 10px;

    color: #64748b;

    font-size: 13px;
    line-height: 1.4;
}

.doaj-title {
    margin: 0 0 8px;

    color: #0f172a;

    font-size: 30px;
    font-weight: 750;
    line-height: 1.2;
}

.doaj-subtitle {
    max-width: 800px;

    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.65;
}


/* ============================================================
   NOTICE
   ============================================================ */

.doaj-notice {
    margin-top: 20px;

    padding: 14px 16px;

    border: 1px solid #dbe2ea;
    border-radius: 10px;

    background: #f8fafc;

    color: #475569;

    font-size: 13px;
    line-height: 1.6;
}

.doaj-notice strong {
    color: #0f172a;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.doaj-layout {
    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr);

    gap: 24px;

    align-items: start;
}

.doaj-main {
    min-width: 0;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.doaj-sidebar {
    position: sticky;
    top: 88px;

    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;
}

.doaj-sidebar-head {
    padding: 17px 16px;

    border-bottom: 1px solid #e2e8f0;
}

.doaj-sidebar-title {
    margin: 0 0 4px;

    color: #0f172a;

    font-size: 14px;
    font-weight: 700;
}

.doaj-sidebar-meta {
    color: #64748b;

    font-size: 11px;
    line-height: 1.4;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.doaj-progress-wrap {
    padding: 14px 16px;

    border-bottom: 1px solid #e2e8f0;
}

.doaj-progress-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #475569;

    font-size: 11px;
}

.doaj-progress-info strong {
    color: #0f172a;
}

.doaj-progress {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background: #e9eef4;
}

.doaj-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #0f172a;

    transition: width .25s ease;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.doaj-nav {
    padding: 8px;
}

.doaj-nav-button {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 2px 0;
    padding: 9px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #334155;

    font: inherit;

    font-size: 13px;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.doaj-nav-button:hover {
    background: #f1f5f9;
}

.doaj-nav-button.active {
    background: #e9eef5;

    color: #0f172a;

    font-weight: 650;
}

.doaj-nav-number {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef2f6;

    color: #475569;

    font-size: 10px;
    font-weight: 700;
}

.doaj-nav-button.active
.doaj-nav-number {
    background: #0f172a;

    color: #ffffff;
}

.doaj-nav-label {
    min-width: 0;

    line-height: 1.25;
}


/* ============================================================
   LOADING
   ============================================================ */

.doaj-loading {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 160px;

    padding: 32px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;

    color: #64748b;

    font-size: 13px;
}

.doaj-loading-spinner {
    width: 20px;
    height: 20px;

    border: 2px solid #e2e8f0;

    border-top-color: #0f172a;

    border-radius: 50%;

    animation:
        doaj-spin .7s linear infinite;
}

@keyframes doaj-spin {

    to {
        transform: rotate(360deg);
    }

}


/* ============================================================
   ERROR
   ============================================================ */

.doaj-error {
    padding: 32px;

    border: 1px solid #fecaca;
    border-radius: 12px;

    background: #fff7f7;

    color: #991b1b;

    text-align: center;
}

.doaj-error-message {
    margin: 8px 0 18px;

    font-size: 13px;
}


/* ============================================================
   SECTION
   ============================================================ */

.doaj-section {
    display: none;

    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;
}

.doaj-section.active {
    display: block;
}

.doaj-section-header {
    padding: 22px 24px;

    border-bottom: 1px solid #e2e8f0;
}

.doaj-section-kicker {
    margin-bottom: 7px;

    color: #64748b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.doaj-section-title {
    margin: 0 0 7px;

    color: #0f172a;

    font-size: 21px;
    font-weight: 750;

    line-height: 1.3;
}

.doaj-section-description {
    max-width: 760px;

    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   QUESTIONS
   ============================================================ */

.doaj-items {
    padding: 4px 24px;
}

.doaj-item {
    padding: 22px 0;

    border-bottom: 1px solid #edf1f5;
}

.doaj-item:last-child {
    border-bottom: 0;
}

.doaj-item[hidden] {
    display: none !important;
}

.doaj-question-top {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 6px;
}

.doaj-item-code {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    margin-top: 1px;

    padding: 2px 6px;

    border-radius: 5px;

    background: #f1f5f9;

    color: #334155;

    font-size: 10px;
    font-weight: 700;
}

.doaj-question {
    margin: 0;

    color: #0f172a;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.5;
}

.doaj-required {
    margin-left: 3px;

    color: #dc2626;
}

.doaj-help {
    margin: 6px 0 13px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   INPUT
   ============================================================ */

.doaj-control {
    margin-top: 10px;
}

.doaj-input,
.doaj-select,
.doaj-textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border: 1px solid #d8dee6;
    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: #0f172a;

    font: inherit;

    font-size: 13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.doaj-input:hover,
.doaj-select:hover,
.doaj-textarea:hover {
    border-color: #b8c2ce;
}

.doaj-input:focus,
.doaj-select:focus,
.doaj-textarea:focus {
    border-color: #64748b;

    box-shadow:
        0 0 0 3px
        rgba(15, 23, 42, .06);
}

.doaj-input::placeholder,
.doaj-textarea::placeholder {
    color: #a0a9b5;
}

.doaj-textarea {
    min-height: 110px;

    resize: vertical;
}


/* ============================================================
   RADIO / CHECKBOX
   ============================================================ */

.doaj-options {
    display: grid;

    gap: 8px;
}

.doaj-option {
    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 44px;

    box-sizing: border-box;

    padding: 9px 12px;

    border: 1px solid #dfe5eb;
    border-radius: 7px;

    background: #ffffff;

    color: #334155;

    font-size: 13px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.doaj-option:hover {
    border-color: #b8c2ce;

    background: #fafbfc;
}

.doaj-option:has(input:checked) {
    border-color: #94a3b8;

    background: #f8fafc;
}


/*
 * Override CSS global OJSHub.
 */

.doaj-option
input[type="radio"],
.doaj-option
input[type="checkbox"] {
    appearance: auto !important;

    -webkit-appearance:
        auto !important;

    position: static !important;

    display: inline-block !important;

    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    min-height: 16px !important;

    max-width: 16px !important;
    max-height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: initial !important;

    border-radius:
        initial !important;

    background:
        initial !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    flex: 0 0 16px;

    cursor: pointer;
}

.doaj-option span {
    display: block;

    flex: 1;

    color: #334155;

    line-height: 1.4;
}


/* ============================================================
   VALIDATION
   ============================================================ */

.doaj-validation {
    display: none;

    margin-top: 7px;

    color: #b91c1c;

    font-size: 11px;

    line-height: 1.45;
}

.doaj-validation.show {
    display: block;
}

.doaj-item.has-error
.doaj-input,

.doaj-item.has-error
.doaj-textarea,

.doaj-item.has-error
.doaj-select {
    border-color: #ef4444;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.doaj-footer-actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 18px 24px;

    border-top: 1px solid #e2e8f0;

    background: #fafbfc;
}

.doaj-btn {
    min-height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 17px;

    border: 1px solid #d6dce4;
    border-radius: 7px;

    background: #ffffff;

    color: #1e293b;

    font: inherit;

    font-size: 13px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.doaj-btn:hover {
    border-color: #b8c2ce;

    background: #f8fafc;
}

.doaj-btn-primary {
    border-color: #0f172a;

    background: #0f172a;

    color: #ffffff;
}

.doaj-btn-primary:hover {
    border-color: #1e293b;

    background: #1e293b;
}

.doaj-btn:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .doaj-page {
        padding-top: 24px;
    }

    .doaj-layout {
        grid-template-columns: 1fr;
    }

    .doaj-sidebar {
        position: static;
    }

    .doaj-nav {
        display: flex;

        gap: 5px;

        overflow-x: auto;

        scrollbar-width: thin;
    }

    .doaj-nav-button {
        width: auto;

        flex: 0 0 auto;

        white-space: nowrap;
    }

}


@media (max-width: 600px) {

    .doaj-page {
        padding:
            22px
            14px
            42px;
    }

    .doaj-title {
        font-size: 25px;
    }

    .doaj-subtitle {
        font-size: 14px;
    }

    .doaj-section-header,
    .doaj-items,
    .doaj-footer-actions {
        padding-left: 17px;
        padding-right: 17px;
    }

    .doaj-footer-actions {
        flex-wrap: wrap;
    }

}

/* ============================================================
   OJSHub DOAJ - HIDDEN STATE
   ============================================================ */

.doaj-page [hidden] {
    display: none !important;
}

.doaj-dynamic-required {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
}

/* ============================================================
   DOAJ RESULT PAGE
   ============================================================ */

.doaj-result-page {
    --navy:#0f172a;
    --blue:#2563eb;
    --blue-soft:#eff6ff;
    --bg:#f5f7fb;
    --white:#ffffff;
    --border:#dbe3ee;
    --text:#172033;
    --muted:#64748b;
    --green:#15803d;
    --green-bg:#f0fdf4;
    --red:#dc2626;
    --red-bg:#fef2f2;
    --orange:#c2410c;
    --orange-bg:#fff7ed;
    --yellow:#a16207;
    --yellow-bg:#fefce8;

    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:34px 20px 70px;
    color:var(--text);
}

.doaj-result-page .breadcrumb{
    font-size:13px;
    color:#64748b;
    margin-bottom:8px;
}

.doaj-result-page .page-title{
    margin:0;
    font-size:32px;
    line-height:1.2;
    color:#0f172a;
}

.doaj-result-page .page-description{
    margin:9px 0 25px;
    color:#64748b;
    font-size:15px;
}

/* ERROR */

.error-box{
    background:#fff;
    border:1px solid #fecaca;
    border-radius:14px;
    padding:30px;
}

.error-box h2{
    color:#b91c1c;
    margin-top:0;
}

/* DISCLAIMER */

.disclaimer{
    background:#fff;
    border:1px solid var(--border);
    border-left:4px solid #2563eb;
    padding:15px 18px;
    border-radius:10px;
    font-size:13px;
    margin-bottom:24px;
}

/* RESULT HERO */

.result-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    margin-bottom:20px;
}

.result-hero{
    display:grid;
    grid-template-columns:1.5fr .8fr;
    gap:25px;
    padding:28px;
}

.result-code{
    font-size:12px;
    color:#64748b;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.journal-name{
    font-size:27px;
    margin:6px 0 5px;
    color:#0f172a;
}

.journal-url{
    font-size:13px;
    color:#2563eb;
    text-decoration:none;
    word-break:break-all;
}

.status-box{
    border-radius:13px;
    padding:19px;
}

.status-box.needs_improvement{
    background:var(--orange-bg);
    border:1px solid #fed7aa;
}

.status-box.ready{
    background:var(--green-bg);
    border:1px solid #bbf7d0;
}

.status-box.not_ready{
    background:var(--red-bg);
    border:1px solid #fecaca;
}

.status-label{
    font-size:12px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.5px;
    color:#64748b;
}

.status-value{
    font-size:22px;
    font-weight:800;
    margin-top:3px;
}

.status-box.needs_improvement .status-value{
    color:var(--orange);
}

.status-box.ready .status-value{
    color:var(--green);
}

.status-box.not_ready .status-value{
    color:var(--red);
}

.status-description{
    font-size:12px;
    color:#64748b;
    margin-top:7px;
}

/* INFO */

.journal-info{
    border-top:1px solid var(--border);
    padding:20px 28px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.info-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#64748b;
    font-weight:700;
}

.info-value{
    font-size:14px;
    font-weight:700;
    margin-top:4px;
}

/* STATS */

.stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin-bottom:20px;
}

.stat{
    background:#fff;
    border:1px solid var(--border);
    border-radius:13px;
    padding:18px;
}

.stat-label{
    font-size:12px;
    color:#64748b;
}

.stat-value{
    font-size:24px;
    font-weight:800;
    color:#0f172a;
    margin-top:3px;
}

.stat-sub{
    font-size:11px;
    color:#94a3b8;
    margin-top:3px;
}

/* PROGRESS */

.progress-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
    margin-bottom:20px;
}

.progress-head{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    font-weight:700;
    margin-bottom:9px;
}

.progress{
    height:9px;
    background:#e8edf4;
    border-radius:999px;
    overflow:hidden;
}

.progress-bar{
    height:100%;
    background:#2563eb;
    border-radius:999px;
}

/* SECTION TITLE */

.section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:31px 0 13px;
}

.section-heading h2{
    margin:0;
    font-size:20px;
}

/* FINDING */

.finding{
    background:#fff;
    border:1px solid #fecaca;
    border-left:4px solid #dc2626;
    border-radius:12px;
    padding:17px 18px;
    margin-bottom:12px;
}

.finding-top{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:7px;
}

.finding-code{
    font-weight:800;
    color:#0f172a;
}

.badge-critical{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    background:#fee2e2;
    color:#b91c1c;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.finding-message{
    color:#475569;
    font-size:14px;
}

/* RECOMMENDATIONS */

.recommendation{
    background:#fff;
    border:1px solid #bfdbfe;
    border-left:4px solid #2563eb;
    border-radius:12px;
    padding:17px 18px;
    margin-bottom:12px;
}

.recommendation-top{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:7px;
}

.recommendation-code{
    font-weight:800;
    color:#0f172a;
}

.badge-recommendation{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.badge-low{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.recommendation-message{
    color:#475569;
    font-size:14px;
}

.recommendation-result{
    margin-top:7px;
    color:#94a3b8;
    font-size:11px;
    font-family:monospace;
}

/* ANSWERS */

.answer-section{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:15px;
}

.answer-section-head{
    padding:17px 20px;
    background:#fafcff;
    border-bottom:1px solid var(--border);
}

.answer-section-code{
    font-size:11px;
    color:#2563eb;
    font-weight:800;
}

.answer-section-title{
    font-size:17px;
    font-weight:800;
    margin-top:2px;
}

.answer-row{
    padding:17px 20px;
    border-bottom:1px solid #edf1f6;
}

.answer-row:last-child{
    border-bottom:none;
}

.answer-top{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.item-code{
    flex:0 0 auto;
    font-size:10px;
    font-weight:800;
    background:#eff6ff;
    color:#1d4ed8;
    padding:3px 6px;
    border-radius:5px;
}

.question{
    font-size:13px;
    font-weight:700;
    color:#172033;
}

.answer-value{
    margin-top:8px;
    margin-left:43px;
    font-size:13px;
    color:#475569;
    background:#f8fafc;
    border:1px solid #e7edf4;
    padding:10px 12px;
    border-radius:8px;
    word-break:break-word;
}

.answer-value.fail{
    background:#fff7f7;
    border-color:#fecaca;
    color:#b91c1c;
}

.answer-value.pass{
    background:#f6fff8;
    border-color:#bbf7d0;
    color:#166534;
}

/* ACTIONS */

.actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:27px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:9px;
    padding:11px 17px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    border:1px solid transparent;
}

.btn-secondary{
    background:#fff;
    border-color:#cbd5e1;
    color:#334155;
}

.btn-primary{
    background:#0f172a;
    color:#fff;
}

/* FOOTER */

.footer-note{
    text-align:center;
    color:#94a3b8;
    font-size:11px;
    margin-top:35px;
}

/* PRINT */

@media print {

    @page {
        size: A4;
        margin: 14mm;
    }

    body {
        background: #fff !important;
    }

    .site-header,
    .mobile-nav,
    .actions {
        display: none !important;
    }

    .site-main {
        padding: 0 !important;
    }

    .doaj-result-page {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .result-card,
    .progress-card,
    .stat,
    .finding,
    .recommendation,
    .answer-section {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
    }

    .answer-section {
        margin-bottom: 12px;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .actions {
        display: none !important;
    }
}

/* RESPONSIVE */

@media(max-width:900px){

    .nav{
        display:none;
    }

    .result-hero{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    .journal-info{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:560px){

    .page-title{
        font-size:26px;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .journal-info{
        grid-template-columns:1fr;
    }

    .answer-value{
        margin-left:0;
    }

    .actions{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }
}