/* Custom tracking style based off the standalone tracking page from part 4.
   This stylesheet overrides the original palette to match the existing
   “blue idea” theme used throughout the Guy Logistics admin site.  To
   integrate the tracking view seamlessly with the rest of the site we
   keep the component layout from the original file but update
   colour variables and backgrounds. */

/* Colour palette
   The primary accent colour of the existing site is a bright cyan
   (#00f0ff). Secondary colours are softer turquoises and teal
   variations. We reuse these values here by redefining CSS custom
   properties. */
:root {
  /* Primary accent used for buttons, highlights and charts */
  --accent: #00f0ff;
  /* A softer version of the accent for subtle backgrounds */
  --accent-soft: rgba(0, 240, 255, 0.08);
  /* Base page background – matches the dark navy used on other
     dashboard pages */
  --bg: #050f1d;
  /* Card backgrounds – slightly lighter than the page background but
     still dark */
  --bg-card: #0a0f23;
  --bg-card-soft: #0e1730;
  /* Primary text colour */
  --text: #aefeff;
  /* Muted text colour for secondary information */
  --muted: #66ffcc;
  /* Status colours – retained from the original design */
  --danger: #ff5252;
  --success: #00ffaa;
  /* Border colour using a low‑opacity accent */
  --border: rgba(0, 240, 255, 0.25);
  /* Corner radii */
  --radius-lg: 18px;
  --radius-sm: 10px;
}

/* Reset and typography – keep sensible defaults */
* {
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

/* Page container
   Centre the content within the main area and ensure it takes up
   available width. */
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  /* Remove the side padding to allow the content to align flush with
     the main panel's edges */
  padding: 0;
  /* Use block layout for the tracking page rather than centring the
     content; this allows the content to stretch the full width of the
     main panel. */
  display: block;
  justify-content: flex-start;
}

.page {
  width: 100%;
  /* Allow the tracking view to stretch across the full available space.  The
     max-width from the original design is removed so that users with
     larger screens see more information without unnecessary margins. */
  max-width: none;
}

/* Header styling */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, #00f0ff, #003244 40%, #002830 100%);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #011419;
  font-weight: 800;
  font-size: 22px;
}

.brand-text h1 {
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.brand-text p {
  font-size: 0.8rem;
  color: var(--muted);
}

.season-tag {
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(0,240,255,0.12), rgba(0,100,150,0.35));
  border: 1px solid rgba(0,240,255,0.5);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.season-tag span {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}

main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card styling
   We keep the frosted glass effect but swap to the blue palette. */
.card {
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.4));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 240, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  padding: 16px 18px;
  backdrop-filter: blur(14px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}

.card-header h2 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  background-color: rgba(5, 10, 20, 0.9);
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.filters-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

label {
  font-size: 0.75rem;
  color: var(--muted);
}

select,
input[type="date"] {
  background-color: #03101f;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  outline: none;
  min-width: 150px;
}

select:focus,
input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35);
}

button {
  background: linear-gradient(135deg, var(--accent), #006688);
  border: none;
  color: #011419;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 25px rgba(0,240,255,0.35);
  white-space: nowrap;
}

button.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: none;
}

/* Summary cards */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.summary-card {
  padding: 10px;
  background: rgba(0, 240, 255, 0.05);
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid rgba(0, 240, 255, 0.15);
}

.summary-label {
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.summary-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent);
}

/* Table styles */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background-color: rgba(0, 240, 255, 0.02);
  border: 1px solid rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(10px);
}

th,
td {
  padding: 8px 10px;
  border: 1px solid rgba(0, 240, 255, 0.15);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
  text-align: left;
}

th {
  background-color: #0f2233;
  color: var(--accent);
}

td.highlight {
  color: var(--accent);
  font-weight: bold;
}

/* Inner table for details */
.inner-table {
  width: 100%;
  border-collapse: collapse;
}

.inner-table th,
.inner-table td {
  padding: 4px 6px;
  border: 1px solid rgba(0, 240, 255, 0.1);
  max-width: unset;
  white-space: nowrap;
}

.inner-table th {
  background-color: #0d1c2d;
  color: var(--accent);
}

.inner-table td {
  background-color: rgba(0, 240, 255, 0.02);
}

/* Action buttons inside tables */
.action-btn {
  background: var(--accent);
  border: none;
  color: #011419;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.action-btn:hover {
  transform: scale(1.05);
}

.secondary-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* No results message */
.no-results {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* Footer styling */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 0.75rem;
  color: var(--muted);
}

footer strong {
  color: var(--accent);
}