/* SAABR Session Logger — app layout on top of the SAABR design system */

body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-canvas); }
.app-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-16); }

/* ---- Header (Cardinal bar with lockup + nav) ---- */
.app-header {
  display: flex; align-items: center; gap: var(--s-6);
  background: var(--c-cardinal); color: var(--c-white);
  padding: var(--s-4) var(--gutter);
  box-shadow: var(--shadow-cardinal);
  position: sticky; top: 0; z-index: 20;
}
.app-header__lock { display: inline-flex; }
.app-header__title {
  font-family: var(--f-serif); font-style: italic; font-size: 20px;
  color: rgba(255,255,255,.92); padding-left: var(--s-4);
  border-left: 1px solid var(--rule-on-dark);
}
.app-nav { margin-left: auto; display: flex; gap: var(--s-5); flex-wrap: wrap; }
.app-nav a {
  color: var(--c-white); text-decoration: none; font-family: var(--f-sans);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; opacity: .9;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.app-nav a:hover { opacity: 1; border-bottom-color: var(--c-white); }

/* ---- Page heads ---- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.page-head h1 { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-h1); letter-spacing: var(--ls-tight); }
.page-head .actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---- Cards / sections ---- */
.section { margin-bottom: var(--s-8); }
.section > h2 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--s-4); }
.card + .card { margin-top: var(--s-4); }

/* ---- Forms (responsive grid) ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4) var(--s-5); }
.form-grid .field--full { grid-column: 1 / -1; }
.fieldset-title { font-family: var(--f-sans); font-weight:600; font-size: 13px; letter-spacing:.06em; text-transform:uppercase; color: var(--c-cardinal); margin: var(--s-4) 0 var(--s-2); grid-column: 1 / -1; }
.form-actions { display:flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.check { display:flex; align-items:center; gap:10px; font-family:var(--f-sans); font-size:15px; }
.check input { width:18px; height:18px; accent-color: var(--c-cardinal); }

/* ---- UID hero (session detail) ---- */
.uid-hero { display:flex; align-items:center; gap: var(--s-6); flex-wrap: wrap; background: var(--bg-elevated); border:1px solid var(--rule-hairline); border-radius: var(--r-1); padding: var(--s-6); }
.uid-hero__preview { font-family: var(--f-serif); font-size: clamp(36px,6vw,64px); line-height:1; color: var(--c-cardinal); letter-spacing:-.02em; }
.uid-hero__meta { display:flex; flex-direction:column; gap: 6px; }
.mono-lozenge { font-family: var(--f-mono); font-size: 15px; background: var(--c-black); color: var(--c-white); padding: 4px 10px; border-radius: var(--r-1); display:inline-flex; align-items:center; gap:8px; }
.mono-lozenge button { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:12px; }
.mono-lozenge button:hover { color:#fff; }

/* ---- Event buttons + log ---- */
.events-grid { display:flex; flex-wrap:wrap; gap: var(--s-3); }
.event-log { list-style:none; margin: var(--s-4) 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.event-log li { display:flex; align-items:center; gap:10px; font-family:var(--f-sans); font-size:14px; padding:8px 12px; background:var(--bg-page); border:1px solid var(--rule-hairline); border-radius:var(--r-1); }
.event-log .t-mono { color: var(--ink-tertiary); }
.dot { width:8px; height:8px; border-radius:50%; flex:none; }
.dot--ok { background: var(--c-digital-green); }
.dot--off { background: var(--c-grey-40); }

/* ---- Bundle filenames ---- */
.filelist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.filelist code { font-family: var(--f-mono); font-size:13px; background: var(--bg-canvas); padding:4px 8px; border-radius:var(--r-1); border:1px solid var(--rule-hairline); display:block; }

/* ---- Manifest preview ---- */
.manifest { font-family: var(--f-mono); font-size: 12.5px; line-height:1.5; background: var(--c-black); color:#EAEAEA; padding: var(--s-5); border-radius: var(--r-1); overflow:auto; max-height: 460px; white-space: pre; }

/* ---- Tables (dashboard) ---- */
.table { width:100%; border-collapse: collapse; font-family: var(--f-sans); font-size: 15px; background: var(--bg-page); border:1px solid var(--rule-hairline); border-radius: var(--r-1); overflow:hidden; }
.table th { text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-secondary); padding: 12px 14px; border-bottom:1px solid var(--rule-hairline); background: var(--bg-elevated); }
.table td { padding: 12px 14px; border-bottom:1px solid var(--rule-hairline); }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background: var(--bg-elevated); }
.table a { color: var(--c-digital-red); font-weight:600; text-decoration:none; }
.table a:hover { text-decoration:underline; text-underline-offset:3px; }

/* status tags */
.tag--acquired { background: rgba(0,108,184,.10); color: var(--c-digital-blue-dark); }
.tag--transferred { background: rgba(233,131,0,.12); color: #9a5a00; }
.tag--processed { background: rgba(39,153,137,.12); color: var(--c-palo-alto); }
.tag--ingested { background: rgba(23,94,84,.12); color: var(--c-palo-alto); }

.empty { text-align:center; padding: var(--s-16) var(--s-6); color: var(--ink-tertiary); }
.badge-valid { font-size:12px; font-weight:600; padding:4px 10px; border-radius: var(--r-pill); }
.badge-valid--ok { background: rgba(0,133,102,.12); color: var(--c-digital-green-dark); }
.badge-valid--bad { background: rgba(177,4,14,.10); color: var(--c-digital-red); }

/* ---- Toast ---- */
.toast { position: fixed; left:50%; bottom: 24px; transform: translateX(-50%); background: var(--c-black); color:#fff; font-family:var(--f-sans); font-size:14px; padding: 12px 18px; border-radius: var(--r-1); box-shadow: var(--shadow-2); z-index: 50; }
.toast--bad { background: var(--c-digital-red); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .app-header { flex-wrap: wrap; gap: var(--s-3); }
  .app-header__title { display:none; }
  .app-nav { width:100%; margin-left:0; }
  .uid-hero { gap: var(--s-4); }
  .table thead { display:none; }
  .table, .table tbody, .table tr, .table td { display:block; width:100%; }
  .table tr { border-bottom:1px solid var(--rule-hairline); padding: 8px 0; }
  .table td { border:none; padding: 4px 14px; }
  .table td::before { content: attr(data-label); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-tertiary); }
}