/* DJIVA 21.10 — категории в том же визуальном языке, что и счета.
   Подсчёты, создание, редактирование и порядок категорий не меняются. */
.gup-fn-categories.card{
  padding:14px!important;
  border-radius:20px!important;
}
.gup-fn-categories .gup-fn-panel-head{
  margin-bottom:13px;
}
.gup-fn-cat-group{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(6,12,19,.19);
  overflow:hidden;
}
.gup-fn-cat-group-head{
  width:100%;
  border:0;
  background:rgba(110,153,204,.075);
  color:var(--tx);
  font:inherit;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 16px;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  text-align:left;
  min-height:61px;
  cursor:pointer;
}
.gup-fn-cat-group-head:disabled{
  opacity:1;
  cursor:default;
}
.gup-fn-cat-group-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:28px;
  font-weight:800;
  line-height:1;
}
.gup-fn-cat-group-icon.expense{
  background:rgba(233,93,103,.16);
  color:#fd7783;
}
.gup-fn-cat-group-icon.income{
  background:rgba(42,193,127,.15);
  color:#58d59b;
}
.gup-fn-cat-group-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.gup-fn-cat-group-label strong{
  font-size:15px;
  font-weight:735;
  line-height:1.2;
}
.gup-fn-cat-group-label small{
  color:var(--mu);
  font-size:11px;
  font-weight:480;
}
.gup-fn-cat-chevron{
  font-size:19px;
  color:var(--mu);
  text-align:center;
}
.gup-fn-cat-list{
  padding:0 10px 7px;
}
.gup-fn-cat-row{
  display:flex;
  align-items:center;
  min-height:56px;
  border-bottom:1px solid var(--line);
}
.gup-fn-cat-row:last-of-type{
  border-bottom:0;
}
.gup-fn-cat-item{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  width:100%;
  flex:1;
  min-height:55px;
  padding:9px 0;
  border:0;
  background:transparent;
  text-align:left;
  color:var(--tx);
  font:inherit;
  cursor:pointer;
}
.gup-fn-cat-item:active{
  opacity:.72;
}
.gup-fn-cat-item:disabled{
  opacity:1;
  cursor:default;
}
.gup-fn-cat-icon{
  flex:0 0 36px;
  width:36px;
  height:37px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(94,147,208,.12);
  font-size:20px;
}
.gup-fn-cat-icon.expense{
  background:rgba(239,127,124,.055);
}
.gup-fn-cat-icon.income{
  background:rgba(56,187,137,.075);
}
.gup-fn-cat-name{
  flex:1;
  min-width:0;
  font-size:14px;
  line-height:1.26;
  font-weight:540;
  overflow-wrap:anywhere;
}
.gup-fn-cat-row .gup-fn-chevron{
  padding-right:6px;
  font-size:19px;
}
.gup-fn-cat-more{
  display:block;
  width:100%;
  min-height:42px;
  margin-top:8px;
  padding:10px 5px;
  border:0;
  border-radius:12px;
  background:rgba(110,168,255,.08);
  color:var(--bl);
  font-size:13px;
  font-weight:680;
  font-family:inherit;
  cursor:pointer;
}
.gup-fn-cat-order-note{
  color:var(--mu);
  font-size:12px;
  line-height:1.4;
  padding:0 4px;
  margin:5px 0 10px;
}
.gup-fn-cat-reorder{
  display:flex;
  align-items:center;
  gap:5px;
  padding-left:5px;
}
.gup-fn-cat-reorder button{
  width:35px;
  min-height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-3);
  color:var(--bl);
  font-size:20px;
  padding:2px;
}
.gup-fn-cat-reorder button:disabled{
  opacity:.25;
  cursor:default;
}
.gup-fn-cat-empty{
  color:var(--mu);
  font-size:13px;
  line-height:1.4;
  margin:9px 4px 3px;
}
@media(max-width:390px){
  .gup-fn-categories.card{padding:11px!important}
  .gup-fn-cat-group-head{padding:11px 9px;gap:9px}
  .gup-fn-cat-group-icon{width:34px;height:34px;font-size:25px}
  .gup-fn-cat-list{padding-left:9px;padding-right:9px}
  .gup-fn-cat-item{gap:8px}
  .gup-fn-cat-icon{flex-basis:32px;width:32px;height:34px;font-size:18px}
  .gup-fn-cat-name{font-size:13px}
}
html[data-theme="light"] .gup-fn-cat-group{background:#f8fafd}
html[data-theme="light"] .gup-fn-cat-group-head{background:#f0f5fb}
html[data-theme="light"] .gup-fn-cat-group-icon.expense{background:#ffe7e9;color:#d64a5c}
html[data-theme="light"] .gup-fn-cat-group-icon.income{background:#e2f8ed;color:#138850}
html[data-theme="light"] .gup-fn-cat-more{background:#eaf2ff}