/* ============================================================ ATOSY ERP — SVOA MENU V3 SINGLE SOURCE OF TRUTH S = Blue V = Purple O = Green A = Orange ============================================================ */ /* ------------------------------------------------------------ TRANSITION ------------------------------------------------------------ */ .atosy-svoa-parent { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; cursor: pointer; } /* ------------------------------------------------------------ DEFAULT PARENT ------------------------------------------------------------ */ .atosy-svoa-parent { background: linear-gradient( 145deg, rgba(40,72,126,.48), rgba(18,44,94,.58) ) !important; border: 1px solid rgba(150,190,240,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 20px rgba(0,15,48,.10) !important; transform: none !important; } /* ------------------------------------------------------------ S — BLUE ------------------------------------------------------------ */ .atosy-svoa-parent[data-atosy-group="s"]:hover, .atosy-svoa-parent[data-atosy-group="s"].is-atosy-hover { background: linear-gradient( 145deg, rgba(42,106,190,.72), rgba(20,61,128,.72) ) !important; border-color: rgba(87,170,255,.84) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(54,146,255,.12), 0 13px 30px rgba(47,140,255,.30) !important; transform: translateY(-2px) !important; } /* ------------------------------------------------------------ V — PURPLE ------------------------------------------------------------ */ .atosy-svoa-parent[data-atosy-group="v"]:hover, .atosy-svoa-parent[data-atosy-group="v"].is-atosy-hover { background: linear-gradient( 145deg, rgba(112,72,188,.78), rgba(61,40,137,.78) ) !important; border-color: rgba(196,137,255,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(158,94,255,.15), 0 13px 32px rgba(145,82,255,.35) !important; transform: translateY(-2px) !important; } /* ------------------------------------------------------------ O — GREEN ------------------------------------------------------------ */ .atosy-svoa-parent[data-atosy-group="o"]:hover, .atosy-svoa-parent[data-atosy-group="o"].is-atosy-hover { background: linear-gradient( 145deg, rgba(25,114,107,.72), rgba(16,70,101,.73) ) !important; border-color: rgba(82,231,171,.84) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(40,211,143,.13), 0 13px 30px rgba(35,207,139,.30) !important; transform: translateY(-2px) !important; } /* ------------------------------------------------------------ A — ORANGE ------------------------------------------------------------ */ .atosy-svoa-parent[data-atosy-group="a"]:hover, .atosy-svoa-parent[data-atosy-group="a"].is-atosy-hover { background: linear-gradient( 145deg, rgba(133,79,91,.72), rgba(53,48,109,.74) ) !important; border-color: rgba(255,171,112,.86) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(255,139,82,.13), 0 13px 30px rgba(255,128,73,.30) !important; transform: translateY(-2px) !important; } /* ============================================================ ATOSY ERP — SVOA SINGLE CONTROLLER ============================================================ */ #atosy-svoa-single-submenu { position: relative !important; width: calc(100% - 32px) !important; margin: 10px 16px 14px !important; padding: 14px 18px 16px !important; border-radius: 20px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, .080), rgba(255, 255, 255, .035) ) !important; border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 45px rgba(0, 19, 65, .18) !important; backdrop-filter: blur(24px) saturate(145%) !important; -webkit-backdrop-filter: blur(24px) saturate(145%) !important; box-sizing: border-box !important; } .atosy-svoa-single-title { margin-bottom: 10px !important; color: rgba(220, 232, 255, .72) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .075em !important; text-transform: uppercase !important; } .atosy-svoa-single-items { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 9px !important; } .atosy-svoa-single-item { appearance: none !important; min-height: 38px !important; padding: 8px 17px !important; border-radius: 999px !important; border: 1px solid rgba(129, 184, 255, .34) !important; background: linear-gradient( 180deg, rgba(70, 133, 228, .23), rgba(30, 77, 151, .20) ) !important; color: #fff !important; font: inherit !important; font-size: 14px !important; font-weight: 750 !important; cursor: pointer !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important; } .atosy-svoa-single-item:hover { transform: translateY(-1px) scale(1.025) !important; border-color: var(--svoa-accent) !important; background: color-mix( in srgb, var(--svoa-accent) 24%, rgba(24, 65, 135, .42) ) !important; box-shadow: 0 0 0 1px color-mix( in srgb, var(--svoa-accent) 45%, transparent ), 0 7px 25px var(--svoa-glow), inset 0 1px 0 rgba(255,255,255,.16) !important; } /* TASK738: preview is transient; route selection belongs to the header. */ #atosy-svoa-popover .svoa-primary-card {min-width:0;box-sizing:border-box;} #atosy-svoa-popover .svoa-primary-card.atosy-svoa-card-hover { border-color:var(--svoa-card-accent);box-shadow:0 0 0 1px var(--svoa-card-accent),0 0 24px var(--svoa-card-glow);transform:translateY(-2px); } #atosy-svoa-popover :is(.svoa-primary-card,.atosy-svoa-single-item):focus-visible {outline:2px solid #85e6ff!important;outline-offset:2px;} #atosy-svoa-popover .atosy-svoa-single-item {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px!important;box-sizing:border-box;max-width:100%;} #atosy-svoa-popover :is(.svoa-primary-card,.atosy-svoa-single-item):active, #atosy-svoa-popover .atosy-svoa-card-pressed, #atosy-svoa-popover .atosy-svoa-submenu-pressed {transform:translateY(1px) scale(.985)!important;filter:brightness(1.12);} #atosy-svoa-popover :is(button:disabled,[aria-disabled="true"]) {opacity:.45;cursor:not-allowed;} /* ========================================================== T173 — SVOA COLD START FIRST-PAINT GUARD navigation.js vẫn còn legacy child-menu để giữ compatibility. Nhưng UI mới chỉ được phép dùng #atosy-svoa-single-submenu. Vì CSS được parse trước JS, legacy panel sẽ không bao giờ flash lên ở cold start / Electron first launch. ========================================================== */ #atosy-svoa-popover .svoa-child-menu, #atosy-svoa-popover .svoa-mega-menu, #atosy-svoa-popover .svoa-dropdown-panel { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* * Canonical submenu mới luôn được phép hiển thị. */ #atosy-svoa-popover #atosy-svoa-single-submenu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* T173 END */ /* ATOSY_553A_SVOA_ARROW_ALIGNMENT */ #atosy-nav-svoa { display: inline-flex; align-items: center; justify-content: center; column-gap: 7px; } #atosy-nav-svoa > span:last-child { position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; vertical-align: middle; } /* END ATOSY_553A_SVOA_ARROW_ALIGNMENT */ /* TASK670: immediate header feedback; retain all existing visual values/geometry. */ #atosy-nav-svoa, #atosy-svoa-popover, #atosy-svoa-popover [data-svoa-primary], #atosy-svoa-popover #atosy-svoa-single-submenu, #atosy-svoa-popover .atosy-svoa-single-item { transition: none !important; } #atosy-svoa-popover [data-svoa-cached-group] { display: contents; } #atosy-svoa-popover [data-svoa-cached-group][hidden] { display: none !important; }