html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--bg-body) !important;
  transition: none !important; /* Disable transitions during nav to stop the flash */
}
/*=========BUTTONS STYLING=========*/
a, .btn-link {
    color: #006bb7;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
  box-shadow: 0 6px 12px rgba(16, 100, 238, 0.35);
  transition: all 0.25s ease;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 100, 238, 0.25);
}

/*=========END BUTTONS STYLING=========*/

/*========FORMS FOR EMPLOYEE==========*/
/*======== MODERN FORMS FOR HR MASTER PROX ==========*/

/* 1. The Container Card */
.form-card {
  background: var(--bg-card-gradient); /* gradient adds depth */
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 5px 10px rgba(0,0,0,0.3);
  padding: 36px;
  transition: all 0.3s ease;
}

body.dark {
  --bg-card: #1a1a1a; /* deep charcoal base */
  --bg-card-gradient: linear-gradient(145deg, #1a1a1a, #252525); /* soft 3D vibe */
  --input-bg: #2d2d2d; /* inputs remain darker for contrast */
  --text-main: #f5f5f5; /* labels and text in white */
  --border: #444; /* subtle border */
}

/* 2. Modern Labels */
/* Current label */
.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #292828; /* Light mode default */
  margin-bottom: 8px;
  display: block;
  transition: color 0.2s ease;
}

/* Dark mode override - place this AFTER the above */
body.dark .form-card .form-label,
[data-bs-theme="dark"] .form-card .form-label {
  color: #CED3D6 !important; /* Whitish in dark mode */
}


/* 3. The Input Field Transformation */
/* --- 1. Define shadow variable --- */
:root, [data-bs-theme="light"] {
  --input-shadow: inset 0 0.2px 0.2px rgba(0,0,0,0.3), 0 0.2px 0.2px rgba(0,0,0,0.3);
}

body.dark, [data-bs-theme="dark"] {
  --input-shadow: inset 0 2px 3px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.4);
}
.form-control, .form-select {
  height: calc(3rem + 1.5px); /* Slightly taller for luxury feel */
  padding: 0.75rem 1rem;
  background-color: var(--input-bg);
  border: 1.5px solid #e9ecef;
  box-shadow: var(--input-shadow) !important;
  transition: all 0.10s ease;
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--text-main);
  transition: all 0.2s ease-in-out;
}



/* 4. The "Magic" Focus State */
.form-control:focus, .form-select:focus {
    border-color: #1064ee; /* Match your brand blue */
    box-shadow: 0 0 0 4px rgba(16, 100, 238, 0.1); /* Soft blue outer glow */
    outline: 0;
}

/* 5. Placeholder Styling */
  /* Light mode placeholder */
  .form-control::placeholder {
    color: #adb5bd; /* Light grey for light mode */
    font-weight: 400;
  }

/* Dark mode placeholder */
body.dark .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
  color: #b0b0b0; /* Slightly lighter grey for dark mode */
  font-weight: 400;
}


/* 6. Section Titles inside Forms */
.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #131494; /* Your Deep Blue */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* 7. Input Group Icons (If you use them) */
.input-group-text {
    background-color: #f8f9fa;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    color: #6c757d;
}

/* 8. Success/Validation Look */
.form-control.is-valid {
    border-color: #13e5bf; /* Match your brand green */
}

