/* ============================================================================
   Mercury Shipping Center: application specific styles.

   The palette, the type scale, the page shell (.page-head, .stat-band,
   .page-toolbar), the generic content patterns (.chip, .field-label,
   .empty-state, .mail-layout, .card-grid, .table-cards) and the Bootstrap and
   Kendo variable mapping all live in mercury-theme.css, which loads before this
   file and is meant to be copied unchanged into other Mercury applications.

   Only things that are genuinely about SHIPPING belong here: the app chrome,
   shipment status dates, the drill down panel, and the address book.
   Everything here may use the --mc-* tokens from the theme.
   ============================================================================ */

/* ===== App chrome =========================================================
   Sticky footer: body is a full height flex column, the content wrapper grows,
   the footer never floats up on short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-content {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
  padding: var(--mc-space-4) 0;
  color: var(--mc-text-muted);
}

.navbar {
  border-bottom: 3px solid var(--mc-primary) !important;
}

/* THE LOGO
   Two lockups, both carrying their own wordmark, so neither is ever paired with the product
   name in text. .brand-logo is mark plus "ShippingCenter"; .brand-logo-endorsed adds the
   "by mercury commerce" line and is used where the maker should be named.

   Both are <img> elements referencing wwwroot/img, so the browser caches the artwork once
   instead of carrying it inline on all 40 pages. Each img states the artwork's intrinsic width
   and height, which is what lets these rules size by ONE dimension: the ratio is known before the
   file loads, so a single height (or a single width) resolves the other and nothing shifts.
   Setting both distorts the logo. width:auto is stated because an image in a flex row otherwise
   takes its width from the flex algorithm rather than from its own ratio. */
.brand-logo,
.brand-logo-endorsed,
.brand-logo-endorsed-sm {
  display: block;
  width: auto;
  flex: 0 0 auto;
}

/* Navbar. The lockup is 8.1937 : 1, so 26px tall is about 213px wide, which is close to what
   the old logo plus its adjacent text span occupied. 26px is under the height of a nav link, so
   the bar does not grow and the 1280px overflow fix stays intact. */
.brand-logo {
  height: 26px;
}

/* Sign-in, where the product introduces itself. Sized by WIDTH here, not height: the sign-in
   card is a narrow column, so capping the width is what actually guarantees it never overflows,
   and height:auto lets the 5.5126 : 1 ratio resolve the rest (300px wide is about 54px tall). */
