/* Screen-specific styles: filters, calendar, charts, detail sheet, tables. */

/* ---------------------------------------------------------------- filters */
.filters {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search__icon {
  position: absolute;
  left: var(--s-3);
  color: var(--muted);
  pointer-events: none;
  font-size: 14px;
}

.search .input {
  padding-left: 42px;
  border-radius: var(--r-pill);
}

.filters__scroll {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.filters__scroll::-webkit-scrollbar { display: none; }

/* Filters read as chips rather than form fields: they sit above the list as
   its controls, not as something being filled in. */
.filters__scroll .select {
  width: auto;
  min-width: 118px;
  flex: none;
  min-height: 40px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 560;
}

/* --------------------------------------------------------------- calendar */
.cal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-3) var(--s-2) var(--s-3);
}

.cal__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-1) var(--s-3);
}

/* The month is the title of the screen, so it carries the heading treatment
   rather than sitting between two arrows as a caption. */
.cal__month {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 660;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}

.cal__dow,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal__dow {
  margin-bottom: var(--s-1);
}

.cal__dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 620;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 0;
}

.cal__cell {
  position: relative;
  min-height: 66px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  padding: var(--s-1) 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: background 0.14s ease;
}

.cal__cell:hover { background: var(--surface-2); }
.cal__cell.is-outside { opacity: 0.28; }

/* Today is stated by weight and a filled ground, not by an outline - one less
   line competing with the status dots inside the cell. */
.cal__cell.is-today {
  background: var(--surface-2);
  font-weight: 700;
}

.cal__cell.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 640;
}

.cal__cell:disabled { cursor: default; }

.cal__dots {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 9px;
}

.cal__dots .dot { width: 6px; height: 6px; }

.cal__sum {
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-1) 2px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cal__legend span { display: inline-flex; align-items: center; gap: 5px; }

.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  gap: 2px;
}

.seg__btn {
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease;
}

.seg__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

/* ----------------------------------------------------------------- charts */
.chart {
  width: 100%;
  display: block;
  overflow: visible;
}

.chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chart text {
  font-family: var(--font);
  fill: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chart .chart__value {
  fill: var(--text);
  font-weight: 640;
  font-size: 11px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.chart .grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.hbars { display: flex; flex-direction: column; gap: var(--s-3); }

.hbar__top {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 14px;
  margin-bottom: var(--s-1);
}

.hbar__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}

.hbar__val {
  font-weight: 640;
  white-space: nowrap;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.hbar__track {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.hbar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  min-width: 4px;
  transition: width 0.35s ease;
}

/* ----------------------------------------------------------- detail sheet */
.detail__hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.detail__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
  background: var(--surface-2);
}

.detail__amount {
  font-size: 1.9rem;
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.kv {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: var(--s-2) var(--s-3);
  font-size: 13.5px;
}

.kv dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
}
.kv dd { margin: 0; text-align: right; word-break: break-word; }

.progress {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin: 8px 0 6px;
}

.progress__fill {
  height: 100%;
  background: var(--st-paid);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.mini-list { display: flex; flex-direction: column; }

.mini-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 2px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.mini-row:first-child { border-top: 0; padding-top: 0; }
.mini-row:last-child { padding-bottom: 0; }
.mini-row__grow { flex: 1 1 auto; min-width: 0; font-weight: 560; }
.mini-row__sub { font-size: 11.5px; color: var(--muted); }
.mini-row .num {
  font-weight: 640;
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 620px;
}

.tbl th,
.tbl td {
  padding: var(--s-3) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Column heads carry the same small-caps voice as every other label in the
   product, so a table reads as part of it rather than as raw data. */
.tbl th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 620;
  background: var(--surface);
  position: sticky;
  top: 0;
  border-bottom-color: var(--border-strong);
}

.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.wrap { white-space: normal; min-width: 200px; }

/* Figures line up column-wise, which is the whole point of a table of money. */
.tbl td.num,
.tbl td .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) 4px 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- profile */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 660;
  letter-spacing: -0.02em;
  flex: none;
}

/* The tariff was a blue-violet gradient - the one saturated block left in the
   interface, and it drowned out the payment statuses next to it. It is now an
   elevated panel where the plan name carries the emphasis instead of colour. */
.plan-card {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.plan-card__code {
  font-size: 1.9rem;
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 2px 0 var(--s-2);
}

.plan-card__meta {
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Counts and dates below the figure are read, not scanned - they keep normal
   casing so "12 / 30 ta to'lov" stays legible. */
.plan-card__code + .plan-card__meta,
.plan-card .progress + .plan-card__meta,
.plan-card__meta ~ .plan-card__meta {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

.plan-card .progress {
  background: var(--surface-3);
  margin: var(--s-3) 0 var(--s-2);
}

.plan-card .progress__fill { background: var(--text); }

.list-links {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-1) var(--s-4);
}

.list-links > * + * { border-top: 1px solid var(--border); }