/*=========== END OF MODERN FORM CSS ========*/
/* 🔍 Compact search input – real fix */
.search-bar .form-control {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Match the icon container */
.search-bar .input-group-text {
  padding: 0.25rem 0.5rem !important;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

/*===========END OF FORM FIELDS CSS========*/

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- GLOBAL LOGIN PAGE STYLES --- */
/* You can use a repeating background image here if you have one, 
   otherwise, use the subtle gradient effect */
body {
  background-color: #f4f7f9; /* Fallback color in case the image doesn't load */
  
}

.login-page-container {
  min-height: 100vh;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  padding: 40px 20px;
  background-color: #f4f7f9;
  /* ADD THE BACKGROUND IMAGE HERE */
  background-image: url('../images/Untitled design (3).png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* FIX: Add min-height: 100vh to allow centering across the full viewport */
.login-page-wrapper {
    min-height: 100vh; 
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    
    /* ADDED: Generous padding to create space around the card on the screen edges */
}

/* --- B. THE MAIN TWO-COLUMN CARD (The element you want to shrink) --- */
.login-card {
    
    max-width: 950px; 
    width: 100%; /* Ensures it scales correctly */
    
    /* Reduced height for a more compact look */
    height: 540px; 
    
    border-radius: 20px;
    overflow: hidden; 
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow for "pop-up" effect */
    border: none;
}


/* --- C. COLUMN 1: PORTAL DESCRIPTION STYLES --- */
.login-portal-panel {
  /* Ensure the column takes up the full available height of the .login-card */
  height: 100%;
  background: linear-gradient(135deg, #13e5bf 0%, #1064ee 50%, #d3f2ff 100%);
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  position: relative; /* REQUIRED for the dots to position correctly */
  border-radius: 20px 0 0 20px;
  overflow: hidden; /* Keeps the dots inside the rounded corners */
  z-index: 1; /* Sets a base layer */
}

  /* Common Dot Logic */
  .login-portal-panel::before,
  .login-portal-panel::after {
    content: "";
    position: absolute;
    width: 100px; /* Width of the dotted area */
    height: 100px; /* Height of the dotted area */
    /* This creates the polka dot pattern using your color #131494 */
    background-image: radial-gradient(#222240 20%, transparent 20%);
    background-size: 12px 12px; /* Controls how close the dots are */
    z-index: 0; /* Sits behind your text but above the background gradient */
    opacity: 0.4; /* Makes the dots subtle against the gradient */
  }

  /* Top Left Dotted Icon */
  .login-portal-panel::before {
    top: -5px;
    left: -5px;
  }

  /* Bottom Right Dotted Icon */
  .login-portal-panel::after {
    bottom: -5px;
    right: -5px;
  }

/* Ensure the text content stays on top of the dots */
.portal-content {
  position: relative;
  z-index: 2;
}

/* --- D. COLUMN 2: LOGIN FORM PANEL --- */

.login-form-panel {
  background: white;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 20px 20px 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

  .login-form-panel::-webkit-scrollbar {
    display: none;
  }

  /* Override the margins and width imposed by your Login.razor content */
  .login-form-panel > .row.justify-content-center {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .login-form-panel .col-md-5 {
    /* Remove the width restriction from col-md-5 inside the panel */
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .login-form-panel .card {
    /* Remove unnecessary outer margins */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100%;
    /* Keep the card shadow and background, but let it expand */
  }
/* Dark mode labels inside login form panel */
body.dark .login-form-panel .form-label,
[data-bs-theme="dark"] .login-form-panel .form-label {
  color: #f5f5f5; /* Whitish for dark mode */
}

.portal-content .portal-title {
  /* Optional: Ensure no other padding/margin is pushing the title down */
  margin-top: 0;
  /* The large space below the title is handled by the Bootstrap mb-5 class in HTML */
}


/* Targets the list items and forces a large gap below them */
.portal-list-spaced li {
  /* Sets the margin below each item to 25 pixels, which should look like skipping a line */
  margin-bottom: 25px;
}
/* Smoothly expand the form when validation messages appear */
.validation-message {
  color: #e11d48; /* Premium Rose Red */
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 4px;
  display: block;
  animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  /* Optional: To ensure the icon doesn't look too close to the text */
  .portal-list-spaced li span {
    margin-right: 12px;
  }
/* --- 📱 MOBILE RESPONSIVE UPDATE --- */
@media (max-width: 767.98px) {
  .login-card {
    flex-direction: column; /* Stack vertically on mobile */
    height: auto;
    min-height: unset;
    margin: 20px 0;
  }

  .login-portal-panel {
    /* Transform into a header */
    width: 100% !important;
    height: auto !important;
    padding: 40px 20px !important;
    border-radius: 20px 20px 0 0 !important;
    text-align: center;
    justify-content: center;
  }

  /* Hide features list on mobile to save vertical space */
  .portal-features, .portal-list-spaced {
    display: none !important;
  }

  .portal-title {
    font-size: 1.8rem !important;
    margin-bottom: 0 !important;
  }

  .login-form-panel {
    width: 100% !important;
    border-radius: 0 0 20px 20px !important;
    padding: 30px 20px !important;
  }

  /* Center the dots for the new mobile header layout */
  .login-portal-panel::after {
    bottom: -30px;
    right: -30px;
  }
}

@media (min-width: 768px) {
  .login-portal-panel {
    border-radius: 20px 0 0 20px;
    height: 100%;
  }

  .login-form-panel {
    border-radius: 0 20px 20px 0;
    height: 100%;
  }
}


  /*===========MAIN CSS FOR DASHBOARD CARDS/ LINKS========*/
/* Custom CSS for the new dashboard cards/links */

/* Style for the quick action link boxes */
.action-btn-link:hover .bg-white {
  background-color: #f8f9fa !important; /* Slightly darker on hover */
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

/* Base style for the hover-zoom effect */
.hover-zoom {
  transition: all 0.2s ease-in-out;
}

.coming-soon-wrapper {
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Let the body color show through */
}

.coming-soon-card {
  /* Use variables so it flips automatically */
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #212529);
  padding: 3rem;
  border-radius: 16px;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Dark Mode specific tweak for the card */
body.dark .coming-soon-card {
  background: #1a1a1a !important; /* Professional Gray */
  border: 1px solid #333;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.coming-soon-icon {
  font-size: 3.5rem;
  /* Use a lighter blue in dark mode for better visibility */
  color: #0d6efd;
}

body.dark .coming-soon-icon {
  color: #66b0ff;
}
/* Notification Bell Styling */
.notification-btn {
  color: var(--text-main);
  transition: transform 0.2s ease, color 0.2s ease;
}

  .notification-btn:hover {
    color: #1064ee; /* Matches your portal blue */
    transform: scale(1.1);
  }

/* Badge Tweaks */
.notification-wrapper .badge {
  font-size: 0.65rem;
  padding: 0.35em 0.5em;
  /* Adjusting position slightly to sit on the corner of the bell */
  margin-top: 2px;
  margin-left: -2px;
}

/* Dark Mode Fix: Ensure the bell is high-contrast white in dark mode */
body.dark .notification-btn {
  color: var(--text-main) !important;
}

  body.dark .notification-btn:hover {
    color: #13e5bf !important; /* Teal hover in dark mode */
  }
/*===========END OF MAIN CSS========*/
/* NEXT CSS */
/*=====================================================================================================================================*/
/*=====================================================================================================================================*/
/* --- 1. VARIABLE DEFINITIONS --- */
/* --- GLOBAL THEME TOKENS --- */
/* LIGHT MODE (Default & Forced) */
:root, [data-bs-theme="light"] {
  --bg-body: #f4f7f9;
  --bg-card: #ffffff;
  --text-main: #212529;
  --input-bg: #ffffff;
  --bg-header: #1a1a1a; /* Dark Header */
  --brand-title: #2596be; /* Strong Blue for Light Mode */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 3.4);
  --card-shadow: rgba(14, 165, 233, 0.18);
}

/* DARK MODE (Forced & System-Dark) */
body.dark, [data-bs-theme="dark"] {
  --bg-body: #000000; /* Pure Black */
  --bg-card: #2E2D2D; /* Gray Card */
  --bg-header: #1a1a1a; /* Dark Header */
  --text-main: #FCFCFC; /* High Contrast White */
  --input-bg: #2d2d2d; /* Lighter Gray Inputs */
  --border: #444444;
  --sidebar-bg: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 100%) !important;
  --brand-title: #ffffff; /* Pure White for Dark Mode */
  --glass-bg: rgba(30, 30, 30, 0.6);
  --glass-border: rgba(255, 255, 255, 0.2);
  --card-shadow: rgba(0, 0, 0, 0.6);
}

/* Custom Table styling to bridge your light/dark themes */
.custom-staff-table {
  color: var(--text-main) !important;
}

  /* Light Mode: Header is your requested Navy */
  .custom-staff-table thead {
    background-color: #222240 !important;
    color: white !important;
  }

/* Dark Mode Overrides */
body.dark .custom-staff-table thead {
  background-color: #1a1a1a !important; /* Matches your header variable */
  border-bottom: 2px solid #444;
}

body.dark .custom-staff-table tbody tr {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid #3d3d3d;
}

  body.dark .custom-staff-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

/* Badge for departments in light/dark */
.bg-navy-subtle {
  background-color: rgba(34, 34, 64, 0.1);
  color: #222240;
}

body.dark .bg-navy-subtle {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

/* Photo adjustments */
.emp-list-photo {
  object-fit: cover;
  border: 2px solid #fff;
}

body.dark .emp-list-photo {
  border-color: #444;
}

/* Target the "Staff Management" H2 specifically in Dark Mode */
body.dark h2[style*="color: #222240"] {
  color: #ffffff !important;
}
.btn-prox-outline {
  color: #222240;
  border-color: #222240;
  background: transparent;
  transition: all 0.2s ease;
}

  .btn-prox-outline:hover {
    background-color: #222240;
    color: #ffffff;
  }

/* Dark Mode Override */
body.dark .btn-prox-outline {
  color: #f5f5f5 !important; /* Off-white text */
  border-color: #444 !important; /* Subtle border to match sidebar */
}

  body.dark .btn-prox-outline:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important; /* Invert on hover for high contrast */
    border-color: #f5f5f5 !important;
  }
/* Global Application */




/* Header persistence across all pages 
.top-row {
  background-color: var(--bg-header, #f7f7f7) !important;
  border-bottom: 1px solid var(--border, #d6d5d5) !important;
}*/

/* Sidebar Dark Mode Fix */
body.dark .sidebar {
  background-image: linear-gradient(180deg, #2E2E2E 0%, #262626 100%) !important;
}

body.dark .nav-link {
  color: #ffffff !important;
}

  body.dark .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

body.dark .custom-header {
  border-bottom: 1px solid #333 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.8) !important;
}

/* LIGHT MODE (Default) */
.prox-header-text {
  color: #222240; /* Your brand navy */
  transition: color 0.3s ease;
}
/* 1. The Pill Navigation Container */
.prox-pill-container {
  background: #ffffff;
  border: 1px solid #dee2e6;
}

body.dark .prox-pill-container {
  background: #1a1a1a !important; /* Matches your header/sidebar style */
  border: 1px solid #333 !important;
}

/* 2. The Glass Stage (The main background area) */
.prox-glass-stage {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0,0,0,0.05);
}

body.dark .prox-glass-stage {
  background: #000000 !important; /* Pure Black like your body variable */
  border: 1px solid #222 !important;
}

/* 3. The Internal Cards (Overview/Chart boxes) */
.prox-dark-card {
  background: #ffffff;
}

body.dark .prox-dark-card {
  background: #1a1a1a !important; /* Slightly lighter than the black stage for depth */
  color: #ffffff;
  border: 1px solid #333 !important;
}

/* 4. Labels inside the cards */
.prox-sub-label {
  color: #6c757d; /* Standard muted */
}

body.dark .prox-sub-label {
  color: #CED3D6 !important; /* Whitish gray from your variables */
}

/* 5. Pill Navigation Active State */
body.dark .nav-pills .nav-link:not(.active) {
  color: #888 !important;
}

body.dark .nav-pills .nav-link.active {
  background: #2596be !important; /* Your brand blue */
  color: white !important;
}
/* DARK MODE */
body.dark .prox-header-text {
  color: #ffffff !important; /* Pure white for dark backgrounds */
}

/* Optional: Make the Card Header border look better in Dark Mode */
body.dark .card-header {
  border-bottom: 1px solid #2d3245 !important;
}
/* Ensure the logo container background matches */
/*body.dark .top-row.navbar {
  background-color: #121212 !important;
}*/


/* 3. LIGHT MODE THEME BUTTON STYLES: Targets the button when body.dark is NOT present. */


/* --- HOVER ACTIVATION FIX (Override Bootstrap default click behavior) --- */

/* 1. Main Menu Dropdown */
/* When the parent dropdown container is hovered, show the menu */
.dropdown:hover > .dropdown-menu {
    display: block; /* Forces the menu to be visible */
    margin-top: 0;  /* Keeps the menu attached to the button */
}
.prox-badge-outline {
  background-color: #ffffff !important; /* White in light mode */
}

body.dark .prox-badge-outline {
  background-color: transparent !important; /* Transparent in dark mode */
  color: #66b0ff !important; /* Lighter blue for better contrast */
  border-color: #66b0ff !important;
}
/* 2. Nested (Dropend) Menu */
/* When the 'Theme Settings' link (nested-trigger) is hovered, show the nested menu */
.dropend:hover > .dropdown-menu {
  display: block; /* Forces the nested menu to be visible */
  /* Adjust positioning for right-side dropend (Standard Bootstrap usually handles this) */
  top: -5px;
  /* 3. Pushes the menu right, clear of the parent menu */
  left: 100%;
  position: absolute;
  width: max-content;
  margin-left: .1rem;
}

/* Ensure the button looks clickable on hover */
.settings-icon:hover {
    cursor: pointer;
}
.emp-list-photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This prevents the image from stretching */
  border-radius: 50%;
  border: 1px solid #dee2e6;
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.glass-stage {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  min-height: 300px;
}

.nav-pills .nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

  .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284c7 100%);
  }

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}
/* Unique System Pulse Animation */
.pulse-animation {
  animation: system-pulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
}

@keyframes system-pulse {
  0% {
    transform: translate(100%, -50%) scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }

  70% {
    transform: translate(100%, -50%) scale(1.1);
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }

  100% {
    transform: translate(100%, -50%) scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}
/* Custom Brand Button */
.btn-brand-navy {
  background-color: #222240 !important;
  border-color: #222240 !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

  .btn-brand-navy:hover {
    background-color: #2c2c54 !important; /* Slightly lighter navy for hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 34, 64, 0.3);
    color: #ffffff !important;
  }

/* Ensure it looks sharp in Dark Mode too */
body.dark .btn-brand-navy {
  background-color: #222240 !important;
  border: 1px solid #444;
}

  body.dark .btn-brand-navy:hover {
    background-color: #31315a !important;
    border-color: #13e5bf; /* Optional: Teal border on hover to match your teal dots */
  }
@media print {
  .modal-footer, .btn-close, .sidebar, .nav {
    display: none !important;
  }

  .modal-content {
    border: none !important;
  }
}

.detail-label {
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.detail-value {
  font-weight: 500;
  color: #1e293b;
}

/*========== DEVICE LAYOUT-SPECIFIC STYLES ==========*/
/* 1. LARGE SCREEN OPTIMIZATION (Prevent the "Stretched" Look) */
@media (min-width: 1400px) {
  /* Keeps the form at a readable width on huge monitors */
  .container-fluid.container-md {
    max-width: 1140px !important;
    margin: 0 auto;
  }
}

/* 2. TABLET & MOBILE TWEAKS (Fixing Column Density) */
@media (max-width: 992px) {
  /* On tablets, we ensure 3 columns become 2 for better spacing */
  .col-md-4 {
    flex: 0 0 auto;
    width: 50% !important;
  }
}

@media (max-width: 576px) {
  /* On mobile, everything stacks 100% wide */
  .col-md-4, .col-md-6 {
    flex: 0 0 auto;
    width: 100% !important;
  }

  /* Make buttons full width on mobile for easier tapping */
  .btn-lg, .btn-brand-navy {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  .d-flex.justify-content-between {
    flex-direction: column !important;
  }
}

/* 3. TABLE RESPONSIVENESS (Prevent Screen Breaking) */
.table-responsive {
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iPhones */
}

/* 4. MODAL ADAPTABILITY */
.modal-dialog {
  margin: 1.75rem auto;
  max-width: 800px; /* Limits width on Desktop */
}

@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: none;
  }

  .modal-body {
    padding: 1rem;
  }
}

/* 5. INPUT POLISH (Looks better on High-Res screens) */
.form-control, .form-select {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border-radius: 6px;
  transition: box-shadow 0.2s ease;
}

  .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(34, 34, 64, 0.15); /* ProX Brand Glow */
  }