/* Critical chrome after login: first paint khớp Sanze, không đợi Vite CSS / JS. */
:root {
  --ct-logo-sm-height: 40px;
  --ct-logo-lg-height: 40px;
  --ct-leftbar-condensed-height: calc(100dvh - var(--ct-topbar-height) - var(--ct-topnav-height) - 2px);
  --ct-topnav-height: env(safe-area-inset-bottom);
  --sanze-mobile-vh-offset: 0px;
  --sanze-topnav-more-width: 4.75rem;
}

html[language="ja"] {
  --sanze-topnav-more-width: 5rem;
}

html[language="vi"] {
  --sanze-topnav-more-width: 6.75rem;
}

@media (max-width: 991.98px) {
  :root {
    --sanze-mobile-vh-offset: calc(env(safe-area-inset-bottom, 0px) + env(safe-area-inset-top, 0px) + 120px);
  }
}

html[data-menu-color="brand"] {
  --ct-menu-bg: linear-gradient(180deg, #1f3a5f 0%, #2b4c73 100%);
}

html[data-topbar-color="brand"] {
  --ct-topbar-bg: linear-gradient(180deg, #1f3a5f 0%, #2b4c73 100%);
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]):not([data-layout-position="scrollable"]) .wrapper .leftside-menu {
  position: fixed;
}

@media (min-width: 992px) {
  html[data-layout="topnav"] {
    --ct-topnav-height: calc(env(safe-area-inset-bottom) + 50.8px);
  }
}

.logo-lg img,
.logo-sm img {
  height: var(--ct-logo-lg-height);
  width: auto;
}

/* Tắt transition khung khi boot — tránh sidebar/content animate 0.25s lúc load. */
html.layout-booting .wrapper .leftside-menu,
html.layout-booting .wrapper .content-page,
html.layout-booting .wrapper .navbar-custom,
html.layout-booting .wrapper .topnav,
html.layout-booting .wrapper .logo,
html.layout-booting .side-nav .side-nav-link,
html.layout-booting .topnav .nav-link {
  transition: none !important;
}

/* Left vertical: ẩn chữ condensed từ first paint (không đợi Vite). */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item .side-nav-link span {
  display: none;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link span {
  display: inline-block;
}

/* Simplebar chưa init: giữ cột dọc. Sau init (.simplebar-scrollable-*) trả quyền cho Simplebar. */
html:not([data-layout="topnav"]) .leftside-menu #leftside-menu-container[data-simplebar]:not(.simplebar-scrollable-y):not(.simplebar-scrollable-x) {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

html:not([data-layout="topnav"]) .leftside-menu #leftside-menu-container .side-nav {
  display: block;
  width: 100%;
}

/* Topnav desktop: hiện ngay, không chờ .navbar-expand-lg / .collapse.show. */
@media (min-width: 992px) {
  html[data-layout="topnav"] .topnav {
    min-height: var(--ct-topnav-height);
  }

  html[data-layout="topnav"] .topnav .navbar.navbar-expand-lg {
    flex-wrap: nowrap;
    min-height: var(--ct-topnav-height);
  }

  html[data-layout="topnav"] .topnav .navbar.navbar-expand-lg > .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    flex-grow: 1;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }

  html[data-layout="topnav"] .topnav .navbar-nav.topnav-priority-nav {
    position: relative;
    flex-wrap: nowrap;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
  }

  html[data-layout="topnav"] .topnav .navbar-nav.topnav-priority-nav.has-topnav-more {
    padding-right: var(--sanze-topnav-more-width);
  }

  html[data-layout="topnav"] .topnav .navbar-nav .nav-link {
    white-space: nowrap;
    padding-right: 0.75rem !important;
  }

  html[data-layout="topnav"] .topnav .navbar-nav .nav-link i {
    display: inline-block;
    width: 1.2rem;
    min-width: 1.2rem;
    margin-right: 0.25rem !important;
    text-align: center;
    flex-shrink: 0;
  }

  html[data-layout="topnav"] .topnav .topnav-more {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1050;
  }
}

/* Mobile: ẩn menu ngang khi chưa mở (không dùng Bootstrap Collapse). */
@media (max-width: 991.98px) {
  html[data-layout="topnav"] .topnav #topnav-menu-content:not(.show) {
    display: none;
  }
}

/* Subnav: chỉ ẩn title đúng slot chuẩn, tránh ẩn nhầm card/widget. */
.container-fluid:has(> [data-module-subnav]) > .page-title-box > .page-title,
.container-fluid:has(> [data-module-subnav]) > .row:first-of-type > .col-12 > .page-title-box > .page-title {
  display: none !important;
}

