/* Shofic Console
 * ---------------------------------------------------------------------------
 * The panel's design system, taken from the approved console mock: the same
 * tokens, the same geometry, the same components. Two halves:
 *
 *   1. The console's own components (sh-*), whose markup we render ourselves —
 *      the rail, the bar, the KPI card, the panel and its table.
 *   2. Filament's components mapped onto those tokens, so a resource table or a
 *      record form built by the framework lands in the same system.
 *
 * Plain CSS on purpose: the deploy builds the storefront's assets but not the
 * panel's, so a compiled theme would mean putting Node on the server for no
 * gain. `filemtime` busts the cache — see AdminPanelProvider.
 */

/* ============================================================== tokens == */

:root {
  --sh-bg: #f7f7fb;
  --sh-rail: #0f0e17;
  --sh-surface: #ffffff;
  --sh-surface-2: #fafafd;
  --sh-line: #e9e7f1;
  --sh-line-2: #f2f0f8;
  --sh-hover: #f4f2fb;

  --sh-ink: #141221;
  --sh-ink-2: #4a4560;
  --sh-ink-3: #8a839f;

  --sh-brand: #6d3aed;
  --sh-brand-2: #f2ecff;

  --sh-ok: #0f9d63;
  --sh-ok-2: #e6f6ef;
  --sh-warn: #b4700a;
  --sh-warn-2: #fdf3e3;
  --sh-bad: #d32a52;
  --sh-bad-2: #fdecf0;

  /* The rail is dark in both themes — it is the spine, not a surface. */
  --sh-rail-ink: #cfc9dd;
  --sh-rail-ink-2: #6f6787;

  --sh-r: 14px;
  --sh-r-sm: 9px;
  --sh-shadow: 0 1px 2px rgb(16 12 32 / 0.04), 0 1px 3px rgb(16 12 32 / 0.03);
  --sh-shadow-2: 0 4px 12px rgb(16 12 32 / 0.07), 0 12px 32px rgb(16 12 32 / 0.06);

  --sh-rail-w: 236px;
}

.dark {
  --sh-bg: #0b0a11;
  --sh-rail: #12111c;
  --sh-surface: #141320;
  --sh-surface-2: #181725;
  --sh-line: #24222f;
  --sh-line-2: #1d1b28;
  --sh-hover: #1f1d2e;

  --sh-ink: #eceaf4;
  --sh-ink-2: #a8a2ba;
  --sh-ink-3: #726c85;

  --sh-brand: #a486ff;
  --sh-brand-2: #221b3a;

  --sh-ok: #3fca8f;
  --sh-ok-2: #10291f;
  --sh-warn: #e0a44a;
  --sh-warn-2: #2a2010;
  --sh-bad: #ff7d9c;
  --sh-bad-2: #2c1520;

  --sh-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  --sh-shadow-2: 0 8px 28px rgb(0 0 0 / 0.5);
}

/* ========================================================== foundations == */

.fi-body {
  background-color: var(--sh-bg);
  color: var(--sh-ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.fi-layout {
  min-block-size: 100vh;
}

/* Filament hides this column and lets Alpine reveal it, to stop chart widgets
 * flickering while the sidebar state resolves. Our shell has no collapsible
 * sidebar to wait for, so it is simply visible — without this the whole content
 * column renders at opacity 0. */
.fi-main-ctn {
  display: flex !important;
  flex-direction: column;
  opacity: 1 !important;
  background-color: var(--sh-bg);
  min-inline-size: 0;
  min-block-size: 100vh;
}

.fi-main {
  padding: clamp(16px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-inline-size: none;
}

/* Numbers line up under each other wherever they appear. */
.sh-num,
.fi-ta-cell [class*="fi-ta-text"],
.sh-kpi__v {
  font-variant-numeric: tabular-nums;
}

/* ================================================================ rail == */

.sh-rail {
  /* Filament offsets the sidebar by the height of its full-width topbar. Ours
   * sits inside the content column, so the rail starts at the top of the
   * window and runs the whole way down.
   *
   * `display` is forced because the framework's own rules keep the sidebar
   * hidden until Alpine runs — the panel must open in its finished shape, not
   * assemble itself in front of the reader. */
  display: flex !important;
  inset-block-start: 0;
  block-size: 100vh;
  inline-size: var(--sh-rail-w);
  flex: none;
  background-color: var(--sh-rail);
  color: var(--sh-rail-ink);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-inline-end: 1px solid rgb(255 255 255 / 0.06);
  overflow-y: auto;
}

/* Below the desktop breakpoint the rail is a drawer: still laid out from the
 * first frame, just parked off-canvas until the burger opens it. */
@media (max-width: 1023px) {
  .sh-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  .sh-rail.fi-sidebar-open {
    transform: none;
  }
}

.sh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 0;
  text-decoration: none;
}

/* The emblem is drawn in the brand purple, so it needs a light plate to sit on
   inside a dark rail — not the gradient that used to hold a letter. */
.sh-brand__mark {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  background: #fff;
  padding: 3px;
  display: grid;
  place-items: center;
  flex: none;
  object-fit: contain;
}

.sh-brand__name {
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  font-size: 15px;
}

.sh-brand__env {
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sh-rail-ink-2);
  border: 1px solid rgb(255 255 255 / 0.12);
  padding: 2px 6px;
  border-radius: 999px;
}

.sh-brand__env--production {
  color: #7ee2b8;
  border-color: rgb(63 202 143 / 0.35);
}

.sh-nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sh-navgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sh-navgroup__t {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sh-rail-ink-2);
  padding: 0 10px 6px;
}

