/* ═══════════════════════════════════════════════════════════
   FRONTIER ETHICS — Editorial / Backend Interface
   Dashboard · Submissions · Review workflow · Management
   Critical Classicism dark aesthetic throughout
   ═══════════════════════════════════════════════════════════ */

/* ── Backend pages share dark aesthetic ── */
.pkp_page_dashboard,
.pkp_page_workflow,
.pkp_page_submissions,
.pkp_page_management,
.pkp_page_stats,
.pkp_page_tools,
.pkp_page_admin,
.pkp_page_manageIssues,
.pkp_page_settings,
.pkp_page_reviewer {
  background: var(--fe-void);
  color: var(--fe-primary);
}

/* ── Dashboard Layout ── */
.app__page {
  background: var(--fe-void);
}

/* Sidebar navigation for editorial */
.app__sidebar,
.pkp_navigation_sidebar {
  background: var(--fe-surface);
  border-right: 1px solid var(--fe-rule);
  padding: var(--space-6) 0;
}

.app__sidebar a,
.pkp_navigation_sidebar a {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--fe-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
}

.app__sidebar a:hover,
.pkp_navigation_sidebar a:hover {
  color: var(--fe-primary);
  background: rgba(122,45,58,0.06);
}

.app__sidebar a.is_current,
.app__sidebar a[aria-current="page"],
.pkp_navigation_sidebar .current a {
  color: var(--fe-primary);
  border-left-color: var(--fe-burgundy);
  background: rgba(122,45,58,0.08);
}

/* ── Submission List ── */
.listPanel {
  background: var(--fe-surface);
  border: 1px solid var(--fe-rule);
}

.listPanel__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--fe-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listPanel__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-primary);
}

.listPanel__item {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--fe-rule);
  transition: background var(--duration-fast) var(--ease-out);
}
.listPanel__item:hover { background: rgba(122,45,58,0.04); }
.listPanel__item:last-child { border-bottom: none; }

.listPanel__itemTitle {
  font-family: var(--font-subtitle);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--fe-primary);
}

.listPanel__itemTitle a {
  color: inherit;
  text-decoration: none;
}
.listPanel__itemTitle a:hover { color: var(--fe-burgundy-lt); }

.listPanel__itemSubTitle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--fe-tertiary);
  margin-top: var(--space-1);
}

/* ── Workflow Tabs ── */
.pkp_workflow_tabs,
.ui-tabs-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--fe-rule);
  gap: var(--space-1);
}

.pkp_workflow_tabs li,
.ui-tabs-nav li {
  display: flex;
}

.pkp_workflow_tabs a,
.ui-tabs-nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--duration-fast) var(--ease-out);
}

.pkp_workflow_tabs a:hover,
.ui-tabs-nav a:hover {
  color: var(--fe-primary);
}

.pkp_workflow_tabs .ui-state-active a,
.ui-tabs-nav .ui-state-active a {
  color: var(--fe-primary);
  border-bottom-color: var(--fe-burgundy);
}

.ui-tabs-panel {
  padding: var(--space-8) 0;
}

/* ── Review Panels ── */
.pkp_reviewPanel,
.pkp_review_panel {
  background: var(--fe-surface);
  border: 1px solid var(--fe-rule);
  margin-bottom: var(--space-6);
  padding: var(--space-6);
}

.pkp_reviewPanel .header,
.pkp_review_panel_header {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fe-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--fe-rule);
}

/* Review status colors */
.pkp_review_status--pending { color: var(--fe-warning); }
.pkp_review_status--accepted { color: var(--fe-info); }
.pkp_review_status--completed,
.pkp_review_status--complete { color: var(--fe-success); }
.pkp_review_status--declined { color: var(--fe-error); }
.pkp_review_status--overdue { color: var(--fe-error); }

/* ── Decision Panel ── */
.pkp_decision_panel {
  background: var(--fe-surface-2);
  border: 1px solid var(--fe-rule-md);
  padding: var(--space-8);
  margin-top: var(--space-8);
}

.pkp_decision_panel .title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  color: var(--fe-gold);
  margin-bottom: var(--space-4);
}

