/*
  OJS 3.5 (PKP UI) inspired dashboard skin
  -------------------------------------------------
  This file overrides Bootstrap's default look so this
  application feels like the OJS 3.5 Editorial Dashboard.
*/

:root{
  --pkp-bg: #f4f6f8;
  --pkp-surface: #ffffff;
  --pkp-border: #d9dee3;
  --pkp-border-strong: #c9d0d7;
  --pkp-text: #1b1f24;
  --pkp-muted: #56606b;

  /* OJS-like blue */
  --pkp-primary: #006798;
  --pkp-primary-hover: #00577f;
  --pkp-primary-soft: rgba(0, 103, 152, 0.10);

  --pkp-success: #0f7b3a;
  --pkp-warning: #b45309;
  --pkp-danger: #b42318;

  --pkp-radius: 6px;
  --pkp-radius-sm: 4px;
  --pkp-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --pkp-shadow-lg: 0 10px 20px rgba(16, 24, 40, 0.10);

  --pkp-focus: 0 0 0 3px rgba(0, 103, 152, 0.20);

  /* OJS 3.5 editorial dashboard header/sidebar */
  --ojs-primary-900: #0d3a52;
  --ojs-primary-800: #114760;
  --ojs-accent: #1aa0d8;
  --ojs-sidebar-bg: var(--ojs-primary-900);
}


html, body{height: 100%;}

body.bg-app{
  background: var(--pkp-bg);
  color: var(--pkp-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Header (navbar) */
.navbar{
  background: var(--pkp-surface) !important;
  border-bottom: 1px solid var(--pkp-border) !important;
}

.navbar .navbar-brand{
  color: var(--pkp-text) !important;
  font-weight: 600;
  letter-spacing: .2px;
}

.navbar .btn,
.navbar .dropdown-toggle{
  font-weight: 600;
}

/* Panels (cards) */
.card{
  border: 1px solid var(--pkp-border);
  border-radius: var(--pkp-radius);
  box-shadow: var(--pkp-shadow);
}

.card.shadow-sm,
.card.border-0.shadow-sm{
  box-shadow: var(--pkp-shadow);
}

.card-body{
  padding: 1rem;
}

hr{
  border-color: var(--pkp-border);
  opacity: 1;
}

/* Typography */
h4, h5{
  font-weight: 600;
}

.text-muted,
.form-text,
.small.text-muted{
  color: var(--pkp-muted) !important;
}

code{
  background: rgba(16, 24, 40, 0.06);
  color: var(--pkp-text);
  padding: 2px 6px;
  border-radius: 999px;
}

/* Buttons (OJS-style) */
.btn{
  border-radius: var(--pkp-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
}

.btn-sm{
  padding: 0.30rem 0.55rem;
  font-size: 0.8125rem;
}

.btn-primary{
  background: var(--pkp-primary);
  border-color: var(--pkp-primary);
}

.btn-primary:hover,
.btn-primary:focus{
  background: var(--pkp-primary-hover);
  border-color: var(--pkp-primary-hover);
}

.btn-outline-primary{
  color: var(--pkp-primary);
  border-color: var(--pkp-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: var(--pkp-primary);
  border-color: var(--pkp-primary);
}

.btn-success{
  background: var(--pkp-success);
  border-color: var(--pkp-success);
}

.btn-outline-success{
  color: var(--pkp-success);
  border-color: var(--pkp-success);
}

.btn-danger{
  background: var(--pkp-danger);
  border-color: var(--pkp-danger);
}

.btn-outline-danger{
  color: var(--pkp-danger);
  border-color: var(--pkp-danger);
}

.btn:focus,
.form-control:focus,
.form-select:focus{
  box-shadow: var(--pkp-focus) !important;
}

/* Badges (status) */
.badge{
  border-radius: 999px;
  font-weight: 600;
}

.text-bg-success{ background: rgba(15, 123, 58, 0.12) !important; color: var(--pkp-success) !important; }
.text-bg-warning{ background: rgba(180, 83, 9, 0.12) !important; color: var(--pkp-warning) !important; }
.text-bg-danger{  background: rgba(180, 35, 24, 0.12) !important; color: var(--pkp-danger) !important; }
.text-bg-secondary{ background: rgba(86, 96, 107, 0.12) !important; color: var(--pkp-muted) !important; }

/* Forms */
.form-label{
  font-weight: 600;
  color: var(--pkp-text);
}

.form-control,
.form-select{
  border-color: var(--pkp-border);
  border-radius: var(--pkp-radius-sm);
}

textarea.form-control{
  min-height: 120px;
}

/* Tables */
.table{
  border-color: var(--pkp-border);
}

.table thead th{
  font-weight: 600;
  color: var(--pkp-muted);
  background: #f8fafc;
  border-bottom-color: var(--pkp-border);
}

.table tbody tr:hover{
  background: rgba(0, 103, 152, 0.04);
}

/* Tabs (OJS-like underline) */
.nav-tabs{
  border-bottom: 1px solid var(--pkp-border);
}

.nav-tabs .nav-link{
  border: none;
  border-radius: 0;
  color: var(--pkp-muted);
  font-weight: 600;
  padding: 0.65rem 0.9rem;
}

.nav-tabs .nav-link:hover{
  color: var(--pkp-text);
}

.nav-tabs .nav-link.active{
  color: var(--pkp-primary);
  background: transparent;
  border: none;
  box-shadow: inset 0 -2px 0 var(--pkp-primary);
}

/* Stepper (wizard navigation) */
.stepper{
  display: grid;
  gap: 2px;
  border: 1px solid var(--pkp-border);
  border-radius: var(--pkp-radius);
  overflow: hidden;
  background: var(--pkp-surface);
}

.stepper-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--pkp-border);
  padding: 12px 12px;
  background: var(--pkp-surface);
  text-align: left;
  transition: background .12s ease, color .12s ease;
}

.stepper-item:last-child{ border-bottom: none; }

.stepper-item:hover{
  background: rgba(0, 103, 152, 0.06);
}

.stepper-item.active{
  background: var(--pkp-primary-soft);
  box-shadow: inset 3px 0 0 var(--pkp-primary);
}

.stepper-badge{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--pkp-border);
  color: var(--pkp-muted);
}

.stepper-item.active .stepper-badge{
  background: #fff;
  border-color: rgba(0, 103, 152, 0.35);
  color: var(--pkp-primary);
}

.stepper-label{
  font-weight: 600;
  color: var(--pkp-text);
}

/* Dropdown menus */
.dropdown-menu{
  border-radius: var(--pkp-radius);
  border-color: var(--pkp-border);
  box-shadow: var(--pkp-shadow-lg);
}

.dropdown-item{
  font-weight: 600;
}

/* Modals */
.modal-content{
  border-radius: var(--pkp-radius);
  border-color: var(--pkp-border);
}

.modal-header{
  border-bottom: 1px solid var(--pkp-border);
}

.modal-footer{
  border-top: 1px solid var(--pkp-border);
}

/* TinyMCE wrapper (keep clean + OJS-like) */
.tox-tinymce{
  border-radius: var(--pkp-radius-sm) !important;
  border-color: var(--pkp-border) !important;
  box-shadow: none !important;
}

.tox .tox-statusbar{
  border-top-color: var(--pkp-border) !important;
}

/* Loading overlay + progress (OJS-like busy state) */
.pkpLoadingOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.pkpLoadingCard{
  width: min(520px, calc(100% - 2rem));
  background: var(--pkp-surface);
  border: 1px solid var(--pkp-border);
  border-radius: var(--pkp-radius);
  box-shadow: var(--pkp-shadow-lg);
  padding: 18px 18px;
}

.pkpLoadingRow{
  display: flex;
  align-items: center;
  gap: 12px;
}

.pkpSpinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--pkp-primary);
  animation: pkpSpin 0.9s linear infinite;
  flex: 0 0 auto;
}

