/* =========================================================
   ATOSY ERP
   APPLE LIQUID THEME SYSTEM
   ========================================================= */

:root {
  --atosy-font:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  --atosy-radius-sm: 14px;
  --atosy-radius-md: 18px;
  --atosy-radius-lg: 24px;
  --atosy-radius-xl: 30px;
  --atosy-radius-pill: 999px;

  --atosy-blue: #1687ff;
  --atosy-purple: #8757ff;
  --atosy-green: #1ecf8b;
  --atosy-orange: #ff9f3f;
  --atosy-red: #ff5269;

  --atosy-navy-950: #03142f;
  --atosy-navy-900: #041d43;
  --atosy-navy-850: #062656;
  --atosy-navy-800: #07326c;

  --atosy-text-dark: #0c2250;
  --atosy-text-soft: #6980a4;

  --atosy-transition:
    180ms cubic-bezier(.2,.8,.2,1);

  --atosy-shadow-liquid:
    0 18px 55px rgba(0, 22, 75, .22);

  --atosy-shadow-card:
    0 12px 30px rgba(0, 39, 105, .12);
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  font-family: var(--atosy-font);
}

body {
  margin: 0;
  min-height: 100vh;

  transition:
    background var(--atosy-transition),
    color var(--atosy-transition);
}

/* =========================================================
   APPLE LIQUID NAVY BACKGROUND
   ========================================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -20;

  background:
    radial-gradient(
      circle at 18% 15%,
      rgba(28, 126, 255, .44),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 8%,
      rgba(13, 116, 255, .58),
      transparent 32%
    ),
    radial-gradient(
      circle at 77% 72%,
      rgba(63, 49, 255, .30),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      var(--atosy-navy-950) 0%,
      var(--atosy-navy-850) 48%,
      #064db0 100%
    );

  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;

  width: 140vw;
  height: 55vh;

  left: -20vw;
  top: -10vh;

  z-index: -19;

  border-radius: 50%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(32, 138, 255, .17),
      rgba(55, 70, 255, .18),
      transparent
    );

  filter: blur(30px);

  transform: rotate(-7deg);

  pointer-events: none;
}

/* =========================================================
   LIQUID COMPONENTS
   ========================================================= */

.atosy-liquid {
  backdrop-filter:
    blur(22px)
    saturate(150%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(150%);

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    var(--atosy-shadow-liquid);
}

.atosy-pill {
  display: inline-flex;

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

  gap: 8px;

  min-height: 38px;

  padding:
    0 16px;

  border-radius:
    var(--atosy-radius-pill);
}

.atosy-card {
  border-radius:
    var(--atosy-radius-lg);

  overflow: hidden;
}

/* =========================================================
   THEME 1
   APPLE LIQUID NAVY
   ========================================================= */

html[data-atosy-theme="navy"] body {
  color: #ffffff;
}

html[data-atosy-theme="navy"]
.atosy-workspace {
  background:
    linear-gradient(
      145deg,
      rgba(6,36,86,.76),
      rgba(5,25,66,.70)
    );

  border:
    1px solid
    rgba(111,176,255,.20);

  color:
    #ffffff;
}

html[data-atosy-theme="navy"]
.atosy-surface {
  background:
    linear-gradient(
      145deg,
      rgba(17,67,134,.64),
      rgba(6,34,80,.72)
    );

  color:
    #ffffff;
}

html[data-atosy-theme="navy"]
.atosy-card-soft {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.045)
    );

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

  color:
    #ffffff;
}

/* =========================================================
   THEME 2
   APPLE LIQUID FOCUS
   ========================================================= */

html[data-atosy-theme="focus"] body {
  color:
    var(--atosy-text-dark);
}

html[data-atosy-theme="focus"]
.atosy-workspace {
  background:
    rgba(255,255,255,.96);

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

  color:
    var(--atosy-text-dark);

  box-shadow:
    0 18px 55px
    rgba(0,28,90,.22);
}

