/**** dashboard: cashexec ****/

/*** file: cashexec/dashboard.css ***/

:root {
  font-size: max(min(calc(100dvw / 1920 * 16), 16px), 13px);

  /* Фон Полиматики. */
  background: #f2f4fa;
}

@media (width < 800px) {
  :root {
    font-size: 13px;
  }
}

.widgets-grid {
  gap: var(--sizes-4);
  padding: var(--sizes-4);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap-style: balance;
}

.widget {
  h1 {
    font-size: var(--font-sizes-h4);
  }
}


/*** file: cashexec/linecharts.css ***/

.widget[data-name="cashplan"],
.widget[data-name="retro"] {
  .togglers {
    gap: var(--sizes-3);
  }

  .hgrid-lines {
    color: var(--colors-grayscale-disable);
  }

  .curve-series {
    stroke-width: 2;
  }

  .vbar-series .bar {
    transition: color 0.3s;
  }

  .marker-series .marker {
    r: 5;
    stroke-width: 1;
    fill: white;
  }

  .value-ticks {
    font-variant-numeric: tabular-nums;
  }

  .tooltip {
    padding: var(--sizes-3);
    box-shadow: -2px 2px 10px 0 rgba(112, 112, 117, 0.3);
    border-radius: 8px;
  }

  .column-action-region .column:first-child .tooltip {
    left: 20%;
  }

  .column-action-region .column:last-child .tooltip {
    right: 20%;
  }

  .tooltip h1 {
    margin-bottom: var(--sizes-3);
  }

  .tooltip-content {
    row-gap: var(--sizes-1);

    .divider {
      margin: var(--sizes-1) 0;
    }
  }

  .tooltip-content .tooltip-entry {
    column-gap: var(--sizes-2);
    align-items: center;

    .marker {
      width: var(--sizes-3);
      height: var(--sizes-3);
      border-radius: var(--radii-full);
    }

    .value {
      text-align: right;
      margin-left: var(--sizes-7);
      font-variant-numeric: tabular-nums;
    }
  }

  .marker-labels .label {
    border-width: 1px;
    border-radius: var(--radii-full);
    font-size: var(--font-sizes-s);
    padding: var(--sizes-1) var(--sizes-2);
    font-variant-numeric: tabular-nums;
  }

  &[data-layout="mobile"] .marker-labels .label {
    font-size: var(--font-sizes-xs);
  }
}


/*** file: cashexec/mobile.css ***/

@media (height <= 600px) {
  .brick {
    display: none;
  }
}


/*** file: cashexec/widgets/00-toolbar.css ***/

.cashexec-actions {
  .action {
    --color-bg: #fff;
    --color-bg-hovered: var(--colors-corporate-accent-alt);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sizes-2);

    appearance: none;
    font: inherit;
    line-height: inherit;
    padding: var(--sizes-3);
    border-radius: var(--sizes-3);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;

    .icon {
      flex: 0 0 auto;
      width: var(--sizes-6);
      height: var(--sizes-6);
    }
  }

  .action[aria-disabled="true"] {
    color: rgb(102, 102, 102);
    --color-bg: rgb(217, 218, 222);
    --color-bg-hovered: var(--color-bg);
    cursor: default;
  }
}

.cashexec-actions:not(.compact) {
  .action {
    gap: 0;
    background: var(--color-bg);
    border: 0;

    .label {
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      opacity: 0;
      transition:
        max-width 0.2s ease,
        opacity 0.15s ease;
    }
  }

  .action:not([aria-disabled="true"]):hover,
  .action:not([aria-disabled="true"]):focus-visible {
    gap: var(--sizes-2);
    background: var(--color-bg-hovered);
    color: #fff;

    .label {
      max-width: 16rem;
      opacity: 1;
    }
  }
}

.cashexec-actions.compact {
  display: flex;
  width: 100%;
  justify-content: space-around;
  gap: var(--sizes-2);
  overflow: visible;

  .action {
    flex: 0 0 var(--sizes-12);
    width: var(--sizes-12);
    min-width: var(--sizes-12);
    height: var(--sizes-12);
    min-height: var(--sizes-12);
    padding: 0;
    border-radius: var(--sizes-3);
    border-color: var(--colors-grayscale-spacer-light);
    border-width: 1px;
  }

  .action[aria-disabled="true"] {
    color: var(--colors-grayscale-disable);
  }
}


