/**
 * NLA Reports Theme
 * Brand colours extracted from the official NLA logo:
 *   - Primary green : #009639
 *   - Dark green    : #006B2B
 *   - Light green   : #E8F5E9
 *   - Gold/yellow   : #FFD700
 *   - Dark gold     : #E6C200
 *   - Black         : #000000
 *
 * This file is loaded by report and operational pages to keep their
 * colour scheme aligned with the NLA logo.
 */

:root {
  --nla-green: #009639;
  --nla-green-dark: #006B2B;
  --nla-green-light: #E8F5E9;
  --nla-gold: #FFD700;
  --nla-gold-dark: #E6C200;
  --nla-black: #000000;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-primary,
.btn-primary:focus {
  background-color: var(--nla-green);
  border-color: var(--nla-green);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-color: var(--nla-green-dark);
  border-color: var(--nla-green-dark);
  color: #ffffff;
}

.btn-primary.btn-outline {
  background-color: transparent;
  color: var(--nla-green);
  border-color: var(--nla-green);
}

.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
  background-color: var(--nla-green);
  border-color: var(--nla-green);
  color: #ffffff;
}

.btn-success {
  background-color: var(--nla-green);
  border-color: var(--nla-green);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active {
  background-color: var(--nla-green-dark);
  border-color: var(--nla-green-dark);
}

/* Gold accent for special CTAs */
.btn-gold,
.btn-gold:focus {
  background-color: var(--nla-gold);
  border-color: var(--nla-gold);
  color: var(--nla-black);
}

.btn-gold:hover,
.btn-gold:active,
.btn-gold.active {
  background-color: var(--nla-gold-dark);
  border-color: var(--nla-gold-dark);
  color: var(--nla-black);
}

/* =========================================================
   Tables / DataTables
   ========================================================= */
.table > thead > tr > th {
  background-color: var(--nla-green);
  color: #ffffff;
  border-bottom: 2px solid var(--nla-green-dark);
  vertical-align: middle;
}

.table > thead > tr > th a {
  color: #ffffff;
}

.table.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--nla-green-light);
}

.table-hover > tbody > tr:hover {
  background-color: #d4edda;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-color: var(--nla-green-dark);
}

/* DataTables integration */
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--nla-green);
  color: #ffffff;
  border-bottom: 2px solid var(--nla-green-dark);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background: none !important;
  border: none !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-family: inherit !important;
  font-weight: 400 !important;
  speak: none;
  background: none !important;
}

table.dataTable thead .sorting::after {
  content: "\25BC" !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 10px !important;
  opacity: 1 !important;
}

table.dataTable thead .sorting_asc::after {
  content: "\25B2" !important;
  color: #ffffff !important;
  font-size: 10px !important;
  opacity: 1 !important;
}

table.dataTable thead .sorting_desc::after {
  content: "\25BC" !important;
  color: #ffffff !important;
  font-size: 10px !important;
  opacity: 1 !important;
}

table.dataTable thead th:hover .sorting::after,
table.dataTable thead th:hover .sorting_asc::after,
table.dataTable thead th:hover .sorting_desc::after {
  color: #ffffff !important;
  opacity: 1 !important;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  background-color: var(--nla-green-light);
  color: var(--nla-green-dark);
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--nla-green) !important;
  color: #ffffff !important;
  border-color: var(--nla-green) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--nla-green-light) !important;
  color: var(--nla-green-dark) !important;
  border-color: var(--nla-green) !important;
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.styleColor {
  color: var(--nla-green);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--nla-green);
  border-color: var(--nla-green);
  color: #ffffff;
}

/* =========================================================
   Side navigation
   ========================================================= */
#side-menu li.active > a {
  background-color: var(--nla-green-light);
  color: var(--nla-green);
  border-left: 3px solid var(--nla-green);
}

#side-menu li > a:hover {
  background-color: var(--nla-green-light);
  color: var(--nla-green-dark);
}

#side-menu .nav-second-level li > a:hover {
  background-color: #d4edda;
  color: var(--nla-green-dark);
}

/* =========================================================
   Common report page components
   ========================================================= */
.report-banner {
  background: linear-gradient(135deg, var(--nla-green-dark) 0%, var(--nla-green) 100%);
  color: #ffffff;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  border-left: 5px solid var(--nla-gold);
}

.report-banner h2,
.report-banner h3,
.report-banner h4,
.report-banner h5 {
  color: #ffffff;
  margin-top: 0;
}

.filter-section {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-top: 4px solid var(--nla-green);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.stats-box {
  background: var(--nla-green-light);
  border-left: 4px solid var(--nla-green);
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.stats-box .stats-number {
  color: var(--nla-green);
  font-weight: 700;
}

.page-heading h1,
.page-heading h2,
.page-heading h3 {
  color: var(--nla-green-dark);
  border-bottom: 2px solid var(--nla-gold);
  padding-bottom: 10px;
}

/* =========================================================
   Form controls
   ========================================================= */
.form-control:focus {
  border-color: var(--nla-green);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 150, 57, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 150, 57, 0.6);
}

.input-group-addon {
  background-color: var(--nla-green-light);
  border-color: var(--nla-green);
  color: var(--nla-green-dark);
}

/* Select2 */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single {
  border-color: #cccccc;
}

.select2-container .select2-choice:focus,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--nla-green);
}

