/* moderator_cabinet.css
   Личный кабинет A-Star Пеленг.
   Основан на styles.css + moderator.css (цвета/стекло/радиусы).
*/

:root{
  --cab-gap: 12px;
}

/* Topbar brand logo (match Landing hover motion) */
.m-topbar .m-brand img,
.m-topbar .m-brand__logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  object-fit: cover;
  display: block;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.m-topbar .m-brand:hover img,
.m-topbar .m-brand:hover .m-brand__logo{
  transform: translateY(-3px);
  border-color: rgba(240,200,75,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
}

/* Фон кабинета (переопределяем фон лендинга) */
.bg-image--cabinet{
  background-image: url('./cabinet-bg-desktop.png');
}

@media (max-width: 720px){
  .bg-image--cabinet{
    /* если появится отдельная mobile-картинка — просто поменяешь здесь */
    background-image: url('./cabinet-bg-desktop.png');
    background-position: center top;
  }
}

/* Имя пользователя в топбаре */
.m-user{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 42px;
  padding: 0 14px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  backdrop-filter: blur(12px);

  font-weight: 900;
  letter-spacing: .2px;
  color: var(--m-gold);
  text-shadow:
    0 0 12px rgba(251,191,36,.22),
    0 0 18px rgba(249,115,22,.16);

  user-select: none;
  white-space: nowrap;
}

/* ==========================================================
   Modal (used by cabinet connect picker)
   Copied from moderator_policy.css so cabinet doesn't depend on it.
   ========================================================== */
.m-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.m-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.m-modal__card{
  position: relative;
  /* wider modal so 4 plans fit in one row */
  width: min(820px, calc(100vw - 28px));
  margin: 10vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15, 17, 23, 0.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 120px rgba(0,0,0,0.55);
  padding: 12px;
}

.m-modal__title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 3px;
}

.m-modal__body{
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Connect modal: do NOT preserve template whitespace/newlines (it creates huge vertical gaps) */
#connectModal .m-modal__body{
  white-space: normal;
  line-height: 1.25;
}

/* Vertical rhythm inside connect modal: add a "one-line" gap between blocks */
#connectModal .m-modal__title{ margin-bottom: 0; }
#connectModal .m-modal__titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:24px;
}
#connectModal .m-modal__inlineMsg{
  color: rgba(245, 158, 11, .98);
  font-weight: 900;
  font-size: 33px;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(245,158,11,.35), 0 0 18px rgba(245,158,11,.22);
  animation: pickGlowText 1.4s ease-in-out infinite;
}
@keyframes pickGlowText{
  0%,100%{ opacity:.78; filter: brightness(1); }
  50%{ opacity:1; filter: brightness(1.18); }
}
#connectModal .connect-subtitle{ display:block; margin-top: 24px; }
#connectModal .connect-choices{ margin-top: 24px; }
#connectModal .connect-choices[aria-label="Connection choices"]{ margin-bottom: 24px; }
#connectModal #planChoices{ margin-top: 24px !important; }
#connectModal .m-modal__actions{ margin-top: 24px; }

.m-modal__actions{
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* Connect modal: center the buttons and match per-platform gradient */
#connectModal .connect-choices{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
  justify-content:center;
}

/* Slightly more spacing between Telegram/Instagram choices */
#connectModal .connect-choices[aria-label="Connection choices"]{
  gap:10px;
}

/* Gold glowing outline for selected platform button */
#connectModal .m-btn.is-picked{
  position:relative;
  outline:2px solid rgba(245,158,11,.95);
  box-shadow:
    0 0 0 3px rgba(245,158,11,.22),
    0 0 18px rgba(245,158,11,.38),
    0 0 36px rgba(245,158,11,.22);
  animation: pickGlow 1.4s ease-in-out infinite;
}

@keyframes pickGlow{
  0%,100%{
    box-shadow:
      0 0 0 3px rgba(245,158,11,.18),
      0 0 16px rgba(245,158,11,.32),
      0 0 32px rgba(245,158,11,.18);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(245,158,11,.26),
      0 0 22px rgba(245,158,11,.50),
      0 0 44px rgba(245,158,11,.26);
  }
}

#connectModal .m-modal__actions{
  justify-content:center;
  gap: 10px;
}

/* Telegram blue */
.m-btn--tg{
  color:#fff;
  background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(2,132,199,.98));
}

/* Instagram orange (same as primary) */
.m-btn--insta{
  color:#fff;
  background: linear-gradient(135deg, var(--phoenix1), var(--phoenix2));
}

/* Platform buttons (Telegram/Instagram) sized like plan buttons */
#connectModal #btnConnectTg,
#connectModal #btnConnectIg{
  min-width: 220px;
  padding: 10px 10px;
  border-radius: 18px;
  font-weight: 950;
  font-size: 14px;
}

#connectModal .connect-subtitle{
  margin-top: 4px;
  margin-bottom: 0px;
}

