/* =========================================================================
   VESTA-NEX LIBRARY — MASTER STYLESHEET  (styles.css)
   Loaded once from header.php on every portal page.
   Theme: leather-and-gold-leaf — dark espresso panels, brass/gold accents,
   warm cream paper. Built mobile-first, scales up to desktop.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700;800&display=swap');

/* ---------- Design Tokens ---------- */
:root{
  /* Brand palette — "gold leaf on leather" */
  --vnl-primary:        #3B2A16;   /* deep bronze — headings / ink accents */
  --vnl-primary-dark:   #140D07;   /* darkest espresso — sidebar base       */
  --vnl-primary-light:  #55391C;   /* hover bronze                          */
  --vnl-accent:         #D4AF37;   /* gold — the star of this theme         */
  --vnl-accent-dark:    #A67C1E;   /* gold hover / pressed                  */
  --vnl-accent-light:   #EFD98B;   /* pale gold for text on dark surfaces   */
  --vnl-paper:          #FFFCF3;   /* warm cream page background            */
  --vnl-card:           #FFFFFF;
  --vnl-ink:            #241A0F;
  --vnl-ink-soft:       #8A7A5E;
  --vnl-border:         #EEE1BC;

  /* Status colors (kept distinct from gold for legibility) */
  --vnl-success:        #2D6A4F;
  --vnl-success-bg:     #E6F2EC;
  --vnl-warning:        #B7791F;
  --vnl-warning-bg:     #FBF0DC;
  --vnl-danger:         #B3261E;
  --vnl-danger-bg:      #FBEAE9;
  --vnl-info:           #2C5C8A;
  --vnl-info-bg:        #E7F0F9;

  /* Layout */
  --vnl-sidebar-w:      260px;
  --vnl-topbar-h:       68px;
  --vnl-bottomnav-h:    64px;
  --vnl-radius-sm:      8px;
  --vnl-radius:         14px;
  --vnl-radius-lg:      20px;
  --vnl-shadow-sm:      0 1px 3px rgba(59,42,22,0.10);
  --vnl-shadow:         0 6px 20px rgba(59,42,22,0.12);
  --vnl-shadow-lg:      0 16px 40px rgba(20,13,7,0.28);

  --vnl-font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--vnl-font);
  font-weight:600;
  background:var(--vnl-paper);
  color:var(--vnl-ink);
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
ul{ list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--vnl-font); font-weight:800; color:var(--vnl-primary); letter-spacing:0.2px; }
:focus-visible{ outline:3px solid var(--vnl-accent); outline-offset:2px; border-radius:4px; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.vnl-app{
  display:grid;
  grid-template-columns: var(--vnl-sidebar-w) 1fr;
  min-height:100vh;
}

/* ---------- Sidebar (dark leather + gold leaf) ---------- */
.vnl-sidebar{
  background: linear-gradient(180deg, #2B1D10 0%, var(--vnl-primary-dark) 100%);
  color:#F3E9CF;
  position:fixed;
  inset:0 auto 0 0;
  width:var(--vnl-sidebar-w);
  height:100vh;
  display:flex;
  flex-direction:column;
  z-index:100;
  transition:transform .28s ease;
  border-right:1px solid rgba(212,175,55,0.12);
}
.vnl-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:22px 20px;
  border-bottom:1px solid rgba(212,175,55,0.16);
}
.vnl-brand-mark{
  width:42px; height:42px; flex:none;
  background:linear-gradient(135deg, var(--vnl-accent), var(--vnl-accent-dark));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--vnl-primary-dark);
  font-weight:800; font-size:18px;
  box-shadow:var(--vnl-shadow-sm);
}
.vnl-brand-text{ line-height:1.15; }
.vnl-brand-text strong{ display:block; font-size:16.5px; font-weight:800; color:#fff; }
.vnl-brand-text span{ display:block; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--vnl-accent-light); font-weight:700; margin-top:2px; }

