/* Forwarder Ops — base styles from the design's helmet, plus hover/focus
   classes standing in for the prototype's style-hover / style-focus
   attributes. The design runtime injected those with !important, so these
   keep !important to beat the inline base styles the same way. */

html, body { margin: 0; background: #f6f7f9; color: #0f172a; font-family: 'Figtree', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: #0d9488; }
a:hover { color: #0f766e; }
button { font-family: inherit; }
input, select { font-family: inherit; }
::selection { background: #99f6e4; }
:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* ---------- glass ----------
   The page lies on a soft wash of the brand's teal, so the white panes over
   it read as frosted glass rather than grey boxes. Blur is kept to the layers
   that float — the navigation and dialogs — because a blurred pane for each
   of fifty container cards is what makes a laptop's fan spin. */
body {
  background:
    radial-gradient(1100px 640px at 6% -8%, rgba(45, 212, 191, 0.22), transparent 62%),
    radial-gradient(900px 560px at 100% 0%, rgba(125, 211, 252, 0.16), transparent 60%),
    radial-gradient(1000px 700px at 60% 110%, rgba(52, 211, 153, 0.14), transparent 62%),
    #eef3f5;
  background-attachment: fixed;
  min-height: 100vh;
}
.glass {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 14px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* The navigation's items sit on the glass: white when hovered or current, never grey. */
.nav-item { background: transparent; transition: background 0.12s, box-shadow 0.12s; }
.nav-item:hover { background: rgba(255, 255, 255, 0.8) !important; }
.nav-item[aria-current="page"] {
  background: #fff !important; color: #0f766e !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(13, 148, 136, 0.12);
}
.nav-add { box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28); }
.dlg-bg { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.glass-dialog {
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
}

/* ---------- signing in ----------
   A page of its own: one glass card in the middle of the wash. */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.auth-card { width: 100%; max-width: 400px; border-radius: 22px; padding: 28px 28px 24px; box-sizing: border-box; }
.auth-alert { font-size: 13px; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.auth-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.auth-note { background: #f0fdfa; border: 1px solid #99f6e4; color: #0f766e; }

/* The starting password, named at the top of every screen until it is changed. */
.pw-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 30px 0; padding: 10px 14px;
  border-radius: 14px; background: rgba(255, 251, 235, 0.92); border: 1px solid #fde68a; font-size: 13px; color: #78350f;
}

/* A control that cannot be used should look it. The inline styles paint a
   button or a field the same whether it is disabled or not, so an "Add BL"
   with nothing typed looked as ready as one with a number in it. */
button:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
input:disabled, select:disabled, textarea:disabled { background: #f8fafc !important; color: #94a3b8 !important; cursor: not-allowed; }

/* style-hover equivalents */
.h-teal:hover { background: #f0fdfa !important; }
.h-gray:hover { background: #f1f5f9 !important; }
.h-gray2:hover { background: #f1f5f9 !important; color: #475569 !important; }
.h-mut:hover { color: #475569 !important; }
.h-red:hover { background: #fee2e2 !important; color: #b91c1c !important; }
.h-soft:not(:disabled):hover { background: #f8fafc !important; }
.h-row:hover { background: #fafbfc !important; }
.h-row2:hover { background: #f8fafc !important; }
.h-dark:not(:disabled):hover { background: #0f766e !important; border-color: #0f766e !important; }
.h-br:not(:disabled):hover { filter: brightness(0.97) !important; }
.h-ver:hover { background: #e2e8f0 !important; }
.h-chip:hover { border-color: #99f6e4 !important; background: #f0fdfa !important; }

/* style-focus equivalents */
.f-ring:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 3px rgba(13,148,136,.12) !important; }
.f-bdr:focus { border-color: #0d9488 !important; }

/* Arriving from a "view this" link. The row is scrolled into view and flashes,
   so it is obvious which of forty rows was being pointed at. */
/* What a row does when a link somewhere else has just opened it: it is scrolled
   to, and then says so for long enough to be seen. The open row keeps a ring
   of its own after this fades — the flash is for finding it, the ring for
   knowing which one you are reading. */
.just-opened { animation: just-opened 2.2s ease-out; border-radius: 16px; }
@keyframes just-opened {
  0%, 12%  { box-shadow: 0 0 0 4px rgba(13,148,136,.45); }
  55%      { box-shadow: 0 0 0 4px rgba(13,148,136,.28); }
  100%     { box-shadow: 0 0 0 4px rgba(13,148,136,0); }
}



/* Keyboard reachability. Every clickable row carries role=button and a tab
   stop, so it hints in extensions like Vimium and works without a mouse. */

[role="button"] { cursor: pointer; }
[role="button"]:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* The packing-list review. The arrow keys mark the item that has the focus,
   so which item that is must be unmistakable: its row is tinted, and a ring
   goes round the option chosen — round the whole toggle while it has none. */
.pl-row { cursor: pointer; }
.pl-row:focus, .pl-row:focus-visible { outline: none; }
.pl-row:focus td, .pl-row:focus-within td { background: #f0fdfa; }
.pl-row:focus td:first-child, .pl-row:focus-within td:first-child { box-shadow: inset 3px 0 0 #0d9488; }
.pl-toggle { display: inline-flex; border-radius: 8px; outline: none; }
.pl-toggle:focus-visible { outline: none; }
/* 27px, the HS-code field's height beside it. */
.pl-opt { font-family: inherit; font-size: 12px; font-weight: 600; box-sizing: border-box; height: 27px; padding: 0 11px;
  border: 1px solid #d0d5dd; background: #fff; color: #475569; cursor: pointer; }
.pl-opt-l { border-radius: 8px 0 0 8px; }
.pl-opt-r { border-radius: 0 8px 8px 0; border-left: none; }
.pl-opt[aria-checked="true"] { background: #0d9488; border-color: #0d9488; color: #fff; }
.pl-toggle:focus .pl-opt[aria-checked="true"] { position: relative; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d9488; }
.pl-toggle.unmarked:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d9488; }

/* ---------- spreadsheet grids ----------
   Tables that fill like Excel (grid.ts): gridlines rather than a box per cell,
   the active cell ringed, the selection tinted, a frozen heading row. The
   ring dims while the keyboard is elsewhere, as Excel's does. */
.xg { position: relative; }
.xg-scroll { overflow: auto; max-height: 420px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; }
.xg table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
.xg th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 8px; background: #f8fafc; border-bottom: 1px solid #e4e7ec;
  border-right: 1px solid #eef1f4; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; }
.xg th:hover, .xg th.in { color: #0f766e; }
.xg th.in { background: #e6f7f5; }
.xg td { height: 30px; box-sizing: border-box; padding: 0 8px; background: #fff; border-bottom: 1px solid #eef1f4;
  border-right: 1px solid #eef1f4; font-size: 12.5px; color: #101828; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: cell; user-select: none; scroll-margin-top: 31px; }
.xg td.ro { background: #fcfcfd; color: #667085; }
.xg td.in { background: #e6f7f5; }
.xg td.bad { background: #fef2f2; color: #b91c1c; }
.xg td.in.bad { background: #fde4e4; }
.xg td.pre { color: #0f766e; font-style: italic; }
.xg td.act { position: relative; box-shadow: inset 0 0 0 2px #0d9488; }
.xg:not(:focus-within) td.act { box-shadow: inset 0 0 0 2px #99f6e4; }
.xg td.edit { padding: 0; background: #fff; box-shadow: inset 0 0 0 2px #0d9488; }
.xg-editor { width: 100%; height: 100%; box-sizing: border-box; padding: 0 8px; border: 0; outline: none; background: transparent;
  font: inherit; color: inherit; text-align: inherit; }
/* The keyboard's field between edits: in the active cell, unseen and unclickable. */
.xg-nav { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.xg-tag { margin-left: 5px; font-size: 10px; font-weight: 700; color: #0f766e; }

/* ---------- the page in the middle ----------
   Each screen is capped at its own width and sits in the middle of the room
   beside the navigation, so a wide or zoomed-out window does not leave it
   hugging the left edge. */
.screen > [data-screen-label] { margin-left: auto; margin-right: auto; }

/* ---------- the filters bar ----------
   The search, the tabs and the selects stay in reach while the list scrolls
   under them, on a pane of the same glass as the navigation, stuck where the
   navigation's top is. Under the dialogs (100) and the navigation (40). */
.toolbar-wrap {
  position: sticky; top: 14px; z-index: 30;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 10px 26px rgba(15, 23, 42, 0.07);
}
/* On a desktop the parts lie in the bar's own row; the wrappers exist for the phone. */
.tb-seg-row, .tb-more { display: contents; }
.tb-more-btn { display: none; }

/* Sortable table headers read as buttons. */
.col-sort { background: none; border: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: baseline; gap: 5px; }
.col-sort:hover { color: #0d9488 !important; }

/* ---------- mobile ----------
   The person on a phone is a manager: what needs doing, who owes it, and how
   far each job has got. The sidebar becomes a top bar, the wide tables scroll,
   and anything that is detail rather than decision is hidden outright. */
@media (max-width: 860px) {
  body { font-size: 15px; }

  .app-shell { flex-direction: column !important; }

  /* The floating navigation becomes a floating glass bar across the top, in
     two rows: the brand with the three buttons — add a job, change password,
     sign out — and under them the pages, scrolling sideways. */
  .sidebar {
    position: sticky !important; top: 8px !important; width: auto !important;
    height: auto !important; margin: 8px !important; border-radius: 16px !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand foot" "nav nav";
    align-items: center !important; gap: 6px 8px !important; padding: 8px 10px !important; overflow: hidden !important;
  }
  .nav-add-label { display: none !important; }
  .sidebar-brand { grid-area: brand; padding: 0 !important; border-bottom: none !important; min-width: 0; }
  .sidebar-brand-text span:last-child { display: none !important; }
  .sidebar-nav {
    grid-area: nav; flex-direction: row !important; padding: 0 !important; gap: 4px !important;
    overflow-x: auto !important; scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav > * { white-space: nowrap !important; width: auto !important; flex: none !important; padding: 7px 10px !important; font-size: 12.5px !important; }
  .sidebar-foot {
    grid-area: foot; border-top: none !important; padding: 0 !important;
    flex-direction: row !important; align-items: center !important; gap: 6px !important;
  }
  .sidebar-foot .hide-mobile { display: none !important; }
  .sidebar-foot button { min-width: 38px !important; height: 38px !important; }
  /* The name and role give way; the Team page says who is who. */
  .account-words, .account-avatar { display: none !important; }
  .nav-add { width: auto !important; padding: 0 11px !important; }
  .pw-banner { margin: 10px 14px 0; }

  /* The log's four columns become two lines: when, who and what it was on,
     then what happened. Three fixed columns left the words no room at all. */
  .activity-row { flex-wrap: wrap !important; row-gap: 2px !important; column-gap: 8px !important; }
  .activity-row > .act-time, .activity-row > .act-actor, .activity-row > .act-subject { width: auto !important; }
  .activity-row > .act-subject:empty { display: none; }
  .activity-row > .act-msg { flex-basis: 100% !important; }

  .screen { padding: 14px !important; }
  .hide-mobile { display: none !important; }

  /* Card rows stop being a single line and stack. */
  .row-head { flex-wrap: wrap !important; gap: 6px 8px !important; }
  .row-tags { margin-left: 0 !important; width: 100% !important; }
  .rail { margin-left: 0 !important; }
  .work-panel { margin-left: 0 !important; }
  .toolbar-wrap { gap: 8px !important; }
  .toolbar-wrap input { width: 100% !important; min-width: 0 !important; }

  /* Wide tables scroll rather than squashing. */
  .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* The BL dialog stacks: the preview, then the number under it. */
  .bl-upload { grid-template-columns: 1fr !important; }
  .bl-upload-preview { height: 300px !important; }

  /* A touch target you can actually hit. */
  button, [role="button"], select { min-height: 38px; }

  /* The card's header cells wrap onto more lines rather than squashing. */
  .row-main { flex-wrap: wrap !important; gap: 6px 12px !important; }

  /* The filters bar sticks under the navigation bar — whose height runtime.ts
     measures — as two rows: the search, then the tabs scrolling sideways with
     the Filters button beside them. The selects unfold under those on demand. */
  .toolbar-wrap { top: calc(var(--nav-h, 100px) + 16px); padding: 8px 10px; }
  .tb-search { flex: 1 1 100% !important; min-width: 0; max-width: none !important; }
  .tb-seg-row { display: flex; flex: 1 1 100%; gap: 8px; align-items: center; min-width: 0; }
  .tb-seg { flex: 1 1 auto; min-width: 0; overflow-x: auto !important; scrollbar-width: none; }
  .tb-seg::-webkit-scrollbar { display: none; }
  .tb-seg > button { flex: none; }
  .tb-more-btn { display: inline-flex; flex: none; }
  .tb-more { display: none; flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
  .toolbar-wrap.open .tb-more { display: grid; }
  .tb-more > .tb-select { width: 100%; min-width: 0; max-width: none !important; }
  .tb-count { grid-column: 1 / -1; text-align: right; }
}