*,:after,:before{--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:rgba(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:rgba(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: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family: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,pre,samp{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,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{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}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--accent:79 70 229;--accent-2:14 165 233;--surface:255 255 255;--surface-muted:248 250 252;--border:226 232 240;--ink:15 23 42}*{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{overflow-x:hidden}button,input,select,textarea{font:inherit}[role=button],button{-webkit-tap-highlight-color:transparent}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}address{font-style:normal}a{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes spin{to{transform:rotate(1turn)}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.98)}}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}}.high-contrast{filter:contrast(1.15)}.reduced-motion *,.reduced-motion :after,.reduced-motion :before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}@media (max-width:767px){.item-actions,.item-row>input,.item-total,.suffix-input{position:relative}.item-row>input:before{content:none}.item-quantity:after{content:"Quantity"}}@media print{@page{size:A4;margin:0}body,html{width:210mm;min-height:297mm;background:#fff!important}body *{visibility:hidden!important}#invoicePreview,#invoicePreview *{visibility:visible!important}#invoicePreview{position:absolute!important;inset:0 auto auto 0!important;width:210mm!important;min-height:297mm!important;box-shadow:none!important;transform:none!important}.no-print{display:none!important}}*,:after,:before{--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:rgba(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:rgba(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: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family: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,pre,samp{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,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{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}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.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}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.max-w-7xl{max-width:80rem}.max-w-\[1800px\]{max-width:1800px}.flex-1{flex:1 1 0%}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.border-t{border-top-width:1px}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0{padding:0}.p-3{padding:.75rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-bottom:1.25rem}.pt-5,.py-5{padding-top:1.25rem}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-6{line-height:1.5rem}.tracking-wider{letter-spacing:.05em}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark\:border-slate-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:text-slate-100:is(.dark *){--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:text-slate-400:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:inline-flex{display:inline-flex}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:text-left{text-align:left}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-\[180px_1fr\]{grid-template-columns:180px 1fr}.md\:p-6{padding:1.5rem}}@media (min-width:1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[220px_minmax\(0\2c 1fr\)\]{grid-template-columns:220px minmax(0,1fr)}.lg\:space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.lg\:overflow-visible{overflow:visible}.lg\:p-4{padding:1rem}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-\[1\.4fr_\.8fr\]{grid-template-columns:1.4fr .8fr}}.field>label{display:block;margin-bottom:.375rem;font-size:.75rem;line-height:1rem;font-weight:600;color:rgb(71 85 105)}.dark .field>label{color:rgb(203 213 225)}
.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}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem}.mb-1,.my-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.max-w-7xl{max-width:80rem}.max-w-\[1800px\]{max-width:1800px}.flex-1{flex:1 1 0%}.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))}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.border-t{border-top-width:1px}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0{padding:0}.p-3{padding:.75rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-bottom:1.25rem}.pt-5,.py-5{padding-top:1.25rem}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-6{line-height:1.5rem}.tracking-wider{letter-spacing:.05em}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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)}.hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.dark\:border-slate-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:text-slate-100:is(.dark *){--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:text-slate-400:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:hover\:text-white:hover:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:inline-flex{display:inline-flex}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:text-left{text-align:left}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-\[180px_1fr\]{grid-template-columns:180px 1fr}.md\:p-6{padding:1.5rem}}@media (min-width:1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[220px_minmax\(0\2c 1fr\)\]{grid-template-columns:220px minmax(0,1fr)}.lg\:space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.lg\:overflow-visible{overflow:visible}.lg\:p-4{padding:1rem}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-\[1\.4fr_\.8fr\]{grid-template-columns:1.4fr .8fr}}/* InvoiceCraft component layer — v1.2.0 */
:root {
  --app-bg: #f4f7fb;
  --app-bg-2: #eef2ff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-strong: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --primary: #4f46e5;
  --primary-2: #6366f1;
  --primary-soft: #eef2ff;
  --cyan: #0ea5e9;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 8px 24px rgba(15,23,42,.07);
  --shadow-md: 0 18px 48px rgba(15,23,42,.10);
  --shadow-lg: 0 30px 80px rgba(15,23,42,.16);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --header-h: 66px;
}

