/*
  Soma Siri Afrika brand layer.
  Loaded after the base template CSS so generated theme files can stay untouched.
*/
:root {
  --ssa-teal: #006b68;
  --ssa-teal-dark: #004f4d;
  --ssa-teal-soft: #e4f3f2;
  --ssa-coral: #e45f35;
  --ssa-coral-dark: #c84625;
  --ssa-coral-soft: #fff0eb;
  --ssa-gold: #f2ca5f;
  --ssa-gold-dark: #b7791f;
  --ssa-gold-soft: #fff7df;
  --ssa-red: #d6382c;
  --ssa-ink: #172033;
  --ssa-muted: #667085;
  --ssa-line: #e6eaf0;
  --ssa-surface: #ffffff;
  --ssa-page: #f7f8f4;
  --ssa-shadow: 0 14px 34px rgba(0, 79, 77, 0.08);
  --ssa-shadow-hover: 0 18px 42px rgba(0, 79, 77, 0.12);
  --ssa-topline: linear-gradient(90deg, var(--ssa-teal), var(--ssa-coral), var(--ssa-gold));

  --primary: 0, 107, 104;
  --primary-dark: 0, 79, 77;
  --secondary: 228, 95, 53;
  --success: 0, 107, 104;
  --danger: 214, 56, 44;
  --warning: 242, 202, 95;
  --info: 8, 138, 178;
  --body-color: var(--ssa-page);
  --bodybg-color: var(--ssa-page);
  --font-color: var(--ssa-ink);
  --font-title-color: var(--ssa-ink);
  --font-secondary-color: var(--ssa-muted);
  --border_color: var(--ssa-line);
  --link-color: var(--ssa-teal);
  --bs-primary: var(--ssa-teal);
  --bs-link-color: var(--ssa-teal);
  --bs-link-hover-color: var(--ssa-coral);
  --bs-border-radius: 8px;
  --app-border-radius: 8px;
}

body {
  background: var(--ssa-page);
  color: var(--ssa-ink);
}

.app-content main > .container-fluid,
.app-content main .container-fluid {
  color: var(--ssa-ink);
}

a {
  color: var(--ssa-teal);
}

a:hover {
  color: var(--ssa-coral);
}

.btn {
  border-radius: 8px;
  font-weight: 700;
}

.btn-primary,
.btn-primary:focus {
  background: var(--ssa-teal) !important;
  border-color: var(--ssa-teal) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
  background: var(--ssa-teal-dark) !important;
  border-color: var(--ssa-teal-dark) !important;
}

.btn-secondary,
.btn-info {
  background: var(--ssa-coral) !important;
  border-color: var(--ssa-coral) !important;
  color: #fff !important;
}

.btn-secondary:hover,
.btn-info:hover {
  background: var(--ssa-coral-dark) !important;
  border-color: var(--ssa-coral-dark) !important;
}

.btn-outline-primary {
  border-color: var(--ssa-teal) !important;
  color: var(--ssa-teal) !important;
}

.btn-outline-primary:hover {
  background: var(--ssa-teal) !important;
  color: #fff !important;
}

.bg-primary {
  background-color: var(--ssa-teal) !important;
}

.text-primary {
  color: var(--ssa-teal) !important;
}

.border-primary {
  border-color: var(--ssa-teal) !important;
}

.bg-success,
.badge.bg-success {
  background-color: var(--ssa-teal) !important;
}

.text-success {
  color: var(--ssa-teal) !important;
}

.bg-warning,
.badge.bg-warning {
  background-color: var(--ssa-gold) !important;
  color: #342b11 !important;
}

.text-warning {
  color: var(--ssa-gold-dark) !important;
}

.bg-info,
.badge.bg-info {
  background-color: var(--ssa-coral) !important;
}

.text-info {
  color: var(--ssa-coral) !important;
}

.bg-danger,
.badge.bg-danger {
  background-color: var(--ssa-red) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas {
  border-color: var(--ssa-line);
}

.card {
  border-radius: 8px;
  box-shadow: var(--ssa-shadow);
}

.card-header {
  background: var(--ssa-surface) !important;
  border-bottom-color: var(--ssa-line) !important;
  color: var(--ssa-ink);
}

.card-header.bg-primary,
.modal-header.bg-primary {
  background: var(--ssa-teal) !important;
  color: #fff !important;
}

.card.shadow-lg,
.card.shadow-sm {
  box-shadow: var(--ssa-shadow) !important;
}

.card:hover {
  box-shadow: var(--ssa-shadow-hover);
}

.progress-bar {
  background-color: var(--ssa-teal);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(0, 107, 104, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(0, 107, 104, 0.14);
}

.form-control,
.form-select {
  border-color: var(--ssa-line);
  border-radius: 8px;
}

.table {
  color: var(--ssa-ink);
}

.table thead th {
  background: #f7faf9;
  color: var(--ssa-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.table tbody tr:hover {
  background: rgba(0, 107, 104, 0.035);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ssa-line);
  border-radius: 8px;
  min-height: 36px;
}

.badge.bg-primary,
.bg-primary-soft,
.bg-primary-100,
.bg-light-primary {
  background-color: var(--ssa-teal-soft) !important;
  color: var(--ssa-teal-dark) !important;
}

.bg-info-100 {
  background-color: var(--ssa-coral-soft) !important;
  color: var(--ssa-coral-dark) !important;
}

.bg-warning-100 {
  background-color: var(--ssa-gold-soft) !important;
  color: var(--ssa-gold-dark) !important;
}

.app-wrapper nav,
.app-sidebar,
nav {
  --nav-active: var(--ssa-teal);
}

.main-nav a:hover,
.main-nav li.active > a,
.main-nav .no-sub a:hover {
  color: var(--ssa-teal) !important;
}

.main-nav > li > a {
  border-radius: 8px;
}

.main-nav > li > a:hover,
.main-nav > li.active > a {
  background: var(--ssa-teal-soft);
}

.app-logo {
  position: relative;
}

.app-logo::after,
.ssa-brand-topline::before {
  background: var(--ssa-topline);
  content: "";
  display: block;
  height: 3px;
  inset-inline: 18px;
  position: absolute;
  bottom: 0;
}

.modal-header {
  background: linear-gradient(135deg, var(--ssa-teal), var(--ssa-coral)) !important;
  color: #fff !important;
  border-bottom: 0;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.alert-info {
  background: var(--ssa-teal-soft);
  border-color: rgba(0, 107, 104, 0.2);
  color: var(--ssa-teal-dark);
}

.alert-warning {
  background: var(--ssa-gold-soft);
  border-color: rgba(242, 202, 95, 0.45);
  color: #5b4312;
}

.alert-success {
  background: var(--ssa-teal-soft);
  border-color: rgba(0, 107, 104, 0.22);
  color: var(--ssa-teal-dark);
}

.page-title,
.breadcrumb-item.active,
h1, h2, h3, h4, h5, h6 {
  color: var(--ssa-ink);
}