/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ==========================================================
   Custom Bootstrap Color System
   Primary: Deep Navy | Success: Teal | Danger: Deep Red
   Warning: Amber | Info: Ocean Blue | Secondary: Slate Gray
   ========================================================== */

:root {
  --bs-primary: #2A2B5A;
  --bs-primary-rgb: 42, 43, 90;
  --bs-secondary: #6C757D;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: #0D7A5F;
  --bs-success-rgb: 13, 122, 95;
  --bs-danger: #C53030;
  --bs-danger-rgb: 197, 48, 48;
  --bs-warning: #E6A817;
  --bs-warning-rgb: 230, 168, 23;
  --bs-info: #4A90B8;
  --bs-info-rgb: 74, 144, 184;
}

/* --- Primary (#2A2B5A) --- */
.bg-primary { background-color: #2A2B5A !important; }
.text-primary { color: #2A2B5A !important; }
.border-primary { border-color: #2A2B5A !important; }

.btn-primary {
  --bs-btn-bg: #2A2B5A;
  --bs-btn-border-color: #2A2B5A;
  --bs-btn-hover-bg: #1F204A;
  --bs-btn-hover-border-color: #1F204A;
  --bs-btn-active-bg: #171839;
  --bs-btn-active-border-color: #171839;
}

.btn-outline-primary {
  --bs-btn-color: #2A2B5A;
  --bs-btn-border-color: #2A2B5A;
  --bs-btn-hover-bg: #2A2B5A;
  --bs-btn-hover-border-color: #2A2B5A;
  --bs-btn-active-bg: #1F204A;
  --bs-btn-active-border-color: #1F204A;
}

/* --- Success (#0D7A5F) --- */
.bg-success { background-color: #0D7A5F !important; }
.text-success { color: #0D7A5F !important; }
.border-success { border-color: #0D7A5F !important; }

.btn-success {
  --bs-btn-bg: #0D7A5F;
  --bs-btn-border-color: #0D7A5F;
  --bs-btn-hover-bg: #0A6550;
  --bs-btn-hover-border-color: #0A6550;
  --bs-btn-active-bg: #085040;
  --bs-btn-active-border-color: #085040;
}

.btn-outline-success {
  --bs-btn-color: #0D7A5F;
  --bs-btn-border-color: #0D7A5F;
  --bs-btn-hover-bg: #0D7A5F;
  --bs-btn-hover-border-color: #0D7A5F;
  --bs-btn-active-bg: #0A6550;
  --bs-btn-active-border-color: #0A6550;
}

.alert-success {
  --bs-alert-bg: #d1f2eb;
  --bs-alert-color: #085040;
  --bs-alert-border-color: #b0e6d9;
}

/* --- Danger (#C53030) --- */
.bg-danger { background-color: #C53030 !important; }
.text-danger { color: #C53030 !important; }
.border-danger { border-color: #C53030 !important; }

.btn-danger {
  --bs-btn-bg: #C53030;
  --bs-btn-border-color: #C53030;
  --bs-btn-hover-bg: #A82828;
  --bs-btn-hover-border-color: #A82828;
  --bs-btn-active-bg: #8B2020;
  --bs-btn-active-border-color: #8B2020;
}

.btn-outline-danger {
  --bs-btn-color: #C53030;
  --bs-btn-border-color: #C53030;
  --bs-btn-hover-bg: #C53030;
  --bs-btn-hover-border-color: #C53030;
  --bs-btn-active-bg: #A82828;
  --bs-btn-active-border-color: #A82828;
}

.alert-danger {
  --bs-alert-bg: #fde8e8;
  --bs-alert-color: #8B2020;
  --bs-alert-border-color: #fbd5d5;
}

/* --- Warning (#E6A817) --- */
.bg-warning { background-color: #E6A817 !important; }
.text-warning { color: #E6A817 !important; }
.border-warning { border-color: #E6A817 !important; }

.btn-warning {
  --bs-btn-bg: #E6A817;
  --bs-btn-border-color: #E6A817;
  --bs-btn-hover-bg: #C99213;
  --bs-btn-hover-border-color: #C99213;
  --bs-btn-active-bg: #A87B0F;
  --bs-btn-active-border-color: #A87B0F;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-warning {
  --bs-btn-color: #E6A817;
  --bs-btn-border-color: #E6A817;
  --bs-btn-hover-bg: #E6A817;
  --bs-btn-hover-border-color: #E6A817;
  --bs-btn-active-bg: #C99213;
  --bs-btn-active-border-color: #C99213;
}

.alert-warning {
  --bs-alert-bg: #fef3cd;
  --bs-alert-color: #A87B0F;
  --bs-alert-border-color: #fde9a6;
}

/* --- Info (#4A90B8) --- */
.bg-info { background-color: #4A90B8 !important; }
.text-info { color: #4A90B8 !important; }
.border-info { border-color: #4A90B8 !important; }

.btn-info {
  --bs-btn-bg: #4A90B8;
  --bs-btn-border-color: #4A90B8;
  --bs-btn-hover-bg: #3D7A9E;
  --bs-btn-hover-border-color: #3D7A9E;
  --bs-btn-active-bg: #326585;
  --bs-btn-active-border-color: #326585;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-info {
  --bs-btn-color: #4A90B8;
  --bs-btn-border-color: #4A90B8;
  --bs-btn-hover-bg: #4A90B8;
  --bs-btn-hover-border-color: #4A90B8;
  --bs-btn-active-bg: #3D7A9E;
  --bs-btn-active-border-color: #3D7A9E;
}

.alert-info {
  --bs-alert-bg: #dceef7;
  --bs-alert-color: #326585;
  --bs-alert-border-color: #c3e0f0;
}

/* --- Badge overrides for consistent colors --- */
.badge.bg-success { color: #fff !important; }
.badge.bg-danger { color: #fff !important; }
.badge.bg-warning { color: #fff !important; }
.badge.bg-info { color: #fff !important; }

/* Hide scrollbar on nav tabs for clean mobile scrolling */
.nav.overflow-auto::-webkit-scrollbar {
  display: none;
}

/* Timeline Styles for Audit History */
.timeline {
  position: relative;
  padding-left: 2rem;
  overflow-x: hidden;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #dee2e6, #6c757d, #dee2e6);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
}

.timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  z-index: 2;
}

.timeline-marker-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 3px solid white;
}

.timeline-content {
  margin-left: 1rem;
  width: calc(100% - 1rem);
  overflow: hidden;
}

.timeline-item:last-child .timeline::before {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .timeline {
    padding-left: 1.5rem;
    margin-left: 0;
  }
  
  .timeline::before {
    left: 0.75rem;
    width: 1px;
  }
  
  .timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    z-index: 2;
  }
  
  .timeline-marker-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    border: 2px solid white;
  }
  
  .timeline-content {
    margin-left: 0.5rem;
    width: calc(100% - 0.5rem);
    display: block;
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 576px) {
  .timeline {
    padding-left: 1.25rem;
  }
  
  .timeline::before {
    left: 0.625rem;
  }
  
  .timeline-marker {
    left: -1.25rem;
  }
  
  .timeline-marker-icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
  }
  
  .timeline-content {
    margin-left: 0.25rem;
    width: calc(100% - 0.25rem);
  }
}

/* Avatar styles */
.avatar {
  font-weight: bold;
  text-transform: uppercase;
}

/* Change item styles */
.change-item {
  background-color: #f8f9fa;
  border-color: #dee2e6 !important;
  transition: all 0.2s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.change-item:hover {
  background-color: #e9ecef;
  border-color: #adb5bd !important;
}

.change-item .badge {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  display: inline-block;
  flex-shrink: 0;
}

.change-item .d-flex {
  gap: 0.5rem;
}

.change-item .fw-bold {
  flex-shrink: 0;
  min-width: fit-content;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  .card-body {
    padding: 1rem !important;
  }
  
  .badge {
    font-size: 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .action-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .model-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .change-item {
    padding: 0.75rem !important;
  }
  
  .change-item .badge {
    font-size: 0.7rem;
    line-height: 1.3;
    padding: 0.4rem 0.6rem;
  }
  
  .change-item .d-flex {
    gap: 0.25rem;
  }
  
  .change-item .fw-bold {
    font-size: 0.8rem;
  }
  
  .timeline-content .card {
    margin: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  }
  
  .d-flex.gap-2 {
    gap: 0.5rem !important;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .card-body {
    padding: 0.75rem !important;
  }
  
  .badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .action-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .model-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .change-item {
    padding: 0.5rem !important;
  }
  
  .change-item .badge {
    font-size: 0.6rem;
    line-height: 1.2;
    padding: 0.3rem 0.5rem;
  }
  
  .change-item .d-flex {
    gap: 0.2rem;
  }
  
  .change-item .fw-bold {
    font-size: 0.75rem;
  }
  
  .fw-bold {
    font-size: 0.875rem;
  }
  
  .small {
    font-size: 0.75rem;
  }
}