/* An element with the hidden attribute is always hidden, whatever display value other rules give it. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { font-family: system-ui, Segoe UI, Arial, sans-serif; margin: 0; background: #f2f3f5; color: #1c1e21; }
header { background: #1f3a5f; color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
header h1 { font-size: 1.2rem; margin: 0; }
header a { color: #cfe0ff; margin-left: 16px; text-decoration: none; }
main { max-width: 1000px; margin: 20px auto; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; } }
.card { background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #b8bec7; border-radius: 6px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
button { padding: 11px 16px; font-size: 1rem; border: 0; border-radius: 6px; cursor: pointer; background: #2c6fd1; color: #fff; }
button.secondary { background: #6b7685; }
button:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
#status { margin-top: 10px; min-height: 1.2em; color: #b3261e; }
.stats { display: flex; gap: 24px; }
.stats .label { color: #555; }
.big { font-size: 2.2rem; font-weight: 700; color: #1f3a5f; }
.big.bad { color: #b3261e; }
.found { font-size: .85rem; color: #555; margin: 6px 0 10px; min-height: 1.1em; }
.found.warn { background: #fff1d6; color: #7a4a00; font-weight: 700; padding: 8px; border-radius: 6px; font-size: .95rem; }
.toofar { background: #b3261e; color: #fff; font-weight: 700; padding: 12px; border-radius: 6px; margin-bottom: 12px; font-size: 1.1rem; }
.satbox { min-height: 280px; border-radius: 6px; border: 1px solid #ccd; background: #e8edf4; overflow: hidden; }
.satbox img { width: 100%; height: 280px; object-fit: cover; display: block; }
.satbox img[hidden] { display: none; }
.satbox.stale img { opacity: .35; }
#banner { margin: 0 0 10px; }
.addr-wrap { position: relative; flex: 1; }
.sugg { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #b8bec7; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.18); max-height: 280px; overflow: auto; }
.sugg li { padding: 10px; cursor: pointer; }
.sugg li:hover, .sugg li.active { background: #e8edf4; }
.dayinfo { font-size: .9rem; color: #555; margin-top: 4px; }
.warnbox { background: #fff1d6; color: #7a4a00; font-weight: 700; padding: 8px; border-radius: 6px; margin-top: 6px; }
.addr-row { display: flex; gap: 10px; }
.addr-row input { flex: 1; }
.addr-row button { white-space: nowrap; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid #e1e4e8; text-align: left; font-size: .95rem; }
th { background: #e8edf4; }
.wide { grid-column: 1 / -1; overflow-x: auto; }

/* Print sheet */
.sheet { max-width: 7.5in; margin: 0 auto; background: #fff; padding: .4in; }
.sheet .stamp { color: #555; font-size: .85rem; margin-top: 6px; }
.sheet .when { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.sheet .who { font-size: 2.2rem; font-weight: 700; line-height: 1.15; }
.sheet .who.long { font-size: 1.8rem; }
.sheet .who.xlong { font-size: 1.5rem; }
.sheet .where { font-size: 1.7rem; font-weight: 600; line-height: 1.2; margin: 4px 0 12px; }
.sheet .where.long { font-size: 1.4rem; }
.sheet .facts { margin: 0 0 12px; font-size: 1.15rem; }
.sheet .facts .line { margin: 3px 0; }
.sheet .facts .two { display: flex; gap: .3in; align-items: baseline; }
.sheet .facts .two > div { flex: 1; }
.sheet .facts b { margin-right: .06in; }
.sheet .facts .price { font-size: 1.5rem; font-weight: 700; }
/* Two columns: street view over satellite on the left, directions on the right. Images are flat <img>s
   at fixed heights, so the layout can't shift at print time. */
.sheet .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .15in; align-items: start; }
.sheet .imgcol { display: flex; flex-direction: column; gap: .1in; }
.sheet .cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: 2px; }
.sheet .pic { display: block; width: 100%; height: 2.15in; object-fit: cover; border: 1px solid #999; }
.sheet .nopic { display: flex; align-items: center; justify-content: center; height: 2.15in; border: 1px dashed #999; color: #666; text-align: center; padding: 8px; font-size: .9rem; }
.sheet .dirs { list-style: none; counter-reset: step; margin: 0; padding: 0; font-size: 10pt; line-height: 1.25; }
.sheet .dirs.small { font-size: 8.5pt; }
.sheet .dirs.tiny { font-size: 7.5pt; line-height: 1.2; }
.sheet .dirs li { display: flex; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #bbb; }
.sheet .dirs li::before { counter-increment: step; content: counter(step) "."; font-weight: 700; flex: none; width: 1.4em; }
.sheet .dirs li span:first-child { flex: 1; }
.sheet .dirs .d { flex: none; white-space: nowrap; color: #333; font-weight: 600; }
.sheet .dirs-end { font-size: 9pt; font-weight: 700; margin: 3px 0; }
.sheet .cancelbanner { background: #b3261e; color: #fff; font-weight: 800; font-size: 1.4rem; text-align: center; padding: 6px; margin-bottom: 8px; letter-spacing: .03em; }
.sheet .tripline { font-size: 1.25rem; font-weight: 800; border: 2px solid #000; padding: 3px 8px; margin: 4px 0; display: inline-block; }
.sheet .costnote { font-size: .95rem; font-weight: 600; color: #333; }
@media print {
  @page { size: letter; margin: .4in; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header, .noprint { display: none !important; }
  .sheet { padding: 0; max-width: none; }
}

/* Trips, cancel, materials page */
.tripinfo { margin-top: 8px; padding: 8px; border-radius: 6px; background: #e3eefc; color: #12365f; font-weight: 700; }
.tripinfo:empty { display: none; }
.tripinfo.bad { background: #fff1d6; color: #7a4a00; }
.costnote { font-size: .95rem; color: #333; font-weight: 600; margin: -2px 0 6px; }
.costnote:empty { display: none; }
.linkbtn { background: none; border: 0; padding: 0; font-size: inherit; color: #1a0dab; text-decoration: underline; cursor: pointer; }
.linkbtn.danger { color: #b3261e; font-weight: 700; }
tr.cancelled td { text-decoration: line-through; color: #777; }
tr.cancelled td.status, tr.cancelled td.rowacts { text-decoration: none; }
td.status { white-space: nowrap; }
tr.cancelled td.status { color: #b3261e; font-weight: 800; }
main.single { display: block; max-width: 760px; }
main.single .card { margin-bottom: 20px; }
main.single h2 { margin: 0 0 6px; font-size: 1.15rem; }
.hint { color: #555; font-size: .9rem; margin: 0 0 12px; }
.msg { background: #e3f6e8; color: #14532d; font-weight: 700; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.msg.bad { background: #fde4e1; color: #7a1a12; }
.limits { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.limits label { margin: 0; }
.limits input { display: block; width: 120px; margin-top: 4px; }
.mats td { vertical-align: middle; }
.mats input, .mats select { width: 100%; padding: 8px; font-size: 1rem; border: 1px solid #b8bec7; border-radius: 6px; }
.mats td.rowacts { white-space: nowrap; }
button.small { padding: 7px 11px; font-size: .9rem; }
button.danger:not(.linkbtn) { background: #b3261e; }
.addrow { display: flex; gap: 10px; margin-top: 14px; }
.addrow input { flex: 1; }
.addrow select { width: 150px; padding: 10px; font-size: 1rem; border: 1px solid #b8bec7; border-radius: 6px; }
select { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #b8bec7; border-radius: 6px; background: #fff; }

/* Order history: full width (16:9), one-line rows, link-style actions, reschedule dialog */
main.history { display: block; max-width: none; margin: 20px 24px; padding: 0; }
main.history .card { padding: 16px; }
table.orders th, table.orders td { font-size: .88rem; padding: 7px 6px; vertical-align: top; }
table.orders td.nw { white-space: nowrap; }
table.orders td.num { color: #666; }
table.orders th.addr, table.orders td.addr { min-width: 14em; }
table.orders td.rowacts { white-space: nowrap; }
table.orders td.name { min-width: 11em; }
table.orders td.status { white-space: nowrap; }
dialog { border: 0; border-radius: 10px; padding: 20px 22px; width: 92%; max-width: 430px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog h2 { margin: 0 0 6px; font-size: 1.1rem; }
dialog .actions { margin-top: 16px; }

/* New-order page: form | quote + satellite | street view */
main.entry { max-width: 1300px; margin: 20px auto; padding: 0 24px; grid-template-columns: 1fr 1fr; align-items: start; }
.preview .label { color: #555; margin: 4px 0; }
.nopicbox { display: flex; align-items: center; justify-content: center; height: 280px; padding: 12px; text-align: center; color: #666; background: #eef0f3; }
.nopicbox[hidden] { display: none; }
@media (max-width: 800px) { main.entry { grid-template-columns: 1fr; } }
.preview .label.gap { margin-top: 14px; }
.codbanner { border: 5px solid #000; text-align: center; font-weight: 900; font-size: 2.3rem; letter-spacing: .04em; line-height: 1.1; padding: 4px 8px; margin-bottom: 8px; }
table.orders td.cod { font-weight: 800; }

/* Delivery time radios (AM / PM / No preference), beside the delivery date and in the reschedule pop-up */
.win { min-width: 0; }
.win .winlabel { margin: 12px 0 4px; font-weight: 600; }
.win .opts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; min-height: 44px; }
.win label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.win input[type=radio] { width: auto; padding: 0; margin: 0; }
.row.datewin { align-items: flex-start; }
.row.datewin > div:first-child { flex: 0 0 52%; }
dialog .win { margin-top: 4px; }

/* Sortable headings (order history) */
table.orders th .sortbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
table.orders th .sortbtn:hover { text-decoration: underline; }
table.orders th.sorted { background: #d3dff0; }
table.orders th .arrow { font-size: .75em; }

/* Deliveries page: calendar + the day's list */
main.deliveries { display: grid; grid-template-columns: 340px 1fr; gap: 20px; max-width: none; margin: 20px 24px; padding: 0; align-items: start; }
.cal { padding: 14px; }
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.caltitle { font-weight: 700; font-size: 1.05rem; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calgrid.weekdays div { text-align: center; font-size: .75rem; font-weight: 700; color: #666; padding: 2px 0; }
.calgrid button.day { position: relative; padding: 8px 0 12px; font-size: .95rem; background: #f4f5f7; color: #aab0ba; border: 1px solid transparent; border-radius: 6px; cursor: not-allowed; }
.calgrid button.day.has { background: #e3eefc; color: #12365f; font-weight: 800; cursor: pointer; border-color: #b9d0f2; }
.calgrid button.day.has:hover { background: #cfe0fa; }
.calgrid button.day.today { outline: 2px solid #1f3a5f; outline-offset: -2px; }
.calgrid button.day.sel { background: #2c6fd1; color: #fff; border-color: #2c6fd1; }
.calgrid button.day.sel:disabled { background: #cfd6e2; color: #555; }
.calgrid .badge { position: absolute; right: 3px; bottom: 1px; font-size: .62rem; font-weight: 700; opacity: .85; }
.calhint { margin: 10px 0 8px; }
.calnav { display: flex; flex-wrap: wrap; gap: 8px; }
.calnav button { flex: 1 1 auto; }
.day .dayhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.day h2 { margin: 0 0 2px; font-size: 1.3rem; }
.daysummary { font-size: 1.05rem; font-weight: 700; color: #1f3a5f; }
.dayempty { padding: 24px 8px; color: #555; font-size: 1.05rem; }
table.orders tr.group td { background: #e8edf4; font-weight: 800; padding: 6px 9px; border-top: 2px solid #c5cfdd; }
main.deliveries > * { min-width: 0; }
main.deliveries .day { overflow-x: auto; }
@media (max-width: 900px) { main.deliveries { grid-template-columns: 1fr; } }
@media print {
  main.deliveries { display: block; margin: 0; }
  main.deliveries .cal { display: none; }
  .day { box-shadow: none; padding: 0; }
  table.orders th, table.orders td { font-size: 9.5pt; padding: 4px 6px; }
}

table.orders td .nw, .nw { white-space: nowrap; }

/* Small laptop windows: let the action links and status wrap rather than scroll sideways */
@media (max-width: 1650px) { table.orders td.rowacts, table.orders td.status { white-space: normal; } table.orders td.rowacts a, table.orders td.rowacts button { white-space: nowrap; } }

/* Returning-customer search */
.custsearch { margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px dashed #c9d0da; }
.custsearch label { margin-top: 0; }
.sugg li .sub { font-size: .82rem; color: #555; margin-top: 2px; }
.sugg li.none { color: #666; cursor: default; }
.sugg li.none:hover { background: none; }

/* The secondary columns stay on one line on a full-size window and may wrap only when it is narrower */
@media (max-width: 1750px) { table.orders td.soft { white-space: normal; } table.orders td.soft .nw { white-space: nowrap; } }

/* Small laptop windows: slightly smaller table text and padding */
@media (max-width: 1500px) { table.orders th, table.orders td { font-size: .82rem; padding: 6px 4px; } }

/* Brand heading (every page) and the highlighted current page in the menu */
header h1.brand { font-size: 1.25rem; margin: 0; }
header h1.brand a { color: #fff; margin-left: 0; text-decoration: none; }
header h1.brand a:hover { text-decoration: underline; }
header nav a.current { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.pagetitle { margin: 0 0 8px; font-size: 1.25rem; }

.sugg li .sub.last { color: #12365f; font-weight: 600; }

#custList { max-height: 440px; }

/* Settings gear in the menu */
header nav a.gear { display: inline-flex; align-items: center; vertical-align: middle; padding: 0 0 2px; margin-left: 18px; color: #cfe0ff; border-bottom: 2px solid transparent; }
header nav a.gear:hover { color: #fff; }
header nav a.gear.current { color: #fff; border-bottom-color: #fff; text-decoration: none; }
/* Delivery pricing card */
.rate { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rate label { margin: 0; }
.rate input { display: block; width: 150px; margin-top: 4px; }
.pricetable { max-width: 460px; }
.pricetable td:last-child, .pricetable th:last-child { text-align: right; }
.pricetable .was { color: #777; font-size: .85rem; }

/* Dump instructions */
textarea { width: 100%; padding: 10px; font: inherit; font-size: 1rem; border: 1px solid #b8bec7; border-radius: 6px; resize: vertical; }
.sheet #dumpline span { white-space: pre-line; }
.dumpnote { font-size: .85rem; color: #444; font-style: italic; white-space: pre-line; margin-top: 2px; }

/* Long dump instructions: smaller text and shorter pictures so the ticket still fits one page */
.sheet.compact #dumpline { font-size: 1rem; }
.sheet.compact .pic, .sheet.compact .nopic { height: 1.75in; }
.sheet.compact2 #dumpline { font-size: .92rem; line-height: 1.25; }
.sheet.compact2 .pic, .sheet.compact2 .nopic { height: 1.4in; }

/* Login / account */
.usermenu { margin-left: 22px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.35); white-space: nowrap; }
.usermenu a { color: #fff; }
.authcard { max-width: 420px; margin: 60px auto; background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.authcard h2 { margin-top: 0; }
.authcard .brandline { color: #1f3a5f; font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.authcard button { width: 100%; margin-top: 18px; }
.authmsg { min-height: 1.3em; margin-top: 12px; color: #b3261e; font-weight: 600; }
.authmsg.ok { color: #1b6e2d; }
.accountwrap { max-width: 460px; margin: 20px auto; padding: 0 16px; }
.accountwrap .card { margin-bottom: 20px; }
.userstable td, .userstable th { font-size: .9rem; }
.userstable .off td { color: #888; text-decoration: line-through; }
.userstable button.small { padding: 4px 8px; font-size: .85rem; margin-right: 4px; }
.userform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.userform select { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #b8bec7; border-radius: 6px; }
@media print { .usermenu { display: none; } }