/*
 * MyVillage Project - Brand Theme
 * 
 * A comprehensive stylesheet that implements the official brand color palette:
 * - #E4DCCB – MVP Beige (backgrounds, neutral text areas, subtle highlights)
 * - #FFFFFF – White (text on dark backgrounds, clean content containers)
 * - #043922 – MVP Dark Green (dominant accent, backgrounds for tables/cards, buttons)
 * - #302017 – MVP Brown (headers, section dividers, visual depth) 
 */

:root {
  /* Core brand colors */
  --mvp-beige: #E4DCCB;
  --mvp-white: #FFFFFF;
  --mvp-dark-green: #043922;
  --mvp-brown: #302017;
  
  /* Confidence semantic colors (should be used only for confidence indicators) */
  --mvp-confident: #198754;    /* Green for confident */
  --mvp-kinda: #FFC107;        /* Yellow for kinda confident */  
  --mvp-not-confident: #DC3545; /* Red for not confident */
}

/* Global theme overrides */
body {
  background-color: var(--mvp-beige);
  color: var(--mvp-dark-green);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--mvp-brown);
}

.text-mvp-dark {
  color: var(--mvp-dark-green) !important;
}

.text-mvp-light {
  color: var(--mvp-white) !important;
}

/* Background colors */
.bg-mvp-beige {
  background-color: var(--mvp-beige) !important;
}

.bg-mvp-dark-green {
  background-color: var(--mvp-dark-green) !important;
  color: var(--mvp-white);
}

.bg-mvp-brown {
  background-color: var(--mvp-brown) !important;
  color: var(--mvp-white);
}

/* Navigation */
.navbar.bg-dark-green, 
.navbar.bg-dark {
  background-color: var(--mvp-dark-green) !important;
  border-bottom: 1px solid var(--mvp-beige);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: var(--mvp-white);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--mvp-beige);
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--mvp-beige);
  font-weight: bold;
}

/* Tables - consistent styling */
.table {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
  border-radius: 8px;
  overflow: hidden;
}

.table th {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
  border-color: rgba(228, 220, 203, 0.3);
}

.table td {
  color: var(--mvp-white);
  border-color: rgba(228, 220, 203, 0.2);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(4, 57, 34, 0.85);
}

.table-hover tbody tr:hover {
  background-color: rgba(4, 57, 34, 0.7);
}

