@import "theme-default.css";
@import "theme-dark.css";
@import "theme-red.css";
@import "theme-blue.css";
@import "theme-darkred.css";
@import "theme-smart.css";
@import "theme-smart-glass.css";

/*========================================
Base Body & Global Styles in my custom app
========================================*/
body {
  background-color: var(--sa-body-color);
  font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
  color: #eaf4ff;
  padding-top: 56px; /* Space for fixed navbar */
}
body.saglass {
    background-image: var(--body-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    color: #eaf4ff;
    padding-top: 56px; /* Space for fixed navbar */
}
.loader-text{
  color: var(--sa-h2-color);
}
/*
.dropdown.aiconDiv{
  border-left: 0px solid;
}
.dropdown.aiconDiv{
  border-left: 0px solid;
}
.dropdown.aiconDiv:hover{
  border-left: 0px solid;
}*/
.btn.dropdown-toggle.aicon{
  border: 2px solid var(--sa-notification-border) !important;
  background-color: transparent;
}
.dropdown-toggle.aicon::after {
  display: none !important;
}
.btn.dropdown-toggle.aicon i.fa{
  color: var(--sa-notification-icon) !important;
} 
.table-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1040; /* LOWER than modal */
    background: #fff;
    margin: 0 !important;
    border-radius: 0;
    overflow: auto;
}
.sa-core-color{
  color: var(--sa-accent);
}
.sa-table-action-color{
  color: var(--sa-ta-text);
}

.glass {
  backdrop-filter: blur(var(--sa-glass-blur, 0px))
                   saturate(var(--sa-glass-saturate, 100%));
  -webkit-backdrop-filter: blur(var(--sa-glass-blur, 0px))
                           saturate(var(--sa-glass-saturate, 100%));
}

h2{
	color: var(--sa-h2-color);
}
h4{
	color: var(--sa-h4-color);
}
/* Hide table cells on small devices */
.hide-sm-td {
    display: none;
}
.show-sm-td {
    display: block;
}
/* Show again on md and larger screens */
@media (min-width: 768px) {
    .hide-sm-td {
        display: table-cell;
    }
    .show-sm-td {
      display: none;
    white-space: nowrap;
}
}


/*========================================
Login & Reg Styles
========================================*/
.bg-sa-login-reg-body{
  background-color: var(--sa-login-reg-body-bg) !important;
}
.bg-sa-login-reg-text{
  color: var(--sa-login-reg-text) !important;
}

/*========================================
Colors Styles
========================================*/
.text-transparent {
color: transparent !important;
}
.text-light-gray{
color: #BBB !important;
}
.text-pale-gray{
color: #ccc;
}



/*========================================
Borders Styles
========================================*/
/* Override Bootstrap's .border-bottom */
.border-bottom {
border-bottom: 1px solid grey !important; /* your custom color and thickness */
}



/*========================================
Margin Styles
========================================*/
.slim-top {
margin-top: -0.3em;
margin-bottom: 0.2em;
}



/*========================================
Buttons Styles
========================================*/




/*========================================
Topbar Styles
========================================*/
.w-13{
  width: 13em;
}
/* Custom Topbar Background */
.bg-sa-topbar { 
	background: linear-gradient(to bottom, var(--sa-topbar-grad-start) 0%, 
			    var(--sa-topbar-grad-end) 100%);
    color: var(--sa-topbar-text);
    border-bottom: var(--sa-topbar-border-bottom);
}
.color-sa-topbar {
	color: var(--sa-topbar-text);
}
/* Default = desktop */
.nt-dropdown-shift {
  position: absolute;
  left: 9em;
width: 350px; /* or whatever fixed width you want */
  min-width: 200px; /* optional to avoid too small */
  white-space: normal; /* allow text to wrap */
}
/* Mobile */
@media (max-width: 991.98px) {
.nt-dropdown-shift {
position: absolute !important;
left: -0.5em !important;
}
}
.nt-offset-left{
margin-left: -8px;
}
.nt-avatar-btn{
width:31px; height:31px;
}
.nt-badge{
font-size:0.75rem; 
background-color:#a90329 !important; 
color:white; top: -6px; 
right: -7px;
}