.vnl-nav{ flex:1; overflow-y:auto; padding:14px 12px 10px; }
.vnl-nav-group{ margin-bottom:6px; }
.vnl-nav-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.3px;
  color:rgba(239,217,139,0.55); font-weight:700;
  padding:14px 12px 6px;
}
.vnl-nav-link{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border-radius:10px;
  font-weight:700; font-size:14.5px;
  color:rgba(243,233,207,0.82);
  margin-bottom:3px;
  transition:background .15s ease, color .15s ease;
}
.vnl-nav-link svg{ width:19px; height:19px; flex:none; opacity:.9; }
.vnl-nav-link:hover{ background:rgba(212,175,55,0.10); color:#fff; }
.vnl-nav-link.is-active{
  background:rgba(212,175,55,0.18);
  color:#fff;
}
.vnl-nav-link.is-active::before{
  /* bookmark-ribbon notch — signature active-state marker, in gold */
  content:"";
  position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:6px; height:26px;
  background:var(--vnl-accent);
  border-radius:0 4px 4px 0;
}
.vnl-nav-link .vnl-badge-count{
  margin-left:auto;
  background:var(--vnl-accent);
  color:var(--vnl-primary-dark);
  font-size:11px; font-weight:800;
  padding:2px 7px; border-radius:20px;
}

.vnl-sidebar-foot{
  padding:14px 18px 18px;
  border-top:1px solid rgba(212,175,55,0.16);
  font-size:11.5px;
  color:rgba(243,233,207,0.6);
  font-weight:600;
}
.vnl-sidebar-foot b{ color:var(--vnl-accent-light); }

/* ---------- Main column ---------- */
.vnl-main{
  grid-column:2;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ---------- Topbar ---------- */
.vnl-topbar{
  height:var(--vnl-topbar-h);
  background:var(--vnl-card);
  border-bottom:1px solid var(--vnl-border);
  display:flex; align-items:center; gap:16px;
  padding:0 22px;
  position:sticky; top:0; z-index:60;
}
.vnl-burger{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid var(--vnl-border);
  background:var(--vnl-paper);
}
.vnl-burger svg{ width:20px; height:20px; color:var(--vnl-primary); }

.vnl-page-title{ display:flex; flex-direction:column; gap:1px; }
.vnl-page-title h1{ font-size:19px; }
.vnl-page-title small{ color:var(--vnl-ink-soft); font-weight:600; font-size:12.5px; }

.vnl-topbar-search{ flex:1; max-width:420px; position:relative; margin-left:8px; }
.vnl-topbar-search input{
  width:100%;
  border:1px solid var(--vnl-border);
  background:var(--vnl-paper);
  border-radius:24px;
  padding:10px 16px 10px 40px;
  font-weight:600; font-size:14px;
  color:var(--vnl-ink);
}
.vnl-topbar-search input::placeholder{ color:var(--vnl-ink-soft); }
.vnl-topbar-search input:focus{ border-color:var(--vnl-accent); background:#fff; }
.vnl-topbar-search svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--vnl-ink-soft);
}

/* live student-search suggestion dropdown */
.vnl-search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--vnl-card);
  border:1px solid var(--vnl-border);
  border-radius:var(--vnl-radius);
  box-shadow:var(--vnl-shadow-lg);
  max-height:360px; overflow-y:auto;
  z-index:80; display:none;
}
.vnl-search-results.is-open{ display:block; }
.vnl-search-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--vnl-border); }
.vnl-search-item:last-child{ border-bottom:none; }
.vnl-search-item:hover{ background:var(--vnl-paper); cursor:pointer; }
.vnl-search-avatar{
  width:38px; height:38px; border-radius:10px; flex:none;
  background:linear-gradient(135deg, var(--vnl-primary-light), var(--vnl-primary));
  color:var(--vnl-accent-light);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; overflow:hidden;
}
.vnl-search-avatar img{ width:100%; height:100%; object-fit:cover; }
.vnl-search-meta{ min-width:0; }
.vnl-search-meta strong{ display:block; font-size:14px; color:var(--vnl-ink); }
.vnl-search-meta span{ display:block; font-size:12px; color:var(--vnl-ink-soft); font-weight:600; }
.vnl-search-empty{ padding:16px; text-align:center; color:var(--vnl-ink-soft); font-weight:600; font-size:13.5px; }

