/* App-specific styles: things the static mockup did not need, built on the
   same tokens. Anything that exists in the mockup belongs in app.css. */

/* The mockup used <div onclick>; real navigation uses anchors. */
a.nav-item,
a.btn,
a.link,
.tbl-title-link { text-decoration:none; }
.tbl-title-link:hover { text-decoration:underline; }

/* Flash + validation messaging, reusing the mockup's .alert motif */
.alert-success{ background:var(--green-bg); border-color:#bfdccb; color:var(--green); }
.alert-info{ background:var(--blue-bg); border-color:#c3d6e8; color:var(--blue); }
.alert .alert-body{ min-width:0; }
.alert ul{ margin:6px 0 0 0; padding-left:18px; }

.field-error{ display:block; font-size:11px; color:var(--red); margin-top:5px; font-weight:500; }
input.has-error, select.has-error, textarea.has-error{ border-color:var(--red); }

.required::after{ content:" *"; color:var(--red); font-weight:700; }

/* Upload control — the mockup's .dropzone is decorative; this makes it real */
.dropzone{ position:relative; cursor:pointer; }
.dropzone input[type=file]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; padding:0; border:none;
}
.dropzone.is-dragover{ border-color:var(--gold); background:var(--amber-bg); }
.dropzone .filename{ margin-top:8px; font-weight:600; color:var(--navy-deep); font-size:12px; }

/* Document detail / in-app viewer */
.doc-layout{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:16px; align-items:start; }
@media (max-width:1080px){ .doc-layout{ grid-template-columns:1fr; } }

.doc-viewer{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-raised); overflow:hidden;
}
.doc-viewer iframe{ display:block; width:100%; height:78vh; min-height:460px; border:0; background:#fff; }
.doc-viewer img{ display:block; width:100%; height:auto; background:#fff; }
.doc-viewer-fallback{ padding:40px 24px; text-align:center; color:var(--ink-soft); font-size:12.5px; }

.meta-table{ width:100%; border-collapse:collapse; }
.meta-table th{
  width:38%; text-align:left; background:transparent; border-bottom:1px solid var(--line-soft);
  padding:9px 18px; vertical-align:top; text-transform:none; letter-spacing:0;
  font-size:11.5px; color:var(--ink-soft); font-weight:600;
}
.meta-table td{ padding:9px 18px; font-size:12.5px; vertical-align:top; word-break:break-word; }
.meta-table tr:last-child th, .meta-table tr:last-child td{ border-bottom:none; }
.meta-empty{ color:var(--slate); }

/* Duplicate-check conflict list inside the warning banner */
.dup-list{ margin:8px 0 0 0; padding:0; list-style:none; }
.dup-list li{ padding:6px 0 0 0; font-size:11.5px; }
.dup-list .dup-ref{ font-family:'IBM Plex Mono',monospace; }

/* Pagination */
.pager{ display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.pager .pager-info{ margin-right:auto; font-size:11.5px; color:var(--ink-soft); }
.pager a, .pager span{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px;
  padding:0 9px; border:1px solid var(--line); border-radius:var(--radius);
  font-size:12px; color:var(--ink); background:var(--paper-raised); text-decoration:none;
}
.pager a:hover{ border-color:var(--navy-mid); }
.pager .is-current{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; font-weight:600; }
.pager .is-disabled{ opacity:.45; }

/* Admin master screens: two-column CRUD */
.master-layout{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:16px; align-items:start; }
@media (max-width:980px){ .master-layout{ grid-template-columns:1fr; } }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.is-inactive td{ opacity:.55; }
.scope-heading{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold);
  font-weight:700; padding:14px 18px 6px 18px;
}

/* Rendered Markdown (knowledge article bodies) */
.prose{ font-size:13.5px; line-height:1.7; color:var(--ink); }
.prose > *:first-child{ margin-top:0; }
.prose > *:last-child{ margin-bottom:0; }
.prose h1,.prose h2,.prose h3,.prose h4{ margin:26px 0 8px 0; line-height:1.3; }
.prose h1{ font-size:19px; }
.prose h2{ font-size:16.5px; }
.prose h3{ font-size:14.5px; }
.prose h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); }
.prose p{ margin:0 0 14px 0; }
.prose ul,.prose ol{ margin:0 0 14px 0; padding-left:22px; }
.prose li{ margin-bottom:5px; }
.prose a{ color:var(--navy-mid); text-decoration:underline; }
.prose strong{ font-weight:600; color:var(--navy-deep); }
.prose code{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  background:var(--grey-bg); padding:1px 5px; border-radius:2px;
}
.prose pre{
  background:var(--grey-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; overflow-x:auto; margin:0 0 14px 0;
}
.prose pre code{ background:none; padding:0; }
.prose blockquote{
  margin:0 0 14px 0; padding:2px 0 2px 14px;
  border-left:3px solid var(--gold); color:var(--ink-soft);
}
.prose table{ margin-bottom:14px; border:1px solid var(--line); }
.prose td,.prose th{ padding:7px 11px; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:22px 0; }

/* Sidebar sign-out sits in a form, not a link */
.sidebar-foot form{ margin:0; }
.sidebar-foot .signout{
  background:none; border:none; padding:0; color:#657191; font-size:11.5px; font-family:inherit;
}
.sidebar-foot .signout:hover{ color:#c2cade; }