/* RAHN Brand Blueprint v1.0, sections 5.3, 5.4 and 9.
   Shared presentation only. Keep status labels/icons and application behaviour. */
:root {
  --brand-cream: #FAF7F2;
  --brand-white: #FFFFFF;
  --brand-charcoal: #2C2C2C;
  --brand-charcoal-soft: #4A4643;
  --brand-muted: #4A4643;
  --brand-stone: #766F68;
  --brand-stone-light: #D8D1C8;
  --brand-icon-muted: #8A8279;
  --brand-tan: #F5E6D3;
  --brand-border: #EADFD0;
  --brand-red: #C41E3A;
  --brand-red-dark: #A5182F;
  --brand-red-light: #E8798D;
  --brand-red-soft: #F8DDE3;
  --brand-font-display: 'Jost', sans-serif;
  --brand-font-body: 'Inter', sans-serif;
  --bs-font-sans-serif: 'Inter', sans-serif;
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-primary: #C41E3A;
  --bs-primary-rgb: 196, 30, 58;
  --bs-success: #AFA79D;
  --bs-info: #D8D1C8;
  --bs-warning: #F5E6D3;
  --bs-body-color: #2C2C2C;
  --bs-body-bg: #FFFFFF;
}
/* Shared dialog presentation, including notices outside the main app element. */
.swal2-container { padding: 16px !important; overflow-y: auto; }
.swal2-popup.swal2-popup {
  width: 32rem !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px !important;
  border: 1px solid var(--brand-border) !important;
  border-top: 3px solid var(--brand-red) !important;
  border-radius: 4px !important;
  background: var(--brand-white) !important;
  color: var(--brand-charcoal) !important;
}
.swal2-popup .swal2-title {
  font-family: var(--brand-font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  color: var(--brand-charcoal) !important;
  padding: 12px 0 0;
  overflow-wrap: anywhere;
}
.swal2-popup .swal2-html-container {
  font-family: var(--brand-font-body) !important;
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--brand-charcoal) !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  overflow-wrap: anywhere;
}
.swal2-popup .swal2-html-container p { margin: 0 0 12px; }
.swal2-popup .swal2-html-container a { color: var(--brand-red-dark) !important; text-decoration: underline; }
.swal2-popup .swal2-icon {
  color: var(--brand-red) !important;
  border-color: var(--brand-red-light) !important;
  margin: 12px auto !important;
}
.swal2-popup .swal2-success-ring { border-color: var(--brand-red-soft) !important; }
.swal2-popup [class^="swal2-success-line"] { background: #24824A !important; }
.swal2-popup [class^="swal2-x-mark-line"],
.swal2-timer-progress-bar { background: var(--brand-red) !important; }
.swal2-popup .swal2-actions { gap: 12px; margin: 20px 0 0; flex-wrap: wrap; }
.swal2-popup .swal2-styled { margin: 0; }
.search-results-table.search-results-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100%;
}
.search-results-table :is(th, td) { width: auto !important; max-width: none; }
.search-result-action-group { display: flex; align-items: center; gap: 8px; width: max-content; }
.main-content .search-result-action-group .btn { white-space: nowrap; flex-shrink: 0; margin: 0 !important; }
html,
body {
  font-family: var(--brand-font-body) !important;
}
body {
  font-family: var(--brand-font-body) !important;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: normal;
  background-color: var(--brand-white) !important;
  color: var(--brand-charcoal);
}
button, input, select, textarea, .form-control, .form-select, .swal2-popup,
.navbar, .navbar-brand, .navbar-nav, .dropdown-menu, .card, .table,
.breadcrumb, .timeline, .modal, .popover, .tooltip, .card .card-body,
.card .card-header, .card .card-footer, .alert {
  font-family: var(--brand-font-body) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--brand-font-display) !important;
  color: var(--brand-charcoal);
  letter-spacing: normal;
  line-height: 1.25;
}
h1, .h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 400 !important; }
h2, .h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 400 !important; }
h3, .h3 { font-size: 22px; font-weight: 500 !important; }
h4, .h4 { font-size: 18px; font-weight: 500 !important; }
h5, h6, .h5, .h6 { font-weight: 500 !important; }
p { max-width: 68ch; }
small, .text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.eyebrow { font-family: var(--brand-font-display); font-size: 12px; font-weight: 500; letter-spacing: .14em; }
.main-content { background: var(--brand-cream) !important; }
.bg-gray-100 { background: var(--brand-white) !important; }
.bg-light { background: var(--brand-cream) !important; }
.card, .auth-card, .modal-content, .dropdown-menu, .swal2-popup,
.list-group-item, .table, .form-control, .form-select, .input-group-text {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: 2px !important;
  box-shadow: none !important;
}
.btn, .badge, .form-control, .form-select, .nav-link, .page-link,
.alert, .input-group-text, .list-group-item, .icon-shape {
  border-radius: 2px !important;
  box-shadow: none !important;
}
.btn { font-family: var(--brand-font-display) !important; font-weight: 500; letter-spacing: normal; text-transform: none; }
.btn-primary, .swal2-confirm {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}
.btn-primary:hover, .swal2-confirm:hover { background: var(--brand-red-dark) !important; }
.btn-danger {
  background: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
  color: var(--brand-white) !important;
}
.btn-success, .btn-info, .btn-warning, .btn-secondary, .swal2-cancel {
  background: var(--brand-white) !important;
  border-color: var(--brand-stone-light) !important;
  color: var(--brand-charcoal) !important;
}
.btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-secondary:hover {
  background: var(--brand-tan) !important;
}
.btn-danger:hover {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-warning,
.btn-outline-danger, .btn-outline-secondary {
  background: transparent !important;
  border-color: var(--brand-charcoal-soft) !important;
  color: var(--brand-charcoal-soft) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-info:hover,
.btn-outline-warning:hover, .btn-outline-danger:hover, .btn-outline-secondary:hover {
  background: var(--brand-tan) !important;
}
.bg-primary, .bg-gradient-primary, .bg-danger, .bg-gradient-danger {
  background: var(--brand-red) !important;
  color: var(--brand-white) !important;
}
.bg-success, .bg-info, .bg-warning, .bg-secondary,
.bg-gradient-success, .bg-gradient-info, .bg-gradient-warning,
.bg-gradient-secondary {
  background: var(--brand-tan) !important;
  color: var(--brand-charcoal) !important;
}
.bg-gradient-dark {
  background: var(--brand-charcoal-soft) !important;
  color: var(--brand-white) !important;
}
.text-primary, .text-danger, .text-gradient {
  color: var(--brand-red) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.text-success, .text-info, .text-warning, .text-secondary,
.text-muted, .status-msg.ok {
  color: var(--brand-charcoal-soft) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.alert-primary, .alert-danger {
  background: var(--brand-red-soft) !important;
  color: var(--brand-charcoal) !important;
  border: 1px solid var(--brand-red-light) !important;
}
.alert-success, .alert-info, .alert-warning {
  background: var(--brand-white) !important;
  color: var(--brand-charcoal) !important;
  border: 1px solid var(--brand-stone-light) !important;
}
.sidenav { background: var(--brand-white) !important; border-right: 1px solid var(--brand-border) !important; box-shadow: none !important; }
.sidenav .navbar-brand span,
.sidenav .nav-link, .nav-tabs .nav-link { color: var(--brand-charcoal-soft) !important; }
.sidenav .nav-link.active, .nav-tabs .nav-link.active {
  background: var(--brand-cream) !important;
  color: var(--brand-charcoal) !important;
  box-shadow: none !important;
}
.sidenav .nav-link.active { border-left: 2px solid var(--brand-stone); }
.sidenav .nav-link .icon { background: var(--brand-cream) !important; box-shadow: none !important; }
.sidenav .nav-link .icon i, .sidenav .nav-link .icon svg {
  color: var(--brand-stone) !important;
}
.sidenav .nav-link.active .icon i,
.sidenav .nav-link.active .icon svg,
.sidenav .nav-link.active .nav-link-text {
  color: var(--brand-charcoal) !important;
}
.sidenav .nav-link:hover {
  background: var(--brand-red-soft) !important;
  color: var(--brand-red-dark) !important;
  box-shadow: none !important;
}
.sidenav .nav-link:hover .icon i,
.sidenav .nav-link:hover .icon svg,
.sidenav .nav-link:hover .nav-link-text {
  color: var(--brand-red-dark) !important;
}
.nav-tabs, .table thead th { border-color: var(--brand-border) !important; }
.table thead th { color: var(--brand-charcoal-soft); }
.table { color: var(--brand-charcoal); }
.table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: var(--brand-cream); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--brand-red-soft); }
.form-control, .form-select, .input-group-text { border-color: var(--brand-stone-light); color: var(--brand-charcoal); }
.form-control:focus, .form-select:focus { border-color: var(--brand-red); box-shadow: none; }
:focus-visible { outline: 2px solid var(--brand-red) !important; outline-offset: 3px; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-red); }
.form-check-input:checked { background-color: var(--brand-red); border-color: var(--brand-red); }
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: var(--brand-red); }
a:not(.btn):not(.nav-link):hover { color: var(--brand-red-dark); }
.dropdown-item.active, .list-group-item.active, .page-item.active .page-link {
  background: var(--brand-red) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-red) !important;
}
.progress { background: var(--brand-border); }
.progress-bar { background: var(--brand-red) !important; }
.border-primary, .border-success, .border-info, .border-warning { border-color: var(--brand-stone-light) !important; }
.video-facade { background: var(--brand-charcoal) !important; }
.brand-pill { background: var(--brand-red) !important; color: var(--brand-white) !important; }
.auth-sub, .otp-hint, .status-msg, .store-links { text-align: left; }
::-webkit-scrollbar-thumb { background: var(--brand-stone-light); }
@media (max-width: 600px) {
  .card-body, .auth-card { padding: 20px; }
  .auth-wrap { min-width: 0; }
}
/* Flat surfaces, including legacy Bootstrap elevation utilities. */
[class*="shadow"], .navbar, .sidenav .icon, .btn:hover, .btn:active {
  box-shadow: none !important;
}
.card-background .full-background, .card-background-mask-secondary:before {
  background-image: none !important;
  background-color: var(--brand-tan) !important;
}
.bg-dark a:not(.btn), .bg-gradient-dark a:not(.btn) { color: var(--brand-red-light) !important; }

