/* Glassmorphism Design System */

/* Animated Gradient Background for Main Content - Original Dark Colors */
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
}

/* Animated Gradient for Sidebar */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glass Effect Utilities */
.glass {
  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);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

.glass-subtle {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Sidebar with Animated Gradient Background */
.sidebar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 15s ease infinite !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-logo {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.nav-item {
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Menu Button Glass Effect */
.menu-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

.menu-btn i {
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Cards with Solid White Background - Not Affected by Gradient */
.stat-card, .bg-white {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1) !important;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(209, 213, 219, 1) !important;
}

/* Gradient Icon Backgrounds */
/* DISABLED - Was overriding Tailwind gradient buttons like bg-gradient-to-r
.bg-gradient-to-br {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
*/

/* Embossed White Typography - HIGHEST PRIORITY */
.embossed-title {
  font-family: 'Glacial Indifference', sans-serif !important;
  color: white !important;
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 2px rgba(0, 0, 0, 0.15),
    0 4px 4px rgba(0, 0, 0, 0.1),
    0 6px 8px rgba(0, 0, 0, 0.08),
    0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.embossed-subtitle {
  font-family: 'Glacial Indifference', sans-serif !important;
  color: white !important;
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 2px rgba(0, 0, 0, 0.15),
    0 4px 4px rgba(0, 0, 0, 0.1),
    0 6px 8px rgba(0, 0, 0, 0.08),
    0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  letter-spacing: 0.02em !important;
}

/* Modal Heading Styles - Dark text for visibility on white backgrounds */
.modal-title {
  font-family: 'Glacial Indifference', sans-serif !important;
  color: #1f2937 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
}

.modal-subtitle {
  font-family: 'Glacial Indifference', sans-serif !important;
  color: #374151 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
}

/* Flat Action Buttons with Stronger Drop Shadow Effects */
.action-btn:hover,
button[onclick*="viewUser"]:hover,
button[onclick*="editUser"]:hover,
button[onclick*="moveUser"]:hover, 
button[onclick*="swapUser"]:hover {
  transform: translateY(-3px) !important;
  opacity: 0.95 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.action-btn:active,
button[onclick*="viewUser"]:active,
button[onclick*="editUser"]:active,
button[onclick*="moveUser"]:active,
button[onclick*="swapUser"]:active {
  transform: translateY(1px) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Text Colors for Better Contrast on Light Background */
.text-gray-800, .text-gray-900 {
  color: #1f2937 !important;
  text-shadow: none;
}

.text-gray-600, .text-gray-700 {
  color: #4b5563 !important;
  text-shadow: none;
}

.text-gray-500 {
  color: #6b7280 !important;
}

/* Tables with Glass Effect */
table thead {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(156, 163, 175, 0.3) !important;
}

table tbody tr {
  border-bottom: 1px solid rgba(156, 163, 175, 0.2) !important;
  transition: all 0.2s ease;
}

table tbody tr:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* Selected/Active Row 3D Effect */
table tbody tr.bg-blue-100 {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(191, 219, 254, 0.9) 100%) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* BUTTONS - GLASSMORPHISM DISABLED FOR ALL BUTTONS TO PREVENT VISIBILITY ISSUES
   
   All button styles should be defined explicitly in HTML or via specific classes.
   NO global button styling that could interfere with modal/form buttons.
   
button:not([type="submit"]):not([id]):not([style*="background"]):not([onclick*="close"]):not([onclick*="execute"]):not(.action-btn):not(.confirm-cancel-btn):not(.confirm-ok-btn), 
.btn:not([type="submit"]) {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

button:not([type="submit"]):not([id]):not([style*="background"]):not([onclick*="close"]):not([onclick*="execute"]):not(.action-btn):not(.confirm-cancel-btn):not(.confirm-ok-btn):hover, 
.btn:not([type="submit"]):hover {
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px);
}
*/

/* ALL BUTTON GLASSMORPHISM DISABLED - buttons use their own explicit styles */

/* Confirmation Dialog Buttons - Explicit Styles */
.confirm-cancel-btn {
  flex: 1 !important;
  background: #6b7280 !important;
  color: white !important;
  border: none !important;
  padding: 10px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.confirm-cancel-btn:hover {
  background: #4b5563 !important;
}

.confirm-ok-btn {
  flex: 1 !important;
  background: #3b82f6 !important;
  color: white !important;
  border: none !important;
  padding: 10px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3) !important;
}

.confirm-ok-btn:hover {
  background: #2563eb !important;
}

/* Blue Buttons - DISABLED to prevent interference with Tailwind gradients
.bg-blue-600, .bg-blue-500 {
  background: rgba(59, 130, 246, 0.4) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
}

.bg-blue-600:hover, .bg-blue-500:hover {
  background: rgba(59, 130, 246, 0.6) !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
}
*/

/* ALL TAILWIND BUTTON COLOR OVERRIDES DISABLED
   
   These were causing buttons with Tailwind classes to appear transparent/glassy
   Let Tailwind handle button colors without interference
   
.bg-yellow-500, .bg-yellow-600 {
  background: rgba(234, 179, 8, 0.4) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(253, 224, 71, 0.3) !important;
}

.bg-yellow-500:hover, .bg-yellow-600:hover {
  background: rgba(234, 179, 8, 0.6) !important;
}

.bg-green-600, .bg-green-500 {
  background: rgba(22, 163, 74, 0.4) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(134, 239, 172, 0.3) !important;
}

.bg-red-600, .bg-red-500 {
  background: rgba(220, 38, 38, 0.4) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(252, 165, 165, 0.3) !important;
}

.bg-gray-200, .bg-gray-300, .bg-gray-500 {
  background: rgba(156, 163, 175, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
*/

/* Input Fields */
input, textarea, select {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(156, 163, 175, 0.4) !important;
  color: #1f2937 !important;
  transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(107, 114, 128, 0.6) !important;
}

/* Select Dropdowns */
select option {
  background: #ffffff;
  color: #1f2937;
}

/* Modals */
.fixed.inset-0 {
  backdrop-filter: blur(8px);
}

.modal-content, .bg-white.rounded-md, .bg-white.rounded-lg, .bg-white.rounded-xl {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* Modal Action Buttons - Close and Edit */
.modal-content button,
.bg-white.rounded-md button,
.bg-white.rounded-lg button,
.bg-white.rounded-xl button {
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Close Button Styling */
button:has-text("Close"),
button[onclick*="closeModal"] {
  background: rgba(156, 163, 175, 0.8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(107, 114, 128, 0.5) !important;
}

button:has-text("Close"):hover,
button[onclick*="closeModal"]:hover {
  background: rgba(107, 114, 128, 0.9) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Edit Button Styling */
button:has-text("Edit") {
  background: rgba(59, 130, 246, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.5) !important;
}

button:has-text("Edit"):hover {
  background: rgba(37, 99, 235, 1) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Badges */
.badge-move, .badge-swap, .badge-new {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Filter Buttons */
.filter-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.filter-btn.active {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Status Badges */
.bg-red-100, .bg-yellow-100, .bg-green-100, .bg-blue-100, .bg-gray-100 {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Improve readability on colored backgrounds */
.text-red-700, .text-yellow-700, .text-green-700, .text-blue-700 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Floor Plan Container */
#imageContainer {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Add subtle glow effects */
.stat-card, .nav-item.active, button:hover {
  position: relative;
}

.stat-card::before, .nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover::before, .nav-item.active::before {
  opacity: 1;
}

/* Add New User Button - More Visible */
button[onclick*="showAddModal"],
button:has-text("Add New User"),
.add-user-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 28px !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

button[onclick*="showAddModal"]:hover,
button:has-text("Add New User"):hover,
.add-user-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
  box-shadow: 0 8px 28px rgba(102, 126, 234, 0.6) !important;
  transform: translateY(-3px) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
}