/* Plan buttons in connect modal */
#connectModal .plan-btn{
  width: 100%;
  min-width: 0;
  padding: 10px 10px;
  border-radius: 18px;
  text-align: center;
  line-height: 1.15;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#connectModal .plan-btn__name{
  font-weight: 950;
  font-size: 14px;
}
/* Connect modal pricing cards (Seller-like lists, but neutral colors) */
#connectModal .plan-card{
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
#connectModal .plan-card:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}
#connectModal .plan-card.is-picked{
  outline: 2px solid rgba(245,158,11,.85);
  box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 0 18px rgba(245,158,11,.22);
}
#connectModal .plan-card__name{
  font-weight: 950;
  font-size: 14px;
}
#connectModal .plan-card__price{
  margin-top: 4px;
  font-size: 12px;
  opacity: .88;
  font-weight: 900;
}
#connectModal .plan-card__list{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.25;
  opacity: .82;
}
#connectModal .plan-card__list li{
  margin-top: 6px;
  padding-left: 14px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#connectModal .plan-card__list li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  position: absolute;
  left: 0;
  top: 7px;
}

/* Gradient scale: lilac (Start) -> orange (Pro), Custom is gray */
#connectModal .plan-btn--start,
#connectModal .plan-btn--business,
#connectModal .plan-btn--pro,
#connectModal .plan-btn--custom{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}
#connectModal .plan-btn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

/* Plan grid: centered cards (Business / Pro / Custom) */
#connectModal #planChoices{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 220px));
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 24px auto 0 !important;
  gap: 24px !important;
}
@media (max-width: 900px){
  #connectModal #planChoices{ grid-template-columns: repeat(2, minmax(180px, 220px)); }
}
@media (max-width: 520px){
  #connectModal #planChoices{ grid-template-columns: minmax(0, 1fr); width: 100%; }
}

/* Selected plan: handled by .plan-card.is-picked */

.m-user--mobile{
  height: 44px;
  border-radius: 18px;
}

.cab{
  padding: clamp(22px, 3.2vw, 42px) 0 46px;
}

.cab__head{
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cab__title{
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: .2px;
}

.cab__sub{
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 720px;
  line-height: 1.5;
}

.cab__headActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.cab__search{
  position: relative;
}

.cab__search svg{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.82);
  opacity: .75;
  pointer-events: none;
}

.cab__search input{
  height: 44px;
  width: min(420px, 72vw);
  padding: 0 14px 0 42px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  outline: none;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.cab__search input::placeholder{
  color: rgba(255,255,255,.62);
}

.cab__search input:focus{
  border-color: rgba(124,58,237,.35);
  box-shadow:
    0 18px 70px rgba(0,0,0,.28),
    0 0 0 3px rgba(124,58,237,.20);
}

.cab__filters,
.cab__sort{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cab__selectLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  color: rgba(255,255,255,.78);
}

.cab__select{
  height: 44px;
  padding: 0 12px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  outline: none;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);

  /* фикс “белый список/белый текст” в системном дропдауне */
  color-scheme: dark;
}

.cab__select option{
  background: rgba(2,6,23,.98);
  color: rgba(255,255,255,.92);
}

.cab__select:focus{
  border-color: rgba(249,115,22,.35);
  box-shadow:
    0 18px 70px rgba(0,0,0,.28),
    0 0 0 3px rgba(249,115,22,.18);
}

/* KPI */

.cab__kpis{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kpi-card{
  padding: 18px;
  border-radius: var(--m-radius);

  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 80px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  min-height: 112px;
}

.kpi-card__label{
  font-weight: 900;
  color: rgba(255,255,255,.9);
}

.kpi-card__value{
  margin-top: 8px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--m-gold);
  text-shadow:
    0 0 12px rgba(251,191,36,.22),
    0 0 18px rgba(249,115,22,.16);
}

.kpi-card__value .kpi-sub{
  margin-left: 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  text-shadow: none;
}

.kpi-card__hint{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  max-width: 320px;
}

.kpi-card__badge{
  width: 38px;
  height: 38px;
  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);

  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

/* LIST */

.cab__list{
  margin-top: 18px;
}

.cab__sectionHead{
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cab__sectionTitle{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.cab__sectionNote{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 760px;
}

.mod-table{
  display: grid;
  gap: 10px;
}

.cab__afterList{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.mod-row{
  padding: 14px 16px;
  border-radius: var(--m-radius);

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.mod-row__left{
  min-width: 0;
}

.mod-row__right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mod-row:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 90px rgba(0,0,0,.42);
}

.mod-row__btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 14px;
}

.mod-channel{ grid-area: channel; }
.mod-until{ grid-area: until; }
.mod-blocked{ grid-area: blocked; }
.mod-status{ grid-area: status; }
.mod-actions{ grid-area: actions; }

.mod-cell__title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.mod-cell__sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.source-chip{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);

  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

.plan-pill{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
}

.mod-title{ font-weight: 900; color: rgba(255,255,255,.92); }
.mod-sub{ margin-top: 6px; color: var(--muted); font-size: 13px; display:flex; flex-wrap:wrap; gap: 8px; align-items: center; }
.sep{ opacity: .55; }
.dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.45); box-shadow:0 0 14px rgba(255,255,255,.18); }

