:root {
      /* Logo Colors */
      --logo-X: #FDAD16;
      --logo-T: #7DC241;
      --logo-MH: #F26426;
      --logo-AC: #FA8A24;
      --logo-plus: #65C9D8;
      /* end logo colors */
      /* Top Bar Variables */
      --topbar-bg: #1f1f1f;
      --topbar-border: #f5f5f5;
      --topbar-lower-border: #444;
      --topbar-btn-bg: transparent;
      --topbar-btn-text: #f5f5f5;
      --topbar-btn-icon: #f5f5f5;
      --topbar-btn-text-hoover: #1f1f1f;
      --topbar-btn-icon-hoover: #1f1f1f;
      --topbar-btn-hover: #f5f5f5;
      --topbar-badge-bg: #dc3545;
      /* end of top bar colors */
      
      /* Bottom Bar Variables */
      --btnbar-bg: gray;
      --btn-text: black;
      --btn-toggle-color: cyan;
      --btn-toggle-hover-bg: yellow;
      --btn-toggle-hover-color: orange;
      /* End of bottom Bar colors */
      
      /* Main box colors */
      --layout-box-border: rgb(205, 202, 202);
      --layout-box-background: #f5f5f5;
      --layout-tilte-text: black;
      /* End of Main box colors */
    }

    /*
      Theme overrides: replace Bootstrap primary blue with green (and use gray as secondary)
      This affects buttons, badges, alerts, links, and text utility classes across the front.
    */
    :root {
      /* Primary switched to green */
      --bs-primary: #38a169;               /* base green */
      --bs-primary-rgb: 56,161,105;        /* rgb for shadows/rings */
      --bs-primary-text-emphasis: #276749; /* deep green */
      --bs-primary-bg-subtle: #e6f4ea;     /* light green bg */
      --bs-primary-border-subtle: #c7e8d3; /* subtle green border */

      /* Links to green */
      --bs-link-color: #38a169;
      --bs-link-hover-color: #2f855a;

      /* Focus ring tint to green */
      --bs-focus-ring-color: rgba(56,161,105, .25);
    }

    /* Button primary to green shades */
    .btn-primary {
      --bs-btn-bg: #38a169;
      --bs-btn-border-color: #38a169;
      --bs-btn-hover-bg: #2f855a;
      --bs-btn-hover-border-color: #2f855a;
      --bs-btn-focus-shadow-rgb: 56,161,105;
      --bs-btn-active-bg: #276749;
      --bs-btn-active-border-color: #276749;
      --bs-btn-disabled-bg: #38a169;
      --bs-btn-disabled-border-color: #38a169;
    }

    /* Outline primary to green */
    .btn-outline-primary {
      --bs-btn-color: #38a169;
      --bs-btn-border-color: #38a169;
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #38a169;
      --bs-btn-hover-border-color: #38a169;
      --bs-btn-focus-shadow-rgb: 56,161,105;
      --bs-btn-disabled-color: #38a169;
      --bs-btn-disabled-border-color: #38a169;
    }

    /* Badges that rely on text-bg-primary */
    .badge.text-bg-primary {
      background-color: #38a169 !important;
      color: #fff !important;
    }

    /* Alerts primary to subtle green */
    .alert-primary {
      --bs-alert-color: #0f5132;
      --bs-alert-bg: #e6f4ea;
      --bs-alert-border-color: #c7e8d3;
    }

    /* Utility text color */
    .text-primary { color: #38a169 !important; }

    /* Reduce remaining blue tints on inputs focus */
    .form-check-input:focus,
    .form-control:focus,
    .form-select:focus,
    .form-range:focus {
      box-shadow: 0 0 0 .25rem rgba(56,161,105,.25) !important;
      border-color: #93d4b2 !important;
    }

    /* Pagination active state to green */
    .page-item.active .page-link {
      background-color: #38a169 !important;
      border-color: #38a169 !important;
      color: #fff !important;
    }

    .page-link:focus {
      box-shadow: 0 0 0 .25rem rgba(56,161,105,.25) !important;
    }