/* =========================================================
   ComprasFVS — FVS Theme + Existing Layout Rules
   Load AFTER Bootstrap CSS
   ========================================================= */

/* ---------- FVS palette variables ---------- */
:root {
  --fvs-green-primary:   #007F3E;
  --fvs-green-secondary: #005C2B;
  --fvs-yellow-accent:   #FFCC00;
  --fvs-green-light:     #E6F2EC;
  --fvs-text-dark:       #212529;
  --fvs-border:          #cfe6db;

  /* helpers */
  --fvs-on-primary: #ffffff;
  --fvs-surface:    var(--fvs-green-light);
}

/* ---------- Utilities & buttons (unscoped) ---------- */
.text-fvs-primary { color: var(--fvs-green-primary) !important; }
.bg-fvs-primary   { background-color: var(--fvs-green-primary) !important; color: #fff !important; }
.bg-fvs-secondary { background-color: var(--fvs-green-secondary) !important; color: #fff !important; }
.bg-fvs-light     { background-color: var(--fvs-green-light) !important; }
.border-fvs       { border-color: var(--fvs-green-primary) !important; }

/* Button style used by JS toggle buttons */
.btn-fvs,
.btn-fvs-primary {
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-secondary) !important;
  color:            var(--fvs-on-primary) !important;
}
.btn-fvs:hover,
.btn-fvs:focus,
.btn-fvs-primary:hover,
.btn-fvs-primary:focus {
  background-color: var(--fvs-green-secondary) !important;
  border-color:     var(--fvs-green-secondary) !important;
  color:            var(--fvs-on-primary) !important;
}

/* Keep the “+ / −” contrasty over the FVS button */
.toggle-btn .toggle-button{
  color: var(--fvs-on-primary) !important;
  font-weight: 700;
  line-height: 1;
}

/* Links in FVS tone */
a { color: var(--fvs-green-primary); }
a:hover { color: #0a6a39; }  /* slightly darker */

/* ---------- Tables ---------- */
.table-fixed { table-layout: fixed; }

.table thead th,
.details-table thead th {
  background: var(--fvs-surface);
  vertical-align: middle;
}

/* Optional subtle row flash when toggling details */
.row-highlight { animation: flash-highlight 2s ease; }
@keyframes flash-highlight {
  0%   { background-color: rgba(255, 204, 0, 0.25); } /* FVS yellow accent, translucent */
  50%  { background-color: rgba(255, 204, 0, 0.18); }
  100% { background-color: transparent; }
}

/* ---------- Tabs (nav-tabs) ---------- */
.nav-tabs {
  margin-bottom: 0;
  width: 100%;
  overflow: visible;
  overflow-x: auto;   /* allow horizontal scroll if many tabs */
  white-space: nowrap;/* prevent wrapping */
}

/* Tab pills */
.nav-tabs .nav-link {
  background-color: var(--fvs-surface);  /* light green surface */
  color: var(--fvs-text-dark);
  border: 1px solid var(--fvs-border);
  border-bottom: none;
  margin-right: 2px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}
.nav-tabs .nav-link:hover {
  background-color: #dbece3; /* hover shade over surface */
  color: var(--fvs-text-dark);
}
.nav-tabs .nav-link.active {
  background-color: var(--fvs-green-primary);  /* FVS primary */
  color: #fff;
  border-color: var(--fvs-green-primary) var(--fvs-green-primary) #fff;
}

/* Tab content area */
.tab-content {
  border: 1px solid var(--fvs-border);
  border-top: none;
  padding: 1rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tab-pane {
  width: 100%;
  overflow-x: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Pagination in FVS tone ---------- */
.pagination .page-link {
  color: var(--fvs-green-primary);
  border-color: var(--fvs-border);
}
.pagination .page-link:hover {
  color: #0a6a39;
}
.pagination .page-item.active .page-link {
  background-color: var(--fvs-green-primary);
  border-color: var(--fvs-green-primary);
  color: #fff;
}

/* ---------- Optional: accordions (if present on this page too) ---------- */
.accordion-item {
  border: 1px solid var(--fvs-border);
  border-radius: .5rem;
  overflow: hidden;
}
.accordion-button {
  background-color: var(--fvs-green-light);
  color: var(--fvs-text-dark);
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  background-color: var(--fvs-green-primary) !important;
  color: #fff !important;
  border-color: var(--fvs-green-primary) !important;
}
.accordion-button:not(.collapsed)::after {
  filter: invert(1);
  opacity: .85;
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 127, 62, 0.25);
}
.accordion-button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* =========================================================
   GLOBAL REMAP — Bootstrap "primary" -> FVS green
   Paste at the END of comprasfvs.css (after Bootstrap)
   ========================================================= */

/* In case variables aren’t defined above in this file */
:root{
  --fvs-green-primary:   #007F3E;
  --fvs-green-secondary: #005C2B;
  --fvs-green-light:     #E6F2EC;
  --fvs-text-dark:       #212529;
  --fvs-on-primary:      #ffffff;
}

/* Core utilities */
.text-primary        { color: var(--fvs-green-primary) !important; }
a.text-primary:hover { color: var(--fvs-green-secondary) !important; }
.bg-primary          { background-color: var(--fvs-green-primary) !important; color: var(--fvs-on-primary) !important; }
.border-primary      { border-color: var(--fvs-green-primary) !important; }

/* Buttons */
.btn-primary,
.show > .btn-primary.dropdown-toggle{
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-primary) !important;
  color:            var(--fvs-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background-color: var(--fvs-green-secondary) !important;
  border-color:     var(--fvs-green-secondary) !important;
  color:            var(--fvs-on-primary) !important;
}
.btn-outline-primary{
  color:        var(--fvs-green-primary) !important;
  border-color: var(--fvs-green-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-primary) !important;
  color:            var(--fvs-on-primary) !important;
}
.btn-link{
  color: var(--fvs-green-primary) !important;
}
.btn-link:hover,
.btn-link:focus{
  color: var(--fvs-green-secondary) !important;
}

/* Focus rings (replace Bootstrap’s blue glow) */
.btn-primary:focus, .btn-primary.focus,
.page-link:focus,
.custom-control-input:focus ~ .custom-control-label::before,
.form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(0,127,62,.25) !important; /* green glow */
  outline: none !important;
}
.form-control:focus{
  border-color: var(--fvs-green-primary) !important;
}

/* Navs / Tabs / Pills */
.nav-tabs .nav-link.active{
  background-color: var(--fvs-green-primary) !important;
  color: #fff !important;
  border-color: var(--fvs-green-primary) var(--fvs-green-primary) #fff !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background-color: var(--fvs-green-primary) !important;
  color: #fff !important;
}

/* Pagination */
.pagination .page-link{
  color: var(--fvs-green-primary) !important;
  border-color: #cfe6db !important;
}
.pagination .page-link:hover{
  color: var(--fvs-green-secondary) !important;
}
.pagination .page-item.active .page-link{
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-primary) !important;
  color: #fff !important;
}

/* Badges / Alerts / Progress */
.badge-primary{
  background-color: var(--fvs-green-primary) !important;
}
.alert-primary{
  color:           #0f3a27 !important;
  background-color:#e8f5ef !important;   /* light green */
  border-color:    #cfe6db !important;
}
.progress-bar.bg-primary,
.bg-primary.progress-bar{
  background-color: var(--fvs-green-primary) !important;
}

/* List group active item */
.list-group-item.active{
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-primary) !important;
  color: #fff !important;
}

/* Dropdown active item */
.dropdown-item.active, .dropdown-item:active{
  background-color: var(--fvs-green-primary) !important;
  color: #fff !important;
}

/* Custom controls (checkbox/radio/switch) */
.custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-primary) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--fvs-green-primary) !important;
  border-color:     var(--fvs-green-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before{
  border-color: var(--fvs-green-primary) !important;
}

/* Tables (contextual) */
.table-primary,
.table-primary > th,
.table-primary > td{
  background-color: var(--fvs-green-light) !important;
}