/* =========================================================
   ATOSY ERP — SUBJECT EXPLORER V1
   S — CHỦ THỂ
   ========================================================= */

#atosy-subject-explorer {
  display: none;

  width:
    min(1480px, calc(100% - 36px));

  margin:
    18px auto 34px;
}

#atosy-subject-explorer.is-open {
  display: block;
}


/* =========================================================
   HERO
   ========================================================= */

.subject-explorer-hero {

  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 20px;

  align-items: center;

  padding:
    22px 24px;

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 48, 112, .55),
      rgba(7, 29, 74, .67)
    );

  border:
    1px solid rgba(175,215,255,.23);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 20px 54px rgba(0,12,48,.31);

  backdrop-filter:
    blur(30px)
    saturate(165%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(165%);
}

.subject-explorer-heading {

  display: flex;

  align-items: center;

  gap: 16px;
}

.subject-explorer-back {

  width: 48px;
  height: 48px;

  display: flex;

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

  flex: 0 0 48px;

  border-radius: 17px;

  border:
    1px solid rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.08);

  color:
    #fff;

  font-size:
    25px;

  cursor:
    pointer;
}

.subject-explorer-eyebrow {

  margin-bottom:
    5px;

  color:
    rgba(190,219,255,.72);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.subject-explorer-title {

  display: flex;

  align-items: baseline;

  gap: 10px;
}

.subject-explorer-title h1 {

  margin: 0;

  color: #fff;

  font-size:
    31px;
}

.subject-explorer-title span {

  color:
    rgba(216,232,255,.67);

  font-size:
    17px;

  font-weight:
    700;
}

.subject-explorer-subtitle {

  margin:
    5px 0 0;

  color:
    rgba(227,239,255,.76);

  font-size:
    13px;
}


.subject-explorer-total {

  min-width:
    140px;

  padding:
    14px 20px;

  text-align:
    center;

  border-radius:
    22px;

  background:
    rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.17);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10);
}

.subject-explorer-total span {

  display: block;

  color:
    rgba(218,234,255,.66);

  font-size:
    10px;

  font-weight:
    700;
}

.subject-explorer-total strong {

  display: block;

  margin-top:
    2px;

  color:
    #fff;

  font-size:
    29px;
}


/* =========================================================
   TOP TOOLBAR
   ========================================================= */

.subject-explorer-toolbar {

  display: grid;

  grid-template-columns:
    minmax(320px, 1fr)
    auto
    auto
    auto;

  gap:
    10px;

  margin-top:
    14px;
}

