/* --- Base Body Style --- */
body {
  font-family: "Inter", sans-serif;
  background-color: #cce4ef;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* --- Login Page Specific Styles --- */
.login-page-body .main-bg {
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NDIiIGhlaWdodD0iOTAwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjMjMzODUxIiBkPSJNMCAwaDc0MnY5MDBIMHoiLz48cGF0aCBzdHJva2U9IiNFQ0YwRjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI4MiIgZD0iTTU1MS4wNzEgMTE3LjgxOCA0NDIuMzkgMi4wNzFjLTUuMTEtNS40NDMtOC4wODctMTMuNzAyLTguMDktMjIuNDQzLS4wMjgtMTE0LjM3NC0uMzk2LTI1Ny45NDQtLjI3Ni0zNDQuMzA1LjAzNC0yNC4zNDcgMjEuMTc5LTM3LjIwMSAzNC45NzItMjEuMzI2IDUxLjQ3MyA1OS4yNDEgMTQ3LjQ0NCAxNjkuMjc3IDE5OC4yOTEgMjI0LjkxNSA3Ljc4NCA4LjUxNyAxOC45MzQgOC40NjEgMjYuNzU4LjAxbDE5OC4wNTgtMjEzLjkyOGMxNC4wMi0xNS4xNDMgMzQuODk3LTEuODI3IDM0Ljg5NyAyMi4yODVWMjcuODgyYzAgNy42Mi0yLjJ2NTMuODJMODE3LjM5IDEwMzAuMDdjLTUuMTEtNS40NC04LjA4Ny0xMy4yNzcgMTk4LjI5MSAyMjQuOTE1ci0xOC45MzQtOC40NjEtMjYuNzU4LS4wMWwtMTk4LjA1OCAyMTMuOTI4Yy0xNC4wMiAxNS4xNDMtMzQuODk3IDEuODI3LTM0Ljg5Ny0yMi4yODV2LTM4MC42MDNjMC03LjYyIDIuMjY1LTE0Ljc5MyA2LjI5NS0yMC4xNzVMNjQuNzMtNjc1TTE4MC45MjkgODAwLjE4MiAyODkuNjEgOTE1LjkyOWM1LjExIDUuNDQzIDguMDg3IDEzLjcwMiA4LjA5IDIyLjQ0My4wMjggMTE0LjM3OC4zOTYgMjU3Ljk0OC4yNzYgMzQ0LjMwOC0uMDM0IDI0LjM0LTIxLjE3OSAzNy4yLTM0Ljk3MiAyMS4zMi01MS40NzMtNTkuMjQtMTQ3LjQ0NC0xNjkuMjctMTk4LjI5MS0yMjQuOTEtNy43ODQtOC41Mi0xOC45MzQtOC40Ni0yNi43NTgtLjAxbC0xOTguMDU4IDIxMy45M2MtMTQuMDIgMTUuMTQtMzQuODk3IDEuODItMzQuODk3LTIyLjI5Vjg5MC4xMThjMC03LjYyIDIuMjY1LTE0Ljc5MyA2LjI5NS0yMC4xNzVMMTQzLjczIDQyNiIgb3BhY2l0eT0iLjA2Ii8+PC9zdmc+");
  background-color: #233851;
  background-size: cover;
  background-position: center;
}
.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-box {
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}
.login-box:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}
.error {
  color: #ff8a8a;
  background-color: rgba(255, 0, 0, 0.2);
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 100, 100, 0.5);
}

/* --- Portal & Sidebar General Styles --- */
.sidebar {
  transition: width 0.5s ease-in-out;
  width: 18rem;
  overflow: hidden;
  display: flex;             /* ADD THIS */
  flex-direction: column;    /* ADD THIS */
  gap: 1rem;                 /* ADD THIS for nice spacing */
}
.sidebar.collapsed {
  width: 5.5rem; /* 88px */
  padding: 1rem;
}
.sidebar-menu-item {
  transition: all 0.2s ease-in-out;
}
.sidebar-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.submenu.open {
  max-height: 500px;
}
.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  background: #24303b;
  border-radius: 9999px;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.sidebar-toggle:hover {
  background: #008abd;
}
.sidebar.collapsed .sidebar-toggle {
  transform: translateY(-50%) rotate(180deg);
}

/* --- NEW: Generic Fade-in Animation for Sidebar Content --- */
.fade-in-text {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  white-space: nowrap;
}
.fade-in-text.visible {
  opacity: 1;
}

/* Ensure icons are always visible and don't get hidden */
.sidebar i[data-lucide] {
  opacity: 1 !important;
}