.dark {
  --app-bg: #070b14;
  --app-bg-2: #0c1222;
  --surface: #111827;
  --surface-soft: #0f172a;
  --surface-strong: #172033;
  --text: #f8fafc;
  --muted: #a8b3c7;
  --muted-2: #748198;
  --border: #263247;
  --border-strong: #36445d;
  --primary: #818cf8;
  --primary-2: #6366f1;
  --primary-soft: rgba(99,102,241,.14);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.22);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.22);
  --shadow-md: 0 20px 52px rgba(0,0,0,.34);
  --shadow-lg: 0 36px 90px rgba(0,0,0,.48);
}

html { background: var(--app-bg); color: var(--text); }
body.bg-app,
.bg-app {
  background:
    radial-gradient(circle at 18% -8%, rgba(99,102,241,.13), transparent 32rem),
    radial-gradient(circle at 95% 0%, rgba(14,165,233,.10), transparent 28rem),
    linear-gradient(180deg, var(--app-bg-2), var(--app-bg) 26rem);
  color: var(--text);
}

::selection { background: rgba(99,102,241,.24); }
button, input, select, textarea { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(99,102,241,.28);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  border-radius: 10px;
  background: var(--text);
  color: var(--surface);
  padding: 10px 14px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { transform: translateY(0); }

.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--header-h);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed 58%, #0ea5e9);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: 0 10px 24px rgba(79,70,229,.30), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-title { display: block; color: var(--text); font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.brand-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1; }

.btn, .icon-btn, .text-btn, .nav-item, .theme-menu button, .floating-menu button, .item-menu button {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.btn-primary { border-color: rgba(79,70,229,.62); background: linear-gradient(135deg, #5b52ed, #4f46e5); color: #fff; box-shadow: 0 8px 22px rgba(79,70,229,.24); }
.btn-primary:hover { background: linear-gradient(135deg, #6c63f2, #554be7); box-shadow: 0 12px 28px rgba(79,70,229,.30); }
.btn-secondary { border-color: var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.btn-danger { border-color: rgba(220,38,38,.22); background: rgba(220,38,38,.08); color: #dc2626; }
.dark .btn-danger { color: #fca5a5; }
.btn-sm { min-height: 34px; border-radius: 9px; padding: 7px 10px; font-size: 12px; }
.icon-btn {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow-xs);
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--surface-soft); color: var(--text); transform: translateY(-1px); }
.icon-btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.text-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 12px; font-weight: 750; }
.text-btn:hover { color: var(--primary-2); }

.theme-menu, .floating-menu, .item-menu {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
.theme-menu {
  position: fixed;
  z-index: 90;
  top: 58px;
  right: 118px;
  width: 184px;
  padding: 6px;
}
.theme-menu button, .floating-menu button, .item-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: 9px;
  padding: 9px 10px;
  color: var(--text);
  text-align: left;
  font-size: 13px;
}
.theme-menu button:hover, .floating-menu button:hover, .item-menu button:hover { background: var(--surface-strong); }

.app-sidebar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  align-self: start;
  min-height: calc(100vh - var(--header-h));
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-item {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
  text-align: left;
}
.nav-item:hover { background: var(--surface-soft); color: var(--text); }
.nav-item.active { border-color: rgba(99,102,241,.18); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(99,102,241,.04); }
.sidebar-card {
  margin: 6px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--primary-soft) 45%, var(--surface)));
  padding: 15px;
  box-shadow: var(--shadow-xs);
}

.workspace-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.editor-panel { min-width: 0; padding: 22px; }
.section-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.page-title { margin-top: 4px; color: var(--text); font-size: clamp(22px, 2.1vw, 31px); font-weight: 850; line-height: 1.16; letter-spacing: -.035em; }

.form-card, .dashboard-card {
  position: relative;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 20px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dark .form-card, .dark .dashboard-card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.035); }
.form-card:hover { border-color: color-mix(in srgb, var(--border-strong) 86%, transparent); }
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
.card-heading > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card-heading h2, .dashboard-card > .card-heading h2 { color: var(--text); font-size: 15px; font-weight: 820; letter-spacing: -.015em; }
.step-badge {
  display: inline-grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(99,102,241,.20);
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}
.form-grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 14px; }
.field { position: relative; display: block; min-width: 0; }
.field > span, .field > label, .field label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .01em;
}
.field input, .field select, .field textarea, .input, .select,
.input-action input, .input-group input, .input-group select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
  padding: 9px 11px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.025);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field textarea { min-height: 76px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--muted-2); opacity: .88; }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover, .select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .select:focus,
