/* Page switcher in the header of the MAWB, MBL and HAWB pages, and the entry page. */

.kind-nav { display: inline-flex; border: 1px solid var(--rule, var(--line-strong)); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.kind-nav a { padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.kind-nav a + a { border-left: 1px solid var(--rule, var(--line-strong)); }
.kind-nav a:hover { background: var(--tint); color: var(--ink); }
.kind-nav a[aria-current="page"] { background: var(--ink); color: var(--surface); }
.kind-nav a:focus-visible { outline-offset: -3px; }

/* User menu in the page header (added by session.js) */
.user-menu { position: relative; margin-left: auto; }
.user-btn { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: -3px 0 0 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); vertical-align: middle; }
.user-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: grid;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule, var(--line-strong)); border-radius: var(--radius);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--ink) 16%, transparent); overflow: hidden;
}
.user-id { display: grid; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.user-quota { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--exam-fg); }
.user-list a.menu-item { text-decoration: none; display: block; }
.user-list .menu-item { padding: 9px 16px; }
.user-list .menu-item + .menu-item { border-top: 1px solid var(--line); }
.user-list .sub { color: var(--muted); font-size: 12.5px; }

/* Read-only accounts: the controls that change something are hidden (the server refuses them anyway) */
.ro #retryBtn, .ro [data-retry], .ro [data-rename], .ro [data-del], .ro [data-rel] { display: none !important; }
.ro #mawbInput { background: var(--tint); }

/* Truck Order page: DO# completion from the last digits */
.do-suggest { margin-top: 8px; }
.do-suggest-msg { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.do-opts { display: grid; max-height: 290px; overflow-y: auto; border: 1px solid var(--rule, var(--line-strong)); border-radius: var(--radius); }
.do-opt { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; text-align: left; font: inherit; padding: 8px 10px; color: var(--ink); background: var(--surface); border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.do-opt:first-child { border-top: 0; }
.do-opt:hover, .do-opt:focus-visible { background: var(--tint); outline-offset: -2px; }
.do-opt.chosen { background: color-mix(in oklab, var(--accent) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.do-opt-no { font: 600 13px var(--mono); }
.do-opt-date, .do-opt-status { font-size: 12px; color: var(--muted); text-align: right; }
.do-opt-cust { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .do-opt { min-height: 44px; } }

/* Export CSV drop-down on the results toolbar */
.export-menu { position: relative; display: inline-block; }
#exportBtn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: -3px 0 0 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); vertical-align: middle; }
#exportBtn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }
.export-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 100%; display: grid;
  background: var(--surface); border: 1px solid var(--rule, var(--line-strong)); border-radius: var(--radius);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--ink) 16%, transparent); overflow: hidden;
}
.menu-item { font: inherit; font-weight: 600; text-align: left; white-space: nowrap; padding: 9px 16px; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-item:hover, .menu-item:focus-visible { background: var(--tint); outline-offset: -2px; }
@media (max-width: 720px) { .menu-item { min-height: 44px; } }

.home { max-width: 1180px; margin: 0 auto; padding: 44px 60px 64px 20px; }
.home h2 { margin: 0 0 6px; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.home-sub { margin: 0 0 28px; color: var(--muted); max-width: 62ch; }

.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .entries { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

.do-info { margin-bottom: 14px; }
.do-info h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.do-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; margin: 0; }
.do-grid div { min-width: 0; }
.do-grid dt { font-size: 12px; color: var(--muted); }
.do-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.do-skipped { margin: 12px 0 0; padding: 8px 10px; border-radius: 4px; background: var(--tint); }
.do-skipped p { margin: 0 0 4px; font-weight: 600; }
.do-skipped ul { margin: 0; padding-left: 18px; font: 12.5px/1.5 var(--mono); }
.entry {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px;
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.entry:hover { border-color: var(--ink); box-shadow: 0 6px 18px color-mix(in oklab, var(--ink) 10%, transparent); }
.entry svg { width: 30px; height: 30px; color: var(--ink); margin-bottom: 4px; }
.entry-title { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.entry-desc { color: var(--muted); line-height: 1.5; }
.entry-fmt { font: 12.5px/1.4 var(--mono); color: var(--muted); padding: 6px 8px; background: var(--tint); border-radius: 4px; align-self: flex-start; }
.entry-go { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 13px; }
.entry:hover .entry-go { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .entry { transition: none; } }

@media (max-width: 720px) {
  .home { padding: 24px 14px 48px; }
  .kind-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; }
}