/*** file: cashexec/widgets/03-programs.css ***/

.widget[data-name="program"],
.widget[data-name="programs-compact"] {
  /* ФП "Вода России" */
  --widget-color-program-1: var(--colors-corporate-accent);
  /* ФП "Защита..." */
  --widget-color-program-2: var(--colors-informing-link);
  /* КПМ ... */
  --widget-color-program-3: #80bbfd;
  /* ФП "Стимулирование спроса на отечественные БПЛА" */
  --widget-color-program-4: #00418a;
}


/*** file: cashexec/widgets/05-cashplan.css ***/

.widget[data-name="cashplan"] {
  --widget-color-plan: var(--colors-grayscale-border);
  --widget-color-fact: var(--colors-corporate-accent);
  --widget-color-positive: var(--colors-informing-approval);
  --widget-color-negative: var(--colors-informing-error);

  --colors-plan: var(--colors-grayscale-border);
  --colors-fact: var(--colors-corporate-accent);
  --colors-remainder-positive: var(--colors-informing-approval);
  --colors-remainder-negative: var(--colors-informing-error);

  .marker-labels[data-name="fact"] .label {
    background: #e6f1ff;
  }

  .value-ticks {
    width: var(--sizes-22);
  }

  .vbar-series[data-name="remainder-positive"] .bar[data-shadowed="true"] {
    color: #b2eae0;
  }

  .vbar-series[data-name="remainder-negative"] .bar[data-shadowed="true"] {
    color: #f2bacb;
  }
}


/*** file: cashexec/widgets/06-retro.css ***/

.widget[data-name="retro"] {
  --widget-color-year-inactive: var(--colors-grayscale-disable);
  --widget-color-year-default: var(--colors-grayscale-border);
  --widget-color-year-2022: #4a5673;
  --widget-color-year-2023: #80bbfd;
  --widget-color-year-2024: #6a5acd;
  --widget-color-year-2025: var(--colors-corporate-accent);
  --widget-color-year-2026: var(--colors-informing-link);

  --colors-year-inactive: var(--colors-grayscale-disable);
  --colors-year-default: var(--colors-grayscale-border);
  --colors-year-2022: #4a5673;
  --colors-year-2023: #80bbfd;
  --colors-year-2024: #6a5acd;
  --colors-year-2025: var(--colors-corporate-accent);
  --colors-year-2026: var(--colors-informing-link);
}

.value-ticks {
  width: var(--sizes-8);
}

.tooltip-content .tooltip-entry .label {
  font-variant-numeric: tabular-nums;
}


/*** file: cashexec/widgets/08-table.css ***/

.widget[data-name="table"] .table {
  height: fit-content;
  max-height: 100%;

  /* Ширина столбцов (их 4 штуки). */
  /* TODO: fixme */
  grid-template-columns: 25rem repeat(3, 1fr);
  border-color: var(--colors-grayscale-disable);

  /* Круглые края. */
  border-radius: var(--sizes-3);

  .body {
    /* Костыль, чтобы вынести скроллбар за таблицу. */

    /* doen't work everywhere
    margin-right: calc(-10px - var(--sizes-1));
    padding-right: var(--sizes-1);
    */
  }

  /* Шрифты. */
  .body .cell:not(:first-child) {
    /* Выровнять цифры для всех ячеек после первой. */
    font-variant-numeric: tabular-nums;
  }
  .body .cell:first-child {
    /* Балансировать длину строк при переносе в первой ячейке. */
    text-wrap-style: balance;
  }
  [data-variant="header"],
  [data-variant="footer"] {
    font-size: var(--font-sizes-m);
    font-weight: var(--font-weights-medium);
    line-height: 1.3;
  }
  .body {
    font-weight: var(--font-weights-light);
    line-height: 1.5;
  }
  .cell:not(:first-child) {
    /* Выровнять по правому краю все ячейки столбцов после первого. */
    text-align: right;
  }
  .subject-cell button {
    /* Активный курсор при наведении на ячейку субъекта РФ. */
    cursor: pointer;
  }

  /** Цвета. **/

  /* Красим каждую нечётную строку и каждую чётную. */
  .body > .row:nth-child(odd) {
    background: rgba(245, 243, 247, 0.4);
  }
  .body > .row:nth-child(even) {
    background: #fff;
  }

  .subject-cell button .icon {
    /* Цвет иконки в ячейке субъекта. */
    color: var(--colors-grayscale-border);
    width: var(--sizes-6);
    height: var(--sizes-6);
    transition: transform 0.2s;
  }
  .subject-cell button[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }
  [data-variant="header"] .sort-icon {
    color: var(--colors-grayscale-border);
  }

  /* Отступы. */
  .cell {
    /* Отступ ячейки. */
    padding: var(--sizes-2) var(--sizes-3);
  }
  .row > .row:not(:first-child) .cell:first-child {
    /* Левый отступ для первой ячейки вложенных строк (СЭ). */
    margin-left: var(--sizes-14);
  }
  .subject-cell button {
    /* Зазор между иконкой и текстом (названием субъекта РФ). */
    gap: var(--sizes-1);
  }

  /* Прочее. */
  [data-variant="header"] .sort-icon {
    width: 1.2em;
    height: 1.2em;
    margin-left: var(--sizes-3);
  }
}


