/* ==========================================================================
   Article Management System — visual identity
   A clean, modern "publisher" look: soft neutral page background, a bright
   professional blue as the single accent color (matching the Technology
   Fist brand mark), white cards with soft shadows, rounded controls, and a
   plain sans-serif typeface throughout for a contemporary editorial feel.
   ========================================================================== */

:root{
  --ink:            #14171A;
  --ink-soft:       #3A4750;
  --paper-bg:       #F0F2F5;
  --surface:        #FFFFFF;
  --border:         #E1E4E8;
  --border-soft:    #EEF1F4;
  --gold:           #0B6BAB; --brand:#0B6BAB; --brand-soft:#E8F3FC; --ease-out:cubic-bezier(0.23,1,0.32,1);   /* brand accent blue (kept variable name for compatibility) */
  --gold-soft:      #E8F3FC;
  --accept:         #1E7145;
  --accept-soft:    #E4F4EA;
  --reject:         #C0392B;
  --reject-soft:    #FBEAE8;
  --info:           #0B6BAB;
  --info-soft:      #E8F3FC;
  --muted:          #65676B;
  --radius:         8px;
  --brand-dark:     #0B5FA0;
  --shadow-card:    0 1px 2px rgba(15,23,31,.06), 0 1px 6px rgba(15,23,31,.05);
  --shadow-hover:   0 4px 14px rgba(15,123,196,.18);
}

*{ box-sizing: border-box; }

