/* Custom styles goes here */

/* Header navbar right alignment - fix gap issue */
.app-header {
    width: 100% !important;
    left: 0 !important;
}

.app-header .navbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.app-header .navbar-collapse {
    flex-grow: 0;
    margin-left: auto;
}

.app-header .navbar-nav {
    margin-left: 0 !important;
}

.timeline-widget .timeline-item {
    min-height: 40px !important;
}

.timeline-widget .timeline-item .timeline-desc {
    padding-top: 3px !important;
    padding-bottom: 0px !important;
}

.mb-2 {
    margin-bottom: 0.0rem !important;
}

.body-wrapper .body-wrapper-inner {
    min-height: calc(100vh - 123px) !important;
}

/* Sidebar toggle button styles */
.sidebar-toggle-container-bottom {
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.sidebartoggler {
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebartoggler:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Brand logo adjustments */
.brand-logo {
    min-height: 60px;
    padding: 10px 20px;
    margin-top: 5px;
    margin-bottom: 0;
}

/* Reduce spacing between toggle and menu */
.sidebar-nav {
    margin-top: 0;
    padding-top: 5px;
}

/* Tablet mode - collapse sidebar to mini-sidebar instead of hiding */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Force sidebar to be mini-sidebar on tablets */
    #main-wrapper .left-sidebar {
        width: 80px !important;
        left: 0 !important;
        position: fixed !important;
        transition: width 0.2s ease-in;
    }

    /* Adjust body wrapper margin for collapsed sidebar */
    #main-wrapper .body-wrapper {
        margin-left: 80px !important;
        transition: margin-left 0.2s ease-in;
    }

    /* Adjust header width and position */
    #main-wrapper .app-header {
        width: calc(100% - 80px) !important;
        left: 80px !important;
        transition: width 0.2s ease-in, left 0.2s ease-in;
    }

    /* Brand logo adjustments - hide logo image */
    #main-wrapper .brand-logo {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px !important;
    }

    #main-wrapper .brand-logo .logo-img {
        display: none;
    }

    /* Center toggle button */
    #main-wrapper .sidebar-toggle-container-bottom {
        justify-content: center !important;
        padding-left: 0;
    }

    /* Hide menu text */
    #main-wrapper .hide-menu {
        display: none !important;
    }

    /* Center icons */
    #main-wrapper .sidebar-link {
        justify-content: center !important;
        padding: 10px !important;
    }

    /* Hide nav small caps */
    #main-wrapper .nav-small-cap {
        display: none;
    }

    /* Show toggle button on tablets */
    .sidebar-toggle-container-bottom {
        display: flex !important;
    }
}

/* Mini sidebar styles - work with the existing theme structure */
@media (min-width: 1200px) {
    /* Collapse the left sidebar when mini-sidebar class is applied */
    #main-wrapper.mini-sidebar .left-sidebar,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar {
        width: 80px !important;
        transition: width 0.2s ease-in;
    }

    /* Adjust body wrapper margin when sidebar is minimized */
    #main-wrapper.mini-sidebar .body-wrapper,
    #main-wrapper[data-sidebartype="mini-sidebar"] .body-wrapper {
        margin-left: 80px !important;
        transition: margin-left 0.2s ease-in;
    }

    /* Adjust header width when sidebar is minimized - ensure it fills the space */
    #main-wrapper.mini-sidebar .app-header,
    #main-wrapper[data-sidebartype="mini-sidebar"] .app-header {
        transition: width 0.2s ease-in, left 0.2s ease-in;
    }

    /* Full sidebar - adjust header */
    #main-wrapper[data-sidebartype="full"] .app-header {
        transition: width 0.2s ease-in, left 0.2s ease-in;
    }

    /* Brand logo adjustments when minimized */
    #main-wrapper.mini-sidebar .brand-logo,
    #main-wrapper[data-sidebartype="mini-sidebar"] .brand-logo {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px !important;
    }

    /* Center toggle button when minimized */
    #main-wrapper.mini-sidebar .sidebar-toggle-container-bottom,
    #main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-toggle-container-bottom {
        justify-content: center !important;
        padding-left: 0;
    }

    /* Hide logo image when minimized */
    #main-wrapper.mini-sidebar .brand-logo .logo-img,
    #main-wrapper[data-sidebartype="mini-sidebar"] .brand-logo .logo-img {
        display: none;
    }

    /* Hide menu text when minimized */
    #main-wrapper.mini-sidebar .hide-menu,
    #main-wrapper[data-sidebartype="mini-sidebar"] .hide-menu {
        display: none !important;
    }

    /* Center icons when minimized */
    #main-wrapper.mini-sidebar .sidebar-link,
    #main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-link {
        justify-content: center !important;
        padding: 10px !important;
    }

    /* Hide nav small caps when minimized */
    #main-wrapper.mini-sidebar .nav-small-cap,
    #main-wrapper[data-sidebartype="mini-sidebar"] .nav-small-cap {
        display: none;
    }
}

/* Profile toggle animation - similar to theme toggle */
.profile-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.profile-toggle:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.profile-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-toggle-icon img {
    border-radius: 0;
}

/* Theme toggle styles for consistency */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}