/**
 * Customer themes: body.theme-{key} sets CSS variables for colour scheme.
 * Logo colours inform primary/accent; use var(--brand-primary), var(--brand-accent), var(--brand-bg) in app styles.
 */

/* Default (no theme) */
body {
  --brand-primary: #0d6efd;
  --brand-accent: #ffc107;
  --brand-bg: #f8f9fa;
  --brand-text: #212529;

  /* Ship SVG colours */
  --ship-hull-start: #51915a;
  --ship-hull-end: #4fa846;
  --ship-deck: #efefef;
  --ship-cargo: #a7d3b6;
  --ship-cargo-shadow-start: #a7d3b6;
  --ship-cargo-shadow-end: #01843d;
  --ship-text: #2d302f;
}

/* 3 Islands Intermodal: muted blue + copper/rust (hull/cargo harmonise like Ravensdown) */
body.theme-3_islands {
  --brand-primary: #2c5f8d;
  --brand-accent: #b87333;
  --brand-bg: #f5f8fb;
  --brand-text: #1e3044;

  /* Hull: lighter steel blue into logo blue */
  --ship-hull-start: #5c8aaf;
  --ship-hull-end: #2c5f8d;
  --ship-deck: #efefef;
  /* Cargo: soft powder blue; shadow deepens to navy (accent copper is reserved for UI, not ship fill) */
  --ship-cargo: #b8d4ea;
  --ship-cargo-shadow-start: #b8d4ea;
  --ship-cargo-shadow-end: #1e4a6e;
  --ship-text: #2a3540;
}

/* Ravensdown: dark grey + green */
body.theme-ravensdown {
  --brand-primary: #006A31;
  --brand-accent: #07AA59;
  --brand-bg: #fafafa;
  --brand-text: #122220;

  --ship-hull-start: #51915a;
  --ship-hull-end: #4fa846;
  --ship-deck: #efefef;
  --ship-cargo: #a7d3b6;
  --ship-cargo-shadow-start: #a7d3b6;
  --ship-cargo-shadow-end: #01843d;
  --ship-text: #2d302f;
}

/* Lyttelton Port Company: navy + orange accent */
body.theme-lyttelton_port {
  --brand-primary: #1a365d;
  --brand-accent: #ed8936;
  --brand-bg: #ebf8ff;
  --brand-text: #1a202c;

  --ship-hull-start: #51915a;
  --ship-hull-end: #4fa846;
  --ship-deck: #efefef;
  --ship-cargo: #a7d3b6;
  --ship-cargo-shadow-start: #a7d3b6;
  --ship-cargo-shadow-end: #01843d;
  --ship-text: #2d302f;
}

/* Napier Port: dark grey + orange-red */
body.theme-napier_port {
  --brand-primary: #4a5568;
  --brand-accent: #e53e3e;
  --brand-bg: #fff5f5;
  --brand-text: #2d3748;

  --ship-hull-start: #51915a;
  --ship-hull-end: #4fa846;
  --ship-deck: #efefef;
  --ship-cargo: #a7d3b6;
  --ship-cargo-shadow-start: #a7d3b6;
  --ship-cargo-shadow-end: #01843d;
  --ship-text: #2d302f;
}

/* Northport: navy + green + amber */
body.theme-northport {
  --brand-primary: #1a2440;
  --brand-accent: #358d4b;
  --brand-amber: #eaa03d;
  --brand-bg: #f0f4f8;
  --brand-text: #1a2440;

  --ship-hull-start: #51915a;
  --ship-hull-end: #4fa846;
  --ship-deck: #efefef;
  --ship-cargo: #a7d3b6;
  --ship-cargo-shadow-start: #a7d3b6;
  --ship-cargo-shadow-end: #01843d;
  --ship-text: #2d302f;
}

/* ---------------------------------------------------------------------------
 * Apply theme colours to UI (when body has a theme-* class).
 * Navbar, buttons, links, title block, and page background use the customer palette.
 */
body[class*="theme-"] {
  background-color: var(--brand-bg) !important;
}

body[class*="theme-"] .navbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--brand-primary) !important;
}

body[class*="theme-"] .btn-primary,
body[class*="theme-"] .btn-primary:hover,
body[class*="theme-"] .btn-primary:focus {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

body[class*="theme-"] .btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

body[class*="theme-"] .btn-outline-primary:hover,
body[class*="theme-"] .btn-outline-primary:focus {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

body[class*="theme-"] .navbar-brand span {
  color: var(--brand-primary) !important;
}

body[class*="theme-"] a:not(.btn):not(.dropdown-item) {
  color: var(--brand-primary) !important;
}

body[class*="theme-"] .alert-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Title block on Live View and Jobs: obvious theme strip so customer colours are visible */
body[class*="theme-"] .title-block {
  background-color: var(--brand-bg);
  border-left: 5px solid var(--brand-primary);
  padding-left: 1rem;
  border-radius: 0 8px 8px 0;
}

body[class*="theme-"] .live-title__line1 {
  color: var(--brand-primary) !important;
}

body[class*="theme-"] .live-title__line2,
body[class*="theme-"] .live-title__line3 {
  color: var(--brand-text) !important;
}