/* ==========================================================================
   Variables and Base Styles
   ========================================================================== */
:root {
  --bs-primary: #034694; /* Dark blue */
  --bs-primary-rgb: 3, 70, 148;
  --bs-secondary: #0077c0; /* Medium blue */
  --bs-secondary-rgb: 0, 119, 192;
  --bs-accent: #5D8AA8; /* Light blue */
  --bs-accent-rgb: 93, 138, 168;
}

body {
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  background: linear-gradient(135deg, #f7fafc 0%, #f0f7ff 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 { 
  text-align: center; 
  color: var(--bs-primary); 
}

/* ==========================================================================
   Layout Components
   ========================================================================== */
.container { 
  max-width: 100%; 
  margin: 0 auto; 
  padding: 15px; 
}

.main-content {
  flex: 1;
  padding: 1.5rem;
}

.footer {
  margin-top: auto;
  padding: 1rem 0;
  background-color: var(--bs-primary);
  color: white;
  border-top: 1px solid var(--bs-accent);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar.bg-primary, .navbar-dark.bg-primary {
  background-color: var(--bs-primary) !important;
}

.nav .btn {
  font-size: 1.1rem;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 1px 4px rgba(3, 70, 148, 0.07);
}

.nav .btn-primary {
  background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
  border: none;
}

.nav .btn-success {
  background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-accent) 100%);
  border: none;
}

.nav .btn-secondary {
  background: linear-gradient(90deg, var(--bs-accent) 0%, var(--bs-secondary) 100%);
  border: none;
  color: #fff;
}

.nav .btn:hover, .nav .btn:focus {
  box-shadow: 0 4px 16px rgba(3, 70, 148, 0.13);
  transform: translateY(-2px) scale(1.03);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary, .btn-primary:focus, .btn-primary:active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.btn-success, .btn-success:focus, .btn-success:active {
  background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-accent) 100%) !important;
  border: none !important;
}

.btn-secondary, .btn-secondary:focus, .btn-secondary:active {
  background: var(--bs-accent) !important;
  border: none !important;
  color: #fff !important;
}

/* ==========================================================================
   Links
   ========================================================================== */
a, .link-primary {
  color: var(--bs-primary) !important;
}

a:hover, .link-primary:hover {
  color: var(--bs-secondary) !important;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(3, 70, 148, 0.10), 0 1.5px 6px rgba(0,0,0,0.03);
  background: #fff;
  margin-bottom: 1.5rem;
}

.card-header {
  background: linear-gradient(90deg, var(--bs-accent) 0%, #fff 100%);
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 1.15rem;
  border-bottom: 2.5px solid var(--bs-secondary);
  letter-spacing: 0.5px;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.card-title {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.card-desc {
  color: var(--bs-accent);
  font-size: 0.97rem;
  margin-top: 0.15rem;
  margin-bottom: 0.2rem;
  font-weight: 400;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-responsive {
  border: 0;
}

.table-responsive .table {
  margin-bottom: 0;
}

.table thead th {
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-secondary);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-label {
  margin-bottom: 0.25rem;
  color: var(--bs-primary);
}

.form-control, .form-select {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  border-color: var(--bs-accent);
}

.form-control:focus, .form-select:focus {
  border-color: var(--bs-secondary);
  box-shadow: 0 0 0 0.25rem rgba(0, 119, 192, 0.25);
}

.input-group .btn {
  padding: 0.375rem 0.5rem;
}

/* ==========================================================================
   Alerts and Badges
   ========================================================================== */
.alert {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.alert-primary {
  background-color: rgba(3, 70, 148, 0.1);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.alert-secondary {
  background-color: rgba(93, 138, 168, 0.1);
  border-color: var(--bs-accent);
  color: var(--bs-accent);
}

.alert-success {
  background-color: rgba(0, 119, 192, 0.1);
  border-color: var(--bs-secondary);
  color: var(--bs-secondary);
}

.badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

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

.badge-secondary {
  background-color: var(--bs-secondary);
}

.badge-accent {
  background-color: var(--bs-accent);
}

/* ==========================================================================
   Documentation
   ========================================================================== */
.doc-content pre {
  padding: 10px;
  font-size: 0.8rem;
  background-color: rgba(3, 70, 148, 0.05);
  border-left: 3px solid var(--bs-primary);
}

.doc-content h2 {
  font-size: 1.5rem;
  margin-top: 20px;
  color: var(--bs-primary);
}

.doc-content h3 {
  font-size: 1.2rem;
  margin-top: 15px;
  color: var(--bs-secondary);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 1200px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 992px) {
  .main-content {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .display-6 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  .navbar-brand img {
    height: 30px;
  }
  
  .card-header {
    padding: 0.75rem 1rem;
  }
  
  .table-responsive {
    border: 0;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .d-flex.gap-2 {
    gap: 0.5rem !important;
  }
  
  .doc-sidebar {
    width: 100%;
    position: static;
  }
  
  #sidebar-wrapper {
    width: 100%;
    position: static;
    height: auto;
  }
  
  .list-group-item {
    padding: 0.5rem 0.75rem;
  }
  
  .list-group-item i {
    margin-right: 0.5rem;
  }
}

@media (max-width: 576px) {
  .card { 
    border-radius: 12px;
    margin-bottom: 1rem;
  }
  
  .container-fluid { 
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .main-content {
    padding: 0.75rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-header {
    padding: 0.5rem 0.75rem;
  }
  
  .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .display-6 {
    font-size: 1.75rem;
  }
  
  .table th, .table td {
    padding: 0.5rem;
  }
  
  .navbar .text-white {
    font-size: 0.9rem;
  }
  
  .footer {
    padding: 0.75rem 0;
    font-size: 0.875rem;
  }
  
  .table-responsive .table td, 
  .table-responsive .table th {
    white-space: nowrap;
  }
  
  .table .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
  
  .card-text {
    font-size: 0.875rem;
  }
  
  .list-group-item h5 {
    font-size: 1rem;
  }
  
  .list-group-item p {
    font-size: 0.875rem;
  }
  
  .card-header h5 {
    font-size: 1.1rem;
  }
  
  .card-header h6 {
    font-size: 0.9rem;
  }
  
  .card-header .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .card-header .badge {
    margin-top: 0.25rem;
  }
  
  .card-body .display-6 {
    font-size: 1.5rem;
  }
  
  .card-body h5 {
    font-size: 1rem;
  }
}