.subject-search-shell {

  display: flex;

  align-items: center;

  gap: 10px;

  height:
    48px;

  padding:
    0 16px;

  border-radius:
    999px;

  background:
    rgba(7,28,69,.50);

  border:
    1px solid rgba(178,216,255,.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}

.subject-search-shell span {

  color:
    rgba(220,237,255,.70);
}

.subject-search-shell input {

  flex: 1;

  height: 100%;

  padding: 0 !important;

  border: 0 !important;

  outline: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #fff !important;

  font-size:
    13px;
}

.subject-search-shell input::placeholder {

  color:
    rgba(214,231,255,.53) !important;
}


.subject-toolbar-button,
.subject-status-select {

  min-height:
    48px;

  padding:
    0 17px;

  border-radius:
    16px;

  border:
    1px solid rgba(188,219,255,.20);

  background:
    rgba(255,255,255,.075);

  color:
    #fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09);

  font-weight:
    750;

  cursor:
    pointer;
}

.subject-status-select {

  min-width:
    185px;

  outline: none;
}

.subject-status-select option {

  color:
    #122c5d;

  background:
    #fff;
}

.subject-add-button {

  background:
    linear-gradient(
      135deg,
      #25c86e,
      #10aa50
    );

  border-color:
    rgba(110,255,170,.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 24px rgba(4,105,49,.24);
}


/* =========================================================
   VIEW TABS
   ========================================================= */

.subject-view-tabs {

  display: flex;

  gap: 7px;

  margin-top:
    12px;

  padding:
    6px;

  width:
    max-content;

  border-radius:
    999px;

  background:
    rgba(5,25,63,.43);

  border:
    1px solid rgba(169,211,255,.15);
}

.subject-view-tab {

  min-height:
    38px;

  padding:
    0 15px;

  border: 0;

  border-radius:
    999px;

  color:
    rgba(221,235,255,.70);

  background:
    transparent;

  font-weight:
    750;

  cursor:
    pointer;
}

.subject-view-tab.is-active {

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      rgba(37,139,255,.86),
      rgba(73,91,255,.78)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 7px 20px rgba(20,86,220,.25);
}


/* =========================================================
   MAIN EXPLORER
   ========================================================= */

.subject-explorer-layout {

  display: grid;

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

  gap:
    14px;

  margin-top:
    14px;
}


/* =========================================================
   CATEGORY TREE
   ========================================================= */

.subject-tree-panel {

  height:
    calc(100vh - 270px);

  min-height:
    560px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius:
    27px;

  background:
    linear-gradient(
      145deg,
      rgba(13,45,103,.58),
      rgba(6,27,69,.68)
    );

  border:
    1px solid rgba(180,216,255,.21);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 48px rgba(0,12,48,.27);

  backdrop-filter:
    blur(28px);

  -webkit-backdrop-filter:
    blur(28px);
}

.subject-tree-header {

  padding:
    17px 17px 13px;

  border-bottom:
    1px solid rgba(190,220,255,.10);
}

.subject-tree-header-row {

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.subject-tree-header h2 {

  margin: 0;

  color: #fff;

  font-size:
    15px;
}

.subject-tree-collapse {

  width: 31px;
  height: 31px;

  border-radius:
    10px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.07);

  color:
    #fff;

  cursor:
    pointer;
}

.subject-tree-caption {

  margin-top:
    5px;

  color:
    rgba(215,231,255,.57);

  font-size:
    10px;
}

.subject-tree-all {

  margin:
    10px 10px 3px;

  padding:
    10px 11px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-radius:
    13px;

  color:
    #fff;

  background:
    rgba(48,139,255,.18);

  border:
    1px solid rgba(94,169,255,.21);

  cursor:
    pointer;
}

.subject-tree-all.is-active {

  background:
    linear-gradient(
      135deg,
      rgba(38,139,255,.54),
      rgba(79,91,255,.32)
    );

  border-color:
    rgba(121,186,255,.38);
}


.subject-tree-scroll {

  flex: 1;

  overflow:
    auto;

  padding:
    6px 7px 18px;
}


.subject-tree-row {

  display: flex;

  align-items: center;

  min-height:
    38px;

  padding:
    3px 7px;

  border-radius:
    11px;

  cursor:
    pointer;

  color:
    rgba(225,238,255,.78);

  transition:
    background 140ms ease,
    color 140ms ease;
}

.subject-tree-row:hover {

  color:
    #fff;

  background:
    rgba(255,255,255,.075);
}

.subject-tree-row.is-selected {

  color:
    #fff;

  background:
    linear-gradient(
      90deg,
      rgba(43,141,255,.28),
      rgba(115,78,255,.16)
    );

  border:
    1px solid rgba(116,182,255,.19);
}


.subject-tree-toggle {

  width:
    22px;

  flex:
    0 0 22px;

  text-align:
    center;

  color:
    rgba(211,231,255,.66);

  font-size:
    10px;
}

.subject-tree-label {

  flex: 1;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    700;
}

.subject-tree-count {

  min-width:
    27px;

  padding:
    3px 6px;

  border-radius:
    999px;

  text-align:
    center;

  color:
    rgba(234,243,255,.85);

  background:
    rgba(255,255,255,.09);

  font-size:
    9px;

  font-weight:
    800;
}

.subject-tree-children {

  display:
    none;
}

.subject-tree-node.is-expanded >
.subject-tree-children {

  display:
    block;
}


/* =========================================================
   RESULT PANEL
   ========================================================= */

.subject-result-panel {

  min-width: 0;

  min-height:
    620px;

  overflow: hidden;

  border-radius:
    27px;

  background:
    linear-gradient(
      145deg,
      rgba(13,45,103,.52),
      rgba(5,26,67,.64)
    );

  border:
    1px solid rgba(182,218,255,.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 18px 48px rgba(0,12,48,.26);

  backdrop-filter:
    blur(28px);

  -webkit-backdrop-filter:
    blur(28px);
}


/* =========================================================
   RESULT HEADER
   ========================================================= */

.subject-result-header {

  padding:
    16px 18px 12px;

  border-bottom:
    1px solid rgba(190,220,255,.10);
}

.subject-breadcrumb {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  min-height:
    28px;

  color:
    rgba(217,233,255,.69);

  font-size:
    11px;
}

.subject-breadcrumb button {

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #68b7ff;

  font:
    inherit;

  font-weight:
    750;

  cursor:
    pointer;
}

.subject-result-titlebar {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 14px;

  margin-top:
    8px;
}

.subject-result-titlebar h2 {

  margin: 0;

  color: #fff;

  font-size:
    19px;
}

.subject-result-meta {

  margin-top:
    4px;

  color:
    rgba(216,232,255,.61);

  font-size:
    10px;
}

.subject-result-page-size {

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(216,232,255,.59);

  font-size:
    10px;
}

.subject-result-page-size select {

  height:
    32px;

  padding:
    0 9px;

  border-radius:
    10px;

  border:
    1px solid rgba(255,255,255,.13);

  background:
    rgba(255,255,255,.07);

  color:
    #fff;

  outline:
    none;
}

.subject-result-page-size option {

  color:
    #173363;

  background:
    #fff;
}


/* =========================================================
   STATUS CHIPS
   ========================================================= */

.subject-status-chips {

  display: flex;

  gap: 7px;

  overflow-x:
    auto;

  padding-top:
    12px;
}

.subject-status-chip {

  flex:
    0 0 auto;

  min-height:
    32px;

  padding:
    0 11px;

  border-radius:
    999px;

  border:
    1px solid rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.055);

  color:
    rgba(222,236,255,.73);

  font-size:
    10px;

  font-weight:
    750;

  cursor:
    pointer;
}

.subject-status-chip.is-active {

  color:
    #fff;

  background:
    rgba(45,140,255,.23);

  border-color:
    rgba(100,175,255,.30);
}


/* =========================================================
   TABLE
   ========================================================= */

.subject-table-wrap {

  overflow:
    auto;
}

.subject-table {

  width:
    100%;

  border-collapse:
    collapse;

  table-layout:
    fixed;
}

.subject-table thead {

  position:
    sticky;

  top: 0;

  z-index:
    5;

  background:
    rgba(4,23,59,.88);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}

.subject-table th {

  padding:
    12px 14px;

  text-align:
    left;

  color:
    rgba(196,220,250,.66);

  border-bottom:
    1px solid rgba(190,220,255,.09);

  font-size:
    9px;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;
}

.subject-table td {

  padding:
    13px 14px;

  color:
    rgba(229,239,255,.79);

  border-bottom:
    1px solid rgba(190,220,255,.075);

  font-size:
    11px;

  vertical-align:
    middle;
}

.subject-table tbody tr {

  transition:
    background 120ms ease;
}

.subject-table tbody tr:hover {

  background:
    rgba(255,255,255,.055);
}

.subject-code {

  color:
    #65b8ff !important;

  font-weight:
    800;
}

.subject-name {

  color:
    #fff !important;

  font-weight:
    750;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.subject-cell-muted {

  color:
    rgba(209,226,249,.57) !important;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.subject-status-badge {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  max-width:
    100%;

  padding:
    6px 9px;

  border-radius:
    999px;

  color:
    rgba(232,241,255,.87);

  background:
    rgba(255,255,255,.08);

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

  font-size:
    9px;

  white-space:
    nowrap;
}

.subject-status-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #8195b4;
}

.subject-status-badge[data-status*="Chưa"] .subject-status-dot {

  background:
    #ff9f3f;
}

.subject-status-badge[data-status*="Đã"] .subject-status-dot {

  background:
    #8a64ff;
}

.subject-status-badge[data-status*="đàm phán" i] .subject-status-dot {

  background:
    #4ba7ff;
}

.subject-status-badge[data-status*="hợp tác" i] .subject-status-dot {

  background:
    #2bd88e;
}

.subject-status-badge[data-status*="vấn đề" i] .subject-status-dot {

  background:
    #ff5269;
}

.subject-row-open {

  width:
    34px;

  height:
    34px;

  border-radius:
    12px;

  border:
    1px solid rgba(255,255,255,.13);

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      rgba(43,145,255,.72),
      rgba(50,102,255,.58)
    );

  cursor:
    pointer;
}


/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.subject-result-message {

  min-height:
    340px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  text-align:
    center;

  color:
    rgba(220,235,255,.66);

  gap:
    8px;
}

.subject-result-message strong {

  color:
    #fff;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.subject-pagination {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    12px 16px;

  border-top:
    1px solid rgba(190,220,255,.09);
}

.subject-pagination-info {

  color:
    rgba(216,232,255,.61);

  font-size:
    10px;
}

.subject-pagination-actions {

  display:
    flex;

  gap:
    6px;
}

.subject-page-button {

  min-width:
    36px;

  height:
    34px;

  padding:
    0 10px;

  border-radius:
    11px;

  border:
    1px solid rgba(255,255,255,.12);

  color:
    #fff;

  background:
    rgba(255,255,255,.07);

  cursor:
    pointer;
}

.subject-page-button:disabled {

  opacity:
    .35;

  cursor:
    default;
}


/* =========================================================
   COLLAPSED TREE
   ========================================================= */

#atosy-subject-explorer.tree-collapsed
.subject-explorer-layout {

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

#atosy-subject-explorer.tree-collapsed
.subject-tree-header h2,
#atosy-subject-explorer.tree-collapsed
.subject-tree-caption,
#atosy-subject-explorer.tree-collapsed
.subject-tree-label,
#atosy-subject-explorer.tree-collapsed
.subject-tree-count {

  display:
    none;
}

#atosy-subject-explorer.tree-collapsed
.subject-tree-row {

  justify-content:
    center;
}

#atosy-subject-explorer.tree-collapsed
.subject-tree-toggle {

  width:
    auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {

  .subject-explorer-layout {

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

  .subject-explorer-toolbar {

    grid-template-columns:
      1fr auto auto;
  }

  .subject-add-button {

    grid-column:
      1 / -1;
  }

}

@media (max-width: 800px) {

  #atosy-subject-explorer {

    width:
      calc(100% - 18px);
  }

  .subject-explorer-layout {

    grid-template-columns:
      1fr;
  }

  .subject-tree-panel {

    height:
      auto;

    min-height:
      0;

    max-height:
      360px;
  }

  .subject-explorer-toolbar {

    grid-template-columns:
      1fr;
  }

  .subject-status-select,
  .subject-toolbar-button {

    width:
      100%;
  }

}



/* =========================================================
   ATOSY SUBJECT EXPLORER
   HEADER + LAYOUT FIX
   ========================================================= */


/* =========================================================
   1. GLOBAL HEADER LUÔN Ở TRÊN CÙNG
   ========================================================= */

.app-header {

  position:
    sticky !important;

  top:
    0 !important;

  left:
    0;

  right:
    0;

  z-index:
    10000 !important;

  background:
    linear-gradient(
      180deg,
      rgba(4, 35, 83, .88),
      rgba(4, 30, 75, .76)
    ) !important;

  border-bottom:
    1px solid rgba(176,215,255,.14);

  box-shadow:
    0 12px 35px rgba(0,12,45,.18);

  backdrop-filter:
    blur(28px)
    saturate(170%) !important;

  -webkit-backdrop-filter:
    blur(28px)
    saturate(170%) !important;
}


/* header không bị lớp khác che */

.top-navigation,
.atosy-svoa-popover {

  z-index:
    10020 !important;
}


/* =========================================================
   2. SUBJECT PHẢI BẮT ĐẦU NGAY SAU HEADER
   ========================================================= */

#atosy-subject-explorer {

  position:
    relative;

  z-index:
    2;

  margin-top:
    18px !important;
}


/* Footer phải luôn ở cuối */

.app-footer {

  position:
    relative;

  z-index:
    1;

  margin-top:
    32px !important;
}


/* =========================================================
   3. FIX TREE HEIGHT KHI HEADER STICKY
   ========================================================= */

.subject-tree-panel {

  height:
    calc(100vh - 230px) !important;

  min-height:
    520px;
}


/* =========================================================
   4. RESULT TABLE AREA
   ========================================================= */

.subject-result-panel {

  min-height:
    calc(100vh - 230px) !important;
}


/* =========================================================
   5. STICKY LOCAL HEADERS
   ========================================================= */

.subject-tree-header {

  position:
    sticky;

  top:
    0;

  z-index:
    10;

  background:
    rgba(6,29,72,.82);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.subject-result-header {

  position:
    sticky;

  top:
    0;

  z-index:
    10;

  background:
    rgba(6,29,72,.82);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


/* =========================================================
   6. SCROLLBAR
   ========================================================= */

.subject-tree-scroll::-webkit-scrollbar,
.subject-table-wrap::-webkit-scrollbar {

  width:
    8px;

  height:
    8px;
}


.subject-tree-scroll::-webkit-scrollbar-thumb,
.subject-table-wrap::-webkit-scrollbar-thumb {

  border-radius:
    999px;

  background:
    rgba(157,203,255,.24);
}



/* =========================================================
   ATOSY SINGLE WORKSPACE HARD GUARD
   Chỉ một workspace được phép xuất hiện.
   ========================================================= */

/* SUBJECT MODE:
   Dashboard tuyệt đối không được xuất hiện. */
body.atosy-view-subject #atosy-dashboard-v2 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Subject phải hiện trong Subject mode. */
body.atosy-view-subject #subject-full-page {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* DASHBOARD MODE:
   Subject tuyệt đối không được nằm dưới Dashboard. */
body.atosy-view-dashboard #subject-full-page {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dashboard được phép hiện khi đúng Dashboard mode. */
body.atosy-view-dashboard #atosy-dashboard-v2 {
  visibility: visible !important;
  opacity: 1 !important;
}



/* ==========================================================
   ATOSY SUBJECT TABLE COLUMN BALANCE V1
   Mã Chủ thể rộng hơn + Tên Chủ thể nhỏ nhẹ
   ========================================================== */

.subject-code {
  min-width: 92px !important;
  width: 92px !important;
  max-width: 92px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.subject-name {
  font-size: 13px !important;
  line-height: 1.25 !important;
}


/*
 * Cột 1 = Mã Chủ thể
 * Cột 2 = Tên Chủ thể
 */
.subject-explorer-table th:nth-child(1),
.subject-explorer-table td:nth-child(1) {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
}

.subject-explorer-table th:nth-child(2),
.subject-explorer-table td:nth-child(2) {
  font-size: 13px !important;
}


/* ==========================================================
   ATOSY SUBJECT CODE COLUMN — AUTO WIDTH
   Cột mã rộng theo mã dài nhất trên bảng hiện tại
   ========================================================== */

/* Cho browser tự phân bổ chiều rộng cột */
.subject-explorer-table {
  table-layout: auto !important;
}

/* Cột Mã: chỉ rộng vừa đủ nội dung dài nhất */
.subject-explorer-table th:first-child,
.subject-explorer-table td:first-child,
.subject-code {
  width: 1% !important;
  min-width: max-content !important;
  max-width: none !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Không cho riêng nội dung mã bị cắt ... */
.subject-code {
  display: inline-block !important;
  width: max-content !important;
}