html[data-atosy-theme="focus"]
.atosy-surface {
  background:
    rgba(255,255,255,.90);

  color:
    var(--atosy-text-dark);
}

html[data-atosy-theme="focus"]
.atosy-card-soft {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(242,247,255,.94)
    );

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

  box-shadow:
    var(--atosy-shadow-card);

  color:
    var(--atosy-text-dark);
}

/* =========================================================
   TOP NAV
   ========================================================= */

.atosy-topnav {
  display: flex;

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

  gap: 10px;

  width:
    max-content;

  max-width:
    calc(100% - 32px);

  margin:
    16px auto 10px;

  padding:
    7px;

  border-radius:
    var(--atosy-radius-pill);

  background:
    linear-gradient(
      145deg,
      rgba(17,74,155,.62),
      rgba(4,37,92,.64)
    );

  border:
    1px solid
    rgba(125,188,255,.21);

  backdrop-filter:
    blur(20px)
    saturate(150%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(150%);

  box-shadow:
    0 12px 35px
    rgba(0,20,70,.20);
}

.atosy-topnav-button {
  border: 0;
  outline: 0;

  color:
    rgba(255,255,255,.86);

  background:
    transparent;
}

.atosy-topnav-button.active {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #147dff,
      #2668ff
    );

  box-shadow:
    0 7px 20px
    rgba(18,113,255,.38),
    inset 0 1px 0
    rgba(255,255,255,.28);
}

/* =========================================================
   SVOA COLOR TOKENS
   ========================================================= */

.atosy-s {
  --entity-color:
    #1687ff;
}

.atosy-v {
  --entity-color:
    #8955ff;
}

.atosy-o {
  --entity-color:
    #1dc98b;
}

.atosy-a {
  --entity-color:
    #ff9447;
}

.atosy-entity-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  border-radius:
    14px;

  color:
    #ffffff;

  font-weight:
    800;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.38),
      transparent 30%
    ),
    var(--entity-color);

  box-shadow:
    0 8px 20px
    color-mix(
      in srgb,
      var(--entity-color) 35%,
      transparent
    );
}

/* =========================================================
   WORKSPACE
   ========================================================= */

.atosy-workspace {
  margin:
    12px auto;

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

  min-height:
    520px;

  padding:
    18px;

  border-radius:
    28px;

  transition:
    background var(--atosy-transition),
    color var(--atosy-transition),
    border-color var(--atosy-transition);
}

/* =========================================================
   THEME SETTINGS
   ========================================================= */

.atosy-theme-settings {
  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;
}

.atosy-theme-option {
  position:
    relative;

  min-width:
    180px;

  padding:
    14px 16px;

  border-radius:
    var(--atosy-radius-lg);

  cursor:
    pointer;

  transition:
    all var(--atosy-transition);
}

.atosy-theme-option:hover {
  transform:
    translateY(-2px);
}

.atosy-theme-option.is-selected {
  outline:
    2px solid #4aa6ff;

  box-shadow:
    0 0 0 5px
    rgba(74,166,255,.14);
}

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

@media (max-width: 900px) {

  .atosy-topnav {
    width:
      calc(100% - 28px);

    justify-content:
      space-between;
  }

  .atosy-pill {
    padding:
      0 12px;

    font-size:
      13px;
  }

  .atosy-workspace {
    width:
      calc(100% - 20px);

    padding:
      12px;

    border-radius:
      22px;
  }
}


/* =========================================================
   ATOSY ERP
   DARK SURFACE CONTRAST SYSTEM
   ========================================================= */

/*
  QUY TẮC:
  - Nền navy / liquid tối => chữ trắng
  - Surface trắng => chữ navy
  - Không để typography cũ kế thừa màu tối trên nền tối
*/


/* =========================================================
   1. HEADER / BRAND
   ========================================================= */

.app-header,
.app-header * {
  color: rgba(255,255,255,.92);
}

.app-header .brand-name {
  color: #ffffff !important;
}

