/* TAC Unified Sidebar CSS - Clean implementation */

/* Variables for consistent sizing & colors */
:root {
  --sidebar-width: 240px; /* Reduced from 280px to fit smaller text */
  --navbar-height: 50px;
  --sidebar-bg: #1a1d21;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --tac-primary: #14819c;
  --tac-secondary: #e85a0c;  
  --tac-dark: #222529;
  --transition-speed: 0.3s;
}

/* Core Layout Structure */
body {
  min-height: 100vh;
  padding-top: var(--navbar-height);
}

/* Navbar styles */
.navbar {
  height: var(--navbar-height);
  z-index: 1040;
  background-color: var(--tac-dark);
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar-toggler {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.1);
  margin-right: 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25);
}

/* Sidebar Base Styles */
.sidebar {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  overflow-y: auto;
  z-index: 1030;
  transition: transform var(--transition-speed) ease;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
}

/* Main content area */
.content {
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-speed) ease;
  min-height: calc(100vh - var(--navbar-height));
  max-width: calc(100% - var(--sidebar-width));
  padding: 0 1rem;
}

/* Container sizing inside content */
.content .container-fluid {
  max-width: 1400px;
  margin: 0 auto;
}

/* Mobile-specific sidebar behavior */
@media (max-width: 767.98px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.show {
    transform: translateX(0);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  }
  
  .content {
    margin-left: 0;
    max-width: 100%;
  }
  
  /* Overlay when sidebar is open */
  body.sidebar-open::after {
    content: '';
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1025;
  }
}

/* Sidebar Header / Logo Section */
.sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.sidebar-brand {
  color: white;
  text-decoration: none;
  display: block;
}

.sidebar-brand:hover {
  color: white;
  text-decoration: none;
}

.sidebar-brand span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Navigation Elements */
.sidebar-heading {
  font-size: 0.64rem; /* Reduced from 0.8rem by 20% */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  padding: 0.75rem 0.75rem 0.2rem; /* Reduced padding */
  margin-top: 0.5rem; /* Reduced margin */
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-sidebar {
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-sidebar .nav-item {
  margin: 0;
}

.nav-sidebar .nav-link {
  padding: 0.4rem 0.75rem; /* Reduced padding for more compact layout */
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  border-left: 2px solid transparent;
  transition: all 0.2s;
  font-size: 0.72rem; /* Reduced from 0.9rem by 20% */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-sidebar .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: white;
}

.nav-sidebar .nav-link.active {
  background-color: rgba(20, 129, 156, 0.15);
  color: var(--tac-primary);
  border-left-color: var(--tac-primary);
}

.nav-icon {
  width: 1.2rem; /* Reduced from 1.5rem to fit with smaller text */
  margin-right: 0.6rem; /* Reduced from 0.8rem */
  text-align: center;
  font-size: 0.8rem; /* Reduced from 1rem by 20% */
}

/* Special Navigation Controls */
.search-form {
  padding: 0.75rem 1rem;
}

/* Custom TAC Colors */
.btn-teal {
  background-color: var(--tac-primary);
  border-color: var(--tac-primary);
  color: white;
}

.btn-teal:hover {
  background-color: #106e86;
  border-color: #106e86;
  color: white;
}

.bg-teal {
  background-color: var(--tac-primary);
}

.bg-teal-light {
  background-color: rgba(20, 129, 156, 0.15);
}

.text-teal {
  color: var(--tac-primary);
}

.bg-terra {
  background-color: var(--tac-secondary);
}

/* User dropdown styling */
.user-dropdown .dropdown-toggle {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.user-dropdown .dropdown-toggle:hover {
  color: white;
  text-decoration: none;
}

/* Fix for white text in white containers */
.card, .card-body, .form-control, .card-header, .card-footer {
  color: #212529;
}

/* Ensure text color contrast in all containers */
.bg-white, .bg-light {
  color: #212529;
}

.table td, .table th {
  color: #212529;
}

/* Fix for typology cards with white text */
.card-body p {
  color: #212529;
}

/* Fix for specific white text containers shown in typologies page */
.typology-card .card-body p {
  color: #212529 !important;
}

.table-responsive .table {
  color: #212529;
}