/* Custom nav-link styling */
.custom-nav-link {
  background-color: var(--sa-topbar-grad-start);      /* default color for all tabs */
  color: var(--sa-accent);
  border: 0px solid transparent;
  border-radius: 0em !important;
  margin-right: 0.25rem;      /* spacing between tabs */
  transition: background-color 0.2s;
}

/* Hover effect */
.custom-nav-link:hover {
  background-color: var(--sa-topbar-grad-start);
  color: var(--sa-accent);
  border: 0px solid transparent;
  border-color: transparent !important;
}

/* Active tab */
.custom-nav-link.active {
  background-color: transparent !important; /* active tab color */
  border-color: transparent !important;
  border-radius: 0em;
  border-style: solid;
  color: var(--sa-accent);
}

.custom-dropdown-box {
  background-color: var(--sa-custom-dropdown-bg); 
  position: fixed; left: 1em; 
  top: 50px; 
  width: 25em; max-width: 90vw; 
  height: 30em; max-height: 70vh;
  border: 1.5px solid transparent;
}
.custom-dropdown-bg {
  background-color:var(--sa-custom-dropdown-box-bg);
}
.custom-dropdown-nav-bg {
  background-color: var(--sa-custom-dropdown-bg);
  border-bottom: 1px solid var(--sa-custom-dropdown-bg) !important;
}
/*Small Phones*/
@media (max-width: 480px) {
  .custom-dropdown-box {
    left: 1em; 
    width: 100vw;
    top: 50px;
    max-height: 75vh;
    border-radius: 10px;
  }
}


.custom-caret-up{
  position: absolute;
  top: -15px;
  left: 45.7%;
  transform: translateX(-50%);
  color: var(--sa-accent);
}
/*Small Phones*/
@media (max-width: 480px) {
  .custom-caret-up{
    left: 57%;
}
}
.nt-dropdown-arrow{
width: 12px;
height: 12px;
background-color: var(--sa-custom-dropdown-bg);
top: -3px;
left: 51.5%;
transform: translateX(-50%) rotate(45deg);
z-index: 1;
box-shadow: -1px -1px 2px rgba(0,0,0,0.1);
}
/*Small Phones*/
@media (max-width: 480px) {
  .nt-dropdown-arrow {
    width: 12px;
    height: 12px;
    background-color: var(--sa-custom-dropdown-bg);
    top: -12px;
    left: 62.5%;
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
    box-shadow: -1px -1px 2px rgba(0,0,0,0.1);
  }
}

.nt-scrollable{
max-height: 300px; overflow-y: auto;
}
.search-wrapper{
width: 220px;
}
.search-input{
border: 1px solid #ccc; border-radius: 0;
max-width: 250px;
}
.search-icon{
top: 50%; right: 10px; transform: translateY(-50%); color: #6c757d; pointer-events: none;
}




