/*
 * PIARC Worksite Management Toolkit Stylesheet
 *
 * This stylesheet defines both light and dark themes using CSS custom properties.
 * Colours derive from PIARC’s digital brand guidelines: primary blue (#004681),
 * secondary blue (#2B6492), primary orange (#F4A000), secondary orange (#F39F19) and
 * light grey (#D7E1EA). Typography defaults to Calibri for body copy with
 * Impact used for prominent headings when available. The theme toggle switches
 * between light and dark by changing the data-theme attribute on the root element.
 */

/* Base theme variables (light mode) */
:root {
  --primary-blue: #004681;
  --secondary-blue: #2B6492;
  --primary-orange: #F4A000;
  --secondary-orange: #F39F19;
  --light-grey: #D7E1EA;
  --background-colour: #ffffff;
  --surface-colour: #f7fafa;
  /* Base text colour used for body content in light mode */
  --body-text-colour: #0d2b42;
  /* Heading colour defaults to primary blue in light mode */
  --heading-colour: var(--primary-blue);
  --card-shadow: rgba(0, 0, 0, 0.1);
  /* Cost bar colours for results breakdown */
  /* Time: PIARC yellow; Fuel: PIARC primary blue; Carbon: secondary blue */
  --time: var(--primary-orange);
  --ops: var(--primary-blue);
  --carbon: var(--secondary-blue);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --background-colour: #101112;
  --surface-colour: #1e1f21;
  /* Use pale grey for body text in dark mode */
  --body-text-colour: #f3f4f6;
  /* Headings switch to PIARC yellow in dark mode for contrast */
  --heading-colour: var(--primary-orange);
  --light-grey: #253040;
  --card-shadow: rgba(0, 0, 0, 0.6);
  /* Override cost bar colours in dark mode for better contrast */
  --time: var(--primary-orange);
  --ops: var(--primary-blue);
  --carbon: var(--secondary-blue);
}

/* Global styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--background-colour);
  /* Use body text colour variable rather than a fixed name so it switches in dark mode */
  color: var(--body-text-colour);
  font-family: Calibri, "Arial Narrow", Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

/* Improve heading legibility by adding small letter spacing */
h1, h2, h3 {
  letter-spacing: 0.5px;
}

/* Utility class for screen reader only text */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Header (navbar) — stays light in both themes */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Keep header light regardless of theme */
  --surface: #ffffff;                  /* local light tokens for header subtree */
  --background-colour: #ffffff;
  --surface-colour: #ffffff;
  --body-text-colour: #0d2b42;
  --heading-colour: var(--primary-blue);
  --muted-text-colour: #6b7280;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --btn-bg: #ffffff;
  --btn-border: #d1d5db;

  background-color: #ffffff;
  color: var(--primary-blue);
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #D7E1EA;
  color-scheme: light; /* native controls render in light mode */
}

.logo-wrapper {
  flex: 0 0 auto;
}

.logo {
  height: 40px;
  width: auto;
  margin-right: 0.5rem;
}

.app-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  /* Improve legibility by adding a small amount of letter spacing */
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  /* Always use primary blue for the header title regardless of theme */
  color: var(--primary-blue);
}

.control-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.control-bar select,
.control-bar button {
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--input-border);
}

.control-bar select {
  background: var(--input-bg);
  color: #0d2b42;
}

.control-bar button {
  cursor: pointer;
  background-color: var(--secondary-orange);
  color: #ffffff;
  border-color: var(--secondary-orange);
}

/* Main content */
.main-content {
  padding: 1rem;
}

.section-title {
  font-family: Impact, "Arial Black", sans-serif;
  /* Use heading colour variable which adapts per theme */
  color: var(--heading-colour);
  margin-top: 0;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.tool-card {
  background-color: var(--surface-colour);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.tool-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tool-title {
  margin-top: 0;
  font-family: Impact, "Arial Black", sans-serif;
  /* Use heading colour variable which adapts per theme */
  color: var(--heading-colour);
  font-size: 1.2rem;
}

.tool-description {
  flex-grow: 1;
}

.tool-link {
  align-self: flex-start;
  background-color: var(--primary-orange);
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  transition: background-color 0.2s ease-in-out;
}

.tool-link:hover {
  background-color: var(--secondary-orange);
}

/* New styles for advanced settings and currency pill */
.advanced-card details {
  margin: 0.5rem 0;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  background-color: var(--surface-colour);
  padding: 0.5rem 0.75rem;
}
.advanced-card details summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--heading-colour);
  outline: none;
  list-style: none;
}
.advanced-card details summary::-webkit-details-marker {
  display: none;
}
.advanced-card .form-group {
  margin-bottom: 0.5rem;
}
/* Currency pill styling */
.currency-pill {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid var(--secondary-orange);
  background-color: var(--light-grey);
  color: var(--primary-blue);
  white-space: nowrap;
}
[data-theme="dark"] .currency-pill {
  background-color: #253040;
  color: var(--primary-orange);
  border-color: var(--primary-orange);
}