.sh-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--sh-rail-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  transition: background-color 120ms ease, color 120ms ease;
}

.sh-navitem:hover {
  background-color: rgb(255 255 255 / 0.05);
  color: #fff;
}

.sh-navitem--on {
  background: linear-gradient(90deg, rgb(124 70 255 / 0.24), rgb(124 70 255 / 0.06));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 #9a6bff;
}

.sh-navitem__i {
  inline-size: 16px;
  block-size: 16px;
  opacity: 0.9;
  flex: none;
}

.sh-navitem__l {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-navitem__n {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  background-color: rgb(255 255 255 / 0.1);
  padding: 1px 7px;
  border-radius: 999px;
  color: #efecf7;
}

.sh-navitem--on .sh-navitem__n {
  background-color: #7c46ff;
  color: #fff;
}

/* Who is signed in, at the foot of the rail. */
.sh-me {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  background-color: rgb(255 255 255 / 0.05);
}

.sh-me__av {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  background-color: #7c46ff;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

.sh-me__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-inline-size: 0;
}

.sh-me__txt b {
  font-size: 12.5px;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-me__txt i {
  font-style: normal;
  font-size: 11px;
  color: var(--sh-rail-ink-2);
}

.sh-me__out {
  margin-inline-start: auto;
}

.sh-me__out button {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--sh-rail-ink-2);
  cursor: pointer;
}

.sh-me__out button:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: #fff;
}

.sh-me__out svg {
  inline-size: 15px;
  block-size: 15px;
}

/* ============================================================= top bar == */

.sh-top {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background-color: color-mix(in srgb, var(--sh-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--sh-line);
  padding: 12px clamp(16px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  gap: 14px;
  block-size: auto;
  box-shadow: none;
}

.sh-top__burger {
  display: none;
  border: 0;
  background: transparent;
  color: var(--sh-ink-2);
  cursor: pointer;
  padding: 4px;
}

.sh-top__burger svg {
  inline-size: 20px;
  block-size: 20px;
}

.sh-crumb {
  font-size: 12.5px;
  color: var(--sh-ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}

.sh-crumb b {
  color: var(--sh-ink-2);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-crumb__sep {
  opacity: 0.6;
}

.sh-top__search {
  margin-inline-start: auto;
  inline-size: min(320px, 32vw);
}

.sh-top__search .fi-input-wrp {
  --tw-shadow: 0 0 #0000;
  background-color: var(--sh-surface);
  border-color: var(--sh-line);
  border-radius: 999px;
  box-shadow: none;
}

.sh-top__search .fi-input-wrp:focus-within {
  border-color: var(--sh-brand);
}

.sh-top__search .fi-input {
  font-size: 13px;
  padding-block: 8px;
}

.sh-top__theme button {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  border: 1px solid var(--sh-line);
  background-color: var(--sh-surface);
  display: grid;
  place-items: center;
  color: var(--sh-ink-2);
  cursor: pointer;
}

.sh-top__theme button:hover {
  color: var(--sh-ink);
  border-color: var(--sh-ink-3);
}

.sh-top__theme svg {
  inline-size: 16px;
  block-size: 16px;
}

/* The moon shows in the dark theme, the sun in the light one — decided by the
 * class on <html>, so the right one is painted in the first frame. */
.sh-icon-moon {
  display: none;
}

.dark .sh-icon-sun {
  display: none;
}

.dark .sh-icon-moon {
  display: grid;
}

/* Filament's own theme switcher and user menu are replaced by the bar and the
 * rail; hiding them keeps one control per job. */
.fi-theme-switcher,
.fi-topbar .fi-user-menu {
  display: none !important;
}

@media (max-width: 1023px) {
  .sh-top__burger {
    display: grid;
  }
}

/* ======================================================== page heading == */

.fi-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
}

/* One rhythm between the bar and the first thing on the page. Filament stacks
 * its own page padding on top of the layout's, which opened a 60px hole under
 * the bar on every list. */
.fi-page {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fi-header-heading {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}

.fi-header-subheading {
  margin-block-start: 2px;
  color: var(--sh-ink-3);
  font-size: 13px;
}

/* The page title carries the location; the crumb trail above repeats it. */
.fi-breadcrumbs {
  display: none;
}

.fi-header-actions-ctn {
  margin-inline-start: auto;
}

/* Section label with a rule out to the edge. */
.sh-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 10px;
}

.sh-sec__t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--sh-ink-2);
}

.sh-sec__l {
  flex: 1;
  block-size: 1px;
  background-color: var(--sh-line);
}

/* ================================================================= KPI == */

/* A custom widget's root element is itself the dashboard grid cell, so the
 * band claims the full row here rather than through a widget property that
 * only reaches Filament's own widget wrappers. */
.sh-band {
  grid-column: 1 / -1;
}

.sh-grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Five steps of one funnel belong on one line, in order. */
.sh-grid4--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1150px) {
  .sh-grid4,
  .sh-grid4--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Two on a phone, and only the figure on each.
 *
 * These collapsed to a single column under 560px, which turned four numbers
 * into four full-width cards and most of a screen of scrolling. Two fit — the
 * values are short — but only once the card stops carrying everything it
 * carries on a desktop: "düne göre" beside a chip, and a sparkline drawn
 * behind both. At 170px wide the note wrapped to two lines and the line
 * drawing had no room to say anything, so the phone keeps the label, the
 * value and the chip, which is the comparison itself.
 */
/*
 * The page title, hard against the left edge.
 *
 * On a phone the header row is the title and the actions, and with the actions
 * wrapped to their own line the title inherited the row's alignment and drifted
 * right — it reads as a mistake, because on every other screen width it sits
 * where the cards below it start.
 */
@media (max-width: 560px) {
  .fi-header {
    justify-content: flex-start;
  }

  .fi-header-heading,
  .fi-header-subheading {
    text-align: start;
    inline-size: 100%;
  }
}

@media (max-width: 560px) {
  .sh-grid4,
  .sh-grid4--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sh-kpi {
    padding: 12px 12px 10px;
  }

  .sh-kpi__spark,
  .sh-kpi__f span {
    display: none;
  }

  .sh-kpi__v {
    font-size: 24px;
  }
}

.sh-kpi {
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  padding: 15px 16px 13px;
  box-shadow: var(--sh-shadow);
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  overflow: hidden;
}

.sh-kpi__top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sh-kpi__ic {
  inline-size: 29px;
  block-size: 29px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background-color: var(--sh-line-2);
  color: var(--sh-ink-2);
  flex: none;
}

.sh-kpi__ic svg {
  inline-size: 15px;
  block-size: 15px;
}

.sh-kpi__ic--ok {
  background-color: var(--sh-ok-2);
  color: var(--sh-ok);
}

.sh-kpi__ic--bad {
  background-color: var(--sh-bad-2);
  color: var(--sh-bad);
}

.sh-kpi__ic--warn {
  background-color: var(--sh-warn-2);
  color: var(--sh-warn);
}

.sh-kpi__ic--brand {
  background-color: var(--sh-brand-2);
  color: var(--sh-brand);
}

.sh-kpi__l {
  font-size: 12.5px;
  color: var(--sh-ink-2);
  font-weight: 500;
}

.sh-kpi__v {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--sh-ink);
}