/*========================================
Top Horizontal Menu Styles
========================================*/
.bg-sa-tophmenu{
background: linear-gradient(
  to right,
  var(--sa-grad-dark-main) var(--sa-grad-main-stop),
  var(--sa-grad-dark-edge) var(--sa-grad-edge-stop)
);
}
.navbar {
padding-top: 0.3rem;   /* default is 0.5rem or 1rem */
padding-bottom: 0.3rem;
min-height: 40px;       /* optional: set minimum height */
}
/* Top horizontal navbar dropdowns */
.top-horizontal-menu{
padding: 0em; border-bottom: 1px solid #222; min-height: 0px;
}
#topHorizontalMenu .dropdown-menu {
background-color: #343a40 !important; /* dark background */
border: none !important;
}
#topHorizontalMenu .dropdown-menu .dropdown-item {
color: #e0e0e0 !important; /* light text */
}
#topHorizontalMenu .dropdown-menu .dropdown-item:hover {
background-color: rgba(255,255,255,0.1) !important; /* subtle hover */
color: white !important;
}
/* Plus / minus icons (if you clone them) */
#topHorizontalMenu .dropdown-toggle i {
color: #e0e0e0; /* make icons visible */
}
/* Multi-level dropdowns ONLY in top horizontal menu */
#topHorizontalMenu .dropdown-submenu {
position: relative;
}
#topHorizontalMenu .dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
}
#topHorizontalMenu .dropdown:hover > .dropdown-menu,
#topHorizontalMenu .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
#topHorizontalMenu .dropdown-menu {
opacity: 0;
transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease;
pointer-events: none;
padding: .25rem 0;
}
#topHorizontalMenu .dropdown:hover > .dropdown-menu,
#topHorizontalMenu .dropdown-submenu:hover > .dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#topHorizontalMenu .dropdown-submenu > .dropdown-menu .dropdown-item {
padding-left: 1.5rem;
}
#topHorizontalMenu .dropdown-submenu > a::after {
content: "›";
float: right;
opacity: .6;
}
#topHorizontalMenu .dropdown-submenu::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 10px;
height: 100%;
}
#topHorizontalMenu .dropdown-item:hover {
background-color: rgba(0,0,0,.04);
}
#topHorizontalMenu .dropdown-item.active,
#topHorizontalMenu .dropdown-item:active {
background-color: rgba(13,110,253,.12);
color: #0d6efd;
font-weight: 500;
}
#topHorizontalMenu .dropdown-divider {
margin: .35rem 0;
}
/* Mobile fallback */
@media (max-width: 991px) {
#topHorizontalMenu .dropdown-menu {
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
}
#topHorizontalMenu .dropdown-submenu > .dropdown-menu {
margin-left: 1rem;
}
}
#topHorizontalMenu.disable-hover .dropdown:hover > .dropdown-menu,
#topHorizontalMenu.disable-hover .dropdown-submenu:hover > .dropdown-menu {
display: none !important;  /* Ignore hover while collapsing */
opacity: 0 !important;
pointer-events: none !important;
}
/* Top-level dropdown parent link border */
.dropdown {
position: relative;
border-left: 1px solid grey;
/*border-left: 2px solid #dee2e6;*/
border-top: none;
border-bottom: none;
}
.dropdown:hover {
position: relative;
border-left: 1px solid grey;
/*border-left: 2px solid #dee2e6;*/
border-top: none;
border-bottom: none;
/*background-color: white;*/
color: black;
}
/* Icon */
/* Extra-large devices only */
@media (min-width: 1200px) {
/* Remove border-radius from all dropdown menus */
#topHorizontalMenu .dropdown-menu {
border-radius: 0 !important;
}
/* Optional: remove border-radius from individual links too (dropdown items) */
#topHorizontalMenu .dropdown-menu a.dropdown-item {
border-radius: 0 !important;
}
/* === Parent hover === */
#topHorizontalMenu a.nav-link.link-hover {
background-color:white !important; /* white background */
color: #000000 !important;           /* black text */
}
#topHorizontalMenu a.nav-link.link-hover i {
color: #000000 !important;           /* black icon */
}
/* === Level 1 dropdown background when parent is hovered === */
#topHorizontalMenu a.nav-link.link-hover + .dropdown-menu {
background-color: white !important; /* white background */
}
/* === Level 1 dropdown items default (black text & icon) === */
#topHorizontalMenu a.nav-link.link-hover + .dropdown-menu > li > a.dropdown-item {
color: #000000 !important;
}
#topHorizontalMenu a.nav-link.link-hover + .dropdown-menu > li > a.dropdown-item i {
color: #000000 !important;
}
/* === Level 1 dropdown items hover individually === */
#topHorizontalMenu a.nav-link.link-hover + .dropdown-menu > li > a.dropdown-item:hover {
background-color: white !important; /* light gray bg on hover */
color: #000000 !important;             /* black text */
}
#topHorizontalMenu a.nav-link.link-hover + .dropdown-menu > li > a.dropdown-item:hover i {
color: #000000 !important;             /* black icon */
}
/* Hover on level 1 children */
#topHorizontalMenu > li > .dropdown-menu > a.dropdown-item:hover {
background-color: white !important; /* light gray */
color: #1a73e8 !important;            /* blue text */
}
#topHorizontalMenu > li > .dropdown-menu > a.dropdown-item:hover i {
color: #1a73e8 !important;            /* blue icon */
}
/* === Level 2 dropdown (nested inside level 1) === */
#topHorizontalMenu .dropdown-menu .dropdown-menu {
background-color: white !important; /* slightly darker white */
}
#topHorizontalMenu .dropdown-menu .dropdown-menu a.dropdown-item {
color: #222222 !important;            /* dark gray text */
}
#topHorizontalMenu .dropdown-menu .dropdown-menu a.dropdown-item i {
color: #222222 !important;            /* dark gray icon */
}
/* Hover on level 2 children */
#topHorizontalMenu .dropdown-menu .dropdown-menu a.dropdown-item:hover {
background-color: #f4f4f4 !important; /* gray */
color: #d84315 !important;            /* red text */
}
#topHorizontalMenu .dropdown-menu .dropdown-menu a.dropdown-item:hover i {
color: #d84315 !important;            /* red icon */
}
/* === Level 3 dropdown (nested inside level 2) === */
#topHorizontalMenu .dropdown-menu .dropdown-menu .dropdown-menu {
background-color: #f4f4f4 !important; /* light gray */
}
#topHorizontalMenu .dropdown-menu .dropdown-menu .dropdown-menu a.dropdown-item {
color: #333333 !important;            /* dark gray */
}
#topHorizontalMenu .dropdown-menu .dropdown-menu .dropdown-menu a.dropdown-item i {
color: #333333 !important;            /* dark gray icon */
}
/* Hover on level 3 children */
#topHorizontalMenu .dropdown-menu .dropdown-menu .dropdown-menu a.dropdown-item:hover {
background-color: #f4f4f4 !important; /* darker gray */
color: #4a148c !important;            /* purple text */
}
#topHorizontalMenu .dropdown-menu .dropdown-menu .dropdown-menu a.dropdown-item:hover i {
color: #4a148c !important;            /* purple icon */
}
}
/*End Extra-large devices only */
/* Smooth transitions for all links */
#topHorizontalMenu a.nav-link,
#topHorizontalMenu .dropdown-menu a.dropdown-item {
transition: background-color 0.15s ease, color 0.15s ease;
}





