/* ============================================================
   NWU Archive — "The Reading Room"
   A refined, editorial, archival theme layered over Bootstrap 5.3.
   Themes Bootstrap's component variables + bespoke component styles.
   ============================================================ */

:root {
  /* ---- Palette: warm paper, deep ink, oxblood ---- */
  --paper:        #F4EFE5;
  --paper-raised: #FBF8F1;
  --paper-sunken: #ECE5D6;
  --ink:          #211E1A;
  --ink-soft:     #4E4842;
  --ink-faint:    #8C8377;
  /* Brand accent = NWU Purple (the --oxblood* names are kept so templates that already
     reference them don't all need editing; they now carry the official NWU brand colour). */
  --oxblood:      #6C3D91;   /* NWU Purple */
  --oxblood-deep: #54306F;
  --oxblood-tint: #EEE7F4;
  --brass:        #9A7430;   /* amber — the 'processing' state */
  --forest:       #00889C;   /* NWU Turquoise — success / exported */
  --danger:       #B23A3A;   /* a real red for errors/failed/delete (NOT the brand) */
  --danger-deep:  #8F2D2D;
  --danger-tint:  #F6E5E3;
  --line:         #E4DCCC;
  --line-strong:  #CFC3AC;

  --radius-sm: 7px;
  --radius:    11px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(33,30,26,.05), 0 1px 1px rgba(33,30,26,.04);
  --shadow:    0 8px 26px -12px rgba(33,30,26,.22);
  --shadow-lg: 0 28px 54px -22px rgba(33,30,26,.36);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Bootstrap variable overrides ---- */
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: .975rem;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 33,30,26;
  --bs-secondary-color: var(--ink-soft);
  --bs-tertiary-color: var(--ink-faint);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: var(--oxblood);
  --bs-primary-rgb: 108,61,145;
  --bs-link-color: var(--oxblood);
  --bs-link-color-rgb: 108,61,145;
  --bs-link-hover-color: var(--oxblood-deep);
  --bs-secondary-bg: var(--paper-sunken);
  --bs-tertiary-bg: var(--paper-raised);
  --bs-heading-color: var(--ink);
  --bs-focus-ring-color: rgba(108,61,145,.22);
}

/* ---------- Base & atmosphere ---------- */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 560px at 100% -8%, rgba(108,61,145,.055), transparent 60%),
    radial-gradient(900px 480px at -8% 2%, rgba(154,116,48,.05), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .modal-title {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -.012em;
  color: var(--ink);
  font-optical-sizing: auto;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .66rem;
  color: var(--ink-faint);
  font-weight: 500;
}
.rule { height: 1px; background: var(--line); border: 0; }
.text-faint { color: var(--ink-faint) !important; }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(251,248,241,.82) !important;
  backdrop-filter: saturate(140%) blur(9px);
  -webkit-backdrop-filter: saturate(140%) blur(9px);
  border-bottom: 1px solid var(--line);
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.navbar .navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink) !important;
  display: flex; align-items: center; gap: .55rem;
  letter-spacing: -.015em;
  font-size: 1.18rem;
}
.navbar .navbar-brand img { height: 30px; width: auto; }
.navbar .nwu-logo { height: 30px; width: auto; }
.navbar .brand-divider { width: 1px; height: 24px; background: var(--line-strong); display: inline-block; }
.navbar .brand-product { font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: 1.05rem; line-height: 1; }
.navbar .navbar-brand .sub {
  font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); display: block; line-height: 1; margin-top: 2px; font-weight: 500;
}
.navbar .nav-link, .navbar .navbar-text {
  color: var(--ink-soft) !important;
  font-weight: 500; font-size: .92rem;
}
.navbar .nav-link {
  border-radius: var(--radius-sm);
  padding: .35rem .75rem !important;
  transition: color .12s, background-color .12s;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
  color: var(--oxblood) !important;
  background: var(--oxblood-tint);
}
.navbar .text-light, .navbar .text-white, .navbar .text-white-50 { color: var(--ink-soft) !important; }
.navbar .btn-outline-light {
  --bs-btn-color: var(--ink-soft); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff;
}

/* ---------- Buttons ---------- */
.btn { font-weight: 540; letter-spacing: .005em; --bs-btn-border-radius: var(--radius-sm); }
.btn-lg { --bs-btn-border-radius: var(--radius); }
.btn-primary {
  --bs-btn-bg: var(--oxblood); --bs-btn-border-color: var(--oxblood);
  --bs-btn-hover-bg: var(--oxblood-deep); --bs-btn-hover-border-color: var(--oxblood-deep);
  --bs-btn-active-bg: var(--oxblood-deep); --bs-btn-active-border-color: var(--oxblood-deep);
  --bs-btn-disabled-bg: var(--oxblood); --bs-btn-disabled-border-color: var(--oxblood);
  box-shadow: var(--shadow-sm);
}
.btn-success {
  --bs-btn-bg: var(--forest); --bs-btn-border-color: var(--forest);
  --bs-btn-hover-bg: #006B7C; --bs-btn-hover-border-color: #006B7C;
  --bs-btn-active-bg: #006B7C;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-soft); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink);
}
.btn-outline-primary {
  --bs-btn-color: var(--oxblood); --bs-btn-border-color: #cbb6dd;
  --bs-btn-hover-bg: var(--oxblood); --bs-btn-hover-border-color: var(--oxblood); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--oxblood);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger); --bs-btn-border-color: #e0bcbc;
  --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger);
}
.btn-outline-success {
  --bs-btn-color: var(--forest); --bs-btn-border-color: #a9dce3;
  --bs-btn-hover-bg: var(--forest); --bs-btn-hover-border-color: var(--forest);
}