.app-header .brand-tagline {
  color: rgba(255,255,255,.68) !important;
}

.app-header .user-name {
  color: #ffffff !important;
}

.app-header .user-role {
  color: rgba(255,255,255,.64) !important;
}

.app-header .logout-button {
  color: #ffffff !important;
}


/* =========================================================
   2. HERO
   ========================================================= */

.hero-section h1 {
  color: #ffffff !important;

  text-shadow:
    0 2px 18px rgba(0,0,0,.16);
}

.hero-section p {
  color: rgba(255,255,255,.80) !important;
}

.hero-section,
.hero-section * {
  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   3. SEARCH / DARK TOOLBARS
   ========================================================= */

.global-search {
  color: #ffffff;
}

.global-search input {
  color: #ffffff !important;
}

.global-search input::placeholder {
  color: rgba(255,255,255,.58) !important;
}

.search-icon {
  color: rgba(255,255,255,.76) !important;
}


/* =========================================================
   4. FILTER BAR ON NAVY
   ========================================================= */

.module-filter-shell {
  color: #ffffff;
}

.module-filter-shell .filter-meta,
.module-filter-shell .filter-meta span {
  color: rgba(255,255,255,.68) !important;
}

.module-filter-shell .filter-meta strong {
  color: #ffffff !important;
}

.filter-chip:not(.active) {
  color: rgba(255,255,255,.90) !important;
}

.filter-chip.active {
  color: #12366f !important;
}


/* =========================================================
   5. WHITE / LIGHT CARDS
   ========================================================= */

.module-card,
.modal-panel,
.bpmn-canvas-shell,
.bpmn-detail-shell {
  color: #12366f;
}

.module-card h1,
.module-card h2,
.module-card h3,
.module-card strong,
.modal-panel h1,
.modal-panel h2,
.modal-panel h3,
.bpmn-canvas-shell h1,
.bpmn-canvas-shell h2,
.bpmn-canvas-shell h3,
.bpmn-detail-shell h1,
.bpmn-detail-shell h2,
.bpmn-detail-shell h3 {
  color: #0d3477;
}

.module-card p,
.module-card .module-stat span,
.modal-panel p {
  color: #61799f;
}


/* =========================================================
   6. SUMMARY / NAVY SURFACES
   ========================================================= */

.summary-bar,
.summary-bar * {
  color: #ffffff;
}

.summary-bar span {
  color: rgba(255,255,255,.72);
}

.summary-bar strong {
  color: #ffffff;
}


/* =========================================================
   7. FOOTER ON DARK BACKGROUND
   ========================================================= */

.app-footer,
.app-footer span,
.app-footer a {
  color: rgba(255,255,255,.68) !important;
}

.app-footer a:hover {
  color: #ffffff !important;
}


/* =========================================================
   8. BPMN HERO / SUMMARY
   ========================================================= */

.bpmn-liquid-hero,
.bpmn-liquid-hero h1,
.bpmn-liquid-hero h2,
.bpmn-liquid-hero h3,
.bpmn-liquid-hero strong {
  color: #ffffff !important;
}

.bpmn-liquid-hero p,
.bpmn-liquid-hero span {
  color: rgba(255,255,255,.80);
}

.bpmn-summary,
.bpmn-summary strong {
  color: #ffffff !important;
}

.bpmn-summary span {
  color: rgba(255,255,255,.72) !important;
}


/* =========================================================
   9. ACCESSIBILITY / SELECTION
   ========================================================= */

::selection {
  background: rgba(56,154,255,.42);
  color: #ffffff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(114,199,255,.95);
  outline-offset: 3px;
}


/* =========================================================
   10. GENERIC DARK SURFACE HELPERS
   ========================================================= */

.dark-surface,
.dark-surface h1,
.dark-surface h2,
.dark-surface h3,
.dark-surface strong {
  color: #ffffff;
}

.dark-surface p,
.dark-surface span,
.dark-surface small {
  color: rgba(255,255,255,.74);
}

.light-surface,
.light-surface h1,
.light-surface h2,
.light-surface h3,
.light-surface strong {
  color: #103574;
}

.light-surface p,
.light-surface span,
.light-surface small {
  color: #657da4;
}


/* =========================================================
   ATOSY ERP
   APPLE LIQUID LIGHT SURFACE V2
   ========================================================= */

:root {
  --liquid-white:
    rgba(255,255,255,.76);

  --liquid-white-strong:
    rgba(255,255,255,.86);

  --liquid-border:
    rgba(255,255,255,.72);

  --liquid-inner-border:
    rgba(79,151,255,.10);

  --liquid-shadow:
    0 20px 48px rgba(0,29,88,.16);

  --liquid-highlight:
    inset 0 1px 0 rgba(255,255,255,.95);
}


/* =========================================================
   MAJOR LIGHT PANELS
   ========================================================= */

.module-card,
.bpmn-canvas-shell,
.bpmn-detail-shell,
.dashboard-v2-kpi,
.dashboard-v2-card,
.dashboard-v2-panel,
.modal-panel {
  position: relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.88) 0%,
      rgba(247,251,255,.76) 48%,
      rgba(229,240,255,.68) 100%
    ) !important;

  border:
    1px solid
    var(--liquid-border) !important;

  box-shadow:
    var(--liquid-highlight),
    var(--liquid-shadow) !important;

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

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

  overflow:
    hidden;
}


