.ad-shell { --ad-navy:#183967; --ad-muted:#5d6f86; --ad-border:#dde6f1; --ad-bg:#f3f6fb; background:var(--ad-bg); }
.ad-shell main { min-width:0; }
.ad-shell aside nav button { text-align:start; border-radius:11px; padding:12px 14px; }
.ad-shell aside nav em { display:inline-block; width:24px; font-style:normal; opacity:.8; }
.ad-shell .card { border-color:var(--ad-border); border-radius:16px; min-width:0; }
.ad-shell h1,.ad-shell h2,.ad-shell h3 { color:var(--ad-navy); }
.ad-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:18px 0 24px; padding:29px 32px; border-radius:18px; background:linear-gradient(120deg,#17345e,#244d85); color:white; }
.ad-heading h1 { color:white; margin:7px 0; font-size:clamp(24px,3vw,35px); }
.ad-heading p { color:#dae7fa; margin:0; }
.ad-eyebrow { color:#bdd1ee; font-size:12px; }
.ad-heading-actions { display:grid; justify-items:end; gap:8px; white-space:nowrap; }
.ad-heading-actions small { color:#dbe7f9; }
.ad-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-block:0 18px; }
.ad-kpis.ad-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ad-metric { display:grid; gap:7px; padding:17px 18px; background:#fff; border:1px solid var(--ad-border); border-radius:14px; min-width:0; text-align:start; }
.ad-metric>span { color:#3c5370; }
.ad-metric>strong { color:#183967; font-size:clamp(19px,2vw,27px); overflow-wrap:anywhere; line-height:1.4; }
.ad-metric small,.ad-section-head p,.ad-table td>small,.ad-trip-totals small { color:var(--ad-muted); }
.ad-metric strong small { font-size:12px; white-space:nowrap; }
.ad-metric.blue { background:#eef5ff; border-color:#cee0f9; }
.ad-metric.amber { background:#fff8ed; border-color:#f0ddba; }
.ad-metric.green { background:#edf9f3; border-color:#c9e6d7; }
.ad-stat-link { padding:0; border:0; background:none; font:inherit; cursor:pointer; border-radius:14px; }
.ad-stat-link .ad-metric { height:100%; }
.ad-stat-link:hover .ad-metric { border-color:#7196c8; }
.ad-columns { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; margin-block:0 18px; }
.ad-columns>.card { margin:0; }
.ad-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:15px; }
.ad-section-head h2,.ad-section-head p { margin:0; }
.ad-section-head p { font-size:13px; margin-top:5px; }
.ad-period { margin:0; min-width:120px; }
.ad-summary .ad-metric { margin-block:10px; background:#f7faff; }
.ad-summary .primary { margin-top:9px; }
.ad-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:end; gap:8px; padding:10px 0; }
.ad-bar { text-align:center; display:grid; gap:7px; color:#274c7c; }
.ad-bar>div { height:102px; display:flex; align-items:end; justify-content:center; background:linear-gradient(#fff,#f2f7fc); border-radius:8px; }
.ad-bar i { display:block; width:min(26px,65%); border-radius:6px 6px 0 0; background:#3763a5; }
.ad-bar small { font-size:11px; color:#5d6f86; }
.ad-trip-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.ad-trip-totals div { border-radius:9px; padding:8px 10px; background:#f2f6fc; display:grid; gap:3px; }
.ad-trip-totals b { color:#183967; font-size:20px; }
.ad-table { border:1px solid var(--ad-border); border-radius:12px; }
.ad-table table { min-width:580px; }
.ad-table th { background:#f1f5fb; white-space:nowrap; }
.ad-table td small { display:block; }
.ad-status { display:inline-block; padding:4px 8px; background:#eaf2fc; color:#244d85; border-radius:7px; white-space:nowrap; font-size:12px; }
.ad-stage-2,.ad-stage-3 { background:#fff3df; color:#8e5009; }
.ad-stage-5 { background:#e4f6ec; color:#126544; }
.ad-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ad-shortcuts button { text-align:start; display:grid; gap:5px; }
.ad-shortcuts small { color:var(--ad-muted); }
.ad-filters { display:flex; gap:10px; flex-wrap:wrap; }
.ad-filters label { margin:0; }
.ad-notice { background:#edf4ff; padding:12px 15px; border-radius:10px; color:#284c7b; }
.ad-empty { text-align:center; color:var(--ad-muted); }
.ad-shell button:focus-visible,.ad-shell select:focus-visible,.ad-shell input:focus-visible { outline:2px solid #436eaa; outline-offset:2px; }
@media(max-width:1080px){.ad-kpis,.ad-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.ad-heading{padding:20px;align-items:start;flex-direction:column;gap:14px}.ad-heading-actions{justify-items:start}.ad-columns{grid-template-columns:minmax(0,1fr)}.ad-metric{padding:13px}.ad-filters{width:100%}.ad-filters label{flex:1 1 145px}.ad-kpis{gap:9px}.ad-bar>div{height:83px}}

#ad-order-detail { scroll-margin-top: 12px; }
.ad-detail-back { margin-block: 12px 0; }
.ad-detail-heading { margin-block: 12px 16px; }
.ad-detail-heading .ad-status { padding: 8px 12px; background: #fff; color: #234878; }
.ad-detail-card { display: grid; gap: 16px; padding: clamp(12px, 2vw, 24px); }
.ad-detail-card > .layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-detail-card > .layout > div, .ad-detail-operations, .ad-detail-history {
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  background: #f8fafd;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ad-detail-card .item-summary { padding: 12px; margin-block: 10px; border: 1px solid var(--ad-border); border-radius: 10px; background: white; }
.ad-detail-card .item-summary h3 { margin-block: 0 8px; }
.ad-detail-card .row { justify-content: space-between; gap: 6px 14px; }
.ad-detail-card .item-summary .row { padding-block: 5px; border-bottom: 1px solid #edf1f7; }
.ad-detail-card .item-summary .row > b { text-align: end; }
.ad-detail-card .layout > div:nth-child(2) svg { display: block; width: 100%; height: auto; max-height: 340px; margin: 0 auto; }
.ad-detail-card .layout > div:nth-child(2) .item-summary { text-align: center; }
.ad-order-activity { display: grid; gap: 14px; font-size: 15px; line-height: 1.65; }
.ad-detail-operations, .ad-detail-history { display: grid; gap: 12px; background: #f8fafd; }
.ad-activity-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ad-activity-heading h3 { margin: 0; color: #213f6c; font-size: 18px; }
.ad-activity-heading > button { margin: 0; }
.ad-activity-complete { padding: 4px 11px; border-radius: 20px; background: #e5f4eb; color: #216144; font-size: 14px; font-weight: 700; }
.ad-operation-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.ad-operation-tools > :is(.driver-assignment, .warehouse-driver-invoice, .wo-entry, .hint) {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 8px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--ad-border);
  border-radius: 10px; background: #fff;
}
.ad-operation-tools > :is(.driver-assignment, .warehouse-driver-invoice, .wo-entry) :is(h3, p, small) { margin: 0; }
.ad-operation-tools > :is(.driver-assignment, .warehouse-driver-invoice) h3 { font-size: 16px; }
.ad-operation-tools > .warehouse-driver-invoice > div { width: 100%; }
.ad-operation-tools > .warehouse-driver-invoice > div > p { margin-top: 4px; }
.ad-operation-tools > .wo-entry small { order: 1; }
.ad-order-activity :is(p, label, small, .hint, button, select, input, textarea) { font-size: 14px; }
.ad-event-list { list-style: none; margin: 0; padding: 0 18px 0 0; }
.ad-event-list > li {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px;
  padding: 8px 12px; border-inline-start: 2px solid #ccd9ed;
}
.ad-event-list > li::before {
  content: ''; position: absolute; inset-inline-start: -6px; top: 17px;
  width: 10px; height: 10px; border-radius: 50%; background: #6587bb;
  box-shadow: 0 0 0 3px #f8fafd;
}
.ad-event-list > li:last-child { font-weight: 700; color: #203f69; }
.ad-event-list > li:last-child::before { background: #2e57a3; }
.ad-event-list small { color: #526984; font-weight: 400; }
.ad-activity-footer { padding: 9px 12px; border-radius: 8px; background: #edf2f9; color: #3d5678; }
.ad-activity-footer p { margin: 0; }
#ad-cancellation {
  grid-column: 1 / -1;
  border: 1px solid #ead2dc;
  border-radius: 12px;
  background: #fffafb;
}
#ad-cancellation > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #8b2347;
}
#ad-cancellation[open] > summary { border-bottom: 1px solid #ead2dc; }
.ad-cancellation-body { padding: 12px 16px 16px; }
.ad-cancellation-body > p:first-child { margin-top: 0; }
.ad-cancellation-body form { max-width: 44rem; }
@media (max-width: 760px) {
  .ad-detail-card > .layout { grid-template-columns: minmax(0, 1fr); }
  .ad-detail-card .row > b { max-width: 65%; }
}

#ad-cancellation .ad-cancel-button {
  background: #8b2347;
  border-color: #8b2347;
  color: #fff;
}
#ad-cancellation .ad-cancel-button:hover { background: #701936; border-color: #701936; }
#ad-cancellation .ad-cancel-button:focus-visible { outline: 2px solid #8b2347; outline-offset: 3px; }

#ad-order-detail .ad-detail-card .location-order-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 4px 0 8px;
  margin-inline-end: 8px;
  padding: 6px 13px;
  border: 1px solid #c6d6ed;
  border-radius: 8px;
  background: #eaf2ff;
  color: #234878;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
#ad-order-detail .ad-detail-card .location-order-link:hover { background: #dce9fc; }
#ad-order-detail .ad-detail-card .location-order-link:focus-visible { outline: 2px solid #2e57a3; outline-offset: 2px; }

.ad-rep-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,370px),1fr)); gap: 14px; }
.ad-rep-card { min-width: 0; display: grid; align-content: start; gap: 14px; padding: 16px; border: 1px solid #d7e2f2; border-radius: 14px; background: #fff; }
.ad-rep-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ad-rep-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; background: #e9f1fd; color: #234878; font-size: 20px; font-weight: 700; }
.ad-rep-header h3, .ad-rep-codes h4 { margin: 0; color: #213f6c; }
.ad-rep-header p, .ad-rep-codes p { margin: 3px 0 0; font-size: 14px; }
.ad-rep-status { margin-inline-start: auto; }
.ad-rep-codes { padding: 11px 12px; border-radius: 10px; background: #f3f7fc; font-size: 14px; }
.ad-rep-codes ul { list-style: none; padding: 0; margin: 4px 0 0; }
.ad-rep-codes li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding-block: 6px; }
.ad-rep-codes bdi { font-weight: 700; overflow-wrap: anywhere; }
.ad-rep-code-status { padding: 2px 7px; border-radius: 7px; background: #e8edf4; color: #42556f; }
.ad-rep-code-status.is-active { background: #e2f2e8; color: #186140; }
.ad-rep-codes summary { cursor: pointer; color: #405c81; }
.ad-rep-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.ad-rep-actions button { min-height: 44px; padding: 7px 11px; font-size: 14px; }
.ad-rep-actions .ad-rep-delete { background: #fff0f0; color: #a72028; border-color: #edb8bb; }
.ad-rep-actions .ad-rep-stop { background: #7a2445; color: #fff; border-color: #7a2445; }
.ad-rep-actions .ad-rep-start { background: #207349; color: #fff; border-color: #207349; }
.ad-rep-actions :is(.ad-rep-delete,.ad-rep-stop,.ad-rep-start):hover { filter: brightness(.92); }