/* The owner's screens (Deals, Suppliers): one calm structure shared by both.
   Title line · scoreboard · "Today" panel · tab bar · filter row · ledger rows. */

.ob-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ob-head h1 { margin: 0; font-size: 24px; color: #12233F; }
.ob-asof { margin: 0; font-size: 14px; color: #5B6575; }
.ob-asof b { color: #12233F; }
.ob-mono { font-family: var(--font-mono); }

/* Scoreboard: numbers in one row, no boxes; the chosen one is underlined. */
.ob-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.ob-score { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px 12px; border: 0; border-right: 1px solid #EEF1F4; border-bottom: 3px solid transparent; background: none; font: inherit; cursor: pointer; text-align: left; color: inherit; text-decoration: none; }
.ob-score:last-child { border-right: 0; }
.ob-score[disabled], .ob-score.still { cursor: default; }
.ob-score b { font-size: 28px; line-height: 1; color: #12233F; font-variant-numeric: tabular-nums; }
.ob-score span { font-size: 13.5px; color: #5B6575; }
button.ob-score:hover { background: #F6F8FB; }
.ob-score.us b { color: #9A3412; } .ob-score.them b { color: #1E3A8A; } .ob-score.move b { color: #14532D; } .ob-score.bad b { color: #8B1111; }
.ob-score.on { background: #F6F8FB; border-bottom-color: #12233F; }
.ob-score.on span { color: #12233F; }

/* Today: aligned lists. A value column, then the text, then a chip. */
.ob-today { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; margin: 12px 0 18px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; }
.ob-today > section { padding: 12px 18px; border-right: 1px solid #EEF1F4; min-width: 0; }
.ob-today > section:last-child { border-right: 0; }
.ob-today h2 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: #5B6575; text-transform: none; letter-spacing: 0; }
.ob-today ul { margin: 0; padding: 0; list-style: none; }
.ob-today li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 14px; }
.ob-today li.wide { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.ob-today li b { font-variant-numeric: tabular-nums; color: #12233F; white-space: nowrap; }
.ob-today li b.ob-mono { font-size: 13.5px; }
.ob-today li a { color: #15202E; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-today li a:hover { color: #1D4ED8; text-decoration: underline; }
.ob-today li span { color: #3D4756; min-width: 0; }
.ob-today li i { font-style: normal; font-size: 12.5px; white-space: nowrap; }
.ob-today li i.us { color: #9A3412; } .ob-today li i.them { color: #1E3A8A; } .ob-today li i.bad { color: #8B1111; } .ob-today li i.ok { color: #14532D; }
.ob-none { margin: 0; font-size: 13.5px; color: #8A94A3; }

/* Tab bar, then one filter row: everything the same height, on one left edge. */
.ob-tabs { display: flex; gap: 2px; border-bottom: 1px solid #E3E7ED; }
.ob-tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 14.5px; color: #3D4756; cursor: pointer; }
.ob-tab span { margin-left: 5px; color: #8A94A3; font-variant-numeric: tabular-nums; }
.ob-tab.on { color: #12233F; font-weight: 600; border-bottom-color: #12233F; }
.ob-tab.on span { color: #5B6575; }
.ob-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.ob-search { flex: 0 1 250px; min-width: 180px; height: 36px; padding: 0 12px; border: 1px solid #D5DAE1; border-radius: 8px; font: inherit; font-size: 14px; background: #FFFFFF; }
.ob-search:focus { outline: 2px solid #9DB8F2; border-color: #2F6FED; }
.ob-sel { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 10px; border: 1px solid #D5DAE1; border-radius: 8px; background: #FFFFFF; font-size: 13px; color: #5B6575; }
.ob-sel.on { border-color: #2F6FED; background: #EEF3FD; color: #1D4ED8; }
.ob-sel select { max-width: 150px; border: 0; background: transparent; font: inherit; font-size: 14px; color: #15202E; cursor: pointer; }
.ob-clear { height: 36px; padding: 0 10px; border: 0; background: none; color: #1D4ED8; font: inherit; font-size: 14px; cursor: pointer; }
.ob-note { margin: 0 0 10px; font-size: 14px; color: #5B6575; }
.ob-empty { padding: 24px; text-align: center; color: #5B6575; }
.ob-group { margin-top: 16px; }
.ob-group summary { cursor: pointer; font-size: 13.5px; color: #3D4756; margin-bottom: 8px; }

/* The ledger: one row per deal. Identity | stage track | state.
   One rhythm: every line has its own fixed line-height, zones stack with an 8px gap,
   and the first line of the three zones shares one baseline. */
.ledger { display: flex; flex-direction: column; gap: 8px; }
.lr { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(230px, .85fr) minmax(220px, 1fr); column-gap: 24px; align-items: first baseline;
    padding: 13px 18px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; color: inherit; text-decoration: none; }
.lr:hover { border-color: #9DB8F2; }
.lr.blocked { border-left: 3px solid #C0392B; padding-left: 16px; }
.lr.dormant { opacity: .7; }
.lr.talk { background: #FAFBFC; }
.lr.talk:hover { background: #FFFFFF; }

/* Identity: name, then the who-and-what tags, then the numbers. */
.lr-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lr-name { font-size: 15.5px; line-height: 22px; font-weight: 600; color: #12233F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One line of whole chips: the code fits them to a character budget; on a narrower screen a chip that does not fit
   drops out whole (wraps into the hidden second line) instead of being cut. */
.lr-tags, .lr-refs { display: flex; flex-wrap: wrap; gap: 6px; height: 22px; overflow: hidden; min-width: 0; }
.lr-tag { flex: 0 0 auto; max-width: 100%; height: 22px; padding: 0 8px; border: 1px solid #E3E7ED; border-radius: 5px;
    background: #FFFFFF; font-size: 12.5px; line-height: 20px; color: #2B3646; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-tag.supplier { border-color: #C9D8F7; background: #EEF3FF; color: #1E3A8A; font-weight: 600; }
.lr-tag.brand { border-color: #D5DAE1; background: #FFFFFF; color: #15202E; }
.lr-tag.category, .lr-tag.subcategory { border-color: transparent; background: #EEF1F5; color: #5B6575; }
.lr-tag.more, .lr-refs code.more { border-color: transparent; background: none; padding: 0 2px; color: #5B6575; }
.lr-refs code { flex: 0 0 auto; height: 22px; padding: 0 7px; border-radius: 5px; background: #F1F4F8; font-family: var(--font-mono); font-size: 12px; line-height: 22px; color: #2B3646; white-space: nowrap; }
.lr-refs code.acid { background: #F1FAF4; color: #14532D; }
.lr-event { font-size: 13.5px; line-height: 20px; color: #5B6575; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Track: where the goods are, the nine stages (dark = now), how long it has been open. */
.lr-track { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lr-where { font-size: 14px; line-height: 22px; font-weight: 600; color: #1E3A8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-dots { display: flex; align-items: center; gap: 3px; height: 22px; margin: 0; padding: 0; list-style: none; max-width: 210px; }
.lr-dots li { flex: 1 1 0; height: 6px; border-radius: 3px; background: #E3E7ED; }
.lr-dots li.past { background: #9DB8F2; }
.lr-dots li.now { height: 12px; border-radius: 3px; background: #12233F; }
.lr-span { font-size: 13px; line-height: 20px; color: #5B6575; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* State: whose move, the problem, the date, the money; right-aligned. */
.lr-state { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; min-width: 0; }
.lr-state > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-move { font-size: 14px; line-height: 22px; font-weight: 600; color: #5B6575; }
.lr-move.us { color: #9A3412; } .lr-move.them { color: #1E3A8A; } .lr-move.bad { color: #8B1111; } .lr-move.done { color: #14532D; }
.lr-why { font-size: 13px; line-height: 20px; color: #8B1111; font-style: italic; }
.lr-late { font-size: 13.5px; line-height: 20px; font-weight: 600; color: #8B1111; }
.lr-date { font-size: 13.5px; line-height: 20px; color: #3D4756; }
.lr-money { font-family: var(--font-mono); font-size: 14.5px; line-height: 22px; font-weight: 600; color: #12233F; font-variant-numeric: tabular-nums; }
.lr-money.small-amt { color: #8A94A3; font-weight: 400; }

@media (max-width: 1000px) {
  .ob-board { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-score { border-bottom: 1px solid #EEF1F4; }
  .ob-today { grid-template-columns: 1fr; }
  .ob-today > section { border-right: 0; border-bottom: 1px solid #EEF1F4; }
  .lr { grid-template-columns: minmax(0, 1fr) 220px; row-gap: 10px; }
  .lr-why { flex: 0 1 auto; min-width: 0; }
  .lr-state { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; text-align: left;
      padding-top: 10px; border-top: 1px solid #EEF1F4; }
  .lr-money { margin-left: auto; }
}
@media (max-width: 600px) {
  .ob-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr { grid-template-columns: 1fr; padding: 12px 14px; }
  .lr.blocked { padding-left: 12px; }
  .lr-tags, .lr-refs { flex-wrap: wrap; height: auto; }
  .lr-money { margin-left: 0; }
}

/* The deal page: the same identity, chips and scoreboard as the ledger row, on one column. */
.lr-tags.dp-wrap, .lr-refs.dp-wrap { flex-wrap: wrap; height: auto; overflow: visible; row-gap: 6px; }
.dp-id { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 16px; }
a.lr-tag { text-decoration: none; }
a.lr-tag:hover { border-color: #9DB8F2; }
.lr-tag.ship { border-color: #CDE8D6; background: #F1FAF4; color: #14532D; }
.lr-tag.ship small { font-size: 12px; color: #14532D; opacity: .75; }
.lr-tag.more { cursor: help; }
.lr-refs code.more { cursor: help; }

.dp-board { margin-bottom: 14px; }
.dp-board .ob-score { gap: 4px; min-width: 0; padding: 12px 18px 14px; border-bottom: 0; }
.dp-board .ob-score .dp-k { font-size: 13.5px; font-weight: 600; color: #5B6575; }
.dp-board .ob-score b { max-width: 100%; font-size: 22px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-board .ob-score b.ob-mono { font-size: 20px; }
.dp-board .ob-score b.dp-none { color: #8A94A3; font-weight: 400; }
.dp-board .ob-score b.dp-small-amt { color: #8A94A3; }
.dp-board .ob-score > span:last-child { font-size: 13.5px; line-height: 20px; color: #3D4756; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ob-score.done b { color: #14532D; }

.dp-blocked { margin: 0 0 14px; padding: 9px 14px; border-radius: 8px; background: #FEF2F2; color: #8B1111; font-size: 14px; line-height: 1.5; }

/* An order or a shipment: header line, step bars, summary, one foot line. */
.dp-part { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; padding: 13px 18px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; }
.dp-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 26px; }
.dp-part-name { font-size: 15.5px; line-height: 22px; font-weight: 600; color: #12233F; }
.dp-amt { margin-left: auto; font-family: var(--font-mono); font-size: 14.5px; line-height: 22px; font-weight: 600; color: #12233F; font-variant-numeric: tabular-nums; }
.dp-step { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: #5B6575; }
.dp-step b { font-size: 14px; color: #1E3A8A; }
.dp-step .dp-step-n { margin-left: auto; color: #8A94A3; font-variant-numeric: tabular-nums; }
.lr-dots.dp-dots { max-width: none; height: 14px; }
.dp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; line-height: 22px; color: #3D4756; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-chips code, .changes code { height: 22px; padding: 0 7px; border-radius: 5px; background: #F1F4F8; font-family: var(--font-mono); font-size: 12px; line-height: 22px; color: #2B3646; white-space: nowrap; }
.dp-chips code.acid { background: #F1FAF4; color: #14532D; }
.dp-foot:empty { display: none; }

@media (max-width: 1000px) {
  .dp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* View switch (Cards · Compact · Table) at the right end of the tab bar; the viewer's choice, kept in the browser. */
.dv-switch { display: inline-flex; align-self: center; margin-left: auto; padding: 2px; border: 1px solid #D5DAE1; border-radius: 8px; background: #FFFFFF; }
.dv-switch button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
    font: inherit; font-size: 13px; color: #3D4756; cursor: pointer; }
.dv-switch button:hover { background: #F1F4F8; }
.dv-switch button.on { background: #12233F; color: #FFFFFF; }
.dv-switch button:focus-visible { outline: 2px solid #9DB8F2; outline-offset: 1px; }

/* Compact: one line per deal inside one box; the left edge carries whose move (orange ours, blue theirs, red blocked). */
.dc-list { border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.dc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, .85fr) minmax(140px, .8fr) minmax(56px, .3fr) minmax(0, 1.7fr) minmax(110px, .65fr) 104px;
    align-items: center; column-gap: 16px; padding: 9px 16px 9px 13px; border-left: 3px solid transparent; border-top: 1px solid #EEF1F4;
    font-size: 13.5px; line-height: 20px; color: #2B3646; text-decoration: none; }
.dc:first-child { border-top: 0; }
.dc:hover { background: #F6F8FB; }
.dc > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc.us { border-left-color: #E8833A; } .dc.them { border-left-color: #8FAEEF; } .dc.done { border-left-color: #6DBB8A; }
.dc.bad, .dc.blocked { border-left-color: #C0392B; }
.dc.dormant { opacity: .7; }
.dc-name { font-size: 14px; font-weight: 600; color: #12233F; }
.dc-who { color: #3D4756; }
.dc-cat { font-size: 12.5px; color: #5B6575; }
.dc-where { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1E3A8A; }
.dc-dots { display: flex; align-items: center; gap: 2px; flex: 0 0 58px; margin: 0; padding: 0; list-style: none; }
.dc-dots li { flex: 1 1 0; height: 4px; border-radius: 2px; background: #E3E7ED; }
.dc-dots li.past { background: #9DB8F2; } .dc-dots li.now { height: 9px; background: #12233F; }
.dc-span { color: #5B6575; font-variant-numeric: tabular-nums; }
.dc-move { font-weight: 600; color: #5B6575; }
.dc.us .dc-move { color: #9A3412; } .dc.them .dc-move { color: #1E3A8A; } .dc.done .dc-move { color: #14532D; } .dc.blocked .dc-move, .dc.bad .dc-move { color: #8B1111; }
.dc-move i { margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #FEF2F2; color: #8B1111; font-size: 11.5px; font-style: normal; }
.dc-date { color: #3D4756; } .dc-date.late { color: #8B1111; font-weight: 600; }
.dc-money { text-align: right; font-family: var(--font-mono); font-weight: 600; color: #12233F; font-variant-numeric: tabular-nums; }
.dc-money.small-amt { color: #8A94A3; font-weight: 400; }

/* Table: sortable columns; the first cell's left edge carries whose move; scrolls sideways on a narrow screen. */
.dt-box { border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: 13.5px; color: #2B3646; }
.dt th { padding: 0; border-bottom: 1px solid #E3E7ED; background: #F8F9FB; text-align: left; white-space: nowrap; }
.dt th button { width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #5B6575; text-align: inherit; cursor: pointer; }
.dt th button:hover { color: #12233F; }
.dt th button i { font-style: normal; margin-left: 4px; color: #12233F; }
.dt th.num { text-align: right; }
.dt td { padding: 9px 12px; border-top: 1px solid #EEF1F4; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.dt tbody tr:first-child td { border-top: 0; }
.dt tbody tr { cursor: pointer; }
.dt tbody tr:hover td { background: #F6F8FB; }
.dt td:first-child { box-shadow: inset 3px 0 0 transparent; }
.dt tr.us td:first-child { box-shadow: inset 3px 0 0 #E8833A; } .dt tr.them td:first-child { box-shadow: inset 3px 0 0 #8FAEEF; }
.dt tr.done td:first-child { box-shadow: inset 3px 0 0 #6DBB8A; } .dt tr.bad td:first-child, .dt tr.blocked td:first-child { box-shadow: inset 3px 0 0 #C0392B; }
.dt tr.dormant td { opacity: .7; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt td.dt-name { max-width: 160px; }
.dt .dt-who { max-width: 104px; }
.dt td.dt-date { max-width: 128px; }
.dt td.dt-last { max-width: 100px; }
.dt .dt-cat { font-size: 12.5px; color: #5B6575; }
/* Names wrap to a second line instead of being cut. */
.dt td.dt-name, .dt td.dt-who { white-space: normal; line-height: 18px; }
.dt-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dt td { vertical-align: top; }
.dt th button, .dt td { padding-left: 9px; padding-right: 9px; }
.dt-name a { font-weight: 600; color: #12233F; text-decoration: none; }
.dt-name a:hover { color: #1D4ED8; text-decoration: underline; }
.dt-where { font-weight: 600; color: #1E3A8A; }
.dt-move { font-weight: 600; color: #5B6575; }
.dt tr.us .dt-move { color: #9A3412; } .dt tr.them .dt-move { color: #1E3A8A; } .dt tr.done .dt-move { color: #14532D; } .dt tr.bad .dt-move { color: #8B1111; }
.dt-move span { font-weight: 400; color: #2B3646; }
.dt-move small { margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #FEF2F2; color: #8B1111; font-size: 11.5px; }
.dt-date.late { color: #8B1111; font-weight: 600; }
.dt-money { font-family: var(--font-mono); font-weight: 600; color: #12233F; }
.dt-money.small-amt { color: #8A94A3; font-weight: 400; }

@media (max-width: 1000px) {
  .dc { grid-template-columns: minmax(0, 1.4fr) minmax(130px, 1fr) minmax(0, 1.3fr) 104px; row-gap: 2px; }
  .dc-who, .dc-span, .dc-date { display: none; }
  .dc-cat { grid-column: 1; }
}
@media (max-width: 600px) {
  .ob-tabs { flex-wrap: wrap; }
  .dv-switch { margin: 6px 0; }
  .dc { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px 10px 10px; }
  .dc-name { grid-row: 1; grid-column: 1; } .dc-money { grid-row: 1; grid-column: 2; }
  .dc-where { grid-column: 1 / -1; } .dc-move { grid-column: 1 / -1; }
}