@keyframes pkpSpin{ to { transform: rotate(360deg);} }

.pkpProgress{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.08);
  overflow: hidden;
  margin-top: 12px;
}

.pkpProgress > div{
  height: 100%;
  width: 10%;
  border-radius: 999px;
  background: var(--pkp-primary);
  transition: width .2s ease;
}

/* Toast notifications */
.pkpToastArea{
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 2100;
  display: grid;
  gap: 10px;
}

.pkpToast{
  width: min(420px, calc(100vw - 32px));
  background: var(--pkp-surface);
  border: 1px solid var(--pkp-border);
  border-left: 4px solid var(--pkp-primary);
  border-radius: var(--pkp-radius);
  box-shadow: var(--pkp-shadow-lg);
  padding: 10px 12px;
}

.pkpToastHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pkpToastTitle{
  font-weight: 700;
  color: var(--pkp-text);
}

.pkpToastClose{
  border: none;
  background: transparent;
  font-weight: 700;
  color: var(--pkp-muted);
  cursor: pointer;
}

.pkpToastBody{
  margin-top: 4px;
  color: var(--pkp-muted);
  font-size: 0.875rem;
}

.pkpToast.success{ border-left-color: var(--pkp-success); }
.pkpToast.warning{ border-left-color: var(--pkp-warning); }
.pkpToast.danger{ border-left-color: var(--pkp-danger); }

/* File inputs (make them closer to OJS) */
input[type="file"].form-control{
  padding: 0.45rem 0.55rem;
  background:#fff;
  border-style:dashed;
  border-color:var(--pkp-border-strong);
}

/* Responsive tweaks */
@media (max-width: 991px){
  .pkpToastArea{ top: 64px; right: 12px; }
}

