/* --- NEW: Hide All Scrollbars --- */
/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    display: none;
}

/* For Firefox */
body, html {
    scrollbar-width: none;
}

/* For IE and Edge */
body, html {
    -ms-overflow-style: none;
}
/* --- End Hide Scrollbars --- */


/* --- Global Styles & Font --- */
body {
    font-family: 'Inter', sans-serif;
    font-size: 11px !important; /* Forces smaller text globally */
}

/* --- Global Loading Modal State --- */
body.loading-active {
    overflow: hidden; /* Prevent scrolling when loading modal is open */
}

/* --- Global Layout --- */
#main-container {
    width: 100%;
    min-height: 100vh;
}

#main-container>.flex-1 {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

/* --- FONT SIZE REDUCTION (PAGES ONLY) --- */
/* This targets everything inside 'main' but excludes the sidebar */

main {
    font-size: 11px !important; /* Reduce base text to 11px */
}

/* Override Tailwind Utility Classes INSIDE main only */
main .text-xs   { font-size: 10px !important; } /* Was 12px */
main .text-sm   { font-size: 11px !important; } /* Was 14px */
main .text-base { font-size: 12px !important; } /* Was 16px */
main .text-lg   { font-size: 14px !important; } /* Was 18px */
main .text-xl   { font-size: 16px !important; } /* Was 20px */
main .text-2xl  { font-size: 18px !important; } /* Was 24px */
main .text-3xl  { font-size: 22px !important; } /* Was 30px */
main .text-4xl  { font-size: 26px !important; } /* Was 36px */

/* Adjust form inputs inside main to match */
main input, main select, main textarea, main button {
    font-size: 90% !important; 
}

/* --- End Font Size Reduction --- */


/* --- Page Section Styling --- */
.page-section {
    display: none;
}
.page-section.active {
    display: block;
}

/* --- Sidebar Theme & Interaction --- */
#sidebar {
    width: 5rem; /* 80px */
    transition: width 0.3s ease-in-out;
}

/* Expand on hover OR when pinned */
#sidebar:hover,
.sidebar-pinned #sidebar {
    width: 14rem; /* 224px */
}

/* Hide text by default */
#sidebar .logo-text,
#sidebar .link-text {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Show text on hover OR when pinned */
#sidebar:hover .logo-text,
#sidebar:hover .link-text,
.sidebar-pinned #sidebar .logo-text,
.sidebar-pinned #sidebar .link-text {
    display: inline;
    opacity: 1;
}

/* Center icons by default */
#sidebar .sidebar-link,
#sidebar .sidebar-footer-link {
    justify-content: center;
}

/* Align text to the left on hover OR when pinned */
#sidebar:hover .sidebar-link,
#sidebar:hover .sidebar-footer-link,
.sidebar-pinned #sidebar .sidebar-link,
.sidebar-pinned #sidebar .sidebar-footer-link {
    justify-content: flex-start;
}

/* Active sidebar link style */
.sidebar-link.active {
    background-color: #2563eb; /* bg-blue-600 */
    color: #ffffff; /* text-white */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.sidebar-link.active svg,
.sidebar-link.active i { /* Target both SVG and FontAwesome icons */
    color: #ffffff;
}

/* --- Header Bar --- */
#top-bar {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 10;
}

/* --- Breadcrumbs --- */
#breadcrumb-container {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}
.breadcrumb-item a {
    color: #3B82F6;
    text-decoration: none;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: #1f2937;
    font-weight: 500;
}
.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #9ca3af;
}

/* --- Global Search Results --- */
.search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease-in-out;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: #f3f4f6;
}

/* --- Notification Dropdown --- */
.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease-in-out;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background-color: #f9fafb;
}
.notification-item i {
    margin-right: 0.75rem;
    font-size: 1.25rem;
    margin-top: 4px;
    width: 20px;
    text-align: center;
}

/* Custom Scrollbar for Notification Dropdown */
#notification-dropdown-list::-webkit-scrollbar {
    width: 8px;
    display: block;
}
#notification-dropdown-list {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}
#notification-dropdown-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
#notification-dropdown-list::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}
#notification-dropdown-list::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* --- Sync Button Animation --- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
.syncing {
    animation: spin 1s linear infinite;
}

/* --- NEW: Sidebar Scroll Animation Styles --- */

/* This targets the <nav> element in the sidebar */
.sidebar-nav {
    position: relative; /* Needed for pseudo-elements */
    overflow-y: auto;  /* This is what makes it scrollable */
    
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;  
    /* Hide scrollbar for IE, Edge */
    -ms-overflow-style: none;  
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* Top fade "animation" */
.sidebar-nav::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 20px; /* Height of the fade */
    background: linear-gradient(to bottom, #111827 80%, transparent); /* bg-gray-900 fading to transparent */
    pointer-events: none; /* Allows clicking through it */
    z-index: 10;
    opacity: 0; /* Hidden by default, controlled by JS */
    transition: opacity 0.2s ease-in-out;
}

/* Bottom fade "animation" */
.sidebar-nav::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px; /* Height of the fade */
    background: linear-gradient(to top, #111827 80%, transparent); /* bg-gray-900 fading to transparent */
    pointer-events: none; /* Allows clicking through it */
    z-index: 10;
    opacity: 0; /* Hidden by default, controlled by JS */
    transition: opacity 0.2s ease-in-out;
}

/* Classes to be added by JavaScript to show the fades */
.sidebar-nav.show-scroll-top::before {
    opacity: 1;
}

.sidebar-nav.show-scroll-bottom::after {
    opacity: 1;
}

/* --- NEW: Filter Button Glow Animation --- */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); /* blue-500 */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.filter-active-glow {
  /* This targets the filter button when active */
  border-color: #3B82F6; /* blue-500 */
  color: #3B82F6;
  animation: pulse-glow 2s infinite;
}

/* --- NEW: Step Content Visibility (Purchase Orders Module) --- */
.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

/* --- NEW: Sidebar Submenu Utilities --- */
/* Ensure smooth rotation for chevron */
.rotate-180 {
    transform: rotate(180deg);
}

/* Ensure submenu items stand out slightly when hovered inside the dark theme */
#items-submenu .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}