/*
  =======================================================
  FruitLegerManagement Stylesheet - Final Fix
  =======================================================
*/

/* --- THEME & GLOBAL STYLES --- */
:root {
    --sidebar-bg: #212529;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --body-bg: #f4f7f6;
    --primary-color: #0d6efd;
}

body {
    background-color: var(--body-bg);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.app-container { display: flex; min-height: 100vh; }

/* --- HIGHLIGHT: RESTRUCTURED SIDEBAR STYLES --- */
#sidebar {
    width: var(--sidebar-width);
    color: #fff;
    background-color: var(--sidebar-bg) !important;
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sidebar-width));
    height: 100%;
    z-index: 1030;
    transition: left 0.3s ease-in-out;
    display: flex;
    flex-direction: column; /* Key change for vertical layout */
}
#sidebar.active { left: 0; }
.sidebar-header { padding: 1.5rem 1rem 1rem 1rem; }
.sidebar-content { flex-grow: 1; overflow-y: auto; padding: 0 1rem; }
.sidebar-footer { padding: 1rem 1rem; }
#sidebar .nav-brand { font-size: 1.5rem; font-weight: 600; }
#sidebar .nav-link { color: rgba(255,255,255,0.8); padding: 0.75rem 1rem; border-radius: 0.375rem; display: flex; align-items: center; text-decoration: none; }
#sidebar .nav-link:hover, #sidebar .nav-link.active { background-color: rgba(255,255,255,0.1); color: #fff; }
#sidebar .nav-link .bi { margin-right: 1rem; font-size: 1.25rem; }
#sidebar hr { border-color: rgba(255,255,255,0.2); margin: 1rem 0; }

/* --- MAIN VIEW & TOP BAR --- */
.main-view { display: flex; flex-direction: column; flex-grow: 1; width: 100%; overflow-x: hidden; }
.top-bar { display: flex; align-items: center; justify-content: space-between; background-color: #fff; height: var(--topbar-height); padding: 0 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1020; }
.hamburger-btn { font-size: 1.75rem; background: none; border: none; color: #333; }
.top-bar-brand { font-weight: 600; color: #333; }
#main-content { flex-grow: 1; background-color: #fff; }

/* HIGHLIGHT: New styles for the welcome message */
.welcome-message {
    color: #495057;
    font-size: 0.9rem;
    display: none; /* Hidden on very small mobile */
}

.sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1029; }
.sidebar-backdrop.active { display: block; }
.login-page-bg { background-color: #e9ecef; }
.login-card { max-width: 450px; width: 100%; border: none; }

/* --- DESKTOP VIEW --- */
@media (min-width: 992px) {
    .top-bar { 
        display: none; /* Hide mobile top bar */
    }
    #sidebar {
        position: static; /* Make sidebar part of the normal flow */
        height: 100vh; /* Make sidebar full height */
    }
    .main-view {
        width: calc(100% - var(--sidebar-width));
    }
    .sidebar-backdrop {
        display: none !important;
    }
    .welcome-message {
        display: block; /* Show welcome message on desktop */
    }
}