/* ICL Billing: the look of the Compliance app, on plain Bootstrap 5.3 (no spacelab).
   Copied from compliance_dev's icl.css + compliance.css on 2026-11-06 and kept separate on purpose:
   a change to one app must never reshape the other. ICL navy #0c2073 (hover #09174d), Arial,
   a light gray page, white panels and grids with small uppercase headers. */
:root {
  --bs-primary: #0c2073;
  --bs-primary-rgb: 12, 32, 115;
  --bs-link-color: #0c2073;
  --bs-link-color-rgb: 12, 32, 115;
  --bs-link-hover-color: #09174d;
  --bs-link-hover-color-rgb: 9, 23, 77;
  --bs-body-font-family: Arial, sans-serif;

  --c-ink: #19213a;
  --c-muted: #5b6480;
  --c-line: #dde1ea;
  --c-head: #f3f5fa;
  --c-red: #b42318;    --c-red-bg: #fee4e2;
  --c-amber: #93370d;  --c-amber-bg: #fef0c7;
  --c-blue: #2b3a67;   --c-blue-bg: #e8ecf6;
  --c-green: #067647;  --c-green-bg: #dcfae6;
  --c-page: #f3f5f9;
}

body { font-family: Arial, sans-serif; background-color: var(--c-page); color: var(--c-ink); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn { font-family: Arial, sans-serif; }

/* Navbar: flat navy. The logo is a white-background JPEG; a little padding keeps its edge tidy. */
.navbar.bg-primary, .bg-primary { background-color: #0c2073 !important; border: 0; }
.navbar-dark, .navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, .8);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}
.navbar-brand img { background: #fff; padding: 2px 4px; border-radius: 3px; }
.navbar .nav-link.active { font-weight: 700; }

.btn-primary {
  --bs-btn-bg: #0c2073; --bs-btn-border-color: #0c2073;
  --bs-btn-hover-bg: #09174d; --bs-btn-hover-border-color: #09174d;
  --bs-btn-active-bg: #09174d; --bs-btn-active-border-color: #09174d;
  --bs-btn-disabled-bg: #0c2073; --bs-btn-disabled-border-color: #0c2073;
  --bs-btn-focus-shadow-rgb: 12, 32, 115;
}
.btn-outline-primary {
  --bs-btn-color: #0c2073; --bs-btn-border-color: #0c2073;
  --bs-btn-hover-bg: #0c2073; --bs-btn-hover-border-color: #0c2073;
  --bs-btn-active-bg: #0c2073; --bs-btn-active-border-color: #0c2073;
  --bs-btn-focus-shadow-rgb: 12, 32, 115;
}
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: #0c2073; border-color: #0c2073; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #5566a8; box-shadow: 0 0 0 .25rem rgba(12, 32, 115, .25); }
.nav-pills { --bs-nav-pills-link-active-bg: #0c2073; }
.page-link { --bs-pagination-color: #0c2073; --bs-pagination-active-bg: #0c2073; --bs-pagination-active-border-color: #0c2073; }

/* Page head: title, a count, tools on the right */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.6rem; margin: 0; }
.page-head .count { color: var(--c-muted); }
.page-head .tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.page-head .tools input[type=search] { width: 14rem; max-width: 100%; }

/* Grid: a white table with small uppercase headers */
.grid-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--c-line); border-radius: .5rem; }
table.grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.grid th { background: var(--c-head); color: var(--c-muted); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; padding: .55rem .7rem; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
table.grid td { padding: .5rem .7rem; border-bottom: 1px solid #eef0f4; vertical-align: middle; white-space: nowrap; }
table.grid tbody tr.row-link { cursor: pointer; }
table.grid tbody tr.row-link:hover td { background: #f7f9fd; }
table.grid tr.group td { background: #fff; font-weight: 700; padding-top: .8rem; border-bottom: 1px solid var(--c-line); }
table.grid tr.inactive td { color: var(--c-muted); }
table.grid .unit a { font-weight: 700; color: var(--c-ink); text-decoration: none; }
table.grid .mono { font-family: Menlo, Consolas, monospace; font-size: .82rem; color: #475069; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.unmatched { background: var(--c-amber-bg); }

/* Status chips: red = wrong or overdue, amber = needs a hand, blue = waiting, green = done */
.pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 1rem; white-space: nowrap; }
.pill-red { color: var(--c-red); background: var(--c-red-bg); }
.pill-amber { color: var(--c-amber); background: var(--c-amber-bg); }
.pill-blue { color: var(--c-blue); background: var(--c-blue-bg); }
.pill-green { color: var(--c-green); background: var(--c-green-bg); }
.pill-gray { color: #475467; background: #eef0f4; }

/* Panels and cards */
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: .5rem; padding: 1rem; }
.panel h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card-lite { background: #fff; border: 1px solid var(--c-line); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.card-lite h3 { font-size: 1rem; margin: 0; font-weight: 700; }
.card-lite .sub { color: var(--c-muted); font-size: .85rem; }

/* Dashboard: headline counts, then one tile per list */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: #fff; border: 1px solid var(--c-line); border-radius: .5rem; padding: .7rem .9rem; display: flex; align-items: baseline; gap: .6rem; color: inherit; text-decoration: none; }
a.stat:hover { border-color: #8db7e8; background: #f7f9fd; }
.stat b { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--c-muted); font-size: .85rem; }
.stat-red b { color: var(--c-red); }
.stat-amber b { color: var(--c-amber); }
.stat-blue b { color: var(--c-blue); }
.stat-grey b { color: #475467; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px)  { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { background: #fff; border: 1px solid var(--c-line); border-radius: .5rem; min-width: 0;
  display: flex; flex-direction: column; height: 21rem; }
.tile header { flex: none; min-height: 3.4rem; display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid #eef0f4; }
.tile h2 { font-size: 1rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tile .n { font-size: .78rem; font-weight: 700; color: #fff; background: var(--c-ink); border-radius: 1rem; padding: .05rem .5rem; flex: none; }
.tile .n-zero { background: #c9ced9; }
.tile header .btn { margin-left: auto; font-size: .78rem; padding: .15rem .5rem; flex: none; }
.tile ul { flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: .3rem 0; overflow-y: auto; }
.tile li a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem .9rem; color: var(--c-ink); text-decoration: none; }
.tile li a:hover { background: #f7f9fd; }
.tile .who { font-weight: 600; min-width: 0; }
.tile .who small { display: block; font-weight: 400; color: var(--c-muted); font-size: .78rem; }
.tile .clear { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-green); font-size: .88rem; margin: 0; padding: .8rem .9rem; }

.crumbs { font-size: 1.05rem; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); text-decoration: underline; }

/* Download: light blue with text dark enough to read. */
.btn-download { color: #1d4f91; background: #eef5fd; border-color: #8db7e8; font-weight: 600; }
.btn-download:hover, .btn-download:focus-visible { color: #fff; background: #2f6fbd; border-color: #2f6fbd; }

/* The training banner (orange, like the yard app's) */
.training-banner { background: #e8830c; color: #fff; padding: .5rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; font-size: .95rem; }
.training-banner a { color: #fff; font-weight: 700; margin-left: 1rem; }

/* Login card: a navy head with the ICL logo and the app's name, like the Compliance app's, then the form. */
.login-card { max-width: 26rem; margin: 3rem auto; padding: 0; overflow: hidden; }
.login-card .card-head { background: #0c2073; color: #fff; text-align: center; padding: 1.25rem 1rem 1rem; }
.login-card .card-head img { background: #fff; padding: 4px 6px; border-radius: 4px; max-width: 110px; margin-bottom: .6rem; }
.login-card .card-head .app { font-size: 1.25rem; font-weight: 700; margin: 0; color: #fff; }
.login-card .card-head h1 { font-size: 1.05rem; font-weight: 400; margin: .2rem 0 0; color: rgba(255, 255, 255, .85); }
.login-card .card-main { padding: 1.25rem; }

/* Phones and narrow windows: each grid row becomes a card of labelled values. */
@media (max-width: 767.98px) {
  .page-head h1 { font-size: 1.35rem; }
  .page-head .tools { margin-left: 0; width: 100%; }
  .page-head .tools input[type=search] { flex: 1 1 100%; width: auto; }
  .grid-wrap { overflow: visible; background: transparent; border: 0; }
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tr.group td { background: transparent; border: 0; padding: .9rem .1rem .4rem; }
  table.grid tr.row-link, table.grid tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem;
    background: #fff; border: 1px solid var(--c-line); border-radius: .5rem; padding: .75rem .85rem; margin-bottom: .6rem; }
  table.grid tbody tr.row-link:hover td { background: transparent; }
  table.grid td { border: 0; padding: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  table.grid td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--c-muted); font-weight: 600; }
  table.grid td.unit { grid-column: 1 / -1; font-size: 1.15rem; }
  table.grid td:empty { display: none; }
  .cards { grid-template-columns: 1fr; }
  .summary { gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { flex-direction: column; align-items: flex-start; gap: .25rem; padding: .55rem .65rem; }
  .stat span { font-size: .72rem; line-height: 1.25; }
  .tiles { grid-template-columns: 1fr; }
  .tile { height: auto; }
  .tile ul { max-height: 18rem; }
  .tile .clear { display: block; text-align: left; }
}

/* Dashboard tiles: the Expand icon (Compliance's), and a line for an upload set aside */
.tile-expand { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
  border-radius: .35rem; color: var(--c-muted); flex: none; margin-left: auto; }
.tile-expand:hover, .tile-expand:focus-visible { background: var(--c-head); color: var(--c-ink); }
.tile li.inactive a { color: var(--c-muted); }
.tile li .pill { flex: none; }
.stat-green b { color: var(--c-green); }
.page-head .crumbs { font-size: 1.05rem; }

/* One upload as read (upload.php): the file, the header cells, the rows not taken, then the sheet */
.check-panel { border-color: #f5c46b; background: #fffaf0; }
.read-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; }
dl.facts dt { color: var(--c-muted); font-weight: 400; }
dl.facts dd { margin: 0; }
table.cells { width: 100%; border-collapse: collapse; }
table.cells th, table.cells td { padding: .25rem .5rem .25rem 0; border-bottom: 1px solid #eef0f4; vertical-align: top; text-align: left; }
table.cells th { white-space: nowrap; font-weight: 600; width: 1%; }
.sheet-wrap { max-height: 70vh; overflow: auto; }
table.grid.sheet { font-size: .84rem; }
table.grid.sheet thead th { position: sticky; top: 0; z-index: 1; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--c-ink); vertical-align: bottom; }
table.grid.sheet td { padding: .35rem .6rem; }
table.grid.sheet .col-letter { display: block; font-size: .68rem; font-weight: 400; color: var(--c-muted); text-transform: uppercase; }
table.grid.sheet th.not-read, table.grid.sheet td.not-read { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #f3f4f7 4px, #f3f4f7 8px); color: var(--c-muted); }
table.grid.sheet th.app { background: #e8ecf6; color: var(--c-blue); }
table.grid.sheet td.app { background: #f4f6fb; }
table.grid.sheet td.app.changed { background: var(--c-amber-bg); }
table.grid.sheet td:first-child, table.grid.sheet th:first-child { position: sticky; left: 0; background: var(--c-head); z-index: 2; }

/* Delete: the confirm panel says what will be undone */
.delete-panel { border-color: #f1a9a0; background: #fff6f5; }

/* Fuel surcharge (fuel.php, the dashboard tile) */
table.grid tr.row-now td { background: #f3faf5; }
.tile .fsc-now { padding: .8rem .9rem; border-bottom: 1px solid #eef0f4; }
.tile .fsc-now .big { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .fsc-now .lanes { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .5rem; font-size: .9rem; }