/* ---------- Cards ---------- */
.card {
  --bs-card-bg: var(--paper-raised);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--radius);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--shadow-sm);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--paper-raised);
  border-color: var(--line-strong);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--oxblood);
  box-shadow: 0 0 0 .2rem rgba(108,61,145,.15);
  background: #fff;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-label { font-weight: 560; color: var(--ink-soft); font-size: .85rem; }

/* ---------- Badges ---------- */
.badge { font-weight: 560; letter-spacing: .02em; }
.text-bg-dark { background: var(--ink) !important; }
.text-bg-success { background: var(--forest) !important; }
.text-bg-danger { background: var(--danger) !important; }
.text-bg-secondary { background: var(--paper-sunken) !important; color: var(--ink-soft) !important; }
.status-pill {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: .62rem; font-weight: 600; padding: .34em .7em; border-radius: 999px;
  border: 1px solid transparent;
}
.status-pill.s-draft     { background: var(--paper-sunken); color: var(--ink-soft); border-color: var(--line-strong); }
.status-pill.s-processing{ background: #f6ead0; color: #7a5410; border-color: #e7d2a4; }
.status-pill.s-exported  { background: #d9eef1; color: #045d6c; border-color: #a9dce3; }
.status-pill.s-failed    { background: var(--danger-tint); color: var(--danger-deep); border-color: #e3c3c3; }
/* Live "in progress" cue: a pulsing dot before a processing pill (anyone watching
   the list sees an export is running right now). */
.status-pill.s-processing::before {
  content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em;
  border-radius: 50%; background: currentColor; vertical-align: middle;
  animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } }

/* ---------- Tables & list-group ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--line); padding: .8rem .75rem; }
.table thead th {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .66rem; color: var(--ink-faint); font-weight: 600;
}
.table-hover > tbody > tr:hover > * { background: rgba(108,61,145,.035); }
.list-group { --bs-list-group-bg: var(--paper-raised); --bs-list-group-border-color: var(--line); }

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-color: var(--ink-soft);
  --bs-pagination-bg: var(--paper-raised);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--oxblood);
  --bs-pagination-hover-bg: var(--oxblood-tint);
  --bs-pagination-hover-border-color: var(--line-strong);
  --bs-pagination-focus-color: var(--oxblood);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(108,61,145,.15);
  --bs-pagination-active-bg: var(--oxblood);
  --bs-pagination-active-border-color: var(--oxblood);
  --bs-pagination-disabled-color: var(--ink-faint);
  --bs-pagination-disabled-bg: var(--paper-sunken);
  --bs-pagination-disabled-border-color: var(--line);
}

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius); border: 1px solid var(--line); }
.alert-warning { background: #f7efdb; color: #6a4e16; border-color: #e7d4a8; }
.alert-danger  { background: var(--danger-tint); color: var(--danger-deep); border-color: #e3c3c3; }
.alert-success { background: #d9eef1; color: #045d6c; border-color: #a9dce3; }
.alert-info    { background: var(--paper-sunken); color: var(--ink-soft); border-color: var(--line-strong); }

/* ---------- Modal ---------- */
.modal-content {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom-color: var(--line); }

/* ---------- Page header band ---------- */
.page-head { margin: .25rem 0 1.6rem; }
.page-head h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); margin-bottom: .15rem; }

/* ---------- The "light table" — organise grid ---------- */
/* Render-virtualize off-screen tiles so 100s of pages stay smooth (browser-native, no
   JS). Off-screen tiles skip layout/paint but remain in the DOM, so SortableJS drag,
   page renumbering, and the reorder POST all still see every tile. */
#grid .tile { content-visibility: auto; contain-intrinsic-size: auto 290px; }
#grid .tile .card { transition: box-shadow .16s ease, transform .16s ease; }
#grid .tile .card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
#grid .card-body img {
  border: 1px solid var(--line);
  box-shadow: 0 3px 10px -4px rgba(33,30,26,.34);
  background: #fff;
}
.page-number {
  font-family: var(--font-mono) !important;
  background: var(--ink) !important;
  letter-spacing: .04em; font-size: .7rem;
  box-shadow: var(--shadow-sm);
}
.sortable-ghost { opacity: .3; }
.sortable-chosen .card { box-shadow: var(--shadow-lg) !important; transform: scale(1.02); }
.sortable-drag .card { box-shadow: var(--shadow-lg) !important; }

/* ---------- Upload dropzone ---------- */
#dropzone {
  border-color: var(--line-strong) !important;
  background: var(--paper-sunken) !important;
  transition: background-color .15s, border-color .15s;
}
#dropzone:hover, #dropzone:focus-visible { border-color: var(--oxblood) !important; outline: none; }
#dropzone.border-primary { border-color: var(--oxblood) !important; background: var(--oxblood-tint) !important; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem 3.5rem; }
.empty-state img { width: 100%; max-width: 440px; opacity: .96; }
.empty-state h2 { margin-top: .5rem; }

/* ---------- Auth split ---------- */
.auth-head { max-width: 32rem; }
/* The art panel stretches to the form card's height (row align-items-stretch).
   The image is absolutely positioned so it does NOT impose its own height on the
   panel — the card drives the height; the artwork scales to fit (object-fit:contain,
   max-* keep it uncropped) and stays centred. */
.auth-art {
  position: relative;
  height: 100%;
  min-height: 18rem;
  overflow: hidden;
  background: var(--paper-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.auth-art img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 3rem);
  max-height: calc(100% - 3rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Staggered page-load reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
  .reveal-1 { animation-delay: .04s; }
  .reveal-2 { animation-delay: .10s; }
  .reveal-3 { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .04em;
}