.sh-kpi__f {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sh-ink-3);
  position: relative;
  z-index: 1;
}

.sh-kpi__spark {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: 96px;
  block-size: 38px;
  opacity: 0.5;
  pointer-events: none;
}

.sh-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 650;
  font-size: 11.5px;
  padding: 1.5px 7px;
  border-radius: 999px;
  background-color: var(--sh-line-2);
  color: var(--sh-ink-2);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.sh-chip--ok {
  background-color: var(--sh-ok-2);
  color: var(--sh-ok);
}

.sh-chip--bad {
  background-color: var(--sh-bad-2);
  color: var(--sh-bad);
}

.sh-chip--warn {
  background-color: var(--sh-warn-2);
  color: var(--sh-warn);
}

/* ============================================================== panels == */

.sh-cols {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1100px) {
  .sh-cols {
    grid-template-columns: 1fr;
  }
}

/*
 * The dashboard's own grid: three fifths to the order list, two to the country
 * table, and neither panel stretched to match the other's height.
 *
 * Stretching is the default for grid cells, so the shorter of a pair grew to
 * meet the taller and padded the difference with empty surface — sixty blank
 * pixels under the order list, which reads as a fault rather than a design.
 *
 * The ratio is what makes the six columns fit on one line each. At an even
 * split the timestamp had to be stacked over two lines to survive, and the
 * country name had its takings pushed underneath it for the same reason.
 *
 * Matched through :has() on our own panel rather than on a page class. The rule
 * that used to stand here targeted .fi-dashboard-page, which no element on the
 * rendered page carries, so it had been quietly doing nothing — which is why
 * every pair of panels had been an even split whatever this file claimed.
 */
@media (min-width: 1101px) {
  .fi-grid:has(> .sh-panel) {
    grid-template-columns: 3fr 2fr;
  }
}

/*
 * Both cards end on the same line.
 *
 * They cannot hold the same number of rows — one is two days of orders, the
 * other is a dozen countries — so equal height has to come from the panel
 * rather than from the content: the cell stretches, the panel caps, and the
 * scrolling box takes whatever is left between the header and the footer. The
 * shorter list carries the slack under its last row, which is what a short list
 * looks like; the alternative is two cards whose bottom edges disagree by a
 * hundred and forty pixels.
 *
 * Stretch is the grid default, so this is deliberately not overridden here —
 * an earlier version set align-items: start to kill the empty surface under the
 * order list, which was the right fix while the panels could not fill it and
 * the wrong one once they could.
 */
.sh-panel:has(.sh-tw--tall) {
  display: flex;
  flex-direction: column;
  /* About a dozen rows plus the day totals; past that the page itself would
     have to scroll to reach the bottom of a card. */
  max-block-size: 700px;
}

.sh-panel {
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  box-shadow: var(--sh-shadow);
  overflow: hidden;
}

.sh-panel__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-block-end: 1px solid var(--sh-line-2);
}

.sh-panel__t {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--sh-ink);
}

.sh-panel__a {
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--sh-brand);
  font-weight: 600;
  text-decoration: none;
}

.sh-panel__a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------- panel table ------- */

