/*
 * Стили кабинета поверх Bootstrap 3 и AdminLTE 2 (тема skin-black-light).
 * Значения сняты с оригинального кабинета (docs/03-design-system.md), класс за классом.
 */

/* ---------- Базовые правила ---------- */
/* Bootstrap 3.3 (как в оригинале) подчёркивает подсказки границей; 3.4 заменил её на text-decoration. */
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #777;
}

/* AdminLTE 2.4 тянет из стилей слайдера тёмную линию hr (#555); у оригинала она светлая, как в Bootstrap. */
hr {
  border-top-color: #eee;
}

/* ---------- Макет с рамкой ---------- */
/* Фон за колонкой шириной 1700px (виден на экранах шире): своя плитка вместо картинки AdminLTE. */
.layout-boxed {
  background: url('/img/boxed.png') repeat fixed;
}
.layout-boxed .wrapper {
  max-width: 1700px;
  background-color: #f9fafc;
}

/* ---------- Шапка ---------- */
.main-header .logo {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.brand-logo-image {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  object-fit: contain;
}
.brand-logo-image--header {
  max-height: 38px;
}
.brand-logo-image--auth {
  max-height: 70px;
}
.admin-badge {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #d2d6de;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}

/* Значки-бренды (Telegram и др.) записаны у оригинала как `fa fa-имя`: шрифт брендов, но вес 900 от класса .fa. */
.fa.fa-telegram {
  font-weight: 900;
}

/* ---------- Боковое меню ---------- */
/* На телефоне шапка одна строка, поэтому отступ меню сверху 50px, а не 100px, как в AdminLTE из коробки. */
@media (max-width: 767px) {
  .main-sidebar,
  .left-side {
    padding-top: 50px;
  }
}

.skin-black-light .main-sidebar {
  background-color: #f9fafc;
}
.skin-black-light .sidebar-menu > li.header {
  background: #f9fafc;
}
.skin-black-light .sidebar-menu > li > a {
  color: #444;
  font-weight: 600;
}

/* Иконки пунктов меню (Font Awesome 6, сплошные): класс ссылки → символ. */
.sidebar-menu a .fai:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
.sidebar-menu a.offers .fai:before {
  content: '\f291';
}
.sidebar-menu a.flow .fai:before {
  content: '\f1d8';
}
.sidebar-menu a.leads .fai:before {
  content: '\f07a';
}
.sidebar-menu a.stats .fai:before {
  content: '\f1fe';
}
.sidebar-menu a.money .fai:before {
  content: '\f0d6';
}
.sidebar-menu a.referal .fai:before {
  content: '\f0c0';
}
.sidebar-menu a.news .fai:before {
  content: '\f1ea';
}
.sidebar-menu a.admin-dashboard .fai:before {
  content: '\f3fd';
}
.sidebar-menu a.admin-offers .fai:before {
  content: '\f291';
}
.sidebar-menu a.admin-categories .fai:before {
  content: '\f07b';
}
.sidebar-menu a.admin-webmasters .fai:before {
  content: '\f0c0';
}
.sidebar-menu a.admin-leads .fai:before {
  content: '\f07a';
}
.sidebar-menu a.admin-payouts .fai:before {
  content: '\f0d6';
}
.sidebar-menu a.admin-tickets .fai:before {
  content: '\f086';
}
.sidebar-menu a.admin-managers .fai:before {
  content: '\f2bb';
}
.sidebar-menu a.admin-settings .fai:before {
  content: '\f013';
}

/* ---------- Общие правила оригинала (layout.css) ---------- */
.table th {
  text-align: center;
  vertical-align: middle;
}
.table > thead > tr > th,
.table > tfoot > tr > th {
  vertical-align: middle;
}
.table td.sub {
  text-align: center;
  font-size: small;
  line-height: 1.2;
}
.table td.head {
  font-weight: bold;
}
.table td.noitems {
  text-align: center;
  padding: 15px;
}
.table td.no-padding {
  padding: 0;
}
.table td.cb {
  padding: 0 4px;
  vertical-align: middle;
}
.table td.toolong {
  overflow-wrap: break-word;
  word-break: break-all;
}
.lister {
  margin: 15px 0;
}
.shown {
  padding: 5px 0;
}
.help-block {
  margin-bottom: 0;
}
.form-group {
  margin-bottom: 13px;
}
.margin-hh {
  margin-left: 10px;
  margin-right: 5px;
}
.margin-hl {
  margin-left: 7px;
}
.margin-hr {
  margin-right: 7px;
}
.margin-vv {
  margin-top: 5px;
  margin-bottom: 5px;
}
.margin-vt {
  margin-top: 5px;
}
.margin-vb {
  margin-bottom: 5px;
}
.padding-10 {
  padding: 10px !important;
}
.padding-15 {
  padding: 15px !important;
}
.flagname {
  padding: 0 4px;
}
.flagname img {
  vertical-align: baseline;
  padding: 1px 2px 0 0;
}
.autowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nice-line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.nice-line > * {
  margin-right: 5px;
}
.fat {
  font-weight: bold;
}
.black,
a.black {
  color: #222;
}
.red,
a.red {
  color: #822;
}
.green,
a.green {
  color: #282;
}
.blue,
a.blue {
  color: #228;
}
.yellow,
a.yellow {
  color: #882;
}
.grey,
a.grey {
  color: #777;
}
.small {
  font-size: 11px;
}
.xsmall {
  font-size: 10px;
}
input.no-arrows::-webkit-outer-spin-button,
input.no-arrows::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.empty-value {
  font-weight: normal;
  margin-left: 5px;
}
.offer-logo {
  width: 100%;
}
.label-inline {
  margin: 0;
  font-weight: normal;
}
.compact-td {
  font-size: 0;
  text-align: center;
  white-space: nowrap;
  padding: 0;
}

/* Заголовок раздела внутри формы: текст по центру между двух линий. */
.hh {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 15px 0;
  font-size: 18px;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
}
.hh span {
  display: block;
  padding: 0 10px 1px;
  white-space: nowrap;
}
.hh::before,
.hh::after {
  display: block;
  width: 100%;
  height: 1px;
  background: #777;
  content: ' ';
  font-size: 0;
  flex: 1 1 auto;
}

/* Сортировка таблиц: подпись колонки кликабельна, направление показывает длинная стрелка. */
td.header,
th.header {
  cursor: pointer;
}
th.headerSortUp::after,
td.headerSortUp::after,
th.headerSortDown::after,
td.headerSortDown::after {
  display: inline-block;
  padding-left: 5px;
  font: normal normal normal 12px/1 'Font Awesome 6 Free';
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
th.headerSortUp::after,
td.headerSortUp::after {
  content: '\f176';
}
th.headerSortDown::after,
td.headerSortDown::after {
  content: '\f175';
}

/* Порядок меток в отчётах (перетаскиваемые пункты). */
ul#utmlist {
  display: inline-block;
  padding: 0 5px;
  margin: 0;
  vertical-align: middle;
}
ul#utmlist li span {
  cursor: move;
}
ul#utmlist li {
  display: inline-block;
  padding: 0;
  margin: 0 2px;
  cursor: move;
  height: auto !important;
  width: auto !important;
}
ul#utmlist li.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}
ul#utmlist li.placeholder {
  padding: 5px 20px;
  border: dotted 1px #ccc;
}
@media (max-width: 767px) {
  ul#utmlist {
    display: block;
    padding: 0;
  }
  ul#utmlist li {
    display: block;
    margin: 4px 0;
  }
}

/* Строка графика и легенда рядов: ячейка и цвета рядов. */
.graphcol {
  font-size: 12px;
  line-height: 22px !important;
  padding: 0 !important;
  text-align: center;
}
.graphcol label {
  display: block;
  line-height: 22px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.graphcol0 {
  background-color: #4e79a7;
}
.graphcol1 {
  background-color: #f28e2b;
}
.graphcol2 {
  background-color: #59a14f;
}
.graphcol3 {
  background-color: #e15759;
}
.graphcol4 {
  background-color: #b07aa1;
}
.graphcol5 {
  background-color: #76b7b2;
}
.graphcol6 {
  background-color: #edc948;
}
.graphcol7 {
  background-color: #ff6f61;
}
.graphcol8 {
  background-color: #2f4b7c;
}
.graphcol9 {
  background-color: #a05195;
}
.graphcol10 {
  background-color: #d45087;
}
.graphcol11 {
  background-color: #4caf50;
}
.graphcol12 {
  background-color: #f95d6a;
}
.graphcol13 {
  background-color: #00a6a6;
}
.graphcol14 {
  background-color: #7a5195;
}
.graphcol15 {
  background-color: #ffa600;
}

/* Итоги по деньгам в шапке (баланс и холд). */
.header-money {
  display: block;
  border-top: solid 1px #ddd;
  padding: 7px 12px;
  margin-top: 5px;
  color: #222;
}
.header-cashname {
  text-align: center;
  font-weight: bold;
  color: #666;
}
.header-cashline {
  margin-top: 5px;
  padding: 2px 0;
  text-align: right;
}
.header-cashline span {
  float: left;
}

/* На телефоне подпись и значение в карточке лида занимают всю ширину модального окна. */
@media (max-width: 767px) {
  .lead-detail-modal .lead-detail-table,
  .lead-detail-modal .lead-detail-table > tbody,
  .lead-detail-modal .lead-detail-table > tbody > tr {
    display: block;
    width: 100%;
  }
  .lead-detail-modal .lead-detail-table > tbody > tr {
    position: relative;
    padding: 8px 38px 8px 10px;
    border-top: 1px solid #f4f4f4;
  }
  .lead-detail-modal .lead-detail-table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0;
    border: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .lead-detail-modal .lead-detail-table > tbody > tr > td:first-child {
    color: #666;
    font-size: 12px;
    font-weight: 600;
  }
  .lead-detail-modal .lead-detail-table > tbody > tr > td:nth-child(2) {
    margin-top: 3px;
  }
  .lead-detail-modal .lead-detail-table > tbody > tr > td:last-child {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px !important;
    transform: translateY(-50%);
  }
}

/* Обсуждение (поддержка). */
.ticket-content-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
}
.ticket-content-header h1 {
  flex: 1 1 520px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ticket-content-header > .breadcrumb {
  position: static;
  float: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 0;
  background: transparent;
}
#support-form {
  margin-bottom: 10px;
}
#support-form.minimal input {
  display: none;
}
#support-form.minimal textarea {
  height: 34px;
}
.support-callout {
  margin: 5px 0;
}
.comment-list {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}
.comment-list li {
  display: block;
  padding: 0;
  margin: 15px 0;
  list-style: none;
  min-height: 60px;
}
.comment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
}
.comment-text {
  display: block;
  padding: 12px 16px;
  margin: 0;
  background: #fff;
  border: 1px solid #d2d6de;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.comment-text p {
  margin: 0;
  white-space: pre-wrap;
}
.comment-list li.unread .comment-text {
  background: #efe;
}
@media (max-width: 767px) {
  .ticket-content-header h1,
  .ticket-content-header > .breadcrumb {
    flex-basis: 100%;
  }
}

/* Фильтры: на узких экранах блок скрыт за кнопкой, от 992px показан всегда. */
.form-inline .select2-container--default .select2-selection--single,
.form-inline .select2-selection .select2-selection--single {
  height: 30px;
  padding: 4px 12px;
  font-size: 12px;
}
.form-inline .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 25px;
}
.form-inline .select2-dropdown {
  font-size: 12px;
}
@media (max-width: 991px) {
  .form-inline {
    float: none !important;
  }
  .form-inline-block {
    padding: 10px 10px 5px;
    border: 1px solid #ddd;
    border-top: 0;
    background: #f8f8f8;
  }
  .form-inline-block .form-control,
  .form-inline .select2-container--default .select2-selection--single,
  .form-inline .select2-selection .select2-selection--single,
  .form-inline-block .btn {
    margin-bottom: 5px;
  }
  .form-inline-block .margin-hl {
    margin-left: 0;
  }
  .form-inline-block .margin-hr {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .form-inline-block .btn {
    width: 100%;
  }
  .form-inline-block .select2-container {
    width: 100% !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .form-inline .form-control {
    width: 49%;
    display: inline-block !important;
  }
  .form-inline-block .select2-container {
    width: 49% !important;
  }
}
@media (min-width: 992px) {
  .form-inline.pull-left {
    padding-right: 10px;
  }
  .form-inline-block.collapse {
    display: block !important;
  }
  .form-inline .form-control {
    width: 150px;
    display: inline-block;
  }
}

/* Единая базовая линия фильтров кабинета: нативный date иначе наследует
   line-height, равный всей высоте поля, и текст оказывается у нижней границы. */
.layout-boxed:not(.admin-area) input[type='date'].form-control {
  line-height: 20px;
  font-weight: 400;
}
.layout-boxed:not(.admin-area) input[type='date'].input-sm {
  line-height: 18px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.layout-boxed:not(.admin-area) .form-inline-block input[type='date'] {
  min-width: 150px;
}
@media (min-width: 992px) {
  .layout-boxed:not(.admin-area) .form-inline.form-group > .form-inline-block.collapse {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .layout-boxed:not(.admin-area) .form-inline.form-group > .form-inline-block .form-control {
    margin: 0;
  }
  .layout-boxed:not(.admin-area) .form-inline.form-group > .form-inline-block .select2-container {
    width: 180px !important;
    min-width: 0;
  }
  .layout-boxed:not(.admin-area) .form-inline.form-group > .form-inline-block .btn {
    min-height: 30px;
  }
  .layout-boxed:not(.admin-area) .form-inline.form-group > .form-inline-block .checkbox {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Поддержка мобильных у лендинга: четыре значка Font Awesome. */
.mobicon::before {
  padding: 0;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
.mi0::before {
  content: '109';
}
.mi1::before {
  content: '122';
}
.mi2::before {
  content: '10a';
}
.mi3::before {
  content: '0b2';
}

/* ---------- Фиолетовые блоки (дашборд, финансы) ---------- */
.config-block-info {
  padding: 15px 12px;
  height: 72px;
  overflow: hidden;
}
.config-block-name {
  display: block;
  line-height: 38px;
  font-size: 22px;
  font-weight: 300;
}
.config-block-line {
  display: block;
  line-height: 15px;
  font-size: 12px;
}
.config-block-icon {
  display: block;
  text-align: center;
  float: right;
  font-size: 18px;
  width: 43px;
  height: 43px;
  line-height: 43px;
  border-radius: 100%;
}
.config-block-descr {
  padding: 6px 12px;
}
.config-block-dash .config-block-name {
  line-height: 25px;
  font-size: 24px;
}
.config-block-name,
.config-block-line,
.config-block-descr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-user {
  width: 65px;
  height: 65px;
  line-height: 65px;
  display: block;
  float: left;
  text-align: center;
  border-radius: 100%;
  font-size: 2em;
}

.manager-contact-card {
  border-top-color: #605ca8;
}
.manager-contact-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  min-width: 0;
}
.manager-contact-avatar {
  display: flex;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #605ca8;
  color: #fff;
  font-size: 24px;
}
.manager-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manager-contact-identity {
  min-width: 0;
}
.manager-contact-name {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.manager-contact-role {
  margin-top: 4px;
  color: #777;
  font-size: 13px;
}
.manager-contact-links {
  border-top: 1px solid #f4f4f4;
}
.manager-contact-links a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 18px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.manager-contact-links a + a {
  border-top: 1px solid #f4f4f4;
}
.manager-contact-links i {
  flex: 0 0 16px;
  margin-top: 3px;
  text-align: center;
  color: #605ca8;
}
.manager-contact-links span {
  min-width: 0;
}
.manager-contact-footer {
  padding: 10px 18px;
  border-top: 1px solid #f4f4f4;
}

/* ---------- Флаги стран (16×11, картинки из flag-icons; правила .flag-xx создаёт npm run vendor) ---------- */
.flagicon {
  margin-right: 4px;
}
abbr[title].flagicon {
  text-decoration: none;
  border-bottom: none;
}

/* ---------- Вход ---------- */
/* Отступы страницы входа: у оригинала 1% по краям и 6% сверху, а не 7% из коробки AdminLTE. */
.login-page,
.register-page {
  height: 98%;
  padding: 1% 0;
}
.login-box,
.register-box {
  margin: 6% auto;
}
@media (max-width: 768px) {
  .login-box,
  .register-box {
    width: 90%;
    margin-top: 20px;
  }
}
/* Панели скрываются скриптом login.js; без JavaScript видны все три. */
.login-box-body + .login-box-body {
  margin-top: 20px;
}
.register-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.error-box {
  padding: 20px;
}

/* Select2 4.0.13 скрывает исходное поле чуть иначе, чем 4.0.3 у оригинала. */
.select2-hidden-accessible {
  margin: -1px !important;
  white-space: normal !important;
}
select.select2-hidden-accessible {
  white-space: pre !important;
}
.admin-editor-toolbar {
  margin-bottom: 8px;
}
[data-admin-editor] [hidden] {
  display: none !important;
}
.admin-editor-canvas {
  height: auto;
  min-height: 190px;
  overflow-y: auto;
}

.admin-area form[method='get'].form-inline,
.admin-area .admin-extended-filters .form-inline.form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.admin-area .admin-extended-filters {
  margin-top: 10px;
}
.admin-area .admin-extended-filters summary {
  cursor: pointer;
}
.admin-area .admin-extended-filters .form-inline.form-group {
  margin: 10px 0;
}
.admin-area .admin-extended-filters label {
  margin-bottom: 0;
}
.admin-utm-filter {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid #e3e8ee;
  padding: 7px;
}
.admin-utm-filter > label:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-utm-filter .checkbox-inline {
  margin-left: 0;
}
.admin-area .admin-offers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-area .admin-offers-header .box-tools {
  position: static;
  float: none;
  margin: 0;
}
.admin-area .admin-offers-header::before,
.admin-area .admin-offers-header::after {
  content: none;
  display: none;
}
.admin-area .admin-offers-header .box-title {
  margin: 0;
}

/* The admin is our own UI: keep its tables and filters on one alignment system. */
.admin-area .table th {
  text-align: left;
}
.admin-area .table > tbody > tr > td {
  vertical-align: middle;
}
.admin-leads-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.admin-leads-view-switch .btn.active {
  color: #fff;
  background: #367fa9;
  border-color: #367fa9;
  box-shadow: none;
}
.admin-lead-overview-table {
  min-width: 980px;
}
.admin-area .admin-lead-overview-table th.text-right,
.admin-area .admin-lead-overview-table td.text-right {
  text-align: right;
  white-space: nowrap;
}
.admin-lead-overview-person {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-lead-overview-person-cell {
  min-width: 210px;
}
.admin-lead-overview-person > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-lead-overview-person small {
  display: block;
  color: #777;
}
.admin-lead-overview-detail[hidden] {
  display: none !important;
}
.admin-lead-overview-detail > td {
  background: #f8fafc;
}
.admin-lead-overview-preview {
  padding: 8px 12px;
  min-width: 0;
}
.admin-lead-overview-preview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 8px;
}
.admin-lead-overview-preview .table-responsive {
  width: 100%;
}
.admin-lead-overview-preview .table {
  margin-bottom: 0;
}
.admin-area form[method='get'].form-inline.admin-filter-grid,
.admin-area .admin-extended-filters .form-inline.form-group.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
}
.admin-area form[method='get'].form-inline.admin-filter-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
}
.admin-area form[method='get'].form-inline.admin-filter-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1000px;
}
.admin-area form[method='get'].form-inline.admin-filter-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1100px;
}
.admin-area .admin-filter-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.admin-area .admin-filter-field > span {
  color: #555;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.admin-area .admin-filter-field .form-control,
.admin-area .admin-filter-grid > .form-control,
.admin-area .admin-utm-filter .form-control {
  width: 100%;
  min-width: 0;
  height: 34px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.admin-area .admin-filter-grid input[type='date'] {
  min-width: 0;
  font-weight: 400;
  line-height: 20px;
}
.admin-area .admin-filter-grid > .btn {
  width: 100%;
  min-height: 34px;
}
.admin-area .admin-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  font-weight: 400;
}
.admin-area .admin-filter-check input {
  margin: 0;
}
.admin-area .admin-utm-filter {
  min-width: 0;
}
.admin-area .admin-utm-filter > label:first-child {
  width: 100%;
}
.admin-area .admin-payout-action {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.admin-area .admin-payout-action .form-control {
  width: 220px;
}
.admin-area .admin-image-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.admin-area .admin-inline-create {
  display: grid;
  gap: 10px;
  align-items: stretch;
}
.admin-area .admin-inline-create--geo {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-area .admin-inline-create--landing {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-area .admin-inline-create--landing [name='url'] {
  grid-column: span 2;
}
.admin-area .admin-inline-create .form-control,
.admin-area .admin-inline-create .btn {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  margin: 0;
}
.admin-area .admin-landings-table [name='url'] {
  min-width: 190px;
}
.admin-area .admin-landings-table td:last-child {
  min-width: 100px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .admin-area .admin-inline-create--geo,
  .admin-area .admin-inline-create--landing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .admin-area .admin-inline-create--geo,
  .admin-area .admin-inline-create--landing {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-area .admin-inline-create--landing [name='url'] {
    grid-column: auto;
  }
}
@media (max-width: 1100px) {
  .admin-area form[method='get'].form-inline.admin-filter-grid--three,
  .admin-area form[method='get'].form-inline.admin-filter-grid--four,
  .admin-area form[method='get'].form-inline.admin-filter-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .admin-area form[method='get'].form-inline.admin-filter-grid--three,
  .admin-area form[method='get'].form-inline.admin-filter-grid--four,
  .admin-area form[method='get'].form-inline.admin-filter-grid--five,
  .admin-area .admin-extended-filters .form-inline.form-group.admin-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-area .admin-settings-table .table,
  .admin-area .admin-settings-table tbody,
  .admin-area .admin-settings-table tr,
  .admin-area .admin-settings-table td {
    display: block;
    width: 100%;
  }
  .admin-area .admin-settings-table thead {
    display: none;
  }
  .admin-area .admin-settings-table tr {
    padding: 10px 15px;
    border-bottom: 1px solid #e8edf3;
  }
  .admin-area .admin-settings-table td {
    padding: 4px 0;
    border: 0;
  }
  .admin-area .admin-settings-table.table-responsive > .table > tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .admin-area .admin-settings-table td:first-child {
    font-weight: 600;
  }
  .admin-area .admin-settings-table .form-control,
  .admin-area .admin-settings-table .btn {
    width: 100%;
  }
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.admin-kpi-grid .small-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 165px;
  margin: 0;
}
.admin-kpi-grid .small-box .inner {
  position: relative;
  z-index: 1;
  flex: 1;
}
.admin-kpi-grid .small-box .icon {
  font-size: 65px;
  opacity: 0.16;
}
.admin-kpi-grid .small-box-footer {
  min-height: 26px;
  margin-top: auto;
}
@media (max-width: 1100px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .admin-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Neutral product surface ---------- */
:root {
  --cab-ink: #1d2c42;
  --cab-accent: #3566a7;
  --cab-accent-deep: #254f86;
  --cab-canvas: #f3f6fa;
  --cab-border: #dce5ee;
}
.layout-boxed {
  background: radial-gradient(circle at 15% 20%, #f5f8fc, #e7edf4 72%) fixed;
}
.layout-boxed .wrapper,
.content-wrapper,
.right-side {
  background-color: var(--cab-canvas);
}
.skin-black-light .main-header .logo,
.skin-black-light .main-header .logo:hover {
  background: #19365a;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.025em;
}
.skin-black-light .main-header .navbar {
  border-bottom: 1px solid var(--cab-border);
  box-shadow: 0 2px 10px rgba(25, 54, 90, 0.045);
}
.skin-black-light .main-sidebar,
.skin-black-light .sidebar-menu > li.header {
  background: #f8fafd;
}
.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li > a:hover {
  color: var(--cab-accent-deep);
  background: #eaf1fa;
  border-left-color: var(--cab-accent);
}
.skin-black-light .sidebar-menu > li > .treeview-menu {
  background: #f1f5fb;
}
.box {
  border-radius: 6px;
  border-top-width: 2px;
  box-shadow: 0 2px 12px rgba(28, 52, 79, 0.055);
}
.btn.btn-flat {
  border-radius: 4px;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cab-accent);
  border-color: var(--cab-accent-deep);
}
.config-block.bg-purple {
  background-color: var(--cab-accent) !important;
}
.config-block-descr.bg-purple-active {
  background-color: var(--cab-accent-deep) !important;
}
.login-page,
.register-page {
  background: radial-gradient(circle at 50% 0, #f9fbfe, #e8eef6 76%);
}
.login-box-body {
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(25, 54, 90, 0.085);
}