/* ánh sáng liquid phía trên card */

.module-card::before,
.bpmn-canvas-shell::before,
.bpmn-detail-shell::before,
.dashboard-v2-kpi::before,
.dashboard-v2-card::before,
.dashboard-v2-panel::before {
  content: "";

  position: absolute;

  width: 70%;
  height: 85px;

  top: -52px;
  left: 8%;

  border-radius: 50%;

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

  filter:
    blur(22px);

  pointer-events:
    none;

  opacity:
    .66;
}


/* phản chiếu xanh nhẹ cạnh dưới */

.module-card::after,
.bpmn-canvas-shell::after,
.bpmn-detail-shell::after,
.dashboard-v2-card::after,
.dashboard-v2-panel::after {
  content: "";

  position: absolute;

  width: 62%;
  height: 55px;

  right: -15%;
  bottom: -34px;

  border-radius: 50%;

  background:
    rgba(72,153,255,.15);

  filter:
    blur(18px);

  pointer-events:
    none;
}


/* bảo đảm nội dung nằm trên hiệu ứng */

.module-card > *,
.bpmn-canvas-shell > *,
.bpmn-detail-shell > *,
.dashboard-v2-card > *,
.dashboard-v2-panel > *,
.dashboard-v2-kpi > * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   SMALL LIQUID SURFACES
   ========================================================= */

.bpmn-node,
.bpmn-related-card,
.bpmn-detail-stat,
.bpmn-svoa-mini,
.dashboard-v2-mini,
.module-stat {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(232,243,255,.54)
    ) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 20px rgba(12,55,120,.09) !important;

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

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


/* =========================================================
   CLICKABLE SVOA MINI CARDS
   ========================================================= */

.bpmn-svoa-mini {
  cursor: pointer;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.bpmn-svoa-mini:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(82,145,255,.34) !important;

  box-shadow:
    0 12px 25px rgba(18,70,150,.15) !important;
}


/* =========================================================
   LIQUID BUTTONS
   ========================================================= */

.bpmn-tool,
.svoa-child-button,
.filter-chip,
.secondary-button {
  backdrop-filter:
    blur(18px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(170%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 7px 18px rgba(0,36,102,.10);
}


/* =========================================================
   COMING SOON LIQUID DIALOG
   ========================================================= */

#atosy-coming-soon {
  position: fixed;
  inset: 0;

  z-index: 99999;

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

.atosy-coming-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(1,16,44,.40);

  backdrop-filter:
    blur(14px);

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

.atosy-coming-card {
  position: relative;

  z-index: 2;

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

  padding:
    28px;

  border-radius:
    28px;

  text-align:
    center;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.88),
      rgba(227,240,255,.70)
    );

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 28px 80px rgba(0,25,80,.30);

  backdrop-filter:
    blur(34px)
    saturate(180%);

  -webkit-backdrop-filter:
    blur(34px)
    saturate(180%);
}

