/* Custom CSS for HVAC Inventory Management System */

/* Brand Colors */
:root {
  --brand-blue: #3c3b6e;
  --brand-red: #b22234;
  --brand-white: #ffffff;
  --brand-green: #16a34a;
  --admin-color: #16a34a; /* Green for admin instead of yellow */
}

/* Hidden panel styles - extracted from inline styles */
.hidden-panel {
  display: none;
}

/* User panel specific styles */
#user-panel {
  display: none;
}

/* Modal styles */
#user-details-modal {
  display: none;
}

/* Additional utility classes for better organization */
.show-panel {
  display: block;
}

.show-modal {
  display: flex;
}

/* Brand Color Utility Classes */
.brand-blue {
  color: var(--brand-blue);
}

.brand-red {
  color: var(--brand-red);
}

.brand-white {
  color: var(--brand-white);
}

.brand-green {
  color: var(--brand-green);
}

.admin-color {
  color: var(--admin-color);
}

.bg-admin-color {
  background-color: var(--admin-color);
}

/* Unified Navigation Styles */
.nav-unified {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-link {
  transition: all 0.2s ease;
  border-radius: 6px;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-link.admin {
  background-color: var(--admin-color);
}

.nav-link.admin:hover {
  background-color: #15803d;
}

.user-badge {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-brand-blue {
  background-color: var(--brand-blue);
}

.bg-brand-red {
  background-color: var(--brand-red);
}

.bg-brand-white {
  background-color: var(--brand-white);
}

.bg-brand-yellow {
  background-color: var(--brand-yellow);
}

/* Item detail tab styles */
.item-tab {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.item-tab:hover {
  color: #374151;
  border-color: #d1d5db;
}

.item-tab.active {
  color: #2563eb;
  border-color: #2563eb;
}

/* Tab content animations */
.tab-content {
  animation: fadeIn 0.2s ease-in-out;
}

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

/* Quick action buttons */
.fixed button {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

/* Quick stats cards */
.grid > div {
  transition: transform 0.2s ease-in-out;
}

.grid > div:hover {
  transform: translateY(-2px);
}

.border-brand-blue {
  border-color: var(--brand-blue);
}

.border-brand-red {
  border-color: var(--brand-red);
}

.border-brand-white {
  border-color: var(--brand-white);
}

.border-brand-yellow {
  border-color: var(--brand-yellow);
}

/* Button Styles with Brand Colors */
.btn-primary {
  background-color: var(--brand-blue);
  color: var(--brand-white);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: rgba(60, 59, 110, 0.8);
}

.btn-danger {
  background-color: var(--brand-red);
  color: var(--brand-white);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background-color: rgba(178, 34, 52, 0.8);
}

.btn-warning {
  background-color: var(--brand-yellow);
  color: var(--brand-blue);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-warning:hover {
  background-color: rgba(255, 255, 0, 0.8);
}

.collapsible-section {
  display: none;
  transition: all 0.3s ease;
}

.collapsible-section.show {
  display: block;
}

/* Role-based UI Colors */
:root {
  --user-color: #16a34a; /* Green */
  --team-leader-color: #2563eb; /* Blue */
  --admin-color: #ca8a04; /* Yellow/Gold */
}

/* Role labels */
.role-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  margin-left: 8px;
}

.role-label.user {
  background-color: var(--user-color);
}

.role-label.team-leader {
  background-color: var(--team-leader-color);
}

.role-label.admin {
  background-color: var(--admin-color);
}

/* Navigation highlighting */
.nav-highlight.user {
  border-bottom: 3px solid var(--user-color);
}

.nav-highlight.team-leader {
  border-bottom: 3px solid var(--team-leader-color);
}

.nav-highlight.admin {
  border-bottom: 3px solid var(--admin-color);
}

/* Page content highlighting */
.page-header.user {
  border-left: 4px solid var(--user-color);
}

.page-header.team-leader {
  border-left: 4px solid var(--team-leader-color);
}

.page-header.admin {
  border-left: 4px solid var(--admin-color);
}

/* Button styling based on role */
.btn-primary.user {
  background-color: var(--user-color);
}

.btn-primary.user:hover {
  background-color: #15803d;
}

.btn-primary.team-leader {
  background-color: var(--team-leader-color);
}

.btn-primary.team-leader:hover {
  background-color: #1d4ed8;
}

.btn-primary.admin {
  background-color: var(--admin-color);
}

.btn-primary.admin:hover {
  background-color: #a16207;
}

/* Section highlighting */
.section-highlight.user {
  border-left: 3px solid var(--user-color);
}

.section-highlight.team-leader {
  border-left: 3px solid var(--team-leader-color);
}

.section-highlight.admin {
  border-left: 3px solid var(--admin-color);
}

/* Override Tailwind with role colors */
.bg-role-color.user {
  background-color: var(--user-color) !important;
}

.bg-role-color.team-leader {
  background-color: var(--team-leader-color) !important;
}

.bg-role-color.admin {
  background-color: var(--admin-color) !important;
}

.text-role-color.user {
  color: var(--user-color) !important;
}

.text-role-color.team-leader {
  color: var(--team-leader-color) !important;
}

.text-role-color.admin {
  color: var(--admin-color) !important;
}

.border-role-color.user {
  border-color: var(--user-color) !important;
}

.border-role-color.team-leader {
  border-color: var(--team-leader-color) !important;
}

.border-role-color.admin {
  border-color: var(--admin-color) !important;
}