.sh-tw {
  overflow-x: auto;
}

.sh-t {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* Fixed tracks, so the amount and the state — the two reasons a row is in
   * this list — cannot be pushed out of the panel by a long e-mail. Everything
   * else truncates. */
  table-layout: fixed;
}

/* Sized from the widest real content in each column: the reference number and
 * the status pill are never allowed to truncate, because they are the two
 * things the reader acts on. */
.sh-t th:nth-child(1) { inline-size: 21%; }
.sh-t th:nth-child(2) { inline-size: 20%; }
.sh-t th:nth-child(3) { inline-size: 23%; }
.sh-t th:nth-child(4) { inline-size: 12%; }
.sh-t th:nth-child(5) { inline-size: 24%; }

.sh-t th {
  text-align: start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sh-ink-3);
  padding: 9px 12px;
  background-color: var(--sh-surface-2);
  border-block-end: 1px solid var(--sh-line-2);
  white-space: nowrap;
}

.sh-t td {
  padding: 11px 12px;
  border-block-end: 1px solid var(--sh-line-2);
  vertical-align: middle;
  white-space: nowrap;
}

/* The row starts and ends flush with the panel's padding. */
.sh-t th:first-child,
.sh-t td:first-child {
  padding-inline-start: 16px;
}

.sh-t th:last-child,
.sh-t td:last-child {
  padding-inline-end: 16px;
}

.sh-t tbody tr:last-child td {
  border-block-end: 0;
}

.sh-t tbody tr {
  cursor: pointer;
  transition: background-color 100ms ease;
}

.sh-t tbody tr:hover {
  background-color: var(--sh-surface-2);
}

.sh-t--end {
  text-align: end;
}

/* Counts that are read against each other down the column rather than summed:
   centred, they line up as a shape instead of a ragged edge. */
.sh-t--mid {
  text-align: center;
}

.sh-c2 {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  overflow: hidden;
}

.sh-c2 b {
  font-weight: 600;
  color: var(--sh-ink);
}

.sh-c2 b a {
  color: inherit;
  text-decoration: none;
}

.sh-c2 b,
.sh-c2 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-c2 span {
  font-size: 11.5px;
  color: var(--sh-ink-3);
}

/* -------------------------------------------- 48-hour order list ------- */

/* The header's middle line: what was actually taken, next to what was not. */
.sh-panel__m {
  margin-inline-start: 4px;
  font-size: 12px;
  color: var(--sh-ink-3);
  white-space: nowrap;
}

.sh-panel__m i {
  font-style: normal;
  color: var(--sh-warn);
}

/*
 * Six tracks, not five, and measured against three fifths of the row — about
 * 680px. The timestamp is what the budget is built around: "17.08 15:31" needs
 * its width or it clips to "17.08 15:" and stops being a timestamp, and at the
 * even split this panel used to sit in there was no width to give it.
 *
 * Written as .sh-t.sh-t--ord rather than .sh-t--ord alone: the five-column
 * widths above match on the same specificity, and whichever rule came last in
 * the file would win. Raising the specificity settles it outright instead of
 * depending on where in this file somebody later pastes something.
 */
.sh-t.sh-t--ord th:nth-child(1) { inline-size: 16%; }
.sh-t.sh-t--ord th:nth-child(2) { inline-size: 11%; }
.sh-t.sh-t--ord th:nth-child(3) { inline-size: 45%; }
.sh-t.sh-t--ord th:nth-child(4) { inline-size: 11%; }
.sh-t.sh-t--ord th:nth-child(5) { inline-size: 17%; }

/*
 * The quantity, in brackets after the service it belongs to.
 *
 * It had a column, which spent a twelfth of the table restating something the
 * service name only half said — "Instagram Followers" and "1.000" are one
 * fact read together and two half-facts read apart. Folded in, the name track
 * gains that width back and the phone breakpoint loses a column it never had
 * room for.
 *
 * Not bold: the name is what the eye looks for down the column, and a bold
 * figure beside a bold name gives it two things to find.
 */
.sh-qty {
  font-weight: 400;
  color: var(--sh-ink-3);
  font-variant-numeric: tabular-nums;
}

/* The country card beside it, in the remaining two fifths — about 455px. The
   first track carries the flag, the code and the takings in brackets, so it
   takes nearly half; the three counts need only their digits. */
.sh-t.sh-t--cc th:nth-child(1) { inline-size: 48%; }
.sh-t.sh-t--cc th:nth-child(2) { inline-size: 17%; }
.sh-t.sh-t--cc th:nth-child(3) { inline-size: 17%; }
.sh-t.sh-t--cc th:nth-child(4) { inline-size: 18%; }

/* The takings, after the country and subordinate to it. */
.sh-sub {
  margin-inline-start: 5px;
  font-size: 11.5px;
  color: var(--sh-ink-3);
}

/* Nothing to click through to: a country is not a record. Two classes deep so
 * it outranks .sh-t tbody tr rather than merely following it — equal weights
 * are settled by file order, and file order is not something to depend on. */
.sh-t.sh-t--cc tbody tr {
  cursor: default;
}

/* Read at a glance: nothing paid is red whatever the traffic, and the green
 * band starts low because these counts are small and a country converting
 * nearly half of its baskets is doing well by our numbers, not by a textbook. */