.atosy-coming-icon {
  width: 62px;
  height: 62px;

  margin:
    0 auto 16px;

  display: flex;

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

  border-radius:
    20px;

  color: #fff;

  font-size:
    27px;

  background:
    linear-gradient(
      135deg,
      #865dff,
      #287eff
    );

  box-shadow:
    0 14px 30px rgba(82,79,235,.30);
}

.atosy-coming-card h2 {
  margin:
    0 0 8px;

  color:
    #123978;
}

.atosy-coming-card p {
  margin:
    0;

  color:
    #687fa5;

  line-height:
    1.55;
}

.atosy-coming-card button {
  margin-top:
    20px;

  min-width:
    120px;

  height:
    42px;

  border:
    0;

  border-radius:
    999px;

  color:
    #fff;

  font-weight:
    800;

  cursor:
    pointer;

  background:
    linear-gradient(
      135deg,
      #188cff,
      #315fff
    );

  box-shadow:
    0 9px 22px rgba(27,99,242,.28);
}


/* =========================================================
   ATOSY ERP
   APPLE LIQUID GLASS V3
   More transparent / reflective / dimensional
   ========================================================= */

:root {
  --glass-bg-top:
    rgba(255,255,255,.72);

  --glass-bg-mid:
    rgba(247,251,255,.58);

  --glass-bg-bottom:
    rgba(221,237,255,.42);

  --glass-border:
    rgba(255,255,255,.82);

  --glass-border-blue:
    rgba(105,173,255,.18);

  --glass-shadow:
    0 18px 45px rgba(0,25,72,.16),
    0 4px 12px rgba(0,35,105,.08);

  --glass-inner:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(90,160,255,.10);
}


/* =========================================================
   1. MAIN GLASS CARDS
   ========================================================= */

.dashboard-v2-card,
.dashboard-v2-panel,
.dashboard-v2-kpi,
.module-card,
.bpmn-canvas-shell,
.bpmn-detail-shell,
.modal-panel {

  position: relative;

  isolation: isolate;

  background:
    linear-gradient(
      145deg,
      var(--glass-bg-top) 0%,
      var(--glass-bg-mid) 46%,
      var(--glass-bg-bottom) 100%
    ) !important;

  border:
    1px solid
    var(--glass-border) !important;

  box-shadow:
    var(--glass-inner),
    var(--glass-shadow) !important;

  backdrop-filter:
    blur(34px)
    saturate(185%)
    brightness(1.05);

  -webkit-backdrop-filter:
    blur(34px)
    saturate(185%)
    brightness(1.05);

  overflow: hidden;
}


/* =========================================================
   2. TOP SPECULAR REFLECTION
   ========================================================= */

.dashboard-v2-card::before,
.dashboard-v2-panel::before,
.dashboard-v2-kpi::before,
.module-card::before,
.bpmn-canvas-shell::before,
.bpmn-detail-shell::before {

  content: "";

  position: absolute;

  z-index: 0;

  width: 78%;
  height: 58%;

  left: -8%;
  top: -36%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.38) 38%,
      rgba(255,255,255,0) 72%
    );

  filter: blur(15px);

  opacity: .78;

  pointer-events: none;
}


/* =========================================================
   3. BLUE EDGE REFRACTION
   ========================================================= */

.dashboard-v2-card::after,
.dashboard-v2-panel::after,
.dashboard-v2-kpi::after,
.module-card::after,
.bpmn-canvas-shell::after,
.bpmn-detail-shell::after {

  content: "";

  position: absolute;

  z-index: 0;

  width: 55%;
  height: 42%;

  right: -20%;
  bottom: -24%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(67,142,255,.23),
      rgba(67,142,255,.08) 45%,
      transparent 72%
    );

  filter: blur(17px);

  opacity: .68;

  pointer-events: none;
}


