/* ================================
   Layout
   ================================ */
@import url('layout.css');

/* ================================
   Sidebar
   ================================ */
@import url('sidebar.css');

/* ================================
   Card styles
   ================================ */
@import url('card.css');

/* ================================
   Print styles
   ================================ */
@import url('print.css');

/* ================================
   Dark Mode Styles & Transitions
   ================================ */

/* Smooth transition for main elements */
body,
.topbar,
.pagebar,
footer,
.card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode body & elements */
body.dark-mode {
    background: #0b1220;
}

body.dark-mode .topbar,
body.dark-mode .pagebar,
body.dark-mode footer,
body.dark-mode .card {
    background: #0f1a2e !important;
    color: rgba(255,255,255,.88);
    border-color: rgba(255,255,255,.10) !important;
}

body.dark-mode .text-muted {
    color: rgba(255,255,255,.62) !important;
}

/* ================================
   Dark Mode Toggle Button
   ================================ */
#darkModeToggle i {
    transition: transform 0.3s ease, color 0.3s ease;
}

body.dark-mode #darkModeToggle {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff; /* icon color */
    border-color: rgba(255,255,255,0.2);
}

body.dark-mode #darkModeToggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Optional: rotate icon slightly in dark mode */
body.dark-mode #darkModeToggle i {
    transform: rotate(20deg);
}

#darkModeToggle:hover i {
    transform: rotate(0deg);
}

.breadcrumb a {
    color: #0d6efd;
    font-weight: 500;
}

.breadcrumb a:hover {
    text-decoration: underline;
}