.coming-soon {
  font-style: italic;
  color: var(--secondary-orange);
  margin-top: 0.5rem;
}

/* Footer */
.app-footer {
  text-align: center;
  padding: 1rem;
  background-color: var(--light-grey);
  /* Use heading colour so it adjusts for dark/light mode */
  color: var(--heading-colour);
}

/* Form styles for tool pages */
/* Layout for the tool: diagram on the left and cards on the right.  We prevent wrapping
   so that the diagram and cards stay side by side on wide screens. */
.tool-container {
  /* Lay out the diagram and cards side by side. On wider screens this
   * prevents the long vertical scroll by splitting space into two
   * columns. The diagram sits on the left and the cards on the right. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: 1rem;
}

/* Diagram occupies roughly 40% of the horizontal space. */
.diagram {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin: 0;
}

.diagram svg {
  max-width: 100%;
  height: auto;
}

/* Cards fill the remaining horizontal space. */
/* Cards wrapper uses a grid so that input cards can appear in
   multiple columns on wider screens. Cards with the class
   `.full-width` span across both columns. */
.cards-wrapper {
  flex: 1 1 60%;
  max-width: 60%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* Individual form sections take full available column width by default.
   Cards marked .full-width span across all columns to break the grid
   and provide full width for assumptions and results. */
.cards-wrapper .form-section {
  background-color: var(--surface-colour);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--card-shadow);
}

.cards-wrapper .form-section.full-width {
  grid-column: 1 / -1;
}

/* Individual form sections inside the cards wrapper take full width */
.cards-wrapper .form-section {
  flex: 1 1 auto;
  max-width: 100%;
  background-color: var(--surface-colour);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--card-shadow);
}

.form-section h2 {
  margin-top: 0;
  font-family: Impact, "Arial Black", sans-serif;
  /* Use theme-adaptive heading colour */
  color: var(--heading-colour);
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.form-group label {
  margin-bottom: 0.25rem;
}

.form-group input,
.form-group select {
  padding: 0.4rem;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  font-size: 1rem;
  /* Limit width of numeric inputs */
  max-width: 120px;
}

.button-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.button-row button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--primary-orange);
  color: #ffffff;
  font-size: 1rem;
}

.button-row button.reset {
  background-color: var(--secondary-blue);
}

/* Cost bar styles for results (time, fuel, carbon) */
.cost-bar {
  display: flex;
  height: 12px;
  margin: 0.3rem 0;
  border-radius: 4px;
  overflow: hidden;
}
.cost-bar .segment {
  height: 100%;
}
/* Results grid for summary cards */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.results-grid .item {
  background-color: var(--surface-colour);
  padding: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px var(--card-shadow);
}
.results-grid .item h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--heading-colour);
  font-family: Impact, "Arial Black", sans-serif;
}
.results-grid .item p {
  margin: 0;
}
/* Assumptions list styling */
.assumptions-list {
  list-style: disc inside;
  margin: 0;
  padding-left: 1rem;
  font-size: 0.9rem;
  color: var(--body-text-colour);
}
.assumptions-card h2 {
  margin-top: 0;
}

.results {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--light-grey);
  border-radius: 8px;
}

.results h3 {
  margin-top: 0;
  font-family: Impact, "Arial Black", sans-serif;
  /* Use theme-adaptive heading colour */
  color: var(--heading-colour);
}

.results table {
  width: 100%;
  border-collapse: collapse;
}

.results th,
.results td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--light-grey);
  text-align: left;
}

.results tr:last-child td {
  border-bottom: none;
}

/* Mode toggle for speed/closure selection */
.mode-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.mode-btn {
  padding: 0.4rem 1rem;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  background: var(--surface-colour);
  color: var(--heading-colour);
  cursor: pointer;
  font-size: 0.9rem;
}
.mode-btn.active {
  background: var(--primary-orange);
  color: #ffffff;
}