/* =========================================================
   4. CONTENT ABOVE GLASS EFFECTS
   ========================================================= */

.dashboard-v2-card > *,
.dashboard-v2-panel > *,
.dashboard-v2-kpi > *,
.module-card > *,
.bpmn-canvas-shell > *,
.bpmn-detail-shell > * {

  position: relative;
  z-index: 2;
}


/* =========================================================
   5. KPI CARDS - MORE TRANSPARENT
   ========================================================= */

.dashboard-v2-kpi {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.65),
      rgba(232,242,255,.44)
    ) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 14px 32px rgba(0,31,90,.13) !important;
}


/* =========================================================
   6. BIG FUNCTION CARDS
   ========================================================= */

.dashboard-v2-card {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.69),
      rgba(241,248,255,.53) 52%,
      rgba(222,238,255,.40)
    ) !important;

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

  transition:
    transform 180ms cubic-bezier(.2,.8,.2,1),
    box-shadow 180ms cubic-bezier(.2,.8,.2,1),
    background 180ms ease,
    border-color 180ms ease;
}


.dashboard-v2-card:hover {

  transform:
    translateY(-5px)
    scale(1.008);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(240,248,255,.61),
      rgba(219,237,255,.47)
    ) !important;

  border-color:
    rgba(255,255,255,.96) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(73,148,255,.12),
    0 24px 55px rgba(0,30,92,.21),
    0 5px 14px rgba(0,55,140,.08) !important;
}


/* =========================================================
   7. INNER MINI CARDS
   ========================================================= */

.dashboard-v2-mini,
.bpmn-detail-stat,
.bpmn-related-card,
.bpmn-svoa-mini,
.module-stat {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.58),
      rgba(238,247,255,.35)
    ) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 5px 15px rgba(8,48,108,.07) !important;

  backdrop-filter:
    blur(22px)
    saturate(170%);

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


/* =========================================================
   8. ICON GLASS
   ========================================================= */

.dashboard-v2-card-icon,
.dashboard-v2-kpi-icon,
.module-icon,
.bpmn-canvas-heading-icon {

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 9px 20px rgba(0,50,130,.16);
}


/* =========================================================
   9. SUBTLE GLASS NOISE-LIKE LIGHT
   ========================================================= */

.dashboard-v2-card,
.dashboard-v2-panel,
.dashboard-v2-kpi {

  background-image:
    linear-gradient(
      145deg,
      rgba(255,255,255,.70),
      rgba(241,248,255,.50) 52%,
      rgba(220,237,255,.40)
    ),
    radial-gradient(
      circle at 20% 0%,
      rgba(255,255,255,.35),
      transparent 35%
    ) !important;
}


/* =========================================================
   10. TYPOGRAPHY ON GLASS
   ========================================================= */

.dashboard-v2-card h3,
.dashboard-v2-panel h3,
.dashboard-v2-kpi strong {

  color: #0c377d !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.65);
}


.dashboard-v2-card p,
.dashboard-v2-mini span,
.dashboard-v2-kpi small {

  color:
    rgba(56,83,127,.76) !important;
}


/* =========================================================
   11. ROUNDED LIQUID FEEL
   ========================================================= */

.dashboard-v2-card {
  border-radius: 28px !important;
}

.dashboard-v2-panel {
  border-radius: 27px !important;
}

.dashboard-v2-kpi {
  border-radius: 24px !important;
}

.dashboard-v2-mini {
  border-radius: 17px !important;
}


/* =========================================================
   12. NAVY MODE - STRONGER GLASS TRANSPARENCY
   ========================================================= */

html[data-atosy-theme="navy"]
.dashboard-v2-card,

html[data-atosy-theme="navy"]
.dashboard-v2-panel,