.source-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 14px rgba(255,255,255,.18);
}

.num{
  font-weight: 900;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}

.small{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.status-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 0 12px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
}

.status-pill--active{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.12);
}

.status-pill--expiring{
  border-color: rgba(250,204,21,.28);
  background: rgba(250,204,21,.12);
}

.status-pill--expired{
  border-color: rgba(249,115,22,.32);
  background: rgba(249,115,22,.16);
}

.status-pill--paused{
  border-color: rgba(148,163,184,.26);
  background: rgba(148,163,184,.10);
}

.status-pill--leads{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.12);
  color: rgba(255,255,255,.92);
}
.status-pill--leads-btn{
  cursor: pointer;
}
.status-pill--leads-btn:hover{
  filter: brightness(1.08);
}

/* Leads modal in cabinet — copied sizing/colors from settings modal */
#leadsModal .m-modal__card{
  width: calc(100vw - 80px);
  max-width: 1400px;
  margin: 40px auto;
  padding: 10px 12px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: rgba(15, 17, 23, 0.86);
  border: 6px solid rgba(180,180,180,0.75);
}
#leadsModal .m-modal__title{ margin-bottom: 10px; }
#leadsModal .m-modal__body{
  flex: 1;
  overflow: hidden;
  padding: 20px;
  max-height: none;
  box-sizing: border-box;
  display: flex;
}
#leadsModal .m-modal__actions{ margin-top: 10px; }
#leadsModal #mModalOk{
  min-width: 160px;
  background: linear-gradient(135deg, var(--phoenix1), var(--phoenix2));
  color: #fff;
  border-color: rgba(255,255,255,.14);
}

.leads-tableWrap{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  border: 6px solid rgba(180,180,180,0.55);
  border-radius: 14px;
  background: rgba(15, 17, 23, 0.86);
}

.leads-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}
.leads-table tbody tr{ height: 44px; }
.leads-table th, .leads-table td{
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
  line-height: 1.0;
  color: rgba(255,255,255,0.82);
}
.leads-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(35, 38, 48, 0.96);
  color: rgba(255,255,255,0.82);
  padding-top: 6px;
  padding-bottom: 6px;
}
.leads-table th{ text-align:left; font-size:15px; opacity:.9; }
.leads-td--dt{ width: 110px; white-space: nowrap; line-height: 1.15; overflow:hidden; text-overflow:ellipsis; }
.leads-td--who{ width: 170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leads-td--type{ width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-td--status{ width: 190px; overflow: visible; white-space: nowrap; }
.leads-td--open{ width: 120px; white-space: nowrap; }
.leads-td--open a{ color: #4da3ff; text-decoration: underline; }
.leads-td--msg{ white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.leads-heat{ font-size: 11px; opacity: .9; }

.leads-status{
  height: 22px;
  min-width: 118px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
}
.leads-status option{
  background: #000;
  color: #fff;
}
.leads-status[data-status="new"]{
  background: rgba(255, 149, 0, 0.18);
  border-color: rgba(255, 149, 0, 0.35);
}
.leads-status[data-status="processed"]{
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.35);
}
.leads-status[data-status="missed"]{
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
}
.leads-status[data-status="ignored"]{
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

.mod-actions{
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.mod-actions .m-btn{
  white-space: nowrap;
}

.mod-empty{
  margin-top: 12px;
  padding: 18px;
  border-radius: var(--m-radius);

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 80px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);

  text-align: center;
}

.mod-empty__t{
  font-weight: 900;
  font-size: 16px;
}

.mod-empty__p{
  margin-top: 6px;
  color: var(--muted);
}

.mod-empty__actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* ALERTS */

.cab__alerts{
  margin-top: 18px;
}

.alert-panel{
  padding: 18px;
  border-radius: var(--m-radius);

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 80px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
}

.alert-panel__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alert-panel__title{
  font-weight: 900;
  font-size: 16px;
}

.alert-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  min-width: 44px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);

  font-weight: 900;
}

.alert-panel__body{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.alert-ok{
  padding: 12px 14px;
  border-radius: 18px;

  border: 1px solid rgba(34,197,94,.26);
  background: rgba(34,197,94,.10);
  color: rgba(255,255,255,.9);

  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-item{
  padding: 12px 14px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.alert-item__title{
  font-weight: 900;
}

.alert-item__meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.alert-item__right{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ADAPTIVE */

@media (max-width: 980px){
  .cab__kpis{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px){
  .mod-row{
    flex-direction: column;
    align-items: flex-start;
  }

  .mod-row__right{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px){
  .cab__search input{
    width: min(420px, 88vw);
  }
}