/* =========================================================
   Impaxon Portal — portal.css (FINAL, consolidated)
   Bootstrap 5.x compatible • Brand-aligned
   ========================================================= */

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

/* === Brand tokens === */
:root {
  --impaxon: #20558a;
  --text:    #000;
  --bg:      #f5f7fa;
}

/* =========================================================
   BASE
   ========================================================= */
html { font-size: 12px; }
html, body { height: 100%; }
body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 64px; /* space for fixed header */
}
footer { flex-shrink: 0; }

h1, h2, h3, h4, h5 {
  color: var(--impaxon);
  font-weight: 700;
  margin-top: 0;
}

/* Utilities */
.text-impaxon { color: var(--impaxon) !important; }
.bg-impaxon   { background-color: var(--impaxon) !important; color:#fff !important; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar-custom { background-color: var(--impaxon) !important; }
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .navbar-brand,
.navbar-custom .navbar-toggler-icon { color: #fff !important; }

.navbar-custom .navbar-brand { font-size: 0.95rem; }
.navbar-custom .nav-link     { font-size: 0.95rem; padding: .4rem .6rem; }
.navbar-brand img            { max-height: 30px; }
@media (max-width: 420px){
  .navbar-custom .nav-link { font-size: 0.85rem; }
  .navbar-brand img        { max-height: 26px; }
}

/* =========================================================
   AUTH PAGES (login/register/forgot)
   ========================================================= */
.container.flex-fill {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.login-page-gap { margin-top: 2cm; }
.login-banner {
  background: var(--impaxon);
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.tagline h2 {
  color: var(--impaxon);
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin: 0 0 .4rem 0;
}
@media (max-width: 576px){ .tagline h2 { text-align: center; } }

form .form-control { padding: 0.65rem 0.9rem; font-size: 0.95rem; border-radius: 6px; }
input, select, textarea, button,
.form-control, .form-select, .form-label, label {
  font-size: 0.95rem;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
}

@media (max-width: 576px) { html { font-size: 16px; } }

/* Buttons */
.btn { font-size: 0.95rem; padding: .5rem .75rem; border-radius: .6rem; }
.btn-impaxon{
  background: var(--impaxon);
  border-color: var(--impaxon);
  color: #fff;
  font-weight: 600;
  padding: 0.65rem;
  border-radius: 6px;
  transition: filter .15s ease;
}
.btn-impaxon,
.btn-impaxon:hover,
.btn-impaxon:focus,
.btn-impaxon:active,
.btn-impaxon.active,
.show > .btn-impaxon.dropdown-toggle {
  background-color: var(--impaxon) !important;
  border-color: var(--impaxon) !important;
  color: #fff !important;
  filter: none !important;
}

/* Center text inside brand buttons, incl. small size */
.btn-impaxon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-impaxon.btn-sm{
  padding: .25rem .5rem;    /* match Bootstrap .btn-sm */
  font-size: .875rem;       /* match Bootstrap .btn-sm */
  line-height: 1.2;         /* keeps the text visually centered */
  border-radius: .4rem;
}



/* Misc */
.footer a:hover { text-decoration: underline; }
.border-bottom { border-bottom: 1px solid rgba(0,0,0,.1)!important; }
nav a.border-bottom { border-bottom-width: 2px !important; }

/* =========================================================
   LEGACY DASHBOARD SIDEBAR (if used outside admin)
   ========================================================= */
.sidebar {
  background-color: #2f6d9e;
  min-height: 100vh;
  width: 200px;
  position: fixed;
  top: 0; left: 0;
  margin-top: 60px; /* below fixed header */
  padding: 20px 15px;
  z-index: 1000;
  overflow-y: auto;
  max-height: 100vh;
  transition: left 0.3s ease;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 3px; }
.sidebar .nav-link {
  color: #f8f9fa;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  transition: background-color .2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #90c3ef; color: #fff; }
.sidebar .nav-section { font-weight: 600; font-size: 12px; margin: 10px 0 5px; color: #d6e2f1; padding-left: 12px; }
.sidebar .sidebar-group { border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 6px; padding-bottom: 4px; }
.sidebar .sidebar-group:last-child { border-bottom: none; }

@media (max-width: 992px) {
  .sidebar { left: -220px; width: 200px; }
  .sidebar.active { left: 0; }
}

/* =========================================================
   ADMIN SHELL UTILITIES
   ========================================================= */
.gx-2mm { --bs-gutter-x: 2mm !important; }
.gy-2mm { --bs-gutter-y: 2mm !important; }
.gx-5mm { --bs-gutter-x: 5mm !important; } /* use in layout if preferred */
.imp-sticky { position: sticky; top: 64px; }

/* =========================================================
   ADMIN SIDEBAR (Impaxon)
   ========================================================= */
.imp-sidebar { width: 240px; margin-left: 0; } /* fixed width, flush left */

.imp-sidebar .imp-box{
  background:#eef2f6;                 /* grayer than page */
  border:1px solid #d6dce6;
  border-radius:10px;
  box-shadow: 1px 0 0 rgba(32,85,138,.08), 0 1px 2px rgba(0,0,0,.04);
  padding:10px 12px;
}

.imp-sidebar .imp-sec + .imp-sec { margin-top: .25rem; }

.imp-sidebar .imp-sec-title{
  font-size:.78rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6b7280;
  font-weight:600;
  margin:6px 0 8px;
  display:flex; align-items:center; justify-content:space-between;
}

/* collapsible section button */
.imp-sec-btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:0; padding:.45rem .6rem;
  border-radius:.6rem; color:#222; text-align:left;
}
.imp-sec-btn:hover{ background:rgba(32,85,138,.08); color:#111; }
.imp-sec-btn .chev{ transition: transform .2s ease; }
.imp-sec-btn[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Nav list */
.imp-sidebar .imp-nav{ display:flex; flex-direction:column; gap:.2rem; }

/* Links (black text, blue hover/active “pill”) */
.imp-sidebar .imp-link{
  display:flex; align-items:center; gap:.45rem;
  padding:.45rem .6rem;
  border-radius:.6rem;
  color:#222;
  text-decoration:none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.imp-sidebar .imp-link:hover,
.imp-sidebar .imp-link:focus{
  background: rgba(32,85,138,.12);
  color:#111;
  text-decoration:none;
}
.imp-sidebar .imp-link.active{
  background: rgba(32,85,138,.18);
  color:#111;
  box-shadow: inset 0 0 0 1px rgba(32,85,138,.18);
}

/* Optional badge on the right (e.g., “soon”) */
.imp-sidebar .imp-badge{
  margin-left:auto;
  font-size:.72rem;
  padding:.1rem .4rem;
  background:#eef1f5;
  border-radius:10px;
  color:#3b4252;
}

/* =========================================================
   SMALL-SCREEN TWEAKS
   ========================================================= */
@media (max-width: 991.98px){
  .imp-sidebar{ width: 100%; margin: 0 0 .75rem; }
}
@media (max-width: 576px){
  .login-page-gap { margin-top: 1.25cm; }
  #title.title-select { font-size: 16px; line-height: 1.4; padding-top: .6rem; padding-bottom: .6rem; }
  #title.title-select option { font-size: 16px; }
}


/* ===== Admin title bar (below the global navbar) ===== */
.imp-titlebar{
  height: 64px;                      /* same height as your header */
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center;
}
.imp-titlebar .imp-title{
  margin: 0 auto;                    /* center horizontally */
  font-weight:700;
  color: var(--impaxon);
  font-size: 1.125rem;               /* ~18px at 16px base */
  text-align:center;
}

/* Sidebar sticky offset when a titlebar is present (64 + 64 = 128px) */
.imp-sticky-128 { top: 128px !important; }


/* ===== Sidebar sizing tweaks ===== */

/* Ensure section toggle buttons don’t look bigger than links */
.imp-sidebar .imp-sec-btn{
  font: inherit;            /* normalize button default */
  font-size: .92rem;        /* slightly larger than links (acts like heading) */
  font-weight: 600;
}

/* Main links (top-level items) */
.imp-sidebar .imp-link{
  font-size: .88rem;
  font-weight: 500;
}

/* Submenu container + links (smaller + indented) */
.imp-sidebar .imp-subnav { margin-left: .25rem; }
.imp-sidebar .imp-subnav .imp-link{
  font-size: .82rem;        /* smaller than main */
  font-weight: 400;         /* lighter */
  padding-left: 1.25rem;    /* visual hierarchy */
}

/* Account page two-column layout */
.imp-account-wrap { display:flex; gap:12px; align-items:flex-start; }
.imp-account-wrap .imp-sidebar { flex:0 0 260px; }
.imp-account-wrap .imp-main { flex:1 1 auto; min-width:0; }

@media (max-width: 992px) {
  .imp-account-wrap { display:block; }
  .imp-account-wrap .imp-sidebar { margin-bottom:12px; }
}


/* Unify select/input control heights if needed */
.form-select, .form-control { min-height: calc(1.5em + .75rem + 2px); }


/* Adjust the color to your brand */
.btn-add-author {
  background-color: #0d6efd;   /* e.g., Bootstrap primary blue */
  border-color: #0d6efd;
  color: #fff;
}
.btn-add-author:hover {
  filter: brightness(0.92);
}


/* Single-line rows with safe truncation */
.table-submissions { table-layout: fixed; }              /* predictable column widths */
.table-submissions th,
.table-submissions td { white-space: nowrap; }           /* no wrapping anywhere */

.table-submissions .title-ellipsis {
  display: inline-block; width: 520px;                   /* set a width, not just max-width */
  overflow: hidden; text-overflow: ellipsis;             /* … */
  vertical-align: middle;
}
.table-submissions .journal-ellipsis {
  display: inline-block; max-width: 220px;               /* matches your column width */
  overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}


/* revuewers tabke */

.table td {
  vertical-align: middle;
}
.reviewer-name {
  white-space: nowrap;
  cursor: pointer;
}
.reviewer-name:hover {
  text-decoration: underline;
  color: #0d6efd; /* Bootstrap blue */
}
.tooltip-inner {
  font-size: 0.85rem;
  white-space: nowrap;
}