/*========================================
Side Bar Styles
========================================*/
.bg-sa-sidebar{
background: linear-gradient(
  to right,
  var(--sa-grad-dark-main) var(--sa-grad-main-stop),
  var(--sa-grad-dark-edge) var(--sa-grad-edge-stop)
);
}


@media (max-width: 991.98px) {
.offcanvas-start {
width: 250px !important;
top: 56px; /* Push sidebar below topbar */
}
}
/* Collapsed sidebar */
.sidebar-collapsed {
width: 0 !important;
overflow: hidden;
transition: width 0.3s;
}
#sidebar {
background-color: var(--sa-dark);
}
#sidebar .nav-link {
color: #e0e0e0 !important;
}
#sidebar .nav-link:hover {
color: white !important;
}
#sidebar .nav-link.active {
color: white !important;
font-weight: bold; /* makes the active link bold */
position: relative; /* needed for the indicator */
/*background-color: rgba(255, 255, 255, 0.1);*/ /* optional: subtle highlight */
}
/* Right-side slanted triangle */
#sidebar .nav-link.active::after {
content: "";
position: absolute;
right: 0;           /* touch the far right edge */
top: 50%;           /* center vertically */
transform: translateY(-50%) rotate(180deg); /* center + slant */
width: 10px;        /* width of the triangle */
height: 10px;       /* height of the triangle */
background-color: white; /* triangle color, change to your theme */
clip-path: polygon(0 0, 100% 50%, 0 100%); /* makes a right-pointing triangle */
}
/* Anchor for vertical tree lines */
.level1 > .nav.flex-column {
position: relative;
padding-left: 2.75rem; /* space for line + text */
}
/* Vertical line aligned with parent icon (fa-fw center) */
.level1 > .nav.flex-column::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 1.7rem;   /* 🔥 moved slightly right = icon center */
width: 2px;
background: rgba(255, 255, 255, 0.3);
}
/* Horizontal connector that TOUCHES the vertical line */
.level1 > .nav.flex-column > .nav-item {
position: relative;
}
/* Horizontal connector that TOUCHES the vertical line */
.level1 > .nav.flex-column > .nav-item::before {
content: "";
position: absolute;
top: 1.25rem; /* 🔥 fixed offset from top of UL, adjust to match icon center */
left: -1rem; /* 🔥 pulls line back to vertical line */
width: 0.8rem;
height: 1px;
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%);
}
/* Optional: hover effect */
.nav-link:hover {
background-color: rgba(255,255,255,0.1);
}
/* Parent links (top-level / collapsible) */
.nav-link[data-bs-toggle="collapse"]:hover {
background-color: transparent !important; /* no background change */
color: #fff !important; /* just change text color if you like */
}
/* Child links (inside collapse) */
.collapse .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1) !important; /* background change */
color: #fff !important; /* text color change */
}
.sidebar-minify-wrapper {
position: absolute;
top: 90%;
left: 200px; /* sidebar width */
transform: translateY(-50%);
cursor: pointer;
z-index: 1001;
}
.sidebar-collapsed + .sidebar-minify-wrapper {
left: 0; /* moves arrow when sidebar is collapsed */
}
.sidebar-minify-wrapper i.hit {
position: relative;
z-index: 1;
}
.sidebar-minify-rect {
width: 40px;
height: 40px;
background-color: #454545;
border-radius: 2px;
position: absolute;
top: 50%;
left: -15px; /* rectangle behind icon */
transform: translateY(-50%);
z-index: 0;
}
/* Medium devices: 1330px–1363px */
@media (max-width: 1363px) and (min-width: 1330px) {
.sidebar-minify-wrapper {
left: 180px; /* adjust to sidebar width */
top: 88%;
}
.sidebar-collapsed + .sidebar-minify-wrapper {
left: 0;
}
}
/* Medium devices: 992px–1363px */
@media (max-width: 1363px) {
.sidebar-minify-wrapper {
left: 140px; /* shift closer to sidebar (adjust width) */
top: 85%;    /* slightly lower */
}
.sidebar-collapsed + .sidebar-minify-wrapper {
left: 0;
}
}
/* Small devices: <992px */
@media (max-width: 991px) {
.sidebar-minify-wrapper {
left: 10px;   /* always visible near screen edge */
top: auto;
bottom: 20px; /* near bottom of screen */
transform: none;
}
.sidebar-minify-rect {
left: 0;
}
}
/* When top menu is active, hide sidebar controls */
body.menu-top-active #sidebarControls {
display: none !important;
}
/* Hide the whole toggler div by default */
#navbarTogglerControls {
display: none !important;
}
/* Show only when top menu is active (body has menu-top-active) and small screens */
body.menu-top-active #navbarTogglerControls {
display: block !important;
}
/* Apply to all nav links, including dropdown toggles */
.navbar-nav .nav-link,
.navbar-nav .dropdown-item {
transition: all 0.3s ease;
}
/* Optional: arrows inside links */
.navbar-nav .nav-link:hover .dropdown-arrow,
.navbar-nav .dropdown-item:hover .dropdown-arrow,
.navbar-nav .dropdown-toggle:hover .dropdown-arrow {
color: #000 !important;
}
.navbar-toggler-custom {
border-radius: 2px;
cursor: default !important;
display: inline-block;
font-weight: 700;
height: 30px;
line-height: 24px;
min-width: 30px;
padding: 2px;
text-align: center;
text-decoration: none !important;
-moz-user-select: none;
-webkit-user-select: none;
background-color: #f8f8f8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
border: 1px solid #bfbfbf;
color: #6D6A69;
font-size: 17px;
/*padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
font-size: var(--bs-navbar-toggler-font-size);
line-height: 1;
color: var(--bs-navbar-color);
background-color: transparent;
border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
border-radius: var(--bs-navbar-toggler-border-radius);
transition: var(--bs-navbar-toggler-transition);*/
}
a.userdropdown img {
width: 30px;
margin-left: 2px;
border-radius: 3px;
border: 1px solid #797979 !important;
}
.sidebar_user{
width: 25px;
height: auto;
display: inline-block;
vertical-align: middle;
margin-top: -1px;
margin-right: 5px;
margin-left: 0;
}
#userMenu{
	border-bottom: var(--sa-usermenu-border-bottom) !important;
}
#userMenu a span {
color: #c0bbb7; /* example: yellow */
}





