/* ============================================================================
HAVION MEDIA — Bootstrap 5 brand theme (fleet-wide, single source of truth)
----------------------------------------------------------------------------
For Havion apps built on Bootstrap 5 (CRM, utilities, admin pages). Load it
AFTER Bootstrap's own CSS and AFTER Font Awesome, then a tiny app CSS for
app-only bits:
It remaps Bootstrap's CSS variables + core components to the brand tokens and
styles the navbar as the borderless brand top bar. Tokens here are kept in
sync with havion.css (custom-CSS apps use that file instead). Same palette,
two delivery files for the two kinds of app.
Version: 2026-09-16.2 (borderless navbar)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Readex+Pro:wght@300;400;500;600&display=swap');
:root{
--ink:#0A0A0A; --paper:#FBFBFB; --card:#FFFFFF; --line:#D8D8D1; --beige:#F1EFE8;
--grey:#747474; --muted:#A3A39C; --cta:#EDBF83;
--green:#2DAA00; --blue:#2142DB; --purple:#AB5DF9; --orange:#FA5C00; --red:#D7263D; --lblue:#A4BAE9;
--green-soft:#E6F6DF; --green-ink:#1E7300; --orange-soft:#FFF0E3; --orange-ink:#B54200;
--red-soft:#FDE6E9; --red-ink:#A31527; --blue-soft:#E8EDFB; --blue-ink:#1B36A8; --purple-soft:#F1EDFB; --purple-ink:#6B2EBD;
--font-head:'Sora',system-ui,sans-serif; --font-body:'Readex Pro',system-ui,sans-serif;
/* --- Bootstrap variable remap --- */
--bs-body-bg:var(--paper); --bs-body-color:var(--ink);
--bs-body-font-family:var(--font-body); --bs-body-font-size:.9rem; --bs-body-line-height:1.5;
--bs-border-color:var(--line); --bs-border-radius:14px; --bs-border-radius-sm:10px; --bs-border-radius-lg:16px;
--bs-primary:#0A0A0A; --bs-primary-rgb:10,10,10;
--bs-secondary:#747474; --bs-secondary-rgb:116,116,116;
--bs-success:#2DAA00; --bs-success-rgb:45,170,0;
--bs-danger:#D7263D; --bs-danger-rgb:215,38,61;
--bs-warning:#FA5C00; --bs-warning-rgb:250,92,0;
--bs-info:#2142DB; --bs-info-rgb:33,66,219;
--bs-link-color:#0A0A0A; --bs-link-hover-color:#2142DB;
--bs-emphasis-color:var(--ink);
}
body{background:var(--paper)!important;color:var(--ink);font-family:var(--font-body)}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{font-family:var(--font-head);letter-spacing:-.01em;color:var(--ink)}
/* --- navbar → borderless brand top bar --- */
.navbar{background:var(--paper)!important;border:none!important;border-radius:0!important;box-shadow:none!important;
border-bottom:none!important;margin-bottom:22px;padding:.55rem 0}
.navbar>.container,.navbar>.container-fluid{max-width:1840px;padding-inline:32px}
.navbar-brand{color:var(--ink)!important;font-family:var(--font-head);font-weight:700!important;font-size:15px!important;letter-spacing:.14em}
.navbar-brand:hover{color:var(--ink)!important}
.navbar .nav-link{color:var(--grey)!important;border-radius:999px;padding:6px 13px!important;font-size:13.5px}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--ink)!important;background:var(--beige)}
.navbar .nav-link.active,.navbar .nav-link[aria-current="page"]{color:#fff!important;background:var(--ink)}
.navbar-text{color:var(--grey)!important;font-size:12.5px}
.navbar-toggler{border-color:var(--line)}
.navbar-brand img{display:none} /* legacy logo image hidden; wordmark is the text */
/* --- buttons: pill, brand --- */
.btn{border-radius:999px;font-weight:500;padding:.5rem 1rem}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:#2A2A2A!important;border-color:#2A2A2A!important;color:#fff}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active{background:var(--beige)!important;border-color:var(--line)!important;color:var(--ink)!important}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{background:var(--green-ink)!important;border-color:var(--green-ink)!important}
.btn-danger{background:var(--red);border-color:var(--red)}
.btn-danger:hover{background:var(--red-ink)!important;border-color:var(--red-ink)!important}
.btn-warning{background:var(--cta);border-color:var(--cta);color:var(--ink)}
.btn-outline-primary{color:var(--ink);border-color:var(--ink)}
.btn-outline-primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-outline-secondary{color:var(--grey);border-color:var(--line)}
.btn-outline-secondary:hover{background:var(--beige);border-color:var(--line);color:var(--ink)}
.btn-outline-danger{color:var(--red-ink);border-color:var(--red)}
.btn-outline-danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-link{color:var(--ink)}
.btn.btn-sm{padding:.3rem .7rem}
/* --- cards: hairline, no shadow --- */
.card{background:var(--card);border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important}
.card-header{background:var(--beige);border-bottom:1px solid var(--line);font-family:var(--font-head);font-weight:600;color:var(--ink)}
.card-footer{background:var(--beige);border-top:1px solid var(--line)}
/* --- forms --- */
.form-control,.form-select{border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;color:var(--ink);background:#fff}
textarea.form-control{border-radius:12px}
.form-control:focus,.form-select:focus{border-color:var(--ink);box-shadow:0 0 0 .18rem rgba(10,10,10,.10)}
.form-control::placeholder{color:var(--muted)}
.form-label{font-size:.8rem;font-weight:500;color:var(--grey);margin-bottom:5px}
.form-check-input:checked{background-color:var(--ink);border-color:var(--ink)}
.form-check-input:focus{border-color:var(--ink);box-shadow:0 0 0 .18rem rgba(10,10,10,.10)}
.input-group-text{background:var(--beige);border:1px solid var(--line);color:var(--grey)}
.input-group>.form-control,.input-group>.form-select{border-radius:0}
.input-group>:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px}
.input-group>:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px}
/* --- tables --- */
.table{--bs-table-bg:transparent;font-size:.82rem;color:var(--ink)}
.table>thead th,.table th{background:#fff;font-family:var(--font-head);font-weight:500;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);border-bottom:1px solid var(--line);white-space:nowrap}
.table>tbody td{border-bottom:1px solid var(--beige);vertical-align:middle}
.table-hover>tbody>tr:hover>*{background:#FAF9F4}
.table-striped>tbody>tr:nth-of-type(odd)>*{background:#FBFAF6}
.table-dark{--bs-table-bg:var(--ink);--bs-table-color:#fff}
.table-responsive{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:none;overflow-x:auto}
/* --- badges: brand tints --- */
.badge{font-weight:500;border-radius:999px;padding:.35em .7em;font-size:.72rem}
.badge.bg-primary{background:var(--ink)!important;color:#fff}
.badge.bg-secondary{background:var(--beige)!important;color:var(--grey)}
.badge.bg-success{background:var(--green-soft)!important;color:var(--green-ink)}
.badge.bg-info{background:var(--blue-soft)!important;color:var(--blue-ink)}
.badge.bg-warning{background:var(--orange-soft)!important;color:var(--orange-ink)}
.badge.bg-danger{background:var(--red-soft)!important;color:var(--red-ink)}
.badge.bg-dark{background:var(--ink)!important}
/* --- alerts: brand tints --- */
.alert{border-radius:12px;border:1px solid transparent}
.alert-info{background:var(--blue-soft);color:var(--blue-ink);border-color:#D6DEF7}
.alert-success{background:var(--green-soft);color:var(--green-ink);border-color:#CFEAC2}
.alert-danger{background:var(--red-soft);color:var(--red-ink);border-color:#F6Cfd6}
.alert-warning{background:var(--orange-soft);color:var(--orange-ink);border-color:#F7D9C2}
/* --- modals, dropdowns, tabs, list-group, pagination, progress --- */
.modal-content{border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(10,10,10,.18)}
.modal-header{border-bottom:1px solid var(--line)}.modal-header .modal-title{font-family:var(--font-head);font-weight:600}
.modal-footer{border-top:1px solid var(--line)}
.dropdown-menu{border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(10,10,10,.12)}
.dropdown-item:active,.dropdown-item.active{background:var(--ink)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--beige)}
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{color:var(--grey);border:none;border-radius:0}
.nav-tabs .nav-link.active{color:var(--ink);background:transparent;border-bottom:2px solid var(--ink)}
.list-group-item{border-color:var(--line)}
.list-group-item.active{background:var(--ink);border-color:var(--ink)}
.page-link{color:var(--ink)}.page-item.active .page-link{background:var(--ink);border-color:var(--ink)}
.progress{background:var(--beige);border-radius:999px}.progress-bar{background:var(--blue)}
/* --- misc --- */
a{color:var(--ink)}a:hover{color:var(--blue)}
.text-primary{color:var(--ink)!important}.text-muted{color:var(--grey)!important}
.bg-primary{background:var(--ink)!important}.bg-light{background:var(--beige)!important}
.border{border-color:var(--line)!important}
::selection{background:var(--cta);color:var(--ink)}
/* navbar hardening (2026-09-16): brand top bar regardless of legacy dark/primary classes */
.navbar,.navbar.bg-primary{background:var(--paper)!important}
.navbar .navbar-brand .hv-wordmark{color:var(--ink)!important}
.navbar-dark .navbar-nav .nav-link{color:var(--grey)!important}
.navbar-dark .navbar-brand{color:var(--ink)!important}