<div>

[user1100007]

<script type="module"> import { createHotContext } from "/@vite/client"; const hot = createHotContext("/__dummy__runtime-error-plugin");

function sendError(error) {
if (!(error instanceof Error)) {
error = new Error("(unknown runtime error)");
}
const serialized = {
message: error.message,
stack: error.stack,
};
hot.send("runtime-error-plugin:error", serialized);
}

window.addEventListener("error", (evt) => {
sendError(evt.error);
});

window.addEventListener("unhandledrejection", (evt) => {
sendError(evt.reason);
});
</script>

<script type="module">import { injectIntoGlobalHook } from "/@react-refresh";

injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>

<script type="module" src="/@vite/client"></script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&amp;family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=Fira+Code:wght@300..700&amp;family=Geist+Mono:wght@100..900&amp;family=Geist:wght@100..900&amp;family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&amp;family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&amp;family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&amp;family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&amp;family=Lora:ital,wght@0,400..700;1,400..700&amp;family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&amp;family=Montserrat:ital,wght@0,100..900;1,100..900&amp;family=Open+Sans:ital,wght@0,300..800;1,300..800&amp;family=Outfit:wght@100..900&amp;family=Oxanium:wght@200..800&amp;family=Playfair+Display:ital,wght@0,400..900;1,400..900&amp;family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;family=Roboto:ital,wght@0,100..900;1,100..900&amp;family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&amp;family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;family=Space+Grotesk:wght@300..700&amp;family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
<script type="module">"use strict";(()=>{var P="0.4.4";var v={HIGHLIGHT_COLOR:"#0079F2",HIGHLIGHT_BG:"#0079F210",ALLOWED_DOMAIN:".replit.dev",THEME_PREVIEW_STYLE_ID:"replit-theme-preview",MAX_SIBLING_HIGHLIGHTERS:1e3,MAX_DESCENDANTS_FOR_SCREENSHOT:1500},Z=`

[contenteditable] {
outline: none !important;
}

[contenteditable]:focus {
outline: none !important;
}
,ee=
.beacon-highlighter {
content: '';
position: absolute;
z-index: ${Number.MAX_SAFE_INTEGER-3};
box-sizing: border-box;
pointer-events: none;
outline: 2px dashed ${v.HIGHLIGHT_COLOR} !important;
outline-offset: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
background: ${v.HIGHLIGHT_BG} !important;
opacity: 0;
}

.beacon-hover-highlighter {
position: fixed;
z-index: ${Number.MAX_SAFE_INTEGER};
}

.beacon-selected-highlighter {
position: fixed;
pointer-events: none;
outline: 2px solid ${v.HIGHLIGHT_COLOR} !important;
outline-offset: 3px !important;
background: none !important;
}

.beacon-label {
position: absolute;
background-color: ${v.HIGHLIGHT_COLOR};
color: #FFFFFF;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
font-family: monospace;
line-height: 1;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transform: translateY(-100%);
margin-top: -4px;
left: 0;
z-index: ${Number.MAX_SAFE_INTEGER-2};
pointer-events: none;
opacity: 0;
}

.beacon-hover-label {
position: fixed;
z-index: ${Number.MAX_SAFE_INTEGER};
}

.beacon-selected-label {
position: fixed;
pointer-events: none;
}

.beacon-sibling-highlighter {
position: fixed;
pointer-events: none;
outline: 2px dashed ${v.HIGHLIGHT_COLOR} !important;
outline-offset: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
background: ${v.HIGHLIGHT_BG} !important;
}
;function Me(e,i){return e[13]=1,e[14]=i>>8,e[15]=i&255,e[16]=i>>8,e[17]=i&255,e}var le=112,ae=72,ce=89,he=115,G;function Re(){let e=new Int32Array(256);for(let i=0;i<256;i++){let t=i;for(let n=0;n<8;n++)t=t&1?3988292384^t>>>1:t>>>1;e[i]=t}return e}function De(e){let i=-1;G||(G=Re());for(let t=0;t<e.length;t++)i=G[(i^e[t])&255]^i>>>8;return i^-1}function Oe(e){let i=e.length-1;for(let t=i;t>=4;t--)if(e[t-4]===9&&e[t-3]===le&&e[t-2]===ae&&e[t-1]===ce&&e[t]===he)return t-3;return 0}function Pe(e,i,t=!1){let n=new Uint8Array(13);i*=39.3701,n[0]=le,n[1]=ae,n[2]=ce,n[3]=he,n[4]=i>>>24,n[5]=i>>>16,n[6]=i>>>8,n[7]=i&255,n[8]=n[4],n[9]=n[5],n[10]=n[6],n[11]=n[7],n[12]=1;let s=De(n),r=new Uint8Array(4);if(r[0]=s>>>24,r[1]=s>>>16,r[2]=s>>>8,r[3]=s&255,t){let l=Oe(e);return e.set(n,l),e.set(r,l+13),e}else{let l=new Uint8Array(4);l[0]=0,l[1]=0,l[2]=0,l[3]=9;let o=new Uint8Array(54);return o.set(e,0),o.set(l,33),o.set(n,37),o.set(r,50),o}}var de="[modern-screenshot]",H=typeof window<"u",Fe=H&&"Worker"in window,ke=H&&"atob"in window,Yt=H&&"btoa"in window,V=H?window.navigator?.userAgent:"",ue=V.includes("Chrome"),F=V.includes("AppleWebKit")&&!ue,j=V.includes("Firefox"),Ue=e=>e&&"__CONTEXT__"in e,$e=e=>e.constructor.name==="CSSFontFaceRule",Be=e=>e.constructor.name==="CSSImportRule",S=e=>e.nodeType===1,N=e=>typeof e.className=="object",ge=e=>e.tagName==="image",Ge=e=>e.tagName==="use",x=e=>S(e)&&typeof e.style<"u"&&!N(e),We=e=>e.nodeType===8,Ve=e=>e.nodeType===3,L=e=>e.tagName==="IMG",k=e=>e.tagName==="VIDEO",je=e=>e.tagName==="CANVAS",qe=e=>e.tagName==="TEXTAREA",ze=e=>e.tagName==="INPUT",Xe=e=>e.tagName==="STYLE",Ye=e=>e.tagName==="SCRIPT",Ke=e=>e.tagName==="SELECT",Je=e=>e.tagName==="SLOT",Qe=e=>e.tagName==="IFRAME",Ze=(...e)=>console.warn(de,...e);function et(e){let i=e?.createElement?.("canvas");return i&&(i.height=i.width=1),!!i&&"toDataURL"in i&&!!i.toDataURL("image/webp").includes("image/webp")}var W=e=>e.startsWith("data:");function me(e,i){if(e.match(/^[a-z]+:\/\//i))return e;if(H&&e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i)||!H)return e;let t=U().implementation.createHTMLDocument(),n=t.createElement("base"),s=t.createElement("a");return t.head.appendChild(n),t.body.appendChild(s),i&&(n.href=i),s.href=e,s.href}function U(e){return(e&&S(e)?e?.ownerDocument:e)??window.document}var $="http://www.w3.org/2000/svg";function tt(e,i,t){let n=U(t).createElementNS($,"svg");return n.setAttributeNS(null,"width",e.toString()),n.setAttributeNS(null,"height",i.toString()),n.setAttributeNS(null,"viewBox",0 0 ${e} ${i}),n}function it(e,i){let t=new XMLSerializer().serializeToString(e);return i&&(t=t.replace(/[\u0000-\u0008\v\f\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/gu,"")),data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}}async function nt(e,i="image/png",t=1){try{return await new Promise((n,s)=>{e.toBlob(r=>{r?n(r):s(new Error("Blob is null"))},i,t)})}catch(n){if(ke)return rt(e.toDataURL(i,t));throw n}}function rt(e){let[i,t]=e.split(","),n=i.match(/data:(.+);/)?.[1]??void 0,s=window.atob(t),r=s.length,l=new Uint8Array(r);for(let o=0;o<r;o+=1)l[o]=s.charCodeAt(o);return new Blob([l],{type:n})}function fe(e,i){return new Promise((t,n)=>{let s=new FileReader;s.onload=()=>t(s.result),s.onerror=()=>n(s.error),s.onabort=()=>n(new Error(Failed read blob to ${i})),i==="dataUrl"?s.readAsDataURL(e):i==="arrayBuffer"&&s.readAsArrayBuffer(e)})}var st=e=>fe(e,"dataUrl"),ot=e=>fe(e,"arrayBuffer");function C(e,i){let t=U(i).createElement("img");return t.decoding="sync",t.loading="eager",t.src=e,t}function _(e,i){return new Promise(t=>{let{timeout:n,ownerDocument:s,onError:r,onWarn:l}=i??{},o=typeof e=="string"?C(e,U(s)):e,c=null,h=null;function a(){t(o),c&&clearTimeout(c),h?.()}if(n&&(c=setTimeout(a,n)),k(o)){let d=o.currentSrc||o.src;if(!d)return o.poster?_(o.poster,i).then(t):a();if(o.readyState>=2)return a();let u=a,m=g=>{l?.("Failed video load",d,g),r?.(g),a()};h=()=>{o.removeEventListener("loadeddata",u),o.removeEventListener("error",m)},o.addEventListener("loadeddata",u,{once:!0}),o.addEventListener("error",m,{once:!0})}else{let d=ge(o)?o.href.baseVal:o.currentSrc||o.src;if(!d)return a();let u=async()=>{if(L(o)&&"decode"in o)try{await o.decode()}catch(g){l?.("Failed to decode image, trying to render anyway",o.dataset.originalSrc||d,g)}a()},m=g=>{l?.("Failed image load",o.dataset.originalSrc||d,g),a()};if(L(o)&&o.complete)return u();h=()=>{o.removeEventListener("load",u),o.removeEventListener("error",m)},o.addEventListener("load",u,{once:!0}),o.addEventListener("error",m,{once:!0})}})}async function lt(e,i){x(e)&&(L(e)||k(e)?await _(e,i):await Promise.all(["img","video"].flatMap(t=>Array.from(e.querySelectorAll(t)).map(n=>_(n,i)))))}var pe=function(){let i=0,t=()=>0000${(Math.random()36**4<<0).toString(36)}.slice(-4);return()=>(i+=1,u${t()}${i})}();function be(e){return e?.split(",").map(i=>i.trim().replace(/"|'/g,"").toLowerCase()).filter(Boolean)}var te=0;function at(e){let i=${de}[#${te}];return te++,{time:t=>e&&console.time(${i} ${t}),timeEnd:t=>e&&console.timeEnd(${i} ${t}),warn:(...t)=>e&&Ze(...t)}}function ct(e){return{cache:e?"no-cache":"force-cache"}}async function q(e,i){return Ue(e)?e:ht(e,{...i,autoDestruct:!0})}async function ht(e,i){let{scale:t=1,workerUrl:n,workerNumber:s=1}=i||{},r=!!i?.debug,l=i?.features??!0,o=e.ownerDocument??(H?window.document:void 0),c=e.ownerDocument?.defaultView??(H?window:void 0),h=new Map,a={width:0,height:0,quality:1,type:"image/png",scale:t,backgroundColor:null,style:null,filter:null,maximumCanvasSize:0,timeout:3e4,progress:null,debug:r,fetch:{requestInit:ct(i?.fetch?.bypassingCache),placeholderImage:"data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",bypassingCache:!1,...i?.fetch},fetchFn:null,font:{},drawImageInterval:100,workerUrl:null,workerNumber:s,onCloneNode:null,onEmbedNode:null,onCreateForeignObjectSvg:null,includeStyleProperties:null,autoDestruct:!1,...i,__CONTEXT__:!0,log:at(r),node:e,ownerDocument:o,ownerWindow:c,dpi:t===1?null:96*t,svgStyleElement:Ee(o),svgDefsElement:o?.createElementNS($,"defs"),svgStyles:new Map,defaultComputedStyles:new Map,workers:[...Array.from({length:Fe&&n&&s?s:0})].map(()=>{try{let m=new Worker(n);return m.onmessage=async g=>{let{url:f,result:p}=g.data;p?h.get(f)?.resolve?.(p):h.get(f)?.reject?.(new Error(Error receiving message from worker: ${f}))},m.onmessageerror=g=>{let{url:f}=g.data;h.get(f)?.reject?.(new Error(Error receiving message from worker: ${f}))},m}catch(m){return a.log.warn("Failed to new Worker",m),null}}).filter(Boolean),fontFamilies:new Map,fontCssTexts:new Map,acceptOfImage:${[et(o)&&"image/webp","image/svg+xml","image/","/"].filter(Boolean).join(",")};q=0.8,requests:h,drawImageCount:0,tasks:[],features:l,isEnable:m=>m==="restoreScrollPosition"?typeof l=="boolean"?!1:l[m]??!1:typeof l=="boolean"?l:l[m]??!0};a.log.time("wait until load"),await lt(e,{timeout:a.timeout,onWarn:a.log.warn}),a.log.timeEnd("wait until load");let{width:d,height:u}=dt(e,a);return a.width=d,a.height=u,a}function Ee(e){if(!e)return;let i=e.createElement("style"),t=i.ownerDocument.createTextNode(
.______background-clip--text {
background-clip: text;
-webkit-background-clip: text;
}
);return i.appendChild(t),i}function dt(e,i){let{width:t,height:n}=i;if(S(e)&&(!t||!n)){let s=e.getBoundingClientRect();t=t||s.width||Number(e.getAttribute("width"))||0,n=n||s.height||Number(e.getAttribute("height"))||0}return{width:t,height:n}}async function ut(e,i){let{log:t,timeout:n,drawImageCount:s,drawImageInterval:r}=i;t.time("image to canvas");let l=await _(e,{timeout:n,onWarn:i.log.warn}),{canvas:o,context2d:c}=gt(e.ownerDocument,i),h=()=>{try{c?.drawImage(l,0,0,o.width,o.height)}catch(a){i.log.warn("Failed to drawImage",a)}};if(h(),i.isEnable("fixSvgXmlDecode"))for(let a=0;a<s;a++)await new Promise(d=>{setTimeout(()=>{h(),d()},a+r)});return i.drawImageCount=0,t.timeEnd("image to canvas"),o}function gt(e,i){let{width:t,height:n,scale:s,backgroundColor:r,maximumCanvasSize:l}=i,o=e.createElement("canvas");o.width=Math.floor(t*s),o.height=Math.floor(n*s),o.style.width=${t}px,o.style.height=${n}px,l&&(o.width>l||o.height>l)&&(o.width>l&&o.height>l?o.width>o.height?(o.height*=l/o.width,o.width=l):(o.width*=l/o.height,o.height=l):o.width>l?(o.height*=l/o.width,o.width=l):(o.width*=l/o.height,o.height=l));let c=o.getContext("2d");return c&&r&&(c.fillStyle=r,c.fillRect(0,0,o.width,o.height)),{canvas:o,context2d:c}}function ve(e,i){if(e.ownerDocument)try{let r=e.toDataURL();if(r!=="data:,")return C(r,e.ownerDocument)}catch(r){i.log.warn("Failed to clone canvas",r)}let t=e.cloneNode(!1),n=e.getContext("2d"),s=t.getContext("2d");try{return n&&s&&s.putImageData(n.getImageData(0,0,e.width,e.height),0,0),t}catch(r){i.log.warn("Failed to clone canvas",r)}return t}function mt(e,i){try{if(e?.contentDocument?.body)return z(e.contentDocument.body,i)}catch(t){i.log.warn("Failed to clone iframe",t)}return e.cloneNode(!1)}function ft(e){let i=e.cloneNode(!1);return e.currentSrc&&e.currentSrc!==e.src&&(i.src=e.currentSrc,i.srcset=""),i.loading==="lazy"&&(i.loading="eager"),i}async function pt(e,i){if(e.ownerDocument&&!e.currentSrc&&e.poster)return C(e.poster,e.ownerDocument);let t=e.cloneNode(!1);t.crossOrigin="anonymous",e.currentSrc&&e.currentSrc!==e.src&&(t.src=e.currentSrc);let n=t.ownerDocument;if(n){let s=!0;if(await _(t,{onError:()=>s=!1,onWarn:i.log.warn}),!s)return e.poster?C(e.poster,e.ownerDocument):t;t.currentTime=e.currentTime,await new Promise(l=>{t.addEventListener("seeked",l,{once:!0})});let r=n.createElement("canvas");r.width=e.offsetWidth,r.height=e.offsetHeight;try{let l=r.getContext("2d");l&&l.drawImage(t,0,0,r.width,r.height)}catch(l){return i.log.warn("Failed to clone video",l),e.poster?C(e.poster,e.ownerDocument):t}return ve(r,i)}return t}function bt(e,i){return je(e)?ve(e,i):Qe(e)?mt(e,i):L(e)?ft(e):k(e)?pt(e,i):e.cloneNode(!1)}function Et(e){let i=e.sandbox;if(!i){let{ownerDocument:t}=e;try{t&&(i=t.createElement("iframe"),i.id=SANDBOX-${pe()},i.width="0",i.height="0",i.style.visibility="hidden",i.style.position="fixed",t.body.appendChild(i),i.contentWindow?.document.write('<!DOCTYPE html><meta charset="UTF-8"><title></title><body>'),e.sandbox=i)}catch(n){e.log.warn("Failed to getSandBox",n)}}return i}var vt=["width","height","-webkit-text-fill-color"],wt=["stroke","fill"];function we(e,i,t){let{defaultComputedStyles:n}=t,s=e.nodeName.toLowerCase(),r=N(e)&&s!=="svg",l=r?wt.map(f=>[f,e.getAttribute(f)]).filter(([,f])=>f!==null):[],o=[r&&"svg",s,l.map((f,p)=>${f}=${p}).join(","),i].filter(Boolean).join(":");if(n.has(o))return n.get(o);let h=Et(t)?.contentWindow;if(!h)return new Map;let a=h?.document,d,u;r?(d=a.createElementNS($,"svg"),u=d.ownerDocument.createElementNS(d.namespaceURI,s),l.forEach(([f,p])=>{u.setAttributeNS(null,f,p)}),d.appendChild(u)):d=u=a.createElement(s),u.textContent=" ",a.body.appendChild(d);let m=h.getComputedStyle(u,i),g=new Map;for(let f=m.length,p=0;p<f;p++){let b=m.item(p);vt.includes(b)||g.set(b,m.getPropertyValue(b))}return a.body.removeChild(d),n.set(o,g),g}function ye(e,i,t){let n=new Map,s=[],r=new Map;if(t)for(let o of t)l(o);else for(let o=e.length,c=0;c<o;c++){let h=e.item(c);l(h)}for(let o=s.length,c=0;c<o;c++)r.get(s[c])?.forEach((h,a)=>n.set(a,h));function l(o){let c=e.getPropertyValue(o),h=e.getPropertyPriority(o),a=o.lastIndexOf("-"),d=a>-1?o.substring(0,a):void 0;if(d){let u=r.get(d);u||(u=new Map,r.set(d,u)),u.set(o,[c,h])}i.get(o)===c&&!h||(d?s.push(d):n.set(o,[c,h]))}return n}function yt(e,i,t,n){let{ownerWindow:s,includeStyleProperties:r,currentParentNodeStyle:l}=n,o=i.style,c=s.getComputedStyle(e),h=we(e,null,n);l?.forEach((d,u)=>{h.delete(u)});let a=ye(c,h,r);a.delete("transition-property"),a.delete("all"),a.delete("d"),a.delete("content"),t&&(a.delete("margin-top"),a.delete("margin-right"),a.delete("margin-bottom"),a.delete("margin-left"),a.delete("margin-block-start"),a.delete("margin-block-end"),a.delete("margin-inline-start"),a.delete("margin-inline-end"),a.set("box-sizing",["border-box",""])),a.get("background-clip")?.[0]==="text"&&i.classList.add("______background-clip--text"),ue&&(a.has("font-kerning")||a.set("font-kerning",["normal",""]),(a.get("overflow-x")?.[0]==="hidden"||a.get("overflow-y")?.[0]==="hidden")&&a.get("text-overflow")?.[0]==="ellipsis"&&e.scrollWidth===e.clientWidth&&a.set("text-overflow",["clip",""]));for(let d=o.length,u=0;u<d;u++)o.removeProperty(o.item(u));return a.forEach(([d,u],m)=>{o.setProperty(m,d,u)}),a}function St(e,i){(qe(e)||ze(e)||Ke(e))&&i.setAttribute("value",e.value)}var Tt=[":before",":after"],At=[":-webkit-scrollbar",":-webkit-scrollbar-button",":-webkit-scrollbar-thumb",":-webkit-scrollbar-track",":-webkit-scrollbar-track-piece",":-webkit-scrollbar-corner",":-webkit-resizer"];function Ht(e,i,t,n,s){let{ownerWindow:r,svgStyleElement:l,svgStyles:o,currentNodeStyle:c}=n;if(!l||!r)return;function h(a){let d=r.getComputedStyle(e,a),u=d.getPropertyValue("content");if(!u||u==="none")return;s?.(u),u=u.replace(/(')|(")|(counter\(.+\))/g,"");let m=[pe()],g=we(e,a,n);c?.forEach((E,y)=>{g.delete(y)});let f=ye(d,g,n.includeStyleProperties);f.delete("content"),f.delete("-webkit-locale"),f.get("background-clip")?.[0]==="text"&&i.classList.add("______background-clip--text");let p=[content: '${u}';];if(f.forEach(([E,y],A)=>{p.push(${A}: ${E}${y?" !important":""};)}),p.length===1)return;try{i.className=[i.className,...m].join(" ")}catch(E){n.log.warn("Failed to copyPseudoClass",E);return}let b=p.join(
),w=o.get(b);w||(w=[],o.set(b,w)),w.push(.${m[0]}:${a})}Tt.forEach(h),t&&At.forEach(h)}var ie=new Set(["symbol"]);async function ne(e,i,t,n,s){if(S(t)&&(Xe(t)||Ye(t))||n.filter&&!n.filter(t))return;ie.has(i.nodeName)||ie.has(t.nodeName)?n.currentParentNodeStyle=void 0:n.currentParentNodeStyle=n.currentNodeStyle;let r=await z(t,n,!1,s);n.isEnable("restoreScrollPosition")&&Ct(e,r),i.appendChild(r)}async function re(e,i,t,n){let s=(S(e)?e.shadowRoot?.firstChild:void 0)??e.firstChild;for(let r=s;r;r=r.nextSibling)if(!We(r))if(S(r)&&Je(r)&&typeof r.assignedNodes=="function"){let l=r.assignedNodes();for(let o=0;o<l.length;o++)await ne(e,i,l[o],t,n)}else await ne(e,i,r,t,n)}function Ct(e,i){if(!x(e)||!x(i))return;let{scrollTop:t,scrollLeft:n}=e;if(!t&&!n)return;let{transform:s}=i.style,r=new DOMMatrix(s),{a:l,b:o,c,d:h}=r;r.a=1,r.b=0,r.c=0,r.d=1,r.translateSelf(-n,-t),r.a=l,r.b=o,r.c=c,r.d=h,i.style.transform=r.toString()}function Lt(e,i){let{backgroundColor:t,width:n,height:s,style:r}=i,l=e.style;if(t&&l.setProperty("background-color",t,"important"),n&&l.setProperty("width",${n}px,"important"),s&&l.setProperty("height",${s}px,"important"),r)for(let o in r)l[o]=r[o]}var xt=/^[\w-:]+$/;async function z(e,i,t=!1,n){let{ownerDocument:s,ownerWindow:r,fontFamilies:l}=i;if(s&&Ve(e))return n&&/\S/.test(e.data)&&n(e.data),s.createTextNode(e.data);if(s&&r&&S(e)&&(x(e)||N(e))){let c=await bt(e,i);if(i.isEnable("removeAbnormalAttributes")){let g=c.getAttributeNames();for(let f=g.length,p=0;p<f;p++){let b=g[p];xt.test(b)||c.removeAttribute(b)}}let h=i.currentNodeStyle=yt(e,c,t,i);t&&Lt(c,i);let a=!1;if(i.isEnable("copyScrollbar")){let g=[h.get("overflow-x")?.[0],h.get("overflow-y")?.[0]];a=g.includes("scroll")||(g.includes("auto")||g.includes("overlay"))&&(e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth)}let d=h.get("text-transform")?.[0],u=be(h.get("font-family")?.[0]),m=u?g=>{d==="uppercase"?g=g.toUpperCase():d==="lowercase"?g=g.toLowerCase():d==="capitalize"&&(g=g[0].toUpperCase()+g.substring(1)),u.forEach(f=>{let p=l.get(f);p||l.set(f,p=new Set),g.split("").forEach(b=>p.add(b))})}:void 0;return Ht(e,c,a,i,m),St(e,c),k(e)||await re(e,c,i,m),c}let o=e.cloneNode(!1);return await re(e,o,i),o}function _t(e){if(e.ownerDocument=void 0,e.ownerWindow=void 0,e.svgStyleElement=void 0,e.svgDefsElement=void 0,e.svgStyles.clear(),e.defaultComputedStyles.clear(),e.sandbox){try{e.sandbox.remove()}catch(i){e.log.warn("Failed to destroyContext",i)}e.sandbox=void 0}e.workers=[],e.fontFamilies.clear(),e.fontCssTexts.clear(),e.requests.clear(),e.tasks=[]}function It(e){let{url:i,timeout:t,responseType:n,...s}=e,r=new AbortController,l=t?setTimeout(()=>r.abort(),t):void 0;return fetch(i,{signal:r.signal,...s}).then(o=>{if(!o.ok)throw new Error("Failed fetch, not 2xx response",{cause:o});switch(n){case"arrayBuffer":return o.arrayBuffer();case"dataUrl":return o.blob().then(st);case"text":default:return o.text()}}).finally(()=>clearTimeout(l))}function I(e,i){let{url:t,requestType:n="text",responseType:s="text",imageDom:r}=i,l=t,{timeout:o,acceptOfImage:c,requests:h,fetchFn:a,fetch:{requestInit:d,bypassingCache:u,placeholderImage:m},font:g,workers:f,fontFamilies:p}=e;n==="image"&&(F||j)&&e.drawImageCount++;let b=h.get(t);if(!b){u&&u instanceof RegExp&&u.test(l)&&(l+=(/\?/.test(l)?"&":"?")+new Date().getTime());let w=n.startsWith("font")&&g&&g.minify,E=new Set;w&&n.split(";")[1].split(",").forEach(O=>{p.has(O)&&p.get(O).forEach(Q=>E.add(Q))});let y=w&&E.size,A={url:l,timeout:o,responseType:y?"arrayBuffer":s,headers:n==="image"?{accept:c}:void 0,...d};b={type:n,resolve:void 0,reject:void 0,response:null},b.response=(async()=>{if(a&&n==="image"){let T=await a(t);if(T)return T}return!F&&t.startsWith("http")&&f.length?new Promise((T,O)=>{f[h.size&f.length-1].postMessage({rawUrl:t,...A}),b.resolve=T,b.reject=O}):It(A)})().catch(T=>{if(h.delete(t),n==="image"&&m)return e.log.warn("Failed to fetch image base64, trying to use placeholder image",l),typeof m=="string"?m:m(r);throw T}),h.set(t,b)}return b.response}async function Se(e,i,t,n){if(!Te(e))return e;for(let[s,r]of Nt(e,i))try{let l=await I(t,{url:r,requestType:n?"image":"text",responseType:"dataUrl"});e=e.replace(Mt(s),$1${l}$3)}catch(l){t.log.warn("Failed to fetch css data url",s,l)}return e}function Te(e){return/url\((['"]?)([^'"]+?)\1\)/.test(e)}var Ae=/url\((['"]?)([^'"]+?)\1\)/g;function Nt(e,i){let t=[];return e.replace(Ae,(n,s,r)=>(t.push([r,me(r,i)]),n)),t.filter(([n])=>!W(n))}function Mt(e){let i=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp((url\(['"]?)(${i})(['"]?\)),"g")}var Rt=["background-image","border-image-source","-webkit-border-image","-webkit-mask-image","list-style-image"];function Dt(e,i){return Rt.map(t=>{let n=e.getPropertyValue(t);return!n||n==="none"?null:((F||j)&&i.drawImageCount++,Se(n,null,i,!0).then(s=>{!s||n===s||e.setProperty(t,s,e.getPropertyPriority(t))}))}).filter(Boolean)}function Ot(e,i){if(L(e)){let t=e.currentSrc||e.src;if(!W(t))return[I(i,{url:t,imageDom:e,requestType:"image",responseType:"dataUrl"}).then(n=>{n&&(e.srcset="",e.dataset.originalSrc=t,e.src=n||"")})];(F||j)&&i.drawImageCount++}else if(N(e)&&!W(e.href.baseVal)){let t=e.href.baseVal;return[I(i,{url:t,imageDom:e,requestType:"image",responseType:"dataUrl"}).then(n=>{n&&(e.dataset.originalSrc=t,e.href.baseVal=n||"")})]}return[]}function Pt(e,i){let{ownerDocument:t,svgDefsElement:n}=i,s=e.getAttribute("href")??e.getAttribute("xlink:href");if(!s)return[];let[r,l]=s.split("#");if(l){let o=#${l},c=t?.querySelector(svg ${o});if(r&&e.setAttribute("href",o),n?.querySelector(o))return[];if(c)return n?.appendChild(c.cloneNode(!0)),[];if(r)return[I(i,{url:r,responseType:"text"}).then(h=>{n?.insertAdjacentHTML("beforeend",h)})]}return[]}function He(e,i){let{tasks:t}=i;S(e)&&((L(e)||ge(e))&&t.push(...Ot(e,i)),Ge(e)&&t.push(...Pt(e,i))),x(e)&&t.push(...Dt(e.style,i)),e.childNodes.forEach(n=>{He(n,i)})}async function Ft(e,i){let{ownerDocument:t,svgStyleElement:n,fontFamilies:s,fontCssTexts:r,tasks:l,font:o}=i;if(!(!t||!n||!s.size))if(o&&o.cssText){let c=oe(o.cssText,i);n.appendChild(t.createTextNode(${c}
))}else{let c=Array.from(t.styleSheets).filter(a=>{try{return"cssRules"in a&&!!a.cssRules.length}catch(d){return i.log.warn(Error while reading CSS rules from ${a.href},d),!1}});await Promise.all(c.flatMap(a=>Array.from(a.cssRules).map(async(d,u)=>{if(Be(d)){let m=u+1,g=d.href,f="";try{f=await I(i,{url:g,requestType:"text",responseType:"text"})}catch(b){i.log.warn(Error fetch remote css import from ${g},b)}let p=f.replace(Ae,(b,w,E)=>b.replace(E,me(E,g)));for(let b of Ut(p))try{a.insertRule(b,b.startsWith("@import")?m+=1:a.cssRules.length)}catch(w){i.log.warn("Error inserting rule from remote css import",{rule:b,error:w})}}}))),c.flatMap(a=>Array.from(a.cssRules)).filter(a=>$e(a)&&Te(a.style.getPropertyValue("src"))&&be(a.style.getPropertyValue("font-family"))?.some(d=>s.has(d))).forEach(a=>{let d=a,u=r.get(d.cssText);u?n.appendChild(t.createTextNode(${u}
)):l.push(Se(d.cssText,d.parentStyleSheet?d.parentStyleSheet.href:null,i).then(m=>{m=oe(m,i),r.set(d.cssText,m),n.appendChild(t.createTextNode(${m}
))}))})}}var kt=/(\/\*[\s\S]*?\*\/)/g,se=/((@.*?keyframes [\s\S]*?){([\s\S]*?}\s*?)})/gi;function Ut(e){if(e==null)return[];let i=[],t=e.replace(kt,"");for(;;){let r=se.exec(t);if(!r)break;i.push(r[0])}t=t.replace(se,"");let n=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,s=new RegExp("((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})","gi");for(;;){let r=n.exec(t);if(r)s.lastIndex=n.lastIndex;else if(r=s.exec(t),r)n.lastIndex=s.lastIndex;else break;i.push(r[0])}return i}var $t=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,Bt=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function oe(e,i){let{font:t}=i,n=t?t?.preferredFormat:void 0;return n?e.replace(Bt,s=>{for(;;){let[r,,l]=$t.exec(s)||[];if(!l)return"";if(l===n)returnsrc: ${r};}}):e}async function Gt(e,i){let t=await q(e,i);if(S(t.node)&&N(t.node))return t.node;let{ownerDocument:n,log:s,tasks:r,svgStyleElement:l,svgDefsElement:o,svgStyles:c,font:h,progress:a,autoDestruct:d,onCloneNode:u,onEmbedNode:m,onCreateForeignObjectSvg:g}=t;s.time("clone node");let f=await z(t.node,t,!0);if(l&&n){let y="";c.forEach((A,T)=>{y+=${A.join(, )} {
${T}
}
}),l.appendChild(n.createTextNode(y))}s.timeEnd("clone node"),await u?.(f),h!==!1&&S(f)&&(s.time("embed web font"),await Ft(f,t),s.timeEnd("embed web font")),s.time("embed node"),He(f,t);let p=r.length,b=0,w=async()=>{for(;;){let y=r.pop();if(!y)break;try{await y}catch(A){t.log.warn("Failed to run task",A)}a?.(++b,p)}};a?.(b,p),await Promise.all([...Array.from({length:4})].map(w)),s.timeEnd("embed node"),await m?.(f);let E=Wt(f,t);return o&&E.insertBefore(o,E.children[0]),l&&E.insertBefore(l,E.children[0]),d&&_t(t),await g?.(E),E}function Wt(e,i){let{width:t,height:n}=i,s=tt(t,n,e.ownerDocument),r=s.ownerDocument.createElementNS(s.namespaceURI,"foreignObject");return r.setAttributeNS(null,"x","0%"),r.setAttributeNS(null,"y","0%"),r.setAttributeNS(null,"width","100%"),r.setAttributeNS(null,"height","100%"),r.append(e),s.appendChild(r),s}async function Vt(e,i){let t=await q(e,i),n=await Gt(t),s=it(n,t.isEnable("removeControlCharacter"));t.autoDestruct||(t.svgStyleElement=Ee(t.ownerDocument),t.svgDefsElement=t.ownerDocument?.createElementNS($,"defs"),t.svgStyles.clear());let r=C(s,n.ownerDocument);return await ut(r,t)}async function Ce(e,i){let t=await q(e,i),{log:n,type:s,quality:r,dpi:l}=t,o=await Vt(t);n.time("canvas to blob");let c=await nt(o,s,r);if(["image/png","image/jpeg"].includes(s)&&l){let h=await ot(c.slice(0,33)),a=new Uint8Array(h);return s==="image/png"?a=Pe(a,l):s==="image/jpeg"&&(a=Me(a,l)),n.timeEnd("canvas to blob"),new Blob([a,c.slice(33)],{type:s})}return n.timeEnd("canvas to blob"),c}var M={METADATA:"data-replit-metadata",COMPONENT_NAME:"data-component-name"};function Le(e){if(e.startsWith("http://localhost:"))return!0;try{return new URL(e).hostname.endsWith(v.ALLOWED_DOMAIN)}catch{return!1}}function Y(e){if(!e)return null;let i=document.elementFromPoint(e.clientX,e.clientY);return i instanceof HTMLElement?i:null}function jt(e,i=300){if(!e)return"";let t=String(e);return t.length<=i?t:t.slice(0,i)+"..."}function X(e){if(e)return{tagName:e.tagName.toLowerCase(),className:e.className.toString?e.className.toString():String(e.className),textContent:e.textContent??"",id:e.id}}function B(e){let i=e.getAttribute(M.COMPONENT_NAME)??e.tagName.toLowerCase();return jt(i,50)}function K(e){let i=window.getComputedStyle(e),t=e.parentElement,n=e.nextElementSibling,s=t?.parentElement??null,r={backgroundColor:i.backgroundColor,color:i.color,display:i.display,position:i.position,width:i.width,height:i.height,fontSize:i.fontSize,fontFamily:i.fontFamily,fontWeight:i.fontWeight,margin:i.margin,padding:i.padding,textAlign:i.textAlign};return{elementPath:e.getAttribute(M.METADATA)??"",elementName:B(e),textContent:e.textContent??"",originalTextContent:e.getAttribute("data-original-text")?decodeURIComponent(e.getAttribute("data-original-text")??""):void 0,srcAttribute:e.getAttribute("src")??"",hasChildElements:e.childElementCount>0,id:e.id,className:e.className.toString?e.className.toString():String(e.className),computedStyles:r,textAlign:i.textAlign,relatedElements:{parent:X(t),nextSibling:X(n),grandParent:X(s)}}}async function xe(e){try{let t=window.getComputedStyle(e).backgroundColor;return qt(t)&&(t=window.getComputedStyle(document.documentElement).backgroundColor),await Ce(e,{type:"image/png",backgroundColor:t})}catch(i){console.error("[replit-cartographer] Failed to take screenshot:",i);return}}function qt(e){return e==="transparent"||e==="rgba(0, 0, 0, 0)"||e.endsWith(", 0)")||e.endsWith(",0)")}function J(e){let i=e.getBoundingClientRect(),t=window.innerHeight,n=window.innerWidth;return i.bottom>0&&i.top<t&&i.right>0&&i.left<n}function R(e,i=v.MAX_SIBLING_HIGHLIGHTERS,t=!1){let r=e.getAttribute(M.METADATA);if(!r)return[];let l=[${M.METADATA}="${r}"],o=document,c=e.parentElement;c&&c.childElementCount>50&&(o=c);let h=o.querySelectorAll(l),a=Math.min(i,5e3),d=[],u=0;for(let m=0;m<h.length&&u<a;m++){let g=h[m];if(g instanceof HTMLElement&&g!==e){if(t&&!J(g))continue;d.push(g),u++}}return d}function _e(e,i,t){let n=e.children;for(let s=0;s<n.length;s++)if(t.value+=1,t.value>i||_e(n[s],i,t))return!0;return!1}function Ie(e){let i={value:0};return _e(e,v.MAX_DESCENDANTS_FOR_SCREENSHOT,i)}var D=class{selectedElement=null;selectedSiblingElements=[];visibleSelectedSiblingElements=[];isActive=!1;lastHighlightedElement=null;enableEditing=!1;shadowHost=null;shadowRoot=null;hoverHighlighter=null;hoverLabel=null;selectedHighlighter=null;selectedLabel=null;hoverSiblingHighlighters=[];selectedSiblingHighlighters=[];mutationObserver=null;throttledRecalculate=null;constructor(){this.setupMessageListener(),this.observeLightDarkModeSwitch(),this.notifyScriptLoaded(),this.throttledRecalculate=this.throttleRAF(this.recalculateSelectedElement.bind(this))}throttleRAF(i){let t=null,n=null;return(...s)=>{n=s,t===null&&(t=requestAnimationFrame(()=>{n!==null&&i(...n),t=null,n=null}))}}isPureTextElement(i){if(!i||!(i instanceof HTMLElement))return!1;let t=i.tagName.toLowerCase();if(t==="style"||t==="script"||t==="img"||i.childElementCount>0)return!1;let n=i.getAttribute("style");return n&&n.trim()!==""?!1:Array.from(i.childNodes).every(r=>r.nodeType===Node.TEXT_NODE)}initializeHighlighter(){this.shadowHost=document.createElement("div"),this.shadowHost.style.all="initial",this.shadowRoot=this.shadowHost.attachShadow({mode:"open"}),document.body.appendChild(this.shadowHost);let i=document.createElement("style");i.textContent=ee,this.shadowRoot.appendChild(i);let t=document.createElement("style");t.textContent=Z,document.head.appendChild(t),this.hoverHighlighter=document.createElement("div"),this.hoverLabel=document.createElement("div"),this.hoverHighlighter.className="beacon-highlighter beacon-hover-highlighter",this.hoverLabel.className="beacon-label beacon-hover-label",this.selectedHighlighter=document.createElement("div"),this.selectedLabel=document.createElement("div"),this.selectedHighlighter.className="beacon-highlighter beacon-selected-highlighter",this.selectedLabel.className="beacon-label beacon-selected-label",this.shadowRoot.appendChild(this.selectedHighlighter),this.shadowRoot.appendChild(this.selectedLabel),this.shadowRoot.appendChild(this.hoverHighlighter),this.shadowRoot.appendChild(this.hoverLabel)}setupMessageListener(){window.addEventListener("message",this.handleMessage.bind(this))}notifyScriptLoaded(){this.postMessageToParent({type:"SELECTOR_SCRIPT_LOADED",timestamp:Date.now(),version:P})}postMessageToParent(i){window.parent&&window.parent.postMessage(i,"*")}handleMouseMove=i=>{if(this.isActive&&this.hoverHighlighter){let t=Y(i);if(!t||t===this.hoverHighlighter||t===this.selectedHighlighter||t===this.shadowHost||this.selectedSiblingHighlighters.includes(t)||this.hoverSiblingHighlighters.includes(t)){this.hideHighlight(this.hoverHighlighter,this.hoverLabel),this.lastHighlightedElement=null,this.clearHoverSiblingHighlighters();return}if(t===this.selectedElement){this.hideHighlight(this.hoverHighlighter,this.hoverLabel),this.lastHighlightedElement=null,this.clearHoverSiblingHighlighters();return}this.lastHighlightedElement&&this.lastHighlightedElement!==t&&this.lastHighlightedElement!==this.selectedElement&&this.lastHighlightedElement.removeAttribute("contenteditable"),this.lastHighlightedElement=t,this.updateHighlighterPosition(t,this.hoverHighlighter,this.hoverLabel)}};handleMouseLeave=()=>{this.isActive&&(this.hoverHighlighter&&(this.hoverHighlighter.style.opacity="0"),this.hoverLabel&&(this.hoverLabel.style.opacity="0"),this.hoverSiblingHighlighters.length>0&&this.clearHoverSiblingHighlighters(),this.lastHighlightedElement&&this.lastHighlightedElement!==this.selectedElement&&this.lastHighlightedElement.removeAttribute("contenteditable"))};calculateLabelPosition(i,t){return t<28?{top:${t}px,left:${i.left}px,transform:"none",marginTop:"2px"}:{top:${t}px,left:${i.left}px,transform:"translateY(-100%)",marginTop:"-4px"}}updateHighlighterPosition(i,t,n){if(!t||!n)return;let s=R(i,v.MAX_SIBLING_HIGHLIGHTERS,!1);this.enableEditing&&s.length<=1&&i===this.selectedElement&&this.isPureTextElement(i)&&i.setAttribute("contenteditable","plaintext-only");let r=i.getBoundingClientRect(),l=window.innerHeight,o=Math.max(0,r.top),c=Math.min(l,r.bottom),h=Math.max(0,c-o);Object.assign(t.style,{opacity:h>0?"1":"0",top:${o}px,left:${r.left}px,width:${r.width}px,height:${h}px}),n.textContent=B(i);let a=this.calculateLabelPosition(r,o);Object.assign(n.style,{...a,opacity:h>0?"1":"0"}),t===this.selectedHighlighter?this.highlightSelectedSiblings(i):this.highlightHoverSiblings(i)}hideHighlight(i,t){i&&(i.style.opacity="0"),t&&(t.style.opacity="0");let n=i===this.hoverHighlighter,s=i===this.selectedHighlighter;n&&this.clearHoverSiblingHighlighters(),s&&this.clearSelectedSiblingHighlighters()}handleClick=async i=>{if(!this.isActive)return;i.preventDefault(),i.stopPropagation();let t=Y(i);if((!t||t===this.hoverHighlighter||t===this.selectedHighlighter||t===this.shadowHost)&&(t=this.lastHighlightedElement),!t||t===this.selectedElement)return;this.unselectCurrentElement(),this.clearSelectedSiblingHighlighters(),this.selectedElement=t;let n=R(t),s=n.length>0;s&&this.highlightSelectedSiblings(t),t.hasAttribute("data-original-text")||t.setAttribute("data-original-text",encodeURIComponent(t.textContent??"")),!t.hasAttribute("data-original-style")&&t.hasAttribute("style")&&t.setAttribute("data-original-style",encodeURIComponent(t.getAttribute("style")??"")),!t.hasAttribute("data-original-src")&&t.hasAttribute("src")&&t.setAttribute("data-original-src",encodeURIComponent(t.getAttribute("src")??"")),!s&&this.enableEditing&&this.isPureTextElement(t)&&(this.selectedElement.setAttribute("contenteditable","plaintext-only"),this.selectedElement.focus()),this.selectedHighlighter&&this.selectedLabel&&(this.selectedHighlighter.style.outlineStyle="solid",this.selectedHighlighter.style.opacity="1",this.selectedHighlighter.style.pointerEvents="none",this.selectedLabel.style.opacity="1",this.selectedLabel.textContent=B(t)),this.hoverHighlighter&&(this.hoverHighlighter.style.opacity="0",this.hoverHighlighter.style.pointerEvents="none"),this.hoverLabel&&(this.hoverLabel.style.opacity="0"),this.clearHoverSiblingHighlighters(),this.updateHighlighterPosition(t,this.selectedHighlighter,this.selectedLabel);let r=K(t),l;if(!Ie(t))try{l=await xe(t)}catch(o){console.error("[replit-cartographer] Error capturing element screenshot:",o)}this.observeSelectedElement(),this.postMessageToParent({type:"ELEMENT_SELECTED",payload:{...r,screenshotBlob:l??void 0,siblingCount:s?n.length:0},timestamp:Date.now()})};restoreElements(){document.querySelectorAll('[data-replit-dirty="true"]').forEach(t=>{if(t.hasAttribute("data-original-text")){if(t.textContent!==decodeURIComponent(t.getAttribute("data-original-text")||"")){let n=decodeURIComponent(t.getAttribute("data-original-text")||"");t.textContent=n}t.removeAttribute("data-original-text")}if(t.hasAttribute("data-original-style")){let n=decodeURIComponent(t.getAttribute("data-original-style")||"");t.setAttribute("style",n),t.removeAttribute("data-original-style")}else t.removeAttribute("style");if(t.hasAttribute("data-original-src")&&t.getAttribute("src")!==decodeURIComponent(t.getAttribute("data-original-src")||"")){let n=decodeURIComponent(t.getAttribute("data-original-src")||"");t.setAttribute("src",n),t.removeAttribute("data-original-src")}t.removeAttribute("data-replit-dirty")})}unselectCurrentElement(){if(this.restoreElements(),this.selectedElement){if(this.selectedElement.removeAttribute("contenteditable"),this.selectedElement.hasAttribute("data-original-style")){let i=decodeURIComponent(this.selectedElement.getAttribute("data-original-style")||"");this.selectedElement.setAttribute("style",i),this.selectedElement.removeAttribute("data-original-style")}if(this.selectedElement.hasAttribute("data-original-src")&&this.selectedElement.getAttribute("src")!==decodeURIComponent(this.selectedElement.getAttribute("data-original-src")||"")){let i=decodeURIComponent(this.selectedElement.getAttribute("data-original-src")||"");this.selectedElement.setAttribute("src",i),this.selectedElement.removeAttribute("data-original-src")}this.selectedElement=null}this.clearSelectedSiblingHighlighters(),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleMessage=i=>{if(!Le(i.origin))return;let t=i.data;if(!(!t||typeof t!="object"))switch(t.type){case"TOGGLE_REPLIT_VISUAL_EDITOR":{this.handleVisualEditorToggle(t);break}case"CLEAR_SELECTION":{this.unselectCurrentElement(),this.hideHighlight(this.selectedHighlighter,this.selectedLabel);break}case"UPDATE_SELECTED_ELEMENT":{if(!this.selectedElement)return;let{attributes:n}=t;[this.selectedElement,...this.selectedSiblingElements].forEach(r=>{n.style!==void 0&&(r.setAttribute("style",n.style),r.setAttribute("data-replit-dirty","true")),n.textContent!==void 0&&(r.textContent=n.textContent,r.setAttribute("data-replit-dirty","true")),n.className!==void 0&&(r.className=n.className,r.setAttribute("data-replit-dirty","true")),n.src!==void 0&&(r.setAttribute("src",n.src),r.setAttribute("data-replit-dirty","true"))}),this.updateHighlighterPosition(this.selectedElement,this.selectedHighlighter,this.selectedLabel),this.selectedSiblingElements.length>0&&(this.clearHighlighters(this.selectedSiblingHighlighters),this.selectedSiblingHighlighters=[],this.selectedSiblingHighlighters=this.highlightElements(this.selectedSiblingElements));break}case"CLEAR_ELEMENT_DIRTY":{this.selectedElement&&this.selectedElement.removeAttribute("data-replit-dirty");break}case"APPLY_THEME_PREVIEW":{this.handleApplyThemePreview(t);break}case"CLEAR_THEME_PREVIEW":{this.handleClearThemePreview();break}}};handleApplyThemePreview(i){if(i.type!=="APPLY_THEME_PREVIEW")return;let t=document.getElementById(v.THEME_PREVIEW_STYLE_ID);t||(t=document.createElement("style"),t.id=v.THEME_PREVIEW_STYLE_ID,document.head.appendChild(t)),t.textContent=i.themeContent}handleClearThemePreview(){let i=document.getElementById(v.THEME_PREVIEW_STYLE_ID);i&&i.remove()}handleVisualEditorToggle(i){if(i.type!=="TOGGLE_REPLIT_VISUAL_EDITOR")return;let t=!!i.enabled;this.enableEditing=!!i.enableEditing,t?this.postMessageToParent({type:"REPLIT_VISUAL_EDITOR_ENABLED",timestamp:Date.now()}):this.postMessageToParent({type:"REPLIT_VISUAL_EDITOR_DISABLED",timestamp:Date.now()}),this.isActive!==t&&(this.isActive=t,this.toggleEventListeners(t))}observeSelectedElement(){if(this.selectedElement){if(!this.isPureTextElement(this.selectedElement)){this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null);return}this.mutationObserver&&this.mutationObserver.disconnect(),this.mutationObserver=new MutationObserver(i=>{if(i.some(n=>n.type==="characterData")&&this.selectedElement){this.selectedElement.setAttribute("data-replit-dirty","true");let n=K(this.selectedElement);this.postMessageToParent({type:"ELEMENT_TEXT_CHANGED",payload:n,timestamp:Date.now()}),this.updateHighlighterPosition(this.selectedElement,this.selectedHighlighter,this.selectedLabel)}}),this.mutationObserver.observe(this.selectedElement,{characterData:!0,childList:!1,attributes:!1,subtree:!0})}}observeLightDarkModeSwitch(){let i=new MutationObserver(n=>{n.forEach(s=>{s.type==="attributes"&&s.attributeName==="class"&&(s.target.classList.contains("dark")?this.postMessageToParent({type:"DARK_MODE_USED",timestamp:Date.now()}):this.postMessageToParent({type:"LIGHT_MODE_USED",timestamp:Date.now()}))})}),t=document.documentElement;i.observe(t,{attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1})}recalculateSelectedElement=()=>{this.isActive&&(this.selectedElement&&this.updateHighlighterPosition(this.selectedElement,this.selectedHighlighter,this.selectedLabel),this.lastHighlightedElement&&this.updateHighlighterPosition(this.lastHighlightedElement,this.hoverHighlighter,this.hoverLabel),this.selectedSiblingElements.length>0&&this.updateSiblingHighlighterPositions())};updateSiblingHighlighterPositions(){for(let i=0;i<this.selectedSiblingHighlighters.length;i++){let t=this.selectedSiblingHighlighters[i],n=this.visibleSelectedSiblingElements[i];if(!t||!n)continue;let s=n.getBoundingClientRect(),r=window.innerHeight,l=Math.max(0,s.top),o=Math.min(r,s.bottom),c=Math.max(0,o-l);Object.assign(t.style,{opacity:c>0?"1":"0",top:${l}px,left:${s.left}px,width:${s.width}px,height:${c}px})}}handleKeyDown=i=>{this.isActive&&(i.key==="Escape"||i.key==="Esc")&&this.handleVisualEditorToggle({type:"TOGGLE_REPLIT_VISUAL_EDITOR",enabled:!1,timestamp:Date.now()})};toggleEventListeners(i){i?(this.initializeHighlighter(),this.enableDisabledElements(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseleave",this.handleMouseLeave),document.addEventListener("click",this.handleClick,!0),document.addEventListener("keydown",this.handleKeyDown),this.throttledRecalculate&&(window.addEventListener("resize",this.throttledRecalculate),window.addEventListener("scroll",this.throttledRecalculate,!0))):(this.restoreDisabledElements(),this.restoreElements(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,!0),document.removeEventListener("mouseleave",this.handleMouseLeave),document.removeEventListener("keydown",this.handleKeyDown),this.throttledRecalculate&&(window.removeEventListener("resize",this.throttledRecalculate),window.removeEventListener("scroll",this.throttledRecalculate,!0)),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.selectedElement&&(this.selectedElement.removeAttribute("contenteditable"),this.selectedElement.removeAttribute("data-original-text"),document.querySelectorAll('[contenteditable="plaintext-only"]').forEach(t=>{t.removeAttribute("contenteditable")})),this.clearSelectedSiblingHighlighters(),this.clearHoverSiblingHighlighters(),this.hoverHighlighter?.remove(),this.hoverLabel?.remove(),this.selectedHighlighter?.remove(),this.selectedLabel?.remove(),this.shadowHost?.remove(),this.hoverHighlighter=null,this.hoverLabel=null,this.selectedHighlighter=null,this.selectedLabel=null,this.shadowHost=null,this.shadowRoot=null,this.selectedElement=null)}clearHighlighters(i){return i.forEach(t=>{t.remove()}),[]}clearHoverSiblingHighlighters(){this.hoverSiblingHighlighters=this.clearHighlighters(this.hoverSiblingHighlighters)}clearSelectedSiblingHighlighters(){this.selectedSiblingElements.forEach(i=>{i.removeAttribute("contenteditable")}),this.selectedSiblingElements=[],this.visibleSelectedSiblingElements=[],this.selectedSiblingHighlighters=this.clearHighlighters(this.selectedSiblingHighlighters)}highlightElements(i){if(!this.shadowRoot||i.length===0)return[];let t=[];return i.forEach(n=>{let s=document.createElement("div");s.className="beacon-highlighter beacon-sibling-highlighter",this.shadowRoot?.appendChild(s),t.push(s);let r=n.getBoundingClientRect(),l=window.innerHeight,o=Math.max(0,r.top),c=Math.min(l,r.bottom),h=Math.max(0,c-o);Object.assign(s.style,{opacity:h>0?"1":"0",top:${o}px,left:${r.left}px,width:${r.width}px,height:${h}px`})}),t}highlightHoverSiblings(i){this.clearHoverSiblingHighlighters();let t=R(i,v.MAX_SIBLING_HIGHLIGHTERS,!0);this.hoverSiblingHighlighters=this.highlightElements(t)}highlightSelectedSiblings(i){this.clearSelectedSiblingHighlighters();let t=R(i),n=t.filter(s=>J(s));this.selectedSiblingElements=t,this.visibleSelectedSiblingElements=n,this.selectedSiblingHighlighters=this.highlightElements(n)}enableDisabledElements(){document.querySelectorAll("button[disabled], input[disabled]").forEach(i=>{i.removeAttribute("disabled"),i.setAttribute("data-replit-disabled","")})}restoreDisabledElements(){document.querySelectorAll("[data-replit-disabled]").forEach(i=>{i.removeAttribute("data-replit-disabled"),i.setAttribute("disabled","")})}};if(typeof window<"u")try{window.REPLIT_BEACON_VERSION||(window.REPLIT_BEACON_VERSION=P,new D)}catch(e){console.error("[replit-beacon] Failed to initialize:",e)}})();
</script>
<script type="text/javascript" src="/@replit/vite-plugin-dev-banner/banner-script.js" id="replit-dev-banner"></script><style>
#replit-dev-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #004182;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: opacity 0.2s ease-in-out;
}