.sh-rate {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sh-rate--ok { color: var(--sh-ok); }
.sh-rate--warn { color: var(--sh-warn); }
.sh-rate--bad { color: var(--sh-bad); }

/* Two totals closing the order list: yesterday and today, side by side. The
 * divider between them is a border rather than a gap, so they read as one
 * footer of a panel and not as two more cards on the dashboard. */
/*
 * As many columns as there are cards, in one row.
 *
 * This was repeat(2, ...) while there were two. Adding a third dropped it
 * onto its own line under the other two, half the width of the panel and
 * reading as a separate thing rather than the row it belongs to. Auto-flow
 * takes the count from the markup, so the next card added does not need a
 * second edit here to be laid out correctly.
 */
.sh-foot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-block-start: 1px solid var(--sh-line-2);
}


.sh-foot__c {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 14px;
}

.sh-foot__c + .sh-foot__c {
  border-inline-start: 1px solid var(--sh-line-2);
}

.sh-foot__c span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sh-ink-3);
}

.sh-foot__c b {
  font-size: 19px;
  font-weight: 650;
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.sh-foot__c i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--sh-ink-3);
}

/* Three totals stay on one row on a phone.
   They are a comparison — this month, yesterday, today — and a comparison read
   down two rows is not one. What gives instead is the type: $1,282.46 fits a
   hundred-pixel column at 15px, and the padding comes in to buy the width. */
@media (max-width: 560px) {
  .sh-foot__c {
    padding: 10px 8px 11px;
  }

  .sh-foot__c span {
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }

  .sh-foot__c b {
    font-size: 15px;
    letter-spacing: -0.02em;
  }

  .sh-foot__c i {
    font-size: 10.5px;
  }
}

/*
 * Two days is twenty-odd rows, which is a panel taller than the screen and a
 * dashboard nobody can see the bottom of. The list scrolls inside its own box
 * instead of being truncated, so nothing is dropped without saying so.
 *
 * The cap holds a dozen rows. Lower than that and most of a normal day sits
 * below a fold with no scrollbar to announce it — macOS hides the bar until
 * you scroll, so the only clue a row is missing would be that it is missing.
 */
.sh-tw--tall {
  /* Fills the panel rather than setting its own ceiling: the height is decided
     above, by whichever of the two cards is taller. min-block-size: 0 because a
     flex item refuses to shrink below its content without it, and the box would
     push the panel past its cap instead of scrolling. */
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
}

.sh-tw--tall thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

/* The flag reads as a glyph at body size; a shade larger and it is a country
 * you can pick out while scanning down the column. */
.sh-flag {
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ pills ---- */

.sh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 2.5px 9px;
  border-radius: 999px;
  background-color: var(--sh-line-2);
  color: var(--sh-ink-2);
  white-space: nowrap;
}

.sh-pill::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 999px;
  background-color: currentColor;
  flex: none;
}

.sh-pill--ok {
  background-color: var(--sh-ok-2);
  color: var(--sh-ok);
}

.sh-pill--warn {
  background-color: var(--sh-warn-2);
  color: var(--sh-warn);
}

.sh-pill--bad {
  background-color: var(--sh-bad-2);
  color: var(--sh-bad);
}

.sh-pill--info {
  background-color: var(--sh-brand-2);
  color: var(--sh-brand);
}

/* ------------------------------------------------------------ funnel --- */

.sh-fun {
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sh-fun__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sh-fun__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--sh-ink);
}

.sh-fun__label b {
  font-weight: 600;
}

.sh-fun__label span {
  color: var(--sh-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-fun__label i {
  margin-inline-start: auto;
  font-style: normal;
  color: var(--sh-ink-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}

.sh-bar {
  block-size: 7px;
  border-radius: 999px;
  background-color: var(--sh-line-2);
  overflow: hidden;
}

.sh-bar > span {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c46ff, #b48bff);
}

.sh-bar--ok > span {
  background: linear-gradient(90deg, #0f9d63, #5ed3a3);
}

.sh-bar--warn > span {
  background: linear-gradient(90deg, #c98a1f, #f0c073);
}

.sh-split {
  border-block-start: 1px solid var(--sh-line-2);
  padding-block-start: 11px;
  display: grid;
  gap: 7px;
}

.sh-fun__empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--sh-ink-3);
}

/* ================================== Filament components, same system == */

/* ---------------------------------------------------------- surfaces --- */

.fi-section,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section,
.fi-simple-main {
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  box-shadow: var(--sh-shadow);
}

.fi-section-header {
  padding: 13px 16px;
  border-block-end: 1px solid var(--sh-line-2);
}

.fi-section-header-heading {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--sh-ink);
}

/* ------------------------------------------------------------ tables --- */

.fi-ta-header-cell {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sh-ink-3);
  background-color: var(--sh-surface-2);
  white-space: nowrap;
}

/* Ten columns of operational data fit on a laptop only if the gutters are the
 * mock's 12px rather than Filament's 16px; the row keeps its height. */
.fi-ta-table .fi-ta-cell,
.fi-ta-table .fi-ta-header-cell {
  /* Filament sets this on the cell with its own utility; the gutter is part of
   * the design, so it is stated once here and wins. */
  padding-inline: 0.75rem !important;
}

.fi-ta-table .fi-ta-cell:first-child,
.fi-ta-table .fi-ta-header-cell:first-child {
  padding-inline-start: 1rem !important;
}

/* Filament pads the cell and then pads the text inside it again — 24px of
 * gutter per side, which is what pushed the status column under the pinned
 * actions. The cell owns the gutter; the text sits flush inside it. */
.fi-ta-table .fi-ta-text,
.fi-ta-table .fi-ta-col {
  padding-inline: 0 !important;
}

.fi-ta-cell {
  padding-block: 0.5rem;
}

.fi-ta-row {
  background-color: var(--sh-surface);
  transition: background-color 100ms ease;
}

.fi-striped .fi-ta-row:nth-child(even) {
  background-color: var(--sh-surface-2);
}

.fi-ta-row:hover,
.fi-striped .fi-ta-row:nth-child(even):hover {
  background-color: var(--sh-hover);
}

.fi-ta-text-description {
  margin-block-start: 1px;
  font-size: 11.5px;
  color: var(--sh-ink-3);
}

/* Row actions stay reachable: the last column is pinned to the trailing edge,
 * so a wide table scrolls without taking "open" and "delete" off the screen. */
.fi-ta-table:has(.fi-ta-actions-header-cell) tbody tr > :last-child,
.fi-ta-table:has(.fi-ta-actions-header-cell) thead tr > :last-child {
  position: sticky;
  inset-inline-end: 0;
  background-color: inherit;
  border-inline-start: 1px solid var(--sh-line-2);
  inline-size: 1%;
  white-space: nowrap;
}

.fi-ta-table:has(.fi-ta-actions-header-cell) thead tr > :last-child {
  background-color: var(--sh-surface-2);
}

/* -------------------------------------------------------- status pills - */

.fi-badge {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  padding-inline: 9px;
  border: 0;
}

.fi-ta-cell .fi-badge:not(:has(svg))::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 999px;
  background-color: currentColor;
  margin-inline-end: 5px;
  flex: none;
}

