/* Devoli Peering Portal: brand layer on top of Bootstrap 5. Tokens: docs/brand.md */

@font-face { font-family: "Noka"; src: url("../fonts/Noka-Light.woff2") format("woff2");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Noka"; src: url("../fonts/Noka-Medium.woff2") format("woff2");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Noka"; src: url("../fonts/Noka-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noka"; src: url("../fonts/Noka-Bold.woff2") format("woff2");     font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --devoli-navy:  #001F35;
  --devoli-mint:  #E6F3E7;
  --devoli-brown: #974507;
  --devoli-ink:   #231F20;
  --devoli-grey:  #666769;

  --bs-primary: var(--devoli-navy);
  --bs-primary-rgb: 0, 31, 53;
  --bs-secondary: var(--devoli-grey);
  --bs-secondary-rgb: 102, 103, 105;
  --bs-body-color: var(--devoli-ink);
  --bs-body-bg: #FFFFFF;
  --bs-tertiary-bg: var(--devoli-mint);
  --bs-link-color: var(--devoli-navy);
  --bs-link-color-rgb: 0, 31, 53;
  --bs-link-hover-color: var(--devoli-brown);
  --bs-link-hover-color-rgb: 151, 69, 7;
  --bs-body-font-family: "Noka", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-weight: 500; /* no 400 in the licensed set */

  --portal-navbar-bg: var(--devoli-navy);
  --portal-navbar-color: #FFFFFF;
  --portal-staff-accent: var(--devoli-brown);
}

/* Bootstrap compiles button colours into each component, so set them here too. */
.btn-primary {
  --bs-btn-bg: var(--devoli-navy);
  --bs-btn-border-color: var(--devoli-navy);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #00335A;
  --bs-btn-hover-border-color: #00335A;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: #00335A;
  --bs-btn-active-border-color: #00335A;
  --bs-btn-focus-shadow-rgb: 0, 31, 53;
}

.portal-navbar {
  background: var(--portal-navbar-bg);
  --bs-navbar-color: var(--portal-navbar-color);
  --bs-navbar-hover-color: var(--devoli-mint);
  --bs-navbar-brand-color: var(--portal-navbar-color);
  --bs-navbar-brand-hover-color: var(--portal-navbar-color);
}
.portal-navbar .navbar-brand img { height: 1.75rem; width: auto; }
.portal-navbar .navbar-brand span { font-weight: 600; }

.portal-hero { background: var(--devoli-mint); }
.portal-hero h1 { color: var(--devoli-navy); font-weight: 700; }
/* Brown on white/mint only: never on navy (2.54:1, fails AA). */
.portal-accent { color: var(--devoli-brown); }

h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* Staff area: navy navbar plus a brown bottom rule and badge. */
.staff .navbar { border-bottom: 4px solid var(--portal-staff-accent); }
.staff .badge-staff { background: var(--portal-staff-accent); color: #FFFFFF; }

/* Attention queue: kanban by category (prototype 012 variant B). */
.attention-kanban { display: grid; grid-template-columns: repeat(5, minmax(16rem, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.attention-column { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .75rem; min-height: 8rem; }
.attention-detail { display: grid; grid-template-columns: max-content 1fr; column-gap: .5rem; }
.attention-detail dt { font-weight: 400; color: var(--bs-secondary-color); }
.attention-detail dd { margin: 0; word-break: break-word; }
.attention-digest { white-space: pre-wrap; font-size: .85rem; }

/* Approval Queue split pane (#34). */
.approval-split { min-height: 70vh; }

/* Live panel & columns (#42). Widths are classes, not style="", for the strict CSP. */
.usage-col { min-width: 9rem; }
.pfx-bar { height: .5rem; min-width: 4rem; }
.usage-warning { color: #8a5a00; font-weight: 600; }
.usage-danger { color: var(--bs-danger); font-weight: 600; }
.w-pct-0 { width: 0%; } .w-pct-5 { width: 5%; } .w-pct-10 { width: 10%; } .w-pct-15 { width: 15%; }
.w-pct-20 { width: 20%; } .w-pct-25 { width: 25%; } .w-pct-30 { width: 30%; } .w-pct-35 { width: 35%; }
.w-pct-40 { width: 40%; } .w-pct-45 { width: 45%; } .w-pct-50 { width: 50%; } .w-pct-55 { width: 55%; }
.w-pct-60 { width: 60%; } .w-pct-65 { width: 65%; } .w-pct-70 { width: 70%; } .w-pct-75 { width: 75%; }
.w-pct-80 { width: 80%; } .w-pct-85 { width: 85%; } .w-pct-90 { width: 90%; } .w-pct-95 { width: 95%; }
.w-pct-100 { width: 100%; }

/* Deploy preview diff (#45): PE show | compare, coloured server-side per line. */
pre.diff { white-space: pre; overflow-x: auto; background: var(--bs-tertiary-bg); }
pre.diff .diff-add { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); display: inline-block; min-width: 100%; }
pre.diff .diff-del { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); display: inline-block; min-width: 100%; }
pre.diff .diff-ctx { color: var(--bs-secondary-color); }
#deploy-summary { top: 1rem; }