/* =====================================================================
 * OPUS MUNDI — Dashboard & Submission Page Dark Theme
 * Overrides OJS PKP/Vue UI components to match the
 * cybernetic dark aesthetic of the main landing page.
 * ===================================================================== */

/* ── GLOBAL BODY & SHELL ─────────────────────────────────────────── */
body.pkp_page_dashboard,
body.pkp_page_submission,
body.pkp_page_workflow,
body.pkp_page_authorDashboard,
body.pkp_page_reviewer {
    background: #06121e !important;
    color: rgba(200, 220, 240, 0.85) !important;
    font-family: var(--om-font-sans, 'Inter', 'Outfit', sans-serif) !important;
}

/* ── TOP BAR (OJS default bar above workflow) ─────────────────────── */
#pkp_app,
.pkpBreadcrumbs__list,
.pkp_structure_head {
    background: #0a1929 !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
    color: rgba(200, 220, 240, 0.8) !important;
}

.pkp_structure_head a,
.pkp_structure_head .pkp_site_name {
    color: rgba(200, 220, 240, 0.85) !important;
}

/* ── PKP APP HEADER BAR ───────────────────────────────────────────── */
.pkpHeader,
.pkpHeader--primary {
    background: linear-gradient(135deg, #0a1929 0%, #0d1f2d 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.pkpHeader .pkpHeader__title,
.pkpHeader a {
    color: #e0f0ff !important;
}

.pkpHeader .pkpHeader__logo span {
    color: #4dd0e1 !important;
    font-weight: 600;
}

/* ── MAIN CONTENT AREA ───────────────────────────────────────────── */
.pkp_structure_main,
.pkpMain,
.app__container {
    background: #06121e !important;
}

/* ── CARDS / PANELS / GRID CONTAINERS ───────────────────────────── */
.pkp_controllers_grid,
.pkpListPanel,
.pkp_form,
.pkpPanel,
.card,
.pkpCard {
    background: rgba(10, 25, 41, 0.85) !important;
    border: 1px solid rgba(0, 212, 255, 0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
    color: rgba(200, 220, 240, 0.85) !important;
}

.pkp_controllers_grid .grid_header,
.pkpListPanel__header,
.pkpPanel__header {
    background: rgba(0, 212, 255, 0.05) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.10) !important;
    color: #4dd0e1 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* ── SUBMISSION LIST ITEMS ──────────────────────────────────────── */
.pkpListPanelItem,
.listPanel__item {
    background: rgba(13, 31, 45, 0.6) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.06) !important;
    color: rgba(200, 220, 240, 0.85) !important;
    transition: background 0.2s ease;
}

.pkpListPanelItem:hover,
.listPanel__item:hover {
    background: rgba(0, 212, 255, 0.05) !important;
}

.pkpListPanelItem__title a,
.listPanel__itemLink {
    color: #4dd0e1 !important;
    text-decoration: none !important;
}

.pkpListPanelItem__title a:hover,
.listPanel__itemLink:hover {
    color: #80deea !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.pkpButton,
.btn,
button.pkpButton {
    background: rgba(0, 212, 255, 0.08) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #4dd0e1 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}

.pkpButton:hover,
.btn:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2) !important;
    color: #e0f7fa !important;
}

/* Primary buttons */
.pkpButton--isPrimary,
.btn-primary {
    background: rgba(0, 212, 255, 0.18) !important;
    border-color: rgba(0, 212, 255, 0.5) !important;
    color: #00d4ff !important;
}

.pkpButton--isPrimary:hover,
.btn-primary:hover {
    background: rgba(0, 212, 255, 0.28) !important;
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.3) !important;
}

/* ── TABS ─────────────────────────────────────────────────────────── */
.pkp_tabs_list,
.pkpTab__list,
.nav-tabs {
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
    background: transparent !important;
}

.pkp_tabs_list li a,
.pkpTab__button,
.nav-tabs .nav-link {
    color: rgba(180, 210, 230, 0.55) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    transition: color 0.2s, border-color 0.2s !important;
}

.pkp_tabs_list li.ui-tabs-active a,
.pkpTab__button--isActive,
.nav-tabs .nav-link.active {
    color: #00d4ff !important;
    border-bottom: 2px solid #00d4ff !important;
    background: transparent !important;
}

/* ── FORMS ────────────────────────────────────────────────────────── */
.pkp_form label,
.pkpFormField__label,
label {
    color: rgba(180, 210, 240, 0.7) !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form textarea,
.pkp_form select,
.pkpFormField__input,
input.pkpFormField__input,
textarea.pkpFormField__input {
    background: rgba(0, 10, 20, 0.6) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    border-radius: 6px !important;
    color: rgba(200, 230, 255, 0.9) !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.pkp_form input:focus,
.pkp_form textarea:focus,
.pkpFormField__input:focus {
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(150, 180, 200, 0.35) !important;
}

/* ── SEARCH & FILTER BAR ────────────────────────────────────────── */
.pkpListPanel__search input,
.search__input {
    background: rgba(0, 10, 20, 0.5) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    color: rgba(200, 230, 255, 0.9) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
}

.pkpListPanel__search .pkpButton,
.pkpListPanel__filterButton {
    background: rgba(0, 212, 255, 0.06) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    color: #4dd0e1 !important;
}

/* ── WORKFLOW STEPS / STAGES ─────────────────────────────────────── */
.pkp_workflow_steps,
.stages {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    background: rgba(10, 25, 41, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.pkp_workflow_step,
.stage {
    flex: 1;
    text-align: center;
    padding: 14px 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.07);
    color: rgba(180, 210, 240, 0.4);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s;
}

.pkp_workflow_step--current,
.stage--current {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
}

/* ── PROGRESS BAR ─────────────────────────────────────────────────── */
.pkp_submission_progress,
.progressBar {
    height: 4px;
    background: rgba(0, 212, 255, 0.08);
    border-radius: 2px;
    margin-bottom: 24px;
}

.pkp_submission_progress_bar,
.progressBar__fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #00bcd4);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── NOTIFICATIONS & ALERTS ──────────────────────────────────────── */
.pkp_notification,
.pkpNotification,
.alert {
    background: rgba(0, 212, 255, 0.06) !important;
    border-left: 3px solid #00d4ff !important;
    border-radius: 6px !important;
    color: rgba(200, 230, 255, 0.85) !important;
    padding: 12px 16px !important;
}

/* ── TABLES ──────────────────────────────────────────────────────── */
table.pkp_table,
.pkpTable {
    background: rgba(10, 25, 41, 0.7) !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.pkp_table thead tr,
.pkpTable thead tr {
    background: rgba(0, 212, 255, 0.05) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
}

.pkp_table th,
.pkpTable th {
    color: rgba(0, 212, 255, 0.8) !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
}

.pkp_table td,
.pkpTable td {
    color: rgba(180, 210, 240, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 12px 16px !important;
}

.pkp_table tr:hover td,
.pkpTable tbody tr:hover td {
    background: rgba(0, 212, 255, 0.04) !important;
}

/* ── BREADCRUMBS ─────────────────────────────────────────────────── */
.pkpBreadcrumbs__list,
.breadcrumb {
    background: transparent !important;
    padding: 10px 0 !important;
}

.pkpBreadcrumbs__list a,
.breadcrumb-item a {
    color: rgba(0, 212, 255, 0.65) !important;
    text-decoration: none !important;
}

.pkpBreadcrumbs__list > li:last-child,
.breadcrumb-item.active {
    color: rgba(180, 210, 240, 0.55) !important;
}

/* ── SIDEBAR / LEFT NAV ──────────────────────────────────────────── */
.pkp_structure_sidebar,
.pkpSidebar {
    background: rgba(8, 20, 34, 0.95) !important;
    border-right: 1px solid rgba(0, 212, 255, 0.07) !important;
}

/* ── MODAL / DIALOG ──────────────────────────────────────────────── */
.pkp_modal_panel,
.modal-content,
.pkpModal__content {
    background: #0a1929 !important;
    border: 1px solid rgba(0, 212, 255, 0.18) !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    color: rgba(200, 220, 240, 0.85) !important;
}

.modal-header,
.pkpModal__header {
    background: rgba(0, 212, 255, 0.05) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
    color: #4dd0e1 !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
body.pkp_page_submission ::-webkit-scrollbar,
body.pkp_page_dashboard ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.pkp_page_submission ::-webkit-scrollbar-track,
body.pkp_page_dashboard ::-webkit-scrollbar-track {
    background: rgba(10, 25, 41, 0.3);
}

body.pkp_page_submission ::-webkit-scrollbar-thumb,
body.pkp_page_dashboard ::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.25);
    border-radius: 3px;
}

/* ── LIGHT THEME OVERRIDES ────────────────────────────────────────── */
[data-theme="light"] body.pkp_page_dashboard,
[data-theme="light"] body.pkp_page_submission {
    background: #f5f8fa !important;
    color: #0d1f2d !important;
}

/* ── REVERT HARDCODED DARK BACKGROUNDS ON STANDARD PAGES ── */
[data-theme="light"] .pkp_structure_main,
[data-theme="light"] .pkpMain,
[data-theme="light"] .app__container,
[data-theme="light"] #pkp_app,
[data-theme="light"] .pkpBreadcrumbs__list,
[data-theme="light"] .pkp_structure_head {
    background: transparent !important;
}

[data-theme="light"] .pkpHeader,
[data-theme="light"] .pkpHeader--primary {
    background: linear-gradient(135deg, #f5f8fa 0%, #eef1f8 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .pkpHeader .pkpHeader__title,
[data-theme="light"] .pkpHeader a {
    color: #1a1f2e !important;
}

/* ── CARDS & LISTS ── */
[data-theme="light"] .pkp_controllers_grid,
[data-theme="light"] .pkpListPanel,
[data-theme="light"] .pkp_form,
[data-theme="light"] .pkpPanel,
[data-theme="light"] .card,
[data-theme="light"] .pkpCard {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 120, 160, 0.15) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    color: #1a1f2e !important;
}

[data-theme="light"] .pkpListPanelItem,
[data-theme="light"] .listPanel__item {
    background: #ffffff !important;
    border-bottom-color: rgba(0, 0, 0, 0.05) !important;
    color: #1a1f2e !important;
}

[data-theme="light"] .pkp_tabs_list li.ui-tabs-active a,
[data-theme="light"] .pkpTab__button--isActive {
    color: #b38b00 !important;
    border-bottom-color: #b38b00 !important;
}

[data-theme="light"] .pkpButton,
[data-theme="light"] .btn {
    background: rgba(179, 139, 0, 0.06) !important;
    border-color: rgba(179, 139, 0, 0.3) !important;
    color: #b38b00 !important;
}