/* AdBlue Ratio Tool — Light theme */

/* ===== Base ===== */
.adblue-tool { 
  color:#565656;               /* body text */
  background:transparent;      /* page is white already */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
}
.adblue-tool *{ box-sizing:border-box }

/* Full-width, no padding */
.adblue-tool .container{ width:100%; margin:24px auto; padding:0 }

/* Headings / sub */
.adblue-tool h1{ font-size:1.6rem; margin:0 0 8px; color:#565656 }
.adblue-tool .sub{ color:#7a7a7a; font-size:.95rem; margin-bottom:16px }

/* ===== Layout ===== */
/* Single column by default so Summary stacks under Add Entry */
.adblue-tool .grid{ display:grid; gap:16px }
.adblue-tool .grid.cols-2{ grid-template-columns: 1fr; }

/* ≥ 960px: two columns (Add Entry left, Summary right) */
@media (min-width: 960px){
  .adblue-tool .grid.cols-2{ grid-template-columns: 1.2fr .8fr }
}

/* ===== Cards ===== */
.adblue-tool .card{
  background:#ffffff;                          /* white cards */
  border:1px solid #dfe8f2;                    /* light blue/grey outline */
  border-radius:16px;
  padding:16px;
  box-shadow: 0 4px 16px rgba(17,24,39,0.06);
}
.adblue-tool h2{ margin:0 0 6px; color:#565656 }

/* ===== Form ===== */
/* Practical column widths:
   [Date 160] [Vehicle ID flex] [Type 160] [Diesel 140] [AdBlue 140] [Add 100] */
.adblue-tool .row{
  display:grid;
  gap:12px;
  align-items:end;
}
.adblue-tool .row>div{ display:flex; flex-direction:column }

.adblue-tool label{
  font-size:.85rem;
  color:#006ab4;                                /* labels */
  margin-bottom:6px;
  font-weight:600;
}

.adblue-tool input,
.adblue-tool select{
  background:#ffffff;
  color:#565656;
  border:1px solid #cfd8e3;
  padding:10px 12px;
  border-radius:10px;
  outline:none;
  width:100%;
}
.adblue-tool input:focus,
.adblue-tool select:focus{
  border-color:#006ab4;
  box-shadow:0 0 0 3px rgba(0,106,180,0.15);
}

/* Vehicle Type select shouldn’t collapse */
.adblue-tool [data-el="vehType"]{ min-width:160px; }

/* Diesel / AdBlue: tidy numeric feel */
.adblue-tool [data-el="diesel"],
.adblue-tool [data-el="adblue"]{ text-align:right; }

/* Add button: consistent sizing */
.adblue-tool [data-el="addBtn"]{
  width:100%;
  height:42px;
  line-height:42px;
  padding:0;
  border-radius:10px;
}

/* ===== Actions & Buttons ===== */
.adblue-tool .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.adblue-tool .pill{
  display:inline-flex; gap:6px; align-items:center;
  padding:.25rem .6rem; border-radius:999px;
  background:#f0f6fc; color:#006ab4; border:1px solid #d9e6f2; font-size:.8rem;
}

.adblue-tool button{
  border:1px solid #cfd8e3; background:#ffffff; color:#565656;
  padding:10px 14px; border-radius:10px; cursor:pointer; transition:background .15s, border-color .15s;
}
.adblue-tool button:hover{ background:#f7fbff; border-color:#b9c7d7 }

.adblue-tool button.primary{
  background:#006ab4; border-color:#006ab4; color:#ffffff; font-weight:700;
}
.adblue-tool button.primary:hover{ background:#005ca0; border-color:#005ca0 }

.adblue-tool button.warn{
  border-color:#ef9aa1; color:#a43b43; background:#fff5f6;
}
.adblue-tool button.warn:hover{ background:#ffecee; border-color:#e77c86 }

/* ===== Tables ===== */
.adblue-tool table{ width:100%; border-collapse:collapse; background:#ffffff; table-layout:fixed; }
.adblue-tool th, .adblue-tool td{ text-align:left; padding:10px 8px; border-bottom:1px solid #e8eef5; overflow:visible; text-overflow:ellipsis; white-space:normal; }
.adblue-tool th{ color:#006ab4; font-weight:700; background:#f8fbff }
.adblue-tool tbody tr:hover{ background:#f9fbfe }

/* Allow horizontal scroll if needed (wrapper already has overflow:auto inline) */
.adblue-tool .card > div[style*="overflow:auto"]{ overflow-x:auto !important; }

/* ===== KPIs ===== */
.adblue-tool .kpi{  display:grid;gap:12px;grid-template-columns: repeat(6, minmax(0, 1fr)); }
.adblue-tool .kpi .item{
  background:#ffffff; border:1px solid #dfe8f2; border-radius:14px; padding:12px;
}
.adblue-tool .kpi .label{ color:#006ab4; font-size:.85rem; font-weight:600 }
.adblue-tool .kpi .value{ font-size:1.3rem; font-weight:800; color:#565656 }

/* ===== Footer text ===== */
.adblue-tool .footer{ color:#8a8a8a; font-size:.85rem; margin-top:18px }

/* ===== Status text ===== */
.adblue-tool .note{ color:#006ab4 }
.adblue-tool .error{ color:#b42318 }





/* ≤ 600px: stack form controls; button full width */
@media (max-width: 600px){
  .adblue-tool [data-el="addBtn"]{ width:100% !important; }
}


/* 60/40 split for the two-column layout */
@media (min-width: 960px){
  .adblue-tool .grid.cols-2{
    grid-template-columns: 60% 40%;
  }
}


@media (min-width: 960px){
  .adblue-tool .grid.cols-2{
    /* left never below 420px, right never below 320px */
    grid-template-columns: minmax(420px, 60%) minmax(320px, 40%);
  }
}


/* Keep the form row contained */
.adblue-tool .card{ overflow:hidden; }              /* clip any tiny overflow at rounded corners */
.adblue-tool .row{ inline-size:100%; max-width:100%; }


/* Ensure controls fill their cell */
.adblue-tool .row input,
.adblue-tool .row select{ width:100%; }

/* Prevent the Type select from shrinking too far */
.adblue-tool [data-el="vehType"]{ min-width:140px; }

/* Phones: single column stack */
@media (max-width: 600px){
  .adblue-tool .row{ grid-template-columns: 1fr; }
  .adblue-tool .row > div{ grid-column: 1 / -1; }
}

/* 60/40 page layout for the two cards (as requested earlier) */
@media (min-width: 960px){
  .adblue-tool .grid.cols-2{
    grid-template-columns: minmax(420px, 60%) minmax(320px, 40%);
  }
}


/* --- Keep the row inside the card and allow the button to be visible --- */

.adblue-tool .row{
  inline-size:100%;
  max-width:100%;
  gap:10px;                                             /* slightly smaller gap */
  align-items:end;
  grid-template-columns:6;grid-auto-columns: initial;
    grid-auto-flow: column;
  
}

/* Inputs/selects fill their cells */
.adblue-tool .row input,
.adblue-tool .row select{ width:100%; }

/* Don’t let the Type select collapse */
.adblue-tool [data-el="vehType"]{ min-width:132px; }

/* Numeric fields: right-aligned */
.adblue-tool [data-el="diesel"],
.adblue-tool [data-el="adblue"]{ text-align:right; }

/* Button: consistent height/fit */
.adblue-tool [data-el="addBtn"]{
  width:100%;
  height:40px;
  line-height:40px;
  padding:0;
}

/* Wrap the row to 2 columns a bit earlier so it never overflows on narrower themes */
@media (max-width: 1100px){
  .adblue-tool .row{
    grid-template-columns: 1fr 1fr;
  }
  /* Ensure Add button stretches nicely */
  .adblue-tool .row > div:nth-child(6){ justify-self: stretch; }
}


/* Keep your 60/40 card layout */
@media (min-width: 960px){
  .adblue-tool .grid.cols-2{
    grid-template-columns: minmax(420px, 60%) minmax(320px, 40%);
  }
}
/* 70/30 split for the two-card layout, with safe minimum widths */
@media (min-width: 960px){
  .adblue-tool .grid.cols-2{
    grid-template-columns: minmax(560px, 70%) minmax(360px, 30%);
    column-gap: 16px;
  }
}



/* Numeric fields look compact and right-aligned */
.adblue-tool [data-el="diesel"],
.adblue-tool [data-el="adblue"]{
  text-align:right;
}

/* Button fits its column cleanly */
.adblue-tool [data-el="addBtn"]{
  width:100%;
  height:40px;
  line-height:40px;
  padding:0;
  border-radius:10px;
}



.adblue-tool .grid.cols-1 { grid-template-columns: 1fr; }
.card .item {background:#f8fbff;border: 1px solid #e8eef5;}
.card .item .label  {color: #555;font-weight: 700;}
/* Layout just for the Add Entry fields row */
.adblue-tool .entry-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.1fr 0.8fr 0.8fr auto; /* Date, Veh ID, Type, Diesel, AdBlue, +Add */
  gap: 12px;                      /* space between fields */
  align-items: flex-end;          /* line labels + inputs up nicely */
}

/* Make sure controls fill their own cell cleanly */
.adblue-tool .entry-row > div {
  width: 100%;
}

.adblue-tool .entry-row button[data-el="add"] {
  width: 100%;
  white-space: nowrap;
}



/* Make each field behave nicely inside its cell */
.adblue-tool .add-entry-row > div {
  min-width: 0;
}

/* Keep the + Add button a sensible size */
.adblue-tool .add-entry-row > div:last-child button {
  width: 100%;
  white-space: nowrap;
}


/* Mobile card layout for the main data table */
@media (max-width: 768px) {
  /* Target only the main data table */
  .adblue-tool table[data-el="dataTable"],
  .adblue-tool table[data-el="dataTable"] thead,
  .adblue-tool table[data-el="dataTable"] tbody,
  .adblue-tool table[data-el="dataTable"] th,
  .adblue-tool table[data-el="dataTable"] td,
  .adblue-tool table[data-el="dataTable"] tr {
    display: block;
    width: 100%;
  }

  /* Hide header row on mobile (we'll show labels per cell instead) */
  .adblue-tool table[data-el="dataTable"] thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Each row becomes a "card" */
  .adblue-tool table[data-el="dataTable"] tr {
    margin-bottom: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 12px;
    padding: 8px 10px;
    background: #ffffff;
  }

  /* Cells become label + value rows */
  .adblue-tool table[data-el="dataTable"] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 6px 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 0.9rem;
  }

  .adblue-tool table[data-el="dataTable"] td::before {
    font-weight: 600;
    color: #006ab4;
    padding-right: 12px;
    content: "";
  }

  /* Per-column labels */
  .adblue-tool table[data-el="dataTable"] td:nth-child(1)::before { content: "Date"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(2)::before { content: "Vehicle REG"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(3)::before { content: "Vehicle Type"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(4)::before { content: "Diesel (L)"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(5)::before { content: "AdBlue (L)"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(6)::before { content: "Ratio (D:A)"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(7)::before { content: "Ratio (%)"; }
  .adblue-tool table[data-el="dataTable"] td:nth-child(8)::before { content: "";display: none;}

  /* Make the Delete button sit nicely on the last row */
  .adblue-tool table[data-el="dataTable"] td:nth-child(8) {
    justify-content: flex-end;
  }
}

.kpi{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.adblue-tool .kpi .item{
  background:#ffffff; 
  border:1px solid #dfe8f2; 
  border-radius:14px; 
  padding:12px;
}
.adblue-tool .kpi .label{ color:#006ab4; font-size:.85rem; font-weight:600 }
.adblue-tool .kpi .value{ font-size:1.3rem; font-weight:800; color:#565656 }

/* --- Emphasise KPI tiles --- */
.adblue-tool .kpi .item {
  background:#f5f8ff;                 /* soft blue panel */
  border-color:#c8d9f2;
  box-shadow:0 4px 10px rgba(0,0,0,0.03);
}

.adblue-tool .kpi .label {
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#6b7ba4;
  margin-bottom:4px;
}

.adblue-tool .kpi .value {
  font-size:1.6rem;                   /* bigger number */
  font-weight:800;
  color:#004b8e;                      /* stronger blue */
  line-height:1.2;
}

/* === Ratio (%) colouring in the data table === */
.adblue-tool .ratio-good {
  color: #1b7b3a;      /* green */
  font-weight: 700;
}

.adblue-tool .ratio-warn {
  color: #c56a00;      /* orange */
  font-weight: 700;
}

.adblue-tool .ratio-bad {
  color: #c62828;      /* red */
  font-weight: 700;
}

.adblue-tool .kpi {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* desktop: 6 in a row */
}

/* Medium screens – 3 per row */
@media (max-width: 1200px) {
  .adblue-tool .kpi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablets / big phones – 2 per row */
@media (max-width: 900px) {
  .adblue-tool .kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Small phones – stack vertically */
@media (max-width: 600px) {
  .adblue-tool .kpi {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Remove "..." that appears next to Delete button on small screens */
@media (max-width: 768px) {
  .adblue-tool table tbody td:last-child {
    overflow: visible;
    text-overflow: clip;  /* override ellipsis */
  }
}



/* Compact Add Entry layout on phones */
@media (max-width: 600px) {
  .adblue-tool .add-entry-row {
    /* Override the grid on small screens */
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  /* Two fields per row by default */
  .adblue-tool .add-entry-row > div {
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
  }

  /* Make the + Add button span full width */
  .adblue-tool .add-entry-row > div:last-child {
    flex: 0 0 100%;
  }

  /* Ensure the + Add button fills its cell */
  .adblue-tool [data-el="addBtn"] {
    width: 100%;
  }
}

/* Tablets / desktop: even grid for Add Entry row */
@media (min-width: 601px) {
  .adblue-tool .add-entry-row {
    display: grid !important;                        /* override .row */
    grid-auto-flow: row;                             /* stop the column auto-flow */
    grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
    /* 5 equal fields: Date, Vehicle REG, Vehicle Type, Diesel, AdBlue + auto-width button */
    gap: 12px;
    align-items: flex-end;
  }

   /* Last cell (button) spans the whole row */
  .adblue-tool .add-entry-row > div:last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .adblue-tool [data-el="addBtn"] {
    width: 100%;
  }
}

/* === Add Entry row: keep inside card and put + Add on its own line === */

/* Phones: already have your flex layout – keep it */
@media (max-width: 600px) {
  .adblue-tool .row.add-entry-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    max-width: 100%;
  }

  .adblue-tool .row.add-entry-row > div {
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
  }

  .adblue-tool .row.add-entry-row > div:last-child {
    flex: 0 0 100%;
  }

  .adblue-tool .row.add-entry-row [data-el="addBtn"] {
    width: 100%;
  }
}

/* Tablets & desktop: responsive grid, button on its own row */
@media (min-width: 601px) {
  .adblue-tool .row.add-entry-row {
    display: grid !important;          /* override generic .row grid */
    grid-auto-flow: row;               /* stop the column auto-flow */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* fields will wrap instead of overflowing when space is tight */
    gap: 12px;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
  }

  .adblue-tool .row.add-entry-row > div {
    min-width: 0;                      /* let columns shrink evenly */
  }

  /* + Add spans full width on a new line */
  .adblue-tool .row.add-entry-row > div:last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .adblue-tool .row.add-entry-row [data-el="addBtn"] {
    width: 100%;
  }
}
/* Card layout for "Per Vehicle Type" table on small screens */
@media (max-width: 600px) {
  .per-vehicle-table,
  .per-vehicle-table thead,
  .per-vehicle-table tbody,
  .per-vehicle-table th,
  .per-vehicle-table td,
  .per-vehicle-table tr {
    display: block;
    width: 100%;
  }

  /* Hide header row – we’ll recreate labels with ::before */
  .per-vehicle-table thead {
    display: none;
  }

  /* Each row becomes a card */
  .per-vehicle-table tbody tr {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
  }

  /* Each cell becomes a label/value pair */
  .per-vehicle-table td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border: none;
    font-size: 0.85rem;
  }

  .per-vehicle-table td + td {
    border-top: 1px solid #f1f5f9;
  }

  /* Labels for each column using nth-child */
  .per-vehicle-table td:nth-child(1)::before { content: "Type"; font-weight: 600; color: #64748b; margin-right: 8px; }
  .per-vehicle-table td:nth-child(2)::before { content: "No. Vehicles"; font-weight: 600; color: #64748b; margin-right: 8px; }
  .per-vehicle-table td:nth-child(3)::before { content: "Total Diesel"; font-weight: 600; color: #64748b; margin-right: 8px; }
  .per-vehicle-table td:nth-child(4)::before { content: "Total AdBlue"; font-weight: 600; color: #64748b; margin-right: 8px; }
  .per-vehicle-table td:nth-child(5)::before { content: "Average Ratio"; font-weight: 600; color: #64748b; margin-right: 8px; }
  .per-vehicle-table td:nth-child(6)::before { content: "Average Ratio (%)"; font-weight: 600; color: #64748b; margin-right: 8px; }
}