/* 2.91.1: the Service center's shell for a laptop screen (service-center.js): one toolbar row, the queues as an icon
   strip below 1500px, a narrower list with two-line rows, board columns that fit. Overrides app.css's .htl/.svc rules
   (loaded after it). Logical sides (Hebrew mirrors), colours from the tokens (light and dark). */

/* the screen: the height is set from the window by the page (fit); the queues 232px open */
.sc-page .htl { min-height: 480px; }
.svc:not(.sc-folded) { grid-template-columns: 232px minmax(0, 1fr); }

/* the toolbar: one row */
.sc-top { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
.sc-top .htl-top-start { flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; min-width: 0; }
.sc-qname { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 170px; font-size: 1rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-qname bdi { white-space: nowrap; }
.sc-top .htl-modes button { padding: 5px 10px; min-height: 32px; }
.sc-top .htl-search { flex: 1 1 140px; max-width: 320px; min-width: 110px; }
.sc-scope { flex: none; }
.sc-scope[hidden] { display: none; }
.sc-scope button { padding: 5px 10px; min-height: 32px; font-size: .82rem; white-space: nowrap; }
.sc-tools { flex: none; flex-wrap: nowrap; align-items: center; gap: 6px; }
.sc-tools > button { min-height: 34px; padding: 5px 12px; white-space: nowrap; }
.sc-tools .sc-more > summary { min-height: 34px; padding: 5px 9px; display: inline-flex; align-items: center; }
.sc-more > summary > :last-child:not(:first-child) { display: none; }
.sc-more .kb-menu { min-width: 230px; }
.sc-more .kb-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.sc-tools .sc-keys { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; font-weight: 700; color: var(--muted); }
.sc-tools .sc-keys:hover { color: var(--ink); }
.sc-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: .8rem; }
.sc-keys-list kbd { min-width: 4.5em; display: inline-block; text-align: center; }
/* a laptop: the view buttons as icons (their names in the tooltip) */
@media (max-width: 1500px) {
  .sc-top .htl-modes .ico-text > span:last-child { display: none; }
  .sc-top .htl-modes button { padding: 5px 9px; }
}

/* the queues folded: an icon strip with the counts */
.svc.sc-folded { grid-template-columns: 56px minmax(0, 1fr); }
.sc-folded .htl-side-title { justify-content: center; padding: 8px 0 4px; }
.sc-folded .htl-side-title > h2 { display: none; }
.sc-folded .htl-fold { transform: rotate(-90deg); }
[dir="rtl"] .sc-folded .htl-fold { transform: rotate(90deg); }
.sc-folded .htl-side-scroll { padding: 0 6px 8px; scrollbar-width: none; }
.sc-folded .htl-side-scroll::-webkit-scrollbar { display: none; }
.sc-folded .htl-g { margin-top: 2px; }
.sc-folded .htl-g + .htl-g { border-top: 1px solid var(--line); padding-top: 2px; }
.sc-folded .htl-g-row, .sc-folded .htl-sub, .sc-folded .htl-q-add, .sc-folded .svc-q-link, .sc-folded .htl-view-x { display: none; }
.sc-folded .htl-q { position: relative; justify-content: center; gap: 0; padding: 9px 0; }
.sc-folded .htl-q-ch { padding-inline-start: 0; }
.sc-folded .htl-q-name { display: none; }
.sc-folded .htl-n { position: absolute; top: 1px; inset-inline-end: 0; min-width: 17px; padding: 0 4px; font-size: .62rem; line-height: 15px; text-align: center; }
.sc-folded .htl-n.sc-zero { display: none; }

/* the split: the list 320px on a laptop, 380px on a big screen */
@media (min-width: 961px) {
  .svc.svc .htl-split.svc-split { grid-template-columns: 320px minmax(0, 1fr); }
  .svc.svc[data-special] .htl-split.svc-split { grid-template-columns: minmax(0, 1fr); }
  .svc[data-special] .svc-pane { display: none; }
}
@media (min-width: 1600px) {
  .svc.svc .htl-split.svc-split { grid-template-columns: 380px minmax(0, 1fr); }
}

/* the rows: two lines (one in Compact) */
.sc-table { table-layout: fixed; }
.sc-table td { padding: 7px 8px; }
.sc-table td.htl-ck { width: 30px; padding-inline: 10px 0; }
.sc-table td.htl-who { width: 42px; padding-inline: 4px 10px; }
.sc-table td.sc-main { min-width: 0; }
.sc-table tr.sc-row { cursor: pointer; }
.sc-table tr.sc-row:hover td { background: var(--sunk); }
.sc-table tr.sc-row.sc-picked td { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.sc-table tr.sc-row.htl-sel td { background: var(--accent-soft); }
.sc-row .htl-ck input { opacity: .35; margin: 0; }
.sc-row:hover .htl-ck input, .sc-row .htl-ck input:checked, .sc-row .htl-ck input:focus-visible { opacity: 1; }
.sc-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sc-l1 .htl-subject { display: flex; flex: 1 1 auto; min-width: 0; font-weight: 400; align-items: center; gap: 5px; }
.svc .htl-split-list .sc-l1 .htl-subject bdi, .sc-l1 .htl-subject bdi { display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.sc-row.htl-waiting .sc-l1 .htl-subject { font-weight: 650; }
.sc-when { flex: none; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-l2 { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.sc-l2 > * { flex: none; }
.sc-l2 .sc-cust { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-l2 .sc-dot { color: var(--muted); }
.sc-l2 .tag, .sc-l1 .tag { font-size: .7rem; padding: 0 7px; line-height: 1.55; }
.sc-table .svc-ico.sc-ch { width: 20px; height: 20px; flex: none; }
.sc-table .svc-att-tag { margin-inline-start: 0; }
.sc-table.compact td { padding-block: 5px; }
.sc-table.compact .sc-l1 { align-items: center; }
.sc-table.compact .sc-cust { flex: 0 1 auto; max-width: 35%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-table.compact .sc-l1 .tag { flex: none; }
.sc-sentinel { height: 1px; }

/* select all: in the bulk bar */
.sc-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* the board: the columns share the width; sideways only past six */
.svc-board .ibx-board-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(220px, calc((100% - 50px) / 6)), 1fr); overflow-x: auto; width: 100%; min-width: 0; }
.svc-board .ibx-col { min-width: 0; }