.vnl-topbar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.vnl-icon-btn{
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--vnl-border);
  background:var(--vnl-paper);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.vnl-icon-btn svg{ width:19px; height:19px; color:var(--vnl-primary); }
.vnl-icon-dot{
  position:absolute; top:6px; right:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--vnl-danger); border:2px solid var(--vnl-card);
}

.vnl-user-chip{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px 6px 6px;
  border-radius:30px;
  border:1px solid var(--vnl-border);
  background:var(--vnl-paper);
  position:relative;
}
.vnl-user-avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--vnl-accent), var(--vnl-accent-dark));
  color:var(--vnl-primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
.vnl-user-chip strong{ font-size:13.5px; display:block; line-height:1.1; }
.vnl-user-chip span{ font-size:11px; color:var(--vnl-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.vnl-user-chip .vnl-chevron{ width:14px; height:14px; color:var(--vnl-ink-soft); }

.vnl-user-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  width:220px;
  background:var(--vnl-card);
  border:1px solid var(--vnl-border);
  border-radius:var(--vnl-radius);
  box-shadow:var(--vnl-shadow-lg);
  padding:8px;
  display:none;
  z-index:90;
}
.vnl-user-menu.is-open{ display:block; }
.vnl-user-menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-weight:700; font-size:13.5px; color:var(--vnl-ink); }
.vnl-user-menu a:hover{ background:var(--vnl-paper); }
.vnl-user-menu a.vnl-danger-link{ color:var(--vnl-danger); }
.vnl-user-menu svg{ width:16px; height:16px; }
.vnl-user-menu hr{ border:none; border-top:1px solid var(--vnl-border); margin:6px 0; }

/* ---------- Content area ---------- */
.vnl-content{ padding:24px; flex:1; }
.vnl-content-inner{ max-width:1280px; margin:0 auto; }

/* =========================================================================
   REUSABLE COMPONENTS
   ========================================================================= */

/* ---- "Accession ticket" card — gold perforated edge, the signature look ---- */
.vnl-card{
  background:var(--vnl-card);
  border:1px solid var(--vnl-border);
  border-radius:var(--vnl-radius);
  box-shadow:var(--vnl-shadow-sm);
  position:relative;
  overflow:hidden;
}
.vnl-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg, var(--vnl-accent) 0 8px, transparent 8px 16px);
}
.vnl-card-body{ padding:20px; }
.vnl-card-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 0; }
.vnl-card-header h3{ font-size:15.5px; }