.input-action input:focus, .input-group input:focus, .input-group select:focus {
  border-color: rgba(99,102,241,.72);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.select { appearance: auto; }
.select.compact { width: auto; min-width: 130px; min-height: 38px; padding: 8px 32px 8px 11px; }
.input-action { display: grid; grid-template-columns: minmax(0,1fr) 40px; }
.input-action input { border-radius: 11px 0 0 11px; }
.input-action button {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 11px 11px 0;
  background: var(--surface-strong);
  color: var(--muted);
}
.input-action button:hover { color: var(--primary); }
.input-group { display: grid; grid-template-columns: minmax(0,1fr) 92px; }
.input-group input { border-radius: 11px 0 0 11px; }
.input-group select { border-left: 0; border-radius: 0 11px 11px 0; }
.field-error { margin-top: 5px; color: var(--danger); font-size: 11px; font-weight: 650; }
[aria-invalid="true"] { border-color: rgba(220,38,38,.68) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important; }

.logo-dropzone {
  display: grid;
  min-height: 148px;
  place-items: center;
  overflow: hidden;
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(99,102,241,.045), rgba(14,165,233,.035)),
    var(--surface-soft);
  padding: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.logo-dropzone:hover, .logo-dropzone.dragging { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); transform: translateY(-1px); }

.items-scroll { overflow-x: auto; padding: 0 18px 18px; }
.items-header, .item-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 68px 72px 92px 76px 76px 104px 38px;
  align-items: center;
  gap: 8px;
  min-width: 790px;
}
.items-header {
  padding: 0 0 8px 34px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.items-container { display: grid; gap: 9px; }
.item-row {
  position: relative;
  grid-template-columns: 26px minmax(210px,1fr) 68px 72px 92px 76px 76px 104px 38px;
  min-width: 824px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  padding: 9px;
  box-shadow: var(--shadow-xs);
}
.item-row:hover { border-color: var(--border-strong); background: var(--surface); }
.item-row.dragging { opacity: .55; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.10); }
.drag-handle { color: var(--muted-2); cursor: grab; user-select: none; text-align: center; }
.drag-handle:active { cursor: grabbing; }
.item-main { display: grid; min-width: 0; gap: 4px; }
.item-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 7px 8px;
  color: var(--text);
  font-size: 12px;
}
.item-row input:hover { border-color: var(--border); background: var(--surface); }
.item-row input:focus { border-color: rgba(99,102,241,.58); background: var(--surface); outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.09); }
.item-name { font-weight: 760; }
.item-description { color: var(--muted) !important; font-size: 11px !important; }
.suffix-input { position: relative; min-width: 0; }
.suffix-input input { padding-right: 20px; }
.suffix-input span { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); color: var(--muted-2); font-size: 10px; pointer-events: none; }
.item-total { color: var(--text); font-size: 12px; font-weight: 820; text-align: right; }
.item-actions { position: relative; }
.item-menu-btn { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: var(--muted); }
.item-menu-btn:hover { background: var(--surface-strong); color: var(--text); }
.item-menu { position: absolute; z-index: 45; top: 34px; right: 0; width: 142px; padding: 5px; }

.summary-list { display: grid; gap: 10px; }
.summary-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.summary-list dd { color: var(--text); font-weight: 740; }
.summary-list .summary-total { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 13px; color: var(--text); font-size: 14px; font-weight: 830; }
.summary-list .summary-total dd { font-size: 17px; }
.summary-list .summary-balance { border-radius: 12px; background: var(--primary-soft); padding: 11px 12px; color: var(--primary); font-weight: 820; }
.summary-list .summary-balance dd { color: var(--primary); font-size: 16px; }
.sticky-summary { position: sticky; top: calc(var(--header-h) + 14px); }

.preview-panel {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--border);
  background:
    radial-gradient(circle at 90% 0%, rgba(99,102,241,.12), transparent 28rem),
    color-mix(in srgb, var(--surface-strong) 86%, var(--app-bg));
}
.preview-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 83%, transparent);
  padding: 10px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.preview-stage { display: grid; min-height: calc(100vh - var(--header-h) - 58px); place-items: start center; overflow: auto; padding: 24px; }