.brand-logo-endorsed {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

/* THE LOGO ON A DARK THEME.
   The artwork is an external <img>, so it cannot read --mc-* custom properties and the navy
   wordmark stays navy: 1.99:1 against the dark navbar surface, which is not dim, it is gone. A
   light variant of each lockup lives beside the original in wwwroot/img (same paths, same
   viewBox, three fill colours swapped; see the comment inside the file).

   Swapped by CSS `content:`, deliberately, and not by any of the alternatives:
     * an @media (prefers-color-scheme) query would follow the OPERATING SYSTEM, and the theme
       here follows a saved preference that has nothing to do with it;
     * rendering both <img> elements and hiding one still DOWNLOADS both, on every page, forever;
     * a <picture> element cannot switch on an ancestor's attribute at all.
   `content` replaces the image the element renders while leaving the element itself, so the
   width/height attributes still reserve the box and the sizing rules above still resolve the
   ratio. No view knows which file it is showing. The favicon is untouched: it renders against
   the browser's own tab chrome, not against the application's surface. */
[data-theme="dark"] .brand-logo {
  content: url("/img/shippingcenter-logo-light.svg");
}

[data-theme="dark"] .brand-logo-endorsed,
[data-theme="dark"] .brand-logo-endorsed-sm {
  content: url("/img/shippingcenter-by-mercury-commerce-light.svg");
}

/* A tenant landing page, where the tenant's own logo leads and ours is the credit underneath.
   200px is a measured floor, not a guess: the "by mercury commerce" line is 76 units tall in a
   277 unit viewBox, so below about 200px wide it falls under 7px and stops being readable at
   all. Anything smaller than this should use the plain .brand-logo or a text credit instead. */
.brand-logo-endorsed-sm {
  width: 200px;
  height: auto;
}

/* Support mode puts a long "Acting: <client name>" label in the nav, which pushed the bar past
   the viewport and gave every page a horizontal scrollbar at 1280. Let the bar wrap instead,
   and cap the label: a client name is identification, not a headline. */
.navbar-collapse,
.navbar .navbar-nav {
  flex-wrap: wrap;
}

.navbar-nav .nav-link {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table thead th {
  color: var(--mc-text);
}

/* The floating label trick used on the sign in forms. */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===== Shipment status =====================================================
   The date that gives a shipment status its meaning: the delivery moment, or
   when tracking was last checked. */
.status-date {
  display: block;
  font-size: var(--mc-text-xs);
  color: var(--mc-text-muted);
  white-space: nowrap;
}

.status-date-stale {
  color: var(--mc-danger);
  font-weight: var(--mc-weight-semibold);
}

/* Same wording on one line, where it sits inside a sentence rather than under
   a badge. */
.status-date-inline .status-date {
  display: inline;
  font-size: var(--mc-text-base-sm);
}

/* ===== Dense shipment lists ================================================ */
.cell-truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.table-compact {
  table-layout: fixed;
  width: 100%;
}

/* A DATE CELL that carries a second line.
   The tracking line under a date is a phrase ("checked 47 minutes ago"), and
   .status-date sets white-space:nowrap so it never breaks mid-badge in the places it
   sits beside one. In a narrow fixed-layout column that nowrap is a leak: the phrase
   ran straight out of its column, past the card, past main, and gave the whole page a
   horizontal scrollbar at Surface width.

   IT IS CONTAINED, NOT WRAPPED. Letting the phrase wrap did stop the leak, and bought a
   different one: three words over two lines made every row in the table a line taller
   than it needed to be, in the one column where the extra line says nothing - the badge
   above it has already said what the row is. So the phrase stays on its own single line
   and gives up its tail to an ellipsis when the column is genuinely too narrow for it.
   Nothing is lost by that: both branches of _StatusDate.cshtml carry the whole sentence,
   spelled out, in the span's own title, which is where the exact timestamp lives anyway
   ("checked 47 minutes ago" is the summary; "Tracking last checked Sun Aug 2, 8:14 PM"
   is the fact). The date on the line above still stays on one line as it always did. */
.cell-date {
  white-space: nowrap;
}

.cell-date .status-date {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* At phone width a truncating cell has no fixed table to truncate against, and
   the card layout gives it a whole line anyway. */
@media (max-width: 767.98px) {
  .table-cards .cell-truncate {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }
}

/* Dashboard drill down panel: the subset of shipments behind a clicked count. */
.drilldown-card {
  border-color: var(--mc-primary);
}

.drilldown-card .card-header {
  background: var(--mc-primary-subtle);
}

/* Segmented scope switcher (Mine / My Locations / Organization). */
.segmented .btn {
  font-size: var(--mc-text-base-sm);
}

/* ===== Address book cards ==================================================
   There is no .addr-grid or .addr-card family any more. Every rule that used to
   live here was, line for line, the theme's .listview-cards and .mc-card under a
   different name: same grid tracks, same gap, same border, radius, surface,
   padding and hover. The address book uses the theme's card now, so an address
   card and a location card are one card with one place to change it.

   What is left below is the part that really is address specific: the circular
   kind badge and the title row that has to make room for it. */

/* The kind badge sits to the left of the title, so the title block needs to be a
   flex row that can shrink; without min-width:0 a long company name refuses to
   truncate and pushes the chips off the card. */
.mc-card .addr-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--mc-space-3);
  min-width: 0;
}

.mc-card .addr-title-text {
  min-width: 0;
  /* Larry: the title block rides 7px lower so it aligns optically with the kind badge. */
  padding-top: 7px;
}

/* ===== Address kind badges =================================================
   A circular badge tinted with the kind's accent colour. The SVG inside is
   currentColor driven, so the accent is set once as a custom property and the
   icon follows. Used by the address book cards, the kind filter pills and the
   ship form picker rows. */
.addr-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--addr-kind-accent, var(--mc-neutral));
  background: color-mix(in srgb, var(--addr-kind-accent, var(--mc-neutral)) 12%, var(--mc-surface-raised));
}

