/* =========================================================
   ATOSY ERP
   SUBJECT CLASSIFICATION — BUTTON LEVEL GRADIENT

   Chỉ đổi màu BUTTON/PILL từng cấp.
   Không tô nền node/row/container lớn.
   ========================================================= */


/* ---------------------------------------------------------
   RESET:
   tuyệt đối không cho node/row có nền
   --------------------------------------------------------- */

#atosy-classification-scroll-v4
.subject-classification-node,

#atosy-classification-scroll-v4
.subject-classification-node
> .subject-classification-row {

  background:
    transparent !important;

  box-shadow:
    none !important;

}


/* ---------------------------------------------------------
   BUTTON CHUNG
   --------------------------------------------------------- */

#atosy-classification-scroll-v4
.subject-classification-node
> .subject-classification-row
> .subject-classification-label {

  border-radius:
    14px !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;

}


/* =========================================================
   CẤP 1
   ĐẬM NHẤT
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="1"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(31, 117, 223, .52),
      rgba(25, 89, 183, .34)
    ) !important;

  border:
    1px solid
    rgba(111, 194, 255, .62) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08) !important;

}


/* =========================================================
   CẤP 2
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="2"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(37, 123, 221, .40),
      rgba(28, 91, 177, .26)
    ) !important;

  border:
    1px solid
    rgba(106, 187, 255, .48) !important;

}


/* =========================================================
   CẤP 3
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="3"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(42, 126, 218, .31),
      rgba(31, 91, 168, .20)
    ) !important;

  border:
    1px solid
    rgba(103, 181, 247, .36) !important;

}


/* =========================================================
   CẤP 4
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="4"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(45, 127, 211, .24),
      rgba(31, 87, 157, .15)
    ) !important;

  border:
    1px solid
    rgba(101, 175, 237, .28) !important;

}


/* =========================================================
   CẤP 5
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="5"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(47, 126, 203, .18),
      rgba(31, 82, 145, .11)
    ) !important;

  border:
    1px solid
    rgba(98, 167, 225, .22) !important;

}


/* =========================================================
   CẤP 6
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="6"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(48, 123, 194, .14),
      rgba(30, 76, 133, .08)
    ) !important;

  border:
    1px solid
    rgba(94, 159, 214, .17) !important;

}


/* =========================================================
   CẤP 7
   NHẠT NHẤT
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node[data-subject-level="7"]
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(48, 118, 181, .10),
      rgba(29, 71, 121, .055)
    ) !important;

  border:
    1px solid
    rgba(90, 151, 202, .13) !important;

}


/* =========================================================
   ANCESTOR
   Chuỗi cha đang dẫn tới node được chọn.
   Vẫn giữ màu của cấp, chỉ sáng hơn nhẹ.
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node.is-ancestor
> .subject-classification-row
> .subject-classification-label {

  filter:
    brightness(1.10)
    saturate(1.04) !important;

}


/* =========================================================
   SELECTED
   Cấp đang chọn vẫn sáng nhất.
   Nhưng kích thước/font vẫn theo đúng cấp.
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node.is-selected
> .subject-classification-row
> .subject-classification-label {

  background:
    linear-gradient(
      90deg,
      rgba(28, 134, 255, .72),
      rgba(35, 105, 214, .53)
    ) !important;

  border-color:
    rgba(117, 207, 255, .90) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.13),
    0 0 0 1px
    rgba(71,166,255,.14) !important;

}


/* =========================================================
   HOVER
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node
> .subject-classification-row
> .subject-classification-label:hover {

  filter:
    brightness(1.12)
    saturate(1.06) !important;

}


/* =========================================================
   COUNT BADGE
   Giữ badge nhỏ, không làm mất hierarchy
   ========================================================= */

#atosy-classification-scroll-v4
.subject-classification-node
> .subject-classification-row
.subject-classification-count {

  background:
    rgba(255,255,255,.10) !important;

  border:
    1px solid
    rgba(255,255,255,.05) !important;

}