/* ui-core.css */ /* Notifications / Toasts */ #toast-container { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; pointer-events: none; } .ui-toast { pointer-events: auto; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: white; padding: 0.75rem 1.5rem; border-radius: 1.25rem; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); transform: translateY(-2rem); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .ui-toast.show { transform: translateY(0); opacity: 1; } .ui-toast.ui-toast-error { background: rgba(220, 38, 38, 0.95); border-color: rgba(255, 255, 255, 0.2); } .ui-toast.ui-toast-success { background: rgba(5, 150, 105, 0.95); border-color: rgba(255, 255, 255, 0.2); } .ui-toast.ui-toast-info { background: rgba(37, 99, 235, 0.9); border-color: rgba(255, 255, 255, 0.2); } /* Loading States */ .loading-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; top: calc(50% - 0.625rem); left: calc(50% - 0.625rem); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: currentColor; border-top-color: #fff; animation: spin 0.8s linear infinite; } /* Switch Toggle */ .ui-switch { appearance: none; width: 2.75rem; height: 1.5rem; background-color: #cbd5e1; border-radius: 9999px; position: relative; cursor: pointer; outline: none; transition: background-color 0.2s; flex-shrink: 0; } .ui-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background-color: white; border-radius: 50%; transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .ui-switch:checked { background-color: #0F172A; } .ui-switch:checked::after { transform: translateX(1.25rem); } .ui-switch.ui-switch-sage:checked { background-color: #739072; } /* Skeleton */ @keyframes ui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .ui-skeleton { animation: ui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; background-color: #e2e8f0; border-radius: 0.375rem; } /* Tooltip */ [data-tooltip] { position: relative; cursor: help; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95); background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(4px); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.2s; z-index: 50; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } /* Modal / Drawer Backdrops */ .ui-drawer-overlay { background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); } /* TinyMCE WYSIWYG: keep floating toolbar/menus inside page drawer modals */ /* TinyMCE appends .tox-tinymce-aux to for dropdowns — normalize its z-index so it stays below truly-top-level modals (z-100000) but above most page content. Page drawers are z-[100], so 200 lets TinyMCE menus work inside them while not stamping over confirm dialogs or toasts. */ body > .tox.tox-tinymce-aux { z-index: 200 !important; } /* Ensure TinyMCE sticky toolbars inside hidden wizard steps are clipped */ .hidden .tox-tinymce, [style*="display: none"] .tox-tinymce { visibility: hidden !important; position: absolute !important; pointer-events: none !important; } /* Combobox Custom Scrollbar */ .ui-combobox-list::-webkit-scrollbar { width: 6px; } .ui-combobox-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }