/* The Dossier's own, self-contained stylesheet — no dependency on
   terminal.css (KMI's own design system) and no "kmi-" prefixed class
   anywhere in it. The Dossier is a fully separate public product with
   no relationship to the internal KMI platform (kmi.kuwaitmirror.com),
   so nothing here should read as borrowed KMI branding — see
   register.css for the same "each public product owns its own,
   unborrowed stylesheet" precedent already established for Register.
   Values (colours, spacing, type scale) intentionally still match
   terminal.css's own so the visual result is unchanged; only the
   naming and file boundary are different. */

:root {
  --bg: #eeedeb;
  --bg-raised: #f6f8f9;
  --bg-inset: #e2e0dd;
  --border: rgba(52, 65, 75, 0.14);
  --border-bright: rgba(52, 65, 75, 0.26);
  --text: #34414b;
  --text-dim: #546878;
  --text-faint: #778fa1;
  --accent: #7C1F2C;
  --accent-dim: #5C1620;
  --warn: #546878;
  --danger: #ce1126;
  --info: #34414b;
  --good: #00732f;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Header ---- */

.dossier-header {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* This page's header is the brand mark alone — no global search, no
   session controls, nothing to space it against — so it's centred
   rather than KMI's own space-between header layout. */
.dossier-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding: 10px 24px;
  min-height: 52px;
}

.dossier-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}

.dossier-logo {
  height: 26px;
  width: auto;
  display: block;
}

.dossier-brand-kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Shell layout ---- */

.dossier-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px;
}

.dossier-main > *:last-child {
  margin-bottom: 0;
}

.dossier-pagehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.dossier-pagehead h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.dossier-pagehead .meta {
  color: var(--text-faint);
  font-size: 11px;
}

.dossier-crumb {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.dossier-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  color: var(--text-faint);
  font-size: 11px;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ---- Landing intro ---- */

.dossier-section {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.dossier-section-head {
  text-align: center;
  margin-bottom: 24px;
}

/* The home page's opening statement is a full sentence, not a short
   label, so it stays lower-case and reads as prose rather than a
   shouted, tracked-out title. */
.dossier-section-head h2 {
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto;
  color: var(--text);
}

/* ---- System Overview ---- */

.dossier-overview-grid {
  display: flex;
  justify-content: center;
  background: var(--bg-raised);
  padding: 20px 16px;
}

.dossier-overview-card {
  text-align: center;
  min-width: 220px;
  max-width: 320px;
}

.dossier-overview-trend {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Filter bar ---- */

.dossier-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.dossier-filterfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dossier-filterfield label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dossier-filterbar input {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 6px 8px;
  min-width: 140px;
}

.dossier-filterbar input:focus {
  outline: none;
  border-color: var(--accent);
}

.dossier-filterfield-actions {
  flex-direction: row;
  gap: 8px;
}

/* The search field is this page's only real tool, so it fills the row
   instead of sitting at the same fixed min-width as its button. */
.dossier-filterbar .dossier-filterfield-search {
  flex: 1;
}
.dossier-filterbar .dossier-filterfield-search input {
  width: 100%;
}

.dossier-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg-raised);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
}

.dossier-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

/* ---- Panels ---- */

.dossier-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.dossier-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dossier-panel-head a {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Pin icon ---- */

.dossier-pin {
  vertical-align: -2px;
  display: inline-block;
  color: var(--accent);
}

/* ---- Tables ---- */

table.dossier-table {
  width: 100%;
  border-collapse: collapse;
}

table.dossier-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

table.dossier-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

table.dossier-table tr:last-child td {
  border-bottom: none;
}

table.dossier-table tr:hover td {
  background: var(--bg-inset);
}

.dossier-ref {
  color: var(--text-faint);
  font-size: 11px;
}

.dossier-empty {
  padding: 24px 16px;
  color: var(--text-faint);
  font-size: 12px;
}

/* ---- Badges (System Overview band) ---- */

.badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  margin: 2px 4px 2px 0;
  overflow-wrap: normal;
}

.badge-warn { color: var(--warn); }
.badge-danger { color: var(--danger); }
.badge-dim { color: var(--text-dim); }
.badge-good { color: var(--good); }

/* ---- Detail record fields ---- */

.dossier-fields {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
}

.dossier-fields dt {
  padding: 10px 20px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

.dossier-fields dd {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* ---- Read more / read less ----
   apps.core.templatetags.text_extras.readmore is shared across every
   app in this codebase (Register, Accounts, Subjects, …) and hardcodes
   the "kmi-readmore"/"kmi-session-btn" class names in its own output —
   changing that would touch far more than the Dossier, so these two
   selectors are the one deliberate exception to this file's "no kmi-
   anything" rule, kept only because the shared filter itself emits
   them, not because the Dossier defines them. */

.kmi-readmore {
  max-height: 6.4em;
  overflow: hidden;
  position: relative;
  line-height: 1.6;
}

.kmi-readmore:not(.expanded):not(.kmi-readmore-noclamp)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg-raised));
}

.kmi-readmore.expanded {
  max-height: none;
}

.kmi-readmore-toggle {
  margin-top: 8px;
}

.kmi-session-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: none;
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.kmi-session-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.kmi-session-btn[hidden] {
  display: none;
}

/* ---- Pagination ---- */

.dossier-pagination {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Small screens ---- */

@media (max-width: 720px) {
  .dossier-header-top {
    flex-direction: column;
    align-items: center;
  }

  .dossier-fields {
    grid-template-columns: 1fr;
  }

  .dossier-fields dt {
    border-bottom: none;
    padding-bottom: 2px;
  }

  table.dossier-table thead {
    display: none;
  }

  table.dossier-table,
  table.dossier-table tbody,
  table.dossier-table tr,
  table.dossier-table td {
    display: block;
    width: 100%;
  }

  table.dossier-table tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }

  table.dossier-table tr:last-child {
    border-bottom: none;
  }

  table.dossier-table td {
    border-bottom: none;
    padding: 4px 16px;
  }

  table.dossier-table td:empty {
    display: none;
  }
}