.invoice-paper {
  position: relative;
  width: 794px;
  min-height: 1123px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 4px;
  background: #fff;
  color: #172033;
  padding: 58px 58px 44px;
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
  transform-origin: top center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.invoice-accent { position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg,#4f46e5,#7c3aed 56%,#0ea5e9); }
.invoice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 28px; }
.invoice-brand-block { display: flex; align-items: center; gap: 15px; min-width: 0; }
.invoice-logo { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 12px; object-fit: contain; }
.invoice-brand-block h2 { color: #0f172a; font-size: 25px; font-weight: 850; line-height: 1.16; letter-spacing: -.035em; }
.invoice-brand-block p { margin-top: 5px; color: #64748b; font-size: 12px; }
.invoice-title-block { text-align: right; }
.invoice-word { color: #111827; font-size: 34px; font-weight: 900; letter-spacing: .12em; line-height: 1; }
.status-badge, .status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
}
.status-badge { margin-top: 13px; border: 1px solid #dbe3ee; background: #f8fafc; padding: 6px 10px; color: #475569; font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.status-dot { padding: 4px 8px; font-size: 10px; }
.status-Paid { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-Pending { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.status-Overdue, .status-Cancelled { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-Draft { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.invoice-meta-grid { display: grid; grid-template-columns: 1fr 1fr .85fr; gap: 28px; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 25px 0; }
.invoice-label { margin-bottom: 7px; color: #64748b; font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.invoice-meta-grid address, #previewCustomerDetails { color: #334155; font-size: 11px; line-height: 1.65; white-space: pre-line; }
.invoice-meta-list { display: grid; align-content: start; gap: 8px; }
.invoice-meta-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.invoice-meta-list dt { color: #64748b; }
.invoice-meta-list dd { color: #172033; font-weight: 760; text-align: right; }
.invoice-table-wrap { margin-top: 28px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 11px; }
.invoice-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.invoice-table th { background: #f8fafc; padding: 11px 9px; color: #64748b; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.invoice-table td { border-top: 1px solid #edf2f7; padding: 13px 9px; color: #334155; font-size: 10px; vertical-align: top; }
.invoice-table th:nth-child(1), .invoice-table td:nth-child(1) { width: 34px; }
.invoice-table th:nth-child(3), .invoice-table td:nth-child(3) { width: 48px; }
.invoice-table th:nth-child(4), .invoice-table td:nth-child(4) { width: 74px; }
.invoice-table th:nth-child(5), .invoice-table td:nth-child(5), .invoice-table th:nth-child(6), .invoice-table td:nth-child(6) { width: 52px; }
.invoice-table th:last-child, .invoice-table td:last-child { width: 86px; text-align: right; }
.invoice-item-name { color: #172033; font-size: 10.5px; font-weight: 800; }
.invoice-item-description { margin-top: 3px; color: #64748b; font-size: 9px; line-height: 1.45; }
.invoice-bottom-grid { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 38px; margin-top: 28px; }
.invoice-notes { min-width: 0; color: #475569; font-size: 10px; line-height: 1.62; }
.invoice-notes > div + div { margin-top: 19px; }
.invoice-totals { display: grid; align-content: start; gap: 9px; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 16px; color: #64748b; font-size: 10px; }
.invoice-totals dd { color: #1e293b; font-weight: 740; }
.invoice-grand-total { margin-top: 4px; border-top: 1px solid #dbe3ee; padding-top: 12px; color: #0f172a !important; font-size: 12px !important; font-weight: 850; }
.invoice-grand-total dd { font-size: 16px; }
.invoice-balance { border-radius: 9px; background: #eef2ff; padding: 10px; color: #4338ca !important; font-weight: 850; }
.invoice-balance dd { color: #4338ca; font-size: 13px; }
.qr-signature-row { display: flex; align-items: flex-end; gap: 28px; padding-top: 8px; }
.qr-code { width: 82px; height: 82px; flex: 0 0 auto; overflow: hidden; }
.qr-code img, .qr-code canvas, .qr-code table { width: 100% !important; height: 100% !important; }
.signature-block { width: 180px; text-align: center; color: #64748b; font-size: 9px; }
.signature-line { height: 36px; border-bottom: 1px solid #94a3b8; }
.signature-block p { margin-top: 6px; }
.invoice-terms { margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 18px; color: #64748b; font-size: 9px; line-height: 1.55; }
.invoice-footer { position: absolute; right: 58px; bottom: 28px; left: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e2e8f0; padding-top: 13px; color: #94a3b8; font-size: 8px; }

/* Invoice templates */
.template-minimal .invoice-accent { height: 2px; background: #111827; }
.template-minimal .invoice-word { font-weight: 650; letter-spacing: .08em; }
.template-minimal .invoice-table-wrap { border-radius: 0; border-right: 0; border-left: 0; }
.template-minimal .invoice-table th { background: transparent; }
.template-corporate .invoice-accent { height: 16px; background: #0f3b66; }
.template-corporate .invoice-word, .template-corporate .invoice-brand-block h2 { color: #0f3b66; }
.template-corporate .invoice-table th { background: #0f3b66; color: #fff; }
.template-corporate .invoice-balance { background: #eaf2f8; color: #0f3b66 !important; }
.template-corporate .invoice-balance dd { color: #0f3b66; }
.template-elegant { font-family: Georgia, "Times New Roman", serif; }
.template-elegant .invoice-accent { height: 5px; background: linear-gradient(90deg,#8b6f47,#c8ab74,#8b6f47); }
.template-elegant .invoice-word { color: #705638; font-weight: 500; letter-spacing: .18em; }
.template-elegant .invoice-brand-block h2 { font-family: Georgia, "Times New Roman", serif; color: #4b3b2c; font-weight: 600; }
.template-elegant .invoice-table th { background: #fbf8f1; color: #705638; }
.template-elegant .invoice-balance { background: #fbf5e9; color: #705638 !important; }
.template-elegant .invoice-balance dd { color: #705638; }
.template-dark { background: #111827; color: #e5e7eb; }
.template-dark .invoice-accent { background: linear-gradient(90deg,#818cf8,#a78bfa,#38bdf8); }
.template-dark .invoice-brand-block h2, .template-dark .invoice-word, .template-dark .invoice-meta-list dd, .template-dark .invoice-item-name, .template-dark .invoice-totals dd { color: #f8fafc; }
.template-dark .invoice-brand-block p, .template-dark .invoice-label, .template-dark .invoice-meta-list dt, .template-dark .invoice-meta-grid address, .template-dark #previewCustomerDetails, .template-dark .invoice-item-description, .template-dark .invoice-notes, .template-dark .invoice-totals > div, .template-dark .invoice-terms, .template-dark .invoice-footer { color: #94a3b8; }
.template-dark .invoice-meta-grid, .template-dark .invoice-terms, .template-dark .invoice-footer { border-color: #334155; }
.template-dark .invoice-table-wrap { border-color: #334155; }
.template-dark .invoice-table th { background: #1e293b; color: #cbd5e1; }
.template-dark .invoice-table td { border-color: #263449; color: #cbd5e1; }
.template-dark .invoice-grand-total { border-color: #334155; color: #fff !important; }
.template-dark .invoice-balance { background: rgba(99,102,241,.18); color: #c7d2fe !important; }
.template-dark .invoice-balance dd { color: #c7d2fe; }
.template-classic { border: 9px double #334155; padding: 49px 49px 39px; font-family: Georgia, "Times New Roman", serif; }
.template-classic .invoice-accent { display: none; }
.template-classic .invoice-word { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: .14em; }
.template-classic .invoice-table-wrap { border-radius: 0; }
.template-classic .invoice-table th { background: #f1f5f9; }

.stats-grid { display: grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: 14px; }
.stat-card {
  border: 1px solid var(--border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.stat-label { color: var(--muted); font-size: 11px; font-weight: 750; }
.stat-value { margin-top: 9px; color: var(--text); font-size: 26px; font-weight: 880; letter-spacing: -.045em; }
.stat-hint { margin-top: 6px; color: var(--muted-2); font-size: 11px; }
.dashboard-card { margin-bottom: 0; }
.saved-list, .recent-list { display: grid; gap: 9px; }
.saved-item, .recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  padding: 13px;
}
.saved-title, .recent-title { color: var(--text); font-size: 13px; font-weight: 800; }
.saved-meta, .recent-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }
.revenue-chart { display: flex; height: 255px; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--border); padding: 16px 4px 0; }
.chart-bar-wrap { display: flex; height: 100%; flex: 1 1 0; flex-direction: column; justify-content: flex-end; gap: 7px; text-align: center; }
.chart-bar { min-height: 2px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg,#818cf8,#4f46e5); box-shadow: 0 7px 16px rgba(79,70,229,.18); }
.chart-label { color: var(--muted-2); font-size: 9px; }

.floating-menu { position: fixed; z-index: 100; top: 118px; right: 22px; width: 176px; padding: 6px; }
.modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.56); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-card {
  position: relative;
  width: min(620px,100%);
  max-height: min(82vh,760px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .18s ease-out;
}
.modal-lg { width: min(920px,100%); }
.modal-sm { width: min(430px,100%); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal-header h2 { margin-top: 3px; color: var(--text); font-size: 21px; font-weight: 850; letter-spacing: -.025em; }
.loading-overlay { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(2,6,23,.62); color: #fff; backdrop-filter: blur(7px); }
.spinner { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.24); border-top-color: #fff; border-radius: 999px; animation: spin .8s linear infinite; }
.toast-region { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; width: min(390px,calc(100vw - 36px)); gap: 9px; }
.toast { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 95%, transparent); padding: 12px 13px; color: var(--text); box-shadow: var(--shadow-md); backdrop-filter: blur(18px); animation: toast-in .18s ease-out; }
.toast-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 900; }
.mobile-actions { position: sticky; bottom: 10px; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 9px; box-shadow: var(--shadow-md); backdrop-filter: blur(16px); }
.site-footer { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.site-footer a:hover { color: var(--primary); }

.high-contrast { --border: #94a3b8; --border-strong: #64748b; }
.high-contrast .form-card, .high-contrast .dashboard-card, .high-contrast .stat-card { border-width: 2px; }

@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .workspace-grid { grid-template-columns: minmax(580px,1.12fr) minmax(420px,.88fr); align-items: stretch; }
  .editor-panel { padding: 26px; }
  .preview-panel { min-height: calc(100vh - var(--header-h)); }
  .preview-stage { position: sticky; top: calc(var(--header-h) + 58px); max-height: calc(100vh - var(--header-h) - 58px); }
  .mobile-actions { display: none; }
}
@media (min-width: 1280px) {
  .workspace-grid { grid-template-columns: minmax(650px,1.18fr) minmax(500px,.82fr); }
  .editor-panel { padding: 30px; }
}
@media (min-width: 1536px) {
  .workspace-grid { grid-template-columns: minmax(760px,1.24fr) minmax(560px,.76fr); }
}

@media (max-width: 1023px) {
  .app-sidebar { position: static; min-height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .preview-panel {
    position: fixed;
    z-index: 110;
    inset: 0;
    display: none;
    overflow: auto;
    border: 0;
  }
  .preview-panel.mobile-open { display: block; }
  .preview-toolbar { top: 0; }
  .preview-stage { min-height: calc(100vh - 58px); padding: 18px; }
  .invoice-paper { transform-origin: top center; }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .app-header .max-w-\[1800px\] { padding-right: 12px; padding-left: 12px; }
  .brand-subtitle { display: none; }
  .brand-mark { width: 35px; height: 35px; border-radius: 11px; }
  .theme-menu { top: 54px; right: 12px; }
  .editor-panel { padding: 14px 12px 24px; }
  .section-toolbar { align-items: flex-end; }
  .form-card, .dashboard-card { border-radius: 16px; padding: 16px; }
  .card-heading { align-items: flex-start; }
  .items-scroll { padding-right: 12px; padding-left: 12px; }
  .sticky-summary { position: static; }
  .saved-item, .recent-item { align-items: flex-start; flex-direction: column; }
  .invoice-paper { width: 794px; }
  .modal { padding: 10px; }
  .modal-card { border-radius: 16px; padding: 16px; }
  .site-footer { padding-bottom: 72px; }
}
@media (max-width: 520px) {
  .page-title { font-size: 22px; }
  .section-toolbar { display: grid; }
  .form-grid { grid-template-columns: 1fr; }
  .md\:col-span-2 { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr; }
  .btn { padding-right: 11px; padding-left: 11px; }
}

@media print {
  .invoice-paper { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .template-classic { border: 9px double #334155 !important; }
}

/* State utility must win over component display declarations. */
.hidden { display: none !important; }
@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex !important; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .lg\:block { display: block !important; }
}