/* Stat / stamp cards for dashboards */
.vnl-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.vnl-stat-card{
  background:var(--vnl-card);
  border:1px solid var(--vnl-border);
  border-radius:var(--vnl-radius);
  padding:18px 18px 16px;
  box-shadow:var(--vnl-shadow-sm);
  position:relative;
}
.vnl-stat-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg, var(--vnl-accent) 0 8px, transparent 8px 16px);
}
.vnl-stat-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.vnl-stat-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--vnl-success-bg); color:var(--vnl-success); }
.vnl-stat-icon svg{ width:19px; height:19px; }
.vnl-stat-icon.is-warning{ background:var(--vnl-warning-bg); color:var(--vnl-warning); }
.vnl-stat-icon.is-danger{ background:var(--vnl-danger-bg); color:var(--vnl-danger); }
.vnl-stat-icon.is-info{ background:var(--vnl-info-bg); color:var(--vnl-info); }
.vnl-stat-icon.is-gold{ background:#FBF2D9; color:var(--vnl-accent-dark); }
.vnl-stat-value{ font-size:28px; font-weight:800; color:var(--vnl-primary); margin-top:12px; }
.vnl-stat-label{ font-size:12.5px; color:var(--vnl-ink-soft); font-weight:700; margin-top:2px; }

/* ---- Buttons ---- */
.vnl-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  border-radius:10px;
  font-weight:700; font-size:14px;
  border:1px solid transparent;
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.vnl-btn svg{ width:16px; height:16px; }
.vnl-btn:active{ transform:translateY(1px); }
.vnl-btn-primary{
  background:linear-gradient(135deg, var(--vnl-accent), var(--vnl-accent-dark));
  color:var(--vnl-primary-dark);
  box-shadow:var(--vnl-shadow-sm);
}
.vnl-btn-primary:hover{ background:linear-gradient(135deg, var(--vnl-accent-light), var(--vnl-accent)); }
.vnl-btn-outline{ background:transparent; border-color:var(--vnl-border); color:var(--vnl-primary); }
.vnl-btn-outline:hover{ background:var(--vnl-paper); }
.vnl-btn-dark{ background:var(--vnl-primary-dark); color:var(--vnl-accent-light); }
.vnl-btn-dark:hover{ background:var(--vnl-primary); }
.vnl-btn-danger{ background:var(--vnl-danger-bg); color:var(--vnl-danger); }
.vnl-btn-danger:hover{ background:#f6d9d7; }
.vnl-btn-sm{ padding:7px 12px; font-size:12.5px; border-radius:8px; }
.vnl-btn-block{ width:100%; justify-content:center; }
.vnl-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Badges / status pills ---- */
.vnl-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.vnl-badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.vnl-badge-success{ background:var(--vnl-success-bg); color:var(--vnl-success); }
.vnl-badge-warning{ background:var(--vnl-warning-bg); color:var(--vnl-warning); }
.vnl-badge-danger{ background:var(--vnl-danger-bg); color:var(--vnl-danger); }
.vnl-badge-info{ background:var(--vnl-info-bg); color:var(--vnl-info); }
.vnl-badge-gold{ background:#FBF2D9; color:var(--vnl-accent-dark); }
.vnl-badge-muted{ background:#F1ECDC; color:var(--vnl-ink-soft); }

/* ---- Tables ---- */
.vnl-table-wrap{ overflow-x:auto; border-radius:var(--vnl-radius); border:1px solid var(--vnl-border); }
table.vnl-table{ width:100%; border-collapse:collapse; background:var(--vnl-card); min-width:640px; }
table.vnl-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--vnl-ink-soft); background:var(--vnl-paper); padding:12px 16px; border-bottom:1px solid var(--vnl-border); white-space:nowrap; }
table.vnl-table td{ padding:13px 16px; border-bottom:1px solid var(--vnl-border); font-size:13.5px; font-weight:600; color:var(--vnl-ink); }
table.vnl-table tr:last-child td{ border-bottom:none; }
table.vnl-table tbody tr:hover{ background:var(--vnl-paper); }

/* ---- Forms ---- */
.vnl-field{ margin-bottom:16px; }
.vnl-field label{ display:block; font-size:13px; font-weight:700; color:var(--vnl-primary); margin-bottom:6px; }
.vnl-field .vnl-hint{ display:block; font-size:11.5px; color:var(--vnl-ink-soft); font-weight:600; margin-top:5px; }
.vnl-input, .vnl-select, .vnl-textarea{
  width:100%; border:1px solid var(--vnl-border); background:var(--vnl-paper);
  border-radius:10px; padding:11px 14px; font-weight:700; font-size:14px; color:var(--vnl-ink);
}
.vnl-input:focus, .vnl-select:focus, .vnl-textarea:focus{ background:#fff; border-color:var(--vnl-accent); }
.vnl-row{ display:grid; gap:16px; }
.vnl-row-2{ grid-template-columns:1fr 1fr; }
.vnl-row-3{ grid-template-columns:1fr 1fr 1fr; }

/* PIN / access-code entry (librarian login) */
.vnl-code-inputs{ display:flex; gap:10px; justify-content:center; }
.vnl-code-inputs input{
  width:52px; height:60px; text-align:center; font-size:24px; font-weight:800;
  border:1.5px solid var(--vnl-border); border-radius:12px; background:var(--vnl-paper); color:var(--vnl-primary);
}
.vnl-code-inputs input:focus{ border-color:var(--vnl-accent); background:#fff; }

/* ---- Alerts / toasts ---- */
.vnl-alert{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:12px; font-size:13.5px; font-weight:700; border:1px solid transparent; margin-bottom:16px; }
.vnl-alert svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.vnl-alert-success{ background:var(--vnl-success-bg); color:var(--vnl-success); border-color:#bfe2cf; }
.vnl-alert-warning{ background:var(--vnl-warning-bg); color:var(--vnl-warning); border-color:#f0dba9; }
.vnl-alert-danger{ background:var(--vnl-danger-bg); color:var(--vnl-danger); border-color:#f2c3c0; }
.vnl-alert-info{ background:var(--vnl-info-bg); color:var(--vnl-info); border-color:#c3d8ec; }

#vnl-toast-stack{ position:fixed; top:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:10px; width:min(340px, calc(100vw - 40px)); }
.vnl-toast{
  background:var(--vnl-primary-dark); color:var(--vnl-accent-light);
  border-radius:12px; padding:13px 16px; box-shadow:var(--vnl-shadow-lg);
  font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:10px;
  animation:vnlToastIn .25s ease; border:1px solid rgba(212,175,55,0.3);
}
.vnl-toast.is-danger{ background:var(--vnl-danger); color:#fff; border-color:transparent; }
.vnl-toast.is-success{ background:var(--vnl-success); color:#fff; border-color:transparent; }
@keyframes vnlToastIn{ from{ opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---- Modal ---- */
.vnl-modal-overlay{ position:fixed; inset:0; background:rgba(20,13,7,0.6); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; backdrop-filter:blur(2px); }
.vnl-modal-overlay.is-open{ display:flex; }
.vnl-modal{ background:var(--vnl-card); border-radius:var(--vnl-radius-lg); width:100%; max-width:460px; box-shadow:var(--vnl-shadow-lg); overflow:hidden; }
.vnl-modal-head{ padding:20px 22px 0; }
.vnl-modal-head h3{ font-size:17px; }
.vnl-modal-body{ padding:14px 22px 22px; color:var(--vnl-ink-soft); font-weight:600; font-size:13.5px; }
.vnl-modal-actions{ display:flex; gap:10px; padding:0 22px 22px; }

/* ---- Empty state ---- */
.vnl-empty{ text-align:center; padding:50px 20px; color:var(--vnl-ink-soft); }
.vnl-empty svg{ width:52px; height:52px; margin:0 auto 14px; opacity:.5; }
.vnl-empty h4{ color:var(--vnl-primary); font-size:15px; margin-bottom:4px; }
.vnl-empty p{ font-size:13px; font-weight:600; }

/* ---- Utility ---- */
.vnl-flex{ display:flex; align-items:center; }
.vnl-gap-8{ gap:8px; } .vnl-gap-12{ gap:12px; } .vnl-gap-16{ gap:16px; }
.vnl-mt-8{ margin-top:8px;} .vnl-mt-16{ margin-top:16px;} .vnl-mt-24{ margin-top:24px;}
.vnl-mb-16{ margin-bottom:16px;}
.vnl-text-soft{ color:var(--vnl-ink-soft); font-weight:600; }
.vnl-text-center{ text-align:center; }

/* =========================================================================
   MOBILE NAV (bottom tab bar) + DRAWER
   ========================================================================= */
.vnl-bottomnav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:120;
  height:var(--vnl-bottomnav-h);
  background:var(--vnl-primary-dark);
  border-top:1px solid rgba(212,175,55,0.2);
  box-shadow:0 -6px 20px rgba(20,13,7,0.25);
}
.vnl-bottomnav ul{ display:flex; height:100%; }
.vnl-bottomnav li{ flex:1; }
.vnl-bottomnav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:100%; color:rgba(243,233,207,0.6); font-size:10.5px; font-weight:700; }
.vnl-bottomnav a svg{ width:20px; height:20px; }
.vnl-bottomnav a.is-active{ color:var(--vnl-accent-light); }
.vnl-bottomnav a.is-active svg{ color:var(--vnl-accent); }

.vnl-sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(20,13,7,0.55); z-index:99; }
.vnl-sidebar-scrim.is-open{ display:block; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px){
  .vnl-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .vnl-row-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .vnl-app{ grid-template-columns:1fr; }
  .vnl-sidebar{ transform:translateX(-100%); }
  .vnl-sidebar.is-open{ transform:translateX(0); }
  .vnl-burger{ display:flex; }
  .vnl-topbar-search{ display:none; }
  .vnl-user-chip strong, .vnl-user-chip span{ display:none; }
  .vnl-user-chip{ padding:6px; }
  .vnl-bottomnav{ display:block; }
  .vnl-content{ padding:16px 16px calc(var(--vnl-bottomnav-h) + 24px); }
}
@media (max-width: 640px){
  .vnl-stat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .vnl-row-2, .vnl-row-3{ grid-template-columns:1fr; }
  .vnl-page-title h1{ font-size:16.5px; }
  .vnl-code-inputs input{ width:42px; height:52px; font-size:20px; }
}

/* =========================================================================
   AUTH SCREEN (login.php) — a deliberately different moment from the rest
   of the portal: a dark "vault door" the librarian's access code opens,
   rather than another card on the cream dashboard background.
   ========================================================================= */
.vnl-auth-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.16), transparent 55%),
    linear-gradient(180deg, #2B1D10 0%, var(--vnl-primary-dark) 100%);
  position:relative;
  overflow:hidden;
}
.vnl-auth-wrap::before{
  /* faint perforated ring, echoing the ticket motif at portal scale */
  content:"";
  position:absolute; inset:-10% ;
  background:repeating-radial-gradient(circle at 50% 0%, transparent 0 120px, rgba(212,175,55,0.03) 121px 122px);
  pointer-events:none;
}
.vnl-auth-card{
  position:relative;
  width:100%; max-width:400px;
  background:var(--vnl-card);
  border-radius:var(--vnl-radius-lg);
  box-shadow:var(--vnl-shadow-lg);
  padding:36px 32px 32px;
  text-align:center;
  border:1px solid rgba(212,175,55,0.35);
}
.vnl-auth-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:5px;
  border-radius:var(--vnl-radius-lg) var(--vnl-radius-lg) 0 0;
  background:repeating-linear-gradient(90deg, var(--vnl-accent) 0 10px, var(--vnl-accent-dark) 10px 20px);
}
.vnl-auth-mark{
  width:60px; height:60px; margin:0 auto 16px;
  border-radius:16px;
  background:linear-gradient(135deg, var(--vnl-accent), var(--vnl-accent-dark));
  display:flex; align-items:center; justify-content:center;
  color:var(--vnl-primary-dark); font-weight:800; font-size:24px;
  box-shadow:0 8px 20px rgba(212,175,55,0.35);
}
.vnl-auth-card h1{ font-size:20px; margin-bottom:4px; }
.vnl-auth-card p.vnl-auth-sub{ color:var(--vnl-ink-soft); font-weight:600; font-size:13px; margin-bottom:26px; }
.vnl-auth-card .vnl-field label{ text-align:left; }
.vnl-auth-foot{
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--vnl-border);
  font-size:11.5px; color:var(--vnl-ink-soft); font-weight:600;
}
.vnl-auth-badge{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px;
  font-size:11px; font-weight:700; color:var(--vnl-ink-soft);
}
.vnl-auth-badge svg{ width:14px; height:14px; }

@media (max-width:480px){
  .vnl-auth-card{ padding:28px 20px 24px; }
}

/* =========================================================================
   PRINT — every issue/return/clearance action becomes a PDF record.
   Wrap the printable block in class="vnl-print-area" and trigger via a
   button with data-vnl-print (see app.js) or generate server-side with
   your PDF library — this print stylesheet keeps the on-screen version
   consistent with the paper version.
   ========================================================================= */
@media print{
  .vnl-sidebar, .vnl-topbar, .vnl-bottomnav, .vnl-sidebar-scrim,
  #vnl-toast-stack, .vnl-no-print{ display:none !important; }
  .vnl-app{ display:block; }
  .vnl-content{ padding:0; }
  body{ background:#fff; }
}