/* =========================================================
   GxPinnacle — Brand Theme Overrides + Bookmark Ribbon
   ========================================================= */

/* Brand tokens */
:root{
  --brand: #226160;
  --brand-600: #1e564f;
  --brand-50: rgba(34,97,96,.08);

  /* Bootstrap/Metronic primary remap */
  --bs-primary: var(--brand) !important;
}

/* -----------------------------
   Buttons (solid + outline)
------------------------------ */

/* Solid primary */
.btn.btn-primary{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.show > .btn.btn-primary.dropdown-toggle{
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
}
.btn-check:focus + .btn.btn-primary,
.btn.btn-primary:focus{
  box-shadow: 0 0 0 .2rem rgba(34,97,96,.25) !important;
}

/* Outline primary (e.g., Preview buttons) */
.btn-outline.btn-primary,
.btn-outline-primary{
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-color: transparent !important;
}
.btn-outline.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline.btn-primary:focus,
.btn-outline-primary:focus{
  color:#fff !important;
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 .2rem rgba(34,97,96,.20) !important;
}

/* Center button labels perfectly (login & sign-up too) */
.btn,
.btn.btn-brand,
button.btn-brand,
button.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 3rem;              /* 48px */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important; /* let flex do the centering */
}

/* Brand “btn-brand” helper (if used anywhere) */
.btn-brand{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn-brand:hover{
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
}

/* -----------------------------
   Text & backgrounds
------------------------------ */

/* Text brand helpers */
.text-primary,
a.text-primary{
  color: var(--brand) !important;
}
a.text-primary:hover,
a.text-primary:focus{
  color: var(--brand-600) !important;
}

/* Optional: make general body text solid black for better contrast */
h1,h2,h3,h4,h5,h6{ color:#000 !important; }
body, p, span, label, .text-muted, .text-gray-700, .text-gray-800{ color:#000 !important; }
.menu-title{ color:#000 !important; }
.menu-link,
.menu-link .menu-icon i{ color:#000 !important; }

/* Faded brand backgrounds */
.bg-primary{ background-color: var(--brand) !important; }
.bg-light-primary{ background-color: var(--brand-50) !important; }
.bg-hover-primary:hover{ background-color: rgba(34,97,96,.10) !important; }
.border-primary{ border-color: var(--brand) !important; }

/* -----------------------------
   Sidebar / nav highlights
------------------------------ */
.menu-state-primary .menu-link.active{
  background-color: rgba(34,97,96,.10) !important;
  border-left: 3px solid var(--brand) !important;
  color: var(--brand) !important;
}
.menu-state-primary .menu-link:hover{
  background-color: rgba(34,97,96,.06) !important;
  color: var(--brand) !important;
}
.menu-item .menu-link .menu-bullet .bullet{
  background-color: var(--brand) !important;
}
.menu-state-primary .menu-icon i{
  color: var(--brand) !important;
}

/* -----------------------------
   Forms (focus rings, switches)
------------------------------ */
.form-control:focus,
input:focus,
textarea:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .2rem rgba(34,97,96,.25) !important;
}
.form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* -----------------------------
   Charts (optional)
------------------------------ */
.apexcharts-series path{ stroke: var(--brand) !important; }

/* =========================================================
   Bookmark Ribbon Save Toggle
   Usage:
     <button class="bookmark-toggle" aria-pressed="false">
       <svg class="bookmark-icon" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M7 3h10a1 1 0 0 1 1 1v17l-6-4-6 4V4a1 1 0 0 1 1-1z"/>
       </svg>
     </button>
   On save, add .is-saved (JS): btn.classList.toggle('is-saved', true)
========================================================= */

.bookmark-toggle{
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: .4rem;
  border-radius: .5rem;
  line-height: 0; /* tighter hit area */
}
.bookmark-toggle:focus-visible{
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Icon baseline (outline) */
.bookmark-toggle .bookmark-icon{
  width: 16px;   /* small, tidy */
  height: 16px;
  transition: transform .12s ease, filter .12s ease;
  display: inline-block;
}
.bookmark-toggle .bookmark-icon path{
  stroke: var(--brand);
  stroke-width: 1.7;
  fill: transparent;
}

/* Hover lift */
.bookmark-toggle:hover .bookmark-icon{
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.06));
}

/* Saved state → solid brand green */
.bookmark-toggle.is-saved .bookmark-icon path{
  fill: var(--brand);
  stroke: var(--brand-600);
}

/* =========================================================
   LAYOUT FIX (GLOBAL): restore top offset for fixed header/toolbar
   Metronic’s bundle zeroes .app-wrapper margin-top at ≥992px,
   which causes titles to hide under the fixed header. Re-enable it.
========================================================= */

/* Always offset by header height when header is fixed */
[data-kt-app-header-fixed="true"] .app-wrapper{
  margin-top: var(--bs-app-header-height) !important;
}

/* If toolbar is also fixed, include its height too */
[data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] .app-wrapper{
  margin-top: calc(var(--bs-app-header-height) + var(--bs-app-toolbar-height)) !important;
}

/* =========================================================
   UNIVERSAL TOOLBAR TYPOGRAPHY (match Dashboard)
   Applies to the page title + subtitle inside the toolbar
   across all pages for perfect consistency.
========================================================= */

#kt_app_toolbar .page-title h1.page-heading{
  font-size: 2rem !important;     /* matches Dashboard fs-2 */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Add class="subtitle" to your subtitle span for consistent sizing */
#kt_app_toolbar .page-title .subtitle{
  font-size: 1.25rem !important;  /* matches Dashboard fs-5 scale */
  line-height: 1.4 !important;
  font-weight: 400 !important;
  margin-top: .5rem !important;
}

/* Brand-green hover for the Settings cog */
.gx-cog:hover,
.gx-cog:focus {
  background-color: #eaf2f1 !important; /* light green highlight */
  border-color: #eaf2f1 !important;
}
.gx-cog:hover i,
.gx-cog:focus i {
  color: #226160 !important;           /* brand green icon */
}
.gx-cog:active i {
  color: #1a4d4d !important;           /* darker green on active */
}