/*========================================
Main Content Styles
========================================*/
.bg-sa-main-content{ 
background-color: var(--sa-page-bg);
background-image: var(--sa-page-bg-image);
}

.main-content-expanded {
margin-left: 0 !important;
transition: margin-left 0.3s;
}





/*========================================
Breadcrumbs Styles
========================================*/
.bg-sa-breadcrumb {
  background-color: var(--sa-breadcrumb-bg);
  border-top: var(--sa-breadcrumb-border-top-color);
  border-bottom: var(--sa-breadcrumb-border-bottom-color);
  font-size: 13px;
  padding-bottom: 12.1px !important;
}
.bg-sa-breadcrumb-text{
  color: var(--sa-breadcrumb-text);
}
.bg-sa-breadcrumb-icon {
  background-color: var(--sa-breadcrumb-icon-bg);
  padding: 0 var(--sa-breadcrumb-icon-pad-x);
}

.breadcrumb > li + li::before {
content: ">\00a0";
padding: 0 5px;
color: #ccc;
}


/*========================================
Modal Styles
========================================*/
.bg-sa-modal-content {
  background-color: var(--sa-modal-content-bg); /* default white, can override with variable */
}
.bg-sa-modal-header {
  background-color: var(--sa-modal-header-bg); 
  color: var(--sa-modal-header-text);
  border-bottom: 2px solid var(--sa-modal-header-bottom-color);
}
.bg-sa-modal-card {
  background-color: var(--sa-modal-card-bg); 
  color: var(--sa-modal-text);
}
.color-sa-btn-close{
  background-color: var(--sa-btn-close-text) !important;
}

