/* =========================================================================
   MLIS Study — shared shell & design system
   Light mode only. Loaded by every page; shell.js builds the sidebar.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#f6f7f9; --bg-elevated:#ffffff; --bg-input:#ffffff; --bg-sunken:#eef1f5;
  --border:#e2e6ec; --border-strong:#cfd6e0;
  --text:#1f2430; --text-dim:#6b7590;
  --accent:#234d3e; --accent-hover:#183528; --accent-soft:rgba(35,77,62,.08);
  --danger:#b23a30; --ok:#16a34a; --warn:#946200; --violet:#5b4a86;
  --shadow:0 4px 16px rgba(20,30,60,.10);
}
html{ color-scheme:light; }
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.55;
}
h1,h2,h3,h4{font-family:'Spectral',Georgia,serif; font-weight:700;}
code,.mono,input,select,textarea,.badge,pre{font-family:'IBM Plex Mono',ui-monospace,monospace;}
a{color:var(--accent);}
svg.icon{width:16px; height:16px; flex-shrink:0;}

/* ---------- Shell layout ---------- */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:250px; flex-shrink:0; background:var(--bg-elevated); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;
}
.sidebar-brand{padding:22px 20px 16px; text-decoration:none; color:var(--text); display:block;}
.sidebar-brand .name{font:700 16px 'Spectral',Georgia,serif; letter-spacing:.01em;}
.sidebar-brand .name span{color:var(--accent);}
.sidebar-brand .tagline{font-size:11px; color:var(--text-dim); margin-top:3px; letter-spacing:.04em; text-transform:uppercase;}
.sidebar-group-label{padding:16px 20px 6px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);}
.sidebar-link{
  display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--text-dim);
  cursor:pointer; font-size:13px; border-left:2px solid transparent; text-decoration:none;
}
.sidebar-link:hover{color:var(--text); background:var(--accent-soft);}
.sidebar-link.active{color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); font-weight:600;}
.sidebar-link.locked{opacity:.4; pointer-events:none;}
.sidebar-link svg{width:16px; height:16px; flex-shrink:0;}
.sidebar-link .txt{display:flex; flex-direction:column; gap:1px; min-width:0;}
.sidebar-link .lbl{line-height:1.3; white-space:nowrap;}
.sidebar-link .note{font-size:9px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim); opacity:.8; white-space:nowrap; line-height:1.3;}
.sidebar-link.active .note{color:var(--accent); opacity:1;}
.sidebar-footer{margin-top:auto; padding:16px 20px; border-top:1px solid var(--border); font-size:11px; color:var(--text-dim);}
.sidebar-footer .cite{margin-top:10px; line-height:1.6;}

.content-area{flex:1; min-width:0; display:flex; flex-direction:column;}
.content-header{
  padding:16px 28px; border-bottom:1px solid var(--border); background:var(--bg-elevated);
  display:flex; align-items:center; gap:12px;
}
.content-header h1{font-size:16px; margin:0; line-height:1.35;}
.content-header .sub{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-left:auto;}
.content-body{padding:28px; max-width:1040px; width:100%; margin:0 auto;}
.content-body.narrow{max-width:780px;}
.content-body.wide{max-width:1160px;}

/* ---------- Mobile sidebar ---------- */
.menu-toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:60; background:var(--bg-elevated);
  border:1px solid var(--border); border-radius:6px; width:36px; height:36px; align-items:center;
  justify-content:center; color:var(--text); cursor:pointer;
}
.sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40;}
.sidebar-backdrop.show{display:block;}
.menu-toggle.hide-while-open{display:none !important;}
@media (max-width:860px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; z-index:50; box-shadow:0 0 24px rgba(0,0,0,.25);}
  .sidebar.open{transform:translateX(0);}
  .menu-toggle{display:flex;}
  .content-header{padding-left:60px;}
  .content-body{padding:20px;}
}

/* ---------- Panels ---------- */
.panel{background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px;
  margin-bottom:20px; overflow:hidden;}
.panel .bar{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border);
  padding:12px 16px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--text-dim);}
.panel .bar .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;}
.panel .bar .ref{margin-left:auto; background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--text-dim); font:500 11px 'IBM Plex Sans',sans-serif; cursor:pointer;
  padding:4px 10px; text-transform:none; letter-spacing:0;}
.panel .bar .ref:hover{border-color:var(--accent); color:var(--accent);}
.panel .body{padding:18px;}

fieldset{border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin:0 0 18px;
  background:var(--bg-elevated);}
legend{padding:0 8px; color:var(--accent); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;}

/* ---------- Forms ---------- */
label{display:block; font-size:12px; color:var(--text-dim); margin:14px 0 5px; font-weight:500;}
label:first-child{margin-top:0;}
label .req{color:var(--danger);}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=password],
select,textarea{
  width:100%; background:var(--bg-input); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:9px 11px; font-size:13px;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}
input.mono-field,input[inputmode=numeric],textarea.mono-field{font-family:'IBM Plex Mono',ui-monospace,monospace;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);}
textarea{resize:vertical; min-height:70px;}
.field{margin-bottom:14px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr;}}
.row{display:flex; flex-wrap:wrap; gap:10px;}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
.toolbar input,.toolbar select{width:auto; min-width:150px; flex:1 1 150px;}
.hint,.helper-text{font-size:11.5px; color:var(--text-dim); margin-top:6px; line-height:1.6;}
.note{font-size:11.5px; color:var(--text-dim); margin-top:8px;}
.empty,.empty-state{color:var(--text-dim); font-size:12.5px; padding:14px 2px;}