.banner-text {
  flex-grow: 1;
}

.banner-link {
  color: white;
  font-weight: 500;
  text-decoration: underline;
}

.banner-link:hover {
  text-decoration: none;
}

.banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 12px;
  transition: transform 0.1s ease-in-out, color 0.1s ease-in-out;
}

.banner-close:hover {
  transform: scale(1.05);
  color: white;
}

@media (max-width: 600px) {
  #replit-dev-banner {
    padding: 8px;
    font-size: 12px;
  }
  
  .banner-close {
    width: 24px;
    height: 24px;
    margin-left: 8px;
  }
}

</style> <style type="text/css" data-vite-dev-id="/home/runner/workspace/client/src/index.css">@import url('https://fonts.googleapis.com/css2?family=Battambang:wght@400;700&family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}

::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*

1. Prevent padding and border from affecting element width. (Which technique for setting box-sizing: border-box? jensimmons/cssremedy#4)
2. Allow adding a border to an element by just adding a border-width. ([0.2] Support cascading border colors and styles tailwindlabs/tailwindcss#116)
   */

,
::before,
::after {
box-sizing: border-box; / 1 /
border-width: 0; / 2 /
border-style: solid; / 2 /
border-color: #e5e7eb; / 2 */
}

::before,
::after {
--tw-content: '';
}

/*

1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured sans font-family by default.
5. Use the user's configured sans font-feature-settings by default.
6. Use the user's configured sans font-variation-settings by default.
7. Disable tap highlights on iOS
   */

html,
:host {
line-height: 1.5; /* 1 /
-webkit-text-size-adjust: 100%; / 2 /
-moz-tab-size: 4; / 3 /
-o-tab-size: 4;
tab-size: 4; / 3 /
font-family: var(--font-sans); / 4 /
font-feature-settings: normal; / 5 /
font-variation-settings: normal; / 6 /
-webkit-tap-highlight-color: transparent; / 7 */
}

/*

1. Remove the margin in all browsers.
2. Inherit line-height from html so users can set them as a class directly on the html element.
   */

body {
margin: 0; /* 1 /
line-height: inherit; / 2 */
}

/*

1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
   */

hr {
height: 0; /* 1 /
color: inherit; / 2 /
border-top-width: 1px; / 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
color: inherit;
text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
font-weight: bolder;
}

/*

1. Use the user's configured mono font-family by default.
2. Use the user's configured mono font-feature-settings by default.
3. Use the user's configured mono font-variation-settings by default.
4. Correct the odd em font sizing in all browsers.
   */

code,
kbd,
samp,
pre {
font-family: var(--font-mono); /* 1 /
font-feature-settings: normal; / 2 /
font-variation-settings: normal; / 3 /
font-size: 1em; / 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
font-size: 80%;
}

/*
Prevent sub and sup elements from affecting the line height in all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/*

1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
   */

table {
text-indent: 0; /* 1 /
border-color: inherit; / 2 /
border-collapse: collapse; / 3 */
}

/*

1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
   */

button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 /
font-feature-settings: inherit; / 1 /
font-variation-settings: inherit; / 1 /
font-size: 100%; / 1 /
font-weight: inherit; / 1 /
line-height: inherit; / 1 /
letter-spacing: inherit; / 1 /
color: inherit; / 1 /
margin: 0; / 2 /
padding: 0; / 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
text-transform: none;
}

/*

1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
   */

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 /
background-color: transparent; / 2 /
background-image: none; / 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
outline: auto;
}

/*
Remove the additional :invalid styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}

/*

1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
   */

[type='search'] {
-webkit-appearance: textfield; /* 1 /
outline-offset: -2px; / 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
-webkit-appearance: none;
}

/*

1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to inherit in Safari.
   */

::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 /
font: inherit; / 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}

fieldset {
margin: 0;
padding: 0;
}

legend {
padding: 0;
}

ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
resize: vertical;
}

/*

1. Reset the default placeholder opacity in Firefox. (input text placeholder-opacity-100 in Firefox looks lighter tailwindlabs/tailwindcss#3300)
2. Set the default placeholder color to the user's configured gray 400 color.
   */

input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 /
color: #9ca3af; / 2 */
}

input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 /
color: #9ca3af; / 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
cursor: default;
}

