/* CLIENT_CARD_V6 */


/* ========================================
   DRAWER
   ======================================== */

#drawer .sheet{
  width:min(620px,100vw);

  padding:
    12px
    14px
    90px;

  background:var(--bg);
}


#drawer .close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:30;

  width:38px;
  height:38px;

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

  padding:0;

  border:1px solid var(--line);
  border-radius:13px;

  background:var(--card);
  color:var(--ink);

  font-size:18px;

  box-shadow:
    0 4px 15px
    rgba(25,45,60,.05);
}


/* ========================================
   CLIENT HEADER
   ======================================== */

#detail .client360-head{
  display:grid;
  gap:11px;

  margin:0;
  padding:3px 0 0;

  border:0;
  background:transparent;
  box-shadow:none;
}


#detail .client360-head .hero{
  margin:0;
  padding:
    6px
    52px
    2px
    2px;

  border:0;
  background:transparent;
  box-shadow:none;
}


#detail .client360-head .hero>small{
  display:block;

  margin-bottom:5px;

  color:#059376;

  font-size:8px;
  font-weight:900;

  letter-spacing:.07em;
}


#detail .client360-head .hero h2{
  margin:0 0 5px;

  font-size:23px;
  line-height:1.05;
  font-weight:950;
}


#detail .client360-head .hero>p{
  margin:0;

  color:var(--muted);

  font-size:13px;
}


/* ========================================
   MANAGER + CABINET
   ======================================== */

#detail .client360-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;

  margin-top:8px;
}


#detail .client360-meta>span{
  display:inline-flex;
  align-items:center;

  min-height:23px;
  padding:0 8px;

  border:0;
  border-radius:999px;

  background:
    rgba(100,120,135,.07);

  color:var(--muted);

  font-size:7px;
}


#detail .client360-meta b{
  color:var(--ink);
}


/* call */

#detail .hero button{
  min-height:29px;

  margin-top:8px;
  padding:0 10px;

  border:1px solid var(--line);
  border-radius:10px;

  background:transparent;

  font-size:8px;
  font-weight:800;
}


/* ========================================
   CONTACTS
   ======================================== */

#clientContactsFinal.cc6-contacts{
  position:relative;

  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;

  margin:0;
  padding:9px 10px;

  border:0;
  border-radius:14px;

  background:
    rgba(100,120,135,.055);
}


#clientContactsFinal.cc6-contacts h3{
  flex:0 0 auto;

  margin:0 3px 0 0;

  color:var(--muted);

  font-size:8px;
  font-weight:800;
}


/*
 * Existing contact chips
 */

#clientContactsFinal.cc6-contacts
button:not(#contactFinalAdd){
  min-height:27px;

  padding:0 9px;

  border:1px solid
    rgba(100,120,135,.14);

  border-radius:999px;

  background:var(--card);

  color:var(--ink);

  font-size:7.5px;
}


/*
 * ADD FORM
 */

.cc6-contact-form{
  flex:1 0 100%;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:8px;

  margin-top:4px;
  padding:11px;

  border-radius:13px;

  background:var(--card);

  box-shadow:
    0 3px 14px
    rgba(20,45,60,.04);
}


.cc6-field{
  display:block;

  min-width:0;
}


.cc6-field-name{
  grid-column:1/-1;
}


.cc6-field-label{
  display:block;

  margin:0 0 4px;

  color:var(--muted);

  font-size:7px;
  font-weight:800;
}


.cc6-field input,
.cc6-contact-form input{
  width:100%;
  height:37px;

  box-sizing:border-box;

  padding:0 10px;

  border:1px solid
    rgba(100,120,135,.16);

  border-radius:10px;

  outline:none;

  background:
    rgba(100,120,135,.045);

  color:var(--ink);

  font-size:11px;

  transition:
    border-color .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}


.cc6-field input:focus,
.cc6-contact-form input:focus{
  border-color:
    rgba(23,198,154,.7);

  background:var(--card);

  box-shadow:
    0 0 0 3px
    rgba(23,198,154,.08);
}


.cc6-contact-save-wrap{
  grid-column:1/-1;
}


#contactFinalAdd.cc6-contact-save{
  width:100%;
  min-height:37px;

  border:0;
  border-radius:10px;

  background:#17c69a;
  color:#062d24;

  font-size:10px;
  font-weight:900;
}


/* ========================================
   NEXT PAYMENT
   ======================================== */

#detail .client-header-finance{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:7px;

  margin:0;
}


#detail .client-header-payment,
#detail .client-header-overdue{
  min-width:0;

  padding:11px 12px;

  border:0;
  border-radius:14px;

  background:
    rgba(100,120,135,.055);
}


#detail .client-header-overdue{
  background:
    rgba(23,198,154,.065);
}


#detail .client-header-overdue.has-overdue{
  background:
    rgba(220,65,80,.08);
}


#detail .client-header-payment>span,
#detail .client-header-overdue>span{
  display:block;

  margin-bottom:6px;

  color:var(--muted);

  font-size:7px;
  font-weight:800;
}


#detail .client-header-payment>b,
#detail .client-header-overdue>b{
  display:block;

  margin-bottom:3px;

  font-size:17px;
  line-height:1;
  font-weight:950;
}


#detail
.client-header-overdue:not(.has-overdue)>b{
  color:#07856a;
}


#detail
.client-header-overdue.has-overdue>b{
  color:#cf4050;
}


#detail .client-header-payment>small,
#detail .client-header-overdue>small{
  display:block;

  color:var(--muted);

  font-size:7px;
  line-height:1.3;
}


/* ========================================
   CREDIT
   ======================================== */

#creditSelectorFinal.cc6-credit{
  display:grid;
  gap:9px;

  margin:0;
  padding:12px;

  border:0;
  border-radius:16px;

  background:var(--card);

  box-shadow:
    0 4px 17px
    rgba(20,45,60,.045);
}


#creditSelectorFinal.cc6-credit::before{
  content:"КРЕДИТ";

  display:block;

  margin-bottom:-2px;

  color:var(--muted);

  font-size:7px;
  font-weight:900;

  letter-spacing:.07em;
}


#creditSelectorFinalSelect{
  width:100%;
  height:42px;

  padding:0 11px;

  border:0;
  border-radius:10px;

  outline:none;

  background:
    rgba(100,120,135,.055);

  color:var(--ink);

  font-size:13px;
  font-weight:750;
}


#creditSelectorFinal button{
  min-height:37px;

  border:0;
  border-radius:10px;

  font-size:9px;
  font-weight:850;
}


#creditSelectorFinal button:not(.primary){
  background:
    rgba(100,120,135,.065);
}


#creditSelectorFinal button.primary{
  background:#17c69a;
  color:#062d24;

  font-size:13px;
  font-weight:950;
}


#creditSelectorFinal small{
  color:var(--muted);

  font-size:7px;
}


/* ========================================
   TABS
   one line only
   ======================================== */

#detail .client-360-tabs.cc6-tabs{
  position:sticky;

  top:0;
  z-index:15;

  display:flex !important;

  flex-wrap:nowrap;

  gap:5px;

  margin:10px -2px 8px;
  padding:4px 2px;

  overflow-x:auto;
  overflow-y:hidden;

  border:0;

  background:var(--bg);

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}


#detail
.client-360-tabs.cc6-tabs::-webkit-scrollbar{
  display:none;
}


#detail .client-360-tabs.cc6-tabs button{
  flex:0 0 auto;

  min-width:auto;
  min-height:31px;

  padding:0 10px;

  border:0;
  border-radius:9px;

  background:
    rgba(100,120,135,.06);

  color:var(--muted);

  font-size:7.5px;
  font-weight:850;

  white-space:nowrap;

  box-shadow:none;
}


#detail
.client-360-tabs.cc6-tabs
button.active{
  background:#17c69a;
  color:#062d24;
}


#detail
.client-360-tabs.cc6-tabs
button i{
  display:inline-flex;

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

  min-width:14px;
  height:14px;

  margin-left:2px;
  padding:0 3px;

  border-radius:999px;

  background:
    rgba(50,80,95,.08);

  font-size:6px;
  font-style:normal;
}


/* ========================================
   CONTENT
   ======================================== */

#detail .client360-content{
  padding-bottom:25px;
}


#detail .client360-content .card,
#detail .client360-content .panel{
  border-color:
    rgba(100,120,135,.10);

  border-radius:15px;

  box-shadow:none;
}


/* ========================================
   PHONE
   ======================================== */

@media(max-width:520px){

  #drawer .sheet{
    padding:
      11px
      10px
      82px;
  }


  #detail .client360-head .hero h2{
    font-size:20px;
  }


  .cc6-contact-form{
    grid-template-columns:1fr 1fr;

    padding:9px;
  }


  #creditSelectorFinal.cc6-credit{
    padding:10px;
  }

}


/* narrow */

@media(max-width:360px){

  .cc6-contact-form{
    grid-template-columns:1fr;
  }


  .cc6-field-name{
    grid-column:auto;
  }


  .cc6-contact-save-wrap{
    grid-column:auto;
  }


  #detail .client-header-finance{
    grid-template-columns:1fr;
  }

}

/* END CLIENT_CARD_V6 */


/* CLIENT_CARD_V6_DARK_OPAQUE_FIX */

html[data-theme="dark"] #drawer{
  background:rgba(0,0,0,.62);
}

html[data-theme="dark"] #drawer .sheet{
  background:#07131d !important;
  background-image:none !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-theme="dark"] #detail{
  background:#07131d;
}

html[data-theme="dark"] #detail .client360-head,
html[data-theme="dark"] #detail .client360-content{
  background:transparent;
}

html[data-theme="dark"] #creditSelectorFinal.cc6-credit{
  background:#0c1d2a;
}

html[data-theme="dark"] #clientContactsFinal.cc6-contacts{
  background:#0b1a26;
}

html[data-theme="dark"] #detail .client-header-payment{
  background:#0b1a26;
}

html[data-theme="dark"] #detail .client-header-overdue{
  background:#09241f;
}

html[data-theme="dark"] #detail .client-360-tabs.cc6-tabs{
  background:#07131d;
}

/* END CLIENT_CARD_V6_DARK_OPAQUE_FIX */


/* FILE_SCOPE_V1 */

.file-scope{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:4px 0;
  padding:3px 7px;
  border-radius:999px;
  font-size:6px;
  font-weight:900;
  letter-spacing:.04em;
}

.file-scope.loan{
  color:#087e68;
  background:rgba(23,198,154,.10);
}

.file-scope.common{
  color:#9c6a00;
  background:rgba(235,171,35,.13);
}

.photo-common-check{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:0 9px;
  border-radius:10px;
  background:rgba(100,120,135,.06);
  font-size:8px;
  font-weight:800;
}

.doc-item-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

html[data-theme="dark"] .file-scope.loan{
  color:#54dfb8;
}

html[data-theme="dark"] .file-scope.common{
  color:#ffd26b;
}

/* END FILE_SCOPE_V1 */