/* BowTie Manager — application styles (on top of Bootstrap 5.3).
   No inline styles are used anywhere (CSP style-src 'self'). */

:root {
  --btm-navy: #0b3d5c;
  --btm-navy-deep: #082c43;
  --btm-amber: #f2a900;
  --btm-ink: #1c2530;
  --btm-muted: #5b6876;
  --btm-surface: #f4f6f8;
  --btm-line: #d9dfe5;
  --btm-focus: #ffbf47;
  --bs-primary: #0b5c8a;
  --bs-primary-rgb: 11, 92, 138;
  --bs-link-color: #0b5c8a;
  --bs-link-color-rgb: 11, 92, 138;
  --bs-link-hover-color: #083f60;
  --bs-body-color: var(--btm-ink);
  --bs-border-radius: .4rem;
}

body.btm-app { background: var(--btm-surface); display: flex; flex-direction: column; min-height: 100vh; }
main#main { flex: 1 0 auto; outline: none; }

/* ---- Accessibility -------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--btm-focus); color: #000; padding: .6rem 1rem; font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--btm-focus) !important; outline-offset: 2px !important; box-shadow: none !important; }
.btn, .form-control, .form-select, .nav-link, .dropdown-item { min-height: 2.25rem; }   /* WCAG 2.5.8 target size */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.btn-primary { --bs-btn-bg: #0b5c8a; --bs-btn-border-color: #0b5c8a; --bs-btn-hover-bg: #094c72; --bs-btn-hover-border-color: #094c72;
  --bs-btn-active-bg: #083f60; --bs-btn-disabled-bg: #0b5c8a; }
.btn-outline-primary { --bs-btn-color: #0b5c8a; --bs-btn-border-color: #0b5c8a; --bs-btn-hover-bg: #0b5c8a; --bs-btn-hover-border-color: #0b5c8a; --bs-btn-active-bg: #094c72; }

/* ---- Navigation ----------------------------------------------------------- */
.btm-navbar { background: var(--btm-navy); border-bottom: 3px solid var(--btm-amber); }
.btm-navbar .navbar-brand, .btm-navbar .nav-link { color: #e9f1f7; }
.btm-navbar .nav-link:hover, .btm-navbar .nav-link:focus-visible, .btm-navbar .nav-link.active { color: #fff; }
.btm-navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--btm-amber); }
.btm-navbar .navbar-toggler { border-color: rgba(255,255,255,.5); }
.btm-navbar .navbar-toggler-icon { filter: invert(1); }
.btm-navbar .navbar-brand { font-weight: 700; letter-spacing: .01em; }
.btm-org-pill { background: rgba(255,255,255,.1); border-radius: 2rem; padding-left: .9rem !important; padding-right: .9rem !important; }
.btm-org-name { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.btm-org-menu { min-width: 18rem; }

/* Bow-tie logo mark: two triangles meeting at a knot (pure CSS). */
.btm-mark { position: relative; width: 28px; height: 18px; display: inline-block; }
.btm-mark::before, .btm-mark::after {
  content: ""; position: absolute; top: 0; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.btm-mark::before { left: 0; border-left: 13px solid var(--btm-amber); }
.btm-mark::after { right: 0; border-right: 13px solid #fff; }

.btm-banner { padding: .5rem 0; font-size: .925rem; }
.btm-banner-support { background: #5a2d82; color: #fff; }
.btm-banner-warning { background: #fff3cd; color: #5c4400; border-bottom: 1px solid #f0d58c; }

.btm-footer { flex-shrink: 0; border-top: 1px solid var(--btm-line); background: #fff; color: var(--btm-muted); font-size: .85rem; padding: .75rem 0; }

/* ---- Page furniture ------------------------------------------------------- */
.btm-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.btm-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--btm-muted); }
.card { border-color: var(--btm-line); }

.btm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.btm-tile {
  display: flex; flex-direction: column; gap: .4rem; padding: 1rem; background: #fff; border: 1px solid var(--btm-line);
  border-radius: var(--bs-border-radius); color: var(--btm-ink); text-decoration: none; font-weight: 600; min-height: 5.5rem;
}
.btm-tile i { font-size: 1.4rem; color: var(--bs-primary); }
.btm-tile:hover { border-color: var(--bs-primary); box-shadow: 0 2px 8px rgba(11,61,92,.12); }

.btm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.btm-stat { background: #fff; border: 1px solid var(--btm-line); border-left: 4px solid var(--btm-navy); border-radius: var(--bs-border-radius); padding: .9rem 1rem; }
.btm-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.btm-stat-label { color: var(--btm-muted); font-size: .85rem; }

.btm-flash .alert { margin-bottom: .75rem; }
.btm-error-code { font-size: 4rem; font-weight: 800; color: var(--btm-line); line-height: 1; margin-bottom: .5rem; }

/* ---- Auth pages ----------------------------------------------------------- */
body.btm-auth { background: linear-gradient(160deg, var(--btm-navy-deep) 0%, var(--btm-navy) 55%, #11577f 100%); min-height: 100vh; }
.btm-auth-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; outline: none; }
.btm-auth-card { width: 100%; max-width: 26rem; background: #fff; border-radius: .6rem; padding: 2rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); border-top: 4px solid var(--btm-amber); }
.btm-auth-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; margin-bottom: 1.25rem; color: var(--btm-navy); }
.btm-auth-brand .btm-mark::after { border-right-color: var(--btm-navy); }
.btm-auth-foot { margin-top: 1rem; }
.btm-auth-foot a { color: #d6e6f2; }
.btm-prose h2 { margin-top: 1rem; }

/* ---- Forms & 2FA ---------------------------------------------------------- */
.btm-code { letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12rem; }
.btm-secret { font-size: 1rem; word-break: break-all; }
.btm-qr { width: 200px; height: 200px; background: #fff; border: 1px solid var(--btm-line); display: flex; align-items: center; justify-content: center; }
.btm-qr img { width: 184px; height: 184px; image-rendering: pixelated; }
.btm-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: .25rem 1rem; font-size: 1.05rem; }

.btm-org-list .list-group-item { padding: 1rem 1.25rem; }

@media (max-width: 575.98px) {
  .btm-auth-card { padding: 1.5rem 1.25rem; }
  .btm-recovery-codes { grid-template-columns: 1fr; }
}

/* Module F — CSV import */
.btm-import-errors { max-height: 22rem; overflow-y: auto; }
.btm-import-cols dt { margin-top: .4rem; }
.btm-import-cols dd { margin-bottom: 0; }

/* Module G — actions and notifications */
.btm-prewrap { white-space: pre-wrap; }
.btm-bell { position: relative; }
.btm-bell-count { font-size: .65rem; position: relative; top: -.5rem; margin-left: -.35rem; }
.btm-bell-menu { width: min(24rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; }
.btm-bell-item { white-space: normal; border-left: 3px solid transparent; }
.btm-unread { border-left: 3px solid var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.btm-timeline li { border-left: 2px solid var(--bs-border-color); padding-left: .75rem; }
.nav-pills .btm-pill-danger:not(.active) { color: var(--bs-danger); }
/* keep the main menu on one line: labels without icons from 1200 px (the container is at most 1320 px wide), names as icons below 1400 px */
.btm-navbar .nav-link { white-space: nowrap; }
@media (min-width: 1200px) {
  .btm-navbar .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; font-size: .95rem; }
  .btm-navbar .btm-nav-main .nav-link > .bi { margin-right: .15rem; }
  .btm-org-name { max-width: 9rem; }
}
@media (min-width: 1200px) {
  /* every menu item keeps its icon and the product name stays visible, so on laptop widths the organisation name and the
     user name are shown as icons only (the organisation switcher and the account menu still name them) */
  .btm-navbar .btm-org-name, .btm-navbar .btm-user-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
}

/* Module H — organisation administration */
.btm-json { font-family: var(--bs-font-monospace); font-size: .75rem; white-space: pre-wrap; word-break: break-all; }
.btm-audit td { max-width: 32rem; }
.btm-w-6 { width: 6rem; }
.btm-role-row select:first-child { flex: 1 1 45%; }
.btm-role-row select:nth-child(2) { flex: 1 1 45%; }

/* Module I — risk matrix designer */
.mx-side { position: sticky; top: 1rem; }
.mx-w-code { width: 6.5rem; }
.mx-w-num { width: 7rem; }
.mx-chip { display: inline-block; min-width: 2.2rem; padding: .1rem .4rem; border-radius: .25rem; text-align: center; font-weight: 600; font-size: .8rem; }
.mx-preview { border-collapse: collapse; width: 100%; font-size: .8rem; }
.mx-preview th, .mx-preview td { border: 1px solid var(--bs-border-color); padding: .3rem; text-align: center; min-width: 2.2rem; }
.mx-preview td { font-weight: 600; height: 2.2rem; }
.mx-preview td.mx-empty { background: repeating-linear-gradient(45deg, var(--bs-tertiary-bg), var(--bs-tertiary-bg) 4px, var(--bs-body-bg) 4px, var(--bs-body-bg) 8px); }
.mx-cells .mx-cell { min-width: 7rem; font-weight: 600; }
.mx-desc textarea { min-width: 10rem; font-size: .8rem; }
@media (max-width: 1199.98px) { .mx-side { position: static; } }

/* ---- Module J: platform administration ---- */
.btm-selftest { table-layout: fixed; }
.btm-selftest td:first-child { width: 30%; }
.btm-selftest td:nth-child(2) { width: 7.5rem; }
@media (max-width: 575.98px) { .btm-selftest td:first-child { width: 40%; } .btm-selftest td:nth-child(2) { width: 5.5rem; } }

/* ---- Module K: billing ---- */
.bil-lines td:first-child { min-width: 16rem; }
.bil-lines .bil-num { width: 5.5rem; }
.bil-lines .bil-amt { width: 8.5rem; }
.min-w-0 { min-width: 0; }
.btm-stat-money { font-size: clamp(1rem, 4.2vw, 1.6rem); overflow-wrap: anywhere; }
.table-responsive { position: relative; } /* keeps visually-hidden header text inside the scroll box (no page overflow on phones) */

/* E-mail change confirmation page (Org Admin request, confirmed by the person) */
.btm-email-change { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; }
.btm-email-change dt { font-weight: normal; color: var(--btm-muted); }
.btm-email-change dd { margin: 0; word-break: break-all; }