/* ------------------------------------------------------------- tabs ---- */

.fi-tabs {
  justify-content: flex-start;
  margin-inline: 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background-color: var(--sh-surface-2);
  border: 1px solid var(--sh-line);
  border-radius: 11px;
  box-shadow: none;
}

.fi-tabs-item {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sh-ink-2);
}

.fi-tabs-item:hover {
  color: var(--sh-ink);
}

.fi-tabs-item.fi-active {
  background-color: var(--sh-surface);
  color: var(--sh-ink);
  box-shadow: var(--sh-shadow);
}

/* ---------------------------------------------------------- controls --- */

.fi-btn {
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
}

.fi-input-wrp {
  border-radius: var(--sh-r-sm);
  border-color: var(--sh-line);
  background-color: var(--sh-surface);
}

.fi-input-wrp:focus-within {
  border-color: var(--sh-brand);
}

/* A destructive action in a page header is not the page's purpose: it stays
 * red, but as an outline the eye reaches it after the record, not before. */
.fi-header-actions-ctn .fi-btn.fi-color-danger {
  background-color: transparent !important;
  color: var(--sh-bad) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sh-bad) 35%, transparent);
}

.fi-header-actions-ctn .fi-btn.fi-color-danger:hover {
  background-color: var(--sh-bad-2) !important;
}

/* Save and cancel ride with the reader on long record forms. */
.fi-resource-edit-record-page .fi-sc-actions,
.fi-resource-create-record-page .fi-sc-actions {
  position: sticky;
  inset-block-end: 12px;
  z-index: 10;
  padding: 12px 14px;
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  box-shadow: var(--sh-shadow-2);
}

/* ------------------------------------------------------ empty states --- */

.fi-ta-empty-state-icon-ctn {
  --fi-size: 2.25rem;
  background-color: var(--sh-line-2);
}

.fi-ta-empty-state-heading {
  font-size: 15px;
  font-weight: 600;
}

/* --------------------------------------------------------- sign-in ----- */

.fi-simple-layout {
  background-color: var(--sh-bg);
}

.fi-simple-main {
  box-shadow: var(--sh-shadow-2);
}

.fi-simple-header-heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sh-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  block-size: auto !important;
}

.sh-logo__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   Onay kuyruğu — telefon öncelikli

   The one screen used away from a desk, so it is written narrow first and only
   gains width on a large display. 30rem is roughly a 4:5 post at a comfortable
   reading size; wider than that and the caption line grows past the point where
   the eye returns reliably.
   ────────────────────────────────────────────────────────────────────────── */
.sh-aq {
  max-inline-size: 30rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  box-shadow: var(--sh-shadow);
  overflow: hidden;
}

.sh-aq__img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--sh-surface-2);
}

.sh-aq__img--none {
  display: grid;
  place-items: center;
  color: var(--sh-ink-3);
  font-size: 14px;
}

.sh-aq__body {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-aq__headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--sh-ink);
  letter-spacing: -0.01em;
}

.sh-aq__caption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--sh-ink-2);
  white-space: pre-wrap;
}

.sh-aq__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--sh-brand);
}

.sh-aq__link {
  font-size: 13px;
  color: var(--sh-ink-3);
  word-break: break-all;
}

.sh-aq__platforms {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-block-start: 1px solid var(--sh-line-2);
  padding-block-start: 12px;
}

/* A whole-row target, because a 16px checkbox is not a thumb-sized one. */
.sh-aq__p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-radius: var(--sh-r-sm);
  cursor: pointer;
}