/* ---------- Buttons ---------- */
.btn{display:inline-block; background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:6px; padding:10px 18px; font:600 13px 'IBM Plex Sans',sans-serif;
  cursor:pointer; text-decoration:none;}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.btn[disabled],.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.sm,.btn-sm{padding:6px 12px; font-size:12px;}
.btn-ghost{background:none; border:1px solid var(--border); color:var(--text);}
.btn-ghost:hover{background:none; border-color:var(--accent); color:var(--accent);}
.btn-danger{background:none; border:1px solid var(--danger); color:var(--danger);}
.btn-danger:hover{background:var(--danger); color:#fff; border-color:var(--danger);}
.gbtn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px;
  padding:11px 22px; font:600 13px 'IBM Plex Sans',sans-serif; cursor:pointer; color:var(--text);}
.gbtn:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- Banners ---------- */
.banner,.errbox,.okbox{padding:10px 14px; border-radius:8px; font-size:12.5px; margin-top:12px;}
.errbox{border:1px solid var(--danger); color:var(--danger); background:#fff; display:none;}
.okbox{border:1px solid var(--accent); color:var(--accent); background:#fff; display:none;}
.banner.error{background:rgba(178,58,48,.07); border:1px solid var(--danger); color:var(--danger);}
.banner.success{background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent);}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:12.5px;}
th{text-align:left; padding:9px 10px; border-bottom:1px solid var(--border);
  color:var(--text-dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
tbody tr:hover td{background:var(--bg-sunken);}

/* ---------- Pills / badges ---------- */
.pill,.badge{display:inline-block; border:1px solid var(--border); border-radius:11px;
  padding:1px 9px; font-size:10.5px; color:var(--text-dim);}
.pill.success,.pill.online,.pill.official{color:var(--ok); border-color:var(--ok);}
.pill.partial,.pill.pilot{color:var(--warn); border-color:var(--warn);}
.pill.failed{color:var(--danger); border-color:var(--danger);}
.pill.offline{color:var(--violet); border-color:var(--violet);}
.pill.testing{color:var(--text-dim); border-color:var(--border);}
.pill.off{color:var(--text-dim); border-color:var(--border);}

/* ---------- Tabs ---------- */
nav.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap;}
nav.tabs button{background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-dim); padding:10px 14px; font:500 13px 'IBM Plex Sans',sans-serif; cursor:pointer;}
nav.tabs button:hover{color:var(--text);}
nav.tabs button.on,nav.tabs button.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600;}
.tab-panel,.pane,.apane,.rpane{display:none;}
.tab-panel.on,.pane.on,.apane.on,.rpane.on,.tab-panel.active{display:block;}

/* ---------- Record cards (OPAC / Cataloging Console) ---------- */
.idx{position:relative; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:10px; padding:16px 18px; margin-bottom:12px;}
.idx:hover{border-color:var(--border-strong);}
.idx h3{font-size:15px; margin:0 0 6px; padding-right:96px;}
.idx hr{border:0; border-top:1px solid var(--border); margin:8px 0;}
.idx .meta{font-size:12.5px; line-height:1.7;}
.idx .perf{font-size:11px; color:var(--text-dim); margin-top:8px; line-height:1.6;}
.stamp{position:absolute; right:14px; top:14px; font:600 10px 'IBM Plex Mono',monospace;
  letter-spacing:.1em; padding:3px 9px; border-radius:11px; border:1px solid var(--danger);
  color:var(--danger); text-transform:uppercase;}
.stamp.ok{border-color:var(--ok); color:var(--ok);}
.summary{background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; margin-bottom:14px; font-size:12.5px; line-height:1.9;}
.summary .ok{color:var(--ok); font-weight:600;}
.summary .part{color:var(--warn); font-weight:600;}
.summary .bad{color:var(--danger); font-weight:600;}
.ok{color:var(--ok);} .part{color:var(--warn);} .bad{color:var(--danger);}

/* provenance chip */
.prov{margin-top:8px; font-size:11px; line-height:1.5; border-left:3px solid var(--border);
  padding:4px 0 4px 9px; color:var(--text-dim);}
.prov .pmode{font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:10px;}
.prov.raw .pmode{color:var(--text-dim);}
.prov.search .pmode{color:var(--warn);}
.prov.enriched .pmode{color:var(--accent);}
.prov.nodata .pmode{color:var(--danger);}

details{margin-top:9px;}
details summary{cursor:pointer; font-size:11.5px; color:var(--accent);}
pre{background:#1f2430; color:#e8ecf5; font-size:11px; line-height:1.5;
  padding:12px; border-radius:8px; overflow:auto; max-height:280px; margin-top:8px;}

/* ---------- Status / spinner ---------- */
.status{display:none; align-items:center; gap:12px; margin-top:14px; padding:11px 14px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); font-size:12.5px;}
.status.on{display:flex;}
.spin{width:13px; height:13px; border:2.5px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:sp 1s linear infinite; flex:none;}
@keyframes sp{to{transform:rotate(360deg);}}

/* ---------- Print ---------- */
@media print{
  .sidebar,.content-header,.menu-toggle,.toolbar,nav.tabs,.btn,.gbtn{display:none !important;}
  .content-area,.content-body{margin:0 !important; padding:0 !important; max-width:none !important;}
  body{background:#fff; color:#000;}
}