.pkp_decision_actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ── Grid / Table Controllers ── */
.pkp_controllers_grid {
  border: 1px solid var(--fe-rule);
  background: var(--fe-surface);
}

.pkp_controllers_grid .header {
  background: var(--fe-surface-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--fe-rule);
}

.pkp_controllers_grid .header .title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-primary);
}

.pkp_controllers_grid table th {
  background: var(--fe-surface-2);
  color: var(--fe-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--fe-rule);
}

.pkp_controllers_grid table td {
  padding: var(--space-3) var(--space-4);
  color: var(--fe-secondary);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--fe-rule);
}

.pkp_controllers_grid table tr:hover td {
  background: rgba(122,45,58,0.04);
}

.pkp_controllers_grid .actions a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--fe-burgundy-lt);
  text-decoration: none;
}
.pkp_controllers_grid .actions a:hover { color: var(--fe-primary); }

/* ── Stats / Dashboard Cards ── */
.pkp_stat_card {
  background: var(--fe-surface);
  border: 1px solid var(--fe-rule);
  padding: var(--space-6);
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.pkp_stat_card:hover { border-color: var(--fe-rule-md); }

.pkp_stat_card .value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--fe-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.pkp_stat_card .label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fe-tertiary);
}

/* Stats grid */
.pkp_stats_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* ── File Upload Dropzone ── */
.pkp_file_upload,
.pkpDropzone {
  border: 1px dashed var(--fe-rule-strong);
  padding: var(--space-10);
  text-align: center;
  background: var(--fe-surface);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.pkp_file_upload:hover,
.pkpDropzone:hover {
  border-color: var(--fe-burgundy);
  background: rgba(122,45,58,0.04);
}

.pkp_file_upload .label,
.pkpDropzone .label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-tertiary);
}

/* ── Login Page ── */
.pkp_page_login,
.pkp_page_register {
  background: var(--fe-void);
}

.pkp_page_login .pkp_structure_content,
.pkp_page_register .pkp_structure_content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
}

.pkp_page_login .pkp_form,
.pkp_page_register .pkp_form {
  width: 100%;
  max-width: 400px;
  padding: var(--space-10);
  background: var(--fe-surface);
  border: 1px solid var(--fe-rule-md);
  position: relative;
}

/* Subtle glow behind login form */
.pkp_page_login .pkp_form::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse at 50% 0%, rgba(122,45,58,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.pkp_page_login .pkp_form h1,
.pkp_page_register .pkp_form h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fe-primary);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--fe-rule);
}

/* ── Management Sections ── */
.pkp_page_management .listPanel,
.pkp_page_settings .listPanel {
  margin-bottom: var(--space-8);
}

/* Settings sections */
.pkp_page_settings h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fe-primary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--fe-rule);
}

/* ── Vue.js App Components ── */
.pkpFormField {
  margin-bottom: var(--space-6);
}

.pkpFormField__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-tertiary);
  margin-bottom: var(--space-2);
}

.pkpFormField__description {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 300;
  color: var(--fe-ghost);
  margin-bottom: var(--space-3);
}

.pkpFormField__control input,
.pkpFormField__control textarea,
.pkpFormField__control select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fe-primary);
  background: var(--fe-surface);
  border: 1px solid var(--fe-rule-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.pkpFormField__control input:focus,
.pkpFormField__control textarea:focus,
.pkpFormField__control select:focus {
  border-color: var(--fe-burgundy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(122,45,58,0.12);
}

/* ── Submission Wizard ── */
.pkpSteps {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--fe-rule);
}

.pkpSteps__step {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fe-tertiary);
  padding: var(--space-2) var(--space-4);
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
}

.pkpSteps__step--current {
  color: var(--fe-primary);
  border-bottom-color: var(--fe-burgundy);
}

.pkpSteps__step--completed {
  color: var(--fe-secondary);
  border-bottom-color: var(--fe-rule-strong);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pkp_page_login .pkp_form,
  .pkp_page_register .pkp_form {
    max-width: 100%;
    padding: var(--space-6);
    margin: 0 var(--space-4);
  }

  .pkp_workflow_tabs,
  .ui-tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  .pkp_decision_actions {
    flex-direction: column;
  }
}