/* Canlı İzleme — the terminal's HDMI second screen (MonitorView.axaml) in the browser.

   Sizes are the terminal's, in two units, so the numbers below read exactly like the XAML:
   --u  one pixel of the monitor's 1920x1080 canvas: the canvas is always 1080 tall and takes the box's
        width (the terminal's ScaledCanvas), so the bar, the gaps and the sales column scale with the box.
   --t  one pixel of a tile's own canvas, whose SHORT side is 400: a tile's content scales with the tile,
        whether it is one of 4 on a TV or one of 30 on the station list.
   Both are registered lengths: resolved to px where they are declared (against the container there) and
   inherited as px — otherwise a tile, itself a size container, would re-resolve --u against itself. */
@property --u { syntax: '<length>'; inherits: true; initial-value: 0.6px; }
@property --t { syntax: '<length>'; inherits: true; initial-value: 0.6px; }

.lm, .lm-grid {
  --lm-bg: #101418; --lm-bar: #080b0e; --lm-panel: #1c232b; --lm-row: #161c23;
  --lm-muted: #88aaaa; --lm-chipfg: #99aabb; --lm-strong: #ccdddd; --lm-subtle: #668888;
  --lm-hero: linear-gradient(135deg, #18222e, #0c1014);
  --lm-green: #74c69d; --lm-blue: #4ea8de; --lm-amber: #e0a458; --lm-red: #e05f5f;
  --lm-accent: linear-gradient(90deg, #74c69d, #4ea8de);
  --lm-shadow: 0 4px 10px rgba(0,0,0,.25);
  --lm-radius: 18px;
}
@media (prefers-color-scheme: light) {
  .lm, .lm-grid {
    --lm-bg: #eef1f4; --lm-bar: #dde3e8; --lm-panel: #ffffff; --lm-row: #f7f9fa;
    --lm-muted: #5a6a78; --lm-chipfg: #44505c; --lm-strong: #222e38; --lm-subtle: #7a8894;
    --lm-hero: linear-gradient(135deg, #ffffff, #dfe8f0);
    --lm-shadow: 0 4px 10px rgba(20,40,60,.12);
  }
}

/* ── The monitor ─────────────────────────────────────────────────────────────── */
.lm {
  container-type: size; box-sizing: border-box; overflow: hidden;
  background: var(--lm-bg); color: var(--lm-strong);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* 16:9 like the HDMI monitor, but never taller than the window under the page header: the canvas takes the
   box's width at any height, so a shorter box is only a wider monitor. */
.lm.embed {
  width: 100%; aspect-ratio: 16 / 9; max-height: max(480px, calc(100vh - 260px));
  border-radius: 16px; box-shadow: var(--lm-shadow);
}
.lm.full { position: fixed; inset: 0; height: 100vh; height: 100dvh; }
body:has(.lm.full) { overflow: hidden; }
.lm-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }

.lm-canvas { --u: calc(100cqh / 1080); --lm-radius: calc(24 * var(--u)); height: 100%; display: flex; flex-direction: column; }
.lm-body {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(700 * var(--u));
  gap: calc(20 * var(--u)); padding: calc(20 * var(--u));
}

/* Bar: logo · station · status + clock, on the bar's middle line */
.lm-bar {
  flex: none; height: calc(100 * var(--u)); padding: 0 calc(30 * var(--u)); background: var(--lm-bar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: calc(24 * var(--u));
}
.lm-logo img { height: calc(40 * var(--u)); display: var(--logo-dark); }
.lm-logo img.brand-logo-light { display: var(--logo-light); }
.lm-title { text-align: center; min-width: 0; }
.lm-station {
  font-size: calc(42 * var(--u)); font-weight: 700; line-height: 1.15; max-width: calc(820 * var(--u));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--lm-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lm-subtitle { font-size: calc(18 * var(--u)); letter-spacing: calc(.5 * var(--u)); color: var(--lm-muted); }
.lm-pills { justify-self: end; display: flex; align-items: center; gap: calc(12 * var(--u)); }
.lm-pill {
  display: inline-flex; align-items: center; background: var(--lm-panel); color: var(--lm-strong);
  border-radius: 999px; padding: calc(7 * var(--u)) calc(21 * var(--u)); font-size: calc(27 * var(--u));
  line-height: 1.2; white-space: nowrap; border: 0; font-family: inherit; text-decoration: none;
}
.lm-pill.ok { color: var(--lm-green); }
.lm-pill.warn { color: var(--lm-amber); font-weight: 600; }
.lm-clock { font-weight: 700; }
.lm-act { cursor: pointer; color: var(--lm-muted); height: auto; min-height: 0; }
.lm-act:hover { color: var(--lm-strong); text-decoration: none; filter: none; }
.lm-act-form { display: contents; }

/* Tiles: rows share the height, a row's tiles share its width (LiveMonitorText.RowCounts) */
.lm-tiles { min-height: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.lm-trow { flex: 1; min-height: 0; display: flex; gap: calc(20 * var(--u)); }
.lm-trow > .lm-tile { flex: 1; min-width: 0; }
.lm-placeholder {
  flex: 1; display: grid; place-items: center; font-size: calc(36 * var(--u)); color: var(--lm-muted);
}

/* Son Satışlar: exactly 13 rows of the column's height (StationLiveDto.MaxRecentSales) */
.lm-sales {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--lm-panel); border-radius: var(--lm-radius); box-shadow: var(--lm-shadow);
}
.lm-sales-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(12 * var(--u));
  padding: calc(20 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u));
}
.lm-sales-title {
  font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1.2;
  background: var(--lm-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lm-sales-note { font-size: calc(19 * var(--u)); color: var(--lm-muted); padding-bottom: calc(8 * var(--u)); }
.lm-sales.stale .lm-sales-note { color: var(--lm-amber); font-weight: 600; }
.lm-srow {
  display: grid; align-items: center; column-gap: calc(12 * var(--u)); padding: 0 calc(26 * var(--u));
  grid-template-columns: calc(76 * var(--u)) calc(58 * var(--u)) minmax(0, 1fr) calc(112 * var(--u)) calc(140 * var(--u));
}
.lm-srow .r { text-align: right; }
.lm-scols { padding-bottom: calc(10 * var(--u)); }
.lm-scols span {
  font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: calc(1.6 * var(--u)); color: var(--lm-subtle);
}
.lm-slist { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(13, minmax(0, 1fr)); }
.lm-slist .lm-srow:nth-child(odd) { background: var(--lm-row); }
.lm-slist .lm-srow.fresh { background: linear-gradient(90deg, rgba(116,198,157,.2), rgba(116,198,157,0) 75%); }
.lm-sales.stale .lm-slist { opacity: .5; }
.lm-stime { font-size: calc(24 * var(--u)); color: var(--lm-muted); font-variant-numeric: tabular-nums; }
.lm-spump {
  display: inline-grid; place-items: center; min-width: calc(50 * var(--u)); height: calc(36 * var(--u));
  padding: 0 calc(8 * var(--u)); box-sizing: border-box; border-radius: calc(10 * var(--u));
  background: var(--lm-bg); color: var(--lm-chipfg); font-size: calc(19 * var(--u)); font-weight: 700;
}
.lm-srow .lm-plate { font-size: calc(20 * var(--u)); width: calc(210 * var(--u)); }
.lm-slitres { font-size: calc(24 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.lm-samount { font-size: calc(24 * var(--u)); font-weight: 700; color: var(--lm-green); font-variant-numeric: tabular-nums; }

/* ── A pump tile ─────────────────────────────────────────────────────────────── */
.lm-tile {
  container-type: size; position: relative; box-sizing: border-box; overflow: hidden;
  background: var(--lm-hero); border: 2px solid transparent; border-radius: var(--lm-radius);
  box-shadow: var(--lm-shadow); color: var(--lm-strong);
}
.lm-tile.filling { border-color: var(--lm-green); }
.lm-tile.auth { border-color: var(--lm-blue); }
.lm-tile.pay { border-color: var(--lm-amber); }
.lm-tile.off { border-color: rgba(224,95,95,.4); }
.lm-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.lm-tile.filling::before { background: linear-gradient(135deg, rgba(116,198,157,.17), rgba(116,198,157,0) 58%); }
.lm-tile.auth::before { background: linear-gradient(135deg, rgba(78,168,222,.17), rgba(78,168,222,0) 58%); }
.lm-tile.pay::before { background: linear-gradient(135deg, rgba(224,164,88,.17), rgba(224,164,88,0) 58%); }

.lm-in {
  --t: calc(1cqmin / 4); position: relative; height: 100%; box-sizing: border-box;
  padding: calc(18 * var(--t)) calc(20 * var(--t));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: calc(6 * var(--t));
}
.lm-head { display: flex; align-items: center; gap: calc(12 * var(--t)); min-width: 0; }
.lm-badge {
  flex: none; display: grid; place-items: center; box-sizing: border-box;
  min-width: calc(60 * var(--t)); height: calc(60 * var(--t)); padding: 0 calc(10 * var(--t));
  border-radius: calc(15 * var(--t)); background: var(--lm-accent); color: #0e2118;
  font-size: calc(36 * var(--t)); font-weight: 800;
}
.lm-tile.off .lm-badge, .lm-tile.nodata .lm-badge { background: var(--lm-panel); color: var(--lm-muted); }
.lm-names { flex: 1; min-width: 0; }
.lm-name {
  font-size: calc(32 * var(--t)); font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-sub { display: flex; align-items: center; gap: calc(10 * var(--t)); min-width: 0; }
.lm-grade {
  flex: 1; min-width: 0; font-size: calc(21 * var(--t)); color: var(--lm-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-chip {
  flex: none; border-radius: 999px; padding: calc(4 * var(--t)) calc(12 * var(--t));
  border: calc(1.5 * var(--t)) solid var(--lm-subtle); color: var(--lm-muted);
  font-size: calc(17 * var(--t)); font-weight: 700; letter-spacing: calc(1 * var(--t)); line-height: 1.2;
}
.lm-tile.filling .lm-chip { background: rgba(116,198,157,.18); color: var(--lm-green); border-color: transparent; }
.lm-tile.auth .lm-chip { background: rgba(78,168,222,.18); color: var(--lm-blue); border-color: transparent; }
.lm-tile.pay .lm-chip { background: rgba(224,164,88,.18); color: var(--lm-amber); border-color: transparent; }
.lm-tile.off .lm-chip { background: rgba(224,95,95,.22); color: var(--lm-red); border-color: transparent; }
.lm-tile.nodata .lm-chip { border-color: var(--lm-amber); color: var(--lm-amber); }

.lm-mid {
  min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(4 * var(--t)); text-align: center; overflow: hidden;
}
.lm-mid > * { max-width: 100%; }
.lm-vol, .lm-amount { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.05; }
.lm-vol { font-size: calc(var(--fit) * var(--t)); font-weight: 800; color: var(--lm-strong); }
/* Green only while fuel flows: a fill at the register and an idle pump's last fill are done. */
.lm-tile.filling .lm-vol { color: var(--lm-green); }
.lm-vol small { font-size: calc(42 * var(--t)); font-weight: 600; color: var(--lm-muted); margin-left: calc(6 * var(--t)); }
.lm-amount { font-size: calc(var(--fit) * var(--t)); font-weight: 700; }
.lm-amount small { font-size: calc(26 * var(--t)); font-weight: 600; color: var(--lm-muted); margin-left: calc(6 * var(--t)); }
.lm-detail, .lm-last-time { font-size: calc(22 * var(--t)); color: var(--lm-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-last-time { color: var(--lm-muted); }
.lm-note { font-size: calc(22 * var(--t)); font-weight: 600; }
.lm-note.pay { color: var(--lm-amber); }
.lm-big { font-size: calc(44 * var(--t)); font-weight: 800; white-space: nowrap; line-height: 1.15; }
.lm-big.auth { color: var(--lm-blue); }
.lm-big.off { color: var(--lm-red); }
.lm-big.muted { color: var(--lm-muted); }
.lm-plug { display: flex; align-items: center; height: calc(52 * var(--t)); }
.lm-plug i { width: calc(46 * var(--t)); height: calc(6 * var(--t)); border-radius: calc(3 * var(--t)); background: var(--lm-red); }
.lm-plug b { width: calc(22 * var(--t)); height: calc(32 * var(--t)); border-radius: calc(6 * var(--t)); background: var(--lm-red); }
.lm-plug b + b { margin-left: calc(19 * var(--t)); }

.lm-foot { display: flex; align-items: center; gap: calc(10 * var(--t)); min-height: calc(40 * var(--t)); min-width: 0; }
.lm-foot.invisible { visibility: hidden; }
.lm-foot .lm-plate { font-size: calc(24 * var(--t)); }
.lm-person {
  min-width: 0; font-size: calc(24 * var(--t)); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Turkish number plate: white field, blue TR band (the terminal's PlateChip) */
.lm-plate {
  flex: none; display: inline-flex; align-items: stretch; box-sizing: border-box; max-width: 100%;
  background: #fbfbf8; border: max(1px, .08em) solid #16191c; border-radius: .17em; overflow: hidden;
  vertical-align: middle; line-height: 1.2;
}
.lm-plate i {
  flex: none; display: flex; align-items: flex-end; padding: 0 .17em .08em; background: #1f4fbf; color: #fff;
  font-style: normal; font-weight: 700; font-size: .42em;
}
.lm-plate b {
  flex: 1; text-align: center; padding: .12em .375em; color: #111418; font-weight: 800; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── The station list (/canli-izleme): small tiles under each station ────────── */
.lm-block { margin-bottom: 26px; }
.lm-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lm-block-head h2 { margin: 0; }
.lm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lm-grid > .lm-tile { aspect-ratio: 4 / 5; }

/* ── Narrow or portrait screens: tiles in a grid, sales under them, the page scrolls ── */
@media (max-width: 920px), (max-aspect-ratio: 1 / 1) {
  .lm.embed, .lm.full { aspect-ratio: auto; max-height: none; container-type: normal; border-radius: 12px; }
  .lm.full { overflow-y: auto; border-radius: 0; }
  body:has(.lm.full) { overflow: auto; }
  .lm-canvas { --u: .55px; height: auto; }
  .lm-bar { height: auto; padding: 10px 12px; grid-template-columns: 1fr auto; row-gap: 6px; }
  .lm-bar .lm-logo { display: none; }
  .lm-title { text-align: left; }
  .lm-station { font-size: 22px; max-width: none; }
  .lm-subtitle { font-size: 12px; }
  .lm-pill { font-size: 14px; padding: 4px 10px; }
  .lm-body { display: flex; flex-direction: column; padding: 10px; gap: 12px; }
  .lm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .lm-trow { display: contents; }
  .lm-trow > .lm-tile { aspect-ratio: 4 / 5; }
  .lm-placeholder { grid-column: 1 / -1; padding: 30px 0; font-size: 16px; }
  .lm-slist { grid-template-rows: none; grid-auto-rows: 38px; }
  .lm-sales-title { font-size: 20px; }
  .lm-sales-note { font-size: 12px; }
  .lm-scols span { font-size: 10px; letter-spacing: .5px; }
  .lm-stime, .lm-slitres, .lm-samount { font-size: 14px; }
  .lm-spump { font-size: 12px; height: 22px; min-width: 30px; }
  .lm-srow { column-gap: 6px; padding: 0 10px; grid-template-columns: 38px 42px minmax(0, 1fr) 58px 74px; }
  .lm-srow .lm-plate { font-size: 12px; width: auto; }
}