/* Styling background */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
	font-family: Inter;
	background-color: #ffffff;
}

.bg-custom-gradient {
  background: linear-gradient(45deg, #555555 0%, #bebebe 100%);
  color: white; /* Ensure text remains readable */
}

.navbar{
	background-color: #555555;
}

.dropdown-menu{
	background-color: #fefefa;
}

.sidebar {
	background-color: #dcdcdc; 
}

.sidebar a {
	color: #ffffff;
}

.footerStyle a {
	color: #1b8bc6;
}

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
}

@media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
}

.img-thumbnailLogo{
	max-width: 75%;
	height: auto;
	background-color:  transparent;
	border:  none;
}

.img-thumbnailLogoLogin{
	max-width: 85%;
	height: auto;
	background-color:  transparent;
	border:  none;
}

.form-control, .center-text, .card-body, .card-header {
	text-align: center;
}

.card-header, .card-body {
	/* background-color: #1b8bc6; */
}

.card-header h5 {
	color: #ffffff;
	text-decoration: underline;
}

.card-body {
	color: #ffffff;
}

.nav-item a {
  color: #000000;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.nav-item.whiteText a {
	color: #ffffff !important;
}

a {
	color: #253529 !important;
}

/* Only affects buttons inside modals */
.modal .btn-primary {
    --bs-btn-bg: #555555;
    --bs-btn-border-color: #555555;
    --bs-btn-hover-bg: #808080;
    --bs-btn-hover-border-color: #808080;
}

/* Changes progress bar color inside modals */
.modal .progress-bar {
    --bs-progress-bar-bg: #555555;
}
/* Dashboard Header */
.dashboardHeader {
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Cards for Dashboard */
stats-card {
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
}

.card-hover-primary:hover {
    background: linear-gradient(45deg, #1cc88a, #169a6b);
}

.card-hover-success:hover {
    background: linear-gradient(45deg, #4e73df, #224abe);
}

.card-hover-info:hover {
    background: linear-gradient(45deg, #36b9cc, #258391);
}

.card-hover-warning:hover {
    background: linear-gradient(45deg, #f6c23e, #dda20a);
}

.stats-card:hover .text-primary,
.stats-card:hover .text-success,
.stats-card:hover .text-info,
.stats-card:hover .text-warning,
.stats-card:hover .text-danger,
.stats-card:hover .text-muted,
.stats-card:hover .card-title {
    color: white !important;
}

.icon-circle {
    height: 60px;
    width: 60px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(0, 0, 0, .05);
    transition: all 0.3s ease;
}

.stats-card:hover .icon-circle {
    background: rgba(255, 255, 255, .2);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 10px 0;
}

.progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .05);
}

.progress-bar {
    border-radius: 4px;
}

.stat-change {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

.trend-icon {
    font-size: 0.8rem;
}

.mini-chart {
    height: 50px;
    margin-top: 10px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.chart-bar {
    flex: 1;
    background: rgba(0, 0, 0, .05);
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
}

.stats-card:hover .chart-bar {
    background: rgba(255, 255, 255, .2);
}