/* Dockcerto 2026 visual system — presentation-only, shared by all active routes.
   Intentionally leaves auth, billing, state visibility, and archived agreements alone. */

body[data-dc-future] {
  --future-night: #071b2d;
  --future-navy: #0b3044;
  --future-ink: #11394d;
  --future-muted: #527184;
  --future-mint: #64ead2;
  --future-teal: #078f85;
  --future-line: #cce2e9;
  color: var(--future-ink);
  -webkit-font-smoothing: antialiased;
  background-color: #f1f8fb;
  background-image:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(85, 225, 208, .21), transparent 80%),
    radial-gradient(ellipse 55% 48% at -10% 60%, rgba(90, 170, 220, .12), transparent 85%),
    linear-gradient(rgba(20, 99, 127, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 99, 127, .035) 1px, transparent 1px),
    linear-gradient(180deg, #f6fbfd 0%, #edf6f9 100%);
  background-size: auto, auto, 38px 38px, 38px 38px, auto;
  min-height: 100vh;
}

body[data-dc-future] ::selection { background: #7cefdc; color: #092d3e; }
body[data-dc-future] :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #21cbb9;
  outline-offset: 3px;
}

/* A single luminous top edge and a consistent brand lockup. */
body[data-dc-future] > header {
  position: relative;
  background: linear-gradient(112deg, #071728 0%, #0b2a40 61%, #0a4145 100%) !important;
  border-bottom: 1px solid rgba(92, 236, 217, .32);
  box-shadow: 0 11px 35px rgba(5, 30, 46, .16);
}
body[data-dc-future] > header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 243, 218, .57), rgba(98, 177, 236, .32), transparent);
  pointer-events: none;
}
body[data-dc-future] > header .brand-lockup img {
  filter: drop-shadow(0 4px 12px rgba(80, 238, 214, .21));
}
body[data-dc-future] > header .brand-wordmark {
  font-weight: 870;
  letter-spacing: -.05em;
}
body[data-dc-future] > header :is(a, button) { text-underline-offset: 4px; }

