*,: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 / .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 / .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: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Figtree,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}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}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}input:where([type=text]):focus,input:where(:not([type])):focus,input:where([type=email]):focus,input:where([type=url]):focus,input:where([type=password]):focus,input:where([type=number]):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=month]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=time]):focus,input:where([type=week]):focus,select:where([multiple]):focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--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);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--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)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media(forced-colors:active){input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media(forced-colors:active){input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:hover,input:where([type=checkbox]):checked:focus,input:where([type=radio]):checked:hover,input:where([type=radio]):checked:focus{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media(forced-colors:active){input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:hover,input:where([type=checkbox]):indeterminate:focus{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-bottom-16{bottom:-4rem}.-left-16{left:-4rem}.-left-20{left:-5rem}.end-0{inset-inline-end:0px}.right-0{right:0}.start-0{inset-inline-start:0px}.top-0{top:0}.z-0{z-index:0}.z-50{z-index:50}.\!row-span-1{grid-row:span 1 / span 1!important}.-mx-3{margin-left:-.75rem;margin-right:-.75rem}.mx-auto{margin-left:auto;margin-right:auto}.-me-2{margin-inline-end:-.5rem}.-ml-px{margin-left:-1px}.-mt-px{margin-top:-1px}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.ml-12{margin-left:3rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.ms-1{margin-inline-start:.25rem}.ms-2{margin-inline-start:.5rem}.ms-3{margin-inline-start:.75rem}.ms-4{margin-inline-start:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.\!hidden{display:none!important}.hidden{display:none}.aspect-video{aspect-ratio:16 / 9}.size-12{width:3rem;height:3rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-20{width:5rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-\[calc\(100\%_\+_8rem\)\]{width:calc(100% + 8rem)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[877px\]{max-width:877px}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.origin-top{transform-origin:top}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.\!flex-row{flex-direction:row!important}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-gray-400{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-indigo-400{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.bg-\[\#FF2D20\]\/10{background-color:#ff2d201a}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gray-500{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from: transparent var(--tw-gradient-from-position);--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-zinc-900{--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position)}.to-zinc-900{--tw-gradient-to: #18181b var(--tw-gradient-to-position)}.fill-current{fill:currentColor}.stroke-\[\#FF2D20\]{stroke:#ff2d20}.object-cover{-o-object-fit:cover;object-fit:cover}.object-top{-o-object-position:top;object-position:top}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1{padding-bottom:.25rem}.pb-3{padding-bottom:.75rem}.pe-4{padding-inline-end:1rem}.ps-3{padding-inline-start:.75rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-start{text-align:start}.font-sans{font-family:Figtree,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-sm\/relaxed{font-size:.875rem;line-height:1.625}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-7{line-height:1.75rem}.leading-tight{line-height:1.25}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-black\/50{color:#00000080}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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-\[0px_14px_34px_0px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow: 0px 14px 34px 0px rgba(0,0,0,.08);--tw-shadow-colored: 0px 14px 34px 0px 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 / .1), 0 4px 6px -4px rgb(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 / .1), 0 2px 4px -2px rgb(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-sm{--tw-shadow: 0 1px 2px 0 rgb(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 / .1), 0 8px 10px -6px rgb(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)}.ring{--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(3px + 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-1{--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)}.ring-black{--tw-ring-opacity: 1;--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1))}.ring-gray-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1))}.ring-transparent{--tw-ring-color: transparent}.ring-white{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.ring-white\/\[0\.05\]{--tw-ring-color: rgb(255 255 255 / .05)}.ring-zinc-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity, 1))}.ring-opacity-5{--tw-ring-opacity: .05}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));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)}.drop-shadow-\[0px_4px_34px_rgba\(0\,0\,0\,0\.06\)\]{--tw-drop-shadow: drop-shadow(0px 4px 34px rgba(0,0,0,.06));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)}.drop-shadow-\[0px_4px_34px_rgba\(0\,0\,0\,0\.25\)\]{--tw-drop-shadow: drop-shadow(0px 4px 34px rgba(0,0,0,.25));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)}.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)}.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(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.selection\:bg-\[\#FF2D20\] *::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(255 45 32 / var(--tw-bg-opacity, 1))}.selection\:bg-\[\#FF2D20\] *::selection{--tw-bg-opacity: 1;background-color:rgb(255 45 32 / var(--tw-bg-opacity, 1))}.selection\:text-white *::-moz-selection{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selection\:text-white *::selection{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selection\:bg-\[\#FF2D20\]::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(255 45 32 / var(--tw-bg-opacity, 1))}.selection\:bg-\[\#FF2D20\]::selection{--tw-bg-opacity: 1;background-color:rgb(255 45 32 / var(--tw-bg-opacity, 1))}.selection\:text-white::-moz-selection{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selection\:text-white::selection{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.hover\:bg-red-500:hover{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.hover\:text-black:hover{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.hover\:text-black\/70:hover{color:#000000b3}.hover\:text-gray-400:hover{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.hover\:text-gray-500:hover{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.hover\:text-gray-800:hover{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.hover\:text-gray-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.hover\:ring-black\/20:hover{--tw-ring-color: rgb(0 0 0 / .2)}.focus\:z-10:focus{z-index:10}.focus\:border-blue-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1))}.focus\:border-gray-300:focus{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.focus\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\:border-indigo-700:focus{--tw-border-opacity: 1;border-color:rgb(67 56 202 / var(--tw-border-opacity, 1))}.focus\:bg-gray-100:focus{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.focus\:bg-gray-50:focus{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.focus\:bg-gray-700:focus{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.focus\:bg-indigo-100:focus{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))}.focus\:text-gray-500:focus{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.focus\:text-gray-700:focus{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.focus\:text-gray-800:focus{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.focus\:text-indigo-800:focus{--tw-text-opacity: 1;color:rgb(55 48 163 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring: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(3px + 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-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-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\:ring-red-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 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-\[\#FF2D20\]:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 45 32 / var(--tw-ring-opacity, 1))}.active\:bg-gray-100:active{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.active\:bg-gray-900:active{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.active\:bg-red-700:active{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.active\:text-gray-500:active{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.active\:text-gray-700:active{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.disabled\:opacity-25:disabled{opacity:.25}@media(min-width:640px){.sm\:-my-px{margin-top:-1px;margin-bottom:-1px}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:ms-10{margin-inline-start:2.5rem}.sm\:ms-6{margin-inline-start:1.5rem}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:size-16{width:4rem;height:4rem}.sm\:size-6{width:1.5rem;height:1.5rem}.sm\:w-full{width:100%}.sm\:max-w-2xl{max-width:42rem}.sm\:max-w-lg{max-width:32rem}.sm\:max-w-md{max-width:28rem}.sm\:max-w-sm{max-width:24rem}.sm\:max-w-xl{max-width:36rem}.sm\:flex-1{flex:1 1 0%}.sm\:translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:rounded-lg{border-radius:.5rem}.sm\:p-8{padding:2rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:pt-5{padding-top:1.25rem}}@media(min-width:768px){.md\:row-span-3{grid-row:span 3 / span 3}}@media(min-width:1024px){.lg\:col-start-2{grid-column-start:2}.lg\:h-16{height:4rem}.lg\:max-w-7xl{max-width:80rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-col{flex-direction:column}.lg\:items-end{align-items:flex-end}.lg\:justify-center{justify-content:center}.lg\:gap-8{gap:2rem}.lg\:p-10{padding:2.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:pb-10{padding-bottom:2.5rem}.lg\:pt-0{padding-top:0}.lg\:text-\[\#FF2D20\]{--tw-text-opacity: 1;color:rgb(255 45 32 / var(--tw-text-opacity, 1))}}.ltr\:origin-top-left:where([dir=ltr],[dir=ltr] *){transform-origin:top left}.ltr\:origin-top-right:where([dir=ltr],[dir=ltr] *){transform-origin:top right}.rtl\:origin-top-left:where([dir=rtl],[dir=rtl] *){transform-origin:top left}.rtl\:origin-top-right:where([dir=rtl],[dir=rtl] *){transform-origin:top right}.rtl\:flex-row-reverse:where([dir=rtl],[dir=rtl] *){flex-direction:row-reverse}@media(prefers-color-scheme:dark){.dark\:block{display:block}.dark\:hidden{display:none}.dark\:border-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.dark\:border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.dark\:border-indigo-600{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.dark\:bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.dark\:bg-indigo-900\/50{background-color:#312e8180}.dark\:bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1))}.dark\:via-zinc-900{--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to)}.dark\:to-zinc-900{--tw-gradient-to: #18181b var(--tw-gradient-to-position)}.dark\:text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.dark\:text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.dark\:text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.dark\:text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.dark\:text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.dark\:text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.dark\:text-indigo-300{--tw-text-opacity: 1;color:rgb(165 180 252 / var(--tw-text-opacity, 1))}.dark\:text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.dark\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.dark\:text-white\/50{color:#ffffff80}.dark\:text-white\/70{color:#ffffffb3}.dark\:ring-zinc-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity, 1))}.dark\:hover\:border-gray-600:hover{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:hover\:border-gray-700:hover{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.dark\:hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-gray-800:hover{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-gray-900:hover{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.dark\:hover\:text-gray-100:hover{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.dark\:hover\:text-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.dark\:hover\:text-gray-300:hover{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:hover\:text-gray-400:hover{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.dark\:hover\:text-white\/70:hover{color:#ffffffb3}.dark\:hover\:text-white\/80:hover{color:#fffc}.dark\:hover\:ring-zinc-700:hover{--tw-ring-opacity: 1;--tw-ring-color: rgb(63 63 70 / var(--tw-ring-opacity, 1))}.dark\:focus\:border-blue-700:focus{--tw-border-opacity: 1;border-color:rgb(29 78 216 / var(--tw-border-opacity, 1))}.dark\:focus\:border-blue-800:focus{--tw-border-opacity: 1;border-color:rgb(30 64 175 / var(--tw-border-opacity, 1))}.dark\:focus\:border-gray-600:focus{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:focus\:border-gray-700:focus{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.dark\:focus\:border-indigo-300:focus{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.dark\:focus\:border-indigo-600:focus{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.dark\:focus\:bg-gray-700:focus{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:focus\:bg-gray-800:focus{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:focus\:bg-gray-900:focus{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.dark\:focus\:bg-indigo-900:focus{--tw-bg-opacity: 1;background-color:rgb(49 46 129 / var(--tw-bg-opacity, 1))}.dark\:focus\:bg-white:focus{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.dark\:focus\:text-gray-200:focus{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.dark\:focus\:text-gray-300:focus{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:focus\:text-gray-400:focus{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:focus\:text-indigo-200:focus{--tw-text-opacity: 1;color:rgb(199 210 254 / var(--tw-text-opacity, 1))}.dark\:focus\:ring-indigo-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1))}.dark\:focus\:ring-offset-gray-800:focus{--tw-ring-offset-color: #1f2937}.dark\:focus-visible\:ring-\[\#FF2D20\]:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 45 32 / var(--tw-ring-opacity, 1))}.dark\:focus-visible\:ring-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.dark\:active\:bg-gray-300:active{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.dark\:active\:bg-gray-700:active{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:active\:text-gray-300:active{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}
/* ====================================================================
OSOBY: edit-mode identický s view + × pod ceruzkou (claude-osoby-patch)
==================================================================== */
.contact-row .ip-input,
.contact-row .ip-input:hover,
.contact-row .ip-input:focus,
.contact-row .ip-input:active {
border: 1px solid transparent !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
height: auto !important;
}
.contact-row .ip-input.ip-name {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 20px !important;
color: rgb(17, 24, 39) !important;
min-width: 0 !important;
width: auto !important;
}
.contact-row .ip-input.ip-position {
font-size: 11px !important;
font-weight: 400 !important;
line-height: 16.5px !important;
color: rgb(107, 114, 128) !important;
min-width: 0 !important;
width: auto !important;
}
.contact-row .ip-input.ip-email,
.contact-row .ip-input.ip-phone {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
color: rgb(17, 24, 39) !important;
min-width: 0 !important;
width: auto !important;
}
.contact-row.editing {
border-top-color: rgb(229, 231, 235) !important;
border-right-color: rgb(229, 231, 235) !important;
border-bottom-color: rgb(229, 231, 235) !important;
border-left-color: rgb(209, 213, 219) !important;
background: rgb(255, 255, 255) !important;
box-shadow: none !important;
}
.contact-row.editing:not(:has(.contact-set-main)) {
border-left-color: rgb(245, 158, 11) !important;
background: rgb(255, 254, 248) !important;
}
.contact-row.editing:hover {
border-color: rgb(209, 213, 219) rgb(209, 213, 219)
rgb(209, 213, 219) rgb(156, 163, 175) !important;
box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px !important;
}
.contact-row.editing:not(:has(.contact-set-main)):hover {
border-left-color: rgb(217, 119, 6) !important;
}
.contact-row.editing .cp-delete-full {
display: flex !important;
position: absolute !important;
top: 40px !important;
right: 8px !important;
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: rgb(220, 38, 38) !important;
font-size: 0 !important;
font-weight: 500 !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: color 0.15s !important;
}
.contact-row.editing .cp-delete-full::before {
content: "\00d7" !important;
font-size: 20px !important;
line-height: 1 !important;
}
.contact-row.editing .cp-delete-full:hover {
background: transparent !important;
color: rgb(153, 27, 27) !important;
}
/* ====================================================================
Hover stavy: ceruzka (zelená + sivé orámovanie, ako kalendár ikona)
× (červené orámovanie + svetlo-červené bg)
==================================================================== */
/* Ceruzka — base reset + hover identický s .cdf-cal-btn */
.cp-row-edit-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
background: transparent !important;
color: rgb(107, 114, 128) !important;
cursor: pointer !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.cp-row-edit-btn:hover {
background: rgb(243, 244, 246) !important;
color: rgb(22, 163, 74) !important;
border-color: rgb(229, 231, 235) !important;
}
/* × — hover dostane červený border + svetlo-červené pozadie */
.contact-row.editing .cp-delete-full:hover {
background: rgb(254, 226, 226) !important;
border: 1px solid rgb(220, 38, 38) !important;
color: rgb(153, 27, 27) !important;
border-radius: 4px !important;
}
/* ====================================================================
✓ a × na rovnakú veľkosť 24×24 ako ceruzka
× hover: iba bg fill, žiadny border
==================================================================== */
/* Fajka ✓ — 24×24 */
.cp-save-check {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
background: transparent !important;
cursor: pointer !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.cp-save-check:hover {
background: rgb(220, 252, 231) !important;
}
/* × — 24×24, hover len bg fill (bez bordera) */
.contact-row.editing .cp-delete-full {
width: 24px !important;
height: 24px !important;
right: 14px !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
}
.contact-row.editing .cp-delete-full:hover {
background: rgb(254, 226, 226) !important;
border: 1px solid transparent !important;
color: rgb(153, 27, 27) !important;
border-radius: 4px !important;
}
/* ====================================================================
1) Fajka len v edit móde
2) Hover/focus signál na inputoch (ako DIČ)
3) Garantovať pôvodné font-sizes pre každé pole aj v :hover/:focus
==================================================================== */
/* 1) Fajka skrytá, zobrazí sa len keď je riadok v edit móde */
.cp-save-check { display: none !important; }
.contact-row.editing .cp-save-check { display: inline-flex !important; }
/* 2) Hover/focus signál editovateľnosti — gray bg + gray border / green focus ring */
.contact-row.editing .ip-input:hover {
background: rgb(249, 250, 251) !important;
border-color: rgb(229, 231, 235) !important;
}
.contact-row.editing .ip-input:focus {
background: rgb(255, 255, 255) !important;
border-color: rgb(8, 80, 65) !important;
box-shadow: rgba(8, 80, 65, 0.1) 0 0 0 2px !important;
outline: none !important;
}
/* 3) Font-size per pole — držia sa aj počas hover/focus
(žiadny shift / žiadne zväčšenie pri editácii) */
.contact-row.editing .ip-input.ip-name,
.contact-row.editing .ip-input.ip-name:hover,
.contact-row.editing .ip-input.ip-name:focus {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 20px !important;
color: rgb(17, 24, 39) !important;
}
.contact-row.editing .ip-input.ip-position,
.contact-row.editing .ip-input.ip-position:hover,
.contact-row.editing .ip-input.ip-position:focus {
font-size: 11px !important;
font-weight: 400 !important;
line-height: 16.5px !important;
color: rgb(107, 114, 128) !important;
}
.contact-row.editing .ip-input.ip-email,
.contact-row.editing .ip-input.ip-email:hover,
.contact-row.editing .ip-input.ip-email:focus,
.contact-row.editing .ip-input.ip-phone,
.contact-row.editing .ip-input.ip-phone:hover,
.contact-row.editing .ip-input.ip-phone:focus {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
color: rgb(17, 24, 39) !important;
}
/* ====================================================================
Zladiť border-width a border-radius na osoby inputoch s DIČ poľom:
- border: 0.5px (nie 1px)
- border-radius: 6px (nie 0)
==================================================================== */
.contact-row .ip-input,
.contact-row .ip-input:hover,
.contact-row .ip-input:focus,
.contact-row .ip-input:active {
border-width: 0.5px !important;
border-style: solid !important;
border-radius: 6px !important;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
/* ====================================================================
Žiadny layout shift medzi view a edit:
- border nahradený inset box-shadow (nezaberá layout)
- inputy display:block + vertical-align:top → bez line-box paddingu
- explicit height per pole = view text height
==================================================================== */
.contact-row .ip-input,
.contact-row .ip-input:hover,
.contact-row .ip-input:focus,
.contact-row .ip-input:active {
border: 0 !important;
border-width: 0 !important;
box-shadow: inset 0 0 0 0.5px transparent !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: top !important;
display: block !important;
background: transparent !important;
border-radius: 6px !important;
transition: background 0.15s, box-shadow 0.15s !important;
}
/* Konkrétne pole heights = view text heights */
.contact-row .ip-input.ip-name {
height: 20px !important;
line-height: 20px !important;
}
.contact-row .ip-input.ip-position {
height: 17px !important;
line-height: 16.5px !important;
}
.contact-row .ip-input.ip-email,
.contact-row .ip-input.ip-phone {
height: 20px !important;
line-height: 20px !important;
}
/* Hover/focus signál — len cez box-shadow, žiadny shift */
.contact-row.editing .ip-input:hover {
background: rgb(249, 250, 251) !important;
box-shadow: inset 0 0 0 0.5px rgb(229, 231, 235) !important;
}
.contact-row.editing .ip-input:focus {
background: rgb(255, 255, 255) !important;
box-shadow: inset 0 0 0 0.5px rgb(8, 80, 65),
0 0 0 2px rgba(8, 80, 65, 0.1) !important;
}
/* Phone v edit móde dostane +2px margin-top, aby zarovnal s view pozíciou */
.contact-row.editing .ip-input.ip-phone {
margin-top: 2px !important;
}
/* Name a Phone shift -1px (edit o 1px vyššie ako view) */
.contact-row.editing .ip-input.ip-name {
margin-top: -1px !important;
}
.contact-row.editing .ip-input.ip-phone {
margin-top: 1px !important;
}
/* Phone margin-top späť na 2px (kompenzuje cascade z name -1px, výsledok -1 shift) */
.contact-row.editing .ip-input.ip-phone {
margin-top: 2px !important;
}
/* Zarovnanie všetkých polí presne s view pozíciami (0px shift):
- Name: 0 (matches view 13)
- Position: +1px margin-top (kompenzuje chýbajúci 1px gap pod name)
→ kaskádne pushne flex-col (email/phone) o 1px dole → email match
- Phone: +1px margin-top (kompenzuje chýbajúci 1px gap pod email)
==================================================================== */
.contact-row.editing .ip-input.ip-name {
margin-top: 0 !important;
}
.contact-row.editing .ip-input.ip-position {
margin-top: 1px !important;
}
.contact-row.editing .ip-input.ip-phone {
margin-top: 1px !important;
}
/* Reset margin-top z inputov pre name/email/phone (icon by sa oddelil) */
.contact-row.editing .ip-input.ip-name,
.contact-row.editing .ip-input.ip-email,
.contact-row.editing .ip-input.ip-phone {
margin-top: 0 !important;
}
/* Position - bez ikony, môže ostať na inpute */
.contact-row.editing .ip-input.ip-position {
margin-top: 1px !important;
}
/* Phone - posun cez celý wrapper (icon + input spolu) */
.contact-row.editing .flex.flex-col > .flex.items-center:has(.ip-input.ip-phone) {
margin-top: 1px !important;
}
/* ====================================================================
Fajka vždy viditeľná. Slúži ako save indicator pre poznámku/úpravy.
- Default: gray (nič na uloženie)
- Edit mode aktívny ALEBO focus na poznámke/inpute: green (môžeš uložiť)
- Layout sa nehýbe — poznámka má vždy rovnakú šírku
==================================================================== */
.cp-save-check {
display: inline-flex !important;
visibility: visible !important;
color: rgb(156, 163, 175) !important;
}
.cp-save-check:hover {
background: rgb(243, 244, 246) !important;
color: rgb(107, 114, 128) !important;
}
/* Zelená keď: prebieha edit mode ALEBO user má focus na poznámke/poli */
.contact-row.editing .cp-save-check,
.contact-row:has(.ip-note:focus) .cp-save-check,
.contact-row:has(.ip-input:focus) .cp-save-check {
color: rgb(22, 163, 74) !important;
}
.contact-row.editing .cp-save-check:hover,
.contact-row:has(.ip-note:focus) .cp-save-check:hover,
.contact-row:has(.ip-input:focus) .cp-save-check:hover {
background: rgb(220, 252, 231) !important;
color: rgb(22, 163, 74) !important;
}
/* Fix selektora pre note textarea — skutočná trieda je .contact-note-text */
.contact-row:has(.contact-note-text:focus) .cp-save-check,
.contact-row:has(.contact-note-edit:focus) .cp-save-check {
color: rgb(22, 163, 74) !important;
}
.contact-row:has(.contact-note-text:focus) .cp-save-check:hover,
.contact-row:has(.contact-note-edit:focus) .cp-save-check:hover {
background: rgb(220, 252, 231) !important;
color: rgb(22, 163, 74) !important;
}
/* ====================================================================
1) Ceruzka — stále sivá, bez green (ako copy button)
2) Klik na ceruzku → všetky polia + poznámka svietia ako pri hovere
==================================================================== */
/* 1) Ceruzka iba sivá */
.cp-row-edit-btn,
.cp-row-edit-btn:hover,
.cp-row-edit-btn:focus,
.cp-row-edit-btn:active {
color: rgb(107, 114, 128) !important;
border-color: transparent !important;
}
.cp-row-edit-btn:hover {
background: rgb(243, 244, 246) !important;
color: rgb(107, 114, 128) !important;
}
/* 2) V edit móde — všetky inputy default v "hover" stave (gray bg + gray border) */
.contact-row.editing .ip-input {
background: rgb(249, 250, 251) !important;
box-shadow: inset 0 0 0 0.5px rgb(229, 231, 235) !important;
}
/* Poznámka tiež zvýraznená v edit móde */
.contact-row.editing .contact-note-text,
.contact-row.editing .contact-note-edit {
box-shadow: inset 0 0 0 0.5px rgb(229, 231, 235) !important;
}
/* ====================================================================
1) Poznámka v edit móde — amber border (matchuje žltú paletu)
2) Všetky polia rovnako široké až po pole poznámky
==================================================================== */
/* 1) Poznámka amber */
.contact-row.editing .contact-note-text,
.contact-row.editing .contact-note-edit {
box-shadow: inset 0 0 0 0.5px rgb(252, 211, 77) !important;
}
.contact-row.editing .contact-note-text:focus,
.contact-row.editing .contact-note-edit:focus {
box-shadow: inset 0 0 0 0.5px rgb(217, 119, 6),
0 0 0 2px rgba(217, 119, 6, 0.1) !important;
}
/* 2) Polia stretch — name, position, email, phone fill column */
.contact-row.editing .ip-input {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Wrappery vyplnia šírku */
.contact-row.editing .show-only > div:not(.avatar-column):not(.contact-note-slot) {
width: 100% !important;
}
/* Name wrapper (.flex.items-center) */
.contact-row.editing .flex.items-center:has(> .ip-input.ip-name) {
width: 100% !important;
}
/* Email/Phone column wrapper */
.contact-row.editing .flex.flex-col.text-sm {
width: 100% !important;
}
/* Email/Phone row wrapper */
.contact-row.editing .flex.flex-col.text-sm > .flex.items-center {
width: 100% !important;
}
/* Inline-flex okolo email/phone inputu (s ikonou) — flex 1 aby vyplnil */
.contact-row.editing .flex.flex-col.text-sm .inline-flex.items-center {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Fajka zelená keď JS označí .claude-dirty (neuložené zmeny v poznámke) */
.cp-save-check.claude-dirty {
color: rgb(22, 163, 74) !important;
cursor: pointer !important;
}
.cp-save-check.claude-dirty:hover {
background: rgb(220, 252, 231) !important;
color: rgb(22, 163, 74) !important;
}
/* Povinné polia (meno + funkcia) na novom riadku — červený border + svetlo červené bg keď prázdne */
.contact-row[data-claude-new="1"] .ip-input.ip-name:placeholder-shown,
.contact-row[data-claude-new="1"] .ip-input.ip-position:placeholder-shown {
box-shadow: inset 0 0 0 0.5px rgb(220, 38, 38) !important;
background: rgb(254, 242, 242) !important;
}
/* Focus na povinnom poli zatiaľ čo je prázdne — silnejší červený */
.contact-row[data-claude-new="1"] .ip-input.ip-name:placeholder-shown:focus,
.contact-row[data-claude-new="1"] .ip-input.ip-position:placeholder-shown:focus {
box-shadow: inset 0 0 0 0.5px rgb(220, 38, 38),
0 0 0 2px rgba(220, 38, 38, 0.1) !important;
background: rgb(255, 255, 255) !important;
}
/* Skryť horné badge-y: "Nový klient", rating "A", druh klienta ("Zmluvný") */
#client-detail > div.flex.items-center > span.show-only {
display: none !important;
}
/* XL title firmy v hlavičke detailu klienta + odsadenie zľava */
#client-detail h1.show-only {
font-size: 30px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin-left: 12px !important;
}
/* Edit mode title input zladený s h1 */
#client-detail input.edit-only.inline-edit.text-xl,
#client-detail input.edit-only.inline-edit.text-xl.font-medium {
font-size: 30px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin-left: 12px !important;
}
/* Title firmy — viac odsadený zľava (32px namiesto 12px) */
#client-detail h1.show-only,
#client-detail input.edit-only.inline-edit.text-xl {
margin-left: 32px !important;
}
/* Title firmy úplne na ľavej hrane (žiadne odsadenie) */
#client-detail h1.show-only,
#client-detail input.edit-only.inline-edit.text-xl,
#client-detail input.edit-only.inline-edit.text-xl.font-medium {
margin-left: 0 !important;
}
/* Title firmy — mierne odsadenie zľava (16px) */
#client-detail h1.show-only,
#client-detail input.edit-only.inline-edit.text-xl,
#client-detail input.edit-only.inline-edit.text-xl.font-medium {
margin-left: 16px !important;
}
/* ====================================================================
RÚZ / ORSR / FinStat — Variant A: profesionálne outline buttons
Claude 20260512 — clean external-link SVG icon, hover shadow
==================================================================== */
/* Mierne väčší gap medzi tlačítkami */
.ml-auto.flex.items-center.gap-1\.5.py-2 {
gap: 8px !important;
}
/* 3 outline buttons — biele bg, sivý border, jemný shadow */
a.show-only[href*="registeruz.sk"],
a.show-only[href*="orsr.sk"],
a.show-only[href*="finstat.sk"] {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 10px !important;
border: 1px solid rgb(209, 213, 219) !important;
border-radius: 6px !important;
background: rgb(255, 255, 255) !important;
color: rgb(55, 65, 81) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}
a.show-only[href*="registeruz.sk"]:hover,
a.show-only[href*="orsr.sk"]:hover,
a.show-only[href*="finstat.sk"]:hover {
border-color: rgb(156, 163, 175) !important;
background: rgb(249, 250, 251) !important;
color: rgb(17, 24, 39) !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08) !important;
}
a.show-only[href*="registeruz.sk"]:focus-visible,
a.show-only[href*="orsr.sk"]:focus-visible,
a.show-only[href*="finstat.sk"]:focus-visible {
outline: 2px solid rgb(59, 130, 246) !important;
outline-offset: 2px !important;
}
/* Skry ↗ text v druhom span a zobraz čistý external-link SVG cez mask */
a.show-only[href*="registeruz.sk"] > span:nth-of-type(2),
a.show-only[href*="orsr.sk"] > span:nth-of-type(2),
a.show-only[href*="finstat.sk"] > span:nth-of-type(2) {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
display: inline-block !important;
width: 12px !important;
height: 12px !important;
background-color: rgb(107, 114, 128) !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
mask-image: url("data:image/svg+xml;utf8,") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
opacity: 0.75 !important;
}
a.show-only[href*="registeruz.sk"]:hover > span:nth-of-type(2),
a.show-only[href*="orsr.sk"]:hover > span:nth-of-type(2),
a.show-only[href*="finstat.sk"]:hover > span:nth-of-type(2) {
background-color: rgb(17, 24, 39) !important;
opacity: 1 !important;
}
/* Variant A v2: vyčistiť vnútorné label spany — žiadne pastelové pilulky */
a.show-only[href*="registeruz.sk"] > span:nth-of-type(1),
a.show-only[href*="orsr.sk"] > span:nth-of-type(1),
a.show-only[href*="finstat.sk"] > span:nth-of-type(1) {
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
color: inherit !important;
font-weight: 500 !important;
}
/* ====================================================================
Variant A v3: farebné outline buttons per zdroj
RÚZ = fialová, ORSR = modrá, FinStat = zelená
==================================================================== */
/* RÚZ — fialová/lilac */
a.show-only[href*="registeruz.sk"] {
background: rgb(238, 237, 254) !important;
border-color: rgb(196, 192, 248) !important;
color: rgb(60, 52, 137) !important;
}
a.show-only[href*="registeruz.sk"]:hover {
background: rgb(224, 222, 252) !important;
border-color: rgb(167, 161, 240) !important;
color: rgb(40, 32, 110) !important;
box-shadow: 0 1px 3px 0 rgba(60, 52, 137, 0.12) !important;
}
a.show-only[href*="registeruz.sk"] > span:nth-of-type(2) {
background-color: rgb(60, 52, 137) !important;
opacity: 0.7 !important;
}
a.show-only[href*="registeruz.sk"]:hover > span:nth-of-type(2) {
background-color: rgb(40, 32, 110) !important;
opacity: 1 !important;
}
/* ORSR — modrá */
a.show-only[href*="orsr.sk"] {
background: rgb(230, 241, 251) !important;
border-color: rgb(165, 199, 237) !important;
color: rgb(12, 68, 124) !important;
}
a.show-only[href*="orsr.sk"]:hover {
background: rgb(213, 232, 250) !important;
border-color: rgb(130, 178, 230) !important;
color: rgb(8, 50, 98) !important;
box-shadow: 0 1px 3px 0 rgba(12, 68, 124, 0.12) !important;
}
a.show-only[href*="orsr.sk"] > span:nth-of-type(2) {
background-color: rgb(12, 68, 124) !important;
opacity: 0.7 !important;
}
a.show-only[href*="orsr.sk"]:hover > span:nth-of-type(2) {
background-color: rgb(8, 50, 98) !important;
opacity: 1 !important;
}
/* FinStat — zelená */
a.show-only[href*="finstat.sk"] {
background: rgb(225, 245, 238) !important;
border-color: rgb(157, 213, 191) !important;
color: rgb(8, 80, 65) !important;
}
a.show-only[href*="finstat.sk"]:hover {
background: rgb(205, 240, 224) !important;
border-color: rgb(124, 195, 167) !important;
color: rgb(5, 60, 48) !important;
box-shadow: 0 1px 3px 0 rgba(8, 80, 65, 0.12) !important;
}
a.show-only[href*="finstat.sk"] > span:nth-of-type(2) {
background-color: rgb(8, 80, 65) !important;
opacity: 0.7 !important;
}
a.show-only[href*="finstat.sk"]:hover > span:nth-of-type(2) {
background-color: rgb(5, 60, 48) !important;
opacity: 1 !important;
}
/* ====================================================================
ZODPOVEDNÝ: Účtovník + Mzdár vedľa seba, bez dátumov "od"
==================================================================== */
/* Grid layout pre Zodpovedný col-block */
.col-block:has(.zodp-select) {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
column-gap: 20px !important;
row-gap: 4px !important;
align-items: start !important;
}
/* Section title "Zodpovedný" — celá šírka */
.col-block:has(.zodp-select) > .section-lbl {
grid-column: 1 / -1 !important;
}
/* "Účtovník" label = stĺpec 1, riadok 2 */
.col-block:has(.zodp-select) > :nth-child(2) {
grid-column: 1 !important;
grid-row: 2 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
}
/* Účtovník row = stĺpec 1, riadok 3 */
.col-block:has(.zodp-select) > :nth-child(3) {
grid-column: 1 !important;
grid-row: 3 !important;
}
/* "Mzdy" label = stĺpec 2, riadok 2 */
.col-block:has(.zodp-select) > :nth-child(4) {
grid-column: 2 !important;
grid-row: 2 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
}
/* Mzdy row = stĺpec 2, riadok 3 */
.col-block:has(.zodp-select) > :nth-child(5) {
grid-column: 2 !important;
grid-row: 3 !important;
}
/* Skry pravú časť "od + dátum" v oboch riadkoch */
.col-block:has(.zodp-select) .flex.items-center.justify-between > .flex.items-center.gap-2 {
display: none !important;
}
/* Pre istotu: skry aj edit-only input pre dátum */
.col-block:has(.zodp-select) .flex.items-center.justify-between input.edit-only[type="date"] {
display: none !important;
}
/* ====================================================================
Stručná štatistika — Variant 12: ikony + pilulky, vycentrované
==================================================================== */
.claude-stat-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px !important;
max-width: 480px !important;
margin: 0 auto !important;
}
.claude-stat-item {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.claude-stat-icon {
width: 32px;
height: 32px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.claude-stat-icon-purple {
background: rgb(238, 237, 254);
color: rgb(60, 52, 137);
}
.claude-stat-icon-green {
background: rgb(225, 245, 238);
color: rgb(8, 80, 65);
}
.claude-stat-body {
min-width: 0;
}
.claude-stat-lbl {
font-size: 11px;
color: rgb(156, 163, 175);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 4px;
}
.claude-stat-val {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.claude-stat-date {
font-size: 15px;
font-weight: 500;
color: rgb(17, 24, 39);
font-variant-numeric: tabular-nums;
}
.claude-stat-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
.claude-pill-purple {
background: rgb(238, 237, 254);
color: rgb(60, 52, 137);
border: 1px solid rgb(196, 192, 248);
}
.claude-pill-red {
background: rgb(252, 235, 235);
color: rgb(121, 31, 31);
border: 1px solid rgb(247, 193, 193);
}
/* ====================================================================
Stručná štatistika — rámček (Variant 1)
==================================================================== */
.col-block:has(.claude-stat-grid) {
background: rgb(250, 250, 251) !important;
border: 1px solid rgb(229, 231, 235) !important;
border-radius: 8px !important;
padding: 18px 24px !important;
}
/* ====================================================================
Stručná štatistika — Variant 2: sub-karty pre každú službu
==================================================================== */
.claude-stat-grid {
gap: 12px !important;
}
.claude-stat-item {
background: #ffffff !important;
border: 1px solid rgb(229, 231, 235) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
gap: 12px !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.claude-stat-item:hover {
border-color: rgb(209, 213, 219) !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}
/* ====================================================================
Štítky · Variant 7 — ikona vlajky/krížika + neutrálny štítok
==================================================================== */
.claude-pill-purple {
background: rgb(243, 244, 246) !important;
color: rgb(75, 85, 99) !important;
border: 1px solid rgb(209, 213, 219) !important;
padding: 2px 8px 2px 6px !important;
gap: 5px !important;
}
.claude-pill-red {
padding: 2px 8px 2px 6px !important;
gap: 5px !important;
}
.claude-stat-pill svg {
width: 11px;
height: 11px;
flex-shrink: 0;
}
/* Roztiahnuť sub-karty do plnej šírky col-block */
.claude-stat-grid {
max-width: none !important;
gap: 14px !important;
}
.claude-stat-item {
padding: 16px 18px !important;
}
/* Skryť celú "Poznámky" sekciu pod FinStat monitoring */
#client-detail .tab-content .mt-5.pt-4.border-t.border-gray-100:has(> .section-lbl) {
display: none !important;
}
/* ====================================================================
Prepojené firmy — riadkový zoznam s ikonou, bez IČO
==================================================================== */
/* Kontajner — z chip layoutu spravíme stack riadkov */
.col-block:has(.rel-chip) .flex.flex-wrap.gap-2 {
display: block !important;
gap: 0 !important;
}
/* Chip → riadok */
.rel-chip {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.rel-chip + .rel-chip {
border-top: 1px solid rgb(243, 244, 246);
}
/* Skry IČO span */
.rel-chip > span.text-xs.tabular-nums {
display: none !important;
}
/* Názov firmy zaberá voľný priestor */
.rel-chip > a {
flex: 1;
min-width: 0;
font-size: 14px;
color: rgb(17, 24, 39);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* × tlačidlo vpravo */
.rel-chip > button.rel-del {
margin-left: auto !important;
font-size: 16px !important;
line-height: 1 !important;
padding: 4px !important;
flex-shrink: 0;
}
/* Avatar ikona */
.rel-icon {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rel-icon-firma {
background: rgb(230, 241, 251);
color: rgb(12, 68, 124);
border-radius: 4px;
}
.rel-icon-szco {
background: rgb(254, 243, 219);
color: rgb(133, 79, 11);
border-radius: 50%;
}
.rel-icon svg {
width: 14px;
height: 14px;
}
/* ====================================================================
Prepojené firmy · Variant 5 — vzdušnejší layout, bez separátorov
==================================================================== */
/* Odstránenie separátora medzi riadkami */
.rel-chip + .rel-chip {
border-top: 0 !important;
}
/* Väčší gap medzi ikonou a textom + jemné vertikálne medzery */
.rel-chip {
padding: 6px 0 !important;
gap: 14px !important;
}
/* Väčší margin medzi skupinami vzťahov */
.col-block:has(.rel-chip) > div > .mb-3 {
margin-bottom: 20px !important;
}
/* Väčší margin pod label vzťahu */
.col-block:has(.rel-chip) .text-xs.uppercase.tracking-wide.mb-1 {
margin-bottom: 10px !important;
}
/* Mierne odsadenie obsahu od ľavej hrany sekcie */
.col-block:has(.rel-chip) > div {
padding-left: 6px;
}
/* Trochu väčšia avatar ikona */
.rel-icon {
width: 28px !important;
height: 28px !important;
}
.rel-icon svg {
width: 15px !important;
height: 15px !important;
}
/* ====================================================================
Prepojené firmy · v3 — finálne vzdušnenie
==================================================================== */
/* Padding zľava na celý col-block (vzdušnejšie) */
.col-block:has(.rel-chip) {
padding-left: 10px;
padding-right: 10px;
}
/* Reset padding-left z predošlého patchu na inner div */
.col-block:has(.rel-chip) > div {
padding-left: 0 !important;
}
/* Absolútne žiaden border na rel-chip — odstránenie všetkých zdrojov */
.rel-chip {
border: 0 !important;
border-top: 0 !important;
}
.rel-chip + .rel-chip {
border-top: 0 !important;
}
/* ====================================================================
Prepojené firmy · ceruzka v rohu + add form
==================================================================== */
.col-block:has(.rel-chip) .section-lbl {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.claude-pf-pencil {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
cursor: pointer;
color: rgb(107, 114, 128);
background: transparent;
border: 1px solid transparent;
transition: all 0.15s ease;
}
.claude-pf-pencil:hover {
background: rgb(243, 244, 246);
border-color: rgb(209, 213, 219);
color: rgb(17, 24, 39);
}
.col-block.claude-pf-edit .claude-pf-pencil {
background: rgb(225, 245, 238);
border-color: rgb(157, 213, 191);
color: rgb(8, 80, 65);
}
.claude-pf-pencil svg {
width: 13px;
height: 13px;
}
/* × buttons: show only when section is in claude-pf-edit */
.col-block:has(.rel-chip):not(.claude-pf-edit) .rel-del.edit-only {
display: none !important;
}
.col-block.claude-pf-edit .rel-del.edit-only {
display: inline-flex !important;
}
/* Add form */
.claude-pf-add {
display: none;
margin-top: 16px;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
background: rgb(250, 250, 251);
border: 1px dashed rgb(209, 213, 219);
border-radius: 6px;
}
.col-block.claude-pf-edit .claude-pf-add {
display: flex;
}
.claude-pf-add-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgb(243, 244, 246);
color: rgb(156, 163, 175);
border-radius: 5px;
transition: background 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
}
.claude-pf-add-icon.is-firma {
background: rgb(230, 241, 251);
color: rgb(12, 68, 124);
border-radius: 5px;
}
.claude-pf-add-icon.is-szco {
background: rgb(254, 243, 219);
color: rgb(133, 79, 11);
border-radius: 50%;
}
.claude-pf-add-icon svg {
width: 14px;
height: 14px;
}
.claude-pf-add input.claude-pf-add-name,
.claude-pf-add select.claude-pf-add-rel {
padding: 6px 10px;
border: 1px solid rgb(209, 213, 219);
border-radius: 5px;
font-size: 13px;
background: white;
outline: none;
font-family: inherit;
}
.claude-pf-add input.claude-pf-add-name {
flex: 1;
min-width: 140px;
}
.claude-pf-add input.claude-pf-add-name:focus,
.claude-pf-add select.claude-pf-add-rel:focus {
border-color: rgb(8, 80, 65);
box-shadow: 0 0 0 2px rgba(8, 80, 65, 0.1);
}
.claude-pf-add-save {
padding: 6px 14px;
background: rgb(8, 80, 65);
color: white;
border: 0;
border-radius: 5px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.claude-pf-add-save:hover {
background: rgb(5, 60, 48);
}
.claude-pf-add-save:disabled {
background: rgb(156, 163, 175);
cursor: not-allowed;
}
.claude-pf-add-hint {
font-size: 11px;
color: rgb(107, 114, 128);
width: 100%;
}
/* ====================================================================
FinStat Monitoring · Variant 3 (priority view)
==================================================================== */
.claude-finstat {
background: #fff;
border: 1px solid rgb(157, 213, 191);
border-radius: 10px;
overflow: hidden;
}
.claude-finstat-header {
background: linear-gradient(135deg, rgb(8,116,80) 0%, rgb(8,145,93) 100%);
color: white;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.claude-finstat-title {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 500;
}
.claude-finstat-title svg { width: 16px; height: 16px; }
.claude-finstat-count {
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
background: rgba(255,255,255,0.18); font-size: 11px;
}
.claude-finstat-meta {
display: flex; align-items: center; gap: 10px;
font-size: 11px; opacity: 0.9;
}
.claude-finstat-refresh {
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 5px; border: 1px solid rgba(255,255,255,0.3); background: transparent;
color: white; cursor: pointer;
}
.claude-finstat-refresh:hover { background: rgba(255,255,255,0.15); }
.claude-finstat-refresh svg { width: 12px; height: 12px; }
.claude-finstat-body { padding: 14px 18px; background: #fff; }
.claude-finstat-section-lbl {
font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.claude-finstat-section-lbl svg { width: 14px; height: 14px; }
.claude-finstat-section-critical { color: rgb(121, 31, 31); }
.claude-finstat-section-info { color: rgb(91, 127, 116); margin-top: 16px; }
.claude-finstat-item-critical {
border-radius: 6px; padding: 10px 12px; margin-bottom: 6px;
display: flex; gap: 10px; align-items: center;
}
.claude-finstat-item-critical.kind-red {
background: rgb(252, 235, 235); border: 1px solid rgb(247, 193, 193);
}
.claude-finstat-item-critical.kind-amber {
background: rgb(254, 243, 219); border: 1px solid rgb(250, 199, 117);
}
.claude-finstat-item-critical > svg { width: 14px; height: 14px; flex-shrink: 0; }
.claude-finstat-item-critical .body { flex: 1; font-size: 13px; line-height: 1.5; min-width: 0; }
.claude-finstat-item-critical .body .meta {
font-size: 11px; color: rgb(91, 127, 116);
}
.claude-finstat-item-critical .src {
font-size: 11px; color: rgb(91, 127, 116); text-decoration: none; flex-shrink: 0;
}
.claude-finstat-item-critical .src:hover { color: rgb(8, 80, 65); }
.claude-finstat-item-info {
padding: 8px 12px; display: flex; gap: 10px; align-items: center;
font-size: 12px; color: rgb(75, 85, 99);
}
.claude-finstat-item-info > svg { width: 14px; height: 14px; flex-shrink: 0; }
.claude-finstat-item-info .body { flex: 1; min-width: 0; }
.claude-finstat-item-info .body strong { color: rgb(31, 41, 55); font-weight: 500; }
.claude-finstat-item-info .date {
color: rgb(107, 114, 128); flex-shrink: 0; font-size: 11px;
}
.t-info { color: rgb(12, 68, 124); }
.t-green { color: rgb(8, 80, 65); }
.t-amber { color: rgb(133, 79, 11); }
.t-red { color: rgb(121, 31, 31); }
/* ====================================================================
FinStat Monitoring · v3b — pravá polovica + bledo-zelená výplň
==================================================================== */
.claude-finstat {
max-width: 50% !important;
margin-left: auto !important;
background: rgb(240, 250, 245) !important;
}
.claude-finstat-body {
background: rgb(240, 250, 245) !important;
}
/* FinStat: full width opäť */
.claude-finstat {
max-width: none !important;
margin-left: 0 !important;
}
/* ====================================================================
Osoby · zjednotené ikony pencil/check/× s prepojené firmy pencil
26×26, border-radius 5px, transparent default, jemný hover
==================================================================== */
.contact-row .cp-row-edit-btn,
.contact-row .cp-save-check,
.contact-row .contact-del {
width: 26px !important;
height: 26px !important;
border-radius: 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid transparent !important;
cursor: pointer !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
color: rgb(107, 114, 128) !important;
padding: 0 !important;
flex-shrink: 0;
}
/* Pencil — gray hover */
.contact-row .cp-row-edit-btn:hover {
background: rgb(243, 244, 246) !important;
border-color: rgb(209, 213, 219) !important;
color: rgb(17, 24, 39) !important;
}
/* Check (fajka) — gray default, green hover, green when dirty */
.contact-row .cp-save-check:hover {
background: rgb(225, 245, 238) !important;
border-color: rgb(157, 213, 191) !important;
color: rgb(8, 80, 65) !important;
}
.contact-row .cp-save-check.claude-dirty,
.contact-row .cp-save-check.dirty {
color: rgb(8, 80, 65) !important;
}
.contact-row .cp-save-check.claude-dirty:hover,
.contact-row .cp-save-check.dirty:hover {
background: rgb(225, 245, 238) !important;
border-color: rgb(157, 213, 191) !important;
}
/* × delete — gray default, red hover */
.contact-row .contact-del {
font-size: 14px !important;
line-height: 1 !important;
}
.contact-row .contact-del:hover {
background: rgb(252, 235, 235) !important;
border-color: rgb(247, 193, 193) !important;
color: rgb(220, 38, 38) !important;
}
/* Inner SVG → 13×13 ako pri prepojené firmy pencil */
.contact-row .cp-row-edit-btn svg,
.contact-row .cp-save-check svg {
width: 13px !important;
height: 13px !important;
}
/* ====================================================================
Osoby · × delete (cp-delete-full) — 26×26 + permanentný červený border
Identický štýl ako fajka, len v červenej palete
==================================================================== */
.contact-row .cp-delete-full {
width: 26px !important;
height: 26px !important;
border-radius: 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid rgb(247, 193, 193) !important;
color: rgb(220, 38, 38) !important;
cursor: pointer !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1 !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
flex-shrink: 0;
}
.contact-row .cp-delete-full:hover {
background: rgb(252, 235, 235) !important;
border-color: rgb(220, 38, 38) !important;
color: rgb(185, 28, 28) !important;
}
.contact-row .cp-delete-full svg {
width: 13px !important;
height: 13px !important;
}
/* × delete · vyššia špecificita ako predošlé pravidlá */
.contact-row.editing .cp-delete-full,
.contact-row .cp-delete-full {
width: 26px !important;
height: 26px !important;
border-radius: 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid rgb(247, 193, 193) !important;
color: rgb(220, 38, 38) !important;
cursor: pointer !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1 !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
position: absolute !important;
top: 40px !important;
right: 8px !important;
}
.contact-row.editing .cp-delete-full:hover,
.contact-row .cp-delete-full:hover {
background: rgb(252, 235, 235) !important;
border-color: rgb(220, 38, 38) !important;
color: rgb(185, 28, 28) !important;
}
/* × delete · skry text "Vymazať tento kontakt" + zobraz × cez ::before */
.contact-row.editing .cp-delete-full,
.contact-row .cp-delete-full {
font-size: 0 !important;
color: rgb(220, 38, 38) !important;
}
.contact-row.editing .cp-delete-full::before,
.contact-row .cp-delete-full::before {
content: "✕";
font-size: 13px;
line-height: 1;
color: rgb(220, 38, 38);
font-weight: 500;
}
.contact-row.editing .cp-delete-full:hover::before,
.contact-row .cp-delete-full:hover::before {
color: rgb(185, 28, 28);
}
/* × button: default bez bordera, hover červený border + bledo-červené pozadie
Zarovnaný pod pencil (right: 15px aby kopíroval pencil pozíciu) */
.contact-row.editing .cp-delete-full,
.contact-row .cp-delete-full {
border: 1px solid transparent !important;
background: transparent !important;
right: 15px !important;
}
.contact-row.editing .cp-delete-full:hover,
.contact-row .cp-delete-full:hover {
background: rgb(252, 235, 235) !important;
border-color: rgb(220, 38, 38) !important;
}
.contact-row.editing .cp-delete-full:hover::before,
.contact-row .cp-delete-full:hover::before {
color: rgb(185, 28, 28);
}
/* ====================================================================
Prepojené firmy · × delete button — rovnaký štýl ako v Osoby
26×26, border-radius 5px, transparent default, červený hover
==================================================================== */
.rel-chip .rel-del,
.rel-chip > button.rel-del {
width: 26px !important;
height: 26px !important;
border-radius: 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid transparent !important;
color: rgb(220, 38, 38) !important;
cursor: pointer !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 1 !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
margin-left: auto !important;
flex-shrink: 0;
}
.rel-chip .rel-del::before,
.rel-chip > button.rel-del::before {
content: "✕";
font-size: 13px;
line-height: 1;
color: rgb(220, 38, 38);
font-weight: 500;
}
.rel-chip .rel-del:hover,
.rel-chip > button.rel-del:hover {
background: rgb(252, 235, 235) !important;
border-color: rgb(220, 38, 38) !important;
}
.rel-chip .rel-del:hover::before,
.rel-chip > button.rel-del:hover::before {
color: rgb(185, 28, 28);
}
/* Prepojené firmy × → identická ikona ako Osoby ×: znak "×" s font-size 20px */
.rel-chip .rel-del::before,
.rel-chip > button.rel-del::before {
content: "×" !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: rgb(220, 38, 38) !important;
}
.rel-chip .rel-del:hover::before,
.rel-chip > button.rel-del:hover::before {
color: rgb(185, 28, 28) !important;
}
/* ====================================================================
Osoby · tlmené "Nezadané" placeholdery pre chýbajúci email/telefón
==================================================================== */
.claude-empty-field {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 14px !important;
color: rgb(156, 163, 175) !important;
}
.claude-empty-field svg {
width: 13px !important;
height: 13px !important;
color: rgb(209, 213, 219) !important;
flex-shrink: 0;
}
.claude-empty-field .claude-empty-text {
font-size: 13px;
color: rgb(156, 163, 175);
font-style: italic;
}
/* Empty placeholder · identická veľkosť ako vyplnené pole, len iná farba */
.claude-empty-field .claude-empty-text {
font-size: 14px !important;
color: rgb(156, 163, 175) !important;
font-style: normal !important;
line-height: 1.5 !important;
}
/* ====================================================================
Osoby · inline edit · skry block-edit, povol inline ip-input v empty rows
==================================================================== */
/* Skryť block-edit form (duplicitné polia dole) */
.contact-row.editing .edit-only.block-edit,
.contact-row .edit-only.block-edit {
display: none !important;
}
/* V edit móde: skryť "Nezadané" placeholder text, ukázať ip-input */
.contact-row.editing .claude-empty-field .claude-empty-text {
display: none !important;
}
.contact-row.editing .claude-empty-field .ip-input {
display: inline-block !important;
}
/* Empty rows pre Adama atď. — skry input v view, zobraz v edit */
.contact-row [data-claude-empty-row="1"] input.ip-input {
display: none !important;
}
.contact-row.editing [data-claude-empty-row="1"] input.ip-input {
display: inline-block !important;
}
.contact-row.editing [data-claude-empty-row="1"] .claude-placeholder-text {
display: none !important;
}
/* Zladiť výšku prázdnych email/phone riadkov s Peterovými (21px) */
.contact-row [data-claude-empty-row="1"] {
min-height: 21px;
}
/* Pridať "—" do prázdneho email/phone poľa, vycentrované */
.contact-row [data-claude-empty-row="1"] .claude-placeholder-text::before {
content: "—";
color: rgb(209, 213, 219);
display: inline-block;
min-width: 140px;
text-align: center;
}
/* V edit móde sa pomlčka skryje (input prevezme miesto) */
.contact-row.editing [data-claude-empty-row="1"] .claude-placeholder-text::before {
display: none;
}
/* Pomlčka "-" naľavo, štýl ako Dôvod ukončenia (color #9CA3AF, 14px) */
.contact-row [data-claude-empty-row="1"] .claude-placeholder-text::before {
content: "-" !important;
color: rgb(156, 163, 175) !important;
font-size: 14px !important;
min-width: 0 !important;
text-align: left !important;
display: inline !important;
}
.contact-row.editing [data-claude-empty-row="1"] .claude-placeholder-text::before {
display: none !important;
}
/* Variant 2: zaoblené všetky rohy contact-row (8px) */
.contact-row {
border-radius: 8px !important;
overflow: hidden;
}
/* Hyphen "-" only when input has no value (placeholder span empty AND row not marked filled) */
.contact-row [data-claude-empty-row="1"] .claude-placeholder-text:empty::before {
content: "-" !important;
color: rgb(156, 163, 175) !important;
font-size: 14px !important;
text-align: left !important;
display: inline !important;
}
/* Defensive override: when row has data-address (already saved), hide hyphen */
.contact-row.claude-addr-filled [data-claude-empty-row="1"] .claude-placeholder-text::before,
.contact-row[data-address]:not([data-address=""]) [data-claude-empty-row="1"] .claude-placeholder-text::before {
content: "" !important;
display: none !important;
}
/* Hide hyphen entirely while editing */
.contact-row.editing [data-claude-empty-row="1"] .claude-placeholder-text::before {
display: none !important;
}