/* THE KIND ACCENTS ON A DARK THEME. Unlike everything else in the app these eight colours are
   not tokens: they are literals in AddressKindIcons.cs, rendered as an inline custom property on
   each badge, because the icon set is data and a stylesheet cannot enumerate it. They were all
   picked dark enough to read on white, which makes every one of them wrong on a dark surface
   (#01539b on a dark tint is about 2:1). Lifted here rather than duplicated as a second palette
   in C#: mixing each accent toward the body text keeps the eight hues distinguishable from one
   another, which is the only job they have, while putting them back above 4.5:1. */
[data-theme="dark"] .addr-kind {
  color: color-mix(in srgb, var(--addr-kind-accent, var(--mc-neutral)) 40%, var(--mc-text));
  background: color-mix(in srgb, var(--addr-kind-accent, var(--mc-neutral)) 22%, var(--mc-surface-sunken));
}

.addr-kind svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.addr-kind-sm {
  width: 1.4rem;
  height: 1.4rem;
}

.addr-kind-sm svg {
  width: 0.8rem;
  height: 0.8rem;
}

.addr-card .addr-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--mc-space-3);
  min-width: 0;
}

.addr-card .addr-title-text {
  min-width: 0;
}

/* The kind filter row: the theme's pills, quieter, each carrying its icon. */
.filter-pills-sm .filter-pill {
  font-size: var(--mc-text-sm);
  gap: var(--mc-space-2);
  padding: 0.2rem 0.7rem 0.2rem 0.4rem;
}

.filter-pills-sm .filter-pill.active .addr-kind {
  background: color-mix(in srgb, var(--mc-on-primary) 25%, transparent);
  color: var(--mc-on-primary);
}

/* ===== Searchable address picker (ship forms) ============================== */
.addr-picker {
  position: relative;
}

.addr-picker-panel {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 22rem;
  overflow: hidden;
  background: var(--mc-surface-raised);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-sm);
  box-shadow: var(--mc-shadow-3);
}

/* Wins over the display:flex above on specificity, so hiding still hides. */
.addr-picker-panel[hidden] {
  display: none;
}

/* Only the list scrolls: the filter strip stays put while results move. */
.addr-picker-results {
  overflow-y: auto;
  padding: var(--mc-space-2) 0;
}

/* Compact filter strip pinned above the results. Deliberately lighter than the
   address book's pills: this is a picker, not a report. */
.addr-picker-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--mc-border);
  background: var(--mc-surface-sunken);
}

.addr-picker-filters[hidden] {
  display: none;
}

.addr-picker-chips,
.addr-picker-book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mc-space-2);
  min-width: 0;
}

.addr-picker-filter-label {
  font-size: var(--mc-text-xs);
  font-weight: var(--mc-weight-semibold);
  color: var(--mc-text-muted);
  margin-right: var(--mc-space-1);
}

.addr-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-pill);
  background: var(--mc-surface-raised);
  color: var(--mc-text);
  font-size: var(--mc-text-xs);
  font-weight: var(--mc-weight-semibold);
  line-height: 1.2;
  padding: 0.15rem 0.5rem 0.15rem 0.25rem;
}

.addr-picker-chip:not(:has(.addr-kind)) {
  padding-left: 0.5rem;
}

.addr-picker-chip:hover {
  border-color: var(--mc-primary);
  color: var(--mc-primary);
}

.addr-picker-chip.active {
  background: var(--mc-primary);
  border-color: var(--mc-primary);
  color: var(--mc-on-primary);
}

.addr-picker-chip.active .addr-kind {
  background: color-mix(in srgb, var(--mc-on-primary) 25%, transparent);
  color: var(--mc-on-primary);
}