/* Cards */
.card {
  background-color: var(--mvp-white);
  border: 1px solid rgba(48, 32, 23, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

.card-header {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
  border-bottom: 1px solid rgba(228, 220, 203, 0.2);
}

.card-title {
  color: var(--mvp-brown);
}

.card-body {
  color: var(--mvp-dark-green);
}

/* Dark cards (analysis cards, etc.) */
.mvp-dark-card .card-header,
.card.dark-card .card-header {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
}

.mvp-dark-card .card-body,
.card.dark-card .card-body {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
}

/* Text containers and analysis previews */
.analysis-segment {
  background-color: var(--mvp-beige);
  color: var(--mvp-dark-green);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.analysis-segment h5 {
  color: var(--mvp-brown);
  border-bottom: 1px solid rgba(48, 32, 23, 0.3);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

/* Confidence indicators */
.segment-confident {
  border-left: 5px solid var(--mvp-confident);
}

.segment-kinda-confident {
  border-left: 5px solid var(--mvp-kinda);
}

.segment-not-confident {
  border-left: 5px solid var(--mvp-not-confident);
}

/* Badges */
.badge-confident {
  background-color: var(--mvp-confident) !important;
  color: white !important;
}

.badge-kinda-confident {
  background-color: var(--mvp-kinda) !important;
  color: black !important;
}

.badge-not-confident {
  background-color: var(--mvp-not-confident) !important;
  color: white !important;
}

/* Progress bars */
.progress {
  background-color: rgba(228, 220, 203, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar.bg-success,
.progress-bar.confidence-green {
  background-color: var(--mvp-confident) !important;
}

.progress-bar.bg-warning,
.progress-bar.confidence-gold {
  background-color: var(--mvp-kinda) !important;
}

.progress-bar.bg-danger,
.progress-bar.confidence-red {
  background-color: var(--mvp-not-confident) !important;
}

/* Buttons */
.btn-primary, 
.mvp-dark-green-btn {
  background-color: var(--mvp-dark-green);
  border-color: rgba(228, 220, 203, 0.7);
  color: var(--mvp-white);
}

.btn-primary:hover, 
.mvp-dark-green-btn:hover {
  background-color: rgba(4, 57, 34, 0.85);
  border-color: var(--mvp-beige);
  color: var(--mvp-white);
}

.btn-secondary, 
.mvp-gold-btn {
  background-color: var(--mvp-beige);
  border-color: var(--mvp-dark-green);
  color: var(--mvp-dark-green);
}

.btn-secondary:hover, 
.mvp-gold-btn:hover {
  background-color: rgba(228, 220, 203, 0.85);
  border-color: var(--mvp-dark-green);
  color: var(--mvp-dark-green);
}

/* Form controls */
.form-control {
  background-color: var(--mvp-white);
  border-color: rgba(4, 57, 34, 0.3);
  color: var(--mvp-dark-green);
}

.form-control:focus {
  border-color: var(--mvp-dark-green);
  box-shadow: 0 0 0 0.25rem rgba(4, 57, 34, 0.25);
  color: var(--mvp-dark-green);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(228, 220, 203, 0.5);
}

/* Alerts */
.alert {
  border-left-width: 4px;
}

.alert-success {
  background-color: rgba(25, 135, 84, 0.1);
  border-left-color: var(--mvp-confident);
  color: var(--mvp-dark-green);
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-left-color: var(--mvp-kinda);
  color: var(--mvp-dark-green);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-left-color: var(--mvp-not-confident);
  color: var(--mvp-dark-green);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--mvp-white);
  border: 1px solid rgba(4, 57, 34, 0.15);
}

.dropdown-item {
  color: var(--mvp-dark-green);
}

.dropdown-item:hover, 
.dropdown-item:focus {
  background-color: rgba(228, 220, 203, 0.5);
  color: var(--mvp-dark-green);
}

.dropdown-divider {
  border-top-color: rgba(48, 32, 23, 0.1);
}

/* Navs and tabs */
.nav-tabs {
  border-bottom-color: var(--mvp-dark-green);
}

.nav-tabs .nav-link {
  color: var(--mvp-dark-green);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: rgba(4, 57, 34, 0.2);
}

.nav-tabs .nav-link.active {
  color: var(--mvp-dark-green);
  background-color: var(--mvp-white);
  border-color: var(--mvp-dark-green);
  border-bottom-color: var(--mvp-white);
  font-weight: 500;
}

/* List groups */
.list-group-item {
  background-color: var(--mvp-white);
  color: var(--mvp-dark-green);
  border-color: rgba(4, 57, 34, 0.125);
}

.list-group-item.active {
  background-color: var(--mvp-dark-green);
  border-color: var(--mvp-dark-green);
  color: var(--mvp-white);
}

/* Footer */
footer {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
  border-top: 1px solid rgba(228, 220, 203, 0.2);
}

footer a {
  color: var(--mvp-beige) !important;
}

footer a:hover {
  color: var(--mvp-white) !important;
  text-decoration: underline;
}

/* Links */
a {
  color: var(--mvp-dark-green);
}

a:hover {
  color: rgba(4, 57, 34, 0.8);
}

/* Modal styling */
.modal-content {
  background-color: var(--mvp-white);
  border: 1px solid rgba(48, 32, 23, 0.2);
}

.modal-header {
  background-color: var(--mvp-dark-green);
  color: var(--mvp-white);
  border-bottom-color: rgba(228, 220, 203, 0.2);
}

.modal-footer {
  border-top-color: rgba(48, 32, 23, 0.1);
}

/* Spinner/loading indicator */
.spinner-border {
  color: var(--mvp-dark-green);
}

/* Remove blue from the application */
.text-primary,
.bg-primary,
.btn-info,
.badge-info,
.alert-info {
  color: var(--mvp-dark-green) !important;
  background-color: var(--mvp-dark-green) !important;
  border-color: var(--mvp-dark-green) !important;
}

/* Ensure all analysis tables use proper brand colors */
.analysis-meta-table,
.confidence-table,
.comparison-table,
.select-analyses-table,
.frame-analysis-table {
  background-color: var(--mvp-dark-green) !important;
  color: var(--mvp-white) !important;
  border-radius: 8px;
  overflow: hidden;
}

.analysis-meta-table th,
.confidence-table th,
.comparison-table th,
.select-analyses-table th,
.frame-analysis-table th {
  background-color: var(--mvp-dark-green) !important;
  color: var(--mvp-white) !important;
  border-color: rgba(228, 220, 203, 0.3) !important;
}