body{
  background-color: var(--paper-bg);
  background-image: radial-gradient(circle, rgba(20,23,26,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4, .brand-serif{
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.1px;
}

a{ color: var(--info); text-decoration: none; }
a:hover{ color: var(--brand-dark); text-decoration: underline; }

/* ---------------- Utility bar (thin strip above the main nav) ---------------- */
.topbar-utility{
  background: var(--ink);
  color: #B9C6D3;
  font-size: .86rem;
  padding: .55rem 1.5rem;
}
.topbar-utility-inner{
  display: flex;
  justify-content: flex-end;
  gap: 1.1rem;
}
.topbar-utility a{
  color: #B9C6D3;
  text-decoration: none;
}
.topbar-utility a:hover{ color: #fff; text-decoration: underline; }
.topbar-utility .role-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  margin-left: 0;
  transition: background .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease);
}
.topbar-utility .role-pill:hover{ background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); color:#fff; }
.topbar-utility .role-pill:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
/* Open state: solid brand chip (not washed-out white), white label/caret legible. */
.topbar-utility .role-pill[aria-expanded="true"]{ background: var(--brand, #0B6BAB); border-color: var(--brand, #0B6BAB); color:#fff; }

/* v88.19 - account dropdown legibility (mirrors AMS).
   ".topbar-utility a" paints links light grey and white on hover; Bootstrap's
   .dropdown-item is an <a> inside that bar, so menu items were light-on-white
   and vanished on hover. Dark text at rest, charcoal on hover. */
.topbar-utility .dropdown-menu{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DCE3EA);
  border-radius: 12px;
  padding: .35rem;
  box-shadow: 0 18px 40px -22px rgba(15,23,31,.55);
}
.topbar-utility .dropdown-menu .dropdown-item{
  color: var(--ink, #14171A);
  font-weight: 600;
  font-size: .86rem;
  border-radius: 8px;
  padding: .5rem .75rem;
  text-decoration: none;
  transition: background-color .15s var(--ease-out, ease), color .15s var(--ease-out, ease);
}
.topbar-utility .dropdown-menu .dropdown-item:hover,
.topbar-utility .dropdown-menu .dropdown-item:focus,
.topbar-utility .dropdown-menu .dropdown-item:focus-visible,
.topbar-utility .dropdown-menu .dropdown-item.active,
.topbar-utility .dropdown-menu .dropdown-item:active{
  background-color: #36414A;   /* charcoal grey */
  color: #FFFFFF;
  text-decoration: none;
}
.topbar-utility .dropdown-menu .dropdown-item:focus-visible{ outline: 2px solid var(--brand, #0B6BAB); outline-offset: 1px; }

/* ---------------- Top bar (main navigation) ---------------- */
.topbar{
  background: linear-gradient(90deg, var(--brand-dark), var(--ink));
  color: #fff;
  /* v29.1: slimmer blue bar, matched to AMS (v88.52). The logo, not the
     padding, set the height, so both came down together and the row keeps
     its proportions. Both apps now measure ~95px so the two sites read as
     one platform when a user crosses between them. */
  padding: 0.35rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 6px rgba(15,23,31,.15);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0;
}
.topbar .brand:hover{ text-decoration: none; color: #fff; }
.topbar .brand img.brand-logo{
  height: 62px;   /* v88.66: matched to AMS's slimmer bar (96 -> 76 -> 62) */
  width: auto;
}
.topbar .brand .brand-sep{
  /* v88.42: slim gold divider between the Technology Fist logo and the app title */
  display: inline-block;
  width: 1px;
  height: 30px;   /* v29.1: kept in proportion with the slimmer bar */
  background: var(--gold, #c9a04e);
  opacity: .85;
  margin: 0 .25rem;
  flex: none;
}

.topbar .brand .dot{ color: var(--gold); }
.topbar nav{ display:flex; align-items:center; flex-wrap: wrap; }
.topbar nav a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  margin-left: 1.1rem;
  font-size: .92rem;
  font-weight: 500;
  padding: .3rem 0;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.topbar nav a:hover, .topbar nav a.active{ color: #fff; border-bottom-color: var(--gold); text-decoration: none; }
.topbar nav a.active{ font-weight: 700; }
.topbar nav a.nav-cta{
  margin-left: .7rem;
  padding: .35rem .9rem;
  border-bottom: none;
  vertical-align: middle;
}
.topbar nav a.nav-cta:hover{ border-bottom: none; text-decoration: none; color: #fff; }
.role-pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: none;
  background: var(--gold-soft);
  border: 1px solid #CFE6F7;
  color: var(--brand-dark);
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .3px;
  font-weight: 600;
  margin-left: .9rem;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
/* v88.8: the name+TF-ID can be long - let only the name ellipsis if it must,
   so the TF-ID and the dropdown caret are never clipped. */
.role-pill .role-pill-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.role-pill .role-pill-caret{ flex: 0 0 auto; opacity: .75; transition: transform .15s var(--ease-out, ease); }
.role-pill[aria-expanded="true"] .role-pill-caret{ transform: rotate(180deg); }
.role-pill.dropdown-toggle::after{ display: none; }

.page-wrap{ max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

/* ---------------- Cards / surfaces ---------------- */
.card{
  background: var(--surface);
  border: 1px solid #DCE3EA;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.card-header{
  background: var(--surface);
  border-bottom: 1px solid #DCE3EA;
  font-weight: 700;
}

/* ---------------- Paper / Article ID "chip" ---------------- */
.paper-code{
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .78rem;
  letter-spacing: .5px;
  background: var(--gold-soft);
  color: var(--brand-dark);
  border: 1px solid #CFE6F7;
  border-radius: 5px;
  padding: .14rem .5rem;
  white-space: nowrap;
}

/* ---------------- Buttons ---------------- */
.btn{ border-radius: var(--radius); font-weight: 600; font-size: .92rem; transition: background-color .15s var(--ease-out,ease), border-color .15s var(--ease-out,ease), color .15s var(--ease-out,ease), box-shadow .15s var(--ease-out,ease), transform .06s var(--ease-out,ease); }
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--gold); border-color: var(--gold);
}
.btn-primary:hover{ background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: var(--shadow-hover); }
.btn-gold{
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.btn-gold:hover{ background: var(--brand-dark); border-color: var(--brand-dark); color:#fff; box-shadow: var(--shadow-hover); }
.btn-outline-ink{
  color: var(--gold); border: 1px solid var(--gold); background: transparent;
}
.btn-outline-ink:hover{ background: var(--gold); color: #fff; }
.btn-outline-danger:hover{ box-shadow: 0 4px 14px rgba(192,57,43,.18); }
.btn-sm{ border-radius: 6px; }

/* ---------------- Status / decision badges ---------------- */
.badge{ font-weight: 600; letter-spacing: .2px; border-radius: 6px; }
.decision-chip{
  display:inline-block; padding:.22rem .6rem; border-radius: 999px;
  font-size:.78rem; font-weight:600; color:#fff;
}
.revision-chip{
  display:inline-block; padding:.22rem .6rem; border-radius: 999px;
  font-size:.78rem; font-weight:600; color:#fff; background: #B7791F;
}

/* ---------------- Tables ---------------- */
table.app-table{ width:100%; border-collapse: collapse; background: var(--surface); }
table.app-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color: var(--muted); border-bottom: 1px solid var(--border); padding: .65rem .7rem;
  background: #FAFBFC;
}
table.app-table td{ padding:.65rem .7rem; border-bottom:1px solid var(--border-soft); vertical-align: middle; }
table.app-table tr:hover td{ background: #F7FAFD; }

/* ---------------- Forms ---------------- */
.form-control:focus, .form-select:focus{
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(15,123,196,.15);
}
.form-control, .form-select{ border-radius: 7px; border-color: #D5D9DD; }

/* ---------------- Misc ---------------- */
.eyebrow{
  text-transform: uppercase; letter-spacing: 1.2px; font-size: .72rem;
  color: var(--gold); font-weight: 700;
}
.section-title{ font-size:1.55rem; margin-bottom:.25rem; font-weight: 700; }
.muted{ color: var(--muted); }
.stat-card{ text-align:center; padding: 1.1rem; }
.stat-num{ font-size:2rem; color: var(--ink); font-weight: 700; }
.stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.form-label{ font-weight:600; font-size:.9rem; }
.login-shell{ max-width: 430px; margin: 3.5rem auto; }
.login-shell .card{ padding: 1.85rem; }
.nav-pills .nav-link.active{ background: var(--gold); }
.nav-tabs .nav-link.active{ border-color: var(--border) var(--border) var(--surface); color: var(--gold); font-weight: 600; }
.accordion-button:not(.collapsed){ background: var(--gold-soft); color: var(--brand-dark); }
.accordion-button:focus{ box-shadow: 0 0 0 3px rgba(15,123,196,.15); }

/* ---------------- Site footer ---------------- */
footer.app-footer{
  color: #B9C6D3;
  font-size: .87rem;
  padding: 3rem 1.25rem 1.75rem;
  margin-top: 3rem;
  background: linear-gradient(180deg, var(--ink) 0%, #0d1013 100%);
  border-top: 3px solid var(--gold);
}
.app-footer-inner{ max-width: 1180px; margin: 0 auto; }

.footer-brand{
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .6rem;
}
footer.app-footer img.footer-logo{ height: 38px; width: auto; } /* v88.19: slightly larger */
.footer-tagline{ max-width: 320px; line-height: 1.5; margin-bottom: 1rem; color: #9fb0bf; }
.footer-contact-btn{ text-decoration: none !important; }

.footer-heading{
  font-size: .74rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; margin-bottom: .85rem;
}
.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin-bottom: .55rem; }
.footer-links a{ color: #9fb0bf; text-decoration: none; transition: color .15s ease; }
.footer-links a:hover{ color: var(--gold-light, #6fc3f7); text-decoration: underline; }

.footer-divider{ border-color: rgba(255,255,255,.15); opacity: 1; margin: 2rem 0 1.25rem; }
.footer-bottom{ text-align: center; font-size: .82rem; color: #8395a5; }
.footer-bottom a{ color: #B9C6D3; text-decoration: underline; }
.footer-bottom a:hover{ color: #fff; }

@media (max-width: 767px){
  footer.app-footer{ text-align: center; }
  .footer-brand{ justify-content: center; }
  .footer-tagline{ margin-left: auto; margin-right: auto; }
  /* v88.19: keep the (now larger) brand logo in proportion on small screens. */
  .topbar .brand img.brand-logo{ height: 48px; }
}