/*** file: cashexec/widgets/04-rating/colors.css ***/

.widget[data-name="rating"] {
  /*{ Цвета ***/
  --widget-color-primary-gray: #7988ae;
  --widget-color-primary-red: #d51a52;
  --widget-color-primary-orange: #ff9500;
  --widget-color-primary-green: #00b998;

  --widget-color-light-gray: #e0e0eb;
  --widget-color-light-red: rgba(213, 26, 82, 0.2);
  --widget-color-light-orange: rgba(255, 149, 0, 0.2);
  --widget-color-light-green: rgba(0, 185, 152, 0.2);

  --widget-color-primary-empty: #fff;
  --widget-color-light-empty: #f3f3f7;
  /*} ***/
}


/*** file: cashexec/widgets/04-rating/rating.css ***/

.widget[data-name="rating"] {
  &[data-screen="md"],
  &[data-screen="lg"],
  &[data-screen="xl"] {
    height: 55rem;
  }

  .controls-container {
    /* TODO: maybe set these to be equal? */
    margin-top: var(--sizes-6);
    margin-bottom: var(--sizes-3);
  }

  &[data-screen="sm"] .data-container {
    grid-template-columns: 1fr;
  }

  &[data-screen="md"] .data-container {
    gap: var(--sizes-4);
    grid-template-columns: minmax(30rem, 2fr) 5fr;
  }

  &[data-screen="lg"],
  &[data-screen="xl"] {
    .data-container {
      gap: var(--sizes-8);
      grid-template-columns: 5fr 4fr;
    }
  }

  /*{ Тумблеры ***/
  .togglers-container {
    gap: var(--sizes-2);
  }

  .toggler.atom[data-active] {
    color: #fff;
    background: var(--atom-color-primary);
  }
  /*} ***/
}


/*** file: cashexec/widgets/04-rating/table.css ***/

/* Табличка (общее) */
.widget[data-name="rating"] .table {
  /*{ Счетчик ***/
  .body {
    counter-reset: rating-row;
    .row {
      counter-increment: rating-row;

      .cell[data-column="counter"] > div::before {
        /* content: counter(rating-row); */
      }
    }
  }
  /*} ***/

  /*{ Скролл ***/
  .body {
    /* scroll-snap-type: y mandatory; */

    .row {
      scroll-margin: -1px;
      /* scroll-snap-align: start; */
    }
  }
  /*} ***/
}

/* Табличка (мобильная версия) */
.widget[data-name="rating"] .table {
  /*{ Табличка ***/

  /* столбцы */
  grid-template-columns: 2.5rem minmax(8rem, 1fr) 4.5rem auto;
  cursor: default;
  /*} ***/
}