.navbar, .breadcrumb, .pagination .page-link {
  background: var(--brand-white) !important;
}
.breadcrumb .opacity-5 {
  color: var(--brand-charcoal-soft) !important;
  opacity: 1 !important;
}
.avatar,
#navbarProfilePhoto {
  background-color: var(--brand-stone-light);
}
.text-body,
.text-dark,
.text-black {
  color: var(--brand-charcoal) !important;
}
.timeline-step i:not(.text-primary):not(.text-danger),
.icon-shape.bg-gradient-success i,
.icon-shape.bg-gradient-info i,
.icon-shape.bg-gradient-secondary i {
  color: var(--brand-icon-muted) !important;
}
.icon-shape.bg-gradient-success,
.icon-shape.bg-gradient-info,
.icon-shape.bg-gradient-secondary {
  background: var(--brand-cream) !important;
  color: var(--brand-charcoal) !important;
}
.badge.bg-primary, .badge.bg-danger {
  background: var(--brand-red) !important;
  color: var(--brand-white) !important;
}
.badge.bg-success, .badge.bg-info, .badge.bg-warning, .badge.bg-secondary {
  background: var(--brand-cream) !important;
  color: var(--brand-charcoal-soft) !important;
  border: 1px solid var(--brand-border);
}
.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.noUi-connect {
  background: var(--brand-red) !important;
  background-image: none !important;
  border-color: var(--brand-red) !important;
}
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day:not(.selected):hover,
.flatpickr-calendar .flatpickr-day:not(.selected):focus,
.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover {
  background: var(--brand-red-soft) !important;
}
.noUi-target {
  background: var(--brand-border) !important;
}