html[data-atosy-theme="navy"]
.dashboard-v2-kpi {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.19),
      rgba(111,170,255,.10)
    ) !important;

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

  color: #fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 22px 50px rgba(0,15,55,.26) !important;
}



/* =========================================================
   ATOSY DARK LIQUID GLASS OVERRIDE
   Mục tiêu: đổi card trắng sữa -> liquid glass xanh đậm trong suốt
   ========================================================= */

/* ===== NỀN TỔNG ===== */
html, body {
  background:
    radial-gradient(1200px 780px at 82% 18%, rgba(43, 128, 255, 0.30), transparent 58%),
    radial-gradient(900px 600px at 22% 10%, rgba(72, 210, 255, 0.14), transparent 55%),
    radial-gradient(760px 480px at 70% 88%, rgba(72, 104, 255, 0.12), transparent 50%),
    linear-gradient(135deg, #041736 0%, #072b67 38%, #0d56cb 100%) !important;
  background-attachment: fixed !important;
}


/* ===== KHỐI HERO / SEARCH / PANEL LỚN ===== */
.dashboard-v2-hero,
.dashboard-v2-search,
.dashboard-v2-panel,
.bpmn-canvas-shell,
.bpmn-detail-shell,
.module-card,
.dashboard-v2-card,
.dashboard-v2-kpi {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(17, 41, 95, 0.30) 0%,
      rgba(11, 28, 70, 0.42) 52%,
      rgba(8, 20, 52, 0.52) 100%
    ) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.17),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 18px 50px rgba(2, 12, 44, 0.34),
    0 0 28px rgba(38, 132, 255, 0.08) !important;

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


/* ===== PHẢN CHIẾU KÍNH PHÍA TRÊN ===== */
.dashboard-v2-hero::before,
.dashboard-v2-search::before,
.dashboard-v2-panel::before,
.bpmn-canvas-shell::before,
.bpmn-detail-shell::before,
.module-card::before,
.dashboard-v2-card::before,
.dashboard-v2-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      120% 75% at 15% 0%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.10) 22%,
      rgba(255,255,255,0.03) 42%,
      rgba(255,255,255,0.00) 62%
    );
}


/* ===== ÁNH XANH / TÍM Ở GÓC DƯỚI ===== */
.dashboard-v2-hero::after,
.dashboard-v2-search::after,
.dashboard-v2-panel::after,
.bpmn-canvas-shell::after,
.bpmn-detail-shell::after,
.module-card::after,
.dashboard-v2-card::after,
.dashboard-v2-kpi::after {
  content: "";
  position: absolute;
  width: 58%;
  height: 58%;
  right: -16%;
  bottom: -22%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(84, 142, 255, 0.18) 0%,
      rgba(113, 78, 255, 0.09) 42%,
      rgba(255,255,255,0.00) 72%
    );

  filter: blur(18px);
}


/* ===== CHO CONTENT NẰM TRÊN CÁC LỚP GLASS ===== */
.dashboard-v2-hero > *,
.dashboard-v2-search > *,
.dashboard-v2-panel > *,
.bpmn-canvas-shell > *,
.bpmn-detail-shell > *,
.module-card > *,
.dashboard-v2-card > *,
.dashboard-v2-kpi > * {
  position: relative;
  z-index: 2;
}


/* ===== CARD NHỎ / BOX TRONG CARD ===== */
.dashboard-v2-mini,
.module-stat,
.bpmn-detail-stat,
.bpmn-related-card,
.dashboard-v2-card .mini-card,
.dashboard-v2-card .stat-card,
.dashboard-v2-card .inner-card,
.dashboard-v2-card .sub-card,
.dashboard-v2-kpi .mini-card,
.dashboard-v2-kpi .stat-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.06) 100%
    ) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 8px 22px rgba(0,0,0,0.16) !important;

  backdrop-filter: blur(18px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
}