/* Табличка (большая версия) */
.widget[data-name="rating"][data-screen="lg"] .table,
.widget[data-name="rating"][data-screen="xl"] .table {
  cursor: default;
  /* столбцы:
     "номер п/п", "субъект",
     "процент (бар)", "процент (число)", [визуально один столбец]
     "остаток / кассовое исполнение" */
  grid-template-columns:
    2.5rem 18.5rem
    minmax(10.5rem, 1fr) 4.5rem
    12rem;

  /*{ Заголовок ***/
  .row[data-variant="header"] {
    color: var(--colors-grayscale-hint-text);
    font-weight: var(--font-weights-medium);
    text-wrap-style: balance;

    .cell {
      padding: var(--sizes-3);
    }

    .cell:hover {
      button,
      button .sort-icon {
        color: var(--colors-corporate-accent);
        transition: color 0.3s;
      }
    }

    /* номер п/п */
    .cell:first-child {
      text-align: center;
    }

    /* процент */
    .cell:nth-child(3) {
      grid-column: span 2;
    }

    .sort-icon {
      color: var(--colors-grayscale-border);
      width: var(--sizes-4);
      height: var(--sizes-4);
      margin-left: var(--sizes-3);
    }
  }
  /*} ***/

  /*{ Строки ***/
  .body .row {
    height: var(--sizes-7);
    transition: color 0.3s;

    .cell {
      padding: 0 var(--sizes-3);
    }

    /* номер п/п */
    .cell:first-child {
      text-align: center;
    }

    /* процент */
    .cell:nth-child(3) {
      display: grid;
      grid-column: span 2;
      grid-template-columns: subgrid;
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: var(--font-weights-bold);
    }

    /* остаток или кассовое исполнение */
    .cell:last-child {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  }
  /*} ***/

  /*{ Границы ***/
  .body,
  .row,
  .header,
  .cell {
    border-color: var(--colors-grayscale-spacer-light);
  }

  /* у всех клеток (кроме тех, что в последнем столбце) есть нижняя граница,
   * но у первых двух она прозрачная.
   * но она есть! поэтому высота всех ячеек одинаковая */
  .body {
    .row:not(:last-child) .cell {
      border-bottom-width: 1px;
    }
    .row:not(:last-child) .cell:nth-child(1),
    .row:not(:last-child) .cell:nth-child(2) {
      border-bottom-color: transparent;
    }
  }

  /* все ячейки (кроме последних в строке) имеют правые границы */
  .cell:not(:last-child) {
    border-right-width: 1px;
  }

  /* заголовок имеет нижнюю границу */
  .row[data-variant="header"] {
    border-bottom-width: 1px;
  }
  /*} ***/

  /*{ Выделение строки ***/

  /* если в таблице выделена строка... */
  .body:has([data-highlighted]) {
    /* ...все остальные строки затеняем */
    .row:not(:has([data-highlighted])) {
      color: gray;
      transition: color 0.3s;

      [data-scope="progress"][data-part="range"] {
        background: none;
        transition: background 0.3s;
      }
    }
  }
  /*} ***/
}


/*** file: cashexec/widgets/04-rating/tooltip.css ***/

/** Tooltip **/
.widget[data-name="rating"] {
  .tooltip {
    .content {
      box-shadow: -2px 2px 10px 0 rgba(112, 112, 117, 0.3);
      background: white;
      padding: var(--sizes-4);
    }

    .corner {
      color: white;
    }

    .rating {
      background: var(--colors-corporate-accent-alt);
      color: white;
      padding: var(--sizes-1) var(--sizes-2);
      border-radius: var(--radii-full);
    }

    .divider {
      color: var(--colors-grayscale-disable);
    }

    .header {
      margin-bottom: var(--sizes-4);
    }

    .progress {
      padding: var(--sizes-6);
      height: 10rem;
      font-weight: var(--font-weights-medium);
    }

    h1 {
      font-size: var(--font-sizes-h4);
    }

    .info .entry:not(:first-child):not(:last-child) .key {
      font-weight: var(--font-weights-light);
    }

    .info .entry:not(:first-child) .key {
      font-weight: var(--font-weights-light);
    }

    .info .entry:last-child {
      font-size: var(--font-sizes-s);
    }
  }
}


/*** file: cashexec/ui/tabs.css ***/

.tabs.root {
  flex-shrink: 0;
  border-radius: var(--sizes-2);
  background: var(--colors-grayscale-background);

  .tabs-item {
    padding: var(--sizes-3) var(--sizes-6);
    font-size: var(--font-sizes-xs);
    border-radius: inherit;
    cursor: pointer;
  }

  .tabs-item:disabled {
    cursor: default;
  }

  .tabs-item[data-active] {
    background: var(--colors-corporate-accent);
    color: #fff;
  }
}


/*** file: cashexec/ui/toggler.css ***/

.toggler.atom {
  padding: 0.3em;
  height: 1.5em;

  background: var(--colors-grayscale-spacer-light);

  &[data-active] {
    background: var(--atom-color-primary, var(--colors-grayscale-spacer-light));
  }

  .indicator {
    background: #fff;
  }

  .label {
    padding: 0 0.5em;
  }
}