/*========================================
Gear vertical panel Styles
========================================*/
.gear-wrapper {
position: relative; /* needed for absolute child positioning */
}
.gear-panel {
position: absolute;
top: 120%; /* below badge */
right: 0;   /* align to right edge of badge */
width: 140px;
background-color: #F5E093;
border-radius: 0.3rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
overflow: hidden;
z-index: 100;
text-align: center;
display: none; /* hidden by default */
}
.gear-panel.show {
display: block;
}
/* Top pointer triangle */
.gear-panel-top {
width: 20px;
height: 20px;
background-color: #F5E093;
position: absolute;
top: -10px;
right: 10px;
transform: rotate(45deg);
}
/* Panel content */
.gear-panel-content p {
margin: 0.5rem 0;
cursor: pointer;
}
/* Bottom gear */
.gear-panel-bottom {
padding: 0.3rem;
}
/* Optional: spinning reverse class if your Font Awesome doesn't have fa-spin-reverse */
.fa-spin-reverse {
animation: fa-spin 1s linear infinite reverse;
}
.fa-spin-reverse-x {
display: inline-block;
animation: fa-spin 1s linear infinite reverse;
}
.gear-badge{
background-color: #F5E093; padding: 0.3em; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; cursor:pointer;
}
.gear-panel{
width: 220px;
}





/*========================================
Forms Styles
========================================*/
/* Target Select2 dropdown search input */
.select2-container {
width: 100% !important;
}
/* Fix z-index so it stays above the modal backdrop */
.select2-container--open {
z-index: 9999 !important;
padding: 0;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
/*Height of the select word e.g., select an option...*/
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 38px;
}
/*Height of the container*/
.select2-container .select2-selection {
border-radius: 0 !important;
border: 2px solid #ced4da !important;
transition: border-color 0.2s ease;
height: calc(2.5rem + 1px) !important;
/*height: calc(2.5rem + 11px) !important;*/
}
/* Fix for Select2 in Bootstrap Input Groups */
.input-group > .select2-container--bootstrap-5 {
flex: 1 1 auto;
padding: 0.75rem 1rem;
font-size: 1rem;
}
/*Tool Tip for form inputs*/
/*.custom-tooltip {
position: absolute;
background-color: black; 
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.675rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(-10px); 
z-index: 1000;
}*/
.custom-tooltip {
position: absolute;
background-color: var(--sa-custom-tooltip-bg); 
color: var(--sa-custom-tooltip-text);
padding: 1px 6px;
font-size: 0.775rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(4px); 
z-index: 1000;
top: 100%;
margin-top: 16px; 
}
.custom-tooltip.show {
opacity: 1;
transform: translateY(-16px); /* move tooltip up when visible */
}
/* Arrow */
.custom-tooltip .tooltip-arrow {
position: absolute;
width: 10px;
height: 10px;
background: var(--sa-custom-tooltip-bg);
transform: rotate(45deg);
bottom: -5px;  /* position at bottom of tooltip */
right: 8px;    /* shift arrow to right */
}
/* Responsive: Keep inside viewport */
@media (max-width: 576px) {
.custom-tooltip {
font-size: 0.75rem;
padding: 4px 8px;
}
.custom-tooltip .tooltip-arrow {
right: 4px;
}
}
/*End Tool Tip for form inputs*/
/* Make all form controls flat, no border radius */
.form-control,
.form-select,
.form-control-lg,
.form-control-color,
textarea.form-control {
border-radius: 0;
border: 2px solid #ced4da;     /* set bold border from start */
transition: border-color 0.2s ease;
box-shadow: none;
}
/* Hover (optional subtle hint) */
.form-control:hover,
.form-select:hover,
textarea.form-control:hover {
border-color: #999;
}
/* Focus: black bold border */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
border-color: #000;           /* strong black focus */
outline: none;
box-shadow: none;
}
/* Large inputs */
.form-control-lg {
padding: 0.75rem 1rem;
font-size: 1rem;
}
/* -----------------------
Select2 flat + black focus
------------------------*/
.select2-container:hover .select2-selection {
border-color: #999 !important;
}
.select2-container--bootstrap-5 .select2-selection--single:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
border-color: #000 !important; /* black focus */
box-shadow: none !important;
}