/* ===== TEXT: TRẮNG / XANH NHẠT RÕ RÀNG ===== */
.dashboard-v2-hero h1,
.dashboard-v2-hero h2,
.dashboard-v2-panel h1,
.dashboard-v2-panel h2,
.dashboard-v2-panel h3,
.dashboard-v2-card h2,
.dashboard-v2-card h3,
.dashboard-v2-card h4,
.dashboard-v2-kpi h2,
.dashboard-v2-kpi h3,
.dashboard-v2-kpi strong,
.module-card h2,
.module-card h3,
.bpmn-canvas-shell h2,
.bpmn-canvas-shell h3,
.bpmn-detail-shell h2,
.bpmn-detail-shell h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.dashboard-v2-hero p,
.dashboard-v2-panel p,
.dashboard-v2-card p,
.dashboard-v2-kpi p,
.dashboard-v2-kpi span,
.dashboard-v2-kpi small,
.module-card p,
.module-card span,
.bpmn-canvas-shell p,
.bpmn-detail-shell p {
  color: rgba(228, 236, 255, 0.78) !important;
}


/* ===== SỐ LIỆU KPI NỔI HƠN ===== */
.dashboard-v2-kpi .value,
.dashboard-v2-kpi .number,
.dashboard-v2-kpi strong,
.dashboard-v2-card .value,
.dashboard-v2-card .number {
  color: #ffffff !important;
  font-weight: 800 !important;
}


/* ===== CHIP / TAG / PILL ===== */
.dashboard-v2-card .chip,
.dashboard-v2-card .tag,
.dashboard-v2-card .pill,
.dashboard-v2-card .badge,
.dashboard-v2-panel .chip,
.dashboard-v2-panel .tag,
.dashboard-v2-panel .pill,
.module-card .chip,
.module-card .tag,
.module-card .pill,
.bpmn-canvas-shell .chip,
.bpmn-canvas-shell .tag,
.bpmn-detail-shell .chip,
.bpmn-detail-shell .tag {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(243,247,255,0.96) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}


/* ===== NÚT TRONG GIAO DIỆN GLASS ===== */
.dashboard-v2-card button,
.dashboard-v2-panel button,
.module-card button,
.bpmn-canvas-shell button,
.bpmn-detail-shell button {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 24px rgba(0,0,0,0.18) !important;
}


/* ===== HOVER: NHẸ, SANG, KHÔNG NHẢY QUÁ ĐÀ ===== */
.dashboard-v2-card,
.dashboard-v2-kpi,
.module-card,
.bpmn-canvas-shell,
.bpmn-detail-shell {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.dashboard-v2-card:hover,
.dashboard-v2-kpi:hover,
.module-card:hover,
.bpmn-canvas-shell:hover,
.bpmn-detail-shell:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 24px 58px rgba(2, 12, 44, 0.42),
    0 0 34px rgba(62, 142, 255, 0.12) !important;
}


/* ===== HERO TITLE NỔI HƠN ===== */
.dashboard-v2-hero,
.dashboard-v2-hero * {
  color: #ffffff;
}

.dashboard-v2-hero p,
.dashboard-v2-hero .subtitle,
.dashboard-v2-hero .desc {
  color: rgba(232, 239, 255, 0.80) !important;
}


/* ===== SEARCH BOX CŨNG PHẢI GLASS ===== */
input,
select,
textarea,
.search-box,
.dashboard-v2-search input,
.dashboard-v2-search select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(228,236,255,0.58) !important;
}


/* ===== NẾU CÒN KHỐI NÀO TRẮNG BỆCH THÌ ÉP MÀU LẠI ===== */
[style*="background: white"],
[style*="background-color: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
  background-color: rgba(255,255,255,0.08) !important;
}


/* ===== BO GÓC SANG HƠN ===== */
.dashboard-v2-kpi { border-radius: 26px !important; }
.dashboard-v2-card { border-radius: 30px !important; }
.dashboard-v2-panel,
.bpmn-canvas-shell,
.bpmn-detail-shell,
.module-card { border-radius: 28px !important; }