.sh-aq__p:hover {
  background: var(--sh-hover);
}

.sh-aq__p input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--sh-brand);
  flex: none;
}

.sh-aq__p-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sh-ink);
}

.sh-aq__p-policy {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--sh-ink-3);
}

.sh-aq__warn {
  padding: 10px 12px;
  background: var(--sh-warn-2);
  color: var(--sh-warn);
  border-radius: var(--sh-r-sm);
  font-size: 13px;
}

/*
 * The grid view of the approval queue.
 *
 * Everything waiting, at the proportion it will appear in a feed, so a run can
 * be judged as a run. Some faults are only visible here: a set of posts that
 * are each fine and all the same colour looks like nothing wrong until they sit
 * side by side.
 *
 * auto-fill rather than a fixed column count, so the same markup gives four
 * across a desk and one on a phone without a breakpoint for each step.
 */
.sh-gr {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sh-gr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-end: 4px;
}

.sh-gr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.sh-gr__tile {
  position: relative;
  border-radius: var(--sh-r-md);
  overflow: hidden;
  background: var(--sh-surface-2);
}

/* The whole picture is the target. A tile-sized hit area beats hunting for a
   link, and this view is used at speed. */
.sh-gr__open {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--sh-surface-2);
}

.sh-gr__open img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.sh-gr__open:hover img { opacity: .88; }

.sh-gr__none {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  font-size: 12px;
  color: var(--sh-ink-3);
}

/* Over the picture, not beside it: the tile is the picture, and anything
   outside it would push the grid out of proportion. */
.sh-gr__pick {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  display: flex;
  padding: 5px;
  border-radius: var(--sh-r-sm);
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
}

.sh-gr__pick input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--sh-brand);
  margin: 0;
}

.sh-gr__cards {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.sh-gr__err {
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sh-warn);
  background: var(--sh-warn-2);
}

/* Sticky, because the grid runs long and the decision belongs beside the
   selection rather than at the end of a scroll. */
.sh-gr__foot {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-md);
  background: var(--sh-surface);
}

.sh-gr__foot .sh-aq__platforms {
  padding: 0;
  border-block-start: 0;
  padding-block-start: 0;
}

.sh-gr__foot .sh-aq__tiktok { margin: 0; }

.sh-gr__foot .sh-aq__actions,
.sh-gr__foot .sh-aq__reason { padding: 0; }

/*
 * TikTok's per-post questions.
 *
 * Set apart from the platform list rather than folded into it: these are
 * required answers, not options, and TikTok's rules say the operator must see
 * them as a deliberate step. Same thumb-sized targets as the rest of the
 * screen — this is still the phone screen.
 */
.sh-aq__tiktok {
  margin: 12px 16px 0;
  padding: 14px;
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sh-aq__tiktok-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sh-aq__tiktok-who {
  font-weight: 500;
  font-size: 12px;
  color: var(--sh-ink-3);
}

.sh-aq__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--sh-ink-2);
}

.sh-aq__field b {
  color: var(--sh-danger);
}

.sh-aq__field select {
  inline-size: 100%;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--sh-ink);
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-sm);
}

.sh-aq__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  font-size: 14px;
  color: var(--sh-ink);
  cursor: pointer;
}

.sh-aq__check input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--sh-brand);
  flex: none;
}

.sh-aq__sub {
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--sh-line-2);
  display: flex;
  flex-direction: column;
}

.sh-aq__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--sh-ink-3);
}

/* Stacked and full-width: on a handset a side-by-side pair puts the
   destructive button under the thumb that was reaching for the other one. */
.sh-aq__actions {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-aq__actions .fi-btn {
  justify-content: center;
  inline-size: 100%;
}

.sh-aq__reason {
  margin: 0 16px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--sh-ink-2);
  background: var(--sh-surface-2);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-sm);
}

.sh-aq__meta {
  padding: 0 16px 16px;
  font-size: 12px;
  color: var(--sh-ink-3);
}

.sh-aq__done {
  max-inline-size: 30rem;
  margin-inline: auto;
  padding: 40px 24px;
  text-align: center;
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
}

.sh-aq__done-t {
  font-size: 17px;
  font-weight: 700;
  color: var(--sh-ink);
}

.sh-aq__done-b {
  margin-block-start: 6px;
  font-size: 14px;
  color: var(--sh-ink-3);
}

/* Sosyal ayarlar — ikinci kaydet düğmesi, formun dibinde. */
.sh-sset__foot {
  margin-block-start: 18px;
  display: flex;
  justify-content: flex-end;
}

/* Sosyal kuyruk widget'ı — dört sayı, tıklanabilir olanlar bir yere götürür. */
.sh-sq {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sh-line-2);
  border-block-start: 1px solid var(--sh-line-2);
}