/* Modals (OJS-like panel header) */
.modal-content{border-radius:var(--pkp-radius)!important; border:1px solid var(--pkp-border)!important; box-shadow:var(--pkp-shadow-lg)!important;}
.modal-header{background:#f6f8fa!important; border-bottom:1px solid var(--pkp-border)!important;}
.modal-footer{background:#f9fafb!important; border-top:1px solid var(--pkp-border)!important;}


/* -------------------------------------------------
   OJS 3.5-like App Shell
-------------------------------------------------- */
.ojs-navbar{
  background: var(--ojs-primary-900) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

.ojs-navbar .navbar-brand{
  color: #fff !important;
}

.ojs-navbar .btn,
.ojs-navbar .dropdown-toggle{
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.26) !important;
  background: transparent !important;
}

.ojs-navbar .btn:hover,
.ojs-navbar .btn:focus,
.ojs-navbar .dropdown-toggle:hover,
.ojs-navbar .dropdown-toggle:focus{
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.34) !important;
  color: #fff !important;
}

.ojs-navbar .dropdown-menu{
  border: 1px solid var(--pkp-border);
  box-shadow: var(--pkp-shadow-lg);
}

.ojs-navbar .dropdown-menu .btn{
  color: var(--pkp-text) !important;
  border-color: var(--pkp-border) !important;
  background: #fff !important;
}
.ojs-navbar .dropdown-menu .btn:hover{
  background: #f2f6fa !important;
}

/* Sidebar column becomes the OJS left nav on large screens */
@media (min-width: 992px){
  .ojs-sidebar{
    position: sticky;
    top: 64px; /* matches sticky navbar height */
    height: calc(100vh - 64px);
    overflow: auto;
    padding: 1rem 0.75rem;
    background: var(--ojs-sidebar-bg);
    border-radius: 0;
  }

  /* Remove the “card” feeling in the sidebar */
  .ojs-sidebar .card{
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .ojs-sidebar .card-body{
    padding: 0.25rem 0.5rem;
  }

  .ojs-sidebar hr{
    border-color: rgba(255,255,255,0.14);
  }

  .ojs-sidebar .text-muted,
  .ojs-sidebar .form-text,
  .ojs-sidebar .small.text-muted{
    color: rgba(255,255,255,0.70) !important;
  }
  .ojs-sidebar .text-dark,
  .ojs-sidebar .fw-semibold{
    color: rgba(255,255,255,0.93) !important;
  }

  .ojs-sidebar code{
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.93);
  }

  /* Stepper as OJS-style navigation list */
  .ojs-sidebar .stepper{
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
  }

  .ojs-sidebar .stepper-item{
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);
  }
  .ojs-sidebar .stepper-item:hover{
    background: rgba(255,255,255,0.08);
  }
  .ojs-sidebar .stepper-item.active{
    background: rgba(255,255,255,0.12);
    box-shadow: inset 3px 0 0 var(--ojs-accent);
  }

  .ojs-sidebar .stepper-label{
    color: rgba(255,255,255,0.93);
  }

  .ojs-sidebar .stepper-badge{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.85);
  }
  .ojs-sidebar .stepper-item.active .stepper-badge{
    border-color: rgba(26,160,216,0.60);
    color: #fff;
  }

  #statusBadge{
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.92) !important;
  }
}

/* Improve tabs + panels in the main content area */
.ojs-main .card{
  border-radius: 10px;
}

.ojs-main .card-body{
  padding: 1.25rem;
}

/* PKP-style toast */
.pkpToastArea{
  position: fixed;
  top: 76px;
  right: 18px;
  display: grid;
  gap: 10px;
  z-index: 1055;
}

.pkpToast{
  width: 360px;
  border: 1px solid var(--pkp-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--pkp-shadow-lg);
  overflow: hidden;
}

.pkpToast__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pkp-border);
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.875rem;
}

.pkpToast__body{
  padding: 10px 12px;
  color: var(--pkp-text);
  font-size: 0.875rem;
}

.pkpToast--success .pkpToast__header{ box-shadow: inset 4px 0 0 var(--pkp-success); }
.pkpToast--warning .pkpToast__header{ box-shadow: inset 4px 0 0 var(--pkp-warning); }
.pkpToast--danger  .pkpToast__header{ box-shadow: inset 4px 0 0 var(--pkp-danger); }
.pkpToast--info    .pkpToast__header{ box-shadow: inset 4px 0 0 var(--pkp-primary); }

/* Loading overlay */
.pkpLoadingOverlay{
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.40);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 2000;
}

.pkpLoadingCard{
  width: min(520px, 100%);
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--pkp-border);
  box-shadow: var(--pkp-shadow-lg);
  padding: 16px;
}

.pkpLoadingRow{
  display:flex;
  align-items:center;
  gap: 12px;
}

.pkpSpinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(0, 103, 152, 0.20);
  border-top-color: var(--pkp-primary);
  animation: pkpSpin 0.9s linear infinite;
}

@keyframes pkpSpin { to { transform: rotate(360deg); } }

.pkpProgress{
  height: 8px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(0,0,0,0.08);
  margin-top: 12px;
}

.pkpProgressBar{
  height: 100%;
  background: var(--pkp-primary);
  width: 0%;
  transition: width .18s ease;
}

/* File uploader look (OJS-like) */
.ojs-uploadBox{
  border: 2px dashed var(--pkp-border-strong);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.ojs-uploadBox:hover{
  border-color: rgba(0, 103, 152, 0.45);
  background: rgba(0, 103, 152, 0.03);
}

/* Health window tweaks (shared styles) */
.health-titlebar{
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.health-titlebar .btn.btn-light{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.health-titlebar .btn.btn-light:hover{
  background: rgba(255,255,255,0.26);
}