.addr-picker-chip .addr-kind {
  width: 1.2rem;
  height: 1.2rem;
}

.addr-picker-chip .addr-kind svg {
  width: 0.7rem;
  height: 0.7rem;
}

.addr-picker-book-select {
  width: auto;
  font-size: var(--mc-text-sm);
  padding: 0.1rem 1.5rem 0.1rem 0.4rem;
}

.addr-picker-group {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: var(--mc-weight-bold);
  color: var(--mc-text-muted);
  padding: 0.4rem 0.75rem 0.2rem;
}

.addr-option {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mc-space-3);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.addr-option.active,
.addr-option:hover {
  background: var(--mc-primary-subtle);
}

.addr-option .addr-option-main {
  min-width: 0;
}

.addr-option .addr-option-title {
  font-weight: var(--mc-weight-semibold);
  color: var(--mc-text);
  font-size: var(--mc-text-base-sm);
}

.addr-option .addr-option-sub,
.addr-option .addr-option-place {
  color: var(--mc-text-muted);
  font-size: var(--mc-text-sm);
}

/* The search hit highlight. Tinted from the warning ramp rather than a literal
   yellow, so on the dark theme it is a dark amber wash under light text instead
   of a lit-up band that hides the very word it is marking. */
.addr-option mark {
  background: var(--mc-warning-subtle);
  padding: 0;
  color: inherit;
}

.addr-picker-hint {
  color: var(--mc-text-muted);
  font-size: var(--mc-text-sm);
  padding: 0.35rem 0.75rem;
  border-top: 1px solid var(--mc-surface-sunken);
}

.addr-chosen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mc-space-4);
  border: 1px solid var(--mc-primary);
  border-radius: var(--mc-radius-sm);
  background: var(--mc-primary-subtle);
  padding: 0.45rem 0.6rem;
}

.addr-chosen[hidden] {
  display: none;
}

.addr-chosen .addr-chosen-text {
  min-width: 0;
  font-size: var(--mc-text-base-sm);
  color: var(--mc-text);
}

.addr-chosen .addr-chosen-place {
  color: var(--mc-text-muted);
  font-size: var(--mc-text-sm);
}

/* --- Notes panel ----------------------------------------------------------
   The shared _Notes partial, used on shipments, locations and address book
   entries. Everything here is built from mercury-theme tokens; nothing sets a
   colour of its own. Notes are append only, so there is no edit affordance to
   style: an entry, a list, and a quiet Remove on the ones you may withdraw. */
.note-panel .note-count {
  font-size: var(--mc-text-xs);
  font-weight: var(--mc-weight-semibold);
  color: var(--mc-primary);
  background: var(--mc-primary-subtle);
  border-radius: var(--mc-radius-pill);
  padding: 0.05rem 0.5rem;
}

.note-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-space-4);
  margin-top: var(--mc-space-3);
  flex-wrap: wrap;
}

.note-form .note-notify .form-check-label {
  font-size: var(--mc-text-sm);
  color: var(--mc-text-muted);
}

.note-list {
  list-style: none;
  margin: var(--mc-space-4) 0 0;
  padding: 0;
}

.note-item {
  border-top: 1px solid var(--mc-border);
  padding: var(--mc-space-3) 0;
}

.note-item:first-child {
  border-top: none;
}

/* A note that asked for a manager reads differently at a glance from chatter. */
.note-item.note-flagged {
  border-left: 3px solid var(--mc-warning);
  padding-left: var(--mc-space-3);
}

.note-meta {
  display: flex;
  align-items: center;
  gap: var(--mc-space-3);
  flex-wrap: wrap;
  font-size: var(--mc-text-sm);
}

.note-meta .note-author {
  font-weight: var(--mc-weight-semibold);
  color: var(--mc-text);
}

.note-meta .note-when {
  color: var(--mc-text-muted);
}

/* The remove control sits at the far end so it is never next to the words. */
.note-meta .note-remove {
  margin-left: auto;
}

.note-body {
  margin-top: var(--mc-space-1);
  color: var(--mc-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}