/* Overview (the console's landing page): the page's own layout classes. Every component (KPI tiles, panels,
   chips, codes, the problem cell, thumbnails, the source tile, the age tag, feed rows, bot avatars, phase bars)
   comes from app.css; this file only places them: the wide column with its side column, the Needs-attention
   rows (tile · order · problem · actions), the bill, the marketplace rows and the bot cards. Nothing moves under
   the pointer. */

/* ── the main grid: the attention list and the side column ── */
.ov__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
.ov__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { .ov__main { grid-template-columns: minmax(0, 1fr); } }

/* ── needs attention: the column captions and one row per order ── */
.ov__cols, .ov__row { display: grid; grid-template-columns: 40px minmax(210px, 1fr) minmax(0, 1.45fr) 176px; gap: 10px 14px; padding: 14px 18px; border-bottom: 1px dashed var(--line-2); }
.ov__cols { padding: 9px 18px; font-size: 12px; color: var(--ink-3); }
.ov__cols-act { text-align: right; }
.ov__row { align-items: center; }
.ov__row:last-child { border-bottom: 0; }
.ov__row:hover { background: var(--panel-2); }
.ov__row > .src { align-self: center; }
.ov__order { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink); }
.ov__order:hover { text-decoration: none; }
.ov__order:hover .ref { color: var(--accent); }
.ov__ref { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ov__ref .ref { font: 600 13px/1.2 var(--mono); color: var(--ink); }
.ov__buyer { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov__buyer .mono { color: var(--ink-2); font-size: 12px; }
.ov__items { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.ov__items-text { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov__items-text .iname { display: inline-flex; vertical-align: middle; }
.ov__prob { min-width: 0; }
.ov__acts { display: grid; grid-template-columns: 1fr; gap: 6px; align-self: center; }
.ov__acts .inline-form { display: flex; width: 100%; }
.ov__acts .btn { width: 100%; height: 30px; }
@media (max-width: 900px) {
  .ov__cols { display: none; }
  .ov__row { grid-template-columns: 40px minmax(0, 1fr); }
  .ov__prob, .ov__acts { grid-column: 1 / -1; }
  .ov__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── your bill ── */
.ov__bill { display: flex; flex-direction: column; gap: 10px; }
.ov__bill-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ov__bill-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov__proj { text-align: right; flex: none; }
.ov__label { font-size: 12px; color: var(--ink-3); }
.ov__fee { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.ov__proj-n { font: 500 14px/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
.ov__period { height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.ov__period span { display: block; height: 100%; background: var(--btn); }
.ov__billnote { font-size: 12px; color: var(--ink-3); }
.ov__due { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--info-bg); border: 1px solid color-mix(in oklab, var(--info) 28%, transparent); }
.ov__due--bad { background: var(--bad-bg); border-color: color-mix(in oklab, var(--bad) 28%, transparent); }
.ov__due-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); }
.ov__due-text strong { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.ov__due-link { font-size: 12px; color: var(--ink-3); }

/* ── marketplaces: logo tile · name and status · orders today, with the mode and the last contact under ── */
.ov__mk { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 18px; border-bottom: 1px dashed var(--line-2); color: var(--ink); }
.ov__mk:last-of-type { border-bottom: 0; }
.ov__mk:hover { background: var(--panel-2); text-decoration: none; }
.ov__mk-tile { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; place-items: center; }
.ov__mk-tile .mlogo { width: 20px; height: 20px; border-radius: 4px; vertical-align: 0; }
.ov__mk-txt { font: 600 12px/1 var(--mono); color: var(--ink-2); }
.ov__mk-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov__mk-name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov__mk-n { grid-row: span 2; font: 600 18px/1 var(--mono); text-align: right; }
.ov__mk-line { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── bots · live: the PC chips in the head, then one card per bot ── */
.ov__jobs { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); }
.ov__jobs:hover { background: var(--panel-2); text-decoration: none; }
.ov__low { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px dashed var(--line-2); color: var(--ink); font-size: 13px; }
.ov__low:last-of-type { border-bottom: 0; }
.ov__low:hover { background: var(--panel-2); text-decoration: none; }
.ov__low-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov__low-th { font: 11.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.ov__pc { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ov__pc:hover { text-decoration: none; color: var(--ink); border-color: var(--line-2); }
.ov__bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; padding: 14px; }
.ov__bot { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--ink); min-width: 0; }
.ov__bot:hover { border-color: var(--line-2); }
a.ov__bot-head { color: var(--ink); }
a.ov__bot-head:hover { text-decoration: none; }
a.ov__bot-head:hover .ov__bot-id, a.ov__bot-order:hover { text-decoration: underline; }
.ov__bot-head { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.ov__bot-id { flex: 1; font: 600 12.5px/1 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov__bot-slot { margin-left: auto; font: 10.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.ov__bot > .pill { align-self: flex-start; max-width: 100%; overflow: hidden; }
.ov__bot-foot { display: flex; align-items: center; gap: 6px; width: 100%; font: 11.5px/1 var(--mono); color: var(--ink-3); min-width: 0; }
.ov__bot-order { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov__bot-since { margin-left: auto; flex: none; }
.ov__bots-empty { grid-column: 1 / -1; }

/* ── a phone: the panel heads may wrap, the bot cards two abreast ── */
@media (max-width: 760px) {
  .ov .panel__head { flex-wrap: wrap; }
  .ov .panel__meta { white-space: normal; }
  .ov__bots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 12px; }
}