:root {
    /* --font-family-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
    --primary-color: #655746;
    --primary-light: #8a745b;
    --primary-dark: #524434;
    --primary-alt: #524434;  
    --secondary-color: #000000;
    --primary-hover-color: #655746;
    --secondary-hover-color: #000000;


    --sidebar-color: var(--secondary-color);
    --sidebar-text-color: var(--white);
    --sidebar-text-color: var(--gray);
    --sidebar-active-color: var(--primary-dark);
    --sidebar-active-text: var(--gray);
    --text-color: #333;
    --white: #fff;
    --gray:#eeeeee;
    --card-bg: #fff;
    --input-focus-shadow: rgba(0, 137, 123, 0.25);

    /* Teal with transparency */
    /* Bootstrap Utility Colors (Keeping standard definitions) */
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    /* Dashboard Navigation Specifics */
    --dnav-text-color: var(--secondary-color);
    --dnav-hover-color: var(--white);
    --bs-border-color:#dee2e6;
}


/* Global Modernizations */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    color: var(--text-color);
}

/* Add a smooth transition for all interactive elements */
a,
.btn,
.sidebar li,
.form-control {
    transition: all 0.3s ease-in-out;
}
.header {
    background: linear-gradient(130deg, var(--primary-light) 0%, var(--primary-color) 50%, var(--primary-dark) 100%)!important;
}

.header .user-menu.nav>li>a{
    color:var(--sidebar-text-color)!important;
}
#toggle_btn .bar-icon span {
    background-color: var(--sidebar-text-color)!important;
}

body .header .has-arrow .dropdown-toggle:after{
    border-bottom: 2px solid var(--sidebar-text-color);
        border-right: 2px solid var(--sidebar-text-color);
        padding-left:5px!important;
    }

body .header .page-title-box h3{
    color:var(--sidebar-text-color)!important;
}

.menu-title{
    color:var(--sidebar-light-text-color)!important;
}

.sidebar-menu ul li.menu-title span:before{
    background: var(--primary-color)!important;
}

/* Sidebar base */
.sidebar {
    background-color: var(--sidebar-color) !important;
    color: var(--sidebar-text-color)!important;
}

.sidebar .sidebar-menu ul ul li a::before {
    content: none !important;
    background: none !important;
}

.sidebar .sidebar-menu ul ul li a{
    padding: 5px 10px 5px 35px!important;
}

.sidebar-menu .submenu li a,
.sidebar-menu li a {
    background: var(--sidebar-color) !important;
    color: var(--sidebar-text-color) !important;
}

.sidebar-menu .submenu li a:hover,
.sidebar-menu li a:hover{
    background: var(--sidebar-active-color) !important;
    color: var(--sidebar-active-text) !important;
}

.sidebar-vertical i::before {
    color: var(--sidebar-text-color) !important;
}
.sidebar-menu li a:hover i::before{
    color: var(--sidebar-active-text) !important;
}

.sidebar li.active a {
    background-color: var(--sidebar-active-color) !important;
    box-shadow: inset 4px 0 0 var(--sidebar-active-color) !important;
}
.sidebar li.active span,
.sidebar li.active i::before{
    color: var(--sidebar-active-text) !important;
}

.sidebar-menu ul ul{
    background-color: var(--sidebar-color)!important;
    max-width: 100%!important;
    border-radius: 0!important;
    padding: 0 !important;
}


/* Selection (Kept) */
::selection {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

::-moz-selection {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* --- Button Styles --- */
/* Primary Button */
.btn-primary, .account-btn {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active
 {
    background-color: var(--primary-hover-color) !important;
    border-color: var(--primary-hover-color) !important;
    color: var(--white) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    opacity: 0.65 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--secondary-hover-color) !important;
    border-color: var(--secondary-hover-color) !important;
    color: var(--white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    opacity: 0.65 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Outline Buttons (Primary & Secondary) */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--white) !important;
    background-color: var(--primary-hover-color) !important;
    /* Use hover color for fill */
    border-color: var(--primary-hover-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-secondary {
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--white) !important;
    background-color: var(--secondary-hover-color) !important;
    border-color: var(--secondary-hover-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Bootstrap Outline Classes Hover/Active Styles --- */
/* Success */
.btn-outline-success {
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: var(--white) !important;
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

/* Info */
.btn-outline-info {
    color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: var(--text-color) !important;
    /* Use dark text on light color for visibility */
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

/* Warning */
.btn-outline-warning {
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: var(--text-color) !important;
    /* Use dark text on light color for visibility */
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

/* Danger */
.btn-outline-danger {
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: var(--white) !important;
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

/* --- Input & Form Styles --- */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.01rem var(--primary-color) !important;
    /* Modern focus ring */
}


/* --- Pagination --- */
.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--sidebar-text-color) !important;
}

.page-link:hover {
    color: var(--primary-hover-color) !important;
}

/* Global links except sidebar, dropdown, buttons, and .d-nav */
a:not(.sidebar-vertical a,
    .dropdown-menu a,
    .btn,
    .d-nav a) {
    /* color: var(--sidebar-text-color) !important; */
    text-decoration: none !important;
}

a:not(.sidebar-vertical a,
    .dropdown-menu a,
    .btn,
    .d-nav a):hover {
    color: var(--primary-hover-color) !important;
}

a.btn {
    color: var(--white) !important;
}

/* Badges */
.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

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

/* Outline Badges - Add hover for effect */
.bg-outline-primary {
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.bg-outline-primary:hover {
    color: var(--white) !important;
    background-color: var(--primary-hover-color) !important;
}

.bg-outline-secondary {
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

.bg-outline-secondary:hover {
    color: var(--white) !important;
    background-color: var(--secondary-hover-color) !important;
}

/* Default border for Select2 (like normal inputs) */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem;
    height: calc(1.5em + 0.75rem + 2px);
}

/* On focus, keep your primary color */
.select2-container--default.select2-container--focus .select2-selection--single {
    border: 1px solid var(--primary-color) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Search field inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-border-color) !important;
    outline: none !important;
}

/* On focus for search field */
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    border: 1px solid var(--primary-color) !important;
    border-radius: 0.375rem;
    box-shadow: none !important;
    outline: none !important;
}

/* Highlighted option background */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
}

/* Scrollbar thumb */
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--primary-color) !important;
}

.dropdown-item:active,
.dropdown-item:focus {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.custom_check input:checked~.checkmark,
.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* --- Other Components (Kept) --- */
.contact-nav li a:hover,
.contact-nav li a.active {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.contact-nav.nav a {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.notes-activity .note-download:hover {
    border-color: var(--primary-color) !important;
}

.error-page .main-wrapper .error-box h1 {
    color: var(--primary-color) !important;
}

.error-page .main-wrapper .error-box .btn-custom {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}

/* Primary buttons (keep as is) */
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary.show,
.btn-primary:first-child:active,
:not(.btn-check)+.btn-primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Secondary buttons */
.btn-check:checked+.btn-secondary,
.btn-secondary.active,
.btn-secondary.show,
.btn-secondary:first-child:active,
:not(.btn-check)+.btn-secondary:active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.note-dropdown-menu a {
    color: var(--primary-color) !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

/* Navbar Links */
.nav-link {
    color: var(--text-color);
    transition: color 0.3s, background-color 0.3s;
}

.nav-link:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 600;
    padding-bottom: 0;
    box-shadow: inset 0 -2px 0 var(--primary-color);
}

.navbar .btn-primary,
.navbar .btn-outline-primary {
    transition: all 0.3s ease;
}

.navbar .btn-primary:hover,
.navbar .btn-outline-primary:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: #fff;
}

/* Optional: secondary nav links */
.navbar .nav-link-secondary {
    color: var(--secondary-color);
}

.navbar .nav-link-secondary:hover {
    color: var(--secondary-hover-color);
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

#navbar-sticky .bg-dark {
    font-size: 0.85rem;
}

.sticky-top.shadow {
    transition: all 0.3s ease;
    z-index: 1030;
}

.logo-text {
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
}

.navbar-brand,
.logo-text {
    letter-spacing: 1px;
}

/* Primary Text */
.text-primary {
    color: var(--primary-color) !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-primary:hover,
.text-primary:focus {
    color: var(--primary-hover-color) !important;
    cursor: pointer;
}

.text-primary.active {
    color: var(--primary-hover-color) !important;
    font-weight: 600;
}

/* Secondary Text */
.text-secondary {
    color: var(--secondary-color) !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-secondary:hover,
.text-secondary:focus {
    color: var(--secondary-hover-color) !important;
    cursor: pointer;
}

.text-secondary.active {
    color: var(--secondary-hover-color) !important;
    font-weight: 600;
}

/* Success Text */
.text-success {
    color: var(--bs-success) !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-success:hover,
.text-success:focus {
    color: var(--bs-success) !important;
    cursor: pointer;
}

.text-info {
    color: var(--bs-info) !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-info:hover,
.text-info:focus {
    color: var(--bs-info) !important;
    cursor: pointer;
}

/* Warning Text */
.text-warning {
    color: var(--bs-warning) !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-warning:hover,
.text-warning:focus {
    color: var(--bs-warning) !important;
    cursor: pointer;
}

.text-danger {
    color: var(--bs-danger) !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-danger:hover,
.text-danger:focus {
    color: var(--bs-danger) !important;
    cursor: pointer;
}


  .breadcrumb .breadcrumb-item.active {
      color: var(--primary-color);
  }


  .border.border-primary {
      border-color: var(--primary-color) !important;
  }
  .btn-block{
    width: 100% !important;
  }

  .activity-timeline .fw-medium a{
    color: var(--primary-color) !important;
  }

  a{
        color: var(--primary-color) !important;
  }
/* 
  .view-header{
    border-bottom: none !important;
    margin: 0 !important;
  } */

  .contact-tab-wrap{
    margin: 0 !important;
  }


  .contact-tab-view{
    border-radius: 0 !important;
    box-shadow: none !important;
  }

   .contact-tab-wrap {
       border-radius: 0 !important;
       box-shadow: none !important;
   }

   .contact-tab-wrap .contact-nav {
       display: flex;
       flex-wrap: nowrap;
       /* prevents wrapping on mobile */
       overflow-x: auto;
       /* allows horizontal scroll if too many tabs */
       -webkit-overflow-scrolling: touch;
       /* smooth scroll on iOS */
   }

   .contact-tab-wrap .contact-nav li {
       flex: 0 0 auto;
       /* keeps each tab from shrinking */
   }


   .header .user-menu.nav>li.flag-nav a.dropdown-toggle::before{
    background:var(--secondary-color)!important;
   }
.mandatory, .required{
    color:var(--bs-danger)!important;
}