/*
 * 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.
 */

:root {
  /* Business Color Palette - Muted & Professional */
  --bs-primary: #34495e; /* Wet Asphalt - Dark Blue-Grey */
  --bs-primary-rgb: 52, 73, 94;
  
  --bs-secondary: #7f8c8d; /* Concrete - Grey */
  --bs-secondary-rgb: 127, 140, 141;
  
  --bs-success: #27ae60; /* Nephritis - Muted Green */
  --bs-success-rgb: 39, 174, 96;
  
  --bs-info: #2980b9; /* Belize Hole - Muted Blue */
  --bs-info-rgb: 41, 128, 185;
  
  --bs-warning: #f39c12; /* Orange */
  --bs-warning-rgb: 243, 156, 18;
  
  --bs-danger: #c0392b; /* Pomegranate - Deep Red */
  --bs-danger-rgb: 192, 57, 43;

  --bs-body-bg: #f4f6f9; /* Very light grey background for depth */
  --bs-body-color: #2c3e50;
}

/* Typography Adjustments */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: #2c3e50;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Navbar Styling - Clean & White */
.navbar {
  background-color: #ffffff !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar-brand {
  color: #2c3e50 !important;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.navbar-nav .nav-link {
  color: #6c757d !important;
  font-weight: 500;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link.active {
  color: var(--bs-primary) !important;
}

.dropdown-menu {
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-radius: 0.5rem;
  padding: 0.5rem 0;
}

.dropdown-item {
  padding: 0.5rem 1.5rem;
  color: #495057;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: var(--bs-primary);
}

/* Card Styling - Elegant & Flat */
.card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.card-body {
  padding: 1.5rem;
}

/* Button Refinements */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  box-shadow: none !important; /* Flat design */
}

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

.btn-primary:hover {
  background-color: #2c3e50; /* Darker shade */
  border-color: #2c3e50;
}

/* Status Badges - Subtle & Professional */
.status-badge {
  padding: 0.35em 0.8em;
  font-weight: 500;
  font-size: 0.75rem;
  border-radius: 2rem;
  letter-spacing: 0.02em;
  display: inline-block;
  text-transform: uppercase;
}

.status-draft {
  background-color: #f1f2f6;
  color: #7f8c8d;
  border: 1px solid #dfe6e9;
}

.status-submitted {
  background-color: #fff8e1;
  color: #d35400; /* Darker orange for text readability */
  border: 1px solid #ffe0b2;
}

.status-approved {
  background-color: #e8f5e9;
  color: #27ae60;
  border: 1px solid #c8e6c9;
}

/* Table Styling */
.table {
  margin-bottom: 0;
}

.table thead th {
  background-color: #f8f9fa;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #dee2e6;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.table td {
  vertical-align: middle;
  color: #495057;
}