.select2-results .select2-highlighted {
  background-color: var(--nla-green);
  color: #ffffff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--nla-green);
  color: #ffffff;
}

.select2-drop-active,
.select2-container--open .select2-selection {
  border-color: var(--nla-green);
}

/* =========================================================
   Labels / Badges / Alerts
   ========================================================= */
.label-primary,
.badge-primary {
  background-color: var(--nla-green);
}

.label-success,
.badge-success {
  background-color: var(--nla-green-dark);
}

.alert-success {
  background-color: var(--nla-green-light);
  border-color: var(--nla-green);
  color: var(--nla-green-dark);
}

.alert-info {
  border-left: 6px solid var(--nla-green);
}

/* =========================================================
   Tabs / Panels / Wells
   ========================================================= */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--nla-green);
  border-top: 3px solid var(--nla-green);
}

.panel-primary > .panel-heading {
  background-color: var(--nla-green);
  border-color: var(--nla-green);
  color: #ffffff;
}

.panel-primary {
  border-color: var(--nla-green);
}

.well {
  background-color: var(--nla-green-light);
  border-color: #d4edda;
}

/* =========================================================
   Modals
   ========================================================= */
.modal-header {
  background: linear-gradient(135deg, var(--nla-green-dark) 0%, var(--nla-green) 100%);
  color: #ffffff;
  border-bottom: 3px solid var(--nla-gold);
}

.modal-header .close {
  color: #ffffff;
  opacity: 0.8;
}

.modal-header .close:hover {
  color: var(--nla-gold);
  opacity: 1;
}

.modal-title {
  color: #ffffff;
}

/* =========================================================
   Footer / misc
   ========================================================= */
.footer .pull-left,
.footer .pull-right,
.footer span,
.footer b {
  color: var(--nla-green);
}

a {
  color: var(--nla-green);
}

a:hover,
a:focus {
  color: var(--nla-green-dark);
}

.text-primary {
  color: var(--nla-green);
}

.text-success {
  color: var(--nla-green-dark);
}

.bg-primary {
  background-color: var(--nla-green);
  color: #ffffff;
}

.bg-success {
  background-color: var(--nla-green-light);
  color: var(--nla-green-dark);
}

/* =========================================================
   Loading / spinners
   ========================================================= */
.sk-spinner-wave div,
.sk-spinner-rotating-plane.sk-spinner {
  background-color: var(--nla-green);
}

/* =========================================================
   Toastr
   ========================================================= */
#toast-container > .toast-success {
  background-color: var(--nla-green);
}

/* =========================================================
   FASTPAY FASTCREDIT portal overrides
   These rules make the green theme apply to the custom
   layout/components used in nlabanks-webapp.
   ========================================================= */

/* Header strip */
.color-line {
  background: var(--nla-green) !important;
  background-image: linear-gradient(to right, var(--nla-green-dark), var(--nla-green), var(--nla-green-light)) !important;
}

/* hPanel headings */
.hpanel > .panel-heading,
.hpanel .hbuilt {
  border-top: 3px solid var(--nla-green) !important;
}

.hpanel > .panel-heading h4,
.hpanel > .panel-heading h5 {
  color: var(--nla-green-dark);
}

/* Page-specific headers (users, reports, etc.) */
.users-header,
.report-banner,
.page-header-green,
.normalheader h2,
.normalheader h3 {
  background: linear-gradient(135deg, var(--nla-green-dark) 0%, var(--nla-green) 100%) !important;
  color: #ffffff !important;
}

.users-header h4,
.report-banner h2,
.report-banner h3,
.report-banner h4,
.report-banner h5,
.normalheader h2,
.normalheader h3 {
  color: #ffffff !important;
}

/* Force Bootstrap buttons green */
.btn-primary,
.btn-primary:focus,
.btn-primary2,
.btn-primary2:focus,
.btn-success,
.btn-success:focus,
.btn-login,
.btn-submit {
  background-color: var(--nla-green) !important;
  border-color: var(--nla-green) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary2:hover,
.btn-primary2:active,
.btn-primary2.active,
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-login:hover,
.btn-submit:hover {
  background-color: var(--nla-green-dark) !important;
  border-color: var(--nla-green-dark) !important;
  color: #ffffff !important;
}

/* Tables */
.table > thead > tr > th,
.table > thead > tr > td,
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--nla-green) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--nla-green-dark) !important;
}

/* Side navigation active/hover */
#side-menu li.active > a,
.metismenu li.active > a,
#side-menu li > a:hover,
.metismenu li > a:hover {
  background-color: var(--nla-green-light) !important;
  color: var(--nla-green) !important;
  border-left: 3px solid var(--nla-green) !important;
}