/* Generic toggle (e.g. unit selectors) */
.toggle {
  /* Use grid for toggles by default. Specific toggles will override
   * template columns to equalise button widths. */
  display: inline-grid;
  background-color: var(--surface-colour);
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  overflow: hidden;
}
.toggle button {
  padding: 0.3rem 0.8rem;
  border: none;
  background: none;
  color: var(--body-text-colour);
  cursor: pointer;
  font-size: 0.85rem;
}
.toggle button.active {
  background: var(--secondary-blue);
  color: #ffffff;
}

/* Equalise toggle buttons for unit, volume and duration toggles */
#unit-system-toggle,
#volume-unit-toggle,
#duration-unit-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* Widen the country selector so long country names are not truncated */
#country-select {
  min-width: 200px;
}

/* Slider and number inputs side by side */
.slider-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.slider-wrapper input[type=range] {
  flex: 1;
}
.slider-wrapper input[type=number] {
  width: 80px;
  padding: 0.4rem;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  background-color: var(--surface-colour);
  color: var(--body-text-colour);
}

/* Duration controls (number + toggle) */
.duration-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Reset defaults button */
.reset-defaults-btn {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--secondary-blue);
  color: #ffffff;
  font-size: 0.9rem;
}
.reset-defaults-btn:hover {
  background-color: var(--primary-blue);
}

/* Results card overrides */
.results-card {
  background-color: var(--surface-colour);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--card-shadow);
}
.results-card h2 {
  margin-top: 0;
  font-family: Impact, "Arial Black", sans-serif;
  color: var(--heading-colour);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.button-row button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--primary-orange);
  color: #ffffff;
  font-size: 0.9rem;
}
.button-row button.reset {
  background-color: var(--secondary-blue);
}

/* Modal styles for sensitivity analysis */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 100;
}
.modal[aria-hidden="false"] {
  display: block;
}
.modal .inner {
  background-color: var(--surface-colour);
  /* Larger modal dimensions for sensitivity analysis */
  margin: 5vh auto;
  width: 90vw;
  max-width: 1200px;
  height: 90vh;
  border-radius: 14px;
  box-shadow: 0 4px 20px var(--card-shadow);
  display: flex;
  flex-direction: column;
}
.modal header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--light-grey);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--heading-colour);
}
.close-x {
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--body-text-colour);
}
.modal .content {
  padding: 1.5rem;
  overflow: auto;
  flex: 1;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
}

/* Ensure the sensitivity chart expands within the modal */
.modal .content #sensChart {
  flex: 1;
  width: 100%;
  height: 100%;
}

#sensModal .inner { width: min(1000px, 92vw); max-height: 92vh; }
#sensModal .content { display: grid; grid-template-rows: auto 1fr; }

/* Let the chart fill available space (and be tall enough) */
#sensChart { width: 100%; height: clamp(320px, 60vh, 720px); }

#sensModal .content p.mini { 
  font-size: 0.95rem; 
  line-height: 1.5;
}

:root{
  /* a vivid purple that’s far from the fuel blue */
  --carbon-strong: #7c3aed;        /* purple-600 */
}

[data-theme="dark"]{
  /* a lighter, still vivid purple for dark mode */
  --carbon-strong: #c084fc;        /* purple-400 */
}

/* Light defaults */
:root {
  --surface: #ffffff;
  --body-text-colour: #1f2937;   /* slate-800 */
  --muted-text-colour: #6b7280;  /* gray-500 */
  --accent-colour: #f39f19;

  /* visuals used by the results bar & diagrams */
  --road-colour: #5a5a5a;
  --time: #2563eb;
  --ops: #0ea5e9;
  --carbon-strong: #10b981;
  --carbon-stripes: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,.25) 4px,
    rgba(255,255,255,.25) 8px
  );
}

body {
  background: var(--surface);
  color: var(--body-text-colour);
}

/* Dark mode – the JS sets either [data-theme="dark"] or .dark on html/body */
:root.dark,
[data-theme="dark"] {
  --surface: #0f172a;           /* slate-900 */
  --body-text-colour: #e5e7eb;  /* gray-200 */
  --muted-text-colour: #94a3b8; /* slate-400 */
  --accent-colour: #fbbf24;

  --road-colour: #4b5563;
  --time: #60a5fa;
  --ops: #7dd3fc;
  --carbon-strong: #34d399;
  --carbon-stripes: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,.25) 4px,
    rgba(0,0,0,.25) 8px
  );
}

/* IMPORTANT: keep header out of this surface group so it doesn't darken */
.form-section,
.cards-wrapper,
.modal .inner {
  background: var(--surface);
  color: var(--body-text-colour);
}

.muted { color: var(--muted-text-colour); }