/*
* Admin-specific stylesheet
* This file contains styles exclusively for the admin interface
* to avoid conflicts with the main site styling
*/

/* Reset and base styles for admin */
html.admin-layout,
body.admin-layout {
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0;
  padding: 0;
  background-color: #f9fafb !important; /* bg-gray-50 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove any background images or pseudo-elements */
body.admin-layout::before,
body.admin-layout::after {
  display: none !important;
}

/* Ensure the main admin container uses full height */
body.admin-layout .h-full {
  height: 100% !important;
  min-height: 100vh !important;
}

/* Admin layout specific flex containers */
.admin-layout .flex {
  display: flex;
}

.admin-layout .flex-col {
  flex-direction: column;
}

.admin-layout .flex-1 {
  flex: 1 1 0%;
}

.admin-layout .h-full {
  height: 100%;
}

.admin-layout .min-h-screen {
  min-height: 100vh;
}

/* Ensure sidebar takes full height */
.admin-layout #admin-sidebar {
  height: 100vh !important;
}

/* Main content area should fill remaining space */
.admin-layout main {
  flex: 1;
  min-height: 0; /* Allow flexbox to work properly */
}

/* Mobile sidebar styles */
@media (max-width: 1023px) {
  .admin-layout #admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 16rem; /* w-64 */
    height: 100vh;
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .admin-layout #admin-sidebar:not(.-translate-x-full) {
    transform: translateX(0);
  }
}

/* Desktop sidebar styles */
@media (min-width: 1024px) {
  .admin-layout #admin-sidebar {
    position: static;
    transform: translateX(0);
    display: flex;
    flex-direction: column;
  }
}

/* Ensure proper scrolling in main content */
.admin-layout main {
  overflow-y: auto;
  background-color: #f9fafb; /* bg-gray-50 */
}

/* Navigation active state */
.admin-layout .bg-imperial-red {
  background-color: #dc2626; /* Adjust this to match your imperial-red color */
}

/* Hover states */
.admin-layout .hover\:bg-gray-100:hover {
  background-color: #f3f4f6;
}

.admin-layout .hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}

/* Text colors */
.admin-layout .text-gray-900 {
  color: #111827;
}

.admin-layout .text-gray-700 {
  color: #374151;
}

.admin-layout .text-gray-500 {
  color: #6b7280;
}

.admin-layout .text-white {
  color: #ffffff;
}

/* Background colors */
.admin-layout .bg-white {
  background-color: #ffffff;
}

.admin-layout .bg-gray-50 {
  background-color: #f9fafb;
}

.admin-layout .bg-eerie-black {
  background-color: #1a1a1a; /* Adjust to match your eerie-black color */
}

/* Borders */
.admin-layout .border-gray-200 {
  border-color: #e5e7eb;
}

.admin-layout .border-gray-300 {
  border-color: #d1d5db;
}

/* Shadow utilities */
.admin-layout .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.admin-layout .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Responsive utilities */
@media (max-width: 639px) {
  .admin-layout .sm\:hidden {
    display: none;
  }
}

@media (max-width: 1023px) {
  .admin-layout .lg\:hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
  .admin-layout .lg\:flex {
    display: flex;
  }
  
  .admin-layout .lg\:static {
    position: static;
  }
  
  .admin-layout .lg\:translate-x-0 {
    transform: translateX(0);
  }
}

/* Mobile overlay */
.admin-layout #mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(75, 85, 99, 0.75);
  z-index: 30;
  transition: opacity 0.3s ease-in-out;
}

.admin-layout #mobile-sidebar-overlay.hidden {
  display: none;
}

/* Prevent body scroll when mobile sidebar is open */
body.admin-layout.overflow-hidden {
  overflow: hidden;
}