/*

1. Make replaced elements display: block by default. (Fix the tiny gap under replaced elements that shows by default jensimmons/cssremedy#14)
2. Add vertical-align: middle to align replaced elements more sensibly by default. (Fix the tiny gap under replaced elements that shows by default jensimmons/cssremedy#14 (comment))
   This can trigger a poorly considered lint error in some tools but is included by design.
   */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 /
vertical-align: middle; / 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (jensimmons/cssremedy#14)
*/

img,
video {
max-width: 100%;
height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
display: none;
}

body{
--tw-bg-opacity: 1;
background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.025em;
}

/* Apply Khmer font to elements likely to contain Khmer text */

.khmer-text {
font-family: var(--font-khmer);
}

.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

.pointer-events-none{
pointer-events: none;
}

.pointer-events-auto{
pointer-events: auto;
}

.visible{
visibility: visible;
}

.invisible{
visibility: hidden;
}

.fixed{
position: fixed;
}

.absolute{
position: absolute;
}

.relative{
position: relative;
}

.sticky{
position: sticky;
}

.inset-0{
inset: 0px;
}

.inset-x-0{
left: 0px;
right: 0px;
}

.inset-y-0{
top: 0px;
bottom: 0px;
}

.-bottom-12{
bottom: -3rem;
}

.-left-12{
left: -3rem;
}

.-right-12{
right: -3rem;
}

.-top-12{
top: -3rem;
}

.bottom-0{
bottom: 0px;
}

.left-0{
left: 0px;
}

.left-1{
left: 0.25rem;
}

.left-1/2{
left: 50%;
}

.left-2{
left: 0.5rem;
}

.left-[50%]{
left: 50%;
}

.right-0{
right: 0px;
}

.right-1{
right: 0.25rem;
}

.right-2{
right: 0.5rem;
}

.right-3{
right: 0.75rem;
}

.right-4{
right: 1rem;
}

.top-0{
top: 0px;
}

.top-1.5{
top: 0.375rem;
}

.top-1/2{
top: 50%;
}

.top-2{
top: 0.5rem;
}

.top-3.5{
top: 0.875rem;
}

.top-4{
top: 1rem;
}

.top-[1px]{
top: 1px;
}

.top-[50%]{
top: 50%;
}

.top-[60%]{
top: 60%;
}

.top-full{
top: 100%;
}

.z-10{
z-index: 10;
}

.z-20{
z-index: 20;
}

.z-50{
z-index: 50;
}

.z-[100]{
z-index: 100;
}

.z-[1]{
z-index: 1;
}

.-mx-1{
margin-left: -0.25rem;
margin-right: -0.25rem;
}

.mx-2{
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.mx-3.5{
margin-left: 0.875rem;
margin-right: 0.875rem;
}

.mx-4{
margin-left: 1rem;
margin-right: 1rem;
}

.mx-auto{
margin-left: auto;
margin-right: auto;
}

.my-0.5{
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}

.my-1{
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}

.-ml-4{
margin-left: -1rem;
}

.-mt-4{
margin-top: -1rem;
}

.mb-1{
margin-bottom: 0.25rem;
}

.mb-3{
margin-bottom: 0.75rem;
}

.mb-4{
margin-bottom: 1rem;
}

.mb-6{
margin-bottom: 1.5rem;
}

.ml-1{
margin-left: 0.25rem;
}

.ml-2{
margin-left: 0.5rem;
}

.ml-auto{
margin-left: auto;
}

.mr-2{
margin-right: 0.5rem;
}

.mt-1{
margin-top: 0.25rem;
}

.mt-1.5{
margin-top: 0.375rem;
}

.mt-2{
margin-top: 0.5rem;
}

.mt-24{
margin-top: 6rem;
}

.mt-4{
margin-top: 1rem;
}

.mt-6{
margin-top: 1.5rem;
}

.mt-auto{
margin-top: auto;
}

.block{
display: block;
}

.inline-block{
display: inline-block;
}

.flex{
display: flex;
}

.inline-flex{
display: inline-flex;
}

.table{
display: table;
}

.grid{
display: grid;
}

.hidden{
display: none;
}

.aspect-square{
aspect-ratio: 1 / 1;
}

.aspect-video{
aspect-ratio: 16 / 9;
}

.size-4{
width: 1rem;
height: 1rem;
}

.h-1.5{
height: 0.375rem;
}

.h-10{
height: 2.5rem;
}

.h-11{
height: 2.75rem;
}

.h-12{
height: 3rem;
}

.h-2{
height: 0.5rem;
}

.h-2.5{
height: 0.625rem;
}

.h-20{
height: 5rem;
}

.h-3{
height: 0.75rem;
}

.h-3.5{
height: 0.875rem;
}

.h-4{
height: 1rem;
}

.h-5{
height: 1.25rem;
}

.h-6{
height: 1.5rem;
}

.h-7{
height: 1.75rem;
}

.h-8{
height: 2rem;
}

.h-9{
height: 2.25rem;
}

.h-[1px]{
height: 1px;
}

.h-[300px]{
height: 300px;
}

.h-[var(--radix-navigation-menu-viewport-height)]{
height: var(--radix-navigation-menu-viewport-height);
}

.h-[var(--radix-select-trigger-height)]{
height: var(--radix-select-trigger-height);
}

.h-auto{
height: auto;
}

.h-full{
height: 100%;
}

.h-px{
height: 1px;
}

.h-svh{
height: 100svh;
}

.max-h-[--radix-context-menu-content-available-height]{
max-height: var(--radix-context-menu-content-available-height);
}

.max-h-[--radix-select-content-available-height]{
max-height: var(--radix-select-content-available-height);
}

.max-h-[300px]{
max-height: 300px;
}

.max-h-[var(--radix-dropdown-menu-content-available-height)]{
max-height: var(--radix-dropdown-menu-content-available-height);
}

.max-h-screen{
max-height: 100vh;
}

.min-h-0{
min-height: 0px;
}

.min-h-10{
min-height: 2.5rem;
}

.min-h-8{
min-height: 2rem;
}

.min-h-9{
min-height: 2.25rem;
}

.min-h-[450px]{
min-height: 450px;
}

.min-h-[80px]{
min-height: 80px;
}

.min-h-screen{
min-height: 100vh;
}

.min-h-svh{
min-height: 100svh;
}

.w-0{
width: 0px;
}

.w-1{
width: 0.25rem;
}

.w-10{
width: 2.5rem;
}

.w-11{
width: 2.75rem;
}

.w-2{
width: 0.5rem;
}

.w-2.5{
width: 0.625rem;
}

.w-3{
width: 0.75rem;
}

.w-3.5{
width: 0.875rem;
}

.w-3/4{
width: 75%;
}

.w-4{
width: 1rem;
}

.w-5{
width: 1.25rem;
}

.w-6{
width: 1.5rem;
}

.w-64{
width: 16rem;
}

.w-7{
width: 1.75rem;
}

.w-72{
width: 18rem;
}

.w-8{
width: 2rem;
}

.w-9{
width: 2.25rem;
}

.w-[100px]{
width: 100px;
}

.w-[1px]{
width: 1px;
}

.w-[var(--sidebar-width)]{
width: var(--sidebar-width);
}

.w-auto{
width: auto;
}

.w-full{
width: 100%;
}

.w-max{
width: -moz-max-content;
width: max-content;
}

.w-px{
width: 1px;
}

.min-w-0{
min-width: 0px;
}

.min-w-10{
min-width: 2.5rem;
}

.min-w-11{
min-width: 2.75rem;
}

.min-w-5{
min-width: 1.25rem;
}

.min-w-9{
min-width: 2.25rem;
}

.min-w-[12rem]{
min-width: 12rem;
}

.min-w-[8rem]{
min-width: 8rem;
}

.min-w-[var(--radix-select-trigger-width)]{
min-width: var(--radix-select-trigger-width);
}

.max-w-7xl{
max-width: 80rem;
}

.max-w-[var(--skeleton-width)]{
max-width: var(--skeleton-width);
}

.max-w-lg{
max-width: 32rem;
}

.max-w-max{
max-width: -moz-max-content;
max-width: max-content;
}

.max-w-md{
max-width: 28rem;
}

.flex-1{
flex: 1 1 0%;
}

.shrink-0{
flex-shrink: 0;
}

.flex-grow{
flex-grow: 1;
}

.grow{
flex-grow: 1;
}

.grow-0{
flex-grow: 0;
}

.basis-full{
flex-basis: 100%;
}

.caption-bottom{
caption-side: bottom;
}

.border-collapse{
border-collapse: collapse;
}

.origin-[--radix-context-menu-content-transform-origin]{
transform-origin: var(--radix-context-menu-content-transform-origin);
}

.origin-[--radix-dropdown-menu-content-transform-origin]{
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-[--radix-hover-card-content-transform-origin]{
transform-origin: var(--radix-hover-card-content-transform-origin);
}

.origin-[--radix-menubar-content-transform-origin]{
transform-origin: var(--radix-menubar-content-transform-origin);
}

.origin-[--radix-popover-content-transform-origin]{
transform-origin: var(--radix-popover-content-transform-origin);
}

.origin-[--radix-select-content-transform-origin]{
transform-origin: var(--radix-select-content-transform-origin);
}

.origin-[--radix-tooltip-content-transform-origin]{
transform-origin: var(--radix-tooltip-content-transform-origin);
}

.-translate-x-1/2{
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px{
--tw-translate-x: -1px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1/2{
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-[-50%]{
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px{
--tw-translate-x: 1px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-[-50%]{
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45{
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90{
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@Keyframes pulse{

50%{
opacity: .5;
}
}

.animate-pulse{
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@Keyframes spin{

to{
transform: rotate(360deg);
}
}

.animate-spin{
animation: spin 1s linear infinite;
}

.cursor-default{
cursor: default;
}

.cursor-pointer{
cursor: pointer;
}

.touch-none{
touch-action: none;
}

.select-none{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.list-none{
list-style-type: none;
}

.grid-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.flex-row{
flex-direction: row;
}

.flex-col{
flex-direction: column;
}

.flex-col-reverse{
flex-direction: column-reverse;
}

.flex-wrap{
flex-wrap: wrap;
}

.items-start{
align-items: flex-start;
}

.items-end{
align-items: flex-end;
}

.items-center{
align-items: center;
}

.items-stretch{
align-items: stretch;
}

.justify-center{
justify-content: center;
}

.justify-between{
justify-content: space-between;
}

.gap-1{
gap: 0.25rem;
}

.gap-1.5{
gap: 0.375rem;
}

.gap-2{
gap: 0.5rem;
}

.gap-3{
gap: 0.75rem;
}

.gap-4{
gap: 1rem;
}

.gap-6{
gap: 1.5rem;
}

.gap-8{
gap: 2rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1.5 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]){
--tw-divide-opacity: 1;
border-color: hsl(var(--border) / var(--tw-divide-opacity, 1));
}

.overflow-auto{
overflow: auto;
}

.overflow-hidden{
overflow: hidden;
}

.overflow-x-auto{
overflow-x: auto;
}

.overflow-y-auto{
overflow-y: auto;
}

.overflow-x-hidden{
overflow-x: hidden;
}

.whitespace-nowrap{
white-space: nowrap;
}

.break-words{
overflow-wrap: break-word;
}

.rounded-2xl{
border-radius: 1rem;
}

.rounded-[2px]{
border-radius: 2px;
}

.rounded-[inherit]{
border-radius: inherit;
}

.rounded-full{
border-radius: 9999px;
}

.rounded-lg{
border-radius: .5625rem;
}

.rounded-md{
border-radius: .375rem;
}

.rounded-sm{
border-radius: .1875rem;
}

.rounded-xl{
border-radius: 0.75rem;
}

.rounded-t-[10px]{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.rounded-tl-sm{
border-top-left-radius: .1875rem;
}

.border{
border-width: 1px;
}

.border-2{
border-width: 2px;
}

.border-[1.5px]{
border-width: 1.5px;
}

.border-y{
border-top-width: 1px;
border-bottom-width: 1px;
}

.border-b{
border-bottom-width: 1px;
}

.border-l{
border-left-width: 1px;
}

.border-r{
border-right-width: 1px;
}

.border-t{
border-top-width: 1px;
}

.border-dashed{
border-style: dashed;
}

.border-[--color-border]{
border-color: var(--color-border);
}

.border-border{
--tw-border-opacity: 1;
border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}

.border-border/50{
border-color: hsl(var(--border) / 0.5);
}

.border-card-border{
--tw-border-opacity: 1;
border-color: hsl(var(--card-border) / var(--tw-border-opacity, 1));
}

.border-destructive{
--tw-border-opacity: 1;
border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
}

.border-destructive-border{
border-color: var(--destructive-border);
}

.border-destructive/50{
border-color: hsl(var(--destructive) / 0.5);
}

.border-input{
--tw-border-opacity: 1;
border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
}

.border-primary{
--tw-border-opacity: 1;
border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}

.border-primary-border{
border-color: var(--primary-border);
}

.border-secondary-border{
border-color: var(--secondary-border);
}

.border-sidebar-border{
--tw-border-opacity: 1;
border-color: hsl(var(--sidebar-border) / var(--tw-border-opacity, 1));
}

.border-transparent{
border-color: transparent;
}

.border-l-transparent{
border-left-color: transparent;
}

.border-t-transparent{
border-top-color: transparent;
}

.bg-[--color-bg]{
background-color: var(--color-bg);
}

.bg-accent{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.bg-background{
--tw-bg-opacity: 1;
background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}

.bg-black/80{
background-color: rgb(0 0 0 / 0.8);
}

.bg-border{
--tw-bg-opacity: 1;
background-color: hsl(var(--border) / var(--tw-bg-opacity, 1));
}

.bg-card{
--tw-bg-opacity: 1;
background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
}

.bg-destructive{
--tw-bg-opacity: 1;
background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
}

.bg-foreground{
--tw-bg-opacity: 1;
background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-50/50{
background-color: rgb(240 253 244 / 0.5);
}

.bg-muted{
--tw-bg-opacity: 1;
background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}

.bg-muted/10{
background-color: hsl(var(--muted) / 0.1);
}

.bg-muted/50{
background-color: hsl(var(--muted) / 0.5);
}

.bg-orange-50/50{
background-color: rgb(255 247 237 / 0.5);
}

.bg-pink-500{
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.bg-popover{
--tw-bg-opacity: 1;
background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
}

.bg-primary{
--tw-bg-opacity: 1;
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.bg-primary/10{
background-color: hsl(var(--primary) / 0.1);
}

.bg-secondary{
--tw-bg-opacity: 1;
background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}

.bg-sidebar{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar) / var(--tw-bg-opacity, 1));
}

.bg-sidebar-border{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar-border) / var(--tw-bg-opacity, 1));
}

.bg-slate-100{
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-50{
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-50/50{
background-color: rgb(248 250 252 / 0.5);
}

.bg-transparent{
background-color: transparent;
}

.bg-white/80{
background-color: rgb(255 255 255 / 0.8);
}

.bg-gradient-to-br{
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-primary{
--tw-gradient-from: hsl(var(--primary) / 1) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-600{
--tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.fill-current{
fill: currentColor;
}

.p-0{
padding: 0px;
}

.p-1{
padding: 0.25rem;
}

.p-2{
padding: 0.5rem;
}

.p-3{
padding: 0.75rem;
}

.p-4{
padding: 1rem;
}

.p-6{
padding: 1.5rem;
}

.p-[1px]{
padding: 1px;
}

.px-1{
padding-left: 0.25rem;
padding-right: 0.25rem;
}

.px-2{
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.px-2.5{
padding-left: 0.625rem;
padding-right: 0.625rem;
}

.px-3{
padding-left: 0.75rem;
padding-right: 0.75rem;
}

.px-4{
padding-left: 1rem;
padding-right: 1rem;
}

.px-5{
padding-left: 1.25rem;
padding-right: 1.25rem;
}

.px-8{
padding-left: 2rem;
padding-right: 2rem;
}

.py-0.5{
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}

.py-1{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}

.py-1.5{
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}

.py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.py-3{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}

.py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}

.py-6{
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}

.pb-3{
padding-bottom: 0.75rem;
}

.pb-4{
padding-bottom: 1rem;
}

.pb-8{
padding-bottom: 2rem;
}

.pl-2.5{
padding-left: 0.625rem;
}

.pl-4{
padding-left: 1rem;
}

.pl-8{
padding-left: 2rem;
}

.pr-2{
padding-right: 0.5rem;
}

.pr-2.5{
padding-right: 0.625rem;
}

.pr-8{
padding-right: 2rem;
}

.pt-0{
padding-top: 0px;
}

.pt-1{
padding-top: 0.25rem;
}

.pt-3{
padding-top: 0.75rem;
}

.pt-4{
padding-top: 1rem;
}

.pt-6{
padding-top: 1.5rem;
}

.text-left{
text-align: left;
}

.text-center{
text-align: center;
}

.text-right{
text-align: right;
}

.align-middle{
vertical-align: middle;
}

.font-display{
font-family: var(--font-display);
}

.font-khmer{
font-family: var(--font-khmer);
}

.font-mono{
font-family: var(--font-mono);
}

.text-2xl{
font-size: 1.5rem;
line-height: 2rem;
}

.text-4xl{
font-size: 2.25rem;
line-height: 2.5rem;
}

.text-[0.8rem]{
font-size: 0.8rem;
}

.text-base{
font-size: 1rem;
line-height: 1.5rem;
}

.text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
}

.text-sm{
font-size: 0.875rem;
line-height: 1.25rem;
}

.text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
}

.text-xs{
font-size: 0.75rem;
line-height: 1rem;
}

.font-bold{
font-weight: 700;
}

.font-medium{
font-weight: 500;
}

.font-normal{
font-weight: 400;
}

.font-semibold{
font-weight: 600;
}

.uppercase{
text-transform: uppercase;
}

.tabular-nums{
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none{
line-height: 1;
}

.leading-tight{
line-height: 1.25;
}

.tracking-tight{
letter-spacing: -0.025em;
}

.tracking-widest{
letter-spacing: 0.1em;
}

.text-accent-foreground{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.text-card-foreground{
--tw-text-opacity: 1;
color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
}

.text-current{
color: currentColor;
}

.text-destructive{
--tw-text-opacity: 1;
color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
}

.text-destructive-foreground{
--tw-text-opacity: 1;
color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
}

.text-foreground{
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.text-foreground/50{
color: hsl(var(--foreground) / 0.5);
}

.text-gray-600{
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-900{
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-700{
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-muted-foreground{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.text-orange-700{
--tw-text-opacity: 1;
color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-pink-500{
--tw-text-opacity: 1;
color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}

.text-popover-foreground{
--tw-text-opacity: 1;
color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
}

.text-primary{
--tw-text-opacity: 1;
color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}

.text-primary-foreground{
--tw-text-opacity: 1;
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.text-red-500{
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-secondary-foreground{
--tw-text-opacity: 1;
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
}

.text-sidebar-foreground{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-foreground) / var(--tw-text-opacity, 1));
}

.text-sidebar-foreground/70{
color: hsl(var(--sidebar-foreground) / 0.7);
}

.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.opacity-0{
opacity: 0;
}

.opacity-50{
opacity: 0.5;
}

.opacity-60{
opacity: 0.6;
}

.opacity-70{
opacity: 0.7;
}

.opacity-90{
opacity: 0.9;
}

.shadow-[0_0_0_1px_hsl(var(--sidebar-border))]{
--tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-black/5{
--tw-shadow-color: rgb(0 0 0 / 0.05);
--tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary/20{
--tw-shadow-color: hsl(var(--primary) / 0.2);
--tw-shadow: var(--tw-shadow-colored);
}

.outline-none{
outline: 2px solid transparent;
outline-offset: 2px;
}

.outline{
outline-style: solid;
}

.outline-2{
outline-width: 2px;
}

.outline-offset-2{
outline-offset: 2px;
}

.outline-transparent{
outline-color: transparent;
}

.ring-0{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-ring{
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}

.ring-sidebar-ring{
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--sidebar-ring) / var(--tw-ring-opacity, 1));
}

.ring-offset-background{
--tw-ring-offset-color: hsl(var(--background) / 1);
}

.filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md{
--tw-backdrop-blur: blur(12px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-[left\2c right\2c width]{
transition-property: left,right,width;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-[margin\2c opacity]{
transition-property: margin,opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-[width\2c height\2c padding]{
transition-property: width,height,padding;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-[width]{
transition-property: width;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-all{
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-colors{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-opacity{
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-transform{
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.duration-1000{
transition-duration: 1000ms;
}

.duration-200{
transition-duration: 200ms;
}

.duration-300{
transition-duration: 300ms;
}

.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
transition-timing-function: linear;
}

@Keyframes enter{

from{
opacity: var(--tw-enter-opacity, 1);
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
}
}

@Keyframes exit{

to{
opacity: var(--tw-exit-opacity, 1);
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
}
}

.animate-in{
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}

.fade-in-0{
--tw-enter-opacity: 0;
}

.fade-in-80{
--tw-enter-opacity: 0.8;
}

.zoom-in-95{
--tw-enter-scale: .95;
}

.duration-1000{
animation-duration: 1000ms;
}

.duration-200{
animation-duration: 200ms;
}

.duration-300{
animation-duration: 300ms;
}

.ease-in-out{
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
animation-timing-function: linear;
}

.[border-color:var(--badge-outline)]{
border-color: var(--badge-outline);
}

.[border-color:var(--button-outline)]{
border-color: var(--button-outline);
}

:root {
/* Khmer Font */
--font-khmer: 'Battambang', cursive;

/* English Fonts */
--font-sans: 'DM Sans', sans-serif;
--font-display: 'Outfit', sans-serif;

/* Color Palette - Professional Blue & Gold Theme */
--background: 210 20% 98%;
--foreground: 222 47% 11%;

--primary: 221 83% 53%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96%;
--secondary-foreground: 222 47% 11%;

--muted: 210 40% 96%;
--muted-foreground: 215 16% 47%;

--accent: 43 96% 64%; /* Gold accent */
--accent-foreground: 222 47% 11%;

--destructive: 0 84% 60%;
--destructive-foreground: 210 40% 98%;

--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 221 83% 53%;

--radius: 0.75rem;
}

.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;

--primary: 217 91% 60%;
--primary-foreground: 222 47% 11%;

--secondary: 217 32% 17%;
--secondary-foreground: 210 40% 98%;

--muted: 217 32% 17%;
--muted-foreground: 215 20% 65%;

--accent: 43 96% 64%;
--accent-foreground: 222 47% 11%;

--destructive: 0 62% 30%;
--destructive-foreground: 210 40% 98%;

--border: 217 32% 17%;
--input: 217 32% 17%;
--ring: 224 76% 48%;
}

/* Custom Scrollbar */

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.3);
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
}

.file:border-0::file-selector-button{
border-width: 0px;
}

.file:bg-transparent::file-selector-button{
background-color: transparent;
}

.file:text-sm::file-selector-button{
font-size: 0.875rem;
line-height: 1.25rem;
}

.file:font-medium::file-selector-button{
font-weight: 500;
}

.file:text-foreground::file-selector-button{
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.placeholder:text-muted-foreground::-moz-placeholder{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder:text-muted-foreground::placeholder{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.after:pointer-events-none::after{
content: var(--tw-content);
pointer-events: none;
}

.after:absolute::after{
content: var(--tw-content);
position: absolute;
}

.after:-inset-2::after{
content: var(--tw-content);
inset: -0.5rem;
}

.after:inset-0::after{
content: var(--tw-content);
inset: 0px;
}

.after:inset-y-0::after{
content: var(--tw-content);
top: 0px;
bottom: 0px;
}

.after:left-1/2::after{
content: var(--tw-content);
left: 50%;
}

.after:block::after{
content: var(--tw-content);
display: block;
}

.after:w-1::after{
content: var(--tw-content);
width: 0.25rem;
}

.after:w-[2px]::after{
content: var(--tw-content);
width: 2px;
}

.after:-translate-x-1/2::after{
content: var(--tw-content);
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after:rounded-full::after{
content: var(--tw-content);
border-radius: 9999px;
}

.after:border::after{
content: var(--tw-content);
border-width: 1px;
}

.after:border-black/10::after{
content: var(--tw-content);
border-color: rgb(0 0 0 / 0.1);
}

.after:content-['']::after{
--tw-content: '';
content: var(--tw-content);
}

.first:rounded-l-md:first-child{
border-top-left-radius: .375rem;
border-bottom-left-radius: .375rem;
}

.first:border-l:first-child{
border-left-width: 1px;
}

.last:rounded-r-md:last-child{
border-top-right-radius: .375rem;
border-bottom-right-radius: .375rem;
}

.focus-within:relative:focus-within{
position: relative;
}

.focus-within:z-20:focus-within{
z-index: 20;
}

.hover:border-border:hover{
--tw-border-opacity: 1;
border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}

.hover:bg-accent:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover:bg-muted:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover:bg-muted/30:hover{
background-color: hsl(var(--muted) / 0.3);
}

.hover:bg-muted/50:hover{
background-color: hsl(var(--muted) / 0.5);
}

.hover:bg-primary:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.hover:bg-primary/90:hover{
background-color: hsl(var(--primary) / 0.9);
}

.hover:bg-secondary:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}

.hover:bg-sidebar-accent:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar-accent) / var(--tw-bg-opacity, 1));
}

.hover:text-accent-foreground:hover{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.hover:text-foreground:hover{
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.hover:text-muted-foreground:hover{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover:text-primary-foreground:hover{
--tw-text-opacity: 1;
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.hover:text-sidebar-accent-foreground:hover{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.hover:underline:hover{
text-decoration-line: underline;
}

.hover:opacity-100:hover{
opacity: 1;
}

.hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]:hover{
--tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover:shadow-xl:hover{
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover:after:bg-sidebar-border:hover::after{
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar-border) / var(--tw-bg-opacity, 1));
}

.focus:bg-accent:focus{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus:bg-primary:focus{
--tw-bg-opacity: 1;
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.focus:text-accent-foreground:focus{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.focus:text-primary-foreground:focus{
--tw-text-opacity: 1;
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.focus:opacity-100:focus{
opacity: 1;
}

.focus:outline-none:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}

.focus:ring-2:focus{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus:ring-ring:focus{
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus:ring-offset-2:focus{
--tw-ring-offset-width: 2px;
}

.focus-visible:outline-none:focus-visible{
outline: 2px solid transparent;
outline-offset: 2px;
}

.focus-visible:ring-1:focus-visible{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible:ring-2:focus-visible{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible:ring-ring:focus-visible{
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible:ring-offset-1:focus-visible{
--tw-ring-offset-width: 1px;
}

.focus-visible:ring-offset-2:focus-visible{
--tw-ring-offset-width: 2px;
}

.focus-visible:ring-offset-background:focus-visible{
--tw-ring-offset-color: hsl(var(--background) / 1);
}

.active:bg-sidebar-accent:active{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar-accent) / var(--tw-bg-opacity, 1));
}

.active:text-sidebar-accent-foreground:active{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.active:shadow-none:active{
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.disabled:pointer-events-none:disabled{
pointer-events: none;
}

.disabled:cursor-not-allowed:disabled{
cursor: not-allowed;
}

.disabled:opacity-50:disabled{
opacity: 0.5;
}

.group/menu-item:focus-within .group-focus-within/menu-item:opacity-100{
opacity: 1;
}

.group/menu-item:hover .group-hover/menu-item:opacity-100{
opacity: 1;
}

.group:hover .group-hover:opacity-100{
opacity: 1;
}

.group.destructive .group-[.destructive]:border-muted/40{
border-color: hsl(var(--muted) / 0.4);
}

.group.destructive .group-[.destructive]:text-red-300{
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.destructive .group-[.destructive]:hover:border-destructive/30:hover{
border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-[.destructive]:hover:bg-destructive:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
}

.group.destructive .group-[.destructive]:hover:text-destructive-foreground:hover{
--tw-text-opacity: 1;
color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
}

.group.destructive .group-[.destructive]:hover:text-red-50:hover{
--tw-text-opacity: 1;
color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-[.destructive]:focus:ring-destructive:focus{
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--destructive) / var(--tw-ring-opacity, 1));
}

.group.destructive .group-[.destructive]:focus:ring-red-400:focus{
--tw-ring-opacity: 1;
--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-[.destructive]:focus:ring-offset-red-600:focus{
--tw-ring-offset-color: #dc2626;
}

.peer/menu-button:hover ~ .peer-hover/menu-button:text-sidebar-accent-foreground{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.peer:disabled ~ .peer-disabled:cursor-not-allowed{
cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled:opacity-70{
opacity: 0.7;
}

.has-[:disabled]:opacity-50:has(:disabled){
opacity: 0.5;
}

.aria-disabled:pointer-events-none[aria-disabled="true"]{
pointer-events: none;
}

.aria-disabled:opacity-50[aria-disabled="true"]{
opacity: 0.5;
}

.aria-selected:bg-accent[aria-selected="true"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.aria-selected:bg-accent/50[aria-selected="true"]{
background-color: hsl(var(--accent) / 0.5);
}

.aria-selected:text-accent-foreground[aria-selected="true"]{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.aria-selected:text-muted-foreground[aria-selected="true"]{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.aria-selected:opacity-100[aria-selected="true"]{
opacity: 1;
}

.data-[disabled=true]:pointer-events-none[data-disabled="true"]{
pointer-events: none;
}

.data-[disabled]:pointer-events-none[data-disabled]{
pointer-events: none;
}

.data-[panel-group-direction=vertical]:h-px[data-panel-group-direction="vertical"]{
height: 1px;
}

.data-[panel-group-direction=vertical]:w-full[data-panel-group-direction="vertical"]{
width: 100%;
}

.data-[side=bottom]:translate-y-1[data-side="bottom"]{
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[side=left]:-translate-x-1[data-side="left"]{
--tw-translate-x: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[side=right]:translate-x-1[data-side="right"]{
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[side=top]:-translate-y-1[data-side="top"]{
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[state=checked]:translate-x-5[data-state="checked"]{
--tw-translate-x: 1.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[state=unchecked]:translate-x-0[data-state="unchecked"]{
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[swipe=cancel]:translate-x-0[data-swipe="cancel"]{
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)][data-swipe="end"]{
--tw-translate-x: var(--radix-toast-swipe-end-x);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)][data-swipe="move"]{
--tw-translate-x: var(--radix-toast-swipe-move-x);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@Keyframes accordion-up{

from{
height: var(--radix-accordion-content-height);
}

to{
height: 0;
}
}

.data-[state=closed]:animate-accordion-up[data-state="closed"]{
animation: accordion-up 0.2s ease-out;
}

@Keyframes accordion-down{

from{
height: 0;
}

to{
height: var(--radix-accordion-content-height);
}
}

.data-[state=open]:animate-accordion-down[data-state="open"]{
animation: accordion-down 0.2s ease-out;
}

.data-[panel-group-direction=vertical]:flex-col[data-panel-group-direction="vertical"]{
flex-direction: column;
}

.data-[active=true]:bg-sidebar-accent[data-active="true"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar-accent) / var(--tw-bg-opacity, 1));
}

.data-[selected='true']:bg-accent[data-selected='true']{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-[state=active]:bg-background[data-state="active"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}

.data-[state=checked]:bg-primary[data-state="checked"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-[state=on]:bg-accent[data-state="on"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-[state=open]:bg-accent[data-state="open"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-[state=open]:bg-accent/50[data-state="open"]{
background-color: hsl(var(--accent) / 0.5);
}

.data-[state=open]:bg-secondary[data-state="open"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-[state=selected]:bg-muted[data-state="selected"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-[state=unchecked]:bg-input[data-state="unchecked"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
}

.data-[active=true]:font-medium[data-active="true"]{
font-weight: 500;
}

.data-[active=true]:text-sidebar-accent-foreground[data-active="true"]{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.data-[placeholder]:text-muted-foreground[data-placeholder]{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-[selected=true]:text-accent-foreground[data-selected="true"]{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-[state=active]:text-foreground[data-state="active"]{
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.data-[state=checked]:text-primary-foreground[data-state="checked"]{
--tw-text-opacity: 1;
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.data-[state=on]:text-accent-foreground[data-state="on"]{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-[state=open]:text-accent-foreground[data-state="open"]{
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-[state=open]:text-muted-foreground[data-state="open"]{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-[disabled=true]:opacity-50[data-disabled="true"]{
opacity: 0.5;
}

.data-[disabled]:opacity-50[data-disabled]{
opacity: 0.5;
}

.data-[state=open]:opacity-100[data-state="open"]{
opacity: 1;
}

.data-[state=active]:shadow-sm[data-state="active"]{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-[swipe=move]:transition-none[data-swipe="move"]{
transition-property: none;
}

.data-[state=closed]:duration-300[data-state="closed"]{
transition-duration: 300ms;
}

.data-[state=open]:duration-500[data-state="open"]{
transition-duration: 500ms;
}

.data-[motion^=from-]:animate-in[data-motion^="from-"]{
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}

.data-[state=open]:animate-in[data-state="open"]{
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}

.data-[state=visible]:animate-in[data-state="visible"]{
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}

.data-[motion^=to-]:animate-out[data-motion^="to-"]{
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}

.data-[state=closed]:animate-out[data-state="closed"]{
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}

.data-[state=hidden]:animate-out[data-state="hidden"]{
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}

.data-[swipe=end]:animate-out[data-swipe="end"]{
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}

.data-[motion^=from-]:fade-in[data-motion^="from-"]{
--tw-enter-opacity: 0;
}

.data-[motion^=to-]:fade-out[data-motion^="to-"]{
--tw-exit-opacity: 0;
}

.data-[state=closed]:fade-out-0[data-state="closed"]{
--tw-exit-opacity: 0;
}

.data-[state=closed]:fade-out-80[data-state="closed"]{
--tw-exit-opacity: 0.8;
}

.data-[state=hidden]:fade-out[data-state="hidden"]{
--tw-exit-opacity: 0;
}

.data-[state=open]:fade-in-0[data-state="open"]{
--tw-enter-opacity: 0;
}

.data-[state=visible]:fade-in[data-state="visible"]{
--tw-enter-opacity: 0;
}

.data-[state=closed]:zoom-out-95[data-state="closed"]{
--tw-exit-scale: .95;
}

.data-[state=open]:zoom-in-90[data-state="open"]{
--tw-enter-scale: .9;
}

.data-[state=open]:zoom-in-95[data-state="open"]{
--tw-enter-scale: .95;
}

.data-[motion=from-end]:slide-in-from-right-52[data-motion="from-end"]{
--tw-enter-translate-x: 13rem;
}

.data-[motion=from-start]:slide-in-from-left-52[data-motion="from-start"]{
--tw-enter-translate-x: -13rem;
}

.data-[motion=to-end]:slide-out-to-right-52[data-motion="to-end"]{
--tw-exit-translate-x: 13rem;
}

.data-[motion=to-start]:slide-out-to-left-52[data-motion="to-start"]{
--tw-exit-translate-x: -13rem;
}

.data-[side=bottom]:slide-in-from-top-2[data-side="bottom"]{
--tw-enter-translate-y: -0.5rem;
}

.data-[side=left]:slide-in-from-right-2[data-side="left"]{
--tw-enter-translate-x: 0.5rem;
}

.data-[side=right]:slide-in-from-left-2[data-side="right"]{
--tw-enter-translate-x: -0.5rem;
}

.data-[side=top]:slide-in-from-bottom-2[data-side="top"]{
--tw-enter-translate-y: 0.5rem;
}

.data-[state=closed]:slide-out-to-bottom[data-state="closed"]{
--tw-exit-translate-y: 100%;
}

.data-[state=closed]:slide-out-to-left[data-state="closed"]{
--tw-exit-translate-x: -100%;
}

.data-[state=closed]:slide-out-to-left-1/2[data-state="closed"]{
--tw-exit-translate-x: -50%;
}

.data-[state=closed]:slide-out-to-right[data-state="closed"]{
--tw-exit-translate-x: 100%;
}

.data-[state=closed]:slide-out-to-right-full[data-state="closed"]{
--tw-exit-translate-x: 100%;
}

.data-[state=closed]:slide-out-to-top[data-state="closed"]{
--tw-exit-translate-y: -100%;
}

.data-[state=closed]:slide-out-to-top-[48%][data-state="closed"]{
--tw-exit-translate-y: -48%;
}

.data-[state=open]:slide-in-from-bottom[data-state="open"]{
--tw-enter-translate-y: 100%;
}

.data-[state=open]:slide-in-from-left[data-state="open"]{
--tw-enter-translate-x: -100%;
}

.data-[state=open]:slide-in-from-left-1/2[data-state="open"]{
--tw-enter-translate-x: -50%;
}

.data-[state=open]:slide-in-from-right[data-state="open"]{
--tw-enter-translate-x: 100%;
}

.data-[state=open]:slide-in-from-top[data-state="open"]{
--tw-enter-translate-y: -100%;
}

.data-[state=open]:slide-in-from-top-[48%][data-state="open"]{
--tw-enter-translate-y: -48%;
}

.data-[state=open]:slide-in-from-top-full[data-state="open"]{
--tw-enter-translate-y: -100%;
}

.data-[state=closed]:duration-300[data-state="closed"]{
animation-duration: 300ms;
}

.data-[state=open]:duration-500[data-state="open"]{
animation-duration: 500ms;
}

.data-[panel-group-direction=vertical]:after:left-0[data-panel-group-direction="vertical"]::after{
content: var(--tw-content);
left: 0px;
}

.data-[panel-group-direction=vertical]:after:h-1[data-panel-group-direction="vertical"]::after{
content: var(--tw-content);
height: 0.25rem;
}

.data-[panel-group-direction=vertical]:after:w-full[data-panel-group-direction="vertical"]::after{
content: var(--tw-content);
width: 100%;
}

.data-[panel-group-direction=vertical]:after:-translate-y-1/2[data-panel-group-direction="vertical"]::after{
content: var(--tw-content);
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[panel-group-direction=vertical]:after:translate-x-0[data-panel-group-direction="vertical"]::after{
content: var(--tw-content);
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-[state=open]:hover:bg-accent:hover[data-state="open"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-[state=open]:hover:bg-sidebar-accent:hover[data-state="open"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar-accent) / var(--tw-bg-opacity, 1));
}

.data-[state=open]:hover:text-sidebar-accent-foreground:hover[data-state="open"]{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.data-[state=open]:focus:bg-accent:focus[data-state="open"]{
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.group[data-collapsible="offcanvas"] .group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]{
left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]{
right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-[side=left]:-right-4{
right: -1rem;
}

.group[data-side="right"] .group-data-[side=right]:left-0{
left: 0px;
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:-mt-8{
margin-top: -2rem;
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:hidden{
display: none;
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4))]{
width: calc(var(--sidebar-width-icon) + var(--spacing-4));
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4)+2px)]{
width: calc(var(--sidebar-width-icon) + var(--spacing-4) + 2px);
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]{
width: var(--sidebar-width-icon);
}

.group[data-collapsible="offcanvas"] .group-data-[collapsible=offcanvas]:w-0{
width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-[collapsible=offcanvas]:translate-x-0{
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-[side=right]:rotate-180{
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-[state=open]:rotate-180{
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:overflow-hidden{
overflow: hidden;
}

.group[data-variant="floating"] .group-data-[variant=floating]:rounded-lg{
border-radius: .5625rem;
}

.group[data-variant="floating"] .group-data-[variant=floating]:border{
border-width: 1px;
}

.group[data-side="left"] .group-data-[side=left]:border-r{
border-right-width: 1px;
}

.group[data-side="right"] .group-data-[side=right]:border-l{
border-left-width: 1px;
}

.group[data-variant="floating"] .group-data-[variant=floating]:border-sidebar-border{
--tw-border-opacity: 1;
border-color: hsl(var(--sidebar-border) / var(--tw-border-opacity, 1));
}

.group[data-collapsible="icon"] .group-data-[collapsible=icon]:opacity-0{
opacity: 0;
}

.group[data-variant="floating"] .group-data-[variant=floating]:shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[data-collapsible="offcanvas"] .group-data-[collapsible=offcanvas]:after:left-full::after{
content: var(--tw-content);
left: 100%;
}

.group[data-collapsible="offcanvas"] .hover:group-data-[collapsible=offcanvas]:bg-sidebar:hover{
--tw-bg-opacity: 1;
background-color: hsl(var(--sidebar) / var(--tw-bg-opacity, 1));
}

.peer/menu-button[data-size="default"] ~ .peer-data-[size=default]/menu-button:top-1.5{
top: 0.375rem;
}

.peer/menu-button[data-size="lg"] ~ .peer-data-[size=lg]/menu-button:top-2.5{
top: 0.625rem;
}

.peer/menu-button[data-size="sm"] ~ .peer-data-[size=sm]/menu-button:top-1{
top: 0.25rem;
}

.peer/menu-button[data-active="true"] ~ .peer-data-[active=true]/menu-button:text-sidebar-accent-foreground{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.dark:border-destructive:is(.dark *){
--tw-border-opacity: 1;
border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
}

.dark:after:border-white/10:is(.dark *)::after{
content: var(--tw-content);
border-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 640px){

.sm:bottom-0{
bottom: 0px;
}

.sm:right-0{
right: 0px;
}

.sm:top-auto{
top: auto;
}

.sm:mt-0{
margin-top: 0px;
}

.sm:flex{
display: flex;
}

.sm:max-w-sm{
max-width: 24rem;
}

.sm:flex-row{
flex-direction: row;
}

.sm:flex-col{
flex-direction: column;
}

.sm:justify-end{
justify-content: flex-end;
}

.sm:gap-2.5{
gap: 0.625rem;
}

.sm:space-x-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.sm:space-x-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.sm:space-y-0 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.sm:rounded-lg{
border-radius: .5625rem;
}

.sm:px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.sm:text-left{
text-align: left;
}

.data-[state=open]:sm:slide-in-from-bottom-full[data-state="open"]{
--tw-enter-translate-y: 100%;
}
}

@media (min-width: 768px){

.md:absolute{
position: absolute;
}

.md:block{
display: block;
}

.md:flex{
display: flex;
}

.md:w-[var(--radix-navigation-menu-viewport-width)]{
width: var(--radix-navigation-menu-viewport-width);
}

.md:w-auto{
width: auto;
}

.md:max-w-[420px]{
max-width: 420px;
}

.md:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md:text-sm{
font-size: 0.875rem;
line-height: 1.25rem;
}

.md:opacity-0{
opacity: 0;
}

.md:after:hidden::after{
content: var(--tw-content);
display: none;
}

.peer[data-variant="inset"] ~ .md:peer-data-[variant=inset]:m-2{
margin: 0.5rem;
}

.peer[data-variant="inset"] ~ .md:peer-data-[variant=inset]:ml-0{
margin-left: 0px;
}

.peer[data-variant="inset"][data-state="collapsed"] ~ .md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2{
margin-left: 0.5rem;
}

.peer[data-variant="inset"] ~ .md:peer-data-[variant=inset]:rounded-xl{
border-radius: 0.75rem;
}

.peer[data-variant="inset"] ~ .md:peer-data-[variant=inset]:shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
}

@media (min-width: 1024px){

.lg:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg:px-8{
padding-left: 2rem;
padding-right: 2rem;
}
}

.[&:has([aria-selected])]:bg-accent:has([aria-selected]){
--tw-bg-opacity: 1;
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.first:[&:has([aria-selected])]:rounded-l-md:has([aria-selected]):first-child{
border-top-left-radius: .375rem;
border-bottom-left-radius: .375rem;
}

.last:[&:has([aria-selected])]:rounded-r-md:has([aria-selected]):last-child{
border-top-right-radius: .375rem;
border-bottom-right-radius: .375rem;
}

.[&:has([aria-selected].day-outside)]:bg-accent/50:has([aria-selected].day-outside){
background-color: hsl(var(--accent) / 0.5);
}

.[&:has([aria-selected].day-range-end)]:rounded-r-md:has([aria-selected].day-range-end){
border-top-right-radius: .375rem;
border-bottom-right-radius: .375rem;
}

.[&:has([role=checkbox])]:pr-0:has([role=checkbox]){
padding-right: 0px;
}

.[&>button]:hidden>button{
display: none;
}

.[&>span:last-child]:truncate>span:last-child{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.[&>span]:line-clamp-1>span{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}

.[&>svg+div]:translate-y-[-3px]>svg+div{
--tw-translate-y: -3px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.[&>svg]:absolute>svg{
position: absolute;
}

.[&>svg]:left-4>svg{
left: 1rem;
}

.[&>svg]:top-4>svg{
top: 1rem;
}

.[&>svg]:size-4>svg{
width: 1rem;
height: 1rem;
}

.[&>svg]:h-2.5>svg{
height: 0.625rem;
}

.[&>svg]:h-3>svg{
height: 0.75rem;
}

.[&>svg]:h-3.5>svg{
height: 0.875rem;
}

.[&>svg]:h-4>svg{
height: 1rem;
}

.[&>svg]:w-2.5>svg{
width: 0.625rem;
}

.[&>svg]:w-3>svg{
width: 0.75rem;
}

.[&>svg]:w-3.5>svg{
width: 0.875rem;
}

.[&>svg]:w-4>svg{
width: 1rem;
}

.[&>svg]:shrink-0>svg{
flex-shrink: 0;
}

.[&>svg]:text-destructive>svg{
--tw-text-opacity: 1;
color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
}

.[&>svg]:text-foreground>svg{
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.[&>svg]:text-muted-foreground>svg{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.[&>svg]:text-sidebar-accent-foreground>svg{
--tw-text-opacity: 1;
color: hsl(var(--sidebar-accent-foreground) / var(--tw-text-opacity, 1));
}

.[&>svg~*]:pl-7>svg~*{
padding-left: 1.75rem;
}

.[&>tr]:last:border-b-0:last-child>tr{
border-bottom-width: 0px;
}

.[&[data-panel-group-direction=vertical]>div]:rotate-90[data-panel-group-direction=vertical]>div{
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.[&[data-state=open]>svg]:rotate-180[data-state=open]>svg{
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground .recharts-cartesian-axis-tick text{
fill: hsl(var(--muted-foreground) / 1);
}

.[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 .recharts-cartesian-grid line[stroke='#ccc']{
stroke: hsl(var(--border) / 0.5);
}

.[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border .recharts-curve.recharts-tooltip-cursor{
stroke: hsl(var(--border) / 1);
}

.[&_.recharts-dot[stroke='#fff']]:stroke-transparent .recharts-dot[stroke='#fff']{
stroke: transparent;
}

.[&_.recharts-layer]:outline-none .recharts-layer{
outline: 2px solid transparent;
outline-offset: 2px;
}

.[&.recharts-polar-grid[stroke='#ccc']]:stroke-border .recharts-polar-grid [stroke='#ccc']{
stroke: hsl(var(--border) / 1);
}

.[&_.recharts-radial-bar-background-sector]:fill-muted .recharts-radial-bar-background-sector{
fill: hsl(var(--muted) / 1);
}

.[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted .recharts-rectangle.recharts-tooltip-cursor{
fill: hsl(var(--muted) / 1);
}

.[&.recharts-reference-line[stroke='#ccc']]:stroke-border .recharts-reference-line [stroke='#ccc']{
stroke: hsl(var(--border) / 1);
}

.[&_.recharts-sector[stroke='#fff']]:stroke-transparent .recharts-sector[stroke='#fff']{
stroke: transparent;
}

.[&_.recharts-sector]:outline-none .recharts-sector{
outline: 2px solid transparent;
outline-offset: 2px;
}

.[&_.recharts-surface]:outline-none .recharts-surface{
outline: 2px solid transparent;
outline-offset: 2px;
}

.[&_[cmdk-group-heading]]:px-2 [cmdk-group-heading]{
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.[&_[cmdk-group-heading]]:py-1.5 [cmdk-group-heading]{
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}

.[&_[cmdk-group-heading]]:text-xs [cmdk-group-heading]{
font-size: 0.75rem;
line-height: 1rem;
}

.[&_[cmdk-group-heading]]:font-medium [cmdk-group-heading]{
font-weight: 500;
}

.[&_[cmdk-group-heading]]:text-muted-foreground [cmdk-group-heading]{
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.[&[cmdk-group]:not([hidden])~[cmdk-group]]:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{
padding-top: 0px;
}

.[&_[cmdk-group]]:px-2 [cmdk-group]{
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.[&_[cmdk-input-wrapper]_svg]:h-5 [cmdk-input-wrapper] svg{
height: 1.25rem;
}

.[&_[cmdk-input-wrapper]_svg]:w-5 [cmdk-input-wrapper] svg{
width: 1.25rem;
}

.[&_[cmdk-input]]:h-12 [cmdk-input]{
height: 3rem;
}

.[&_[cmdk-item]]:px-2 [cmdk-item]{
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.[&_[cmdk-item]]:py-3 [cmdk-item]{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}

.[&_[cmdk-item]_svg]:h-5 [cmdk-item] svg{
height: 1.25rem;
}

.[&_[cmdk-item]_svg]:w-5 [cmdk-item] svg{
width: 1.25rem;
}

.[&_p]:leading-relaxed p{
line-height: 1.625;
}

.[&_svg]:pointer-events-none svg{
pointer-events: none;
}

.[&_svg]:size-4 svg{
width: 1rem;
height: 1rem;
}

.[&_svg]:shrink-0 svg{
flex-shrink: 0;
}

.[&_tr:last-child]:border-0 tr:last-child{
border-width: 0px;
}

.[&_tr]:border-b tr{
border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .[[data-side=left][data-collapsible=offcanvas]_&]:-right-2{
right: -0.5rem;
}

[data-side=left][data-state=collapsed] .[[data-side=left][data-state=collapsed]_&]:cursor-e-resize{
cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .[[data-side=right][data-collapsible=offcanvas]_&]:-left-2{
left: -0.5rem;
}

[data-side=right][data-state=collapsed] .[[data-side=right][data-state=collapsed]_&]:cursor-w-resize{
cursor: w-resize;
}
</style>

<script type="module" src="/src/main.tsx?v=jZh0l6zcqM2BnRZHCTtT7"></script> <script src="https://replit-cdn.com/replit-pill/replit-pill.global.js" data-repl-id="96a449db-8baf-4376-9fa9-07160c545d13"></script>

This is a temporary development preview, and these links are not for public use. Deploy your app for secure sharing or use an invite link.

ប្រព័ន្ធគ្រប់គ្រងពិន្ទុសិស្ស ២០២៦

ជ្រើសរើសខែ កញ្ញាតុលាវិច្ឆិកាធ្នូមករាកុម្ភៈមីនាមេសាឧសភាមិថុនាកក្កដាសីហា

ជ្រើសរើសថ្នាក់ គ្រប់ថ្នាក់2K3K5A1A2A2B3A3B4A4B5B6A

ស្វែងរក

ទាញយកទិន្នន័យ

របាយការណ៍ PDF

សរុប: 40 នាក់ ស្រី: 26 នាក់

បានបញ្ចូលពិន្ទុ: 0

ល.រ	អត្តលេខ	ឈ្មោះសិស្ស	ភេទ	ថ្នាក់	មធ្យមភាគ	និទ្ទេស	សកម្មភាព
1	2026-0001	ក្អី សាវដា	ស្រី	2K	-	-	បញ្ចូល
2	2026-0002	គឿន នុនណារ៉ុង	ប្រុស	2K	-	-	បញ្ចូល
3	2026-0003	ខៀវ នារីរ័ត្ន	ស្រី	2K	-	-	បញ្ចូល
4	2026-0004	ឈួត លីឈិញ	ស្រី	2K	-	-	បញ្ចូល
5	2026-0005	ឈាន យូប៊ីន	ស្រី	2K	-	-	បញ្ចូល
6	2026-0006	តុល រ៉ាហ្វា	ស្រី	2K	-	-	បញ្ចូល
7	2026-0007	ទូច សុចាន់	ប្រុស	2K	-	-	បញ្ចូល
8	2026-0008	ធី ប៉េម	ស្រី	2K	-	-	បញ្ចូល
9	2026-0009	ធី វ៉ាត់ថាណា	ប្រុស	2K	-	-	បញ្ចូល
10	2026-0010	នេម ដាវ៉ាន់	ស្រី	2K	-	-	បញ្ចូល
11	2026-0011	នេម ដាវី	ស្រី	2K	-	-	បញ្ចូល
12	2026-0012	ផង់ ជំពូ	ស្រី	2K	-	-	បញ្ចូល
13	2026-0013	ភាព ឌីយ៉ា	ស្រី	2K	-	-	បញ្ចូល
14	2026-0014	ម៉ៅ ម៉េងសៀ	ប្រុស	2K	-	-	បញ្ចូល
15	2026-0015	យឿត កល្យាណ	ស្រី	2K	-	-	បញ្ចូល
16	2026-0016	រ៉ើន ជីដូ	ប្រុស	2K	-	-	បញ្ចូល
17	2026-0017	រ៉ាន់ ភារម្យ	ប្រុស	2K	-	-	បញ្ចូល
18	2026-0018	រ៉ឺន ចេស្តា	ប្រុស	2K	-	-	បញ្ចូល
19	2026-0019	រ៉ូ វាសនា	ប្រុស	2K	-	-	បញ្ចូល
20	2026-0020	លឺត លីកា	ស្រី	2K	-	-	បញ្ចូល
21	2026-0021	វ៉ៃ ជីវ៉ា	ស្រី	2K	-	-	បញ្ចូល
22	2026-0022	សឺ ចេស្ដា	ប្រុស	2K	-	-	បញ្ចូល
23	2026-0023	ស៊ីច ចាន់ណាផា	ស្រី	2K	-	-	បញ្ចូល
24	2026-0024	សាមៀត ម៉ៃធីតា	ស្រី	2K	-	-	បញ្ចូល
25	2026-0025	ស៊ី សាកូរ៉ា	ស្រី	2K	-	-	បញ្ចូល
26	2026-0026	សឺត សក្ដា	ប្រុស	2K	-	-	បញ្ចូល
27	2026-0027	សាង នីសា	ស្រី	2K	-	-	បញ្ចូល
28	2026-0028	សម្បត្តិ ចាន់នា	ស្រី	2K	-	-	បញ្ចូល
29	2026-0029	សាលឿម ហ្វីហ្វា	ប្រុស	2K	-	-	បញ្ចូល
30	2026-0030	សេង ចាន់ត្រា	ស្រី	2K	-	-	បញ្ចូល
31	2026-0031	ហៀប ម៉ូលីតា	ស្រី	2K	-	-	បញ្ចូល
32	2026-0032	រ៉ុន រស្មី	ប្រុស	2K	-	-	បញ្ចូល
33	2026-0033	អឺម កានយ៉ា	ស្រី	2K	-	-	បញ្ចូល
34	2026-0034	អ៊ី សិទិ្ធកា	ស្រី	2K	-	-	បញ្ចូល
35	2026-0035	សារ៉ាត់ សុផានីន	ប្រុស	2K	-	-	បញ្ចូល
36	2026-0036	រ៉ោ ជីលីកា	ស្រី	2K	-	-	បញ្ចូល
37	2026-0037	ម៉ុន បួសុគន្ធធានី	ស្រី	2K	-	-	បញ្ចូល
38	2026-0038	ម៉ៅ លីតា	ស្រី	2K	-	-	បញ្ចូល
39	2026-0039	ចាន់ ថៃ	ប្រុស	2K	-	-	បញ្ចូល
40	2026-0040	វ៉ាន់ ណារីតា	ស្រី	2K	-	-	បញ្ចូល

 

 

សរុប: 0.00 មធ្យមភាគ: 0.00 និទ្ទេស: -

រក្សាទុកសម្អាតបិទ

<script>

const SUBJECTS = ["អាន", "និយាយ", "សរសេរ", "ស្ដាប់", "ចំនួន", "រង្វាស់", "ពីជគណិត", "ស្ថិតិ", "ធរណី", "វិទ្យា", "សង្គម", "កាយ", "សុខភាព", "សិល្បៈ", "បំណិន", "បរទេស"];
let activeId = null;

function showToast(message) {
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);
}

function calculateLiveScore() {
const inputs = document.querySelectorAll('.score-input');
const scores = Array.from(inputs).map(inp => Number(inp.value) || 0);
const total = scores.reduce((a, b) => a + b, 0);
const avg = (total / 16).toFixed(2);

let grade = "F";
if (avg >= 9) grade = "A"; 
else if (avg >= 8) grade = "B"; 
else if (avg >= 7) grade = "C"; 
else if (avg >= 6) grade = "D"; 
else if (avg >= 5) grade = "E";

document.getElementById('totalScore').textContent = total.toFixed(2);
document.getElementById('avgScore').textContent = avg;
document.getElementById('gradeLabel').textContent = grade;

}

function renderStudentList() {
const classVal = document.getElementById('classFilter').value;
const searchVal = document.getElementById('nameSearch').value.toLowerCase();
const month = document.getElementById('monthSelect').value;
const tbody = document.getElementById('studentTableBody');
tbody.innerHTML = '';

const filtered = STUDENTS.filter(s => 
  (classVal === 'All' || s.class === classVal) && 
  (s.name.toLowerCase().includes(searchVal) || s.id.includes(searchVal))
);

let femaleCount = 0;
let scoredCount = 0;

filtered.forEach((s, i) => {
  if (s.gender === 'ស្រី') femaleCount++;
  const saved = JSON.parse(localStorage.getItem(`score_${s.id}_${month}`)) || { avg: "-", grade: "-" };
  if (saved.avg !== "-") scoredCount++;
  
  const gradeColor = saved.grade === 'A' ? 'text-green-600' : saved.grade === 'B' ? 'text-blue-600' : saved.grade === 'C' ? 'text-yellow-600' : 'text-red-600';
  
  tbody.innerHTML += `<tr class="hover:bg-blue-50">
    <td class="p-2 border-b">${i+1}</td>
    <td class="p-2 border-b font-mono text-xs">${s.id}</td>
    <td class="p-2 border-b text-left font-medium">${s.name}</td>
    <td class="p-2 border-b">${s.gender}</td>
    <td class="p-2 border-b font-bold">${s.class}</td>
    <td class="p-2 border-b font-bold text-blue-700">${saved.avg}</td>
    <td class="p-2 border-b font-bold ${gradeColor}">${saved.grade}</td>
    <td class="p-2 border-b">
      <button onclick="openForm('${s.id}', '${s.name}')" class="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-800">បញ្ចូល</button>
    </td>
  </tr>`;
});

document.getElementById('totalStudents').textContent = filtered.length;
document.getElementById('femaleStudents').textContent = femaleCount;
document.getElementById('scoredStudents').textContent = scoredCount;

}

function openForm(id, name) {
activeId = id;
const month = document.getElementById('monthSelect').value;
document.getElementById('currentStudentName').innerText = name;
document.getElementById('displayMonth').innerText = "ខែ " + month;
const grid = document.getElementById('subjectGrid');
grid.innerHTML = '';
const saved = JSON.parse(localStorage.getItem(score_${id}_${month})) || { scores: Array(16).fill(0) };

SUBJECTS.forEach((sub, i) => {
  grid.innerHTML += `<div><label class="block text-xs font-bold text-gray-500 mb-1">${sub}</label>
    <input type="number" class="score-input" value="${saved.scores[i]}" step="0.1" min="0" max="10" oninput="calculateLiveScore()"></div>`;
});

document.getElementById('inputForm').classList.remove('hidden');
calculateLiveScore();
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });

}

function clearScores() {
const inputs = document.querySelectorAll('.score-input');
inputs.forEach(inp => inp.value = 0);
calculateLiveScore();
}

function closeForm() {
document.getElementById('inputForm').classList.add('hidden');
}

function saveData() {
const inputs = document.querySelectorAll('.score-input');
const month = document.getElementById('monthSelect').value;
const scores = Array.from(inputs).map(inp => Number(inp.value) || 0);
const total = scores.reduce((a, b) => a + b, 0);
const avg = (total / 16).toFixed(2);

let grade = "F";
if (avg >= 9) grade = "A"; 
else if (avg >= 8) grade = "B"; 
else if (avg >= 7) grade = "C"; 
else if (avg >= 6) grade = "D"; 
else if (avg >= 5) grade = "E";

localStorage.setItem(`score_${activeId}_${month}`, JSON.stringify({ scores, total: total.toFixed(2), avg, grade }));
showToast("រក្សាទុកជោគជ័យ! ✓");
closeForm();
renderStudentList();

}

function exportData() {
const month = document.getElementById('monthSelect').value;
let csvContent = "អត្តលេខ,ឈ្មោះ,ភេទ,ថ្នាក់,សរុប,មធ្យមភាគ,និទ្ទេស\n";

STUDENTS.forEach(s => {
  const saved = JSON.parse(localStorage.getItem(`score_${s.id}_${month}`)) || { total: 0, avg: 0, grade: '-' };
  csvContent += `${s.id},${s.name},${s.gender},${s.class},${saved.total},${saved.avg},${saved.grade}\n`;
});

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `ពិន្ទុសិស្ស_${month}_${new Date().getTime()}.csv`;
link.click();
showToast("ទាញយកជោគជ័យ! ✓");

}

function generateReport() {
const month = document.getElementById('monthSelect').value;
const classVal = document.getElementById('classFilter').value;
if (classVal === 'All') {
showToast("សូមជ្រើសរើសថ្នាក់ជាក់លាក់!");
return;
}

const filtered = STUDENTS.filter(s => s.class === classVal);
let totalSrey = 0;
let stats = { A:0, B:0, C:0, D:0, E:0, F:0 };
let sreyStats = { A:0, B:0, C:0, D:0, E:0, F:0 };

let rows = filtered.map((s, i) => {
  const saved = JSON.parse(localStorage.getItem(`score_${s.id}_${month}`)) || { total:0, avg:0, grade:'F' };
  if (s.gender === 'ស្រី') totalSrey++;
  const g = saved.grade; 
  stats[g]++; 
  if (s.gender === 'ស្រី') sreyStats[g]++;
  return `<tr>
    <td style="border:1px solid #000; padding:6px; text-align:center;">${i+1}</td>
    <td style="border:1px solid #000; padding:6px; text-align:center; font-size:11px;">${s.id}</td>
    <td style="border:1px solid #000; padding:6px; text-align:left;">${s.name}</td>
    <td style="border:1px solid #000; padding:6px; text-align:center;">${s.gender}</td>
    <td style="border:1px solid #000; padding:6px; text-align:center; font-weight:bold;">${saved.total}</td>
    <td style="border:1px solid #000; padding:6px; text-align:center; font-weight:bold;">${saved.avg}</td>
    <td style="border:1px solid #000; padding:6px; text-align:center;">-</td>
    <td style="border:1px solid #000; padding:6px; text-align:center; font-weight:bold;">${saved.grade}</td>
  </tr>`;
}).join('');

const getPc = (n) => filtered.length > 0 ? ((n / filtered.length) * 100).toFixed(0) : 0;
const currentDate = new Date().toLocaleDateString('km-KH', { year: 'numeric', month: 'long', day: 'numeric' });

const reportHTML = `<!DOCTYPE html>

<title>របាយការណ៍ប្រចាំខែ ${month} - ថ្នាក់ ${classVal}</title> <style> @page { margin: 15mm; size: A4; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body { font-family: 'Khmer OS Battambang', sans-serif; margin: 0; padding: 20px; line-height: 1.6; color: #000; } .khmer-moul { font-family: 'Khmer OS Muol Light', serif; } .header { text-align: center; margin-bottom: 20px; } .header h1 { font-size: 16px; margin: 3px 0; font-weight: bold; } .header h2 { font-size: 14px; margin: 3px 0; } .header h3 { font-size: 13px; margin: 3px 0; } .title { text-align: center; margin: 15px 0; } .title h2 { font-size: 15px; font-weight: bold; margin: 5px 0; } table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 12px; border: 2px solid #000; } th { background-color: #d1d5db !important; padding: 8px; text-align: center; border: 1px solid #000 !important; font-weight: bold; -webkit-print-color-adjust: exact; print-color-adjust: exact; } td { padding: 6px; border: 1px solid #000 !important; } .summary { margin: 20px 0; font-size: 12px; } .summary p { margin: 5px 0; } .footer { margin-top: 30px; display: table; width: 100%; font-size: 12px; } .footer-section { display: table-cell; text-align: center; width: 50%; vertical-align: top; } .signature-line { margin-top: 60px; font-weight: bold; } @media print { .no-print { display: none !important; } body { padding: 10px; } table, th, td { border: 1px solid #000 !important; page-break-inside: avoid; } th { background-color: #d1d5db !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>

ព្រះរាជាណាចក្រកម្ពុជា

ជាតិ សាសនា ព្រះមហាក្សត្រ

*****

កម្រង៖ ស្ពានស្រែង

សាលាបឋមសិក្សា រោគ

លទ្ធផលសិក្សាប្រចាំខែ ${month}

ថ្នាក់ទី ${classVal}

${rows}

ល.រ	អត្តលេខ	ឈ្មោះសិស្ស	ភេទ	សរុប	មធ្យមភាគ	ចំណាត់ថ្នាក់	និទ្ទេស

សង្ខេប៖

- បញ្ឈប់បញ្ជីត្រឹមចំនួនសិស្ស ${filtered.length} នាក់ ក្នុងនោះស្រី ${totalSrey} នាក់

- សិស្សនិទ្ទេស A សរុប៖ ${stats.A} នាក់ ក្នុងនោះស្រី ${sreyStats.A} នាក់ ស្មើនឹង ${getPc(stats.A)}%

- សិស្សនិទ្ទេស B សរុប៖ ${stats.B} នាក់ ក្នុងនោះស្រី ${sreyStats.B} នាក់ ស្មើនឹង ${getPc(stats.B)}%

- សិស្សនិទ្ទេស C សរុប៖ ${stats.C} នាក់ ក្នុងនោះស្រី ${sreyStats.C} នាក់ ស្មើនឹង ${getPc(stats.C)}%

- សិស្សនិទ្ទេស D សរុប៖ ${stats.D} នាក់ ក្នុងនោះស្រី ${sreyStats.D} នាក់ ស្មើនឹង ${getPc(stats.D)}%

- សិស្សនិទ្ទេស E សរុប៖ ${stats.E} នាក់ ក្នុងនោះស្រី ${sreyStats.E} នាក់ ស្មើនឹង ${getPc(stats.E)}%

- សិស្សនិទ្ទេស F សរុប៖ ${stats.F} នាក់ ក្នុងនោះស្រី ${sreyStats.F} នាក់ ស្មើនឹង ${getPc(stats.F)}%

បានឃើញ និងឯកភាព

កាលបរិច្ឆេទ៖ .....................

នាយកសាលា

កាលបរិច្ឆេទ៖ ${currentDate}

គ្រូបន្ទុកថ្នាក់

`;

const win = window.open('', '_blank');
win.document.write(reportHTML);
win.document.close();
setTimeout(() => { 
  win.print(); 
  showToast("របាយការណ៍ត្រៀមរួចរាល់! ✓");
}, 1000);

}

window.onload = renderStudentList;
</script>

{ id: '2026-ក្តាម', name: 'កន 17/09/2013', gender: '', class: '1860987' }];
{ id: '2026-ក្តាម', name: 'កាន 17/09/2013', gender: '', class: '1860986' }];
{ id: '2026-ឃួញ', name: 'កែវខ្លិនក្រអូប 28/05/2015', gender: '', class: '1860985' }];
{ id: '2026-រឿង', name: 'ខេមា 12/05/2014', gender: '', class: '1860970' }];

Originally posted by @ubuntong11-spec in devcontainers/spec#690 (comment)

[ubuntong11-spec]

<title>តារាងសម្ភារ និងសង្ហារិម - ប្រព័ន្ធរួម</title> <script src="https://cdn.tailwindcss.com"></script> <style> table { width: 100%; border-collapse: collapse; margin-top: 10px; font-family: Arial, sans-serif; }

    table, th, td {
     border: 2px solid #ddd;
   }
    table td, table th {
     white-space: nowrap;
   }       
   
   th, td {
      padding: 1px 5px;
      line-height: 1.0;
      text-align: left;
  }

    @media print {
        .no-print { display: none !important; }
        @page { margin: 1cm; }
    }
</style>

តារាងសម្ភារ និងសង្ហារិម

ប្រព័ន្ធគ្រប់គ្រងសម្ភារបរិក្ខារពេញលេញ

    <!-- ប៊ូតុងប្តូរប្រព័ន្ធ -->
    <div class="mt-4 flex gap-3 no-print">
        <button onclick="switchSystem('warehouse')" id="btn-warehouse" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-semibold">
            🏢 ប្រព័ន្ធឃ្លាំងផ្ទុក (សន្និធិដើម/ចូល/ចេញ)
        </button>
        <button onclick="switchSystem('simple')" id="btn-simple" class="px-6 py-3 bg-gray-400 text-white rounded-lg hover:bg-gray-500 font-semibold">
            📋 ប្រព័ន្ធធម្មតា (បញ្ជីសម្ភារ)
        </button>
    </div>
</div>

<!-- System 1: Warehouse System -->
<div id="warehouseSystem">
    <div class="bg-white rounded-lg shadow-xl p-6 mb-6">
        <h2 class="text-2xl font-bold text-indigo-800 mb-4">ប្រព័ន្ធគ្រប់គ្រងឃ្លាំងតាមកម្មវិធី</h2>
        
        <div class="mt-4 mb-4 no-print">
            <div class="flex gap-2 items-center mb-3 flex-wrap">
                <label class="font-semibold text-indigo-900">ឃ្លាំង/កម្មវិធី:</label>
                <select id="warehouseSelect" onchange="switchWarehouse()" class="px-4 py-2 border border-indigo-300 rounded-lg bg-white focus:ring-2 focus:ring-indigo-500 flex-1 min-w-[300px]"></select>
                <button onclick="showAddWarehouse()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">➕ បន្ថែមឃ្លាំង</button>
                <button onclick="editWarehouse()" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700">✏️ កែប្រែ</button>
                <button onclick="deleteWarehouse()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">🗑️ លុប</button>
            </div>
        </div>

        <div class="flex gap-2 mt-4 flex-wrap no-print">
            <button onclick="saveWarehouseData()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">💾 រក្សាទុក</button>
            <button onclick="window.print()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">🖨️ បោះពុម្ព</button>
            <button onclick="downloadWarehouseJSON()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">⬇️ JSON</button>
            <button onclick="downloadWarehouseCSV()" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700">⬇️ CSV</button>
            <label class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 cursor-pointer">
                ⬆️ នាំចូល JSON
                <input type="file" accept=".json" onchange="importWarehouseJSON(event)" class="hidden">
            </label>
            <button onclick="showWarehouseAddForm()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">➕ បន្ថែមសម្ភារ</button>
        </div>
    </div>

    <div id="warehouseFormContainer" class="bg-white rounded-lg shadow-lg p-6 mb-6 no-print hidden">
        <h3 class="text-xl font-bold mb-4" id="warehouseFormTitle">បន្ថែមឃ្លាំង/កម្មវិធីថ្មី</h3>
        <div class="grid gap-4">
            <div>
                <label class="block font-semibold mb-2">ឈ្មោះកម្មវិធី:</label>
                <input type="text" id="warehouseName" placeholder="ឧ. កិច្ចដំណើរការរដ្ឋបាល" class="w-full px-3 py-2 border rounded">
            </div>
            <div>
                <label class="block font-semibold mb-2">លេខកូដសម្គាល់:</label>
                <input type="text" id="warehouseCode" placeholder="ឧ. 60028" class="w-full px-3 py-2 border rounded">
            </div>
            <div class="flex gap-2">
                <button onclick="submitWarehouse()" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">រក្សាទុក</button>
                <button onclick="cancelWarehouse()" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">បោះបង់</button>
            </div>
        </div>
    </div>

    <div id="warehouseAddFormContainer" class="bg-white rounded-lg shadow-lg p-6 mb-6 no-print hidden">
        <h3 class="text-xl font-bold mb-4" id="warehouseItemFormTitle">បន្ថែមសម្ភារថ្មី</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="md:col-span-2">
                <label class="block font-semibold mb-2">សម្ភារៈបរិក្ខារ ទំនិញតាមប្រភេទ ខ្នាតទំនិញ និងសញ្ញាសំគាល់:</label>
                <textarea id="whInputDescription" placeholder="បរិយាយលម្អិត..." class="w-full px-3 py-2 border rounded" rows="2"></textarea>
            </div>
            <div>
                <label class="block font-semibold mb-2">ឯកតាគិត:</label>
                <input type="text" id="whInputUnit" placeholder="ឧ. កេស, កញ្ចប់, គ្រឿង..." class="w-full px-3 py-2 border rounded">
            </div>
            
            <div class="md:col-span-3 bg-blue-50 p-4 rounded">
                <h4 class="font-bold text-blue-900 mb-3">សន្និធិដើមឆ្នាំ</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block font-semibold mb-2">ចំនួន:</label>
                        <input type="number" id="whInputOpeningQty" placeholder="0" class="w-full px-3 py-2 border rounded" value="0">
                    </div>
                    <div>
                        <label class="block font-semibold mb-2">តម្លៃរាយ (រៀល):</label>
                        <input type="text" id="whInputOpeningPrice" placeholder="0" class="w-full px-3 py-2 border rounded" value="0">
                    </div>
                    <div>
                        <label class="block font-semibold mb-2">តម្លៃសរុប (រៀល):</label>
                        <input type="text" id="whInputOpeningTotal" placeholder="គណនាស្វ័យប្រវត្តិ" class="w-full px-3 py-2 border rounded bg-gray-100" readonly>
                    </div>
                </div>
            </div>

            <div class="md:col-span-3 bg-green-50 p-4 rounded">
                <h4 class="font-bold text-green-900 mb-3">សន្និធិចូលក្នុងឆ្នាំ</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block font-semibold mb-2">ចំនួន:</label>
                        <input type="number" id="whInputInQty" placeholder="0" class="w-full px-3 py-2 border rounded" value="0">
                    </div>
                    <div>
                        <label class="block font-semibold mb-2">តម្លៃរាយ (រៀល):</label>
                        <input type="text" id="whInputInPrice" placeholder="0" class="w-full px-3 py-2 border rounded" value="0">
                    </div>
                    <div>
                        <label class="block font-semibold mb-2">តម្លៃសរុប (រៀល):</label>
                        <input type="text" id="whInputInTotal" placeholder="គណនាស្វ័យប្រវត្តិ" class="w-full px-3 py-2 border rounded bg-gray-100" readonly>
                    </div>
                </div>
            </div>

            <div class="md:col-span-3 bg-red-50 p-4 rounded">
                <h4 class="font-bold text-red-900 mb-3">សន្និធិចេញក្នុងឆ្នាំ</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block font-semibold mb-2">ចំនួន:</label>
                        <input type="number" id="whInputOutQty" placeholder="0" class="w-full px-3 py-2 border rounded" value="0">
                    </div>
                    <div>
                        <label class="block font-semibold mb-2">តម្លៃរាយ (រៀល):</label>
                        <input type="text" id="whInputOutPrice" placeholder="0" class="w-full px-3 py-2 border rounded" value="0">
                    </div>
                    <div>
                        <label class="block font-semibold mb-2">តម្លៃសរុប (រៀល):</label>
                        <input type="text" id="whInputOutTotal" placeholder="គណនាស្វ័យប្រវត្តិ" class="w-full px-3 py-2 border rounded bg-gray-100" readonly>
                    </div>
                </div>
            </div>

            <div class="md:col-span-3 flex gap-2">
                <button onclick="submitWarehouseItemForm()" class="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700">រក្សាទុក</button>
                <button onclick="cancelWarehouseItemForm()" class="px-6 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">បោះបង់</button>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-lg mb-6">
        <div class="p-6">
            <div id="currentWarehouseInfo" class="mb-4 p-4 bg-indigo-50 rounded-lg"></div>
            
            <div class="mb-4 no-print">
                <input type="text" id="whSearchInput" placeholder="🔍 ស្វែងរក..." onkeyup="filterWarehouseData()" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>

            <div class="overflow-x-auto rounded-lg border border-gray-200">
                <table class="w-full text-sm" id="warehouseInventoryTable">
                    <thead class="bg-indigo-600 text-white">
                        <tr>
                            <th class="px-3 py-3 text-center border-r border-indigo-400" rowspan="2">ល.រ</th>
                            <th class="px-3 py-3 text-left border-r border-indigo-400" rowspan="2">សម្ភារៈបរិក្ខារ ទំនិញតាមប្រភេទ ខ្នាតទំនិញ និងសញ្ញាសំគាល់</th>
                            <th class="px-3 py-3 text-center border-r border-indigo-400" rowspan="2">ឯកតាគិត</th>
                            <th class="px-3 py-3 text-center border-r border-indigo-400" colspan="3">សន្និធិដើមឆ្នាំ</th>
                            <th class="px-3 py-3 text-center border-r border-indigo-400" colspan="3">សន្និធិចូលក្នុងឆ្នាំ</th>
                            <th class="px-3 py-3 text-center border-r border-indigo-400" colspan="3">សន្និធិចេញក្នុងឆ្នាំ</th>
                            <th class="px-3 py-3 text-center no-print" rowspan="2">សកម្មភាព</th>
                        </tr>
                        <tr class="bg-indigo-500">
                            <th class="px-3 py-2 text-center border-r border-indigo-400">ចំនួន</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">តម្លៃរាយ(៛)</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">តម្លៃសរុប(៛)</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">ចំនួន</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">តម្លៃរាយ(៛)</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">តម្លៃសរុប(៛)</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">ចំនួន</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">តម្លៃរាយ(៛)</th>
                            <th class="px-3 py-2 text-center border-r border-indigo-400">តម្លៃសរុប(៛)</th>
                        </tr>
                    </thead>
                    <tbody id="warehouseInventoryBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- System 2: Simple System -->
<div id="simpleSystem" class="hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 mb-6">
        <h2 class="text-2xl font-bold text-indigo-800 mb-4">ប្រព័ន្ធគ្រប់គ្រងសម្ភារធម្មតា</h2>
        
        <div class="flex gap-2 mt-4 flex-wrap no-print">
            <button onclick="saveSimpleData()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">💾 រក្សាទុក</button>
            <button onclick="window.print()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">🖨️ បោះពុម្ព</button>
            <button onclick="downloadSimpleJSON()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">⬇️ JSON</button>
            <button onclick="downloadSimpleCSV()" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700">⬇️ CSV</button>
            <label class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 cursor-pointer">
                ⬆️ នាំចូល JSON
                <input type="file" accept=".json" onchange="importSimpleJSON(event)" class="hidden">
            </label>
            <button onclick="showSimpleAddForm()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">➕ បន្ថែមថ្មី</button>
        </div>
    </div>

    <div id="simpleAddFormContainer" class="bg-white rounded-lg shadow-lg p-6 mb-6 no-print hidden">
        <h3 class="text-xl font-bold mb-4" id="simpleFormTitle">បន្ថែមថ្មី</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <select id="simpleInputType" class="px-3 py-2 border rounded">
                <option value="MOB">MOB</option>
                <option value="MBU">MBU</option>
                <option value="MIN">MIN</option>
            </select>
            <input type="text" id="simpleInputDescription" placeholder="បរិយាយ" class="px-3 py-2 border rounded" />
            <input type="number" id="simpleInputYear" placeholder="ឆ្នាំ" class="px-3 py-2 border rounded" />
            <input type="text" id="simpleInputUser" placeholder="ឈ្មោះអ្នកប្រើ" class="px-3 py-2 border rounded" />
            <input type="number" id="simpleInputQuantity" placeholder="បរិមាណ" class="px-3 py-2 border rounded" />
            <input type="text" id="simpleInputPrice" placeholder="តម្លៃ" class="px-3 py-2 border rounded" />
            <select id="simpleInputStatus" class="px-3 py-2 border rounded">
                <option value="ល្អ">ល្អ</option>
                <option value="មធ្យម">មធ្យម</option>
                <option value="អន់">អន់</option>
                <option value="ខូច">ខូច</option>
            </select>
            <div class="flex gap-2">
                <button onclick="submitSimpleForm()" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">រក្សាទុក</button>
                <button onclick="cancelSimpleForm()" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">បោះបង់</button>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-lg mb-6">
        <div class="flex border-b no-print">
            <button onclick="switchSimpleTab('inventory')" id="simple-tab-inventory" class="px-6 py-4 font-semibold bg-indigo-600 text-white">
                📋 តារាងសម្ភារ និងសង្ហារិម
            </button>
            <button onclick="switchSimpleTab('yearly')" id="simple-tab-yearly" class="px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50">
                📈 តារាងសម្ភារកើនក្នុងឆ្នាំ
            </button>
            <button onclick="switchSimpleTab('tracking')" id="simple-tab-tracking" class="px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50">
                📊 តារាងតាមដាន
            </button>
        </div>

        <div class="p-6">
            <div id="simpleInventoryTab">
                <div class="mb-4 flex gap-4 no-print">
                    <input type="text" id="simpleSearchInput" placeholder="🔍 ស្វែងរក..." onkeyup="filterSimpleData()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg" />
                    <select id="simpleYearFilter" onchange="filterSimpleData()" class="px-4 py-2 border border-gray-300 rounded-lg">
                        <option value="all">ឆ្នាំទាំងអស់</option>
                    </select>
                </div>
                <div class="overflow-x-auto rounded-lg border border-gray-200">
                    <table class="w-full" id="simpleInventoryTable">
                        <thead class="bg-indigo-600 text-white">
                            <tr>
                                <th class="px-4 py-3 text-left">ល.រ</th>
                                <th class="px-4 py-3 text-left">តាមប្រភេទ</th>
                                <th class="px-4 py-3 text-left">បរិយាយ</th>
                                <th class="px-4 py-3 text-left">ប្រើប្រាស់ពីឆ្នាំ</th>
                                <th class="px-4 py-3 text-left">ឈ្មោះអ្នកប្រើ</th>
                                <th class="px-4 py-3 text-right">បរិមាណ</th>
                                <th class="px-4 py-3 text-right">តម្លៃ(រៀល)</th>
                                <th class="px-4 py-3 text-center">ស្ថានភាព</th>
                                <th class="px-4 py-3 text-center no-print">សកម្មភាព</th>
                            </tr>
                        </thead>
                        <tbody id="simpleInventoryBody"></tbody>
                    </table>
                </div>
            </div>

            <div id="simpleYearlyTab" class="hidden"></div>
            <div id="simpleTrackingTab" class="hidden"></div>
        </div>
    </div>
</div>

<script> // Global state let currentSystem = 'warehouse'; // Warehouse System Data let warehouses = {}; let currentWarehouseId = null; let editingWarehouseId = null; let editingWarehouseItemId = null; // Simple System Data let simpleEquipmentData = []; let editingSimpleId = null; const defaultWarehouses = { 'wh1': { id: 'wh1', name: 'I. កិច្ចដំណើរការរដ្ឋបាល', code: '60028', items: [ { id: 1, description: "កាវATM", unit: "ដប", opening: { qty: 0, price: "8000" }, in: { qty: 13, price: "8000" }, out: { qty: 0, price: "8000" } }, { id: 2, description: "កាវបិតថ្លា ៥០មល", unit: "ដប", opening: { qty: 0, price: "4000" }, in: { qty: 13, price: "4000" }, out: { qty: 0, price: "4000" } }, { id: 3, description: "កាវបិតថ្លា ៥០មល", unit: "ដប", opening: { qty: 0, price: "3000" }, in: { qty: 20, price: "3000" }, out: { qty: 0, price: "3000" } }, { id: 4, description: "ក្រដាស excellent", unit: "ដុំ", opening: { qty: 0, price: "18000" }, in: { qty: 7, price: "18000" }, out: { qty: 0, price: "18000" } }, { id: 5, description: "ក្រដាស statjet", unit: "ដុំ", opening: { qty: 0, price: "19000" }, in: { qty: 4, price: "19000" }, out: { qty: 0, price: "19000" } }, { id: 6, description: "ក្រដាស statjet", unit: "ដុំ", opening: { qty: 0, price: "19700" }, in: { qty: 2, price: "19700" }, out: { qty: 0, price: "19700" } }, { id: 7, description: "ក្រដាសរ៉ាមDoubble A", unit: "កេស", opening: { qty: 0, price: "60000" }, in: { qty: 4, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 8, description: "ក្រដាសរ៉ាមDouble A", unit: "កេស", opening: { qty: 0, price: "65000" }, in: { qty: 11, price: "65000" }, out: { qty: 0, price: "65000" } }, { id: 9, description: "ក្រូណូដាក់ឯកសារ ទំហំA4", unit: "ផ្ទាំង", opening: { qty: 0, price: "15000" }, in: { qty: 1, price: "15000" }, out: { qty: 0, price: "15000" } }, { id: 10, description: "ក្រូណូដាក់ឯកសារ(៦)", unit: "ដុំ", opening: { qty: 0, price: "70000" }, in: { qty: 1, price: "70000" }, out: { qty: 0, price: "70000" } }, { id: 11, description: "ក្រូណូដាក់ឯកសារ(៦)", unit: "ដុំ", opening: { qty: 0, price: "63300" }, in: { qty: 1, price: "63300" }, out: { qty: 0, price: "63300" } }, { id: 12, description: "ឃ្នាបខ្មៅ 15mm", unit: "ប្រអប់", opening: { qty: 0, price: "23500" }, in: { qty: 2, price: "23500" }, out: { qty: 0, price: "23500" } }, { id: 13, description: "ឃ្នាបខ្មៅ 15mm", unit: "ប្រអប់", opening: { qty: 0, price: "8000" }, in: { qty: 4, price: "8000" }, out: { qty: 0, price: "8000" } }, { id: 14, description: "ជ័រថ្លាបិតរូបថត", unit: "ដប", opening: { qty: 0, price: "2500" }, in: { qty: 4, price: "2500" }, out: { qty: 0, price: "2500" } }, { id: 15, description: "តាំប៉ុងGiraffe ពណ៍ក្រហម", unit: "ប្រអប់", opening: { qty: 0, price: "8000" }, in: { qty: 4, price: "8000" }, out: { qty: 0, price: "8000" } }, { id: 16, description: "តារាងរដ្ឋបាល", unit: "ឈុត", opening: { qty: 0, price: "36000" }, in: { qty: 2, price: "36000" }, out: { qty: 0, price: "36000" } }, { id: 17, description: "ទឹកត្រាGiraffe ពណ៍ក្រហម", unit: "ដប", opening: { qty: 0, price: "5000" }, in: { qty: 2, price: "5000" }, out: { qty: 0, price: "5000" } }, { id: 18, description: "ទឹកហ្វឺត ជីរ៉ាហ្វ (ខៀវ)", unit: "ដុំ", opening: { qty: 0, price: "55000" }, in: { qty: 7, price: "55000" }, out: { qty: 0, price: "55000" } }, { id: 19, description: "ទឹកហ្វឺតជីរ៉ាហ្វ", unit: "ដុំ", opening: { qty: 0, price: "25000" }, in: { qty: 2, price: "25000" }, out: { qty: 0, price: "25000" } }, { id: 20, description: "បញ្ជីស្រង់ពិន្ទុ", unit: "ក្បាល", opening: { qty: 0, price: "3500" }, in: { qty: 12, price: "3500" }, out: { qty: 0, price: "3500" } }, { id: 21, description: "បញ្ជីហៅឈ្មោះសិស្ស", unit: "ក្បាល", opening: { qty: 0, price: "3500" }, in: { qty: 12, price: "3500" }, out: { qty: 0, price: "3500" } }, { id: 22, description: "ប៊ិកក្រហមម៉ាកជីរ៉ាហ្វ", unit: "ប្រអប់", opening: { qty: 0, price: "25000" }, in: { qty: 1, price: "25000" }, out: { qty: 0, price: "25000" } }, { id: 23, description: "ប៊ិកខៀវម៉ាកជីរ៉ាហ្វ", unit: "ប្រអប់", opening: { qty: 0, price: "25000" }, in: { qty: 1, price: "25000" }, out: { qty: 0, price: "25000" } }, { id: 24, description: "ប្រដាប់ចោះរន្ធពីរ", unit: "ប្រអប់", opening: { qty: 0, price: "30000" }, in: { qty: 1, price: "30000" }, out: { qty: 0, price: "30000" } }, { id: 25, description: "សឺមីកិបឡេវ ទំហំA4", unit: "សន្លឹក", opening: { qty: 0, price: "2000" }, in: { qty: 10, price: "2000" }, out: { qty: 0, price: "2000" } }, { id: 26, description: "សឺមីក្រដាស ទំហំA4", unit: "សន្លឹក", opening: { qty: 0, price: "2500" }, in: { qty: 22, price: "2500" }, out: { qty: 0, price: "2500" } }, { id: 27, description: "សៀវភៅតាមដានការសិក្សា", unit: "ដុំ", opening: { qty: 0, price: "26500" }, in: { qty: 1, price: "26500" }, out: { qty: 0, price: "26500" } }, { id: 28, description: "សៀវភៅសិក្ខាគារិក", unit: "ដុំ", opening: { qty: 0, price: "26500" }, in: { qty: 1, price: "26500" }, out: { qty: 0, price: "26500" } }, { id: 29, description: "ហ្វឺតPILOT", unit: "ប្រអប់", opening: { qty: 0, price: "28000" }, in: { qty: 1, price: "28000" }, out: { qty: 0, price: "28000" } } ] }, 'wh2': { id: 'wh2', name: 'II. អប់រំបំណិនជីវិត កីឡា ការងារយុវជន និងកុមារ', code: '60058', items: [ { id: 1, description: "ថង់ខ្មៅ", unit: "ដុំ", opening: { qty: 0, price: "12500" }, in: { qty: 4, price: "12500" }, out: { qty: 0, price: "12500" } }, { id: 2, description: "បាល់ទះ Mikasa", unit: "គ្រាប់", opening: { qty: 0, price: "60000" }, in: { qty: 1, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 3, description: "បាល់ទះMikasa", unit: "គ្រាប់", opening: { qty: 0, price: "60000" }, in: { qty: 2, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 4, description: "បាល់ទាត់ Mikasa", unit: "គ្រាប់", opening: { qty: 0, price: "60000" }, in: { qty: 4, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 5, description: "បាល់ទាត់Mikasa", unit: "គ្រាប់", opening: { qty: 0, price: "60000" }, in: { qty: 2, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 6, description: "ម៉ាស់", unit: "ដុំ", opening: { qty: 0, price: "5000" }, in: { qty: 29, price: "5000" }, out: { qty: 0, price: "5000" } }, { id: 7, description: "សំណាញ់បាល់ទាត់", unit: "គូ", opening: { qty: 0, price: "100500" }, in: { qty: 1, price: "100500" }, out: { qty: 0, price: "100500" } }, { id: 8, description: "អាល់កុល", unit: "ដប", opening: { qty: 0, price: "5500" }, in: { qty: 1, price: "5500" }, out: { qty: 0, price: "5500" } }, { id: 9, description: "អាល់កុល៥០០ml", unit: "ដប", opening: { qty: 0, price: "6000" }, in: { qty: 1, price: "6000" }, out: { qty: 0, price: "6000" } } ] }, 'wh3': { id: 'wh3', name: 'III. សម្ភារៈរៀន និងបង្រៀន', code: '60058', items: [ { id: 1, description: "Color ផាត់រូបភាព", unit: "ដុំ", opening: { qty: 0, price: "15000" }, in: { qty: 2, price: "15000" }, out: { qty: 0, price: "15000" } }, { id: 2, description: "កងបង្វិល", unit: "ឈុត", opening: { qty: 0, price: "8000" }, in: { qty: 12, price: "8000" }, out: { qty: 0, price: "8000" } }, { id: 3, description: "កន្រ្តៃ", unit: "ដើម", opening: { qty: 0, price: "3500" }, in: { qty: 20, price: "3500" }, out: { qty: 0, price: "3500" } }, { id: 4, description: "កន្រ្តៃ", unit: "ដើម", opening: { qty: 0, price: "4000" }, in: { qty: 10, price: "4000" }, out: { qty: 0, price: "4000" } }, { id: 5, description: "កាវបិតថ្លា ៥០មល", unit: "ដប", opening: { qty: 0, price: "5000" }, in: { qty: 14, price: "5000" }, out: { qty: 0, price: "5000" } }, { id: 6, description: "កូនបាល់", unit: "គ្រាប់", opening: { qty: 0, price: "500000" }, in: { qty: 50, price: "500000" }, out: { qty: 0, price: "500000" } }, { id: 7, description: "ក្តារចំនួន0ដល់២០", unit: "ផ្ទាំង", opening: { qty: 0, price: "4000" }, in: { qty: 10, price: "4000" }, out: { qty: 0, price: "4000" } }, { id: 8, description: "ក្តារព្យញ្ជនៈ៣៣តួ", unit: "ផ្ទាំង", opening: { qty: 0, price: "4000" }, in: { qty: 20, price: "4000" }, out: { qty: 0, price: "4000" } }, { id: 9, description: "ក្រដាសកាតុង", unit: "សន្លឹក", opening: { qty: 0, price: "1000" }, in: { qty: 207, price: "1000" }, out: { qty: 0, price: "1000" } }, { id: 10, description: "ក្រដាសកាតុង", unit: "ដុំ", opening: { qty: 0, price: "54000" }, in: { qty: 1, price: "54000" }, out: { qty: 0, price: "54000" } }, { id: 11, description: "ក្រដាសផ្ទាំងធំ", unit: "សន្លឹក", opening: { qty: 0, price: "500000" }, in: { qty: 266, price: "500000" }, out: { qty: 0, price: "500000" } }, { id: 12, description: "ក្រដាសពណ៌A4", unit: "កេស", opening: { qty: 0, price: "60000" }, in: { qty: 1, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 13, description: "ក្រដាសពណ៌A4", unit: "ដំុ", opening: { qty: 0, price: "15000" }, in: { qty: 5, price: "15000" }, out: { qty: 0, price: "15000" } }, { id: 14, description: "ក្រដាសរ៉ាមDouble A", unit: "កេស", opening: { qty: 0, price: "60000" }, in: { qty: 2, price: "60000" }, out: { qty: 0, price: "60000" } }, { id: 15, description: "ក្រដាសរ៉ាមDouble A", unit: "ដុំ", opening: { qty: 0, price: "15000" }, in: { qty: 4, price: "15000" }, out: { qty: 0, price: "15000" } } ] }, 'wh4': { id: 'wh4', name: 'IV. ការកែលម្អបរិស្ថាន និងទីធ្លាកម្សាន្ត', code: '61058', items: [ { id: 1, description: "កែងទុយោមុខពីរ(27Cm)", unit: "គ្រាប់", opening: { qty: 0, price: "10000" }, in: { qty: 6, price: "10000" }, out: { qty: 0, price: "10000" } }, { id: 2, description: "ខ្វែវ", unit: "ដើម", opening: { qty: 0, price: "40000" }, in: { qty: 1, price: "40000" }, out: { qty: 0, price: "40000" } }, { id: 3, description: "ខ្វែវ", unit: "ដើម", opening: { qty: 0, price: "43300" }, in: { qty: 1, price: "43300" }, out: { qty: 0, price: "43300" } }, { id: 4, description: "ចបកាប់", unit: "ដើម", opening: { qty: 0, price: "40000" }, in: { qty: 10, price: "40000" }, out: { qty: 0, price: "40000" } }, { id: 5, description: "ចបជីក", unit: "ដើម", opening: { qty: 0, price: "40000" }, in: { qty: 6, price: "40000" }, out: { qty: 0, price: "40000" } } ] }, 'wh5': { id: 'wh5', name: 'V. ការថែទាំ និងជួសជុលផ្សេងៗ', code: '61068', items: [ { id: 1, description: "Keyboad", unit: "ឈុត", opening: { qty: 0, price: "120000" }, in: { qty: 2, price: "120000" }, out: { qty: 0, price: "120000" } }, { id: 2, description: "Mouse Bluetooth", unit: "ឈុត", opening: { qty: 0, price: "50000" }, in: { qty: 1, price: "50000" }, out: { qty: 0, price: "50000" } }, { id: 3, description: "SSD Hardrive", unit: "គ្រាប់", opening: { qty: 0, price: "193000" }, in: { qty: 1, price: "193000" }, out: { qty: 0, price: "193000" } }, { id: 4, description: "USB Connect Wifi", unit: "គ្រាប់", opening: { qty: 0, price: "45000" }, in: { qty: 1, price: "45000" }, out: { qty: 0, price: "45000" } }, { id: 5, description: "ដុំទឹកថ្នាំPrinter", unit: "ឈុត", opening: { qty: 0, price: "106000" }, in: { qty: 1, price: "106000" }, out: { qty: 0, price: "106000" } } ] }, 'wh6': { id: 'wh6', name: 'VI. ការចូលរៀនដោយសមធម៌និងបង្ការសិស្សបោះបង់', code: '61108', items: [ { id: 1, description: "ប្រដាប់កិបក្រដាសម៉ាក Kangaro", unit: "ប្រអប់", opening: { qty: 0, price: "40000" }, in: { qty: 7, price: "40000" }, out: { qty: 0, price: "40000" } }, { id: 2, description: "ស្គុតក្រដាស", unit: "ដុំ", opening: { qty: 0, price: "8600" }, in: { qty: 1, price: "8600" }, out: { qty: 0, price: "8600" } }, { id: 3, description: "ស្គុតថ្លា", unit: "ដុំ", opening: { qty: 0, price: "5000" }, in: { qty: 61, price: "5000" }, out: { qty: 0, price: "5000" } }, { id: 4, description: "ហ្វឺត Highlight ម៉ាកជីរ៉ាហ្វ", unit: "ដើម", opening: { qty: 0, price: "2000" }, in: { qty: 20, price: "2000" }, out: { qty: 0, price: "2000" } }, { id: 5, description: "ហ្វឺតHighLight ជីរ៉ាហ្វ", unit: "ដើម", opening: { qty: 0, price: "2500" }, in: { qty: 4, price: "2500" }, out: { qty: 0, price: "2500" } } ] } }; const defaultSimpleData = [ { id: 1, type: "MOB", description: "ធុងដែក", year: 1998, user: "ក្នុងស្រុក", quantity: 1, price: "1,200,000", status: "ខូច" }, { id: 2, type: "MOB", description: "តុសិស្ស៤បង្កុយ(ឈើ)", year: 1999, user: "ក្នុងស្រុក", quantity: 9, price: "900,000", status: "ខូច" }, { id: 3, type: "MOB", description: "កៅអីគ្រូ", year: 2000, user: "ក្នុងស្រុក", quantity: 6, price: "640,000", status: "អន់" }, { id: 4, type: "MOB", description: "តុសិស្ស២បង្កុយ(ឈើ)", year: 2000, user: "ក្នុងស្រុក", quantity: 85, price: "7,480,000", status: "ខូច" }, { id: 5, type: "MOB", description: "ក្ដារខៀនដីស", year: 2000, user: "ក្នុងស្រុក", quantity: 4, price: "400,000", status: "អន់" }, { id: 6, type: "MOB", description: "ក្ដារខៀនហ្វឺត", year: 2000, user: "ក្នុងស្រុក", quantity: 1, price: "250,000", status: "ខូច" }, { id: 7, type: "MOB", description: "ទូកញ្ចក់", year: 2004, user: "ក្នុងស្រុក", quantity: 1, price: "250,000", status: "ខូច" }, { id: 8, type: "MOB", description: "ហិបដែក", year: 2010, user: "ក្នុងស្រុក", quantity: 1, price: "200,000", status: "អន់" }, { id: 9, type: "MOB", description: "ធ្នើដាក់សៀវភៅធំ", year: 2010, user: "ក្នុងស្រុក", quantity: 1, price: "200,000", status: "មធ្យម" }, { id: 10, type: "MOB", description: "តុសិស្ស២បង្កុយ(ឈើ)", year: 2013, user: "ក្នុងស្រុក", quantity: 20, price: "1,400,000", status: "អន់" }, { id: 11, type: "MOB", description: "តុសិស្ស២បង្កុយ(ឈើ)", year: 2013, user: "ក្នុងស្រុក", quantity: 95, price: "40,679,000", status: "អន់" }, { id: 12, type: "MOB", description: "តុអាន(ដែក)", year: 2013, user: "ក្នុងស្រុក", quantity: 5, price: "2,848,000", status: "មធ្យម" }, { id: 13, type: "MOB", description: "ធ្នើមុខមួយ", year: 2013, user: "ក្នុងស្រុក", quantity: 2, price: "2,377,400", status: "មធ្យម" }, { id: 14, type: "MOB", description: "ក្ដារខៀនព័ត៌មាន", year: 2016, user: "SOF", quantity: 2, price: "160,000", status: "មធ្យម" }, { id: 15, type: "MOB", description: "កៅអីជ័រធុនតូច", year: 2017, user: "W.V.S", quantity: 31, price: "192,000", status: "ខូច" }, { id: 16, type: "MOB", description: "តុអាន(ដែក)", year: 2017, user: "មន្ទីរអប់រំ", quantity: 12, price: "576,000", status: "ខូច" }, { id: 17, type: "MBU", description: "ម៉ាស៊ីនព្រីន Epson L360", year: 2018, user: "សប្បុសជន", quantity: 1, price: "1,200,000", status: "ខូច" }, { id: 18, type: "MBU", description: "កង្ហារភ្ជាប់ពិដាន", year: 2018, user: "មន្ទីរអប់រំ", quantity: 12, price: "960,000", status: "អន់" }, { id: 19, type: "MOB", description: "តុសម្រាប់គ្រូ", year: 2018, user: "មន្ទីរអប់រំ", quantity: 6, price: "1,800,000", status: "មធ្យម" }, { id: 20, type: "MOB", description: "តុសិស្ស២បង្កុយ(ដែក)", year: 2018, user: "ក្រសួងអប់រំ", quantity: 145, price: "60,900,000", status: "មធ្យម" }, { id: 21, type: "MOB", description: "ទោងរំអិល", year: 2018, user: "មន្ទីរអប់រំ", quantity: 3, price: "1,080,000", status: "មធ្យម" }, { id: 22, type: "MOB", description: "ក្ដារខៀនហ្វឺត", year: 2018, user: "មន្ទីរអប់រំ", quantity: 18, price: "4,500,000", status: "មធ្យម" }, { id: 23, type: "MIN", description: "កុំព្យូទ័រយួរដៃ Asus", year: 2019, user: "ក្រសួងអប់រំ", quantity: 1, price: "2,713,500", status: "ខូច" }, { id: 24, type: "MOB", description: "ក្ដាររំអិល", year: 2019, user: "W.V.S", quantity: 4, price: "1,600,000", status: "មធ្យម" }, { id: 25, type: "MOB", description: "ជណ្ដើរស្វា", year: 2019, user: "W.V.S", quantity: 3, price: "1,584,000", status: "មធ្យម" }, { id: 26, type: "MOB", description: "ម៉ាស៊ីនព្រីនHP", year: 2019, user: "ក្រសួងអប់រំ", quantity: 1, price: "1,336,500", status: "ខូច" }, { id: 27, type: "MOB", description: "តុតឿ", year: 2020, user: "W.V.S", quantity: 6, price: "100,000", status: "ល្អ" }, { id: 28, type: "MOB", description: "ដែកតោង", year: 2020, user: "W.V.S", quantity: 3, price: "200,000", status: "មធ្យម" }, { id: 29, type: "MOB", description: "ទូដាក់កញ្ចក់ដាក់ឯកសារ", year: 2020, user: "W.V.S", quantity: 1, price: "750,000", status: "ល្អ" }, { id: 30, type: "MOB", description: "ធ្នើដាក់សៀវភៅតាមថ្នាក់", year: 2020, user: "W.V.S", quantity: 1, price: "60,000", status: "ល្អ" }, { id: 31, type: "MOB", description: "ធ្នើដាក់សៀវភៅតូច", year: 2020, user: "W.V.S", quantity: 5, price: "40,000", status: "ល្អ" }, { id: 32, type: "MOB", description: "ធ្នើមុខពីរ", year: 2020, user: "W.V.S", quantity: 3, price: "70,000", status: "ល្អ" }, { id: 33, type: "MOB", description: "ធ្នើមុខមួយ", year: 2020, user: "W.V.S", quantity: 4, price: "50,000", status: "ល្អ" }, { id: 34, type: "MIN", description: "កុំព្យូទ័រយួរដៃ Acer", year: 2021, user: "SOF", quantity: 1, price: "2,800,000", status: "មធ្យម" }, { id: 35, type: "MOB", description: "កៅអីគ្រូ", year: 2021, user: "មន្ទីរអប់រំ", quantity: 6, price: "720,000", status: "មធ្យម" }, { id: 36, type: "MOB", description: "តុគ្រូ(ដែក)", year: 2021, user: "មន្ទីរអប់រំ", quantity: 6, price: "100,000", status: "ល្អ" }, { id: 37, type: "MOB", description: "តុវែង", year: 2021, user: "មន្ទីរអប់រំ", quantity: 3, price: "200,000", status: "មធ្យម" }, { id: 38, type: "MBU", description: "ម៉ាស៊ីនព្រីន Epson L3210", year: 2022, user: "SOF", quantity: 1, price: "800,000", status: "ខូច" }, { id: 39, type: "MBU", description: "កង្ហារភ្ជាប់ជញ្ជាំង", year: 2023, user: "SOF", quantity: 4, price: "250,000", status: "មធ្យម" }, { id: 40, type: "MBU", description: "កុំព្យូទ័រលើតុ Desktop", year: 2023, user: "សប្បុសជន", quantity: 1, price: "1,800,000", status: "មធ្យម" }, { id: 41, type: "MBU", description: "ម៉ាស៊ីនព្រីន Canon", year: 2023, user: "សប្បុសជន", quantity: 1, price: "1,100,000", status: "មធ្យម" }, { id: 42, type: "MBU", description: "ម៉ូទ័របូមទឹក", year: 2023, user: "SOF", quantity: 1, price: "400,000", status: "មធ្យម" }, { id: 43, type: "MBU", description: "Speaker", year: 2024, user: "សប្បុរសជន", quantity: 1, price: "800,000", status: "មធ្យម" }, { id: 44, type: "MBU", description: "Micro sound (តូច)", year: 2024, user: "SOF", quantity: 1, price: "60,000", status: "មធ្យម" }, { id: 45, type: "MBU", description: "កង្ហារភ្ជាប់ជញ្ជាំង(ធំ)", year: 2024, user: "SOF", quantity: 1, price: "240,000", status: "ខូច" }, { id: 46, type: "MIN", description: "ម៉ាស៊ីនព្រីន Color", year: 2025, user: "សប្បុរសជន", quantity: 1, price: "1,000,000", status: "ល្អ" }, { id: 47, type: "MIN", description: "ម៉ាស៊ីនព្រីន Black white", year: 2025, user: "សប្បុរសជន", quantity: 1, price: "1,500,000", status: "មធ្យម" }, { id: 48, type: "MBU", description: "ម៉ូទ័រកាត់ផ្កា", year: 2025, user: "SOF", quantity: 1, price: "500,000", status: "មធ្យម" } ]; // Switch between systems function switchSystem(system) { currentSystem = system; if (system === 'warehouse') { document.getElementById('warehouseSystem').classList.remove('hidden'); document.getElementById('simpleSystem').classList.add('hidden'); document.getElementById('btn-warehouse').className = 'px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-semibold'; document.getElementById('btn-simple').className = 'px-6 py-3 bg-gray-400 text-white rounded-lg hover:bg-gray-500 font-semibold'; } else { document.getElementById('warehouseSystem').classList.add('hidden'); document.getElementById('simpleSystem').classList.remove('hidden'); document.getElementById('btn-warehouse').className = 'px-6 py-3 bg-gray-400 text-white rounded-lg hover:bg-gray-500 font-semibold'; document.getElementById('btn-simple').className = 'px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-semibold'; } } // Initialize function init() { initWarehouseSystem(); initSimpleSystem(); } // ========== WAREHOUSE SYSTEM ========== function initWarehouseSystem() { const saved = localStorage.getItem('warehousesData'); warehouses = saved ? JSON.parse(saved) : defaultWarehouses; currentWarehouseId = currentWarehouseId || Object.keys(warehouses)[0]; updateWarehouseSelect(); renderWarehouseInventory(); updateCurrentWarehouseInfo(); setupWarehouseCalculators(); } function setupWarehouseCalculators() { ['Opening', 'In', 'Out'].forEach(type => { const qtyEl = document.getElementById('whInput' + type + 'Qty'); const priceEl = document.getElementById('whInput' + type + 'Price'); if (qtyEl && priceEl) { qtyEl.addEventListener('input', () => calculateWarehouseTotal(type)); priceEl.addEventListener('input', () => calculateWarehouseTotal(type)); } }); } function calculateWarehouseTotal(type) { const qty = parseFloat(document.getElementById('whInput' + type + 'Qty').value) || 0; const price = parseFloat(document.getElementById('whInput' + type + 'Price').value.replace(/,/g, '')) || 0; const total = qty * price; document.getElementById('whInput' + type + 'Total').value = total.toLocaleString(); } function updateCurrentWarehouseInfo() { const wh = warehouses[currentWarehouseId]; if (wh) { document.getElementById('currentWarehouseInfo').innerHTML = `

${wh.name}

លេខកូដសម្គាល់: ${wh.code}

ចំនួនសម្ភារសរុប: ${wh.items.length}

`; } } function updateWarehouseSelect() { const select = document.getElementById('warehouseSelect'); select.innerHTML = ''; Object.values(warehouses).forEach(wh => { const option = document.createElement('option'); option.value = wh.id; option.textContent = `${wh.name} (${wh.code})`; if (wh.id === currentWarehouseId) option.selected = true; select.appendChild(option); }); } function switchWarehouse() { currentWarehouseId = document.getElementById('warehouseSelect').value; renderWarehouseInventory(); updateCurrentWarehouseInfo(); } function showAddWarehouse() { editingWarehouseId = null; document.getElementById('warehouseFormTitle').textContent = 'បន្ថែមឃ្លាំង/កម្មវិធីថ្មី'; document.getElementById('warehouseName').value = ''; document.getElementById('warehouseCode').value = ''; document.getElementById('warehouseFormContainer').classList.remove('hidden'); } function editWarehouse() { const wh = warehouses[currentWarehouseId]; if (wh) { editingWarehouseId = currentWarehouseId; document.getElementById('warehouseFormTitle').textContent = 'កែប្រែឃ្លាំង/កម្មវិធី'; document.getElementById('warehouseName').value = wh.name; document.getElementById('warehouseCode').value = wh.code; document.getElementById('warehouseFormContainer').classList.remove('hidden'); } } function cancelWarehouse() { document.getElementById('warehouseFormContainer').classList.add('hidden'); editingWarehouseId = null; } function submitWarehouse() { const name = document.getElementById('warehouseName').value.trim(); const code = document.getElementById('warehouseCode').value.trim(); if (!name || !code) { alert('សូមបញ្ចូលព័ត៌មានពេញលេញ!'); return; } if (editingWarehouseId) { warehouses[editingWarehouseId].name = name; warehouses[editingWarehouseId].code = code; } else { const newId = 'wh' + Date.now(); warehouses[newId] = { id: newId, name: name, code: code, items: [] }; currentWarehouseId = newId; } updateWarehouseSelect(); updateCurrentWarehouseInfo(); cancelWarehouse(); } function deleteWarehouse() { if (Object.keys(warehouses).length <= 1) { alert('មិនអាចលុបបានទេ! ត្រូវមានឃ្លាំងយ៉ាងតិច១។'); return; } const wh = warehouses[currentWarehouseId]; if (confirm('តើអ្នកប្រាកដទេថាចង់លុបឃ្លាំង "' + wh.name + '"?')) { delete warehouses[currentWarehouseId]; currentWarehouseId = Object.keys(warehouses)[0]; updateWarehouseSelect(); renderWarehouseInventory(); updateCurrentWarehouseInfo(); } } function getCurrentWarehouseData() { return warehouses[currentWarehouseId]?.items || []; } function setCurrentWarehouseData(data) { if (warehouses[currentWarehouseId]) { warehouses[currentWarehouseId].items = data; } } function saveWarehouseData() { localStorage.setItem('warehousesData', JSON.stringify(warehouses)); alert('បានរក្សាទុកទិន្នន័យ!'); } function renderWarehouseInventory() { const searchTerm = document.getElementById('whSearchInput').value.toLowerCase(); const data = getCurrentWarehouseData(); let filtered = data.filter(item => item.description.toLowerCase().includes(searchTerm)); let html = ''; let totals = { openingQty: 0, openingTotal: 0, inQty: 0, inTotal: 0, outQty: 0, outTotal: 0 }; filtered.forEach((item, index) => { totals.openingQty += item.opening.qty; totals.openingTotal += item.opening.qty * parseFloat(item.opening.price.replace(/,/g, '')); totals.inQty += item.in.qty; totals.inTotal += item.in.qty * parseFloat(item.in.price.replace(/,/g, '')); totals.outQty += item.out.qty; totals.outTotal += item.out.qty * parseFloat(item.out.price.replace(/,/g, '')); html += ''; html += '' + (index + 1) + ''; html += '' + item.description + ''; html += '' + item.unit + ''; html += '' + item.opening.qty + ''; html += '' + item.opening.price + ''; html += '' + (item.opening.qty * parseFloat(item.opening.price.replace(/,/g, ''))).toLocaleString() + ''; html += '' + item.in.qty + ''; html += '' + item.in.price + ''; html += '' + (item.in.qty * parseFloat(item.in.price.replace(/,/g, ''))).toLocaleString() + ''; html += '' + item.out.qty + ''; html += '' + item.out.price + ''; html += '' + (item.out.qty * parseFloat(item.out.price.replace(/,/g, ''))).toLocaleString() + ''; html += ''; html += '✏️'; html += '🗑️'; html += ''; }); html += ''; html += 'សរុបទាំងអស់:'; html += '' + totals.openingQty + ''; html += ''; html += '' + totals.openingTotal.toLocaleString() + ''; html += '' + totals.inQty + ''; html += ''; html += '' + totals.inTotal.toLocaleString() + ''; html += '' + totals.outQty + ''; html += ''; html += '' + totals.outTotal.toLocaleString() + ''; html += ''; document.getElementById('warehouseInventoryBody').innerHTML = html; } function filterWarehouseData() { renderWarehouseInventory(); } function showWarehouseAddForm() { editingWarehouseItemId = null; document.getElementById('warehouseItemFormTitle').textContent = 'បន្ថែមសម្ភារថ្មី'; clearWarehouseItemForm(); document.getElementById('warehouseAddFormContainer').classList.remove('hidden'); } function cancelWarehouseItemForm() { document.getElementById('warehouseAddFormContainer').classList.add('hidden'); clearWarehouseItemForm(); editingWarehouseItemId = null; } function clearWarehouseItemForm() { document.getElementById('whInputDescription').value = ''; document.getElementById('whInputUnit').value = ''; ['Opening', 'In', 'Out'].forEach(type => { document.getElementById('whInput' + type + 'Qty').value = 0; document.getElementById('whInput' + type + 'Price').value = 0; document.getElementById('whInput' + type + 'Total').value = 0; }); } function submitWarehouseItemForm() { const formData = { description: document.getElementById('whInputDescription').value, unit: document.getElementById('whInputUnit').value, opening: { qty: parseInt(document.getElementById('whInputOpeningQty').value) || 0, price: document.getElementById('whInputOpeningPrice').value || '0' }, in: { qty: parseInt(document.getElementById('whInputInQty').value) || 0, price: document.getElementById('whInputInPrice').value || '0' }, out: { qty: parseInt(document.getElementById('whInputOutQty').value) || 0, price: document.getElementById('whInputOutPrice').value || '0' } }; if (!formData.description) { alert('សូមបញ្ចូលសម្ភារៈបរិក្ខារ!'); return; } let data = getCurrentWarehouseData(); if (editingWarehouseItemId) { data = data.map(item => item.id === editingWarehouseItemId ? {...formData, id: editingWarehouseItemId} : item); } else { const newId = Date.now(); data.push({...formData, id: newId}); } setCurrentWarehouseData(data); renderWarehouseInventory(); updateCurrentWarehouseInfo(); cancelWarehouseItemForm(); } function editWarehouseItem(id) { const data = getCurrentWarehouseData(); const item = data.find(i => i.id === id); if (item) { editingWarehouseItemId = id; document.getElementById('warehouseItemFormTitle').textContent = 'កែប្រែសម្ភារ'; document.getElementById('whInputDescription').value = item.description; document.getElementById('whInputUnit').value = item.unit; document.getElementById('whInputOpeningQty').value = item.opening.qty; document.getElementById('whInputOpeningPrice').value = item.opening.price; document.getElementById('whInputInQty').value = item.in.qty; document.getElementById('whInputInPrice').value = item.in.price; document.getElementById('whInputOutQty').value = item.out.qty; document.getElementById('whInputOutPrice').value = item.out.price; calculateWarehouseTotal('Opening'); calculateWarehouseTotal('In'); calculateWarehouseTotal('Out'); document.getElementById('warehouseAddFormContainer').classList.remove('hidden'); } } function deleteWarehouseItem(id) { if (confirm('តើអ្នកប្រាកដទេថាចង់លុប?')) { let data = getCurrentWarehouseData(); data = data.filter(item => item.id !== id); setCurrentWarehouseData(data); renderWarehouseInventory(); updateCurrentWarehouseInfo(); } } function downloadWarehouseJSON() { const dataStr = JSON.stringify(warehouses, null, 2); const dataBlob = new Blob([dataStr], {type: 'application/json'}); const url = URL.createObjectURL(dataBlob); const link = document.createElement('a'); link.href = url; link.download = 'warehouses_all_data.json'; link.click(); } function downloadWarehouseCSV() { const wh = warehouses[currentWarehouseId]; const data = getCurrentWarehouseData(); const headers = ['ល.រ', 'សម្ភារៈបរិក្ខារ', 'ឯកតាគិត', 'ដើមឆ្នាំ-ចំនួន', 'ដើមឆ្នាំ-តម្លៃរាយ', 'ដើមឆ្នាំ-តម្លៃសរុប', 'ចូល-ចំនួន', 'ចូល-តម្លៃរាយ', 'ចូល-តម្លៃសរុប', 'ចេញ-ចំនួន', 'ចេញ-តម្លៃរាយ', 'ចេញ-តម្លៃសរុប', 'កម្មវិធី', 'លេខកូដ']; let csv = '\uFEFF' + headers.join(',') + '\n'; data.forEach((item, idx) => { const openingTotal = item.opening.qty * parseFloat(item.opening.price.replace(/,/g, '')); const inTotal = item.in.qty * parseFloat(item.in.price.replace(/,/g, '')); const outTotal = item.out.qty * parseFloat(item.out.price.replace(/,/g, '')); const row = [idx + 1, '"' + item.description + '"', '"' + item.unit + '"', item.opening.qty, item.opening.price, openingTotal, item.in.qty, item.in.price, inTotal, item.out.qty, item.out.price, outTotal, '"' + wh.name + '"', wh.code]; csv += row.join(',') + '\n'; }); const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = wh.code + '_' + wh.name.substring(0, 20) + '.csv'; link.click(); } function importWarehouseJSON(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { try { warehouses = JSON.parse(e.target.result); currentWarehouseId = Object.keys(warehouses)[0]; updateWarehouseSelect(); renderWarehouseInventory(); updateCurrentWarehouseInfo(); alert('បាននាំចូលទិន្នន័យដោយជោគជ័យ!'); } catch (error) { alert('មានបញ្ហាក្នុងការនាំចូលទិន្នន័យ!'); } }; reader.readAsText(file); } } // ========== SIMPLE SYSTEM ========== function initSimpleSystem() { const saved = localStorage.getItem('simpleEquipmentData'); simpleEquipmentData = saved ? JSON.parse(saved) : defaultSimpleData; updateSimpleYearFilter(); renderSimpleInventory(); } function saveSimpleData() { localStorage.setItem('simpleEquipmentData', JSON.stringify(simpleEquipmentData)); alert('បានរក្សាទុកទិន្នន័យ!'); } function updateSimpleYearFilter() { const years = [...new Set(simpleEquipmentData.map(item => item.year))].sort((a, b) => b - a); const select = document.getElementById('simpleYearFilter'); select.innerHTML = 'ឆ្នាំទាំងអស់'; years.forEach(year => { select.innerHTML += '' + year + ''; }); } function getStatusClass(status) { if (status === 'ល្អ') return 'bg-green-100 text-green-800'; if (status === 'មធ្យម') return 'bg-yellow-100 text-yellow-800'; if (status === 'អន់') return 'bg-orange-100 text-orange-800'; return 'bg-red-100 text-red-800'; } function renderSimpleInventory() { const searchTerm = document.getElementById('simpleSearchInput').value.toLowerCase(); const yearFilter = document.getElementById('simpleYearFilter').value; let filtered = simpleEquipmentData.filter(item => { const matchesSearch = item.description.toLowerCase().includes(searchTerm) || item.user.toLowerCase().includes(searchTerm); const matchesYear = yearFilter === 'all' || item.year.toString() === yearFilter; return matchesSearch && matchesYear; }); let html = ''; let totalQty = 0; let totalPrice = 0; filtered.forEach((item, index) => { totalQty += item.quantity; totalPrice += parseInt(item.price.replace(/,/g, '')); html += ''; html += '' + (index + 1) + ''; html += '' + item.type + ''; html += '' + item.description + ''; html += '' + item.year + ''; html += '' + item.user + ''; html += '' + item.quantity + ''; html += '' + item.price + ''; html += '' + item.status + ''; html += ''; html += '✏️'; html += '🗑️'; html += ''; }); html += ''; html += 'សរុប:'; html += '' + totalQty + ''; html += '' + totalPrice.toLocaleString() + ''; html += ''; document.getElementById('simpleInventoryBody').innerHTML = html; } function filterSimpleData() { renderSimpleInventory(); } function showSimpleAddForm() { editingSimpleId = null; document.getElementById('simpleFormTitle').textContent = 'បន្ថែមថ្មី'; clearSimpleForm(); document.getElementById('simpleAddFormContainer').classList.remove('hidden'); } function cancelSimpleForm() { document.getElementById('simpleAddFormContainer').classList.add('hidden'); clearSimpleForm(); editingSimpleId = null; } function clearSimpleForm() { document.getElementById('simpleInputType').value = 'MOB'; document.getElementById('simpleInputDescription').value = ''; document.getElementById('simpleInputYear').value = new Date().getFullYear(); document.getElementById('simpleInputUser').value = ''; document.getElementById('simpleInputQuantity').value = 1; document.getElementById('simpleInputPrice').value = ''; document.getElementById('simpleInputStatus').value = 'ល្អ'; } function submitSimpleForm() { const formData = { type: document.getElementById('simpleInputType').value, description: document.getElementById('simpleInputDescription').value, year: parseInt(document.getElementById('simpleInputYear').value), user: document.getElementById('simpleInputUser').value, quantity: parseInt(document.getElementById('simpleInputQuantity').value), price: document.getElementById('simpleInputPrice').value, status: document.getElementById('simpleInputStatus').value }; if (editingSimpleId) { simpleEquipmentData = simpleEquipmentData.map(item => item.id === editingSimpleId ? {...formData, id: editingSimpleId} : item); } else { const newId = Math.max(...simpleEquipmentData.map(i => i.id), 0) + 1; simpleEquipmentData.push({...formData, id: newId}); } updateSimpleYearFilter(); renderSimpleInventory(); cancelSimpleForm(); } function editSimpleItem(id) { const item = simpleEquipmentData.find(i => i.id === id); if (item) { editingSimpleId = id; document.getElementById('simpleFormTitle').textContent = 'កែប្រែ'; document.getElementById('simpleInputType').value = item.type; document.getElementById('simpleInputDescription').value = item.description; document.getElementById('simpleInputYear').value = item.year; document.getElementById('simpleInputUser').value = item.user; document.getElementById('simpleInputQuantity').value = item.quantity; document.getElementById('simpleInputPrice').value = item.price; document.getElementById('simpleInputStatus').value = item.status; document.getElementById('simpleAddFormContainer').classList.remove('hidden'); } } function deleteSimpleItem(id) { if (confirm('តើអ្នកប្រាកដទេថាចង់លុប?')) { simpleEquipmentData = simpleEquipmentData.filter(item => item.id !== id); updateSimpleYearFilter(); renderSimpleInventory(); } } function downloadSimpleJSON() { const dataStr = JSON.stringify(simpleEquipmentData, null, 2); const dataBlob = new Blob([dataStr], {type: 'application/json'}); const url = URL.createObjectURL(dataBlob); const link = document.createElement('a'); link.href = url; link.download = 'simple_equipment_data.json'; link.click(); } function downloadSimpleCSV() { const headers = ['ល.រ', 'តាមប្រភេទ', 'បរិយាយ', 'ប្រើប្រាស់ពីឆ្នាំ', 'ឈ្មោះអ្នកប្រើ', 'បរិមាណ', 'តម្លៃ(រៀល)', 'ស្ថានភាព']; let csv = '\uFEFF' + headers.join(',') + '\n'; simpleEquipmentData.forEach((item, idx) => { const row = [idx + 1, item.type, '"' + item.description + '"', item.year, '"' + item.user + '"', item.quantity, item.price, item.status]; csv += row.join(',') + '\n'; }); const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'simple_equipment_data.csv'; link.click(); } function importSimpleJSON(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { try { simpleEquipmentData = JSON.parse(e.target.result); updateSimpleYearFilter(); renderSimpleInventory(); alert('បាននាំចូលទិន្នន័យដោយជោគជ័យ!'); } catch (error) { alert('មានបញ្ហាក្នុងការនាំចូលទិន្នន័យ!'); } }; reader.readAsText(file); } } function switchSimpleTab(tab) { document.getElementById('simpleInventoryTab').classList.add('hidden'); document.getElementById('simpleYearlyTab').classList.add('hidden'); document.getElementById('simpleTrackingTab').classList.add('hidden'); document.getElementById('simple-tab-inventory').className = 'px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50'; document.getElementById('simple-tab-yearly').className = 'px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50'; document.getElementById('simple-tab-tracking').className = 'px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50'; document.getElementById('simple' + tab.charAt(0).toUpperCase() + tab.slice(1) + 'Tab').classList.remove('hidden'); document.getElementById('simple-tab-' + tab).className = 'px-6 py-4 font-semibold bg-indigo-600 text-white'; if (tab === 'yearly') renderSimpleYearly(); if (tab === 'tracking') renderSimpleTracking(); } function renderSimpleYearly() { const yearlyData = {}; simpleEquipmentData.forEach(item => { if (!yearlyData[item.year]) yearlyData[item.year] = []; yearlyData[item.year].push(item); }); const years = Object.keys(yearlyData).sort((a, b) => b - a); let html = '

សម្ភារកើនក្នុងឆ្នាំ

'; years.forEach(year => { const items = yearlyData[year]; let totalQty = 0; let totalPrice = 0; html += '

'; html += '

ឆ្នាំ ' + year + '

'; html += '

'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; items.forEach((item, idx) => { totalQty += item.quantity; totalPrice += parseInt(item.price.replace(/,/g, '')); html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; }); html += ''; html += ''; html += ''; html += ''; html += ''; html += '

ល.រ	បរិយាយ	ប្រភេទ	បរិមាណ	តម្លៃ(រៀល)	ស្ថានភាព
' + (idx + 1) + '	' + item.description + '	' + item.type + '	' + item.quantity + '	' + item.price + '	' + item.status + '
សរុប:			' + totalQty + '	' + totalPrice.toLocaleString() + '

'; }); html += '

'; document.getElementById('simpleYearlyTab').innerHTML = html; } function renderSimpleTracking() { const summary = {}; simpleEquipmentData.forEach(item => { if (!summary[item.description]) { summary[item.description] = {good: 0, medium: 0, weak: 0, broken: 0, total: 0}; } summary[item.description].total += item.quantity; if (item.status === 'ល្អ') summary[item.description].good += item.quantity; else if (item.status === 'មធ្យម') summary[item.description].medium += item.quantity; else if (item.status === 'អន់') summary[item.description].weak += item.quantity; else if (item.status === 'ខូច') summary[item.description].broken += item.quantity; }); let html = '

តារាងតាមដានស្ថានភាពសម្ភារៈ

'; html += '

'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; let idx = 0; let totalGood = 0, totalMedium = 0, totalWeak = 0, totalBroken = 0, grandTotal = 0; for (const [desc, counts] of Object.entries(summary)) { idx++; totalGood += counts.good; totalMedium += counts.medium; totalWeak += counts.weak; totalBroken += counts.broken; grandTotal += counts.total; const statusText = counts.broken > 0 ? 'ខូច' : counts.weak > 0 ? 'អន់' : counts.medium > 0 ? 'មធ្យម' : 'ល្អ'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; } html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '

ល.រ	ឈ្មោះសម្ភារបរិក្ខារ	ស្ថានភាពសម្ភារៈ					ការប្រើប្រាស់		ស្ថានភាព
		ល្អ	មធ្យម	អន់	ខូច	សរុប	លើស	ខ្វះ
' + idx + '	' + desc + '	' + counts.good + '	' + counts.medium + '	' + counts.weak + '	' + counts.broken + '	' + counts.total + '	-	-	' + statusText + '
សរុបទាំងអស់:		' + totalGood + '	' + totalMedium + '	' + totalWeak + '	' + totalBroken + '	' + grandTotal + '

'; document.getElementById('simpleTrackingTab').innerHTML = html; } // Initialize on page load init(); </script>