/* Keep legacy template typography and icon colours within the brand system. */
label, .form-label, .nav-tabs .nav-link, .nav-pills .nav-link,
.breadcrumb-item, .stat-label {
  font-family: var(--brand-font-body) !important;
  color: var(--brand-charcoal) !important;
}
.sidenav .navbar-brand span { color: var(--brand-charcoal) !important; }
.sidenav .nav-link .icon i, .sidenav .nav-link .icon svg {
  color: var(--brand-stone) !important;
}
.form-control::placeholder, .form-select::placeholder {
  color: var(--brand-charcoal-soft) !important;
  opacity: 1;
}
.form-control, .form-select {
  border-color: var(--brand-stone) !important;
}
.btn-dark {
  background: var(--brand-charcoal-soft) !important;
  border-color: var(--brand-charcoal-soft) !important;
  color: var(--brand-white) !important;
}
.btn i { color: inherit !important; }
.btn:disabled, .btn.disabled {
  background: var(--brand-cream) !important;
  color: var(--brand-charcoal-soft) !important;
  border-color: var(--brand-stone) !important;
  opacity: 1 !important;
}

/* One page header and command style for every template using the app shell. */
.main-content .app-page-header {
  background: var(--brand-cream) !important;
  border: 1px solid var(--brand-border);
  border: none;
  border-bottom: 1px solid var(--brand-border);
  border-radius: 0 !important;
  padding: 22px 26px !important;
  margin-top: 12px;
  margin-bottom: 14px;
}
.app-page-header > .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
}
.app-page-heading { min-width: 0; }
.main-content .app-page-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--brand-font-display) !important;
  font-size: 24px;
  font-weight: 400 !important;
  line-height: 1.3;
  color: var(--brand-charcoal) !important;
}
.app-page-title i { color: var(--brand-stone); font-size: 20px; flex-shrink: 0; }
.app-page-title span { overflow-wrap: anywhere; }
.app-page-description {
  margin: 7px 0 0;
  font-family: var(--brand-font-body) !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-charcoal-soft);
}
.alert-light {
  background: var(--brand-cream) !important;
  color: var(--brand-charcoal) !important;
  border-color: var(--brand-border) !important;
}
.main-content .table {
  font-family: var(--brand-font-body) !important;
  font-size: 14px;
  line-height: 1.6;
}
.main-content .table thead th {
  background: var(--brand-white);
  color: var(--brand-charcoal);
  font-weight: 600;
  border-bottom: 1px solid var(--brand-charcoal-soft) !important;
}
.main-content .table td { border-bottom-color: var(--brand-border); }
.main-content .table :is(th, td) { padding: 10px 12px; }
.main-content .card-header { background-color: var(--brand-white); }
.app-page-header #dropdownMenuButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--brand-charcoal) !important;
}
.app-page-header #navbarUsername { overflow-wrap: anywhere; }
/* Layered important rules take precedence over legacy template stylesheets. */
@layer brand-controls {
.main-content .btn.btn, .swal2-popup .swal2-styled {
  font-family: var(--brand-font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  letter-spacing: 0 !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  min-height: 40px;
  white-space: normal;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
.main-content .btn.btn-sm { padding: 6px 12px !important; min-height: 32px; }
.main-content .btn.btn-primary, .main-content .btn.bg-gradient-primary,
.main-content .btn.btn-danger {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}
.main-content .btn.btn-dark {
  background: var(--brand-charcoal-soft) !important;
  border-color: var(--brand-charcoal-soft) !important;
  color: var(--brand-white) !important;
}
.main-content .btn.btn-success, .main-content .btn.btn-info,
.main-content .btn.btn-warning, .main-content .btn.btn-secondary,
.main-content .btn[class*="btn-outline-"],
.main-content .btn.bg-gradient-success, .main-content .btn.bg-gradient-info,
.main-content .btn.bg-gradient-warning, .main-content .btn.bg-gradient-secondary {
  background: var(--brand-white) !important;
  border-color: var(--brand-stone-light) !important;
  color: var(--brand-charcoal-soft) !important;
}
.main-content .btn.btn-primary:hover, .main-content .btn.bg-gradient-primary:hover,
.main-content .btn.btn-danger:hover {
  background: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
}
.main-content .btn.btn-dark:hover {
  background: var(--brand-charcoal) !important;
  border-color: var(--brand-charcoal) !important;
}
.main-content .btn.btn-success:hover, .main-content .btn.btn-info:hover,
.main-content .btn.btn-warning:hover, .main-content .btn.btn-secondary:hover,
.main-content .btn[class*="btn-outline-"]:hover {
  background: var(--brand-cream) !important;
  border-color: var(--brand-stone) !important;
  color: var(--brand-charcoal) !important;
}
.main-content .btn.btn:disabled, .main-content .btn.btn.disabled {
  background: var(--brand-cream) !important;
  border-color: var(--brand-stone) !important;
  color: var(--brand-charcoal-soft) !important;
  opacity: 1 !important;
}
}
@media (max-width: 767px) {
  .main-content .app-page-header { margin-left: 12px !important; margin-right: 12px !important; padding: 18px !important; }
  .app-page-header > .container-fluid { flex-wrap: wrap; gap: 12px; }
  .app-page-header .navbar-nav { margin-left: auto; max-width: 100%; }
  .app-page-header #dropdownMenuButton { max-width: 100%; }
}

/* Use the neutral brand palette for content icons; retain navigation and headings. */
.main-content .icon-shape.bg-gradient-primary {
  background: var(--brand-tan) !important;
  color: var(--brand-charcoal-soft) !important;
}
.main-content .icon-shape.bg-gradient-primary i,
.main-content .icon-shape.bg-gradient-primary svg,
.main-content .timeline-step i:not(.text-danger),
.main-content .timeline-step svg:not(.text-danger) {
  color: var(--brand-icon-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}