/*========================================
Tables Styles
========================================*/
.entries-select{
width:auto
}
.bg-table-action-row{
	background-color: var(--sa-ta-bg);
	color: var(--sa-ta-text);
	border-radius: 0;
}
.bg-table-search-panel{
	background-color: var(--sa-tsp-bg);
}
.bg-sa-modal-content {
  background-color: var(--sa-modal-content-bg); /* default white, can override with variable */
}

/* Table base */
.table {
  color: var(--table-text-color);
}

/* Header */
.table > thead > tr > th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-text-color);
  border-color: var(--table-border-color);
}

/* Body rows (TR) */
.table > tbody > tr {
  background-color: var(--table-row-bg) !important;
  transition: background 0.25s ease;
}
.table > tbody > tr:hover {
  background-color: var(--table-row-bg-hover) !important;
  color: var(--table-text-color);
  border-color: var(--table-border-color);
}

/* Body rows (CELLS, not TR) */
.table > tbody > tr > td {
  background-color: var(--table-row-bg) !important;
  color: var(--table-text-color);
  border-color: var(--table-border-color);
}

/* Optional hover */
#bootstrapTable tr.main-row {
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--table-border-color);
}

#bootstrapTable tr.collapse-row td {
  border: none; /* so it doesn’t double the border */
}

#bootstrapTable tr.collapse-row .p-3 {
  padding: 0.75rem 1rem; /* same as main row spacing */
}

/*========================================
Pagination Styles
========================================*/
.bg-table-pagination{
	background-color: var(--sa-pagination-bg);
	color: var(--sa-pagination-text);
	border-radius: 0;
}


/*========================================
Card Body Styles
========================================*/
.bg-sa-card {
  background-color: var(--sa-card-bg); /* default white, can override with variable */
  color: var(--sa-card-text);
  border-color: var(--sa-card-border-color);
}
.bg-sa-card-body {
  background-color: var(--sa-card-body-bg); /* default white, can override with variable */
  color: var(--sa-card-text);
  border-radius: inherit; /* inherit the card's rounded corners */
}
.bg-sa-card-header {
  background-color: var(--sa-card-header-bg); /* default white, can override with variable */
  color: var(--sa-card-text);
  border-bottom: 2px solid var(--sa-card-header-bottom-color);
}



/*========================================
Footer Styles
========================================*/
/* Optional: Fixed footer style */
.bg-sa-footer{
background: linear-gradient(
  to right,
  var(--sa-grad-dark-main) var(--sa-grad-main-stop),
  var(--sa-grad-dark-edge) var(--sa-grad-edge-stop)
);
}
#mainFooter.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1030; /* below top navbar */
}






/*========================================
Animation Styles
========================================*/
@keyframes myFlipInY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.animate-myFlipInY {
animation-name: myFlipInY;
animation-duration: 0.7s;      /* Adjust speed */
animation-timing-function: ease-out;
animation-fill-mode: forwards;  /* Keep the final state */
}
@keyframes myFlipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.animate-myFlipInX {
animation: myFlipInX 0.7s ease-out forwards;
transform-origin: top center; /* VERY IMPORTANT for dropdowns */
}






/*========================================
Other Styles
========================================*/
.dropdown-toggle {
border: none !important;
box-shadow: none !important; /* Optional: remove shadow if any */
}
.chart-body{
min-height:300px;
}