@media (max-width: 640px) {
  .sh-sq {
    grid-template-columns: repeat(2, 1fr);
  }

  /*
   * Let the wide tables scroll instead of crushing themselves.
   *
   * The panel tables are table-layout: fixed on percentage tracks and sized
   * inline-size: 100%, which on a desktop is what keeps six columns to one
   * line each. On a phone the same rule divides 340px six ways: the service
   * name gets 112 and the date 54, and every column writes over the one
   * beside it — the "son 48 saat" list arrives as text on top of text.
   *
   * The scrolling box was already there and never had anything to scroll,
   * because a table asked for 100% never exceeds its container. A floor on
   * the table gives it something to exceed, and the columns keep the widths
   * they were designed with.
   */
  .sh-tw {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sh-t {
    min-inline-size: 560px;
  }

  /* The head reads as one line on a desktop; on a phone the count and the
     link have nowhere to sit beside a title, so they wrap under it. */
  .sh-panel__h {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .sh-panel__a {
    margin-inline-start: 0;
  }
}

/*
 * Two by two once the panel is only two fifths of the row.
 *
 * The breakpoint above measures the viewport, and the viewport is 1440 while
 * this panel is 450 — so four tiles stayed in a line and "yayın sırasında" and
 * "başarısız hedef" broke across two lines each while their neighbours did not.
 * Above 1100px the grid is 3fr : 2fr and this panel always lands in the narrow
 * column, so the width is known without asking the element for it.
 */
@media (min-width: 1101px) {
  .sh-sq {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sh-sq__i {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--sh-surface);
  text-decoration: none;
}

a.sh-sq__i:hover {
  background: var(--sh-hover);
}

.sh-sq__i b {
  font-size: 22px;
  font-weight: 700;
  color: var(--sh-ink-3);
  letter-spacing: -0.02em;
}

.sh-sq__i span {
  font-size: 12px;
  color: var(--sh-ink-3);
}

/* Colour is earned: a zero is not news, a number waiting on someone is. */
.sh-sq__i--act b {
  color: var(--sh-brand);
}

.sh-sq__i--bad b {
  color: var(--sh-bad);
}

.sh-sq__note {
  margin: 12px 16px 0;
  padding: 9px 11px;
  border-radius: var(--sh-r-sm);
  font-size: 13px;
}

.sh-sq__note--warn {
  background: var(--sh-warn-2);
  color: var(--sh-warn);
}

/* Onay kuyruğunda kaydırmalı kartlar — telefonda parmakla, JS'siz. */
.sh-aq__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--sh-surface-2);
}

.sh-aq__strip::-webkit-scrollbar { display: none; }

.sh-aq__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.sh-aq__slide img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Which card you are on, without a control to operate. */
.sh-aq__slide-n {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  padding: 3px 9px;
  border-radius: var(--sh-r-pill, 999px);
  background: rgb(16 12 32 / 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/*
 * Collapsible navigation groups.
 *
 * Six groups stopped fitting a laptop's rail and the daily work fell below the
 * fold behind subsystems opened once a week. The header becomes a button; the
 * chevron says which way it will go.
 */
.sh-navgroup__t--btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .5rem;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: left;
    padding-inline: 0;
}

.sh-navgroup__t--btn:hover { color: rgb(226 232 240); }

.sh-navgroup__c {
    width: .85rem;
    height: .85rem;
    flex: none;
    opacity: .55;
    transition: transform .15s ease;
}

.sh-navgroup__c--open { transform: rotate(180deg); }

/*
 * The wordmark in the rail.
 *
 * Sized by height so the SVG's own 1774×454 ratio decides the width, and
 * capped so a wide mark cannot push the rail's padding around.
 */
.sh-brand__logo {
    height: 1.55rem;
    width: auto;
    max-width: 9.5rem;
    display: block;
}

/* The emblem-plus-name lockup it replaced. */
.sh-brand__mark,
.sh-brand__name { display: none; }

/*
 * Grids for the SEO screens.
 *
 * The panel ships a pre-built stylesheet rather than a JIT Tailwind build, so
 * utility classes written in a Blade file only work if they already appear
 * somewhere Filament compiled. `lg:grid-cols-3` did not, which is why three
 * charts meant to sit side by side stacked full-width down the page and every
 * panel below them looked broken.
 *
 * Declared here, where the rest of the console's styling already lives.
 */
.sh-g2,
.sh-g3 {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .sh-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The page's own vertical rhythm, for the same reason. */
.sh-stack > * + * { margin-top: 1.5rem; }

/* Keyword rows: one line each, the figures never wrapping away from the word. */
.sh-kwrow {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgb(255 255 255 / .06);
}

.sh-kwrow:last-child { border-bottom: 0; }

.sh-kwrow__q {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
}

.sh-kwrow__n {
    flex: none;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

.sh-kwrow__up { color: #23b880; opacity: 1; }
.sh-kwrow__down { color: #e5325c; opacity: 1; }

.sh-g4 { display: grid; gap: 1rem; }

@media (min-width: 640px) { .sh-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sh-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sh-stack-sm > * + * { margin-top: .75rem; }

/*
 * Tables inside a section: the SEO screens carry several and none of them
 * inherit anything from Filament's own table component.
 */
.fi-section-content table { width: 100%; font-size: .875rem; }
.fi-section-content thead th {
    text-align: left;
    font-weight: 500;
    padding: .4rem 0;
    color: rgb(148 163 184);
    white-space: nowrap;
}
.fi-section-content tbody td { padding: .45rem 0; vertical-align: top; }
.fi-section-content tbody tr + tr td { border-top: 1px solid rgb(255 255 255 / .06); }
.fi-section-content th[class*="text-right"],
.fi-section-content td[class*="text-right"] { text-align: right; }

/* The market row you are looking at. */
.sh-row--on td { background: rgb(124 58 237 / .10); }
.sh-row--on td:first-child { box-shadow: inset 2px 0 0 #7c3aed; }