/* Links and text */
a,
a:hover,
a:focus,
.text-primary,
.text-success {
  color: var(--nla-green) !important;
}

a:hover,
a:focus,
.text-success {
  color: var(--nla-green-dark) !important;
}

/* Labels / badges */
.label-primary,
.badge-primary,
.label-success,
.badge-success {
  background-color: var(--nla-green) !important;
}

/* Form focus */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--nla-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 150, 57, 0.25) !important;
}

/* Modal header */
.modal-header,
.iziModal-header {
  background: linear-gradient(135deg, var(--nla-green-dark) 0%, var(--nla-green) 100%) !important;
  color: #ffffff !important;
}

/* Footer */
.footer,
.footer span,
.footer b,
.footer a {
  color: var(--nla-green) !important;
}

/* =========================================================
   Dashboard tiles/cards
   ========================================================= */

/* Force every dashboard card to the NLA green theme */
.dashboard-card,
.dashboard-card.revenue-card,
.dashboard-card.sales-card,
.dashboard-card.credit-card,
.dashboard-card.payout-card,
.dashboard-card.users-card,
.dashboard-card.active-users-card,
.dashboard-card.highest-sales-card,
.dashboard-card.unclaimed-wins-card {
  background: linear-gradient(135deg, var(--nla-green-dark) 0%, var(--nla-green) 100%) !important;
  border: none !important;
}

/* Hover state */
.dashboard-card:hover {
  background: linear-gradient(135deg, var(--nla-green) 0%, var(--nla-green-dark) 100%) !important;
}

/* White text on green cards */
.dashboard-card .panel-body,
.dashboard-card .panel-body *,
.dashboard-card .panel-footer,
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card h4,
.dashboard-card h5,
.dashboard-card small,
.dashboard-card .metric-trend,
.dashboard-card .metric-trend *,
.dashboard-card.highest-sales-card .panel-body,
.dashboard-card.highest-sales-card .panel-body *,
.dashboard-card.highest-sales-card .panel-footer,
.dashboard-card.highest-sales-card small,
.dashboard-card.highest-sales-card .metric-trend,
.dashboard-card.highest-sales-card h1,
.dashboard-card.highest-sales-card h3,
.dashboard-card.active-users-card .panel-body,
.dashboard-card.active-users-card .panel-body *,
.dashboard-card.active-users-card .panel-footer,
.dashboard-card.active-users-card small,
.dashboard-card.active-users-card .metric-trend,
.dashboard-card.active-users-card h1,
.dashboard-card.active-users-card h3,
.dashboard-card.users-card .panel-body,
.dashboard-card.users-card .panel-body *,
.dashboard-card.users-card .panel-footer,
.dashboard-card.users-card small,
.dashboard-card.users-card .metric-trend,
.dashboard-card.users-card h1,
.dashboard-card.users-card h3,
.dashboard-card.unclaimed-wins-card .panel-body,
.dashboard-card.unclaimed-wins-card .panel-body *,
.dashboard-card.unclaimed-wins-card .panel-footer,
.dashboard-card.unclaimed-wins-card small,
.dashboard-card.unclaimed-wins-card .metric-trend,
.dashboard-card.unclaimed-wins-card h1,
.dashboard-card.unclaimed-wins-card h3 {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Make card body transparent so the green gradient shows through */
.dashboard-card .panel-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep footer readable over green */
.dashboard-card .panel-footer {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: #ffffff !important;
}

/* Icons inside cards */
.dashboard-card .panel-body i.pe-7s,
.dashboard-card .panel-body [class*="pe-7s"],
.dashboard-card.highest-sales-card .panel-body i.pe-7s,
.dashboard-card.highest-sales-card .panel-body [class*="pe-7s"],
.dashboard-card.active-users-card .panel-body i.pe-7s,
.dashboard-card.active-users-card .panel-body [class*="pe-7s"],
.dashboard-card.users-card .panel-body i.pe-7s,
.dashboard-card.users-card .panel-body [class*="pe-7s"],
.dashboard-card.unclaimed-wins-card .panel-body i.pe-7s,
.dashboard-card.unclaimed-wins-card .panel-body [class*="pe-7s"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Dashboard summary box */
.dashboard-info-summary {
  background: linear-gradient(135deg, var(--nla-green-dark) 0%, var(--nla-green) 100%) !important;
  color: #ffffff !important;
}

.dashboard-info-summary h4,
.dashboard-info-summary .amount {
  color: #ffffff !important;
}

/* Dashboard theme panels */
.panel-success.dashboard-theme,
.hpanel.hdashboard {
  border-color: var(--nla-green) !important;
}

.panel-success.dashboard-theme .panel-heading {
  background-color: var(--nla-green) !important;
  border-color: var(--nla-green) !important;
  color: #ffffff !important;
}

/* Nav tabs on dashboard */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top-color: var(--nla-green) !important;
  border-left-color: var(--nla-green) !important;
  border-right-color: var(--nla-green) !important;
  color: var(--nla-green) !important;
}