/* Every secondary page gets a clearly visible, finger-friendly way back. */
body[data-dc-future] .dc-pagebar {
  color: #ddf5f5;
  background: linear-gradient(112deg, rgba(8, 34, 52, .98), rgba(15, 65, 75, .96)) !important;
  border: 1px solid rgba(77, 212, 204, .45) !important;
  box-shadow: 0 14px 35px rgba(7, 42, 56, .18), inset 0 1px rgba(255, 255, 255, .075);
  border-radius: 16px;
}
body[data-dc-future] .dc-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 11px;
  background: linear-gradient(115deg, #146b69, #1b8075) !important;
  border: 1px solid rgba(126, 250, 224, .62) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(3, 23, 30, .20);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
body[data-dc-future] .dc-back:hover {
  background: linear-gradient(115deg, #197e78, #219b89) !important;
  box-shadow: 0 7px 20px rgba(3, 23, 30, .25);
  transform: translateY(-1px);
}
body[data-dc-future] .dc-page-context {
  color: #b7dedf !important;
  font-weight: 750;
  letter-spacing: .095em;
}

/* Surface hierarchy: fine borders, soft reflections, clear card elevation. */
body[data-dc-future] :is(.card, .panel, .panelx, .formcard, .metric, .event, .ticket, .pickitem, .entry, .sample, .preview, .plan, .feature) {
  border-color: var(--future-line);
  box-shadow: 0 15px 38px rgba(12, 55, 74, .085), 0 2px 7px rgba(12, 55, 74, .035);
}
body[data-dc-future] :is(.card, .panel, .panelx, .formcard, .metric, .event, .ticket, .pickitem, .plan) {
  border-radius: max(14px, 1rem);
}
body[data-dc-future] :is(.metric, .stat) {
  border-color: #c6e5e6;
  background: linear-gradient(145deg, #fff, #f6fcfd);
  box-shadow: 0 14px 32px rgba(13, 61, 75, .085);
}
body[data-dc-future] .metric {
  position: relative;
  overflow: hidden;
}
body[data-dc-future] .metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #36d9c5, #6aa8eb, transparent);
}
body[data-dc-future] .metric strong { color: #10566a; letter-spacing: -.035em; }
body[data-dc-future] :is(.pagehead h1, .head h1, .settings-hero h1, .billing-identity h1) {
  letter-spacing: -.052em;
}
body[data-dc-future] :is(.eyebrow, .kicker) { letter-spacing: .14em; }
body[data-dc-future] :is(.muted, .caption) { color: var(--future-muted); }

/* The earlier navigation skin darkens generic h1/kicker text. Restore the
   intended high-contrast heading treatment inside dark console hero panels. */
body[data-dc-future] :is(.settings-hero, .support-hero, .preview-settings-head) :is(h1, h2) {
  color: #f5ffff;
}
body[data-dc-future] :is(.settings-hero, .support-hero, .preview-settings-head) :is(.kicker, .eyebrow) {
  color: #7cebd9;
}

/* Crisp controls with noticeable focus and consistent touch targets. */
body[data-dc-future] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  border-radius: 11px;
  border-color: #bdd5df;
  background-color: #fbfefe;
  color: #143c50;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-dc-future] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
  border-color: #16b9ac;
  box-shadow: 0 0 0 4px rgba(25, 190, 172, .13);
}
body[data-dc-future] :is(.btn:not(.outline):not(.secondary):not(.danger):not(.ghost):not(.dark):not(.btn-outline), button[type="submit"]:not(.outline):not(.secondary):not(.danger)):not(:disabled) {
  border-color: rgba(0, 121, 117, .3);
  background: linear-gradient(110deg, #0caa9c, #078a9e);
  color: #fff;
  box-shadow: 0 9px 20px rgba(8, 136, 143, .16);
}
body[data-dc-future] :is(.btn, button) { touch-action: manipulation; }
body[data-dc-future] :is(.btn.outline, .btn-outline) {
  border-color: #9bcbd1;
  border-radius: 11px;
}
body[data-dc-future] :is(.btn, button):disabled { box-shadow: none; }

/* Tables and operational feeds are legible and recognizable across consoles. */
body[data-dc-future] :is(.panelx, .formcard, .card) :is(table, .table) {
  border-color: #d3e4e9;
}
body[data-dc-future] :is(th, thead td) {
  letter-spacing: .035em;
  color: #31566b;
}
body[data-dc-future] :is(tr, .event, .ticket, .pickitem) { transition: background-color .16s ease, box-shadow .16s ease; }
body[data-dc-future] tbody tr:hover { background-color: rgba(226, 247, 246, .44); }
body[data-dc-future] :is(.badge, .pill, .state) { letter-spacing: .025em; }

/* Marketing: retain the existing dark hero; bring its lower cards into the same system. */
body[data-dc-future="marketing"] { background: #fff; }
body[data-dc-future="marketing"] .hero {
  background-image:
    radial-gradient(ellipse 65% 75% at 98% 0%, rgba(51, 221, 203, .12), transparent 70%),
    radial-gradient(ellipse 45% 65% at 0 100%, rgba(54, 144, 207, .19), transparent 75%),
    linear-gradient(115deg, #071a2b, #0c344b 61%, #0b3c49);
}
body[data-dc-future="marketing"] :is(.section.alternate, .pricing) {
  background-image: linear-gradient(rgba(34, 109, 131, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 109, 131, .025) 1px, transparent 1px), linear-gradient(145deg, #eef7f9, #f6fafb);
  background-size: 40px 40px, 40px 40px, auto;
}
body[data-dc-future="marketing"] :is(.feature, .plan) {
  border: 1px solid #d4e8ea;
  box-shadow: 0 18px 44px rgba(6, 48, 66, .075);
}

/* Public routes: an elevated demo frame, with its own deep-blue control rail. */
body[data-dc-future="public"] .app {
  border: 1px solid #add7de;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 66px rgba(6, 37, 54, .18), 0 0 0 5px rgba(119, 216, 213, .09);
}
body[data-dc-future="public"] .sidebar {
  background: radial-gradient(circle at 0 0, rgba(49, 219, 202, .20), transparent 55%), linear-gradient(160deg, #091d32, #103a51 92%);
  border-right: 1px solid rgba(96, 223, 211, .20);
}
body[data-dc-future="public"] :is(.section-demo, .demo-note, .notice) {
  border-color: #c5e4e8;
}
body[data-dc-future="public"] :is(.preview, .sample) {
  box-shadow: 0 24px 55px rgba(4, 33, 48, .19);
}
body[data-dc-future="public"] :is(.field, .notice) { border-radius: 12px; }

/* Private routes: tighter visual continuity between owner metrics and customer cards. */
body[data-dc-future="app"] .main { position: relative; }
body[data-dc-future="app"] :is(.card, .panelx, .formcard) {
  background-image: linear-gradient(147deg, rgba(255, 255, 255, 1), rgba(248, 252, 253, .98));
}
body[data-dc-future="app"] :is(.metric, .event, .ticket, .pickitem):hover {
  border-color: #a4dcd9;
  box-shadow: 0 16px 35px rgba(11, 72, 80, .13);
}
body[data-dc-future="app"] .eventmark {
  box-shadow: inset 0 0 0 1px rgba(24, 162, 154, .08);
}

/* Shippers should see the same trusted identity without customer-only chrome. */
body[data-dc-future="shipper"] .main .card {
  max-width: 800px;
  margin-inline: auto;
}

/* Native, keyboard-operable marketing navigation. Desktop keeps its existing
   full link row; phones get a menu without adding a JavaScript dependency. */
body[data-dc-future="marketing"] .mobile-site-menu { display: none; }

@media (max-width: 760px) {
  body[data-dc-future] { background-size: auto, auto, 32px 32px, 32px 32px, auto; }
  body[data-dc-future] .dc-pagebar { width: calc(100% - 24px); gap: 9px; }
  body[data-dc-future] .dc-back { min-height: 44px; }
  body[data-dc-future] :is(.card, .panel, .panelx, .formcard) { box-shadow: 0 10px 27px rgba(12, 55, 74, .07); }
  body[data-dc-future="public"] .app { border-radius: 16px; }
}

/* Mobile-first usability: no zoom on form focus, accessible 44px actions,
   long reference numbers contained, and wide tables independently scrollable.
   Does not alter visibility gates, billing state, or application scripts. */
@media (max-width: 900px) {
  body[data-dc-future] :is(.card, .panel, .panelx, .formcard, .event, .ticket, .pickitem, .pickup) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body[data-dc-future] :is(.tablewrap, .table-wrap, .table-scroll, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body[data-dc-future="app"] .pickup-panel .tablewrap { overflow: visible; }
  body[data-dc-future] :is(.row, .actions, .toolbar, .event-actions, .activity-controls) {
    min-width: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  body[data-dc-future] > header .brand-wordmark { font-size: clamp(20px, 6vw, 25px); }
  body[data-dc-future] .dc-pagebar { align-items: flex-start; }
  body[data-dc-future] .dc-page-context { line-height: 1.5; overflow-wrap: anywhere; }
  body[data-dc-future] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
    max-width: 100%;
  }
  body[data-dc-future] :is(.btn, .dc-back, button, summary) {
    min-height: 44px;
    box-sizing: border-box;
    touch-action: manipulation;
  }
  body[data-dc-future] :is(.event-actions a, .detail-actions .btn, .toolbar .btn) {
    min-height: 44px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* The dashboard has many sections: keep its navigation one swipeable row
     instead of pushing the actual dispatch content several screens down. */
  body[data-dc-future="app"] .workspace-layout .sidebar {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 9px 10px 13px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body[data-dc-future="app"] .workspace-layout .sidebar .navbtn {
    flex: 0 0 auto;
    min-height: 44px;
    scroll-snap-align: start;
  }

  body[data-dc-future="marketing"] header.nav .brand-lockup { order: 0; }
  body[data-dc-future="marketing"] header.nav .mobile-site-menu {
    display: block;
    order: 1;
    margin-left: auto;
    position: relative;
    z-index: 40;
  }
  body[data-dc-future="marketing"] header.nav .links { order: 2; margin-left: 0; }
  body[data-dc-future="marketing"] header.nav .links > a:not(.btn) { display: none; }
  body[data-dc-future="marketing"] header.nav .links .nav-start { display: none; }
  body[data-dc-future="marketing"] .mobile-site-menu summary {
    display: flex;
    align-items: center;
    gap: 9px;
    list-style: none;
    cursor: pointer;
    padding: 9px 11px;
    border: 1px solid rgba(139, 239, 222, .45);
    border-radius: 11px;
    color: #e8fffb;
    font-size: 12px;
    font-weight: 800;
    background: rgba(24, 130, 122, .22);
  }
  body[data-dc-future="marketing"] .mobile-site-menu summary::-webkit-details-marker { display: none; }
  body[data-dc-future="marketing"] .mobile-site-menu[open] summary { background: rgba(31, 173, 153, .34); }
  body[data-dc-future="marketing"] .mobile-site-menu nav {
    position: absolute;
    z-index: 50;
    top: calc(100% + 9px);
    right: 0;
    width: min(310px, calc(100vw - 24px));
    display: grid;
    gap: 3px;
    padding: 9px;
    border: 1px solid rgba(139, 239, 222, .40);
    border-radius: 15px;
    background: #0a2e41;
    box-shadow: 0 24px 50px rgba(5, 19, 32, .32);
  }
  body[data-dc-future="marketing"] .mobile-site-menu nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 9px;
    color: #e6f9f6;
    font-size: 13px;
    font-weight: 760;
    text-decoration: none;
  }
  body[data-dc-future="marketing"] .mobile-site-menu nav a:hover,
  body[data-dc-future="marketing"] .mobile-site-menu nav a:focus-visible {
    color: #072c3d;
    background: #8df1da;
  }
}

@media (max-width: 380px) {
  body[data-dc-future="marketing"] header.nav { gap: 8px; }
  body[data-dc-future="marketing"] .mobile-site-menu summary { padding-inline: 9px; }
  body[data-dc-future] .dc-pagebar { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-dc-future] :is(.dc-back, tr, .event, .ticket, .pickitem, input, select, textarea) {
    transition: none;
  }
}