/* MAIN */
@import url(https://fonts.bunny.net/css?family=roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i);


/* OVERRIDE BOOTSTRAP DEFAULT COLORS CSS */
:root {
    /* Main theme colors */
    --bs-primary: #ea9d3e;      /* primary color */
    --bs-secondary: #6c757d;    /* secondary color */
    --bs-success: #28a745;      /* success color */
    --bs-danger: #dc3545;       /* danger color */
    --bs-warning: #ffc107;      /* warning color */
    --bs-info: #5286b3;         /* info color */
    --bs-light: #f8f9fa;        /* light color */
    --bs-dark: #343a40;         /* dark color */

/* BUTTONS */
/* Buttons (bootstrap uses separate vars for btn backgrounds) */

    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #e5ac3f;
    --bs-btn-hover-border-color: #e5ac3f;
    --bs-btn-active-bg: #eec33d;
    --bs-btn-active-border-color: #eec33d;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);

}

/* Optional: target all .btn-* to use the updated colors */
.btn-primary {
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: #e5ac3f !important;
    --bs-btn-hover-border-color: #eec33d !important;
    --bs-btn-active-bg: #eec33d !important;
    --bs-btn-active-border-color: #eec33d !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary) !important;
    --bs-btn-border-color: var(--bs-secondary) !important;
}

.btn-success {
    --bs-btn-bg: var(--bs-success) !important;
    --bs-btn-border-color: var(--bs-success) !important;
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger) !important;
    --bs-btn-border-color: var(--bs-danger) !important;
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning) !important;
    --bs-btn-border-color: var(--bs-warning) !important;
}

.btn-info {
    --bs-btn-bg: var(--bs-info) !important;
    --bs-btn-border-color: var(--bs-info) !important;
}

.btn-light {
    --bs-btn-bg: var(--bs-light) !important;
    --bs-btn-border-color: var(--bs-light) !important;
}

.btn-dark {
    --bs-btn-bg: var(--bs-dark) !important;
    --bs-btn-border-color: var(--bs-dark) !important;
}
/* END OVERRIDE BOOTSTRAP DEFAULT COLORS CSS */




/* START CORE */
/* MAIN */
html {
    font-family: 'Roboto', sans-serif;
    font-size: 1.0rem;
}

body {
    background-color: #f9fafb;
    font-size: 1.0rem;
}

/* SIDEBAR */
.sidebar {
    width: 240px;
    background-color: #312f17;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    overflow-y: auto;
    padding-bottom: 1rem;
    transition: transform 0.3s ease;
}

.sidebar .brand {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);

    position: sticky; /* <-- make sticky */
    top: 0;           /* stick to top of sidebar */
    z-index: 10;      /* stay above sidebar links */
    background-color: #312f17;
}

.sidebar .nav-link {
    color: #d6d5c4;
    padding: 0.6rem 1rem;
    border-radius: 0.375rem;
    font-weight: 400;
    font-size: 0.85rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
}

/* Rotate chevron when submenu is open */
.nav-link.collapsed .chevron {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.nav-link:not(.collapsed) .chevron {
    transform: rotate(90deg); /* points down */
}


/* NAVBAR */
.topbar,
.content {
    margin-left: 240px;
    height: 58px;
}

.topbar {
    z-index: 1030; /* above content */
    background-color: #ea9d3e !important; /* changed from bg-white */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* subtle shadow below the navbar */
}


/* CONTENT */
.content {
    padding-top: 3rem;
    padding-bottom: 60px; /* slightly more than footer height */
    padding-left: 3rem;
    padding-right: 3rem;
}


/* FOOTER */
.footer {
    position: fixed;
    bottom: 0;
    left: 240px; /* leaves space for sidebar */
    right: 0;
    height: 50px;
    background-color: #ffffff; /* white background */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08); /* subtle top shadow */
    z-index: 1030;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    color: #6b7280; /* text color */
}

/* BACK TO TOP OF PAGE */
#backToTop {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* END CORE */






/* CUSTOM USER INTERFACE COMPONENTS */
/* AVATAR */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}


/* CARDS */
.card {
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
}
.card-header {
  background-color: #cccccc;
}
.card-title {
  font-weight: 700;
  text-transform: uppercase;
}


/* NOTIFICATION RED DOT */
.dropdown a .bg-danger {
    width: 8px;
    height: 8px;
}


/* MODAL */
.modal {
  --bs-backdrop-opacity: 0.8;
}
.modal-backdrop {
  backdrop-filter: blur(4px);
}
.modal-backdrop.show {
  opacity: 0.75;
}


/* PROGRESS BAR */
.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}
.progress-bar {
  background-color: var(--bs-progress-bar-bg);
}


/* STAT ICON */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}




/* MOBILE */
@media (max-width: 991.98px) {
    .sidebar {
    transform: translateX(-100%);
    }

    .sidebar.show {
    transform: translateX(0);
    }

    .topbar,
    .content {
    margin-left: 0;
    }
    .footer {
    left: 0;
    }
}