/*
site.css - Custom styles for Professional Car Diagnostic UI
Compatible with Bootstrap v5.1.0
Author: ChatGPT (25 June 2025)
*/

/* ---------------- Root Variables ---------------- */
:root {
  --cdq-primary: #0d47a1;     /* Deep blue */
  --cdq-secondary: #ffb300;   /* Amber */
  --cdq-dark: #0a1929;        /* Navy‑black */
  --cdq-light: #f5f7fa;       /* Very light gray */
  --cdq-success: #4caf50;     /* Green */
  --cdq-warning: #ff9800;     /* Orange */
  --cdq-danger:  #f44336;     /* Red */
  --cdq-font-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------------- Global Overrides ---------------- */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #f8f9fa;
}

/* ---------------- Navbar ---------------- */
.navbar-cdq {
  background-color: var(--cdq-primary);
}
.navbar-cdq .navbar-brand,
.navbar-cdq .nav-link {
  color: #fff;
}
.navbar-cdq .nav-link.active,
.navbar-cdq .nav-link:hover {
  color: var(--cdq-secondary);
}

/* ---------------- Sidebar ---------------- */


.sidebar {
    min-height: 100vh;
    background-color: #0a192f; /* dark navy */
}

    .sidebar .nav-link {
        padding: 0.75rem 1rem;
        font-weight: 500;
        color: #cfd8dc;
        border-radius: 0.375rem;
        transition: background 0.2s ease-in-out;
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }
/* ---------------- Dashboard Cards ---------------- */
.diagnostic-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.diagnostic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.diagnostic-card .card-header {
  background: var(--cdq-primary);
  color: #fff;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* ---------------- Status Badges ---------------- */
.badge-status {
  font-size: .85rem;
  padding: .4em .7em;
  border-radius: .5rem;
}
.badge-status.ok       { background: var(--cdq-success);  color:#fff; }
.badge-status.warning  { background: var(--cdq-warning);  color:#fff; }
.badge-status.error    { background: var(--cdq-danger);   color:#fff; }

/* ---------------- Progress ---------------- */
.progress-cdq {
  height: .75rem;
  border-radius: .5rem;
}
.progress-cdq .progress-bar {
  background-color: var(--cdq-secondary);
}

/* ---------------- Tables ---------------- */
.table-cdq thead {
  background: var(--cdq-primary);
  color: #fff;
}
.table-cdq tbody tr:hover {
  background: rgba(0,0,0,.03);
}

/* ---------------- Buttons ---------------- */
.btn-cdq-primary {
  background-color: var(--cdq-primary);
  border-color: var(--cdq-primary);
  color: #fff;
}
.btn-cdq-primary:hover,
.btn-cdq-primary:focus {
  background-color: #083a86; /* Slightly darker */
  border-color: #083a86;
}

/* ---------------- Utility Classes ---------------- */
.bg-hero {
  background: url('hero-bg.png') center/cover no-repeat;
  min-height: 400px;
}
.logo-img {
  width: 200px;
}

/* ---------------- Responsive Tweaks ---------------- */
@media (max-width: 991.98px) {
    .sidebar {
        width: 250px !important;
        transform: translateX(-100%);
    }
}