.portal-internal-subtitle {
  color: var(--ct-topbar-item-color);
}

.portal-internal-subtitle h5,
#portal-internal-subtitle {
  line-height: 1.3;
}

#portal-internal-subtitle {
  min-height: 1.25em;
  white-space: nowrap;
}

/* Chấm đỏ: áp dụng ngay, không đợi Vite (common.scss right: 10px). */
.navbar-custom .topbar-menu .notification-list .noti-icon {
  display: inline-block;
  width: 22px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  flex-shrink: 0;
  text-align: center;
}

.notification-list .noti-icon-badge {
  right: 10px !important;
}

/*
 * PDF Edit: critical first-paint layout (không đợi Vite application.scss).
 * Không có CSS này, các .pdf-edit-side-column (col-auto) hiện full width → nhảy layout
 * rồi mới collapse khi Vite CSS tới; view_tool_bar cũng chưa neo góc.
 */
.content-edit-form .body-page {
  --pdf-edit-side-column-width: 160px;
}

.content-edit-form .body-page .left-middle-bookmarks,
.content-edit-form .body-page .left-middle-history {
  --pdf-edit-side-column-width: 300px;
}

.content-edit-form .body-page .left-middle-page {
  --pdf-edit-side-column-width: 160px;
}

.content-edit-form .body-page .right-middle-comment,
.content-edit-form .body-page .right-middle-watermark {
  --pdf-edit-side-column-width: 500px;
}

.content-edit-form .body-page .right-middle-stamp {
  --pdf-edit-side-column-width: 308px;
}

.content-edit-form .body-page .pdf-edit-side-column--left,
.content-edit-form .body-page .pdf-edit-side-column--right {
  flex-shrink: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-color: transparent;
}

.content-edit-form .body-page .pdf-edit-side-column--left {
  width: var(--pdf-edit-side-column-width, 160px);
}

.content-edit-form .body-page .pdf-edit-side-column--right {
  width: var(--pdf-edit-side-column-width);
}

.content-edit-form .body-page[show-pages='true'] .left-middle-page.pdf-edit-side-column--left,
.content-edit-form .body-page[show-bookmarks='true'] .left-middle-bookmarks.pdf-edit-side-column--left,
.content-edit-form .body-page[show-history='true'] .left-middle-history.pdf-edit-side-column--left,
.content-edit-form .body-page[show-comments='true'] .right-middle-comment.pdf-edit-side-column--right,
.content-edit-form .body-page[show-stamp='true'] .right-middle-stamp.pdf-edit-side-column--right,
.content-edit-form .body-page[show-watermark='true'] .right-middle-watermark.pdf-edit-side-column--right {
  max-width: var(--pdf-edit-side-column-width, 160px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.layout-booting .content-edit-form .body-page .pdf-edit-side-column--left,
html.layout-booting .content-edit-form .body-page .pdf-edit-side-column--right,
html.layout-booting .content-edit-form .body-page .pdf-edit-side-column--left > *,
html.layout-booting .content-edit-form .body-page .pdf-edit-side-column--right > * {
  transition: none !important;
}

/* Neo view toolbar theo data-snap-position trước khi JS gán inline style. */
.content-edit-form .pdf-edit-viewer-shell {
  position: relative;
}

.content-edit-form .view_tool_bar {
  position: absolute;
  z-index: 12;
  left: auto;
  top: auto;
  right: 8px;
  bottom: 8px;
  transform: none;
}

.content-edit-form .view_tool_bar[data-snap-position='top-left'] {
  left: 8px;
  top: 8px;
  right: auto;
  bottom: auto;
}

.content-edit-form .view_tool_bar[data-snap-position='top-center'] {
  left: 50%;
  top: 8px;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
}

.content-edit-form .view_tool_bar[data-snap-position='top-right'] {
  left: auto;
  top: 8px;
  right: 8px;
  bottom: auto;
}

.content-edit-form .view_tool_bar[data-snap-position='bottom-left'] {
  left: 8px;
  top: auto;
  right: auto;
  bottom: 8px;
}

.content-edit-form .view_tool_bar[data-snap-position='bottom-center'] {
  left: 50%;
  top: auto;
  right: auto;
  bottom: 8px;
  transform: translateX(-50%);
}

.content-edit-form .view_tool_bar[data-snap-position='bottom-right'] {
  left: auto;
  top: auto;
  right: 8px;
  bottom: 8px;
}

html.layout-booting .content-edit-form .view_tool_bar {
  transition: none !important;
}